@isi-ui7/bos7-shared 0.4.2 → 0.4.4

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

@@ -4,6 +4,24 @@ import { BosSharedLabels } from './i18n';
 export declare function resolveApiPath(path: ApiPath, params: Record<string, string>): string;
 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>>;
+/**
+ * Merangkum `fieldErrors` jadi satu kalimat yang MENYEBUT medannya.
+ *
+ * 🔑 Ada karena daftar medannya SUDAH dihitung dan nol pernah sampai ke layar.
+ * Spanduk lama satu string tetap ("Periksa field wajib") untuk seluruh galat,
+ * jadi "medan kosong" dan "medan terisi tapi format salah" terbaca identik —
+ * dan medan yang nol punya field ter-render terbaca sama pula.
+ *
+ * Ongkosnya terukur: dua medan (`cif_number`, `branch_code`) menahan create
+ * Nasabah Perorangan 21 hari (2026-08-15 s/d 09-05). Keduanya duduk di
+ * `fieldErrors` sepanjang waktu itu. Satu penyelidikan penuh dihabiskan untuk
+ * mencari nama yang aplikasinya sudah tahu sejak detik pertama.
+ *
+ * Label dipakai bila ada; kalau nol ada, JATUH ke kuncinya — jangan sel kosong
+ * dan jangan sembunyikan barisnya, karena medan tanpa label justru yang paling
+ * mungkin jadi medan yatim seperti di atas.
+ */
+export declare function ringkasGalatMedan<TData extends Record<string, unknown>>(fieldErrors: Partial<Record<keyof TData, string>>, fields: FormField<TData>[], maks?: number): string | null;
 export declare function collectAllFields<TData extends Record<string, unknown>>(layout: FormLayout<TData>): FormField<TData>[];
 /**
  * Field yang BOLEH divalidasi pada satu halaman.
@@ -42,4 +60,42 @@ export declare function toLocalISODate(date: Date | undefined | null): string;
  * menghasilkan tanggal lain sama sekali (laporan DG-00, agent7 2026-08-31).
  */
 export declare function fromLocalISODate(iso: string | undefined | null): Date | undefined;
+/**
+ * Mem-parse tanggal yang DIKETIK operator dalam format TAMPILAN "d-m-Y"
+ * ("15-06-1990", juga menerima "5-6-1990") jadi `Date` lokal.
+ *
+ * 🔑 Kenapa ini ada, dan kenapa ia TIDAK memakai flatpickr.
+ *
+ * Tanggal yang diketik tangan nol pernah masuk state form. Layar menunjukkan
+ * tanggalnya, tapi validasi berkata "is required" — cacat yang paling
+ * menyesatkan yang bisa dialami operator, karena nol ada yang terlihat salah.
+ *
+ * Diukur di browser sungguhan (DG-00, cif.ibos7.com 2026-08-31), commit-nya
+ * BERBEDA menurut gestur yang mengakhiri ketikan:
+ *
+ *   gestur         flatpickr.selectedDates   state React
+ *   Tab            []                        kosong        RUSAK
+ *   Enter          terisi                    terisi        benar
+ *   klik di luar   terisi                    kosong        RUSAK
+ *
+ * Sesudah Tab, `fp.isOpen` tetap `true` dan fokus lompat ke elemen di dalam
+ * kalender — jadi jalur "parse saat close" milik flatpickr nol pernah
+ * tersentuh. Pada klik-di-luar flatpickr BERHASIL mem-parse tapi onChange-nya
+ * nol sampai ke React: flatpickr dan React memegang dua kebenaran berbeda.
+ *
+ * 🔴 Maka commit-nya nol boleh bergantung pada flatpickr. Kita mem-parse
+ * sendiri saat `blur`, dan itu berlaku untuk KETIGA gestur — termasuk yang
+ * belum kita pahami sepenuhnya. Bergantung pada perilaku yang sudah terbukti
+ * berbeda antar gestur berarti memperbaiki gestur yang kebetulan diuji saja.
+ *
+ * ⚠️ jsdom NOL bisa mereproduksi cacat ini: di sana `fireEvent.blur` memang
+ * meng-commit, pada kode lama maupun baru. Uji fungsi ini apa adanya, dan
+ * jangan menyimpulkan dari tes komponen bahwa cacatnya tuntas.
+ *
+ * Mengembalikan `undefined` untuk teks yang bukan tanggal utuh — termasuk
+ * ketikan separuh jalan ("15-06") dan tanggal yang nol ada ("31-02-1990").
+ * Nol menebak: teks yang nol terbaca dibiarkan apa adanya, dan validasi
+ * "wajib diisi" yang bicara.
+ */
+export declare function parseDisplayDate(teks: string | undefined | null): Date | undefined;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.4.2",
+  "version": "0.4.4",
   "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.12",
+    "@isi-ui7/corporate-themes": ">=0.2.14",
     "@isi-ui7/data-table": ">=0.2.5",
     "@isi-ui7/editable-table": ">=0.2.3",
     "@isi-ui7/i18n": ">=0.2.3",
@@ -106,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.12",
     "@isi-ui7/data-table": "0.2.5",
     "@isi-ui7/editable-table": "0.2.3",
     "@isi-ui7/i18n": "0.2.3",
+    "@isi-ui7/corporate-themes": "0.2.14",
     "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/realtime": "0.2.3",
-    "@isi-ui7/ui-shell": "0.2.8"
+    "@isi-ui7/ui-shell": "0.2.8",
+    "@isi-ui7/realtime": "0.2.3"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",

package/src/crud-client-error.test.ts

@@ -1,5 +1,5 @@
 import { describe, it, expect, vi, afterEach } from 'vitest';
-import { fetchDetailData } from './workflow/crud-client';
+import { fetchDetailData, submitWorkflowForm, submitWorkflowDelete } from './workflow/crud-client';
 
 // Bentuk error yang BENAR-BENAR dikirim service Go di estate ini. Menyerahkan
 // objek langsung ke `new Error()` menghasilkan pesan literal "[object Object]",
@@ -51,3 +51,47 @@ describe('fetchDetailData — pesan error', () => {
     await expect(fetchDetailData<{ id: number }>('/x')).resolves.toEqual({ id: 7, name: 'ok' });
   });
 });
+
+// submitWorkflowForm/submitWorkflowDelete — sebelum perbaikan ini (2026-08-31,
+// ditemukan claim-verifier + PM saat audit FT-292/293), kedua fungsi ini
+// mengetik `error?: string` dan menyerahkan `body.error` LANGSUNG ke
+// `new Error()`, melewati `errorMessage` sama sekali — beda dari
+// `fetchDetailData` yang sudah benar. Akibatnya saat backend genuinely
+// menolak dengan bentuk objek `{code, message}` (bentuk NYATA service Go di
+// estate ini, lihat komentar `errorMessage`), operator melihat literal
+// "[object Object]", bukan alasannya.
+describe('submitWorkflowForm — pesan error (cermin fetchDetailData)', () => {
+  it('membuka error berbentuk OBJEK {code, message} — bukan "[object Object]"', async () => {
+    mockRes(403, { error: { code: 'FORBIDDEN', message: 'access denied' } });
+    await expect(submitWorkflowForm('/x', 'POST', {})).rejects.toThrow('access denied (FORBIDDEN)');
+  });
+
+  it('tetap menerima error berbentuk string', async () => {
+    mockRes(400, { error: 'validation error: tujuan transaksi belum diputuskan' });
+    await expect(submitWorkflowForm('/x', 'POST', {})).rejects.toThrow(
+      'validation error: tujuan transaksi belum diputuskan',
+    );
+  });
+
+  it('jatuh ke pesan HTTP ketika body tidak memuat error yang bisa dibaca', async () => {
+    mockRes(502, {});
+    await expect(submitWorkflowForm('/x', 'PUT', {})).rejects.toThrow('Gagal (HTTP 502)');
+  });
+
+  it('sukses (202 + instance_id) tetap mengembalikan instance_id', async () => {
+    mockRes(202, { instance_id: 'wf-123' });
+    await expect(submitWorkflowForm('/x', 'POST', {})).resolves.toBe('wf-123');
+  });
+});
+
+describe('submitWorkflowDelete — pesan error (cermin fetchDetailData)', () => {
+  it('membuka error berbentuk OBJEK {code, message} — bukan "[object Object]"', async () => {
+    mockRes(409, { error: { code: 'CONFLICT', message: 'sudah tidak aktif' } });
+    await expect(submitWorkflowDelete('/x')).rejects.toThrow('sudah tidak aktif (CONFLICT)');
+  });
+
+  it('sukses (202 + instance_id) tetap mengembalikan instance_id', async () => {
+    mockRes(202, { instance_id: 'wf-456' });
+    await expect(submitWorkflowDelete('/x')).resolves.toBe('wf-456');
+  });
+});

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

@@ -1,5 +1,5 @@
 import { describe, it, expect } from "vitest";
-import { toLocalISODate, fromLocalISODate, collectPageFields, runFieldValidation } from "./form-renderer-utils";
+import { toLocalISODate, fromLocalISODate, parseDisplayDate, collectPageFields, runFieldValidation } from "./form-renderer-utils";
 import { Rules } from "./form-rules";
 import type { FormLayout, FormSection } from "./form-types";
 
@@ -180,3 +180,71 @@ describe("collectPageFields menghormati section.hidden", () => {
     expect(collectPageFields(l, 0).map((f) => String(f.key))).toEqual(["a"]);
   });
 });
+
+// ─────────────────────────────────────────────────────────────────────────
+// parseDisplayDate — commit tanggal yang DIKETIK tangan (Cacat A)
+//
+// ⚠️ Tes di berkas ini menguji FUNGSINYA, bukan cacatnya. jsdom NOL bisa
+// mereproduksi Cacat A: di sana `fireEvent.blur` sudah meng-commit pada kode
+// lama maupun baru (dicatat DG-05 di date-field-render.test.tsx, dan saya
+// konfirmasi). Cacatnya direproduksi di BROWSER sungguhan — dgn Tab,
+// flatpickr nol pernah mem-parse teksnya dan state tetap kosong.
+//
+// Maka: jangan menyimpulkan dari hijaunya berkas ini bahwa Cacat A tuntas.
+// Buktinya ada di larian browser (DG-00, 2026-08-31: Tab 🔴→✅).
+describe("parseDisplayDate — tanggal yang diketik operator", () => {
+  it("membaca format tampilan d-m-Y", () => {
+    expect(toLocalISODate(parseDisplayDate("15-06-1990"))).toBe("1990-06-15");
+    expect(toLocalISODate(parseDisplayDate("31-12-2026"))).toBe("2026-12-31");
+  });
+
+  it("menerima satu digit — operator nol selalu menulis nol di depan", () => {
+    expect(toLocalISODate(parseDisplayDate("5-6-1990"))).toBe("1990-06-05");
+  });
+
+  it("mengabaikan spasi di tepi", () => {
+    expect(toLocalISODate(parseDisplayDate("  15-06-1990  "))).toBe("1990-06-15");
+  });
+
+  it("MENOLAK tanggal yang nol ada, bukan menggulungnya", () => {
+    // Konstruktor Date diam-diam mengubah 31-02-1990 jadi 3 Maret. Menyimpan
+    // tanggal yang nol pernah diketik siapa pun jauh lebih buruk daripada
+    // menolaknya.
+    expect(parseDisplayDate("31-02-1990")).toBeUndefined();
+    expect(parseDisplayDate("32-01-1990")).toBeUndefined();
+    expect(parseDisplayDate("15-13-1990")).toBeUndefined();
+  });
+
+  it("kontrol: 29-02 diterima di tahun KABISAT, ditolak di tahun biasa", () => {
+    expect(toLocalISODate(parseDisplayDate("29-02-2024"))).toBe("2024-02-29");
+    expect(parseDisplayDate("29-02-2025")).toBeUndefined();
+  });
+
+  it("MENOLAK ketikan separuh jalan dan teks yang bukan tanggal", () => {
+    for (const teks of ["", "   ", "15", "15-06", "abc", "1990-06-15", "15/06/1990"]) {
+      expect(parseDisplayDate(teks)).toBeUndefined();
+    }
+  });
+
+  it("MENOLAK tanggal sah yang terbenam di teks lain", () => {
+    // Kasus ini ada karena sabotase: membuang jangkar ^$ dari regex nol
+    // membuat satu pun tes di atas merah. Tanpa jangkar, "115-06-1990"
+    // diam-diam terbaca sbg 15-06-1990 — angka yang nol pernah diketik
+    // operator, tersimpan tanpa satu pun gejala.
+    for (const teks of ["115-06-1990", "15-06-1990x", "a15-06-1990", "15-06-19900"]) {
+      expect(parseDisplayDate(teks)).toBeUndefined();
+    }
+  });
+
+  it("kontrol: nilai kosong/null nol melempar", () => {
+    expect(parseDisplayDate(undefined)).toBeUndefined();
+    expect(parseDisplayDate(null)).toBeUndefined();
+  });
+
+  it("tanggal lokal, BUKAN UTC — nol bergeser sehari di zona timur", () => {
+    const d = parseDisplayDate("01-01-1990")!;
+    expect(d.getFullYear()).toBe(1990);
+    expect(d.getMonth()).toBe(0);
+    expect(d.getDate()).toBe(1);
+  });
+});

package/src/date-field-render.test.tsx

@@ -23,6 +23,18 @@ type D = Record<string, unknown>;
 // tuntas di halaman produksi (mungkin bergantung interaksi re-render field
 // lain yg tak tercakup harness minimal ini). Perlu re-verifikasi Tester/
 // DG-00 langsung di browser thd kode yg sudah diperbaiki.
+//
+// TINDAK LANJUT (DG-00, 2026-08-31): sudah diverifikasi di browser sungguhan,
+// dan Cacat A TERBUKTI ADA bahkan sesudah #152/#154. Catatan DG-05 di atas
+// benar sepenuhnya: jsdom nol bisa mereproduksinya. Harness browser (Vite +
+// Playwright, di luar repo) mereproduksi kegagalan Tab persis seperti di
+// cif.ibos7.com — `fp.selectedDates` kosong, `fp.isOpen` tetap true, state
+// kosong. Perbaikannya NOL bergantung pada flatpickr: commit dilakukan
+// sendiri saat `blur` lewat `parseDisplayDate()`. Tab 🔴→✅ terukur.
+//
+// 🔑 Tes DI BERKAS INI tetap hijau sebelum maupun sesudah perbaikan. Ia
+// penjaga alur commit, BUKAN reproduksi cacatnya. Jangan pakai hijaunya
+// sbg bukti Cacat A tuntas — buktinya ada di larian browser.
 
 const dateSection: FormSection<D> = {
   title: "Tanggal",

package/src/form-renderer-utils.ts

@@ -113,6 +113,46 @@ export function runFieldValidation<TData extends Record<string, unknown>>(
   return errors;
 }
 
+/**
+ * Merangkum `fieldErrors` jadi satu kalimat yang MENYEBUT medannya.
+ *
+ * 🔑 Ada karena daftar medannya SUDAH dihitung dan nol pernah sampai ke layar.
+ * Spanduk lama satu string tetap ("Periksa field wajib") untuk seluruh galat,
+ * jadi "medan kosong" dan "medan terisi tapi format salah" terbaca identik —
+ * dan medan yang nol punya field ter-render terbaca sama pula.
+ *
+ * Ongkosnya terukur: dua medan (`cif_number`, `branch_code`) menahan create
+ * Nasabah Perorangan 21 hari (2026-08-15 s/d 09-05). Keduanya duduk di
+ * `fieldErrors` sepanjang waktu itu. Satu penyelidikan penuh dihabiskan untuk
+ * mencari nama yang aplikasinya sudah tahu sejak detik pertama.
+ *
+ * Label dipakai bila ada; kalau nol ada, JATUH ke kuncinya — jangan sel kosong
+ * dan jangan sembunyikan barisnya, karena medan tanpa label justru yang paling
+ * mungkin jadi medan yatim seperti di atas.
+ */
+export function ringkasGalatMedan<TData extends Record<string, unknown>>(
+  fieldErrors: Partial<Record<keyof TData, string>>,
+  fields: FormField<TData>[],
+  maks = 5,
+): string | null {
+  const kunci = Object.keys(fieldErrors).filter((k) => fieldErrors[k as keyof TData]);
+  if (kunci.length === 0) return null;
+
+  const label = new Map<string, string>();
+  for (const f of fields) {
+    const k = String(f.key);
+    const l = typeof f.label === "string" ? f.label.trim() : "";
+    if (l && !label.has(k)) label.set(k, l);
+  }
+
+  const butir = kunci.slice(0, maks).map((k) => {
+    const nama = label.get(k) || k; // JATUH ke kunci, bukan kosong
+    return `${nama}: ${fieldErrors[k as keyof TData]}`;
+  });
+  const sisa = kunci.length - butir.length;
+  return butir.join(" · ") + (sisa > 0 ? ` · +${sisa} lagi` : "");
+}
+
 // ── Layout helpers ────────────────────────────────────────────────────────────
 
 export function collectAllFields<TData extends Record<string, unknown>>(
@@ -219,3 +259,62 @@ export function fromLocalISODate(iso: string | undefined | null): Date | undefin
   const date = new Date(Number(y), Number(mo) - 1, Number(d));
   return Number.isNaN(date.getTime()) ? undefined : date;
 }
+
+/**
+ * Mem-parse tanggal yang DIKETIK operator dalam format TAMPILAN "d-m-Y"
+ * ("15-06-1990", juga menerima "5-6-1990") jadi `Date` lokal.
+ *
+ * 🔑 Kenapa ini ada, dan kenapa ia TIDAK memakai flatpickr.
+ *
+ * Tanggal yang diketik tangan nol pernah masuk state form. Layar menunjukkan
+ * tanggalnya, tapi validasi berkata "is required" — cacat yang paling
+ * menyesatkan yang bisa dialami operator, karena nol ada yang terlihat salah.
+ *
+ * Diukur di browser sungguhan (DG-00, cif.ibos7.com 2026-08-31), commit-nya
+ * BERBEDA menurut gestur yang mengakhiri ketikan:
+ *
+ *   gestur         flatpickr.selectedDates   state React
+ *   Tab            []                        kosong        RUSAK
+ *   Enter          terisi                    terisi        benar
+ *   klik di luar   terisi                    kosong        RUSAK
+ *
+ * Sesudah Tab, `fp.isOpen` tetap `true` dan fokus lompat ke elemen di dalam
+ * kalender — jadi jalur "parse saat close" milik flatpickr nol pernah
+ * tersentuh. Pada klik-di-luar flatpickr BERHASIL mem-parse tapi onChange-nya
+ * nol sampai ke React: flatpickr dan React memegang dua kebenaran berbeda.
+ *
+ * 🔴 Maka commit-nya nol boleh bergantung pada flatpickr. Kita mem-parse
+ * sendiri saat `blur`, dan itu berlaku untuk KETIGA gestur — termasuk yang
+ * belum kita pahami sepenuhnya. Bergantung pada perilaku yang sudah terbukti
+ * berbeda antar gestur berarti memperbaiki gestur yang kebetulan diuji saja.
+ *
+ * ⚠️ jsdom NOL bisa mereproduksi cacat ini: di sana `fireEvent.blur` memang
+ * meng-commit, pada kode lama maupun baru. Uji fungsi ini apa adanya, dan
+ * jangan menyimpulkan dari tes komponen bahwa cacatnya tuntas.
+ *
+ * Mengembalikan `undefined` untuk teks yang bukan tanggal utuh — termasuk
+ * ketikan separuh jalan ("15-06") dan tanggal yang nol ada ("31-02-1990").
+ * Nol menebak: teks yang nol terbaca dibiarkan apa adanya, dan validasi
+ * "wajib diisi" yang bicara.
+ */
+export function parseDisplayDate(teks: string | undefined | null): Date | undefined {
+  const s = String(teks ?? "").trim();
+  const m = /^(\d{1,2})-(\d{1,2})-(\d{4})$/.exec(s);
+  if (!m) return undefined;
+  const [, d, mo, y] = m;
+  const hari = Number(d);
+  const bulan = Number(mo);
+  const tahun = Number(y);
+  const date = new Date(tahun, bulan - 1, hari);
+  // Konstruktor Date MENGGULUNG nilai di luar batas: 31-02-1990 diam-diam
+  // jadi 3 Maret. Membaca ulang komponennya menolak tanggal yang nol ada,
+  // alih-alih menyimpan tanggal LAIN yang nol pernah diketik siapa pun.
+  if (
+    date.getFullYear() !== tahun ||
+    date.getMonth() !== bulan - 1 ||
+    date.getDate() !== hari
+  ) {
+    return undefined;
+  }
+  return date;
+}

package/src/form-renderer.tsx

@@ -33,7 +33,7 @@ import {
 import type { Ui7FormDensity, Ui7FormWidth } from "./style-contract";
 import { useBosSharedI18n } from "./i18n";
 import type { FormField, FormMode, FormSection } from "./form-types";
-import { toLocalISODate, fromLocalISODate } from "./form-renderer-utils";
+import { toLocalISODate, fromLocalISODate, parseDisplayDate } from "./form-renderer-utils";
 import { DetailModalField } from "./detail-modal-field";
 
 export type SchemaFormRendererProps<TData extends Record<string, unknown>> = {
@@ -866,6 +866,39 @@ export function SchemaFormRenderer<TData extends Record<string, unknown>>({
                           invalid={Boolean(invalidText)}
                           invalidText={invalidText}
                           aria-required={effectiveRequired ? true : undefined}
+                          // 🔑 Commit ketikan tangan TIDAK boleh diserahkan ke
+                          // flatpickr. Diukur di browser sungguhan (DG-00,
+                          // cif.ibos7.com 2026-08-31): dgn Tab, flatpickr NOL
+                          // pernah mem-parse teksnya (`selectedDates` kosong,
+                          // `isOpen` tetap true — kalendernya masih terbuka,
+                          // jadi jalur "parse saat close" nol tersentuh); dgn
+                          // klik di luar ia mem-parse tapi onChange-nya nol
+                          // sampai ke React. Hanya Enter yang benar.
+                          //
+                          // Akibatnya tanggal terlihat di layar sementara state
+                          // kosong, dan validasi berkata "is required" di atas
+                          // kotak yang jelas berisi tanggal.
+                          //
+                          // `blur` berlaku untuk KETIGA gestur, jadi commit
+                          // dilakukan di sini — bukan menambal satu gestur.
+                          onBlur={(e) => {
+                            const teks = (e.target as HTMLInputElement).value;
+                            const kini = asString(rawValue);
+                            if (teks.trim() === "") {
+                              // Mengosongkan kotak lalu keluar = menghapus
+                              // nilainya. Tapi blur juga terjadi saat fokus
+                              // pindah KE kalender, jadi jangan menulis kalau
+                              // memang sudah kosong.
+                              if (kini !== "") setValue(field.key, "" as TData[keyof TData]);
+                              return;
+                            }
+                            const d = parseDisplayDate(teks);
+                            // Teks yang nol terbaca dibiarkan: nol menebak, dan
+                            // validasi "wajib diisi" yang bicara.
+                            if (!d) return;
+                            const iso = toLocalISODate(d);
+                            if (iso !== kini) setValue(field.key, iso as TData[keyof TData]);
+                          }}
                         />
                       </DatePicker>
                       {field.helperText ? (

package/src/spanduk-galat-medan.test.ts

@@ -0,0 +1,44 @@
+import { describe, it, expect } from "vitest";
+import { ringkasGalatMedan } from "./form-renderer-utils";
+import type { FormField } from "./form-types";
+
+type D = Record<string, unknown>;
+const f = (key: string, label?: string) => ({ key, label, type: "text" } as unknown as FormField<D>);
+
+describe("spanduk galat menyebut MEDANNYA", () => {
+  it("menyebut label + alasan, bukan satu kalimat tetap", () => {
+    const s = ringkasGalatMedan<D>(
+      { identity_number: "NIK harus 16 digit angka", birth_date: "Tanggal Lahir wajib diisi" },
+      [f("identity_number", "NIK"), f("birth_date", "Tanggal Lahir")],
+    );
+    expect(s).toContain("NIK");
+    expect(s).toContain("16 digit");
+    expect(s).toContain("Tanggal Lahir");
+  });
+
+  it("PEMANCAR: nol ada galat -> spanduk DIAM (null), bukan kalimat kosong", () => {
+    expect(ringkasGalatMedan<D>({}, [f("a", "A")])).toBeNull();
+    expect(ringkasGalatMedan<D>({ a: undefined } as never, [f("a", "A")])).toBeNull();
+  });
+
+  it("medan tanpa label JATUH ke kuncinya — nol disembunyikan", () => {
+    // Justru medan tanpa label yang paling mungkin jadi medan yatim
+    // (cif_number/branch_code, cacat 21 hari). Ia WAJIB kelihatan.
+    const s = ringkasGalatMedan<D>({ branch_code: "Cabang wajib diisi" }, []);
+    expect(s).toContain("branch_code");
+    expect(s).toContain("Cabang wajib diisi");
+  });
+
+  it("dipotong kalau panjang, dan SEBUT berapa yang tersisa", () => {
+    const errs: Record<string, string> = {};
+    const fields: FormField<D>[] = [];
+    for (let i = 0; i < 9; i++) { errs["k" + i] = "wajib diisi"; fields.push(f("k" + i, "L" + i)); }
+    const s = ringkasGalatMedan<D>(errs, fields, 5)!;
+    expect(s.split(" · ").filter((x) => !x.startsWith("+")).length).toBe(5);
+    expect(s).toContain("+4 lagi");
+  });
+
+  it("label kosong/spasi diperlakukan sbg TIDAK ADA", () => {
+    expect(ringkasGalatMedan<D>({ x: "wajib" }, [f("x", "   ")])).toContain("x:");
+  });
+});

package/src/workflow/crud-client.ts

@@ -53,22 +53,22 @@ export async function submitWorkflowForm<TPayload>(
     headers: { 'Content-Type': 'application/json' },
     body: JSON.stringify(payload),
   });
-  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: string };
+  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: unknown };
 
   if (res.status === 202 && body.instance_id) {
     return body.instance_id;
   }
 
-  throw new Error(body.error ?? `Gagal (HTTP ${res.status})`);
+  throw new Error(errorMessage(body.error, `Gagal (HTTP ${res.status})`));
 }
 
 export async function submitWorkflowDelete(url: string): Promise<string> {
   const res = await fetch(url, { method: 'DELETE' });
-  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: string };
+  const body = (await res.json().catch(() => ({}))) as { instance_id?: string; error?: unknown };
 
   if (res.status === 202 && body.instance_id) {
     return body.instance_id;
   }
 
-  throw new Error(body.error ?? `Gagal (HTTP ${res.status})`);
+  throw new Error(errorMessage(body.error, `Gagal (HTTP ${res.status})`));
 }

package/src/workflow/use-crud-form-spanduk.test.tsx

@@ -0,0 +1,66 @@
+import { describe, it, expect } from "vitest";
+import { act, renderHook } from "@testing-library/react";
+import { useCrudForm } from "./use-crud-form";
+import type { CrudForm } from "../form-types";
+
+type D = Record<string, unknown>;
+
+/**
+ * Spanduk galat diuji lewat PERILAKU `handleSave`, bukan lewat helper-nya.
+ *
+ * Uji atas `ringkasGalatMedan` sendirian TETAP HIJAU meski nilai balik `error`
+ * nol pernah memakainya — diukur: mencabut penyambungan di `use-crud-form`
+ * meninggalkan 154 uji hijau. Yang membedakan "terpasang" dari "sekadar ada"
+ * cuma membaca `error` yang benar-benar keluar dari hook.
+ */
+function schema(): CrudForm<D> {
+  return {
+    title: { create: "c", edit: "e", view: "v" },
+    emptyData: { nik: "", lahir: "", yatim: "" } as D,
+    createApiPath: "/api/x",
+    layout: {
+      type: "single-page",
+      sections: [
+        {
+          title: "s",
+          fields: [
+            { key: "nik", label: "NIK", type: "text", span: 4, validation: { required: true } },
+            { key: "lahir", label: "Tanggal Lahir", type: "text", span: 4, validation: { required: true } },
+          ],
+        },
+      ],
+    },
+    // Menuntut medan yang NOL punya field — cacat cif_number/branch_code.
+    validate: (d: D) => (String(d.yatim ?? "").trim() ? {} : { yatim: "Cabang wajib diisi" }),
+  } as unknown as CrudForm<D>;
+}
+
+describe("spanduk galat: PERILAKU handleSave", () => {
+  it("menyebut LABEL medan yang gagal, bukan satu kalimat tetap", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    await act(async () => { await result.current.handleSave(); });
+
+    const e = String(result.current.error ?? "");
+    expect(e).toContain("NIK");
+    expect(e).toContain("Tanggal Lahir");
+    expect(e).not.toBe("Periksa field wajib");
+  });
+
+  it("medan YATIM (dituntut validate, nol punya field) tetap DISEBUT", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    await act(async () => { await result.current.handleSave(); });
+    // Justru inilah yang menahan create Nasabah Perorangan 21 hari tanpa nama.
+    expect(String(result.current.error ?? "")).toContain("yatim");
+  });
+
+  it("PEMANCAR: nol ada galat validasi -> spanduk DIAM", async () => {
+    const { result } = renderHook(() => useCrudForm<D>({ schema: schema(), mode: "create" }));
+    act(() => { result.current.setForm({ nik: "1", lahir: "2", yatim: "3" } as D); });
+    await act(async () => { await result.current.handleSave(); });
+    // Save akan gagal di jaringan (nol ada server) -> itu serverError, BUKAN
+    // spanduk validasi. Yang diasersi: ia nol lagi berbunyi soal medan.
+    const e = String(result.current.error ?? "");
+    expect(e).not.toContain("NIK:");
+    expect(e).not.toContain("Tanggal Lahir:");
+  });
+});

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

@@ -4,6 +4,7 @@ import { useEffect, useMemo, useState } from "react";
 import type { CrudForm, FormMode } from "../form-types";
 import {
   collectAllFields,
+  ringkasGalatMedan,
   collectPageFields,
   getLayoutPageCount,
   resolveApiPath,
@@ -206,7 +207,12 @@ export function useCrudForm<TData extends Record<string, unknown>>({
     setForm,
     loading,
     saving,
-    error: hasValidationError ? labels.validationError : serverError,
+    // Cabang validasi MENYEBUT medannya; cabang serverError nol tersentuh —
+    // keduanya menjawab pertanyaan berbeda dan nol boleh dilebur.
+    error: hasValidationError
+      ? ringkasGalatMedan(fieldErrors, collectAllFields(schema.layout)) ??
+        labels.validationError
+      : serverError,
     fieldErrors,
     isDirty,
     page,