feat(cms): add recovery history and operational reliability tools

src/components/admin/form-feedback.tsx

@@ -0,0 +1,32 @@
+"use client";
+import { type RefObject, useEffect } from "react";
+export function useFormErrorFocus(
+	form: RefObject<HTMLFormElement | null>,
+	errors: Record<string, string[]>,
+	pending: boolean,
+) {
+	useEffect(() => {
+		if (pending) return;
+		for (const field of Object.keys(errors)) {
+			const control = form.current?.elements.namedItem(field);
+			if (control instanceof HTMLElement && !control.hasAttribute("disabled")) {
+				control.focus();
+				break;
+			}
+		}
+	}, [form, errors, pending]);
+}
+export function FormFieldError({
+	name,
+	errors,
+}: {
+	name: string;
+	errors: Record<string, string[]>;
+}) {
+	const messages = errors[name];
+	return messages?.length ? (
+		<p id={`error-${name}`} role="alert" className="text-sm text-destructive">
+			{messages.join(" · ")}
+		</p>
+	) : null;
+}