@isi-ui7/bos7-shared 0.2.11 → 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.11",
+  "version": "0.2.13",
   "description": "Shared auth7 and layout primitives for bos7 applications.",
   "license": "MIT",
   "repository": {
@@ -42,6 +42,11 @@
     "./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",
@@ -62,67 +67,67 @@
     "src"
   ],
   "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",
-    "@carbon/react": "^1.97.0",
-    "@carbon/icons-react": "^11.71.0",
-    "@isi-ui7/i18n": "0.2.2",
-    "@isi-ui7/corporate-themes": "0.2.4",
-    "@isi-ui7/ui-shell": "0.2.4",
+    "@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/data-table": "0.2.3",
-    "@isi-ui7/lookup-input": "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",
+    "@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/data-table": "0.2.3",
-    "@isi-ui7/lookup-input": "0.2.3",
-    "@isi-ui7/editable-table": "0.2.3"
+    "@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",

package/src/bff/auth-logout.ts

@@ -0,0 +1,106 @@
+// bff/auth-logout.ts — Shared BFF handlers for /api/auth/logout
+// Logout endpoint for auth7. Canonical source: bos7-template.
+// Byte-identical across bos7-template, bos7-enterprise, bos7-portal.
+//
+// Config is fully env-driven (no per-app hardcoded values). Module-level env
+// assertions throw at import time, matching the original per-app behavior.
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const AUTH7_API_URL = process.env.AUTH7_API_URL;
+if (!AUTH7_API_URL) throw new Error('[bos7] AUTH7_API_URL env var is required');
+const CLIENT_ID = process.env.AUTH7_CLIENT_ID || process.env.NEXT_PUBLIC_AUTH7_CLIENT_ID;
+if (!CLIENT_ID) throw new Error('[bos7] AUTH7_CLIENT_ID env var is required');
+const AUTH7_UI_URL = process.env.AUTH7_UI_URL || process.env.NEXT_PUBLIC_AUTH7_URL;
+const APP_URL = process.env.APP_URL || process.env.NEXT_PUBLIC_APP_URL || '';
+const LOGOUT_MARKER_COOKIE = 'bos7_logout_at';
+const LOGOUT_MARKER_DOMAIN = process.env.BOS7_COOKIE_DOMAIN || '.bos7.local';
+
+function getPostLogoutRedirectUri(request: NextRequest): string {
+  return new URL('/', APP_URL || request.url).toString();
+}
+
+function getAuth7LogoutUrl(request: NextRequest): string {
+  const url = new URL('/oauth2/logout', AUTH7_UI_URL);
+  url.searchParams.set('client_id', CLIENT_ID!);
+  url.searchParams.set('post_logout_redirect_uri', getPostLogoutRedirectUri(request));
+  return url.toString();
+}
+
+function clearAuthCookies(response: NextResponse): void {
+  const cookies = [
+    'access_token',
+    'refresh_token',
+    'id_token',
+    'token_expires_at',
+    'token_scope',
+    'auth7_pkce_verifier',
+    'auth7_oauth_state',
+    'auth7_return_url',
+  ];
+
+  cookies.forEach((name) => {
+    response.cookies.set(name, '', {
+      path: '/',
+      maxAge: 0,
+      sameSite: 'lax',
+    });
+  });
+}
+
+function setGlobalLogoutMarker(response: NextResponse): void {
+  response.cookies.set(LOGOUT_MARKER_COOKIE, Date.now().toString(), {
+    path: '/',
+    sameSite: 'lax',
+    secure: process.env.NODE_ENV === 'production',
+    domain: LOGOUT_MARKER_DOMAIN,
+    maxAge: 60 * 60 * 24 * 30,
+  });
+}
+
+// Public signatures use Web `Request`/`Response` (see auth-me.ts for why); the
+// runtime object is always a real NextRequest.
+
+// POST: clear httpOnly cookies (called from JS before navigating to auth7 SSO logout)
+export async function POST(request: Request): Promise<Response> {
+  const req = request as unknown as NextRequest;
+  const accessToken = req.cookies.get('access_token')?.value;
+  if (accessToken) {
+    try {
+      await fetch(`${AUTH7_API_URL}/v1/auth/logout`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${accessToken}` },
+      });
+    } catch { /* best-effort */ }
+  }
+  const res = NextResponse.json({ ok: true });
+  clearAuthCookies(res);
+  setGlobalLogoutMarker(res);
+  return res;
+}
+
+export async function GET(request: Request): Promise<Response> {
+  const req = request as unknown as NextRequest;
+  const accessToken = req.cookies.get('access_token')?.value;
+
+  // Invalidate session on auth7 backend (best-effort)
+  if (accessToken) {
+    try {
+      await fetch(`${AUTH7_API_URL}/v1/auth/logout`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+    } catch {
+      // Ignore backend errors — we still clear local cookies
+    }
+  }
+
+  const response = NextResponse.redirect(getAuth7LogoutUrl(req));
+  clearAuthCookies(response);
+  setGlobalLogoutMarker(response);
+
+  return response;
+}

package/src/bff/auth-me.ts

@@ -0,0 +1,74 @@
+// bff/auth-me.ts — Shared BFF handler for /api/auth/me
+// Proxy to auth7 /oauth2/userinfo, augmenting userinfo with JWT claims
+// (branch_id, roles) for shell display. Canonical source: bos7-template.
+//
+// Apps re-export the ready GET (default error code 'unauthorized'), or build a
+// variant via makeAuthMeRoute({ errorCode }) — e.g. bos7-enterprise uses
+// 'unauthenticated'.
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const AUTH7_API_URL = process.env.AUTH7_API_URL || 'http://localhost:8090';
+
+export interface AuthMeRouteOptions {
+  /** Error code returned in the 401 body when no access_token cookie is present. */
+  errorCode?: string;
+}
+
+function decodeJWTPayload(token: string): Record<string, unknown> | null {
+  try {
+    const parts = token.split('.');
+    if (parts.length < 2) return null;
+    const payload = parts[1];
+    const decoded = Buffer.from(payload, 'base64url').toString('utf-8');
+    return JSON.parse(decoded);
+  } catch {
+    return null;
+  }
+}
+
+export function makeAuthMeRoute(options: AuthMeRouteOptions = {}) {
+  const errorCode = options.errorCode ?? 'unauthorized';
+
+  // NOTE: The public signature uses the Web `Request`/`Response` types (not
+  // NextRequest/NextResponse) so the exported route handler stays assignable to
+  // Next's RouteHandlerConfig regardless of which `next` install resolves the
+  // type. At runtime Next always passes a real NextRequest, so the internal
+  // cast is safe.
+  return async function GET(request: Request): Promise<Response> {
+    const req = request as unknown as NextRequest;
+    const accessToken = req.cookies.get('access_token')?.value;
+
+    if (!accessToken) {
+      return NextResponse.json({ error: errorCode }, { status: 401 });
+    }
+
+    try {
+      // Fetch userinfo from auth7 OAuth2 endpoint
+      const response = await fetch(`${AUTH7_API_URL}/oauth2/userinfo`, {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+
+      if (!response.ok) {
+        return NextResponse.json({ error: 'userinfo_failed' }, { status: response.status });
+      }
+
+      const userInfo = await response.json();
+
+      // Augment with JWT claims for shell display
+      const jwtClaims = decodeJWTPayload(accessToken);
+      if (jwtClaims) {
+        userInfo.roles = jwtClaims.roles || userInfo.roles || [];
+        userInfo.branch_id = jwtClaims.branch_id || null;
+      }
+
+      return NextResponse.json(userInfo);
+    } catch {
+      return NextResponse.json({ error: 'server_error' }, { status: 500 });
+    }
+  };
+}
+
+export const GET = makeAuthMeRoute();

package/src/bff/auth-preferences.ts

@@ -0,0 +1,80 @@
+// bff/auth-preferences.ts — Shared BFF handlers for /api/auth/preferences
+// Locale preference (GET/POST) backed by auth7 profile + core7_locale cookie.
+// Canonical source: bos7-template. Byte-identical across bos7-template,
+// bos7-portal, bos7-workflow, auth7-ui.
+
+import { NextRequest, NextResponse } from "next/server";
+
+const COOKIE_KEY = "core7_locale";
+const VALID = new Set(["id", "en"]);
+const AUTH7_API_URL = process.env.AUTH7_API_URL || "http://localhost:8090";
+
+// Public signatures use Web `Request`/`Response` (see bff/auth-me.ts for why);
+// the runtime object is always a real NextRequest.
+export async function GET(request: Request): Promise<Response> {
+  const req = request as unknown as NextRequest;
+  const cookieLocale = req.cookies.get(COOKIE_KEY)?.value ?? "id";
+  const accessToken = req.cookies.get("access_token")?.value;
+  if (!accessToken) {
+    return NextResponse.json({ locale: VALID.has(cookieLocale) ? cookieLocale : "id" });
+  }
+
+  try {
+    const res = await fetch(`${AUTH7_API_URL}/v1/auth/me`, {
+      headers: { Authorization: `Bearer ${accessToken}` },
+      cache: "no-store",
+    });
+    if (!res.ok) {
+      return NextResponse.json({ locale: VALID.has(cookieLocale) ? cookieLocale : "id" });
+    }
+    const data = (await res.json()) as { preferred_locale?: string };
+    const locale = data?.preferred_locale && VALID.has(data.preferred_locale) ? data.preferred_locale : (VALID.has(cookieLocale) ? cookieLocale : "id");
+    const response = NextResponse.json({ locale });
+    response.cookies.set(COOKIE_KEY, locale, {
+      httpOnly: false,
+      secure: process.env.NODE_ENV === "production",
+      sameSite: "lax",
+      maxAge: 31536000,
+      path: "/",
+    });
+    return response;
+  } catch {
+    return NextResponse.json({ locale: VALID.has(cookieLocale) ? cookieLocale : "id" });
+  }
+}
+
+export async function POST(request: Request): Promise<Response> {
+  const req = request as unknown as NextRequest;
+  const accessToken = req.cookies.get("access_token")?.value;
+  let locale = "id";
+  try {
+    const body = (await req.json()) as { locale?: string };
+    if (body?.locale && VALID.has(body.locale)) locale = body.locale;
+  } catch {
+    return NextResponse.json({ error: "invalid_request" }, { status: 400 });
+  }
+
+  const res = NextResponse.json({ locale });
+  if (accessToken) {
+    try {
+      await fetch(`${AUTH7_API_URL}/v1/auth/profile`, {
+        method: "PUT",
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${accessToken}`,
+        },
+        body: JSON.stringify({ preferred_locale: locale }),
+      });
+    } catch {
+      // keep local cookie fallback even if backend sync fails
+    }
+  }
+  res.cookies.set(COOKIE_KEY, locale, {
+    httpOnly: false,
+    secure: process.env.NODE_ENV === "production",
+    sameSite: "lax",
+    maxAge: 31536000,
+    path: "/",
+  });
+  return res;
+}

package/src/bff/auth-refresh.ts

@@ -0,0 +1,106 @@
+// bff/auth-refresh.ts — Shared BFF handler for /api/auth/refresh
+// Silent token refresh endpoint. Canonical source: bos7-template.
+//
+// The only per-app difference is the CLIENT_ID fallback used when
+// AUTH7_CLIENT_ID is unset. Apps re-export the ready POST (fallback
+// 'bos7-template') when byte-identical, or build a variant via
+// makeAuthRefreshRoute({ clientIdFallback }).
+
+import { NextRequest, NextResponse } from 'next/server';
+
+const AUTH7_API_URL = process.env.AUTH7_API_URL || 'http://localhost:8090';
+
+export interface AuthRefreshRouteOptions {
+  /** Fallback client_id used when AUTH7_CLIENT_ID env var is unset. */
+  clientIdFallback?: string;
+}
+
+function getRefreshToken(request: NextRequest): string | null {
+  return request.cookies.get('refresh_token')?.value ?? null;
+}
+
+export function makeAuthRefreshRoute(options: AuthRefreshRouteOptions = {}) {
+  const CLIENT_ID = process.env.AUTH7_CLIENT_ID || options.clientIdFallback || 'bos7-template';
+
+  // Public signature uses Web `Request`/`Response` (see auth-me.ts for why); the
+  // runtime object is always a real NextRequest.
+  return async function POST(request: Request): Promise<Response> {
+    const refreshToken = getRefreshToken(request as unknown as NextRequest);
+
+    if (!refreshToken) {
+      return NextResponse.json({ error: 'No refresh token' }, { status: 401 });
+    }
+
+    try {
+      const body = new URLSearchParams({
+        grant_type: 'refresh_token',
+        refresh_token: refreshToken,
+        client_id: CLIENT_ID,
+      });
+
+      const response = await fetch(`${AUTH7_API_URL}/oauth2/token`, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+        },
+        body: body.toString(),
+      });
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => ({}));
+        throw new Error(errorData.error_description || errorData.error || 'Token refresh failed');
+      }
+
+      const tokens = await response.json();
+      const expiresAt = Date.now() + tokens.expires_in * 1000;
+
+      const jsonResponse = NextResponse.json({ success: true });
+
+      jsonResponse.cookies.set('access_token', tokens.access_token, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: tokens.expires_in,
+        path: '/',
+      });
+
+      jsonResponse.cookies.set('token_expires_at', expiresAt.toString(), {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: tokens.expires_in,
+        path: '/',
+      });
+
+      jsonResponse.cookies.set('token_scope', tokens.scope, {
+        httpOnly: true,
+        secure: process.env.NODE_ENV === 'production',
+        sameSite: 'lax',
+        maxAge: tokens.expires_in,
+        path: '/',
+      });
+
+      if (tokens.refresh_token) {
+        jsonResponse.cookies.set('refresh_token', tokens.refresh_token, {
+          httpOnly: true,
+          secure: process.env.NODE_ENV === 'production',
+          sameSite: 'lax',
+          maxAge: 8 * 3600,
+          path: '/',
+        });
+      }
+
+      return jsonResponse;
+    } catch (err) {
+      const response = NextResponse.json({ error: (err as Error).message }, { status: 401 });
+      response.cookies.set('access_token', '', { path: '/', maxAge: 0, sameSite: 'lax' });
+      response.cookies.set('refresh_token', '', { path: '/', maxAge: 0, sameSite: 'lax' });
+      response.cookies.set('id_token', '', { path: '/', maxAge: 0, sameSite: 'lax' });
+      response.cookies.set('token_expires_at', '', { path: '/', maxAge: 0, sameSite: 'lax' });
+      response.cookies.set('token_scope', '', { path: '/', maxAge: 0, sameSite: 'lax' });
+      return response;
+    }
+  };
+}
+
+export const POST = makeAuthRefreshRoute();

package/src/bff/health.ts

@@ -0,0 +1,12 @@
+// bff/health.ts — Shared BFF handler for /api/health
+// Liveness probe. Canonical source: bos7-template.
+// Byte-identical across bos7-template and bos7-enterprise.
+
+export async function GET(): Promise<Response> {
+  return Response.json({
+    status: 'ok',
+    version: process.env.APP_VERSION ?? 'unknown',
+    timestamp: new Date().toISOString(),
+    env: process.env.NODE_ENV ?? 'unknown',
+  });
+}

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>> = {