Agregar Estado

Añade una nueva etapa o estado a un workflow personalizado existente.

Pasos

1. En la tarjeta del workflow, clic en ”+ Agregar Estado” — se abre el diálogo de creación de estado.
2. Completa los campos del formulario (ver tabla abajo).
3. Clic en “Agregar” — el estado se añade al final del flujo.

Campos del formulario

Campo	Obligatorio	Descripción	Ejemplo
Nombre del Estado	Sí	Texto visible del estado	En Revisión
Clave (ID único)	Sí	Identificador en minúsculas con guiones bajos	en_revision
Color	Sí	Hexadecimal del color del badge	#3b82f6

Nota: El campo “Clave” se normaliza automáticamente a minúsculas con guiones bajos al escribir.

Selección de color

El formulario incluye:

• Selector visual (color picker) — elige el color visualmente
• Campo de texto — ingresa el código hexadecimal directamente (ej: #10b981)

Colores sugeridos:

Color	Hexadecimal	Uso sugerido
Azul	#3b82f6	En progreso, activo
Verde	#10b981	Completado, aprobado
Amarillo	#f59e0b	Pendiente, en espera
Rojo	#ef4444	Bloqueado, rechazado
Gris	#6b7280	Borrador, sin iniciar

Cómo sé que lo hice bien

• El estado aparece al final de la lista de estados del workflow.
• Badge con el color y nombre especificado visible.
• Toast de confirmación: “Estado agregado”.

Errores comunes

Mensaje	Causa	Solución
Botón “Agregar” deshabilitado	Campos obligatorios vacíos	Completa “Nombre del Estado” y “Clave"
"Error al agregar estado”	Clave duplicada en el workflow	Usa una clave única diferente

Detalles técnicos — Agregar Estado

Mutación de creación de estado

Función: addStatus en WorkflowManager.tsx

const addStatus = useMutation({
  mutationFn: async (status: typeof statusForm & { workflow_id: string; sort_order: number }) => {
    const { error } = await supabase
      .from("workflow_statuses")
      .insert({
        workflow_id: status.workflow_id,
        status_name: status.status_name,
        status_key: status.status_key,
        status_color: status.status_color,
        sort_order: status.sort_order,
      });

    if (error) throw error;
  },
  onSuccess: () => {
    toast({ title: "Estado agregado" });
    queryClient.invalidateQueries({ queryKey: ["workflows"] });
    setStatusDialogOpen(false);
    resetStatusForm();
  },
});

Cálculo de sort_order:

const workflow = workflows.find(w => w.id === selectedWorkflowId);
const nextSortOrder = (workflow?.statuses?.length || 0);

Normalización de status_key:

onChange={(e) => setStatusForm(prev => ({
  ...prev,
  status_key: e.target.value.toLowerCase().replace(/\s+/g, '_')
}))}

Esquema de validación

Validaciones de base de datos:

• status_name NOT NULL
• status_key NOT NULL, UNIQUE por workflow
• status_color DEFAULT ‘#6b7280’
• sort_order DEFAULT 0
• workflow_id FK a workflow_templates

---