@visns-studio/visns-components 6.17.2 → 6.20.0

package/src/components/ClientAssociationManager.jsx

@@ -1,7 +1,9 @@
 import React, { useState, useEffect } from 'react';
 import { toast } from 'react-toastify';
+import { Star, Trash2, Plus, Calendar } from 'lucide-react';
 import CustomFetch from './Fetch';
 import MultiSelect from './MultiSelect';
+import { confirmDialog } from './utils/ConfirmDialog';
 import styles from './styles/ClientAssociationManager.module.scss';
 
 const ClientAssociationManager = ({ 
@@ -13,7 +15,11 @@ const ClientAssociationManager = ({
     const [associations, setAssociations] = useState([]);
     const [availableOptions, setAvailableOptions] = 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 the foot
+       of the panel. */
+    const [showForm, setShowForm] = useState(false);
+
     // Dynamic state based on config
     const [newAssociation, setNewAssociation] = useState(() => {
         const initialState = {};
@@ -93,7 +99,7 @@ const ClientAssociationManager = ({
     // 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);
@@ -122,12 +128,16 @@ const ClientAssociationManager = ({
 
             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;
         }
     };
 
@@ -153,7 +163,13 @@ const ClientAssociationManager = ({
             }
         });
 
-        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
@@ -162,6 +178,24 @@ const ClientAssociationManager = ({
         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. */
+    const confirmDissociate = (association) => {
+        const nameKey = 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[nameKey] },
+        });
+    };
+
     // Set primary handler
     const handleSetPrimary = async (itemId) => {
         if (!endpoints.setPrimary) return;
@@ -179,75 +213,286 @@ const ClientAssociationManager = ({
         }
     }, [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 title + subtitle
+       block that used to sit here is gone. A standalone mount can ask for a
+       compact one back with `config.showTitle`. */
+    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, joined by middots. Built as a
+       list so a missing field closes the gap rather than leaving a separator
+       stranded — the old markup printed a bare " - " before an absent note. */
+    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) =>
+                                setNewAssociation((prev) => ({
+                                    ...prev,
+                                    [field.id]: e.target.checked,
+                                }))
+                            }
+                        />
+                        {field.checkboxLabel || field.label}
+                    </label>
+                </div>
+            );
+        }
+
+        return (
+            <div
+                key={field.id}
+                className={`${styles.field} ${wide ? styles.fieldWide : ''}`}
+            >
+                <label className={styles.label} htmlFor={`client-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) =>
+                            setNewAssociation((prev) => ({ ...prev, [field.id]: value }))
+                        }
+                        inputValue={fieldValue}
+                        options={availableOptions}
+                        placeholder={field.placeholder || `Select ${field.label}...`}
+                    />
+                )}
+
+                {field.type === 'select' && (
+                    <select
+                        id={`client-assoc-${field.id}`}
+                        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 === 'textarea' && (
+                    <textarea
+                        id={`client-assoc-${field.id}`}
+                        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
+                        id={`client-assoc-${field.id}`}
+                        type="text"
+                        value={fieldValue}
+                        onChange={(e) =>
+                            setNewAssociation((prev) => ({
+                                ...prev,
+                                [field.id]: e.target.value,
+                            }))
+                        }
+                        placeholder={field.placeholder || ''}
+                        className={styles.textField}
+                    />
+                )}
+            </div>
+        );
+    };
+
     return (
         <div className={styles.container}>
-            <div className={styles.header}>
-                <h3>{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>
+            )}
+
+            <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>
 
-            {/* Existing Associations */}
-            <div className={styles.existingAssociations}>
-                <h4>{config.labels?.currentAssociations || 'Current Associations'}</h4>
                 {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) => {
-                            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';
-                            
+                            const isPrimary = Boolean(association[primaryField]);
+
                             return (
-                                <div 
-                                    key={association.id} 
-                                    className={`${styles.associationItem} ${association[primaryField] ? styles.primary : ''}`}
+                                <div
+                                    key={association.id}
+                                    className={`${styles.row} ${isPrimary ? styles.rowPrimary : ''}`}
                                 >
-                                    <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]}
+                                    <div className={styles.main}>
+                                        <div className={styles.entityName}>
+                                            <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>
-                                        <div className={styles.associatedAt}>
-                                            {config.labels?.associatedAt || 'Associated'}: {new Date(association[dateField]).toLocaleDateString()}
-                                        </div>
+                                        {renderMeta(association)}
                                     </div>
-                                    <div className={styles.associationActions}>
-                                        {!association[primaryField] && endpoints.setPrimary && (
+
+                                    <div className={styles.actions}>
+                                        {!isPrimary && endpoints.setPrimary && (
                                             <button
                                                 type="button"
-                                                className={styles.setPrimaryBtn}
+                                                className={styles.iconButton}
                                                 onClick={() => handleSetPrimary(association.id)}
+                                                title={
+                                                    config.labels?.setPrimary || 'Set Primary'
+                                                }
+                                                aria-label={
+                                                    config.labels?.setPrimary || 'Set Primary'
+                                                }
                                             >
-                                                {config.labels?.setPrimary || 'Set Primary'}
+                                                <Star 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'}
                                         >
-                                            {config.labels?.remove || 'Remove'}
+                                            <Trash2 size={15} aria-hidden="true" />
                                         </button>
                                     </div>
                                 </div>
@@ -257,106 +502,37 @@ const ClientAssociationManager = ({
                 )}
             </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>
-                        );
-                    })}
+            {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']}
-                        >
-                            {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 ClientAssociationManager;
+export default ClientAssociationManager;