@adcops/autocore-react 3.3.59 → 3.3.63

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>
+    );
+};

package/src/components/ams/SubLocationPicker.tsx

@@ -0,0 +1,146 @@
+/*
+ * <SubLocationPicker> — grid view for an asset's sub_locations
+ * (typically surface lanes). Each cell shows the sub_location's status
+ * and lets the operator click to mark it in_use / worn / available, or
+ * select it for the active test.
+ *
+ * Pure context-driven: reads selection.assetId from <AmsProvider>.
+ */
+
+import React, { useContext, useEffect, useState } from 'react';
+import { Button } from 'primereact/button';
+import { Dialog } from 'primereact/dialog';
+import { Dropdown } from 'primereact/dropdown';
+import { EventEmitterContext } from '../../core/EventEmitterContext';
+import { MessageType } from '../../hub/CommandMessage';
+import { useAms } from './AmsProvider';
+
+interface SubLocationItem {
+    id: string;
+    [k: string]: any;
+}
+
+interface SubLocations {
+    name: string;
+    items: SubLocationItem[];
+}
+
+export const SubLocationPicker: React.FC = () => {
+    const { selection } = useAms();
+    const { invoke } = useContext(EventEmitterContext);
+    const [subs, setSubs] = useState<SubLocations | null>(null);
+    const [editing, setEditing] = useState<{ id: string; status: string } | null>(null);
+
+    const refresh = async () => {
+        if (!selection.assetId) {
+            setSubs(null);
+            return;
+        }
+        try {
+            const resp: any = await invoke('ams.list_sub_locations' as any, MessageType.Request, {
+                asset_id: selection.assetId,
+            } as any);
+            if (resp?.success) {
+                const sl = resp.data?.sub_locations;
+                if (sl && Array.isArray(sl.items)) {
+                    setSubs(sl as SubLocations);
+                } else {
+                    setSubs(null);
+                }
+            }
+        } catch (e) {
+            console.error('[SubLocationPicker] list_sub_locations:', e);
+        }
+    };
+    useEffect(() => { refresh(); /* eslint-disable-next-line react-hooks/exhaustive-deps */ }, [selection.assetId]);
+
+    if (!selection.assetId) {
+        return null;
+    }
+    if (!subs) {
+        return null;
+    }
+
+    const onSave = async () => {
+        if (!editing) return;
+        try {
+            await invoke('ams.update_sub_location' as any, MessageType.Request, {
+                asset_id:    selection.assetId!,
+                location_id: editing.id,
+                partial:     { status: editing.status },
+            } as any);
+            setEditing(null);
+            await refresh();
+        } catch (e) {
+            console.error('[SubLocationPicker] update:', e);
+        }
+    };
+
+    const colorFor = (status: string): string => {
+        switch (status) {
+            case 'available': return '#22c55e';
+            case 'in_use':    return '#3b82f6';
+            case 'worn':      return '#f59e0b';
+            case 'retired':   return '#6b7280';
+            default:          return '#9ca3af';
+        }
+    };
+
+    return (
+        <div>
+            <h4 style={{ marginBottom: '0.5rem', textTransform: 'capitalize' }}>{subs.name}</h4>
+            <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(7rem, 1fr))', gap: '0.5rem' }}>
+                {subs.items.map(item => {
+                    const status = String(item.status ?? '');
+                    return (
+                        <button
+                            key={item.id}
+                            onClick={() => setEditing({ id: item.id, status })}
+                            style={{
+                                padding: '0.75rem',
+                                border: `2px solid ${colorFor(status)}`,
+                                borderRadius: 6,
+                                background: 'transparent',
+                                color: 'inherit',
+                                cursor: 'pointer',
+                                textAlign: 'left',
+                            }}
+                        >
+                            <div style={{ fontWeight: 700 }}>{item.id}</div>
+                            <div style={{ fontSize: '0.875rem', color: colorFor(status) }}>{status}</div>
+                            {item.cycles_used !== undefined && (
+                                <div style={{ fontSize: '0.75rem', color: '#9ca3af' }}>
+                                    {Number(item.cycles_used).toLocaleString()} cycles
+                                </div>
+                            )}
+                        </button>
+                    );
+                })}
+            </div>
+
+            <Dialog
+                header={editing ? `Edit ${editing.id}` : 'Edit'}
+                visible={!!editing}
+                onHide={() => setEditing(null)}
+                style={{ width: '24rem' }}
+                footer={
+                    <>
+                        <Button label="Cancel" severity="secondary" onClick={() => setEditing(null)} />
+                        <Button label="Save" icon="pi pi-check" onClick={onSave} />
+                    </>
+                }
+            >
+                {editing && (
+                    <div style={{ display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '0.5rem 1rem' }}>
+                        <label>Status</label>
+                        <Dropdown
+                            value={editing.status}
+                            options={['available', 'in_use', 'worn', 'retired'].map(v => ({ label: v, value: v }))}
+                            onChange={(e) => setEditing(s => s ? { ...s, status: e.value } : s)}
+                        />
+                    </div>
+                )}
+            </Dialog>
+        </div>
+    );
+};

package/src/components/ams/index.ts

@@ -0,0 +1,12 @@
+/*
+ * Public surface of the AMS component family. Drop <AmsProvider> at
+ * the top of your HMI; the rest are zero-prop and read from context.
+ *
+ * See autocore-server/doc/ams_product_plan.md for the full design.
+ */
+
+export { AmsProvider, useAms, useAmsSchemas, useAmsAlerts, useAmsAssets, useAmsSelection } from './AmsProvider';
+export { AssetRegistryTable } from './AssetRegistryTable';
+export { AssetDetailView } from './AssetDetailView';
+export { CalibrationEntryDialog } from './CalibrationEntryDialog';
+export { SubLocationPicker } from './SubLocationPicker';

package/src/components/index.ts

@@ -27,6 +27,9 @@ export type {
     TisMethodSchema,
 } from './tis/TisProvider';
 
+export { ProjectSelector }     from './tis/ProjectSelector';
+export type { ProjectSelectorProps } from './tis/ProjectSelector';
+
 export { TestSetupForm }       from './tis/TestSetupForm';
 export type { TestSetupFormProps } from './tis/TestSetupForm';
 
@@ -44,3 +47,30 @@ export type { TestDataViewProps, ChartAxis, ChartSeries, ChartView, RawDataShape
 
 export { TestRawDataView }     from './tis/TestRawDataView';
 export type { TestRawDataViewProps } from './tis/TestRawDataView';
+
+// -----------------------------------------------------------------------
+// Asset Management System — see autocore-server/doc/ams_product_plan.md
+// Drop <AmsProvider> at the top of your HMI; the rest are zero-prop.
+// -----------------------------------------------------------------------
+export {
+    AmsProvider,
+    useAms,
+    useAmsSchemas,
+    useAmsAlerts,
+    useAmsAssets,
+    useAmsSelection,
+} from './ams/AmsProvider';
+export type {
+    AmsProviderProps,
+    AmsContextValue,
+    AmsAlerts,
+    AmsAssetEntry,
+    AmsSelection,
+    AmsSchemaRegistry,
+    AmsTypeSchema,
+} from './ams/AmsProvider';
+export { AssetRegistryTable }    from './ams/AssetRegistryTable';
+export { AssetDetailView }       from './ams/AssetDetailView';
+export { CalibrationEntryDialog } from './ams/CalibrationEntryDialog';
+export type { CalibrationEntryDialogProps } from './ams/CalibrationEntryDialog';
+export { SubLocationPicker }     from './ams/SubLocationPicker';