@visns-studio/visns-components 5.15.7 → 5.15.9

package/src/components/CameraPlacement.jsx

@@ -3,14 +3,15 @@ import mapboxgl from 'mapbox-gl';
 import MapboxGeocoder from '@mapbox/mapbox-gl-geocoder';
 import html2canvas from 'html2canvas';
 import Swal from 'sweetalert2';
+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,
@@ -30,14 +31,18 @@ import {
 } from './data/verkadaCameras';
 import CameraIcon from './utils/CameraIcon';
 
-const CameraPlacement = () => {
+const CameraPlacement = ({ userProfile }) => {
     const [cameras, setCameras] = useState([]);
     const [selectedCamera, setSelectedCamera] = useState(null);
     const [showModal, setShowModal] = useState(false);
     const [map, setMap] = useState(null);
-    const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
     const [mode, setMode] = useState('image'); // 'image' or 'map' - default to image
     const [uploadedImage, setUploadedImage] = useState(null);
+    const [projectName, setProjectName] = useState('');
+    const [sidebarTab, setSidebarTab] = useState('cameras'); // 'cameras' or 'projects'
+    const [savedProjects, setSavedProjects] = useState([]);
+    const [selectedProject, setSelectedProject] = useState(null);
+    const [loadingProjects, setLoadingProjects] = useState(false);
     const mapContainer = useRef(null);
     const mapRef = useRef(null);
     const geocoderRef = useRef(null);
@@ -46,6 +51,7 @@ const CameraPlacement = () => {
     const [isDragOver, setIsDragOver] = useState(false);
     const [isRotating, setIsRotating] = useState(false);
 
+
     // Mapbox configuration
     const MAPBOX_ACCESS_TOKEN =
         'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
@@ -66,7 +72,6 @@ const CameraPlacement = () => {
                         try {
                             map.remove();
                         } catch (error) {
-                            console.warn('Error removing map:', error);
                         }
                         setMap(null);
                     }
@@ -163,7 +168,6 @@ const CameraPlacement = () => {
                             try {
                                 map.remove();
                             } catch (error) {
-                                console.warn('Error removing map:', error);
                             }
                             setMap(null);
                         }
@@ -332,8 +336,43 @@ const CameraPlacement = () => {
         [map, cameras]
     );
 
-    // Save placement as JSON file
-    const saveAsFile = useCallback(() => {
+    // Fetch saved projects (lightweight - no heavy JSON fields)
+    const fetchSavedProjects = useCallback(async () => {
+        if (!userProfile?.id) return;
+
+        setLoadingProjects(true);
+        try {
+            const response = await fetch('/ajax/cameraPlacement/table', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+                body: JSON.stringify({
+                    page: 1,
+                    per_page: 100,
+                    order_by: 'created_at',
+                    order: 'desc'
+                }),
+            });
+
+            const responseText = await response.text();
+            const result = JSON.parse(responseText);
+
+            if (result.data && Array.isArray(result.data)) {
+                setSavedProjects(result.data);
+            } else if (result.data && Array.isArray(result.data.data)) {
+                setSavedProjects(result.data.data);
+            }
+        } catch (error) {
+        } finally {
+            setLoadingProjects(false);
+        }
+    }, [userProfile]);
+
+    // Save placement to database
+    const saveToDatabase = useCallback(async () => {
+
         if (!cameras.length && !uploadedImage) {
             Swal.fire({
                 icon: 'warning',
@@ -344,488 +383,520 @@ const CameraPlacement = () => {
             return;
         }
 
-        const saveData = {
-            version: '1.0',
-            timestamp: new Date().toISOString(),
-            image: uploadedImage
-                ? {
-                      src: uploadedImage,
-                      name: 'uploaded-image',
-                  }
-                : null,
-            mode: mode,
-            cameras: cameras.map((camera) => ({
-                id: camera.id,
-                name: camera.name,
-                customName: camera.customName,
-                x: camera.x,
-                y: camera.y,
-                direction: camera.direction,
-                verkadaModel: camera.verkadaModel,
-                timestamp: camera.timestamp,
-            })),
-        };
+        // Enhanced camera data validation
+        if (cameras.length === 0) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'No Cameras to Save',
+                text: 'Please place at least one camera before saving. Click on the image to add cameras.',
+                confirmButtonColor: '#f59e0b',
+            });
+            return;
+        }
 
-        const dataStr = JSON.stringify(saveData, null, 2);
-        const dataUri =
-            'data:application/json;charset=utf-8,' +
-            encodeURIComponent(dataStr);
-
-        const exportFileDefaultName = `camera-placement-${
-            new Date().toISOString().split('T')[0]
-        }.json`;
-
-        const linkElement = document.createElement('a');
-        linkElement.setAttribute('href', dataUri);
-        linkElement.setAttribute('download', exportFileDefaultName);
-        linkElement.click();
-
-        // Show success message
-        Swal.fire({
-            icon: 'success',
-            title: 'File Saved!',
-            text: `Camera placement saved as ${exportFileDefaultName}`,
-            timer: 3000,
-            showConfirmButton: false,
-            toast: true,
-            position: 'top-end',
+        // Validate each camera has required data
+        const invalidCameras = cameras.filter(camera => {
+            const issues = [];
+            
+            if (!camera.id) issues.push('missing ID');
+            if (typeof camera.x !== 'number' || isNaN(camera.x)) issues.push('invalid X coordinate');
+            if (typeof camera.y !== 'number' || isNaN(camera.y)) issues.push('invalid Y coordinate');
+            if (!camera.name || camera.name.trim() === '') issues.push('missing name');
+            if (typeof camera.direction !== 'number' || isNaN(camera.direction)) issues.push('invalid direction');
+            
+            return issues.length > 0;
         });
-    }, [cameras, uploadedImage, mode]);
 
-    // Load placement from JSON file
-    const loadFromFile = useCallback(() => {
-        const input = document.createElement('input');
-        input.type = 'file';
-        input.accept = '.json';
+        if (invalidCameras.length > 0) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Invalid Camera Data',
+                text: `${invalidCameras.length} camera(s) have invalid data. Please check all cameras have proper positioning, names, and direction values.`,
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
 
-        input.onchange = (event) => {
-            const file = event.target.files[0];
-            if (!file) return;
+        // Validate cameras_data array will not be empty
+        const validCamerasData = cameras.map((camera) => ({
+            id: camera.id,
+            name: camera.name,
+            customName: camera.customName,
+            x: camera.x,
+            y: camera.y,
+            direction: camera.direction,
+            verkadaModel: camera.verkadaModel,
+            timestamp: camera.timestamp,
+        })).filter(camera => camera.id && camera.name);
+
+        if (validCamerasData.length === 0) {
+            Swal.fire({
+                icon: 'error',
+                title: 'No Valid Camera Data',
+                text: 'All cameras seem to have missing or invalid data. Please recreate your cameras.',
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
+
+        if (!projectName.trim()) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'Project Name Required',
+                text: 'Please enter a project name before saving.',
+                confirmButtonColor: '#8b5cf6',
+            });
+            return;
+        }
 
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    const saveData = JSON.parse(e.target.result);
+        // Validate user profile
+        if (!userProfile || !userProfile.id) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Authentication Error',
+                text: 'User profile is required to save camera placements.',
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
 
-                    // Validate data structure
-                    if (!saveData.version || !Array.isArray(saveData.cameras)) {
-                        Swal.fire({
-                            icon: 'error',
-                            title: 'Invalid File',
-                            text: 'Please select a valid camera placement file.',
-                            confirmButtonColor: '#f59e0b',
-                        });
-                        return;
-                    }
+        // Validate mode
+        if (!mode || !['image', 'map'].includes(mode)) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Invalid Mode',
+                text: 'Invalid placement mode. Please refresh the page and try again.',
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
 
-                    // Load image if present
-                    if (saveData.image && saveData.image.src) {
-                        setUploadedImage(saveData.image.src);
-                    }
+        try {
+            // Check if we're updating an existing project or creating a new one
+            const isUpdating = selectedProject && selectedProject.id;
+            const method = isUpdating ? 'PUT' : 'POST';
+            const url = isUpdating ? `/ajax/cameraPlacement/${selectedProject.id}` : '/ajax/cameraPlacement';
+
+            const saveData = {
+                name: projectName.trim(),
+                project_name: projectName.trim(),
+                version: '1.0',
+                mode: mode,
+                user_id: userProfile.id,
+                image_data: uploadedImage
+                    ? {
+                          src: uploadedImage,
+                          name: 'uploaded-image',
+                      }
+                    : null,
+                image_name: uploadedImage ? 'uploaded-image' : null,
+                cameras_data: validCamerasData,
+            };
 
-                    // Set mode
-                    if (saveData.mode) {
-                        setMode(saveData.mode);
-                    }
+            const response = await fetch(url, {
+                method: method,
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+                body: JSON.stringify(saveData),
+            });
 
-                    // Load cameras
-                    setCameras(saveData.cameras || []);
+            const responseText = await response.text();
 
-                    Swal.fire({
-                        icon: 'success',
-                        title: 'File Loaded!',
-                        text: `Successfully loaded ${
-                            saveData.cameras?.length || 0
-                        } cameras from ${file.name}`,
-                        confirmButtonColor: '#f59e0b',
-                    });
-                } catch (error) {
-                    console.error('Error loading file:', error);
-                    Swal.fire({
-                        icon: 'error',
-                        title: 'File Error',
-                        text: "Error reading file. Please ensure it's a valid JSON file.",
-                        confirmButtonColor: '#f59e0b',
-                    });
+            let result;
+            try {
+                result = JSON.parse(responseText);
+            } catch (parseError) {
+                throw new Error(`Server returned invalid JSON. Status: ${response.status}, Response: ${responseText.substring(0, 200)}`);
+            }
+
+            // DynamicController returns { data: {...}, error: "" } format
+            if (result.data && !result.error) {
+                // Update the selectedProject with the latest data if we were updating
+                if (isUpdating) {
+                    setSelectedProject(result.data);
                 }
-            };
-            reader.readAsText(file);
-        };
 
-        input.click();
+                Swal.fire({
+                    icon: 'success',
+                    title: isUpdating ? 'Updated!' : 'Saved!',
+                    text: `Camera placement "${projectName}" ${isUpdating ? 'updated' : 'saved'} successfully`,
+                    timer: 3000,
+                    showConfirmButton: false,
+                    toast: true,
+                    position: 'top-end',
+                });
+
+                // Refresh the projects list to show updated data
+                fetchSavedProjects();
+            } else {
+                const errorMessage = result.error || result.message || 'Save failed';
+                const errorDetails = result.errors ? JSON.stringify(result.errors) : '';
+                throw new Error(`${errorMessage}${errorDetails ? ` - Details: ${errorDetails}` : ''}`);
+            }
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Save Failed',
+                text: error.message || 'Failed to save camera placement. Please try again.',
+                confirmButtonColor: '#ef4444',
+            });
+        }
+    }, [cameras, uploadedImage, mode, projectName, userProfile, selectedProject, fetchSavedProjects]);
+
+    // Fetch full project data with heavy JSON fields
+    const fetchFullProject = useCallback(async (projectId) => {
+        try {
+            const response = await fetch(`/ajax/cameraPlacement/${projectId}`, {
+                headers: {
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+            });
+
+            const responseText = await response.text();
+            const result = JSON.parse(responseText);
+
+            if (result.id) {
+                // Direct object response (not wrapped in data)
+                return result;
+            } else if (result.data) {
+                // Wrapped in data object
+                return result.data;
+            } else {
+                throw new Error('Failed to fetch full project data');
+            }
+        } catch (error) {
+            throw error;
+        }
     }, []);
 
-    const exportMap = useCallback(async () => {
+    // Load a specific project
+    const loadProject = useCallback(async (lightweightProject) => {
         try {
-            if (!cameras.length) {
+            // Show loading indicator
+            const loadingToast = Swal.fire({
+                title: 'Loading Project...',
+                text: 'Fetching project data',
+                allowOutsideClick: false,
+                showConfirmButton: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                }
+            });
+
+            // Fetch full project data including heavy JSON fields
+            const fullProject = await fetchFullProject(lightweightProject.id);
+            
+            // Close loading indicator
+            Swal.close();
+
+            setSelectedProject(fullProject);
+            setProjectName(fullProject.project_name);
+            setMode(fullProject.mode);
+            
+            if (fullProject.image_data && fullProject.image_data.src) {
+                setUploadedImage(fullProject.image_data.src);
+            } else {
+                setUploadedImage(null);
+            }
+            
+            setCameras(fullProject.cameras_data || []);
+            setSidebarTab('cameras'); // Switch to cameras tab
+
+            Swal.fire({
+                icon: 'success',
+                title: 'Project Loaded!',
+                text: `Loaded "${fullProject.project_name}" with ${fullProject.cameras_data?.length || 0} cameras`,
+                timer: 2000,
+                showConfirmButton: false,
+                toast: true,
+                position: 'top-end',
+            });
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Load Failed',
+                text: 'Failed to load project. Please try again.',
+                confirmButtonColor: '#ef4444',
+            });
+        }
+    }, [fetchFullProject]);
+
+    // Fetch projects when user profile changes or sidebar switches to projects
+    useEffect(() => {
+        if (sidebarTab === 'projects' && userProfile?.id) {
+            fetchSavedProjects();
+        }
+    }, [sidebarTab, userProfile, fetchSavedProjects]);
+
+    // Initial fetch of projects when component mounts to get correct count
+    useEffect(() => {
+        if (userProfile?.id) {
+            fetchSavedProjects();
+        }
+    }, [userProfile, fetchSavedProjects]);
+
+    // Load placement from database (legacy - keeping for compatibility)
+    const loadFromDatabase = useCallback(async () => {
+        try {
+            const response = await fetch('/ajax/cameraPlacement/table', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                    'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]')?.content || '',
+                },
+                body: JSON.stringify({
+                    page: 1,
+                    per_page: 100,
+                    order_by: 'created_at',
+                    order: 'desc'
+                }),
+            });
+
+            const result = await response.json();
+
+            if (result.data && result.data.length > 0) {
+                const placements = result.data;
+
+                // Show placement selection modal
+                const { value: selectedPlacement } = await Swal.fire({
+                    title: 'Load Camera Placement',
+                    html: `
+                        <div style="text-align: left; max-height: 400px; overflow-y: auto;">
+                            ${placements.map(placement => `
+                                <div style="padding: 12px; margin: 8px 0; border: 1px solid #e5e7eb; border-radius: 8px; cursor: pointer; transition: background-color 0.2s;" 
+                                     onmouseover="this.style.backgroundColor='#f9fafb'" 
+                                     onmouseout="this.style.backgroundColor='white'"
+                                     onclick="this.classList.toggle('selected'); document.querySelectorAll('.placement-item').forEach(el => el !== this && el.classList.remove('selected'));"
+                                     class="placement-item"
+                                     data-placement-id="${placement.id}">
+                                    <div style="font-weight: 600; color: #1f2937;">${placement.project_name}</div>
+                                    <div style="font-size: 14px; color: #6b7280; margin-top: 4px;">
+                                        ${placement.cameras_count} cameras • ${placement.mode} mode
+                                    </div>
+                                    <div style="font-size: 12px; color: #9ca3af; margin-top: 4px;">
+                                        Created: ${new Date(placement.created_at).toLocaleDateString()}
+                                    </div>
+                                </div>
+                            `).join('')}
+                        </div>
+                        <style>
+                            .placement-item.selected {
+                                background-color: #dbeafe !important;
+                                border-color: #3b82f6 !important;
+                            }
+                        </style>
+                    `,
+                    showCancelButton: true,
+                    confirmButtonText: 'Load Selected',
+                    cancelButtonText: 'Cancel',
+                    confirmButtonColor: '#3b82f6',
+                    preConfirm: () => {
+                        const selectedElement = document.querySelector('.placement-item.selected');
+                        if (!selectedElement) {
+                            Swal.showValidationMessage('Please select a placement to load');
+                            return false;
+                        }
+                        return selectedElement.getAttribute('data-placement-id');
+                    }
+                });
+
+                if (selectedPlacement) {
+                    const placement = placements.find(p => p.id == selectedPlacement);
+                    if (placement) {
+                        // Load the placement data
+                        setProjectName(placement.project_name);
+                        setMode(placement.mode);
+                        
+                        if (placement.image_data && placement.image_data.src) {
+                            setUploadedImage(placement.image_data.src);
+                        } else {
+                            setUploadedImage(null);
+                        }
+                        
+                        setCameras(placement.cameras_data || []);
+
+                        Swal.fire({
+                            icon: 'success',
+                            title: 'Loaded!',
+                            text: `Successfully loaded "${placement.project_name}" with ${placement.cameras_count} cameras`,
+                            timer: 3000,
+                            showConfirmButton: false,
+                            toast: true,
+                            position: 'top-end',
+                        });
+                    }
+                }
+            } else {
                 Swal.fire({
-                    icon: 'warning',
-                    title: 'No Cameras',
-                    text: 'Please add cameras first before exporting.',
-                    confirmButtonColor: '#10b981',
+                    icon: 'info',
+                    title: 'No Saved Placements',
+                    text: 'You have no saved camera placements yet.',
+                    confirmButtonColor: '#3b82f6',
                 });
-                return;
             }
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Load Failed',
+                text: 'Failed to load camera placements. Please try again.',
+                confirmButtonColor: '#ef4444',
+            });
+        }
+    }, []);
 
-            const imageContainer = document.querySelector(
-                `.${styles.imageContainer}`
-            );
-            if (!imageContainer) {
+    const exportToPDF = useCallback(async () => {
+        try {
+            if (!cameras.length) {
                 Swal.fire({
                     icon: 'warning',
-                    title: 'No Image',
-                    text: 'Please upload an image first before exporting.',
-                    confirmButtonColor: '#10b981',
+                    title: 'No Cameras',
+                    text: 'Please add cameras first before exporting.',
+                    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) {
+                        // 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) {
+                
+                // 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
+            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);
+            
+            // 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(() => {
@@ -845,10 +916,6 @@ const CameraPlacement = () => {
                 );
             }
         } catch (error) {
-            console.warn(
-                'Could not access map style, skipping FOV layer cleanup:',
-                error
-            );
         }
         existingSources.forEach((sourceId) => {
             try {
@@ -860,10 +927,6 @@ const CameraPlacement = () => {
                     map.removeSource(sourceId);
                 }
             } catch (error) {
-                console.warn(
-                    `Could not remove layer/source ${sourceId}:`,
-                    error
-                );
             }
         });
 
@@ -1113,8 +1176,18 @@ const CameraPlacement = () => {
         <div className={styles.cameraPlacement}>
             <div className={styles.header}>
                 <div className={styles.headerContent}>
-                    <h1 className={styles.title}>Site Layout Planner</h1>
+                    <div className={styles.titleSection}>
+                        <h1 className={styles.title}>Site Map Planner</h1>
+                    </div>
                     <div className={styles.controls}>
+                        <input
+                            type="text"
+                            placeholder="Project name..."
+                            value={projectName}
+                            onChange={(e) => setProjectName(e.target.value)}
+                            className={styles.projectInput}
+                            maxLength={100}
+                        />
                         <IconButton
                             icon={Upload}
                             onClick={() => fileInputRef.current?.click()}
@@ -1123,33 +1196,16 @@ const CameraPlacement = () => {
                         />
                         <IconButton
                             icon={Save}
-                            onClick={saveAsFile}
+                            onClick={saveToDatabase}
                             disabled={!cameras.length && !uploadedImage}
-                            tooltip="Save camera placement as JSON file"
+                            tooltip="Save camera placement to database"
                             className={styles.saveFileBtn}
                         />
-                        <IconButton
-                            icon={FolderOpen}
-                            onClick={loadFromFile}
-                            tooltip="Load camera placement from JSON file"
-                            className={styles.loadFileBtn}
-                        />
-                        <IconButton
-                            icon={sidebarCollapsed ? Eye : EyeOff}
-                            onClick={() =>
-                                setSidebarCollapsed(!sidebarCollapsed)
-                            }
-                            tooltip={`${
-                                sidebarCollapsed ? 'Show' : 'Hide'
-                            } Cameras`}
-                        />
                         <IconButton
                             icon={Download}
-                            onClick={exportMap}
-                            disabled={mode === 'image' && !uploadedImage}
-                            tooltip={`Export ${
-                                mode === 'map' ? 'Map' : 'Image'
-                            }`}
+                            onClick={exportToPDF}
+                            disabled={!cameras.length}
+                            tooltip="Export to PDF Report"
                             className={styles.exportBtn}
                         />
                     </div>
@@ -1160,9 +1216,7 @@ const CameraPlacement = () => {
                 <div
                     className={`${styles.imageContainer} ${
                         uploadedImage ? styles.addMode : ''
-                    } ${sidebarCollapsed ? styles.sidebarCollapsed : ''} ${
-                        isDragOver ? styles.dragOver : ''
-                    }`}
+                    } ${isDragOver ? styles.dragOver : ''}`}
                     ref={imageContainer}
                     onClick={handleImageClick}
                     onDragOver={handleDragOver}
@@ -1602,10 +1656,6 @@ const CameraPlacement = () => {
                                                                 rotationHandle.style
                                                             ) {
                                                                 rotationHandle.style.transform = `rotate(${newRotation}deg)`;
-                                                            } else {
-                                                                console.error(
-                                                                    'Rotation handle is null or has no style property'
-                                                                );
                                                             }
 
                                                             // Update camera direction
@@ -1684,56 +1734,51 @@ const CameraPlacement = () => {
                         </div>
                     )}
                 </div>
-            </div>
 
-            {/* Hidden file input */}
-            <input
-                type="file"
-                ref={fileInputRef}
-                onChange={handleImageUpload}
-                accept="image/*"
-                style={{ display: 'none' }}
-            />
-
-            <div
-                className={`${styles.sidebar} ${
-                    sidebarCollapsed ? styles.collapsed : ''
-                }`}
-            >
+                <div className={styles.sidebar}>
                 <div className={styles.sidebarHeader}>
-                    <h3 className={styles.sidebarTitle}>Camera List</h3>
-                    <p className={styles.cameraCount}>
-                        {cameras.length} camera
-                        {cameras.length !== 1 ? 's' : ''} placed
-                    </p>
-                </div>
-
-                <div className={styles.camerasList}>
-                    {cameras.length === 0 ? (
-                        <div
-                            style={{
-                                textAlign: 'center',
-                                color: '#6c757d',
-                                padding: '40px 20px',
-                                fontStyle: 'italic',
-                            }}
+                    <div className={styles.sidebarTabs}>
+                        <button 
+                            className={`${styles.tabButton} ${sidebarTab === 'cameras' ? styles.active : ''}`}
+                            onClick={() => setSidebarTab('cameras')}
                         >
-                            <div>
-                                Upload an image first, then click anywhere on it
-                                to place cameras
-                            </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>
+                            Cameras
+                            <span className={styles.tabCount}>({cameras.length})</span>
+                        </button>
+                        <button 
+                            className={`${styles.tabButton} ${sidebarTab === 'projects' ? styles.active : ''}`}
+                            onClick={() => setSidebarTab('projects')}
+                        >
+                            Projects
+                            <span className={styles.tabCount}>({savedProjects.length})</span>
+                        </button>
+                    </div>
+                    {selectedProject && sidebarTab === 'cameras' && (
+                        <div className={styles.currentProject}>
+                            <span className={styles.projectLabel}>Current:</span>
+                            <span className={styles.projectName}>{selectedProject.project_name}</span>
                         </div>
-                    ) : (
+                    )}
+                </div>
+
+                <div className={styles.sidebarContent}>
+                    {sidebarTab === 'cameras' ? (
+                        <div className={styles.camerasList}>
+                            {cameras.length === 0 ? (
+                                <div className={styles.emptyState}>
+                                    <div>
+                                        {selectedProject 
+                                            ? `No cameras in "${selectedProject.project_name}"`
+                                            : "Upload an image first, then click anywhere on it to place cameras"
+                                        }
+                                    </div>
+                                    <div className={styles.emptyStateSubtext}>
+                                        Once placed, you can drag cameras to reposition
+                                        them and use the rotation handle to adjust
+                                        direction
+                                    </div>
+                                </div>
+                            ) : (
                         cameras.map((camera) => {
                             const verkadaCamera = camera.verkadaModel
                                 ? getCameraById(camera.verkadaModel)
@@ -2185,9 +2230,73 @@ const CameraPlacement = () => {
                                 </div>
                             );
                         })
+                            )}
+                        </div>
+                    ) : (
+                        <div className={styles.projectsList}>
+                            {loadingProjects ? (
+                                <div className={styles.loadingState}>
+                                    <div>Loading projects...</div>
+                                </div>
+                            ) : savedProjects.length === 0 ? (
+                                <div className={styles.emptyState}>
+                                    <div>No saved projects found</div>
+                                    <div className={styles.emptyStateSubtext}>
+                                        Create and save your first camera placement project
+                                    </div>
+                                </div>
+                            ) : (
+                                savedProjects.map((project) => (
+                                    <div 
+                                        key={project.id} 
+                                        className={`${styles.projectItem} ${selectedProject?.id === project.id ? styles.selected : ''}`}
+                                        onClick={() => loadProject(project)}
+                                    >
+                                        <div className={styles.projectHeader}>
+                                            <h4 className={styles.projectTitle}>
+                                                {project.project_name}
+                                            </h4>
+                                            <div className={styles.projectMeta}>
+                                                <span className={styles.projectMode}>
+                                                    {project.mode}
+                                                </span>
+                                                <span className={styles.projectDate}>
+                                                    {new Date(project.created_at).toLocaleDateString()}
+                                                </span>
+                                            </div>
+                                        </div>
+                                        <div className={styles.projectInfo}>
+                                            <span className={styles.cameraCount}>
+                                                {project.cameras_count || 0} cameras
+                                            </span>
+                                            {project.image_data && (
+                                                <span className={styles.hasImage}>
+                                                    📷 Image
+                                                </span>
+                                            )}
+                                        </div>
+                                        {project.description && (
+                                            <div className={styles.projectDescription}>
+                                                {project.description}
+                                            </div>
+                                        )}
+                                    </div>
+                                ))
+                            )}
+                        </div>
                     )}
                 </div>
             </div>
+            </div>
+
+            {/* Hidden file input */}
+            <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleImageUpload}
+                accept="image/*"
+                style={{ display: 'none' }}
+            />
 
             {showModal && selectedCamera && (
                 <CameraSelectionModal