@visns-studio/visns-components 5.13.18 → 5.13.19

package/README.md

@@ -33,7 +33,7 @@ VISNS Components is a React-based UI component library that provides a set of re
 -   **Field Components** - Text inputs, selects, checkboxes, etc.
 -   **Multi-select** - Enhanced select with multiple selection support and selection limits
 -   **Autocomplete** - Mapbox integration for location selection
--   **Dropzone** - File upload with drag and drop support
+-   **Dropzone** - Advanced file upload with drag and drop, smart data extraction, and file type icons
 -   **AsyncSelect** - Asynchronous data loading for select components
 -   **Creatable Select** - Select components that allow creating new options
 -   **GenericEditableTable** - Interactive table component with inline editing, color-coded columns, and multiple data types
@@ -179,6 +179,66 @@ The refactoring also introduced shared utility functions:
 
 These utilities are available for use in custom components and provide consistent functionality across the library.
 
+## DropZone Component Enhancements (v5.14.0+)
+
+### Smart Data Extraction
+
+The DropZone component has been significantly enhanced with intelligent data extraction capabilities for complex API responses:
+
+**Problem Solved:**
+When uploading files to nested relationships (e.g., project → estimation → design → lead → documents), the API returns different model structures at different stages:
+- Initial load: `project.estimation.design.lead.documents`
+- After upload: `lead.documents` (direct lead model response)
+
+**Solution:**
+The DropZone component now automatically adapts the data extraction key based on the API response structure:
+
+```javascript
+// Configuration
+{
+    "key": "estimation.design.lead.documents",
+    "url": "/ajax/leads/{key}",
+    "urlKey": "estimation.design.lead.id",
+    "file_relationship": "documents"
+}
+
+// Smart adaptation:
+// Initial: extracts from project.estimation.design.lead.documents
+// After upload: automatically adapts to extract from response.data.documents
+```
+
+### File Type Icons
+
+Enhanced visual file identification with dynamic icons based on file extensions:
+
+- **📄 Documents**: PDF, DOC, DOCX, TXT, RTF, ODT
+- **📊 Spreadsheets**: XLS, XLSX, CSV, ODS  
+- **🖼️ Images**: JPG, JPEG, PNG, GIF, BMP, SVG, WEBP, ICO
+- **💻 Code Files**: JS, JSX, TS, TSX, HTML, CSS, PHP, PY, JAVA, etc.
+- **📦 Archives**: ZIP, RAR, 7Z, TAR, GZ, BZ2
+- **🎵 Audio**: MP3, WAV, FLAC, AAC, OGG, M4A
+- **🎬 Video**: MP4, AVI, MKV, MOV, WMV, FLV, WEBM
+
+### GenericDetail Integration
+
+The GenericDetail component now uses the enhanced VisnsDropZone component instead of inline dropzone implementation, providing:
+
+- Consistent file handling across all dropzone instances
+- Automatic data refresh after file uploads
+- Smart data extraction for nested relationships
+- Improved state management and UI responsiveness
+
+### Technical Implementation
+
+**Key Features:**
+- `getAdaptedDataKey()`: Intelligently adapts extraction paths based on response structure
+- `getFileIcon()`: Returns appropriate Lucide React icons based on file extensions
+- Enhanced `fetchData` integration: Automatic page refresh after successful uploads
+- Comprehensive debug logging for troubleshooting data extraction issues
+
+**Backward Compatibility:**
+All existing DropZone implementations continue to work without modification. The smart features activate automatically when `dataKey` prop is provided.
+
 ## Component Documentation
 
 ### Authentication Components
@@ -1340,17 +1400,77 @@ Location autocomplete with Mapbox integration.
 
 #### DropZone
 
-File upload component with drag and drop support.
+Advanced file upload component with drag and drop support, smart data extraction, and file type icons.
 
+**Key Features:**
+- **Smart Data Extraction**: Automatically adapts to API response structures using nested keys
+- **File Type Icons**: Dynamic icons based on file extensions (PDF, images, documents, etc.)
+- **Nested API Support**: Handles complex data structures like `estimation.design.lead.documents`
+- **Auto-Refresh**: Intelligent file list updates after upload
+- **Gallery Mode**: Image preview and gallery display
+- **Progress Tracking**: Upload progress indication
+- **File Management**: Edit, delete, and download functionality
+
+**Basic Usage:**
 ```jsx
 <DropZone
-    onDrop={handleFileDrop}
-    accept=".jpg,.png,.pdf"
-    maxSize={5242880} // 5MB
-    multiple={true}
+    fetchData={handleRefresh}
+    files={currentFiles}
+    settings={{
+        url: '/ajax/files',
+        method: 'POST',
+        type: 'gallery', // or 'list'
+        data: {
+            file_relationship: 'documents'
+        },
+        folder: 'uploads',
+        filetype: 'image',
+        deleteUrl: '/ajax/files/delete'
+    }}
 />
 ```
 
+**Smart Data Extraction:**
+```jsx
+<DropZone
+    fetchData={handleRefresh}
+    files={files}
+    url="/ajax/leads/{key}"
+    urlKey="estimation.design.lead.id"
+    dataKey="documents" // Extracts files from response.data.documents
+    entityData={projectData}
+    routeParams={routeParams}
+    settings={{
+        method: 'PUT',
+        data: {
+            file_relationship: 'documents'
+        }
+    }}
+/>
+```
+
+**Supported File Types & Icons:**
+- 📄 **Documents**: PDF, DOC, DOCX, TXT, RTF, ODT
+- 📊 **Spreadsheets**: XLS, XLSX, CSV, ODS
+- 🖼️ **Images**: JPG, JPEG, PNG, GIF, BMP, SVG, WEBP, ICO
+- 💻 **Code Files**: JS, JSX, TS, TSX, HTML, CSS, PHP, PY, JAVA, etc.
+- 📦 **Archives**: ZIP, RAR, 7Z, TAR, GZ, BZ2
+- 🎵 **Audio**: MP3, WAV, FLAC, AAC, OGG, M4A
+- 🎬 **Video**: MP4, AVI, MKV, MOV, WMV, FLV, WEBM
+
+**Configuration Options:**
+- `fetchData`: Function called after successful uploads to refresh data
+- `files`: Array of current files to display
+- `url`: Upload endpoint (supports {key} placeholders)
+- `urlKey`: Dot notation path for URL parameter replacement
+- `dataKey`: Dot notation path for extracting files from API responses
+- `deleteUrl`: Endpoint for file deletion
+- `entityData`: Context data for URL parameter resolution
+- `routeParams`: Route parameters for URL processing
+- `settings.type`: 'gallery' for images, 'list' for documents
+- `settings.filetype`: File type restrictions
+- `settings.folder`: Upload folder designation
+
 ### Association Management Components
 
 #### AssociationManager

package/package.json

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

package/src/components/DropZone.jsx

@@ -1,7 +1,18 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
-import { X as CircleX, File, Trash2 as TrashCan } from 'lucide-react';
+import { 
+    X as CircleX, 
+    File, 
+    Trash2 as TrashCan,
+    FileText,
+    FileSpreadsheet,
+    FileImage,
+    FileCode,
+    FileArchive,
+    FileAudio,
+    FileVideo
+} from 'lucide-react';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';
@@ -12,8 +23,188 @@ import CustomFetch from './Fetch';
 import Gallery from './Gallery';
 import styles from './styles/DropZone.module.css';
 
-function VisnsDropZone({ fetchData, files, settings }) {
+// Function to get the appropriate file icon based on extension
+const getFileIcon = (extension) => {
+    if (!extension) return File;
+    
+    const ext = extension.toLowerCase().replace('.', '');
+    
+    // Document types
+    if (['pdf', 'doc', 'docx', 'txt', 'rtf', 'odt'].includes(ext)) return FileText;
+    if (['xls', 'xlsx', 'csv', 'ods'].includes(ext)) return FileSpreadsheet;
+    
+    // Image types
+    if (['jpg', 'jpeg', 'png', 'gif', 'bmp', 'svg', 'webp', 'ico'].includes(ext)) return FileImage;
+    
+    // Code types
+    if (['js', 'jsx', 'ts', 'tsx', 'html', 'css', 'scss', 'php', 'py', 'java', 'cpp', 'c', 'json', 'xml', 'yml', 'yaml'].includes(ext)) return FileCode;
+    
+    // Archive types
+    if (['zip', 'rar', '7z', 'tar', 'gz', 'bz2'].includes(ext)) return FileArchive;
+    
+    // Audio types
+    if (['mp3', 'wav', 'flac', 'aac', 'ogg', 'm4a'].includes(ext)) return FileAudio;
+    
+    // Video types
+    if (['mp4', 'avi', 'mkv', 'mov', 'wmv', 'flv', 'webm'].includes(ext)) return FileVideo;
+    
+    // Default file icon
+    return File;
+};
+
+function VisnsDropZone({ fetchData, files, settings, url, urlKey, deleteUrl, entityData = {}, routeParams = {}, dataKey }) {
+    console.log('DropZone: Component initialized with props:', {
+        hasFetchData: typeof fetchData === 'function',
+        files,
+        filesCount: files ? files.length : 0,
+        settings,
+        url,
+        urlKey,
+        deleteUrl,
+        entityData,
+        routeParams,
+        dataKey
+    });
+    
     const [data, setData] = useState(files);
+    
+    // Debug logging for data state changes
+    useEffect(() => {
+        console.log('DropZone: Data state changed:', {
+            data,
+            dataCount: data ? data.length : 0,
+            dataType: typeof data,
+            isArray: Array.isArray(data),
+            firstItem: data && data.length > 0 ? data[0] : null
+        });
+    }, [data]);
+    
+    // Helper function to get nested object value using dot notation
+    const getNestedValue = React.useCallback((obj, path) => {
+        if (!obj || !path) {
+            console.log('DropZone getNestedValue: Invalid input', { obj: !!obj, path });
+            return null;
+        }
+        
+        console.log('DropZone getNestedValue called:', { 
+            objType: typeof obj,
+            objKeys: Object.keys(obj || {}),
+            path,
+            pathType: typeof path
+        });
+        
+        try {
+            const result = path.split('.').reduce((current, key) => {
+                console.log('Accessing key:', key, 'from current:', {
+                    currentType: typeof current,
+                    currentValue: current,
+                    hasKey: current && current.hasOwnProperty(key),
+                    keyValue: current?.[key]
+                });
+                return current && current[key] !== undefined ? current[key] : null;
+            }, obj);
+            
+            console.log('DropZone getNestedValue final result:', { path, result, resultType: typeof result });
+            return result;
+        } catch (error) {
+            console.error('DropZone getNestedValue error:', error, { obj, path });
+            return null;
+        }
+    }, []);
+    
+    // Process URL with key substitution and urlKey support
+    const processUrl = (baseUrl) => {
+        if (!baseUrl) return baseUrl;
+        
+        let processedUrl = baseUrl;
+        
+        // Handle {key} placeholder substitution
+        if (processedUrl.includes('{key}')) {
+            let keyValue = null;
+            
+            if (urlKey) {
+                // New config: Get the value from entityData using urlKey path
+                keyValue = getNestedValue(entityData, urlKey);
+                console.log('DropZone {key} replacement (new config):', {
+                    urlKey,
+                    keyValue,
+                    entityData
+                });
+            } else {
+                // Old config: Fallback to routeParams.dataId or entityData.id for backward compatibility
+                keyValue = routeParams.dataId || entityData.id;
+                console.log('DropZone {key} replacement (old config fallback):', {
+                    keyValue,
+                    routeParams,
+                    entityDataId: entityData.id
+                });
+            }
+            
+            if (keyValue) {
+                processedUrl = processedUrl.replace('{key}', keyValue);
+                console.log('DropZone: Successfully replaced {key} with:', keyValue);
+            } else {
+                console.warn('DropZone: Could not resolve {key} placeholder, leaving as-is', {
+                    urlKey,
+                    entityData,
+                    routeParams,
+                    originalUrl: baseUrl
+                });
+                // Don't replace if we can't find the value - this will leave the placeholder intact
+                // which should help identify the issue
+            }
+        }
+        
+        // Handle {dataId} placeholder substitution
+        if (processedUrl.includes('{dataId}')) {
+            let dataId = routeParams.dataId || entityData.id;
+            
+            console.log('DropZone {dataId} replacement:', {
+                dataId,
+                routeParams,
+                entityDataId: entityData.id
+            });
+            
+            if (dataId) {
+                processedUrl = processedUrl.replace('{dataId}', dataId);
+            }
+        }
+        
+        console.log('DropZone URL Processing:', {
+            originalUrl: baseUrl,
+            processedUrl,
+            hasUnreplacedPlaceholders: processedUrl.includes('{') || processedUrl.includes('}')
+        });
+        
+        return processedUrl;
+    };
+    
+    // Process the URL, preferring the direct url prop over settings.url
+    // For backward compatibility: if no url prop is passed, use settings.url without processing
+    // If url prop is passed (new config), process it for placeholders
+    const finalUrl = React.useMemo(() => {
+        const baseUrl = url || settings.url || '/ajax/files';
+        const processed = url ? processUrl(url) : baseUrl;
+        
+        console.log('DropZone Final URL Processing:', {
+            inputUrl: url,
+            settingsUrl: settings.url,
+            baseUrl,
+            processedUrl: processed,
+            willProcess: !!url,
+            entityData,
+            urlKey,
+            routeParams
+        });
+        
+        return processed;
+    }, [url, settings.url, entityData, urlKey, routeParams]);
+    
+    // Process deleteUrl similarly
+    const finalDeleteUrl = React.useMemo(() => {
+        const baseDeleteUrl = deleteUrl || settings.deleteUrl || '/ajax/files/delete';
+        return deleteUrl ? processUrl(deleteUrl) : baseDeleteUrl;
+    }, [deleteUrl, settings.deleteUrl, entityData, urlKey, routeParams]);
 
     /** Modal States */
     const [modalData, setModalData] = useState({
@@ -39,7 +230,14 @@ function VisnsDropZone({ fetchData, files, settings }) {
     };
 
     const onDrop = useCallback((acceptedFiles) => {
+        console.log('DropZone: onDrop called with files:', {
+            acceptedFiles,
+            filesCount: acceptedFiles.length,
+            fileNames: acceptedFiles.map(f => f.name)
+        });
+        
         acceptedFiles.forEach((a) => {
+            console.log('DropZone: Processing file:', a.name);
             Vapor.store(a, {
                 progress: (progress) => {
                     setLoadingProgress(progress * 100);
@@ -47,7 +245,7 @@ function VisnsDropZone({ fetchData, files, settings }) {
             }).then((response) => {
                 setLoadingProgress(0);
                 CustomFetch(
-                    settings.url,
+                    finalUrl,
                     settings.method,
                     {
                         uuid: response.uuid,
@@ -57,17 +255,25 @@ function VisnsDropZone({ fetchData, files, settings }) {
                         filesize: a.size,
                         extension: response.extension,
                         ...settings.data,
+                        // Pass route parameters for URL processing
+                        ...routeParams,
                     },
                     function (result) {
+                        console.log('DropZone: Upload response received:', {
+                            result,
+                            error: result.error,
+                            hasData: !!result.data,
+                            dataStructure: result.data ? Object.keys(result.data) : null
+                        });
+                        
                         if (result.error === '') {
-                            if (typeof fetchData === 'function') {
-                                fetchData();
-
-                                toast.success(
-                                    'File has been successfully uploaded.'
-                                );
-                            }
+                            console.log('DropZone: Upload successful, calling enhancedFetchData...');
+                            enhancedFetchData();
+                            toast.success(
+                                'File has been successfully uploaded.'
+                            );
                         } else {
+                            console.error('DropZone: Upload failed with error:', result.error);
                             toast.error(String(result.error));
                         }
                     }
@@ -130,16 +336,14 @@ function VisnsDropZone({ fetchData, files, settings }) {
                         label: 'Yes',
                         onClick: () => {
                             CustomFetch(
-                                `/ajax/files/delete`,
+                                finalDeleteUrl,
                                 'POST',
                                 {
                                     file_id: id,
                                 },
                                 function (result) {
                                     if (result.error === '') {
-                                        if (typeof fetchData === 'function') {
-                                            fetchData();
-                                        }
+                                        enhancedFetchData();
                                     }
                                 }
                             );
@@ -176,9 +380,7 @@ function VisnsDropZone({ fetchData, files, settings }) {
                 toast.success('File metadata has been successfully updated.');
                 modalClose();
 
-                if (typeof fetchData === 'function') {
-                    fetchData();
-                }
+                enhancedFetchData();
             } else {
                 toast.error(res.data.error);
             }
@@ -209,7 +411,114 @@ function VisnsDropZone({ fetchData, files, settings }) {
         }
     }, [data]);
 
+    // Smart dataKey adaptation function
+    const getAdaptedDataKey = React.useCallback((responseData, originalDataKey) => {
+        if (!originalDataKey || !responseData) return originalDataKey;
+        
+        // First try the original dataKey
+        if (getNestedValue(responseData, originalDataKey)) {
+            console.log('DropZone: Original dataKey works:', originalDataKey);
+            return originalDataKey;
+        }
+        
+        // If the original dataKey doesn't work, try to adapt it
+        // For nested keys like "estimation.design.lead.documents", the last part is usually the field we want
+        const keyParts = originalDataKey.split('.');
+        const lastPart = keyParts[keyParts.length - 1]; // e.g., "documents"
+        
+        // Try the last part directly (most common case)
+        // e.g., "estimation.design.lead.documents" -> "documents"
+        if (responseData.hasOwnProperty(lastPart)) {
+            console.log('DropZone: Using last part of key directly:', lastPart);
+            return lastPart;
+        }
+        
+        // If that doesn't work, try progressively shorter paths (but skip relationship parts)
+        // This handles cases where there might be some intermediate structure
+        for (let i = keyParts.length - 1; i >= 0; i--) {
+            const adaptedKey = keyParts.slice(i).join('.');
+            console.log('DropZone: Trying adapted key:', adaptedKey);
+            
+            if (getNestedValue(responseData, adaptedKey)) {
+                console.log('DropZone: Adapted key works:', adaptedKey);
+                return adaptedKey;
+            }
+        }
+        
+        console.warn('DropZone: No suitable dataKey found, falling back to original:', originalDataKey);
+        return originalDataKey;
+    }, [getNestedValue]);
+
+    // Enhanced fetchData that handles smart data extraction from API responses
+    const enhancedFetchData = React.useCallback(() => {
+        console.log('DropZone: enhancedFetchData called!', {
+            hasFetchDataFunction: typeof fetchData === 'function',
+            finalUrl,
+            dataKey,
+            willCallOriginalFetchData: typeof fetchData === 'function',
+            willCallSmartFetch: !!(finalUrl && dataKey)
+        });
+        
+        if (typeof fetchData === 'function') {
+            console.log('DropZone: Calling original fetchData function...');
+            // Call the original fetchData function
+            fetchData();
+        } else if (finalUrl && dataKey) {
+            // If we have a URL and dataKey, fetch the data ourselves and extract using the key
+            console.log('DropZone: Fetching data with smart extraction', {
+                url: finalUrl,
+                dataKey,
+                entityData
+            });
+            
+            CustomFetch(
+                finalUrl,
+                'GET',
+                {},
+                function (result) {
+                    if (result.error === '') {
+                        console.log('DropZone: API response received', { 
+                            result,
+                            originalDataKey: dataKey,
+                            responseStructure: Object.keys(result.data || {})
+                        });
+                        
+                        // Get the adapted dataKey based on the response structure
+                        const adaptedKey = getAdaptedDataKey(result.data, dataKey);
+                        
+                        // Extract files using the adapted dataKey path
+                        const extractedFiles = getNestedValue(result.data, adaptedKey) || [];
+                        
+                        console.log('DropZone: About to set extracted files:', {
+                            originalDataKey: dataKey,
+                            adaptedDataKey: adaptedKey,
+                            extractedFiles,
+                            count: extractedFiles.length,
+                            currentDataState: data,
+                            currentDataCount: data ? data.length : 0
+                        });
+                        
+                        setData(extractedFiles);
+                        
+                        console.log('DropZone: setData called with:', {
+                            newData: extractedFiles,
+                            newDataCount: extractedFiles.length
+                        });
+                    } else {
+                        console.error('DropZone: API error', result.error);
+                        toast.error(String(result.error));
+                    }
+                }
+            );
+        }
+    }, [fetchData, finalUrl, dataKey, entityData, getNestedValue, getAdaptedDataKey]);
+
     useEffect(() => {
+        console.log('DropZone: Files prop changed, updating data:', {
+            newFiles: files,
+            filesCount: files ? files.length : 0,
+            filesStructure: files && files.length > 0 ? Object.keys(files[0] || {}) : null
+        });
         setData(files);
     }, [files]);
 
@@ -243,7 +552,15 @@ function VisnsDropZone({ fetchData, files, settings }) {
                     </div>
                     {settings.type !== 'gallery' ? (
                         <ul className={styles.dropzoneFiles}>
-                            {data && data.length > 0
+                            {(() => {
+                                console.log('DropZone: Rendering files list:', {
+                                    data,
+                                    dataLength: data ? data.length : 0,
+                                    hasData: data && data.length > 0,
+                                    settingsType: settings.type
+                                });
+                                return data && data.length > 0;
+                            })()
                                 ? data.map((a, b) => (
                                       <li
                                           onClick={() => {
@@ -257,13 +574,18 @@ function VisnsDropZone({ fetchData, files, settings }) {
                                                   styles.dropzoneFileContent
                                               }
                                           >
-                                              <File
-                                                  strokeWidth={2}
-                                                  size={20}
-                                                  className={
-                                                      styles.dropzoneFileIcon
-                                                  }
-                                              />
+                                              {(() => {
+                                                  const IconComponent = getFileIcon(a.file_extension);
+                                                  return (
+                                                      <IconComponent
+                                                          strokeWidth={2}
+                                                          size={20}
+                                                          className={
+                                                              styles.dropzoneFileIcon
+                                                          }
+                                                      />
+                                                  );
+                                              })()}
                                               <span
                                                   className={
                                                       styles.dropzoneFileName

package/src/components/generic/GenericDetail.jsx

@@ -81,6 +81,7 @@ import StagePopupModal from './StagePopupModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
 import CategorizedDropZone from '../CategorizedDropZone';
+import VisnsDropZone from '../DropZone';
 
 // Proposal components
 import ProposalTemplateSectionManager from '../proposal/ProposalTemplateSectionManager';
@@ -240,6 +241,17 @@ function GenericDetail({
 
     /** Fileupload states */
     const [files, setFiles] = useState([]);
+    
+    // Debug logging for files state changes
+    useEffect(() => {
+        console.log('GenericDetail: Files state changed:', {
+            files,
+            filesCount: files ? files.length : 0,
+            filesType: typeof files,
+            isArray: Array.isArray(files),
+            firstFile: files && files.length > 0 ? files[0] : null
+        });
+    }, [files]);
     const [loadingProgress, setLoadingProgress] = useState(0);
 
     /** General States */
@@ -1699,6 +1711,49 @@ function GenericDetail({
                             );
                         }
                         case 'dropzone':
+                            // Replace URL parameters like {key} with actual values (same logic as categorized_dropzone)
+                            const replaceDropzoneUrlParams = (url) => {
+                                if (!url) return url;
+
+                                // Handle the new urlKey parameter
+                                const urlKey =
+                                    activeTabConfig.urlKey || 'dataId';
+
+                                let replacementValue;
+                                if (urlKey === 'dataId') {
+                                    // Use routeParams for dataId (backward compatibility)
+                                    replacementValue =
+                                        routeParams[urlParam] || '';
+                                } else {
+                                    // Use data object for other keys, supporting dot notation
+                                    replacementValue = urlKey
+                                        .split('.')
+                                        .reduce((obj, key) => {
+                                            return obj && obj[key] !== undefined
+                                                ? obj[key]
+                                                : '';
+                                        }, data);
+                                }
+
+                                // Replace both {key} and {dataId} patterns for backward compatibility
+                                return url
+                                    .replace(/{key}/g, replacementValue)
+                                    .replace(/{dataId}/g, replacementValue);
+                            };
+
+                            // Helper function to get nested object value using dot notation
+                            const getNestedValue = (obj, path) => {
+                                if (!obj || !path) return null;
+                                return path.split('.').reduce((current, key) => {
+                                    return current && current[key] !== undefined ? current[key] : null;
+                                }, obj);
+                            };
+
+                            // Extract files using nested key support
+                            const files = activeTabConfig.key 
+                                ? getNestedValue(data, activeTabConfig.key) || []
+                                : [];
+
                             const downloadFile = (file) => {
                                 const { id, file_url, file_name } = file;
                                 const toastId = toast.loading(
@@ -1807,6 +1862,12 @@ function GenericDetail({
                                 }
                             };
 
+                            // Create a fetchData function that refetches the main data
+                            const handleFetchData = () => {
+                                console.log('GenericDetail: DropZone fetchData called, refetching main data...');
+                                setDataReload(!dataReload);
+                            };
+
                             return (
                                 <div className={styles.gridtxt}>
                                     <div className={styles.gridtxt__header}>
@@ -1814,19 +1875,29 @@ function GenericDetail({
                                             ? activeTabConfig.label
                                             : 'Files'}
                                     </div>
-                                    <div className={styles.progress}>
-                                        <motion.div
-                                            className={styles.progress__bar}
-                                            initial={{ width: '0%' }}
-                                            animate={{
-                                                width: loadingProgress + '%',
-                                            }}
-                                            transition={{
-                                                duration: 2,
-                                                ease: [0.165, 0.84, 0.44, 1.0],
-                                            }}
-                                        />
-                                    </div>
+                                    <VisnsDropZone
+                                        fetchData={handleFetchData}
+                                        files={files}
+                                        settings={{
+                                            url: replaceDropzoneUrlParams(activeTabConfig.url),
+                                            method: 'PUT',
+                                            type: activeTabConfig.filetype === 'image' ? 'gallery' : 'list',
+                                            data: {
+                                                file_relationship: activeTabConfig.file_relationship,
+                                            },
+                                            folder: activeTabConfig.folder || 'uploads',
+                                            filetype: activeTabConfig.filetype,
+                                            deleteUrl: replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete',
+                                            showDescription: true,
+                                        }}
+                                        url={replaceDropzoneUrlParams(activeTabConfig.url)}
+                                        urlKey={activeTabConfig.urlKey}
+                                        deleteUrl={replaceDropzoneUrlParams(activeTabConfig.deleteUrl) || '/ajax/files/delete'}
+                                        entityData={data}
+                                        routeParams={routeParams}
+                                        dataKey={activeTabConfig.key}
+                                    />
+                                    {/* OLD INLINE DROPZONE - TO BE REMOVED
                                     <Dropzone
                                         accept={getAcceptTypes(
                                             activeTabConfig.filetype
@@ -1888,16 +1959,28 @@ function GenericDetail({
                                                         };
 
                                                         CustomFetch(
-                                                            `${activeTabConfig.url}/${routeParams[urlParam]}`,
+                                                            replaceDropzoneUrlParams(activeTabConfig.url) || `${activeTabConfig.url}/${routeParams[urlParam]}`,
                                                             'PUT',
                                                             requestBody,
                                                             (res) => {
+                                                                console.log('GenericDetail: Upload response received:', {
+                                                                    res,
+                                                                    hasError: res.error && res.error !== '',
+                                                                    error: res.error,
+                                                                    hasData: !!res.data,
+                                                                    dataStructure: res.data ? Object.keys(res.data) : null,
+                                                                    fileRelationship: activeTabConfig.file_relationship,
+                                                                    hasFileRelationshipData: res.data && activeTabConfig.file_relationship && res.data[activeTabConfig.file_relationship],
+                                                                    fileRelationshipData: res.data && activeTabConfig.file_relationship ? res.data[activeTabConfig.file_relationship] : null
+                                                                });
+                                                                
                                                                 // Check if there's an error in the response
                                                                 if (
                                                                     res.error &&
                                                                     res.error !==
                                                                         ''
                                                                 ) {
+                                                                    console.error('GenericDetail: Upload error:', res.error);
                                                                     toast.update(
                                                                         uploadToastId,
                                                                         {
@@ -1915,17 +1998,18 @@ function GenericDetail({
                                                                             .file_relationship
                                                                     ]
                                                                 ) {
-                                                                    setFiles(
-                                                                        res
-                                                                            .data[
-                                                                            activeTabConfig
-                                                                                .file_relationship
-                                                                        ]
-                                                                    );
+                                                                    const newFiles = res.data[activeTabConfig.file_relationship];
+                                                                    console.log('GenericDetail: Setting files from file_relationship:', {
+                                                                        fileRelationship: activeTabConfig.file_relationship,
+                                                                        newFiles,
+                                                                        filesCount: newFiles ? newFiles.length : 0
+                                                                    });
+                                                                    
+                                                                    setFiles(newFiles);
+                                                                    
                                                                     // Update the main data state with the new data
-                                                                    setData(
-                                                                        res.data
-                                                                    );
+                                                                    console.log('GenericDetail: Updating main data state:', res.data);
+                                                                    setData(res.data);
 
                                                                     // Update the upload toast
                                                                     toast.update(
@@ -1937,20 +2021,26 @@ function GenericDetail({
                                                                         }
                                                                     );
                                                                 } else {
+                                                                    console.log('GenericDetail: File relationship not found, trying fallback...', {
+                                                                        hasDataFiles: !!(res?.data?.files),
+                                                                        dataFiles: res?.data?.files
+                                                                    });
+                                                                    
                                                                     if (
                                                                         res
                                                                             ?.data
                                                                             ?.files
                                                                     ) {
-                                                                        setFiles(
-                                                                            res
-                                                                                .data
-                                                                                .files
-                                                                        );
+                                                                        console.log('GenericDetail: Setting files from data.files fallback:', {
+                                                                            files: res.data.files,
+                                                                            filesCount: res.data.files.length
+                                                                        });
+                                                                        
+                                                                        setFiles(res.data.files);
+                                                                        
                                                                         // Update the main data state with the new data
-                                                                        setData(
-                                                                            res.data
-                                                                        );
+                                                                        console.log('GenericDetail: Updating main data state (fallback):', res.data);
+                                                                        setData(res.data);
 
                                                                         // Update the upload toast
                                                                         toast.update(
@@ -1961,6 +2051,22 @@ function GenericDetail({
                                                                                 autoClose: 3000,
                                                                             }
                                                                         );
+                                                                    } else {
+                                                                        console.warn('GenericDetail: No files found in upload response!', {
+                                                                            response: res,
+                                                                            expectedFileRelationship: activeTabConfig.file_relationship,
+                                                                            hasDataFiles: !!(res?.data?.files),
+                                                                            responseDataKeys: res?.data ? Object.keys(res.data) : null
+                                                                        });
+                                                                        
+                                                                        toast.update(
+                                                                            uploadToastId,
+                                                                            {
+                                                                                render: `${file.name} uploaded but files not found in response`,
+                                                                                type: 'warning',
+                                                                                autoClose: 5000,
+                                                                            }
+                                                                        );
                                                                     }
                                                                 }
                                                             }
@@ -2017,8 +2123,16 @@ function GenericDetail({
                                                         </p>
                                                     )}
                                                 </div>
-                                                {activeTabConfig.filetype ===
-                                                'image' ? (
+                                                {(() => {
+                                                    const isImage = activeTabConfig.filetype === 'image';
+                                                    console.log('GenericDetail: Checking filetype for rendering:', {
+                                                        filetype: activeTabConfig.filetype,
+                                                        isImage,
+                                                        files,
+                                                        filesCount: files ? files.length : 0
+                                                    });
+                                                    return isImage;
+                                                })() ? (
                                                     <div>
                                                         <ul
                                                             className={
@@ -2152,7 +2266,15 @@ function GenericDetail({
                                                             styles.dropzone__files
                                                         }
                                                     >
-                                                        {files.map((a, b) => (
+                                                        {(() => {
+                                                            console.log('GenericDetail: Rendering files list (non-gallery):', {
+                                                                files,
+                                                                filesCount: files ? files.length : 0,
+                                                                isArray: Array.isArray(files),
+                                                                willRender: files && Array.isArray(files) && files.length > 0
+                                                            });
+                                                            return files;
+                                                        })().map((a, b) => (
                                                             <li key={'tf-' + b}>
                                                                 <div
                                                                     className="file-info"
@@ -2208,6 +2330,7 @@ function GenericDetail({
                                             </section>
                                         )}
                                     </Dropzone>
+                                    */}
                                 </div>
                             );
                         case 'dynamicform':