@visns-studio/visns-components 6.17.2 → 6.20.1

package/src/components/AssociationManager.jsx

@@ -1,21 +1,26 @@
 import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
-import { Star, Trash2, Plus, Users, Calendar, AlertTriangle, X } from 'lucide-react';
+import { Star, StarOff, Trash2, Plus, Calendar, AlertTriangle } from 'lucide-react';
 import CustomFetch from './Fetch';
 import MultiSelect from './MultiSelect';
+import { confirmDialog } from './utils/ConfirmDialog';
 import styles from './styles/AssociationManager.module.scss';
 
-const AssociationManager = ({ 
-    endpoints, 
-    config, 
+const AssociationManager = ({
+    endpoints,
+    config,
     dataId,
-    onUpdate = () => {} 
+    onUpdate = () => {}
 }) => {
     const [associations, setAssociations] = useState([]);
     const [availableOptions, setAvailableOptions] = useState([]);
     const [childOptions, setChildOptions] = useState({});
     const [loading, setLoading] = useState(true);
-    
+    /* The editor is the uncommon case — the common one is reading the list —
+       so the form sits behind an "Add" affordance rather than owning 700px at
+       the foot of the panel. */
+    const [showForm, setShowForm] = useState(false);
+
     // Dynamic state based on config
     const [newAssociation, setNewAssociation] = useState(() => {
         const initialState = {};
@@ -196,7 +201,7 @@ const AssociationManager = ({
     // Generic action handler
     const handleAction = async (actionKey, data = {}) => {
         const endpoint = endpoints[actionKey];
-        if (!endpoint) return;
+        if (!endpoint) return false;
 
         try {
             const url = processTemplate(endpoint.url || endpoint, data);
@@ -225,12 +230,16 @@ const AssociationManager = ({
 
             loadAssociations();
             onUpdate();
+
+            return true;
         } catch (error) {
-            const errorMessage = config.messages?.[`${actionKey}Error`] || 
-                                endpoint.errorMessage || 
+            const errorMessage = config.messages?.[`${actionKey}Error`] ||
+                                endpoint.errorMessage ||
                                 'Action failed';
             toast.error(errorMessage);
             console.error(error);
+
+            return false;
         }
     };
 
@@ -256,7 +265,13 @@ const AssociationManager = ({
             }
         });
 
-        await handleAction('associate', submitData);
+        const ok = await handleAction('associate', submitData);
+
+        // Collapse only on success — a failed save keeps what was typed on
+        // screen so it can be corrected rather than retyped.
+        if (ok) {
+            setShowForm(false);
+        }
     };
 
     // Remove association handler
@@ -265,6 +280,26 @@ const AssociationManager = ({
         await handleAction('dissociate', { [deleteField]: itemId });
     };
 
+    /* Removal is the one irreversible action on the panel, so it asks first —
+       the same `confirmDialog` every destructive control in the app uses. The
+       wording is already in the tab config (`messages.confirmDissociate`),
+       which nothing read until now. */
+    const confirmDissociate = (association) => {
+        const nameField = config.displayFields?.name || 'name';
+
+        confirmDialog({
+            title: config.labels?.dissociate || config.labels?.remove || 'Remove',
+            message:
+                config.messages?.confirmDissociate ||
+                'Are you sure you want to remove this association?',
+            buttons: [
+                { label: 'Yes', onClick: () => handleDissociate(association.id) },
+                { label: 'No', onClick: () => {} },
+            ],
+            data: { name: association[nameField] },
+        });
+    };
+
     // Set primary handler
     const handleSetPrimary = async (association) => {
         if (!endpoints.setPrimary) return;
@@ -319,132 +354,323 @@ const AssociationManager = ({
         }
     }, [dataId]);
 
+    /* Field names are resolved once, not per row. */
+    const nameField = config.displayFields?.name || 'name';
+    const primaryField = config.displayFields?.primary || 'is_primary';
+    const relationshipField = config.displayFields?.relationship || 'relationship_type';
+    const roleField = config.displayFields?.role || 'role';
+    const notesField = config.displayFields?.notes || 'notes';
+    const dateField = config.displayFields?.date || 'associated_at';
+
+    const requiredFieldId = config.fields?.find((f) => f.required)?.id || 'id';
+
+    /* The host page's tab already names this panel, so the icon + title +
+       subtitle block that used to sit here is gone. A standalone mount (the
+       component lab, a modal) can ask for a compact one back. */
+    const showTitle = Boolean(config.showTitle);
+
     if (loading) {
-        return <div className={styles.loading}>{config.messages?.loading || 'Loading associations...'}</div>;
+        return (
+            <div className={styles.container}>
+                <p className={styles.loading}>
+                    {config.messages?.loading || 'Loading associations...'}
+                </p>
+            </div>
+        );
     }
 
+    /* One quiet line of metadata under the name — relationship, role, notes,
+       date — joined by middots. Built as a list so a missing field closes the
+       gap instead of leaving a stray separator. */
+    const renderMeta = (association) => {
+        const parts = [];
+
+        if (association[relationshipField]) {
+            parts.push(
+                <span key="relationship" className={styles.relationshipType}>
+                    {association[relationshipField]}
+                </span>
+            );
+        }
+
+        if (association[roleField]) {
+            parts.push(
+                <span key="role" className={styles.relationshipType}>
+                    {association[roleField]}
+                </span>
+            );
+        }
+
+        if (association[notesField]) {
+            parts.push(
+                <span key="notes" className={styles.notes}>
+                    {association[notesField]}
+                </span>
+            );
+        }
+
+        if (dateField && association[dateField]) {
+            parts.push(
+                <span key="date" className={styles.date}>
+                    <Calendar size={11} aria-hidden="true" />
+                    {config.labels?.associatedAt || 'Associated'}{' '}
+                    {new Date(association[dateField]).toLocaleDateString()}
+                </span>
+            );
+        }
+
+        if (parts.length === 0) {
+            return null;
+        }
+
+        return (
+            <div className={styles.meta}>
+                {parts.map((part, index) => (
+                    <React.Fragment key={part.key}>
+                        {index > 0 && (
+                            <span className={styles.sep} aria-hidden="true">
+                                ·
+                            </span>
+                        )}
+                        {part}
+                    </React.Fragment>
+                ))}
+            </div>
+        );
+    };
+
+    const renderField = (field) => {
+        const fieldValue = newAssociation[field.id] || '';
+        const wide = field.type === 'textarea' || field.type === 'boolean';
+
+        if (field.type === 'boolean') {
+            return (
+                <div
+                    key={field.id}
+                    className={`${styles.field} ${styles.fieldWide}`}
+                >
+                    <label className={styles.checkboxLabel}>
+                        <input
+                            type="checkbox"
+                            checked={Boolean(fieldValue)}
+                            onChange={(e) =>
+                                handleFieldChange(field.id, e.target.checked, field)
+                            }
+                        />
+                        {field.checkboxLabel || field.label}
+                    </label>
+                </div>
+            );
+        }
+
+        return (
+            <div
+                key={field.id}
+                className={`${styles.field} ${wide ? styles.fieldWide : ''}`}
+            >
+                <label className={styles.label} htmlFor={`assoc-${field.id}`}>
+                    {field.label}
+                    {field.required && <span className={styles.required}> *</span>}
+                </label>
+
+                {field.type === 'multi-select' && (
+                    <MultiSelect
+                        settings={{ id: field.id }}
+                        multi={field.multi || false}
+                        onChange={(value) => handleFieldChange(field.id, value, field)}
+                        inputValue={fieldValue}
+                        options={
+                            field.id === 'customer_id'
+                                ? availableOptions
+                                : childOptions[field.id] || []
+                        }
+                        placeholder={field.placeholder || `Select ${field.label}...`}
+                    />
+                )}
+
+                {field.type === 'select' && (
+                    <select
+                        id={`assoc-${field.id}`}
+                        value={fieldValue}
+                        onChange={(e) =>
+                            handleFieldChange(field.id, e.target.value, field)
+                        }
+                        className={styles.selectField}
+                    >
+                        <option value="">Select {field.label}...</option>
+                        {(field.options || childOptions[field.id] || []).map((option) => (
+                            <option
+                                key={option.value || option}
+                                value={option.value || option}
+                            >
+                                {option.label || option}
+                            </option>
+                        ))}
+                    </select>
+                )}
+
+                {field.type === 'textarea' && (
+                    <textarea
+                        id={`assoc-${field.id}`}
+                        value={fieldValue}
+                        onChange={(e) =>
+                            handleFieldChange(field.id, e.target.value, field)
+                        }
+                        placeholder={field.placeholder || ''}
+                        className={styles.textareaField}
+                        rows={field.rows || 3}
+                    />
+                )}
+
+                {field.type === 'text' && (
+                    <input
+                        id={`assoc-${field.id}`}
+                        type="text"
+                        value={fieldValue}
+                        onChange={(e) =>
+                            handleFieldChange(field.id, e.target.value, field)
+                        }
+                        placeholder={field.placeholder || ''}
+                        className={styles.textField}
+                    />
+                )}
+            </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>
+            {showTitle && (
+                <div>
+                    <h3 className={styles.heading}>{config.title || 'Associations'}</h3>
+                    {config.description && (
+                        <p className={styles.headingNote}>{config.description}</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>
+                <div className={styles.notice} role="status">
+                    <AlertTriangle
+                        size={15}
+                        className={styles.noticeIcon}
+                        aria-hidden="true"
+                    />
+                    <div className={styles.noticeBody}>
+                        <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}
+                                className={styles.noticeAction}
                                 onClick={handleClearAllPrimary}
                             >
-                                {config.labels?.clearAllPrimary || 'Clear All Primary Status'}
+                                {config.labels?.clearAllPrimary ||
+                                    'Clear All Primary Status'}
                             </button>
                         )}
                     </div>
                 </div>
             )}
 
-            {/* Existing Associations */}
-            <div className={styles.existingAssociations}>
-                <h4>{config.labels?.currentAssociations || 'Current Associations'}</h4>
+            <div className={styles.section}>
+                <div className={styles.sectionHead}>
+                    <h4 className={styles.sectionTitle}>
+                        {config.labels?.currentAssociations || 'Current Associations'}
+                    </h4>
+                    {!showForm && (
+                        <button
+                            type="button"
+                            className={styles.addToggle}
+                            onClick={() => setShowForm(true)}
+                        >
+                            <Plus size={14} aria-hidden="true" />
+                            {config.labels?.addNew || 'Add Association'}
+                        </button>
+                    )}
+                </div>
+
                 {associations.length === 0 ? (
-                    <div className={styles.noAssociations}>
+                    <p className={styles.empty}>
                         {config.messages?.noAssociations || 'No associations found.'}
-                    </div>
+                    </p>
                 ) : (
-                    <div className={styles.associationsList}>
+                    <div className={styles.list}>
                         {associations.map((association) => {
-                            console.log('🔍 Rendering association:', 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';
-                            
-                            console.log('📊 Field values:', {
-                                name: association[nameField],
-                                primary: association[primaryField],
-                                relationship: association[relationshipField],
-                                notes: association[notesField],
-                                date: association[dateField]
-                            });
-                            
+                            const isPrimary = Boolean(association[primaryField]);
+
                             return (
-                                <div 
-                                    key={association.id} 
-                                    className={`${styles.associationItem} ${Boolean(association[primaryField]) ? styles.primary : ''}`}
+                                <div
+                                    key={association.id}
+                                    className={`${styles.row} ${isPrimary ? styles.rowPrimary : ''}`}
                                 >
-                                    <div className={styles.associationInfo}>
+                                    <div className={styles.main}>
                                         <div className={styles.entityName}>
-                                            {association[nameField]}
-                                            {Boolean(association[primaryField]) && (
-                                                <span className={styles.primaryBadge}>
-                                                    <Star size={12} style={{ marginRight: '4px' }} />
+                                            <span>{association[nameField]}</span>
+                                            {isPrimary && (
+                                                <span
+                                                    className={`${styles.chip} ${styles.chipPrimary}`}
+                                                >
+                                                    <Star
+                                                        size={10}
+                                                        fill="currentColor"
+                                                        aria-hidden="true"
+                                                    />
                                                     {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>
-                                        )}
+                                        {renderMeta(association)}
                                     </div>
-                                    <div className={styles.associationActions}>
-                                        {console.log('🎯 Actions for:', association[nameField], 'Primary:', association[primaryField], 'Boolean:', Boolean(association[primaryField]))}
-                                        {!Boolean(association[primaryField]) && endpoints.setPrimary && (
+
+                                    <div className={styles.actions}>
+                                        {!isPrimary && endpoints.setPrimary && (
                                             <button
                                                 type="button"
-                                                className={styles.setPrimaryBtn}
+                                                className={styles.iconButton}
                                                 onClick={() => handleSetPrimary(association)}
+                                                title={
+                                                    config.labels?.setPrimary || 'Set Primary'
+                                                }
+                                                aria-label={
+                                                    config.labels?.setPrimary || 'Set Primary'
+                                                }
                                             >
-                                                <Star size={14} style={{ marginRight: '4px' }} />
-                                                {config.labels?.setPrimary || 'Set Primary'}
+                                                <Star size={15} aria-hidden="true" />
                                             </button>
                                         )}
-                                        {Boolean(association[primaryField]) && endpoints.removePrimary && (
+                                        {isPrimary && endpoints.removePrimary && (
                                             <button
                                                 type="button"
-                                                className={styles.removePrimaryBtn}
+                                                className={`${styles.iconButton} ${styles.iconButtonOn}`}
                                                 onClick={() => handleRemovePrimary(association)}
-                                                title={config.labels?.removePrimaryTooltip || 'Remove primary status from this association'}
+                                                title={
+                                                    config.labels?.removePrimaryTooltip ||
+                                                    config.labels?.removePrimary ||
+                                                    'Remove primary status from this association'
+                                                }
+                                                aria-label={
+                                                    config.labels?.removePrimary ||
+                                                    'Remove Primary'
+                                                }
                                             >
-                                                <X size={14} style={{ marginRight: '4px' }} />
-                                                {config.labels?.removePrimary || 'Remove Primary'}
+                                                <StarOff size={15} aria-hidden="true" />
                                             </button>
                                         )}
                                         <button
                                             type="button"
-                                            className={styles.removeBtn}
-                                            onClick={() => handleDissociate(association.id)}
+                                            className={`${styles.iconButton} ${styles.iconButtonDanger}`}
+                                            onClick={() => confirmDissociate(association)}
+                                            title={config.labels?.remove || 'Remove'}
+                                            aria-label={config.labels?.remove || 'Remove'}
                                         >
-                                            <Trash2 size={14} style={{ marginRight: '4px' }} />
-                                            {config.labels?.remove || 'Remove'}
+                                            <Trash2 size={15} aria-hidden="true" />
                                         </button>
                                     </div>
                                 </div>
@@ -454,96 +680,37 @@ const AssociationManager = ({
                 )}
             </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) => handleFieldChange(field.id, value, field)}
-                                            inputValue={fieldValue}
-                                            options={field.id === 'customer_id' ? availableOptions : (childOptions[field.id] || [])}
-                                            placeholder={field.placeholder || `Select ${field.label}...`}
-                                        />
-                                    )}
-                                    
-                                    {field.type === 'select' && (
-                                        <select
-                                            value={fieldValue}
-                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
-                                            className={styles.selectField}
-                                        >
-                                            <option value="">Select {field.label}...</option>
-                                            {(field.options || childOptions[field.id] || []).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) => handleFieldChange(field.id, e.target.checked, field)}
-                                            />
-                                            {field.checkboxLabel || field.label}
-                                        </label>
-                                    )}
-                                    
-                                    {field.type === 'textarea' && (
-                                        <textarea
-                                            value={fieldValue}
-                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
-                                            placeholder={field.placeholder || ''}
-                                            className={styles.textareaField}
-                                            rows={field.rows || 3}
-                                        />
-                                    )}
-                                    
-                                    {field.type === 'text' && (
-                                        <input
-                                            type="text"
-                                            value={fieldValue}
-                                            onChange={(e) => handleFieldChange(field.id, e.target.value, field)}
-                                            placeholder={field.placeholder || ''}
-                                            className={styles.textField}
-                                        />
-                                    )}
-                                </div>
-                            </div>
-                        );
-                    })}
+            {showForm && (
+                <div className={styles.section}>
+                    <h4 className={styles.sectionTitle}>
+                        {config.labels?.addNew || 'Add New Association'}
+                    </h4>
+                    <div className={styles.form}>
+                        {config.fields && config.fields.map(renderField)}
 
-                    <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 className={styles.formActions}>
+                            <button
+                                type="button"
+                                className={styles.secondaryButton}
+                                onClick={() => setShowForm(false)}
+                            >
+                                {config.labels?.cancel || 'Cancel'}
+                            </button>
+                            <button
+                                type="button"
+                                className={styles.primaryButton}
+                                onClick={handleAssociate}
+                                disabled={!newAssociation[requiredFieldId]}
+                            >
+                                <Plus size={14} aria-hidden="true" />
+                                {config.labels?.addButton || 'Add Association'}
+                            </button>
+                        </div>
                     </div>
                 </div>
-            </div>
+            )}
         </div>
     );
 };
 
-export default AssociationManager;
+export default AssociationManager;

package/src/components/AsyncSelect.jsx

@@ -223,12 +223,12 @@ function VisnsAsyncSelect({
                     minHeight:
                         style && style.multi_select_height
                             ? style.multi_select_height
-                            : '50px',
+                            : 'var(--field-height, 51px)',
                     height: 'auto', // Allow height to grow with content
                 }),
                 valueContainer: (base) => ({
                     ...base,
-                    padding: '2px 8px',
+                    padding: '0 1rem',
                     display: 'flex',
                     alignItems: 'flex-start',
                     flexWrap: 'wrap',