@visns-studio/visns-components 5.15.9 → 5.15.10

package/README.md

@@ -9,10 +9,11 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
 
-## Recent Updates (v5.15.6)
+## Recent Updates (v5.15.10)
 
 ### Latest Enhancements
 
+- **CameraPlacement Legacy Import**: Added comprehensive legacy JSON file import functionality with support for multiple data formats, automatic image loading, and seamless database integration
 - **CameraPlacement Module**: Enhanced interactive camera placement tool with improved UI consistency, better icon visibility, drag-and-drop image upload, professional export capabilities, and complete Verkada database integration
 - **Complete StandardModal Migration**: All components now use StandardModal instead of reactjs-popup for consistent modal behavior across the entire library
 - **HTML Content Support**: Terms and conditions now properly parse HTML content from TinyMCE editors with clean rendering
@@ -2461,6 +2462,15 @@ import { CameraPlacement } from 'visns-components';
 <CameraPlacement />
 ```
 
+**Legacy Import Workflow:**
+1. **Click Import Button**: Orange folder icon (📁) in the header controls
+2. **Select JSON File**: Choose legacy camera placement JSON file (.json extension)
+3. **Automatic Processing**: Smart parser handles multiple formats automatically
+4. **Import Validation**: Real-time validation with detailed error messages if needed  
+5. **Data Loading**: Cameras, background images, and project metadata loaded instantly
+6. **Review & Adjust**: Fine-tune camera positions if coordinate scaling differs
+7. **Save to Database**: Use existing save functionality to persist imported data
+
 **Key Features:**
 -   **Enhanced User Interface**: Modern icon-based controls with tooltips, consistent color theming using project CSS variables
 -   **Dual Mode Support**: Switch between Mapbox map integration and image-based placement with seamless transitions
@@ -2470,10 +2480,14 @@ import { CameraPlacement } from 'visns-components';
 -   **FOV Visualization**: Intelligent field-of-view triangles with inverse distance scaling for realistic coverage display
 -   **Interactive Placement**: Drag-and-drop camera positioning with rotation handles for directional adjustment
 -   **Save/Load Projects**: Export/import camera placements as JSON files with project metadata and timestamps
+-   **Legacy JSON Import**: One-click import of legacy camera placement files with automatic format detection and base64 image support
 -   **Professional Exports**: Generate high-quality PNG reports with side-by-side camera specifications and installation details
 -   **SweetAlert Integration**: Professional modal dialogs for confirmations, error handling, and success notifications
 
-**Recent Improvements (v5.15.6):**
+**Recent Improvements (v5.15.10):**
+- **Legacy JSON Import**: Comprehensive import functionality supporting multiple legacy data formats with automatic image loading and base64 processing
+- **Enhanced Controls Layout**: Expanded controls container to accommodate new import button with proper spacing and responsive design
+- **Smart Data Parser**: Intelligent JSON parsing that handles 4+ different legacy format structures with fallback handling
 - **Icon Visibility**: Fixed save button icon visibility with improved color contrast and explicit styling
 - **UI Consistency**: All buttons now use project-standard color variables for consistent theming
 - **Tooltips**: CSS-based tooltips for all control buttons with descriptive text
@@ -2488,6 +2502,30 @@ import { CameraPlacement } from 'visns-components';
 - **Advanced Models**: Support for optical zoom, telephoto lenses, 4K resolution, and specialized security features
 - **Real-time Updates**: Live camera specification display in sidebar with direction controls and coordinate tracking
 
+**Legacy Import System (v5.15.10+):**
+- **Multi-Format Support**: Handles 4+ different legacy JSON structures automatically with intelligent format detection
+- **Base64 Image Processing**: Seamless import of large images (4MB+) with base64 data URL support
+- **Smart Data Validation**: Comprehensive validation with user-friendly error messages and detailed debugging
+- **Format Flexibility**: Supports various naming conventions (`image.src`, `uploadedImage`, `backgroundImage`, etc.)
+- **One-Click Migration**: Import legacy projects with cameras, images, and metadata in a single operation
+- **Database Integration**: Imported data immediately compatible with save/load database functionality
+- **Visual Import Feedback**: Loading indicators, success dialogs with import summaries, and error handling
+
+**Supported Legacy Formats:**
+```javascript
+// Format 1: Standard export with image object
+{ "image": { "src": "data:image/...", "name": "..." }, "cameras": [...] }
+
+// Format 2: Nested placement structure  
+{ "placement": { "cameras": [...], "image": "...", "projectName": "..." } }
+
+// Format 3: Simple camera array
+[{ "id": 1, "name": "Camera 1", "x": 100, "y": 200, ... }]
+
+// Format 4: Auto-detected custom structures
+{ "customData": { "cameraArray": [...] }, "backgroundImage": "..." }
+```
+
 **Technical Capabilities:**
 - **Map Integration**: Mapbox GL JS with geocoding search, satellite imagery, and custom marker styling
 - **Image Processing**: Support for floor plans and site diagrams with HTML5 file API and FileReader integration

package/package.json

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

package/src/components/CameraPlacement.jsx

@@ -48,6 +48,7 @@ const CameraPlacement = ({ userProfile }) => {
     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);
 
@@ -186,6 +187,282 @@ const CameraPlacement = ({ userProfile }) => {
         [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;
@@ -575,7 +852,7 @@ const CameraPlacement = ({ userProfile }) => {
     const loadProject = useCallback(async (lightweightProject) => {
         try {
             // Show loading indicator
-            const loadingToast = Swal.fire({
+            Swal.fire({
                 title: 'Loading Project...',
                 text: 'Fetching project data',
                 allowOutsideClick: false,
@@ -1194,6 +1471,12 @@ const CameraPlacement = ({ userProfile }) => {
                             tooltip="Upload Image"
                             className={styles.uploadBtn}
                         />
+                        <IconButton
+                            icon={FolderOpen}
+                            onClick={() => jsonFileInputRef.current?.click()}
+                            tooltip="Import Legacy JSON File"
+                            className={styles.importBtn}
+                        />
                         <IconButton
                             icon={Save}
                             onClick={saveToDatabase}
@@ -2289,7 +2572,7 @@ const CameraPlacement = ({ userProfile }) => {
             </div>
             </div>
 
-            {/* Hidden file input */}
+            {/* Hidden file inputs */}
             <input
                 type="file"
                 ref={fileInputRef}
@@ -2297,6 +2580,13 @@ const CameraPlacement = ({ userProfile }) => {
                 accept="image/*"
                 style={{ display: 'none' }}
             />
+            <input
+                type="file"
+                ref={jsonFileInputRef}
+                onChange={handleJsonFileUpload}
+                accept=".json,application/json"
+                style={{ display: 'none' }}
+            />
 
             {showModal && selectedCamera && (
                 <CameraSelectionModal

package/src/components/generic/GenericReport.jsx

@@ -1082,6 +1082,20 @@ const GenericReportImproved = ({
         exportUrl: '',
     });
 
+    // State for unique field selection and row exclusion
+    const [uniqueFieldConfig, setUniqueFieldConfig] = useState({
+        enabled: false,
+        selectedField: '',
+    });
+    
+    // Debug logging for uniqueFieldConfig changes
+    useEffect(() => {
+        console.log('🔍 [EFFECT] uniqueFieldConfig changed:', uniqueFieldConfig);
+    }, [uniqueFieldConfig]);
+    const [excludedRows, setExcludedRows] = useState(new Set());
+    const [showRowExclusionModal, setShowRowExclusionModal] = useState(false);
+    const [exportType, setExportType] = useState('regular');
+
     // Note: Removed table search functionality to simplify user experience
 
     // Extract additional settings with defaults
@@ -2291,6 +2305,17 @@ const GenericReportImproved = ({
                     let payload;
 
                     if (isDynamicTemplate) {
+                        // Enhanced unique field configuration for grouped templates
+                        const groupedUniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                            enabled: true,
+                            field: uniqueFieldConfig.selectedField,
+                            distinct: true,
+                            distinctField: uniqueFieldConfig.selectedField
+                        } : { 
+                            enabled: false,
+                            distinct: false 
+                        };
+
                         // For dynamic templates, send the complete template configuration
                         payload = {
                             dynamic_template: template,
@@ -2299,7 +2324,16 @@ const GenericReportImproved = ({
                             joins: joins,
                             filters: flattenFilterCriteria(filterCriteria),
                             sorting: sortCriteria,
+                            // Enhanced unique field configuration
+                            unique: groupedUniqueConfig,
                         };
+
+                        // Debug log for grouped reports
+                        if (uniqueFieldConfig.enabled) {
+                            console.group('🔍 [DEBUG] Grouped Report - Unique Field Configuration');
+                            console.log('Grouped unique config:', groupedUniqueConfig);
+                            console.groupEnd();
+                        }
                     } else {
                         // For predefined templates, use the existing approach
                         payload = {
@@ -2337,6 +2371,28 @@ const GenericReportImproved = ({
                 const page = Math.floor(skip / limit) + 1;
 
                 // Use the same payload format as GenericReport (with query wrapper)
+                // Debug the unique field state at query time
+                console.group('🔍 [DEBUG] DataSource - Unique Field State Check');
+                console.log('uniqueFieldConfig:', uniqueFieldConfig);
+                console.log('uniqueFieldConfig.enabled:', uniqueFieldConfig.enabled);
+                console.log('uniqueFieldConfig.selectedField:', uniqueFieldConfig.selectedField);
+                console.log('Condition evaluation:', uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField);
+                
+                // Check DOM state vs React state
+                const checkboxes = document.querySelectorAll('input[type="checkbox"]');
+                console.log('🔍 [DEBUG] All checkboxes in DOM:', Array.from(checkboxes).map((cb, i) => `${i}: ${cb.checked}`));
+                console.groupEnd();
+
+                const uniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                    enabled: true,
+                    field: uniqueFieldConfig.selectedField,
+                    distinct: true, // Explicit DISTINCT flag
+                    distinctField: uniqueFieldConfig.selectedField
+                } : { 
+                    enabled: false,
+                    distinct: false 
+                };
+
                 const queryConfig = {
                     mainTable: selectedTable,
                     columns: selectedColumns.map((col) => {
@@ -2368,8 +2424,20 @@ const GenericReportImproved = ({
                     })),
                     filters: flattenFilterCriteria(filterCriteria),
                     sorting: sortCriteria,
+                    // Enhanced unique field configuration
+                    unique: uniqueConfig,
                 };
 
+                // Debug log for unique field configuration
+                if (uniqueFieldConfig.enabled) {
+                    console.group('🔍 [DEBUG] Unique Field Configuration');
+                    console.log('Unique config enabled:', uniqueFieldConfig.enabled);
+                    console.log('Selected field:', uniqueFieldConfig.selectedField);
+                    console.log('Query unique config:', uniqueConfig);
+                    console.log('Expected SQL: SELECT DISTINCT', uniqueFieldConfig.selectedField, '...');
+                    console.groupEnd();
+                }
+
                 // Add sorting from DataGrid if provided
                 if (sortInfo) {
                     queryConfig.sorting = [
@@ -2461,6 +2529,11 @@ const GenericReportImproved = ({
             executeUrl,
             setting,
         });
+        
+        // CRITICAL DEBUG: Check uniqueFieldConfig state at execute time
+        console.log('🚨 [CRITICAL] uniqueFieldConfig at executeReport start:', uniqueFieldConfig);
+        console.log('🚨 [CRITICAL] uniqueFieldConfig.enabled:', uniqueFieldConfig.enabled);
+        console.log('🚨 [CRITICAL] uniqueFieldConfig.selectedField:', uniqueFieldConfig.selectedField);
 
         if (!selectedTable || selectedColumns.length === 0) {
             toast.warning(
@@ -2885,6 +2958,12 @@ const GenericReportImproved = ({
                 });
             }
 
+            // Restore unique field configuration if it exists
+            if (config.unique) {
+                console.log('🔄 [RESTORE] Restoring unique field config:', config.unique);
+                setUniqueFieldConfig(config.unique);
+            }
+
             if (config.filters) {
                 // Ensure filters have the proper structure
                 if (config.filters.groups) {
@@ -4181,6 +4260,96 @@ const GenericReportImproved = ({
                         )}
                     </div>
                 )}
+
+                {/* Unique Field Configuration */}
+                {selectedColumns.length > 0 && (
+                    <div className={styles.uniqueFieldConfig}>
+                        <div className={styles.configHeader}>
+                            <h4>
+                                <Filter size={16} />
+                                Remove Duplicates (Optional)
+                            </h4>
+                            <p>Use SQL DISTINCT to prevent duplicate rows based on a specific field</p>
+                        </div>
+                        <div className={styles.configContent}>
+                            <label className={styles.checkboxLabel}>
+                                <input
+                                    type="checkbox"
+                                    checked={uniqueFieldConfig.enabled}
+                                    onChange={(e) => {
+                                        console.log('🔍 [DEBUG] Unique field toggled:', e.target.checked);
+                                        console.log('🔍 [DEBUG] Current uniqueFieldConfig before change:', uniqueFieldConfig);
+                                        const newConfig = {
+                                            ...uniqueFieldConfig,
+                                            enabled: e.target.checked,
+                                            selectedField: e.target.checked ? uniqueFieldConfig.selectedField : ''
+                                        };
+                                        console.log('🔍 [DEBUG] New unique field config:', newConfig);
+                                        setUniqueFieldConfig(newConfig);
+                                        // Log immediately after setState
+                                        setTimeout(() => {
+                                            console.log('🔍 [DEBUG] State after setTimeout:', uniqueFieldConfig);
+                                        }, 100);
+                                    }}
+                                />
+                                <span className={styles.checkboxText}>
+                                    Enable DISTINCT filtering
+                                    {uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField && (
+                                        <span className={styles.activeIndicator}>
+                                            <CircleCheck size={12} />
+                                            Active on {uniqueFieldConfig.selectedField}
+                                        </span>
+                                    )}
+                                </span>
+                            </label>
+                            
+                            {uniqueFieldConfig.enabled && (
+                                <div className={styles.uniqueFieldSelector}>
+                                    <label className={styles.fieldLabel}>
+                                        Select field to make unique:
+                                    </label>
+                                    <select
+                                        value={uniqueFieldConfig.selectedField}
+                                        onChange={(e) => {
+                                            console.log('🔍 [DEBUG] Unique field selected:', e.target.value);
+                                            console.log('🔍 [DEBUG] Available dropdown options:', Array.from(e.target.options).map(opt => ({value: opt.value, text: opt.text})));
+                                            console.log('🔍 [DEBUG] Selected option text:', e.target.options[e.target.selectedIndex]?.text);
+                                            console.log('🔍 [DEBUG] Current uniqueFieldConfig before field change:', uniqueFieldConfig);
+                                            console.log('🔍 [DEBUG] Current selectedColumns:', selectedColumns);
+                                            const newConfig = {
+                                                ...uniqueFieldConfig,
+                                                selectedField: e.target.value
+                                            };
+                                            console.log('🔍 [DEBUG] Updated unique field config with selected field:', newConfig);
+                                            setUniqueFieldConfig(newConfig);
+                                            // Log immediately after setState
+                                            setTimeout(() => {
+                                                console.log('🔍 [DEBUG] Field state after setTimeout:', uniqueFieldConfig);
+                                            }, 100);
+                                        }}
+                                        className={styles.fieldSelect}
+                                        required
+                                    >
+                                        <option value="">Choose a field...</option>
+                                        {selectedColumns.map((col) => (
+                                            <option 
+                                                key={`${col.table}-${col.column}`}
+                                                value={`${col.table}.${col.column}`}
+                                            >
+                                                {col.displayName || col.column} ({col.table})
+                                            </option>
+                                        ))}
+                                    </select>
+                                    <div className={styles.fieldHelp}>
+                                        <strong>SQL Impact:</strong> This will add DISTINCT to your query based on the selected field.
+                                        <br />
+                                        <code>SELECT DISTINCT {uniqueFieldConfig.selectedField || '[field]'}, ... FROM {selectedTable}</code>
+                                    </div>
+                                </div>
+                            )}
+                        </div>
+                    </div>
+                )}
             </div>
         );
     };
@@ -6483,6 +6652,17 @@ const GenericReportImproved = ({
 
         try {
             // Use exact same payload format as GenericReport
+            // Enhanced unique field configuration for exports
+            const exportUniqueConfig = uniqueFieldConfig.enabled && uniqueFieldConfig.selectedField ? {
+                enabled: true,
+                field: uniqueFieldConfig.selectedField,
+                distinct: true,
+                distinctField: uniqueFieldConfig.selectedField
+            } : { 
+                enabled: false,
+                distinct: false 
+            };
+
             const queryConfig = {
                 mainTable: selectedTable,
                 columns: selectedColumns.map((col) => ({
@@ -6503,8 +6683,21 @@ const GenericReportImproved = ({
                 })),
                 filters: flattenFilterCriteria(filterCriteria),
                 sorting: sortCriteria,
+                // Enhanced unique field configuration
+                unique: exportUniqueConfig,
+                // Add excluded rows for server-side filtering
+                excludedRows: Array.from(excludedRows),
             };
 
+            // Debug log for exports
+            if (uniqueFieldConfig.enabled) {
+                console.group('🔍 [DEBUG] Export - Unique Field Configuration');
+                console.log('Export format:', format);
+                console.log('Export unique config:', exportUniqueConfig);
+                console.log('Query config:', queryConfig);
+                console.groupEnd();
+            }
+
             const exportData = {
                 query: queryConfig,
                 format: format === 'excel' ? 'xlsx' : format, // Convert excel to xlsx
@@ -6663,23 +6856,78 @@ const GenericReportImproved = ({
         }
     };
 
-    // Handle grouped report export to Excel
-    const handleRegularExport = async () => {
+    // Handle row exclusion modal
+    const handleExportWithExclusion = (exportType = 'regular') => {
         if (previewData.length === 0) {
             toast.error('No data available to export');
             return;
         }
 
+        setShowRowExclusionModal(true);
+        setExportType(exportType);
+    };
+
+    const confirmExportWithExclusion = async () => {
+        setShowRowExclusionModal(false);
+        
+        if (exportType === 'grouped') {
+            await performGroupedExport();
+        } else {
+            await performRegularExport();
+        }
+    };
+
+    // Handle grouped report export to Excel
+    const handleRegularExport = async () => {
+        handleExportWithExclusion('regular');
+    };
+
+    // Filter out excluded rows from preview data
+    const getFilteredPreviewData = () => {
+        if (excludedRows.size === 0) {
+            return previewData;
+        }
+        
+        return previewData.filter((row, index) => {
+            const rowId = row.id || `preview-row-${index}`;
+            return !excludedRows.has(rowId);
+        });
+    };
+
+    // Perform the actual regular export
+    const performRegularExport = async () => {
+        const filteredData = getFilteredPreviewData();
+        
+        if (filteredData.length === 0) {
+            toast.error('No data available to export after exclusions');
+            return;
+        }
+
         try {
+            // Temporarily replace previewData with filtered data for export
+            const originalPreviewData = previewData;
+            setPreviewData(filteredData);
+            
             // Use the existing client-side Excel export functionality
             await exportReport('excel');
+            
+            // Restore original data
+            setPreviewData(originalPreviewData);
         } catch (error) {
             console.error('Regular export failed:', error);
             toast.error('Export failed. Please try again.');
+            
+            // Restore original data on error as well
+            setPreviewData(previewData);
         }
     };
 
     const handleGroupedExport = async () => {
+        handleExportWithExclusion('grouped');
+    };
+
+    // Perform the actual grouped export
+    const performGroupedExport = async () => {
         if (!selectedTemplate) {
             toast.error('No template selected for export');
             return;
@@ -6830,9 +7078,17 @@ const GenericReportImproved = ({
                 groupHeaderRow[0] = `${groupDisplayName}: ${group.groupDisplayName}`;
                 worksheetData.push(groupHeaderRow);
 
-                // Add data rows for this group
+                // Add data rows for this group (excluding excluded rows)
                 const allRows = [...group.rows, ...(group.emptyRows || [])];
-                allRows.forEach((row) => {
+                allRows.forEach((row, rowIndex) => {
+                    // Create a unique identifier for the row
+                    const rowId = row.id || `group-${groupIndex}-row-${rowIndex}`;
+                    
+                    // Skip excluded rows
+                    if (excludedRows.has(rowId)) {
+                        return;
+                    }
+                    
                     const dataRow = selectedColumns.map((column) =>
                         getCellValue(row, column)
                     );
@@ -6977,6 +7233,7 @@ const GenericReportImproved = ({
                         isGrouped: groupingConfig.enabled,
                         customCalculatedFields: customCalculatedFields,
                         customUrls: customUrls,
+                        unique: uniqueFieldConfig,
                     },
                 };
 
@@ -7400,7 +7657,7 @@ const GenericReportImproved = ({
                         className={`${styles.btn} ${styles.btnPrimary}`}
                         onClick={() => {
                             resetPagination();
-                            setHasAutoExecuted(false); // Reset flag for manual execution
+                            // Don't reset hasAutoExecuted to avoid triggering useEffect
                             executeReport();
                         }}
                         disabled={isLoading}
@@ -8597,6 +8854,123 @@ const GenericReportImproved = ({
                     </div>
                 </div>
             )}
+
+            {/* Row Exclusion Modal */}
+            {showRowExclusionModal && (
+                <div className={styles.modalOverlay}>
+                    <div className={styles.rowExclusionModal}>
+                        <div className={styles.modalHeader}>
+                            <h3>Select Rows to Exclude</h3>
+                            <p>Choose which rows you don't want to include in the export</p>
+                            <button
+                                className={styles.modalCloseButton}
+                                onClick={() => setShowRowExclusionModal(false)}
+                            >
+                                ✕
+                            </button>
+                        </div>
+
+                        <div className={styles.modalBody}>
+                            <div className={styles.rowExclusionList}>
+                                {(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                    groupedData.groupedData.groups.flatMap((group, groupIndex) =>
+                                        [...group.rows, ...(group.emptyRows || [])].map((row, rowIndex) => {
+                                            const rowId = row.id || `group-${groupIndex}-row-${rowIndex}`;
+                                            const isExcluded = excludedRows.has(rowId);
+                                            
+                                            return (
+                                                <label key={rowId} className={styles.rowExclusionItem}>
+                                                    <input
+                                                        type="checkbox"
+                                                        checked={isExcluded}
+                                                        onChange={(e) => {
+                                                            const newExcludedRows = new Set(excludedRows);
+                                                            if (e.target.checked) {
+                                                                newExcludedRows.add(rowId);
+                                                            } else {
+                                                                newExcludedRows.delete(rowId);
+                                                            }
+                                                            setExcludedRows(newExcludedRows);
+                                                        }}
+                                                    />
+                                                    <div className={styles.rowPreview}>
+                                                        {selectedColumns.slice(0, 3).map((col) => {
+                                                            const value = row[col.displayName] || row[col.column] || row[`${col.table}_${col.column}`] || '';
+                                                            return (
+                                                                <span key={col.column} className={styles.rowValue}>
+                                                                    {String(value).substring(0, 50)}{String(value).length > 50 ? '...' : ''}
+                                                                </span>
+                                                            );
+                                                        })}
+                                                    </div>
+                                                </label>
+                                            );
+                                        })
+                                    )
+                                    :
+                                    previewData.map((row, index) => {
+                                        const rowId = row.id || `preview-row-${index}`;
+                                        const isExcluded = excludedRows.has(rowId);
+                                        
+                                        return (
+                                            <label key={rowId} className={styles.rowExclusionItem}>
+                                                <input
+                                                    type="checkbox"
+                                                    checked={isExcluded}
+                                                    onChange={(e) => {
+                                                        const newExcludedRows = new Set(excludedRows);
+                                                        if (e.target.checked) {
+                                                            newExcludedRows.add(rowId);
+                                                        } else {
+                                                            newExcludedRows.delete(rowId);
+                                                        }
+                                                        setExcludedRows(newExcludedRows);
+                                                    }}
+                                                />
+                                                <div className={styles.rowPreview}>
+                                                    {selectedColumns.slice(0, 3).map((col) => {
+                                                        const value = row[col.displayName] || row[col.column] || row[`${col.table}_${col.column}`] || '';
+                                                        return (
+                                                            <span key={col.column} className={styles.rowValue}>
+                                                                {String(value).substring(0, 50)}{String(value).length > 50 ? '...' : ''}
+                                                            </span>
+                                                        );
+                                                    })}
+                                                </div>
+                                            </label>
+                                        );
+                                    })
+                                )}
+                            </div>
+                            
+                            <div className={styles.exclusionSummary}>
+                                <p>
+                                    {excludedRows.size} of {(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                        groupedData.groupedData.groups.reduce((total, group) => total + group.rows.length + (group.emptyRows?.length || 0), 0)
+                                        : previewData.length)} rows will be excluded from export
+                                </p>
+                            </div>
+                        </div>
+
+                        <div className={styles.modalFooter}>
+                            <button
+                                className={styles.cancelButton}
+                                onClick={() => setShowRowExclusionModal(false)}
+                            >
+                                Cancel
+                            </button>
+                            <button
+                                className={styles.confirmButton}
+                                onClick={confirmExportWithExclusion}
+                            >
+                                Export ({(exportType === 'grouped' && groupedData?.groupedData?.groups ? 
+                                    groupedData.groupedData.groups.reduce((total, group) => total + group.rows.length + (group.emptyRows?.length || 0), 0) - excludedRows.size
+                                    : previewData.length - excludedRows.size)} rows)
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            )}
         </div>
     );
 };

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

@@ -18,7 +18,7 @@
         border-bottom: 1px solid rgba(var(--primary-rgb), 0.7);
         z-index: 100;
         position: relative;
-        min-width: 1000px;
+        min-width: 1060px;
 
         .headerContent {
             display: flex;
@@ -46,7 +46,7 @@
             gap: 12px;
             align-items: center;
             flex-shrink: 0;
-            min-width: 480px;
+            min-width: 540px;
         }
 
         .projectInput {
@@ -169,6 +169,17 @@
                 }
             }
 
+            &.importBtn {
+                background: var(--warning-color, #f59e0b);
+                border-color: rgba(var(--warning-rgb, 245, 158, 11), 1);
+                
+                &:hover:not(:disabled) {
+                    background: rgba(var(--warning-rgb, 245, 158, 11), 0.8);
+                    transform: translateY(-2px);
+                    box-shadow: 0 4px 12px rgba(var(--warning-rgb, 245, 158, 11), 0.3);
+                }
+            }
+
             &.saveFileBtn {
                 background: var(--secondary-color, #6b7280);
                 border-color: rgba(var(--secondary-rgb, 107, 114, 128), 1);

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

@@ -3831,3 +3831,345 @@
         font-size: 0.9rem;
     }
 }
+
+/* Unique Field Configuration Styling */
+.uniqueFieldConfig {
+    margin-top: 24px;
+    background-color: rgba(106, 90, 205, 0.05); // Subtle purple background
+    border: 1px solid rgba(106, 90, 205, 0.15);
+    border-radius: var(--radius);
+    overflow: hidden;
+    transition: all 0.3s ease;
+    
+    &:hover {
+        border-color: rgba(106, 90, 205, 0.25);
+        box-shadow: 0 2px 8px rgba(106, 90, 205, 0.1);
+    }
+}
+
+.configHeader {
+    padding: 16px 20px 12px 20px;
+    background: linear-gradient(135deg, rgba(106, 90, 205, 0.08) 0%, rgba(106, 90, 205, 0.03) 100%);
+    border-bottom: 1px solid rgba(106, 90, 205, 0.1);
+    
+    h4 {
+        margin: 0 0 6px 0;
+        font-size: 1rem;
+        font-weight: 600;
+        color: #4c46a6;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        
+        svg {
+            color: #6a5acd;
+            flex-shrink: 0;
+        }
+        
+        &::before {
+            content: '';
+            width: 3px;
+            height: 18px;
+            background: linear-gradient(45deg, #6a5acd, #9370db);
+            border-radius: 2px;
+        }
+    }
+    
+    p {
+        margin: 0;
+        font-size: 0.875rem;
+        color: var(--paragraph-color);
+        opacity: 0.8;
+    }
+}
+
+.configContent {
+    padding: 20px;
+}
+
+.checkboxLabel {
+    display: flex;
+    align-items: flex-start;
+    cursor: pointer;
+    font-size: 0.875rem;
+    color: var(--header-color);
+    margin-bottom: 16px;
+    padding: 12px;
+    background-color: rgba(255, 255, 255, 0.3);
+    border-radius: var(--radius);
+    border: 1px solid rgba(106, 90, 205, 0.1);
+    transition: all 0.2s ease;
+    
+    &:hover {
+        background-color: rgba(255, 255, 255, 0.5);
+        border-color: rgba(106, 90, 205, 0.2);
+        transform: translateY(-1px);
+    }
+    
+    input[type="checkbox"] {
+        margin-right: 12px;
+        width: 18px;
+        height: 18px;
+        cursor: pointer;
+        accent-color: #6a5acd;
+        margin-top: 1px; // Align with text
+        flex-shrink: 0;
+    }
+}
+
+.checkboxText {
+    font-weight: 500;
+    color: var(--header-color);
+    line-height: 1.4;
+    
+    .activeIndicator {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        margin-left: 8px;
+        padding: 2px 8px;
+        background-color: rgba(40, 167, 69, 0.1);
+        color: #28a745;
+        font-size: 0.75rem;
+        font-weight: 600;
+        border-radius: 12px;
+        border: 1px solid rgba(40, 167, 69, 0.2);
+        
+        svg {
+            color: #28a745;
+            flex-shrink: 0;
+        }
+    }
+}
+
+.uniqueFieldSelector {
+    margin-left: 30px; // Align with checkbox text
+    padding-left: 16px;
+    border-left: 2px solid rgba(106, 90, 205, 0.2);
+    animation: slideDown 0.3s ease-out;
+}
+
+@keyframes slideDown {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.fieldLabel {
+    display: block;
+    font-size: 0.875rem;
+    font-weight: 500;
+    color: var(--header-color);
+    margin-bottom: 8px;
+}
+
+.fieldSelect {
+    width: 100%;
+    padding: 12px 16px;
+    border: 2px solid rgba(106, 90, 205, 0.2);
+    border-radius: var(--radius);
+    font-size: 0.875rem;
+    background-color: var(--bg-color);
+    color: var(--header-color);
+    transition: all 0.2s ease;
+    cursor: pointer;
+    
+    &:focus {
+        outline: none;
+        border-color: #6a5acd;
+        box-shadow: 0 0 0 3px rgba(106, 90, 205, 0.15);
+    }
+    
+    &:hover {
+        border-color: rgba(106, 90, 205, 0.3);
+    }
+    
+    option {
+        padding: 8px;
+        color: var(--header-color);
+        background-color: var(--bg-color);
+    }
+}
+
+.fieldHelp {
+    margin-top: 8px;
+    font-size: 0.75rem;
+    color: var(--paragraph-color);
+    line-height: 1.4;
+    padding: 8px 12px;
+    background-color: rgba(106, 90, 205, 0.05);
+    border-radius: var(--radius);
+    border-left: 3px solid rgba(106, 90, 205, 0.3);
+    
+    code {
+        display: block;
+        margin-top: 6px;
+        padding: 6px 8px;
+        background-color: rgba(0, 0, 0, 0.05);
+        border-radius: 4px;
+        font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
+        font-size: 0.7rem;
+        color: #4c46a6;
+        border: 1px solid rgba(106, 90, 205, 0.15);
+        white-space: pre-wrap;
+        word-break: break-word;
+    }
+    
+    strong {
+        color: var(--header-color);
+        font-weight: 600;
+    }
+}
+
+/* Row Exclusion Modal Styling */
+.rowExclusionModal {
+    background-color: var(--bg-color);
+    border-radius: var(--radius);
+    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
+    max-width: 800px;
+    width: 90vw;
+    max-height: 80vh;
+    display: flex;
+    flex-direction: column;
+    
+    .modalHeader {
+        padding: 24px;
+        border-bottom: 1px solid var(--border-color);
+        background: linear-gradient(135deg, rgba(220, 38, 127, 0.05) 0%, rgba(220, 38, 127, 0.02) 100%);
+        
+        h3 {
+            margin: 0 0 8px 0;
+            font-size: 1.25rem;
+            color: var(--header-color);
+            font-weight: 600;
+        }
+        
+        p {
+            margin: 0;
+            color: var(--paragraph-color);
+            font-size: 0.875rem;
+        }
+    }
+    
+    .modalBody {
+        flex: 1;
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+    }
+    
+    .rowExclusionList {
+        flex: 1;
+        overflow-y: auto;
+        padding: 16px 24px;
+        max-height: 400px;
+    }
+    
+    .rowExclusionItem {
+        display: flex;
+        align-items: center;
+        padding: 12px;
+        margin-bottom: 8px;
+        border-radius: var(--radius);
+        border: 1px solid var(--border-color);
+        background-color: var(--tertiary-color);
+        cursor: pointer;
+        transition: all 0.2s ease;
+        
+        &:hover {
+            background-color: rgba(var(--primary-rgb), 0.05);
+            border-color: rgba(var(--primary-rgb), 0.2);
+            transform: translateX(4px);
+        }
+        
+        input[type="checkbox"] {
+            margin-right: 12px;
+            width: 16px;
+            height: 16px;
+            cursor: pointer;
+            accent-color: var(--primary-color);
+            flex-shrink: 0;
+        }
+    }
+    
+    .rowPreview {
+        display: flex;
+        flex-direction: column;
+        gap: 4px;
+        flex: 1;
+        min-width: 0;
+    }
+    
+    .rowValue {
+        font-size: 0.875rem;
+        color: var(--header-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        
+        &:not(:first-child) {
+            color: var(--paragraph-color);
+            font-size: 0.8rem;
+        }
+    }
+    
+    .exclusionSummary {
+        padding: 16px 24px;
+        background-color: rgba(var(--primary-rgb), 0.05);
+        border-top: 1px solid var(--border-color);
+        
+        p {
+            margin: 0;
+            font-size: 0.875rem;
+            color: var(--primary-color);
+            text-align: center;
+            font-weight: 500;
+        }
+    }
+    
+    .modalFooter {
+        padding: 16px 24px;
+        border-top: 1px solid var(--border-color);
+        display: flex;
+        gap: 12px;
+        justify-content: flex-end;
+        background-color: var(--tertiary-color);
+        
+        button {
+            padding: 10px 20px;
+            border-radius: var(--radius);
+            font-size: 0.875rem;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all 0.2s ease;
+            border: 1px solid transparent;
+            
+            &.cancelButton {
+                background-color: transparent;
+                color: var(--paragraph-color);
+                border-color: var(--border-color);
+                
+                &:hover {
+                    background-color: var(--border-color);
+                    color: var(--header-color);
+                }
+            }
+            
+            &.confirmButton {
+                background-color: var(--primary-color);
+                color: white;
+                
+                &:hover {
+                    background-color: var(--primary-hover, var(--primary-color));
+                    transform: translateY(-1px);
+                    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
+                }
+            }
+        }
+    }
+}