@visns-studio/visns-components 5.12.6 → 5.12.8

package/package.json

@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.19.2",
+        "framer-motion": "^12.23.0",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
-        "lucide-react": "^0.518.0",
+        "lucide-react": "^0.525.0",
         "moment": "^2.30.1",
-        "motion": "^12.19.2",
+        "motion": "^12.23.0",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -47,10 +47,10 @@
         "react-reveal": "^1.2.2",
         "react-router-dom": "^6.30.1",
         "react-select": "^5.10.1",
-        "react-signature-pad-wrapper": "^4.1.0",
+        "react-signature-pad-wrapper": "^4.1.1",
         "react-slugify": "^4.0.1",
         "react-sortable-hoc": "^2.0.0",
-        "react-to-print": "^3.1.0",
+        "react-to-print": "^3.1.1",
         "react-toastify": "^11.0.5",
         "react-toggle": "^4.1.3",
         "react-tooltip": "^5.29.1",
@@ -58,19 +58,19 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.22.1",
+        "sweetalert2": "^11.22.2",
         "tesseract.js": "^6.0.1",
         "truncate": "^3.0.0",
         "uuid": "^11.1.0",
         "validator": "^13.15.15",
         "vite": "^6.3.5",
         "yarn": "^1.22.22",
-        "yet-another-react-lightbox": "^3.23.4"
+        "yet-another-react-lightbox": "^3.24.0"
     },
     "devDependencies": {
-        "@babel/core": "^7.27.7",
-        "@babel/plugin-transform-runtime": "^7.27.4",
-        "@babel/preset-env": "^7.27.2",
+        "@babel/core": "^7.28.0",
+        "@babel/plugin-transform-runtime": "^7.28.0",
+        "@babel/preset-env": "^7.28.0",
         "@babel/preset-react": "^7.27.1",
         "babel-loader": "^10.0.0",
         "copy-webpack-plugin": "^13.0.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.12.6",
+    "version": "5.12.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/CategorizedDropZone.jsx

@@ -0,0 +1,286 @@
+import React, { useState, useEffect } from 'react';
+import DropZone from './DropZone';
+import CustomFetch from './Fetch';
+import styles from './styles/CategorizedDropZone.module.scss';
+
+const CategorizedDropZone = ({
+    filetype = 'image',
+    folder = 'uploads',
+    dataKey = 'files',
+    file_relationship = 'files',
+    url = '/ajax/files',
+    method = 'POST',
+    deleteUrl = '/ajax/files/delete',
+    categories = [],
+    categoriesUrl = null,
+    categoriesWhere = [],
+    entityData = {},
+    routeParams = {},
+    fetchData = null
+}) => {
+    const [activeCategory, setActiveCategory] = useState(null);
+    const [categorizedFiles, setCategorizedFiles] = useState({});
+    const [dynamicCategories, setDynamicCategories] = useState([]);
+    const [loadingCategories, setLoadingCategories] = useState(false);
+
+    // Get final categories (dynamic or static)
+    const finalCategories = dynamicCategories.length > 0 ? dynamicCategories : categories;
+
+    // Fetch categories from API if categoriesUrl is provided
+    useEffect(() => {
+        if (categoriesUrl) {
+            setLoadingCategories(true);
+            
+            const requestData = {};
+            if (categoriesWhere && categoriesWhere.length > 0) {
+                requestData.where = categoriesWhere;
+            }
+
+            CustomFetch(categoriesUrl, 'POST', requestData)
+                .then(response => {
+                    if (response.data && !response.data.error) {
+                        const categoriesData = Array.isArray(response.data.data) ? response.data.data : 
+                                              Array.isArray(response.data) ? response.data : [];
+                        
+                        // Transform API data to match expected format
+                        const transformedCategories = categoriesData.map(cat => ({
+                            id: cat.slug || cat.id,
+                            label: cat.name || cat.label,
+                            description: cat.description || ''
+                        }));
+                        
+                        setDynamicCategories(transformedCategories);
+                        
+                        // Set first category as active if none selected
+                        if (!activeCategory && transformedCategories.length > 0) {
+                            setActiveCategory(transformedCategories[0].id);
+                        }
+                    }
+                })
+                .catch(error => {
+                    console.error('Failed to load categories:', error);
+                })
+                .finally(() => {
+                    setLoadingCategories(false);
+                });
+        } else if (categories.length > 0 && !activeCategory) {
+            // Set first static category as active
+            setActiveCategory(categories[0].id);
+        }
+    }, [categoriesUrl, categoriesWhere, categories, activeCategory]);
+
+    useEffect(() => {
+        console.log('CategorizedDropZone: Initializing files', {
+            finalCategories,
+            entityData: entityData[dataKey],
+            dataKey
+        });
+        
+        // Initialize categorized files structure
+        const initialCategorizedFiles = {};
+        finalCategories.forEach(category => {
+            initialCategorizedFiles[category.id] = [];
+        });
+        
+        // If there are existing files, categorize them based on file_description
+        if (entityData[dataKey] && Array.isArray(entityData[dataKey])) {
+            console.log('CategorizedDropZone: Processing files', entityData[dataKey]);
+            
+            entityData[dataKey].forEach(file => {
+                console.log('CategorizedDropZone: Processing file', {
+                    file_name: file.file_name,
+                    file_description: file.file_description,
+                    id: file.id
+                });
+                
+                const category = getCategoryFromDescription(file.file_description);
+                console.log('CategorizedDropZone: Category extracted', category);
+                
+                if (category && initialCategorizedFiles[category]) {
+                    initialCategorizedFiles[category].push(file);
+                    console.log(`CategorizedDropZone: Added file ${file.file_name} to category ${category}`);
+                } else {
+                    console.log(`CategorizedDropZone: No category match for file ${file.file_name}`, {
+                        extractedCategory: category,
+                        availableCategories: Object.keys(initialCategorizedFiles)
+                    });
+                }
+            });
+        }
+        
+        console.log('CategorizedDropZone: Final categorized files', initialCategorizedFiles);
+        setCategorizedFiles(initialCategorizedFiles);
+    }, [entityData, dataKey, finalCategories]);
+
+    const getCategoryFromDescription = (description) => {
+        if (!description) return null;
+        
+        // Check if the description contains a category identifier (handles both slugs and numeric IDs)
+        const categoryMatch = description.match(/^category:([^-\s]+)/i);
+        if (categoryMatch) {
+            const extractedId = categoryMatch[1];
+            
+            // First, try to find by exact ID match
+            const exactMatch = finalCategories.find(cat => cat.id === extractedId);
+            if (exactMatch) return extractedId;
+            
+            // If no exact match, try to find by numeric ID if extracted ID is numeric
+            if (/^\d+$/.test(extractedId)) {
+                const numericMatch = finalCategories.find(cat => cat.id == extractedId);
+                if (numericMatch) return numericMatch.id;
+            }
+            
+            // Log for debugging
+            console.log('Category extraction debug:', {
+                description,
+                extractedId,
+                availableCategories: finalCategories.map(c => ({ id: c.id, label: c.label }))
+            });
+        }
+        
+        // Fallback: check if description matches any category label
+        const matchedCategory = finalCategories.find(cat => 
+            description.toLowerCase().includes(cat.label.toLowerCase())
+        );
+        return matchedCategory?.id || null;
+    };
+
+    const handleCategoryChange = (categoryId) => {
+        setActiveCategory(categoryId);
+    };
+
+    const getCurrentCategoryFiles = () => {
+        return categorizedFiles[activeCategory] || [];
+    };
+
+    const handleFileUpload = (files) => {
+        // Add category prefix to file descriptions
+        const activeCategoryData = finalCategories.find(cat => cat.id === activeCategory);
+        const categoryPrefix = `category:${activeCategory}`;
+        
+        // Update the files with category information
+        const updatedFiles = files.map(file => ({
+            ...file,
+            file_description: file.file_description ? 
+                `${categoryPrefix} - ${file.file_description}` : 
+                `${categoryPrefix} - ${activeCategoryData?.description || activeCategoryData?.label}`
+        }));
+        
+        // Update the categorized files state
+        setCategorizedFiles(prev => ({
+            ...prev,
+            [activeCategory]: [...(prev[activeCategory] || []), ...updatedFiles]
+        }));
+    };
+
+    const handleFileDelete = (fileId) => {
+        // Remove file from the appropriate category
+        setCategorizedFiles(prev => {
+            const updated = { ...prev };
+            Object.keys(updated).forEach(categoryId => {
+                updated[categoryId] = updated[categoryId].filter(file => file.id !== fileId);
+            });
+            return updated;
+        });
+    };
+
+    const handleFileUpdate = (updatedFile) => {
+        // Update file in the appropriate category
+        const newCategory = getCategoryFromDescription(updatedFile.file_description);
+        
+        setCategorizedFiles(prev => {
+            const updated = { ...prev };
+            
+            // Remove from old category
+            Object.keys(updated).forEach(categoryId => {
+                updated[categoryId] = updated[categoryId].filter(file => file.id !== updatedFile.id);
+            });
+            
+            // Add to new category
+            if (newCategory && updated[newCategory]) {
+                updated[newCategory].push(updatedFile);
+            }
+            
+            return updated;
+        });
+    };
+
+    // Prepare entity data for the current category
+    const currentCategoryEntityData = {
+        ...entityData,
+        [dataKey]: getCurrentCategoryFiles()
+    };
+
+    if (loadingCategories) {
+        return (
+            <div className={styles.categorizedDropZone}>
+                <div className={styles.loadingState}>
+                    Loading categories...
+                </div>
+            </div>
+        );
+    }
+
+    if (finalCategories.length === 0) {
+        return (
+            <div className={styles.categorizedDropZone}>
+                <div className={styles.emptyState}>
+                    No categories available. Please configure site photo categories in settings.
+                </div>
+            </div>
+        );
+    }
+
+    return (
+        <div className={styles.categorizedDropZone}>
+            <div className={styles.categoryTabs}>
+                {finalCategories.map(category => (
+                    <button
+                        key={category.id}
+                        className={`${styles.categoryTab} ${activeCategory === category.id ? styles.active : ''}`}
+                        onClick={() => handleCategoryChange(category.id)}
+                    >
+                        {category.label}
+                        {categorizedFiles[category.id] && categorizedFiles[category.id].length > 0 && (
+                            <span className={styles.fileCount}>
+                                ({categorizedFiles[category.id].length})
+                            </span>
+                        )}
+                    </button>
+                ))}
+            </div>
+            
+            <div className={styles.categoryContent}>
+                {activeCategory && (
+                    <div className={styles.categoryPanel}>
+                        {finalCategories.find(cat => cat.id === activeCategory)?.description && (
+                            <p className={styles.categoryDescription}>
+                                {finalCategories.find(cat => cat.id === activeCategory)?.description}
+                            </p>
+                        )}
+                        
+                        <DropZone
+                            fetchData={fetchData || (() => {
+                                // Default fetch function - refresh current category files
+                                console.log('Files updated for category:', activeCategory);
+                            })}
+                            files={getCurrentCategoryFiles()}
+                            settings={{
+                                url: url,
+                                method: method,
+                                type: 'gallery',
+                                data: {
+                                    file_relationship: file_relationship,
+                                    file_description: `category:${activeCategory} - ${finalCategories.find(cat => cat.id === activeCategory)?.label || activeCategory}`,
+                                },
+                                model: entityData?.constructor?.name || 'Design'
+                            }}
+                        />
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+};
+
+export default CategorizedDropZone;

package/src/components/Field.jsx

@@ -37,6 +37,7 @@ import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
 import VisnsDropZone from './DropZone';
+import DatePickerPortal from './utils/DatePickerPortal';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';
@@ -72,6 +73,7 @@ function Field({
 }) {
     const editorRef = useRef(null);
     const fileImageInputRef = useRef(null);
+    const containerRef = useRef(null);
     const [autoValue, setAutoValue] = useState('');
     const [colorPickerShow, setColorPickerShow] = useState(false);
     const [counter, setCounter] = useState(0);
@@ -2129,31 +2131,38 @@ function Field({
             case 'date':
             case 'datetime':
                 return (
-                    <DatePicker
-                        dateFormat={
-                            settings.format
-                                ? settings.format
-                                : settings.type === 'datetime'
-                                ? 'dd-MM-yyyy hh:mm aa'
-                                : 'dd-MM-yyyy'
-                        }
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={settings.type === 'datetime'}
-                        showTimeSelectOnly={settings.type === 'time'}
-                        timeIntervals={
-                            settings.type === 'time' ? 15 : undefined
-                        }
-                        timeCaption={
-                            settings.type === 'time' ? 'Time' : undefined
-                        }
-                        shouldCloseOnSelect={true}
-                    />
+                    <DatePickerPortal 
+                        containerRef={containerRef}
+                        centerScreen={settings.centerScreen}
+                        modalContext={settings.modalContext}
+                        usePortal={settings.usePortal}
+                    >
+                        <DatePicker
+                            dateFormat={
+                                settings.format
+                                    ? settings.format
+                                    : settings.type === 'datetime'
+                                    ? 'dd-MM-yyyy hh:mm aa'
+                                    : 'dd-MM-yyyy'
+                            }
+                            isClearable
+                            className={inputClass[settings.id]}
+                            selected={inputValue || ''}
+                            showMonthDropdown
+                            showYearDropdown
+                            scrollableYearDropdown
+                            onChange={(date) => onChangeDate(date, settings.id)}
+                            showTimeSelect={settings.type === 'datetime'}
+                            showTimeSelectOnly={settings.type === 'time'}
+                            timeIntervals={
+                                settings.type === 'time' ? 15 : undefined
+                            }
+                            timeCaption={
+                                settings.type === 'time' ? 'Time' : undefined
+                            }
+                            shouldCloseOnSelect={true}
+                        />
+                    </DatePickerPortal>
                 );
             case 'plaintext':
                 if (settings.description) {
@@ -2254,21 +2263,28 @@ function Field({
                 );
             case 'time':
                 return (
-                    <DatePicker
-                        dateFormat="hh:mm aa"
-                        isClearable
-                        className={inputClass[settings.id]}
-                        selected={inputValue || ''}
-                        showMonthDropdown
-                        showYearDropdown
-                        scrollableYearDropdown
-                        onChange={(date) => onChangeDate(date, settings.id)}
-                        showTimeSelect={true}
-                        showTimeSelectOnly={true}
-                        timeIntervals={15}
-                        timeCaption={'Time'}
-                        shouldCloseOnSelect={true}
-                    />
+                    <DatePickerPortal 
+                        containerRef={containerRef}
+                        centerScreen={settings.centerScreen}
+                        modalContext={settings.modalContext}
+                        usePortal={settings.usePortal}
+                    >
+                        <DatePicker
+                            dateFormat="hh:mm aa"
+                            isClearable
+                            className={inputClass[settings.id]}
+                            selected={inputValue || ''}
+                            showMonthDropdown
+                            showYearDropdown
+                            scrollableYearDropdown
+                            onChange={(date) => onChangeDate(date, settings.id)}
+                            showTimeSelect={true}
+                            showTimeSelectOnly={true}
+                            timeIntervals={15}
+                            timeCaption={'Time'}
+                            shouldCloseOnSelect={true}
+                        />
+                    </DatePickerPortal>
                 );
             case 'toggle':
                 return (
@@ -2522,7 +2538,7 @@ function Field({
     }, [counter]);
 
     return (
-        <div className={formItemClass} style={formItemStyle}>
+        <div className={formItemClass} style={formItemStyle} ref={containerRef}>
             <label
                 className={
                     ['richeditor', 'textarea'].includes(settings.type)

package/src/components/generic/GenericDetail.jsx

@@ -80,6 +80,7 @@ import QrCode from '../QrCode';
 import StagePopupModal from './StagePopupModal';
 import Table from '../DataGrid';
 import TableFilter from '../TableFilter';
+import CategorizedDropZone from '../CategorizedDropZone';
 
 // Proposal components
 import ProposalTemplateSectionManager from '../proposal/ProposalTemplateSectionManager';
@@ -2748,6 +2749,30 @@ function GenericDetail({
                             } else {
                                 return null;
                             }
+                        case 'categorized_dropzone':
+                            // Replace URL parameters like {dataId} with actual values
+                            const replaceUrlParams = (url) => {
+                                if (!url) return url;
+                                return url.replace(/{dataId}/g, routeParams[urlParam] || '');
+                            };
+                            
+                            return (
+                                <CategorizedDropZone
+                                    filetype={activeTabConfig.filetype}
+                                    folder={activeTabConfig.folder}
+                                    dataKey={activeTabConfig.key}
+                                    file_relationship={activeTabConfig.file_relationship}
+                                    url={replaceUrlParams(activeTabConfig.url)}
+                                    method={activeTabConfig.method}
+                                    deleteUrl={replaceUrlParams(activeTabConfig.deleteUrl)}
+                                    categories={activeTabConfig.categories || []}
+                                    categoriesUrl={activeTabConfig.categoriesUrl}
+                                    categoriesWhere={activeTabConfig.categoriesWhere}
+                                    entityData={data}
+                                    routeParams={routeParams}
+                                    fetchData={handleReload}
+                                />
+                            );
                         case 'scheduling':
                             return (
                                 <GenericEditableTable

package/src/components/generic/StagePopupModal.jsx

@@ -56,7 +56,20 @@ const StagePopupModal = ({
                         url = url.replace(`{${key}}`, routeParams[key]);
                     });
 
-                    const response = await CustomFetch(url, 'POST');
+                    // Prepare request data with where and fields parameters
+                    const requestData = {};
+                    
+                    // Add where parameter if available
+                    if (field.where) {
+                        requestData.where = field.where;
+                    }
+                    
+                    // Add fields parameter if available
+                    if (field.fields) {
+                        requestData.fields = field.fields;
+                    }
+
+                    const response = await CustomFetch(url, 'POST', requestData);
                     
                     if (response.data && !response.data.error) {
                         // Handle both nested (response.data.data) and direct (response.data) array formats

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

@@ -0,0 +1,217 @@
+// CategorizedDropZone.module.scss
+.categorizedDropZone {
+    width: 100%;
+    margin-bottom: 20px;
+}
+
+.categoryTabs {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 4px;
+    margin-bottom: 24px;
+    padding: 6px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e9ecef;
+}
+
+.categoryTab {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 10px 16px;
+    background-color: #ffffff;
+    border: 1px solid #dee2e6;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 500;
+    color: #6c757d;
+    transition: all 0.2s ease;
+    white-space: nowrap;
+    outline: none;
+
+    &:hover {
+        color: #495057;
+        background-color: #f8f9fa;
+        border-color: #adb5bd;
+    }
+
+    &.active {
+        color: #ffffff;
+        background-color: #3498db;
+        border-color: #3498db;
+        
+        .fileCount {
+            background-color: rgba(255, 255, 255, 0.2);
+            color: white;
+            border-color: rgba(255, 255, 255, 0.3);
+        }
+    }
+
+    &:focus {
+        outline: 2px solid #3498db;
+        outline-offset: 2px;
+    }
+}
+
+.fileCount {
+    background-color: #e9ecef;
+    color: #495057;
+    padding: 3px 7px;
+    border-radius: 10px;
+    font-size: 11px;
+    font-weight: 600;
+    min-width: 20px;
+    text-align: center;
+    border: 1px solid #ced4da;
+    transition: all 0.2s ease;
+    line-height: 1;
+}
+
+.categoryContent {
+    min-height: 300px;
+}
+
+.categoryPanel {
+    width: 100%;
+}
+
+.categoryTitle {
+    font-size: 20px;
+    font-weight: 600;
+    color: #2c3e50;
+    margin: 0 20px 8px 20px;
+    padding-bottom: 8px;
+    border-bottom: 2px solid #3498db;
+    display: block;
+    width: calc(100% - 40px);
+}
+
+.categoryDescription {
+    font-size: 14px;
+    color: #6c757d;
+    margin: 0 0 24px 0;
+    padding: 0 20px;
+    font-style: italic;
+}
+
+.loadingState,
+.emptyState {
+    text-align: center;
+    padding: 40px 20px;
+    color: #666;
+    font-size: 16px;
+}
+
+.loadingState {
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px dashed #ddd;
+}
+
+.emptyState {
+    background-color: #fff3cd;
+    border: 1px solid #ffeaa7;
+    border-radius: 8px;
+    color: #856404;
+}
+
+// Responsive design
+@media (max-width: 768px) {
+    .categoryTabs {
+        gap: 3px;
+        padding: 4px;
+        margin-bottom: 20px;
+    }
+    
+    .categoryTab {
+        flex: 1;
+        justify-content: center;
+        padding: 8px 12px;
+        font-size: 13px;
+        min-width: 0; // Allow tabs to shrink
+    }
+    
+    .fileCount {
+        font-size: 10px;
+        padding: 2px 5px;
+        min-width: 16px;
+    }
+    
+    .categoryTitle {
+        font-size: 18px;
+    }
+    
+    .categoryDescription {
+        font-size: 13px;
+        margin-bottom: 20px;
+    }
+}
+
+// Very small screens
+@media (max-width: 480px) {
+    .categoryTabs {
+        flex-direction: column;
+        gap: 2px;
+    }
+    
+    .categoryTab {
+        width: 100%;
+        padding: 12px 16px;
+        font-size: 14px;
+    }
+}
+
+// Dark theme support
+@media (prefers-color-scheme: dark) {
+    .categoryTabs {
+        background-color: #343a40;
+        border-color: #495057;
+    }
+    
+    .categoryTab {
+        background-color: #495057;
+        border-color: #6c757d;
+        color: #adb5bd;
+        
+        &:hover {
+            background-color: #6c757d;
+            border-color: #adb5bd;
+            color: #f8f9fa;
+        }
+        
+        &.active {
+            background-color: #3498db;
+            border-color: #3498db;
+            color: #ffffff;
+        }
+    }
+    
+    .fileCount {
+        background-color: #6c757d;
+        color: #f8f9fa;
+        border-color: #adb5bd;
+    }
+    
+    .categoryTitle {
+        color: #f8f9fa;
+        border-bottom-color: #3498db;
+    }
+    
+    .categoryDescription {
+        color: #adb5bd;
+    }
+    
+    .loadingState {
+        background-color: #343a40;
+        border-color: #495057;
+        color: #adb5bd;
+    }
+    
+    .emptyState {
+        background-color: #856404;
+        border-color: #ffc107;
+        color: #fff3cd;
+    }
+}

package/src/components/styles/DropZone.module.css

@@ -237,7 +237,7 @@
 /* Modal styles */
 .modalwrap {
     width: 100%;
-    max-width: 500px;
+    max-width: 800px;
 }
 
 .modal {

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

@@ -451,15 +451,7 @@ select:not(:placeholder-shown) + .fi__span {
     width: 100% !important;
 }
 
-.react-datepicker-popper {
-    z-index: 99999 !important;
-    position: fixed !important;
-    transform: none !important;
-    top: 50% !important;
-    left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
-}
+// DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
     background-color: rgba(var(--primary-rgb), 0.45) !important;

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

@@ -828,15 +828,7 @@ select:not(:placeholder-shown) + .fi__span {
     width: 100% !important;
 }
 
-.react-datepicker-popper {
-    z-index: 99999 !important;
-    position: fixed !important;
-    transform: none !important;
-    top: 50% !important;
-    left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
-}
+// DatePicker positioning removed - handled by global.css
 
 .react-datepicker__close-icon:after {
     background-color: rgba(var(--primary-rgb), 0.45) !important;

package/src/components/styles/global.css

@@ -196,7 +196,7 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
         .inovua-react-toolkit-text-input__input
     ):not(.inovua-react-toolkit-numeric-input__input):not(
         .variable-inserter-search-input
-    ) {
+    ):not(.react-datepicker__month-select):not(.react-datepicker__year-select) {
     background: white;
     border-radius: var(--br);
     border: 1px solid rgba(var(--paragraph-color-rgb), 0.15);
@@ -339,29 +339,38 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: 999 !important;
 }
 
-/* DatePicker z-index fix */
+/* DatePicker proper z-index hierarchy */
 .react-datepicker-popper {
-    z-index: 99999 !important;
+    z-index: 1060 !important; /* Above Bootstrap modals (1050) */
+    position: absolute !important; /* Use absolute positioning for proper context */
+}
+
+/* Center-screen positioning for modal contexts */
+.react-datepicker-popper.center-screen {
     position: fixed !important;
-    transform: none !important;
     top: 50% !important;
     left: 50% !important;
-    margin-top: -150px !important;
-    margin-left: -150px !important;
+    transform: translate(-50%, -50%) !important;
+    z-index: 1060 !important;
+}
+
+/* Portal mode for modal contexts */
+.react-datepicker-popper.portal-mode {
+    position: fixed !important;
+    z-index: 1060 !important;
 }
 
 .react-datepicker {
-    position: absolute !important;
+    position: relative !important;
     display: inline-block !important;
-    z-index: 99999 !important;
+    z-index: 1 !important;
     background-color: white !important;
     border-radius: 0.3rem !important;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
 }
 
 .react-datepicker-portal {
-    position: fixed !important;
-    z-index: 99999 !important;
+    z-index: 1060 !important;
 }
 
 /* Fix for specific modal header that's causing issues */
@@ -369,12 +378,9 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: 1 !important;
 }
 
-/* Make sure popup content doesn't constrain the datepicker */
-.popup-content {
-    overflow: visible !important;
-}
-
-.modal__content {
+/* Conditional overflow visibility only for modal contexts */
+.modal-with-datepicker .popup-content,
+.modal-with-datepicker .modal__content {
     overflow: visible !important;
 }
 
@@ -384,26 +390,179 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     border: 1px solid #aeaeae !important;
     border-radius: 0.3rem !important;
     box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2) !important;
+    float: left !important;
+}
+
+.react-datepicker {
+    position: relative !important;
+    display: inline-block !important;
+    background-color: white !important;
+    border-radius: 0.3rem !important;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3) !important;
+    min-width: 385px !important; /* Wider to accommodate month/year dropdowns */
+    width: auto !important;
+}
+
+/* Ensure time container appears on the right side */
+.react-datepicker__time-container {
+    float: right !important;
+    border-left: 1px solid #aeaeae !important;
+    width: 85px !important;
+    display: block !important;
+}
+
+/* Fix navigation button positioning */
+.react-datepicker__navigation {
+    position: absolute !important;
+    top: 2px !important;
+    z-index: 1 !important;
+    height: 32px !important;
+    width: 32px !important;
+    cursor: pointer !important;
+}
+
+.react-datepicker__navigation--previous {
+    left: 2px !important;
+}
+
+.react-datepicker__navigation--next {
+    right: 2px !important;
+}
+
+/* Fix next button positioning when time selector is present */
+.react-datepicker__navigation--next--with-time:not(
+        .react-datepicker__navigation--next--with-today-button
+    ) {
+    right: 87px !important; /* Account for time container width + border */
+}
+
+/* Ensure proper clearfix for float layout */
+.react-datepicker::after {
+    content: '' !important;
+    display: table !important;
+    clear: both !important;
+}
+
+/* Fix header layout to accommodate navigation buttons */
+.react-datepicker__header {
+    text-align: center !important;
+    background-color: #f0f0f0 !important;
+    border-bottom: 1px solid #aeaeae !important;
+    border-top-left-radius: 0.3rem !important;
+    border-top-right-radius: 0.3rem !important;
+    padding: 8px 0 !important;
+    position: relative !important;
+}
+
+/* Ensure current month text doesn't interfere with navigation */
+.react-datepicker__current-month,
+.react-datepicker-time__header,
+.react-datepicker-year-header {
+    margin-top: 0 !important;
+    color: #000 !important;
+    font-weight: bold !important;
+    font-size: 0.944rem !important;
+    padding: 0 40px !important; /* Add padding to avoid navigation button overlap */
 }
 
-/* Hide the arrow since we're centering the calendar */
+/* Alternative approach: Force specific width for month container */
+.react-datepicker__month-container {
+    width: calc(
+        100% - 87px
+    ) !important; /* Full width minus time container and border */
+    box-sizing: border-box !important;
+    min-width: 295px !important; /* Ensure enough space for month/year dropdowns */
+}
+
+/* Ensure time container has proper sizing and positioning */
+.react-datepicker__time-container {
+    height: auto !important;
+    min-height: 250px !important; /* Match typical calendar height */
+}
+
+/* Force container to maintain layout */
+.react-datepicker {
+    overflow: hidden !important; /* Contain floated children */
+}
+
+/* Make month and year select dropdowns more compact */
+.react-datepicker__month-dropdown-container,
+.react-datepicker__year-dropdown-container {
+    display: inline-block !important;
+    margin: 0 5px !important;
+}
+
+/* Target the actual select elements with higher specificity */
+.react-datepicker .react-datepicker__header .react-datepicker__month-select,
+.react-datepicker .react-datepicker__header .react-datepicker__year-select {
+    width: auto !important;
+    min-width: 70px !important;
+    max-width: 90px !important;
+    padding: 4px 8px !important;
+    font-size: 0.9rem !important;
+    border: 1px solid #aeaeae !important;
+    border-radius: 4px !important;
+    background-color: white !important;
+    cursor: pointer !important;
+    text-align: center !important;
+    margin: 0 2px !important;
+    box-sizing: border-box !important;
+}
+
+.react-datepicker .react-datepicker__header .react-datepicker__year-select {
+    min-width: 60px !important;
+    max-width: 70px !important;
+}
+
+/* Also target read-view elements for dropdowns */
+.react-datepicker__month-read-view,
+.react-datepicker__year-read-view {
+    width: auto !important;
+    min-width: 70px !important;
+    max-width: 90px !important;
+    padding: 4px 8px !important;
+    font-size: 0.9rem !important;
+    border: 1px solid #aeaeae !important;
+    border-radius: 4px !important;
+    background-color: white !important;
+    cursor: pointer !important;
+    text-align: center !important;
+}
+
+.react-datepicker__year-read-view {
+    min-width: 60px !important;
+    max-width: 70px !important;
+}
+
+/* Ensure dropdowns fit in header */
+.react-datepicker__header {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    gap: 8px !important;
+}
+
+/* Container for month/year dropdowns */
+.react-datepicker__current-month {
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 8px !important;
+    padding: 0 40px !important;
+}
+
+/* Show arrow for proper positioning context */
 .react-datepicker__triangle {
-    display: none !important;
+    display: block !important;
 }
 
-/* Ensure all containers allow the datepicker to be visible */
-.modal,
-.popup-content,
-.modal__content,
-.formItem,
-.fi__label,
-.dynamicform,
-.dynamic__left {
-    overflow: visible !important;
+/* Hide arrow only for center-screen mode */
+.react-datepicker-popper.center-screen .react-datepicker__triangle {
+    display: none !important;
 }
 
-/* Add a backdrop to make the datepicker stand out */
-.react-datepicker-popper::before {
+/* Backdrop only for center-screen mode */
+.react-datepicker-popper.center-screen::before {
     content: '' !important;
     position: fixed !important;
     top: 0 !important;
@@ -466,8 +625,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
 
     /* Checkerboard pattern for transparency */
-    background-image: 
-        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
         linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
@@ -478,8 +636,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
 .relation-color-preview:hover {
     border-color: #adb5bd;
     transform: scale(1.1);
-    box-shadow: 
-        inset 0 1px 2px rgba(0, 0, 0, 0.1),
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1),
         0 2px 8px rgba(0, 0, 0, 0.15);
 }
 
@@ -535,8 +692,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     flex-shrink: 0;
 
     /* Checkerboard pattern for transparency */
-    background-image: 
-        linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
+    background-image: linear-gradient(45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(-45deg, #f0f0f0 25%, transparent 25%),
         linear-gradient(45deg, transparent 75%, #f0f0f0 75%),
         linear-gradient(-45deg, transparent 75%, #f0f0f0 75%);
@@ -545,18 +701,19 @@ form div:has(.react-toggle) input[type='checkbox'] {
 }
 
 /* When no color is selected */
-.cpicker__box[style=""] {
-    background: 
-        linear-gradient(45deg, 
-            transparent 40%, 
-            #dc3545 42%, 
-            #dc3545 58%, 
+.cpicker__box[style=''] {
+    background: linear-gradient(
+            45deg,
+            transparent 40%,
+            #dc3545 42%,
+            #dc3545 58%,
             transparent 60%
         ),
-        linear-gradient(-45deg, 
-            transparent 40%, 
-            #dc3545 42%, 
-            #dc3545 58%, 
+        linear-gradient(
+            -45deg,
+            transparent 40%,
+            #dc3545 42%,
+            #dc3545 58%,
             transparent 60%
         ),
         #ffffff;
@@ -600,7 +757,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     .cpicker-container {
         padding: 6px;
     }
-    
+
     .cpicker-container .w-color-sketch {
         transform: scale(0.75) !important;
     }
@@ -610,7 +767,7 @@ form div:has(.react-toggle) input[type='checkbox'] {
     .cpicker-container {
         padding: 4px;
     }
-    
+
     .cpicker-container .w-color-sketch {
         transform: scale(0.65) !important;
     }

package/src/components/utils/DatePickerPortal.jsx

@@ -0,0 +1,127 @@
+import React, { useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+/**
+ * DatePickerPortal - Smart portal component for DatePicker positioning
+ * 
+ * Automatically detects if the DatePicker is inside a modal context
+ * and renders it appropriately to prevent z-index conflicts
+ */
+const DatePickerPortal = ({ 
+  children, 
+  usePortal = null, // null = auto-detect, true = force portal, false = no portal
+  modalContext = null, // null = auto-detect, true = force modal styling, false = normal
+  centerScreen = false, // true = force center-screen positioning
+  containerRef = null // reference to the input container for positioning
+}) => {
+  const [shouldUsePortal, setShouldUsePortal] = useState(false);
+  const [isModalContext, setIsModalContext] = useState(false);
+  const [portalContainer, setPortalContainer] = useState(null);
+
+  useEffect(() => {
+    // Auto-detect modal context if not explicitly set
+    if (modalContext === null) {
+      const detectModalContext = () => {
+        if (containerRef && containerRef.current) {
+          // Check if the container is inside a modal
+          const modalSelectors = [
+            '.modal',
+            '.popup-content',
+            '.modal__content',
+            '.swal2-container',
+            '[role="dialog"]',
+            '[aria-modal="true"]'
+          ];
+          
+          for (const selector of modalSelectors) {
+            if (containerRef.current.closest(selector)) {
+              setIsModalContext(true);
+              setShouldUsePortal(true);
+              return;
+            }
+          }
+        }
+        setIsModalContext(false);
+        setShouldUsePortal(false);
+      };
+      
+      detectModalContext();
+    } else {
+      setIsModalContext(modalContext);
+      setShouldUsePortal(modalContext);
+    }
+  }, [modalContext, containerRef]);
+
+  useEffect(() => {
+    // Override auto-detection if explicitly set
+    if (usePortal !== null) {
+      setShouldUsePortal(usePortal);
+    }
+  }, [usePortal]);
+
+  useEffect(() => {
+    // Create portal container
+    if (shouldUsePortal) {
+      const container = document.createElement('div');
+      container.className = 'datepicker-portal-container';
+      
+      // Add appropriate classes based on context
+      if (isModalContext || centerScreen) {
+        container.classList.add('modal-context');
+      }
+      
+      document.body.appendChild(container);
+      setPortalContainer(container);
+      
+      // Add modal-context class to body for CSS targeting
+      if (isModalContext) {
+        document.body.classList.add('modal-with-datepicker');
+      }
+      
+      return () => {
+        document.body.removeChild(container);
+        document.body.classList.remove('modal-with-datepicker');
+      };
+    }
+  }, [shouldUsePortal, isModalContext, centerScreen]);
+
+  // Clone children and add appropriate classes
+  const enhancedChildren = React.Children.map(children, child => {
+    if (React.isValidElement(child)) {
+      const additionalProps = {};
+      
+      // Add popperClassName for react-datepicker
+      if (child.props.popperClassName) {
+        additionalProps.popperClassName = child.props.popperClassName;
+      }
+      
+      // Add classes based on context
+      const classes = [];
+      if (isModalContext || centerScreen) {
+        classes.push('center-screen');
+      }
+      if (shouldUsePortal) {
+        classes.push('portal-mode');
+      }
+      
+      if (classes.length > 0) {
+        additionalProps.popperClassName = [
+          child.props.popperClassName,
+          ...classes
+        ].filter(Boolean).join(' ');
+      }
+      
+      return React.cloneElement(child, additionalProps);
+    }
+    return child;
+  });
+
+  // Render with or without portal
+  if (shouldUsePortal && portalContainer) {
+    return createPortal(enhancedChildren, portalContainer);
+  }
+  
+  return enhancedChildren;
+};
+
+export default DatePickerPortal;

package/src/index.js

@@ -1,6 +1,7 @@
 /** CMS Components */
 import DataGrid from './components/DataGrid';
 import DropZone from './components/DropZone';
+import CategorizedDropZone from './components/CategorizedDropZone';
 import SortableList from './components/sorting/List';
 
 /** CRM Components */
@@ -29,6 +30,7 @@ import DataGridSearch from './components/controls/DataGridSearch';
 import AutoRefreshControls from './components/controls/AutoRefreshControls';
 import AudioPlayer from './components/controls/AudioPlayer';
 import GalleryModal from './components/modals/GalleryModal';
+import DatePickerPortal from './components/utils/DatePickerPortal';
 export * from './components/columns/ColumnRenderers.jsx';
 
 /** Auth Specific Components */
@@ -96,8 +98,10 @@ export {
     CustomFetch,
     DataGrid,
     DataGridSearch,
+    DatePickerPortal,
     Download,
     DropZone,
+    CategorizedDropZone,
     Field,
     Form,
     GalleryModal,