@isi-ui7/bos7-shared 0.2.12 → 0.2.13

package/dist/{jspdf.es.min-Dzm5j8wC.js → jspdf.es.min-Ds3Fsl60.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-Bylk5fh-.js")).catch(function(k) {
+  return (Kt.canvg ? Promise.resolve(Kt.canvg) : import("./index.es-Dy3lNA6h.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.12",
+  "version": "0.2.13",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -9,11 +9,11 @@
     "directory": "packages/bos7-shared"
   },
   "type": "module",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "types": "src/index.ts",
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
   "exports": {
-    ".": "./src/index.ts",
+    ".": "./dist/index.js",
     "./auth7": "./src/auth7/index.ts",
     "./page-layout": "./src/page-layout.tsx",
     "./modal-layout": "./src/modal-layout.tsx",
@@ -49,139 +49,90 @@
     "./bff/health": "./src/bff/health.ts",
     "./observability/otel-init": "./src/observability/otel-init.ts",
     "./form-types": "./src/form-types.ts",
-    "./form-value-schema": "./src/form-value-schema.ts",
     "./form-numeric": "./src/form-numeric.ts",
     "./form-renderer": "./src/form-renderer.tsx",
     "./form-renderer-utils": "./src/form-renderer-utils.ts",
     "./form-rules": "./src/form-rules.ts",
     "./i18n": "./src/i18n.tsx",
     "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-    "./styles": "./src/form-contract.css"
+    "./styles": "./src/form-contract.css",
+    "./form-value-schema": "./src/form-value-schema.ts"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
-    "access": "public",
-    "main": "dist/index.js",
-    "module": "dist/index.js",
-    "types": "dist/index.d.ts",
-    "exports": {
-      ".": "./dist/index.js",
-      "./auth7": "./src/auth7/index.ts",
-      "./page-layout": "./src/page-layout.tsx",
-      "./modal-layout": "./src/modal-layout.tsx",
-      "./form-layout": "./src/form-layout.tsx",
-      "./backend": "./src/backend.ts",
-      "./export": "./src/export.ts",
-      "./types/notification": "./src/types/notification.ts",
-      "./nats/client": "./src/nats/client.ts",
-      "./event-bus": "./src/event-bus/index.ts",
-      "./event-bus/useEventBus": "./src/event-bus/useEventBus.ts",
-      "./api": "./src/api.ts",
-      "./types/core": "./src/types/core.ts",
-      "./style-contract": "./src/style-contract.ts",
-      "./crud-components": "./src/crud-components.tsx",
-      "./workflow/backend": "./src/workflow/backend.ts",
-      "./workflow/notif7": "./src/workflow/notif7.ts",
-      "./workflow/api-client": "./src/workflow/api-client.ts",
-      "./workflow/starter": "./src/workflow/starter.ts",
-      "./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",
-      "./notification/routing": "./src/notification/routing.ts",
-      "./shell/interaction": "./src/shell/interaction.ts",
-      "./shell/branch": "./src/shell/branch.ts",
-      "./notif7": "./src/notif7.ts",
-      "./shell/provider": "./src/shell/provider.tsx",
-      "./shell/app-shell-layout": "./src/shell/app-shell-layout.tsx",
-      "./notifications-bff": "./src/notifications-bff.ts",
-      "./bff/auth-me": "./src/bff/auth-me.ts",
-      "./bff/auth-refresh": "./src/bff/auth-refresh.ts",
-      "./bff/auth-logout": "./src/bff/auth-logout.ts",
-      "./bff/auth-preferences": "./src/bff/auth-preferences.ts",
-      "./bff/health": "./src/bff/health.ts",
-      "./observability/otel-init": "./src/observability/otel-init.ts",
-      "./form-types": "./src/form-types.ts",
-      "./form-numeric": "./src/form-numeric.ts",
-      "./form-renderer": "./src/form-renderer.tsx",
-      "./form-renderer-utils": "./src/form-renderer-utils.ts",
-      "./form-rules": "./src/form-rules.ts",
-      "./i18n": "./src/i18n.tsx",
-      "./workflow/use-crud-form": "./src/workflow/use-crud-form.ts",
-      "./styles": "./src/form-contract.css",
-      "./form-value-schema": "./src/form-value-schema.ts"
-    }
+    "access": "public"
   },
   "files": [
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "vite build",
-    "lint": "eslint \"src/**/*.{ts,tsx}\"",
-    "test": "vitest run --passWithNoTests",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
-    "react": ">=18",
-    "react-dom": ">=18",
-    "next": "16.x",
+    "@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/ui-shell": ">=0.2.0",
+    "@isi-ui7/lookup-input": ">=0.2.0",
     "@isi-ui7/modal-manager": ">=0.2.0",
     "@isi-ui7/realtime": ">=0.2.0",
-    "@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/editable-table": ">=0.2.0"
+    "@isi-ui7/ui-shell": ">=0.2.0",
+    "next": "16.x",
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
+    "@carbon/icons-react": "^11.71.0",
+    "@carbon/react": "^1.97.0",
     "@eslint/eslintrc": "^3.3.1",
     "@eslint/js": "^9.39.0",
+    "@testing-library/dom": "^10.0.0",
+    "@testing-library/react": "^16.0.0",
+    "@testing-library/user-event": "^14.5.0",
     "@types/react": "^19.0.0",
     "@types/react-dom": "^19.0.0",
     "@typescript-eslint/eslint-plugin": "^8.52.0",
     "@typescript-eslint/parser": "^8.52.0",
     "@vitejs/plugin-react": "^4.2.0",
-    "@testing-library/dom": "^10.0.0",
-    "@testing-library/react": "^16.0.0",
-    "@testing-library/user-event": "^14.5.0",
     "eslint": "9.39.2",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.7.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.2",
     "jsdom": "^22.1.0",
+    "next": "16.1.1",
     "typescript": "^5.3.3",
     "vite": "^5.0.0",
     "vite-plugin-dts": "^3.6.0",
     "vitest": "^1.0.0",
-    "next": "16.1.1",
-    "@isi-ui7/corporate-themes": "workspace:*",
-    "@isi-ui7/i18n": "workspace:*",
-    "@isi-ui7/ui-shell": "workspace:*",
-    "@isi-ui7/modal-manager": "workspace:*",
-    "@isi-ui7/realtime": "workspace:*",
-    "@carbon/react": "^1.97.0",
-    "@carbon/icons-react": "^11.71.0",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*"
+    "@isi-ui7/corporate-themes": "0.2.5",
+    "@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"
   },
   "dependencies": {
     "@carbon/icons-react": "^11.71.0",
     "@carbon/react": "^1.97.0",
-    "@isi-ui7/data-table": "workspace:*",
-    "@isi-ui7/lookup-input": "workspace:*",
-    "@isi-ui7/editable-table": "workspace:*",
+    "@opentelemetry/auto-instrumentations-node": "^0.57.0",
+    "@opentelemetry/exporter-trace-otlp-http": "^0.57.0",
+    "@opentelemetry/sdk-node": "^0.57.0",
+    "axios": "^1.7.7",
+    "exceljs": "^4.4.0",
     "jose": "^5.9.6",
-    "xlsx": "^0.18.5",
     "jspdf": "^4.2.1",
     "jspdf-autotable": "^5.0.7",
-    "axios": "^1.7.7",
-    "@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.4",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/data-table": "0.2.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/crud-components.tsx

@@ -13,6 +13,7 @@ import {
   ProgressIndicator,
   ProgressStep,
   ToastNotification,
+  Toggle,
 } from "@carbon/react";
 import { ServerDataTable } from "@isi-ui7/data-table";
 import type { I_DataTblColumn } from "@isi-ui7/data-table";
@@ -50,14 +51,29 @@ export function SharedCrudListPage({
   schema,
   tableKey,
   onAdd,
-  onPopupClick
+  onPopupClick,
+  toolbarExtra,
 }: {
   schema: CrudListSchema;
   tableKey?: number;
   onAdd: () => void;
   onPopupClick: (row: Record<string, unknown>, actionId: string) => void;
+  /**
+   * Optional extra toolbar action(s) rendered to the LEFT of the built-in Add
+   * button (e.g. a secondary "Bulk Create" button). Additive + backward-compatible:
+   * omit it and the toolbar renders exactly as before.
+   */
+  toolbarExtra?: ReactNode;
 }) {
   const labels = useBosSharedI18n();
+  // "Show Inactive" toggle state (opt-in via schema.showInactiveToggle). When
+  // on, the list request carries ?<param>=true so the backend surfaces
+  // 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;
   return (
     <PageLayout>
       <PageHeader title={schema.title} subtitle={schema.subtitle} />
@@ -65,14 +81,34 @@ export function SharedCrudListPage({
         <ServerDataTable
           key={tableKey}
           apiPath={schema.apiPath}
+          additionalParams={additionalParams}
           columns={schema.columns as Record<string, I_DataTblColumn>}
           showSearch={schema.showSearch ?? true}
           showSort={schema.showSort ?? true}
-          popupMenu={{ src: "local", items: schema.popupMenuItems, onClick: onPopupClick }}
+          popupMenu={{
+            src: "local",
+            items: schema.popupMenuItems,
+            itemsForRow: schema.popupMenuItemsForRow,
+            onClick: onPopupClick,
+          }}
           toolbarActions={
-            <Button renderIcon={Add} size="sm" onClick={onAdd}>
-              {schema.addButtonLabel || labels.next}
-            </Button>
+            <div style={{ display: "flex", alignItems: "center", gap: "1rem" }}>
+              {schema.showInactiveToggle ? (
+                <Toggle
+                  id={`show-inactive-${schema.apiPath}`}
+                  size="sm"
+                  labelText=""
+                  labelA={schema.showInactiveLabel ?? labels.showInactive}
+                  labelB={schema.showInactiveLabel ?? labels.showInactive}
+                  toggled={showInactive}
+                  onToggle={(checked) => setShowInactive(checked)}
+                />
+              ) : null}
+              {toolbarExtra}
+              <Button renderIcon={Add} size="sm" onClick={onAdd}>
+                {schema.addButtonLabel || labels.next}
+              </Button>
+            </div>
           }
         />
       </PageBody>
@@ -92,6 +128,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
   onEdit,
   deleteApiPath,
   onCustomAction,
+  toolbarExtra,
 }: {
   listSchema: CrudListSchema;
   deleteSchema?: CrudDeleteSchema<TData>;
@@ -99,6 +136,8 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
   onView?: (id: string) => void;
   onEdit?: (id: string) => void;
   deleteApiPath?: (id: string) => string;
+  /** Optional extra toolbar action(s) rendered beside the built-in Add button. */
+  toolbarExtra?: ReactNode;
   /**
    * Level 1: called for any popup action id not handled by built-in logic
    * (view / edit / delete) and not in listSchema.customActionSchemas (Level 2).
@@ -231,6 +270,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         tableKey={tableKey}
         onAdd={onAdd}
         onPopupClick={onPopupClick}
+        toolbarExtra={toolbarExtra}
       />
 
       {wfToast ? (

package/src/crud-types.ts

@@ -57,6 +57,25 @@ export type CrudListSchema = {
    * Keyed by popup menu item id. Actions not listed here fall through to onCustomAction (Level 1).
    */
   customActionSchemas?: Record<string, CrudCustomActionSchema>;
+  /**
+   * Show a "Show Inactive" toolbar toggle. When on, the list request carries
+   * `?<includeInactiveParam>=true` so the backend surfaces soft-deleted /
+   * deactivated rows too. Default off keeps the list active-only. Pair with
+   * `popupMenuItemsForRow` so inactive rows expose "Reactivate".
+   */
+  showInactiveToggle?: boolean;
+  /** Query param name toggled by the Show-Inactive control. Default "include_inactive". */
+  includeInactiveParam?: string;
+  /** Label for the Show-Inactive toggle (i18n'd by the caller). Default "Tampilkan Nonaktif". */
+  showInactiveLabel?: string;
+  /**
+   * Per-row popup items. When provided, overrides `popupMenuItems` for each row
+   * so the menu can depend on row state — e.g. active rows show "Deactivate",
+   * inactive rows show "Reactivate". Returned item ids route the same way as
+   * `popupMenuItems` (view/edit/delete built-in; others via customActionSchemas
+   * or onCustomAction).
+   */
+  popupMenuItemsForRow?: (row: Record<string, unknown>) => CrudPopupMenuItem[];
 };
 
 export type CrudDeleteSchema<TData extends Record<string, unknown>> = {

package/src/export.ts

@@ -1,11 +1,33 @@
-// lib/export.ts — utility export Excel dan PDF untuk halaman laporan
+// lib/export.ts — utility export Excel (styled, via exceljs) dan PDF untuk
+// halaman laporan (DG-02 PM review: export mentah -> format cantik).
 
-import * as XLSX from 'xlsx';
+import ExcelJS from 'exceljs';
 
 export interface ExportColumn {
   field: string;
   title: string;
   displayFormat?: string;
+  /** Cell alignment. Default: 'right' for displayFormat="currency", else 'left'. */
+  align?: 'left' | 'center' | 'right';
+}
+
+/** Header block rendered above the column headers (report title/period/applied filters). */
+export interface ExportMeta {
+  title?: string;
+  /** e.g. "01 Jul 2026 – 24 Jul 2026" or "Per 24 Jul 2026". */
+  period?: string;
+  /** Applied filter values, e.g. [{label:"Cabang", value:"001 — Pusat"}]. Omitted/empty filters should not be passed in. */
+  filters?: Array<{ label: string; value: string }>;
+}
+
+/** Values for a highlighted total/subtotal row, keyed by column `field`. Fields absent here render blank in the total row. */
+export type ExportTotals = Record<string, unknown>;
+
+export interface ExportOptions {
+  meta?: ExportMeta;
+  totals?: ExportTotals;
+  /** Label shown in the total row's leading cell(s). Default: "Total". */
+  totalsLabel?: string;
 }
 
 function cellValue(val: unknown, format?: string): unknown {
@@ -15,20 +37,128 @@ function cellValue(val: unknown, format?: string): unknown {
   return val;
 }
 
-export function exportToExcel<T extends Record<string, unknown>>(
+function columnAlign(c: ExportColumn): 'left' | 'center' | 'right' {
+  return c.align ?? (c.displayFormat === 'currency' ? 'right' : 'left');
+}
+
+const THIN_BORDER: Partial<ExcelJS.Borders> = {
+  top: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  left: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  bottom: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+  right: { style: 'thin', color: { argb: 'FFD0D0D0' } },
+};
+const HEADER_FILL: ExcelJS.Fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FF1F61FE' } };
+const TOTAL_FILL: ExcelJS.Fill = { type: 'pattern', pattern: 'solid', fgColor: { argb: 'FFE8F0FE' } };
+
+export async function exportToExcel<T extends Record<string, unknown>>(
   data: T[],
   columns: ExportColumn[],
-  sheetName: string
-): void {
-  const headers = columns.map((c) => c.title);
-  const rows = data.map((row) =>
-    columns.map((c) => cellValue(row[c.field], c.displayFormat))
-  );
+  sheetName: string,
+  options?: ExportOptions,
+): Promise<void> {
+  const wb = new ExcelJS.Workbook();
+  const ws = wb.addWorksheet(sheetName.slice(0, 31));
+  const colCount = columns.length;
+
+  let cursorRow = 1;
+  const meta = options?.meta;
+  if (meta?.title) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = meta.title;
+    row.getCell(1).font = { bold: true, size: 14 };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.period) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = `Periode: ${meta.period}`;
+    row.getCell(1).font = { italic: true, color: { argb: 'FF525252' } };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.filters?.length) {
+    const row = ws.getRow(cursorRow);
+    row.getCell(1).value = meta.filters.map((f) => `${f.label}: ${f.value}`).join('   ·   ');
+    row.getCell(1).font = { italic: true, size: 10, color: { argb: 'FF525252' } };
+    ws.mergeCells(cursorRow, 1, cursorRow, colCount);
+    cursorRow += 1;
+  }
+  if (meta?.title || meta?.period || meta?.filters?.length) {
+    cursorRow += 1; // blank spacer row before the column headers
+  }
+
+  const headerRowIndex = cursorRow;
+  const headerRow = ws.getRow(headerRowIndex);
+  columns.forEach((c, i) => {
+    const cell = headerRow.getCell(i + 1);
+    cell.value = c.title;
+    cell.font = { bold: true, color: { argb: 'FFFFFFFF' } };
+    cell.fill = HEADER_FILL;
+    cell.border = THIN_BORDER;
+    cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+  });
+  headerRow.height = 20;
+  cursorRow += 1;
+
+  data.forEach((row) => {
+    const r = ws.getRow(cursorRow);
+    columns.forEach((c, i) => {
+      const cell = r.getCell(i + 1);
+      cell.value = cellValue(row[c.field], c.displayFormat) as ExcelJS.CellValue;
+      cell.border = THIN_BORDER;
+      cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+      if (c.displayFormat === 'currency') cell.numFmt = '#,##0.00';
+    });
+    cursorRow += 1;
+  });
+
+  if (options?.totals && Object.keys(options.totals).length > 0) {
+    const r = ws.getRow(cursorRow);
+    const totalsLabel = options.totalsLabel ?? 'Total';
+    let labelWritten = false;
+    columns.forEach((c, i) => {
+      const cell = r.getCell(i + 1);
+      cell.font = { bold: true };
+      cell.fill = TOTAL_FILL;
+      cell.border = { ...THIN_BORDER, top: { style: 'medium', color: { argb: 'FF1F61FE' } } };
+      cell.alignment = { horizontal: columnAlign(c), vertical: 'middle' };
+      if (c.field in options.totals!) {
+        cell.value = cellValue(options.totals![c.field], c.displayFormat) as ExcelJS.CellValue;
+        if (c.displayFormat === 'currency') cell.numFmt = '#,##0.00';
+      } else if (!labelWritten) {
+        cell.value = totalsLabel;
+        labelWritten = true;
+      }
+    });
+    cursorRow += 1;
+  }
+
+  columns.forEach((c, i) => {
+    const headerLen = c.title.length;
+    const sampleLen = data.slice(0, 50).reduce((max, row) => {
+      const v = cellValue(row[c.field], c.displayFormat);
+      return Math.max(max, String(v ?? '').length);
+    }, 0);
+    ws.getColumn(i + 1).width = Math.min(Math.max(headerLen, sampleLen) + 2, 40);
+  });
+
+  // Freeze everything above and including the column header row.
+  ws.views = [{ state: 'frozen', ySplit: headerRowIndex }];
+
+  const buf = await wb.xlsx.writeBuffer();
+  const blob = new Blob([buf], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
+  const url = URL.createObjectURL(blob);
+  const a = document.createElement('a');
+  a.href = url;
+  a.download = `${sheetName}.xlsx`;
+  document.body.appendChild(a);
+  a.click();
+  a.remove();
+  URL.revokeObjectURL(url);
+}
 
-  const ws = XLSX.utils.aoa_to_sheet([headers, ...rows]);
-  const wb = XLSX.utils.book_new();
-  XLSX.utils.book_append_sheet(wb, ws, sheetName.slice(0, 31));
-  XLSX.writeFile(wb, `${sheetName}.xlsx`);
+function cellText(val: unknown, format?: string): string {
+  return String(cellValue(val, format));
 }
 
 export async function exportToPDF<T extends Record<string, unknown>>(
@@ -47,12 +177,7 @@ export async function exportToPDF<T extends Record<string, unknown>>(
 
   autoTable(doc, {
     head: [columns.map((c) => c.title)],
-    body: data.map((row) =>
-      columns.map((c) => {
-        const val = cellValue(row[c.field], c.displayFormat);
-        return String(val);
-      })
-    ),
+    body: data.map((row) => columns.map((c) => cellText(row[c.field], c.displayFormat))),
     startY: 22,
     styles: { fontSize: 8 },
     headStyles: { fillColor: [31, 97, 254] }, // Carbon blue

package/src/i18n.tsx

@@ -24,6 +24,7 @@ export type BosSharedLabels = {
   toggleOn: string;
   toggleOff: string;
   emptyValue: string;
+  showInactive: string;
 
   loading: string;
   saving: string;
@@ -71,6 +72,7 @@ export function useBosSharedI18n(): BosSharedLabels {
     toggleOn: t("bos7.toggleOn", "On"),
     toggleOff: t("bos7.toggleOff", "Off"),
     emptyValue: t("bos7.emptyValue", "—"),
+    showInactive: t("bos7.showInactive", "Tampilkan Nonaktif"),
 
     loading: t("bos7.loading", "Memuat data..."),
     saving: t("bos7.saving", "Memproses..."),