@adcops/autocore-react 3.3.75 → 3.3.77

package/src/components/ams/AssetRegistryTable.tsx

@@ -5,7 +5,7 @@
  * can render the chosen asset.
  */
 
-import React, { useContext, useMemo, useState } from 'react';
+import React, { useContext, useEffect, useMemo, useState } from 'react';
 import { Button } from 'primereact/button';
 import { DataTable } from 'primereact/datatable';
 import { Column } from 'primereact/column';
@@ -31,10 +31,24 @@ interface AddDialogState {
      *  matches `roleSelection` for known roles. This is what gets sent
      *  to the server as `location`. */
     location: string;
+    /** Operator-entered values for the schema's nameplate `fields`
+     *  (capacity_n, sensitivity_mv_v, manufacturer, model, etc.).
+     *  Keyed by field name. Posted to the server as `custom` on
+     *  `ams.create_asset` so the placeholder resolver can read them
+     *  at module-spawn time. */
+    customFields: Record<string, string>;
+    /** Per-axis matrix values for multi-axis types like the
+     *  triaxial transducer. Outer key is the sub-location name
+     *  (`fx`, `fy`, ...); inner key is the per-axis field name
+     *  (`capacity_n`, `sensitivity_mv_v`, ...). Empty / missing
+     *  entries are dropped on POST; required fields gate Create.
+     *  Posted as `sub_locations` on `ams.create_asset`. */
+    subLocationFields: Record<string, Record<string, string>>;
 }
 
 const EMPTY_ADD: AddDialogState = {
     open: false, assetType: '', serial: '', roleSelection: '', location: '',
+    customFields: {}, subLocationFields: {},
 };
 
 /** Pretty label for one role in the dropdown. */
@@ -42,14 +56,78 @@ function roleLabel(r: AmsRole): string {
     return r.label ?? r.location;
 }
 
-/** Human-readable summary of which test methods will pick up an asset
- *  in this role at start_test. Drives the match-indicator below the
- *  Role dropdown so the operator can see they're configuring the right
- *  thing before saving. */
+/** Human-readable summary of who'll pick up an asset in this role.
+ *  Covers both test_methods (via asset_refs at start_test) and hardware
+ *  modules (via `${ams.by_location.*}` placeholders resolved at module
+ *  spawn). One line per kind; empty if neither references the role. */
 function roleUsageSummary(r: AmsRole): string {
-    if (r.used_by.length === 0) return 'No test methods reference this role.';
-    if (r.used_by.length === 1) return `Used by: ${r.used_by[0]}`;
-    return `Used by: ${r.used_by.join(', ')}`;
+    const parts: string[] = [];
+    if (r.used_by.length > 0) {
+        parts.push(`Used by test method${r.used_by.length === 1 ? '' : 's'}: ${r.used_by.join(', ')}`);
+    }
+    if (r.used_by_modules.length > 0) {
+        parts.push(`Used by module${r.used_by_modules.length === 1 ? '' : 's'}: ${r.used_by_modules.join(', ')}`);
+    }
+    if (parts.length === 0) return 'Not referenced by any test method or module.';
+    return parts.join(' • ');
+}
+
+/** Render-ready descriptor for one schema-declared field. Schemas come
+ *  back from `ams.list_schemas` as untyped JSON; this narrows the
+ *  fields we actually care about for the Add dialog. */
+interface SchemaField {
+    name: string;
+    type: string;
+    units?: string;
+    label?: string;
+    description?: string;
+    required?: boolean;
+}
+
+/** The keyed-fields sub_locations schema declared on an asset_type
+ *  (multi-axis transducers etc.). `keys` fixes the row set; `fields`
+ *  defines the columns. Mirrors `SubLocationsSchema` on the server. */
+interface SubLocationsSchema {
+    label?: string;
+    key_label?: string;
+    keys: string[];
+    fields: SchemaField[];
+    calibration_fields?: SchemaField[];
+}
+
+/** Pull the schema's `fields` array. Empty when no schema is loaded for
+ *  this type (built-in or custom). */
+function fieldsFor(schemas: any, assetType: string): SchemaField[] {
+    const arr = schemas?.[assetType]?.fields;
+    return Array.isArray(arr) ? arr as SchemaField[] : [];
+}
+
+/** Pull the keyed-fields sub_locations schema for an asset_type, if it
+ *  has one. Returns null for asset types using the surface-style
+ *  positional shape (no `keys`) or that don't declare sub_locations. */
+function subLocationsFor(schemas: any, assetType: string): SubLocationsSchema | null {
+    const sl = schemas?.[assetType]?.sub_locations;
+    if (!sl || !Array.isArray(sl.keys) || !Array.isArray(sl.fields)) return null;
+    return sl as SubLocationsSchema;
+}
+
+/** Coerce a per-cell string from the matrix input back to its declared
+ *  type. Numeric strings → JSON numbers; booleans → bool; everything
+ *  else stays as a string. Matches the top-level fields coercion. */
+function coerceField(field: SchemaField, raw: string): any {
+    if (raw === undefined || raw === '') return undefined;
+    switch (field.type) {
+        case 'f32': case 'f64':
+        case 'i8': case 'i16': case 'i32': case 'i64':
+        case 'u8': case 'u16': case 'u32': case 'u64': {
+            const n = Number(raw);
+            return Number.isFinite(n) ? n : undefined;
+        }
+        case 'bool':
+            return raw === 'true' || raw === '1';
+        default:
+            return raw;
+    }
 }
 
 export const AssetRegistryTable: React.FC = () => {
@@ -60,6 +138,29 @@ export const AssetRegistryTable: React.FC = () => {
     const [filterStatus, setFilterStatus] = useState<string | null>(null);
     const [addState, setAddState] = useState<AddDialogState>(EMPTY_ADD);
 
+    // <MissingAssetsBanner> fires the `ams:prefill-add` custom event
+    // when an operator clicks Register on one of its rows. Catch it
+    // here and open the Add dialog pre-populated with the asset_type
+    // and role — the operator just fills in the nameplate values.
+    useEffect(() => {
+        const handler = (e: Event) => {
+            const detail = (e as CustomEvent).detail as
+                { assetType?: string; location?: string } | undefined;
+            const assetType = detail?.assetType ?? '';
+            const location  = detail?.location ?? '';
+            if (!assetType) return;
+            setAddState({
+                ...EMPTY_ADD,
+                open: true,
+                assetType,
+                roleSelection: location,
+                location,
+            });
+        };
+        window.addEventListener('ams:prefill-add', handler);
+        return () => window.removeEventListener('ams:prefill-add', handler);
+    }, []);
+
     const typeOptions = useMemo(
         () => Object.keys(schemas).map(k => ({ label: schemas[k]?.label ?? k, value: k })),
         [schemas],
@@ -111,12 +212,60 @@ export const AssetRegistryTable: React.FC = () => {
 
     const onCreate = async () => {
         if (!addState.assetType) return;
+        // Coerce the per-field strings to their declared types. Numbers
+        // become JSON numbers, bools become bools; empty strings drop
+        // out so the asset_json doesn't get noisy with empty values.
+        // The placeholder resolver expects native types — a string
+        // "5000" wouldn't satisfy a `${ams.*}` reference asking for a
+        // numeric max_val.
+        const custom: Record<string, any> = {};
+        for (const field of fieldsForType) {
+            const raw = addState.customFields[field.name];
+            if (raw === undefined || raw === '') continue;
+            switch (field.type) {
+                case 'f32': case 'f64': case 'i8': case 'i16': case 'i32': case 'i64':
+                case 'u8':  case 'u16': case 'u32': case 'u64': {
+                    const n = Number(raw);
+                    if (Number.isFinite(n)) custom[field.name] = n;
+                    break;
+                }
+                case 'bool':
+                    custom[field.name] = raw === 'true' || raw === '1';
+                    break;
+                default:
+                    custom[field.name] = raw;
+            }
+        }
+
+        // Pack the per-axis matrix into a sub_locations object. Only
+        // included when the asset_type declares a keyed-fields schema;
+        // for surface-style positional types the server still
+        // materializes its own defaults from the schema.
+        const subLocations: Record<string, Record<string, any>> = {};
+        if (subLocationsSchema) {
+            for (const key of subLocationsSchema.keys) {
+                const row: Record<string, any> = {};
+                for (const field of subLocationsSchema.fields) {
+                    const raw = addState.subLocationFields[key]?.[field.name] ?? '';
+                    const coerced = coerceField(field, raw);
+                    if (coerced !== undefined) row[field.name] = coerced;
+                }
+                subLocations[key] = row;
+            }
+        }
+
+        const payload: any = {
+            asset_type: addState.assetType,
+            serial:     addState.serial,
+            location:   addState.location,
+            custom,
+        };
+        if (subLocationsSchema) {
+            payload.sub_locations = subLocations;
+        }
+
         try {
-            const resp: any = await invoke('ams.create_asset' as any, MessageType.Request, {
-                asset_type: addState.assetType,
-                serial:     addState.serial,
-                location:   addState.location,
-            } as any);
+            const resp: any = await invoke('ams.create_asset' as any, MessageType.Request, payload);
             if (resp?.success) {
                 setAddState(EMPTY_ADD);
                 await refreshAssets();
@@ -134,16 +283,37 @@ export const AssetRegistryTable: React.FC = () => {
     /** When the operator changes asset type in the dialog, pre-select
      *  the only role if there's exactly one (the common case for fixed
      *  hardware), or leave it empty so they make an explicit choice
-     *  when there are multiple. Hide the field entirely when none. */
+     *  when there are multiple. Hide the field entirely when none.
+     *  Also resets the nameplate-field map — fields are type-specific
+     *  and the previous type's inputs would not be relevant. */
     const onAssetTypeChange = (newType: string) => {
         const list = roles[newType] ?? [];
-        if (list.length === 1) {
-            setAddState(s => ({ ...s, assetType: newType, roleSelection: list[0].location, location: list[0].location }));
-        } else {
-            setAddState(s => ({ ...s, assetType: newType, roleSelection: '', location: '' }));
-        }
+        const base = list.length === 1
+            ? { roleSelection: list[0].location, location: list[0].location }
+            : { roleSelection: '', location: '' };
+        setAddState(s => ({
+            ...s, assetType: newType, ...base,
+            customFields: {}, subLocationFields: {},
+        }));
     };
 
+    /** Schema-declared `fields` for the selected asset_type, filtered
+     *  to the ones the dialog actually renders. We render everything
+     *  the catalog declares (manufacturer, model, capacity_n, etc.).
+     *  The dialog's existing `serial` input remains separate because
+     *  serial is a top-level Asset field, not a custom one. */
+    const fieldsForType = useMemo(
+        () => fieldsFor(schemas, addState.assetType),
+        [schemas, addState.assetType],
+    );
+
+    /** Keyed-fields sub_locations schema for the selected asset_type,
+     *  if any. Drives the per-axis matrix render below. */
+    const subLocationsSchema = useMemo(
+        () => subLocationsFor(schemas, addState.assetType),
+        [schemas, addState.assetType],
+    );
+
     /** Role dropdown change handler. ROLE_OTHER puts us into free-form
      *  mode where the operator types into a text field. */
     const onRoleChange = (value: string) => {
@@ -155,13 +325,24 @@ export const AssetRegistryTable: React.FC = () => {
     };
 
     /** Disable Create until the operator has picked a role (or supplied
-     *  free-form text). Asset types with no roles bypass this check. */
+     *  free-form text), filled in every required top-level field, and
+     *  filled in every required per-axis field on every declared key
+     *  (when the asset_type uses a keyed-fields sub_locations schema). */
     const createDisabled =
         !addState.assetType ||
         (typeHasRoles && (
             addState.roleSelection === '' ||
             (addState.roleSelection === ROLE_OTHER && !addState.location.trim())
-        ));
+        )) ||
+        fieldsForType.some(f =>
+            f.required && !(addState.customFields[f.name]?.toString().trim())
+        ) ||
+        (subLocationsSchema?.keys.some(key =>
+            subLocationsSchema.fields.some(field =>
+                field.required &&
+                !(addState.subLocationFields[key]?.[field.name]?.toString().trim())
+            )
+        ) ?? false);
 
     return (
         <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
@@ -284,8 +465,131 @@ export const AssetRegistryTable: React.FC = () => {
                             )}
                         </>
                     )}
+
+                    {/* Schema-declared nameplate fields (capacity_n,
+                        sensitivity_mv_v, manufacturer, model, etc.).
+                        The values land in asset.custom on the server and
+                        are what the placeholder resolver reads to seed
+                        NI bridge channels and EL3356 SDOs. Required
+                        fields gate Create. */}
+                    {fieldsForType.map(field => {
+                        const label = field.label ?? field.name;
+                        const fullLabel = field.units
+                            ? `${label} [${field.units}]${field.required ? ' *' : ''}`
+                            : `${label}${field.required ? ' *' : ''}`;
+                        const isNum = field.type !== 'string' && field.type !== 'bool';
+                        return (
+                            <React.Fragment key={field.name}>
+                                <label title={field.description ?? undefined}>
+                                    {fullLabel}
+                                </label>
+                                {field.type === 'bool' ? (
+                                    <Dropdown
+                                        value={addState.customFields[field.name] ?? ''}
+                                        options={[
+                                            { label: 'true',  value: 'true' },
+                                            { label: 'false', value: 'false' },
+                                        ]}
+                                        onChange={(e) => setAddState(s => ({
+                                            ...s,
+                                            customFields: { ...s.customFields, [field.name]: e.value },
+                                        }))}
+                                        placeholder="—"
+                                    />
+                                ) : (
+                                    <InputText
+                                        value={addState.customFields[field.name] ?? ''}
+                                        keyfilter={isNum ? 'num' : undefined}
+                                        placeholder={field.description ?? undefined}
+                                        onChange={(e) => setAddState(s => ({
+                                            ...s,
+                                            customFields: { ...s.customFields, [field.name]: e.target.value },
+                                        }))}
+                                    />
+                                )}
+                            </React.Fragment>
+                        );
+                    })}
                 </div>
 
+                {/* Per-axis matrix for asset types with a keyed-fields
+                    sub_locations schema (multi-axis transducers). One
+                    row per declared key (fx/fy/fz/mx/my/mz); columns
+                    are the schema's per-axis fields. Each cell is the
+                    same input control the top-level fields above use.
+                    Required cells gate Create — the server validates
+                    again with a per-key, per-field problem list. */}
+                {subLocationsSchema && (
+                    <div style={{ marginTop: '1.5rem' }}>
+                        <h4 style={{ margin: '0 0 0.5rem 0' }}>
+                            {subLocationsSchema.label ?? 'Sub-locations'}
+                        </h4>
+                        <div style={{ overflowX: 'auto' }}>
+                            <table style={{
+                                width: '100%', borderCollapse: 'collapse',
+                                fontSize: '0.875rem',
+                            }}>
+                                <thead>
+                                    <tr>
+                                        <th style={{ textAlign: 'left', padding: '0.25rem 0.5rem',
+                                                     borderBottom: '1px solid var(--surface-border)' }}>
+                                            {subLocationsSchema.key_label ?? 'Key'}
+                                        </th>
+                                        {subLocationsSchema.fields.map(f => (
+                                            <th key={f.name}
+                                                title={f.description ?? undefined}
+                                                style={{ textAlign: 'left', padding: '0.25rem 0.5rem',
+                                                         borderBottom: '1px solid var(--surface-border)' }}>
+                                                {(f.label ?? f.name)}
+                                                {f.units ? ` [${f.units}]` : ''}
+                                                {f.required ? ' *' : ''}
+                                            </th>
+                                        ))}
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    {subLocationsSchema.keys.map(key => (
+                                        <tr key={key}>
+                                            <td style={{ padding: '0.25rem 0.5rem', fontWeight: 600 }}>
+                                                {key}
+                                            </td>
+                                            {subLocationsSchema.fields.map(field => {
+                                                const cellValue =
+                                                    addState.subLocationFields[key]?.[field.name] ?? '';
+                                                const isNum =
+                                                    field.type !== 'string' && field.type !== 'bool';
+                                                return (
+                                                    <td key={field.name}
+                                                        style={{ padding: '0.25rem 0.5rem' }}>
+                                                        <InputText
+                                                            value={cellValue}
+                                                            keyfilter={isNum ? 'num' : undefined}
+                                                            onChange={(e) => {
+                                                                const v = e.target.value;
+                                                                setAddState(s => ({
+                                                                    ...s,
+                                                                    subLocationFields: {
+                                                                        ...s.subLocationFields,
+                                                                        [key]: {
+                                                                            ...(s.subLocationFields[key] ?? {}),
+                                                                            [field.name]: v,
+                                                                        },
+                                                                    },
+                                                                }));
+                                                            }}
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    </td>
+                                                );
+                                            })}
+                                        </tr>
+                                    ))}
+                                </tbody>
+                            </table>
+                        </div>
+                    </div>
+                )}
+
                 {/* Help text + match indicator. Updates as the operator
                     picks a role so they see exactly which test methods
                     will pick up the asset they're about to register. */}

package/src/components/ams/CalibrationEntryDialog.tsx

@@ -37,6 +37,18 @@ interface FieldSpec {
     values?: string[]; // for enum
 }
 
+/** Keyed-fields sub_locations schema mirroring the server's
+ *  `SubLocationsSchema`. When present and `calibration_fields` is
+ *  non-empty, the dialog renders a per-axis grid instead of the flat
+ *  field list, and `values` posts as `{ <key>: { <field>: ... } }`. */
+interface SubLocationsSchema {
+    label?: string;
+    key_label?: string;
+    keys: string[];
+    fields?: FieldSpec[];
+    calibration_fields?: FieldSpec[];
+}
+
 export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
     visible, assetId, assetType, onHide, onAdded,
 }) => {
@@ -45,7 +57,23 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
 
     const fields: FieldSpec[] = (schemas[assetType]?.calibration_fields ?? []) as FieldSpec[];
 
+    // Per-axis schema if this asset_type declares one. When set AND
+    // its calibration_fields is non-empty, we switch to the matrix UI.
+    const subSchema: SubLocationsSchema | null = (() => {
+        const sl = schemas[assetType]?.sub_locations;
+        if (!sl || !Array.isArray(sl.keys)) return null;
+        return sl as SubLocationsSchema;
+    })();
+    const perAxisFields: FieldSpec[] = subSchema?.calibration_fields ?? [];
+    const isPerAxis = perAxisFields.length > 0;
+
+    // Two value shapes: flat (existing) for single-cell types, and
+    // matrix for per-axis types. We hold them separately so toggling
+    // `isPerAxis` doesn't crosstalk.
     const [values, setValues]       = useState<{ [k: string]: any }>({});
+    const [perAxisValues, setPerAxisValues] = useState<{
+        [key: string]: { [field: string]: any }
+    }>({});
     const [performedBy, setPerformedBy] = useState('');
     const [expiresAt, setExpiresAt]     = useState<Date | null>(null);
     const [certRef, setCertRef]         = useState('');
@@ -56,6 +84,7 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
     useEffect(() => {
         if (visible) {
             setValues({});
+            setPerAxisValues({});
             setPerformedBy('');
             setExpiresAt(null);
             setCertRef('');
@@ -118,13 +147,32 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
     };
 
     const onSubmit = async () => {
-        // Basic required-field check.
-        for (const f of fields) {
-            if (f.required && (values[f.name] === undefined || values[f.name] === null || values[f.name] === '')) {
-                setError(`Field "${f.label ?? f.name}" is required.`);
-                return;
+        // Required-field check. Per-axis mode walks the matrix; flat
+        // mode walks the existing schema fields.
+        if (isPerAxis && subSchema) {
+            for (const key of subSchema.keys) {
+                for (const f of perAxisFields) {
+                    if (!f.required) continue;
+                    const v = perAxisValues[key]?.[f.name];
+                    if (v === undefined || v === null || v === '') {
+                        setError(`Field "${f.label ?? f.name}" on axis "${key}" is required.`);
+                        return;
+                    }
+                }
+            }
+        } else {
+            for (const f of fields) {
+                if (f.required && (values[f.name] === undefined || values[f.name] === null || values[f.name] === '')) {
+                    setError(`Field "${f.label ?? f.name}" is required.`);
+                    return;
+                }
             }
         }
+
+        // Build the values payload. Per-axis mode posts the matrix
+        // shape; flat mode posts the existing single-cell shape.
+        const valuesPayload: any = isPerAxis ? perAxisValues : values;
+
         setSubmitting(true);
         setError(null);
         try {
@@ -134,7 +182,7 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
                 expires_at:   expiresAt ? expiresAt.toISOString() : null,
                 cert_ref:     certRef,
                 notes,
-                values,
+                values:       valuesPayload,
             } as any);
             if (resp?.success) {
                 onAdded?.(resp.data.cal_id);
@@ -162,30 +210,115 @@ export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
                 </>
             }
         >
-            <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem', alignItems: 'center' }}>
-                {fields.flatMap((f, i) => {
-                    const [l, inp] = renderField(f);
-                    return [
-                        <React.Fragment key={`l-${i}`}>{l}</React.Fragment>,
-                        <React.Fragment key={`i-${i}`}>{inp}</React.Fragment>,
-                    ];
-                })}
-
-                <hr style={{ gridColumn: '1 / span 2', width: '100%' }} />
-
-                <label>Performed by</label>
-                <InputText value={performedBy} onChange={(e) => setPerformedBy(e.target.value)} />
-
-                <label>Expires at</label>
-                <Calendar value={expiresAt} onChange={(e) => setExpiresAt((e.value as Date) ?? null)}
-                    showIcon dateFormat="yy-mm-dd" />
-
-                <label>Certificate ref</label>
-                <InputText value={certRef} onChange={(e) => setCertRef(e.target.value)} />
-
-                <label>Notes</label>
-                <InputText value={notes} onChange={(e) => setNotes(e.target.value)} />
-            </div>
+            {isPerAxis && subSchema ? (
+                <div>
+                    <h4 style={{ margin: '0 0 0.5rem 0' }}>
+                        {subSchema.label ?? 'Per-axis calibration'}
+                    </h4>
+                    <div style={{ overflowX: 'auto', marginBottom: '1rem' }}>
+                        <table style={{ width: '100%', borderCollapse: 'collapse',
+                                        fontSize: '0.875rem' }}>
+                            <thead>
+                                <tr>
+                                    <th style={{ textAlign: 'left', padding: '0.25rem 0.5rem',
+                                                 borderBottom: '1px solid var(--surface-border)' }}>
+                                        {subSchema.key_label ?? 'Key'}
+                                    </th>
+                                    {perAxisFields.map(f => (
+                                        <th key={f.name}
+                                            title={f.description ?? undefined}
+                                            style={{ textAlign: 'left', padding: '0.25rem 0.5rem',
+                                                     borderBottom: '1px solid var(--surface-border)' }}>
+                                            {(f.label ?? f.name)}
+                                            {f.units ? ` [${f.units}]` : ''}
+                                            {f.required ? ' *' : ''}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {subSchema.keys.map(key => (
+                                    <tr key={key}>
+                                        <td style={{ padding: '0.25rem 0.5rem', fontWeight: 600 }}>
+                                            {key}
+                                        </td>
+                                        {perAxisFields.map(field => {
+                                            const cellValue = perAxisValues[key]?.[field.name];
+                                            const isNum = field.type !== 'string' && field.type !== 'bool';
+                                            return (
+                                                <td key={field.name} style={{ padding: '0.25rem 0.5rem' }}>
+                                                    {isNum ? (
+                                                        <InputNumber
+                                                            value={cellValue ?? null}
+                                                            onValueChange={(e) => {
+                                                                setPerAxisValues(v => ({
+                                                                    ...v,
+                                                                    [key]: { ...(v[key] ?? {}), [field.name]: e.value },
+                                                                }));
+                                                            }}
+                                                            useGrouping={false}
+                                                            maxFractionDigits={field.type.startsWith('f') ? 9 : 0}
+                                                            inputStyle={{ width: '100%' }}
+                                                        />
+                                                    ) : (
+                                                        <InputText
+                                                            value={cellValue ?? ''}
+                                                            onChange={(e) => {
+                                                                setPerAxisValues(v => ({
+                                                                    ...v,
+                                                                    [key]: { ...(v[key] ?? {}), [field.name]: e.target.value },
+                                                                }));
+                                                            }}
+                                                            style={{ width: '100%' }}
+                                                        />
+                                                    )}
+                                                </td>
+                                            );
+                                        })}
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr',
+                                  gap: '0.5rem 1rem', alignItems: 'center' }}>
+                        <label>Performed by</label>
+                        <InputText value={performedBy} onChange={(e) => setPerformedBy(e.target.value)} />
+                        <label>Expires at</label>
+                        <Calendar value={expiresAt} onChange={(e) => setExpiresAt((e.value as Date) ?? null)}
+                            showIcon dateFormat="yy-mm-dd" />
+                        <label>Certificate ref</label>
+                        <InputText value={certRef} onChange={(e) => setCertRef(e.target.value)} />
+                        <label>Notes</label>
+                        <InputText value={notes} onChange={(e) => setNotes(e.target.value)} />
+                    </div>
+                </div>
+            ) : (
+                <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem', alignItems: 'center' }}>
+                    {fields.flatMap((f, i) => {
+                        const [l, inp] = renderField(f);
+                        return [
+                            <React.Fragment key={`l-${i}`}>{l}</React.Fragment>,
+                            <React.Fragment key={`i-${i}`}>{inp}</React.Fragment>,
+                        ];
+                    })}
+
+                    <hr style={{ gridColumn: '1 / span 2', width: '100%' }} />
+
+                    <label>Performed by</label>
+                    <InputText value={performedBy} onChange={(e) => setPerformedBy(e.target.value)} />
+
+                    <label>Expires at</label>
+                    <Calendar value={expiresAt} onChange={(e) => setExpiresAt((e.value as Date) ?? null)}
+                        showIcon dateFormat="yy-mm-dd" />
+
+                    <label>Certificate ref</label>
+                    <InputText value={certRef} onChange={(e) => setCertRef(e.target.value)} />
+
+                    <label>Notes</label>
+                    <InputText value={notes} onChange={(e) => setNotes(e.target.value)} />
+                </div>
+            )}
 
             {error && (
                 <div style={{ marginTop: '1rem', color: '#ef4444' }}>