@visns-studio/visns-components 5.11.1 → 5.11.3

package/src/components/crm/ClientAssociationManager.jsx

@@ -0,0 +1,362 @@
+import React, { useState, useEffect } from 'react';
+import { toast } from 'react-toastify';
+import CustomFetch from './Fetch';
+import MultiSelect from './MultiSelect';
+import styles from './styles/ClientAssociationManager.module.scss';
+
+const ClientAssociationManager = ({ 
+    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.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 primaryField = config.fields?.find(field => field.isPrimary);
+        const idField = primaryField?.targetField || 'id';
+        
+        await handleAction('setPrimary', { [idField]: itemId });
+    };
+
+    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>{config.title || 'Associations'}</h3>
+                <p>{config.description || 'Manage associations'}</p>
+            </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.companyName}>
+                                            {association[nameField]}
+                                            {association[primaryField] && (
+                                                <span className={styles.primaryBadge}>{config.labels?.primaryBadge || 'Primary'}</span>
+                                            )}
+                                        </div>
+                                        <div className={styles.relationshipInfo}>
+                                            <span className={styles.relationshipType}>
+                                                {association[relationshipField]}
+                                            </span>
+                                            {association[notesField] && (
+                                                <span className={styles.notes}>
+                                                    - {association[notesField]}
+                                                </span>
+                                            )}
+                                        </div>
+                                        <div className={styles.associatedAt}>
+                                            {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)}
+                                            >
+                                                {config.labels?.setPrimary || 'Set Primary'}
+                                            </button>
+                                        )}
+                                        <button
+                                            type="button"
+                                            className={styles.removeBtn}
+                                            onClick={() => handleDissociate(association.id)}
+                                        >
+                                            {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']}
+                        >
+                            {config.labels?.addButton || 'Add Association'}
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default ClientAssociationManager;

package/src/components/crm/DataGrid.jsx

@@ -42,30 +42,31 @@ import { toast } from 'react-toastify';
 import fetchUtil from '../../utils/fetchUtil';
 import { confirmDialog } from '../utils/ConfirmDialog';
 import {
-    Alarm,
-    ArrowCounterClockwise,
-    ArrowCycle,
-    Backspace,
+    AlarmClock,
+    RotateCcw,
+    RefreshCw,
+    Trash2,
     BookOpen,
     Check,
-    CircleCheck,
+    CheckCircle,
     Clock,
-    CloudDownload,
+    Download as DownloadIcon,
+    Upload,
     Copy,
     Edit,
-    Envelope,
+    Mail,
     File,
     Folder,
     Image,
     Inbox,
-    LinkOut,
-    LockOn,
+    ExternalLink,
+    Lock,
     Network,
-    Ribbon,
-    ShippingBoxV1,
-    SoundOn,
-    TriangleAlert,
-} from 'akar-icons';
+    Award,
+    Archive,
+    Volume2,
+    AlertTriangle,
+} from 'lucide-react';
 import styles from './styles/DataGrid.module.scss';
 
 import '@visns-studio/visns-datagrid-enterprise/index.css';
@@ -1710,7 +1711,7 @@ const DataGrid = forwardRef(
                     let IconComponent = null;
 
                     if (icon === 'archive') {
-                        IconComponent = ShippingBoxV1;
+                        IconComponent = Archive;
                     } else if (icon === 'bookOpen') {
                         IconComponent = BookOpen;
                     } else if (icon === 'folder') {
@@ -1720,7 +1721,7 @@ const DataGrid = forwardRef(
                     } else if (icon === 'network') {
                         IconComponent = Network;
                     } else if (icon === 'urgent') {
-                        IconComponent = TriangleAlert;
+                        IconComponent = AlertTriangle;
                     }
 
                     if (IconComponent) {
@@ -2185,15 +2186,15 @@ const DataGrid = forwardRef(
             if (allow) {
                 switch (s.id) {
                     case 'activate':
-                        return getIconComponent(CircleCheck);
+                        return getIconComponent(CheckCircle);
                     case 'archive':
-                        return getIconComponent(ShippingBoxV1);
+                        return getIconComponent(Archive);
                     case 'arrowCycle':
-                        return getIconComponent(ArrowCycle);
+                        return getIconComponent(RefreshCw);
                     case 'cloudUpload':
-                        return getIconComponent(CloudUpload);
+                        return getIconComponent(Upload);
                     case 'oauth2':
-                        return getIconComponent(LockOn);
+                        return getIconComponent(Lock);
                     case 'clone':
                         return getIconComponent(Copy);
                     case 'complete':
@@ -2201,9 +2202,9 @@ const DataGrid = forwardRef(
                     case 'copy':
                         return getIconComponent(Copy);
                     case 'delete':
-                        return getIconComponent(Backspace);
+                        return getIconComponent(Trash2);
                     case 'envelope':
-                        return getIconComponent(Envelope);
+                        return getIconComponent(Mail);
                     case 'family':
                         return getIconComponent(Network);
                     case 'file':
@@ -2213,17 +2214,17 @@ const DataGrid = forwardRef(
                     case 'image':
                         return getIconComponent(Image);
                     case 'link':
-                        return getIconComponent(LinkOut);
+                        return getIconComponent(ExternalLink);
                     case 'primary':
-                        return getIconComponent(Ribbon);
+                        return getIconComponent(Award);
                     case 'restore':
-                        return getIconComponent(ArrowCounterClockwise);
+                        return getIconComponent(RotateCcw);
                     case 'sound':
-                        return getIconComponent(SoundOn);
+                        return getIconComponent(Volume2);
                     case 'ssa':
                         return getIconComponent(Clock);
                     case 'undo':
-                        return getIconComponent(ArrowCounterClockwise);
+                        return getIconComponent(RotateCcw);
                     case 'update':
                         return getIconComponent(Edit);
                     default:
@@ -3078,6 +3079,7 @@ const DataGrid = forwardRef(
                             {...tableSetting}
                             columns={gridColumns}
                             dataSource={dataSource}
+                            defaultFilterValue={filterValue}
                             {...(ajaxSetting && ajaxSetting.groupBy
                                 ? {
                                       defaultGroupBy: ajaxSetting.groupBy,
@@ -3258,13 +3260,13 @@ const DataGrid = forwardRef(
                                                                           case 'clock':
                                                                               return Clock;
                                                                           case 'alarm':
-                                                                              return Alarm;
+                                                                              return AlarmClock;
                                                                           case 'check':
                                                                               return Check;
                                                                           case 'edit':
                                                                               return Edit;
                                                                           case 'envelope':
-                                                                              return Envelope;
+                                                                              return Mail;
                                                                           case 'file':
                                                                               return File;
                                                                           case 'image':
@@ -3272,9 +3274,9 @@ const DataGrid = forwardRef(
                                                                           case 'copy':
                                                                               return Copy;
                                                                           case 'cloudUpload':
-                                                                              return CloudDownload;
+                                                                              return Upload;
                                                                           case 'cloudDownload':
-                                                                              return CloudDownload;
+                                                                              return DownloadIcon;
                                                                           default:
                                                                               return Clock; // Default fallback
                                                                       }

package/src/components/crm/Field.jsx

@@ -15,15 +15,15 @@ import {
     Edit,
     ChevronRight,
     Circle,
-    CircleFill,
+    Dot,
     CirclePlus,
-    CloudDownload,
+    Download,
     Copy,
     Minus,
-    ArrowBack,
-    TrashCan,
-    CircleX,
-} from 'akar-icons';
+    ArrowLeft,
+    Trash2,
+    X,
+} from 'lucide-react';
 import { toast } from 'react-toastify';
 import styles from './styles/Field.module.scss';
 
@@ -835,7 +835,7 @@ function Field({
                                                     );
                                                 }}
                                             >
-                                                <TrashCan
+                                                <Trash2
                                                     strokeWidth={2}
                                                     size={20}
                                                 />
@@ -903,7 +903,7 @@ function Field({
                                             onFileDownload(inputValue);
                                         }}
                                     >
-                                        <CloudDownload size={24} />
+                                        <Download size={24} />
                                     </div>
                                 )}
                         </div>
@@ -2142,7 +2142,7 @@ function Field({
                                 className={styles.modal__close}
                                 onClick={() => setCanvasPopupOpen(false)}
                             >
-                                <CircleX size={24} color="#FFF" />
+                                <X size={24} color="#FFF" />
                             </button>
                         </div>
                         <div
@@ -2157,7 +2157,7 @@ function Field({
                                         }}
                                         className={styles['drawactions--save']}
                                     >
-                                        <CloudDownload size={16} /> Save
+                                        <Download size={16} /> Save
                                     </button>
                                 </li>
                                 <li>
@@ -2218,7 +2218,7 @@ function Field({
                                         onClick={() => sketchRef.current.undo()}
                                         className={styles['drawaction-undo']}
                                     >
-                                        <ArrowBack size={16} /> Undo
+                                        <ArrowLeft size={16} /> Undo
                                     </button>
                                 </li>
                                 <li>
@@ -2228,7 +2228,7 @@ function Field({
                                         }
                                         className={styles['drawactions--clear']}
                                     >
-                                        <TrashCan size={16} /> Clear
+                                        <Trash2 size={16} /> Clear
                                     </button>
                                 </li>
                             </ul>

package/src/components/crm/Form.jsx

@@ -9,7 +9,7 @@ import moment from 'moment';
 import parse from 'html-react-parser';
 import _ from 'lodash';
 import ReactDataGrid from '@visns-studio/visns-datagrid-enterprise';
-import { CircleX } from 'akar-icons';
+import { X } from 'lucide-react';
 import imageCompression from 'browser-image-compression';
 import { confirmDialog } from '../utils/ConfirmDialog';
 
@@ -2231,7 +2231,7 @@ function Form({
                             className={styles.modal__close}
                             onClick={closeModal}
                         >
-                            <CircleX strokeWidth={2} size={24} />
+                            <X strokeWidth={2} size={24} />
                         </button>
                     </div>
                     <div className={styles.modal__content}>