@asteby/metacore-runtime-react 20.1.6 → 21.0.0

package/src/__tests__/dynamic-kanban.test.tsx

@@ -11,15 +11,25 @@
 //      and the destination payload is `{ <group_by>: <dest> }`; an invalid
 //      transition is rejected before any PUT.
 import { afterEach, describe, expect, it, vi } from 'vitest'
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, render, screen, fireEvent, waitFor } from '@testing-library/react'
 
 // react-i18next: identity translator returning the defaultValue so card field
-// labels and lane labels surface verbatim.
+// labels and lane labels surface verbatim. The `t`/`i18n` references are STABLE
+// (module-scope singletons) — real react-i18next memoizes them, and the card's
+// shared record dialog subtree keys effects off `t`/`i18n`, so returning a fresh
+// object per render would spin an infinite render loop.
+const I18N_T = (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k
+const I18N = { language: 'es' }
+const USE_TRANSLATION = { t: I18N_T, i18n: I18N }
 vi.mock('react-i18next', () => ({
-    useTranslation: () => ({
-        t: (_k: string, opts?: { defaultValue?: string }) => opts?.defaultValue ?? _k,
-        i18n: { language: 'es' },
-    }),
+    useTranslation: () => USE_TRANSLATION,
+}))
+
+// The card menu's shared action handler (useDynamicRowActions) calls
+// useNavigate for `link` actions; the board never navigates in these tests, so
+// a stub is enough (mirrors dynamic-table-permissions.test).
+vi.mock('@tanstack/react-router', () => ({
+    useNavigate: () => () => {},
 }))
 
 import {
@@ -266,3 +276,54 @@ describe('optimistic drag contract', () => {
         // handler returns early — no applyOptimisticMove, no PUT.
     })
 })
+
+// ---------------------------------------------------------------------------
+// 4. Filter bar — the DynamicKanban parity with DynamicTable column filters.
+//    The bar renders a search box + one chip per filterable field, and any
+//    control refetches the board server-side through useDynamicFilters
+//    (debounced), carrying the same `f_<key>` / `search` params.
+// ---------------------------------------------------------------------------
+
+describe('DynamicKanban filter bar', () => {
+    it('renders a search box and a chip for each filterable field', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        render(
+            <ApiProvider client={fakeApi()}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        // search box
+        expect(await screen.findByPlaceholderText('Buscar...')).toBeTruthy()
+        // the only `filterable: true` column is `stage` → a "Stage" filter chip.
+        // (Lane headers use the STAGE labels Backlog/In Progress/… — never "Stage".)
+        expect(screen.getByText('Stage')).toBeTruthy()
+    })
+
+    it('typing in the search box refetches the board with the search param', async () => {
+        useMetadataCache.getState().setMetadata('issue', meta())
+        const get = vi.fn(async (url: string) => {
+            if (url.startsWith('/metadata/table/'))
+                return { data: { success: true, data: meta() } }
+            return { data: { success: true, data: CARDS } }
+        })
+        render(
+            <ApiProvider client={fakeApi({ get })}>
+                <DynamicKanban model="issue" />
+            </ApiProvider>,
+        )
+        const box = await screen.findByPlaceholderText('Buscar...')
+        fireEvent.change(box, { target: { value: 'login' } })
+        await waitFor(() =>
+            expect(get).toHaveBeenCalledWith(
+                '/data/issue',
+                expect.objectContaining({
+                    params: expect.objectContaining({
+                        search: 'login',
+                        // `title` is the only `searchable: true` column in the fixture.
+                        search_columns: 'title',
+                    }),
+                }),
+            ),
+        )
+    })
+})

package/src/__tests__/resolve-row-actions.test.ts

@@ -0,0 +1,80 @@
+// resolveRowActions / isRowActionVisible — the shared seam that makes the
+// kanban card menu show the SAME, capability-gated actions as the table's row
+// action column (and hide an action the user lacks permission for).
+import { describe, expect, it } from 'vitest'
+import { resolveRowActions, makeCan } from '../permissions-context'
+import { isRowActionVisible, isActionConditionMet } from '../dynamic-columns'
+import type { TableMetadata } from '../types'
+
+const allowAll = makeCan([], true)
+
+function meta(over: Partial<TableMetadata> = {}): TableMetadata {
+    return {
+        title: 'Issues',
+        endpoint: '/data/issue',
+        view_type: 'kanban',
+        group_by: 'stage',
+        columns: [
+            { key: 'title', label: 'Title', type: 'text', sortable: true, filterable: false, searchable: true },
+        ],
+        actions: [],
+        perPageOptions: [50],
+        defaultPerPage: 50,
+        searchPlaceholder: 'Buscar...',
+        enableCRUDActions: true,
+        hasActions: false,
+        ...over,
+    }
+}
+
+describe('resolveRowActions', () => {
+    it('materializes the implicit View/Edit/Delete trio for a CRUD model with no explicit actions', () => {
+        const actions = resolveRowActions(meta(), 'issue', allowAll, false)
+        expect(actions.map((a) => a.key)).toEqual(['view', 'edit', 'delete'])
+    })
+
+    it('returns nothing for a CRUD model once gating denies every capability', () => {
+        const denyAll = makeCan([], false) // no caps, not admin
+        const actions = resolveRowActions(meta(), 'issue', denyAll, true)
+        expect(actions).toEqual([])
+    })
+
+    it('drops only the actions the user lacks permission for (index/update granted, delete denied)', () => {
+        const can = makeCan(['issue.index', 'issue.update'], false)
+        const actions = resolveRowActions(meta(), 'issue', can, true)
+        // view→index, edit→update granted; delete denied → hidden
+        expect(actions.map((a) => a.key)).toEqual(['view', 'edit'])
+    })
+
+    it('prefers explicit row actions and strips table/create placements', () => {
+        const m = meta({
+            actions: [
+                { key: 'pagar', name: 'pagar', label: 'Pagar', placement: 'row' } as any,
+                { key: 'export_all', name: 'export_all', label: 'Exportar', placement: 'table' } as any,
+                { key: 'new_journal', name: 'new_journal', label: 'Nuevo', placement: 'create' } as any,
+            ],
+            hasActions: true,
+        })
+        const actions = resolveRowActions(m, 'issue', allowAll, false)
+        expect(actions.map((a) => a.key)).toEqual(['pagar'])
+    })
+})
+
+describe('isRowActionVisible', () => {
+    it('combines the requiresState gate with the declarative condition', () => {
+        const stateGated = { key: 'start', requiresState: ['reception'] }
+        expect(isRowActionVisible(stateGated, { status: 'reception' })).toBe(true)
+        expect(isRowActionVisible(stateGated, { status: 'in_progress' })).toBe(false)
+
+        const condGated = { key: 'refund', condition: { field: 'paid', operator: 'eq', value: 'yes' } }
+        expect(isRowActionVisible(condGated, { paid: 'yes' })).toBe(true)
+        expect(isRowActionVisible(condGated, { paid: 'no' })).toBe(false)
+    })
+
+    it('isActionConditionMet supports eq/neq/in/not_in and is permissive without a condition', () => {
+        expect(isActionConditionMet({}, { x: 1 })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'in', value: ['a', 'b'] } }, { s: 'b' })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'not_in', value: ['a', 'b'] } }, { s: 'c' })).toBe(true)
+        expect(isActionConditionMet({ condition: { field: 's', operator: 'neq', value: 'a' } }, { s: 'a' })).toBe(false)
+    })
+})

package/src/dynamic-columns.tsx

@@ -238,6 +238,38 @@ export const isActionAllowedForRowState = (action: any, row: any): boolean => {
     return requires.map(String).includes(String(status))
 }
 
+/**
+ * Declarative `condition` gate for a per-row action: shows the action only when
+ * the row's `field` satisfies the `eq | neq | in | not_in` operator. No
+ * condition declared → always shown. Unknown operator → permissive.
+ */
+export const isActionConditionMet = (action: any, row: any): boolean => {
+    if (!action?.condition) return true
+    const { field, operator, value } = action.condition
+    const rowValue = String(row?.[field] ?? '')
+    const values = Array.isArray(value) ? value : [value]
+    switch (operator) {
+        case 'eq':
+            return rowValue === values[0]
+        case 'neq':
+            return rowValue !== values[0]
+        case 'in':
+            return values.includes(rowValue)
+        case 'not_in':
+            return !values.includes(rowValue)
+        default:
+            return true
+    }
+}
+
+/**
+ * Whether a per-row action should appear for `row`: both the state-machine gate
+ * (`requiresState`) AND the declarative `condition` must pass. Shared by the
+ * table's action column and the kanban card menu so they hide/show identically.
+ */
+export const isRowActionVisible = (action: any, row: any): boolean =>
+    isActionAllowedForRowState(action, row) && isActionConditionMet(action, row)
+
 const lowerFirst = (value?: string) => {
     if (!value) return value
     return value.charAt(0).toLowerCase() + value.slice(1)
@@ -1265,25 +1297,7 @@ export function makeDefaultGetDynamicColumns(
                             </DropdownMenuTrigger>
                             <DropdownMenuContent align="end">
                                 {resolvedActions
-                                    .filter((action) => isActionAllowedForRowState(action, row.original))
-                                    .filter((action) => {
-                                        if (!action.condition) return true
-                                        const { field, operator, value } = action.condition
-                                        const rowValue = String((row.original as any)[field] ?? '')
-                                        const values = Array.isArray(value) ? value : [value]
-                                        switch (operator) {
-                                            case 'eq':
-                                                return rowValue === values[0]
-                                            case 'neq':
-                                                return rowValue !== values[0]
-                                            case 'in':
-                                                return values.includes(rowValue)
-                                            case 'not_in':
-                                                return !values.includes(rowValue)
-                                            default:
-                                                return true
-                                        }
-                                    })
+                                    .filter((action) => isRowActionVisible(action, row.original))
                                     .map((action) => (
                                         <DropdownMenuItem
                                             key={action.key}

package/src/dynamic-kanban.tsx

@@ -11,8 +11,9 @@
 //     single-value renderer that mirrors `defaultGetDynamicColumns`' display
 //     logic (currency, status, date, relation chip, …) — so a card cell and a
 //     table cell look identical.
-//   - Per-card actions reuse `useModelActions(model, ['row'])` +
-//     `ActionModalDispatcher`, the exact plumbing DynamicTable's row menu uses.
+//   - Per-card actions reuse `resolveRowActions` (capability-gated, same as the
+//     table's action column) + `useDynamicRowActions`, the EXACT shared handler
+//     DynamicTable's row menu dispatches through (view/edit/delete/link/custom).
 //
 // The one thing it owns that the table doesn't: an OPTIMISTIC drag-to-move.
 // Dropping a card into another lane mutates local state immediately and fires
@@ -37,7 +38,7 @@ import {
     type DragStartEvent,
     type DragEndEvent,
 } from '@dnd-kit/core'
-import { MoreHorizontal } from 'lucide-react'
+import { MoreHorizontal, Search, X } from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -48,22 +49,25 @@ import {
     DropdownMenuContent,
     DropdownMenuItem,
     DropdownMenuTrigger,
+    Input,
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
+import { ColumnFilterControl, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib'
 import { useApi } from './api-context'
+import { useDynamicFilters } from './use-dynamic-filters'
 import { useMetadataCache } from './metadata-cache'
 import { ActivityValueRenderer } from './activity-value-renderer'
-import { ActionModalDispatcher } from './action-modal-dispatcher'
-import { useModelActions } from './model-action-toolbar'
 import { DynamicIcon } from './dynamic-icon'
 import { isColumnVisibleInTable } from './column-visibility'
-import { isActionAllowedForRowState } from './dynamic-columns'
+import { isRowActionVisible } from './dynamic-columns'
+import { useCan, usePermissionsActive, resolveRowActions } from './permissions-context'
+import { useDynamicRowActions } from './dynamic-row-actions'
 import type {
     TableMetadata,
     ColumnDefinition,
     ApiResponse,
-    ActionMetadata,
+    ActionDefinition,
     StageMeta,
     StageTransition,
 } from './types'
@@ -245,6 +249,13 @@ export interface DynamicKanbanProps {
     refreshTrigger?: any
     /** Called when a card is clicked (outside its action menu). */
     onCardClick?: (row: any) => void
+    /**
+     * Host hook for `view`/`edit` card actions (STRING contract — same as
+     * DynamicTable's `onAction`). When provided, `view`/`edit` route to the host
+     * (e.g. its seeded record modal); when omitted they open the SDK's built-in
+     * record dialog. `delete`/link/custom actions are always handled in-SDK.
+     */
+    onAction?: (action: string, row: any) => void
     /**
      * Max cards fetched per lane render. Kanban shows all cards at once (no
      * pagination UI), so it requests a single large page. Defaults to 200.
@@ -254,6 +265,11 @@ export interface DynamicKanbanProps {
     timeZone?: string
     /** ISO 4217 currency for money card fields (org config). */
     currency?: string
+    /**
+     * Static equality filters always applied to the board (never shown as a
+     * removable chip). Same contract as DynamicTable's `defaultFilters`.
+     */
+    defaultFilters?: Record<string, any>
 }
 
 export function DynamicKanban({
@@ -261,9 +277,11 @@ export function DynamicKanban({
     endpoint,
     refreshTrigger,
     onCardClick,
+    onAction,
     pageSize = 200,
     timeZone,
     currency,
+    defaultFilters,
 }: DynamicKanbanProps) {
     const { t, i18n } = useTranslation()
     const api = useApi()
@@ -280,11 +298,6 @@ export function DynamicKanban({
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState<string | null>(null)
 
-    const [actionModal, setActionModal] = useState<{
-        action: ActionMetadata | null
-        record: any | null
-    }>({ action: null, record: null })
-
     const sensors = useSensors(
         useSensor(PointerSensor, { activationConstraint: { distance: 5 } }),
     )
@@ -322,13 +335,25 @@ export function DynamicKanban({
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [model])
 
+    // Shared metadata-driven filter engine — the SAME configs, option prefetch
+    // and `f_<key>` serialization DynamicTable uses, so the board filters
+    // identically to its table sibling.
+    const {
+        globalFilter,
+        setGlobalFilter,
+        columnFilterConfigs,
+        filterParams,
+        activeFilterCount,
+        clearAll,
+    } = useDynamicFilters(metadata, { defaultFilters })
+
     // ---- records fetch (same path as DynamicTable, single large page) ----
     const fetchData = useCallback(async () => {
         if (!metadata) return
         setLoadingData(true)
         try {
             const res = (await api.get(endpoint || `/data/${model}`, {
-                params: { page: 1, per_page: pageSize },
+                params: { page: 1, per_page: pageSize, ...filterParams },
             })) as { data: ApiResponse<any[]> }
             if (res.data.success) setRecords(res.data.data || [])
         } catch (err) {
@@ -336,12 +361,37 @@ export function DynamicKanban({
         } finally {
             setLoadingData(false)
         }
-    }, [api, endpoint, model, metadata, pageSize])
+    }, [api, endpoint, model, metadata, pageSize, filterParams])
 
+    // Refetch when metadata resolves, on an explicit refresh, or when the
+    // filters change. `fetchData` is stable while `filterParams` is unchanged
+    // (both memoized), so this only re-runs on real input changes. Debounced so
+    // typing in the search box doesn't fire a request per keystroke.
     useEffect(() => {
-        if (metadata) void fetchData()
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [metadata, refreshTrigger])
+        if (!metadata) return
+        const handle = setTimeout(() => {
+            void fetchData()
+        }, 200)
+        return () => clearTimeout(handle)
+    }, [fetchData, metadata, refreshTrigger])
+
+    // Filterable fields for the toolbar, in metadata order (explicit filters
+    // first, then filterable columns), each labeled from its metadata source.
+    const filterFields = useMemo(() => {
+        if (!metadata) return []
+        const out: {
+            key: string
+            label: string
+            config: NonNullable<ReturnType<typeof columnFilterConfigs.get>>
+        }[] = []
+        for (const [key, config] of columnFilterConfigs) {
+            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 stages = useMemo(
         () => (metadata ? deriveStages(metadata) : []),
@@ -360,8 +410,32 @@ export function DynamicKanban({
         [metadata],
     )
 
-    // Row-placement actions reused verbatim from the table's plumbing.
-    const rowActions = useModelActions(model, ['row'], metadata?.actions)
+    // Row-placement actions resolved EXACTLY like DynamicTable's action column:
+    // capability-gated (when a <PermissionsProvider> is mounted) and with the
+    // implicit View/Edit/Delete trio materialized for CRUD models. An action the
+    // user lacks permission for never appears.
+    const can = useCan()
+    const permissionsActive = usePermissionsActive()
+    const rowActions = useMemo(
+        () =>
+            metadata
+                ? resolveRowActions(metadata, model, can, permissionsActive, (k, fb) =>
+                      t(k, { defaultValue: fb }),
+                  )
+                : [],
+        [metadata, model, can, permissionsActive, t],
+    )
+
+    // Shared row-action dispatch + dialogs — view/edit/delete/link/custom behave
+    // identically to a table row (the card menu used to forward the raw action
+    // object to the host and silently no-op).
+    const { handleInternalAction, dialogs: rowActionDialogs } = useDynamicRowActions({
+        model,
+        endpoint,
+        metadata,
+        onAction,
+        onRefresh: fetchData,
+    })
 
     const cardById = useMemo(() => {
         const m = new Map<string, any>()
@@ -475,8 +549,51 @@ export function DynamicKanban({
     }
 
     return (
-        <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
-            <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
+        <div className="flex flex-col gap-3">
+            {/* Filter bar — global search + one chip per filterable field, the
+                SAME set the DynamicTable exposes in its column headers. Changing
+                any control refetches the board server-side (debounced) via the
+                shared useDynamicFilters engine. */}
+            <div className="flex flex-wrap items-center gap-2" data-testid="kanban-filters">
+                <div className="relative">
+                    <Search className="pointer-events-none absolute left-2.5 top-1/2 h-3.5 w-3.5 -translate-y-1/2 text-muted-foreground" />
+                    <Input
+                        value={globalFilter}
+                        onChange={(e) => setGlobalFilter(e.target.value)}
+                        placeholder={t('kanban.searchPlaceholder', { defaultValue: 'Buscar...' })}
+                        className="h-8 w-52 pl-8 text-sm"
+                    />
+                </div>
+                {filterFields.map((field) => (
+                    <ColumnFilterControl
+                        key={field.key}
+                        showLabel
+                        label={field.label}
+                        filterKey={field.config.filterKey}
+                        filterType={field.config.filterType as ColumnFilterType}
+                        filterOptions={field.config.options}
+                        filterLoading={field.config.loading}
+                        filterSearchEndpoint={field.config.searchEndpoint}
+                        selectedValues={field.config.selectedValues}
+                        onFilterChange={field.config.onFilterChange}
+                    />
+                ))}
+                {activeFilterCount > 0 && (
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-8 gap-1 text-xs text-muted-foreground"
+                        onClick={clearAll}
+                    >
+                        <X className="h-3.5 w-3.5" />
+                        {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
+                        {` (${activeFilterCount})`}
+                    </Button>
+                )}
+            </div>
+
+            <DndContext sensors={sensors} onDragStart={onDragStart} onDragEnd={onDragEnd}>
+                <div className="flex min-w-0 gap-4 overflow-x-auto p-1" data-testid="kanban-board">
                 {lanes.map((stage) => {
                     const cards = grouped.get(stage.key) ?? []
                     const droppableAllowed =
@@ -513,9 +630,7 @@ export function DynamicKanban({
                                         timeZone={timeZone}
                                         currency={currency}
                                         onClick={onCardClick}
-                                        onAction={(action, record) =>
-                                            setActionModal({ action, record })
-                                        }
+                                        onAction={handleInternalAction}
                                     />
                                 ))
                             )}
@@ -537,23 +652,9 @@ export function DynamicKanban({
                 ) : null}
             </DragOverlay>
 
-            {actionModal.action && (
-                <ActionModalDispatcher
-                    open={!!actionModal.action}
-                    onOpenChange={(open) => {
-                        if (!open) setActionModal({ action: null, record: null })
-                    }}
-                    action={actionModal.action}
-                    model={model}
-                    record={actionModal.record ?? {}}
-                    endpoint={endpoint ?? `/data/${model}/me`}
-                    onSuccess={() => {
-                        setActionModal({ action: null, record: null })
-                        void fetchData()
-                    }}
-                />
-            )}
-        </DndContext>
+            {rowActionDialogs}
+            </DndContext>
+        </div>
     )
 }
 
@@ -621,12 +722,13 @@ interface KanbanCardProps {
     card: any
     titleCol: ColumnDefinition | null
     fieldCols: ColumnDefinition[]
-    actions: ActionMetadata[] | any[]
+    actions: ActionDefinition[]
     locale: string
     timeZone?: string
     currency?: string
     onClick?: (row: any) => void
-    onAction: (action: ActionMetadata, record: any) => void
+    /** STRING contract — dispatch the action by its key (see useDynamicRowActions). */
+    onAction: (actionKey: string, record: any) => void
 }
 
 function KanbanCard({
@@ -644,9 +746,7 @@ function KanbanCard({
         id: String(card.id),
     })
 
-    const visibleActions = (actions as any[]).filter((a) =>
-        isActionAllowedForRowState(a, card),
-    )
+    const visibleActions = actions.filter((a) => isRowActionVisible(a, card))
 
     return (
         <Card
@@ -693,7 +793,7 @@ function KanbanCard({
                                         key={a.key}
                                         onClick={(e) => {
                                             e.stopPropagation()
-                                            onAction(a as ActionMetadata, card)
+                                            onAction(a.key, card)
                                         }}
                                     >
                                         <DynamicIcon