@isi-ui7/bos7-shared 0.3.4 → 0.3.6

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,23 @@ 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;
     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

@@ -165,6 +165,19 @@ export type FormSection<TData extends Record<string, unknown>> = {
         mode: FormMode;
         disabled: boolean;
     }) => ReactNode;
+    /**
+     * Sembunyikan SELURUH section — judul, deskripsi, dan isinya.
+     *
+     * Bentuknya sengaja sama persis dengan `FormField.hidden` supaya tidak ada
+     * dua idiom untuk hal yang sama.
+     *
+     * Ada karena menyembunyikan tiap field satu per satu TIDAK cukup: judul dan
+     * deskripsi section tetap terender, meninggalkan kepala panel kosong yang
+     * terlihat seperti bug — dan pada form yang panelnya memang harus terkunci
+     * dulu, kepala kosong itu justru mengiklankan keberadaan bagian yang belum
+     * boleh diisi.
+     */
+    hidden?: boolean | ((mode: FormMode, data: TData) => boolean);
 };
 export type FormPageDef<TData extends Record<string, unknown>> = {
     label: string;

package/package.json

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

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-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

@@ -32,6 +32,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;
@@ -484,6 +485,13 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
       style={{ display: "grid", gap: dt.sectionGap }}
     >
       {sections.map((section, sectionIndex) => {
+        // Section tersembunyi mengembalikan null — React tidak merender apa
+        // pun untuknya, termasuk judul & deskripsinya.
+        const sectionHidden =
+          typeof section.hidden === "function"
+            ? section.hidden(mode, value)
+            : section.hidden === true;
+        if (sectionHidden) return null;
         const cols = section.columns ?? 1;
         const defaultSpan = Math.floor(12 / cols);
 
@@ -740,20 +748,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}

package/src/form-rules.ts

@@ -41,6 +41,48 @@ 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;
+    };
+  },
+
   regex(pattern: RegExp, msg: string): FieldValidatorFn {
     return (v) =>
       v && typeof v === "string" && !pattern.test(v) ? msg : undefined;

package/src/form-section-hidden.test.tsx

@@ -0,0 +1,87 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// `FormSection.hidden` — menyembunyikan SELURUH section, bukan hanya field-nya.
+//
+// Menyembunyikan tiap field satu per satu tidak cukup: judul dan deskripsi
+// section tetap terender, meninggalkan kepala panel kosong. Pada form yang
+// panelnya memang harus terkunci dulu, kepala kosong itu justru mengiklankan
+// bagian yang belum boleh diisi.
+
+const locked: FormSection<D> = {
+  title: "Data Diri",
+  description: "Terbuka setelah verifikasi",
+  fields: [{ key: "nama", label: "Nama Lengkap", type: "text", span: 4 }],
+  hidden: (_mode, data) => data.verified !== true,
+};
+
+const always: FormSection<D> = {
+  title: "Verifikasi Identitas",
+  fields: [{ key: "nik", label: "Nomor Identitas", type: "text", span: 4 }],
+};
+
+function renderWith(value: D) {
+  return render(
+    <SchemaFormRenderer<D>
+      mode="create"
+      value={value}
+      sections={[always, locked]}
+      onChange={() => {}}
+    />,
+  );
+}
+
+describe("FormSection.hidden", () => {
+  it("menyembunyikan JUDUL dan DESKRIPSI, bukan cuma field-nya", () => {
+    renderWith({ verified: false });
+    expect(screen.queryByText("Data Diri")).toBeNull();
+    expect(screen.queryByText("Terbuka setelah verifikasi")).toBeNull();
+    expect(screen.queryByLabelText("Nama Lengkap")).toBeNull();
+  });
+
+  it("menampilkan section ketika predikatnya false", () => {
+    renderWith({ verified: true });
+    expect(screen.getByText("Data Diri")).toBeTruthy();
+    expect(screen.getByLabelText("Nama Lengkap")).toBeTruthy();
+  });
+
+  it("KONTROL: section tetangga tanpa hidden tidak ikut terpengaruh", () => {
+    // Kalau kontrol ini ikut gagal, yang diukur bukan `hidden` melainkan
+    // perenderan section secara umum.
+    renderWith({ verified: false });
+    expect(screen.getByText("Verifikasi Identitas")).toBeTruthy();
+    expect(screen.getByLabelText("Nomor Identitas")).toBeTruthy();
+  });
+
+  it("menerima boolean, bukan hanya fungsi — bentuknya sama dgn FormField.hidden", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{}}
+        sections={[{ title: "Selalu Tersembunyi", fields: [], hidden: true }]}
+        onChange={() => {}}
+      />,
+    );
+    expect(screen.queryByText("Selalu Tersembunyi")).toBeNull();
+  });
+
+  it("predikat menerima mode — section bisa disembunyikan hanya saat create", () => {
+    const s: FormSection<D> = {
+      title: "Hanya Saat Edit",
+      fields: [],
+      hidden: (mode) => mode === "create",
+    };
+    const { unmount } = render(
+      <SchemaFormRenderer<D> mode="create" value={{}} sections={[s]} onChange={() => {}} />,
+    );
+    expect(screen.queryByText("Hanya Saat Edit")).toBeNull();
+    unmount();
+
+    render(<SchemaFormRenderer<D> mode="edit" value={{}} sections={[s]} onChange={() => {}} />);
+    expect(screen.getByText("Hanya Saat Edit")).toBeTruthy();
+  });
+});

package/src/form-types.ts

@@ -177,6 +177,19 @@ export type FormSection<TData extends Record<string, unknown>> = {
     mode: FormMode;
     disabled: boolean;
   }) => ReactNode;
+  /**
+   * Sembunyikan SELURUH section — judul, deskripsi, dan isinya.
+   *
+   * Bentuknya sengaja sama persis dengan `FormField.hidden` supaya tidak ada
+   * dua idiom untuk hal yang sama.
+   *
+   * Ada karena menyembunyikan tiap field satu per satu TIDAK cukup: judul dan
+   * deskripsi section tetap terender, meninggalkan kepala panel kosong yang
+   * terlihat seperti bug — dan pada form yang panelnya memang harus terkunci
+   * dulu, kepala kosong itu justru mengiklankan keberadaan bagian yang belum
+   * boleh diisi.
+   */
+  hidden?: boolean | ((mode: FormMode, data: TData) => boolean);
 };
 
 // ── Layout ────────────────────────────────────────────────────────────────────

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

@@ -85,7 +85,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 = () => {