@asteby/metacore-runtime-react 23.7.1 → 23.9.0

package/dist/dynamic-kanban.js

@@ -2,14 +2,18 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { DndContext, DragOverlay, PointerSensor, useSensor, useSensors, useDraggable, useDroppable, } from '@dnd-kit/core';
-import { Calendar, CircleDot, Hash, ListFilter, MoreHorizontal, Search, Tag, ToggleLeft, Type, X, } from 'lucide-react';
+import { SortableContext, horizontalListSortingStrategy, useSortable, } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { arrayMove } from '@dnd-kit/sortable';
+import { Calendar, CircleDot, GripVertical, Hash, ListFilter, MoreHorizontal, RotateCcw, Search, Settings2, Tag, ToggleLeft, Type, X, } from 'lucide-react';
 import { toast } from 'sonner';
 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, FilterValueCombobox } from '@asteby/metacore-ui/data-table';
 import { generateBadgeStyles, optionColor } from '@asteby/metacore-ui/lib';
 import { useApi } from './api-context';
 import { useStageAutomations, StageAutomationsButton, } from './stage-automations';
-import { useCustomStages, splitCustomStages, mergeLaneStages, resolveSmartLanes, AddStageColumn, CustomStageLaneMenu, CustomStageDialog, CustomStageDeleteDialog, SmartLane, } from './custom-stages';
+import { useCustomStages, splitCustomStages, mergeLaneStages, resolveSmartLanes, cardMatchesStageFilters, smartLaneParams, AddStageColumn, CustomStageDialog, CustomStageDeleteDialog, StageConfigDialog, SmartLane, } from './custom-stages';
+import { useStageOverrides } from './stage-overrides';
 import { useDynamicFilters } from './use-dynamic-filters';
 import { FilterChipsRow, summarizeFilterValues, translateOptionLabels, } from './filter-chips';
 import { dedupeById, useInfiniteScrollSentinel } from './use-infinite-scroll';
@@ -20,6 +24,7 @@ import { isColumnVisibleInTable } from './column-visibility';
 import { isRowActionVisible } from './dynamic-columns';
 import { useCan, usePermissionsActive, resolveRowActions } from './permissions-context';
 import { useDynamicRowActions } from './dynamic-row-actions';
+import { useStageLayout } from './stage-layout';
 // Re-exported for tests + backward-compat: these live in ./filter-chips now
 // (shared with DynamicTable) but were historically imported from here.
 export { summarizeFilterValues, translateOptionLabels };
@@ -245,10 +250,16 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     // the host has no `/custom-stages` endpoint — the "+ Agregar etapa" column
     // and lane menus simply don't render.
     const customStages = useCustomStages(model);
+    // Per-org overrides for DECLARED lanes (rename/recolor/conditions). Degrades
+    // to no-op when the host has no `/stage-overrides` endpoint — the ⚙ gear then
+    // hides on declared lanes (custom lanes keep it via /custom-stages).
+    const stageOverrides = useStageOverrides(model);
     // Dialog state: create/edit a stage, and the delete confirmation.
     const [stageDialogOpen, setStageDialogOpen] = useState(false);
     const [editingStage, setEditingStage] = useState(null);
     const [deletingStage, setDeletingStage] = useState(null);
+    // The gear (⚙) "Configurar etapa" dialog — one UI for declared + custom lanes.
+    const [configTarget, setConfigTarget] = useState(null);
     const openCreateStage = useCallback(() => {
         setEditingStage(null);
         setStageDialogOpen(true);
@@ -274,6 +285,18 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     const [lanePagination, setLanePagination] = useState({});
     // Active drag card id (for the DragOverlay + drop-zone highlighting).
     const [activeId, setActiveId] = useState(null);
+    // Active drag LANE id — a header drag reorders columns (Trello/Bitrix-style)
+    // rather than moving a card. Kept apart so onDragEnd routes by draggable type.
+    const [activeLaneId, setActiveLaneId] = useState(null);
+    // Per-org lane order. `useStageLayout` reports whether the host wired the
+    // `/stage-layout` endpoint (→ lane drag turns on) and persists the chosen
+    // order. `laneOrderOverride` is the OPTIMISTIC session order applied on top of
+    // the metadata (the backend also stamps `stages[]/smart_lanes[].order`, so the
+    // board already paints ordered on load — this only backs the live drag + the
+    // revert-on-failure). Null → follow the metadata order.
+    const stageLayout = useStageLayout(model);
+    const [laneOrderOverride, setLaneOrderOverride] = useState(null);
+    const laneReorderEnabled = stageLayout.available;
     // Monotonic token for the current board load. Bumped on every fetchData so a
     // slow eager-totals response from a superseded filter set can't inject stale
     // stage totals into the fresh board.
@@ -356,6 +379,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                     const r = (await api.get(endpoint || `/data/${model}`, {
                         params: {
                             ...filterParams,
+                            ...smartLaneParams(stage.filters),
                             page: 1,
                             per_page: 1,
                             [`f_${gb}`]: stage.key,
@@ -390,6 +414,24 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     // the shared records. Scoped by `f_<group_by>=<stage>` on top of the active
     // filterParams (the stage scope wins over any global group_by filter).
     const groupByKey = metadata?.group_by || '';
+    // Extra per-lane conditions (stage overrides) keyed by stage. A real lane
+    // that carries these queries its data — and counts its header — with the
+    // stage scope PLUS these filters (serialized like a smart lane's), so the
+    // top-up + eager-total requests below layer them on. Sourced from
+    // `metadata.stages` (the kernel applies declared + custom-real overrides).
+    const stageExtraFilters = useMemo(() => {
+        const m = new Map();
+        for (const s of metadata?.stages ?? []) {
+            if (s.filters && s.filters.length > 0) {
+                m.set(s.key, s.filters.map((f) => ({
+                    field: f.field,
+                    op: f.op,
+                    value: f.value,
+                })));
+            }
+        }
+        return m;
+    }, [metadata?.stages]);
     const loadMoreLane = useCallback(async (stageKey) => {
         if (!metadata || !groupByKey)
             return;
@@ -410,6 +452,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
             const res = (await api.get(endpoint || `/data/${model}`, {
                 params: {
                     ...filterParams,
+                    ...smartLaneParams(stageExtraFilters.get(stageKey)),
                     page: nextPage,
                     per_page: lanePageSize,
                     [`f_${groupByKey}`]: stageKey,
@@ -441,7 +484,7 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                 },
             }));
         }
-    }, [api, endpoint, model, metadata, groupByKey, filterParams, lanePageSize, lanePagination]);
+    }, [api, endpoint, model, metadata, groupByKey, filterParams, lanePageSize, lanePagination, stageExtraFilters]);
     // 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
@@ -541,6 +584,44 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         return Math.max(base, ...positions, 0) + 1;
     }, [customStages.stages, stages.length, smartStages.length]);
     const transitions = metadata?.transitions;
+    // Unified, ordered list of the DRAGGABLE lanes (real stages + smart lanes) —
+    // the sortable sequence the header drag reorders. Real stages and smart lanes
+    // are merged by their `order` (the backend stamps a global sequence once a
+    // custom order exists); a `laneOrderOverride` from the live drag wins. Ties
+    // (the default, un-customized case where both sets start at 0) keep stages
+    // before smart lanes, matching the pre-reorder layout.
+    const renderLanes = useMemo(() => {
+        const arr = [
+            ...stages.map((s, i) => ({
+                kind: 'stage',
+                stage: s,
+                order: s.order ?? i,
+            })),
+            ...smartStages.map((s, i) => ({
+                kind: 'smart',
+                stage: s,
+                order: s.position ?? 1000 + i,
+            })),
+        ];
+        if (laneOrderOverride) {
+            const idx = new Map(laneOrderOverride.map((k, i) => [k, i]));
+            arr.sort((a, b) => (idx.get(a.stage.key) ?? Number.MAX_SAFE_INTEGER) -
+                (idx.get(b.stage.key) ?? Number.MAX_SAFE_INTEGER));
+        }
+        else {
+            arr.sort((a, b) => a.order - b.order ||
+                (a.kind === b.kind ? 0 : a.kind === 'stage' ? -1 : 1));
+        }
+        return arr.map(({ kind, stage: s }) => kind === 'stage'
+            ? { kind: 'stage', stage: s }
+            : { kind: 'smart', stage: s });
+    }, [stages, smartStages, laneOrderOverride]);
+    // The sortable ids, in current visual order — SortableContext items + the
+    // basis for the arrayMove the drop computes.
+    const boardLaneKeys = useMemo(() => renderLanes.map((l) => l.stage.key), [renderLanes]);
+    // Real (card-droppable) stage keys — guards a card drop from ever landing on
+    // a smart lane (a saved view, never a stored stage value).
+    const realStageKeys = useMemo(() => new Set(stages.map((s) => s.key)), [stages]);
     const grouped = useMemo(() => groupByStage(records, groupByKey, stages), [records, groupByKey, stages]);
     const { title: titleCol, fields: fieldCols } = useMemo(() => (metadata ? selectCardColumns(metadata) : { title: null, fields: [] }), [metadata]);
     // Columns the lane search scans: the card title + its visible field cells.
@@ -576,15 +657,51 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
         return raw === null || raw === undefined ? '' : String(raw);
     }, [cardById, groupByKey]);
     const onDragStart = useCallback((e) => {
-        setActiveId(String(e.active.id));
+        if (e.active.data.current?.type === 'lane') {
+            setActiveLaneId(String(e.active.id));
+        }
+        else {
+            setActiveId(String(e.active.id));
+        }
     }, []);
+    // Optimistic lane reorder: reorder the columns in local state immediately,
+    // PUT the full new order, and revert + toast on failure. Keys mix real
+    // stages and smart lanes (the backend applies the order to both).
+    const reorderLanes = useCallback(async (activeKey, overKey) => {
+        const from = boardLaneKeys.indexOf(activeKey);
+        const to = boardLaneKeys.indexOf(overKey);
+        if (from === -1 || to === -1 || from === to)
+            return;
+        const next = arrayMove(boardLaneKeys, from, to);
+        const prev = laneOrderOverride;
+        setLaneOrderOverride(next);
+        try {
+            await stageLayout.save(next);
+        }
+        catch {
+            setLaneOrderOverride(prev);
+            toast.error(t('dynamic.stage_layout.save_error', {
+                defaultValue: 'No se pudo guardar el orden',
+            }));
+        }
+    }, [boardLaneKeys, laneOrderOverride, stageLayout, t]);
     const onDragEnd = useCallback(async (e) => {
         setActiveId(null);
+        setActiveLaneId(null);
         const { active, over } = e;
+        // A header drag reorders columns rather than moving a card.
+        if (active.data.current?.type === 'lane') {
+            if (over)
+                await reorderLanes(String(active.id), String(over.id));
+            return;
+        }
         if (!over)
             return;
         const cardId = String(active.id);
         const destStage = String(over.id);
+        // Never drop a card onto a smart lane (a saved view, not a stage).
+        if (!realStageKeys.has(destStage) && destStage !== UNASSIGNED_LANE)
+            return;
         const srcStage = stageOfCard(cardId);
         if (srcStage === destStage)
             return;
@@ -626,7 +743,29 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                     ? `: ${err.response.data.message}`
                     : ''));
         }
-    }, [api, endpoint, groupByKey, lanePagination, model, records, stageOfCard, t, transitions]);
+    }, [api, endpoint, groupByKey, lanePagination, model, records, stageOfCard, t, transitions, realStageKeys, reorderLanes]);
+    // Board-level "Restablecer orden": drop the stored order and refetch the
+    // metadata so the lanes fall back to the DECLARED order. Optimistic — reverts
+    // its local override on failure.
+    const resetLaneOrder = useCallback(async () => {
+        const prev = laneOrderOverride;
+        setLaneOrderOverride(null);
+        try {
+            await stageLayout.reset();
+            const res = await api.get(`/metadata/table/${model}`);
+            const body = res.data;
+            if (body.success) {
+                setMetadata(body.data);
+                cacheMetadata(model, body.data);
+            }
+        }
+        catch {
+            setLaneOrderOverride(prev);
+            toast.error(t('dynamic.stage_layout.reset_error', {
+                defaultValue: 'No se pudo restablecer el orden',
+            }));
+        }
+    }, [api, cacheMetadata, laneOrderOverride, model, stageLayout, t]);
     if (loading) {
         return (_jsx("div", { className: "flex w-full gap-4 overflow-x-auto p-1", children: [0, 1, 2, 3].map((i) => (_jsxs("div", { className: "min-w-[280px] max-w-[420px] flex-1 shrink-0 space-y-3", children: [_jsx(Skeleton, { className: "h-8 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" }), _jsx(Skeleton, { className: "h-24 w-full" })] }, i))) }));
     }
@@ -637,15 +776,151 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
     }
     const activeCard = activeId ? cardById.get(activeId) : null;
     const activeStage = activeId ? stageOfCard(activeId) : '';
-    const lanes = [...stages];
-    if (grouped.has(UNASSIGNED_LANE)) {
-        lanes.push({
+    // The synthetic "Sin etapa" lane (only when some record's stage matches no
+    // declared lane). Rendered after the sortable lanes, never draggable itself.
+    const unassignedStage = grouped.has(UNASSIGNED_LANE)
+        ? {
             key: UNASSIGNED_LANE,
             label: t('kanban.unassigned', { defaultValue: 'Sin etapa' }),
             color: 'slate',
             order: Number.MAX_SAFE_INTEGER,
-        });
-    }
+        }
+        : null;
+    // Whether a card may drop into a lane given the active card's stage + the
+    // declared transitions (a same-stage or unrestricted move always passes).
+    const droppableAllowedFor = (stageKey) => !activeId ||
+        stageKey === activeStage ||
+        isTransitionAllowed(transitions, activeStage, stageKey);
+    // Opens the gear (⚙) "Configurar etapa" dialog for a lane, routing to the
+    // right backend by kind: a custom real stage edits through /custom-stages, a
+    // declared stage through /stage-overrides. Seeds the current label/color and
+    // any extra conditions the lane already carries.
+    const openConfigStage = (stage) => {
+        const custom = customStages.available
+            ? customByKey.get(stage.key)
+            : undefined;
+        const raw = stageExtraFilters.get(stage.key) ??
+            custom?.filters ??
+            [];
+        const filters = raw.map((f) => ({
+            field: f.field,
+            op: f.op,
+            value: f.value,
+        }));
+        if (custom) {
+            setConfigTarget({
+                kind: 'custom',
+                stageKey: stage.key,
+                id: custom.id,
+                label: custom.label,
+                color: custom.color,
+                filters,
+                customStage: custom,
+            });
+        }
+        else {
+            const original = stage.original
+                ? {
+                    label: stage.original.label,
+                    color: stage.original.color,
+                    filters: stage.original.filters?.map((f) => ({
+                        field: f.field,
+                        op: f.op,
+                        value: f.value,
+                    })),
+                }
+                : undefined;
+            setConfigTarget({
+                kind: 'declared',
+                stageKey: stage.key,
+                label: t(stage.label, { defaultValue: stage.label }),
+                color: stage.color ?? 'slate',
+                filters,
+                overridden: !!stage.overridden,
+                isFinal: stage.is_final,
+                original,
+            });
+        }
+    };
+    // Whether a lane offers the gear: custom real stages always (their CRUD is
+    // wired); declared lanes only when the host wired /stage-overrides. Never on
+    // the synthetic "Sin etapa" lane.
+    const isConfigurable = (stage) => {
+        if (stage.key === UNASSIGNED_LANE)
+            return false;
+        return customByKey.has(stage.key)
+            ? customStages.available
+            : stageOverrides.available;
+    };
+    // Builds every `KanbanLane` prop (minus the dnd wiring) for one stage —
+    // shared by the sortable real stages and the plain-droppable unassigned lane.
+    const buildLaneProps = (stage) => {
+        const allCards = grouped.get(stage.key) ?? [];
+        // Extra lane conditions (stage override): the server already scopes this
+        // lane's top-up + total queries by them, but the shared INITIAL board page
+        // is unscoped, so narrow those cards client-side too (belt-and-suspenders).
+        const extraFilters = stageExtraFilters.get(stage.key) ?? [];
+        // Per-lane client-side narrowing (instant, scoped to this stage). The
+        // funnel (field/value) and the lane search (query) are AND-combined.
+        const laneFilter = laneFilters[stage.key];
+        let cards = allCards;
+        if (extraFilters.length > 0) {
+            cards = cards.filter((c) => cardMatchesStageFilters(c, extraFilters));
+        }
+        if (laneFilter?.field) {
+            cards = cards.filter((c) => cardMatchesLaneFunnel(c, laneFilter));
+        }
+        if (laneFilter?.query?.trim()) {
+            cards = cards.filter((c) => cardMatchesLaneQuery(c, searchCols, laneFilter.query));
+        }
+        const laneState = lanePagination[stage.key];
+        const isUnassigned = stage.key === UNASSIGNED_LANE;
+        const laneHasMore = !isUnassigned && !laneState?.done;
+        return {
+            stage,
+            count: cards.length,
+            totalCount: allCards.length,
+            serverTotal: laneState?.total ?? null,
+            hasMore: laneHasMore,
+            loadingMore: !!laneState?.loading,
+            onLoadMore: () => loadMoreLane(stage.key),
+            filterFields,
+            laneFilter,
+            onFunnelChange: (f) => updateLaneFilter(stage.key, {
+                field: f?.field,
+                values: f?.values,
+                text: f?.text,
+            }),
+            onQueryChange: (q) => updateLaneFilter(stage.key, { query: q }),
+            isDark,
+            dimmed: !!activeId && !droppableAllowedFor(stage.key),
+            model,
+            columns: metadata?.columns ?? [],
+            automationsAvailable: automations.available && stage.key !== UNASSIGNED_LANE,
+            automationRules: automations.byStage.get(stage.key) ?? [],
+            onAutomationCreate: automations.create,
+            onAutomationUpdate: automations.update,
+            onAutomationRemove: automations.remove,
+            extraFilters,
+            configurable: isConfigurable(stage),
+            onConfigure: () => openConfigStage(stage),
+            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))))),
+        };
+    };
+    // Props for one smart (virtual) lane — a read-only, filter-defined column.
+    const buildSmartProps = (smart) => ({
+        stage: smart,
+        model,
+        endpoint,
+        defaultFilters,
+        pageSize,
+        isDark,
+        refreshTrigger,
+        onEdit: openEditStage,
+        onDelete: openDeleteStage,
+        renderCard: (card) => (_jsx(KanbanCard, { card: card, titleCol: titleCol, fieldCols: fieldCols, actions: rowActions, locale: i18n.language, timeZone: timeZone, currency: currency, onClick: onCardClick, onAction: handleInternalAction, draggable: false })),
+    });
+    const showResetOrder = laneReorderEnabled && (stageLayout.hasCustomLayout || !!laneOrderOverride);
     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-0 p-0 sm:max-w-sm", children: [_jsx(SheetHeader, { className: "space-y-0 border-b px-4 py-3", children: _jsx(SheetTitle, { className: "text-sm", children: t('kanban.filters', { defaultValue: 'Filtros' }) }) }), _jsxs("div", { className: "flex flex-1 flex-col gap-1 overflow-y-auto px-4 py-3", children: [activeFields.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { className: "px-0.5 pb-1 text-[11px] font-medium uppercase tracking-wide text-muted-foreground", children: t('kanban.activeFilters', {
                                                             defaultValue: 'Con filtros activos',
                                                         }) }), activeFields.map((field) => (_jsx(SheetFilterRow, { field: field, isStage: field.key === groupByKey }, field.key))), inactiveFields.length > 0 && (_jsx("div", { className: "my-2 border-t" }))] })), inactiveFields.map((field) => (_jsx(SheetFilterRow, { field: field, isStage: field.key === groupByKey }, field.key)))] }), _jsxs("div", { className: "sticky bottom-0 flex items-center justify-between gap-2 border-t bg-background px-4 py-3", children: [_jsx("span", { className: "text-xs text-muted-foreground tabular-nums", children: activeFilterCount > 0
@@ -655,41 +930,48 @@ export function DynamicKanban({ model, endpoint, refreshTrigger, onCardClick, on
                                                     })
                                                     : t('kanban.noActiveFilters', {
                                                         defaultValue: 'Sin filtros',
-                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsxs("div", { className: "flex w-full 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 (instant, scoped to this
-                                // stage). The funnel (field/value) and the lane search
-                                // (query) are AND-combined.
-                                const laneFilter = laneFilters[stage.key];
-                                let cards = allCards;
-                                if (laneFilter?.field) {
-                                    cards = cards.filter((c) => cardMatchesLaneFunnel(c, laneFilter));
-                                }
-                                if (laneFilter?.query?.trim()) {
-                                    cards = cards.filter((c) => cardMatchesLaneQuery(c, searchCols, laneFilter.query));
-                                }
-                                const droppableAllowed = !activeId ||
-                                    stage.key === activeStage ||
-                                    isTransitionAllowed(transitions, activeStage, stage.key);
-                                // Infinite scroll is per declared stage; the synthetic
-                                // "unassigned" lane can't be stage-scoped, so it never tops up.
-                                const laneState = lanePagination[stage.key];
-                                const isUnassigned = stage.key === UNASSIGNED_LANE;
-                                const laneHasMore = !isUnassigned && !laneState?.done;
-                                return (_jsx(KanbanLane, { stage: stage, count: cards.length, totalCount: allCards.length, serverTotal: laneState?.total ?? null, hasMore: laneHasMore, loadingMore: !!laneState?.loading, onLoadMore: () => loadMoreLane(stage.key), filterFields: filterFields, laneFilter: laneFilter, onFunnelChange: (f) => updateLaneFilter(stage.key, {
-                                        field: f?.field,
-                                        values: f?.values,
-                                        text: f?.text,
-                                    }), onQueryChange: (q) => updateLaneFilter(stage.key, { query: q }), isDark: isDark, dimmed: !!activeId && !droppableAllowed, disabled: !!activeId && !droppableAllowed, model: model, columns: metadata?.columns ?? [], automationsAvailable: automations.available && stage.key !== UNASSIGNED_LANE, automationRules: automations.byStage.get(stage.key) ?? [], onAutomationCreate: automations.create, onAutomationUpdate: automations.update, onAutomationRemove: automations.remove, customStage: customStages.available
-                                        ? customByKey.get(stage.key)
-                                        : undefined, onEditStage: openEditStage, onDeleteStage: openDeleteStage, 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));
-                            }), smartStages.map((smart) => (_jsx(SmartLane, { stage: smart, model: model, endpoint: endpoint, defaultFilters: defaultFilters, pageSize: pageSize, isDark: isDark, refreshTrigger: refreshTrigger, onEdit: openEditStage, onDelete: openDeleteStage, renderCard: (card) => (_jsx(KanbanCard, { card: card, titleCol: titleCol, fieldCols: fieldCols, actions: rowActions, locale: i18n.language, timeZone: timeZone, currency: currency, onClick: onCardClick, onAction: handleInternalAction, draggable: false })) }, `smart-${smart.key}`))), customStages.available && (_jsx(AddStageColumn, { onClick: openCreateStage }))] }), _jsx(DragOverlay, { children: activeCard ? (_jsx(CardPreview, { card: activeCard, titleCol: titleCol, fieldCols: fieldCols, locale: i18n.language, timeZone: timeZone, currency: currency })) : null }), rowActionDialogs] }), customStages.available && (_jsxs(_Fragment, { children: [_jsx(CustomStageDialog, { open: stageDialogOpen, onOpenChange: setStageDialogOpen, model: model, columns: metadata?.columns ?? [], initial: editingStage, nextPosition: nextStagePosition, onCreate: customStages.create, onUpdate: customStages.update }), _jsx(CustomStageDeleteDialog, { open: !!deletingStage, onOpenChange: (o) => {
+                                                    }) }), _jsxs(Button, { variant: "ghost", size: "sm", className: "h-7 gap-1 text-xs", onClick: clearAll, disabled: activeFilterCount === 0, children: [_jsx(X, { className: "h-3.5 w-3.5" }), t('kanban.clearAll', { defaultValue: 'Limpiar todo' }), activeFilterCount > 0 ? ` (${activeFilterCount})` : ''] })] })] })] })), showResetOrder && (_jsxs(Button, { variant: "ghost", size: "sm", className: "h-8 gap-1.5 text-xs text-muted-foreground", onClick: () => void resetLaneOrder(), "data-testid": "kanban-reset-order", children: [_jsx(RotateCcw, { className: "h-3.5 w-3.5" }), t('dynamic.stage_layout.reset', {
+                                defaultValue: 'Restablecer orden',
+                            })] }))] }), _jsx(FilterChipsRow, { fields: activeFields, onClearAll: clearAll, "data-testid": "kanban-filter-chips" }), _jsxs(DndContext, { sensors: sensors, onDragStart: onDragStart, onDragEnd: onDragEnd, children: [_jsx(SortableContext, { items: boardLaneKeys, strategy: horizontalListSortingStrategy, children: _jsxs("div", { className: "flex w-full min-w-0 gap-4 overflow-x-auto p-1", "data-testid": "kanban-board", children: [renderLanes.map((lane) => lane.kind === 'stage' ? (_jsx(SortableStageLane, { reorderEnabled: laneReorderEnabled, droppableDisabled: !!activeId && !droppableAllowedFor(lane.stage.key), laneProps: buildLaneProps(lane.stage) }, lane.stage.key)) : laneReorderEnabled ? (_jsx(SortableSmartLane, { droppableDisabled: !!activeId, smartProps: buildSmartProps(lane.stage) }, `smart-${lane.stage.key}`)) : (_jsx(SmartLane, { ...buildSmartProps(lane.stage) }, `smart-${lane.stage.key}`))), unassignedStage && (_jsx(DroppableStageLane, { droppableDisabled: !!activeId && !droppableAllowedFor(UNASSIGNED_LANE), laneProps: buildLaneProps(unassignedStage) }, UNASSIGNED_LANE)), customStages.available && (_jsx(AddStageColumn, { onClick: openCreateStage }))] }) }), _jsx(DragOverlay, { children: activeCard ? (_jsx(CardPreview, { card: activeCard, titleCol: titleCol, fieldCols: fieldCols, locale: i18n.language, timeZone: timeZone, currency: currency })) : null }), rowActionDialogs] }), customStages.available && (_jsxs(_Fragment, { children: [_jsx(CustomStageDialog, { open: stageDialogOpen, onOpenChange: setStageDialogOpen, model: model, columns: metadata?.columns ?? [], initial: editingStage, nextPosition: nextStagePosition, onCreate: customStages.create, onUpdate: customStages.update }), _jsx(CustomStageDeleteDialog, { open: !!deletingStage, onOpenChange: (o) => {
                             if (!o)
                                 setDeletingStage(null);
                         }, stage: deletingStage, reassignTargets: stages.map((s) => ({
                             key: s.key,
                             label: s.label,
-                        })), onConfirm: (s, reassignTo) => customStages.remove(s.id, reassignTo) })] }))] }));
+                        })), onConfirm: (s, reassignTo) => customStages.remove(s.id, reassignTo) })] })), _jsx(StageConfigDialog, { open: !!configTarget, onOpenChange: (o) => {
+                    if (!o)
+                        setConfigTarget(null);
+                }, columns: metadata?.columns ?? [], target: configTarget, onSaveOverride: async (stageKey, patch) => {
+                    await stageOverrides.save(stageKey, patch);
+                    // The override changes the served label/color/filters — refetch
+                    // metadata so the board repaints, and reload the cards.
+                    try {
+                        const res = await api.get(`/metadata/table/${model}`);
+                        const body = res.data;
+                        if (body.success) {
+                            setMetadata(body.data);
+                            cacheMetadata(model, body.data);
+                        }
+                    }
+                    catch {
+                        /* keep the current metadata on a refetch miss */
+                    }
+                    void fetchData();
+                }, onResetOverride: async (stageKey) => {
+                    await stageOverrides.reset(stageKey);
+                    try {
+                        const res = await api.get(`/metadata/table/${model}`);
+                        const body = res.data;
+                        if (body.success) {
+                            setMetadata(body.data);
+                            cacheMetadata(model, body.data);
+                        }
+                    }
+                    catch {
+                        /* keep the current metadata on a refetch miss */
+                    }
+                    void fetchData();
+                }, onUpdateCustom: customStages.update, onDeleteCustom: openDeleteStage })] }));
 }
 /**
  * A per-data-type glyph for the Filtros panel rows (and their popover header):
@@ -718,9 +1000,67 @@ function SheetFilterRow({ field, isStage, }) {
     const summary = summarizeFilterValues(field.config.selectedValues, field.config.options);
     return (_jsx(ColumnFilterControl, { variant: "row", align: "end", icon: filterTypeIcon(field.config.filterType, isStage), label: field.label, valueSummary: summary, 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, loadOptions: field.config.loadOptions }));
 }
-function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMore, onLoadMore, filterFields, laneFilter, onFunnelChange, onQueryChange, isDark, dimmed, disabled, model, columns, automationsAvailable, automationRules, onAutomationCreate, onAutomationUpdate, onAutomationRemove, customStage, onEditStage, onDeleteStage, children, }) {
+// A real stage lane: sortable (header drag reorders) AND a card drop target.
+// One `useSortable` provides both roles; `disabled.draggable` follows whether
+// lane reordering is available, `disabled.droppable` follows the per-card
+// transition gate.
+function SortableStageLane({ reorderEnabled, droppableDisabled, laneProps, }) {
+    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, isOver, } = useSortable({
+        id: laneProps.stage.key,
+        data: { type: 'lane' },
+        disabled: { draggable: !reorderEnabled, droppable: droppableDisabled },
+    });
+    const dnd = {
+        setNodeRef,
+        isOver,
+        isDragging,
+        draggable: reorderEnabled,
+        handleRef: setActivatorNodeRef,
+        handleProps: { ...attributes, ...listeners },
+        style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            zIndex: isDragging ? 30 : undefined,
+            position: isDragging ? 'relative' : undefined,
+        },
+    };
+    return _jsx(KanbanLane, { ...laneProps, dnd: dnd });
+}
+// The synthetic "Sin etapa" lane: a card drop target, never draggable.
+function DroppableStageLane({ droppableDisabled, laneProps, }) {
+    const { setNodeRef, isOver } = useDroppable({
+        id: laneProps.stage.key,
+        disabled: droppableDisabled,
+    });
+    return (_jsx(KanbanLane, { ...laneProps, dnd: { setNodeRef, isOver, draggable: false } }));
+}
+// A smart lane: sortable (header drag reorders) but NOT a card drop target — its
+// droppable is disabled while a card is dragged, enabled while a lane is dragged
+// (so a stage/smart lane can be reordered relative to it).
+function SortableSmartLane({ droppableDisabled, smartProps, }) {
+    const { setNodeRef, setActivatorNodeRef, attributes, listeners, transform, transition, isDragging, } = useSortable({
+        id: smartProps.stage.key,
+        data: { type: 'lane' },
+        disabled: { draggable: false, droppable: droppableDisabled },
+    });
+    const dnd = {
+        setNodeRef,
+        isOver: false,
+        isDragging,
+        draggable: true,
+        handleRef: setActivatorNodeRef,
+        handleProps: { ...attributes, ...listeners },
+        style: {
+            transform: CSS.Translate.toString(transform),
+            transition,
+            zIndex: isDragging ? 30 : undefined,
+            position: isDragging ? 'relative' : undefined,
+        },
+    };
+    return _jsx(SmartLane, { ...smartProps, dnd: dnd });
+}
+function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMore, onLoadMore, filterFields, laneFilter, onFunnelChange, onQueryChange, isDark, dimmed, dnd, model, columns, automationsAvailable, automationRules, onAutomationCreate, onAutomationUpdate, onAutomationRemove, extraFilters, configurable, onConfigure, children, }) {
     const { t } = useTranslation();
-    const { setNodeRef, isOver } = useDroppable({ id: stage.key, disabled });
     // Infinite scroll: the sentinel lives at the bottom of the lane's own scroll
     // container; a load in flight or an exhausted stage disables it.
     const { rootRef, sentinelRef } = useInfiniteScrollSentinel({
@@ -758,18 +1098,44 @@ function KanbanLane({ stage, count, totalCount, serverTotal, hasMore, loadingMor
             text: laneFilter.text,
         }
         : undefined;
-    return (_jsxs("div", { ref: setNodeRef, 
+    // Stage-override conditions active on this lane → a small filter dot in the
+    // header, its `title` listing the conditions (e.g. "priority es igual high").
+    const hasConditions = extraFilters.length > 0;
+    const conditionsSummary = extraFilters
+        .map((f) => {
+        const opLabel = t(`dynamic.custom_stages.op.${f.op}`, {
+            defaultValue: f.op === 'eq'
+                ? 'es igual'
+                : f.op === 'neq'
+                    ? 'distinto'
+                    : f.op === 'contains'
+                        ? 'contiene'
+                        : 'en lista',
+        });
+        return `${f.field} ${opLabel} ${f.value}`;
+    })
+        .join(' · ');
+    return (_jsxs("div", { ref: dnd.setNodeRef, 
         // Fluid width: lanes grow (flex-1) to fill the board when they all
         // fit, capped at max-w so a couple of lanes don't stretch absurdly
         // wide. Below min-w the board's overflow-x-auto takes over and the
         // lanes scroll horizontally at their minimum width.
         className: "group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border bg-muted/30 transition-opacity", style: {
-            opacity: dimmed ? 0.45 : 1,
-            outline: isOver && !disabled ? '2px solid var(--ring, #3b82f6)' : 'none',
+            opacity: dnd.isDragging ? 0.6 : dimmed ? 0.45 : 1,
+            outline: dnd.isOver ? '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: [_jsxs("div", { className: "flex min-w-0 items-center gap-2", 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: formatLaneCount(count, totalCount, serverTotal, laneActive) })] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
+            ...dnd.style,
+        }, "data-stage": stage.key, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2.5", children: [_jsxs("div", { ref: dnd.draggable ? dnd.handleRef : undefined, ...(dnd.draggable ? dnd.handleProps : {}), className: `flex min-w-0 items-center gap-1.5 ${dnd.draggable ? 'cursor-grab active:cursor-grabbing' : ''}`, children: [dnd.draggable && (_jsx(GripVertical, { className: "h-3.5 w-3.5 shrink-0 text-muted-foreground/40 opacity-0 transition-opacity group-hover/lane:opacity-70", "aria-hidden": true })), _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: formatLaneCount(count, totalCount, serverTotal, laneActive) }), hasConditions && (_jsx("span", { className: "flex items-center text-primary", title: t('dynamic.stage_config.conditions_active', {
+                                    defaultValue: 'Condiciones: {{list}}',
+                                    list: conditionsSummary,
+                                }), "data-testid": `lane-conditions-${stage.key}`, "aria-label": t('dynamic.stage_config.conditions_active', {
+                                    defaultValue: 'Condiciones: {{list}}',
+                                    list: conditionsSummary,
+                                }), children: _jsx(ListFilter, { className: "h-3 w-3" }) }))] }), _jsxs("div", { className: "flex items-center gap-0.5", children: [_jsxs("button", { type: "button", onClick: () => setSearchOpen((o) => !o), className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${queryActive ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('kanban.searchLane', {
                                     defaultValue: 'Buscar en la columna',
-                                }), children: [_jsx(Search, { className: "h-3.5 w-3.5" }), queryActive && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" }))] }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange }), automationsAvailable && (_jsx(StageAutomationsButton, { model: model, stageKey: stage.key, stageLabel: stage.label, columns: columns, rules: automationRules, onCreate: onAutomationCreate, onUpdate: onAutomationUpdate, onRemove: onAutomationRemove })), customStage && onEditStage && onDeleteStage && (_jsx(CustomStageLaneMenu, { stage: customStage, onEdit: onEditStage, onDelete: onDeleteStage }))] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
+                                }), children: [_jsx(Search, { className: "h-3.5 w-3.5" }), queryActive && (_jsx("span", { className: "absolute -right-0.5 -top-0.5 size-1.5 rounded-full bg-primary" }))] }), _jsx(LaneFilterButton, { fields: filterFields, value: funnelValue, onChange: onFunnelChange }), automationsAvailable && (_jsx(StageAutomationsButton, { model: model, stageKey: stage.key, stageLabel: stage.label, columns: columns, rules: automationRules, onCreate: onAutomationCreate, onUpdate: onAutomationUpdate, onRemove: onAutomationRemove })), configurable && (_jsx("button", { type: "button", onClick: onConfigure, className: `relative flex size-6 items-center justify-center rounded-md transition-colors hover:bg-accent hover:text-foreground ${hasConditions ? 'text-primary' : 'text-muted-foreground'}`, "aria-label": t('dynamic.stage_config.open', {
+                                    defaultValue: 'Configurar etapa',
+                                }), "data-testid": `lane-config-${stage.key}`, children: _jsx(Settings2, { className: "h-3.5 w-3.5" }) }))] })] }), searchOpen && (_jsx("div", { className: "px-3 pb-1.5", children: _jsxs("div", { className: "relative", children: [_jsx(Search, { className: "pointer-events-none absolute left-2 top-1/2 h-3 w-3 -translate-y-1/2 text-muted-foreground" }), _jsx(Input, { ref: searchRef, value: laneFilter?.query ?? '', onChange: (e) => onQueryChange(e.target.value), onKeyDown: (e) => {
                                 if (e.key === 'Escape') {
                                     onQueryChange('');
                                     setSearchOpen(false);
@@ -844,6 +1210,7 @@ function LaneFilterButton({ fields, value, onChange, }) {
 function KanbanCard({ card, titleCol, fieldCols, actions, locale, timeZone, currency, onClick, onAction, draggable = true, }) {
     const { attributes, listeners, setNodeRef, isDragging } = useDraggable({
         id: String(card.id),
+        data: { type: 'card' },
         disabled: !draggable,
     });
     const visibleActions = actions.filter((a) => isRowActionVisible(a, card));

package/dist/index.d.ts

@@ -3,7 +3,9 @@ export * from './options-context';
 export * from './dynamic-table';
 export { DynamicKanban, type DynamicKanbanProps, deriveStages, groupByStage, isTransitionAllowed, applyOptimisticMove, selectCardColumns, UNASSIGNED_LANE, } from './dynamic-kanban';
 export { useStageAutomations, StageAutomationsButton, isTagColumn, automationFieldOptions, groupAutomationsByStage, activeAutomationCount, type StageAutomation, type StageAutomationAction, type StageAutomationActionType, type NewStageAutomation, type UseStageAutomationsResult, type StageAutomationsButtonProps, } from './stage-automations';
-export { useCustomStages, splitCustomStages, mergeLaneStages, resolveSmartLanes, smartLaneParams, customStageFilterFields, isCustomStageDraftValid, slugifyStageKey, emptyCustomStageFilter, AddStageColumn, CustomStageLaneMenu, CustomStageDialog, CustomStageDeleteDialog, SmartLane, CUSTOM_STAGE_COLORS, CUSTOM_STAGE_FILTER_OPS, type CustomStage, type NewCustomStage, type CustomStageType, type CustomStageFilter, type CustomStageFilterOp, type UseCustomStagesResult, } from './custom-stages';
+export { useCustomStages, splitCustomStages, mergeLaneStages, resolveSmartLanes, smartLaneParams, cardMatchesStageFilters, customStageFilterFields, isCustomStageDraftValid, slugifyStageKey, emptyCustomStageFilter, AddStageColumn, CustomStageLaneMenu, CustomStageDialog, CustomStageDeleteDialog, StageConditionBuilder, StageConfigDialog, stageFilterOpSymbol, SmartLane, CUSTOM_STAGE_COLORS, CUSTOM_STAGE_FILTER_OPS, type CustomStage, type NewCustomStage, type CustomStageType, type CustomStageFilter, type CustomStageFilterOp, type UseCustomStagesResult, type StageConfigTarget, type StageConfigKind, type StageConditionBuilderProps, type StageConfigDialogProps, } from './custom-stages';
+export { useStageLayout, type StageLayout, type UseStageLayoutResult, } from './stage-layout';
+export { useStageOverrides, type StageOverridePatch, type UseStageOverridesResult, } from './stage-overrides';
 export { DynamicView, resolveViewRenderer, readViewFromSearch, resolveActiveView, type DynamicViewProps, } from './dynamic-view';
 export { useDynamicFilters, type UseDynamicFiltersOptions, type UseDynamicFiltersResult, } from './use-dynamic-filters';
 export * from './dynamic-form';