@visns-studio/visns-components 5.15.8 → 5.15.9

package/package.json

@@ -94,7 +94,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.15.8",
+    "version": "5.15.9",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/CameraPlacement.jsx

@@ -12,8 +12,6 @@ import {
     Upload,
     Save,
     FolderOpen,
-    Eye,
-    EyeOff,
     Download,
     FileImage,
     Lightbulb,
@@ -33,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);
@@ -49,6 +51,7 @@ const CameraPlacement = () => {
     const [isDragOver, setIsDragOver] = useState(false);
     const [isRotating, setIsRotating] = useState(false);
 
+
     // Mapbox configuration
     const MAPBOX_ACCESS_TOKEN =
         'pk.eyJ1IjoidmlzbnMtc3R1ZGlvIiwiYSI6ImNrbGlraW5vZDBhMDYycHBsdmk5b3ljbGQifQ.ZGUBk0PWac5GahUeVHdTpg';
@@ -69,7 +72,6 @@ const CameraPlacement = () => {
                         try {
                             map.remove();
                         } catch (error) {
-                            console.warn('Error removing map:', error);
                         }
                         setMap(null);
                     }
@@ -166,7 +168,6 @@ const CameraPlacement = () => {
                             try {
                                 map.remove();
                             } catch (error) {
-                                console.warn('Error removing map:', error);
                             }
                             setMap(null);
                         }
@@ -335,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',
@@ -347,115 +383,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,
+            };
+
+            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;
+        }
+    }, []);
+
+    // Load a specific project
+    const loadProject = useCallback(async (lightweightProject) => {
+        try {
+            // 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: '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 +789,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 +807,6 @@ const CameraPlacement = () => {
                     })
                 ).toBlob();
             } catch (pdfError) {
-                console.warn('Enhanced PDF failed, trying simple version:', pdfError);
                 
                 // Fallback to simple PDF
                 pdfBlob = await pdf(
@@ -586,7 +872,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 +916,6 @@ const CameraPlacement = () => {
                 );
             }
         } catch (error) {
-            console.warn(
-                'Could not access map style, skipping FOV layer cleanup:',
-                error
-            );
         }
         existingSources.forEach((sourceId) => {
             try {
@@ -646,10 +927,6 @@ const CameraPlacement = () => {
                     map.removeSource(sourceId);
                 }
             } catch (error) {
-                console.warn(
-                    `Could not remove layer/source ${sourceId}:`,
-                    error
-                );
             }
         });
 
@@ -899,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()}
@@ -909,26 +1196,11 @@ 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={exportToPDF}
@@ -944,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}
@@ -1386,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
@@ -1468,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)
@@ -1969,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

package/src/components/styles/CameraPlacement.module.scss

@@ -18,11 +18,17 @@
         border-bottom: 1px solid rgba(var(--primary-rgb), 0.7);
         z-index: 100;
         position: relative;
+        min-width: 1000px;
 
         .headerContent {
             display: flex;
             justify-content: space-between;
             align-items: center;
+            min-width: 0;
+        }
+
+        .titleSection {
+            flex-shrink: 0;
         }
 
         .title {
@@ -32,12 +38,44 @@
             margin: 0;
             text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
             letter-spacing: -0.5px;
+            white-space: nowrap;
         }
 
         .controls {
             display: flex;
             gap: 12px;
             align-items: center;
+            flex-shrink: 0;
+            min-width: 480px;
+        }
+
+        .projectInput {
+            background: rgba(255, 255, 255, 0.15);
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            border-radius: var(--br, 8px);
+            padding: 8px 12px;
+            color: white;
+            font-size: 14px;
+            width: 300px;
+            max-width: 300px;
+            transition: all 0.2s ease;
+            margin-right: 12px;
+            flex-shrink: 0;
+
+            &::placeholder {
+                color: rgba(255, 255, 255, 0.7);
+            }
+
+            &:focus {
+                outline: none;
+                background: rgba(255, 255, 255, 0.25);
+                border-color: rgba(255, 255, 255, 0.5);
+                box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
+            }
+
+            &:hover {
+                background: rgba(255, 255, 255, 0.2);
+            }
         }
 
         .iconButton {
@@ -46,6 +84,7 @@
             justify-content: center;
             width: 44px;
             height: 44px;
+            min-width: 44px;
             padding: 0;
             background: var(--secondary-color, #6b7280);
             color: white;
@@ -56,6 +95,7 @@
             border: 1px solid rgba(var(--secondary-rgb, 107, 114, 128), 1);
             position: relative;
             margin: 0 2px;
+            flex-shrink: 0;
 
             &::after {
                 content: attr(title);
@@ -180,6 +220,7 @@
         overflow: hidden;
         gap: 0;
         position: relative;
+        height: calc(100vh - 100px);
     }
 
     .mapContainer {
@@ -236,9 +277,6 @@
     .imageContainer {
         flex: 1;
         position: relative;
-        min-height: calc(100vh - 100px);
-        height: calc(100vh - 100px);
-        width: calc(100% - 400px);
         background: var(--bg);
         overflow: hidden;
         cursor: default;
@@ -247,9 +285,6 @@
             cursor: crosshair;
         }
         
-        &.sidebarCollapsed {
-            width: 100%;
-        }
         
         &.dragOver {
             background: rgba(var(--primary-rgb), 0.05);
@@ -359,23 +394,16 @@
     }
 
     .sidebar {
-        position: absolute;
-        top: 70px;
-        right: 0;
         width: 400px;
-        height: calc(100% - 70px);
+        min-width: 400px;
         background: var(--item-color);
         border-left: 1px solid var(--border-color, #e5e7eb);
         display: flex;
         flex-direction: column;
         z-index: 20;
         box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
-        transform: translateX(0);
-        transition: transform 0.3s ease;
-
-        &.collapsed {
-            transform: translateX(100%);
-        }
+        flex-shrink: 0;
+        height: 100%;
 
         .sidebarHeader {
             padding: 20px 24px;
@@ -384,6 +412,75 @@
             position: relative;
             z-index: 1;
 
+            .sidebarTabs {
+                display: flex;
+                gap: 4px;
+                margin-bottom: 12px;
+
+                .tabButton {
+                    flex: 1;
+                    padding: 8px 12px;
+                    background: transparent;
+                    border: 1px solid var(--border-color, #e5e7eb);
+                    border-radius: 6px;
+                    font-size: 14px;
+                    font-weight: 500;
+                    color: var(--paragraph-color, #64748b);
+                    cursor: pointer;
+                    transition: all 0.2s ease;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    gap: 4px;
+
+                    .tabCount {
+                        font-size: 12px;
+                        opacity: 0.7;
+                    }
+
+                    &:hover {
+                        background: var(--surface-color, #f1f5f9);
+                        color: var(--heading-color, #1e293b);
+                    }
+
+                    &.active {
+                        background: var(--primary-color, #3b82f6);
+                        color: white;
+                        border-color: var(--primary-color, #3b82f6);
+
+                        .tabCount {
+                            opacity: 0.8;
+                        }
+                    }
+                }
+            }
+
+            .currentProject {
+                display: flex;
+                align-items: center;
+                gap: 8px;
+                padding: 8px 12px;
+                background: var(--success-color-light, #ecfdf5);
+                border: 1px solid var(--success-color, #10b981);
+                border-radius: 6px;
+                font-size: 12px;
+
+                .projectLabel {
+                    color: var(--success-color, #10b981);
+                    font-weight: 500;
+                }
+
+                .projectName {
+                    color: var(--heading-color, #1e293b);
+                    font-weight: 600;
+                    flex: 1;
+                    max-width: 200px;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    white-space: nowrap;
+                }
+            }
+
             .sidebarTitle {
                 font-size: 18px;
                 font-weight: 700;
@@ -400,6 +497,140 @@
             }
         }
 
+        .sidebarContent {
+            flex: 1;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+
+        .emptyState {
+            text-align: center;
+            color: #6c757d;
+            padding: 40px 20px;
+            font-style: italic;
+
+            .emptyStateSubtext {
+                fontSize: 12px;
+                margin-top: 8px;
+            }
+        }
+
+        .loadingState {
+            text-align: center;
+            color: #6c757d;
+            padding: 40px 20px;
+            font-style: italic;
+        }
+
+        .projectsList {
+            flex: 1;
+            overflow-y: auto;
+            padding: 20px 24px;
+
+            &::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: rgba(0, 0, 0, 0.05);
+                border-radius: 3px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background: #d1d5db;
+                border-radius: 3px;
+                
+                &:hover {
+                    background: #9ca3af;
+                }
+            }
+
+            .projectItem {
+                padding: 16px;
+                background: var(--item-color);
+                border-radius: var(--br, 8px);
+                margin-bottom: 12px;
+                border: 1px solid var(--border-color, #e5e7eb);
+                transition: all 0.2s ease;
+                cursor: pointer;
+                position: relative;
+                box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+
+                &:hover {
+                    background: var(--surface-color, #f8fafc);
+                    border-color: var(--primary-color, #3b82f6);
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+                }
+
+                &.selected {
+                    border-color: var(--primary-color, #3b82f6);
+                    background: var(--primary-color-light, #eff6ff);
+                    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
+                }
+
+                .projectHeader {
+                    margin-bottom: 8px;
+
+                    .projectTitle {
+                        font-size: 16px;
+                        font-weight: 600;
+                        color: var(--heading-color, #1e293b);
+                        margin: 0 0 4px 0;
+                        line-height: 1.2;
+                    }
+
+                    .projectMeta {
+                        display: flex;
+                        gap: 8px;
+                        align-items: center;
+
+                        .projectMode {
+                            background: var(--primary-color-light, #eff6ff);
+                            color: var(--primary-color, #3b82f6);
+                            padding: 2px 6px;
+                            border-radius: 4px;
+                            font-size: 11px;
+                            font-weight: 500;
+                            text-transform: uppercase;
+                        }
+
+                        .projectDate {
+                            font-size: 12px;
+                            color: var(--paragraph-color, #64748b);
+                        }
+                    }
+                }
+
+                .projectInfo {
+                    display: flex;
+                    gap: 12px;
+                    align-items: center;
+                    margin-bottom: 8px;
+
+                    .cameraCount {
+                        font-size: 13px;
+                        color: var(--paragraph-color, #64748b);
+                        font-weight: 500;
+                    }
+
+                    .hasImage {
+                        font-size: 12px;
+                        color: var(--success-color, #10b981);
+                        font-weight: 500;
+                    }
+                }
+
+                .projectDescription {
+                    font-size: 12px;
+                    color: var(--paragraph-color, #64748b);
+                    line-height: 1.4;
+                    font-style: italic;
+                }
+            }
+        }
+
         .camerasList {
             flex: 1;
             overflow-y: auto;