Wire real CiviCRM DEV custom fields and dynamic option fetching

components/fields/FieldRenderer.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { FieldConfig } from "@/types/form";
+import type { FieldConfig, SelectOption } from "@/types/form";
 import type { UseFormRegister, FieldValues, FieldErrors } from "react-hook-form";
 
 interface FieldRendererProps {
@@ -9,6 +9,12 @@ interface FieldRendererProps {
   errors: FieldErrors;
   /** For readonly display fields, the value to render. */
   readonlyValue?: unknown;
+  /**
+   * Options resolved at runtime (from /api/data). When `field.optionGroupId`
+   * is set, look up options here first; fall back to the field's hard-coded
+   * `options` array if absent.
+   */
+  resolvedOptions?: SelectOption[];
 }
 
 /**
@@ -20,12 +26,19 @@ interface FieldRendererProps {
  * `step` and inputMode for mobile keyboards. We keep formatting light — the
  * server is the source of truth for normalization.
  */
-export function FieldRenderer({ field, register, errors, readonlyValue }: FieldRendererProps) {
+export function FieldRenderer({
+  field,
+  register,
+  errors,
+  readonlyValue,
+  resolvedOptions,
+}: FieldRendererProps) {
   const id = `field-${field.name}`;
   const helpId = field.help ? `${id}-help` : undefined;
   const errorId = errors[field.name] ? `${id}-error` : undefined;
   const describedBy = [helpId, errorId].filter(Boolean).join(" ") || undefined;
   const errorMsg = errors[field.name]?.message as string | undefined;
+  const effectiveOptions = resolvedOptions ?? field.options ?? [];
 
   const baseInputClass =
     "w-full rounded-md border border-stone-300 bg-white px-3 py-2 text-stone-900 " +
@@ -36,7 +49,12 @@ export function FieldRenderer({ field, register, errors, readonlyValue }: FieldR
 
   // ── Readonly display field ──────────────────────────────────────────────
   if (field.type === "readonly") {
-    const display = readonlyValue == null || readonlyValue === "" ? "—" : String(readonlyValue);
+    // Look up the human label if this readonly references an option-group field.
+    const opt = effectiveOptions.find((o) => o.value === readonlyValue);
+    const display =
+      readonlyValue == null || readonlyValue === ""
+        ? "—"
+        : opt?.label ?? String(readonlyValue);
     return (
       <div className="space-y-1">
         <Label id={id} field={field} />
@@ -116,7 +134,7 @@ export function FieldRenderer({ field, register, errors, readonlyValue }: FieldR
           <option value="" disabled>
             Select…
           </option>
-          {(field.options ?? []).map((o) => (
+          {effectiveOptions.map((o) => (
             <option key={o.value} value={o.value}>
               {o.label}
             </option>
@@ -128,6 +146,45 @@ export function FieldRenderer({ field, register, errors, readonlyValue }: FieldR
     );
   }
 
+  // ── Multiselect (rendered as a checkbox group) ─────────────────────────
+  if (field.type === "multiselect") {
+    return (
+      <fieldset
+        aria-describedby={describedBy}
+        aria-invalid={errorMsg ? true : undefined}
+        className="space-y-2"
+      >
+        <legend className="block text-sm font-medium text-stone-800">
+          {field.label}
+          {field.required && <RequiredMark />}
+        </legend>
+        <div className="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
+          {effectiveOptions.map((o, idx) => {
+            const optId = `${id}-${idx}`;
+            return (
+              <label
+                key={o.value}
+                htmlFor={optId}
+                className="flex items-start gap-2 rounded border border-stone-200 px-3 py-2 hover:bg-stone-50 cursor-pointer"
+              >
+                <input
+                  id={optId}
+                  type="checkbox"
+                  value={o.value}
+                  {...register(field.name)}
+                  className="mt-0.5 h-4 w-4 rounded border-stone-400 text-leaf-700 focus:ring-2 focus:ring-leaf-500/40"
+                />
+                <span className="text-sm text-stone-800">{o.label}</span>
+              </label>
+            );
+          })}
+        </div>
+        {field.help && <Help id={helpId!}>{field.help}</Help>}
+        {errorMsg && <ErrorText id={errorId!}>{errorMsg}</ErrorText>}
+      </fieldset>
+    );
+  }
+
   // ── File ────────────────────────────────────────────────────────────────
   if (field.type === "file") {
     return (