@asteby/metacore-runtime-react 23.7.1 → 23.9.0

package/src/custom-stages.tsx

@@ -19,7 +19,7 @@
 // All UI text goes through t() with a Spanish defaultValue.
 import React, { useCallback, useEffect, useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
-import { Plus, Trash2, Pencil, MoreVertical, Filter, X } from 'lucide-react'
+import { Plus, Trash2, Pencil, MoreVertical, Filter, Flag, GripVertical, Lock, RotateCcw, X } from 'lucide-react'
 import { toast } from 'sonner'
 import {
     Badge,
@@ -151,6 +151,8 @@ export function mergeLaneStages(
             label: cs.label,
             color: cs.color,
             order: cs.position,
+            custom: true,
+            filters: cs.filters,
         })
     }
     lanes.sort((a, b) => {
@@ -173,7 +175,7 @@ export function mergeLaneStages(
  * Empty fields/values are skipped.
  */
 export function smartLaneParams(
-    filters: CustomStageFilter[] | undefined,
+    filters: { field: string; op: string; value: string }[] | undefined,
 ): Record<string, string> {
     const params: Record<string, string> = {}
     for (const f of filters ?? []) {
@@ -254,6 +256,43 @@ export function isCustomStageDraftValid(draft: {
     return true
 }
 
+/**
+ * Whether a card passes a set of extra lane `filters` (the same conditions a
+ * smart lane uses, layered on top of a real stage). Ops:
+ *   - eq       → equal (string compare)
+ *   - neq      → not equal
+ *   - contains → the card's value (array or string) includes the value
+ *   - in       → the card's value is one of the comma-separated candidates
+ * Empty/absent filters pass. Pure — a client-side belt-and-suspenders over the
+ * initial (unscoped) board page; the server scopes the per-lane top-up queries.
+ */
+export function cardMatchesStageFilters(
+    card: any,
+    filters: CustomStageFilter[] | undefined,
+): boolean {
+    if (!filters || filters.length === 0) return true
+    return filters.every((f) => {
+        if (!f.field || String(f.value ?? '').trim() === '') return true
+        const target = String(f.value).trim()
+        const raw = card?.[f.field]
+        switch (f.op) {
+            case 'neq':
+                return String(raw ?? '') !== target
+            case 'contains':
+                if (Array.isArray(raw)) return raw.map(String).includes(target)
+                return String(raw ?? '').includes(target)
+            case 'in':
+                return target
+                    .split(',')
+                    .map((s) => s.trim())
+                    .includes(String(raw ?? ''))
+            case 'eq':
+            default:
+                return String(raw ?? '') === target
+        }
+    })
+}
+
 /** Slugify a label into a stable-ish lane key (used only when creating). */
 export function slugifyStageKey(label: string): string {
     return (
@@ -463,6 +502,141 @@ export function CustomStageLaneMenu({
     )
 }
 
+// ---------------------------------------------------------------------------
+// Condition builder (field / operator / value rows) — shared by the smart-lane
+// editor and the declared-stage config dialog.
+// ---------------------------------------------------------------------------
+
+export interface StageConditionBuilderProps {
+    /** The current filter rows. */
+    filters: CustomStageFilter[]
+    /** Called with the next filter rows on any add/remove/patch. */
+    onChange: (filters: CustomStageFilter[]) => void
+    /** Columns offered in the field dropdown (visible, non-id). */
+    fieldChoices: ColumnDefinition[]
+    /** Optional heading shown above the rows. */
+    label?: string
+}
+
+/**
+ * The reusable field/operator/value condition builder. Emits `CustomStageFilter[]`
+ * through `onChange`. Same ops (eq/neq/contains/in) and testids the smart-lane
+ * editor has always used, so it drops in for both the custom-stage smart lane
+ * and the declared-stage config dialog.
+ */
+export function StageConditionBuilder({
+    filters,
+    onChange,
+    fieldChoices,
+    label,
+}: StageConditionBuilderProps) {
+    const { t } = useTranslation()
+    const patchFilter = (i: number, patch: Partial<CustomStageFilter>) =>
+        onChange(filters.map((f, idx) => (idx === i ? { ...f, ...patch } : f)))
+    const addFilter = () =>
+        onChange([...filters, emptyCustomStageFilter(fieldChoices[0]?.key ?? '')])
+    const removeFilter = (i: number) =>
+        onChange(filters.filter((_, idx) => idx !== i))
+    return (
+        <div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
+            <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
+                <Filter className="h-3.5 w-3.5" />
+                {label ??
+                    t('dynamic.custom_stages.conditions_label', {
+                        defaultValue: 'Condiciones',
+                    })}
+            </div>
+            {filters.map((f, i) => (
+                <div
+                    key={i}
+                    className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1.5"
+                    data-testid={`custom-stage-condition-${i}`}
+                >
+                    <Select
+                        value={f.field}
+                        onValueChange={(v) => patchFilter(i, { field: v })}
+                    >
+                        <SelectTrigger className="h-8 text-xs" data-testid={`custom-stage-condition-field-${i}`}>
+                            <SelectValue
+                                placeholder={t(
+                                    'dynamic.custom_stages.field_placeholder',
+                                    { defaultValue: 'Campo' },
+                                )}
+                            />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {fieldChoices.map((c) => (
+                                <SelectItem key={c.key} value={c.key} className="text-xs">
+                                    {t(c.label, { defaultValue: c.label })}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <Select
+                        value={f.op}
+                        onValueChange={(v) =>
+                            patchFilter(i, { op: v as CustomStageFilterOp })
+                        }
+                    >
+                        <SelectTrigger className="h-8 w-[104px] text-xs" data-testid={`custom-stage-condition-op-${i}`}>
+                            <SelectValue />
+                        </SelectTrigger>
+                        <SelectContent>
+                            {CUSTOM_STAGE_FILTER_OPS.map((op) => (
+                                <SelectItem key={op} value={op} className="text-xs">
+                                    {t(`dynamic.custom_stages.op.${op}`, {
+                                        defaultValue:
+                                            op === 'eq'
+                                                ? 'es igual'
+                                                : op === 'neq'
+                                                ? 'distinto'
+                                                : op === 'contains'
+                                                ? 'contiene'
+                                                : 'en lista',
+                                    })}
+                                </SelectItem>
+                            ))}
+                        </SelectContent>
+                    </Select>
+                    <Input
+                        value={f.value}
+                        onChange={(e) => patchFilter(i, { value: e.target.value })}
+                        placeholder={t('dynamic.custom_stages.value_placeholder', {
+                            defaultValue: 'Valor',
+                        })}
+                        className="h-8 text-xs"
+                        data-testid={`custom-stage-condition-value-${i}`}
+                    />
+                    <button
+                        type="button"
+                        onClick={() => removeFilter(i)}
+                        disabled={filters.length === 1}
+                        className="flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-destructive disabled:opacity-40"
+                        aria-label={t('dynamic.custom_stages.remove_condition', {
+                            defaultValue: 'Quitar condición',
+                        })}
+                        data-testid={`custom-stage-condition-remove-${i}`}
+                    >
+                        <X className="h-3.5 w-3.5" />
+                    </button>
+                </div>
+            ))}
+            <Button
+                variant="ghost"
+                size="sm"
+                className="h-7 justify-start gap-1 text-xs"
+                onClick={addFilter}
+                data-testid="custom-stage-add-condition"
+            >
+                <Plus className="h-3.5 w-3.5" />
+                {t('dynamic.custom_stages.add_condition', {
+                    defaultValue: 'Agregar condición',
+                })}
+            </Button>
+        </div>
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Create / edit dialog
 // ---------------------------------------------------------------------------
@@ -526,18 +700,6 @@ export function CustomStageDialog({
         }
     }, [open, initial, fieldChoices])
 
-    const patchFilter = (i: number, patch: Partial<CustomStageFilter>) =>
-        setFilters((prev) =>
-            prev.map((f, idx) => (idx === i ? { ...f, ...patch } : f)),
-        )
-    const addFilter = () =>
-        setFilters((prev) => [
-            ...prev,
-            emptyCustomStageFilter(fieldChoices[0]?.key ?? ''),
-        ])
-    const removeFilter = (i: number) =>
-        setFilters((prev) => prev.filter((_, idx) => idx !== i))
-
     const valid = isCustomStageDraftValid({ label, type, filters })
 
     const submit = async () => {
@@ -697,101 +859,11 @@ export function CustomStageDialog({
 
                     {/* Condition builder — smart lanes only */}
                     {type === 'smart' && (
-                        <div className="flex flex-col gap-2 rounded-md border bg-muted/30 p-3">
-                            <div className="flex items-center gap-1.5 text-xs font-medium text-muted-foreground">
-                                <Filter className="h-3.5 w-3.5" />
-                                {t('dynamic.custom_stages.conditions_label', {
-                                    defaultValue: 'Condiciones',
-                                })}
-                            </div>
-                            {filters.map((f, i) => (
-                                <div
-                                    key={i}
-                                    className="grid grid-cols-[1fr_auto_1fr_auto] items-center gap-1.5"
-                                    data-testid={`custom-stage-condition-${i}`}
-                                >
-                                    <Select
-                                        value={f.field}
-                                        onValueChange={(v) => patchFilter(i, { field: v })}
-                                    >
-                                        <SelectTrigger className="h-8 text-xs" data-testid={`custom-stage-condition-field-${i}`}>
-                                            <SelectValue
-                                                placeholder={t(
-                                                    'dynamic.custom_stages.field_placeholder',
-                                                    { defaultValue: 'Campo' },
-                                                )}
-                                            />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            {fieldChoices.map((c) => (
-                                                <SelectItem key={c.key} value={c.key} className="text-xs">
-                                                    {t(c.label, { defaultValue: c.label })}
-                                                </SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                    <Select
-                                        value={f.op}
-                                        onValueChange={(v) =>
-                                            patchFilter(i, { op: v as CustomStageFilterOp })
-                                        }
-                                    >
-                                        <SelectTrigger className="h-8 w-[104px] text-xs" data-testid={`custom-stage-condition-op-${i}`}>
-                                            <SelectValue />
-                                        </SelectTrigger>
-                                        <SelectContent>
-                                            {CUSTOM_STAGE_FILTER_OPS.map((op) => (
-                                                <SelectItem key={op} value={op} className="text-xs">
-                                                    {t(`dynamic.custom_stages.op.${op}`, {
-                                                        defaultValue:
-                                                            op === 'eq'
-                                                                ? 'es igual'
-                                                                : op === 'neq'
-                                                                ? 'distinto'
-                                                                : op === 'contains'
-                                                                ? 'contiene'
-                                                                : 'en lista',
-                                                    })}
-                                                </SelectItem>
-                                            ))}
-                                        </SelectContent>
-                                    </Select>
-                                    <Input
-                                        value={f.value}
-                                        onChange={(e) => patchFilter(i, { value: e.target.value })}
-                                        placeholder={t('dynamic.custom_stages.value_placeholder', {
-                                            defaultValue: 'Valor',
-                                        })}
-                                        className="h-8 text-xs"
-                                        data-testid={`custom-stage-condition-value-${i}`}
-                                    />
-                                    <button
-                                        type="button"
-                                        onClick={() => removeFilter(i)}
-                                        disabled={filters.length === 1}
-                                        className="flex size-7 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-destructive disabled:opacity-40"
-                                        aria-label={t('dynamic.custom_stages.remove_condition', {
-                                            defaultValue: 'Quitar condición',
-                                        })}
-                                        data-testid={`custom-stage-condition-remove-${i}`}
-                                    >
-                                        <X className="h-3.5 w-3.5" />
-                                    </button>
-                                </div>
-                            ))}
-                            <Button
-                                variant="ghost"
-                                size="sm"
-                                className="h-7 justify-start gap-1 text-xs"
-                                onClick={addFilter}
-                                data-testid="custom-stage-add-condition"
-                            >
-                                <Plus className="h-3.5 w-3.5" />
-                                {t('dynamic.custom_stages.add_condition', {
-                                    defaultValue: 'Agregar condición',
-                                })}
-                            </Button>
-                        </div>
+                        <StageConditionBuilder
+                            filters={filters}
+                            onChange={setFilters}
+                            fieldChoices={fieldChoices}
+                        />
                     )}
                 </div>
 
@@ -968,6 +1040,541 @@ export function CustomStageDeleteDialog({
     )
 }
 
+// ---------------------------------------------------------------------------
+// Stage config dialog (the per-lane gear ⚙) — unifies DECLARED-lane overrides
+// and CUSTOM real-stage editing behind one "Configurar etapa" UI.
+// ---------------------------------------------------------------------------
+
+export type StageConfigKind = 'declared' | 'custom'
+
+/** What the gear opens the config dialog against — a declared or custom lane. */
+export interface StageConfigTarget {
+    kind: StageConfigKind
+    /** Stable lane key. */
+    stageKey: string
+    /** Custom-stage id — required (and only used) when `kind === 'custom'`. */
+    id?: CustomStage['id']
+    label: string
+    color: string
+    filters: CustomStageFilter[]
+    /**
+     * Declared kind: an override is currently applied → shows a "Personalizada"
+     * badge + "Restablecer al original". Ignored for custom stages (they reset
+     * via their own delete flow).
+     */
+    overridden?: boolean
+    /** Terminal stage (e.g. "Done") — surfaces an "Etapa final" chip + tooltip. */
+    isFinal?: boolean
+    /**
+     * The manifest ORIGINAL (pre-override) values, when the host serves them
+     * (`metadata.stages[].original`). Drives the "Restablecer al original" confirm
+     * so the user sees exactly what reverts. Absent → a generic confirm.
+     */
+    original?: {
+        label?: string
+        color?: string
+        filters?: CustomStageFilter[]
+    }
+    /** The backing CustomStage (custom kind) so "Eliminar" can trigger delete. */
+    customStage?: CustomStage
+}
+
+/** A legible operator glyph for a condition chip: = / ≠ / contiene / en. */
+export function stageFilterOpSymbol(op: string): string {
+    switch (op) {
+        case 'neq':
+            return '≠'
+        case 'contains':
+            return 'contiene'
+        case 'in':
+            return 'en'
+        case 'eq':
+        default:
+            return '='
+    }
+}
+
+export interface StageConfigDialogProps {
+    open: boolean
+    onOpenChange: (open: boolean) => void
+    /** Columns for the condition builder. */
+    columns: ColumnDefinition[]
+    /** The lane being configured, or null. */
+    target: StageConfigTarget | null
+    /** Declared: upsert the lane override (PUT /stage-overrides). */
+    onSaveOverride: (
+        stageKey: string,
+        patch: { label: string; color: string; filters: CustomStageFilter[] },
+    ) => Promise<void>
+    /** Declared: reset the lane to its manifest default (DELETE /stage-overrides). */
+    onResetOverride: (stageKey: string) => Promise<void>
+    /** Custom: update the stage via its own CRUD (PUT /custom-stages/:id). */
+    onUpdateCustom: (
+        id: CustomStage['id'],
+        patch: Partial<CustomStage>,
+    ) => Promise<void>
+    /** Custom: hand off to the existing delete (reassign) flow. */
+    onDeleteCustom: (stage: CustomStage) => void
+}
+
+/**
+ * The gear (⚙) dialog. Renames, recolors and attaches extra CONDITIONS to a
+ * lane. One UI, two backends: a DECLARED lane persists through `/stage-overrides`
+ * (with a "Restablecer etapa" that drops the override); a CUSTOM real stage
+ * persists through its own `/custom-stages` CRUD (and deletes via that flow). The
+ * conditions narrow which cards the lane shows/counts but never stop it being a
+ * drop target — dropping a card only sets the stage value.
+ */
+export function StageConfigDialog({
+    open,
+    onOpenChange,
+    columns,
+    target,
+    onSaveOverride,
+    onResetOverride,
+    onUpdateCustom,
+    onDeleteCustom,
+}: StageConfigDialogProps) {
+    const { t } = useTranslation()
+    const isDark =
+        typeof document !== 'undefined' &&
+        document.documentElement.classList.contains('dark')
+    const fieldChoices = useMemo(
+        () => customStageFilterFields(columns),
+        [columns],
+    )
+
+    const [label, setLabel] = useState('')
+    const [color, setColor] = useState<string>(CUSTOM_STAGE_COLORS[0])
+    const [filters, setFilters] = useState<CustomStageFilter[]>([])
+    const [saving, setSaving] = useState(false)
+    const [resetting, setResetting] = useState(false)
+    // Two-step reset: the first click reveals a confirm panel listing exactly
+    // what reverts (the manifest original), the second actually drops the override.
+    const [confirmingReset, setConfirmingReset] = useState(false)
+
+    // Re-seed the WHOLE form from the lane's current (already-override-applied)
+    // metadata each time the dialog opens — the user always sees the live state,
+    // never a blank form. Label, color and every extra condition pre-fill editable.
+    useEffect(() => {
+        if (!open || !target) return
+        setLabel(target.label)
+        setColor(target.color || CUSTOM_STAGE_COLORS[0])
+        setFilters(target.filters?.map((f) => ({ ...f })) ?? [])
+        setConfirmingReset(false)
+    }, [open, target])
+
+    if (!target) return null
+
+    const valid = label.trim().length > 0
+    // Only complete conditions are persisted; empty rows are dropped.
+    const cleanFilters = () =>
+        filters.filter((f) => f.field && String(f.value).trim() !== '')
+    // The conditions that make up the lane's EFFECTIVE query, for the chip row:
+    // the immovable stage scope first, then each extra (removable) condition.
+    const chipFilters = filters.filter(
+        (f) => f.field && String(f.value).trim() !== '',
+    )
+
+    const removeFilterAt = (i: number) =>
+        setFilters((prev) => prev.filter((_, idx) => idx !== i))
+
+    const submit = async () => {
+        if (!valid || saving) return
+        setSaving(true)
+        try {
+            if (target.kind === 'declared') {
+                await onSaveOverride(target.stageKey, {
+                    label: label.trim(),
+                    color,
+                    filters: cleanFilters(),
+                })
+            } else if (target.id != null) {
+                await onUpdateCustom(target.id, {
+                    label: label.trim(),
+                    color,
+                    filters: cleanFilters(),
+                })
+            }
+            toast.success(
+                t('dynamic.stage_config.saved', {
+                    defaultValue: 'Etapa configurada',
+                }),
+            )
+            onOpenChange(false)
+        } catch {
+            // toast already surfaced by the caller's hook; keep the draft open.
+        } finally {
+            setSaving(false)
+        }
+    }
+
+    const reset = async () => {
+        if (resetting) return
+        setResetting(true)
+        try {
+            await onResetOverride(target.stageKey)
+            toast.success(
+                t('dynamic.stage_config.reset_done', {
+                    defaultValue: 'Etapa restablecida',
+                }),
+            )
+            onOpenChange(false)
+        } catch {
+            toast.error(
+                t('dynamic.stage_config.reset_error', {
+                    defaultValue: 'No se pudo restablecer la etapa',
+                }),
+            )
+        } finally {
+            setResetting(false)
+        }
+    }
+
+    const headerDot = generateBadgeStyles(
+        color || optionColor(target.stageKey),
+        { isDark },
+    )
+    // A one-line, human summary of the manifest original (for the reset confirm).
+    const original = target.original
+    const originalConditions =
+        original?.filters && original.filters.length > 0
+            ? original.filters
+                  .map(
+                      (f) =>
+                          `${f.field} ${stageFilterOpSymbol(f.op)} ${f.value}`,
+                  )
+                  .join(', ')
+            : t('dynamic.stage_config.original_no_conditions', {
+                  defaultValue: 'sin condiciones',
+              })
+
+    return (
+        <Dialog open={open} onOpenChange={onOpenChange}>
+            <DialogContent className="sm:max-w-lg">
+                <DialogHeader>
+                    <DialogTitle className="flex items-center gap-2">
+                        <span
+                            className="inline-block size-3 shrink-0 rounded-full"
+                            style={{
+                                backgroundColor:
+                                    headerDot.backgroundColor ||
+                                    (headerDot as any).background,
+                            }}
+                            aria-hidden
+                        />
+                        {t('dynamic.stage_config.title', {
+                            defaultValue: 'Configurar etapa',
+                        })}
+                        <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-[10px] font-normal text-muted-foreground">
+                            {target.stageKey}
+                        </code>
+                        {target.kind === 'declared' && target.overridden && (
+                            <Badge
+                                variant="secondary"
+                                className="ml-auto text-[10px] font-medium"
+                                data-testid="stage-config-personalizada"
+                            >
+                                {t('dynamic.stage_config.customized', {
+                                    defaultValue: 'Personalizada',
+                                })}
+                            </Badge>
+                        )}
+                    </DialogTitle>
+                    <DialogDescription>
+                        {t('dynamic.stage_config.description', {
+                            defaultValue:
+                                'Renombra la columna, cambia su color y agrega condiciones para acotar qué tarjetas muestra y cuenta.',
+                        })}
+                    </DialogDescription>
+                </DialogHeader>
+
+                <div className="flex flex-col gap-4">
+                    {/* "Condiciones actuales" — the lane's EFFECTIVE query as chips.
+                        The base "Etapa = <label>" chip is always present, locked and
+                        dimmed (it's the stage scope, never removable); the terminal
+                        chip appears for a final stage; each extra condition is an
+                        editable/removable chip mirroring the builder below. */}
+                    <div className="flex flex-col gap-1.5">
+                        <Label className="text-xs text-muted-foreground">
+                            {t('dynamic.stage_config.current_conditions_label', {
+                                defaultValue: 'Condiciones actuales',
+                            })}
+                        </Label>
+                        <div
+                            className="flex flex-wrap items-center gap-1.5"
+                            data-testid="stage-config-current-conditions"
+                        >
+                            <Badge
+                                variant="outline"
+                                className="cursor-default gap-1 border-dashed text-[11px] font-normal text-muted-foreground opacity-80"
+                                title={t('dynamic.stage_config.base_chip_hint', {
+                                    defaultValue:
+                                        'Alcance base de la etapa: no se puede quitar.',
+                                })}
+                                data-testid="stage-config-base-chip"
+                            >
+                                <Lock className="h-3 w-3" />
+                                {t('dynamic.stage_config.base_chip', {
+                                    defaultValue: 'Etapa = {{label}}',
+                                    label: label || target.label,
+                                })}
+                            </Badge>
+                            {target.isFinal && (
+                                <Badge
+                                    variant="outline"
+                                    className="cursor-default gap-1 text-[11px] font-normal text-muted-foreground"
+                                    title={t('dynamic.stage_config.final_chip_hint', {
+                                        defaultValue:
+                                            'Etapa terminal: al mover una tarjeta aquí se marca como cerrada (p. ej. en GitHub cierra el issue).',
+                                    })}
+                                    data-testid="stage-config-final-chip"
+                                >
+                                    <Flag className="h-3 w-3" />
+                                    {t('dynamic.stage_config.final_chip', {
+                                        defaultValue: 'Etapa final',
+                                    })}
+                                </Badge>
+                            )}
+                            {chipFilters.map((f) => {
+                                // Chip index maps back to its position in `filters`.
+                                const i = filters.indexOf(f)
+                                return (
+                                    <Badge
+                                        key={i}
+                                        variant="secondary"
+                                        className="gap-1 pr-1 text-[11px] font-normal"
+                                        data-testid={`stage-config-filter-chip-${i}`}
+                                    >
+                                        <span className="font-mono">{f.field}</span>
+                                        <span className="opacity-70">
+                                            {stageFilterOpSymbol(f.op)}
+                                        </span>
+                                        <span>{f.value}</span>
+                                        <button
+                                            type="button"
+                                            onClick={() => removeFilterAt(i)}
+                                            className="ml-0.5 rounded p-0.5 hover:bg-background/60"
+                                            aria-label={t(
+                                                'dynamic.stage_config.remove_chip',
+                                                { defaultValue: 'Quitar condición' },
+                                            )}
+                                            data-testid={`stage-config-filter-chip-remove-${i}`}
+                                        >
+                                            <X className="h-2.5 w-2.5" />
+                                        </button>
+                                    </Badge>
+                                )
+                            })}
+                        </div>
+                    </div>
+
+                    <div className="border-t" />
+
+                    {/* Name */}
+                    <div className="flex flex-col gap-1.5">
+                        <Label className="text-xs">
+                            {t('dynamic.stage_config.name_label', {
+                                defaultValue: 'Nombre',
+                            })}
+                        </Label>
+                        <Input
+                            value={label}
+                            onChange={(e) => setLabel(e.target.value)}
+                            placeholder={t('dynamic.stage_config.name_placeholder', {
+                                defaultValue: 'Nombre de la etapa',
+                            })}
+                            data-testid="stage-config-name"
+                            autoFocus
+                        />
+                    </div>
+
+                    {/* Color palette */}
+                    <div className="flex flex-col gap-1.5">
+                        <Label className="text-xs">
+                            {t('dynamic.stage_config.color_label', {
+                                defaultValue: 'Color',
+                            })}
+                        </Label>
+                        <div className="flex flex-wrap gap-1.5" data-testid="stage-config-colors">
+                            {CUSTOM_STAGE_COLORS.map((c) => {
+                                const style = generateBadgeStyles(c, { isDark })
+                                const selected = c === color
+                                return (
+                                    <button
+                                        key={c}
+                                        type="button"
+                                        onClick={() => setColor(c)}
+                                        className={`size-6 rounded-full border-2 transition-transform hover:scale-110 ${
+                                            selected
+                                                ? 'border-foreground'
+                                                : 'border-transparent'
+                                        }`}
+                                        style={{
+                                            backgroundColor:
+                                                style.backgroundColor ||
+                                                (style as any).background,
+                                        }}
+                                        aria-label={c}
+                                        aria-pressed={selected}
+                                        data-testid={`stage-config-color-${c}`}
+                                    />
+                                )
+                            })}
+                        </div>
+                    </div>
+
+                    {/* Conditions — the editable builder (pre-filled from the lane) */}
+                    <StageConditionBuilder
+                        filters={filters}
+                        onChange={setFilters}
+                        fieldChoices={fieldChoices}
+                        label={t('dynamic.stage_config.conditions_label', {
+                            defaultValue: 'Condiciones (opcional)',
+                        })}
+                    />
+                    {filters.length === 0 && (
+                        <Button
+                            variant="ghost"
+                            size="sm"
+                            className="-mt-2 h-7 justify-start gap-1 text-xs"
+                            onClick={() =>
+                                setFilters([
+                                    emptyCustomStageFilter(fieldChoices[0]?.key ?? ''),
+                                ])
+                            }
+                            data-testid="stage-config-add-first-condition"
+                        >
+                            <Plus className="h-3.5 w-3.5" />
+                            {t('dynamic.stage_config.add_condition', {
+                                defaultValue: 'Agregar condición',
+                            })}
+                        </Button>
+                    )}
+
+                    {/* Reset confirm — spells out exactly what reverts to the
+                        manifest original before dropping the override. */}
+                    {confirmingReset && (
+                        <div
+                            className="flex flex-col gap-2 rounded-md border border-dashed bg-muted/30 p-3 text-xs"
+                            data-testid="stage-config-reset-confirm-panel"
+                        >
+                            <p className="font-medium">
+                                {t('dynamic.stage_config.reset_confirm_title', {
+                                    defaultValue:
+                                        'Se restablecerá la etapa a su versión original:',
+                                })}
+                            </p>
+                            <ul className="list-inside list-disc text-muted-foreground">
+                                <li>
+                                    {t('dynamic.stage_config.reset_confirm_label', {
+                                        defaultValue: 'Nombre: {{label}}',
+                                        label: original?.label ?? target.stageKey,
+                                    })}
+                                </li>
+                                <li>
+                                    {t('dynamic.stage_config.reset_confirm_color', {
+                                        defaultValue: 'Color: {{color}}',
+                                        color: original?.color ?? '—',
+                                    })}
+                                </li>
+                                <li>
+                                    {t('dynamic.stage_config.reset_confirm_conditions', {
+                                        defaultValue: 'Condiciones: {{list}}',
+                                        list: originalConditions,
+                                    })}
+                                </li>
+                            </ul>
+                            <div className="flex justify-end gap-2 pt-1">
+                                <Button
+                                    variant="outline"
+                                    size="sm"
+                                    className="h-7 text-xs"
+                                    onClick={() => setConfirmingReset(false)}
+                                    disabled={resetting}
+                                >
+                                    {t('dynamic.stage_config.cancel', {
+                                        defaultValue: 'Cancelar',
+                                    })}
+                                </Button>
+                                <Button
+                                    variant="destructive"
+                                    size="sm"
+                                    className="h-7 text-xs"
+                                    onClick={() => void reset()}
+                                    disabled={resetting}
+                                    data-testid="stage-config-reset-confirm"
+                                >
+                                    {t('dynamic.stage_config.reset_confirm', {
+                                        defaultValue: 'Restablecer al original',
+                                    })}
+                                </Button>
+                            </div>
+                        </div>
+                    )}
+                </div>
+
+                <DialogFooter className="sm:justify-between">
+                    {/* Reset (declared+overridden) / delete (custom) on the left. */}
+                    <div>
+                        {target.kind === 'declared' && target.overridden && (
+                            <Button
+                                variant="ghost"
+                                className="gap-1.5 text-muted-foreground"
+                                onClick={() => setConfirmingReset(true)}
+                                disabled={saving || resetting || confirmingReset}
+                                data-testid="stage-config-reset"
+                            >
+                                <RotateCcw className="h-4 w-4" />
+                                {t('dynamic.stage_config.reset', {
+                                    defaultValue: 'Restablecer al original',
+                                })}
+                            </Button>
+                        )}
+                        {target.kind === 'custom' && target.customStage && (
+                            <Button
+                                variant="ghost"
+                                className="gap-1.5 text-destructive hover:text-destructive"
+                                onClick={() => {
+                                    onOpenChange(false)
+                                    onDeleteCustom(target.customStage!)
+                                }}
+                                disabled={saving}
+                                data-testid="stage-config-delete"
+                            >
+                                <Trash2 className="h-4 w-4" />
+                                {t('dynamic.stage_config.delete', {
+                                    defaultValue: 'Eliminar etapa',
+                                })}
+                            </Button>
+                        )}
+                    </div>
+                    <div className="flex gap-2">
+                        <Button
+                            variant="outline"
+                            onClick={() => onOpenChange(false)}
+                            disabled={saving || resetting}
+                        >
+                            {t('dynamic.stage_config.cancel', {
+                                defaultValue: 'Cancelar',
+                            })}
+                        </Button>
+                        <Button
+                            onClick={() => void submit()}
+                            disabled={!valid || saving || resetting}
+                            data-testid="stage-config-save"
+                        >
+                            {t('dynamic.stage_config.save', {
+                                defaultValue: 'Guardar',
+                            })}
+                        </Button>
+                    </div>
+                </DialogFooter>
+            </DialogContent>
+        </Dialog>
+    )
+}
+
 // ---------------------------------------------------------------------------
 // Smart (virtual) lane — fetches its own records from the model's list
 // ---------------------------------------------------------------------------
@@ -987,6 +1594,18 @@ export interface SmartLaneProps {
     refreshTrigger?: any
     onEdit: (stage: CustomStage) => void
     onDelete: (stage: CustomStage) => void
+    /**
+     * Optional drag-and-drop wiring (from the kanban's sortable wrapper) so a
+     * smart lane can be reordered by its header like a real stage. Absent → the
+     * lane is static.
+     */
+    dnd?: {
+        setNodeRef: (el: HTMLElement | null) => void
+        style?: React.CSSProperties
+        isDragging?: boolean
+        handleRef?: (el: HTMLElement | null) => void
+        handleProps?: Record<string, any>
+    }
 }
 
 /**
@@ -1006,6 +1625,7 @@ export function SmartLane({
     refreshTrigger,
     onEdit,
     onDelete,
+    dnd,
 }: SmartLaneProps) {
     const { t } = useTranslation()
     const api = useApi()
@@ -1054,12 +1674,26 @@ export function SmartLane({
 
     return (
         <div
-            className="flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border border-dashed bg-muted/20"
+            ref={dnd?.setNodeRef}
+            className="group/lane flex min-w-[280px] max-w-[420px] flex-1 shrink-0 flex-col rounded-xl border border-dashed bg-muted/20"
+            style={{ opacity: dnd?.isDragging ? 0.6 : 1, ...dnd?.style }}
             data-smart-stage={stage.key}
             data-testid={`smart-lane-${stage.key}`}
         >
             <div className="flex items-center justify-between gap-2 px-3 py-2.5">
-                <div className="flex min-w-0 items-center gap-2">
+                <div
+                    ref={dnd ? dnd.handleRef : undefined}
+                    {...(dnd ? dnd.handleProps : {})}
+                    className={`flex min-w-0 items-center gap-1.5 ${
+                        dnd ? 'cursor-grab active:cursor-grabbing' : ''
+                    }`}
+                >
+                    {dnd && (
+                        <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
+                        />
+                    )}
                     <Badge
                         variant="outline"
                         className="border-0 text-xs font-semibold"