@adcops/autocore-react 3.3.61 → 3.3.63

package/src/components/ams/AmsProvider.tsx

@@ -0,0 +1,219 @@
+/*
+ * Copyright (C) 2026 Automated Design Corp. All Rights Reserved.
+ *
+ * <AmsProvider> — context provider for the Asset Management System.
+ *
+ * Mirrors <TisProvider> in shape:
+ *   1. Schema registry (loaded once via `ams.list_schemas`).
+ *   2. Live alert scalars (`ams.asset_count`, `ams.alert_*`).
+ *   3. Asset registry cache, refreshed on `ams.asset_changed` /
+ *      `ams.calibration_added` broadcasts.
+ *   4. Selection state (assetType, assetId) — pinned by user click.
+ *
+ * Drop once at the top of the HMI; the AMS components below it read
+ * from context and need no props.
+ */
+
+import React, {
+    createContext,
+    useCallback,
+    useContext,
+    useEffect,
+    useMemo,
+    useState,
+    type ReactNode,
+} from 'react';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+
+// -------------------------------------------------------------------------
+// Types
+// -------------------------------------------------------------------------
+
+export type AmsTypeSchema = any;
+export type AmsSchemaRegistry = { [assetType: string]: AmsTypeSchema };
+
+export interface AmsAlerts {
+    assetCount: number;
+    calibrationOverdue: number;
+    laneUnavailable: number;
+}
+
+export interface AmsAssetEntry {
+    asset_id: string;
+    asset_type: string;
+    serial: string;
+    location: string;
+    status: 'active' | 'retired' | 'out_for_service';
+    current_calibration_id: string | null;
+}
+
+export interface AmsSelection {
+    assetType: string | null;
+    assetId: string | null;
+}
+
+export interface AmsContextValue {
+    schemas: AmsSchemaRegistry;
+    schemasLoaded: boolean;
+    alerts: AmsAlerts;
+    assets: AmsAssetEntry[];
+    refreshAssets: () => Promise<void>;
+    readAsset: (assetId: string) => Promise<any | null>;
+    listCalibrations: (assetId: string) => Promise<string[]>;
+    readCalibration: (assetId: string, calId: string) => Promise<any | null>;
+    readUsage: (assetId: string) => Promise<any | null>;
+    selection: AmsSelection;
+    setSelection: (patch: Partial<AmsSelection>) => void;
+}
+
+const EMPTY_ALERTS: AmsAlerts = {
+    assetCount: 0, calibrationOverdue: 0, laneUnavailable: 0,
+};
+
+const AmsContext = createContext<AmsContextValue>({
+    schemas: {},
+    schemasLoaded: false,
+    alerts: EMPTY_ALERTS,
+    assets: [],
+    refreshAssets: async () => {},
+    readAsset: async () => null,
+    listCalibrations: async () => [],
+    readCalibration: async () => null,
+    readUsage: async () => null,
+    selection: { assetType: null, assetId: null },
+    setSelection: () => {},
+});
+
+// -------------------------------------------------------------------------
+// Provider
+// -------------------------------------------------------------------------
+
+export interface AmsProviderProps {
+    children: ReactNode;
+}
+
+export const AmsProvider: React.FC<AmsProviderProps> = ({ children }) => {
+    const { invoke, subscribe, unsubscribe } = useContext(EventEmitterContext);
+
+    const [schemas, setSchemas] = useState<AmsSchemaRegistry>({});
+    const [schemasLoaded, setSchemasLoaded] = useState(false);
+    const [alerts, setAlerts] = useState<AmsAlerts>(EMPTY_ALERTS);
+    const [assets, setAssets] = useState<AmsAssetEntry[]>([]);
+    const [selection, setSelectionState] = useState<AmsSelection>({ assetType: null, assetId: null });
+
+    const setSelection = useCallback((patch: Partial<AmsSelection>) => {
+        setSelectionState(prev => ({ ...prev, ...patch }));
+    }, []);
+
+    // -----------------------------------------------------------------
+    // Schema load — once on mount.
+    // -----------------------------------------------------------------
+    useEffect(() => {
+        let cancelled = false;
+        (async () => {
+            try {
+                const resp: any = await invoke('ams.list_schemas' as any, MessageType.Request, {} as any);
+                if (cancelled) return;
+                if (resp?.success && resp.data) {
+                    setSchemas((resp.data.asset_types ?? {}) as AmsSchemaRegistry);
+                    setSchemasLoaded(true);
+                } else {
+                    console.warn('[AmsProvider] ams.list_schemas failed:', resp?.error_message);
+                }
+            } catch (e) {
+                console.error('[AmsProvider] ams.list_schemas threw:', e);
+            }
+        })();
+        return () => { cancelled = true; };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+
+    // -----------------------------------------------------------------
+    // Asset list refresh — fetch via ams.list_assets, then re-fetch
+    // whenever an asset_changed or calibration_added broadcast fires.
+    // -----------------------------------------------------------------
+    const refreshAssets = useCallback(async () => {
+        try {
+            const resp: any = await invoke('ams.list_assets' as any, MessageType.Request, { include_retired: true } as any);
+            if (resp?.success) {
+                setAssets((resp.data.assets ?? []) as AmsAssetEntry[]);
+            }
+        } catch (e) {
+            console.error('[AmsProvider] list_assets threw:', e);
+        }
+    }, [invoke]);
+
+    useEffect(() => { refreshAssets(); }, [refreshAssets]);
+
+    useEffect(() => {
+        const subs = [
+            subscribe('ams.asset_changed',      () => { refreshAssets(); }),
+            subscribe('ams.calibration_added',  () => { refreshAssets(); }),
+            subscribe('ams.asset_count',                (v: any) => setAlerts(a => ({ ...a, assetCount: Number(v) || 0 }))),
+            subscribe('ams.alert_calibration_overdue',  (v: any) => setAlerts(a => ({ ...a, calibrationOverdue: Number(v) || 0 }))),
+            subscribe('ams.alert_lane_unavailable',     (v: any) => setAlerts(a => ({ ...a, laneUnavailable: Number(v) || 0 }))),
+        ];
+        return () => { subs.forEach(unsubscribe); };
+    }, [subscribe, unsubscribe, refreshAssets]);
+
+    // -----------------------------------------------------------------
+    // RPC helpers
+    // -----------------------------------------------------------------
+    const readAsset = useCallback(async (assetId: string) => {
+        try {
+            const resp: any = await invoke('ams.read_asset' as any, MessageType.Request, { asset_id: assetId } as any);
+            return resp?.success ? resp.data : null;
+        } catch { return null; }
+    }, [invoke]);
+
+    const listCalibrations = useCallback(async (assetId: string): Promise<string[]> => {
+        try {
+            const resp: any = await invoke('ams.list_calibrations' as any, MessageType.Request, { asset_id: assetId } as any);
+            return resp?.success ? (resp.data.cal_ids ?? []) : [];
+        } catch { return []; }
+    }, [invoke]);
+
+    const readCalibration = useCallback(async (assetId: string, calId: string) => {
+        try {
+            const resp: any = await invoke('ams.read_calibration' as any, MessageType.Request, { asset_id: assetId, cal_id: calId } as any);
+            return resp?.success ? resp.data : null;
+        } catch { return null; }
+    }, [invoke]);
+
+    const readUsage = useCallback(async (assetId: string) => {
+        try {
+            const resp: any = await invoke('ams.read_usage' as any, MessageType.Request, { asset_id: assetId } as any);
+            return resp?.success ? resp.data : null;
+        } catch { return null; }
+    }, [invoke]);
+
+    const value = useMemo<AmsContextValue>(() => ({
+        schemas,
+        schemasLoaded,
+        alerts,
+        assets,
+        refreshAssets,
+        readAsset,
+        listCalibrations,
+        readCalibration,
+        readUsage,
+        selection,
+        setSelection,
+    }), [schemas, schemasLoaded, alerts, assets, refreshAssets, readAsset, listCalibrations, readCalibration, readUsage, selection, setSelection]);
+
+    return <AmsContext.Provider value={value}>{children}</AmsContext.Provider>;
+};
+
+// -------------------------------------------------------------------------
+// Hooks
+// -------------------------------------------------------------------------
+
+export const useAms          = () => useContext(AmsContext);
+export const useAmsSchemas   = () => useContext(AmsContext).schemas;
+export const useAmsAlerts    = () => useContext(AmsContext).alerts;
+export const useAmsAssets    = () => useContext(AmsContext).assets;
+export const useAmsSelection = () => {
+    const ctx = useContext(AmsContext);
+    return [ctx.selection, ctx.setSelection] as const;
+};

package/src/components/ams/AssetDetailView.tsx

@@ -0,0 +1,101 @@
+/*
+ * <AssetDetailView> — read-only summary of one asset selected in the
+ * <AssetRegistryTable>: header (id, type, serial, location, status,
+ * current calibration), calibration history table, current usage
+ * counters. Provides a "+ Calibration" button that opens
+ * <CalibrationEntryDialog>.
+ */
+
+import React, { useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { useAms } from './AmsProvider';
+import { CalibrationEntryDialog } from './CalibrationEntryDialog';
+
+export const AssetDetailView: React.FC = () => {
+    const { selection, schemas, readAsset, listCalibrations, readCalibration, readUsage } = useAms();
+    const [asset, setAsset] = useState<any | null>(null);
+    const [cals, setCals]   = useState<any[]>([]);
+    const [usage, setUsage] = useState<any | null>(null);
+    const [calDialogOpen, setCalDialogOpen] = useState(false);
+
+    const refresh = async () => {
+        if (!selection.assetId) {
+            setAsset(null); setCals([]); setUsage(null);
+            return;
+        }
+        const a = await readAsset(selection.assetId);
+        setAsset(a);
+        const ids = await listCalibrations(selection.assetId);
+        const records = await Promise.all(ids.map(id => readCalibration(selection.assetId!, id)));
+        setCals(records.filter(Boolean));
+        const u = await readUsage(selection.assetId);
+        setUsage(u);
+    };
+
+    useEffect(() => { refresh(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [selection.assetId]);
+
+    if (!selection.assetId) {
+        return (
+            <div style={{ padding: '1rem', color: '#9ca3af' }}>
+                Select an asset from the registry to see its details.
+            </div>
+        );
+    }
+    if (!asset) {
+        return <div style={{ padding: '1rem' }}>Loading…</div>;
+    }
+
+    const typeLabel = schemas[asset.asset_type]?.label ?? asset.asset_type;
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
+            <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr auto 1fr', gap: '0.5rem 1.5rem', alignItems: 'baseline' }}>
+                <strong>Asset ID</strong> <span>{asset.asset_id}</span>
+                <strong>Type</strong>     <span>{typeLabel}</span>
+
+                <strong>Serial</strong>   <span>{asset.serial || <em style={{ color: '#9ca3af' }}>(none)</em>}</span>
+                <strong>Location</strong> <span>{asset.location || <em style={{ color: '#9ca3af' }}>(none)</em>}</span>
+
+                <strong>Status</strong>   <span>{asset.status}</span>
+                <strong>Installed</strong>
+                <span>{asset.install_date ? new Date(asset.install_date).toLocaleString() : '—'}</span>
+
+                <strong>Current Cal</strong>
+                <span>{asset.current_calibration_id ?? <em style={{ color: '#f59e0b' }}>none</em>}</span>
+                <strong>Cycles</strong>   <span>{usage?.cycles ?? 0}</span>
+            </div>
+
+            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <h4 style={{ margin: 0 }}>Calibration History</h4>
+                <Button label="+ Calibration" icon="pi pi-plus"
+                    onClick={() => setCalDialogOpen(true)} />
+            </div>
+            <DataTable value={cals} size="small" stripedRows
+                emptyMessage="No calibrations recorded for this asset."
+            >
+                <Column field="cal_id"       header="Cal ID" />
+                <Column field="performed_at" header="Performed"
+                    body={(r) => r.performed_at ? new Date(r.performed_at).toLocaleString() : '—'}
+                />
+                <Column field="performed_by" header="By" />
+                <Column field="expires_at"   header="Expires"
+                    body={(r) => r.expires_at ? new Date(r.expires_at).toLocaleDateString() : '—'}
+                />
+                <Column field="cert_ref"     header="Cert" />
+                <Column header="Values"
+                    body={(r) => <code style={{ fontSize: '0.75rem' }}>{JSON.stringify(r.values)}</code>}
+                />
+            </DataTable>
+
+            <CalibrationEntryDialog
+                visible={calDialogOpen}
+                assetId={asset.asset_id}
+                assetType={asset.asset_type}
+                onHide={() => setCalDialogOpen(false)}
+                onAdded={() => { refresh(); }}
+            />
+        </div>
+    );
+};

package/src/components/ams/AssetRegistryTable.tsx

@@ -0,0 +1,171 @@
+/*
+ * <AssetRegistryTable> — list every asset in the AMS, with quick
+ * filters by type / status and a "+ Add" button that pops a creation
+ * dialog. Click a row → pins selection.assetId so <AssetDetailView>
+ * can render the chosen asset.
+ */
+
+import React, { useContext, useMemo, useState } from 'react';
+import { Button } from 'primereact/button';
+import { DataTable } from 'primereact/datatable';
+import { Column } from 'primereact/column';
+import { Dropdown } from 'primereact/dropdown';
+import { InputText } from 'primereact/inputtext';
+import { Dialog } from 'primereact/dialog';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAms, type AmsAssetEntry } from './AmsProvider';
+
+interface AddDialogState {
+    open: boolean;
+    assetType: string;
+    serial: string;
+    location: string;
+}
+
+const EMPTY_ADD: AddDialogState = { open: false, assetType: '', serial: '', location: '' };
+
+export const AssetRegistryTable: React.FC = () => {
+    const { schemas, assets, refreshAssets, setSelection, selection } = useAms();
+    const { invoke } = useContext(EventEmitterContext);
+
+    const [filterType, setFilterType] = useState<string | null>(null);
+    const [filterStatus, setFilterStatus] = useState<string | null>(null);
+    const [addState, setAddState] = useState<AddDialogState>(EMPTY_ADD);
+
+    const typeOptions = useMemo(
+        () => Object.keys(schemas).map(k => ({ label: schemas[k]?.label ?? k, value: k })),
+        [schemas],
+    );
+
+    const filtered = useMemo(() => {
+        return assets.filter(a => {
+            if (filterType && a.asset_type !== filterType) return false;
+            if (filterStatus && a.status !== filterStatus) return false;
+            return true;
+        });
+    }, [assets, filterType, filterStatus]);
+
+    const onCreate = async () => {
+        if (!addState.assetType) return;
+        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);
+            if (resp?.success) {
+                setAddState(EMPTY_ADD);
+                await refreshAssets();
+                if (resp.data?.asset_id) {
+                    setSelection({ assetType: addState.assetType, assetId: resp.data.asset_id });
+                }
+            } else {
+                console.warn('[AssetRegistryTable] create_asset failed:', resp?.error_message);
+            }
+        } catch (e) {
+            console.error('[AssetRegistryTable] create_asset threw:', e);
+        }
+    };
+
+    return (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+            <div style={{ display: 'flex', gap: '0.75rem', alignItems: 'center' }}>
+                <Dropdown
+                    value={filterType}
+                    options={[{ label: 'All Types', value: null }, ...typeOptions]}
+                    onChange={(e) => setFilterType(e.value)}
+                    placeholder="Filter by type"
+                />
+                <Dropdown
+                    value={filterStatus}
+                    options={[
+                        { label: 'All Statuses',   value: null },
+                        { label: 'Active',         value: 'active' },
+                        { label: 'Out for Service', value: 'out_for_service' },
+                        { label: 'Retired',        value: 'retired' },
+                    ]}
+                    onChange={(e) => setFilterStatus(e.value)}
+                    placeholder="Filter by status"
+                />
+                <span style={{ marginLeft: 'auto' }}>
+                    <Button
+                        icon="pi pi-plus"
+                        label="Add Asset"
+                        onClick={() => setAddState(s => ({ ...s, open: true }))}
+                        disabled={typeOptions.length === 0}
+                    />
+                </span>
+            </div>
+
+            <DataTable
+                value={filtered}
+                selectionMode="single"
+                selection={filtered.find(a => a.asset_id === selection.assetId) ?? null}
+                onSelectionChange={(e) => {
+                    const row = e.value as AmsAssetEntry | null;
+                    if (row) setSelection({ assetType: row.asset_type, assetId: row.asset_id });
+                }}
+                dataKey="asset_id"
+                emptyMessage={
+                    typeOptions.length === 0
+                        ? 'AMS not enabled in this project (no asset_types declared).'
+                        : 'No assets registered yet.'
+                }
+                size="small"
+                stripedRows
+            >
+                <Column field="asset_id"   header="Asset ID" />
+                <Column field="asset_type" header="Type"
+                    body={(r: AmsAssetEntry) => schemas[r.asset_type]?.label ?? r.asset_type}
+                />
+                <Column field="serial"     header="Serial" />
+                <Column field="location"   header="Location" />
+                <Column field="status"     header="Status" />
+                <Column header="Calibration"
+                    body={(r: AmsAssetEntry) =>
+                        r.current_calibration_id
+                            ? <span title={r.current_calibration_id}>✓</span>
+                            : <span style={{ color: '#f59e0b' }}>none</span>
+                    }
+                />
+            </DataTable>
+
+            <Dialog
+                header="Add New Asset"
+                visible={addState.open}
+                style={{ width: '32rem' }}
+                onHide={() => setAddState(EMPTY_ADD)}
+                footer={
+                    <>
+                        <Button label="Cancel" severity="secondary" onClick={() => setAddState(EMPTY_ADD)} />
+                        <Button label="Create" icon="pi pi-check"
+                            onClick={onCreate}
+                            disabled={!addState.assetType}
+                        />
+                    </>
+                }
+            >
+                <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem', alignItems: 'center' }}>
+                    <label>Type *</label>
+                    <Dropdown
+                        value={addState.assetType}
+                        options={typeOptions}
+                        onChange={(e) => setAddState(s => ({ ...s, assetType: e.value }))}
+                        placeholder="Choose asset type"
+                    />
+                    <label>Serial</label>
+                    <InputText value={addState.serial}
+                        onChange={(e) => setAddState(s => ({ ...s, serial: e.target.value }))} />
+                    <label>Location</label>
+                    <InputText value={addState.location}
+                        onChange={(e) => setAddState(s => ({ ...s, location: e.target.value }))} />
+                </div>
+                <p style={{ fontSize: '0.875rem', color: '#9ca3af', marginTop: '1rem' }}>
+                    The asset_id is generated by the server (format: <code>{addState.assetType ? (schemas[addState.assetType]?.id_prefix ?? 'A-') : 'A-'}YYYYMMDDTHHMMSS</code>).
+                    Manufacturer serial is recorded for traceability but is not used as the unique key.
+                </p>
+            </Dialog>
+        </div>
+    );
+};

package/src/components/ams/CalibrationEntryDialog.tsx

@@ -0,0 +1,197 @@
+/*
+ * <CalibrationEntryDialog> — form for adding a calibration record to
+ * an asset. Renders a dynamic field set built from the asset_type's
+ * `calibration_fields` schema, plus a few standard meta fields.
+ *
+ * Triggered by <AssetDetailView>'s "+ Calibration" button. Submits via
+ * `ams.add_calibration`; on success the AmsProvider's
+ * `ams.calibration_added` subscription refreshes the registry.
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { InputText } from 'primereact/inputtext';
+import { InputNumber } from 'primereact/inputnumber';
+import { Calendar } from 'primereact/calendar';
+import { Dropdown } from 'primereact/dropdown';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAmsSchemas } from './AmsProvider';
+
+export interface CalibrationEntryDialogProps {
+    visible: boolean;
+    assetId: string;
+    assetType: string;
+    onHide: () => void;
+    onAdded?: (calId: string) => void;
+}
+
+interface FieldSpec {
+    name: string;
+    type: string;
+    required?: boolean;
+    label?: string;
+    units?: string;
+    description?: string;
+    values?: string[]; // for enum
+}
+
+export const CalibrationEntryDialog: React.FC<CalibrationEntryDialogProps> = ({
+    visible, assetId, assetType, onHide, onAdded,
+}) => {
+    const schemas = useAmsSchemas();
+    const { invoke } = useContext(EventEmitterContext);
+
+    const fields: FieldSpec[] = (schemas[assetType]?.calibration_fields ?? []) as FieldSpec[];
+
+    const [values, setValues]       = useState<{ [k: string]: any }>({});
+    const [performedBy, setPerformedBy] = useState('');
+    const [expiresAt, setExpiresAt]     = useState<Date | null>(null);
+    const [certRef, setCertRef]         = useState('');
+    const [notes, setNotes]             = useState('');
+    const [submitting, setSubmitting]   = useState(false);
+    const [error, setError]             = useState<string | null>(null);
+
+    useEffect(() => {
+        if (visible) {
+            setValues({});
+            setPerformedBy('');
+            setExpiresAt(null);
+            setCertRef('');
+            setNotes('');
+            setError(null);
+        }
+    }, [visible]);
+
+    const renderField = (f: FieldSpec) => {
+        const labelText = `${f.label ?? f.name}${f.units ? ` [${f.units}]` : ''}${f.required ? ' *' : ''}`;
+        const labelEl = (
+            <label title={f.description ?? ''}>
+                {labelText}
+            </label>
+        );
+
+        const onChange = (val: any) => setValues(v => ({ ...v, [f.name]: val }));
+
+        let input: React.ReactNode;
+        switch (f.type) {
+            case 'string':
+                input = <InputText value={values[f.name] ?? ''} onChange={(e) => onChange(e.target.value)} />;
+                break;
+            case 'enum':
+                input = (
+                    <Dropdown
+                        value={values[f.name] ?? null}
+                        options={(f.values ?? []).map(v => ({ label: v, value: v }))}
+                        onChange={(e) => onChange(e.value)}
+                        placeholder="Choose…"
+                    />
+                );
+                break;
+            case 'bool':
+                input = (
+                    <Dropdown
+                        value={values[f.name] ?? null}
+                        options={[{ label: 'true', value: true }, { label: 'false', value: false }]}
+                        onChange={(e) => onChange(e.value)}
+                    />
+                );
+                break;
+            case 'u8': case 'u16': case 'u32': case 'u64':
+            case 'i8': case 'i16': case 'i32': case 'i64':
+            case 'f32': case 'f64':
+                input = (
+                    <InputNumber
+                        value={values[f.name] ?? null}
+                        onValueChange={(e) => onChange(e.value)}
+                        useGrouping={false}
+                        maxFractionDigits={f.type.startsWith('f') ? 9 : 0}
+                    />
+                );
+                break;
+            default:
+                input = <InputText value={values[f.name] ?? ''} onChange={(e) => onChange(e.target.value)} />;
+                break;
+        }
+        return [labelEl, input] as const;
+    };
+
+    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;
+            }
+        }
+        setSubmitting(true);
+        setError(null);
+        try {
+            const resp: any = await invoke('ams.add_calibration' as any, MessageType.Request, {
+                asset_id:     assetId,
+                performed_by: performedBy,
+                expires_at:   expiresAt ? expiresAt.toISOString() : null,
+                cert_ref:     certRef,
+                notes,
+                values,
+            } as any);
+            if (resp?.success) {
+                onAdded?.(resp.data.cal_id);
+                onHide();
+            } else {
+                setError(resp?.error_message ?? 'add_calibration failed');
+            }
+        } catch (e: any) {
+            setError(String(e?.message ?? e));
+        } finally {
+            setSubmitting(false);
+        }
+    };
+
+    return (
+        <Dialog
+            header={`Add Calibration — ${assetId}`}
+            visible={visible}
+            onHide={onHide}
+            style={{ width: '40rem' }}
+            footer={
+                <>
+                    <Button label="Cancel" severity="secondary" onClick={onHide} disabled={submitting} />
+                    <Button label="Save" icon="pi pi-check" onClick={onSubmit} loading={submitting} />
+                </>
+            }
+        >
+            <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' }}>
+                    {error}
+                </div>
+            )}
+        </Dialog>
+    );
+};