@visns-studio/visns-components 5.11.2 → 5.11.4

package/README.md

@@ -1650,6 +1650,61 @@ Modal components support vertical alignment configuration with the `verticalAlig
 
 The ReactDataGrid's `defaultGroupBy` prop enables internal grouping functionality that creates collapsible group headers within the table structure. It does NOT create any external UI elements that need relocation, as all grouping controls are internal to the table component.
 
+### Navigation Component Icon Visibility Issues
+
+#### Browser Rendering Optimization Fix
+
+**Problem:** Navigation action icons (specifically anchor/Link elements) would disappear during page scroll in production environments. The issue only affected anchor tags while button elements remained visible. Notably, the problem disappeared when browser dev tools were open, indicating a browser rendering optimization conflict.
+
+**Root Cause:** Firefox and other browsers apply aggressive rendering optimizations that can incorrectly cull elements from the paint tree. The combination of CSS `contain: layout` property with sticky positioning was causing anchor elements to be optimized out of view during scroll events.
+
+**Solution Applied:**
+
+1. **Removed problematic containment properties:**
+   - Removed `contain: layout` from `.content-header` and action elements
+   - This property was causing layout optimization conflicts
+
+2. **Enhanced compositor layer creation:**
+   - Changed `transform: translateZ(0)` to `transform: translateZ(0) translateX(0) translateY(0)`
+   - Added `isolation: isolate` to force elements onto their own render layers
+   - Added `backface-visibility: hidden` to prevent rendering glitches
+
+3. **Improved z-index stacking:**
+   - Elevated z-index values from 100-103 range to 1000-1003 range
+   - Ensures action icons stay above sticky header's stacking context
+
+**Files Modified:**
+- `src/components/crm/styles/Navigation.module.scss` (content-header and action styling)
+- Enhanced both regular and alternate theme action containers
+
+#### Navigation Component Debug Mode
+
+The Navigation component now includes optional debugging capabilities to help diagnose rendering issues:
+
+**Enable Debug Mode:**
+```jsx
+<Navigation debugIcons={true} {...otherProps} />
+```
+
+**Debug Features:**
+- **Visual indicators:** Red borders around anchor elements with 'A' labels, blue borders around buttons with 'B' labels
+- **Console logging:** Detailed scroll event logs showing element positions, visibility, z-index, transforms, and containment properties
+- **Real-time monitoring:** Tracks icon visibility changes during scroll events
+
+**Debug CSS Classes:**
+The component includes `.debug-icons` styles that can be applied for visual debugging:
+```scss
+.debug-icons {
+    a, button {
+        border: 2px solid red !important;
+        background: rgba(255, 0, 0, 0.1) !important;
+        // Additional debug styling...
+    }
+}
+```
+
+This fix ensures navigation icons remain visible during scroll across all browser environments and rendering contexts.
+
 ## Support
 
 For support, please contact the VISNS Studio team or open an issue on GitHub.

package/package.json

@@ -87,7 +87,7 @@
         "react-dom": "^17.0.0 || ^18.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "5.11.2",
+    "version": "5.11.4",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

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;