@isi-ui7/bos7-shared 0.2.3 → 0.2.6

package/src/data-table/proxy.ts

@@ -0,0 +1,73 @@
+// Server-side only. Forwards a DataTable POST /query request to a backend service
+// using a delegated JWT (RFC 8693 token exchange).
+import { NextRequest, NextResponse } from "next/server";
+import { exchangeUserToken } from "../auth7/token-exchange";
+
+export interface ProxyBackendPostOptions {
+  backendUrl: string;
+  path: string;
+  audience: string;
+  accessTokenCookie?: string;
+}
+
+export async function proxyBackendPost(
+  req: NextRequest,
+  opts: ProxyBackendPostOptions,
+): Promise<NextResponse> {
+  const accessToken = req.cookies.get(opts.accessTokenCookie ?? "access_token")?.value;
+  const result = await exchangeUserToken(accessToken ?? "", opts.audience);
+  const body = await req.json();
+  const res = await fetch(`${opts.backendUrl}${opts.path}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${result.accessToken}`,
+    },
+    body: JSON.stringify(body),
+    cache: "no-store",
+  });
+  const data = await res.json();
+  return NextResponse.json(data, { status: res.status });
+}
+
+export interface ProxyQueryRouteOptions extends ProxyBackendPostOptions {
+  /**
+   * Extra column type metadata to merge into the backend response's columnTypes.
+   * Useful when the BFF layer knows additional column types not present in the backend response.
+   * Optional — if omitted, backend response is forwarded as-is.
+   */
+  extraColumnTypes?: Record<string, string>;
+}
+
+/**
+ * Forwards a DataTable POST /query request to a backend Pattern B endpoint.
+ * Semantically identical to proxyBackendPost but signals "this is a query/lookup
+ * endpoint" — used by ServerDataTable and LookupInput interchangeably.
+ *
+ * If extraColumnTypes is provided, merges them into the response's columnTypes field.
+ */
+export async function proxyQueryRoute(
+  req: NextRequest,
+  opts: ProxyQueryRouteOptions,
+): Promise<NextResponse> {
+  if (!opts.extraColumnTypes) {
+    return proxyBackendPost(req, opts);
+  }
+  // Re-implement forward to avoid double body-stream consumption when merging columnTypes.
+  const accessToken = req.cookies.get(opts.accessTokenCookie ?? "access_token")?.value;
+  const result = await exchangeUserToken(accessToken ?? "", opts.audience);
+  const body = await req.json();
+  const res = await fetch(`${opts.backendUrl}${opts.path}`, {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${result.accessToken}`,
+    },
+    body: JSON.stringify(body),
+    cache: "no-store",
+  });
+  const data = await res.json() as Record<string, unknown>;
+  const existing = (data.columnTypes as Record<string, string>) ?? {};
+  data.columnTypes = { ...existing, ...opts.extraColumnTypes };
+  return NextResponse.json(data, { status: res.status });
+}

package/src/form-contract.css

@@ -1,6 +1,29 @@
 /* Form contract — Carbon overrides scoped to .ui7-form-contract
    Token source of truth: UI7_FORM_VISUAL_TOKENS in style-contract.ts */
 
+/* Panel width — desktop-first (matches the rest of this file).
+   The width modifier (one of --width-half / --width-two-thirds / --width-full)
+   is always present on the root — `getUi7FormContractClassName` emits one,
+   defaulting to two-thirds when the consumer omits the option. Base scope
+   sets only the hard ceiling + alignment; modifier sets the width. The
+   breakpoint override at the bottom of the file releases the cap on tablet
+   + mobile (<1056px) so fields can use full width on narrow screens. */
+.ui7-form-contract {
+  max-width: 1200px;
+}
+
+.ui7-form-contract--width-half {
+  width: 50%;
+}
+
+.ui7-form-contract--width-two-thirds {
+  width: 66.6667%;
+}
+
+.ui7-form-contract--width-full {
+  width: 100%;
+}
+
 /* Label: 12px / 500 / 16px */
 .ui7-form-contract .cds--label {
   margin-block-end: 0;
@@ -21,15 +44,54 @@
   line-height: 1.25rem;
 }
 
+/* Control height — keep Select aligned with TextInput / DatePicker per density.
+   Carbon uses logical `block-size` (not `height`) on every input element and
+   resolves it through --cds-layout-size-height-* tokens that the React `size`
+   prop sets on the wrapper. A `height` rule alone loses the cascade because
+   `block-size` is a separate physical→logical property in horizontal writing
+   mode. We do TWO things to win cleanly:
+     1. Redirect Carbon's height tokens at the density-modifier class
+        (see @isi-ui7/corporate-themes globals.scss).
+     2. Set both `block-size` AND `height` here as a safety net, anchored to
+        the same var so density swaps stay in sync across all input flavours.
+   --ui7-form-control-height resolves to 1.75rem (compact) / 2.5rem (comfortable). */
+.ui7-form-contract .cds--text-input,
+.ui7-form-contract .cds--select-input,
+.ui7-form-contract .cds--date-picker__input,
+.ui7-form-contract .cds--number input,
+.ui7-form-contract .cds--combo-box__input,
+.ui7-form-contract .cds--dropdown {
+  block-size: var(--ui7-form-control-height);
+  min-block-size: var(--ui7-form-control-height);
+  max-block-size: var(--ui7-form-control-height);
+  height: var(--ui7-form-control-height);
+  min-height: var(--ui7-form-control-height);
+}
+
 /* Full-width date picker */
 .ui7-form-contract .cds--date-picker,
 .ui7-form-contract .cds--date-picker-container {
   width: 100%;
 }
 
+/* ── Tablet + mobile: release the desktop width cap ─────────────────────── */
+/* Below Carbon's lg breakpoint (1056px), narrow viewports need every
+   available pixel — any desktop width modifier (half / two-thirds / full)
+   would leave fields cramped. Release back to full width here, beating
+   the modifier selectors via specificity (compound) + later declaration. */
+@media (max-width: 1055px) {
+  .ui7-form-contract,
+  .ui7-form-contract.ui7-form-contract--width-half,
+  .ui7-form-contract.ui7-form-contract--width-two-thirds,
+  .ui7-form-contract.ui7-form-contract--width-full {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
 /* ── Mobile: collapse all form panels to single column ───────────────────── */
-/* Desktop-first: multi-column span values set via inline style are overridden
-   below Carbon's md breakpoint (671px). !important required to beat inline style. */
+/* Multi-column span values set via inline style are overridden below Carbon's
+   md breakpoint (671px). !important required to beat inline style. */
 @media (max-width: 671px) {
   .ui7-form-contract .ui7-form-row > .ui7-form-column {
     grid-column: 1 / -1 !important;

package/src/form-numeric.ts

@@ -171,3 +171,19 @@ export const INDONESIA_CURRENCY_CONFIG: CurrencyPrecisionConfig = {
   precisionByCurrency: { IDR: 2, USD: 4 },
   defaultPrecision: 2,
 };
+
+/**
+ * Whole-rupiah currency config — used for ledger-style fields like plafond,
+ * subsidi, agent limit, where the convention in Indonesian retail banking is
+ * to round to whole IDR (no sen). USD/USD-denominated fields still keep 2
+ * decimals (standard cents). Default precision is 0 so any other currency
+ * defaults to whole units in these contexts.
+ *
+ * Use this for "agent plafond / saldo / subsidi" style fields. For amounts
+ * that genuinely need sub-rupiah precision (e.g. percentage-derived fees,
+ * accrued interest), prefer `INDONESIA_CURRENCY_CONFIG` instead.
+ */
+export const INDONESIA_RUPIAH_WHOLE_CONFIG: CurrencyPrecisionConfig = {
+  precisionByCurrency: { IDR: 0, USD: 2 },
+  defaultPrecision: 0,
+};

package/src/form-renderer.tsx

@@ -12,6 +12,7 @@ import {
   Toggle,
 } from "@carbon/react";
 import { LookupInput } from "@isi-ui7/lookup-input";
+import { EditableTable } from "@isi-ui7/editable-table";
 import { useI18n } from "@isi-ui7/i18n";
 import type { Ui7Locale } from "@isi-ui7/i18n";
 import {
@@ -27,7 +28,7 @@ import {
   UI7_FORM_VISUAL_CLASSNAMES,
   UI7_FORM_VISUAL_TOKENS,
 } from "./style-contract";
-import type { Ui7FormDensity } from "./style-contract";
+import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
 
@@ -44,6 +45,8 @@ export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   scopeClassName?: string;
   /** Form layout density. Defaults to "compact". */
   density?: Ui7FormDensity;
+  /** Desktop form-panel width. Defaults to "two-thirds". */
+  width?: Ui7FormWidth;
 };
 
 function clampSpan(span: number | undefined, defaultSpan: number): number {
@@ -80,7 +83,27 @@ function makeDisplayRenderer(
   ): ReactNode {
     if (field.format) return field.format(value as never, data as never);
     if (field.type === "checkbox") return value ? labels.boolYes : labels.boolNo;
-    if (field.type === "toggle") return value ? labels.toggleOn : labels.toggleOff;
+    if (field.type === "toggle") {
+      // valueOn / valueOff override the default boolean truthiness check
+      // for non-boolean stored values (e.g., "Y"/"N").
+      if (field.toggle && field.toggle.valueOn !== undefined) {
+        return value === field.toggle.valueOn ? labels.toggleOn : labels.toggleOff;
+      }
+      return value ? labels.toggleOn : labels.toggleOff;
+    }
+    if (field.type === "lookup") {
+      // View/read-only mode mirrors the LookupInput initialDisplay logic:
+      // when initialDisplayFields is set and all referenced FormData
+      // values are non-empty, render the compound "kode - nama". Falls
+      // back to the raw primary key when companion fields are missing.
+      const lookup = field.lookup;
+      if (lookup?.initialDisplayFields?.length) {
+        const sep = lookup.initialDisplaySeparator ?? " ";
+        const parts = lookup.initialDisplayFields.map((k) => asString(data[String(k)]));
+        if (parts.every((p) => p !== "")) return parts.join(sep);
+      }
+      return asString(value) || labels.emptyValue;
+    }
     if (field.type === "number" && typeof value === "number") {
       const nloc = locale === "en" ? "en-US" : "id-ID";
       const numeric = field.numeric;
@@ -158,6 +181,7 @@ function NumericField({
   value,
   numericKind,
   prec,
+  currencyCode,
   locale,
   size,
   disabled,
@@ -172,6 +196,13 @@ function NumericField({
   value: number;
   numericKind: "currency" | "percent" | "integer" | "decimal";
   prec?: number;
+  /**
+   * Currency ISO code (e.g. "IDR", "USD") — only used when numericKind ===
+   * "currency". When set, the code is shown as a subdued suffix next to the
+   * field label so the user sees which currency they're entering, mirroring
+   * the view-mode renderer which shows `Rp 1.000.000` / `IDR 1.000.000`.
+   */
+  currencyCode?: string;
   locale: Ui7Locale;
   size?: "sm" | "md" | "lg";
   disabled?: boolean;
@@ -209,19 +240,94 @@ function NumericField({
     return parsed.ok ? parsed.value : 0;
   };
 
+  /**
+   * Input-time sanitizer — drops any character the user types that isn't part
+   * of a valid number in the active locale. Without this, typing "abc" would
+   * stick in the textbox (because `raw` stores the user's verbatim keystrokes)
+   * while the parsed numeric value silently becomes 0. Filtering at input gives
+   * immediate visual feedback: rejected chars never appear at all.
+   *
+   * Rules:
+   * - Integer: 0–9 plus a single leading minus.
+   * - Decimal / currency / percent: 0–9, thousand separator, a single decimal
+   *   separator, leading minus. Decimal separator is rejected entirely when
+   *   `prec === 0` (no fractional part allowed), and excess fraction digits
+   *   beyond `prec` are clipped on the fly so users see the limit enforced.
+   */
+  const sanitizeInput = (input: string): string => {
+    let out = "";
+    let seenMinus = false;
+    if (numericKind === "integer") {
+      for (let i = 0; i < input.length; i++) {
+        const c = input[i];
+        if (c >= "0" && c <= "9") out += c;
+        else if (c === "-" && out === "" && !seenMinus) {
+          out += c;
+          seenMinus = true;
+        }
+      }
+      return out;
+    }
+    let seenDecimal = false;
+    const allowDecimal = prec === undefined || prec > 0;
+    for (let i = 0; i < input.length; i++) {
+      const c = input[i];
+      if (c >= "0" && c <= "9") out += c;
+      else if (c === decimalSep && !seenDecimal && allowDecimal) {
+        out += c;
+        seenDecimal = true;
+      } else if (c === thousandSep) out += c;
+      else if (c === "-" && out === "" && !seenMinus) {
+        out += c;
+        seenMinus = true;
+      }
+    }
+    // Clip excess fraction digits to declared precision.
+    if (typeof prec === "number" && prec > 0 && seenDecimal) {
+      const decIdx = out.indexOf(decimalSep);
+      const intPart = out.slice(0, decIdx);
+      const fracPart = out.slice(decIdx + 1);
+      if (fracPart.length > prec) {
+        out = intPart + decimalSep + fracPart.slice(0, prec);
+      }
+    }
+    return out;
+  };
+
   const displayValue = raw !== null ? raw : formatDisplay(value);
 
-  return (
+  // Auto helper-text for currency fields with non-zero precision — surfaces
+  // the decimal limit to the user so the silent truncation in parseRaw
+  // doesn't surprise them. Skipped when prec === 0 (the display format
+  // already shows no decimal separator, no extra explanation needed) or
+  // when caller already supplied a helperText.
+  const autoCurrencyHelper = (() => {
+    if (helperText !== undefined) return undefined;
+    if (numericKind !== "currency" || !currencyCode) return undefined;
+    const p = prec ?? 0;
+    if (p <= 0) return undefined;
+    if (locale === "en") {
+      return `Up to ${p} decimal place${p > 1 ? "s" : ""}`;
+    }
+    return `Maksimal ${p} angka desimal`;
+  })();
+  const effectiveHelperText = helperText ?? autoCurrencyHelper;
+
+  const input = (
     <TextInput
       id={id}
       labelText={labelText}
-      helperText={helperText}
+      helperText={effectiveHelperText}
       value={displayValue}
       onFocus={() => {
         setRaw(value === 0 ? "" : String(value).replace(".", decimalSep));
       }}
       onChange={(e) => {
-        const next = e.target.value;
+        // Filter non-numeric input at the source so the textbox can never
+        // visibly display characters that aren't part of a valid number.
+        // Caret behaviour stays natural because we only ever DROP chars —
+        // never reorder.
+        const next = sanitizeInput(e.target.value);
         setRaw(next);
         onChange(parseRaw(next));
       }}
@@ -238,6 +344,79 @@ function NumericField({
       placeholder={placeholder}
     />
   );
+
+  // Currency chip — rendered to the right of the TextInput, height + Y position
+  // matched to the actual input field. We anchor via `align-items: flex-end` so
+  // the chip bottom sits flush with the input bottom (which is just above the
+  // helper-text / invalid-text row), then offset the chip up past those rows
+  // so its bottom lands on the input bottom edge regardless of whether the
+  // label wraps to two lines. `box-sizing: border-box` keeps height parity
+  // with the Carbon input (which also includes its 1px border in 2rem/2.5rem).
+  if (numericKind === "currency" && currencyCode) {
+    // Resolve locale-aware currency display so the chip matches what view-mode
+    // shows — `Intl.NumberFormat(... style:'currency')` renders IDR as "Rp" in
+    // id-ID and as "IDR" in en-US.
+    const chipText = (() => {
+      try {
+        const parts = new Intl.NumberFormat(nloc, {
+          style: "currency",
+          currency: currencyCode,
+          minimumFractionDigits: 0,
+          maximumFractionDigits: 0,
+        }).formatToParts(0);
+        const sym = parts.find((p) => p.type === "currency")?.value;
+        return sym && sym.trim() ? sym.trim() : currencyCode;
+      } catch {
+        return currencyCode;
+      }
+    })();
+
+    // Chip height + horizontal min-width follow the same CSS variable that the
+    // form contract uses to size .cds--text-input (1.75rem compact / 2.5rem
+    // comfortable). Fallback covers the rare host that mounts NumericField
+    // outside the .ui7-form-contract scope; map by Carbon `size` so the chip
+    // still matches Carbon's native input height there.
+    const chipHeightFallback = size === "lg" ? "3rem" : size === "md" ? "2.5rem" : "1.75rem";
+    const chipHeight = `var(--ui7-form-control-height, ${chipHeightFallback})`;
+    // `.cds--form-requirement` (invalid) ~1rem + 0.25rem margin; same for
+    // `.cds--form__helper-text`. Offset the chip up by that combined ~1.25rem
+    // so its bottom sits flush with the input bottom regardless of subtext.
+    const subtextRowOffset =
+      invalid && invalidText ? "1.25rem" : effectiveHelperText ? "1.25rem" : "0";
+
+    return (
+      <div style={{ display: "flex", alignItems: "flex-end", gap: "0.5rem" }}>
+        <div style={{ flex: "1 1 auto", minWidth: 0 }}>{input}</div>
+        <span
+          aria-label={`Mata uang: ${chipText}`}
+          title={currencyCode}
+          style={{
+            flex: "0 0 auto",
+            boxSizing: "border-box",
+            marginBlockEnd: subtextRowOffset,
+            height: chipHeight,
+            minWidth: chipHeight,
+            paddingInline: "0.625rem",
+            display: "inline-flex",
+            alignItems: "center",
+            justifyContent: "center",
+            fontSize: "0.75rem",
+            fontWeight: 500,
+            letterSpacing: "0.02em",
+            color: "var(--cds-text-primary, #161616)",
+            background: "var(--cds-layer-accent-01, #e8e8e8)",
+            border: "1px solid var(--cds-border-subtle, #e0e0e0)",
+            whiteSpace: "nowrap",
+            userSelect: "none",
+          }}
+        >
+          {chipText}
+        </span>
+      </div>
+    );
+  }
+
+  return input;
 }
 
 export function SchemaFormRenderer<TData extends Record<string, unknown>>({
@@ -251,12 +430,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
   showSectionHeader = true,
   scopeClassName,
   density = "compact",
+  width,
 }: SchemaFormRendererProps<TData>) {
   const isView = mode === "view";
   const dt = UI7_FORM_DENSITY_TOKENS[density];
   const carbonSize = density === "compact" ? "sm" : "md";
   const rootClassName =
-    scopeClassName ?? getUi7FormContractClassName({ density, readonly: isView });
+    scopeClassName ?? getUi7FormContractClassName({ density, width, readonly: isView });
   const labels = useBosSharedI18n();
   const { locale } = useI18n();
   const renderDisplayValue = makeDisplayRenderer(labels, locale);
@@ -338,11 +518,65 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   Boolean(field.validation?.required) && !effectiveReadonly;
                 const invalidText = errors?.[field.key];
                 const span = clampSpan(field.span, defaultSpan);
+                // `breakBefore` forces a new row by pinning to column 1.
+                // Without it, CSS grid auto-flow may fit the field on the
+                // current row if remaining columns are enough for `span`.
                 const wrapperStyle = {
-                  gridColumn: `span ${span} / span ${span}`,
+                  gridColumn: field.breakBefore
+                    ? `1 / span ${span}`
+                    : `span ${span} / span ${span}`,
                   minWidth: 0,
                 } as const;
 
+                // ── Detail-rows (master-detail editor) ──────────────────────
+                // Rendered BEFORE the readonly branch so view / edit / create
+                // share the same `<EditableTable>` instance — the table
+                // renders rows even when `readOnly={true}` and just hides
+                // the add/delete affordances. Default span = 12 (full width)
+                // because tables rarely look right in a half-column.
+                if (field.type === "detail-rows") {
+                  const detail = field.detailRows;
+                  if (!detail) return [];
+                  const rows = Array.isArray(rawValue)
+                    ? (rawValue as Record<string, unknown>[])
+                    : [];
+                  const detailSpan = clampSpan(field.span, 12);
+                  const detailWrapperStyle = {
+                    gridColumn: field.breakBefore
+                      ? `1 / span ${detailSpan}`
+                      : `span ${detailSpan} / span ${detailSpan}`,
+                    minWidth: 0,
+                  } as const;
+                  return [
+                    <div
+                      key={key}
+                      className={UI7_FORM_VISUAL_CLASSNAMES.column}
+                      style={detailWrapperStyle}
+                    >
+                      <FieldShell
+                        label={field.label}
+                        required={effectiveRequired}
+                        helperText={field.helperText}
+                      >
+                        <EditableTable
+                          columns={detail.columns}
+                          value={rows}
+                          onChange={(newRows) =>
+                            setValue(
+                              field.key,
+                              (newRows as unknown) as TData[keyof TData],
+                            )
+                          }
+                          newRowFactory={detail.newRowFactory}
+                          maxRows={detail.maxRows}
+                          readOnly={effectiveReadonly}
+                          validateRow={detail.validateRow}
+                        />
+                      </FieldShell>
+                    </div>,
+                  ];
+                }
+
                 // ── View / readonly ─────────────────────────────────────────
                 if (effectiveReadonly) {
                   return [
@@ -376,6 +610,18 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                 // ── Lookup ──────────────────────────────────────────────────
                 if (field.type === "lookup") {
                   const lookup = field.lookup;
+                  // Compose initialDisplay from sibling form fields, e.g.
+                  // ["kode_cabang","branch_name"] → "001 KANTOR CABANG …".
+                  // Falls back to undefined if any referenced field is
+                  // empty so LookupInput uses its default (the key value).
+                  let initialDisplay: string | undefined;
+                  if (lookup?.initialDisplayFields?.length) {
+                    const sep = lookup.initialDisplaySeparator ?? " ";
+                    const parts = lookup.initialDisplayFields.map((k) => asString(value[k]));
+                    if (parts.every((p) => p !== "")) {
+                      initialDisplay = parts.join(sep);
+                    }
+                  }
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText} htmlFor={key}>
@@ -383,6 +629,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           id={key}
                           labelText=""
                           value={asString(rawValue)}
+                          initialDisplay={initialDisplay}
                           onChange={(next: string) => setValue(field.key, next as TData[keyof TData])}
                           onDataSelected={(row: Record<string, unknown>) => {
                             if (lookup?.onDataPatch) {
@@ -465,10 +712,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   const numeric = field.numeric;
                   let numericKind: "currency" | "percent" | "integer" | "decimal" = "decimal";
                   let prec: number | undefined;
+                  let currencyCode: string | undefined;
 
                   if (numeric?.kind === "currency") {
                     numericKind = "currency";
                     const code = String(value[numeric.currencyField] ?? "");
+                    currencyCode = code || undefined;
                     prec = getCurrencyPrecision(code, {
                       precisionByCurrency: numeric.precisionByCurrency,
                       defaultPrecision: numeric.defaultPrecision,
@@ -480,20 +729,46 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                     numericKind = "integer";
                   }
 
+                  // Live min/max validation — surfaces invalidText immediately
+                  // as the user types instead of waiting for Save. Falls back
+                  // to the submit-time error from the form host's errors map
+                  // when the value is within bounds (or no bounds declared).
+                  const numericValue = typeof rawValue === "number" ? rawValue : 0;
+                  let liveInvalidText: string | undefined;
+                  const v = field.validation;
+                  if (v?.min !== undefined) {
+                    const minV = Array.isArray(v.min) ? v.min[0] : v.min;
+                    if (numericValue < minV) {
+                      liveInvalidText = Array.isArray(v.min)
+                        ? v.min[1]
+                        : labels.validMin(minV);
+                    }
+                  }
+                  if (!liveInvalidText && v?.max !== undefined) {
+                    const maxV = Array.isArray(v.max) ? v.max[0] : v.max;
+                    if (numericValue > maxV) {
+                      liveInvalidText = Array.isArray(v.max)
+                        ? v.max[1]
+                        : labels.validMax(maxV);
+                    }
+                  }
+                  const effectiveInvalidText = invalidText ?? liveInvalidText;
+
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <NumericField
                         id={key}
                         labelText={mkLabel(field.label, effectiveRequired)}
                         helperText={field.helperText}
-                        value={typeof rawValue === "number" ? rawValue : 0}
+                        value={numericValue}
                         numericKind={numericKind}
                         prec={prec}
+                        currencyCode={currencyCode}
                         locale={locale}
                         size={carbonSize}
                         disabled={disabled}
-                        invalid={Boolean(invalidText)}
-                        invalidText={invalidText}
+                        invalid={Boolean(effectiveInvalidText)}
+                        invalidText={effectiveInvalidText}
                         placeholder={field.placeholder}
                         onChange={(v) => setValue(field.key, v as TData[keyof TData])}
                       />
@@ -520,6 +795,19 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
 
                 // ── Toggle ──────────────────────────────────────────────────
                 if (field.type === "toggle") {
+                  // Optional valueOn/valueOff for non-boolean stored state
+                  // (e.g., "Y"/"N"). When unset, falls back to plain Boolean.
+                  const hasCustomMapping =
+                    field.toggle && field.toggle.valueOn !== undefined;
+                  const toggled = hasCustomMapping
+                    ? rawValue === field.toggle!.valueOn
+                    : Boolean(rawValue);
+                  const onValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOn
+                    : true;
+                  const offValue: unknown = hasCustomMapping
+                    ? field.toggle!.valueOff
+                    : false;
                   return [
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <FieldShell label={field.label} required={effectiveRequired} helperText={field.helperText}>
@@ -529,9 +817,12 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                             labelText=""
                             labelA={labels.toggleOff}
                             labelB={labels.toggleOn}
-                            toggled={Boolean(rawValue)}
+                            toggled={toggled}
                             onToggle={(checked) =>
-                              setValue(field.key, Boolean(checked) as TData[keyof TData])
+                              setValue(
+                                field.key,
+                                (checked ? onValue : offValue) as TData[keyof TData]
+                              )
                             }
                             disabled={disabled}
                           />