@visns-studio/visns-components 5.21.0 → 5.24.0

package/package.json

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

package/src/components/DataGrid.jsx

@@ -95,6 +95,7 @@ import {
     renderArrayCountColumn,
     renderColourColumn,
     renderDropdownColumn,
+    renderMultiDropdownColumn,
     renderImageColumn,
     renderFileColumn,
     renderIconsColumn,
@@ -2762,7 +2763,7 @@ const DataGrid = forwardRef(
             500
         );
 
-        const getDropdownData = async (ids, url, fields, where) => {
+        const getDropdownData = async (ids, url, fields, where, orderBy) => {
             // Concatenate id array into a single string if it's an array
             const uniqueId = Array.isArray(ids) ? ids.join('') : ids;
 
@@ -2772,6 +2773,9 @@ const DataGrid = forwardRef(
                     const res = await CustomFetch(url, 'POST', {
                         fields,
                         where,
+                        // e.g. orderBy: 'sort_order' so option order follows
+                        // the managed sort instead of the endpoint default
+                        ...(orderBy && { orderBy }),
                     });
                     resolve({ [uniqueId]: res.data.data }); // Correctly use uniqueId as the key
                 } catch (err) {
@@ -2783,13 +2787,16 @@ const DataGrid = forwardRef(
 
         useEffect(() => {
             const dropdownFetches = columns
-                .filter((column) => column.type === 'dropdown')
+                .filter((column) =>
+                    ['dropdown', 'multiDropdown'].includes(column.type)
+                )
                 .map((column) =>
                     getDropdownData(
                         column.id,
                         column.url,
                         column.fields,
-                        column.where
+                        column.where,
+                        column.orderBy
                     )
                 );
 
@@ -3079,6 +3086,15 @@ const DataGrid = forwardRef(
                                     dropdownData,
                                     handleDropdownUpdate,
                                 });
+                            case 'multiDropdown':
+                                return renderMultiDropdownColumn({
+                                    column,
+                                    commonProps,
+                                    filterEditor,
+                                    filterEditorProps,
+                                    dropdownData,
+                                    handleDropdownUpdate,
+                                });
                             case 'file':
                                 return renderFileColumn({
                                     column,

package/src/components/Form.jsx

@@ -1,6 +1,6 @@
 import './styles/global.css';
 
-import React, { useState, useEffect, useRef, useCallback } from 'react';
+import React, { useState, useEffect, useRef, useCallback, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { motion } from 'framer-motion';
 import { toast } from 'react-toastify';
@@ -71,7 +71,7 @@ function Form({
     closeModal,
     columnId,
     formType,
-    formSettings,
+    formSettings: formSettingsProp,
     fetchTable,
     mapbox,
     modalOpen,
@@ -97,6 +97,35 @@ function Form({
     const dataRef = useRef([]);
     const groupClickTimeoutRef = useRef(null);
 
+    // Hide fields restricted to roles the user doesn't have (field.roles array)
+    const formSettings = useMemo(() => {
+        if (!formSettingsProp?.fields?.length) {
+            return formSettingsProp;
+        }
+
+        const fields = formSettingsProp.fields.filter((field) => {
+            if (
+                !field.roles ||
+                !Array.isArray(field.roles) ||
+                field.roles.length === 0
+            ) {
+                return true;
+            }
+
+            return field.roles.some((requiredRole) =>
+                userProfile?.roles?.some(
+                    (userRole) => userRole.name === requiredRole
+                )
+            );
+        });
+
+        if (fields.length === formSettingsProp.fields.length) {
+            return formSettingsProp;
+        }
+
+        return { ...formSettingsProp, fields };
+    }, [formSettingsProp, userProfile]);
+
     const childDropdownCallback = (data) => {
         let _form = { ...formSettings };
 
@@ -1179,6 +1208,31 @@ function Form({
                         } else {
                             _inputClass[item.id] = ''; // Clear error class if not required
                         }
+
+                        // Numeric bounds validation (min / greaterThan) for filled values
+                        const numericValue = formData[item.id];
+                        if (
+                            (item.min !== undefined ||
+                                item.greaterThan !== undefined) &&
+                            numericValue !== null &&
+                            numericValue !== undefined &&
+                            numericValue !== '' &&
+                            !isNaN(Number(numericValue))
+                        ) {
+                            if (
+                                item.min !== undefined &&
+                                Number(numericValue) < item.min
+                            ) {
+                                validation += `${item.label} must be at least ${item.min}.<br/>`;
+                                _inputClass[item.id] = styles.inputError;
+                            } else if (
+                                item.greaterThan !== undefined &&
+                                Number(numericValue) <= item.greaterThan
+                            ) {
+                                validation += `${item.label} must be greater than ${item.greaterThan}.<br/>`;
+                                _inputClass[item.id] = styles.inputError;
+                            }
+                        }
                     });
 
                     setInputClass(_inputClass);
@@ -1448,6 +1502,8 @@ function Form({
                         let fileUpload = false;
                         let fileKey = '';
                         let fileFieldSetting = '';
+                        const fileKeys = [];
+                        const fileFieldSettings = {};
 
                         if (
                             formSettings.customUrl &&
@@ -1518,11 +1574,14 @@ function Form({
                                 ) {
                                     fileUpload = true;
                                     fileKey = item;
+                                    fileKeys.push(item);
 
                                     if (formSettings.fields.length > 0) {
                                         formSettings.fields.forEach((field) => {
                                             if (field.id === item) {
                                                 fileFieldSetting = field;
+                                                fileFieldSettings[item] =
+                                                    field;
                                             }
                                         });
                                     }
@@ -1608,60 +1667,134 @@ function Form({
                                 updatedFormData['uploadedFiles'] =
                                     await Promise.all(uploadPromises);
                             } else {
-                                // Optimize image if it's an image file
-                                const optimizedFile =
-                                    await optimizeImageIfNeeded(
-                                        updatedFormData[fileKey]
+                                // Single-File fields. JSON forms can carry
+                                // several in one save (e.g. a bio's photo +
+                                // document); upload each and attach a
+                                // field-scoped descriptor so the backend
+                                // stores the file against that exact field.
+                                // Non-JSON forms keep the original
+                                // one-file-per-save behaviour, driven by the
+                                // request-level metadata below.
+                                const singleFileKeys = formSettings.json
+                                    ? fileKeys.filter(
+                                          (k) =>
+                                              updatedFormData[k] instanceof
+                                              File
+                                      )
+                                    : [fileKey];
+
+                                for (const fieldId of singleFileKeys) {
+                                    const originalName =
+                                        updatedFormData[fieldId].name;
+
+                                    // Optimize image if it's an image file
+                                    const optimizedFile =
+                                        await optimizeImageIfNeeded(
+                                            updatedFormData[fieldId]
+                                        );
+
+                                    const toastId = toast.info(
+                                        `Uploading ${originalName}`,
+                                        {
+                                            progress: 0,
+                                            autoClose: false,
+                                        }
                                     );
 
-                                const toastId = toast.info(
-                                    `Uploading ${updatedFormData[fileKey].name}`,
-                                    {
-                                        progress: 0,
-                                        autoClose: false,
-                                    }
-                                );
+                                    const fileRes = await Vapor.store(
+                                        optimizedFile,
+                                        {
+                                            progress: (progress) => {
+                                                setUploadProgress(
+                                                    progress * 100
+                                                );
+                                                toast.update(toastId, {
+                                                    progress,
+                                                });
+                                            },
+                                        }
+                                    );
 
-                                const fileRes = await Vapor.store(
-                                    optimizedFile,
-                                    {
-                                        progress: (progress) => {
-                                            setUploadProgress(progress * 100);
-                                            toast.update(toastId, {
-                                                progress,
-                                            });
-                                        },
+                                    toast.update(toastId, {
+                                        render: `${originalName} uploaded successfully!`,
+                                        type: 'success',
+                                        autoClose: 3000,
+                                    });
+
+                                    updatedFormData['uuid'] = fileRes.uuid;
+                                    updatedFormData['key'] = fileRes.key;
+                                    updatedFormData['bucket'] = fileRes.bucket;
+                                    updatedFormData['filename'] = originalName;
+                                    updatedFormData['filesize'] =
+                                        optimizedFile.size;
+                                    updatedFormData['extension'] =
+                                        fileRes.extension;
+                                    updatedFormData['file_relationship'] =
+                                        fieldId;
+                                    updatedFormData['fileable_field'] = (
+                                        fileFieldSettings[fieldId] ||
+                                        fileFieldSetting
+                                    ).fileable_field;
+
+                                    if (formSettings.json) {
+                                        // Replace the raw File (which would
+                                        // serialise to junk in the JSON
+                                        // payload) with an upload descriptor
+                                        // the backend materialises into a
+                                        // {file_path, file_name, ...} object.
+                                        updatedFormData[fieldId] = {
+                                            _vaporUpload: true,
+                                            uuid: fileRes.uuid,
+                                            key: fileRes.key,
+                                            bucket: fileRes.bucket,
+                                            filename: originalName,
+                                            filesize: optimizedFile.size,
+                                            extension: fileRes.extension,
+                                        };
                                     }
-                                );
-
-                                toast.update(toastId, {
-                                    render: `${updatedFormData[fileKey].name} uploaded successfully!`,
-                                    type: 'success',
-                                    autoClose: 3000,
-                                });
-
-                                updatedFormData['uuid'] = fileRes.uuid;
-                                updatedFormData['key'] = fileRes.key;
-                                updatedFormData['bucket'] = fileRes.bucket;
-                                updatedFormData['filename'] =
-                                    updatedFormData[fileKey].name;
-                                updatedFormData['filesize'] =
-                                    optimizedFile.size;
-                                updatedFormData['extension'] =
-                                    fileRes.extension;
-                                updatedFormData['file_relationship'] = fileKey;
-                                updatedFormData['fileable_field'] =
-                                    fileFieldSetting.fileable_field;
+                                }
                             }
                         }
 
-                        // Transform keys with dots into nested objects
+                        // Transform keys with dots into nested objects.
+                        // Walks every dot segment (not just two) so ids like
+                        // "transport.visit_before_after.yes_before_other" nest
+                        // correctly, and merges plain objects instead of
+                        // replacing them so sibling keys written by other
+                        // fields on the same path survive regardless of key
+                        // order.
+                        const isPlainObject = (value) =>
+                            value !== null &&
+                            typeof value === 'object' &&
+                            (value.constructor === Object ||
+                                value.constructor === undefined);
+
                         let payload = Object.keys(updatedFormData).reduce(
                             (acc, key) => {
                                 if (key.includes('.')) {
-                                    const [root, sub] = key.split('.');
-                                    if (!acc[root]) acc[root] = {};
-                                    acc[root][sub] = updatedFormData[key];
+                                    const segments = key.split('.');
+                                    let node = acc;
+
+                                    for (
+                                        let i = 0;
+                                        i < segments.length - 1;
+                                        i++
+                                    ) {
+                                        if (!isPlainObject(node[segments[i]])) {
+                                            node[segments[i]] = {};
+                                        }
+                                        node = node[segments[i]];
+                                    }
+
+                                    const last =
+                                        segments[segments.length - 1];
+                                    const value = updatedFormData[key];
+
+                                    node[last] =
+                                        isPlainObject(value) &&
+                                        isPlainObject(node[last])
+                                            ? { ...node[last], ...value }
+                                            : value;
                                 } else {
                                     acc[key] = updatedFormData[key];
                                 }
@@ -1737,6 +1870,7 @@ function Form({
                                         // In bulk edit mode, call saveAnother for each row in the group
                                         if (bulkEditMode && bulkEditGroupData?.groupRowIds?.length) {
                                             let hasError = false;
+                                            const saveAnotherErrors = [];
                                             for (const rowId of bulkEditGroupData.groupRowIds) {
                                                 const saveAnotherUrl = `${saveAnother.url}/${rowId}`;
                                                 const resSaveAnother =
@@ -1747,12 +1881,27 @@ function Form({
                                                     );
                                                 if (resSaveAnother.data.error !== '') {
                                                     hasError = true;
+                                                    if (
+                                                        !saveAnotherErrors.includes(
+                                                            resSaveAnother.data
+                                                                .error
+                                                        )
+                                                    ) {
+                                                        saveAnotherErrors.push(
+                                                            resSaveAnother.data
+                                                                .error
+                                                        );
+                                                    }
                                                 }
                                             }
                                             if (!hasError) {
                                                 toast.success(saveAnother.message);
                                             } else {
                                                 saveAnotherFailed = true;
+                                                saveAnotherErrors.forEach(
+                                                    (error) =>
+                                                        toast.error(error)
+                                                );
                                             }
                                             if (fetchTable) {
                                                 const createdItem =
@@ -1779,6 +1928,9 @@ function Form({
                                                 }
                                             } else {
                                                 saveAnotherFailed = true;
+                                                toast.error(
+                                                    resSaveAnother.data.error
+                                                );
                                                 if (fetchTable) {
                                                     const createdItem =
                                                         res.data.data || res.data;
@@ -2115,10 +2267,12 @@ function Form({
                             let value = data;
 
                             for (let key of keys) {
-                                value = value?.[key] || null;
+                                // ?? (not ||) so falsy-but-real values like
+                                // false, 0 and '' survive the walk
+                                value = value?.[key] ?? null;
 
                                 // If value becomes null, break out of the loop
-                                if (!value) break;
+                                if (value === null) break;
                             }
 
                             updatedFormData[item] = value;

package/src/components/columns/ColumnRenderers.jsx

@@ -1,6 +1,10 @@
+import { useEffect, useState } from 'react';
 import numeral from 'numeral';
 import moment from 'moment';
 import parse from 'html-react-parser';
+import Select from 'react-select';
+import CreatableSelect from 'react-select/creatable';
+import CustomFetch from '../Fetch';
 import { Download, AlarmClock } from 'lucide-react';
 import { toast } from 'react-toastify';
 import CellWithTooltip from '../cells/CellWithTooltip';
@@ -345,6 +349,168 @@ export const renderColourColumn = ({ column, commonProps }) => {
 };
 
 // Dropdown Column Renderer
+// Compact react-select styling shared by the grid cell editors
+const compactSelectStyles = {
+    menuPortal: (base) => ({ ...base, zIndex: 9999 }),
+    control: (base) => ({
+        ...base,
+        border: 'none',
+        boxShadow: 'none',
+        backgroundColor: 'transparent',
+        minHeight: 'unset',
+    }),
+    valueContainer: (base) => ({ ...base, padding: '0 4px' }),
+    multiValue: (base) => ({ ...base, margin: '1px 2px' }),
+    multiValueLabel: (base) => ({
+        ...base,
+        fontSize: '12px',
+        padding: '1px 4px',
+    }),
+    placeholder: (base) => ({ ...base, color: '#777' }),
+    indicatorSeparator: () => ({ display: 'none' }),
+    dropdownIndicator: (base) => ({ ...base, padding: '0 4px' }),
+};
+
+// Inline editor for the free-text companion of a multiDropdown's "Other"
+// option (column.other = {matchLabel, key, placeholder}). Commits on
+// blur/Enter via the column's update endpoint.
+const OtherValueInput = ({ column, data, handleDropdownUpdate }) => {
+    const current = data[column.other.key] ?? '';
+    const [value, setValue] = useState(current);
+
+    useEffect(() => {
+        setValue(current);
+    }, [current]);
+
+    const commit = () => {
+        if (
+            value === current ||
+            !column.update?.key ||
+            !column.update?.url ||
+            !column.update?.method
+        ) {
+            return;
+        }
+
+        handleDropdownUpdate(
+            column.other.key,
+            `${column.update.url}/${data.id}`,
+            column.update.method,
+            value
+        );
+    };
+
+    return (
+        <input
+            type="text"
+            value={value}
+            placeholder={column.other.placeholder || 'Other…'}
+            onChange={(e) => setValue(e.target.value)}
+            onBlur={commit}
+            onKeyDown={(e) => {
+                if (e.key === 'Enter') e.target.blur();
+            }}
+            onClick={(e) => e.stopPropagation()}
+            style={{
+                width: '100%',
+                marginTop: '2px',
+                padding: '3px 6px',
+                fontSize: '12px',
+                border: '1px dashed #b9b9b9',
+                borderRadius: '4px',
+                outline: 'none',
+                backgroundColor: '#fffdf2',
+            }}
+        />
+    );
+};
+
+// Single-select cell that can also create new entries on the fly
+// (column.creatable = {url, field, payload?}): typing a value not in
+// the options offers an "Add …" action that POSTs to the entity
+// endpoint and assigns the created id to the row.
+const CreatableDropdownCell = ({
+    column,
+    data,
+    optionsList,
+    handleDropdownUpdate,
+}) => {
+    const [creating, setCreating] = useState(false);
+
+    const options = optionsList.map((o) => ({ value: o.id, label: o.label }));
+    const currentId = data[column.id]?.id || data[column.id] || '';
+    const currentOption =
+        options.find((o) => o.value === currentId) || null;
+
+    const fallbackText =
+        !currentId && column.fallbackKey && data[column.fallbackKey]
+            ? String(data[column.fallbackKey])
+            : null;
+
+    const assign = (value) => {
+        if (column.update?.key && column.update?.url && column.update?.method) {
+            handleDropdownUpdate(
+                column.update.key,
+                `${column.update.url}/${data.id}`,
+                column.update.method,
+                value
+            );
+        }
+    };
+
+    const handleCreate = async (inputValue) => {
+        const label = String(inputValue ?? '').trim();
+        if (!label || !column.creatable?.url || !column.creatable?.field) {
+            return;
+        }
+
+        setCreating(true);
+        try {
+            const res = await CustomFetch(column.creatable.url, 'POST', {
+                [column.creatable.field]: label,
+                ...(column.creatable.payload || {}),
+            });
+
+            const created = res?.data?.data;
+            if (res?.data?.error === '' && created?.id) {
+                assign(created.id);
+            } else {
+                toast.error(res?.data?.error || 'Could not create entry');
+            }
+        } catch (err) {
+            console.error(err);
+            toast.error('Could not create entry');
+        } finally {
+            setCreating(false);
+        }
+    };
+
+    return (
+        <CreatableSelect
+            options={options}
+            value={currentOption}
+            placeholder={
+                fallbackText ||
+                `Select ${/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'} ${
+                    column.label
+                }`
+            }
+            isDisabled={creating}
+            isLoading={creating}
+            menuPortalTarget={
+                typeof document !== 'undefined' ? document.body : undefined
+            }
+            menuPlacement="auto"
+            formatCreateLabel={(v) => `Add "${v}"`}
+            styles={compactSelectStyles}
+            onChange={(selected) => {
+                if (selected) assign(selected.value);
+            }}
+            onCreateOption={handleCreate}
+        />
+    );
+};
+
 export const renderDropdownColumn = ({
     column,
     commonProps,
@@ -361,16 +527,67 @@ export const renderDropdownColumn = ({
         filterEditor: filterEditor,
         filterEditorProps: filterEditorProps,
         render: ({ data }) => {
+            let optionsList =
+                dropdownData[column.id] && dropdownData[column.id].length > 0
+                    ? dropdownData[column.id]
+                    : column.options || [];
+
+            // Keep historical selections visible/selectable: if the row's
+            // current related entry isn't in the options (e.g. it has been
+            // deactivated), prepend it so the select can still display it.
+            const currentRelated = data[column.id];
+            if (
+                currentRelated &&
+                typeof currentRelated === 'object' &&
+                currentRelated.id &&
+                !optionsList.some((o) => o.id === currentRelated.id)
+            ) {
+                const currentLabel =
+                    currentRelated.label ??
+                    currentRelated.name ??
+                    currentRelated.title;
+                if (currentLabel) {
+                    optionsList = [
+                        { id: currentRelated.id, label: currentLabel },
+                        ...optionsList,
+                    ];
+                }
+            }
+
+            // creatable: swap the native select for a react-select that
+            // can add new entries to the source entity on the fly
+            if (column.creatable) {
+                return (
+                    <CreatableDropdownCell
+                        column={column}
+                        data={data}
+                        optionsList={optionsList}
+                        handleDropdownUpdate={handleDropdownUpdate}
+                    />
+                );
+            }
+
             return (
                 <select
                     name={column.id}
                     value={data[column.id]?.id || data[column.id] || ''}
-                    style={{ 
-                        padding: '7px',
+                    style={{
+                        padding: '7px 22px 7px 7px',
                         width: '100%',
                         border: 'none',
                         backgroundColor: 'transparent',
                         outline: 'none',
+                        cursor: 'pointer',
+                        // Consistent affordance across browsers: strip the
+                        // native arrow and draw a subtle chevron so the
+                        // cell visibly reads as a dropdown
+                        appearance: 'none',
+                        WebkitAppearance: 'none',
+                        MozAppearance: 'none',
+                        backgroundImage:
+                            "url(\"data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' stroke='%23999999' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>\")",
+                        backgroundRepeat: 'no-repeat',
+                        backgroundPosition: 'right 6px center',
                     }}
                     onChange={(e) => {
                         e.preventDefault();
@@ -390,23 +607,23 @@ export const renderDropdownColumn = ({
                     }}
                 >
                     <option value="">
-                        Select {/^[aeioAEIO]/.test(column.label) ? 'an' : 'a'}{' '}
-                        {column.label}
+                        {/* fallbackKey: surface a legacy free-text value
+                            (recorded before the relation existed) as the
+                            placeholder so it stays readable until a managed
+                            option is chosen */}
+                        {!(data[column.id]?.id || data[column.id]) &&
+                        column.fallbackKey &&
+                        data[column.fallbackKey]
+                            ? String(data[column.fallbackKey])
+                            : `Select ${
+                                  /^[aeioAEIO]/.test(column.label) ? 'an' : 'a'
+                              } ${column.label}`}
                     </option>
-                    {dropdownData[column.id] &&
-                    dropdownData[column.id].length > 0
-                        ? dropdownData[column.id].map((option, index) => (
-                              <option value={option.id} key={index}>
-                                  {option.label}
-                              </option>
-                          ))
-                        : column.options && column.options.length > 0
-                        ? column.options.map((option, index) => (
-                              <option value={option.id} key={index}>
-                                  {option.label}
-                              </option>
-                          ))
-                        : null}
+                    {optionsList.map((option, index) => (
+                        <option value={option.id} key={index}>
+                            {option.label}
+                        </option>
+                    ))}
                 </select>
             );
         },
@@ -452,6 +669,111 @@ export const renderDropdownColumn = ({
     };
 };
 
+// MultiDropdown Column Renderer — inline editor for belongsToMany
+// relations. Chips come from the row's loaded relation (so historical
+// selections of deactivated entries keep displaying); options come from
+// the column's dropdown url; saving PUTs the selected id array to
+// column.update.key, which DynamicController syncs on the pivot.
+export const renderMultiDropdownColumn = ({
+    column,
+    commonProps,
+    filterEditor,
+    filterEditorProps,
+    dropdownData,
+    handleDropdownUpdate,
+}) => {
+    const columnId = Array.isArray(column.id) ? column.id.join('-') : column.id;
+    const nameFrom = column.nameFrom || 'label';
+
+    return {
+        ...commonProps,
+        name: columnId,
+        filterEditor: filterEditor,
+        filterEditorProps: filterEditorProps,
+        render: ({ data }) => {
+            const relationKey = Array.isArray(column.id)
+                ? column.id[0]
+                : column.id;
+            const current = Array.isArray(data[relationKey])
+                ? data[relationKey]
+                : [];
+
+            const value = current.map((entry) => ({
+                value: entry.id,
+                label: entry[nameFrom] ?? entry.label ?? entry.name ?? '',
+            }));
+
+            const options = (
+                dropdownData[column.id]?.length
+                    ? dropdownData[column.id]
+                    : column.options || []
+            ).map((o) => ({ value: o.id, label: o.label }));
+
+            // fallbackKey: a legacy free-text value shows as the
+            // placeholder until managed entries are selected
+            const placeholder =
+                value.length === 0 &&
+                column.fallbackKey &&
+                data[column.fallbackKey]
+                    ? String(data[column.fallbackKey])
+                    : 'Select...';
+
+            // other: when the option matching other.matchLabel is
+            // selected, show a free-text input for its companion value
+            // (e.g. the "Other" tour format text)
+            const otherSelected =
+                column.other &&
+                value.some(
+                    (v) =>
+                        String(v.label).toLowerCase() ===
+                        String(
+                            column.other.matchLabel ?? 'Other'
+                        ).toLowerCase()
+                );
+
+            return (
+                <div>
+                    <Select
+                        isMulti
+                        options={options}
+                        value={value}
+                        placeholder={placeholder}
+                        isClearable={false}
+                        menuPortalTarget={
+                            typeof document !== 'undefined'
+                                ? document.body
+                                : undefined
+                        }
+                        menuPlacement="auto"
+                        styles={compactSelectStyles}
+                        onChange={(selected) => {
+                            if (
+                                column.update?.key &&
+                                column.update?.url &&
+                                column.update?.method
+                            ) {
+                                handleDropdownUpdate(
+                                    column.update.key,
+                                    `${column.update.url}/${data.id}`,
+                                    column.update.method,
+                                    (selected || []).map((s) => s.value)
+                                );
+                            }
+                        }}
+                    />
+                    {otherSelected && (
+                        <OtherValueInput
+                            column={column}
+                            data={data}
+                            handleDropdownUpdate={handleDropdownUpdate}
+                        />
+                    )}
+                </div>
+            );
+        },
+    };
+};
+
 // Image Column Renderer
 export const renderImageColumn = ({ column, commonProps }) => {
     return {
@@ -1524,6 +1846,17 @@ export const renderRelationArrayColumn = ({
                             : '';
                 }
 
+                // fallbackKey: when the relation is empty, display a flat
+                // field from the row instead (e.g. legacy free-text values
+                // recorded before the relation existed)
+                if (
+                    result === '' &&
+                    column.fallbackKey &&
+                    data[column.fallbackKey]
+                ) {
+                    result = String(data[column.fallbackKey]);
+                }
+
                 return (
                     <CellWithTooltip
                         value={result}

package/src/components/generic/GenericDetail.jsx

@@ -885,11 +885,35 @@ function GenericDetail({
             size,
             truncateLength,
         } = item;
-        const value =
+        let value =
             relation && relation.length > 0 && type !== 'total'
                 ? getValueFromData(data, [...relation], id, type)
                 : getValueFromData(data, [], id, type);
 
+        // fallbackKey: when the resolved (relation) value is empty, fall
+        // back to a flat field on the record — keeps legacy free-text
+        // values visible after a field moves to a managed relation
+        if (
+            (value === '' || value === null || value === undefined) &&
+            item.fallbackKey &&
+            data[item.fallbackKey]
+        ) {
+            value = data[item.fallbackKey];
+        }
+        // suffixKey: append a companion flat field in parentheses (e.g.
+        // the "Other" free text alongside managed selections). Skipped
+        // when the value IS that field already (fallback case above).
+        else if (
+            value !== '' &&
+            value !== null &&
+            value !== undefined &&
+            item.suffixKey &&
+            data[item.suffixKey] &&
+            data[item.suffixKey] !== value
+        ) {
+            value = `${value} (${data[item.suffixKey]})`;
+        }
+
         const stringValue = String(value ?? ''); // Convert value to a string
 
         // Conditionally truncate the value if the 'truncate' key is present