@visns-studio/visns-components 5.15.8 → 5.15.10

package/src/components/CameraPlacement.jsx

@@ -12,8 +12,6 @@ import {
     Upload,
     Save,
     FolderOpen,
-    Eye,
-    EyeOff,
     Download,
     FileImage,
     Lightbulb,
@@ -33,22 +31,28 @@ 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);
     const imageContainer = useRef(null);
     const fileInputRef = useRef(null);
+    const jsonFileInputRef = useRef(null);
     const [isDragOver, setIsDragOver] = useState(false);
     const [isRotating, setIsRotating] = useState(false);
 
+
     // Mapbox configuration
     const MAPBOX_ACCESS_TOKEN =
         'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
@@ -69,7 +73,6 @@ const CameraPlacement = () => {
                         try {
                             map.remove();
                         } catch (error) {
-                            console.warn('Error removing map:', error);
                         }
                         setMap(null);
                     }
@@ -166,7 +169,6 @@ const CameraPlacement = () => {
                             try {
                                 map.remove();
                             } catch (error) {
-                                console.warn('Error removing map:', error);
                             }
                             setMap(null);
                         }
@@ -185,6 +187,282 @@ const CameraPlacement = () => {
         [map]
     );
 
+    // Handle legacy JSON file upload
+    const handleJsonFileUpload = useCallback(async (event) => {
+        const file = event.target.files[0];
+        if (!file) return;
+
+        if (!file.name.toLowerCase().endsWith('.json')) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Invalid File Type',
+                text: 'Please select a JSON file (.json extension)',
+                confirmButtonColor: '#ef4444',
+            });
+            return;
+        }
+
+        try {
+            const text = await file.text();
+            const jsonData = JSON.parse(text);
+
+            // Show loading indicator
+            Swal.fire({
+                title: 'Processing Legacy Data...',
+                text: 'Converting and validating JSON data',
+                allowOutsideClick: false,
+                showConfirmButton: false,
+                didOpen: () => {
+                    Swal.showLoading();
+                }
+            });
+
+            // Process and validate the JSON data
+            const result = await processLegacyJsonData(jsonData);
+            
+            Swal.close();
+
+            if (result.success) {
+                // Load the processed data
+                setProjectName(result.data.projectName);
+                setMode(result.data.mode);
+                setCameras(result.data.cameras);
+                
+                if (result.data.uploadedImage) {
+                    setUploadedImage(result.data.uploadedImage);
+                }
+
+                // Clear the selected project since this is new legacy data
+                setSelectedProject(null);
+                setSidebarTab('cameras');
+
+                Swal.fire({
+                    icon: 'success',
+                    title: 'Legacy Data Loaded!',
+                    html: `
+                        <div style="text-align: left;">
+                            <p><strong>Successfully imported:</strong></p>
+                            <ul style="margin: 10px 0; padding-left: 20px;">
+                                <li>Project: "${result.data.projectName}"</li>
+                                <li>Cameras: ${result.data.cameras.length}</li>
+                                <li>Mode: ${result.data.mode}</li>
+                                ${result.data.uploadedImage ? '<li>Image: Yes</li>' : '<li>Image: No</li>'}
+                            </ul>
+                            <p style="color: #6b7280; font-size: 14px; margin-top: 15px;">
+                                <strong>Next steps:</strong> Review the imported data and save it to the database using the Save button.
+                            </p>
+                        </div>
+                    `,
+                    confirmButtonColor: '#3b82f6',
+                    confirmButtonText: 'Continue',
+                });
+            } else {
+                throw new Error(result.error);
+            }
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Import Failed',
+                html: `
+                    <div style="text-align: left;">
+                        <p>Failed to import legacy JSON file:</p>
+                        <div style="background: #f3f4f6; padding: 10px; border-radius: 4px; margin: 10px 0; font-family: monospace; font-size: 12px; max-height: 150px; overflow-y: auto;">
+                            ${error.message}
+                        </div>
+                        <p style="color: #6b7280; font-size: 14px;">
+                            Please check that the JSON file contains valid camera placement data.
+                        </p>
+                    </div>
+                `,
+                confirmButtonColor: '#ef4444',
+            });
+        }
+
+        // Clear the file input
+        event.target.value = '';
+    }, []);
+
+    // Process legacy JSON data and convert to current format
+    const processLegacyJsonData = useCallback(async (jsonData) => {
+        try {
+            // Validate basic structure
+            if (!jsonData || typeof jsonData !== 'object') {
+                throw new Error('Invalid JSON structure - expected an object');
+            }
+
+            let cameras = [];
+            let projectName = '';
+            let mode = 'image';
+            let uploadedImage = null;
+
+            // Handle different legacy JSON formats
+            
+            // Format 1: Direct camera placement export with cameras array
+            if (jsonData.cameras && Array.isArray(jsonData.cameras)) {
+                cameras = jsonData.cameras.map((camera, index) => {
+                    // Ensure required fields exist with fallbacks
+                    const id = camera.id || Date.now() + index;
+                    const name = camera.name || camera.customName || `Camera ${index + 1}`;
+                    const x = typeof camera.x === 'number' ? camera.x : (camera.position?.x || 0);
+                    const y = typeof camera.y === 'number' ? camera.y : (camera.position?.y || 0);
+                    const direction = typeof camera.direction === 'number' ? camera.direction : (camera.rotation || 0);
+                    
+                    return {
+                        id: id,
+                        name: name,
+                        customName: camera.customName || '',
+                        x: x,
+                        y: y,
+                        direction: direction,
+                        verkadaModel: camera.verkadaModel || camera.model || null,
+                        timestamp: camera.timestamp || new Date().toISOString(),
+                    };
+                });
+
+                projectName = jsonData.projectName || jsonData.name || jsonData.title || 'Imported Legacy Project';
+                mode = jsonData.mode || 'image';
+                
+                // Handle different image data formats - extract src string directly
+                if (jsonData.image && jsonData.image.src) {
+                    // Format: { "image": { "src": "data:image/png;base64,..." } }
+                    uploadedImage = jsonData.image.src;
+                } else if (jsonData.uploadedImage && jsonData.uploadedImage.src) {
+                    // Format: { "uploadedImage": { "src": "...", "name": "..." } }
+                    uploadedImage = jsonData.uploadedImage.src;
+                } else if (jsonData.uploadedImage && typeof jsonData.uploadedImage === 'string') {
+                    // Format: { "uploadedImage": "data:image/..." }
+                    uploadedImage = jsonData.uploadedImage;
+                } else if (jsonData.backgroundImage) {
+                    // Format: { "backgroundImage": "data:image/..." }
+                    uploadedImage = jsonData.backgroundImage;
+                } else {
+                    uploadedImage = null;
+                }
+            }
+            
+            // Format 2: Legacy format with different structure
+            else if (jsonData.placement || jsonData.cameraPlacement) {
+                const placement = jsonData.placement || jsonData.cameraPlacement;
+                
+                if (placement.cameras && Array.isArray(placement.cameras)) {
+                    cameras = placement.cameras.map((camera, index) => ({
+                        id: camera.id || Date.now() + index,
+                        name: camera.name || `Camera ${index + 1}`,
+                        customName: camera.customName || '',
+                        x: camera.x || 0,
+                        y: camera.y || 0,
+                        direction: camera.direction || 0,
+                        verkadaModel: camera.verkadaModel || null,
+                        timestamp: new Date().toISOString(),
+                    }));
+                }
+
+                projectName = placement.projectName || placement.name || 'Imported Legacy Project';
+                mode = placement.mode || 'image';
+                
+                // Handle different image data formats - extract src string directly
+                if (placement.image && placement.image.src) {
+                    uploadedImage = placement.image.src;
+                } else if (placement.image && typeof placement.image === 'string') {
+                    uploadedImage = placement.image;
+                } else if (placement.backgroundImage) {
+                    uploadedImage = placement.backgroundImage;
+                } else {
+                    uploadedImage = null;
+                }
+            }
+            
+            // Format 3: Simple array of cameras
+            else if (Array.isArray(jsonData)) {
+                cameras = jsonData.map((camera, index) => ({
+                    id: camera.id || Date.now() + index,
+                    name: camera.name || `Camera ${index + 1}`,
+                    customName: camera.customName || '',
+                    x: camera.x || 0,
+                    y: camera.y || 0,
+                    direction: camera.direction || 0,
+                    verkadaModel: camera.verkadaModel || null,
+                    timestamp: new Date().toISOString(),
+                }));
+
+                projectName = 'Imported Legacy Project';
+                mode = 'image';
+            }
+            
+            // Format 4: Check for other common legacy formats
+            else {
+                // Look for any array that might contain camera data
+                const possibleCameraArrays = Object.values(jsonData).filter(value => 
+                    Array.isArray(value) && value.length > 0 && 
+                    value[0] && typeof value[0] === 'object'
+                );
+
+                if (possibleCameraArrays.length > 0) {
+                    const cameraArray = possibleCameraArrays[0];
+                    cameras = cameraArray.map((camera, index) => ({
+                        id: camera.id || Date.now() + index,
+                        name: camera.name || `Camera ${index + 1}`,
+                        customName: camera.customName || '',
+                        x: camera.x || 0,
+                        y: camera.y || 0,
+                        direction: camera.direction || 0,
+                        verkadaModel: camera.verkadaModel || null,
+                        timestamp: new Date().toISOString(),
+                    }));
+
+                    projectName = jsonData.name || jsonData.title || 'Imported Legacy Project';
+                    mode = jsonData.mode || 'image';
+                    
+                    // Handle different image data formats - extract src string directly
+                    if (jsonData.image && jsonData.image.src) {
+                        uploadedImage = jsonData.image.src;
+                    } else if (jsonData.image && typeof jsonData.image === 'string') {
+                        uploadedImage = jsonData.image;
+                    } else if (jsonData.backgroundImage) {
+                        uploadedImage = jsonData.backgroundImage;
+                    } else {
+                        uploadedImage = null;
+                    }
+                } else {
+                    throw new Error('No valid camera data found in JSON file. Expected arrays of camera objects.');
+                }
+            }
+
+            // Validate that we have at least some cameras
+            if (!cameras || cameras.length === 0) {
+                throw new Error('No cameras found in the JSON file');
+            }
+
+            // Validate camera data
+            const invalidCameras = cameras.filter(camera => 
+                typeof camera.x !== 'number' || 
+                typeof camera.y !== 'number' || 
+                isNaN(camera.x) || 
+                isNaN(camera.y)
+            );
+
+            if (invalidCameras.length > 0) {
+                throw new Error(`${invalidCameras.length} cameras have invalid position data (x, y coordinates must be numbers)`);
+            }
+
+            return {
+                success: true,
+                data: {
+                    projectName: projectName,
+                    mode: mode,
+                    cameras: cameras,
+                    uploadedImage: uploadedImage
+                }
+            };
+
+        } catch (error) {
+            return {
+                success: false,
+                error: error.message
+            };
+        }
+    }, []);
+
     // Initialize Mapbox GL map
     useEffect(() => {
         if (!mapContainer.current || mode !== 'map') return;
@@ -335,8 +613,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',
@@ -347,115 +660,367 @@ 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;
+        }
 
-            const reader = new FileReader();
-            reader.onload = (e) => {
-                try {
-                    const saveData = JSON.parse(e.target.result);
+        if (!projectName.trim()) {
+            Swal.fire({
+                icon: 'warning',
+                title: 'Project Name Required',
+                text: 'Please enter a project name before saving.',
+                confirmButtonColor: '#8b5cf6',
+            });
+            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 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;
+        }
 
-                    // Load image if present
-                    if (saveData.image && saveData.image.src) {
-                        setUploadedImage(saveData.image.src);
-                    }
+        // 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;
+        }
 
-                    // Set mode
-                    if (saveData.mode) {
-                        setMode(saveData.mode);
-                    }
+        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,
+            };
 
-                    // Load cameras
-                    setCameras(saveData.cameras || []);
+            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),
+            });
 
-                    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',
-                    });
+            const responseText = await response.text();
+
+            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;
+        }
+    }, []);
+
+    // Load a specific project
+    const loadProject = useCallback(async (lightweightProject) => {
+        try {
+            // Show loading indicator
+            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: 'info',
+                    title: 'No Saved Placements',
+                    text: 'You have no saved camera placements yet.',
+                    confirmButtonColor: '#3b82f6',
+                });
+            }
+        } catch (error) {
+            Swal.fire({
+                icon: 'error',
+                title: 'Load Failed',
+                text: 'Failed to load camera placements. Please try again.',
+                confirmButtonColor: '#ef4444',
+            });
+        }
     }, []);
 
     const exportToPDF = useCallback(async () => {
@@ -501,7 +1066,6 @@ const CameraPlacement = () => {
                         });
                         mapImageData = canvas.toDataURL('image/png', 0.9);
                     } catch (error) {
-                        console.warn('Could not capture site map image:', error);
                         // Continue without image if capture fails
                     }
                 }
@@ -520,7 +1084,6 @@ const CameraPlacement = () => {
                     })
                 ).toBlob();
             } catch (pdfError) {
-                console.warn('Enhanced PDF failed, trying simple version:', pdfError);
                 
                 // Fallback to simple PDF
                 pdfBlob = await pdf(
@@ -586,7 +1149,6 @@ const CameraPlacement = () => {
                 confirmButtonText: 'Great!',
             });
         } catch (error) {
-            console.error('Error generating PDF:', error);
             
             // More specific error handling
             let errorMessage = 'Unable to generate PDF report. Please try again.';
@@ -631,10 +1193,6 @@ const CameraPlacement = () => {
                 );
             }
         } catch (error) {
-            console.warn(
-                'Could not access map style, skipping FOV layer cleanup:',
-                error
-            );
         }
         existingSources.forEach((sourceId) => {
             try {
@@ -646,10 +1204,6 @@ const CameraPlacement = () => {
                     map.removeSource(sourceId);
                 }
             } catch (error) {
-                console.warn(
-                    `Could not remove layer/source ${sourceId}:`,
-                    error
-                );
             }
         });
 
@@ -899,35 +1453,36 @@ 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()}
                             tooltip="Upload Image"
                             className={styles.uploadBtn}
                         />
-                        <IconButton
-                            icon={Save}
-                            onClick={saveAsFile}
-                            disabled={!cameras.length && !uploadedImage}
-                            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}
+                            onClick={() => jsonFileInputRef.current?.click()}
+                            tooltip="Import Legacy JSON File"
+                            className={styles.importBtn}
                         />
                         <IconButton
-                            icon={sidebarCollapsed ? Eye : EyeOff}
-                            onClick={() =>
-                                setSidebarCollapsed(!sidebarCollapsed)
-                            }
-                            tooltip={`${
-                                sidebarCollapsed ? 'Show' : 'Hide'
-                            } Cameras`}
+                            icon={Save}
+                            onClick={saveToDatabase}
+                            disabled={!cameras.length && !uploadedImage}
+                            tooltip="Save camera placement to database"
+                            className={styles.saveFileBtn}
                         />
                         <IconButton
                             icon={Download}
@@ -944,9 +1499,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}
@@ -1386,10 +1939,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
@@ -1468,56 +2017,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)
@@ -1969,9 +2513,80 @@ 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 inputs */}
+            <input
+                type="file"
+                ref={fileInputRef}
+                onChange={handleImageUpload}
+                accept="image/*"
+                style={{ display: 'none' }}
+            />
+            <input
+                type="file"
+                ref={jsonFileInputRef}
+                onChange={handleJsonFileUpload}
+                accept=".json,application/json"
+                style={{ display: 'none' }}
+            />
 
             {showModal && selectedCamera && (
                 <CameraSelectionModal