@visns-studio/visns-components 5.11.20 → 5.11.22

package/package.json

@@ -14,8 +14,8 @@
         "@tinymce/miniature": "^6.0.0",
         "@tinymce/tinymce-react": "^6.2.1",
         "@uiw/react-color": "^2.6.0",
-        "@visns-studio/visns-datagrid-community": "^1.0.14",
-        "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
+        "@visns-studio/visns-datagrid-community": "^1.0.23",
+        "@visns-studio/visns-datagrid-enterprise": "^1.0.23",
         "@vitejs/plugin-react": "^4.6.0",
         "add": "^2.0.6",
         "array-move": "^4.0.0",
@@ -24,13 +24,13 @@
         "dayjs": "^1.11.13",
         "fabric": "^6.7.0",
         "file-saver": "^2.0.5",
-        "framer-motion": "^12.19.1",
+        "framer-motion": "^12.19.2",
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
         "lucide-react": "^0.518.0",
         "moment": "^2.30.1",
-        "motion": "^12.19.1",
+        "motion": "^12.19.2",
         "numeral": "^2.0.6",
         "pluralize": "^8.0.0",
         "qrcode.react": "^4.2.0",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.20",
+    "version": "5.11.22",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/{crm/Autocomplete.jsx → Autocomplete.jsx}

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
 import { ToggleLeft, ToggleRight, Search } from 'lucide-react';
 import styles from './styles/Autocomplete.module.scss';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 
 // Create the debounced function outside the component to prevent recreation
 const createDebouncedSearch = (fn) =>

package/src/components/{crm/BusinessCardOcr.jsx → BusinessCardOcr.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import { useState, useRef, useCallback, useEffect } from 'react';
 import { motion } from 'framer-motion';

package/src/components/{crm/DataGrid.jsx → DataGrid.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 import './styles/global-datagrid.css';
 
 /**
@@ -39,10 +39,10 @@ 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 { toast } from 'react-toastify';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
-import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../../utils/relationshipSortingUtils';
-import { extractColumnsMetadata, isColumnSortable } from '../../utils/columnsMetadataUtils';
+import { DEFAULT_INTELLIGENT_SORTING_CONFIG } from '../utils/relationshipSortingUtils';
+import { extractColumnsMetadata, isColumnSortable } from '../utils/columnsMetadataUtils';
 import {
     AlarmClock,
     RotateCcw,
@@ -110,6 +110,7 @@ import {
     renderCreatedByColumn,
     renderDateRangeColumn,
     renderStageCounterColumn,
+    renderGalleryColumn,
 } from './columns/ColumnRenderers.jsx';
 import _ from 'lodash';
 
@@ -2448,7 +2449,21 @@ const DataGrid = forwardRef(
                                             ? column.filter.placeholder
                                             : 'All Options',
                                         dataSource: selectedDataSource,
+                                        searchable: column.filter.searchable !== false,
+                                        // Enable clear functionality even when searchable is false
+                                        allowClearWhenNotSearchable: column.filter.searchable === false,
+                                        // Explicitly enable clear icon
+                                        clearIcon: true,
                                     };
+                                    
+                                    // Debug: Check if fix is applied
+                                    if (column.filter.searchable === false) {
+                                        console.log('Filter Debug - searchable=false:', {
+                                            columnName: column.name || 'unknown',
+                                            props: filterEditorProps,
+                                            visnsDataGridVersion: 'v1.0.18'
+                                        });
+                                    }
                                     break;
                                 default:
                                     filterEditor = null;
@@ -2549,6 +2564,14 @@ const DataGrid = forwardRef(
                                     column,
                                     commonProps,
                                 });
+                            case 'gallery':
+                                return renderGalleryColumn({
+                                    column,
+                                    commonProps,
+                                    modalGalleryOpen,
+                                    setGalleryData,
+                                    setCurrentItem,
+                                });
                             case 'image':
                                 return renderImageColumn({
                                     column,

package/src/components/{crm/Download.jsx → Download.jsx}

@@ -2,7 +2,7 @@ import React from 'react';
 import { trackPromise } from 'react-promise-tracker';
 import { toast } from 'react-toastify';
 import parse from 'html-react-parser';
-import fetchUtil from '../../utils/fetchUtil';
+import fetchUtil from '../utils/fetchUtil';
 
 const CustomDownload = (
     url,

package/src/components/{cms/DropZone.jsx → DropZone.jsx}

@@ -8,7 +8,7 @@ import Popup from 'reactjs-popup';
 import imageCompression from 'browser-image-compression';
 
 import { confirmDialog } from '../utils/ConfirmDialog';
-import CustomFetch from '../crm/Fetch';
+import CustomFetch from './Fetch';
 import Gallery from './Gallery';
 import styles from './styles/DropZone.module.css';
 

package/src/components/{crm/Field.jsx → Field.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import React, { useEffect, useRef, useState, useMemo } from 'react';
 import DatePicker from 'react-datepicker';
@@ -36,7 +36,7 @@ import SketchField from './sketch/SketchField';
 import Tools from './sketch/tools';
 import VisnsAsyncSelect from './AsyncSelect';
 import VisnsAutocomplete from './Autocomplete';
-import VisnsDropZone from '../cms/DropZone';
+import VisnsDropZone from './DropZone';
 
 import 'react-toggle/style.css';
 import 'react-datepicker/dist/react-datepicker.css';

package/src/components/{crm/Form.jsx → Form.jsx}

@@ -1,4 +1,4 @@
-import '../styles/global.css';
+import './styles/global.css';
 
 import React, { useState, useEffect, useRef, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';

package/src/components/{crm/auth → auth}/ClientLogin.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientAuth.module.scss';
+import styles from '../styles/ClientAuth.module.scss';
 
 const ClientLogin = ({ logo, setSystemAuth, urls = {} }) => {
     const location = useLocation();

package/src/components/{crm/auth → auth}/ClientOTPVerify.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { Lock, ArrowLeft } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientAuth.module.scss';
+import styles from '../styles/ClientAuth.module.scss';
 
 const ClientOTPVerify = ({
     logo,

package/src/components/{crm/auth → auth}/Login.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { Link, useLocation, useNavigate } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { User, Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Login.module.scss';
+import styles from '../styles/Login.module.scss';
 
 const Login = ({ logo, providers, setSystemAuth, setUserProfile }) => {
     const location = useLocation();

package/src/components/{crm/auth → auth}/Profile.jsx

@@ -1,5 +1,5 @@
-// src/components/crm/auth/Profile.jsx
-import '../../styles/global.css';
+// src/components/auth/Profile.jsx
+import '../styles/global.css';
 
 import React, { useState, useEffect, useRef, useCallback, memo } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -9,7 +9,7 @@ import SignaturePad from 'react-signature-pad-wrapper';
 import Swal from 'sweetalert2';
 import CustomFetch from '../Fetch';
 import TableFilter from '../TableFilter';
-import styles from './styles/Profile.module.scss';
+import styles from '../styles/Profile.module.scss';
 
 // Form field component to reduce repetition
 const FormField = memo(

package/src/components/{crm/auth → auth}/Reset.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import Reveal from 'react-reveal/Reveal';
@@ -8,7 +8,7 @@ import { User } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Reset.module.scss';
+import styles from '../styles/Reset.module.scss';
 
 const Reset = ({ logo }) => {
     const [email, setEmail] = useState('');

package/src/components/{crm/auth → auth}/TwoFactorAuth.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState, useEffect } from 'react';
 import { useNavigate, useLocation } from 'react-router-dom';
@@ -8,7 +8,7 @@ import { Lock } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/TwoFactorAuth.module.scss';
+import styles from '../styles/TwoFactorAuth.module.scss';
 
 const TwoFactorAuth = ({ logo, setSystemAuth, setUserProfile }) => {
     const navigate = useNavigate();

package/src/components/{crm/auth → auth}/Verify.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 
 import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
@@ -9,7 +9,7 @@ import Reveal from 'react-reveal/Reveal';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/Verify.module.scss';
+import styles from '../styles/Verify.module.scss';
 
 const Verify = ({ logo }) => {
     const navigate = useNavigate();

package/src/components/{crm/client → client}/ClientDashboard.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import styles from './styles/ClientDashboard.module.scss';
+import styles from '../styles/ClientDashboard.module.scss';
 
 /**
  * ClientDashboard - Example dashboard component for client portal

package/src/components/{crm/client → client}/ClientPortal.jsx

@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/ClientPortal.module.scss';
+import styles from '../styles/ClientPortal.module.scss';
 
 const ClientPortal = ({
     clientProfile,

package/src/components/{crm/columns → columns}/ColumnRenderers.jsx

@@ -8,7 +8,7 @@ import {
     isRelationshipColumnSortable,
     getRelationshipPath,
     DEFAULT_INTELLIGENT_SORTING_CONFIG,
-} from '../../../utils/relationshipSortingUtils';
+} from '../../utils/relationshipSortingUtils';
 
 // Boolean Column Renderer
 export const renderBooleanColumn = ({
@@ -135,11 +135,11 @@ export const renderDateTimeColumn = ({
                 moment(data[column.id]).format('YYYY-MM-DD') !== '1970-01-01'
             ) {
                 let dateValue = moment(data[column.id]);
-                
+
                 // Apply modifier if present
                 if (column.modifier) {
                     const { operator, value, unit } = column.modifier;
-                    
+
                     if (operator === '+') {
                         dateValue = dateValue.add(value, unit);
                     } else if (operator === '-') {
@@ -1424,6 +1424,174 @@ export const renderDateRangeColumn = ({
 };
 
 // Stage Counter Column Renderer
+// Gallery Column Renderer
+export const renderGalleryColumn = ({
+    column,
+    commonProps,
+    modalGalleryOpen,
+    setGalleryData,
+    setCurrentItem,
+}) => {
+    return {
+        ...commonProps,
+        name: column.id,
+        sortable: false,
+        render: ({ 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
+                );
+
+            // Get the images array from the nested structure
+            const imagesArray = column.relation
+                ? getNestedValue(data, column.relation)
+                : data[column.id];
+
+            // Check if we have valid image data
+            if (
+                !imagesArray ||
+                !Array.isArray(imagesArray) ||
+                imagesArray.length === 0
+            ) {
+                return (
+                    <div
+                        style={{
+                            display: 'flex',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            height: '40px',
+                            color: '#999',
+                            fontSize: '12px',
+                        }}
+                    >
+                        No images
+                    </div>
+                );
+            }
+
+            const maxThumbnails = column.maxThumbnails || 3;
+            const displayImages = imagesArray.slice(0, maxThumbnails);
+            const remainingCount = imagesArray.length - maxThumbnails;
+
+            const handleGalleryClick = (e) => {
+                e.stopPropagation();
+                e.preventDefault();
+
+                // Prepare gallery data in the format expected by the modal
+                const galleryData = imagesArray.map((item) => ({
+                    src: item[column.key],
+                    caption: item[column.captionKey || 'file_name'],
+                    width: 320,
+                    height: 240,
+                }));
+
+                // Set gallery data and current item
+                setGalleryData(galleryData);
+                setCurrentItem({
+                    data: data,
+                    settings: {
+                        relation: column.relation,
+                        key: column.key,
+                        captionKey: column.captionKey || 'file_name',
+                    },
+                });
+
+                // Open the gallery modal
+                modalGalleryOpen();
+            };
+
+            return (
+                <div
+                    onClick={handleGalleryClick}
+                    style={{
+                        display: 'flex',
+                        flexDirection: 'column',
+                        alignItems: 'flex-start',
+                        gap: '6px',
+                        cursor: 'pointer',
+                        padding: '6px',
+                        borderRadius: '4px',
+                        transition: 'background-color 0.2s',
+                        width: '100%',
+                        height: '100%',
+                        minHeight: '60px',
+                    }}
+                    onMouseEnter={(e) => {
+                        e.target.style.backgroundColor = '#f0f0f0';
+                    }}
+                    onMouseLeave={(e) => {
+                        e.target.style.backgroundColor = 'transparent';
+                    }}
+                >
+                    {/* Thumbnail images */}
+                    <div
+                        style={{
+                            display: 'flex',
+                            gap: '4px',
+                            flexWrap: 'wrap',
+                        }}
+                    >
+                        {displayImages.map((image, index) => {
+                            const imageUrl = image[column.key];
+                            if (!imageUrl) return null;
+
+                            return (
+                                <div
+                                    key={index}
+                                    style={{
+                                        width: '28px',
+                                        height: '28px',
+                                        borderRadius: '3px',
+                                        overflow: 'hidden',
+                                        border: '1px solid #ddd',
+                                        flexShrink: 0,
+                                    }}
+                                >
+                                    <img
+                                        src={imageUrl}
+                                        alt={
+                                            image[
+                                                column.captionKey || 'file_name'
+                                            ] || `Image ${index + 1}`
+                                        }
+                                        style={{
+                                            width: '100%',
+                                            height: '100%',
+                                            objectFit: 'cover',
+                                        }}
+                                        onError={(e) => {
+                                            e.target.style.display = 'none';
+                                        }}
+                                    />
+                                </div>
+                            );
+                        })}
+                    </div>
+
+                    {/* Count badge */}
+                    <div
+                        style={{
+                            fontSize: '11px',
+                            color: '#666',
+                            fontWeight: '500',
+                            lineHeight: '1.2',
+                        }}
+                    >
+                        {imagesArray.length}{' '}
+                        {imagesArray.length === 1 ? 'image' : 'images'}
+                        {remainingCount > 0 && ` (+${remainingCount})`}
+                    </div>
+                </div>
+            );
+        },
+    };
+};
+
 export const renderStageCounterColumn = ({ column, commonProps, navigate }) => {
     return {
         ...commonProps,

package/src/components/{crm/generic → generic}/ActionButtons.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styles from './styles/ActionButtons.module.scss';
+import styles from '../styles/ActionButtons.module.scss';
 
 function ActionButtons({ actions, onActionClick }) {
     return (

package/src/components/{crm/generic → generic}/AlternativeActionModal.jsx

@@ -1,6 +1,6 @@
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/AlternativeActionModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/AlternativeActionModal.css';
 
 /**
  * Show an alternative action modal for choosing between different workflows

package/src/components/{crm/generic → generic}/AuditLog.jsx

@@ -3,7 +3,7 @@ import { useParams } from 'react-router-dom';
 import dayjs from 'dayjs';
 import Breadcrumb from '../Breadcrumb';
 import CustomFetch from '../Fetch';
-import styles from './styles/AuditLog.module.scss';
+import styles from '../styles/AuditLog.module.scss';
 
 const AuditLog = ({ userProfile }) => {
     const routeParams = useParams();

package/src/components/{crm/generic → generic}/AuditLogs.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Table from '../DataGrid';
-import styles from './styles/AuditLogs.module.scss';
+import styles from '../styles/AuditLogs.module.scss';
 
 const AuditLogs = ({ layout }) => {
     const setting = {

package/src/components/{cms/generic → generic}/CmsDetail.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useParams, useNavigate, useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { ToastContainer } from 'react-toastify';
-import CmsForm from '../Form';
+import Form from '../Form';
 
 function CmsDetail({ setting }) {
     const { dataId } = useParams();
@@ -14,7 +14,7 @@ function CmsDetail({ setting }) {
             <div className="grid">
                 <div className="grid__row">
                     <div className="grid__full">
-                        <CmsForm
+                        <Form
                             dataId={dataId}
                             navigate={navigate}
                             form={form}

package/src/components/{cms/generic → generic}/CmsSort.jsx

@@ -3,7 +3,7 @@ import { useLocation } from 'react-router-dom';
 import Reveal from 'react-reveal/Reveal';
 import { arrayMoveImmutable } from 'array-move';
 import { toast } from 'react-toastify';
-import CustomFetch from '../../crm/Fetch';
+import CustomFetch from '../Fetch';
 import SortableList from '../sorting/List';
 
 const ChildSort = ({ item, url }) => {

package/src/components/{crm/generic → generic}/ConfirmationDialog.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
+import '../styles/SweetAlert.module.css';
 
 /**
  * A utility function that uses SweetAlert2 for confirmation dialogs

package/src/components/{crm/generic → generic}/ContactSelectorModal.jsx

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/ContactSelectorModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/ContactSelectorModal.css';
 import CustomFetch from '../Fetch';
 
 /**

package/src/components/{crm/generic → generic}/DatePickerDialog.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Swal from 'sweetalert2';
-import './styles/SweetAlert.module.css';
-import './styles/DatePickerDialog.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/DatePickerDialog.css';
 import moment from 'moment';
 
 /**

package/src/components/{crm/generic → generic}/DateRangeSelectorModal.jsx

@@ -1,7 +1,7 @@
 import Swal from 'sweetalert2';
 import moment from 'moment';
-import './styles/SweetAlert.module.css';
-import './styles/DateRangeSelectorModal.css';
+import '../styles/SweetAlert.module.css';
+import '../styles/DateRangeSelectorModal.css';
 
 /**
  * Show a date range selector modal for selecting start and end dates

package/src/components/{crm/generic → generic}/GenericClientPortal.jsx

@@ -5,7 +5,7 @@ import { LogOut as SignOut } from 'lucide-react';
 
 import CustomFetch from '../Fetch';
 
-import styles from './styles/GenericClientPortal.module.scss';
+import styles from '../styles/GenericClientPortal.module.scss';
 
 /**
  * GenericClientPortal - A wrapper component for client portal content

package/src/components/{crm/generic → generic}/GenericDashboard.jsx

@@ -1,4 +1,4 @@
-import '../../styles/global.css';
+import '../styles/global.css';
 import React, { useState, useEffect, useRef } from 'react';
 import { Link, useNavigate } from 'react-router-dom';
 import { ResponsiveBar } from '@nivo/bar';
@@ -11,10 +11,10 @@ import { createSwapy } from 'swapy';
 import { X, Minus, Plus, Star, Trash2 } from 'lucide-react';
 import { confirmDialog } from '../../utils/ConfirmDialog';
 
-import CustomFetch from '../../crm/Fetch';
-import MultiSelect from '../../crm/MultiSelect';
+import CustomFetch from '../Fetch';
+import MultiSelect from '../MultiSelect';
 
-import styles from './styles/GenericDashboard.module.scss';
+import styles from '../styles/GenericDashboard.module.scss';
 
 const toSnakeCase = (str) => str.replace(/[\s-]+/g, '_').toLowerCase();