@isi-ui7/bos7-shared 0.3.10 → 0.4.0

package/dist/crud-types.d.ts

@@ -75,6 +75,22 @@ export type CrudListSchema = {
     columns: Record<string, unknown>;
     popupMenuItems: CrudPopupMenuItem[];
     addButtonLabel: string;
+    /**
+     * Tampilkan tombol "Tambah" di toolbar daftar. Default **true**.
+     *
+     * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga
+     * tombol di toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu
+     * halaman bukan sekadar mubazir: keduanya harus dijaga tetap sama, dan yang
+     * satu akan tertinggal saat rutenya berubah — tanpa berbunyi sebagai galat.
+     *
+     * Opsional dan default true SUPAYA 109 pemakai lain nol berubah; hanya yang
+     * menyetel `false` yang kehilangan tombolnya.
+     *
+     * ⚠️ Jangan setel `false` kalau modulnya nol punya jalur lain ke halaman
+     * create — halamannya tetap ada, hanya nol bisa dicapai siapa pun, dan itu
+     * bentuk kerusakan yang nol terlihat di uji mana pun.
+     */
+    showAddButton?: boolean;
     /** Enable column sorting. Defaults to true. */
     showSort?: boolean;
     /** Enable search bar. Defaults to true. */
@@ -111,6 +127,11 @@ export type CrudListSchema = {
      * "(all)" removes the param. Mirrors `showInactiveToggle`'s additionalParams
      * wiring but for an arbitrary enum column (e.g. `vendor_type`). Additive +
      * backward-compatible: omit it and the toolbar renders exactly as before.
+     *
+     * @deprecated Use `filterFields` (a single `{ type: "select", ... }` entry
+     * covers this exact case). Kept working, unchanged, so existing callers
+     * never have to move — the two coexist because they write to different
+     * query params and share the same additionalParams merge.
      */
     filterSelect?: {
         /** Query param name the backend reads (e.g. "vendor_type"). */
@@ -124,6 +145,51 @@ export type CrudListSchema = {
         /** Label for the "no filter" option. Default "Semua". */
         allLabel?: string;
     };
+    /**
+     * Granular toolbar filters: N independent fields, each contributing one
+     * query param via the SAME additionalParams merge `filterSelect` and
+     * `showInactiveToggle` already use — `@isi-ui7/data-table` is untouched.
+     * Additive + backward-compatible: omit it and the toolbar renders exactly
+     * as before. Coexists with `filterSelect`/`showInactiveToggle` as long as
+     * `param` names don't collide (caller's responsibility, same as today).
+     *
+     * K-6 (user, 2026-08-26): prototype daftar nasabah wants filtering finer
+     * than one search bar + one dropdown. `filterSelect` proved the mechanism
+     * for exactly one enum column; this generalizes it to N fields of mixed
+     * type instead of duplicating that mechanism per field. The union is
+     * closed but extensible — a new variant (e.g. `dateRange`) is additive to
+     * this type, not a breaking change to it.
+     *
+     * ⚠️ This is FRONTEND capacity only. Each `param` still needs the target
+     * service's own query endpoint to read it and filter server-side — adding
+     * a field here does nothing until the backend honors that param.
+     */
+    filterFields?: CrudFilterFieldDef[];
+};
+/**
+ * One granular toolbar filter field (see `CrudListSchema.filterFields`).
+ * Closed union so a new widget type is additive here, not a breaking change
+ * to `CrudListSchema` itself.
+ */
+export type CrudFilterFieldDef = {
+    type: "select";
+    /** Query param name the backend reads. */
+    param: string;
+    /** Toolbar label for the field. */
+    label: string;
+    options: Array<{
+        value: string;
+        label: string;
+    }>;
+    /** Label for the "no filter" option. Default "Semua". */
+    allLabel?: string;
+} | {
+    type: "text";
+    /** Query param name the backend reads. */
+    param: string;
+    /** Toolbar label for the field. */
+    label: string;
+    placeholder?: string;
 };
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {
     /** Omit to use i18n default ("Konfirmasi Hapus"). */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.3.10",
+  "version": "0.4.0",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -70,7 +70,7 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.7",
+    "@isi-ui7/corporate-themes": ">=0.2.9",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.3",
@@ -106,13 +106,13 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.7",
+    "@isi-ui7/corporate-themes": "0.2.9",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/i18n": "0.2.3",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.2",
     "@isi-ui7/ui-shell": "0.2.8",
+    "@isi-ui7/i18n": "0.2.3",
     "@isi-ui7/realtime": "0.2.3"
   },
   "dependencies": {

package/src/crud-components.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { type ReactNode, useCallback, useEffect, useState } from "react";
+import { type ReactNode, useCallback, useEffect, useRef, useState } from "react";
 import { Add } from "@carbon/icons-react";
 import {
   Button,
@@ -13,13 +13,14 @@ import {
   Select,
   SelectItem,
   TextArea,
+  TextInput,
   ToastNotification,
   Toggle,
 } from "@carbon/react";
 import { ServerDataTable } from "@isi-ui7/data-table";
 import type { I_DataTblColumn } from "@isi-ui7/data-table";
-import type { CrudCustomActionSchema, CrudDeleteSchema, CrudListSchema } from "./crud-types";
-import type { CrudForm, FormMode } from "./form-types";
+import type { CrudCustomActionSchema, CrudDeleteSchema, CrudFilterFieldDef, CrudListSchema } from "./crud-types";
+import type { CrudForm, FormMode, FormPageDef } from "./form-types";
 import type { Ui7FormDensity } from "./style-contract";
 import { SchemaFormRenderer } from "./form-renderer";
 import { WizardStepper, type WizardStepState } from "./wizard-stepper";
@@ -79,11 +80,57 @@ export function SharedCrudListPage({
   const [filterValue, setFilterValue] = useState("");
   const hasInactiveToggle = Boolean(schema.showInactiveToggle);
   const hasFilterSelect = Boolean(schema.filterSelect);
+
+  // Granular toolbar filters (opt-in via schema.filterFields) — N fields,
+  // each contributing one param to the SAME additionalParams merge as
+  // filterSelect/showInactiveToggle above.
+  //
+  // Two states per field, not one: `filterFieldValues` is what the widget
+  // shows (updates on every keystroke, so typing feels immediate);
+  // `filterFieldCommitted` is what actually reaches additionalParams (and
+  // therefore triggers a refetch). For `type: "select"` they're set
+  // together — a discrete pick, same as filterSelect's existing immediate
+  // commit. For `type: "text"` the commit is DEBOUNCED: this mirrors the
+  // codebase's own precedent for free-text-triggers-a-fetch
+  // (OffsetDataTable's search box debounces the same way) — committing
+  // every keystroke straight to a network request is the one inconsistency
+  // an un-debounced text field would introduce that filterSelect's select
+  // never had.
+  const FILTER_TEXT_DEBOUNCE_MS = 400;
+  const [filterFieldValues, setFilterFieldValues] = useState<Record<string, string>>({});
+  const [filterFieldCommitted, setFilterFieldCommitted] = useState<Record<string, string>>({});
+  const filterFieldTimers = useRef<Record<string, ReturnType<typeof setTimeout>>>({});
+  useEffect(() => {
+    const timers = filterFieldTimers.current;
+    return () => {
+      for (const t of Object.values(timers)) clearTimeout(t);
+    };
+  }, []);
+  const setFilterFieldValue = useCallback((field: CrudFilterFieldDef, value: string) => {
+    setFilterFieldValues((prev) => ({ ...prev, [field.param]: value }));
+    if (field.type === "text") {
+      if (filterFieldTimers.current[field.param]) {
+        clearTimeout(filterFieldTimers.current[field.param]);
+      }
+      filterFieldTimers.current[field.param] = setTimeout(() => {
+        setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
+      }, FILTER_TEXT_DEBOUNCE_MS);
+    } else {
+      setFilterFieldCommitted((prev) => ({ ...prev, [field.param]: value }));
+    }
+  }, []);
+  const hasFilterFields = Boolean(schema.filterFields?.length);
+
   const additionalParams =
-    hasInactiveToggle || hasFilterSelect
+    hasInactiveToggle || hasFilterSelect || hasFilterFields
       ? {
           ...(hasInactiveToggle ? { [inactiveParam]: showInactive ? "true" : "" } : {}),
           ...(hasFilterSelect ? { [schema.filterSelect!.param]: filterValue } : {}),
+          ...(hasFilterFields
+            ? Object.fromEntries(
+                schema.filterFields!.map((f) => [f.param, filterFieldCommitted[f.param] ?? ""]),
+              )
+            : {}),
         }
       : undefined;
   return (
@@ -133,10 +180,43 @@ export function SharedCrudListPage({
                   </Select>
                 </div>
               ) : null}
+              {schema.filterFields?.map((f) =>
+                f.type === "select" ? (
+                  <div key={f.param} style={{ minWidth: "10rem" }}>
+                    <Select
+                      id={`filter-field-${schema.apiPath}-${f.param}`}
+                      labelText={f.label}
+                      hideLabel
+                      size="sm"
+                      value={filterFieldValues[f.param] ?? ""}
+                      onChange={(e) => setFilterFieldValue(f, e.target.value)}
+                    >
+                      <SelectItem value="" text={f.allLabel ?? "Semua"} />
+                      {f.options.map((opt) => (
+                        <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                      ))}
+                    </Select>
+                  </div>
+                ) : (
+                  <div key={f.param} style={{ minWidth: "10rem" }}>
+                    <TextInput
+                      id={`filter-field-${schema.apiPath}-${f.param}`}
+                      labelText={f.label}
+                      hideLabel
+                      size="sm"
+                      placeholder={f.placeholder ?? f.label}
+                      value={filterFieldValues[f.param] ?? ""}
+                      onChange={(e) => setFilterFieldValue(f, e.target.value)}
+                    />
+                  </div>
+                ),
+              )}
               {toolbarExtra}
-              <Button renderIcon={Add} size="sm" onClick={onAdd}>
-                {schema.addButtonLabel || labels.next}
-              </Button>
+              {(schema.showAddButton ?? true) ? (
+                <Button renderIcon={Add} size="sm" onClick={onAdd}>
+                  {schema.addButtonLabel || labels.next}
+                </Button>
+              ) : null}
             </div>
           }
         />
@@ -501,15 +581,21 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
    * dilewati: footer mode-view sengaja nol tombol Lanjut, jadi satu-satunya
    * jalan maju adalah menebak bahwa stepper-nya bisa diklik.
    *
-   * Karena itu di luar `create` wizard dirender DATAR: seluruh halaman
-   * berurutan dalam satu aliran, tanpa stepper dan tanpa Lanjut/Kembali.
-   * Yang HILANG hanya navigasinya; isinya tidak ada yang dibuang.
+   * Karena itu di luar `create` wizard dirender sebagai TAB biasa: halaman
+   * tetap terpisah dan bisa dilompati bebas, tanpa stepper, tanpa urutan
+   * wajib, tanpa Lanjut/Kembali. Yang HILANG hanya PEMANDUANNYA; isinya
+   * tidak ada yang dibuang.
+   *
+   * (2026-08-19 ini sempat dirender DATAR — satu aliran panjang. Diganti
+   * 2026-08-20: pada form 5 langkah hasilnya 13 panel beruntun dalam satu
+   * kolom yang sangat panjang. Yang dilarang adalah wizard MEMANDU, bukan
+   * halamannya terpisah; tab memisahkan tanpa memandu.)
    *
    * Aman terhadap validasi: `handleSave` memakai `validateAll()`, yang sudah
    * mengumpulkan field dari SELURUH halaman tanpa peduli halaman aktif —
-   * jadi menyimpan dari bentuk datar memeriksa hal yang sama persis.
+   * jadi menyimpan dari bentuk bertab memeriksa hal yang sama persis.
    *
-   * Keputusan PM 2026-08-19. Sengaja dipasang di sini, BUKAN di skema tiap
+   * Keputusan PM 2026-08-19, direvisi 2026-08-20. Sengaja dipasang di sini, BUKAN di skema tiap
    * app: ini keputusan tentang cara me-render sebuah layout, dan menaruhnya
    * di skema berarti tiap app harus mengingat untuk mengulanginya.
    */
@@ -534,117 +620,80 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
       );
     }
 
-    if (layout.type === "tabs") {
-      return (
-        <PageBody>
-          {errBanner}
-          <div>
-            <div
-              role="tablist"
-              style={{
-                display: "flex",
-                borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
-                marginBottom: 0,
-              }}
-            >
-              {layout.pages.map((pg, i) => (
-                <button
-                  key={i}
-                  type="button"
-                  role="tab"
-                  aria-selected={i === activeTab}
-                  onClick={() => setActiveTab(i)}
-                  style={{
-                    padding: "0.75rem 1rem",
-                    background: "none",
-                    border: "none",
-                    borderBottom:
-                      i === activeTab
-                        ? "2px solid var(--cds-interactive-01, #0f62fe)"
-                        : "2px solid transparent",
-                    marginBottom: "-1px",
-                    cursor: "pointer",
-                    fontSize: "0.875rem",
-                    lineHeight: "1.25rem",
-                    fontWeight: i === activeTab ? 600 : 400,
-                    color:
-                      i === activeTab
-                        ? "var(--cds-text-primary, #161616)"
-                        : "var(--cds-text-secondary, #525252)",
-                  }}
-                >
-                  {pg.label}
-                </button>
-              ))}
-            </div>
-            {layout.pages.map((pg, i) => (
-              <div key={i} style={{ display: i === activeTab ? "block" : "none" }}>
-                <SchemaFormRenderer
-                  mode={mode}
-                  value={form}
-                  sections={pg.sections}
-                  errors={fieldErrors}
-                  disabled={saving}
-                  onChange={setForm}
-                  density={density}
-                  width={width}
-                />
-              </div>
-            ))}
-          </div>
-        </PageBody>
-      );
-    }
-
-    // Wizard di luar `create` — datar, tanpa stepper. Lihat `wizardNav`.
-    //
-    // Syaratnya ditulis LENGKAP (`layout.type === "wizard" && !wizardNav`),
-    // bukan `!wizardNav` saja. Keduanya setara hari ini, tapi bentuk pendek
-    // benar hanya karena `single-page` dan `tabs` sudah return di atas — ia
-    // cabang *sisa*, bukan cabang *wizard*. Varian layout ke-5 yang lupa
-    // ditaruh di atas sini akan ikut dirender datar tanpa galat, tanpa lint,
-    // tanpa uji yang menahan. Dengan bentuk lengkap, kelalaian yang sama
-    // menjadi galat `tsc` di `layout.pages` beberapa baris di bawah.
-    if (layout.type === "wizard" && !wizardNav) {
-      return (
-        <PageBody>
-          {errBanner}
-          {layout.pages.map((pg, i) => (
-            <div key={i} style={{ marginBottom: "2.5rem" }}>
-              {/* Label halaman tetap dirender — sebagai JUDUL KELOMPOK, bukan
-                  navigasi. Membuang steppernya tidak boleh ikut membuang satu-
-                  satunya tempat `pg.label`/`pg.sublabel` pernah tampil: pada
-                  form 5 langkah, hasilnya 13 panel beruntun tanpa satu pun
-                  pemisah tingkat-halaman. Yang dilarang PM adalah navigasinya,
-                  bukan judulnya. */}
-              <div
+    /**
+     * Halaman ber-tab. Dipakai DUA layout: `tabs`, dan `wizard` di luar
+     * `create` (lihat `wizardNav`).
+     *
+     * Sengaja SATU fungsi, bukan dua blok kembar. Keduanya wajib tetap
+     * terlihat sama, dan salinan kedua akan tertinggal saat yang satu
+     * disunting — tanpa berbunyi sebagai galat, karena keduanya tetap
+     * me-render tab yang bekerja.
+     */
+    const renderTabbedPages = (pages: FormPageDef<TData>[]) => (
+      <PageBody>
+        {errBanner}
+        <div>
+          <div
+            role="tablist"
+            style={{
+              display: "flex",
+              borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+              marginBottom: 0,
+            }}
+          >
+            {pages.map((pg, i) => (
+              <button
+                key={i}
+                type="button"
+                role="tab"
+                aria-selected={i === activeTab}
+                onClick={() => setActiveTab(i)}
                 style={{
-                  marginBottom: "1rem",
-                  paddingBottom: "0.5rem",
-                  borderBottom: "1px solid var(--cds-border-subtle-01, #e0e0e0)",
+                  padding: "0.75rem 1rem",
+                  background: "none",
+                  border: "none",
+                  borderBottom:
+                    i === activeTab
+                      ? "2px solid var(--cds-interactive-01, #0f62fe)"
+                      : "2px solid transparent",
+                  marginBottom: "-1px",
+                  cursor: "pointer",
+                  fontSize: "0.875rem",
+                  lineHeight: "1.25rem",
+                  fontWeight: i === activeTab ? 600 : 400,
+                  color:
+                    i === activeTab
+                      ? "var(--cds-text-primary, #161616)"
+                      : "var(--cds-text-secondary, #525252)",
                 }}
               >
+                {pg.label}
+              </button>
+            ))}
+          </div>
+          {pages.map((pg, i) => (
+            <div
+              key={i}
+              role="tabpanel"
+              style={{ display: i === activeTab ? "block" : "none" }}
+            >
+              {/* `sublabel` dirender di dalam panel, bukan di tombol tab —
+                  tombolnya cuma memuat label supaya barisnya tidak melebar.
+                  Ia HARUS ada di salah satu dari keduanya: pada wizard, tempat
+                  `sublabel` pernah tampil adalah steppernya, dan stepper itu
+                  yang barusan dibuang. Tanpa baris ini 5 string lenyap dari
+                  layar tanpa satu pun galat. */}
+              {pg.sublabel ? (
                 <div
                   style={{
-                    fontSize: "1rem",
-                    fontWeight: 600,
-                    color: "var(--cds-text-primary, #161616)",
+                    fontSize: "0.75rem",
+                    color: "var(--cds-text-secondary, #525252)",
+                    margin: "0.75rem 0 0",
                   }}
                 >
-                  {pg.label}
+                  {pg.sublabel}
                 </div>
-                {pg.sublabel ? (
-                  <div
-                    style={{
-                      fontSize: "0.75rem",
-                      color: "var(--cds-text-secondary, #525252)",
-                      marginTop: "0.125rem",
-                    }}
-                  >
-                    {pg.sublabel}
-                  </div>
-                ) : null}
-              </div>
+              ) : null}
               <SchemaFormRenderer
                 mode={mode}
                 value={form}
@@ -654,16 +703,33 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                 onChange={setForm}
                 density={density}
                 // `width` apa adanya, BUKAN `width ?? "full"` seperti cabang
-                // wizard. `full` di sana berarti "penuhi kolom KIRI", jalan
-                // keluar untuk ruang yang dipersempit stepper. Di sini nol
-                // stepper, jadi alasannya hilang dan default kontrak
-                // ("two-thirds") kembali berlaku.
+                // wizard ber-stepper. `full` di sana berarti "penuhi kolom
+                // KIRI", jalan keluar untuk ruang yang dipersempit stepper.
+                // Di sini nol stepper, jadi alasannya hilang dan default
+                // kontrak ("two-thirds") kembali berlaku.
                 width={width}
               />
             </div>
           ))}
-        </PageBody>
-      );
+        </div>
+      </PageBody>
+    );
+
+    if (layout.type === "tabs") {
+      return renderTabbedPages(layout.pages);
+    }
+
+    // Wizard di luar `create`. Lihat `wizardNav`.
+    //
+    // Syaratnya ditulis LENGKAP (`layout.type === "wizard" && !wizardNav`),
+    // bukan `!wizardNav` saja. Keduanya setara hari ini, tapi bentuk pendek
+    // benar hanya karena `single-page` dan `tabs` sudah return di atas — ia
+    // cabang *sisa*, bukan cabang *wizard*. Varian layout ke-5 yang lupa
+    // ditaruh di atas sini akan ikut dirender bertab tanpa galat, tanpa lint,
+    // tanpa uji yang menahan. Dengan bentuk lengkap, kelalaian yang sama
+    // menjadi galat `tsc` di `layout.pages`.
+    if (layout.type === "wizard" && !wizardNav) {
+      return renderTabbedPages(layout.pages);
     }
 
     const currentPage = layout.pages[page];

package/src/crud-filter-fields.test.tsx

@@ -0,0 +1,156 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+// K-6 (user, 2026-08-26): CrudListSchema.filterFields — N granular toolbar
+// filters, generalizing filterSelect (1 enum dropdown) to mixed-type fields.
+// Additive + backward-compatible: omit it, toolbar renders exactly as before.
+//
+// ServerDataTable menarik jaringan & Carbon DataTable penuh; yang diuji di
+// sini TOOLBAR-nya dan additionalParams yang dikirim ke ServerDataTable, jadi
+// tabelnya dimock — additionalParams diserialisasi ke satu node supaya test
+// bisa membacanya tanpa mock jaringan sungguhan.
+vi.mock("@isi-ui7/data-table", () => ({
+  ServerDataTable: ({
+    toolbarActions,
+    additionalParams,
+  }: {
+    toolbarActions?: React.ReactNode;
+    additionalParams?: Record<string, string>;
+  }) => (
+    <div>
+      <div data-testid="toolbar">{toolbarActions}</div>
+      <div data-testid="params">{JSON.stringify(additionalParams ?? {})}</div>
+    </div>
+  ),
+}));
+
+import { SharedCrudListPage } from "./crud-components";
+import type { CrudListSchema } from "./crud-types";
+
+const dasar: CrudListSchema = {
+  title: "Daftar",
+  apiPath: "/api/x",
+  columns: { a: { title: "A" } },
+  popupMenuItems: [],
+  addButtonLabel: "Tambah",
+};
+
+function paramsRendered(): Record<string, string> {
+  return JSON.parse(screen.getByTestId("params").textContent ?? "{}");
+}
+
+describe("CrudListSchema.filterFields", () => {
+  it("DEFAULT (omit) — toolbar params kosong, gerbang kompatibilitas", () => {
+    render(<SharedCrudListPage schema={dasar} onAdd={() => {}} onPopupClick={() => {}} />);
+    expect(paramsRendered()).toEqual({});
+  });
+
+  it("field type:select merender Select dan mengirim param SEGERA saat dipilih", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [
+            {
+              type: "select",
+              param: "identity_type",
+              label: "Jenis Identitas",
+              options: [{ value: "KTP", label: "KTP" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ identity_type: "" });
+
+    const select = screen.getByLabelText("Jenis Identitas") as HTMLSelectElement;
+    await user.selectOptions(select, "KTP");
+
+    expect(paramsRendered()).toEqual({ identity_type: "KTP" });
+  });
+
+  it("field type:text merender TextInput dan DEBOUNCE param (nol segera saat mengetik)", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [{ type: "text", param: "full_name", label: "Nama" }],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ full_name: "" });
+
+    const input = screen.getByLabelText("Nama") as HTMLInputElement;
+    await user.type(input, "Budi");
+
+    // 🔑 Klaim inti: mengetik TIDAK segera mengirim param -- kalau ini gagal,
+    // field teks refetch di SETIAP keystroke (inkonsisten dgn search bar
+    // bawaan, yang sudah didebounce di OffsetDataTable).
+    expect(paramsRendered()).toEqual({ full_name: "" });
+    expect(input.value).toBe("Budi"); // tapi WIDGET-nya tetap responsif
+
+    await waitFor(() => expect(paramsRendered()).toEqual({ full_name: "Budi" }), { timeout: 1000 });
+  });
+
+  it("filterSelect (lama) DAN filterFields (baru) coexist tanpa saling menimpa", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterSelect: { param: "status", label: "Status", options: [{ value: "ACTIVE", label: "Aktif" }] },
+          filterFields: [
+            {
+              type: "select",
+              param: "branch_code",
+              label: "Cabang",
+              options: [{ value: "001", label: "Cabang 001" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(paramsRendered()).toEqual({ status: "", branch_code: "" });
+
+    await user.selectOptions(screen.getByLabelText("Cabang"), "001");
+    expect(paramsRendered()).toEqual({ status: "", branch_code: "001" });
+  });
+
+  it("dua field granular independen — mengubah satu nol menyentuh yang lain", async () => {
+    const user = userEvent.setup();
+    render(
+      <SharedCrudListPage
+        schema={{
+          ...dasar,
+          filterFields: [
+            {
+              type: "select",
+              param: "identity_type",
+              label: "Jenis Identitas",
+              options: [{ value: "KTP", label: "KTP" }],
+            },
+            {
+              type: "select",
+              param: "branch_code",
+              label: "Cabang",
+              options: [{ value: "001", label: "Cabang 001" }],
+            },
+          ],
+        }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    await user.selectOptions(screen.getByLabelText("Jenis Identitas"), "KTP");
+    expect(paramsRendered()).toEqual({ identity_type: "KTP", branch_code: "" });
+  });
+});

package/src/crud-types.ts

@@ -56,6 +56,22 @@ export type CrudListSchema = {
   columns: Record<string, unknown>;
   popupMenuItems: CrudPopupMenuItem[];
   addButtonLabel: string;
+  /**
+   * Tampilkan tombol "Tambah" di toolbar daftar. Default **true**.
+   *
+   * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga
+   * tombol di toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu
+   * halaman bukan sekadar mubazir: keduanya harus dijaga tetap sama, dan yang
+   * satu akan tertinggal saat rutenya berubah — tanpa berbunyi sebagai galat.
+   *
+   * Opsional dan default true SUPAYA 109 pemakai lain nol berubah; hanya yang
+   * menyetel `false` yang kehilangan tombolnya.
+   *
+   * ⚠️ Jangan setel `false` kalau modulnya nol punya jalur lain ke halaman
+   * create — halamannya tetap ada, hanya nol bisa dicapai siapa pun, dan itu
+   * bentuk kerusakan yang nol terlihat di uji mana pun.
+   */
+  showAddButton?: boolean;
   /** Enable column sorting. Defaults to true. */
   showSort?: boolean;
   /** Enable search bar. Defaults to true. */
@@ -92,6 +108,11 @@ export type CrudListSchema = {
    * "(all)" removes the param. Mirrors `showInactiveToggle`'s additionalParams
    * wiring but for an arbitrary enum column (e.g. `vendor_type`). Additive +
    * backward-compatible: omit it and the toolbar renders exactly as before.
+   *
+   * @deprecated Use `filterFields` (a single `{ type: "select", ... }` entry
+   * covers this exact case). Kept working, unchanged, so existing callers
+   * never have to move — the two coexist because they write to different
+   * query params and share the same additionalParams merge.
    */
   filterSelect?: {
     /** Query param name the backend reads (e.g. "vendor_type"). */
@@ -102,8 +123,53 @@ export type CrudListSchema = {
     /** Label for the "no filter" option. Default "Semua". */
     allLabel?: string;
   };
+  /**
+   * Granular toolbar filters: N independent fields, each contributing one
+   * query param via the SAME additionalParams merge `filterSelect` and
+   * `showInactiveToggle` already use — `@isi-ui7/data-table` is untouched.
+   * Additive + backward-compatible: omit it and the toolbar renders exactly
+   * as before. Coexists with `filterSelect`/`showInactiveToggle` as long as
+   * `param` names don't collide (caller's responsibility, same as today).
+   *
+   * K-6 (user, 2026-08-26): prototype daftar nasabah wants filtering finer
+   * than one search bar + one dropdown. `filterSelect` proved the mechanism
+   * for exactly one enum column; this generalizes it to N fields of mixed
+   * type instead of duplicating that mechanism per field. The union is
+   * closed but extensible — a new variant (e.g. `dateRange`) is additive to
+   * this type, not a breaking change to it.
+   *
+   * ⚠️ This is FRONTEND capacity only. Each `param` still needs the target
+   * service's own query endpoint to read it and filter server-side — adding
+   * a field here does nothing until the backend honors that param.
+   */
+  filterFields?: CrudFilterFieldDef[];
 };
 
+/**
+ * One granular toolbar filter field (see `CrudListSchema.filterFields`).
+ * Closed union so a new widget type is additive here, not a breaking change
+ * to `CrudListSchema` itself.
+ */
+export type CrudFilterFieldDef =
+  | {
+      type: "select";
+      /** Query param name the backend reads. */
+      param: string;
+      /** Toolbar label for the field. */
+      label: string;
+      options: Array<{ value: string; label: string }>;
+      /** Label for the "no filter" option. Default "Semua". */
+      allLabel?: string;
+    }
+  | {
+      type: "text";
+      /** Query param name the backend reads. */
+      param: string;
+      /** Toolbar label for the field. */
+      label: string;
+      placeholder?: string;
+    };
+
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {
   /** Omit to use i18n default ("Konfirmasi Hapus"). */
   title?: string;

package/src/form-renderer-aria-required.test.tsx

@@ -0,0 +1,101 @@
+import { describe, it, expect } from "vitest";
+import { render } from "@testing-library/react";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// `field.validation.required` was already read correctly into `effectiveRequired`
+// (form-renderer.tsx) — it just never reached the actual Carbon control, only the
+// visual asterisk (`aria-hidden="true"`, decorative by design). Screen-reader users
+// got zero signal despite the field genuinely being required. Fixed by forwarding
+// `aria-required` (NOT native `required` — see the comment on `mkLabel` for why) to
+// each of the 9 distinct render sites. One `it` per site, each with its own positive
+// AND negative assertion, so a fix that lands on 8/9 sites cannot pass silently under
+// one aggregate green checkmark.
+//
+// `detail-rows`/`detail-modal` (table-shaped fields) and `lookup` (a separate
+// `@isi-ui7/lookup-input` package) are OUT OF SCOPE — there is no single control to
+// attach `aria-required` to (detail-rows/-modal) or the control isn't ours to change
+// (lookup). 9 sites, not more.
+
+function ariaRequiredOf(container: HTMLElement, key: string): string | null {
+  const el = container.querySelector(`#${key}`);
+  expect(el, `#${key} should exist in the rendered DOM`).toBeTruthy();
+  return el!.getAttribute("aria-required");
+}
+
+function renderField(field: FormSection<D>["fields"][number]) {
+  const section: FormSection<D> = { title: "T", fields: [field] };
+  return render(
+    <SchemaFormRenderer<D> mode="create" value={{}} sections={[section]} onChange={() => {}} />,
+  );
+}
+
+describe("aria-required forwarded to the actual control (not just the visual asterisk)", () => {
+  it("text (default) — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "nama", label: "Nama", type: "text", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "nama")).toBe("true");
+    const opt = renderField({ key: "nama", label: "Nama", type: "text" });
+    expect(ariaRequiredOf(opt.container, "nama")).toBeNull();
+  });
+
+  it("textarea — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "catatan", label: "Catatan", type: "textarea", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "catatan")).toBe("true");
+    const opt = renderField({ key: "catatan", label: "Catatan", type: "textarea" });
+    expect(ariaRequiredOf(opt.container, "catatan")).toBeNull();
+  });
+
+  it("select — required forwards, optional omits the attribute", () => {
+    const field = { key: "status", label: "Status", type: "select" as const, options: [{ value: "A", label: "A" }] };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "status")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "status")).toBeNull();
+  });
+
+  it("date — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "tgl", label: "Tanggal", type: "date", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "tgl")).toBe("true");
+    const opt = renderField({ key: "tgl", label: "Tanggal", type: "date" });
+    expect(ariaRequiredOf(opt.container, "tgl")).toBeNull();
+  });
+
+  it("checkbox — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "setuju", label: "Setuju", type: "checkbox", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "setuju")).toBe("true");
+    const opt = renderField({ key: "setuju", label: "Setuju", type: "checkbox" });
+    expect(ariaRequiredOf(opt.container, "setuju")).toBeNull();
+  });
+
+  it("toggle — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "aktif", label: "Aktif", type: "toggle", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "aktif")).toBe("true");
+    const opt = renderField({ key: "aktif", label: "Aktif", type: "toggle" });
+    expect(ariaRequiredOf(opt.container, "aktif")).toBeNull();
+  });
+
+  it("number (NumericField, incl. currency/percent/integer) — required forwards, optional omits the attribute", () => {
+    const req = renderField({ key: "jumlah", label: "Jumlah", type: "number", validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "jumlah")).toBe("true");
+    const opt = renderField({ key: "jumlah", label: "Jumlah", type: "number" });
+    expect(ariaRequiredOf(opt.container, "jumlah")).toBeNull();
+  });
+
+  it("NPWP (text + numeric.kind='npwp') — required forwards, optional omits the attribute", () => {
+    const field = { key: "npwp", label: "NPWP", type: "text" as const, numeric: { kind: "npwp" as const } };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "npwp")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "npwp")).toBeNull();
+  });
+
+  it("Phone (text + numeric.kind='phone') — required forwards, optional omits the attribute", () => {
+    const field = { key: "telp", label: "Telepon", type: "text" as const, numeric: { kind: "phone" as const, minDigits: 8, maxDigits: 15 } };
+    const req = renderField({ ...field, validation: { required: true } });
+    expect(ariaRequiredOf(req.container, "telp")).toBe("true");
+    const opt = renderField(field);
+    expect(ariaRequiredOf(opt.container, "telp")).toBeNull();
+  });
+});

package/src/form-renderer.tsx

@@ -64,7 +64,14 @@ function asString(value: unknown): string {
   return String(value);
 }
 
-/** Wraps a field label with an optional required asterisk for Carbon's labelText prop. */
+// Wraps a field label with an optional required asterisk for Carbon's `labelText` prop.
+// The asterisk is `aria-hidden` on purpose — it's decoration for sighted users.
+// The actual screen-reader signal is `aria-required`, forwarded separately onto
+// each control below. Forwarded as `aria-required`, NOT native `required`: native
+// `required` adds a second, browser-native validation system with its own
+// message/tooltip on top of `runFieldValidation`'s in-app enforcement of
+// `validation.required` — two error systems for one field. `aria-required` only
+// announces, doesn't enforce, which is exactly the gap that was missing.
 function mkLabel(label: ReactNode, required?: boolean) {
   return (
     <>
@@ -225,6 +232,7 @@ function NumericField({
   invalid,
   invalidText,
   placeholder,
+  required,
   onChange,
 }: {
   id: string;
@@ -246,6 +254,8 @@ function NumericField({
   invalid?: boolean;
   invalidText?: string;
   placeholder?: string;
+  /** Forwarded as `aria-required` on the underlying `TextInput` — see `mkLabel` for why not native `required`. */
+  required?: boolean;
   onChange: (v: number) => void;
 }) {
   const [raw, setRaw] = useState<string | null>(null);
@@ -378,6 +388,7 @@ function NumericField({
       invalid={invalid}
       invalidText={invalidText}
       placeholder={placeholder}
+      aria-required={required ? true : undefined}
     />
   );
 
@@ -849,6 +860,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           disabled={disabled}
                           invalid={Boolean(invalidText)}
                           invalidText={invalidText}
+                          aria-required={effectiveRequired ? true : undefined}
                         />
                       </DatePicker>
                       {field.helperText ? (
@@ -872,6 +884,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         disabled={disabled}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       >
                         {(field.options ?? []).map((opt) => (
                           <SelectItem key={String(opt.value)} value={opt.value} text={opt.label} />
@@ -944,6 +957,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         invalid={Boolean(effectiveInvalidText)}
                         invalidText={effectiveInvalidText}
                         placeholder={field.placeholder}
+                        required={effectiveRequired}
                         onChange={(v) => setValue(field.key, v as TData[keyof TData])}
                       />
                     </div>,
@@ -962,6 +976,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           setValue(field.key, Boolean(checked) as TData[keyof TData])
                         }
                         disabled={disabled}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -999,6 +1014,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                               )
                             }
                             disabled={disabled}
+                            aria-required={effectiveRequired ? true : undefined}
                           />
                         </div>
                       </FieldShell>
@@ -1023,6 +1039,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         maxLength={field.maxLength}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1049,6 +1066,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         readOnly={effectiveReadonly}
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1076,6 +1094,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                         invalid={Boolean(invalidText)}
                         invalidText={invalidText}
                         placeholder={field.placeholder}
+                        aria-required={effectiveRequired ? true : undefined}
                       />
                     </div>,
                   ];
@@ -1099,6 +1118,7 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                       invalid={Boolean(invalidText)}
                       invalidText={invalidText}
                       placeholder={field.placeholder}
+                      aria-required={effectiveRequired ? true : undefined}
                     />
                   </div>,
                 ];

package/src/list-add-button.test.tsx

@@ -0,0 +1,74 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+
+// ServerDataTable menarik jaringan & Carbon DataTable penuh; yang diuji di sini
+// TOOLBAR-nya, jadi tabelnya dimock dan `toolbarActions` dirender apa adanya.
+vi.mock("@isi-ui7/data-table", () => ({
+  ServerDataTable: ({ toolbarActions }: { toolbarActions?: React.ReactNode }) => (
+    <div data-testid="tabel">{toolbarActions}</div>
+  ),
+}));
+
+import { SharedCrudListPage } from "./crud-components";
+import type { CrudListSchema } from "./crud-types";
+
+const dasar: CrudListSchema = {
+  title: "Daftar",
+  apiPath: "/api/x",
+  columns: { a: { title: "A" } },
+  popupMenuItems: [],
+  addButtonLabel: "Tambah Sesuatu",
+};
+
+/**
+ * `showAddButton` — opsional, default TRUE.
+ *
+ * Ada karena sebagian modul menaruh entri "… Baru" di SIDE NAV, sehingga tombol
+ * toolbar jadi jalan KEDUA ke halaman yang sama. Dua jalan ke satu halaman harus
+ * dijaga tetap sama, dan yang satu akan tertinggal saat rutenya berubah — tanpa
+ * berbunyi sebagai galat.
+ */
+describe("tombol Tambah di daftar", () => {
+  it("DEFAULT tetap tampil — 109 pemakai lain nol boleh berubah", () => {
+    render(<SharedCrudListPage schema={dasar} onAdd={() => {}} onPopupClick={() => {}} />);
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).not.toBeNull();
+  });
+
+  it("`showAddButton: true` eksplisit juga tampil", () => {
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: true }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).not.toBeNull();
+  });
+
+  it("🔑 `showAddButton: false` MENYEMBUNYIKANNYA", () => {
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: false }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).toBeNull();
+  });
+
+  it("kontrol negatif — toolbarExtra TETAP dirender saat tombol Tambah disembunyikan", () => {
+    // Kalau perbaikannya diterapkan terlalu lebar (mis. seluruh blok toolbar
+    // dibungkus kondisi), aksi toolbar lain ikut hilang — dan hilangnya nol
+    // berbunyi karena tabelnya tetap tampil.
+    render(
+      <SharedCrudListPage
+        schema={{ ...dasar, showAddButton: false }}
+        onAdd={() => {}}
+        onPopupClick={() => {}}
+        toolbarExtra={<button type="button">Aksi Lain</button>}
+      />,
+    );
+    expect(screen.queryByRole("button", { name: /Aksi Lain/ })).not.toBeNull();
+    expect(screen.queryByRole("button", { name: /Tambah Sesuatu/ })).toBeNull();
+  });
+});

package/src/vitest.setup.ts

@@ -20,3 +20,17 @@ if (typeof Element !== "undefined" && !Element.prototype.scrollIntoView) {
     /* no-op: jsdom nol punya viewport untuk digulir */
   };
 }
+
+// Sama alasannya, komponen beda: jsdom nol mengimplementasikan `ResizeObserver`.
+// Carbon `TextArea` memanggilnya (auto-resize) saat mount — tanpa tambalan ini,
+// SETIAP uji yang merender `TextArea` (langsung atau lewat `SchemaFormRenderer`)
+// melempar `ReferenceError` di layout-effect, di luar rantai promise uji — kelas
+// kegagalan yang sama: ringkasan `it()` bisa tetap hijau sementara exit code
+// menolak. No-op sengaja: yang diuji adalah apa yang terender, bukan resize.
+if (typeof globalThis.ResizeObserver === "undefined") {
+  globalThis.ResizeObserver = class ResizeObserver {
+    observe() {}
+    unobserve() {}
+    disconnect() {}
+  } as unknown as typeof ResizeObserver;
+}

package/src/wizard-mode-nav.test.tsx

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, beforeEach } from "vitest";
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
 
 // Dimock supaya mode `edit`/`view` tidak menggantung di InlineLoading: tanpa
 // `loadApiPath` yang selesai, `loading` tidak pernah kembali false dan yang
@@ -40,6 +40,27 @@ const stepper = () => screen.queryByRole("navigation");
 // ketiga mode, sehingga uji ini membandingkan hal yang sama di semua mode.
 const fieldTampil = (nama: string) => screen.queryByText(nama) !== null;
 
+/**
+ * ADA DI DOM ≠ TERLIHAT.
+ *
+ * Panel tab yang tidak aktif tetap dirender, hanya `display: none`. Jadi
+ * `queryByText` menemukannya, dan uji yang hanya bertanya "ada?" akan HIJAU
+ * untuk halaman yang tidak bisa dilihat siapa pun. Helper ini menaiki pohon ke
+ * `[role=tabpanel]` terdekat dan membaca `display`-nya, sehingga yang diukur
+ * adalah apa yang benar-benar tampil di layar.
+ *
+ * `null` = teksnya tidak ada sama sekali (beda dari "ada tapi tersembunyi").
+ */
+const panelTampil = (nama: string): boolean | null => {
+  const el = screen.queryByText(nama);
+  if (!el) return null;
+  const panel = el.closest('[role="tabpanel"]') as HTMLElement | null;
+  if (!panel) return true; // bukan layout bertab — terender langsung
+  return panel.style.display !== "none";
+};
+
+const tabs = () => screen.queryAllByRole("tab");
+
 beforeEach(() => {
   vi.clearAllMocks();
 });
@@ -55,17 +76,22 @@ describe("navigasi wizard hanya pada mode create", () => {
     expect(fieldTampil("Field Tiga")).toBe(false);
   });
 
-  it("view — stepper TIDAK ada, dan SELURUH halaman terbaca sekaligus", async () => {
+  it("view — stepper TIDAK ada, diganti TAB, dan tiap halaman terjangkau", async () => {
     render(<CrudSchemaPage schema={schema} mode="view" />);
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     expect(stepper(), "view tidak boleh punya navigasi langkah").toBeNull();
-    // Inti perbaikannya: nol navigasi TIDAK boleh berarti isi yang hilang.
-    // Sebelum ini, `view` merender satu halaman saja sementara footernya nol
-    // tombol Lanjut — jadi langkah 2-5 tidak bisa dibaca sama sekali.
-    for (const label of ["Field Satu", "Field Dua", "Field Tiga"]) {
-      expect(fieldTampil(label), `${label} harus terbaca di view`).toBe(true);
-    }
+    expect(tabs().length, "wizard di luar create harus jadi tab, bukan datar").toBe(3);
+
+    // Inti perbaikannya: nol stepper TIDAK boleh berarti isi yang tak
+    // terjangkau. Sebelum ini `view` merender satu halaman saja sementara
+    // footernya nol tombol Lanjut — langkah 2-5 tidak bisa dibaca sama sekali.
+    expect(panelTampil("Field Satu")).toBe(true);
+    expect(panelTampil("Field Tiga"), "halaman 3 belum dibuka").toBe(false);
+
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("Field Tiga"), "klik tab 3 harus menampilkannya").toBe(true);
+    expect(panelTampil("Field Satu"), "tab 1 harus ikut tertutup").toBe(false);
   });
 
   // Ditambahkan setelah verifikasi adversarial membantah klaim "nol isi yang
@@ -79,12 +105,20 @@ describe("navigasi wizard hanya pada mode create", () => {
       render(<CrudSchemaPage schema={schema} mode={mode} />);
       await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
-      expect(stepper(), "judul kelompok bukan navigasi").toBeNull();
+      expect(stepper(), "tab bukan landmark navigasi").toBeNull();
+      // Label halaman kini jadi teks tombol tab.
       for (const l of ["Langkah Satu", "Langkah Dua", "Langkah Tiga"]) {
-        expect(fieldTampil(l), `${l} hilang dari ${mode}`).toBe(true);
+        expect(
+          tabs().some((t) => t.textContent === l),
+          `${l} hilang dari ${mode}`,
+        ).toBe(true);
       }
-      for (const s of ["Sub Satu", "Sub Dua", "Sub Tiga"]) {
-        expect(fieldTampil(s), `sublabel ${s} hilang dari ${mode}`).toBe(true);
+      // Sublabel TIDAK muat di tombol tab, jadi ia pindah ke dalam panel.
+      // Diperiksa terpisah justru karena itu: tempatnya berbeda dari labelnya,
+      // dan tempat yang berbeda adalah tempat yang bisa terlupa.
+      for (const [i, sub] of ["Sub Satu", "Sub Dua", "Sub Tiga"].entries()) {
+        fireEvent.click(tabs()[i]);
+        expect(panelTampil(sub), `sublabel ${sub} hilang dari ${mode}`).toBe(true);
       }
     },
   );
@@ -94,19 +128,22 @@ describe("navigasi wizard hanya pada mode create", () => {
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     expect(stepper(), "edit tidak boleh punya navigasi langkah").toBeNull();
-    expect(fieldTampil("Field Tiga")).toBe(true);
+    expect(tabs().length).toBe(3);
+    fireEvent.click(screen.getByRole("tab", { name: "Langkah Tiga" }));
+    expect(panelTampil("Field Tiga")).toBe(true);
 
     const tombol = screen.getAllByRole("button").map((b) => b.textContent ?? "");
     expect(tombol.some((t) => /lanjut|next/i.test(t)), `masih ada tombol Lanjut: ${tombol.join("|")}`).toBe(false);
     expect(tombol.some((t) => /kembali|prev/i.test(t)), `masih ada tombol Kembali: ${tombol.join("|")}`).toBe(false);
   });
 
-  // Kontrol kedua, dan ini yang penting: `tabs` juga punya `pages`, jadi ia
-  // kandidat paling mungkin ikut terseret kalau urutan cabang render bergeser.
-  // Tanpa kontrol ini, memindahkan cabang datar ke atas cabang `tabs` akan
-  // meratakan 4 layar bos7-enterprise/bos7-financing tanpa satu pun galat.
-  it("kontrol negatif — layout tabs tetap bertab, tidak ikut diratakan", async () => {
-    const tabs: CrudForm<D> = {
+  // Kontrol negatif — kini SEMAKIN perlu, bukan semakin tidak: sejak kedua
+  // layout memakai perender yang SAMA, cacat di perender itu memukul keduanya
+  // sekaligus, dan uji wizard sendirian tidak akan menunjukkan bahwa 4 layar
+  // bos7-enterprise/bos7-financing ikut rusak. `tabs` di sini punya 2 halaman
+  // (wizard 3) supaya keduanya tidak bisa saling menyamar.
+  it("kontrol negatif — layout tabs ikut sehat memakai perender bersama", async () => {
+    const skemaTabs: CrudForm<D> = {
       ...schema,
       layout: {
         type: "tabs",
@@ -116,11 +153,11 @@ describe("navigasi wizard hanya pada mode create", () => {
         ],
       },
     };
-    render(<CrudSchemaPage schema={tabs} mode="view" />);
+    render(<CrudSchemaPage schema={skemaTabs} mode="view" />);
     await waitFor(() => expect(fieldTampil("Field Satu")).toBe(true));
 
     // Tab masih tab: tombol role=tab ada, dan hanya tab aktif yang terlihat.
-    expect(screen.getAllByRole("tab").length, "tab hilang — cabang datar menelan layout tabs").toBe(2);
+    expect(tabs().length, "layout tabs kehilangan tabnya").toBe(2);
     expect(stepper()).toBeNull();
   });