create-crm-tmp 1.0.0

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

@@ -0,0 +1,905 @@
+'use client';
+
+import { useEffect, useRef, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import {
+  Plus,
+  Trash2,
+  Mail,
+  MessageSquare,
+  Tag,
+  CheckSquare,
+  Clock,
+} from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+interface Status {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface Template {
+  id: string;
+  name: string;
+  type: 'EMAIL' | 'SMS' | 'NOTE';
+}
+
+export interface WorkflowAction {
+  id?: string;
+  actionType: 'SEND_EMAIL' | 'SEND_SMS' | 'CHANGE_STATUS' | 'CREATE_TASK' | 'WAIT';
+  order: number;
+  delayDays: number;
+  delayHours: number;
+  emailTemplateId?: string | null;
+  smsMessage?: string | null;
+  newStatusId?: string | null;
+  taskTitle?: string | null;
+  taskDescription?: string | null;
+  conditionOperator?: 'EQUALS' | 'NOT_EQUALS' | null;
+  conditionStatusId?: string | null;
+}
+
+export interface WorkflowEditorInitialData {
+  id?: string;
+  name: string;
+  description: string | null;
+  active: boolean;
+  triggerType: 'CONTACT_CREATED' | 'STATUS_CHANGED' | 'TIME_BASED' | 'MANUAL';
+  triggerFromStatusId: string | null;
+  triggerToStatusId: string | null;
+  triggerTimeDays: number | null;
+  triggerTimeHours: number | null;
+  actions: WorkflowAction[];
+}
+
+interface WorkflowEditorProps {
+  workflowId?: string;
+}
+
+export function WorkflowEditor({ workflowId }: WorkflowEditorProps) {
+  const router = useRouter();
+
+  const [loading, setLoading] = useState<boolean>(!!workflowId);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState('');
+  const [success, setSuccess] = useState('');
+
+  const [statuses, setStatuses] = useState<Status[]>([]);
+  const [emailTemplates, setEmailTemplates] = useState<Template[]>([]);
+
+  const [formData, setFormData] = useState<WorkflowEditorInitialData>({
+    id: undefined,
+    name: '',
+    description: '',
+    active: true,
+    triggerType: 'CONTACT_CREATED',
+    triggerFromStatusId: null,
+    triggerToStatusId: null,
+    triggerTimeDays: null,
+    triggerTimeHours: null,
+    actions: [],
+  });
+
+  const [actions, setActions] = useState<WorkflowAction[]>([]);
+  const [showActionMenu, setShowActionMenu] = useState(false);
+  const actionMenuRef = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    fetchStatuses();
+    fetchEmailTemplates();
+  }, []);
+
+  useEffect(() => {
+    if (!workflowId) {
+      return;
+    }
+
+    const fetchWorkflow = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(`/api/workflows/${workflowId}`);
+        const data = await response.json();
+
+        if (!response.ok) {
+          throw new Error(data.error || 'Erreur lors du chargement du workflow');
+        }
+
+        setFormData({
+          id: data.id,
+          name: data.name,
+          description: data.description,
+          active: data.active,
+          triggerType: data.triggerType,
+          triggerFromStatusId: data.triggerFromStatusId,
+          triggerToStatusId: data.triggerToStatusId,
+          triggerTimeDays: data.triggerTimeDays,
+          triggerTimeHours: data.triggerTimeHours,
+          actions: data.actions,
+        });
+        setActions(data.actions || []);
+      } catch (err: any) {
+        setError(err.message || 'Erreur lors du chargement du workflow');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    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)
+      ) {
+        setShowActionMenu(false);
+      }
+    };
+
+    if (showActionMenu) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showActionMenu]);
+
+  const fetchStatuses = async () => {
+    try {
+      const response = await fetch('/api/settings/statuses');
+      if (response.ok) {
+        const data = await response.json();
+        setStatuses(data);
+      }
+    } catch (err) {
+      console.error('Erreur lors du chargement des statuts:', err);
+    }
+  };
+
+  const fetchEmailTemplates = async () => {
+    try {
+      const response = await fetch('/api/templates?type=EMAIL');
+      if (response.ok) {
+        const data = await response.json();
+        setEmailTemplates(data);
+      }
+    } catch (err) {
+      console.error('Erreur lors du chargement des templates:', err);
+    }
+  };
+
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setError('');
+    setSuccess('');
+
+    if (!formData.name) {
+      setError('Le nom du workflow est requis');
+      return;
+    }
+
+    try {
+      setSaving(true);
+      const isEdit = !!formData.id;
+      const url = isEdit ? `/api/workflows/${formData.id}` : '/api/workflows';
+      const method = isEdit ? 'PUT' : 'POST';
+
+      const response = await fetch(url, {
+        method,
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: formData.name,
+          description: formData.description,
+          active: formData.active,
+          triggerType: formData.triggerType,
+          triggerFromStatusId: formData.triggerFromStatusId || null,
+          triggerToStatusId: formData.triggerToStatusId || null,
+          triggerTimeDays: formData.triggerTimeDays || null,
+          triggerTimeHours: formData.triggerTimeHours || null,
+          actions: actions.map((action, index) => ({
+            ...action,
+            order: index,
+          })),
+        }),
+      });
+
+      const data = await response.json();
+
+      if (!response.ok) {
+        throw new Error(data.error || 'Erreur lors de la sauvegarde du workflow');
+      }
+
+      setSuccess(isEdit ? 'Workflow mis à jour avec succès' : 'Workflow créé avec succès');
+      setTimeout(() => setSuccess(''), 5000);
+
+      router.push('/automatisation');
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la sauvegarde du workflow');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  const addAction = (actionType: WorkflowAction['actionType']) => {
+    const newAction: WorkflowAction = {
+      actionType,
+      order: actions.length,
+      delayDays: 0,
+      delayHours: 0,
+    };
+    setActions([...actions, newAction]);
+  };
+
+  const removeAction = (index: number) => {
+    setActions(actions.filter((_, i) => i !== index));
+  };
+
+  const updateAction = (index: number, updates: Partial<WorkflowAction>) => {
+    const newActions = [...actions];
+    newActions[index] = { ...newActions[index], ...updates };
+    setActions(newActions);
+  };
+
+  const getActionIcon = (actionType: WorkflowAction['actionType']) => {
+    switch (actionType) {
+      case 'SEND_EMAIL':
+        return <Mail className="h-5 w-5 text-indigo-600" />;
+      case 'SEND_SMS':
+        return <MessageSquare className="h-5 w-5 text-indigo-600" />;
+      case 'CHANGE_STATUS':
+        return <Tag className="h-5 w-5 text-indigo-600" />;
+      case 'CREATE_TASK':
+        return <CheckSquare className="h-5 w-5 text-indigo-600" />;
+      case 'WAIT':
+        return <Clock className="h-5 w-5 text-indigo-600" />;
+      default:
+        return null;
+    }
+  };
+
+  const getActionLabel = (actionType: WorkflowAction['actionType']) => {
+    switch (actionType) {
+      case 'SEND_EMAIL':
+        return 'Envoyer un email';
+      case 'SEND_SMS':
+        return 'Envoyer un SMS';
+      case 'CHANGE_STATUS':
+        return 'Changer le statut';
+      case 'CREATE_TASK':
+        return 'Créer une tâche';
+      case 'WAIT':
+        return 'Attendre';
+      default:
+        return '';
+    }
+  };
+
+  const getTriggerLabel = (triggerType: WorkflowEditorInitialData['triggerType']) => {
+    switch (triggerType) {
+      case 'CONTACT_CREATED':
+        return 'Nouveau contact créé';
+      case 'STATUS_CHANGED':
+        return 'Changement de statut';
+      case 'TIME_BASED':
+        return 'Basé sur le temps';
+      case 'MANUAL':
+        return 'Déclencheur manuel';
+      default:
+        return '';
+    }
+  };
+
+  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">
+            <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
+              construire votre automatisation.
+            </p>
+          </div>
+
+          <div className="relative space-y-4">
+            {/* Ligne verticale */}
+            <div className="pointer-events-none absolute left-6 top-0 h-full w-px bg-linear-to-b from-indigo-300 via-gray-200 to-gray-200" />
+
+            {/* Déclencheur */}
+            <div className="relative pl-10">
+              <div className="absolute left-5 top-6 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="flex items-center justify-between">
+                  <div>
+                    <p className="text-xs font-semibold uppercase tracking-wide text-indigo-600">
+                      Déclencheur
+                    </p>
+                    <p className="mt-1 text-sm font-medium text-gray-900">
+                      {getTriggerLabel(formData.triggerType)}
+                    </p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            {/* Actions */}
+            {actions.length === 0 ? (
+              <div className="relative pl-10">
+                <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-gray-300 bg-white" />
+                <div className="flex flex-col items-center justify-center rounded-xl border border-dashed border-gray-300 bg-gray-50 px-4 py-8 text-center">
+                  <Clock className="mb-2 h-8 w-8 text-gray-300" />
+                  <p className="text-sm font-medium text-gray-900">Aucune action définie</p>
+                  <p className="mt-1 text-xs text-gray-500">
+                    Ajoutez une première action pour démarrer votre séquence.
+                  </p>
+                </div>
+              </div>
+            ) : (
+              actions.map((action, index) => (
+                <div key={index} className="relative pl-10">
+                  <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-white bg-indigo-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">
+                          {index + 1}
+                        </div>
+                        <div>
+                          <div className="flex items-center gap-2 text-gray-900">
+                            {getActionIcon(action.actionType)}
+                            <span className="text-sm font-medium">
+                              {getActionLabel(action.actionType)}
+                            </span>
+                          </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
+                          </p>
+                        </div>
+                      </div>
+                      <button
+                        type="button"
+                        onClick={() => removeAction(index)}
+                        className="cursor-pointer rounded-lg p-1.5 text-gray-400 transition-colors hover:bg-red-50 hover:text-red-600"
+                      >
+                        <Trash2 className="h-4 w-4" />
+                      </button>
+                    </div>
+
+                    <div className="grid gap-4 md:grid-cols-2">
+                      <div>
+                        <label className="block text-xs font-medium text-gray-700">
+                          Type d'action
+                        </label>
+                        <select
+                          value={action.actionType}
+                          onChange={(e) =>
+                            updateAction(index, {
+                              actionType: e.target.value as WorkflowAction['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"
+                        >
+                          <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>
+                        </select>
+                      </div>
+                      <div className="grid grid-cols-2 gap-2">
+                        <div>
+                          <label className="block text-xs font-medium text-gray-700">
+                            Délai (jours)
+                          </label>
+                          <input
+                            type="number"
+                            min="0"
+                            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"
+                          />
+                        </div>
+                        <div>
+                          <label className="block text-xs font-medium text-gray-700">
+                            Heures
+                          </label>
+                          <input
+                            type="number"
+                            min="0"
+                            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"
+                          />
+                        </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>
+                  </div>
+                </div>
+              ))
+            )}
+
+            {/* Bouton ajouter une action */}
+            <div className="relative pl-10">
+              <div className="absolute left-5 top-6 h-3 w-3 -translate-x-1/2 rounded-full border border-dashed border-indigo-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"
+                  >
+                    <Plus className="h-4 w-4" />
+                    Ajouter une action
+                  </button>
+                  {showActionMenu && (
+                    <div className="absolute left-1/2 top-full 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 uppercase tracking-wide text-gray-500">
+                        Types d’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>
+                    </div>
+                  )}
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        {/* Colonne droite : formulaire */}
+        <div className="space-y-4">
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm">
+            <div className="mb-4 flex items-center justify-between">
+              <div>
+                <p className="text-xs font-semibold uppercase tracking-wide text-gray-500">
+                  Paramètres du workflow
+                </p>
+                <p className="mt-1 text-sm font-medium text-gray-900">
+                  {formData.id ? 'Modifier le workflow' : 'Nouvelle automatisation'}
+                </p>
+              </div>
+              <span
+                className={cn(
+                  'inline-flex items-center rounded-full px-2.5 py-0.5 text-[11px] font-medium',
+                  formData.active
+                    ? 'bg-green-50 text-green-700'
+                    : 'bg-gray-100 text-gray-600',
+                )}
+              >
+                {formData.active ? 'Actif' : 'Brouillon'}
+              </span>
+            </div>
+
+            <div className="space-y-4">
+              <div>
+                <label className="block text-xs font-medium text-gray-700">
+                  Nom du workflow *
+                </label>
+                <input
+                  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"
+                  placeholder="Ex : Séquence de bienvenue nouveau lead"
+                />
+              </div>
+
+              <div>
+                <label className="block text-xs font-medium text-gray-700">
+                  Description
+                </label>
+                <textarea
+                  value={formData.description ?? ''}
+                  onChange={(e) =>
+                    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"
+                  placeholder="Expliquez brièvement ce que fait ce workflow..."
+                />
+              </div>
+
+              <div className="flex items-center justify-between rounded-xl bg-gray-50 px-3 py-2.5">
+                <div>
+                  <p className="text-xs font-medium text-gray-700">Statut</p>
+                  <p className="text-xs text-gray-500">
+                    Activez pour commencer à traiter automatiquement les contacts.
+                  </p>
+                </div>
+                <button
+                  type="button"
+                  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-gray-300 bg-gray-200',
+                  )}
+                >
+                  <span
+                    className={cn(
+                      'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+                      formData.active ? 'translate-x-5' : 'translate-x-1',
+                    )}
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+
+          <div className="rounded-2xl border border-gray-200 bg-white p-5 shadow-sm space-y-4">
+            <div>
+              <label className="block text-xs font-medium text-gray-700">
+                Type de déclencheur *
+              </label>
+              <select
+                value={formData.triggerType}
+                onChange={(e) =>
+                  setFormData((prev) => ({
+                    ...prev,
+                    triggerType: e.target.value as WorkflowEditorInitialData['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"
+              >
+                <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="MANUAL">Déclencheur manuel</option>
+              </select>
+            </div>
+
+            {formData.triggerType === 'STATUS_CHANGED' && (
+              <div className="grid gap-3 md:grid-cols-2">
+                <div>
+                  <label className="block text-xs font-medium text-gray-700">
+                    Du statut (optionnel)
+                  </label>
+                  <select
+                    value={formData.triggerFromStatusId ?? ''}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        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"
+                  >
+                    <option value="">Tous les statuts</option>
+                    {statuses.map((status) => (
+                      <option key={status.id} value={status.id}>
+                        {status.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+                <div>
+                  <label className="block text-xs font-medium text-gray-700">
+                    Vers le statut
+                  </label>
+                  <select
+                    value={formData.triggerToStatusId ?? ''}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        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"
+                  >
+                    <option value="">Tous les statuts</option>
+                    {statuses.map((status) => (
+                      <option key={status.id} value={status.id}>
+                        {status.name}
+                      </option>
+                    ))}
+                  </select>
+                </div>
+              </div>
+            )}
+
+            {formData.triggerType === 'TIME_BASED' && (
+              <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}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        triggerTimeDays: parseInt(e.target.value, 10) || 0,
+                      }))
+                    }
+                    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"
+                  />
+                </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}
+                    onChange={(e) =>
+                      setFormData((prev) => ({
+                        ...prev,
+                        triggerTimeHours: parseInt(e.target.value, 10) || 0,
+                      }))
+                    }
+                    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"
+                  />
+                </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"
+              onClick={() => router.push('/automatisation')}
+              className="w-full cursor-pointer rounded-xl border border-gray-300 bg-white px-4 py-2.5 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
+            >
+              Annuler
+            </button>
+            <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:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:bg-indigo-400 sm:w-auto"
+            >
+              {saving ? 'Enregistrement...' : 'Enregistrer le workflow'}
+            </button>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+}
+
+