@isi-ui7/bos7-shared 0.2.13 → 0.3.0

package/dist/{index.es-Dy3lNA6h.js → index.es-zuTIhIvp.js}

@@ -1,5 +1,5 @@
-import { c as Ke, g as Do } from "./index-CPY3DDQN.js";
-import { _ as Xa } from "./jspdf.es.min-Ds3Fsl60.js";
+import { c as Ke, g as Do } from "./index-1k-PSj-b.js";
+import { _ as Xa } from "./jspdf.es.min-CnDMxfNp.js";
 var vt = function(a) {
   return a && a.Math === Math && a;
 }, _ = (

package/dist/index.js

@@ -1,4 +1,4 @@
-import { m as s, a9 as o, A as t, Y as r, R as i, O as n, l, F as c, G as d, E as u, P as S, a3 as h, a2 as A, a1 as T, a0 as k, af as C, K as _, H as O, I as U, J as g, n as N, ah as P, ag as m, Q as E, i as F, D as p, f, y as I, S as R, j as x, V as v, a8 as y, o as L, h as b, L as B, M as D, T as M, W as H, C as V, e as W, z as q, a7 as K, a5 as w, a6 as z, v as G, aa as Q, ab as X, ac as Y, ad as j, k as J, U as Z, w as $, a4 as aa, Z as ea, _ as sa, p as oa, a as ta, N as ra, q as ia, r as na, $ as la, t as ca, ae as da, s as ua, B as Sa, x as ha, b as Aa, u as Ta, ai as ka, X as Ca, d as _a } from "./index-CPY3DDQN.js";
+import { m as s, a9 as o, A as t, Y as r, R as i, O as n, l, F as c, G as d, E as u, P as S, a3 as h, a2 as A, a1 as T, a0 as k, af as C, K as _, H as O, I as U, J as g, n as N, ah as P, ag as m, Q as E, i as F, D as p, f, y as I, S as R, j as x, V as v, a8 as y, o as L, h as b, L as B, M as D, T as M, W as H, C as V, e as W, z as q, a7 as K, a5 as w, a6 as z, v as G, aa as Q, ab as X, ac as Y, ad as j, k as J, U as Z, w as $, a4 as aa, Z as ea, _ as sa, p as oa, a as ta, N as ra, q as ia, r as na, $ as la, t as ca, ae as da, s as ua, B as Sa, x as ha, b as Aa, u as Ta, ai as ka, X as Ca, d as _a } from "./index-1k-PSj-b.js";
 export {
   s as AUTH7_SCOPES,
   o as AppShellLayout,

package/dist/{jspdf.es.min-Ds3Fsl60.js → jspdf.es.min-CnDMxfNp.js}

@@ -9216,7 +9216,7 @@ function(n) {
   var d = h.getContext("2d");
   d.fillStyle = "#fff", d.fillRect(0, 0, h.width, h.height);
   var m = { ignoreMouse: !0, ignoreAnimation: !0, ignoreDimensions: !0 }, _ = this;
-  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-Dy3lNA6h.js")).catch(function(k) {
+  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-zuTIhIvp.js")).catch(function(k) {
     return Promise.reject(new Error("Could not load canvg: " + k));
   }).then(function(k) {
     return k.default ? k.default : k;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.2.13",
+  "version": "0.3.0",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -35,6 +35,7 @@
     "./workflow/use-workflow-tracker": "./src/workflow/use-workflow-tracker.ts",
     "./workflow/crud-client": "./src/workflow/crud-client.ts",
     "./data-table/cursor-adapter": "./src/data-table/cursor-adapter.ts",
+    "./data-table/proxy": "./src/data-table/proxy.ts",
     "./notification/routing": "./src/notification/routing.ts",
     "./shell/interaction": "./src/shell/interaction.ts",
     "./shell/branch": "./src/shell/branch.ts",
@@ -69,14 +70,14 @@
   "peerDependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/corporate-themes": ">=0.2.0",
-    "@isi-ui7/data-table": ">=0.2.0",
-    "@isi-ui7/editable-table": ">=0.2.0",
-    "@isi-ui7/i18n": ">=0.1.0",
-    "@isi-ui7/lookup-input": ">=0.2.0",
+    "@isi-ui7/corporate-themes": ">=0.2.6",
+    "@isi-ui7/data-table": ">=0.2.4",
+    "@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.0",
     "@isi-ui7/realtime": ">=0.2.0",
-    "@isi-ui7/ui-shell": ">=0.2.0",
+    "@isi-ui7/ui-shell": ">=0.2.8",
     "next": "16.x",
     "react": ">=18",
     "react-dom": ">=18"
@@ -105,14 +106,14 @@
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "@isi-ui7/corporate-themes": "0.2.5",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4",
     "@isi-ui7/i18n": "0.2.3",
-    "@isi-ui7/modal-manager": "0.2.2",
-    "@isi-ui7/realtime": "0.2.3",
-    "@isi-ui7/ui-shell": "0.2.8",
     "@isi-ui7/data-table": "0.2.4",
-    "@isi-ui7/lookup-input": "0.2.4",
-    "@isi-ui7/editable-table": "0.2.3"
+    "@isi-ui7/corporate-themes": "0.2.6",
+    "@isi-ui7/realtime": "0.2.3",
+    "@isi-ui7/modal-manager": "0.2.2",
+    "@isi-ui7/ui-shell": "0.2.8"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -125,9 +126,9 @@
     "jose": "^5.9.6",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
-    "@isi-ui7/lookup-input": "0.2.4",
+    "@isi-ui7/data-table": "0.2.4",
     "@isi-ui7/editable-table": "0.2.3",
-    "@isi-ui7/data-table": "0.2.4"
+    "@isi-ui7/lookup-input": "0.2.4"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-components.tsx

@@ -12,6 +12,9 @@ import {
   ModalHeader,
   ProgressIndicator,
   ProgressStep,
+  Select,
+  SelectItem,
+  TextArea,
   ToastNotification,
   Toggle,
 } from "@carbon/react";
@@ -71,9 +74,19 @@ export function SharedCrudListPage({
   // deactivated / soft-deleted rows. Survives table remounts (tableKey).
   const [showInactive, setShowInactive] = useState(false);
   const inactiveParam = schema.includeInactiveParam ?? "include_inactive";
-  const additionalParams = schema.showInactiveToggle
-    ? { [inactiveParam]: showInactive ? "true" : "" }
-    : undefined;
+  // Single-select toolbar filter (opt-in via schema.filterSelect) — same
+  // additionalParams wiring as showInactiveToggle, for an arbitrary enum
+  // column instead of a boolean.
+  const [filterValue, setFilterValue] = useState("");
+  const hasInactiveToggle = Boolean(schema.showInactiveToggle);
+  const hasFilterSelect = Boolean(schema.filterSelect);
+  const additionalParams =
+    hasInactiveToggle || hasFilterSelect
+      ? {
+          ...(hasInactiveToggle ? { [inactiveParam]: showInactive ? "true" : "" } : {}),
+          ...(hasFilterSelect ? { [schema.filterSelect!.param]: filterValue } : {}),
+        }
+      : undefined;
   return (
     <PageLayout>
       <PageHeader title={schema.title} subtitle={schema.subtitle} />
@@ -104,6 +117,23 @@ export function SharedCrudListPage({
                   onToggle={(checked) => setShowInactive(checked)}
                 />
               ) : null}
+              {schema.filterSelect ? (
+                <div style={{ minWidth: "10rem" }}>
+                  <Select
+                    id={`filter-select-${schema.apiPath}`}
+                    labelText=""
+                    hideLabel
+                    size="sm"
+                    value={filterValue}
+                    onChange={(e) => setFilterValue(e.target.value)}
+                  >
+                    <SelectItem value="" text={schema.filterSelect.allLabel ?? "Semua"} />
+                    {schema.filterSelect.options.map((opt) => (
+                      <SelectItem key={opt.value} value={opt.value} text={opt.label} />
+                    ))}
+                  </Select>
+                </div>
+              ) : null}
               {toolbarExtra}
               <Button renderIcon={Add} size="sm" onClick={onAdd}>
                 {schema.addButtonLabel || labels.next}
@@ -154,6 +184,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
   const [customActionRow, setCustomActionRow] = useState<Record<string, unknown> | null>(null);
   const [customActioning, setCustomActioning] = useState(false);
   const [customActionError, setCustomActionError] = useState<string | null>(null);
+  const [customActionReason, setCustomActionReason] = useState("");
 
   // Workflow completion toast
   const [wfToast, setWfToast] = useState<{ kind: 'success' | 'error'; title: string; subtitle?: string } | null>(null);
@@ -192,6 +223,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         setCustomActionId(actionId);
         setCustomActionRow(row);
         setCustomActionError(null);
+        setCustomActionReason("");
         return;
       }
 
@@ -224,6 +256,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
     if (!schema) return;
     const id = String(customActionRow.id ?? "");
     const path = typeof schema.apiPath === "function" ? schema.apiPath(id) : schema.apiPath;
+    const body = schema.reasonRequired ? { reason: customActionReason.trim() } : {};
     setCustomActioning(true);
     setCustomActionError(null);
     try {
@@ -232,17 +265,17 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         const res = await fetch(path, {
           method: schema.method ?? "POST",
           headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({}),
+          body: JSON.stringify(body),
         });
         if (!res.ok) {
-          const body = (await res.json().catch(() => ({}))) as { error?: string };
-          throw new Error(body.error ?? `Gagal (HTTP ${res.status})`);
+          const resBody = (await res.json().catch(() => ({}))) as { error?: string };
+          throw new Error(resBody.error ?? `Gagal (HTTP ${res.status})`);
         }
         setCustomActionId(null);
         setCustomActionRow(null);
         setTableKey((v) => v + 1);
       } else {
-        const instanceId = await submitWorkflowForm(path, schema.method ?? "POST", {});
+        const instanceId = await submitWorkflowForm(path, schema.method ?? "POST", body);
         setCustomActionId(null);
         setCustomActionRow(null);
         setTableKey((v) => v + 1);
@@ -253,7 +286,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
     } finally {
       setCustomActioning(false);
     }
-  }, [customActionId, customActionRow, listSchema.customActionSchemas, tracker]);
+  }, [customActionId, customActionRow, customActionReason, listSchema.customActionSchemas, tracker]);
 
   const activeCustomSchema =
     customActionId ? listSchema.customActionSchemas?.[customActionId] : undefined;
@@ -262,6 +295,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         ? activeCustomSchema.description(customActionRow ?? {})
         : activeCustomSchema.description)
     : "";
+  const customReasonMissing = Boolean(activeCustomSchema?.reasonRequired) && customActionReason.trim().length === 0;
 
   return (
     <>
@@ -308,6 +342,15 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
           <ModalBody hasScrollingContent={false}>
             <div style={{ display: "grid", gap: "0.5rem", fontSize: "0.875rem" }}>
               <p>{customDescription}</p>
+              {activeCustomSchema.reasonRequired ? (
+                <TextArea
+                  labelText={activeCustomSchema.reasonLabel ?? "Alasan"}
+                  value={customActionReason}
+                  onChange={(e) => setCustomActionReason(e.target.value)}
+                  disabled={customActioning}
+                  rows={3}
+                />
+              ) : null}
               {customActionError ? (
                 <InlineNotification
                   kind="error"
@@ -329,7 +372,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
             <Button
               kind="primary"
               onClick={() => void doCustomAction()}
-              disabled={customActioning || !customActionRow}
+              disabled={customActioning || !customActionRow || customReasonMissing}
             >
               {customActioning ? labels.saving : (activeCustomSchema.confirmLabel ?? labels.next)}
             </Button>

package/src/crud-types.ts

@@ -37,6 +37,16 @@ export type CrudCustomActionSchema = {
    * Dipakai untuk aksi operasional seperti employee terminate/reactivate.
    */
   direct?: boolean;
+  /**
+   * Tampilkan textarea alasan di modal konfirmasi dan wajibkan isi non-kosong
+   * sebelum tombol confirm aktif. Nilai dikirim sebagai `{ reason }` di body
+   * request (digabung ke payload lain bila apiPath sama dipakai untuk field
+   * lain). Dipakai untuk aksi yang butuh audit trail eksplisit (mis. Set
+   * Non-Aktif produk) — lihat appdefs/{module}/index.def `withReason: true`.
+   */
+  reasonRequired?: boolean;
+  /** Label di atas textarea alasan. Default "Alasan". */
+  reasonLabel?: string;
 };
 
 export type CrudListSchema = {
@@ -76,6 +86,22 @@ export type CrudListSchema = {
    * or onCustomAction).
    */
   popupMenuItemsForRow?: (row: Record<string, unknown>) => CrudPopupMenuItem[];
+  /**
+   * Optional single-select toolbar filter. When an option other than "(all)"
+   * is picked, the list request carries `?<param>=<value>`; picking back to
+   * "(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.
+   */
+  filterSelect?: {
+    /** Query param name the backend reads (e.g. "vendor_type"). */
+    param: string;
+    /** Toolbar label for the select. */
+    label: string;
+    options: Array<{ value: string; label: string }>;
+    /** Label for the "no filter" option. Default "Semua". */
+    allLabel?: string;
+  };
 };
 
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {

package/src/data-table/proxy.ts

@@ -10,6 +10,15 @@ export interface ProxyBackendPostOptions {
   accessTokenCookie?: string;
 }
 
+// Toolbar filters (showInactiveToggle, filterSelect) ride as query-string
+// params on the incoming BFF request (see ServerDataTable's additionalParams)
+// even though the body carries the DataTable sort/search/pagination payload.
+// Forward that query string to the backend or those filters silently no-op.
+function backendPathWithQuery(req: NextRequest, path: string): string {
+  const search = new URL(req.url).search;
+  return search ? `${path}${search}` : path;
+}
+
 export async function proxyBackendPost(
   req: NextRequest,
   opts: ProxyBackendPostOptions,
@@ -17,7 +26,7 @@ export async function proxyBackendPost(
   const accessToken = req.cookies.get(opts.accessTokenCookie ?? "access_token")?.value;
   const result = await exchangeUserToken(accessToken ?? "", opts.audience);
   const body = await req.json();
-  const res = await fetch(`${opts.backendUrl}${opts.path}`, {
+  const res = await fetch(`${opts.backendUrl}${backendPathWithQuery(req, opts.path)}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",
@@ -57,7 +66,7 @@ export async function proxyQueryRoute(
   const accessToken = req.cookies.get(opts.accessTokenCookie ?? "access_token")?.value;
   const result = await exchangeUserToken(accessToken ?? "", opts.audience);
   const body = await req.json();
-  const res = await fetch(`${opts.backendUrl}${opts.path}`, {
+  const res = await fetch(`${opts.backendUrl}${backendPathWithQuery(req, opts.path)}`, {
     method: "POST",
     headers: {
       "Content-Type": "application/json",