@evenicanpm/admin-integrate 1.8.1 → 2.0.1

package/src/components/templates/inputs/index.tsx

@@ -1,1392 +0,0 @@
-"use client";
-
-import type {
-	CheckUniqueIdentifierQuery,
-	GetSourceEndpointsQuery,
-} from "@evenicanpm/admin-core/api/e4/graphqlRequestSdk";
-import { templateInputSearch } from "@evenicanpm/admin-integrate/api/templates/queries";
-import {
-	isTemplateInputSearchQueryKey,
-	type TemplateInputSearchQueryKey,
-} from "@evenicanpm/admin-integrate/api/templates/queries/types";
-import AddIcon from "@mui/icons-material/Add";
-import DeleteIcon from "@mui/icons-material/Delete";
-import {
-	Autocomplete,
-	type AutocompleteChangeReason,
-	Box,
-	Button,
-	Card,
-	CardContent,
-	Checkbox,
-	FormControlLabel,
-	FormHelperText,
-	IconButton,
-	Table,
-	TableBody,
-	TableCell,
-	TableHead,
-	TableRow,
-	TextField,
-	Typography,
-} from "@mui/material";
-import { debounce } from "lodash";
-import { useSearchParams } from "next/navigation";
-import * as React from "react";
-import {
-	type ErrorState,
-	type FieldValue,
-	type FormState,
-	type ProcessConfigMerge,
-	type ProcessTemplateInput,
-	type ProcessTemplateInputSchema,
-	type ProcessTemplatePage,
-	type SearchOption,
-	sortBy,
-	templateFieldKey,
-} from "../types";
-
-type InputRow =
-	| { type: "pair"; items: [ProcessTemplateInput, ProcessTemplateInput] }
-	| { type: "full"; item: ProcessTemplateInput };
-
-export function TextInput({
-	label,
-	placeholder,
-	value,
-	setValue,
-	error,
-	helpText,
-	readOnly,
-}: Readonly<{
-	label: string;
-	placeholder?: string | null;
-	value: string;
-	setValue: (v: string) => void;
-	error?: string | null;
-	helpText?: string | null;
-	readOnly?: boolean;
-}>) {
-	if (readOnly) return renderReadOnlyText(label, value);
-
-	return (
-		<TextField
-			label={label}
-			value={value ?? ""}
-			onChange={(e) => setValue(e.target.value)}
-			placeholder={placeholder ?? undefined}
-			fullWidth
-			error={Boolean(error)}
-			helperText={error ?? helpText ?? ""}
-			disabled={readOnly}
-		/>
-	);
-}
-
-export function NumberInput({
-	label,
-	placeholder,
-	value,
-	setValue,
-	error,
-	helpText,
-	readOnly,
-}: Readonly<{
-	label: string;
-	placeholder?: string | null;
-	value: number | "" | null;
-	setValue: (v: number | "") => void;
-	error?: string | null;
-	helpText?: string | null;
-	readOnly?: boolean;
-}>) {
-	if (readOnly) return renderReadOnlyText(label, value);
-
-	return (
-		<TextField
-			type="number"
-			label={label}
-			value={value ?? ""}
-			onChange={(e) =>
-				setValue(e.target.value === "" ? "" : Number(e.target.value))
-			}
-			placeholder={placeholder ?? undefined}
-			fullWidth
-			error={Boolean(error)}
-			helperText={error ?? helpText ?? ""}
-			disabled={readOnly}
-		/>
-	);
-}
-
-export function CheckboxInput({
-	label,
-	checked,
-	setChecked,
-	helpText,
-	readOnly,
-}: Readonly<{
-	label: string;
-	checked: boolean;
-	setChecked: (v: boolean) => void;
-	helpText?: string | null;
-	readOnly?: boolean;
-}>) {
-	return (
-		<Box>
-			<FormControlLabel
-				control={
-					<Checkbox
-						checked={checked}
-						onChange={(e) => setChecked(e.target.checked)}
-					/>
-				}
-				label={label}
-				disabled={readOnly}
-			/>
-			{helpText ? (
-				<FormHelperText sx={{ mt: -1.5, mb: 1 }}>{helpText}</FormHelperText>
-			) : null}
-		</Box>
-	);
-}
-
-function toStringArray(value: unknown): string[] {
-	if (value == null) return [];
-
-	// Already an array: coerce each item to string
-	if (Array.isArray(value)) return value.map(String);
-
-	// String: try JSON-parse; if it isn't a JSON array, treat as a single option
-	if (typeof value === "string") {
-		try {
-			const parsed = JSON.parse(value);
-			return Array.isArray(parsed) ? parsed.map(String) : [value];
-		} catch {
-			return [value];
-		}
-	}
-
-	// Plain object: use its values as the option labels/values
-	if (typeof value === "object") {
-		return Object.values(value as Record<string, unknown>).map(String);
-	}
-
-	// Everything else → no options
-	return [];
-}
-
-function getSelectorOptionsFromInput(input: ProcessTemplateInput): string[] {
-	const schemaWithOptions =
-		input?.schemas?.find(
-			(s: ProcessTemplateInputSchema | null) => s?.inputType === "selector",
-		) ?? input?.schemas?.[0];
-
-	return toStringArray(schemaWithOptions?.options);
-}
-
-export function SelectorInput({
-	fieldName,
-	label,
-	value,
-	setValue,
-	helpText,
-	error,
-	options,
-	insideTable = false,
-	minWidth,
-	readOnly,
-}: Readonly<{
-	fieldName: string;
-	label: string;
-	value: string;
-	setValue: (v: string | null) => void;
-	helpText?: string | null;
-	error?: string | null;
-	options?: string[];
-	insideTable?: boolean;
-	minWidth?: number;
-	readOnly?: boolean;
-}>) {
-	const opts = options ?? [];
-	const allowFreeText = opts.length === 0;
-	const id = `selector-${fieldName}`;
-
-	if (readOnly)
-		return renderReadOnlyText(insideTable ? undefined : label, value);
-
-	return (
-		<Box
-			sx={{
-				minWidth: minWidth ?? (insideTable ? 220 : undefined),
-				width: "100%",
-			}}
-		>
-			<Autocomplete
-				id={id}
-				disablePortal={insideTable}
-				disableClearable
-				options={opts}
-				freeSolo={allowFreeText}
-				value={value ?? ""}
-				onChange={(_e, val) => setValue((val as string | null) ?? "")}
-				onInputChange={(_e, val) => setValue(val)}
-				disabled={readOnly}
-				renderInput={(params) => (
-					<TextField
-						{...params}
-						size={insideTable ? "small" : "medium"}
-						label={label}
-						name={fieldName}
-						error={Boolean(error)}
-						helperText={error ?? helpText ?? ""}
-						fullWidth
-						disabled={readOnly}
-					/>
-				)}
-			/>
-		</Box>
-	);
-}
-
-function SearchInputWrapper({
-	fieldName,
-	inputType,
-	label,
-	value,
-	setValue,
-	placeholder,
-	helpText,
-	error,
-	queryName,
-	handleFieldChange,
-	clearTemplateFields,
-	readOnly,
-	isEditMode,
-	isCreateMode,
-	setFieldsDisabled,
-	templateId,
-	disabledFields,
-	templateConfig,
-}: Readonly<{
-	fieldName?: string;
-	inputType: "multi-text-search" | "text-search" | "text-unique-identifier";
-	label: string;
-	value: string | string[] | null;
-	setValue:
-		| ((v: string | string[] | boolean | null, fieldName?: string) => void)
-		| ((v: string | string[] | boolean | null) => void);
-	placeholder?: string | null;
-	helpText?: string | null;
-	error?: string | null;
-	queryName: TemplateInputSearchQueryKey;
-	handleFieldChange: (
-		templateId: string,
-		fieldName: string,
-		value: FieldValue,
-	) => void;
-	clearTemplateFields?: (templateId: string) => void;
-	readOnly?: boolean;
-	sharedCountCallBack?: (count: number) => void;
-	isEditMode?: boolean;
-	isCreateMode?: boolean;
-	setFieldsDisabled?: (
-		templateId: string,
-		fieldNames: string[],
-		disabled: boolean,
-	) => void;
-	templateId?: string;
-	disabledFields?: Set<string>;
-	templateConfig?: string;
-}>) {
-	const searchParams = useSearchParams();
-
-	const [searchText, setSearchText] = React.useState<string>("");
-	const [options, setOptions] = React.useState<SearchOption[]>([]);
-
-	const { data } = templateInputSearch.useData(
-		inputType === "text-unique-identifier"
-			? {
-					uniqueIdentifier: searchText,
-				}
-			: {
-					input: {
-						processTemplateId: searchParams.get("template")?.toString() ?? null,
-						searchText: searchText,
-					},
-				},
-		queryName,
-	);
-
-	React.useEffect(() => {
-		if (data) {
-			switch (queryName) {
-				case "getSourceEndpoints": {
-					const typedData = data as GetSourceEndpointsQuery;
-					setOptions(
-						typedData.getSourceEndpoints?.map((e) => ({
-							name: e?.name ?? "",
-							templateConfig: e?.templateConfig ?? "",
-						})) ?? [],
-					);
-					break;
-				}
-				case "checkUniqueIdentifier": {
-					const typedData = data as CheckUniqueIdentifierQuery;
-					setValue(
-						(typedData.checkUniqueIdentifier?.isUnique ?? null) as
-							| string
-							| string[]
-							| boolean
-							| null,
-						"isUnique",
-					);
-					break;
-				}
-			}
-		}
-	}, [data]);
-
-	if (readOnly) {
-		return renderReadOnlyText(label, value);
-	}
-
-	return (
-		<>
-			{inputType === "multi-text-search" && (
-				<Box sx={{ display: "flex", gap: "10px" }}>
-					<MultiTextSearchInput
-						label={label}
-						value={value as string[]}
-						setValue={setValue as (v: string[]) => void}
-						options={options}
-						placeholder={placeholder}
-						helpText={helpText}
-						error={error}
-						setSearchText={setSearchText}
-						readOnly={readOnly}
-					/>
-				</Box>
-			)}
-
-			{inputType === "text-search" && (
-				<Box sx={{ display: "flex", gap: "10px" }}>
-					<TextSearchInput
-						fieldName={fieldName}
-						label={label}
-						value={value as string}
-						setValue={
-							setValue as (v: string | string[] | boolean | null) => void
-						}
-						options={options}
-						placeholder={placeholder}
-						helpText={helpText}
-						error={error}
-						setSearchText={setSearchText}
-						handleFieldChange={handleFieldChange}
-						clearTemplateFields={clearTemplateFields}
-						readOnly={readOnly}
-						setFieldsDisabled={setFieldsDisabled}
-						templateId={templateId}
-						disabledFields={disabledFields}
-						isEditMode={isEditMode}
-						templateConfig={templateConfig}
-					/>
-				</Box>
-			)}
-
-			{inputType === "text-unique-identifier" && (
-				<Box sx={{ display: "flex", gap: "10px" }}>
-					<TextSearchInput
-						fieldName={fieldName}
-						label={label}
-						value={value as string}
-						setValue={
-							setValue as (v: string | string[] | boolean | null) => void
-						}
-						options={[]}
-						placeholder={placeholder}
-						helpText={helpText}
-						error={error}
-						setSearchText={setSearchText}
-						handleFieldChange={handleFieldChange}
-						clearTemplateFields={clearTemplateFields}
-						readOnly={isCreateMode === false || readOnly}
-						setFieldsDisabled={setFieldsDisabled}
-						templateId={templateId}
-						disabledFields={disabledFields}
-						isEditMode={isEditMode}
-						templateConfig={templateConfig}
-					/>
-				</Box>
-			)}
-		</>
-	);
-}
-
-export function applyTemplateConfig(
-	selectedOption: SearchOption,
-	handleFieldChange: (
-		templateId: string,
-		fieldName: string,
-		value: FieldValue,
-	) => void,
-) {
-	const merge: ProcessConfigMerge = { input: { config: [] } };
-	try {
-		merge.input = { config: [JSON.parse(selectedOption.templateConfig)] };
-
-		if (merge.input.config.length > 0) {
-			const config = merge.input.config[0];
-			const processTemplateId = config.processTemplateId;
-			for (const key of Object.keys(config)) {
-				handleFieldChange(processTemplateId as string, key, config[key]);
-			}
-		}
-	} catch {
-		console.error(
-			`Failed to apply template config for ${selectedOption.name}. Skipping...`,
-		);
-	}
-}
-
-export function TextSearchInput({
-	fieldName,
-	label,
-	value,
-	setValue,
-	options,
-	placeholder,
-	helpText,
-	error,
-	setSearchText,
-	handleFieldChange,
-	clearTemplateFields,
-	readOnly,
-	setFieldsDisabled,
-	templateId,
-	disabledFields,
-	isEditMode,
-	templateConfig,
-}: Readonly<{
-	fieldName?: string;
-	label: string;
-	value: string;
-	setValue: (v: string | string[] | boolean | null) => void;
-	options: SearchOption[];
-	placeholder?: string | null;
-	helpText?: string | null;
-	error?: string | null;
-	setSearchText: React.Dispatch<React.SetStateAction<string>>;
-	handleFieldChange: (
-		templateId: string,
-		fieldName: string,
-		value: FieldValue,
-	) => void;
-	clearTemplateFields?: (templateId: string) => void;
-	readOnly?: boolean;
-	setFieldsDisabled?: (
-		templateId: string,
-		fieldNames: string[],
-		disabled: boolean,
-	) => void;
-	templateId?: string;
-	disabledFields?: Set<string>;
-	isEditMode?: boolean;
-	templateConfig?: string;
-}>) {
-	const searchParams = useSearchParams();
-	const [selected, setSelected] = React.useState<string | null>(value ?? null);
-
-	// remember which option was actually applied so we can reliably re-enable later
-	const appliedOptionRef = React.useRef<string | null>(null);
-
-	// disabledFields + readOnly
-	const selfKey =
-		templateId && fieldName ? templateFieldKey(templateId, fieldName) : null;
-	const isSelfDisabled = selfKey
-		? Boolean(disabledFields?.has(selfKey))
-		: false;
-	const disabled = Boolean(readOnly || isSelfDisabled);
-
-	const debouncedSetSearchText = React.useMemo(
-		() => debounce((s: string) => setSearchText(s), 500),
-		[],
-	);
-	React.useEffect(() => {
-		// Cleanup function to cancel any pending debounced calls
-		return () => {
-			debouncedSetSearchText.cancel();
-		};
-	}, [debouncedSetSearchText]);
-
-	React.useEffect(() => {
-		if (selected && templateId) {
-			const option = options.find((o) => o?.name === selected);
-			if (option) {
-				try {
-					const config = JSON.parse(option.templateConfig);
-
-					if (
-						config &&
-						templateConfig //&&
-						//config.dataDescription === inputConfig.dataDescription
-					) {
-						option.templateConfig = templateConfig;
-					}
-
-					// Always apply config (both edit and non-edit modes)
-					applyTemplateConfig(option, handleFieldChange);
-					appliedOptionRef.current = option.name ?? null;
-
-					// Only disable fields when NOT in edit mode
-					if (setFieldsDisabled && !isEditMode) {
-						const config = JSON.parse(option.templateConfig);
-						const fieldNamesToDisable = Object.keys(config).filter(
-							(key) => key !== "processTemplateId" && key !== (fieldName ?? ""),
-						);
-						setFieldsDisabled(templateId, fieldNamesToDisable, true);
-					}
-				} catch (err) {
-					console.error("Failed to parse template config", err);
-				}
-			}
-		}
-	}, [
-		selected,
-		templateId,
-		options,
-		setFieldsDisabled,
-		handleFieldChange,
-		isEditMode,
-	]);
-
-	const handleAutocompleteOnChange = (
-		event: React.SyntheticEvent,
-		value: string | null,
-		reason: AutocompleteChangeReason,
-	) => {
-		if (reason === "clear" && event.type === "click") {
-			setSelected(null);
-			// Re-enable all fields when cleared
-			if (templateId && setFieldsDisabled) {
-				const appliedName = appliedOptionRef.current;
-				if (appliedName) {
-					const option = options.find((o) => o?.name === appliedName);
-					if (option) {
-						try {
-							const config = JSON.parse(option.templateConfig);
-							// exclude the search field itself when re-enabling (it was never disabled)
-							const fieldNamesToEnable = Object.keys(config).filter(
-								(key) =>
-									key !== "processTemplateId" && key !== (fieldName ?? ""),
-							);
-							setFieldsDisabled(templateId, fieldNamesToEnable, false);
-						} catch (err) {
-							console.error("Failed to parse template config", err);
-						} finally {
-							appliedOptionRef.current = null;
-						}
-					}
-				}
-			}
-			const templateIdFromParams = searchParams.get("template");
-			if (clearTemplateFields && templateIdFromParams) {
-				clearTemplateFields(templateIdFromParams);
-			}
-		} else {
-			setSelected(value);
-		}
-	};
-
-	const handleInputChange = (
-		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) => {
-		const newVal = event.target.value;
-		setValue(newVal);
-		debouncedSetSearchText(newVal);
-
-		if (newVal.trim() === "" && templateId && setFieldsDisabled) {
-			const appliedName = appliedOptionRef.current;
-			if (appliedName) {
-				const option = options.find((o) => o?.name === appliedName);
-				if (option) {
-					try {
-						const config = JSON.parse(option.templateConfig);
-						const fieldNamesToEnable = Object.keys(config).filter(
-							(key) => key !== "processTemplateId" && key !== (fieldName ?? ""),
-						);
-						setFieldsDisabled(templateId, fieldNamesToEnable, false);
-					} catch (err) {
-						console.error(
-							"Failed to parse template config while enabling fields",
-							err,
-						);
-					} finally {
-						appliedOptionRef.current = null;
-					}
-				}
-			}
-
-			if (clearTemplateFields) {
-				clearTemplateFields(templateId);
-			}
-		}
-	};
-
-	const shouldShowInfoMessage = !isEditMode && selected;
-	const helperTextFinal = shouldShowInfoMessage
-		? "Existing data descriptions are not editable during creation."
-		: helpText;
-
-	return (
-		<Box>
-			<Autocomplete
-				freeSolo={!selected}
-				options={options.map((o) => o.name)}
-				value={selected ?? ""}
-				onChange={handleAutocompleteOnChange}
-				disabled={disabled}
-				renderInput={(params) => (
-					<TextField
-						{...params}
-						label={label}
-						value={value ?? ""}
-						onChange={handleInputChange}
-						placeholder={placeholder ?? undefined}
-						fullWidth
-						error={Boolean(error)}
-						helperText={error ?? helperTextFinal ?? ""}
-						disabled={disabled}
-					/>
-				)}
-			/>
-		</Box>
-	);
-}
-
-export function MultiTextSearchInput({
-	label,
-	value,
-	setValue,
-	options,
-	placeholder,
-	helpText,
-	error,
-	setSearchText,
-	readOnly,
-}: Readonly<{
-	label: string;
-	value: string[];
-	setValue: (v: string[]) => void;
-	options: SearchOption[];
-	placeholder?: string | null;
-	helpText?: string | null;
-	error?: string | null;
-	setSearchText: React.Dispatch<React.SetStateAction<string>>;
-	readOnly?: boolean;
-}>) {
-	const [input, setInput] = React.useState<string>("");
-
-	const debouncedSetSearchText = React.useMemo(
-		() => debounce((s: string) => setSearchText(s), 500),
-		[],
-	);
-
-	React.useEffect(() => {
-		// Cleanup function to cancel any pending debounced calls
-		return () => {
-			debouncedSetSearchText.cancel();
-		};
-	}, [debouncedSetSearchText]);
-
-	const handleAutocompleteOnChange = (
-		_e: React.SyntheticEvent,
-		val: string[],
-	) => {
-		setValue(val);
-		debouncedSetSearchText("");
-	};
-
-	const handleInputChange = (
-		event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>,
-	) => {
-		setInput(event.target.value);
-		debouncedSetSearchText(event.target.value);
-	};
-
-	return (
-		<Autocomplete
-			multiple
-			freeSolo
-			options={options.map((o) => o.name)}
-			value={value ?? []}
-			onChange={handleAutocompleteOnChange}
-			disabled={readOnly}
-			renderInput={(params) => (
-				<TextField
-					{...params}
-					value={input}
-					onChange={handleInputChange}
-					label={label}
-					placeholder={placeholder ?? undefined}
-					error={Boolean(error)}
-					helperText={error ?? helpText ?? ""}
-					fullWidth
-					disabled={readOnly}
-				/>
-			)}
-		/>
-	);
-}
-
-export function InputTable({
-	rows,
-	setRows,
-	schemas,
-	tableError,
-	readOnly,
-}: Readonly<{
-	rows: Array<Record<string, any>>;
-	setRows: (rows: Array<Record<string, any>>) => void;
-	schemas: ProcessTemplateInputSchema[];
-	tableError: string | null;
-	readOnly?: boolean;
-}>) {
-	const ordered = React.useMemo(
-		() => sortBy<ProcessTemplateInputSchema>(schemas),
-		[schemas],
-	);
-	const addRow = () => {
-		const empty: Record<string, any> = {};
-		for (const s of ordered) {
-			const key = s.fieldKey ?? s.label ?? "";
-			empty[key] =
-				s.inputType === "checkbox" ? false : ((s.defaultValue as any) ?? "");
-		}
-		setRows([...(rows ?? []), empty]);
-	};
-
-	const delRow = (idx: number) => {
-		const copy = [...rows];
-		copy.splice(idx, 1);
-		setRows(copy);
-	};
-
-	const updateCell = (idx: number, columnKey: string, value: any) => {
-		const copy = [...rows];
-		copy[idx] = { ...copy[idx], [columnKey]: value };
-		setRows(copy);
-	};
-
-	return (
-		<>
-			{readOnly && rows.length === 0 && (
-				<Box>
-					<Typography>No values</Typography>
-				</Box>
-			)}
-			{(!readOnly || (readOnly && rows.length > 0)) && (
-				<Card
-					variant="outlined"
-					sx={{ mb: 1, borderColor: tableError ? "error.main" : "grey.400" }}
-				>
-					<CardContent>
-						<Table size="small">
-							<TableHead>
-								<TableRow>
-									{ordered.map((s: ProcessTemplateInputSchema) => (
-										<TableCell key={s.id}>{s.label}</TableCell>
-									))}
-									<TableCell width={1} />
-								</TableRow>
-							</TableHead>
-							<TableBody>
-								{(rows ?? []).map((r: Record<string, any>, i: number) => (
-									<TableRow key={`table-row-${i + 1}`}>
-										{ordered.map((s: ProcessTemplateInputSchema) => {
-											const columnKey = s.fieldKey ?? s.label;
-											const cell = columnKey ? r[columnKey] : "";
-											if (s.inputType === "checkbox") {
-												return (
-													<TableCell key={s.id}>
-														<Checkbox
-															checked={Boolean(cell)}
-															onChange={(e) =>
-																updateCell(i, columnKey ?? "", e.target.checked)
-															}
-															disabled={readOnly}
-														/>
-													</TableCell>
-												);
-											}
-											if (s.inputType === "selector") {
-												const columnKey = s.fieldKey ?? s.label;
-												const cell = columnKey ? r[columnKey] : "";
-												const opts = toStringArray(s.options);
-
-												return (
-													<TableCell key={s.id}>
-														<SelectorInput
-															insideTable={true}
-															minWidth={120}
-															fieldName={columnKey ?? ""}
-															label={s.label ?? ""}
-															value={cell}
-															options={opts}
-															setValue={(v) =>
-																updateCell(i, columnKey ?? "", v)
-															}
-															readOnly={readOnly}
-														/>
-													</TableCell>
-												);
-											}
-											return (
-												<TableCell key={s.id}>
-													{readOnly ? (
-														renderReadOnlyText(undefined, cell)
-													) : (
-														<TextField
-															size="small"
-															value={cell}
-															onChange={(e) =>
-																updateCell(i, columnKey ?? "", e.target.value)
-															}
-															fullWidth
-															disabled={readOnly}
-														/>
-													)}
-												</TableCell>
-											);
-										})}
-										<TableCell>
-											{!readOnly && (
-												<IconButton
-													onClick={() => delRow(i)}
-													size="small"
-													disabled={readOnly}
-												>
-													<DeleteIcon fontSize="small" />
-												</IconButton>
-											)}
-										</TableCell>
-									</TableRow>
-								))}
-								{!readOnly && (
-									<TableRow>
-										<TableCell colSpan={ordered.length + 1}>
-											<Button
-												onClick={addRow}
-												startIcon={<AddIcon />}
-												variant="outlined"
-												size="small"
-												disabled={readOnly}
-											>
-												Add row
-											</Button>
-										</TableCell>
-									</TableRow>
-								)}
-							</TableBody>
-						</Table>
-					</CardContent>
-				</Card>
-			)}
-		</>
-	);
-}
-
-function renderFormControl({
-	input,
-	templateId,
-	values,
-	errors,
-	handleFieldChange,
-	clearTemplateFields,
-	readOnly,
-	sharedCount,
-	isEditMode,
-	isCreateMode,
-	disabledFields,
-	setFieldsDisabled,
-	templateConfig,
-}: Readonly<{
-	input: ProcessTemplateInput;
-	templateId: string;
-	values: FormState;
-	errors: ErrorState;
-	handleFieldChange: (
-		templateId: string,
-		fieldName: string,
-		value: FieldValue,
-	) => void;
-	clearTemplateFields: (templateId: string) => void;
-	readOnly?: boolean;
-	sharedCount?: (count: number) => void;
-	isEditMode?: boolean;
-	isCreateMode?: boolean;
-	disabledFields?: Set<string>;
-	setFieldsDisabled?: (
-		templateId: string,
-		fieldNames: string[],
-		disabled: boolean,
-	) => void;
-	templateConfig?: string;
-}>) {
-	const k = templateFieldKey(templateId, input.fieldName ?? "");
-	const err = errors[k] ?? null;
-	const isFieldDisabled = disabledFields?.has(k) ?? false;
-	const finalReadOnly = readOnly || isFieldDisabled;
-
-	if (
-		input.inputType === "hidden" ||
-		input.inputType === "hidden-number" ||
-		input.inputType === "hidden-number-or-null"
-	) {
-		return null;
-	}
-
-	if (input.inputType === "checkbox") {
-		return (
-			<CheckboxInput
-				label={input.label ?? ""}
-				checked={Boolean(values[k] ?? false)}
-				setChecked={(v) =>
-					handleFieldChange(templateId, input.fieldName ?? "", v)
-				}
-				helpText={input.helpText ?? ""}
-				readOnly={finalReadOnly}
-			/>
-		);
-	}
-
-	if (input.inputType === "number") {
-		return (
-			<NumberInput
-				label={input.label ?? ""}
-				value={(values[k] as number) ?? ""}
-				setValue={(v) =>
-					handleFieldChange(templateId, input.fieldName ?? "", v as any)
-				}
-				placeholder={input.placeholder ?? ""}
-				helpText={input.helpText ?? ""}
-				error={err}
-				readOnly={finalReadOnly}
-			/>
-		);
-	}
-
-	if (input.inputType === "selector") {
-		return (
-			<SelectorInput
-				fieldName={input.fieldName ?? ""}
-				label={input.label ?? ""}
-				value={(values[k] as string) ?? ""}
-				setValue={(v) =>
-					handleFieldChange(templateId, input.fieldName ?? "", v)
-				}
-				helpText={input.helpText ?? ""}
-				error={err}
-				options={getSelectorOptionsFromInput(input)}
-				readOnly={finalReadOnly}
-			/>
-		);
-	}
-
-	if (input.inputType === "multi-text-search") {
-		const queryName = parseQueryName(input.queryName ?? "");
-		return (
-			<SearchInputWrapper
-				inputType="multi-text-search"
-				queryName={queryName}
-				label={input.label ?? ""}
-				value={(values[k] as string[]) ?? []}
-				setValue={(v: string | string[] | boolean | null) =>
-					handleFieldChange(templateId, input.fieldName ?? "", v)
-				}
-				placeholder={input.placeholder ?? ""}
-				helpText={input.helpText ?? ""}
-				error={err}
-				handleFieldChange={handleFieldChange}
-				readOnly={readOnly}
-				sharedCountCallBack={(count) => sharedCount?.(count)}
-				isEditMode={isEditMode}
-				setFieldsDisabled={setFieldsDisabled}
-				templateId={templateId}
-				disabledFields={disabledFields}
-				fieldName={input.fieldName ?? ""}
-				templateConfig={templateConfig}
-			/>
-		);
-	}
-
-	if (input.inputType === "text-search") {
-		const queryName = parseQueryName(input.queryName ?? "");
-		return (
-			<SearchInputWrapper
-				inputType="text-search"
-				queryName={queryName}
-				label={input.label ?? ""}
-				value={(values[k] as string) ?? ""}
-				setValue={(v: string | string[] | boolean | null) =>
-					handleFieldChange(templateId, input.fieldName ?? "", v)
-				}
-				placeholder={input.placeholder ?? ""}
-				helpText={input.helpText ?? ""}
-				error={err}
-				handleFieldChange={handleFieldChange}
-				clearTemplateFields={clearTemplateFields}
-				readOnly={readOnly}
-				sharedCountCallBack={(count) => sharedCount?.(count)}
-				isEditMode={isEditMode}
-				setFieldsDisabled={setFieldsDisabled}
-				templateId={templateId}
-				disabledFields={disabledFields}
-				fieldName={input.fieldName ?? ""}
-				templateConfig={templateConfig}
-			/>
-		);
-	}
-
-	if (input.inputType === "text-unique-identifier") {
-		const queryName = parseQueryName(input.queryName ?? "");
-		return (
-			<SearchInputWrapper
-				inputType="text-unique-identifier"
-				queryName={queryName}
-				label={input.label ?? ""}
-				value={(values[k] as string) ?? ""}
-				setValue={(
-					v: string | string[] | boolean | null,
-					fieldName?: string,
-				) => {
-					if (fieldName) {
-						handleFieldChange(templateId, fieldName, v);
-					} else {
-						handleFieldChange(templateId, input.fieldName ?? "", v);
-					}
-				}}
-				placeholder={input.placeholder ?? ""}
-				helpText={input.helpText ?? ""}
-				error={err}
-				handleFieldChange={handleFieldChange}
-				clearTemplateFields={clearTemplateFields}
-				readOnly={readOnly}
-				sharedCountCallBack={(count) => sharedCount?.(count)}
-				isEditMode={isEditMode}
-				isCreateMode={isCreateMode}
-				setFieldsDisabled={setFieldsDisabled}
-				templateId={templateId}
-				disabledFields={disabledFields}
-				fieldName={input.fieldName ?? ""}
-				templateConfig={templateConfig}
-			/>
-		);
-	}
-
-	if (input.inputType === "input-table") {
-		const value = values[k];
-		const rows = (Array.isArray(value) ? value : []) as Array<
-			Record<string, unknown>
-		>;
-
-		// Specifically for "properties" key in values. Need to convert to array. Might need to consider a less specific solution
-		if (value && rows.length === 0 && input.schemas?.length === 2) {
-			for (const schemaKey of Object.keys(value)) {
-				if (input.schemas[0]?.fieldKey && input.schemas[1]?.fieldKey) {
-					const row: Record<string, unknown> = {};
-					row[input.schemas[0].fieldKey] = schemaKey;
-					row[input.schemas[1].fieldKey] = (value as Record<string, string>)[
-						schemaKey
-					];
-					rows.push(row);
-				}
-			}
-		}
-
-		return (
-			<Box>
-				<Typography
-					variant="subtitle2"
-					sx={{ mb: 1, color: err ? "error.main" : "main.900" }}
-				>
-					{input.label}
-				</Typography>
-				<InputTable
-					rows={rows}
-					setRows={(rows) =>
-						handleFieldChange(templateId, input.fieldName ?? "", rows)
-					}
-					schemas={(input.schemas as ProcessTemplateInputSchema[]) ?? []}
-					tableError={err}
-					readOnly={finalReadOnly}
-				/>
-				{!readOnly && input.helpText && !err ? (
-					<FormHelperText sx={{ my: 1, ml: 2 }}>
-						{input.helpText ?? ""}
-					</FormHelperText>
-				) : null}
-				{err ? (
-					<FormHelperText
-						error
-						sx={{ my: 1, ml: 2, whiteSpace: "pre-wrap", fontFamily: "inherit" }}
-					>
-						{String(err)}
-					</FormHelperText>
-				) : null}
-			</Box>
-		);
-	}
-
-	return (
-		<TextInput
-			label={input.label ?? ""}
-			value={(values[k] as string) ?? ""}
-			setValue={(v) => handleFieldChange(templateId, input.fieldName ?? "", v)}
-			placeholder={input.placeholder ?? ""}
-			helpText={input.helpText ?? ""}
-			error={err}
-			readOnly={finalReadOnly}
-		/>
-	);
-}
-
-function arrangeInputs(inputs: ProcessTemplateInput[]): InputRow[] {
-	const ordered = sortBy(inputs);
-
-	const isTableOrHidden = (inp: ProcessTemplateInput) =>
-		inp.inputType === "input-table" || inp.inputType?.startsWith("hidden");
-
-	const isPairable = (inp?: ProcessTemplateInput) =>
-		!!inp && !isTableOrHidden(inp);
-
-	const areConsecutiveSorts = (
-		a?: ProcessTemplateInput,
-		b?: ProcessTemplateInput,
-	) =>
-		!!a &&
-		!!b &&
-		typeof a.sort === "number" &&
-		typeof b.sort === "number" &&
-		b.sort === a.sort + 1;
-
-	const canPairAtAll = ordered.filter(isPairable).length >= 2;
-
-	const rows: InputRow[] = [];
-	for (let i = 0; i < ordered.length; ) {
-		const curr = ordered[i];
-
-		if (!isPairable(curr) || !canPairAtAll) {
-			rows.push({ type: "full", item: curr });
-			i += 1;
-			continue;
-		}
-
-		const next = ordered[i + 1];
-		if (isPairable(next) && areConsecutiveSorts(curr, next)) {
-			rows.push({ type: "pair", items: [curr, next!] });
-			i += 2;
-		} else {
-			rows.push({ type: "full", item: curr });
-			i += 1;
-		}
-	}
-
-	return rows;
-}
-
-export default function PageBody({
-	templateId,
-	page,
-	values,
-	errors,
-	handleFieldChange,
-	clearTemplateFields,
-	readOnly,
-	sharedCount,
-	isEditMode,
-	isCreateMode,
-	disabledFields,
-	setFieldsDisabled,
-	templateConfig,
-}: Readonly<{
-	templateId: string;
-	page: ProcessTemplatePage;
-	values: FormState;
-	errors: ErrorState;
-	handleFieldChange: (
-		templateId: string,
-		fieldName: string,
-		value: FieldValue,
-	) => void;
-	clearTemplateFields: (templateId: string) => void;
-	readOnly?: boolean;
-	isEditMode?: boolean;
-	isCreateMode?: boolean;
-	sharedCount?: (count: number) => void;
-	disabledFields?: Set<string>;
-	setFieldsDisabled?: (
-		templateId: string,
-		fieldNames: string[],
-		disabled: boolean,
-	) => void;
-	templateConfig?: string;
-}>) {
-	React.useEffect(
-		function ensureHiddenDefaults() {
-			const hiddenInputs = page.inputs?.filter(
-				(i: ProcessTemplateInput | null) =>
-					i?.inputType === "hidden" ||
-					i?.inputType === "hidden-number" ||
-					i?.inputType === "hidden-number-or-null",
-			);
-
-			if (hiddenInputs) {
-				for (const input of hiddenInputs) {
-					const key = templateFieldKey(templateId, input?.fieldName ?? "");
-					if (values[key] != null) continue;
-
-					switch (input?.fieldName) {
-						case "processTemplateId":
-							handleFieldChange(
-								templateId,
-								input.fieldName ?? "",
-								Number(templateId),
-							);
-							break;
-						default:
-							handleFieldChange(
-								templateId,
-								input?.fieldName ?? "",
-								input?.inputType === "hidden-number"
-									? (0 as FieldValue)
-									: input?.inputType === "hidden-number-or-null"
-										? null
-										: ("" as FieldValue),
-							);
-							break;
-					}
-				}
-			}
-		},
-		[templateId, page.id, page.inputs, values, handleFieldChange],
-	);
-
-	const arrangedInputs = React.useMemo(
-		() => arrangeInputs(page.inputs as ProcessTemplateInput[]),
-		[page.inputs],
-	);
-
-	return (
-		<Box sx={{ display: "grid", rowGap: 3 }}>
-			{arrangedInputs.map((ai: InputRow, idx: number) => {
-				if (ai.type === "full") {
-					return (
-						<Box key={`full-${idx + 1}`} sx={{ width: "100%" }}>
-							{renderFormControl({
-								input: ai.item,
-								templateId,
-								values,
-								errors,
-								handleFieldChange,
-								clearTemplateFields,
-								readOnly,
-								sharedCount,
-								isEditMode,
-								isCreateMode,
-								disabledFields,
-								setFieldsDisabled,
-								templateConfig,
-							})}
-						</Box>
-					);
-				}
-
-				const [i, j] = ai.items;
-				return (
-					<Box
-						key={`pair-${idx + 1}`}
-						sx={{
-							display: "grid",
-							gridTemplateColumns: { xs: "1fr", md: "1fr 1fr" },
-							columnGap: 3,
-							rowGap: 3,
-							width: "100%",
-						}}
-					>
-						<Box>
-							{renderFormControl({
-								input: i,
-								templateId,
-								values,
-								errors,
-								handleFieldChange,
-								clearTemplateFields,
-								readOnly,
-								sharedCount,
-								isEditMode,
-								isCreateMode,
-								disabledFields,
-								setFieldsDisabled,
-								templateConfig,
-							})}
-						</Box>
-						<Box>
-							{renderFormControl({
-								input: j,
-								templateId,
-								values,
-								errors,
-								handleFieldChange,
-								clearTemplateFields,
-								readOnly,
-								sharedCount,
-								isEditMode,
-								isCreateMode,
-								disabledFields,
-								setFieldsDisabled,
-								templateConfig,
-							})}
-						</Box>
-					</Box>
-				);
-			})}
-		</Box>
-	);
-}
-
-const parseQueryName = (queryName: string) => {
-	let result: TemplateInputSearchQueryKey | null = null;
-	const indexOf = queryName.indexOf("(");
-	const qn = queryName.substring(0, indexOf < 0 ? undefined : indexOf);
-
-	if (isTemplateInputSearchQueryKey(qn)) {
-		result = qn as TemplateInputSearchQueryKey;
-		return result;
-	}
-
-	throw new Error(`queryName ${queryName} invalid`);
-};
-
-const renderReadOnlyText = (
-	label?: string,
-	value?: string | string[] | number | null,
-) => {
-	return (
-		<>
-			{value && (
-				<Box>
-					{label && (
-						<Typography color="grey" variant="caption">
-							{label}
-						</Typography>
-					)}
-					<Typography color="inherit" variant="body1">
-						{Array.isArray(value) ? (value as string[]).join(", ") : value}
-					</Typography>
-				</Box>
-			)}
-		</>
-	);
-};