@asteby/metacore-runtime-react 23.9.0 → 23.9.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "23.9.0",
+  "version": "23.9.2",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",
@@ -38,7 +38,7 @@
     "sonner": ">=1.7",
     "zustand": ">=5",
     "@asteby/metacore-sdk": "^3.2.0",
-    "@asteby/metacore-ui": "^2.9.1"
+    "@asteby/metacore-ui": "^2.9.2"
   },
   "peerDependenciesMeta": {
     "@tanstack/react-router": {
@@ -68,7 +68,7 @@
     "vitest": "^4.0.0",
     "zustand": "^5.0.0",
     "@asteby/metacore-sdk": "3.2.0",
-    "@asteby/metacore-ui": "2.9.1"
+    "@asteby/metacore-ui": "2.9.2"
   },
   "scripts": {
     "build": "tsc -p tsconfig.json",

package/src/__tests__/dependent-enum-form.test.tsx

@@ -0,0 +1,84 @@
+// @vitest-environment happy-dom
+//
+// Dependent STATIC enum options in DynamicForm:
+//   - a static `select` whose options are gated by a sibling field's value
+//     shows only the applicable options;
+//   - when the sibling value invalidates the current selection, it resets;
+//   - when no option applies, the whole field (label included) is hidden.
+//
+// The gating (parent) field here is a plain text field rather than a second
+// Radix `select`. That is deliberate: under happy-dom a Radix Select rendered
+// inside a <form> mounts a hidden native <select> (BubbleSelect) whose value,
+// when set programmatically before its <option> list is present, collapses to
+// '' and dispatches a spurious change event that resets the parent — a
+// test-environment artifact that does not occur in a real browser. Driving the
+// sibling through a text field exercises the exact same gating path
+// (`applyOptionWhen` reads `values[gate]` regardless of the sibling's widget)
+// without that artifact. The pure string-comparison semantics of `when`
+// (in/not_in, field fallback) are covered by dependent-enum-options.test.ts.
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { act, cleanup, render, screen } from '@testing-library/react'
+import { useState } from 'react'
+
+vi.mock('react-i18next', () => ({
+    useTranslation: () => ({ t: (k: string) => k }),
+}))
+
+import { DynamicForm } from '../dynamic-form'
+import type { ActionFieldDef } from '../types'
+
+afterEach(cleanup)
+
+const fields: ActionFieldDef[] = [
+    {
+        key: 'type',
+        label: 'Type',
+        type: 'text',
+    },
+    {
+        key: 'provider',
+        label: 'Provider',
+        type: 'select',
+        dependsOn: 'type',
+        options: [
+            { value: 'qr', label: 'QR', when: { field: 'type', in: ['whatsapp'] } },
+            { value: 'meta', label: 'Meta', when: { field: 'type', in: ['whatsapp'] } },
+        ],
+    },
+]
+
+// Harness that lets the test drive `type` and observe the submitted `provider`.
+function Harness({ onSubmit }: { onSubmit: (v: Record<string, any>) => void }) {
+    const [initial, setInitial] = useState<Record<string, any>>({ type: 'whatsapp', provider: 'qr' })
+    return (
+        <div>
+            <button type="button" onClick={() => setInitial({ type: 'sms', provider: 'qr' })}>
+                to-sms
+            </button>
+            <DynamicForm fields={fields} initialValues={initial} onSubmit={onSubmit} />
+        </div>
+    )
+}
+
+describe('DynamicForm dependent static enum', () => {
+    it('hides the gated select and resets its value when no option applies', async () => {
+        const onSubmit = vi.fn()
+        render(<Harness onSubmit={onSubmit} />)
+
+        // type=whatsapp → provider field visible.
+        expect(screen.getByText('Provider')).toBeTruthy()
+
+        // Switch type to sms → no provider option applies → field hidden.
+        await act(async () => {
+            screen.getByText('to-sms').click()
+        })
+        expect(screen.queryByText('Provider')).toBeNull()
+
+        // The invalidated selection was reset — submit carries empty provider.
+        await act(async () => {
+            screen.getByText('Guardar').click()
+        })
+        expect(onSubmit).toHaveBeenCalled()
+        expect(onSubmit.mock.calls[0][0].provider).toBe('')
+    })
+})

package/src/__tests__/dependent-enum-options.test.ts

@@ -0,0 +1,67 @@
+import { describe, it, expect } from 'vitest'
+import { applyOptionWhen } from '../dynamic-form-schema'
+import type { OptionDef } from '../types'
+
+// A cascading STATIC enum: `provider` options only apply when the sibling
+// `type` field is "whatsapp". Mirrors the link-inbox Device use case, but the
+// helper is fully domain-agnostic.
+const providerOptions: OptionDef[] = [
+    { value: 'qr', label: 'QR', when: { field: 'type', in: ['whatsapp'] } },
+    { value: 'meta', label: 'Meta', when: { field: 'type', in: ['whatsapp'] } },
+]
+
+describe('applyOptionWhen', () => {
+    it('keeps only options whose `when.in` matches the parent value', () => {
+        const kept = applyOptionWhen(providerOptions, { type: 'whatsapp' })
+        expect(kept.map((o) => o.value)).toEqual(['qr', 'meta'])
+    })
+
+    it('drops all gated options when the parent value is not in `in`', () => {
+        expect(applyOptionWhen(providerOptions, { type: 'sms' })).toEqual([])
+        expect(applyOptionWhen(providerOptions, { type: '' })).toEqual([])
+        expect(applyOptionWhen(providerOptions, {})).toEqual([])
+    })
+
+    it('falls back to `dependsOn` when `when.field` is omitted', () => {
+        const opts: OptionDef[] = [
+            { value: 'a', label: 'A', when: { in: ['x'] } },
+            { value: 'b', label: 'B', when: { in: ['y'] } },
+        ]
+        expect(applyOptionWhen(opts, { kind: 'x' }, 'kind').map((o) => o.value)).toEqual(['a'])
+    })
+
+    it('supports `not_in` (snake_case) and `notIn` (camelCase)', () => {
+        const opts: OptionDef[] = [
+            { value: 'a', label: 'A', when: { field: 'type', not_in: ['hidden'] } },
+            { value: 'b', label: 'B', when: { field: 'type', notIn: ['hidden'] } },
+        ]
+        expect(applyOptionWhen(opts, { type: 'shown' }).map((o) => o.value)).toEqual(['a', 'b'])
+        expect(applyOptionWhen(opts, { type: 'hidden' })).toEqual([])
+    })
+
+    it('compares values as strings', () => {
+        const opts: OptionDef[] = [{ value: 'a', label: 'A', when: { field: 'n', in: ['1'] } }]
+        expect(applyOptionWhen(opts, { n: 1 }).map((o) => o.value)).toEqual(['a'])
+    })
+
+    it('includes an option with no `when` regardless of parent value (retrocompat)', () => {
+        const opts: OptionDef[] = [
+            { value: 'always', label: 'Always' },
+            { value: 'gated', label: 'Gated', when: { field: 'type', in: ['whatsapp'] } },
+        ]
+        expect(applyOptionWhen(opts, { type: 'sms' }).map((o) => o.value)).toEqual(['always'])
+        expect(applyOptionWhen(opts, { type: 'whatsapp' }).map((o) => o.value)).toEqual([
+            'always',
+            'gated',
+        ])
+    })
+
+    it('includes a gated option when neither `when.field` nor `dependsOn` is present', () => {
+        const opts: OptionDef[] = [{ value: 'a', label: 'A', when: { in: ['x'] } }]
+        expect(applyOptionWhen(opts, { anything: 'x' }).map((o) => o.value)).toEqual(['a'])
+    })
+
+    it('returns [] for undefined options', () => {
+        expect(applyOptionWhen(undefined, {})).toEqual([])
+    })
+})

package/src/dynamic-form-schema.ts

@@ -2,7 +2,7 @@
 // callers (and unit tests) can use the zod schema without pulling in React or
 // metacore-ui primitives.
 import { z, type ZodTypeAny } from 'zod'
-import type { ActionFieldDef, FieldValidation, FieldOptionsConfig } from './types'
+import type { ActionFieldDef, FieldValidation, FieldOptionsConfig, OptionDef } from './types'
 import { resolveValidatorToken } from './use-org-config-bridge'
 
 /**
@@ -287,6 +287,49 @@ export function resolveDependsValue(
     return String(raw)
 }
 
+/**
+ * Filters a STATIC enum's `options[]` by each option's `when` gate against the
+ * current form values. Pure — no React, no side effects.
+ *
+ * Rule per option:
+ * - No `when` → always included (retrocompat; existing enums untouched).
+ * - With `when`: the gating field is `when.field ?? dependsOn`. If neither is
+ *   present the option is included (nothing to gate on). Otherwise the form's
+ *   value for that field is compared AS STRING: included when (no `in`, or
+ *   value ∈ `in`) AND (no `not_in`, or value ∉ `not_in`). Tolerates the
+ *   snake_case `not_in` the kernel serves alongside camelCase `notIn`.
+ *
+ * `formValues` is the flat map of the surrounding form/row values the gating
+ * field is read from; `dependsOn` is the containing field's declared dependency
+ * used as the default gating field.
+ */
+export function applyOptionWhen(
+    options: OptionDef[] | undefined,
+    formValues: Record<string, any> | null | undefined,
+    dependsOn?: string,
+): OptionDef[] {
+    if (!Array.isArray(options)) return []
+    return options.filter((opt) => {
+        const when = opt?.when
+        if (!when) return true
+        const gate = (typeof when.field === 'string' && when.field.trim() !== '')
+            ? when.field.trim()
+            : dependsOn
+        if (!gate) return true
+        const raw = formValues ? formValues[gate] : undefined
+        const current = raw == null ? '' : String(raw)
+        const inList = when.in
+        const notIn = when.notIn ?? when.not_in
+        if (Array.isArray(inList) && inList.length > 0) {
+            if (!inList.some((v) => String(v) === current)) return false
+        }
+        if (Array.isArray(notIn) && notIn.length > 0) {
+            if (notIn.some((v) => String(v) === current)) return false
+        }
+        return true
+    })
+}
+
 /**
  * Reads a field's enriched options-resolution config, tolerating the camelCase
  * `optionsConfig` (authored SDK shape) and the snake_case `options_config` the

package/src/dynamic-form.tsx

@@ -20,6 +20,8 @@ import {
     resolveWidget,
     isLineItemsField,
     evaluateBalance,
+    applyOptionWhen,
+    getDependsOn,
 } from './dynamic-form-schema'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
 import { DynamicLineItems } from './dynamic-line-items'
@@ -111,32 +113,17 @@ export function DynamicForm({
     return (
         <form onSubmit={handleSubmit} className="grid gap-4">
             <div className="grid gap-4 sm:grid-cols-2">
-                {fields.map((field) => {
-                    const fullWidth =
-                        isLineItemsField(field) ||
-                        resolveWidget(field) === 'textarea' ||
-                        resolveWidget(field) === 'richtext'
-                    return (
-                        <div
-                            key={field.key}
-                            className={'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : '')}
-                        >
-                            <Label htmlFor={field.key}>
-                                {field.label}
-                                {field.required && <span className="text-red-500 ml-1">*</span>}
-                            </Label>
-                            <FieldRenderer
-                                field={field}
-                                value={values[field.key]}
-                                onChange={(v: any) => update(field.key, v)}
-                                initialValues={initialValues}
-                            />
-                            {errors[field.key] && (
-                                <span className="text-red-500 text-sm" role="alert">{errors[field.key]}</span>
-                            )}
-                        </div>
-                    )
-                })}
+                {fields.map((field) => (
+                    <FieldRow
+                        key={field.key}
+                        field={field}
+                        value={values[field.key]}
+                        onChange={(v: any) => update(field.key, v)}
+                        values={values}
+                        error={errors[field.key]}
+                        initialValues={initialValues}
+                    />
+                ))}
             </div>
             <div className="flex justify-end gap-2 pt-2">
                 {onCancel && (
@@ -158,6 +145,61 @@ interface FieldRendererProps {
     onChange: (v: any) => void
     /** The form's initial record — used to seed an FK picker's existing label/image. */
     initialValues?: Record<string, any>
+    /**
+     * The full flat map of current form values — read by a STATIC enum select to
+     * gate its options by a sibling field's value (`applyOptionWhen`).
+     */
+    values?: Record<string, any>
+}
+
+interface FieldRowProps extends FieldRendererProps {
+    error?: string
+}
+
+// One form field row: label + renderer + inline error. Encapsulated as its own
+// component so a STATIC enum select whose options are all gated out by a sibling
+// value (`when`) can hide the ENTIRE row (label included) and run its reset
+// effect with valid hook ordering.
+function FieldRow({ field, value, onChange, values, error, initialValues }: FieldRowProps) {
+    const isStaticSelect =
+        resolveWidget(field) === 'select' && !field.ref && Array.isArray(field.options)
+    const effectiveOptions = isStaticSelect
+        ? applyOptionWhen(field.options, values, getDependsOn(field))
+        : undefined
+
+    // Reset a selection that the current sibling value no longer permits (e.g.
+    // the parent switched away from the value that made this option valid).
+    useEffect(() => {
+        if (!isStaticSelect || !effectiveOptions) return
+        if (value && !effectiveOptions.some((o) => String(o.value) === String(value))) {
+            onChange('')
+        }
+    }, [isStaticSelect, effectiveOptions, value, onChange])
+
+    // No option applies under the current sibling value → hide the whole field.
+    if (isStaticSelect && effectiveOptions && effectiveOptions.length === 0) return null
+
+    const fullWidth =
+        isLineItemsField(field) ||
+        resolveWidget(field) === 'textarea' ||
+        resolveWidget(field) === 'richtext'
+    return (
+        <div className={'grid gap-2 ' + (fullWidth ? 'sm:col-span-2' : '')}>
+            <Label htmlFor={field.key}>
+                {field.label}
+                {field.required && <span className="text-red-500 ml-1">*</span>}
+            </Label>
+            <FieldRenderer
+                field={field}
+                value={value}
+                onChange={onChange}
+                initialValues={initialValues}
+                values={values}
+                effectiveOptions={effectiveOptions}
+            />
+            {error && <span className="text-red-500 text-sm" role="alert">{error}</span>}
+        </div>
+    )
 }
 
 // seedOptionFromSibling builds a pre-resolved option for an FK field from the
@@ -187,7 +229,13 @@ function seedOptionFromSibling(
     }
 }
 
-function FieldRenderer({ field, value, onChange, initialValues }: FieldRendererProps) {
+function FieldRenderer({
+    field,
+    value,
+    onChange,
+    initialValues,
+    effectiveOptions,
+}: FieldRendererProps & { effectiveOptions?: import('./types').OptionDef[] }) {
     // Repeatable line-items group → render the row grid. Its value is an array
     // of row objects rather than a scalar.
     if (isLineItemsField(field)) {
@@ -228,7 +276,7 @@ function FieldRenderer({ field, value, onChange, initialValues }: FieldRendererP
                 <Select value={value || ''} onValueChange={onChange}>
                     <SelectTrigger className="w-full"><SelectValue placeholder={field.placeholder || 'Seleccionar...'} /></SelectTrigger>
                     <SelectContent>
-                        {field.options?.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
+                        {(effectiveOptions ?? field.options)?.map((opt) => <SelectItem key={opt.value} value={opt.value}>{opt.label}</SelectItem>)}
                     </SelectContent>
                 </Select>
             )

package/src/dynamic-kanban.tsx

@@ -123,7 +123,7 @@ import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
 import { DynamicIcon } from './dynamic-icon'
 import { isColumnVisibleInTable } from './column-visibility'
-import { isRowActionVisible } from './dynamic-columns'
+import { isRowActionVisible, relationKeyFor } from './dynamic-columns'
 import { useCan, usePermissionsActive, resolveRowActions } from './permissions-context'
 import { useDynamicRowActions } from './dynamic-row-actions'
 import { useStageLayout } from './stage-layout'
@@ -323,6 +323,27 @@ export function selectCardColumns(
     return { title, fields }
 }
 
+/** The all-zeros UUID — a Go zero-value FK serialized as "set" when it isn't. */
+const ZERO_UUID = /^0{8}-0{4}-0{4}-0{4}-0{12}$/
+
+/**
+ * The value a card cell should render for a column — same resolution the
+ * table's cells apply. An FK column (`<rel>_id`) prefers the backend-resolved
+ * sibling object (`card.<rel>`, e.g. `{ name }` / `{ value, label }`) over the
+ * raw UUID; a zero-UUID FK counts as unset (renders the em-dash). Pure —
+ * exported for unit tests.
+ */
+export function cardCellValue(card: any, col: ColumnDefinition): unknown {
+    const raw = card?.[col.key]
+    if (typeof raw === 'string' && ZERO_UUID.test(raw)) return null
+    const relKey = relationKeyFor(col)
+    if (relKey !== col.key) {
+        const sibling = card?.[relKey]
+        if (sibling && typeof sibling === 'object') return sibling
+    }
+    return raw
+}
+
 /**
  * Whether a card passes a lane funnel. Picked select/facet `values` match by
  * equality (IN — the card's field value must be one of them); a free-text
@@ -2342,7 +2363,7 @@ function KanbanCard({
                     <div className="min-w-0 flex-1 break-words text-sm font-medium leading-snug">
                         {titleCol ? (
                             <ActivityValueRenderer
-                                value={card[titleCol.key]}
+                                value={cardCellValue(card, titleCol)}
                                 col={titleCol}
                                 locale={locale}
                                 timeZone={timeZone}
@@ -2394,7 +2415,7 @@ function KanbanCard({
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 break-words">
                             <ActivityValueRenderer
-                                value={card[col.key]}
+                                value={cardCellValue(card, col)}
                                 col={col}
                                 locale={locale}
                                 timeZone={timeZone}
@@ -2423,7 +2444,7 @@ function CardPreview({
                 <div className="break-words text-sm font-medium leading-snug">
                     {titleCol ? (
                         <ActivityValueRenderer
-                            value={card[titleCol.key]}
+                            value={cardCellValue(card, titleCol)}
                             col={titleCol}
                             locale={locale}
                             timeZone={timeZone}
@@ -2441,7 +2462,7 @@ function CardPreview({
                         <span className="shrink-0 opacity-70">{col.label}:</span>
                         <span className="min-w-0 break-words">
                             <ActivityValueRenderer
-                                value={card[col.key]}
+                                value={cardCellValue(card, col)}
                                 col={col}
                                 locale={locale}
                                 timeZone={timeZone}

package/src/dynamic-line-items.tsx

@@ -31,6 +31,7 @@ import {
     resolveDependsValue,
     getOptionsConfig,
     resolveOptionsSource,
+    applyOptionWhen,
 } from './dynamic-form-schema'
 import { DynamicSelectField, DEFAULT_DEPENDS_HINT } from './dynamic-select-field'
 import { useOptionsResolver, type ResolvedOption } from './use-options-resolver'
@@ -271,6 +272,25 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
     const dependsValue = getDependsOn(field)
         ? resolveDependsValue(field, formValues, rowValues)
         : undefined
+
+    // STATIC enum options gated per-cell by a sibling (row) or header value.
+    // Row values win over the header when a key exists in both, matching
+    // `resolveDependsValue`. Filtered against each option's `when`.
+    const isStaticSelect =
+        widget === 'select' && !field.ref && !getOptionsConfig(field)?.source && Array.isArray(field.options)
+    const gateValues = isStaticSelect ? { ...(formValues ?? {}), ...(rowValues ?? {}) } : undefined
+    const effectiveOptions = isStaticSelect
+        ? applyOptionWhen(field.options, gateValues, getDependsOn(field))
+        : undefined
+
+    // Reset a selection the current sibling value no longer permits.
+    useEffect(() => {
+        if (!isStaticSelect || !effectiveOptions) return
+        if (value && !effectiveOptions.some((o) => String(o.value) === String(value))) {
+            onChange('')
+        }
+    }, [isStaticSelect, effectiveOptions, value, onChange])
+
     // Async searchable picker per row cell — e.g. the account_id column of a
     // journal entry's debit/credit lines. Same widget as the flat form.
     if (widget === 'dynamic_select') {
@@ -309,14 +329,17 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     disabled={off}
                 />
             )
-        case 'select':
+        case 'select': {
+            const opts = effectiveOptions ?? field.options
+            // No option applies under the current sibling value → hide the cell.
+            if (effectiveOptions && effectiveOptions.length === 0) return null
             return (
                 <Select value={value || ''} onValueChange={onChange} disabled={off}>
                     <SelectTrigger className="w-full">
                         <SelectValue placeholder={field.placeholder || 'Seleccionar...'} />
                     </SelectTrigger>
                     <SelectContent>
-                        {field.options?.map((opt) => (
+                        {opts?.map((opt) => (
                             <SelectItem key={opt.value} value={opt.value}>
                                 {opt.label}
                             </SelectItem>
@@ -324,6 +347,7 @@ function CellRenderer({ field, value, onChange, disabled, formValues, rowValues
                     </SelectContent>
                 </Select>
             )
+        }
         case 'switch':
             return <Switch checked={!!value} onCheckedChange={onChange} disabled={off} />
         case 'number':

package/src/dynamic-table.tsx

@@ -67,7 +67,7 @@ import { useApi, useCurrentBranch } from './api-context'
 import type { ColumnFilterConfig, GetDynamicColumns } from './dynamic-columns-shim'
 import { defaultGetDynamicColumns, DATE_CELL_TYPES, aggregateOf, formatAggregateTotal } from './dynamic-columns'
 import { useFacetLoaders, isLongTextColumn } from './use-facet-loaders'
-import { FilterChipsRow, translateOptionLabels, type FilterChipField } from './filter-chips'
+import { translateOptionLabels } from './filter-chips'
 import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll'
 import { OptionsContext } from './options-context'
 import type { TableMetadata, ApiResponse } from './types'
@@ -209,6 +209,10 @@ export function DynamicTable({
         if (colonIdx === -1) return value
         const prefix = value.substring(0, colonIdx).toLowerCase()
         const rest = value.substring(colonIdx + 1)
+        // `eq:` is the wire's explicit equality operator, but internally a
+        // select stores the bare value — unwrap it so `f_status=eq:reception`
+        // matches the option "reception" (header filter + chip label).
+        if (prefix === 'eq') return rest
         const operator = urlAliasToOperator[prefix]
         return operator ? `${operator}:${rest}` : value
     }
@@ -252,6 +256,11 @@ export function DynamicTable({
         if (Object.keys(filters).length > 0) setDynamicFilters(filters)
     }, []) // eslint-disable-line react-hooks/exhaustive-deps
 
+    // The exact query string this table last wrote to the URL — lets the
+    // resync effect below tell "our own replaceState" apart from an external
+    // rewrite by the host router.
+    const lastSelfSearch = useRef<string | null>(null)
+
     useEffect(() => {
         if (!enableUrlSync || !initializedFromUrl.current) return
         const params = new URLSearchParams()
@@ -283,9 +292,40 @@ export function DynamicTable({
         })
         const search = params.toString()
         const newUrl = search ? `${window.location.pathname}?${search}` : window.location.pathname
+        lastSelfSearch.current = search ? `?${search}` : ''
         window.history.replaceState(null, '', newUrl)
     }, [enableUrlSync, pagination, sorting, globalFilter, dynamicFilters, defaultFilters])
 
+    // The host router can rewrite the query string WITHOUT remounting the
+    // table — e.g. sidebar sibling entries deep-link different `f_` filters
+    // into the same model route. The mount-time init above never re-runs, so
+    // the table kept showing the previous filter. On every render where the
+    // location's search differs from the last URL we ourselves wrote,
+    // re-parse the `f_` params and adopt them.
+    const locationSearch = typeof window !== 'undefined' ? window.location.search : ''
+    useEffect(() => {
+        if (!enableUrlSync || !initializedFromUrl.current) return
+        if (locationSearch === lastSelfSearch.current) return
+        lastSelfSearch.current = locationSearch
+        const params = new URLSearchParams(locationSearch)
+        const filters: Record<string, string[]> = {}
+        params.forEach((rawValue, key) => {
+            if (!key.startsWith('f_')) return
+            const filterKey = key.substring(2)
+            if (defaultFilters && filterKey in defaultFilters) return
+            const value = urlValueToInternal(rawValue)
+            if (value.startsWith('IN:')) filters[filterKey] = value.substring(3).split(',')
+            else filters[filterKey] = [value]
+        })
+        setDynamicFilters((prev: Record<string, string[]>) => {
+            if (JSON.stringify(prev) === JSON.stringify(filters)) return prev
+            setPagination((p: PaginationState) => ({ ...p, pageIndex: 0 }))
+            return filters
+        })
+        const search = params.get('search')
+        if (search !== null) setGlobalFilter(search)
+    })
+
     const prefetchOptions = useCallback(async (endpoints: string[]) => {
         if (endpoints.length === 0) return new Map<string, any[]>()
         const uniqueEndpoints = Array.from(new Set(endpoints))
@@ -786,30 +826,6 @@ export function DynamicTable({
         prefetchFacets(facetFieldsSig.split('|'))
     }, [facetFieldsSig, prefetchFacets])
 
-    // Active-filter chips (shared row with the kanban). One chip per field with a
-    // selection; the label is the translated filter/column label.
-    const activeFilterChips = useMemo<FilterChipField[]>(() => {
-        if (!metadata) return []
-        const out: FilterChipField[] = []
-        for (const [key, config] of columnFilterConfigs) {
-            if ((config.selectedValues?.length ?? 0) === 0) continue
-            const f = metadata.filters?.find((x) => x.key === key)
-            const c = metadata.columns?.find((x) => x.key === key)
-            const rawLabel = f?.label || c?.label || key
-            out.push({
-                key,
-                label: t(rawLabel, { defaultValue: rawLabel }),
-                config,
-            })
-        }
-        return out
-    }, [metadata, columnFilterConfigs, t])
-
-    const clearAllDynamicFilters = useCallback(() => {
-        setDynamicFilters({})
-        setPagination((prev: PaginationState) => ({ ...prev, pageIndex: 0 }))
-    }, [])
-
     const columns = useMemo(() => {
         if (!viewMetadata) return []
         // Row-action column only renders per-row actions. Table-level placements
@@ -929,17 +945,6 @@ export function DynamicTable({
                             </>
                         }
                     />
-                    {/* Active-filter chips — shared with the kanban. Quick
-                        visibility + one-click removal of the header filters. */}
-                    {activeFilterChips.length > 0 && (
-                        <div className='pt-2'>
-                            <FilterChipsRow
-                                fields={activeFilterChips}
-                                onClearAll={clearAllDynamicFilters}
-                                data-testid='table-filter-chips'
-                            />
-                        </div>
-                    )}
                 </div>
                 {/* Desktop: classic horizontal-scroll table. Hidden on phones —
                     a 7-column table forces a wide horizontal scroll there, so we