@isi-ui7/bos7-shared 0.3.5 → 0.3.7

package/dist/form-numeric.d.ts

@@ -45,3 +45,23 @@ export declare const INDONESIA_CURRENCY_CONFIG: CurrencyPrecisionConfig;
  * accrued interest), prefer `INDONESIA_CURRENCY_CONFIG` instead.
  */
 export declare const INDONESIA_RUPIAH_WHOLE_CONFIG: CurrencyPrecisionConfig;
+/** Jumlah digit NPWP: 2+3+3+1+3+3. */
+export declare const NPWP_DIGITS = 15;
+/**
+ * NPWP yang diketik → berformat `XX.XXX.XXX.X-XXX.XXX`.
+ *
+ * Pemisah DISISIPKAN otomatis, tidak diketik operator. Alasannya bukan
+ * kenyamanan: kalau titik dan strip harus diketik sendiri, setiap salah tempat
+ * menghasilkan nomor yang TERLIHAT benar tapi berbeda — dan NPWP adalah
+ * identitas pajak yang dicocokkan dengan sistem lain persis karakter demi
+ * karakter.
+ *
+ * Non-angka dibuang, jadi menempel (paste) dari sumber mana pun tetap
+ * menghasilkan bentuk yang sama.
+ */
+export declare function normalizeNpwpInput(raw: string): string;
+/** Digit murni NPWP — dipakai backend sebagai tax_id_plain. */
+export declare function npwpDigits(value: string): string;
+/** Sah bila tepat 15 digit. Bentuk pemisah tidak diperiksa: ia dihasilkan
+ * normalizeNpwpInput, bukan diketik. */
+export declare function isValidNpwpInput(value: string): boolean;

package/dist/form-renderer-utils.d.ts

@@ -5,6 +5,30 @@ export declare function resolveApiPath(path: ApiPath, params: Record<string, str
 type ValidationI18n = Pick<BosSharedLabels, "validRequired" | "validMinLength" | "validMaxLength" | "validMin" | "validMax" | "validPattern">;
 export declare function runFieldValidation<TData extends Record<string, unknown>>(fields: FormField<TData>[], data: TData, mode: FormMode, i18n?: Partial<ValidationI18n>): Partial<Record<keyof TData, string>>;
 export declare function collectAllFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>): FormField<TData>[];
-export declare function collectPageFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>, pageIndex: number): FormField<TData>[];
+/**
+ * Field yang BOLEH divalidasi pada satu halaman.
+ *
+ * ⚠️ Section yang `hidden` DILEWATI. Tanpa ini, field wajib di panel yang belum
+ * terbuka ikut divalidasi — dan operator melihat "wajib diisi" untuk field yang
+ * tidak ada di layarnya, tanpa cara memperbaikinya.
+ *
+ * `mode`/`data` opsional supaya pemanggil lama tetap jalan; tanpa keduanya,
+ * hanya `hidden: true` literal yang bisa dievaluasi — predikat fungsi
+ * diperlakukan sebagai TIDAK tersembunyi, arah aman untuk validasi.
+ */
+export declare function collectPageFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>, pageIndex: number, mode?: FormMode, data?: TData): FormField<TData>[];
 export declare function getLayoutPageCount<TData extends Record<string, unknown>>(layout: FormLayout<TData>): number;
+/**
+ * Tanggal yang dipilih → "YYYY-MM-DD" menurut kalender LOKAL.
+ *
+ * ⚠️ Ada karena `date.toISOString().slice(0,10)` MENGGESER tanggal satu hari
+ * bagi siapa pun di timur UTC. `new Date(1990,0,1)` di WIB (UTC+7) menjadi
+ * "1989-12-31T17:00:00Z" — tanggal lahir yang diketik operator tersimpan
+ * mundur sehari, tanpa satu pun galat, di setiap field tanggal di setiap modul.
+ *
+ * Komponen lokal dipakai apa adanya: pemilih tanggal memilih HARI di kalender
+ * pengguna, bukan sebuah titik waktu. Mengubahnya ke UTC memperlakukannya
+ * sebagai titik waktu, dan di situlah pergeserannya lahir.
+ */
+export declare function toLocalISODate(date: Date | undefined | null): string;
 export {};

package/dist/form-rules.d.ts

@@ -7,6 +7,31 @@ export declare const Rules: {
     readonly nik: (msg?: string) => FieldValidatorFn;
     readonly kodePos: (msg?: string) => FieldValidatorFn;
     readonly phone: (rule: PhoneRule, msg?: string) => FieldValidatorFn;
+    /**
+     * Tanggal yang tersimpan harus berupa tanggal KALENDER yang sungguh ada.
+     *
+     * Nilai yang disimpan berformat ISO (YYYY-MM-DD) meski ditampilkan
+     * DD-MM-YYYY — aturan ini memeriksa nilai simpannya.
+     *
+     * ⚠️ Memeriksa hari-nya kembali, bukan hanya `new Date(v)` tidak NaN.
+     * `new Date("2026-02-31")` di sebagian mesin MENGGULUNG jadi 3 Maret alih-alih
+     * menolak, sehingga tanggal yang tidak ada lolos dan tersimpan sebagai
+     * tanggal LAIN — tanpa galat, dan tanpa cara mengetahuinya kemudian.
+     */
+    readonly date: (msg?: string) => FieldValidatorFn;
+    /**
+     * Tanggal tidak boleh di masa depan — untuk tanggal lahir dan sejenisnya.
+     * `now` bisa disuntik agar bisa diuji tanpa bergantung jam mesin.
+     */
+    readonly dateNotFuture: (msg?: string, now?: () => Date) => FieldValidatorFn;
+    /**
+     * NPWP — 15 digit, ditampilkan `XX.XXX.XXX.X-XXX.XXX`.
+     *
+     * Yang diperiksa jumlah DIGIT-nya, bukan bentuk pemisahnya: pemisah
+     * dihasilkan normalizeNpwpInput dan tidak pernah diketik operator, jadi
+     * memeriksanya berarti menguji kode sendiri alih-alih masukan pengguna.
+     */
+    readonly npwp: (msg?: string) => FieldValidatorFn;
     readonly regex: (pattern: RegExp, msg: string) => FieldValidatorFn;
 };
 export declare function buildValidator<TData extends Record<string, unknown>>(crossField: (form: TData) => Partial<Record<keyof TData, string>>): (form: TData) => Partial<Record<keyof TData, string>>;

package/dist/form-types.d.ts

@@ -67,6 +67,8 @@ export type FormFieldNumericConfig<TData extends Record<string, unknown>> = {
     minDigits: number;
     maxDigits: number;
     allowedPrefixes?: string[];
+} | {
+    kind: "npwp";
 };
 /**
  * Toggle field state mapping for non-boolean stored values.
@@ -181,6 +183,11 @@ export type FormSection<TData extends Record<string, unknown>> = {
 };
 export type FormPageDef<TData extends Record<string, unknown>> = {
     label: string;
+    /**
+     * Baris kedua di stepper — menjelaskan ISI langkah, bukan mengulang
+     * labelnya. Opsional; tanpa ini stepper hanya menampilkan label.
+     */
+    sublabel?: string;
     sections: FormSection<TData>[];
     /** Optional: save draft on Next. Returns {ok,error?} (no 202 required). */
     stepSaveApiPath?: ApiPath;

package/dist/i18n.d.ts

@@ -24,6 +24,8 @@ export type BosSharedLabels = {
     cancel: string;
     prev: string;
     next: string;
+    /** Judul stepper vertikal wizard. */
+    wizardStepsTitle: string;
     subtitleCreate: string;
     subtitleEdit: string;
     subtitleView: string;

package/dist/{index-DV8lJjii.js → index-BI2MxWot.js}

@@ -27391,7 +27391,7 @@ function ba(M, L) {
   return String(pr(M, L));
 }
 async function Io(M, L, r) {
-  const { default: x } = await import("./jspdf.es.min-iZWDIC-k.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DFaknRns.js"), c = new x({ orientation: "landscape" });
+  const { default: x } = await import("./jspdf.es.min-DzRwzM6G.js").then((o) => o.j), { default: w } = await import("./jspdf.plugin.autotable-DFaknRns.js"), c = new x({ orientation: "landscape" });
   c.setFontSize(14), c.text(r, 14, 15), c.setFontSize(10), w(c, {
     head: [L.map((o) => o.title)],
     body: M.map((o) => L.map((a) => ba(o[a.field], a.displayFormat))),
@@ -28646,6 +28646,7 @@ function tl() {
     cancel: M("bos7.cancel", "Batal"),
     prev: M("bos7.prev", "Kembali"),
     next: M("bos7.next", "Lanjut"),
+    wizardStepsTitle: M("bos7.wizardStepsTitle", "Langkah Pengisian"),
     subtitleCreate: M("bos7.subtitleCreate", "Isi form untuk menambah data baru."),
     subtitleEdit: M("bos7.subtitleEdit", "Edit data yang dipilih."),
     subtitleView: M("bos7.subtitleView", "Detail data."),

package/dist/{index.es-DqL2wDqB.js → index.es-D-PR3JkH.js}

@@ -1,5 +1,5 @@
-import { c as Ke, g as Do } from "./index-DV8lJjii.js";
-import { _ as Xa } from "./jspdf.es.min-iZWDIC-k.js";
+import { c as Ke, g as Do } from "./index-BI2MxWot.js";
+import { _ as Xa } from "./jspdf.es.min-DzRwzM6G.js";
 var vt = function(a) {
   return a && a.Math === Math && a;
 }, _ = (

package/dist/index.js

@@ -1,4 +1,4 @@
-import { A as s, a as o, b as t, D as r, N as i, O as n, d as l, P as c, e as d, f as u, h as S, U as h, i as A, j as T, k, l as C, m as _, n as O, o as U, p as g, q as N, r as P, s as m, t as E, u as F, v as p, w as f, x as I, y as R, z as x, B as v, C as y, E as L, F as b, G as B, H as D, I as M, J as H, K as V, L as W, M as q, Q as K, R as w, S as z, T as G, V as Q, W as X, X as Y, Y as j, Z as J, _ as Z, $, a0 as aa, a1 as ea, a2 as sa, a3 as oa, a4 as ta, a5 as ra, a6 as ia, a7 as na, a8 as la, a9 as ca, aa as da, ab as ua, ac as Sa, ad as ha, ae as Aa, af as Ta, ag as ka, ah as Ca, ai as _a } from "./index-DV8lJjii.js";
+import { A as s, a as o, b as t, D as r, N as i, O as n, d as l, P as c, e as d, f as u, h as S, U as h, i as A, j as T, k, l as C, m as _, n as O, o as U, p as g, q as N, r as P, s as m, t as E, u as F, v as p, w as f, x as I, y as R, z as x, B as v, C as y, E as L, F as b, G as B, H as D, I as M, J as H, K as V, L as W, M as q, Q as K, R as w, S as z, T as G, V as Q, W as X, X as Y, Y as j, Z as J, _ as Z, $, a0 as aa, a1 as ea, a2 as sa, a3 as oa, a4 as ta, a5 as ra, a6 as ia, a7 as na, a8 as la, a9 as ca, aa as da, ab as ua, ac as Sa, ad as ha, ae as Aa, af as Ta, ag as ka, ah as Ca, ai as _a } from "./index-BI2MxWot.js";
 export {
   s as AUTH7_SCOPES,
   o as AppShellLayout,

package/dist/{jspdf.es.min-iZWDIC-k.js → jspdf.es.min-DzRwzM6G.js}

@@ -9216,7 +9216,7 @@ function(n) {
   var d = h.getContext("2d");
   d.fillStyle = "#fff", d.fillRect(0, 0, h.width, h.height);
   var m = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, _ = this;
-  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-DqL2wDqB.js")).catch(function(k) {
+  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-D-PR3JkH.js")).catch(function(k) {
     return Promise.reject(new Error("Could not load canvg: " + k));
   }).then(function(k) {
     return k.default ? k.default : k;

package/dist/wizard-stepper.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Stepper VERTIKAL di sisi kanan — bentuk baku wizard (keputusan PM 2026-08-16).
+ *
+ * Menggantikan ProgressIndicator horizontal Carbon. Alasannya bukan selera:
+ * wizard di sini punya langkah yang TERKUNCI, dan gembok perlu tempat untuk
+ * terbaca. Pada stepper horizontal, lima langkah berikut sublabel dan ikonnya
+ * berdesakan sampai keduanya hilang — yang tersisa hanya lingkaran bernomor,
+ * dan operator tidak bisa tahu langkah mana yang belum boleh dibuka sampai ia
+ * menekannya.
+ *
+ * Tiga keadaan, dan gembok DIBEDAKAN dari sekadar "belum aktif":
+ *
+ *   selesai  → sudah dilewati
+ *   aktif    → sedang diisi
+ *   terkunci → belum boleh dibuka (gembok)
+ *
+ * Langkah yang belum aktif TAPI boleh dibuka tidak diberi gembok. Menyamakan
+ * keduanya membuat operator mengira seluruh sisa form terkunci padahal hanya
+ * langkah pertama yang menahan.
+ */
+export type WizardStepState = "selesai" | "aktif" | "terkunci" | "menunggu";
+export type WizardStepView = {
+    label: string;
+    sublabel?: string;
+    state: WizardStepState;
+};
+export declare function WizardStepper({ steps, title, onSelect, }: {
+    steps: WizardStepView[];
+    title: string;
+    /** Dipanggil saat langkah diklik. Langkah TERKUNCI tidak pernah memanggilnya. */
+    onSelect?: (index: number) => void;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/workflow/use-crud-form.d.ts

@@ -22,6 +22,16 @@ export type UseCrudFormReturn<TData extends Record<string, unknown>> = {
     canGoPrev: boolean;
     goNext: () => Promise<void>;
     goPrev: () => void;
+    /**
+     * Lompat ke halaman tertentu lewat stepper.
+     *
+     * MUNDUR selalu boleh — data yang sudah diisi tidak hilang, dan menahan
+     * operator melihat kembali apa yang ia tulis tidak melindungi apa pun.
+     * MAJU diteruskan ke goNext supaya melewati gerbang YANG SAMA dengan tombol
+     * Berikutnya; kalau tidak, stepper menjadi pintu belakang yang melewati
+     * verifikasi.
+     */
+    goToPage: (target: number) => void;
     handleSave: () => Promise<void>;
 };
 export declare function useCrudForm<TData extends Record<string, unknown>>({ schema, mode, params, onSuccess, }: UseCrudFormOptions<TData>): UseCrudFormReturn<TData>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.5",
+  "version": "0.3.7",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {

package/src/crud-components.tsx

@@ -24,6 +24,7 @@ import type { CrudCustomActionSchema, CrudDeleteSchema, CrudListSchema } from ".
 import type { CrudForm, FormMode } from "./form-types";
 import type { Ui7FormDensity } from "./style-contract";
 import { SchemaFormRenderer } from "./form-renderer";
+import { WizardStepper, type WizardStepState } from "./wizard-stepper";
 import { PageBody, PageFooter, PageHeader, PageLayout } from "./page-layout";
 import { submitWorkflowDelete, submitWorkflowForm } from "./workflow/crud-client";
 import { useCrudForm } from "./workflow/use-crud-form";
@@ -441,6 +442,7 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
     canGoPrev,
     goNext,
     goPrev,
+    goToPage,
     handleSave,
   } = useCrudForm({ schema, mode, params, onSuccess });
 
@@ -572,27 +574,56 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
     return (
       <PageBody>
         {errBanner}
-        <ProgressIndicator currentIndex={page} style={{ marginBottom: "1.5rem" }}>
-          {layout.pages.map((pg, i) => (
-            <ProgressStep key={i} label={pg.label} />
-          ))}
-        </ProgressIndicator>
-        {currentPage ? (
-          <SchemaFormRenderer
-            mode={mode}
-            value={form}
-            sections={currentPage.sections}
-            errors={fieldErrors}
-            disabled={saving}
-            onChange={setForm}
-            density={density}
-            width={width}
+        {/* Isi di kiri, stepper vertikal di kanan — bentuk baku wizard
+            (keputusan PM 2026-08-16). `alignItems: flex-start` supaya stepper
+            tidak ikut meregang setinggi form; ia daftar, bukan kolom. */}
+        <div style={{ display: "flex", gap: "2rem", alignItems: "flex-start" }}>
+          <div style={{ flex: 1, minWidth: 0 }}>
+            {currentPage ? (
+              <SchemaFormRenderer
+                mode={mode}
+                value={form}
+                sections={currentPage.sections}
+                errors={fieldErrors}
+                disabled={saving}
+                onChange={setForm}
+                density={density}
+                width={width}
+              />
+            ) : null}
+          </div>
+          <WizardStepper
+            title={labels.wizardStepsTitle}
+            steps={layout.pages.map((pg, i) => ({
+              label: pg.label,
+              sublabel: pg.sublabel,
+              state: wizardStepState(i),
+            }))}
+            onSelect={goToPage}
           />
-        ) : null}
+        </div>
       </PageBody>
     );
   };
 
+  /**
+   * Keadaan satu langkah di stepper.
+   *
+   * TERKUNCI hanya untuk langkah SESUDAH langkah aktif yang gerbangnya menahan.
+   * Langkah yang belum aktif tapi boleh dibuka diberi keadaan "menunggu", bukan
+   * gembok — menyamakan keduanya membuat operator mengira seluruh sisa form
+   * terkunci padahal hanya langkah pertama yang menahan.
+   */
+  const wizardStepState = (i: number): WizardStepState => {
+    if (i < page) return "selesai";
+    if (i === page) return "aktif";
+    const l = schema.layout;
+    if (l.type === "wizard" && l.canLeavePage && !l.canLeavePage(page, form).ok) {
+      return "terkunci";
+    }
+    return "menunggu";
+  };
+
   const renderFooter = () => {
     if (isView) {
       return (

package/src/date-and-hidden-validation.test.ts

@@ -0,0 +1,140 @@
+import { describe, it, expect } from "vitest";
+import { toLocalISODate, collectPageFields, runFieldValidation } from "./form-renderer-utils";
+import { Rules } from "./form-rules";
+import type { FormLayout, FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// toLocalISODate — pergeseran tanggal satu hari
+// ─────────────────────────────────────────────────────────────────────────────
+describe("toLocalISODate", () => {
+  it("TIDAK menggeser tanggal bagi zona di timur UTC", () => {
+    // Ini bug yang sesungguhnya: `date.toISOString().slice(0,10)` mengubah
+    // tanggal ke UTC. Di WIB (UTC+7), 1 Januari pukul 00:00 lokal adalah
+    // 31 Desember pukul 17:00 UTC — dan tanggal lahir yang diketik operator
+    // tersimpan MUNDUR SEHARI, di setiap field tanggal di setiap modul.
+    const picked = new Date(1990, 0, 1); // 1 Jan 1990, waktu lokal
+    expect(toLocalISODate(picked)).toBe("1990-01-01");
+  });
+
+  it("kontrol: cara LAMA memang menggeser — membuktikan tes ini mengukur sesuatu", () => {
+    const picked = new Date(1990, 0, 1);
+    const lama = picked.toISOString().slice(0, 10);
+    const offsetMenit = picked.getTimezoneOffset(); // negatif di timur UTC
+    if (offsetMenit < 0) {
+      expect(lama).not.toBe("1990-01-01");
+    } else {
+      // Di UTC atau barat UTC cara lama kebetulan benar — itulah sebabnya bug
+      // ini bisa lolos di mesin pengembang yang zonanya berbeda.
+      expect(lama).toBe("1990-01-01");
+    }
+  });
+
+  it("tengah tahun & akhir bulan tetap utuh", () => {
+    expect(toLocalISODate(new Date(2026, 7, 15))).toBe("2026-08-15");
+    expect(toLocalISODate(new Date(2024, 1, 29))).toBe("2024-02-29"); // kabisat
+    expect(toLocalISODate(new Date(2026, 11, 31))).toBe("2026-12-31");
+  });
+
+  it("nilai kosong / tak sah → string kosong, bukan lempar", () => {
+    expect(toLocalISODate(undefined)).toBe("");
+    expect(toLocalISODate(null)).toBe("");
+    expect(toLocalISODate(new Date("bukan tanggal"))).toBe("");
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Rules.date — tanggal kalender yang sungguh ada
+// ─────────────────────────────────────────────────────────────────────────────
+describe("Rules.date", () => {
+  const r = Rules.date();
+
+  it("menerima tanggal sah", () => {
+    expect(r("1990-01-01", {})).toBeUndefined();
+    expect(r("2024-02-29", {})).toBeUndefined(); // kabisat
+  });
+
+  it("MENOLAK tanggal yang tidak ada di kalender", () => {
+    // `new Date("2026-02-31")` di sebagian mesin MENGGULUNG jadi 3 Maret
+    // alih-alih menolak. Tanpa pemeriksaan balik, tanggal itu lolos dan
+    // tersimpan sebagai tanggal LAIN.
+    expect(r("2026-02-31", {})).toBeTruthy();
+    expect(r("2026-13-01", {})).toBeTruthy();
+    expect(r("2023-02-29", {})).toBeTruthy(); // 2023 bukan kabisat
+  });
+
+  it("menolak bentuk yang bukan ISO", () => {
+    expect(r("01-01-1990", {})).toBeTruthy();
+    expect(r("1990/01/01", {})).toBeTruthy();
+  });
+
+  it("kosong lolos — kewajiban diurus `required`", () => {
+    expect(r("", {})).toBeUndefined();
+  });
+});
+
+describe("Rules.dateNotFuture", () => {
+  const now = () => new Date(2026, 7, 15);
+  const r = Rules.dateNotFuture(undefined, now);
+
+  it("hari ini masih boleh", () => {
+    expect(r("2026-08-15", {})).toBeUndefined();
+  });
+  it("kemarin boleh", () => {
+    expect(r("2026-08-14", {})).toBeUndefined();
+  });
+  it("besok DITOLAK", () => {
+    expect(r("2026-08-16", {})).toBeTruthy();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// collectPageFields — section tersembunyi
+// ─────────────────────────────────────────────────────────────────────────────
+const terbuka: FormSection<D> = {
+  title: "Terbuka",
+  fields: [{ key: "a", label: "A", type: "text", span: 4, validation: { required: true } }],
+};
+const tertutup: FormSection<D> = {
+  title: "Tertutup",
+  fields: [{ key: "b", label: "B", type: "text", span: 4, validation: { required: true } }],
+  hidden: (_m, d) => d.buka !== true,
+};
+
+const layout: FormLayout<D> = {
+  type: "wizard",
+  pages: [{ label: "Satu", sections: [terbuka, tertutup] }],
+};
+
+describe("collectPageFields menghormati section.hidden", () => {
+  it("field di section TERSEMBUNYI tidak ikut divalidasi", () => {
+    // Inti keluhan: operator melihat "wajib diisi" untuk field yang tidak ada
+    // di layarnya, tanpa cara memperbaikinya.
+    const fields = collectPageFields(layout, 0, "create", { buka: false });
+    expect(fields.map((f) => String(f.key))).toEqual(["a"]);
+
+    const errs = runFieldValidation(fields, { buka: false }, "create");
+    expect(errs.b).toBeUndefined();
+    expect(errs.a).toBeTruthy(); // yang tampil tetap divalidasi
+  });
+
+  it("field ikut divalidasi begitu section-nya terbuka", () => {
+    const fields = collectPageFields(layout, 0, "create", { buka: true });
+    expect(fields.map((f) => String(f.key)).sort()).toEqual(["a", "b"]);
+  });
+
+  it("tanpa mode/data, predikat fungsi dianggap TIDAK tersembunyi", () => {
+    // Arah aman: pemanggil lama yang belum meneruskan konteks tetap
+    // memvalidasi segalanya, bukan diam-diam melewatkan field wajib.
+    expect(collectPageFields(layout, 0).map((f) => String(f.key)).sort()).toEqual(["a", "b"]);
+  });
+
+  it("hidden: true literal tetap dilewati tanpa konteks", () => {
+    const l: FormLayout<D> = {
+      type: "wizard",
+      pages: [{ label: "S", sections: [terbuka, { ...tertutup, hidden: true }] }],
+    };
+    expect(collectPageFields(l, 0).map((f) => String(f.key))).toEqual(["a"]);
+  });
+});

package/src/form-numeric.ts

@@ -187,3 +187,55 @@ export const INDONESIA_RUPIAH_WHOLE_CONFIG: CurrencyPrecisionConfig = {
   precisionByCurrency: { IDR: 0, USD: 2 },
   defaultPrecision: 0,
 };
+
+// ─── NPWP ────────────────────────────────────────────────────────────────────
+
+/** Jumlah digit NPWP: 2+3+3+1+3+3. */
+export const NPWP_DIGITS = 15;
+
+/**
+ * NPWP yang diketik → berformat `XX.XXX.XXX.X-XXX.XXX`.
+ *
+ * Pemisah DISISIPKAN otomatis, tidak diketik operator. Alasannya bukan
+ * kenyamanan: kalau titik dan strip harus diketik sendiri, setiap salah tempat
+ * menghasilkan nomor yang TERLIHAT benar tapi berbeda — dan NPWP adalah
+ * identitas pajak yang dicocokkan dengan sistem lain persis karakter demi
+ * karakter.
+ *
+ * Non-angka dibuang, jadi menempel (paste) dari sumber mana pun tetap
+ * menghasilkan bentuk yang sama.
+ */
+export function normalizeNpwpInput(raw: string): string {
+  const d = raw.replace(/\D/g, "").slice(0, NPWP_DIGITS);
+  if (!d) return "";
+  const bagian = [
+    d.slice(0, 2),
+    d.slice(2, 5),
+    d.slice(5, 8),
+    d.slice(8, 9),
+    d.slice(9, 12),
+    d.slice(12, 15),
+  ].filter((x) => x !== "");
+
+  // Dirakit bertahap supaya bentuknya benar SAAT DIKETIK, bukan hanya setelah
+  // 15 digit lengkap. Menunggu lengkap membuat pemisah melompat masuk di akhir
+  // dan kursor berpindah — operator kehilangan tempatnya.
+  let out = bagian[0] ?? "";
+  if (bagian[1]) out += "." + bagian[1];
+  if (bagian[2]) out += "." + bagian[2];
+  if (bagian[3]) out += "." + bagian[3];
+  if (bagian[4]) out += "-" + bagian[4];
+  if (bagian[5]) out += "." + bagian[5];
+  return out;
+}
+
+/** Digit murni NPWP — dipakai backend sebagai tax_id_plain. */
+export function npwpDigits(value: string): string {
+  return value.replace(/\D/g, "");
+}
+
+/** Sah bila tepat 15 digit. Bentuk pemisah tidak diperiksa: ia dihasilkan
+ * normalizeNpwpInput, bukan diketik. */
+export function isValidNpwpInput(value: string): boolean {
+  return npwpDigits(value).length === NPWP_DIGITS;
+}

package/src/form-renderer-utils.ts

@@ -1,4 +1,4 @@
-import type { ApiPath, FieldValidation, FormField, FormLayout, FormMode } from "./form-types";
+import type { ApiPath, FieldValidation, FormField, FormLayout, FormMode, FormSection} from "./form-types";
 import type { BosSharedLabels } from "./i18n";
 
 // Non-React fallback — callers (React components) should always pass i18n from useBosSharedI18n().
@@ -124,12 +124,40 @@ export function collectAllFields<TData extends Record<string, unknown>>(
   return sections.flatMap((s) => s.fields);
 }
 
+/**
+ * Field yang BOLEH divalidasi pada satu halaman.
+ *
+ * ⚠️ Section yang `hidden` DILEWATI. Tanpa ini, field wajib di panel yang belum
+ * terbuka ikut divalidasi — dan operator melihat "wajib diisi" untuk field yang
+ * tidak ada di layarnya, tanpa cara memperbaikinya.
+ *
+ * `mode`/`data` opsional supaya pemanggil lama tetap jalan; tanpa keduanya,
+ * hanya `hidden: true` literal yang bisa dievaluasi — predikat fungsi
+ * diperlakukan sebagai TIDAK tersembunyi, arah aman untuk validasi.
+ */
 export function collectPageFields<TData extends Record<string, unknown>>(
   layout: FormLayout<TData>,
   pageIndex: number,
+  mode?: FormMode,
+  data?: TData,
 ): FormField<TData>[] {
-  if (layout.type === "single-page") return collectAllFields(layout);
-  return (layout.pages[pageIndex]?.sections ?? []).flatMap((s) => s.fields);
+  const visible = (sections: FormSection<TData>[]) =>
+    sections.filter((s) => !isSectionHidden(s, mode, data)).flatMap((s) => s.fields);
+
+  if (layout.type === "single-page") return visible(layout.sections);
+  return visible(layout.pages[pageIndex]?.sections ?? []);
+}
+
+function isSectionHidden<TData extends Record<string, unknown>>(
+  section: FormSection<TData>,
+  mode?: FormMode,
+  data?: TData,
+): boolean {
+  if (typeof section.hidden === "function") {
+    if (mode === undefined || data === undefined) return false;
+    return section.hidden(mode, data);
+  }
+  return section.hidden === true;
 }
 
 export function getLayoutPageCount<TData extends Record<string, unknown>>(
@@ -137,3 +165,23 @@ export function getLayoutPageCount<TData extends Record<string, unknown>>(
 ): number {
   return layout.type === "single-page" ? 1 : layout.pages.length;
 }
+
+/**
+ * Tanggal yang dipilih → "YYYY-MM-DD" menurut kalender LOKAL.
+ *
+ * ⚠️ Ada karena `date.toISOString().slice(0,10)` MENGGESER tanggal satu hari
+ * bagi siapa pun di timur UTC. `new Date(1990,0,1)` di WIB (UTC+7) menjadi
+ * "1989-12-31T17:00:00Z" — tanggal lahir yang diketik operator tersimpan
+ * mundur sehari, tanpa satu pun galat, di setiap field tanggal di setiap modul.
+ *
+ * Komponen lokal dipakai apa adanya: pemilih tanggal memilih HARI di kalender
+ * pengguna, bukan sebuah titik waktu. Mengubahnya ke UTC memperlakukannya
+ * sebagai titik waktu, dan di situlah pergeserannya lahir.
+ */
+export function toLocalISODate(date: Date | undefined | null): string {
+  if (!date || Number.isNaN(date.getTime())) return "";
+  const y = date.getFullYear();
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  return `${y}-${m}-${d}`;
+}

package/src/form-renderer.tsx

@@ -22,6 +22,7 @@ import {
   normalizePhoneInput,
   parseDecimalStrict,
   sanitizeDecimalInput,
+  normalizeNpwpInput,
 } from "./form-numeric";
 import {
   getUi7FormContractClassName,
@@ -32,6 +33,7 @@ import {
 import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
+import { toLocalISODate } from "./form-renderer-utils";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
   mode: FormMode;
@@ -747,20 +749,20 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                     <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
                       <DatePicker
                         datePickerType="single"
-                        dateFormat="Y-m-d"
+                        // Tampil DD-MM-YYYY (konvensi setempat); nilai yang
+                        // DISIMPAN tetap ISO. Dua hal berbeda: yang satu untuk
+                        // dibaca manusia, yang satu kontrak dgn backend.
+                        dateFormat="d-m-Y"
                         value={asString(rawValue)}
                         onChange={([date]) =>
-                          setValue(
-                            field.key,
-                            (date ? date.toISOString().slice(0, 10) : "") as TData[keyof TData],
-                          )
+                          setValue(field.key, toLocalISODate(date) as TData[keyof TData])
                         }
                       >
                         <DatePickerInput
                           id={key}
                           labelText={mkLabel(field.label, effectiveRequired)}
                           size={carbonSize}
-                          placeholder={field.placeholder ?? "YYYY-MM-DD"}
+                          placeholder={field.placeholder ?? "DD-MM-YYYY"}
                           disabled={disabled}
                           invalid={Boolean(invalidText)}
                           invalidText={invalidText}
@@ -943,6 +945,32 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                   ];
                 }
 
+                // ── NPWP (teks dgn pemisah otomatis) ─────────────────────────
+                if (field.numeric?.kind === "npwp") {
+                  return [
+                    <div key={key} className={UI7_FORM_VISUAL_CLASSNAMES.column} style={wrapperStyle}>
+                      <TextInput
+                        id={key}
+                        labelText={mkLabel(field.label, effectiveRequired)}
+                        helperText={field.helperText}
+                        size={carbonSize}
+                        value={asString(rawValue)}
+                        placeholder={field.placeholder ?? "XX.XXX.XXX.X-XXX.XXX"}
+                        onChange={(e) =>
+                          setValue(
+                            field.key,
+                            normalizeNpwpInput(e.target.value) as TData[keyof TData],
+                          )
+                        }
+                        disabled={disabled}
+                        readOnly={effectiveReadonly}
+                        invalid={Boolean(invalidText)}
+                        invalidText={invalidText}
+                      />
+                    </div>,
+                  ];
+                }
+
                 // ── Phone (text with numeric phone normalization) ────────────
                 if (field.numeric?.kind === "phone") {
                   return [

package/src/form-rules.ts

@@ -1,4 +1,4 @@
-import { isValidPhoneInput } from "./form-numeric";
+import { isValidNpwpInput, isValidPhoneInput } from "./form-numeric";
 import type { PhoneRule } from "./form-numeric";
 
 export type FieldValidatorFn<TData = Record<string, unknown>> = (
@@ -41,6 +41,61 @@ export const Rules = {
       v && typeof v === "string" && !isValidPhoneInput(v, rule) ? m : undefined;
   },
 
+  /**
+   * Tanggal yang tersimpan harus berupa tanggal KALENDER yang sungguh ada.
+   *
+   * Nilai yang disimpan berformat ISO (YYYY-MM-DD) meski ditampilkan
+   * DD-MM-YYYY — aturan ini memeriksa nilai simpannya.
+   *
+   * ⚠️ Memeriksa hari-nya kembali, bukan hanya `new Date(v)` tidak NaN.
+   * `new Date("2026-02-31")` di sebagian mesin MENGGULUNG jadi 3 Maret alih-alih
+   * menolak, sehingga tanggal yang tidak ada lolos dan tersimpan sebagai
+   * tanggal LAIN — tanpa galat, dan tanpa cara mengetahuinya kemudian.
+   */
+  date(msg?: string): FieldValidatorFn {
+    const m = msg ?? "Tanggal tidak valid";
+    return (v) => {
+      if (!v || typeof v !== "string") return undefined;
+      const mm = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+      if (!mm) return m;
+      const [y, mo, d] = [Number(mm[1]), Number(mm[2]), Number(mm[3])];
+      const dt = new Date(y, mo - 1, d);
+      const sama =
+        dt.getFullYear() === y && dt.getMonth() === mo - 1 && dt.getDate() === d;
+      return sama ? undefined : m;
+    };
+  },
+
+  /**
+   * Tanggal tidak boleh di masa depan — untuk tanggal lahir dan sejenisnya.
+   * `now` bisa disuntik agar bisa diuji tanpa bergantung jam mesin.
+   */
+  dateNotFuture(msg?: string, now?: () => Date): FieldValidatorFn {
+    const m = msg ?? "Tanggal tidak boleh melebihi hari ini";
+    return (v) => {
+      if (!v || typeof v !== "string") return undefined;
+      const mm = /^(\d{4})-(\d{2})-(\d{2})$/.exec(v);
+      if (!mm) return undefined; // bentuk salah ditangani Rules.date
+      const today = (now ? now() : new Date());
+      const t = new Date(today.getFullYear(), today.getMonth(), today.getDate());
+      const dt = new Date(Number(mm[1]), Number(mm[2]) - 1, Number(mm[3]));
+      return dt.getTime() > t.getTime() ? m : undefined;
+    };
+  },
+
+  /**
+   * NPWP — 15 digit, ditampilkan `XX.XXX.XXX.X-XXX.XXX`.
+   *
+   * Yang diperiksa jumlah DIGIT-nya, bukan bentuk pemisahnya: pemisah
+   * dihasilkan normalizeNpwpInput dan tidak pernah diketik operator, jadi
+   * memeriksanya berarti menguji kode sendiri alih-alih masukan pengguna.
+   */
+  npwp(msg?: string): FieldValidatorFn {
+    const m = msg ?? "NPWP harus 15 digit";
+    return (v) =>
+      v && typeof v === "string" && !isValidNpwpInput(v) ? m : undefined;
+  },
+
   regex(pattern: RegExp, msg: string): FieldValidatorFn {
     return (v) =>
       v && typeof v === "string" && !pattern.test(v) ? msg : undefined;

package/src/form-types.ts

@@ -70,7 +70,8 @@ export type FormFieldNumericConfig<TData extends Record<string, unknown>> =
   | { kind: "currency"; currencyField: keyof TData; precisionByCurrency: Record<string, number>; defaultPrecision?: number }
   | { kind: "percent"; maxFractionDigits: number }
   | { kind: "integer" }
-  | { kind: "phone"; minDigits: number; maxDigits: number; allowedPrefixes?: string[] };
+  | { kind: "phone"; minDigits: number; maxDigits: number; allowedPrefixes?: string[] }
+  | { kind: "npwp" };
 
 /**
  * Toggle field state mapping for non-boolean stored values.
@@ -196,6 +197,11 @@ export type FormSection<TData extends Record<string, unknown>> = {
 
 export type FormPageDef<TData extends Record<string, unknown>> = {
   label: string;
+  /**
+   * Baris kedua di stepper — menjelaskan ISI langkah, bukan mengulang
+   * labelnya. Opsional; tanpa ini stepper hanya menampilkan label.
+   */
+  sublabel?: string;
   sections: FormSection<TData>[];
   /** Optional: save draft on Next. Returns {ok,error?} (no 202 required). */
   stepSaveApiPath?: ApiPath;

package/src/i18n.tsx

@@ -33,6 +33,8 @@ export type BosSharedLabels = {
   cancel: string;
   prev: string;
   next: string;
+  /** Judul stepper vertikal wizard. */
+  wizardStepsTitle: string;
 
   subtitleCreate: string;
   subtitleEdit: string;
@@ -81,6 +83,7 @@ export function useBosSharedI18n(): BosSharedLabels {
     cancel: t("bos7.cancel", "Batal"),
     prev: t("bos7.prev", "Kembali"),
     next: t("bos7.next", "Lanjut"),
+    wizardStepsTitle: t("bos7.wizardStepsTitle", "Langkah Pengisian"),
 
     subtitleCreate: t("bos7.subtitleCreate", "Isi form untuk menambah data baru."),
     subtitleEdit: t("bos7.subtitleEdit", "Edit data yang dipilih."),

package/src/npwp.test.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect } from "vitest";
+import { normalizeNpwpInput, npwpDigits, isValidNpwpInput, NPWP_DIGITS } from "./form-numeric";
+import { Rules } from "./form-rules";
+
+// NPWP adalah identitas pajak yang dicocokkan dengan sistem lain persis
+// karakter demi karakter. Kalau pemisah harus diketik sendiri, setiap salah
+// tempat menghasilkan nomor yang TERLIHAT benar tapi berbeda — dan
+// perbedaannya tidak akan terlihat sampai pencocokan di sistem lain gagal.
+
+describe("normalizeNpwpInput", () => {
+  it("menyisipkan pemisah pada 15 digit", () => {
+    expect(normalizeNpwpInput("123456789012345")).toBe("12.345.678.9-012.345");
+  });
+
+  it("membentuk BERTAHAP saat diketik, bukan hanya setelah lengkap", () => {
+    // Menunggu 15 digit membuat pemisah melompat masuk di akhir dan kursor
+    // berpindah — operator kehilangan tempatnya di tengah pengetikan.
+    expect(normalizeNpwpInput("1")).toBe("1");
+    expect(normalizeNpwpInput("12")).toBe("12");
+    expect(normalizeNpwpInput("123")).toBe("12.3");
+    expect(normalizeNpwpInput("12345")).toBe("12.345");
+    expect(normalizeNpwpInput("123456")).toBe("12.345.6");
+    expect(normalizeNpwpInput("123456789")).toBe("12.345.678.9");
+    expect(normalizeNpwpInput("123456789012")).toBe("12.345.678.9-012");
+  });
+
+  it("membuang non-angka — menempel dari sumber mana pun tetap seragam", () => {
+    expect(normalizeNpwpInput("12.345.678.9-012.345")).toBe("12.345.678.9-012.345");
+    expect(normalizeNpwpInput("12 345 678 9 012 345")).toBe("12.345.678.9-012.345");
+    expect(normalizeNpwpInput("abc12def345678 9012345")).toBe("12.345.678.9-012.345");
+  });
+
+  it("memotong kelebihan digit — tidak menerima nomor lebih panjang", () => {
+    expect(normalizeNpwpInput("1234567890123456789")).toBe("12.345.678.9-012.345");
+    expect(npwpDigits(normalizeNpwpInput("1234567890123456789")).length).toBe(NPWP_DIGITS);
+  });
+
+  it("kosong tetap kosong", () => {
+    expect(normalizeNpwpInput("")).toBe("");
+    expect(normalizeNpwpInput("abc")).toBe("");
+  });
+});
+
+describe("npwpDigits — sumber tax_id_plain", () => {
+  it("mengembalikan digit murni", () => {
+    // Backend memakai ini untuk mengisi tax_id_plain. Kalau ia ikut membawa
+    // pemisah, kolom "plain" berhenti menjadi plain dan pencocokan numerik
+    // di sisi lain gagal tanpa alasan yang terlihat.
+    expect(npwpDigits("12.345.678.9-012.345")).toBe("123456789012345");
+  });
+});
+
+describe("Rules.npwp", () => {
+  const r = Rules.npwp();
+
+  it("menerima yang 15 digit", () => {
+    expect(r("12.345.678.9-012.345", {})).toBeUndefined();
+    expect(r("123456789012345", {})).toBeUndefined();
+  });
+
+  it("MENOLAK yang kurang dari 15 digit", () => {
+    expect(r("12.345.678", {})).toBeTruthy();
+    expect(r("1234567890123", {})).toBeTruthy();
+  });
+
+  it("kosong lolos — kewajiban diurus `required`", () => {
+    expect(r("", {})).toBeUndefined();
+  });
+
+  it("isValidNpwpInput sepakat dengan aturannya", () => {
+    // Dua jalur (validator & helper) tidak boleh berbeda pendapat: satu dipakai
+    // form, satu bisa dipakai kode lain, dan perbedaan di antaranya berarti
+    // nomor yang lolos di satu tempat ditolak di tempat lain.
+    for (const v of ["12.345.678.9-012.345", "123", "", "12345678901234"]) {
+      const lolosAturan = r(v, {}) === undefined;
+      const lolosHelper = v === "" ? true : isValidNpwpInput(v);
+      expect(lolosAturan, `tidak sepakat untuk ${JSON.stringify(v)}`).toBe(lolosHelper);
+    }
+  });
+});

package/src/wizard-stepper.test.tsx

@@ -0,0 +1,121 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { act, renderHook } from "@testing-library/react";
+import { WizardStepper } from "./wizard-stepper";
+import { useCrudForm } from "./workflow/use-crud-form";
+import type { CrudForm } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// ─────────────────────────────────────────────────────────────────────────────
+// Stepper: gembok harus DIBEDAKAN dari sekadar "belum aktif"
+// ─────────────────────────────────────────────────────────────────────────────
+describe("WizardStepper", () => {
+  it("langkah terkunci TIDAK bisa diklik, yang menunggu bisa", () => {
+    // Menyamakan "terkunci" dengan "belum aktif" membuat operator mengira
+    // seluruh sisa form terkunci padahal hanya langkah pertama yang menahan.
+    const onSelect = vi.fn();
+    render(
+      <WizardStepper
+        title="Langkah"
+        onSelect={onSelect}
+        steps={[
+          { label: "Satu", state: "selesai" },
+          { label: "Dua", state: "aktif" },
+          { label: "Tiga", state: "menunggu" },
+          { label: "Empat", state: "terkunci" },
+        ]}
+      />,
+    );
+
+    screen.getByText("Empat").closest("button")!.click();
+    expect(onSelect, "langkah terkunci tidak boleh memanggil onSelect").not.toHaveBeenCalled();
+
+    screen.getByText("Tiga").closest("button")!.click();
+    expect(onSelect).toHaveBeenCalledWith(2);
+  });
+
+  it("menampilkan sublabel bila ada, dan tidak memaksanya", () => {
+    render(
+      <WizardStepper
+        title="Langkah"
+        steps={[
+          { label: "Data Nasabah", sublabel: "Identitas & informasi dasar", state: "aktif" },
+          { label: "Tanpa Sublabel", state: "menunggu" },
+        ]}
+      />,
+    );
+    expect(screen.getByText("Identitas & informasi dasar")).toBeTruthy();
+    expect(screen.getByText("Tanpa Sublabel")).toBeTruthy();
+  });
+
+  it("judul dipakai sebagai label navigasi — stepper bisa ditemukan pembaca layar", () => {
+    render(<WizardStepper title="Langkah Pengisian" steps={[{ label: "A", state: "aktif" }]} />);
+    expect(screen.getByRole("navigation", { name: "Langkah Pengisian" })).toBeTruthy();
+  });
+});
+
+// ─────────────────────────────────────────────────────────────────────────────
+// goToPage: stepper tidak boleh jadi pintu belakang
+// ─────────────────────────────────────────────────────────────────────────────
+function schema(gate?: (from: number, d: D) => { ok: boolean; message?: string }): CrudForm<D> {
+  return {
+    title: { create: "c", edit: "e", view: "v" },
+    emptyData: {},
+    layout: {
+      type: "wizard",
+      canLeavePage: gate,
+      pages: [
+        { label: "Satu", sections: [] },
+        { label: "Dua", sections: [] },
+        { label: "Tiga", sections: [] },
+      ],
+    },
+  } as CrudForm<D>;
+}
+
+describe("goToPage", () => {
+  it("MAJU lewat stepper tetap melewati gerbang — bukan pintu belakang", async () => {
+    // Kalau stepper bisa melompati gerbang, seluruh verifikasi Langkah 1 bisa
+    // dilewati hanya dengan mengklik langkah 3 — dan tidak ada yang berbunyi.
+    const { result } = renderHook(() =>
+      useCrudForm<D>({ schema: schema(() => ({ ok: false, message: "ditahan" })), mode: "create" }),
+    );
+
+    await act(async () => {
+      result.current.goToPage(2);
+    });
+
+    expect(result.current.page, "harus tetap di halaman 0").toBe(0);
+    expect(result.current.error).toBe("ditahan");
+  });
+
+  it("MUNDUR selalu boleh, meski gerbangnya menahan", async () => {
+    // Menahan operator melihat kembali apa yang ia tulis tidak melindungi
+    // apa pun — datanya sudah ada di form.
+    const { result } = renderHook(() =>
+      useCrudForm<D>({ schema: schema(), mode: "create" }),
+    );
+    await act(async () => {
+      await result.current.goNext();
+    });
+    await act(async () => {
+      await result.current.goNext();
+    });
+    expect(result.current.page).toBe(2);
+
+    await act(async () => {
+      result.current.goToPage(0);
+    });
+    expect(result.current.page).toBe(0);
+  });
+
+  it("indeks di luar jangkauan diabaikan, bukan melempar", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    await act(async () => {
+      result.current.goToPage(-1);
+      result.current.goToPage(99);
+    });
+    expect(result.current.page).toBe(0);
+  });
+});

package/src/wizard-stepper.tsx

@@ -0,0 +1,189 @@
+"use client";
+import type { ReactNode } from "react";
+
+/**
+ * Stepper VERTIKAL di sisi kanan — bentuk baku wizard (keputusan PM 2026-08-16).
+ *
+ * Menggantikan ProgressIndicator horizontal Carbon. Alasannya bukan selera:
+ * wizard di sini punya langkah yang TERKUNCI, dan gembok perlu tempat untuk
+ * terbaca. Pada stepper horizontal, lima langkah berikut sublabel dan ikonnya
+ * berdesakan sampai keduanya hilang — yang tersisa hanya lingkaran bernomor,
+ * dan operator tidak bisa tahu langkah mana yang belum boleh dibuka sampai ia
+ * menekannya.
+ *
+ * Tiga keadaan, dan gembok DIBEDAKAN dari sekadar "belum aktif":
+ *
+ *   selesai  → sudah dilewati
+ *   aktif    → sedang diisi
+ *   terkunci → belum boleh dibuka (gembok)
+ *
+ * Langkah yang belum aktif TAPI boleh dibuka tidak diberi gembok. Menyamakan
+ * keduanya membuat operator mengira seluruh sisa form terkunci padahal hanya
+ * langkah pertama yang menahan.
+ */
+
+export type WizardStepState = "selesai" | "aktif" | "terkunci" | "menunggu";
+
+export type WizardStepView = {
+  label: string;
+  sublabel?: string;
+  state: WizardStepState;
+};
+
+function Ikon({ state, nomor }: { state: WizardStepState; nomor: number }): ReactNode {
+  const dasar = {
+    width: "1.75rem",
+    height: "1.75rem",
+    borderRadius: "50%",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    fontSize: "0.8125rem",
+    flexShrink: 0,
+  } as const;
+
+  if (state === "aktif") {
+    return (
+      <span style={{ ...dasar, background: "var(--cds-interactive, #0f62fe)", color: "#fff" }}>
+        {nomor}
+      </span>
+    );
+  }
+  if (state === "selesai") {
+    return (
+      <span
+        style={{ ...dasar, background: "var(--cds-support-success, #24a148)", color: "#fff" }}
+        aria-label="selesai"
+      >
+        ✓
+      </span>
+    );
+  }
+  if (state === "terkunci") {
+    return (
+      <span
+        style={{
+          ...dasar,
+          border: "1px solid var(--cds-border-subtle, #c6c6c6)",
+          color: "var(--cds-text-disabled, #a8a8a8)",
+        }}
+        aria-label="terkunci"
+      >
+        🔒
+      </span>
+    );
+  }
+  return (
+    <span
+      style={{
+        ...dasar,
+        border: "1px solid var(--cds-border-subtle, #c6c6c6)",
+        color: "var(--cds-text-secondary, #525252)",
+      }}
+    >
+      {nomor}
+    </span>
+  );
+}
+
+export function WizardStepper({
+  steps,
+  title,
+  onSelect,
+}: {
+  steps: WizardStepView[];
+  title: string;
+  /** Dipanggil saat langkah diklik. Langkah TERKUNCI tidak pernah memanggilnya. */
+  onSelect?: (index: number) => void;
+}) {
+  return (
+    <nav
+      aria-label={title}
+      style={{
+        width: "15rem",
+        flexShrink: 0,
+        display: "flex",
+        flexDirection: "column",
+        gap: "0.25rem",
+      }}
+    >
+      <div
+        style={{
+          fontSize: "0.6875rem",
+          letterSpacing: "0.08em",
+          textTransform: "uppercase",
+          color: "var(--cds-text-secondary, #525252)",
+          marginBottom: "0.5rem",
+        }}
+      >
+        {title}
+      </div>
+
+      {steps.map((s, i) => {
+        const bisaDiklik = s.state !== "terkunci" && Boolean(onSelect);
+        return (
+          <div key={i} style={{ display: "flex", gap: "0.75rem" }}>
+            {/* Garis penghubung: menandai bahwa langkah-langkah ini SATU urutan,
+                bukan daftar menu yang bisa dimasuki dari mana saja. */}
+            <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+              <Ikon state={s.state} nomor={i + 1} />
+              {i < steps.length - 1 ? (
+                <div
+                  style={{
+                    width: 1,
+                    flex: 1,
+                    minHeight: "1.25rem",
+                    background: "var(--cds-border-subtle, #e0e0e0)",
+                  }}
+                />
+              ) : null}
+            </div>
+
+            <button
+              type="button"
+              disabled={!bisaDiklik}
+              onClick={bisaDiklik ? () => onSelect?.(i) : undefined}
+              style={{
+                background: "none",
+                border: "none",
+                padding: "0.125rem 0 1rem",
+                textAlign: "left",
+                cursor: bisaDiklik ? "pointer" : "default",
+                font: "inherit",
+              }}
+            >
+              <div
+                style={{
+                  fontSize: "0.875rem",
+                  fontWeight: s.state === "aktif" ? 600 : 400,
+                  color:
+                    s.state === "aktif"
+                      ? "var(--cds-link-primary, #0f62fe)"
+                      : s.state === "terkunci"
+                        ? "var(--cds-text-disabled, #a8a8a8)"
+                        : "var(--cds-text-primary, #161616)",
+                }}
+              >
+                {s.label}
+              </div>
+              {s.sublabel ? (
+                <div
+                  style={{
+                    fontSize: "0.75rem",
+                    color:
+                      s.state === "terkunci"
+                        ? "var(--cds-text-disabled, #a8a8a8)"
+                        : "var(--cds-text-secondary, #525252)",
+                    marginTop: "0.125rem",
+                  }}
+                >
+                  {s.sublabel}
+                </div>
+              ) : null}
+            </button>
+          </div>
+        );
+      })}
+    </nav>
+  );
+}

package/src/workflow/use-crud-form.ts

@@ -35,6 +35,16 @@ export type UseCrudFormReturn<TData extends Record<string, unknown>> = {
   canGoPrev: boolean;
   goNext: () => Promise<void>;
   goPrev: () => void;
+  /**
+   * Lompat ke halaman tertentu lewat stepper.
+   *
+   * MUNDUR selalu boleh — data yang sudah diisi tidak hilang, dan menahan
+   * operator melihat kembali apa yang ia tulis tidak melindungi apa pun.
+   * MAJU diteruskan ke goNext supaya melewati gerbang YANG SAMA dengan tombol
+   * Berikutnya; kalau tidak, stepper menjadi pintu belakang yang melewati
+   * verifikasi.
+   */
+  goToPage: (target: number) => void;
   handleSave: () => Promise<void>;
 };
 
@@ -85,7 +95,16 @@ export function useCrudForm<TData extends Record<string, unknown>>({
   );
 
   const validatePage = (pageIndex: number) => {
-    return runFieldValidation(collectPageFields(schema.layout, pageIndex), form, mode, labels);
+    // mode & form DIWAJIBKAN di sini: tanpanya collectPageFields tidak bisa
+    // mengevaluasi predikat section.hidden, dan field di panel yang belum
+    // terbuka ikut divalidasi — operator melihat "wajib diisi" untuk field yang
+    // tidak ada di layarnya.
+    return runFieldValidation(
+      collectPageFields(schema.layout, pageIndex, mode, form),
+      form,
+      mode,
+      labels,
+    );
   };
 
   const validateAll = () => {
@@ -171,6 +190,17 @@ export function useCrudForm<TData extends Record<string, unknown>>({
     }
   };
 
+  const goToPage = (target: number) => {
+    if (target === page || target < 0 || target >= pageCount) return;
+    if (target < page) {
+      setServerError(null);
+      setHasValidationError(false);
+      setPage(target);
+      return;
+    }
+    void goNext();
+  };
+
   return {
     form,
     setForm,
@@ -185,6 +215,7 @@ export function useCrudForm<TData extends Record<string, unknown>>({
     canGoPrev: page > 0,
     goNext,
     goPrev,
+    goToPage,
     handleSave,
   };
 }