@isi-ui7/bos7-shared 0.3.11 → 0.4.1

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,12 +13,13 @@ 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 { 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";
@@ -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,6 +180,37 @@ 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}
               {(schema.showAddButton ?? true) ? (
                 <Button renderIcon={Add} size="sm" onClick={onAdd}>

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

@@ -108,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"). */
@@ -118,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/date-field-render.test.tsx

@@ -0,0 +1,83 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen, fireEvent } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SchemaFormRenderer } from "./form-renderer";
+import type { FormSection } from "./form-types";
+
+type D = Record<string, unknown>;
+
+// Laporan DG-00 (agent7, 2026-08-31): field "date" di form-renderer.tsx punya
+// DUA cacat. Cacat B (TERBUKTI + DIPERBAIKI di sini): `value={asString(rawValue)}`
+// mengirim string ISO mentah ke DatePicker Carbon (flatpickr) yang
+// dikonfigurasi dateFormat="d-m-Y", jadi flatpickr mem-parse ULANG string ISO
+// itu SEOLAH ia format d-m-Y — tanggal TERSIMPAN tampil SALAH saat re-render.
+// Diperbaiki dgn `fromLocalISODate()` (Date, bukan string) di form-renderer.tsx.
+//
+// Cacat A (diklaim DG-00 dari fiber React browser sungguhan: tanggal yg
+// DIKETIK nol pernah masuk state) — TIDAK bisa direproduksi di tes terisolasi
+// ini, bahkan pada kode SEBELUM perbaikan (lihat ledger dg-05 2026-08-31):
+// `allowInput` Carbon versi ini SUDAH default `true` (DatePicker.js:377,
+// `allowInput ?? true`), dan `fireEvent.blur` mengonfirmasi commit-on-blur
+// bekerja di kedua kode lama & baru. Tes di bawah HANYA membuktikan alur
+// commit bekerja di form-renderer terisolasi — ia BUKAN bukti Cacat A sudah
+// 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.
+
+const dateSection: FormSection<D> = {
+  title: "Tanggal",
+  fields: [{ key: "tanggal_lahir", label: "Tanggal Lahir", type: "date", span: 4 }],
+};
+
+describe("field date — re-render dari value tersimpan (Cacat B)", () => {
+  it("ISO tersimpan tampil sbg tanggal yg SAMA dlm format d-m-Y, bukan digeser", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="edit"
+        value={{ tanggal_lahir: "1990-06-15" }}
+        sections={[dateSection]}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    // Harus 15-06-1990 (hari yg SAMA, cuma beda format tampilan) — BUKAN
+    // tanggal lain hasil salah-parse "1990-06-15" seolah format d-m-Y.
+    expect(input.value).toBe("15-06-1990");
+  });
+
+  it("kontrol: tanggal akhir-tahun tetap utuh (bukan kebetulan lolos di satu kasus)", () => {
+    render(
+      <SchemaFormRenderer<D>
+        mode="edit"
+        value={{ tanggal_lahir: "2026-12-31" }}
+        sections={[dateSection]}
+        onChange={() => {}}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    expect(input.value).toBe("31-12-2026");
+  });
+});
+
+describe("field date — ketik tangan lalu commit (Cacat A)", () => {
+  it("tanggal yg DIKETIK (bukan dipilih dari kalender) masuk ke onChange", async () => {
+    const user = userEvent.setup();
+    const onChange = vi.fn();
+
+    render(
+      <SchemaFormRenderer<D>
+        mode="create"
+        value={{}}
+        sections={[dateSection]}
+        onChange={onChange}
+      />,
+    );
+    const input = screen.getByLabelText("Tanggal Lahir") as HTMLInputElement;
+    await user.type(input, "15-06-1990");
+    fireEvent.blur(input); // commit alami operator (pindah fokus keluar kotak)
+
+    const patches = onChange.mock.calls.map((c) => c[0]);
+    const got = patches.find((p) => p?.tanggal_lahir);
+    expect(got?.tanggal_lahir).toBe("1990-06-15");
+  });
+});

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-utils.ts

@@ -185,3 +185,22 @@ export function toLocalISODate(date: Date | undefined | null): string {
   const d = String(date.getDate()).padStart(2, "0");
   return `${y}-${m}-${d}`;
 }
+
+/**
+ * Kebalikan `toLocalISODate` — mem-parse "YYYY-MM-DD" jadi `Date` lokal
+ * (bukan `new Date(iso)` yang mem-parse sbg UTC dan bisa menggeser sehari,
+ * kelas bug yang sama dgn di atas, arah terbalik).
+ *
+ * Dipakai supaya prop `value` DatePicker Carbon menerima `Date`, BUKAN
+ * string ISO mentah — string ISO yang diberikan ke DatePicker dgn
+ * `dateFormat="d-m-Y"` di-parse ULANG flatpickr SEOLAH ia format d-m-Y,
+ * menghasilkan tanggal lain sama sekali (laporan DG-00, agent7 2026-08-31).
+ */
+export function fromLocalISODate(iso: string | undefined | null): Date | undefined {
+  if (!iso) return undefined;
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
+  if (!m) return undefined;
+  const [, y, mo, d] = m;
+  const date = new Date(Number(y), Number(mo) - 1, Number(d));
+  return Number.isNaN(date.getTime()) ? undefined : date;
+}