@isi-ui7/bos7-shared 0.2.12 → 0.3.0

package/dist/{jspdf.es.min-Dzm5j8wC.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-Bylk5fh-.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.12",
+  "version": "0.3.0",
   "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",
@@ -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",
@@ -49,139 +50,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",
-    "@isi-ui7/corporate-themes": ">=0.2.0",
-    "@isi-ui7/i18n": ">=0.1.0",
-    "@isi-ui7/ui-shell": ">=0.2.0",
+    "@carbon/icons-react": "^11.71.0",
+    "@carbon/react": "^1.97.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",
-    "@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.8",
+    "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/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4",
+    "@isi-ui7/i18n": "0.2.3",
+    "@isi-ui7/data-table": "0.2.4",
+    "@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",
     "@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/data-table": "0.2.4",
+    "@isi-ui7/editable-table": "0.2.3",
+    "@isi-ui7/lookup-input": "0.2.4"
+  },
+  "scripts": {
+    "build": "vite build",
+    "lint": "eslint \"src/**/*.{ts,tsx}\"",
+    "test": "vitest run --passWithNoTests",
+    "typecheck": "tsc --noEmit"
   }
-}
+}

package/src/crud-components.tsx

@@ -12,7 +12,11 @@ import {
   ModalHeader,
   ProgressIndicator,
   ProgressStep,
+  Select,
+  SelectItem,
+  TextArea,
   ToastNotification,
+  Toggle,
 } from "@carbon/react";
 import { ServerDataTable } from "@isi-ui7/data-table";
 import type { I_DataTblColumn } from "@isi-ui7/data-table";
@@ -50,14 +54,39 @@ 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";
+  // 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} />
@@ -65,14 +94,51 @@ 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}
+              {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}
+              </Button>
+            </div>
           }
         />
       </PageBody>
@@ -92,6 +158,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
   onEdit,
   deleteApiPath,
   onCustomAction,
+  toolbarExtra,
 }: {
   listSchema: CrudListSchema;
   deleteSchema?: CrudDeleteSchema<TData>;
@@ -99,6 +166,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).
@@ -115,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);
@@ -153,6 +223,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         setCustomActionId(actionId);
         setCustomActionRow(row);
         setCustomActionError(null);
+        setCustomActionReason("");
         return;
       }
 
@@ -185,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 {
@@ -193,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);
@@ -214,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;
@@ -223,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 (
     <>
@@ -231,6 +304,7 @@ export function CrudSchemaListPage<TData extends Record<string, unknown>>({
         tableKey={tableKey}
         onAdd={onAdd}
         onPopupClick={onPopupClick}
+        toolbarExtra={toolbarExtra}
       />
 
       {wfToast ? (
@@ -268,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"
@@ -289,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 = {
@@ -57,6 +67,41 @@ 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[];
+  /**
+   * 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",