@visns-studio/visns-components 5.11.1 → 5.11.3

package/package.json

@@ -17,7 +17,6 @@
         "@visns-studio/visns-datagrid-enterprise": "^1.0.14",
         "@vitejs/plugin-react": "^4.5.2",
         "add": "^2.0.6",
-        "akar-icons": "^1.9.31",
         "array-move": "^4.0.0",
         "awesome-debounce-promise": "^2.1.0",
         "browser-image-compression": "^2.0.2",
@@ -28,6 +27,7 @@
         "html-react-parser": "^5.2.5",
         "lodash": "^4.17.21",
         "lodash.debounce": "^4.0.8",
+        "lucide-react": "^0.516.0",
         "moment": "^2.30.1",
         "motion": "^12.18.1",
         "numeral": "^2.0.6",
@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.1",
+    "version": "5.11.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/cms/DataGrid.jsx

@@ -14,22 +14,22 @@ import Toggle from 'react-toggle';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
-    Backspace,
+    Trash2 as Backspace,
     Check,
     Clock,
-    CloudDownload,
+    Download as CloudDownload,
     Copy,
     Edit,
     Folder,
     Inbox,
     Network,
-    Ribbon,
+    Award as Ribbon,
     Search,
-    ShippingBoxV1,
-    ToggleOff,
-    ToggleOnFill,
-    TriangleAlert,
-} from 'akar-icons';
+    Package as ShippingBoxV1,
+    ToggleLeft as ToggleOff,
+    ToggleRight as ToggleOnFill,
+    AlertTriangle as TriangleAlert,
+} from 'lucide-react';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
 import 'react-toggle/style.css';

package/src/components/cms/DropZone.jsx

@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useCallback } from 'react';
 import { motion } from 'framer-motion';
 import { useDropzone } from 'react-dropzone';
-import { CircleX, File, TrashCan } from 'akar-icons';
+import { X as CircleX, File, Trash2 as TrashCan } from 'lucide-react';
 import { toast } from 'react-toastify';
 import { arrayMoveImmutable } from 'array-move';
 import Popup from 'reactjs-popup';

package/src/components/cms/Form.jsx

@@ -6,7 +6,7 @@ import moment from 'moment';
 import Reveal from 'react-reveal/Reveal';
 import parse from 'html-react-parser';
 import { toast } from 'react-toastify';
-import { Copy, TrashBin } from 'akar-icons';
+import { Copy, Trash2 as TrashBin } from 'lucide-react';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
 function Form(props) {

package/src/components/cms/Gallery.jsx

@@ -4,7 +4,7 @@ import {
     SortableElement,
     sortableHandle,
 } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
 import styles from './styles/Gallery.module.css';
 
 // Drag handle component

package/src/components/cms/sorting/Item.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { SortableElement, sortableHandle } from 'react-sortable-hoc';
-import { ChevronVertical, Pencil, TrashCan } from 'akar-icons';
+import { GripVertical as ChevronVertical, Edit as Pencil, Trash2 as TrashCan } from 'lucide-react';
 
 import styles from './styles/Item.module.scss';
 

package/src/components/crm/AssociationManager.jsx

@@ -0,0 +1,431 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import { Star, Trash2, Plus, Users, Calendar, AlertTriangle, X } from 'lucide-react';
+import CustomFetch from './Fetch';
+import MultiSelect from './MultiSelect';
+import styles from './styles/AssociationManager.module.scss';
+
+const AssociationManager = ({ 
+    endpoints, 
+    config, 
+    dataId,
+    onUpdate = () => {} 
+}) => {
+    const [associations, setAssociations] = useState([]);
+    const [availableOptions, setAvailableOptions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    
+    // Dynamic state based on config
+    const [newAssociation, setNewAssociation] = useState(() => {
+        const initialState = {};
+        
+        // Set up dynamic fields based on config
+        if (config.fields) {
+            config.fields.forEach(field => {
+                initialState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                       field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                       field.type === 'multi-select' ? [] : '');
+            });
+        }
+        
+        return initialState;
+    });
+
+    // Replace placeholders in endpoint URLs and data
+    const processTemplate = (template, data = {}) => {
+        let processed = template;
+        
+        // Replace {dataId} with current dataId
+        processed = processed.replace(/\{dataId\}/g, dataId);
+        
+        // Replace any other placeholders from provided data
+        Object.keys(data).forEach(key => {
+            const placeholder = new RegExp(`\\{${key}\\}`, 'g');
+            processed = processed.replace(placeholder, data[key]);
+        });
+        
+        return processed;
+    };
+
+    // Load existing associations
+    const loadAssociations = async () => {
+        if (!endpoints.list) return;
+        
+        try {
+            setLoading(true);
+            const url = processTemplate(endpoints.list);
+            const method = endpoints.listMethod || 'GET';
+            const response = await CustomFetch(url, method, endpoints.listParams || {});
+            
+            const dataPath = config.dataPath || 'data';
+            const associationsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response);
+            
+            // Ensure associationsData is always an array
+            const validAssociations = Array.isArray(associationsData) ? associationsData : [];
+            setAssociations(validAssociations);
+        } catch (error) {
+            toast.error(config.messages?.loadError || 'Failed to load associations');
+            console.error('Error loading associations:', error);
+            setAssociations([]); // Set empty array on error
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    // Load available options for dropdown/select fields
+    const loadAvailableOptions = async () => {
+        if (!config.optionsEndpoint) return;
+        
+        try {
+            const url = processTemplate(config.optionsEndpoint.url);
+            const method = config.optionsEndpoint.method || 'POST';
+            const params = config.optionsEndpoint.params || {};
+            
+            const response = await CustomFetch(url, method, params);
+            const dataPath = config.optionsEndpoint.dataPath || 'data';
+            const optionsData = dataPath.split('.').reduce((obj, key) => obj?.[key], response) || [];
+            
+            setAvailableOptions(optionsData);
+        } catch (error) {
+            console.error('Failed to load options:', error);
+        }
+    };
+
+    // Generic action handler
+    const handleAction = async (actionKey, data = {}) => {
+        const endpoint = endpoints[actionKey];
+        if (!endpoint) return;
+
+        try {
+            const url = processTemplate(endpoint.url || endpoint, data);
+            const method = endpoint.method || 'POST';
+            const params = { ...endpoint.params, ...data };
+
+            await CustomFetch(url, method, params);
+
+            const successMessage = config.messages?.[`${actionKey}Success`] || 
+                                 endpoint.successMessage || 
+                                 'Action completed successfully';
+            toast.success(successMessage);
+
+            // Reset form if it's an associate action
+            if (actionKey === 'associate') {
+                const resetState = {};
+                if (config.fields) {
+                    config.fields.forEach(field => {
+                        resetState[field.id] = field.defaultValue || (field.type === 'boolean' ? false : 
+                                               field.type === 'select' ? (field.options?.[0]?.value || '') : 
+                                               field.type === 'multi-select' ? [] : '');
+                    });
+                }
+                setNewAssociation(resetState);
+            }
+
+            loadAssociations();
+            onUpdate();
+        } catch (error) {
+            const errorMessage = config.messages?.[`${actionKey}Error`] || 
+                                endpoint.errorMessage || 
+                                'Action failed';
+            toast.error(errorMessage);
+            console.error(error);
+        }
+    };
+
+    // Associate handler
+    const handleAssociate = async () => {
+        // Validate required fields
+        const requiredField = config.fields?.find(field => field.required);
+        const primaryField = config.fields?.find(field => field.isPrimary);
+        
+        if (requiredField && !newAssociation[requiredField.id]) {
+            toast.error(`Please select a ${requiredField.label || requiredField.id}`);
+            return;
+        }
+
+        // Prepare data for submission
+        const submitData = { ...newAssociation };
+        
+        // Handle complex field values (like objects from MultiSelect)
+        Object.keys(submitData).forEach(key => {
+            const value = submitData[key];
+            if (value && typeof value === 'object' && value.value !== undefined) {
+                submitData[key] = value.value;
+            }
+        });
+
+        await handleAction('associate', submitData);
+    };
+
+    // Remove association handler
+    const handleDissociate = async (itemId) => {
+        const deleteField = config.deleteField || 'id';
+        await handleAction('dissociate', { [deleteField]: itemId });
+    };
+
+    // Set primary handler
+    const handleSetPrimary = async (itemId) => {
+        if (!endpoints.setPrimary) return;
+        
+        const idField = config.primaryTargetField || config.deleteField || 'id';
+        
+        await handleAction('setPrimary', { [idField]: itemId });
+    };
+
+    // Remove primary handler
+    const handleRemovePrimary = async (itemId) => {
+        if (!endpoints.removePrimary) return;
+        
+        const idField = config.primaryTargetField || config.deleteField || 'id';
+        
+        await handleAction('removePrimary', { [idField]: itemId });
+    };
+
+    // Clear all primary statuses (useful after merge)
+    const handleClearAllPrimary = async () => {
+        if (!endpoints.clearAllPrimary) return;
+        
+        await handleAction('clearAllPrimary', { entity_id: dataId });
+    };
+
+    // Check if there are multiple primary associations
+    const hasMultiplePrimary = () => {
+        const primaryField = config.displayFields?.primary || 'is_primary';
+        return associations.filter(assoc => assoc[primaryField]).length > 1;
+    };
+
+    useEffect(() => {
+        if (dataId) {
+            loadAssociations();
+            loadAvailableOptions();
+        }
+    }, [dataId]);
+
+    if (loading) {
+        return <div className={styles.loading}>{config.messages?.loading || 'Loading associations...'}</div>;
+    }
+
+    return (
+        <div className={styles.container}>
+            <div className={styles.header}>
+                <h3>
+                    <Users size={20} style={{ marginRight: '8px', verticalAlign: 'middle' }} />
+                    {config.title || 'Associations'}
+                </h3>
+                <p>{config.description || 'Manage associations'}</p>
+            </div>
+
+            {/* Multiple Primary Warning */}
+            {hasMultiplePrimary() && (
+                <div className={styles.multiplePrimaryWarning}>
+                    <AlertTriangle size={16} style={{ marginRight: '8px' }} />
+                    <div className={styles.warningContent}>
+                        <strong>{config.messages?.multiplePrimaryWarning || 'Multiple Primary Associations Detected'}</strong>
+                        <p>{config.messages?.multiplePrimaryDescription || 'You have multiple associations marked as primary. Please resolve this by keeping only one primary association.'}</p>
+                        {endpoints.clearAllPrimary && (
+                            <button
+                                type="button"
+                                className={styles.clearAllPrimaryBtn}
+                                onClick={handleClearAllPrimary}
+                            >
+                                {config.labels?.clearAllPrimary || 'Clear All Primary Status'}
+                            </button>
+                        )}
+                    </div>
+                </div>
+            )}
+
+            {/* Existing Associations */}
+            <div className={styles.existingAssociations}>
+                <h4>{config.labels?.currentAssociations || 'Current Associations'}</h4>
+                {associations.length === 0 ? (
+                    <div className={styles.noAssociations}>
+                        {config.messages?.noAssociations || 'No associations found.'}
+                    </div>
+                ) : (
+                    <div className={styles.associationsList}>
+                        {associations.map((association) => {
+                            const nameField = config.displayFields?.name || 'name';
+                            const primaryField = config.displayFields?.primary || 'is_primary';
+                            const relationshipField = config.displayFields?.relationship || 'relationship_type';
+                            const notesField = config.displayFields?.notes || 'notes';
+                            const dateField = config.displayFields?.date || 'associated_at';
+                            
+                            return (
+                                <div 
+                                    key={association.id} 
+                                    className={`${styles.associationItem} ${association[primaryField] ? styles.primary : ''}`}
+                                >
+                                    <div className={styles.associationInfo}>
+                                        <div className={styles.entityName}>
+                                            {association[nameField]}
+                                            {association[primaryField] && (
+                                                <span className={styles.primaryBadge}>
+                                                    <Star size={12} style={{ marginRight: '4px' }} />
+                                                    {config.labels?.primaryBadge || 'Primary'}
+                                                </span>
+                                            )}
+                                        </div>
+                                        {(association[relationshipField] || association[notesField]) && (
+                                            <div className={styles.relationshipInfo}>
+                                                {association[relationshipField] && (
+                                                    <span className={styles.relationshipType}>
+                                                        {association[relationshipField]}
+                                                    </span>
+                                                )}
+                                                {association[notesField] && (
+                                                    <span className={styles.notes}>
+                                                        {association[relationshipField] ? ' - ' : ''}{association[notesField]}
+                                                    </span>
+                                                )}
+                                            </div>
+                                        )}
+                                        {dateField && association[dateField] && (
+                                            <div className={styles.associatedAt}>
+                                                <Calendar size={12} style={{ marginRight: '4px' }} />
+                                                {config.labels?.associatedAt || 'Associated'}: {new Date(association[dateField]).toLocaleDateString()}
+                                            </div>
+                                        )}
+                                    </div>
+                                    <div className={styles.associationActions}>
+                                        {!association[primaryField] && endpoints.setPrimary && (
+                                            <button
+                                                type="button"
+                                                className={styles.setPrimaryBtn}
+                                                onClick={() => handleSetPrimary(association.id)}
+                                            >
+                                                <Star size={14} style={{ marginRight: '4px' }} />
+                                                {config.labels?.setPrimary || 'Set Primary'}
+                                            </button>
+                                        )}
+                                        {association[primaryField] && endpoints.removePrimary && (
+                                            <button
+                                                type="button"
+                                                className={styles.removePrimaryBtn}
+                                                onClick={() => handleRemovePrimary(association.id)}
+                                                title={config.labels?.removePrimaryTooltip || 'Remove primary status from this association'}
+                                            >
+                                                <X size={14} style={{ marginRight: '4px' }} />
+                                                {config.labels?.removePrimary || 'Remove Primary'}
+                                            </button>
+                                        )}
+                                        <button
+                                            type="button"
+                                            className={styles.removeBtn}
+                                            onClick={() => handleDissociate(association.id)}
+                                        >
+                                            <Trash2 size={14} style={{ marginRight: '4px' }} />
+                                            {config.labels?.remove || 'Remove'}
+                                        </button>
+                                    </div>
+                                </div>
+                            );
+                        })}
+                    </div>
+                )}
+            </div>
+
+            {/* Add New Association */}
+            <div className={styles.newAssociation}>
+                <h4>{config.labels?.addNew || 'Add New Association'}</h4>
+                <div className={styles.associationForm}>
+                    {config.fields && config.fields.map((field, index) => {
+                        const fieldValue = newAssociation[field.id] || '';
+                        
+                        return (
+                            <div key={field.id} className={styles.formRow}>
+                                <div className={styles.formField}>
+                                    <label>
+                                        {field.label}{field.required && ' *'}
+                                    </label>
+                                    
+                                    {field.type === 'multi-select' && (
+                                        <MultiSelect
+                                            settings={{ id: field.id }}
+                                            multi={field.multi || false}
+                                            onChange={(value) => setNewAssociation(prev => ({ ...prev, [field.id]: value }))}
+                                            inputValue={fieldValue}
+                                            options={availableOptions}
+                                            placeholder={field.placeholder || `Select ${field.label}...`}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'select' && (
+                                        <select
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            className={styles.selectField}
+                                        >
+                                            {field.options && field.options.map(option => (
+                                                <option key={option.value || option} value={option.value || option}>
+                                                    {option.label || option}
+                                                </option>
+                                            ))}
+                                        </select>
+                                    )}
+                                    
+                                    {field.type === 'boolean' && (
+                                        <label>
+                                            <input
+                                                type="checkbox"
+                                                checked={fieldValue}
+                                                onChange={(e) => setNewAssociation(prev => ({ 
+                                                    ...prev, 
+                                                    [field.id]: e.target.checked 
+                                                }))}
+                                            />
+                                            {field.checkboxLabel || field.label}
+                                        </label>
+                                    )}
+                                    
+                                    {field.type === 'textarea' && (
+                                        <textarea
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textareaField}
+                                            rows={field.rows || 3}
+                                        />
+                                    )}
+                                    
+                                    {field.type === 'text' && (
+                                        <input
+                                            type="text"
+                                            value={fieldValue}
+                                            onChange={(e) => setNewAssociation(prev => ({ 
+                                                ...prev, 
+                                                [field.id]: e.target.value 
+                                            }))}
+                                            placeholder={field.placeholder || ''}
+                                            className={styles.textField}
+                                        />
+                                    )}
+                                </div>
+                            </div>
+                        );
+                    })}
+
+                    <div className={styles.formActions}>
+                        <button
+                            type="button"
+                            className={styles.associateBtn}
+                            onClick={handleAssociate}
+                            disabled={!newAssociation[config.fields?.find(f => f.required)?.id || 'id']}
+                        >
+                            <Plus size={14} style={{ marginRight: '4px' }} />
+                            {config.labels?.addButton || 'Add Association'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default AssociationManager;

package/src/components/crm/Autocomplete.jsx

@@ -1,6 +1,6 @@
 import { useState, useEffect, useCallback, useMemo, memo, useRef } from 'react';
 import AwesomeDebouncePromise from 'awesome-debounce-promise';
-import { ToggleOffFill, ToggleOnFill, Search } from 'akar-icons';
+import { ToggleLeft, ToggleRight, Search } from 'lucide-react';
 import styles from './styles/Autocomplete.module.scss';
 import fetchUtil from '../../utils/fetchUtil';
 
@@ -255,7 +255,7 @@ const VisnsAutocomplete = memo((props) => {
                 />
 
                 {overwrite ? (
-                    <ToggleOnFill
+                    <ToggleRight
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content="Enable Autocomplete"
                         strokeWidth={2}
@@ -264,7 +264,7 @@ const VisnsAutocomplete = memo((props) => {
                         className={styles.toggleActive}
                     />
                 ) : (
-                    <ToggleOffFill
+                    <ToggleLeft
                         data-tooltip-id="system-tooltip"
                         data-tooltip-content="Disable Autocomplete"
                         strokeWidth={2}

package/src/components/crm/Breadcrumb.jsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import dayjs from 'dayjs';
 import parse from 'html-react-parser';
-import { CircleChevronRight } from 'akar-icons';
+import { ChevronRight } from 'lucide-react';
 
 function Breadcrumb({ data, page }) {
     // Function to get nested data, handling array of keys
@@ -73,7 +73,7 @@ function Breadcrumb({ data, page }) {
             {page?.parentTitle && page?.parentUrl && (
                 <>
                     <Link to={page.parentUrl}>{parse(page.parentTitle)}</Link>
-                    <CircleChevronRight strokeWidth={2} size={18} />
+                    <ChevronRight strokeWidth={2} size={18} />
                 </>
             )}
 
@@ -87,7 +87,7 @@ function Breadcrumb({ data, page }) {
                     >
                         {parse(nestedData)}
                     </Link>
-                    <CircleChevronRight strokeWidth={2} size={18} />
+                    <ChevronRight strokeWidth={2} size={18} />
                 </>
             ) : (
                 page &&
@@ -102,7 +102,7 @@ function Breadcrumb({ data, page }) {
                         >
                             {parse(page.title)}
                         </Link>
-                        <CircleChevronRight strokeWidth={2} size={18} />
+                        <ChevronRight strokeWidth={2} size={18} />
                     </>
                 )
             )}