@visns-studio/visns-components 5.5.2 → 5.5.3

package/package.json

@@ -9,7 +9,7 @@
         "@nivo/line": "^0.88.0",
         "@nivo/pie": "^0.88.0",
         "@tinymce/tinymce-react": "^6.1.0",
-        "@vitejs/plugin-react": "^4.3.4",
+        "@vitejs/plugin-react": "^4.4.0",
         "add": "^2.0.6",
         "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
@@ -17,7 +17,7 @@
         "axios": "^1.8.4",
         "browser-image-compression": "^2.0.2",
         "dayjs": "^1.11.13",
-        "fabric": "^6.6.2",
+        "fabric": "^6.6.4",
         "file-saver": "^2.0.5",
         "framer-motion": "^11.18.2",
         "html-react-parser": "^5.2.3",
@@ -54,12 +54,13 @@
         "reactjs-popup": "^2.0.6",
         "style-loader": "^4.0.0",
         "swapy": "^1.0.5",
-        "sweetalert2": "^11.18.0",
+        "sweetalert2": "^11.19.1",
         "truncate": "^3.0.0",
         "uuid": "^10.0.0",
         "validator": "^13.15.0",
         "vite": "^5.4.18",
-        "yarn": "^1.22.22"
+        "yarn": "^1.22.22",
+        "yet-another-react-lightbox": "^3.22.0"
     },
     "devDependencies": {
         "@babel/core": "^7.26.10",
@@ -81,7 +82,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.5.2",
+    "version": "5.5.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/crm/DataGrid.jsx

@@ -16,6 +16,7 @@ import numeral from 'numeral';
 import Popup from 'reactjs-popup';
 import 'reactjs-popup/dist/index.css';
 import parse from 'html-react-parser';
+import 'react-toggle/style.css';
 import { saveAs } from 'file-saver';
 import NumberFilter from '@inovua/reactdatagrid-community/NumberFilter';
 import SelectFilter from '@inovua/reactdatagrid-community/SelectFilter';
@@ -25,9 +26,12 @@ import ReactDataGrid from '@inovua/reactdatagrid-community';
 // import SelectFilter from '@visns-studio/visns-datagrid-enterprise/SelectFilter';
 // import DateFilter from '@visns-studio/visns-datagrid-enterprise/DateFilter';
 // import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { Gallery } from 'react-grid-gallery';
+// import { Gallery } from 'react-grid-gallery';
 import { confirmAlert } from 'react-confirm-alert';
 import { toast } from 'react-toastify';
+import imageCompression from 'browser-image-compression';
+import Vapor from 'laravel-vapor';
+import Lightbox from 'yet-another-react-lightbox';
 import {
     Alarm,
     ArrowCounterClockwise,
@@ -59,6 +63,7 @@ import styles from './styles/DataGrid.module.scss';
 
 import '@inovua/reactdatagrid-community/index.css';
 import 'react-confirm-alert/src/react-confirm-alert.css';
+import 'yet-another-react-lightbox/styles.css';
 
 import CustomFetch from './Fetch';
 import Download from './Download';
@@ -166,6 +171,13 @@ const DataGrid = forwardRef(
         /** Gallery Modal States */
         const [modalGalleryShow, setModalGalleryShow] = useState(false);
         const [galleryData, setGalleryData] = useState([]);
+        const [uploadProgress, setUploadProgress] = useState(0);
+        const [currentItem, setCurrentItem] = useState(null);
+        const [isUploading, setIsUploading] = useState(false);
+
+        /** Lightbox States */
+        const [lightboxOpen, setLightboxOpen] = useState(false);
+        const [lightboxIndex, setLightboxIndex] = useState(0);
 
         /** Gallery Modal Functions */
         const modalGalleryOpen = () => {
@@ -176,6 +188,149 @@ const DataGrid = forwardRef(
             setModalGalleryShow(false);
         };
 
+        const handleFileUpload = async (files) => {
+            if (!currentItem || !currentItem.settings.upload) return;
+
+            setIsUploading(true);
+            const uploadPromises = [];
+
+            for (let i = 0; i < files.length; i++) {
+                const file = files[i];
+
+                try {
+                    // Optimize image if needed
+                    let optimizedFile = file;
+                    if (file.type.startsWith('image/')) {
+                        const options = {
+                            maxSizeMB: 1,
+                            maxWidthOrHeight: 1920,
+                            useWebWorker: true,
+                        };
+                        try {
+                            optimizedFile = await imageCompression(
+                                file,
+                                options
+                            );
+                        } catch (err) {
+                            console.error('Image compression failed:', err);
+                            // Continue with original file if compression fails
+                        }
+                    }
+
+                    // Upload to Vapor
+                    const uploadPromise = new Promise((resolve, reject) => {
+                        Vapor.store(optimizedFile, {
+                            progress: (progress) => {
+                                setUploadProgress(progress * 100);
+                            },
+                        })
+                            .then((response) => {
+                                // Construct the URL with the key parameter
+                                const uploadSettings =
+                                    currentItem.settings.upload;
+                                const itemData = currentItem.data;
+                                const keyValue = itemData[uploadSettings.key];
+                                const url = keyValue
+                                    ? `${uploadSettings.url}/${keyValue}`
+                                    : uploadSettings.url;
+
+                                // Make the PUT request
+                                CustomFetch(
+                                    url,
+                                    uploadSettings.method || 'POST',
+                                    {
+                                        uuid: response.uuid,
+                                        key: response.key,
+                                        bucket: response.bucket,
+                                        filename: file.name,
+                                        filesize: optimizedFile.size,
+                                        extension: response.extension,
+                                        file_relationship: uploadSettings.id,
+                                    },
+                                    (result) => {
+                                        if (result.error === '') {
+                                            resolve();
+                                        } else {
+                                            toast.error(String(result.error));
+                                            reject(result.error);
+                                        }
+                                    }
+                                );
+                            })
+                            .catch(reject);
+                    });
+
+                    uploadPromises.push(uploadPromise);
+                } catch (error) {
+                    console.error('Error uploading file:', error);
+                    toast.error(
+                        `Error uploading ${file.name}: ${
+                            error.message || 'Unknown error'
+                        }`
+                    );
+                }
+            }
+
+            try {
+                await Promise.all(uploadPromises);
+                toast.success('Files uploaded successfully');
+
+                // Refresh the gallery data
+                if (currentItem && currentItem.settings && currentItem.data) {
+                    const s = currentItem.settings;
+                    const d = currentItem.data;
+
+                    // Function to access nested property using a series of keys
+                    const getNestedValue = (data, keys) =>
+                        keys.reduce(
+                            (currentValue, key) =>
+                                currentValue && currentValue[key] !== undefined
+                                    ? currentValue[key]
+                                    : undefined,
+                            data
+                        );
+
+                    // Fetch updated data
+                    try {
+                        const res = await CustomFetch(
+                            `${form.url}/${d[form.primaryKey]}`,
+                            'GET',
+                            {}
+                        );
+
+                        if (res.data) {
+                            // Extract the updated nested value
+                            const updatedNestedValue = getNestedValue(
+                                res.data,
+                                s.relation
+                            );
+
+                            // Update gallery data
+                            if (
+                                updatedNestedValue &&
+                                Array.isArray(updatedNestedValue)
+                            ) {
+                                const updatedGalleryArray =
+                                    updatedNestedValue.map((item) => ({
+                                        src: item[s.key],
+                                        caption: item.file_name,
+                                    }));
+
+                                setGalleryData(updatedGalleryArray);
+                            }
+                        }
+                    } catch (error) {
+                        console.error('Error refreshing gallery data:', error);
+                    }
+                }
+            } catch (error) {
+                console.error('Error in upload process:', error);
+            } finally {
+                setIsUploading(false);
+                setUploadProgress(0);
+            }
+        };
+
         /** Modal States */
         const [formData, setFormData] = useState({});
         const [formType, setFormType] = useState('');
@@ -601,13 +756,16 @@ const DataGrid = forwardRef(
                     // Extracting nested value using predefined keys from 's.relation'
                     const nestedValue = getNestedValue(d, s.relation);
 
-                    // Mapping nested values to create gallery array with source and captions
+                    // Mapping nested values to create gallery array with source, captions, and dimensions
                     const galleryArray = nestedValue.map((item) => ({
                         src: item[s.key],
                         caption: item.file_name,
+                        width: 320, // Default width for proper grid layout
+                        height: 240, // Default height for proper grid layout
                     }));
 
                     setGalleryData(galleryArray);
+                    setCurrentItem({ data: d, settings: s });
 
                     modalGalleryOpen();
                     break;
@@ -2461,11 +2619,9 @@ const DataGrid = forwardRef(
                                             if (shouldRenderButton) {
                                                 return (
                                                     <button
-                                                        className={styles.btn}
-                                                        style={{
-                                                            padding:
-                                                                '0.2em 1em 0.05em 1em',
-                                                        }}
+                                                        className={
+                                                            styles.clockButton
+                                                        }
                                                         onClick={(e) => {
                                                             e.stopPropagation();
                                                             e.preventDefault();
@@ -2497,9 +2653,9 @@ const DataGrid = forwardRef(
                                                             data-tooltip-content={`${column.label} Timer`}
                                                             strokeWidth={2}
                                                             size={18}
-                                                            className={
-                                                                styles.tdaction
-                                                            }
+                                                            style={{
+                                                                color: 'white',
+                                                            }}
                                                         />
                                                     </button>
                                                 );
@@ -2983,6 +3139,8 @@ const DataGrid = forwardRef(
                     open={modalGalleryShow}
                     onClose={modalGalleryClose}
                     closeOnDocumentClick={false}
+                    contentStyle={{ width: 'auto', maxWidth: '90vw' }}
+                    overlayStyle={{ background: 'rgba(0, 0, 0, 0.7)' }}
                 >
                     <div
                         className={`${styles.modalwrap} ${styles['top--modal']}`}
@@ -2997,15 +3155,191 @@ const DataGrid = forwardRef(
                                     <CircleX strokeWidth={1} size={24} />
                                 </button>
                             </div>
-                            <div className={styles.modal__content}>
+                            <div
+                                className={`${styles.modal__content} ${styles['modal__content--gallery']}`}
+                            >
+                                {currentItem?.settings?.upload && (
+                                    <div className={styles.uploadSection}>
+                                        <h3>
+                                            <Image
+                                                strokeWidth={1.5}
+                                                size={18}
+                                            />
+                                            Upload New Images
+                                        </h3>
+                                        <div
+                                            className={styles.dropzoneContainer}
+                                        >
+                                            {isUploading && (
+                                                <div
+                                                    className={
+                                                        styles.progressBar
+                                                    }
+                                                >
+                                                    <div
+                                                        className={
+                                                            styles.progressBarInner
+                                                        }
+                                                        style={{
+                                                            width: `${uploadProgress}%`,
+                                                        }}
+                                                    ></div>
+                                                </div>
+                                            )}
+                                            <div
+                                                className={styles.dropzone}
+                                                onClick={() =>
+                                                    document
+                                                        .getElementById(
+                                                            'gallery-file-upload'
+                                                        )
+                                                        .click()
+                                                }
+                                                onDragOver={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                }}
+                                                onDragEnter={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                }}
+                                                onDragLeave={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                }}
+                                                onDrop={(e) => {
+                                                    e.preventDefault();
+                                                    e.stopPropagation();
+                                                    const files =
+                                                        e.dataTransfer.files;
+                                                    if (files.length > 0) {
+                                                        handleFileUpload(files);
+                                                    }
+                                                }}
+                                            >
+                                                <CloudUpload
+                                                    strokeWidth={1.5}
+                                                    size={24}
+                                                />
+                                                <p>
+                                                    Drag and drop files here or
+                                                    click to select files
+                                                </p>
+                                                <input
+                                                    id="gallery-file-upload"
+                                                    type="file"
+                                                    multiple
+                                                    style={{ display: 'none' }}
+                                                    onChange={(e) => {
+                                                        if (
+                                                            e.target.files
+                                                                .length > 0
+                                                        ) {
+                                                            handleFileUpload(
+                                                                e.target.files
+                                                            );
+                                                            e.target.value =
+                                                                null; // Reset input
+                                                        }
+                                                    }}
+                                                    accept="image/*"
+                                                />
+                                            </div>
+                                        </div>
+                                    </div>
+                                )}
                                 <div className={styles.formcontainer}>
                                     {galleryData.length > 0 ? (
-                                        <Gallery
-                                            images={galleryData}
-                                            enableImageSelection={false}
-                                        />
+                                        <div
+                                            className={styles.galleryContainer}
+                                        >
+                                            <div
+                                                className={
+                                                    styles.galleryInstructions
+                                                }
+                                            >
+                                                <Image
+                                                    strokeWidth={1.5}
+                                                    size={16}
+                                                />
+                                                <span>
+                                                    Tap any image to enlarge
+                                                </span>
+                                            </div>
+                                            <div
+                                                className={
+                                                    styles.customGalleryGrid
+                                                }
+                                            >
+                                                {galleryData.map(
+                                                    (img, index) => (
+                                                        <div
+                                                            key={`gallery-item-${index}`}
+                                                            className={
+                                                                styles.galleryItem
+                                                            }
+                                                            onClick={() => {
+                                                                setLightboxIndex(
+                                                                    index
+                                                                );
+                                                                setLightboxOpen(
+                                                                    true
+                                                                );
+                                                            }}
+                                                        >
+                                                            <img
+                                                                src={img.src}
+                                                                alt={
+                                                                    img.caption ||
+                                                                    `Image ${
+                                                                        index +
+                                                                        1
+                                                                    }`
+                                                                }
+                                                            />
+                                                            {img.caption && (
+                                                                <div
+                                                                    className={
+                                                                        styles.imageCaption
+                                                                    }
+                                                                >
+                                                                    {
+                                                                        img.caption
+                                                                    }
+                                                                </div>
+                                                            )}
+                                                            <div
+                                                                className={
+                                                                    styles.galleryImageOverlay
+                                                                }
+                                                            >
+                                                                <span>
+                                                                    <Image
+                                                                        strokeWidth={
+                                                                            1.5
+                                                                        }
+                                                                        size={
+                                                                            16
+                                                                        }
+                                                                        style={{
+                                                                            marginRight:
+                                                                                '6px',
+                                                                        }}
+                                                                    />
+                                                                    Enlarge
+                                                                </span>
+                                                            </div>
+                                                        </div>
+                                                    )
+                                                )}
+                                            </div>
+                                        </div>
                                     ) : (
                                         <div className={styles.noDataMessage}>
+                                            <Image
+                                                strokeWidth={1.5}
+                                                size={20}
+                                            />
                                             No images available in the gallery
                                         </div>
                                     )}
@@ -3014,6 +3348,14 @@ const DataGrid = forwardRef(
                         </div>
                     </div>
                 </Popup>
+
+                {/* Lightbox for full-size image viewing */}
+                <Lightbox
+                    open={lightboxOpen}
+                    close={() => setLightboxOpen(false)}
+                    index={lightboxIndex}
+                    slides={galleryData.map((img) => ({ src: img.src }))}
+                />
             </>
         );
     }

package/src/components/crm/MultiSelect.jsx

@@ -101,7 +101,7 @@ function MultiSelect({
 
     return (
         <SelectComponent
-            closeMenuOnSelect={!multi}
+            closeMenuOnSelect={!multi || settings.limit === 1}
             isClearable
             isSearchable
             isMulti={multi}
@@ -109,7 +109,19 @@ function MultiSelect({
             components={{ SelectList }}
             options={selectOptions}
             onChange={(inputValue, action) => {
-                onChange(inputValue, action, settings.id);
+                // Special handling for limit=1: keep only the most recent selection
+                if (
+                    settings.limit === 1 &&
+                    multi &&
+                    Array.isArray(inputValue) &&
+                    inputValue.length > 1
+                ) {
+                    const latestSelection = inputValue[inputValue.length - 1];
+                    const newValue = latestSelection ? [latestSelection] : [];
+                    onChange(newValue, action, settings.id);
+                } else {
+                    onChange(inputValue, action, settings.id);
+                }
             }}
             className={
                 className
@@ -130,6 +142,11 @@ function MultiSelect({
             value={selectValue}
             onCreateOption={handleCreate}
             placeholder={placeholder ? placeholder : 'Select...'}
+            isOptionDisabled={
+                settings.limit && multi && settings.limit > 1
+                    ? () => selectValue.length >= settings.limit
+                    : undefined
+            }
         />
     );
 }

package/src/components/crm/styles/DataGrid.module.scss

@@ -21,6 +21,148 @@
     }
 }
 
+/* Clock button styles */
+.clockButton {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 40px;
+    height: 40px;
+    border-radius: 4px;
+    background-color: #2b6cb0; /* Matching blue from screenshot */
+    border: none;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    margin: 0 auto;
+
+    &:hover {
+        background-color: #2563a0; /* Slightly darker blue on hover */
+    }
+
+    svg {
+        color: white; /* White icon color */
+    }
+}
+
+/* Toggle button styles */
+:global {
+    .react-toggle {
+        touch-action: pan-x;
+        display: inline-block;
+        position: relative;
+        cursor: pointer;
+        background-color: transparent;
+        border: 0;
+        padding: 0;
+        -webkit-touch-callout: none;
+        -webkit-user-select: none;
+        -khtml-user-select: none;
+        -moz-user-select: none;
+        -ms-user-select: none;
+        user-select: none;
+        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+        -webkit-tap-highlight-color: transparent;
+    }
+
+    .react-toggle-screenreader-only {
+        border: 0;
+        clip: rect(0 0 0 0);
+        height: 1px;
+        margin: -1px;
+        overflow: hidden;
+        padding: 0;
+        position: absolute;
+        width: 1px;
+    }
+
+    .react-toggle-track {
+        width: 50px;
+        height: 24px;
+        padding: 0;
+        border-radius: 30px;
+        background-color: #4d4d4d;
+        transition: all 0.2s ease;
+    }
+
+    .react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+        background-color: #000000;
+    }
+
+    .react-toggle--checked .react-toggle-track {
+        background-color: var(--primary-color, #3b82f6);
+    }
+
+    .react-toggle--checked:hover:not(.react-toggle--disabled)
+        .react-toggle-track {
+        background-color: var(--primary-color, #3b82f6);
+        opacity: 0.8;
+    }
+
+    .react-toggle-track-check {
+        position: absolute;
+        width: 14px;
+        height: 10px;
+        top: 0px;
+        bottom: 0px;
+        margin-top: auto;
+        margin-bottom: auto;
+        line-height: 0;
+        left: 8px;
+        opacity: 0;
+        transition: opacity 0.25s ease;
+    }
+
+    .react-toggle--checked .react-toggle-track-check {
+        opacity: 1;
+        transition: opacity 0.25s ease;
+    }
+
+    .react-toggle-track-x {
+        position: absolute;
+        width: 10px;
+        height: 10px;
+        top: 0px;
+        bottom: 0px;
+        margin-top: auto;
+        margin-bottom: auto;
+        line-height: 0;
+        right: 10px;
+        opacity: 1;
+        transition: opacity 0.25s ease;
+    }
+
+    .react-toggle--checked .react-toggle-track-x {
+        opacity: 0;
+    }
+
+    .react-toggle-thumb {
+        transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+        position: absolute;
+        top: 1px;
+        left: 1px;
+        width: 22px;
+        height: 22px;
+        border: 1px solid #4d4d4d;
+        border-radius: 50%;
+        background-color: #fafafa;
+        box-sizing: border-box;
+        transition: all 0.25s ease;
+    }
+
+    .react-toggle--checked .react-toggle-thumb {
+        left: 27px;
+        border-color: var(--primary-color, #3b82f6);
+    }
+
+    .react-toggle--focus .react-toggle-thumb {
+        box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
+    }
+
+    .react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+        box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
+    }
+}
+
 .vs-datagrid--row:hover {
     .InovuaReactDataGrid__row-cell-wrap {
         background: var(--hover-color, rgb(230, 240, 250)) !important;
@@ -128,10 +270,9 @@
 
 .modalwrap {
     background: var(--tertiary-color);
-    border-radius: 3px;
-    overflow: visible;
-    border-top-left-radius: var(--br);
-    border-top-right-radius: var(--br);
+    border-radius: 8px;
+    overflow: hidden;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
 }
 
 .top--modal {
@@ -146,17 +287,31 @@
 
 .modal__header {
     width: 100%;
-    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
+    border-bottom: 1px solid rgba(var(--primary-rgb), 0.1);
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.75rem;
+    padding: 0.75rem 1rem;
+    background-color: #fff;
 
     h1 {
         color: var(--secondary-color);
         margin: 0;
         padding: 0;
-        font-size: 1.15em;
+        font-size: 1.1em;
+        font-weight: 600;
+        display: flex;
+        align-items: center;
+        gap: 8px;
+
+        &::before {
+            content: '';
+            display: block;
+            width: 3px;
+            height: 16px;
+            background-color: var(--primary-color);
+            border-radius: 2px;
+        }
     }
 }
 
@@ -169,8 +324,15 @@
     outline: none;
     border: none;
     border-radius: var(--br);
-    display: block;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     line-height: 1;
+    transition: all 0.2s ease;
+
+    &:hover {
+        background: rgba(var(--paragraph-rgb), 0.1);
+    }
 
     svg {
         color: var(--primary-color);
@@ -184,22 +346,315 @@
     padding: 0.75rem;
     max-height: 80vh;
     overflow-y: auto;
+
+    &--gallery {
+        padding: 0.75rem;
+        background-color: #f9fafb;
+        min-width: 600px; /* Ensure the gallery modal has a minimum width */
+        max-width: 90vw; /* Limit maximum width */
+    }
 }
 
 .formcontainer {
     width: 100%;
+    padding: 8px 0;
+
+    /* Custom styling for gallery container */
+    .galleryContainer {
+        margin-top: 8px;
+    }
+
+    /* Gallery instructions styling */
+    .galleryInstructions {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        margin-bottom: 12px;
+        padding: 10px 12px;
+        background-color: #f0f7ff;
+        border: 1px solid rgba(var(--primary-rgb), 0.2);
+        border-radius: 6px;
+        color: var(--secondary-color);
+        font-size: 0.9rem;
+
+        svg {
+            color: var(--primary-color);
+            flex-shrink: 0;
+        }
+
+        span {
+            line-height: 1.4;
+        }
+    }
+
+    /* Gallery image overlay styling */
+    .galleryImageOverlay {
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.5);
+        color: white;
+        opacity: 0;
+        transition: opacity 0.3s ease;
+        border-radius: 6px;
+        z-index: 5;
+
+        span {
+            padding: 8px 14px;
+            background-color: rgba(0, 0, 0, 0.75);
+            border-radius: 4px;
+            font-size: 0.85rem;
+            font-weight: 500;
+            display: flex;
+            align-items: center;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+
+            svg {
+                color: var(--primary-color, #3b82f6);
+            }
+        }
+    }
+
+    /* Custom grid layout for gallery */
+    .customGalleryGrid {
+        display: grid;
+        grid-template-columns: repeat(4, 1fr); /* 4 columns by default */
+        gap: 16px;
+        margin-top: 16px;
+
+        @media (max-width: 1200px) {
+            grid-template-columns: repeat(
+                3,
+                1fr
+            ); /* 3 columns on medium screens */
+        }
+
+        @media (max-width: 768px) {
+            grid-template-columns: repeat(
+                2,
+                1fr
+            ); /* 2 columns on small screens */
+        }
+
+        .galleryItem {
+            aspect-ratio: 4/3;
+            border-radius: 6px;
+            overflow: hidden;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+            transition: transform 0.2s ease, box-shadow 0.2s ease;
+            cursor: pointer;
+            position: relative;
+            display: flex;
+            flex-direction: column;
+
+            &:hover {
+                transform: translateY(-2px);
+                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
+
+                .galleryImageOverlay {
+                    opacity: 1;
+                }
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+                object-fit: cover;
+                display: block;
+            }
+
+            .imageCaption {
+                padding: 8px;
+                background-color: rgba(0, 0, 0, 0.6);
+                color: white;
+                font-size: 0.8rem;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+        }
+    }
+
+    /* Add custom styles to override react-grid-gallery */
+    :global {
+        /* These styles will be applied globally */
+        .ReactGridGallery_tile {
+            border-radius: 6px !important;
+            overflow: hidden !important;
+            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
+            transition: transform 0.2s ease, box-shadow 0.2s ease !important;
+            cursor: pointer !important;
+            margin-bottom: 8px !important;
+        }
+
+        .ReactGridGallery_tile:hover {
+            transform: translateY(-2px) !important;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
+
+            /* Show overlay on hover */
+            .galleryImageOverlay {
+                opacity: 1 !important;
+            }
+        }
+
+        .ReactGridGallery_tile-viewport {
+            border-radius: 6px !important;
+            overflow: hidden !important;
+        }
+
+        .ReactGridGallery_tile-description {
+            background: rgba(0, 0, 0, 0.6) !important;
+            padding: 8px !important;
+            font-size: 0.85rem !important;
+        }
+    }
 }
 
 .noDataMessage {
     text-align: center;
     color: var(--secondary-color);
-    font-size: 1.125em;
-    padding: 2rem;
-    margin: 2rem auto;
+    font-size: 1rem;
+    padding: 1.5rem;
+    margin: 1rem auto;
     background: var(--tertiary-color);
     border: 1px solid rgba(var(--primary-rgb), 0.15);
     border-radius: var(--br);
-    max-width: 80%;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    max-width: 90%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
     font-style: italic;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+
+    svg {
+        color: var(--primary-color);
+        opacity: 0.7;
+    }
+}
+
+.tdaction {
+    cursor: pointer;
+    color: #6b7280;
+
+    &:hover {
+        color: var(--primary-color, #3b82f6);
+    }
+}
+
+.uploadSection {
+    margin-bottom: 16px;
+    border-bottom: 1px solid #e5e7eb;
+    padding-bottom: 16px;
+
+    h3 {
+        font-size: 0.95rem;
+        font-weight: 600;
+        margin-bottom: 8px;
+        color: var(--secondary-color, #111827);
+        display: flex;
+        align-items: center;
+        gap: 6px;
+
+        svg {
+            color: var(--primary-color, #3b82f6);
+        }
+    }
+}
+
+.dropzoneContainer {
+    position: relative;
+    margin-bottom: 12px;
+}
+
+.progressBar {
+    height: 3px;
+    background-color: #e5e7eb;
+    border-radius: 2px;
+    overflow: hidden;
+    margin-bottom: 8px;
+}
+
+.progressBarInner {
+    height: 100%;
+    background-color: var(--primary-color, #3b82f6);
+    transition: width 0.3s ease;
+}
+
+.dropzone {
+    border: 1px dashed #d1d5db;
+    border-radius: 6px;
+    padding: 12px;
+    text-align: center;
+    cursor: pointer;
+    transition: all 0.2s ease;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+
+    &:hover {
+        border-color: var(--primary-color, #3b82f6);
+        background-color: rgba(59, 130, 246, 0.05);
+    }
+
+    svg {
+        color: var(--primary-color, #3b82f6);
+        flex-shrink: 0;
+    }
+
+    p {
+        margin: 0;
+        color: #6b7280;
+        font-size: 0.9rem;
+    }
+}
+
+.filterInput {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    margin-bottom: 10px;
+    width: 100%;
+
+    &--alt {
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        margin-bottom: 10px;
+        width: 100%;
+        height: 58px;
+
+        .icon-search {
+            position: absolute;
+            left: 10px;
+            color: #6b7280;
+        }
+
+        input {
+            height: 38px;
+            border-radius: 4px;
+            border: 1px solid #d1d5db;
+            padding: 0 10px 0 35px;
+            width: 100%;
+            max-width: 300px;
+
+            &:focus {
+                outline: none;
+                border-color: var(--primary-color, #3b82f6);
+                box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
+            }
+        }
+    }
 }

package/src/components/styles/global.css

@@ -378,6 +378,144 @@ input[type]:not([type='search']):not([type='url']):not([type='hidden']):not(
     z-index: -1 !important;
 }
 
+/* React Toggle Styling */
+.react-toggle {
+    touch-action: pan-x;
+    display: inline-block;
+    position: relative;
+    cursor: pointer;
+    background-color: transparent;
+    border: 0;
+    padding: 0;
+    -webkit-touch-callout: none;
+    -webkit-user-select: none;
+    -khtml-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    -webkit-tap-highlight-color: transparent;
+    z-index: 2; /* Ensure toggle is above checkbox */
+}
+
+/* Fix for specific toggle in forms */
+form div:has(span:contains('Use T-Bar?')) .react-toggle {
+    margin-right: 8px;
+    vertical-align: middle;
+}
+
+/* Hide checkboxes when they're next to a toggle */
+.react-toggle + input[type='checkbox'],
+input[type='checkbox'] + .react-toggle,
+label:has(.react-toggle) input[type='checkbox'],
+div:has(.react-toggle) > input[type='checkbox'],
+form div:has(.react-toggle) input[type='checkbox'] {
+    display: none !important;
+    visibility: hidden !important;
+    opacity: 0 !important;
+    position: absolute !important;
+    pointer-events: none !important;
+    width: 0 !important;
+    height: 0 !important;
+}
+
+.react-toggle-screenreader-only {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+.react-toggle-track {
+    width: 50px;
+    height: 24px;
+    padding: 0;
+    border-radius: 30px;
+    background-color: #4d4d4d;
+    transition: all 0.2s ease;
+}
+
+.react-toggle:hover:not(.react-toggle--disabled) .react-toggle-track {
+    background-color: #000000;
+}
+
+.react-toggle--checked .react-toggle-track {
+    background-color: var(--primary-color, #3b82f6);
+}
+
+.react-toggle--checked:hover:not(.react-toggle--disabled) .react-toggle-track {
+    background-color: var(--primary-color, #3b82f6);
+    opacity: 0.8;
+}
+
+.react-toggle-track-check {
+    position: absolute;
+    width: 14px;
+    height: 10px;
+    top: 0px;
+    bottom: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
+    line-height: 0;
+    left: 8px;
+    opacity: 0;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-check {
+    opacity: 1;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle-track-x {
+    position: absolute;
+    width: 10px;
+    height: 10px;
+    top: 0px;
+    bottom: 0px;
+    margin-top: auto;
+    margin-bottom: auto;
+    line-height: 0;
+    right: 10px;
+    opacity: 1;
+    transition: opacity 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-track-x {
+    opacity: 0;
+}
+
+.react-toggle-thumb {
+    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1) 0ms;
+    position: absolute;
+    top: 1px;
+    left: 1px;
+    width: 22px;
+    height: 22px;
+    border: 1px solid #4d4d4d;
+    border-radius: 50%;
+    background-color: #fafafa;
+    box-sizing: border-box;
+    transition: all 0.25s ease;
+}
+
+.react-toggle--checked .react-toggle-thumb {
+    left: 27px;
+    border-color: var(--primary-color, #3b82f6);
+}
+
+.react-toggle--focus .react-toggle-thumb {
+    box-shadow: 0px 0px 3px 2px var(--primary-color, #3b82f6);
+}
+
+.react-toggle:active:not(.react-toggle--disabled) .react-toggle-thumb {
+    box-shadow: 0px 0px 5px 5px var(--primary-color, #3b82f6);
+}
+
 /* Safari-specific fixes for form elements */
 @supports (-webkit-touch-callout: none) {
     /* Safari-specific styles */