@asteby/metacore-runtime-react 21.0.0 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @asteby/metacore-runtime-react
 
+## 21.1.0
+
+### Minor Changes
+
+- 2f21e1e: feat(kanban): agrupar filtros globales en un sheet lateral + filtro por columna
+  - **Filtros globales** dejan de spillear como chips inline: ahora un botón "Filtros"
+    (con contador de activos) abre un **sheet lateral** con todos los controles apilados
+    (mismo motor server-side `useDynamicFilters`). La búsqueda global queda inline.
+  - **Filtro por lane (stage):** cada columna tiene un icono de embudo → elige un campo
+    - un valor y **filtra solo las cards de ese stage** (client-side, instantáneo, sin
+      refetch). Un indicador bajo el header muestra el filtro activo (campo: valor) con
+      un botón para limpiarlo; el header muestra `filtradas/total`.
+
 ## 21.0.0
 
 ### Minor Changes

package/dist/dynamic-kanban.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAuC9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AA8BD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAQ,EACR,QAAc,EACd,QAAQ,EACR,QAAQ,EACR,cAAc,GACjB,EAAE,kBAAkB,qBAsXpB"}
+{"version":3,"file":"dynamic-kanban.d.ts","sourceRoot":"","sources":["../src/dynamic-kanban.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAoD9B,OAAO,KAAK,EACR,aAAa,EACb,gBAAgB,EAGhB,SAAS,EACT,eAAe,EAClB,MAAM,SAAS,CAAA;AAMhB;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,aAAa,GAAG,SAAS,EAAE,CAejE;AAQD;;;;;GAKG;AACH,eAAO,MAAM,eAAe,mBAAmB,CAAA;AAE/C,wBAAgB,YAAY,CACxB,OAAO,EAAE,GAAG,EAAE,EACd,UAAU,EAAE,MAAM,EAClB,MAAM,EAAE,SAAS,EAAE,GACpB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAepB;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,EAC1C,IAAI,EAAE,MAAM,EACZ,EAAE,EAAE,MAAM,GACX,OAAO,CAOT;AAED;;;;;GAKG;AACH,wBAAgB,mBAAmB,CAC/B,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,EAC3B,MAAM,EAAE,MAAM,GAAG,MAAM,EACvB,SAAS,EAAE,MAAM,EACjB,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,GACnB,GAAG,CAAC,MAAM,EAAE,GAAG,EAAE,CAAC,CAYpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAC7B,QAAQ,EAAE,aAAa,EACvB,SAAS,SAAI,GACd;IAAE,KAAK,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAAC,MAAM,EAAE,gBAAgB,EAAE,CAAA;CAAE,CAkBhE;AA8BD,MAAM,WAAW,kBAAkB;IAC/B,6DAA6D;IAC7D,KAAK,EAAE,MAAM,CAAA;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,kFAAkF;IAClF,cAAc,CAAC,EAAE,GAAG,CAAA;IACpB,+DAA+D;IAC/D,WAAW,CAAC,EAAE,CAAC,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAChC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,EAAE,GAAG,EAAE,GAAG,KAAK,IAAI,CAAA;IAC7C;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACvC;AAED,wBAAgB,aAAa,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,cAAc,EACd,WAAW,EACX,QAAQ,EACR,QAAc,EACd,QAAQ,EACR,QAAQ,EACR,cAAc,GACjB,EAAE,kBAAkB,qBAkcpB"}

package/dist/dynamic-kanban.js

@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, useDraggable, useDroppable, } from '@dnd-kit/core';
-import { MoreHorizontal, Search, X } from 'lucide-react';
+import { ListFilter, MoreHorizontal, Search, X } from 'lucide-react';
 import { toast } from 'sonner';
-import { Badge, Button, Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Skeleton, } from '@asteby/metacore-ui/primitives';
+import { Badge, Button, Card, CardContent, DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger, Input, Popover, PopoverContent, PopoverTrigger, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger, Skeleton, } from '@asteby/metacore-ui/primitives';
 import { ColumnFilterControl } from '@asteby/metacore-ui/data-table';
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib';
 import { useApi } from './api-context';
@@ -245,6 +245,23 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         }
         return out;
     }, [metadata, columnFilterConfigs, t]);
+    // Sheet (grouped global filters) open state + per-lane client-side filters.
+    // A lane filter narrows ONLY that stage's already-fetched cards by a field
+    // value — instant, no refetch — so a user can drill into one column without
+    // touching the rest of the board (the global filters, by contrast, refetch
+    // the whole board server-side).
+    const [filtersOpen, setFiltersOpen] = useState(false);
+    const [laneFilters, setLaneFilters] = useState({});
+    const setLaneFilter = useCallback((stageKey, filter) => {
+        setLaneFilters((prev) => {
+            const next = { ...prev };
+            if (filter)
+                next[stageKey] = filter;
+            else
+                delete next[stageKey];
+            return next;
+        });
+    }, []);
     const stages = useMemo(() => (metadata ? deriveStages(metadata) : []), [metadata]);
     const groupByKey = metadata?.group_by || '';
     const transitions = metadata?.transitions;
@@ -345,25 +362,74 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
             order: Number.MAX_SAFE_INTEGER,
         });
     }
-    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "kanban-filters", children: [_jsxs("div", { className: "relative", children: [_jsx(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" }), _jsx(Input, { value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value), placeholder: t('kanban.searchPlaceholder', { defaultValue: 'Buscar...' }), className: "h-8 w-52 pl-8 text-sm" })] }), filterFields.map((field) => (_jsx(ColumnFilterControl, { showLabel: true, label: field.label, filterKey: field.config.filterKey, filterType: field.config.filterType, filterOptions: field.config.options, filterLoading: field.config.loading, filterSearchEndpoint: field.config.searchEndpoint, selectedValues: field.config.selectedValues, onFilterChange: field.config.onFilterChange }, field.key))), activeFilterCount > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1 text-xs text-muted-foreground", onClick: clearAll, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearFilters', { defaultValue: 'Limpiar' }), ` (${activeFilterCount})`] }))] }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
-                            const cards = grouped.get(stage.key) ?? [];
+    return (_jsxs("div", { className: "flex flex-col gap-3", children: [_jsxs("div", { className: "flex flex-wrap items-center gap-2", "data-testid": "kanban-filters", children: [_jsxs("div", { className: "relative", children: [_jsx(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" }), _jsx(Input, { value: globalFilter, onChange: (e) => setGlobalFilter(e.target.value), placeholder: t('kanban.searchPlaceholder', { defaultValue: 'Buscar...' }), className: "h-8 w-52 pl-8 text-sm" })] }), filterFields.length > 0 && (_jsxs(Sheet, { open: filtersOpen, onOpenChange: setFiltersOpen, children: [_jsx(SheetTrigger, { asChild: true, children: _jsxs(Button, { variant: "outline", size: "sm", className: "h-8 gap-1.5", children: [_jsx(ListFilter, { className: "h-3.5 w-3.5" }), t('kanban.filters', { defaultValue: 'Filtros' }), activeFilterCount > 0 && (_jsx(Badge, { variant: "secondary", className: "ml-0.5 h-4 min-w-4 justify-center rounded-full px-1 text-[10px] tabular-nums", children: activeFilterCount }))] }) }), _jsxs(SheetContent, { side: "right", className: "flex w-80 flex-col gap-4 sm:max-w-sm", children: [_jsx(SheetHeader, { className: "space-y-0", children: _jsx(SheetTitle, { children: t('kanban.filters', { defaultValue: 'Filtros' }) }) }), _jsx("div", { className: "flex flex-1 flex-col gap-2 overflow-y-auto pr-1", children: filterFields.map((field) => (_jsx(ColumnFilterControl, { showLabel: true, label: field.label, filterKey: field.config.filterKey, filterType: field.config.filterType, filterOptions: field.config.options, filterLoading: field.config.loading, filterSearchEndpoint: field.config.searchEndpoint, selectedValues: field.config.selectedValues, onFilterChange: field.config.onFilterChange }, field.key))) }), activeFilterCount > 0 && (_jsxs(Button, { variant: "ghost", size: "sm", className: "gap-1 text-xs text-muted-foreground", onClick: clearAll, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearFilters', { defaultValue: 'Limpiar' }), ` (${activeFilterCount})`] }))] })] }))] }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx("div", { className: "flex min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: lanes.map((stage) => {
+                            const allCards = grouped.get(stage.key) ?? [];
+                            // Per-lane client-side narrowing: substring match on the
+                            // chosen field over the already-fetched cards. Instant, and
+                            // scoped to this stage only.
+                            const laneFilter = laneFilters[stage.key];
+                            const cards = laneFilter && laneFilter.value.trim()
+                                ? allCards.filter((c) => String(c[laneFilter.field] ?? '')
+                                    .toLowerCase()
+                                    .includes(laneFilter.value.trim().toLowerCase()))
+                                : allCards;
                             const droppableAllowed = !activeId ||
                                 stage.key === activeStage ||
                                 isTransitionAllowed(transitions, activeStage, stage.key);
-                            return (_jsx(KanbanLane, { stage: stage, count: cards.length, isDark: isDark, dimmed: !!activeId && !droppableAllowed, disabled: !!activeId && !droppableAllowed, children: loadingData && cards.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20 w-full" }), _jsx(Skeleton, { className: "h-20 w-full" })] })) : cards.length === 0 ? (_jsx("p", { className: "px-1 py-6 text-center text-xs text-muted-foreground", children: t('kanban.emptyLane', { defaultValue: 'Sin tarjetas' }) })) : (cards.map((card) => (_jsx(KanbanCard, { card: card, titleCol: titleCol, fieldCols: fieldCols, actions: rowActions, locale: i18n.language, timeZone: timeZone, currency: currency, onClick: onCardClick, onAction: handleInternalAction }, String(card.id))))) }, stage.key));
+                            return (_jsx(KanbanLane, { stage: stage, count: cards.length, totalCount: allCards.length, filterFields: filterFields, laneFilter: laneFilter, onLaneFilterChange: (f) => setLaneFilter(stage.key, f), isDark: isDark, dimmed: !!activeId && !droppableAllowed, disabled: !!activeId && !droppableAllowed, children: loadingData && cards.length === 0 ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20 w-full" }), _jsx(Skeleton, { className: "h-20 w-full" })] })) : cards.length === 0 ? (_jsx("p", { className: "px-1 py-6 text-center text-xs text-muted-foreground", children: t('kanban.emptyLane', { defaultValue: 'Sin tarjetas' }) })) : (cards.map((card) => (_jsx(KanbanCard, { card: card, titleCol: titleCol, fieldCols: fieldCols, actions: rowActions, locale: i18n.language, timeZone: timeZone, currency: currency, onClick: onCardClick, onAction: handleInternalAction }, String(card.id))))) }, stage.key));
                         }) }), _jsx(DragOverlay, { children: activeCard ? (_jsx(CardPreview, { card: activeCard, titleCol: titleCol, fieldCols: fieldCols, locale: i18n.language, timeZone: timeZone, currency: currency })) : null }), rowActionDialogs] })] }));
 }
-function KanbanLane({ stage, count, isDark, dimmed, disabled, children }) {
+function KanbanLane({ stage, count, totalCount, filterFields, laneFilter, onLaneFilterChange, isDark, dimmed, disabled, children, }) {
     const { t } = useTranslation();
     const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled });
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     });
+    const laneActive = !!(laneFilter && laneFilter.value.trim());
+    const activeFieldLabel = filterFields.find((f) => f.key === laneFilter?.field)?.label ??
+        laneFilter?.field;
     return (_jsxs("div", { ref: setNodeRef, className: "flex w-[300px] shrink-0 flex-col rounded-lg border bg-muted/30 transition-opacity", style: {
             opacity: dimmed ? 0.45 : 1,
             outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
             outlineOffset: 2,
-        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: count })] }), _jsx("div", { className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: children })] }));
+        }, "data-stage": stage.key, "data-disabled": disabled || undefined, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsx(Badge, { variant: "outline", className: "border-0 text-xs font-semibold", style: headerStyle, children: t(stage.label, { defaultValue: stage.label }) }), _jsxs("div", { className: "flex items-center gap-1", children: [_jsx("span", { className: "text-xs font-medium tabular-nums text-muted-foreground", children: laneActive ? `${count}/${totalCount}` : count }), _jsx(LaneFilterButton, { fields: filterFields, value: laneFilter, onChange: onLaneFilterChange })] })] }), laneActive && (_jsxs("div", { className: "flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground", children: [_jsx(ListFilter, { className: "h-3 w-3 shrink-0" }), _jsxs("span", { className: "truncate", children: [activeFieldLabel, ": ", laneFilter.value] }), _jsx("button", { type: "button", onClick: () => onLaneFilterChange(null), className: "ml-auto rounded p-0.5 hover:bg-muted", "aria-label": t('kanban.clearFilters', {
+                            defaultValue: 'Limpiar',
+                        }), children: _jsx(X, { className: "h-3 w-3" }) })] })), _jsx("div", { className: "flex min-h-[55vh] max-h-[70vh] min-w-0 flex-col gap-2 overflow-y-auto px-2 pb-3", children: children })] }));
+}
+// LaneFilterButton — the per-column funnel. Picks a field + a value and narrows
+// ONLY this lane's cards (client-side, in the parent). Draft state lives here so
+// typing doesn't refilter mid-keystroke; Apply/Enter commits, Limpiar clears.
+function LaneFilterButton({ fields, value, onChange, }) {
+    const { t } = useTranslation();
+    const [open, setOpen] = useState(false);
+    const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '');
+    const [text, setText] = useState(value?.value ?? '');
+    // Re-seed the draft from the committed filter each time the popover opens.
+    useEffect(() => {
+        if (open) {
+            setField(value?.field ?? fields[0]?.key ?? '');
+            setText(value?.value ?? '');
+        }
+    }, [open, value, fields]);
+    if (fields.length === 0)
+        return null;
+    const active = !!(value && value.value.trim());
+    const apply = () => {
+        if (field && text.trim())
+            onChange({ field, value: text });
+        else
+            onChange(null);
+        setOpen(false);
+    };
+    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", className: `rounded p-1 transition-colors hover:bg-muted hover:text-foreground ${active ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.filterLane', {
+                        defaultValue: 'Filtrar columna',
+                    }), children: _jsx(ListFilter, { className: "h-3.5 w-3.5" }) }) }), _jsxs(PopoverContent, { align: "end", className: "w-56 space-y-2 p-2", children: [_jsxs(Select, { value: field, onValueChange: setField, children: [_jsx(SelectTrigger, { className: "h-8 text-xs", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: fields.map((f) => (_jsx(SelectItem, { value: f.key, className: "text-xs", children: f.label }, f.key))) })] }), _jsx(Input, { autoFocus: true, value: text, onChange: (e) => setText(e.target.value), onKeyDown: (e) => {
+                            if (e.key === 'Enter')
+                                apply();
+                        }, placeholder: t('kanban.filterValue', { defaultValue: 'Valor...' }), className: "h-8 text-xs" }), _jsxs("div", { className: "flex justify-between gap-2", children: [_jsx(Button, { variant: "ghost", size: "sm", className: "h-7 text-xs", onClick: () => {
+                                    onChange(null);
+                                    setOpen(false);
+                                }, children: t('kanban.clearFilters', { defaultValue: 'Limpiar' }) }), _jsx(Button, { size: "sm", className: "h-7 text-xs", onClick: apply, children: t('kanban.apply', { defaultValue: 'Aplicar' }) })] })] })] }));
 }
 function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, currency, onClick, onAction, }) {
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@asteby/metacore-runtime-react",
-  "version": "21.0.0",
+  "version": "21.1.0",
   "description": "React runtime for metacore hosts — renders addon contributions dynamically",
   "repository": {
     "type": "git",

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

@@ -285,18 +285,23 @@ describe('optimistic drag contract', () => {
 // ---------------------------------------------------------------------------
 
 describe('DynamicKanban filter bar', () => {
-    it('renders a search box and a chip for each filterable field', async () => {
+    it('renders a search box and groups filters behind a Filtros sheet', async () => {
         useMetadataCache.getState().setMetadata('issue', meta())
         render(
             <ApiProvider client={fakeApi()}>
                 <DynamicKanban model="issue" />
             </ApiProvider>,
         )
-        // search box
+        // search box stays inline
         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()
+        // filters are grouped behind a "Filtros" button (no longer spilling as
+        // inline chips), so "Stage" is NOT in the DOM until the sheet opens.
+        const filtersBtn = screen.getByText('Filtros')
+        expect(filtersBtn).toBeTruthy()
+        expect(screen.queryByText('Stage')).toBeNull()
+        // opening the sheet reveals the "Stage" filter (the only filterable column)
+        fireEvent.click(filtersBtn)
+        expect(await screen.findByText('Stage')).toBeTruthy()
     })
 
     it('typing in the search box refetches the board with the search param', async () => {

package/src/dynamic-kanban.tsx

@@ -38,7 +38,7 @@ import {
     type DragStartEvent,
     type DragEndEvent,
 } from '@dnd-kit/core'
-import { MoreHorizontal, Search, X } from 'lucide-react'
+import { ListFilter, MoreHorizontal, Search, X } from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -50,6 +50,19 @@ import {
     DropdownMenuItem,
     DropdownMenuTrigger,
     Input,
+    Popover,
+    PopoverContent,
+    PopoverTrigger,
+    Select,
+    SelectContent,
+    SelectItem,
+    SelectTrigger,
+    SelectValue,
+    Sheet,
+    SheetContent,
+    SheetHeader,
+    SheetTitle,
+    SheetTrigger,
     Skeleton,
 } from '@asteby/metacore-ui/primitives'
 import { ColumnFilterControl, type ColumnFilterType } from '@asteby/metacore-ui/data-table'
@@ -393,6 +406,27 @@ export function DynamicKanban({
         return out
     }, [metadata, columnFilterConfigs, t])
 
+    // Sheet (grouped global filters) open state + per-lane client-side filters.
+    // A lane filter narrows ONLY that stage's already-fetched cards by a field
+    // value — instant, no refetch — so a user can drill into one column without
+    // touching the rest of the board (the global filters, by contrast, refetch
+    // the whole board server-side).
+    const [filtersOpen, setFiltersOpen] = useState(false)
+    const [laneFilters, setLaneFilters] = useState<
+        Record<string, { field: string; value: string }>
+    >({})
+    const setLaneFilter = useCallback(
+        (stageKey: string, filter: { field: string; value: string } | null) => {
+            setLaneFilters((prev) => {
+                const next = { ...prev }
+                if (filter) next[stageKey] = filter
+                else delete next[stageKey]
+                return next
+            })
+        },
+        [],
+    )
+
     const stages = useMemo(
         () => (metadata ? deriveStages(metadata) : []),
         [metadata],
@@ -564,38 +598,87 @@ export function DynamicKanban({
                         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>
+                {filterFields.length > 0 && (
+                    <Sheet open={filtersOpen} onOpenChange={setFiltersOpen}>
+                        <SheetTrigger asChild>
+                            <Button variant="outline" size="sm" className="h-8 gap-1.5">
+                                <ListFilter className="h-3.5 w-3.5" />
+                                {t('kanban.filters', { defaultValue: 'Filtros' })}
+                                {activeFilterCount > 0 && (
+                                    <Badge
+                                        variant="secondary"
+                                        className="ml-0.5 h-4 min-w-4 justify-center rounded-full px-1 text-[10px] tabular-nums"
+                                    >
+                                        {activeFilterCount}
+                                    </Badge>
+                                )}
+                            </Button>
+                        </SheetTrigger>
+                        <SheetContent
+                            side="right"
+                            className="flex w-80 flex-col gap-4 sm:max-w-sm"
+                        >
+                            <SheetHeader className="space-y-0">
+                                <SheetTitle>
+                                    {t('kanban.filters', { defaultValue: 'Filtros' })}
+                                </SheetTitle>
+                            </SheetHeader>
+                            {/* One labeled control per filterable field, stacked. Same
+                                configs / server-side engine as the inline chips were,
+                                just grouped so they never spill across the board. */}
+                            <div className="flex flex-1 flex-col gap-2 overflow-y-auto pr-1">
+                                {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}
+                                    />
+                                ))}
+                            </div>
+                            {activeFilterCount > 0 && (
+                                <Button
+                                    variant="ghost"
+                                    size="sm"
+                                    className="gap-1 text-xs text-muted-foreground"
+                                    onClick={clearAll}
+                                >
+                                    <X className="h-3.5 w-3.5" />
+                                    {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
+                                    {` (${activeFilterCount})`}
+                                </Button>
+                            )}
+                        </SheetContent>
+                    </Sheet>
                 )}
             </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 allCards = grouped.get(stage.key) ?? []
+                    // Per-lane client-side narrowing: substring match on the
+                    // chosen field over the already-fetched cards. Instant, and
+                    // scoped to this stage only.
+                    const laneFilter = laneFilters[stage.key]
+                    const cards =
+                        laneFilter && laneFilter.value.trim()
+                            ? allCards.filter((c) =>
+                                  String(c[laneFilter.field] ?? '')
+                                      .toLowerCase()
+                                      .includes(
+                                          laneFilter.value.trim().toLowerCase(),
+                                      ),
+                              )
+                            : allCards
                     const droppableAllowed =
                         !activeId ||
                         stage.key === activeStage ||
@@ -605,6 +688,12 @@ export function DynamicKanban({
                             key={stage.key}
                             stage={stage}
                             count={cards.length}
+                            totalCount={allCards.length}
+                            filterFields={filterFields}
+                            laneFilter={laneFilter}
+                            onLaneFilterChange={(f) =>
+                                setLaneFilter(stage.key, f)
+                            }
                             isDark={isDark}
                             dimmed={!!activeId && !droppableAllowed}
                             disabled={!!activeId && !droppableAllowed}
@@ -665,18 +754,37 @@ export function DynamicKanban({
 interface KanbanLaneProps {
     stage: StageMeta
     count: number
+    totalCount: number
+    filterFields: { key: string; label: string }[]
+    laneFilter: { field: string; value: string } | undefined
+    onLaneFilterChange: (filter: { field: string; value: string } | null) => void
     isDark: boolean
     dimmed: boolean
     disabled: boolean
     children: React.ReactNode
 }
 
-function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: KanbanLaneProps) {
+function KanbanLane({
+    stage,
+    count,
+    totalCount,
+    filterFields,
+    laneFilter,
+    onLaneFilterChange,
+    isDark,
+    dimmed,
+    disabled,
+    children,
+}: KanbanLaneProps) {
     const { t } = useTranslation()
     const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled })
     const headerStyle = generateBadgeStyles(stage.color || optionColor(stage.key), {
         isDark,
     })
+    const laneActive = !!(laneFilter && laneFilter.value.trim())
+    const activeFieldLabel =
+        filterFields.find((f) => f.key === laneFilter?.field)?.label ??
+        laneFilter?.field
     return (
         <div
             ref={setNodeRef}
@@ -697,10 +805,35 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
                 >
                     {t(stage.label, { defaultValue: stage.label })}
                 </Badge>
-                <span className="text-xs font-medium tabular-nums text-muted-foreground">
-                    {count}
-                </span>
+                <div className="flex items-center gap-1">
+                    <span className="text-xs font-medium tabular-nums text-muted-foreground">
+                        {laneActive ? `${count}/${totalCount}` : count}
+                    </span>
+                    <LaneFilterButton
+                        fields={filterFields}
+                        value={laneFilter}
+                        onChange={onLaneFilterChange}
+                    />
+                </div>
             </div>
+            {laneActive && (
+                <div className="flex items-center gap-1 px-3 pb-1.5 text-[11px] text-muted-foreground">
+                    <ListFilter className="h-3 w-3 shrink-0" />
+                    <span className="truncate">
+                        {activeFieldLabel}: {laneFilter!.value}
+                    </span>
+                    <button
+                        type="button"
+                        onClick={() => onLaneFilterChange(null)}
+                        className="ml-auto rounded p-0.5 hover:bg-muted"
+                        aria-label={t('kanban.clearFilters', {
+                            defaultValue: 'Limpiar',
+                        })}
+                    >
+                        <X className="h-3 w-3" />
+                    </button>
+                </div>
+            )}
             {/* Plain vertical-scroll column, NOT a Radix ScrollArea: the
                 ScrollArea viewport wraps its content in a `display:table`
                 element that shrink-to-fits the WIDEST card, so once the card
@@ -714,6 +847,95 @@ function KanbanLane({ stage, count, isDark, dimmed, disabled, children }: Kanban
     )
 }
 
+// LaneFilterButton — the per-column funnel. Picks a field + a value and narrows
+// ONLY this lane's cards (client-side, in the parent). Draft state lives here so
+// typing doesn't refilter mid-keystroke; Apply/Enter commits, Limpiar clears.
+function LaneFilterButton({
+    fields,
+    value,
+    onChange,
+}: {
+    fields: { key: string; label: string }[]
+    value: { field: string; value: string } | undefined
+    onChange: (filter: { field: string; value: string } | null) => void
+}) {
+    const { t } = useTranslation()
+    const [open, setOpen] = useState(false)
+    const [field, setField] = useState(value?.field ?? fields[0]?.key ?? '')
+    const [text, setText] = useState(value?.value ?? '')
+    // Re-seed the draft from the committed filter each time the popover opens.
+    useEffect(() => {
+        if (open) {
+            setField(value?.field ?? fields[0]?.key ?? '')
+            setText(value?.value ?? '')
+        }
+    }, [open, value, fields])
+    if (fields.length === 0) return null
+    const active = !!(value && value.value.trim())
+    const apply = () => {
+        if (field && text.trim()) onChange({ field, value: text })
+        else onChange(null)
+        setOpen(false)
+    }
+    return (
+        <Popover open={open} onOpenChange={setOpen}>
+            <PopoverTrigger asChild>
+                <button
+                    type="button"
+                    className={`rounded p-1 transition-colors hover:bg-muted hover:text-foreground ${
+                        active ? 'text-primary' : 'text-muted-foreground'
+                    }`}
+                    aria-label={t('kanban.filterLane', {
+                        defaultValue: 'Filtrar columna',
+                    })}
+                >
+                    <ListFilter className="h-3.5 w-3.5" />
+                </button>
+            </PopoverTrigger>
+            <PopoverContent align="end" className="w-56 space-y-2 p-2">
+                <Select value={field} onValueChange={setField}>
+                    <SelectTrigger className="h-8 text-xs">
+                        <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                        {fields.map((f) => (
+                            <SelectItem key={f.key} value={f.key} className="text-xs">
+                                {f.label}
+                            </SelectItem>
+                        ))}
+                    </SelectContent>
+                </Select>
+                <Input
+                    autoFocus
+                    value={text}
+                    onChange={(e) => setText(e.target.value)}
+                    onKeyDown={(e) => {
+                        if (e.key === 'Enter') apply()
+                    }}
+                    placeholder={t('kanban.filterValue', { defaultValue: 'Valor...' })}
+                    className="h-8 text-xs"
+                />
+                <div className="flex justify-between gap-2">
+                    <Button
+                        variant="ghost"
+                        size="sm"
+                        className="h-7 text-xs"
+                        onClick={() => {
+                            onChange(null)
+                            setOpen(false)
+                        }}
+                    >
+                        {t('kanban.clearFilters', { defaultValue: 'Limpiar' })}
+                    </Button>
+                    <Button size="sm" className="h-7 text-xs" onClick={apply}>
+                        {t('kanban.apply', { defaultValue: 'Aplicar' })}
+                    </Button>
+                </div>
+            </PopoverContent>
+        </Popover>
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Card (draggable)
 // ---------------------------------------------------------------------------