@isi-ui7/bos7-shared 0.2.4 → 0.2.7

package/dist/shell/app-shell-layout.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import { ElementType, ReactNode } from 'react';
 
 export interface AppShellAuthState {
     isAuthenticated: boolean;
@@ -12,7 +12,22 @@ export interface AppShellAuthState {
     login: () => void;
     logout: () => Promise<void> | void;
 }
-export type ShellNavItemLike = any;
+/**
+ * Structural shape of a side-nav item, mirroring ui-shell's `ShellNavItem`.
+ * `label`/`href` are required to stay mutually assignable with `ShellNavItem`:
+ * this type is used both covariantly (`navItems`) and contravariantly
+ * (`markActive`'s parameter), so consumers passing `ShellNavItem`-typed values
+ * would otherwise fail under `strict`. The index signature keeps it permissive
+ * for extra metadata (e.g. `requiredPermission`).
+ */
+export interface ShellNavItemLike {
+    label: string;
+    href: string;
+    isActive?: boolean;
+    icon?: string;
+    children?: ShellNavItemLike[];
+    [key: string]: unknown;
+}
 export interface ShellNotificationLike {
     id?: string;
     read?: boolean;
@@ -43,9 +58,9 @@ export interface AppShellLayoutDeps {
         theme: ThemeLike;
     };
     useNotificationBell: (opts: NotificationBellOptionsLike) => NotificationBellLike;
-    GlobalTheme: any;
-    ModalProvider: any;
-    UiShell: any;
+    GlobalTheme: ElementType;
+    ModalProvider: ElementType;
+    UiShell: ElementType;
     useAuth?: () => AppShellAuthState;
 }
 export interface AppShellLayoutProps {
@@ -63,7 +78,7 @@ export interface AppShellLayoutProps {
     notificationsViewAllTarget?: string;
     hideMenuButton?: boolean;
     disableAppsMenu?: boolean;
-    sideNavMode?: "drilldown" | "overlay";
+    sideNavMode?: "drilldown" | "overlay" | "expand";
     sideNavItems?: ShellNavItemLike[];
 }
 export declare function AppShellLayout({ children, deps, navItems, markActive, appNameFallback, auth7UiUrlFallback, portalUrlFallback, roleFallback, appSwitchMode, resolveNotificationHref, notificationsViewAllHref, notificationsViewAllTarget, hideMenuButton, disableAppsMenu, sideNavMode, sideNavItems, }: AppShellLayoutProps): import("react/jsx-runtime").JSX.Element;

package/dist/style-contract.d.ts

@@ -1,5 +1,15 @@
 export type Ui7FormDensity = "compact" | "comfortable";
 export type Ui7ThemeDensity = Ui7FormDensity | "normal";
+/**
+ * Desktop form-panel width. Mobile + tablet (<1056px) always release the
+ * cap and stretch to 100% — the modifier only matters at ≥1056px.
+ *
+ *  - "half"        → 50% of page body
+ *  - "two-thirds"  → 66.6667% (default — readable column width on wide
+ *                    monitors, what the contract shipped with originally)
+ *  - "full"        → 100% (forms with many columns or wide tables inside)
+ */
+export type Ui7FormWidth = "half" | "two-thirds" | "full";
 export interface Ui7FormVisualTokens {
     labelSpacing: "6px";
     labelFontSize: "12px";
@@ -38,6 +48,9 @@ export declare const UI7_FORM_VISUAL_CLASSNAMES: {
     readonly scope: "ui7-form-contract";
     readonly densityCompact: "ui7-form-contract--density-compact";
     readonly densityComfortable: "ui7-form-contract--density-comfortable";
+    readonly widthHalf: "ui7-form-contract--width-half";
+    readonly widthTwoThirds: "ui7-form-contract--width-two-thirds";
+    readonly widthFull: "ui7-form-contract--width-full";
     readonly readonly: "ui7-form-contract--readonly";
     readonly row: "ui7-form-row";
     readonly section: "ui7-form-section";
@@ -52,21 +65,23 @@ export declare const UI7_FORM_VISUAL_CLASSNAMES: {
 export declare const UI7_FORM_DENSITY_TOKENS: {
     readonly compact: {
         readonly controlHeight: "2rem";
-        readonly rowGap: "0.75rem";
-        readonly sectionGap: "1rem";
-        readonly columnGap: "0.75rem";
+        readonly rowGap: "1rem";
+        readonly sectionGap: "1.25rem";
+        readonly columnGap: "1rem";
     };
     readonly comfortable: {
         readonly controlHeight: "2.5rem";
-        readonly rowGap: "1rem";
+        readonly rowGap: "1.25rem";
         readonly sectionGap: "1.5rem";
-        readonly columnGap: "1rem";
+        readonly columnGap: "1.25rem";
     };
 };
 export declare function normalizeUi7FormDensity(density?: Ui7ThemeDensity | null, fallback?: Ui7FormDensity): Ui7FormDensity;
 export declare function getUi7FormDensityClassName(density?: Ui7ThemeDensity | null, fallback?: Ui7FormDensity): string;
+export declare function getUi7FormWidthClassName(width?: Ui7FormWidth | null): string;
 export declare function getUi7FormContractClassName(options?: {
     density?: Ui7ThemeDensity | null;
+    width?: Ui7FormWidth | null;
     readonly?: boolean;
     className?: string | null;
 }): string;

package/dist/workflow/starter.d.ts

@@ -13,9 +13,22 @@ export type StartWorkflowInput = {
     flowId: string;
     payload: Record<string, unknown>;
     externalRef?: string;
+    /**
+     * Optional override for initiator identity. By default the helper decodes
+     * the full tenant identity (user_id, username, org_id, branch_id, branch_code)
+     * from the access token and uses that. Any field explicitly set here wins.
+     *
+     * Set ONLY when the caller has a verified reason to override (rare). For
+     * normal flow-start paths leave this undefined — letting the helper read
+     * the JWT keeps initiator_context aligned with the auth7 signature.
+     */
     initiatorContext?: {
         user_id?: string;
+        username?: string;
+        org_id?: string;
         branch_id?: string;
+        branch_code?: string;
+        ip?: string;
     };
     /** User access token dari auth7 — diforward ke workflow7 sebagai Bearer. */
     userAccessToken: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@isi-ui7/bos7-shared",
-  "version": "0.2.4",
+  "version": "0.2.7",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -72,7 +72,8 @@
     "@carbon/react": "^1.97.0",
     "@carbon/icons-react": "^11.71.0",
     "@isi-ui7/data-table": ">=0.2.0",
-    "@isi-ui7/lookup-input": ">=0.2.0"
+    "@isi-ui7/lookup-input": ">=0.2.0",
+    "@isi-ui7/editable-table": ">=0.2.0"
   },
   "devDependencies": {
     "@eslint/eslintrc": "^3.3.1",
@@ -98,13 +99,14 @@
     "next": "16.1.1",
     "@carbon/react": "^1.97.0",
     "@carbon/icons-react": "^11.71.0",
-    "@isi-ui7/ui-shell": "0.2.3",
     "@isi-ui7/i18n": "0.2.0",
+    "@isi-ui7/corporate-themes": "0.2.4",
+    "@isi-ui7/ui-shell": "0.2.4",
     "@isi-ui7/modal-manager": "0.2.1",
-    "@isi-ui7/lookup-input": "0.2.2",
     "@isi-ui7/realtime": "0.2.2",
-    "@isi-ui7/corporate-themes": "0.2.3",
-    "@isi-ui7/data-table": "0.2.2"
+    "@isi-ui7/lookup-input": "0.2.2",
+    "@isi-ui7/data-table": "0.2.2",
+    "@isi-ui7/editable-table": "0.2.2"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
@@ -117,8 +119,9 @@
     "@opentelemetry/sdk-node": "^0.57.0",
     "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
     "@opentelemetry/auto-instrumentations-node": "^0.57.0",
+    "@isi-ui7/lookup-input": "0.2.2",
     "@isi-ui7/data-table": "0.2.2",
-    "@isi-ui7/lookup-input": "0.2.2"
+    "@isi-ui7/editable-table": "0.2.2"
   },
   "scripts": {
     "build": "vite build",

package/src/crud-components.tsx

@@ -15,6 +15,7 @@ import {
   ToastNotification,
 } 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 { Ui7FormDensity } from "./style-contract";
@@ -25,6 +26,24 @@ import { useCrudForm } from "./workflow/use-crud-form";
 import { useWorkflowTracker } from "./workflow/use-workflow-tracker";
 import { useBosSharedI18n } from "./i18n";
 
+// Re-export the value_schema → form adapter so category pages (bos7-enterprise)
+// can compose: [scopeSection(t), ...buildValueSections(schema, t).sections].
+export {
+  buildValueSections,
+  buildXRulesValidator,
+} from "./form-value-schema";
+export type {
+  JSONSchema,
+  XUi,
+  XUiRoot,
+  XUiNumeric,
+  XUiOption,
+  XUiWidget,
+  XRule,
+  XRuleOp,
+  ValueValidatorFn,
+} from "./form-value-schema";
+
 // ── List page (bare) ──────────────────────────────────────────────────────────
 
 export function SharedCrudListPage({
@@ -46,10 +65,10 @@ export function SharedCrudListPage({
         <ServerDataTable
           key={tableKey}
           apiPath={schema.apiPath}
-          columns={schema.columns as any}
+          columns={schema.columns as Record<string, I_DataTblColumn>}
           showSearch={schema.showSearch ?? true}
           showSort={schema.showSort ?? true}
-          popupMenu={{ src: "local", items: schema.popupMenuItems as any, onClick: onPopupClick }}
+          popupMenu={{ src: "local", items: schema.popupMenuItems, onClick: onPopupClick }}
           toolbarActions={
             <Button renderIcon={Add} size="sm" onClick={onAdd}>
               {schema.addButtonLabel || labels.next}
@@ -307,6 +326,9 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
 }) {
   const labels = useBosSharedI18n();
   const density = densityProp ?? schema.density ?? "compact";
+  // Width default lives in the renderer — passing undefined here keeps
+  // the contract function's "two-thirds" fallback as the single source.
+  const width = schema.width;
   const {
     form,
     setForm,
@@ -379,6 +401,7 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
             disabled={saving}
             onChange={setForm}
             density={density}
+            width={width}
           />
         </PageBody>
       );
@@ -437,6 +460,7 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
                   disabled={saving}
                   onChange={setForm}
                   density={density}
+                  width={width}
                 />
               </div>
             ))}
@@ -463,6 +487,7 @@ export function CrudSchemaPage<TData extends Record<string, unknown>>({
             disabled={saving}
             onChange={setForm}
             density={density}
+            width={width}
           />
         ) : null}
       </PageBody>

package/src/crud-hooks.ts

@@ -9,9 +9,12 @@ export async function runCrudHook<TData extends Record<string, unknown>, TResult
   return hook(data, context);
 }
 
-export function applyCrudFieldOverrides<TField extends { key: string; readonly?: boolean; required?: boolean; helperText?: unknown }>(
+export function applyCrudFieldOverrides<
+  TField extends { key: string; readonly?: boolean; required?: boolean; helperText?: unknown },
+  TData extends Record<string, unknown> = Record<string, unknown>,
+>(
   fields: TField[],
-  hooks?: CrudActionOverrideHooks<Record<string, unknown>> | CrudActionOverrideHooks<any>,
+  hooks?: CrudActionOverrideHooks<TData>,
 ): TField[] {
   if (!hooks?.fieldOverrides) return fields;
 

package/src/form-contract.css

@@ -1,6 +1,29 @@
 /* Form contract — Carbon overrides scoped to .ui7-form-contract
    Token source of truth: UI7_FORM_VISUAL_TOKENS in style-contract.ts */
 
+/* Panel width — desktop-first (matches the rest of this file).
+   The width modifier (one of --width-half / --width-two-thirds / --width-full)
+   is always present on the root — `getUi7FormContractClassName` emits one,
+   defaulting to two-thirds when the consumer omits the option. Base scope
+   sets only the hard ceiling + alignment; modifier sets the width. The
+   breakpoint override at the bottom of the file releases the cap on tablet
+   + mobile (<1056px) so fields can use full width on narrow screens. */
+.ui7-form-contract {
+  max-width: 1200px;
+}
+
+.ui7-form-contract--width-half {
+  width: 50%;
+}
+
+.ui7-form-contract--width-two-thirds {
+  width: 66.6667%;
+}
+
+.ui7-form-contract--width-full {
+  width: 100%;
+}
+
 /* Label: 12px / 500 / 16px */
 .ui7-form-contract .cds--label {
   margin-block-end: 0;
@@ -21,15 +44,54 @@
   line-height: 1.25rem;
 }
 
+/* Control height — keep Select aligned with TextInput / DatePicker per density.
+   Carbon uses logical `block-size` (not `height`) on every input element and
+   resolves it through --cds-layout-size-height-* tokens that the React `size`
+   prop sets on the wrapper. A `height` rule alone loses the cascade because
+   `block-size` is a separate physical→logical property in horizontal writing
+   mode. We do TWO things to win cleanly:
+     1. Redirect Carbon's height tokens at the density-modifier class
+        (see @isi-ui7/corporate-themes globals.scss).
+     2. Set both `block-size` AND `height` here as a safety net, anchored to
+        the same var so density swaps stay in sync across all input flavours.
+   --ui7-form-control-height resolves to 1.75rem (compact) / 2.5rem (comfortable). */
+.ui7-form-contract .cds--text-input,
+.ui7-form-contract .cds--select-input,
+.ui7-form-contract .cds--date-picker__input,
+.ui7-form-contract .cds--number input,
+.ui7-form-contract .cds--combo-box__input,
+.ui7-form-contract .cds--dropdown {
+  block-size: var(--ui7-form-control-height);
+  min-block-size: var(--ui7-form-control-height);
+  max-block-size: var(--ui7-form-control-height);
+  height: var(--ui7-form-control-height);
+  min-height: var(--ui7-form-control-height);
+}
+
 /* Full-width date picker */
 .ui7-form-contract .cds--date-picker,
 .ui7-form-contract .cds--date-picker-container {
   width: 100%;
 }
 
+/* ── Tablet + mobile: release the desktop width cap ─────────────────────── */
+/* Below Carbon's lg breakpoint (1056px), narrow viewports need every
+   available pixel — any desktop width modifier (half / two-thirds / full)
+   would leave fields cramped. Release back to full width here, beating
+   the modifier selectors via specificity (compound) + later declaration. */
+@media (max-width: 1055px) {
+  .ui7-form-contract,
+  .ui7-form-contract.ui7-form-contract--width-half,
+  .ui7-form-contract.ui7-form-contract--width-two-thirds,
+  .ui7-form-contract.ui7-form-contract--width-full {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+
 /* ── Mobile: collapse all form panels to single column ───────────────────── */
-/* Desktop-first: multi-column span values set via inline style are overridden
-   below Carbon's md breakpoint (671px). !important required to beat inline style. */
+/* Multi-column span values set via inline style are overridden below Carbon's
+   md breakpoint (671px). !important required to beat inline style. */
 @media (max-width: 671px) {
   .ui7-form-contract .ui7-form-row > .ui7-form-column {
     grid-column: 1 / -1 !important;

package/src/form-numeric.ts

@@ -171,3 +171,19 @@ export const INDONESIA_CURRENCY_CONFIG: CurrencyPrecisionConfig = {
   precisionByCurrency: { IDR: 2, USD: 4 },
   defaultPrecision: 2,
 };
+
+/**
+ * Whole-rupiah currency config — used for ledger-style fields like plafond,
+ * subsidi, agent limit, where the convention in Indonesian retail banking is
+ * to round to whole IDR (no sen). USD/USD-denominated fields still keep 2
+ * decimals (standard cents). Default precision is 0 so any other currency
+ * defaults to whole units in these contexts.
+ *
+ * Use this for "agent plafond / saldo / subsidi" style fields. For amounts
+ * that genuinely need sub-rupiah precision (e.g. percentage-derived fees,
+ * accrued interest), prefer `INDONESIA_CURRENCY_CONFIG` instead.
+ */
+export const INDONESIA_RUPIAH_WHOLE_CONFIG: CurrencyPrecisionConfig = {
+  precisionByCurrency: { IDR: 0, USD: 2 },
+  defaultPrecision: 0,
+};