@isi-ui7/bos7-shared 0.3.6 → 0.3.8

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-rules.d.ts

@@ -24,6 +24,14 @@ export declare const Rules: {
      * `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.6",
+  "version": "0.3.8",
   "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,61 @@ 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}
+                // Pada wizard, form MENGISI kolom kirinya. Default global
+                // "two-thirds" membatasi form di dalam kolom yang SUDAH
+                // dipersempit stepper — hasilnya sepertiga ruang kosong
+                // menganga di antara keduanya. Penulis skema tetap bisa
+                // menyempitkannya dgn menyetel schema.width secara eksplisit.
+                width={width ?? "full"}
+              />
+            ) : 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/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.tsx

@@ -22,6 +22,7 @@ import {
   normalizePhoneInput,
   parseDecimalStrict,
   sanitizeDecimalInput,
+  normalizeNpwpInput,
 } from "./form-numeric";
 import {
   getUi7FormContractClassName,
@@ -944,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>> = (
@@ -83,6 +83,19 @@ export const Rules = {
     };
   },
 
+  /**
+   * 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: "13.5rem",
+        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>;
 };
 
@@ -180,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,
@@ -194,6 +215,7 @@ export function useCrudForm<TData extends Record<string, unknown>>({
     canGoPrev: page > 0,
     goNext,
     goPrev,
+    goToPage,
     handleSave,
   };
 }