create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/(dashboard)/automatisation/_components/workflow-editor.tsx

@@ -2,8 +2,20 @@
 
 import { useEffect, useRef, useState } from 'react';
 import { useRouter } from 'next/navigation';
-import { Plus, Trash2, Mail, MessageSquare, Tag, CheckSquare, Clock } from 'lucide-react';
+import {
+  Plus,
+  Trash2,
+  Mail,
+  MessageSquare,
+  Tag,
+  CheckSquare,
+  Clock,
+  UserPlus,
+  StickyNote,
+  Bell,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Status {
   id: string;
@@ -17,9 +29,35 @@ interface Template {
   type: 'EMAIL' | 'SMS' | 'NOTE';
 }
 
+interface UserOption {
+  id: string;
+  name: string;
+  role: string;
+}
+
+type ActionType =
+  | 'SEND_EMAIL'
+  | 'SEND_SMS'
+  | 'CHANGE_STATUS'
+  | 'CREATE_TASK'
+  | 'WAIT'
+  | 'ASSIGN_CONTACT'
+  | 'ADD_NOTE'
+  | 'NOTIFY_USER';
+
+type TriggerType =
+  | 'CONTACT_CREATED'
+  | 'STATUS_CHANGED'
+  | 'TIME_BASED'
+  | 'MANUAL'
+  | 'TASK_COMPLETED'
+  | 'TRANSACTION_CREATED'
+  | 'TRANSACTION_STATUS_CHANGED'
+  | 'CONTACT_ASSIGNMENT_CHANGED';
+
 export interface WorkflowAction {
   id?: string;
-  actionType: 'SEND_EMAIL' | 'SEND_SMS' | 'CHANGE_STATUS' | 'CREATE_TASK' | 'WAIT';
+  actionType: ActionType;
   order: number;
   delayDays: number;
   delayHours: number;
@@ -28,8 +66,17 @@ export interface WorkflowAction {
   newStatusId?: string | null;
   taskTitle?: string | null;
   taskDescription?: string | null;
+  taskType?: string | null;
+  taskPriority?: string | null;
+  taskAssignedUserId?: string | null;
+  assignCommercialId?: string | null;
+  assignTeleproId?: string | null;
+  noteContent?: string | null;
+  notifyUserId?: string | null;
   conditionOperator?: 'EQUALS' | 'NOT_EQUALS' | null;
   conditionStatusId?: string | null;
+  conditionOrigin?: string | null;
+  conditionHasCompany?: boolean | null;
 }
 
 export interface WorkflowEditorInitialData {
@@ -37,11 +84,15 @@ export interface WorkflowEditorInitialData {
   name: string;
   description: string | null;
   active: boolean;
-  triggerType: 'CONTACT_CREATED' | 'STATUS_CHANGED' | 'TIME_BASED' | 'MANUAL';
+  triggerType: TriggerType;
   triggerFromStatusId: string | null;
   triggerToStatusId: string | null;
   triggerTimeDays: number | null;
   triggerTimeHours: number | null;
+  triggerTimeReference: string | null;
+  triggerTaskType: string | null;
+  triggerTransactionFromStatus: string | null;
+  triggerTransactionToStatus: string | null;
   actions: WorkflowAction[];
 }
 
@@ -49,8 +100,48 @@ interface WorkflowEditorProps {
   workflowId?: string;
 }
 
+const TRANSACTION_STATUSES = [
+  { value: 'DRAFT', label: 'Brouillon' },
+  { value: 'PENDING_ID_VERIFICATION', label: 'Vérification identité' },
+  { value: 'ID_VERIFIED', label: 'Identité vérifiée' },
+  { value: 'ITEMS_ENTERED', label: 'Articles saisis' },
+  { value: 'PENDING_SIGNATURE', label: 'En attente de signature' },
+  { value: 'SIGNED', label: 'Signée' },
+  { value: 'LOCKED', label: 'Verrouillée' },
+  { value: 'PAYMENT_PENDING', label: 'Paiement en attente' },
+  { value: 'COMPLETED', label: 'Complétée' },
+  { value: 'PENDING_RETRACTION', label: 'Rétractation en attente' },
+  { value: 'CANCELLED_RETRACTION', label: 'Rétractation annulée' },
+  { value: 'CANCELLED', label: 'Annulée' },
+];
+
+const TASK_TYPES = [
+  { value: '', label: 'Tous les types' },
+  { value: 'CALL', label: 'Appel' },
+  { value: 'MEETING', label: 'Rendez-vous' },
+  { value: 'EMAIL', label: 'Email' },
+  { value: 'VIDEO_CONFERENCE', label: 'Visioconférence' },
+  { value: 'PHYSICAL_APPOINTMENT', label: 'RDV physique' },
+  { value: 'OTHER', label: 'Autre' },
+  { value: 'TASK', label: 'Tâche' },
+];
+
+const TASK_PRIORITIES = [
+  { value: 'LOW', label: 'Basse' },
+  { value: 'MEDIUM', label: 'Moyenne' },
+  { value: 'HIGH', label: 'Haute' },
+  { value: 'URGENT', label: 'Urgente' },
+];
+
+const TIME_REFERENCES = [
+  { value: 'CONTACT_CREATED_DATE', label: 'Création du contact' },
+  { value: 'LAST_STATUS_CHANGE', label: 'Dernier changement de statut' },
+  { value: 'LAST_INTERACTION', label: 'Dernière interaction' },
+];
+
 export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
   const router = useRouter();
+  const toast = useAppToast();
 
   const [loading, setLoading] = useState<boolean>(!!workflowId);
   const [saving, setSaving] = useState(false);
@@ -59,6 +150,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
 
   const [statuses, setStatuses] = useState<Status[]>([]);
   const [emailTemplates, setEmailTemplates] = useState<Template[]>([]);
+  const [users, setUsers] = useState<UserOption[]>([]);
 
   const [formData, setFormData] = useState<WorkflowEditorInitialData>({
     id: undefined,
@@ -70,6 +162,10 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     triggerToStatusId: null,
     triggerTimeDays: null,
     triggerTimeHours: null,
+    triggerTimeReference: null,
+    triggerTaskType: null,
+    triggerTransactionFromStatus: null,
+    triggerTransactionToStatus: null,
     actions: [],
   });
 
@@ -80,12 +176,11 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
   useEffect(() => {
     fetchStatuses();
     fetchEmailTemplates();
+    fetchUsers();
   }, []);
 
   useEffect(() => {
-    if (!workflowId) {
-      return;
-    }
+    if (!workflowId) return;
 
     const fetchWorkflow = async () => {
       try {
@@ -107,6 +202,10 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
           triggerToStatusId: data.triggerToStatusId,
           triggerTimeDays: data.triggerTimeDays,
           triggerTimeHours: data.triggerTimeHours,
+          triggerTimeReference: data.triggerTimeReference,
+          triggerTaskType: data.triggerTaskType,
+          triggerTransactionFromStatus: data.triggerTransactionFromStatus,
+          triggerTransactionToStatus: data.triggerTransactionToStatus,
           actions: data.actions,
         });
         setActions(data.actions || []);
@@ -120,7 +219,6 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     fetchWorkflow();
   }, [workflowId]);
 
-  // Fermer le menu d'actions en cliquant en dehors
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (actionMenuRef.current && !actionMenuRef.current.contains(event.target as Node)) {
@@ -137,13 +235,28 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     };
   }, [showActionMenu]);
 
+  useEffect(() => {
+    if (!error) return;
+    toast.error(error);
+    setError('');
+  }, [error, toast]);
+
+  // Workflow non trouvé → toast + redirection (géré par l'effet error ci-dessus)
+  useEffect(() => {
+    if (!workflowId || loading) return;
+    if (error) router.replace('/automatisation');
+  }, [workflowId, loading, error, router]);
+
+  useEffect(() => {
+    if (!success) return;
+    toast.success(success);
+    setSuccess('');
+  }, [success, toast]);
+
   const fetchStatuses = async () => {
     try {
       const response = await fetch('/api/settings/statuses');
-      if (response.ok) {
-        const data = await response.json();
-        setStatuses(data);
-      }
+      if (response.ok) setStatuses(await response.json());
     } catch (err) {
       console.error('Erreur lors du chargement des statuts:', err);
     }
@@ -152,12 +265,21 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
   const fetchEmailTemplates = async () => {
     try {
       const response = await fetch('/api/templates?type=EMAIL');
+      if (response.ok) setEmailTemplates(await response.json());
+    } catch (err) {
+      console.error('Erreur lors du chargement des templates:', err);
+    }
+  };
+
+  const fetchUsers = async () => {
+    try {
+      const response = await fetch('/api/users');
       if (response.ok) {
         const data = await response.json();
-        setEmailTemplates(data);
+        setUsers(data.map((u: any) => ({ id: u.id, name: u.name, role: u.role })));
       }
     } catch (err) {
-      console.error('Erreur lors du chargement des templates:', err);
+      console.error('Erreur lors du chargement des utilisateurs:', err);
     }
   };
 
@@ -189,6 +311,10 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
           triggerToStatusId: formData.triggerToStatusId || null,
           triggerTimeDays: formData.triggerTimeDays || null,
           triggerTimeHours: formData.triggerTimeHours || null,
+          triggerTimeReference: formData.triggerTimeReference || null,
+          triggerTaskType: formData.triggerTaskType || null,
+          triggerTransactionFromStatus: formData.triggerTransactionFromStatus || null,
+          triggerTransactionToStatus: formData.triggerTransactionToStatus || null,
           actions: actions.map((action, index) => ({
             ...action,
             order: index,
@@ -213,7 +339,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     }
   };
 
-  const addAction = (actionType: WorkflowAction['actionType']) => {
+  const addAction = (actionType: ActionType) => {
     const newAction: WorkflowAction = {
       actionType,
       order: actions.length,
@@ -221,6 +347,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
       delayHours: 0,
     };
     setActions([...actions, newAction]);
+    setShowActionMenu(false);
   };
 
   const removeAction = (index: number) => {
@@ -233,24 +360,30 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
     setActions(newActions);
   };
 
-  const getActionIcon = (actionType: WorkflowAction['actionType']) => {
+  const getActionIcon = (actionType: ActionType) => {
     switch (actionType) {
       case 'SEND_EMAIL':
-        return <Mail className="h-5 w-5 text-indigo-600" />;
+        return <Mail className="h-5 w-5 text-blue-600" />;
       case 'SEND_SMS':
-        return <MessageSquare className="h-5 w-5 text-indigo-600" />;
+        return <MessageSquare className="h-5 w-5 text-blue-600" />;
       case 'CHANGE_STATUS':
-        return <Tag className="h-5 w-5 text-indigo-600" />;
+        return <Tag className="h-5 w-5 text-blue-600" />;
       case 'CREATE_TASK':
-        return <CheckSquare className="h-5 w-5 text-indigo-600" />;
+        return <CheckSquare className="h-5 w-5 text-blue-600" />;
       case 'WAIT':
-        return <Clock className="h-5 w-5 text-indigo-600" />;
+        return <Clock className="h-5 w-5 text-blue-600" />;
+      case 'ASSIGN_CONTACT':
+        return <UserPlus className="h-5 w-5 text-blue-600" />;
+      case 'ADD_NOTE':
+        return <StickyNote className="h-5 w-5 text-blue-600" />;
+      case 'NOTIFY_USER':
+        return <Bell className="h-5 w-5 text-blue-600" />;
       default:
         return null;
     }
   };
 
-  const getActionLabel = (actionType: WorkflowAction['actionType']) => {
+  const getActionLabel = (actionType: ActionType) => {
     switch (actionType) {
       case 'SEND_EMAIL':
         return 'Envoyer un email';
@@ -262,12 +395,18 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
         return 'Créer une tâche';
       case 'WAIT':
         return 'Attendre';
+      case 'ASSIGN_CONTACT':
+        return 'Assigner le contact';
+      case 'ADD_NOTE':
+        return 'Ajouter une note';
+      case 'NOTIFY_USER':
+        return 'Notifier un utilisateur';
       default:
         return '';
     }
   };
 
-  const getTriggerLabel = (triggerType: WorkflowEditorInitialData['triggerType']) => {
+  const getTriggerLabel = (triggerType: TriggerType) => {
     switch (triggerType) {
       case 'CONTACT_CREATED':
         return 'Nouveau contact créé';
@@ -277,35 +416,362 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
         return 'Basé sur le temps';
       case 'MANUAL':
         return 'Déclencheur manuel';
+      case 'TASK_COMPLETED':
+        return 'Tâche complétée';
+      case 'TRANSACTION_CREATED':
+        return 'Transaction créée';
+      case 'TRANSACTION_STATUS_CHANGED':
+        return 'Changement de statut de transaction';
+      case 'CONTACT_ASSIGNMENT_CHANGED':
+        return "Changement d'assignation";
       default:
         return '';
     }
   };
 
+  const selectClass =
+    'mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none';
+  const selectClassSm =
+    'mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none';
+  const inputClassSm = selectClassSm;
+
+  const renderActionConfig = (action: WorkflowAction, index: number) => {
+    switch (action.actionType) {
+      case 'SEND_EMAIL':
+        return (
+          <div className="mt-4">
+            <label className="block text-xs font-medium text-gray-700">Template email</label>
+            <select
+              value={action.emailTemplateId || ''}
+              onChange={(e) => updateAction(index, { emailTemplateId: e.target.value || null })}
+              className={selectClass}
+            >
+              <option value="">Sélectionner un template</option>
+              {emailTemplates.map((t) => (
+                <option key={t.id} value={t.id}>
+                  {t.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+
+      case 'SEND_SMS':
+        return (
+          <div className="mt-4">
+            <label className="block text-xs font-medium text-gray-700">Message SMS</label>
+            <textarea
+              value={action.smsMessage || ''}
+              onChange={(e) => updateAction(index, { smsMessage: e.target.value })}
+              rows={3}
+              className={selectClass}
+              placeholder="Votre message SMS... (variables: {firstName}, {lastName}, {phone})"
+            />
+          </div>
+        );
+
+      case 'CHANGE_STATUS':
+        return (
+          <div className="mt-4">
+            <label className="block text-xs font-medium text-gray-700">Nouveau statut</label>
+            <select
+              value={action.newStatusId || ''}
+              onChange={(e) => updateAction(index, { newStatusId: e.target.value || null })}
+              className={selectClass}
+            >
+              <option value="">Sélectionner un statut</option>
+              {statuses.map((s) => (
+                <option key={s.id} value={s.id}>
+                  {s.name}
+                </option>
+              ))}
+            </select>
+          </div>
+        );
+
+      case 'CREATE_TASK':
+        return (
+          <div className="mt-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Titre de la tâche</label>
+              <input
+                type="text"
+                value={action.taskTitle || ''}
+                onChange={(e) => updateAction(index, { taskTitle: e.target.value })}
+                className={selectClass}
+                placeholder="Titre de la tâche..."
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Description</label>
+              <textarea
+                value={action.taskDescription || ''}
+                onChange={(e) => updateAction(index, { taskDescription: e.target.value })}
+                rows={2}
+                className={selectClass}
+                placeholder="Description de la tâche..."
+              />
+            </div>
+            <div className="grid grid-cols-3 gap-2">
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Type</label>
+                <select
+                  value={action.taskType || 'OTHER'}
+                  onChange={(e) => updateAction(index, { taskType: e.target.value })}
+                  className={selectClass}
+                >
+                  {TASK_TYPES.filter((t) => t.value).map((t) => (
+                    <option key={t.value} value={t.value}>
+                      {t.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Priorité</label>
+                <select
+                  value={action.taskPriority || 'MEDIUM'}
+                  onChange={(e) => updateAction(index, { taskPriority: e.target.value })}
+                  className={selectClass}
+                >
+                  {TASK_PRIORITIES.map((p) => (
+                    <option key={p.value} value={p.value}>
+                      {p.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+              <div>
+                <label className="block text-xs font-medium text-gray-700">Assigné à</label>
+                <select
+                  value={action.taskAssignedUserId || ''}
+                  onChange={(e) =>
+                    updateAction(index, { taskAssignedUserId: e.target.value || null })
+                  }
+                  className={selectClass}
+                >
+                  <option value="">Propriétaire du workflow</option>
+                  {users.map((u) => (
+                    <option key={u.id} value={u.id}>
+                      {u.name}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            </div>
+          </div>
+        );
+
+      case 'ASSIGN_CONTACT':
+        return (
+          <div className="mt-4 grid grid-cols-2 gap-3">
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Commercial</label>
+              <select
+                value={action.assignCommercialId || ''}
+                onChange={(e) =>
+                  updateAction(index, { assignCommercialId: e.target.value || null })
+                }
+                className={selectClass}
+              >
+                <option value="">Ne pas modifier</option>
+                {users.map((u) => (
+                  <option key={u.id} value={u.id}>
+                    {u.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Télépro</label>
+              <select
+                value={action.assignTeleproId || ''}
+                onChange={(e) => updateAction(index, { assignTeleproId: e.target.value || null })}
+                className={selectClass}
+              >
+                <option value="">Ne pas modifier</option>
+                {users.map((u) => (
+                  <option key={u.id} value={u.id}>
+                    {u.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+          </div>
+        );
+
+      case 'ADD_NOTE':
+        return (
+          <div className="mt-4">
+            <label className="block text-xs font-medium text-gray-700">Contenu de la note</label>
+            <textarea
+              value={action.noteContent || ''}
+              onChange={(e) => updateAction(index, { noteContent: e.target.value })}
+              rows={3}
+              className={selectClass}
+              placeholder="Contenu de la note... (variables: {{firstName}}, {{lastName}}, etc.)"
+            />
+          </div>
+        );
+
+      case 'NOTIFY_USER':
+        return (
+          <div className="mt-4 space-y-3">
+            <div>
+              <label className="block text-xs font-medium text-gray-700">
+                Utilisateur à notifier
+              </label>
+              <select
+                value={action.notifyUserId || ''}
+                onChange={(e) => updateAction(index, { notifyUserId: e.target.value || null })}
+                className={selectClass}
+              >
+                <option value="">Sélectionner un utilisateur</option>
+                {users.map((u) => (
+                  <option key={u.id} value={u.id}>
+                    {u.name}
+                  </option>
+                ))}
+              </select>
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Titre de la tâche</label>
+              <input
+                type="text"
+                value={action.taskTitle || ''}
+                onChange={(e) => updateAction(index, { taskTitle: e.target.value })}
+                className={selectClass}
+                placeholder="Ex : Relancer le contact {{firstName}} {{lastName}}"
+              />
+            </div>
+            <div>
+              <label className="block text-xs font-medium text-gray-700">Description</label>
+              <textarea
+                value={action.taskDescription || ''}
+                onChange={(e) => updateAction(index, { taskDescription: e.target.value })}
+                rows={2}
+                className={selectClass}
+                placeholder="Description..."
+              />
+            </div>
+          </div>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  const renderConditions = (action: WorkflowAction, index: number) => (
+    <div className="mt-4 border-t border-dashed border-gray-200 pt-3">
+      <label className="block text-xs font-medium text-gray-700">Conditions (optionnel)</label>
+
+      {/* Condition sur le statut */}
+      <div className="mt-2 grid grid-cols-2 gap-2">
+        <select
+          value={action.conditionOperator || ''}
+          onChange={(e) =>
+            updateAction(index, {
+              conditionOperator: (e.target.value as 'EQUALS' | 'NOT_EQUALS') || null,
+            })
+          }
+          className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+        >
+          <option value="">Pas de condition statut</option>
+          <option value="EQUALS">Statut est égal à</option>
+          <option value="NOT_EQUALS">Statut n&apos;est pas égal à</option>
+        </select>
+        {action.conditionOperator && (
+          <select
+            value={action.conditionStatusId || ''}
+            onChange={(e) => updateAction(index, { conditionStatusId: e.target.value || null })}
+            className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+          >
+            <option value="">Sélectionner...</option>
+            {statuses.map((s) => (
+              <option key={s.id} value={s.id}>
+                {s.name}
+              </option>
+            ))}
+          </select>
+        )}
+      </div>
+
+      {/* Condition sur l'origine */}
+      <div className="mt-2">
+        <input
+          type="text"
+          value={action.conditionOrigin || ''}
+          onChange={(e) => updateAction(index, { conditionOrigin: e.target.value || null })}
+          className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+          placeholder="Origine du contact (laisser vide pour ignorer)"
+        />
+      </div>
+
+      {/* Condition sur la société */}
+      <div className="mt-2">
+        <select
+          value={
+            action.conditionHasCompany === true
+              ? 'true'
+              : action.conditionHasCompany === false
+                ? 'false'
+                : ''
+          }
+          onChange={(e) => {
+            const val = e.target.value;
+            updateAction(index, {
+              conditionHasCompany: val === 'true' ? true : val === 'false' ? false : null,
+            });
+          }}
+          className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+        >
+          <option value="">Société : indifférent</option>
+          <option value="true">A une société</option>
+          <option value="false">N&apos;a pas de société</option>
+        </select>
+      </div>
+    </div>
+  );
+
+  const actionMenuItems: Array<{ type: ActionType; label: string; icon: React.ReactNode }> = [
+    { type: 'SEND_EMAIL', label: 'Envoyer un email', icon: <Mail className="h-4 w-4" /> },
+    { type: 'SEND_SMS', label: 'Envoyer un SMS', icon: <MessageSquare className="h-4 w-4" /> },
+    { type: 'CHANGE_STATUS', label: 'Changer le statut', icon: <Tag className="h-4 w-4" /> },
+    { type: 'CREATE_TASK', label: 'Créer une tâche', icon: <CheckSquare className="h-4 w-4" /> },
+    {
+      type: 'ASSIGN_CONTACT',
+      label: 'Assigner le contact',
+      icon: <UserPlus className="h-4 w-4" />,
+    },
+    { type: 'ADD_NOTE', label: 'Ajouter une note', icon: <StickyNote className="h-4 w-4" /> },
+    { type: 'NOTIFY_USER', label: 'Notifier un utilisateur', icon: <Bell className="h-4 w-4" /> },
+    { type: 'WAIT', label: 'Attendre', icon: <Clock className="h-4 w-4" /> },
+  ];
+
   return (
     <form onSubmit={handleSubmit} className="h-full">
       <div className="grid gap-6 lg:grid-cols-[minmax(0,2fr)_minmax(320px,1fr)]">
         {/* Colonne centrale : flux d'actions */}
         <div className="space-y-6">
-          <div className="rounded-2xl border border-dashed border-indigo-200 bg-indigo-50/40 p-4 text-sm text-indigo-900">
+          <div className="rounded-2xl border border-dashed border-blue-200 bg-blue-50/40 p-4 text-sm text-blue-900">
             <p className="font-medium">Flux du workflow</p>
-            <p className="mt-1 text-xs text-indigo-700">
-              Visualisez l’enchaînement du déclencheur et des actions. Ajoutez des étapes pour
+            <p className="mt-1 text-xs text-blue-700">
+              Visualisez l&apos;enchaînement du déclencheur et des actions. Ajoutez des étapes pour
               construire votre automatisation.
             </p>
           </div>
 
           <div className="relative space-y-4">
-            {/* Ligne verticale */}
-            <div className="pointer-events-none absolute top-0 left-6 h-full w-px bg-linear-to-b from-indigo-300 via-gray-200 to-gray-200" />
+            <div className="pointer-events-none absolute top-0 left-6 h-full w-px bg-linear-to-b from-blue-300 via-gray-200 to-gray-200" />
 
             {/* Déclencheur */}
             <div className="relative pl-10">
-              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
-              <div className="rounded-xl border border-indigo-100 bg-white px-4 py-3 shadow-sm">
+              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-blue-500 shadow-sm" />
+              <div className="rounded-xl border border-blue-100 bg-white px-4 py-3 shadow-sm">
                 <div className="flex items-center justify-between">
                   <div>
-                    <p className="text-xs font-semibold tracking-wide text-indigo-600 uppercase">
+                    <p className="text-xs font-semibold tracking-wide text-blue-600 uppercase">
                       Déclencheur
                     </p>
                     <p className="mt-1 text-sm font-medium text-gray-900">
@@ -331,11 +797,11 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             ) : (
               actions.map((action, index) => (
                 <div key={index} className="relative pl-10">
-                  <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-500 shadow-sm" />
+                  <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-blue-500 shadow-sm" />
                   <div className="rounded-xl border border-gray-200 bg-white p-4 shadow-sm transition-shadow hover:shadow-md">
                     <div className="mb-3 flex items-center justify-between">
                       <div className="flex items-center gap-3">
-                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-50 text-xs font-semibold text-indigo-700">
+                        <div className="flex h-8 w-8 items-center justify-center rounded-full bg-blue-50 text-xs font-semibold text-blue-700">
                           {index + 1}
                         </div>
                         <div>
@@ -347,7 +813,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                           </div>
                           <p className="mt-0.5 text-xs text-gray-500">
                             Délai de {action.delayDays || 0}j {action.delayHours || 0}h après
-                            l’étape précédente
+                            l&apos;étape précédente
                           </p>
                         </div>
                       </div>
@@ -363,22 +829,20 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                     <div className="grid gap-4 md:grid-cols-2">
                       <div>
                         <label className="block text-xs font-medium text-gray-700">
-                          Type d'action
+                          Type d&apos;action
                         </label>
                         <select
                           value={action.actionType}
                           onChange={(e) =>
-                            updateAction(index, {
-                              actionType: e.target.value as WorkflowAction['actionType'],
-                            })
+                            updateAction(index, { actionType: e.target.value as ActionType })
                           }
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                          className={selectClass}
                         >
-                          <option value="SEND_EMAIL">Envoyer un email</option>
-                          <option value="SEND_SMS">Envoyer un SMS</option>
-                          <option value="CHANGE_STATUS">Changer le statut</option>
-                          <option value="CREATE_TASK">Créer une tâche</option>
-                          <option value="WAIT">Attendre</option>
+                          {actionMenuItems.map((item) => (
+                            <option key={item.type} value={item.type}>
+                              {item.label}
+                            </option>
+                          ))}
                         </select>
                       </div>
                       <div className="grid grid-cols-2 gap-2">
@@ -387,179 +851,38 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                             Délai (jours)
                           </label>
                           <input
-                            type="number"
-                            min="0"
+                            type="text"
+                            inputMode="numeric"
                             value={action.delayDays}
-                            onChange={(e) =>
-                              updateAction(index, {
-                                delayDays: parseInt(e.target.value, 10) || 0,
-                              })
-                            }
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                            onChange={(e) => {
+                              const value = e.target.value;
+                              if (value === '' || /^\d+$/.test(value)) {
+                                updateAction(index, { delayDays: parseInt(value, 10) || 0 });
+                              }
+                            }}
+                            className={selectClass}
                           />
                         </div>
                         <div>
                           <label className="block text-xs font-medium text-gray-700">Heures</label>
                           <input
-                            type="number"
-                            min="0"
+                            type="text"
+                            inputMode="numeric"
                             value={action.delayHours}
-                            onChange={(e) =>
-                              updateAction(index, {
-                                delayHours: parseInt(e.target.value, 10) || 0,
-                              })
-                            }
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                            onChange={(e) => {
+                              const value = e.target.value;
+                              if (value === '' || /^\d+$/.test(value)) {
+                                updateAction(index, { delayHours: parseInt(value, 10) || 0 });
+                              }
+                            }}
+                            className={selectClass}
                           />
                         </div>
                       </div>
                     </div>
 
-                    {/* Config spécifique */}
-                    {action.actionType === 'SEND_EMAIL' && (
-                      <div className="mt-4">
-                        <label className="block text-xs font-medium text-gray-700">
-                          Template email
-                        </label>
-                        <select
-                          value={action.emailTemplateId || ''}
-                          onChange={(e) =>
-                            updateAction(index, {
-                              emailTemplateId: e.target.value || null,
-                            })
-                          }
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                        >
-                          <option value="">Sélectionner un template</option>
-                          {emailTemplates.map((template) => (
-                            <option key={template.id} value={template.id}>
-                              {template.name}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    )}
-
-                    {action.actionType === 'SEND_SMS' && (
-                      <div className="mt-4">
-                        <label className="block text-xs font-medium text-gray-700">
-                          Message SMS
-                        </label>
-                        <textarea
-                          value={action.smsMessage || ''}
-                          onChange={(e) =>
-                            updateAction(index, {
-                              smsMessage: e.target.value,
-                            })
-                          }
-                          rows={3}
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                          placeholder="Votre message SMS..."
-                        />
-                      </div>
-                    )}
-
-                    {action.actionType === 'CHANGE_STATUS' && (
-                      <div className="mt-4">
-                        <label className="block text-xs font-medium text-gray-700">
-                          Nouveau statut
-                        </label>
-                        <select
-                          value={action.newStatusId || ''}
-                          onChange={(e) =>
-                            updateAction(index, {
-                              newStatusId: e.target.value || null,
-                            })
-                          }
-                          className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                        >
-                          <option value="">Sélectionner un statut</option>
-                          {statuses.map((status) => (
-                            <option key={status.id} value={status.id}>
-                              {status.name}
-                            </option>
-                          ))}
-                        </select>
-                      </div>
-                    )}
-
-                    {action.actionType === 'CREATE_TASK' && (
-                      <div className="mt-4 space-y-3">
-                        <div>
-                          <label className="block text-xs font-medium text-gray-700">
-                            Titre de la tâche
-                          </label>
-                          <input
-                            type="text"
-                            value={action.taskTitle || ''}
-                            onChange={(e) =>
-                              updateAction(index, {
-                                taskTitle: e.target.value,
-                              })
-                            }
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                            placeholder="Titre de la tâche..."
-                          />
-                        </div>
-                        <div>
-                          <label className="block text-xs font-medium text-gray-700">
-                            Description
-                          </label>
-                          <textarea
-                            value={action.taskDescription || ''}
-                            onChange={(e) =>
-                              updateAction(index, {
-                                taskDescription: e.target.value,
-                              })
-                            }
-                            rows={3}
-                            className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                            placeholder="Description de la tâche..."
-                          />
-                        </div>
-                      </div>
-                    )}
-
-                    {/* Condition */}
-                    <div className="mt-4 border-t border-dashed border-gray-200 pt-3">
-                      <label className="block text-xs font-medium text-gray-700">
-                        Condition (optionnel)
-                      </label>
-                      <div className="mt-2 grid grid-cols-2 gap-2">
-                        <select
-                          value={action.conditionOperator || ''}
-                          onChange={(e) =>
-                            updateAction(index, {
-                              conditionOperator:
-                                (e.target.value as 'EQUALS' | 'NOT_EQUALS') || null,
-                            })
-                          }
-                          className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                        >
-                          <option value="">Aucune condition</option>
-                          <option value="EQUALS">Statut est égal à</option>
-                          <option value="NOT_EQUALS">Statut n'est pas égal à</option>
-                        </select>
-                        {action.conditionOperator && (
-                          <select
-                            value={action.conditionStatusId || ''}
-                            onChange={(e) =>
-                              updateAction(index, {
-                                conditionStatusId: e.target.value || null,
-                              })
-                            }
-                            className="block w-full rounded-lg border border-gray-300 px-3 py-2 text-xs text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                          >
-                            <option value="">Sélectionner...</option>
-                            {statuses.map((status) => (
-                              <option key={status.id} value={status.id}>
-                                {status.name}
-                              </option>
-                            ))}
-                          </select>
-                        )}
-                      </div>
-                    </div>
+                    {renderActionConfig(action, index)}
+                    {renderConditions(action, index)}
                   </div>
                 </div>
               ))
@@ -567,13 +890,13 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
 
             {/* Bouton ajouter une action */}
             <div className="relative pl-10">
-              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-indigo-300 bg-white" />
+              <div className="absolute top-6 left-5 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-blue-300 bg-white" />
               <div className="flex items-center justify-center">
                 <div className="relative inline-flex items-center" ref={actionMenuRef}>
                   <button
                     type="button"
                     onClick={() => setShowActionMenu(!showActionMenu)}
-                    className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-indigo-200 bg-white px-4 py-2 text-xs font-medium text-indigo-700 shadow-sm transition-colors hover:border-indigo-300 hover:bg-indigo-50"
+                    className="inline-flex cursor-pointer items-center gap-2 rounded-full border border-blue-200 bg-white px-4 py-2 text-xs font-medium text-blue-700 shadow-sm transition-colors hover:border-blue-300 hover:bg-blue-50"
                   >
                     <Plus className="h-4 w-4" />
                     Ajouter une action
@@ -581,63 +904,19 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                   {showActionMenu && (
                     <div className="absolute top-full left-1/2 z-10 mt-2 w-60 -translate-x-1/2 rounded-xl border border-gray-200 bg-white p-2 text-xs shadow-lg">
                       <p className="px-2 pb-1 text-[11px] font-medium tracking-wide text-gray-500 uppercase">
-                        Types d’actions
+                        Types d&apos;actions
                       </p>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          addAction('SEND_EMAIL');
-                          setShowActionMenu(false);
-                        }}
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
-                      >
-                        <Mail className="h-4 w-4" />
-                        Envoyer un email
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          addAction('SEND_SMS');
-                          setShowActionMenu(false);
-                        }}
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
-                      >
-                        <MessageSquare className="h-4 w-4" />
-                        Envoyer un SMS
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          addAction('CHANGE_STATUS');
-                          setShowActionMenu(false);
-                        }}
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
-                      >
-                        <Tag className="h-4 w-4" />
-                        Changer le statut
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          addAction('CREATE_TASK');
-                          setShowActionMenu(false);
-                        }}
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
-                      >
-                        <CheckSquare className="h-4 w-4" />
-                        Créer une tâche
-                      </button>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          addAction('WAIT');
-                          setShowActionMenu(false);
-                        }}
-                        className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
-                      >
-                        <Clock className="h-4 w-4" />
-                        Attendre
-                      </button>
+                      {actionMenuItems.map((item) => (
+                        <button
+                          key={item.type}
+                          type="button"
+                          onClick={() => addAction(item.type)}
+                          className="flex w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-2 text-gray-700 transition-colors hover:bg-gray-50"
+                        >
+                          {item.icon}
+                          {item.label}
+                        </button>
+                      ))}
                     </div>
                   )}
                 </div>
@@ -675,13 +954,8 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                   type="text"
                   required
                   value={formData.name}
-                  onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      name: e.target.value,
-                    }))
-                  }
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  onChange={(e) => setFormData((prev) => ({ ...prev, name: e.target.value }))}
+                  className={inputClassSm}
                   placeholder="Ex : Séquence de bienvenue nouveau lead"
                 />
               </div>
@@ -691,13 +965,10 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                 <textarea
                   value={formData.description ?? ''}
                   onChange={(e) =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      description: e.target.value,
-                    }))
+                    setFormData((prev) => ({ ...prev, description: e.target.value }))
                   }
                   rows={3}
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                  className={inputClassSm}
                   placeholder="Expliquez brièvement ce que fait ce workflow..."
                 />
               </div>
@@ -711,16 +982,11 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                 </div>
                 <button
                   type="button"
-                  onClick={() =>
-                    setFormData((prev) => ({
-                      ...prev,
-                      active: !prev.active,
-                    }))
-                  }
+                  onClick={() => setFormData((prev) => ({ ...prev, active: !prev.active }))}
                   className={cn(
                     'relative inline-flex h-6 w-11 cursor-pointer items-center rounded-full border transition-colors',
                     formData.active
-                      ? 'border-indigo-500 bg-indigo-500'
+                      ? 'border-blue-500 bg-blue-500'
                       : 'border-gray-300 bg-gray-200',
                   )}
                 >
@@ -745,18 +1011,25 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                 onChange={(e) =>
                   setFormData((prev) => ({
                     ...prev,
-                    triggerType: e.target.value as WorkflowEditorInitialData['triggerType'],
+                    triggerType: e.target.value as TriggerType,
                   }))
                 }
-                className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                className={selectClassSm}
               >
                 <option value="CONTACT_CREATED">Nouveau contact créé</option>
                 <option value="STATUS_CHANGED">Changement de statut</option>
                 <option value="TIME_BASED">Basé sur le temps</option>
+                <option value="TASK_COMPLETED">Tâche complétée</option>
+                <option value="TRANSACTION_CREATED">Transaction créée</option>
+                <option value="TRANSACTION_STATUS_CHANGED">
+                  Changement de statut de transaction
+                </option>
+                <option value="CONTACT_ASSIGNMENT_CHANGED">Changement d&apos;assignation</option>
                 <option value="MANUAL">Déclencheur manuel</option>
               </select>
             </div>
 
+            {/* STATUS_CHANGED config */}
             {formData.triggerType === 'STATUS_CHANGED' && (
               <div className="grid gap-3 md:grid-cols-2">
                 <div>
@@ -771,12 +1044,12 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                         triggerFromStatusId: e.target.value || null,
                       }))
                     }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    className={selectClassSm}
                   >
                     <option value="">Tous les statuts</option>
-                    {statuses.map((status) => (
-                      <option key={status.id} value={status.id}>
-                        {status.name}
+                    {statuses.map((s) => (
+                      <option key={s.id} value={s.id}>
+                        {s.name}
                       </option>
                     ))}
                   </select>
@@ -791,12 +1064,12 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
                         triggerToStatusId: e.target.value || null,
                       }))
                     }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
+                    className={selectClassSm}
                   >
                     <option value="">Tous les statuts</option>
-                    {statuses.map((status) => (
-                      <option key={status.id} value={status.id}>
-                        {status.name}
+                    {statuses.map((s) => (
+                      <option key={s.id} value={s.id}>
+                        {s.name}
                       </option>
                     ))}
                   </select>
@@ -804,57 +1077,141 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
               </div>
             )}
 
+            {/* TIME_BASED config */}
             {formData.triggerType === 'TIME_BASED' && (
+              <div className="space-y-3">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700">
+                    Événement de référence
+                  </label>
+                  <select
+                    value={formData.triggerTimeReference ?? 'CONTACT_CREATED_DATE'}
+                    onChange={(e) =>
+                      setFormData((prev) => ({ ...prev, triggerTimeReference: e.target.value }))
+                    }
+                    className={selectClassSm}
+                  >
+                    {TIME_REFERENCES.map((r) => (
+                      <option key={r.value} value={r.value}>
+                        {r.label}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div className="grid gap-3 md:grid-cols-2">
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700">Délai (jours)</label>
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      value={formData.triggerTimeDays ?? 0}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        if (value === '' || /^\d+$/.test(value)) {
+                          setFormData((prev) => ({
+                            ...prev,
+                            triggerTimeDays: parseInt(value, 10) || 0,
+                          }));
+                        }
+                      }}
+                      className={inputClassSm}
+                    />
+                  </div>
+                  <div>
+                    <label className="block text-xs font-medium text-gray-700">
+                      Délai (heures)
+                    </label>
+                    <input
+                      type="text"
+                      inputMode="numeric"
+                      value={formData.triggerTimeHours ?? 0}
+                      onChange={(e) => {
+                        const value = e.target.value;
+                        if (value === '' || /^\d+$/.test(value)) {
+                          setFormData((prev) => ({
+                            ...prev,
+                            triggerTimeHours: parseInt(value, 10) || 0,
+                          }));
+                        }
+                      }}
+                      className={inputClassSm}
+                    />
+                  </div>
+                </div>
+              </div>
+            )}
+
+            {/* TASK_COMPLETED config */}
+            {formData.triggerType === 'TASK_COMPLETED' && (
+              <div>
+                <label className="block text-xs font-medium text-gray-700">
+                  Type de tâche (optionnel)
+                </label>
+                <select
+                  value={formData.triggerTaskType ?? ''}
+                  onChange={(e) =>
+                    setFormData((prev) => ({ ...prev, triggerTaskType: e.target.value || null }))
+                  }
+                  className={selectClassSm}
+                >
+                  {TASK_TYPES.map((t) => (
+                    <option key={t.value} value={t.value}>
+                      {t.label}
+                    </option>
+                  ))}
+                </select>
+              </div>
+            )}
+
+            {/* TRANSACTION_STATUS_CHANGED config */}
+            {formData.triggerType === 'TRANSACTION_STATUS_CHANGED' && (
               <div className="grid gap-3 md:grid-cols-2">
                 <div>
-                  <label className="block text-xs font-medium text-gray-700">Délai (jours)</label>
-                  <input
-                    type="number"
-                    min="0"
-                    value={formData.triggerTimeDays ?? 0}
+                  <label className="block text-xs font-medium text-gray-700">
+                    Du statut (optionnel)
+                  </label>
+                  <select
+                    value={formData.triggerTransactionFromStatus ?? ''}
                     onChange={(e) =>
                       setFormData((prev) => ({
                         ...prev,
-                        triggerTimeDays: parseInt(e.target.value, 10) || 0,
+                        triggerTransactionFromStatus: e.target.value || null,
                       }))
                     }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                  />
+                    className={selectClassSm}
+                  >
+                    <option value="">Tous les statuts</option>
+                    {TRANSACTION_STATUSES.map((s) => (
+                      <option key={s.value} value={s.value}>
+                        {s.label}
+                      </option>
+                    ))}
+                  </select>
                 </div>
                 <div>
-                  <label className="block text-xs font-medium text-gray-700">Délai (heures)</label>
-                  <input
-                    type="number"
-                    min="0"
-                    value={formData.triggerTimeHours ?? 0}
+                  <label className="block text-xs font-medium text-gray-700">Vers le statut</label>
+                  <select
+                    value={formData.triggerTransactionToStatus ?? ''}
                     onChange={(e) =>
                       setFormData((prev) => ({
                         ...prev,
-                        triggerTimeHours: parseInt(e.target.value, 10) || 0,
+                        triggerTransactionToStatus: e.target.value || null,
                       }))
                     }
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-3 py-2 text-sm text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                  />
+                    className={selectClassSm}
+                  >
+                    <option value="">Tous les statuts</option>
+                    {TRANSACTION_STATUSES.map((s) => (
+                      <option key={s.value} value={s.value}>
+                        {s.label}
+                      </option>
+                    ))}
+                  </select>
                 </div>
               </div>
             )}
           </div>
 
-          {(error || success) && (
-            <div className="space-y-2 text-xs">
-              {error && (
-                <div className="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-red-700">
-                  {error}
-                </div>
-              )}
-              {success && (
-                <div className="rounded-lg border border-green-200 bg-green-50 px-3 py-2 text-green-700">
-                  {success}
-                </div>
-              )}
-            </div>
-          )}
-
           <div className="flex flex-col gap-2 pt-2 sm:flex-row sm:justify-end">
             <button
               type="button"
@@ -866,7 +1223,7 @@ export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
             <button
               type="submit"
               disabled={saving || loading}
-              className="w-full cursor-pointer rounded-xl bg-indigo-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-indigo-400 sm:w-auto"
+              className="w-full cursor-pointer rounded-xl bg-blue-600 px-4 py-2.5 text-sm font-medium text-white shadow-sm transition-colors hover:bg-blue-700 focus:ring-2 focus:ring-gray-400/30 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:bg-blue-400 sm:w-auto"
             >
               {saving ? 'Enregistrement...' : 'Enregistrer le workflow'}
             </button>