@visns-studio/visns-components 5.13.6 → 5.13.8

package/package.json

@@ -24,19 +24,20 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.23.0",
+        "framer-motion": "^12.23.1",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.525.0",
         "moment": "^2.30.1",
-        "motion": "^12.23.0",
+        "motion": "^12.23.1",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
         "quill-image-uploader": "^1.3.0",
         "react-big-calendar": "^1.19.4",
         "react-copy-to-clipboard": "^5.1.0",
+        "react-currency-input-field": "^3.10.0",
         "react-datepicker": "^8.4.0",
         "react-dropzone": "^14.3.8",
         "react-grid-gallery": "^1.0.1",
@@ -87,7 +88,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.13.6",
+    "version": "5.13.8",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/Gallery.jsx

@@ -1,10 +1,11 @@
-import React from 'react';
+import React, { useState } from 'react';
 import {
     SortableContainer,
     SortableElement,
     sortableHandle,
 } from 'react-sortable-hoc';
 import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
+import ImageModal from './ImageModal';
 import styles from './styles/Gallery.module.css';
 
 // Drag handle component
@@ -24,7 +25,7 @@ const truncateText = (text, maxLength) => {
 
 // Sortable gallery item
 const SortableGalleryItem = SortableElement(
-    ({ value, handleEdit, handleDelete, showDescription = true }) => {
+    ({ value, handleEdit, handleDelete, showDescription = true, onImageClick }) => {
         const imageUrl = value.image_url || value.file_url;
         const title =
             value.file_title || value.label || value.file_name || 'Untitled';
@@ -34,7 +35,11 @@ const SortableGalleryItem = SortableElement(
             <div className={styles.galleryItem}>
                 <DragHandle />
 
-                <div className={styles.galleryImage}>
+                <div 
+                    className={styles.galleryImage}
+                    onClick={() => onImageClick && onImageClick(value)}
+                    style={{ cursor: onImageClick ? 'pointer' : 'default' }}
+                >
                     {imageUrl ? (
                         <img src={imageUrl} alt={title} />
                     ) : (
@@ -95,6 +100,30 @@ const SortableGalleryItem = SortableElement(
 
 // Sortable gallery container
 const Gallery = SortableContainer(({ items, handleEdit, handleDelete, showDescription = true }) => {
+    const [modalOpen, setModalOpen] = React.useState(false);
+    const [currentImageIndex, setCurrentImageIndex] = React.useState(0);
+
+    const handleImageClick = (clickedImage) => {
+        const imageIndex = items.findIndex(item => item.id === clickedImage.id);
+        setCurrentImageIndex(imageIndex);
+        setModalOpen(true);
+    };
+
+    const handleNextImage = () => {
+        setCurrentImageIndex((prevIndex) => 
+            prevIndex < items.length - 1 ? prevIndex + 1 : 0
+        );
+    };
+
+    const handlePrevImage = () => {
+        setCurrentImageIndex((prevIndex) => 
+            prevIndex > 0 ? prevIndex - 1 : items.length - 1
+        );
+    };
+
+    const handleCloseModal = () => {
+        setModalOpen(false);
+    };
     if (!items || items.length === 0) {
         return (
             <div className={styles.galleryEmpty}>
@@ -130,18 +159,29 @@ const Gallery = SortableContainer(({ items, handleEdit, handleDelete, showDescri
     }
 
     return (
-        <div className={styles.galleryGrid}>
-            {items.map((value, index) => (
-                <SortableGalleryItem
-                    key={`item-${index}`}
-                    index={index}
-                    value={value}
-                    handleEdit={handleEdit}
-                    handleDelete={handleDelete}
-                    showDescription={showDescription}
-                />
-            ))}
-        </div>
+        <>
+            <div className={styles.galleryGrid}>
+                {items.map((value, index) => (
+                    <SortableGalleryItem
+                        key={`item-${index}`}
+                        index={index}
+                        value={value}
+                        handleEdit={handleEdit}
+                        handleDelete={handleDelete}
+                        showDescription={showDescription}
+                        onImageClick={handleImageClick}
+                    />
+                ))}
+            </div>
+            <ImageModal
+                isOpen={modalOpen}
+                onClose={handleCloseModal}
+                images={items}
+                currentIndex={currentImageIndex}
+                onNext={handleNextImage}
+                onPrevious={handlePrevImage}
+            />
+        </>
     );
 });
 

package/src/components/ImageModal.jsx

@@ -0,0 +1,120 @@
+import React, { useEffect, useCallback } from 'react';
+import { X as CloseIcon, ChevronLeft, ChevronRight } from 'lucide-react';
+import styles from './styles/ImageModal.module.css';
+
+const ImageModal = ({
+    isOpen,
+    onClose,
+    images,
+    currentIndex,
+    onNext,
+    onPrevious,
+    showNavigation = true
+}) => {
+    const handleKeyDown = useCallback((e) => {
+        if (!isOpen) return;
+        
+        switch (e.key) {
+            case 'Escape':
+                onClose();
+                break;
+            case 'ArrowLeft':
+                e.preventDefault();
+                onPrevious();
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                onNext();
+                break;
+            default:
+                break;
+        }
+    }, [isOpen, onClose, onNext, onPrevious]);
+
+    useEffect(() => {
+        if (isOpen) {
+            document.addEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'hidden';
+        } else {
+            document.body.style.overflow = 'unset';
+        }
+
+        return () => {
+            document.removeEventListener('keydown', handleKeyDown);
+            document.body.style.overflow = 'unset';
+        };
+    }, [isOpen, handleKeyDown]);
+
+    if (!isOpen || !images || images.length === 0) {
+        return null;
+    }
+
+    const currentImage = images[currentIndex];
+    const imageUrl = currentImage?.image_url || currentImage?.file_url;
+    const title = currentImage?.file_title || currentImage?.label || currentImage?.file_name || 'Untitled';
+    const description = currentImage?.file_description || '';
+
+    const handleBackdropClick = (e) => {
+        if (e.target === e.currentTarget) {
+            onClose();
+        }
+    };
+
+    return (
+        <div className={styles.modalOverlay} onClick={handleBackdropClick}>
+            <div className={styles.modalContent}>
+                <button
+                    className={styles.closeButton}
+                    onClick={onClose}
+                    aria-label="Close modal"
+                >
+                    <CloseIcon size={24} />
+                </button>
+
+                {showNavigation && images.length > 1 && (
+                    <>
+                        <button
+                            className={`${styles.navButton} ${styles.prevButton}`}
+                            onClick={onPrevious}
+                            aria-label="Previous image"
+                            disabled={currentIndex === 0}
+                        >
+                            <ChevronLeft size={32} />
+                        </button>
+                        <button
+                            className={`${styles.navButton} ${styles.nextButton}`}
+                            onClick={onNext}
+                            aria-label="Next image"
+                            disabled={currentIndex === images.length - 1}
+                        >
+                            <ChevronRight size={32} />
+                        </button>
+                    </>
+                )}
+
+                <div className={styles.imageContainer}>
+                    <img
+                        src={imageUrl}
+                        alt={title}
+                        className={styles.modalImage}
+                        loading="lazy"
+                    />
+                </div>
+
+                <div className={styles.imageInfo}>
+                    <h3 className={styles.imageTitle}>{title}</h3>
+                    {description && (
+                        <p className={styles.imageDescription}>{description}</p>
+                    )}
+                    {images.length > 1 && (
+                        <div className={styles.imageCounter}>
+                            {currentIndex + 1} of {images.length}
+                        </div>
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ImageModal;

package/src/components/generic/GenericEditableTable.jsx

@@ -5,6 +5,7 @@ import { toast } from 'react-toastify';
 import { Trash2, ArrowUp, ArrowDown, Copy, Droplets } from 'lucide-react';
 import { Compact } from '@uiw/react-color';
 import { confirmDialog } from '../utils/ConfirmDialog';
+import CurrencyInput from 'react-currency-input-field';
 
 import CustomFetch from '../Fetch';
 import MultiSelect from '../MultiSelect';
@@ -920,6 +921,27 @@ const GenericEditableTable = ({
                 // For other colour columns, picker is rendered in the action column
                 return null;
             case 'currency':
+                return (
+                    <CurrencyInput
+                        id={`currency-${column.id}-${keyCounter}`}
+                        name={column.id}
+                        placeholder="$0.00"
+                        defaultValue={entry[column.id] || ''}
+                        decimalsLimit={2}
+                        prefix="$"
+                        decimalSeparator="."
+                        groupSeparator=","
+                        onValueChange={(value) =>
+                            handleFieldChange(
+                                value || '',
+                                column.id,
+                                keyCounter
+                            )
+                        }
+                        style={{ textAlign: 'right', width: '100%' }}
+                        readOnly={column.readOnly || false}
+                    />
+                );
             case 'number':
                 return (
                     <input
@@ -1076,6 +1098,26 @@ const GenericEditableTable = ({
                 // For other colour columns, picker is rendered in the action column
                 return null;
             case 'currency':
+                return (
+                    <CurrencyInput
+                        id={`new-currency-${column.id}-${groupId || 'default'}`}
+                        name={column.id}
+                        placeholder="$0.00"
+                        defaultValue={value || ''}
+                        decimalsLimit={2}
+                        prefix="$"
+                        decimalSeparator="."
+                        groupSeparator=","
+                        onValueChange={(value) =>
+                            handleNewFieldChange(
+                                value || '',
+                                column.id,
+                                groupId
+                            )
+                        }
+                        style={{ textAlign: 'right', width: '100%' }}
+                    />
+                );
             case 'number':
                 return (
                     <input

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

@@ -0,0 +1,181 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.9);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+    padding: 20px;
+}
+
+.modalContent {
+    position: relative;
+    max-width: 95vw;
+    max-height: 95vh;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+
+.closeButton {
+    position: absolute;
+    top: 20px;
+    right: 20px;
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 44px;
+    height: 44px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1001;
+    transition: all 0.2s ease;
+}
+
+.closeButton:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: scale(1.1);
+}
+
+.navButton {
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    background: rgba(255, 255, 255, 0.9);
+    border: none;
+    border-radius: 50%;
+    width: 56px;
+    height: 56px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    z-index: 1001;
+    transition: all 0.2s ease;
+}
+
+.navButton:hover {
+    background: rgba(255, 255, 255, 1);
+    transform: translateY(-50%) scale(1.1);
+}
+
+.navButton:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.navButton:disabled:hover {
+    background: rgba(255, 255, 255, 0.9);
+    transform: translateY(-50%) scale(1);
+}
+
+.prevButton {
+    left: 20px;
+}
+
+.nextButton {
+    right: 20px;
+}
+
+.imageContainer {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    max-width: 100%;
+    max-height: 100%;
+    overflow: hidden;
+}
+
+.modalImage {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 8px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.imageInfo {
+    position: absolute;
+    bottom: 20px;
+    left: 20px;
+    right: 20px;
+    background: rgba(0, 0, 0, 0.7);
+    color: white;
+    padding: 16px;
+    border-radius: 8px;
+    text-align: center;
+    max-width: 500px;
+    margin: 0 auto;
+}
+
+.imageTitle {
+    margin: 0 0 8px 0;
+    font-size: 18px;
+    font-weight: 600;
+    color: white;
+}
+
+.imageDescription {
+    margin: 0 0 8px 0;
+    font-size: 14px;
+    color: rgba(255, 255, 255, 0.9);
+    line-height: 1.4;
+}
+
+.imageCounter {
+    font-size: 12px;
+    color: rgba(255, 255, 255, 0.7);
+    margin: 0;
+}
+
+/* Mobile responsive styles */
+@media (max-width: 768px) {
+    .modalOverlay {
+        padding: 10px;
+    }
+    
+    .closeButton {
+        top: 10px;
+        right: 10px;
+        width: 40px;
+        height: 40px;
+    }
+    
+    .navButton {
+        width: 48px;
+        height: 48px;
+    }
+    
+    .prevButton {
+        left: 10px;
+    }
+    
+    .nextButton {
+        right: 10px;
+    }
+    
+    .imageInfo {
+        bottom: 10px;
+        left: 10px;
+        right: 10px;
+        padding: 12px;
+    }
+    
+    .imageTitle {
+        font-size: 16px;
+    }
+    
+    .imageDescription {
+        font-size: 13px;
+    }
+}

package/src/index.js

@@ -34,6 +34,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 ImageModal from './components/ImageModal';
 import DatePickerPortal from './components/utils/DatePickerPortal';
 export * from './components/columns/ColumnRenderers.jsx';
 
@@ -110,6 +111,7 @@ export {
     Field,
     Form,
     GalleryModal,
+    ImageModal,
     GenericAuth,
     GenericClientPortal,
     GenericDashboard,