create-crm-tmp 1.1.3 → 2.0.0

package/template/src/app/(dashboard)/automatisation/page.tsx

@@ -1,11 +1,35 @@
 'use client';
 
 import { useEffect, useState } from 'react';
-import Link from 'next/link';
 import { useRouter } from 'next/navigation';
 import { PageHeader } from '@/components/page-header';
-import { Plus, Edit, Trash2, Play, Pause, Search } from 'lucide-react';
+import { PageLoader } from '@/components/skeleton';
+import {
+  Plus,
+  Trash2,
+  Search,
+  ChevronDown,
+  ChevronUp,
+  Zap,
+  Mail,
+  MessageSquare,
+  Tag,
+  CheckSquare,
+  Clock,
+  UserPlus,
+  StickyNote,
+  Bell,
+  ArrowRightLeft,
+  ShoppingCart,
+  Users,
+  Filter,
+  Info,
+} from 'lucide-react';
 import { cn } from '@/lib/utils';
+import { ProtectedPage } from '@/components/protected-page';
+import { useConfirm } from '@/hooks/use-confirm';
+import { useUserRole } from '@/hooks/use-user-role';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Status {
   id: string;
@@ -18,7 +42,7 @@ interface Workflow {
   name: string;
   description: string | null;
   active: boolean;
-  triggerType: 'CONTACT_CREATED' | 'STATUS_CHANGED' | 'TIME_BASED' | 'MANUAL';
+  triggerType: string;
   triggerFromStatusId: string | null;
   triggerToStatusId: string | null;
   triggerTimeDays: number | null;
@@ -30,12 +54,21 @@ interface Workflow {
 
 export default function AutomatisationPage() {
   const router = useRouter();
+  const { confirm, ConfirmDialog } = useConfirm();
+  const { hasPermission } = useUserRole();
+  const toast = useAppToast();
+
+  // Permissions
+  const canCreate = hasPermission('workflows.create');
+  const canDelete = hasPermission('workflows.delete');
+
   const [workflows, setWorkflows] = useState<Workflow[]>([]);
   const [statuses, setStatuses] = useState<Status[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState('');
   const [success, setSuccess] = useState('');
   const [search, setSearch] = useState('');
+  const [showGuide, setShowGuide] = useState(false);
 
   async function fetchWorkflows() {
     try {
@@ -71,8 +104,28 @@ export default function AutomatisationPage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
+  useEffect(() => {
+    if (!success) return;
+    toast.success(success);
+    setSuccess('');
+  }, [success, toast]);
+
+  useEffect(() => {
+    if (!error) return;
+    toast.error(error);
+    setError('');
+  }, [error, toast]);
+
   const handleDelete = async (id: string) => {
-    if (!confirm('Voulez-vous vraiment supprimer ce workflow ?')) {
+    const confirmed = await confirm({
+      title: 'Supprimer le workflow',
+      description: 'Voulez-vous vraiment supprimer ce workflow ? Cette action est irréversible.',
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+
+    if (!confirmed) {
       return;
     }
 
@@ -117,7 +170,7 @@ export default function AutomatisationPage() {
       setError(err.message || 'Erreur lors de la mise à jour');
     }
   };
-  const getTriggerLabel = (triggerType: Workflow['triggerType']) => {
+  const getTriggerLabel = (triggerType: string) => {
     switch (triggerType) {
       case 'CONTACT_CREATED':
         return 'Nouveau contact créé';
@@ -127,8 +180,16 @@ export default function AutomatisationPage() {
         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 statut transaction';
+      case 'CONTACT_ASSIGNMENT_CHANGED':
+        return "Changement d'assignation";
       default:
-        return '';
+        return triggerType;
     }
   };
 
@@ -142,196 +203,428 @@ export default function AutomatisationPage() {
   });
 
   return (
-    <div className="h-full">
-      <PageHeader
-        title="Automatisation"
-        description="Créez et gérez vos workflows d'automatisation"
-        action={
-          <button
-            onClick={() => router.push('/automatisation/new')}
-            className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700 focus-visible:ring-2 focus-visible:ring-indigo-500 focus-visible:ring-offset-2 focus-visible:outline-none"
-          >
-            <Plus className="h-4 w-4" />
-            Nouveau workflow
-          </button>
-        }
-      />
-
-      <div className="p-4 sm:p-6 lg:p-8">
-        {success && (
-          <div className="mb-4 rounded-lg border border-green-200 bg-green-50 p-4">
-            <p className="text-sm font-medium text-green-800">{success}</p>
-          </div>
-        )}
+    <ProtectedPage requiredPermission="workflows.view">
+      <div className="h-full">
+        <PageHeader
+          title="Automatisation"
+          description="Créez et gérez vos workflows d'automatisation"
+          action={
+            canCreate ? (
+              <button
+                onClick={() => router.push('/automatisation/new')}
+                className="inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700 focus-visible:ring-2 focus-visible:ring-gray-400/30 focus-visible:ring-offset-2 focus-visible:outline-none"
+              >
+                <Plus className="h-4 w-4" />
+                Nouveau workflow
+              </button>
+            ) : undefined
+          }
+        />
 
-        {error && (
-          <div className="mb-4 rounded-lg border border-red-200 bg-red-50 p-4">
-            <p className="text-sm font-medium text-red-800">{error}</p>
-          </div>
-        )}
+        <div className="p-4 sm:p-6 lg:p-8">
 
-        {loading ? (
-          <div className="rounded-xl bg-white p-8 text-center shadow-sm">
-            <p className="text-sm text-gray-500">Chargement des workflows...</p>
-          </div>
-        ) : workflows.length === 0 ? (
-          <div className="rounded-xl bg-white p-12 text-center shadow-sm">
-            <p className="text-gray-500">Aucun workflow créé pour le moment.</p>
+          {/* Guide d'utilisation */}
+          <div className="mb-6 rounded-2xl border border-blue-100 bg-white shadow-sm">
             <button
-              onClick={() => router.push('/automatisation/new')}
-              className="mt-4 inline-flex cursor-pointer items-center gap-2 rounded-lg bg-indigo-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-indigo-700"
+              type="button"
+              onClick={() => setShowGuide((prev) => !prev)}
+              className="flex w-full cursor-pointer items-center justify-between px-5 py-4"
             >
-              <Plus className="h-4 w-4" />
-              Créer votre premier workflow
-            </button>
-          </div>
-        ) : (
-          <div className="rounded-xl border border-gray-200 bg-white shadow-sm">
-            <div className="flex flex-col gap-3 border-b border-gray-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
-              <div className="flex items-center gap-2 text-sm text-gray-500">
-                <span className="font-medium text-gray-900">Automatisations</span>
-                <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs">
-                  {workflows.length}
-                </span>
-              </div>
-              <div className="relative w-full max-w-xs">
-                <Search className="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-gray-400" />
-                <input
-                  type="text"
-                  value={search}
-                  onChange={(e) => setSearch(e.target.value)}
-                  placeholder="Rechercher une automatisation..."
-                  className="w-full rounded-full border border-gray-200 bg-gray-50 py-2 pr-3 pl-9 text-sm text-gray-900 placeholder:text-gray-400 focus:border-indigo-500 focus:bg-white focus:ring-2 focus:ring-indigo-500/30 focus:outline-none"
-                />
+              <div className="flex items-center gap-3">
+                <div className="flex h-9 w-9 items-center justify-center rounded-xl bg-blue-50">
+                  <Info className="h-5 w-5 text-blue-600" />
+                </div>
+                <div className="text-left">
+                  <p className="text-sm font-semibold text-gray-900">
+                    Comment fonctionnent les automatisations ?
+                  </p>
+                  <p className="mt-0.5 text-xs text-gray-500">
+                    Déclencheurs, actions, conditions -- tout comprendre en un coup d&apos;oeil
+                  </p>
+                </div>
               </div>
-            </div>
+              {showGuide ? (
+                <ChevronUp className="h-5 w-5 text-gray-400" />
+              ) : (
+                <ChevronDown className="h-5 w-5 text-gray-400" />
+              )}
+            </button>
 
-            <div className="overflow-x-auto">
-              <table className="min-w-full divide-y divide-gray-100 text-sm">
-                <thead className="bg-gray-50/60">
-                  <tr>
-                    <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Nom
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Déclencheur
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Actions
-                    </th>
-                    <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Créé le
-                    </th>
-                    <th className="px-6 py-3 text-center text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Statut
-                    </th>
-                    <th className="px-4 py-3 text-right text-xs font-medium tracking-wide text-gray-500 uppercase">
-                      Actions
-                    </th>
-                  </tr>
-                </thead>
-                <tbody className="divide-y divide-gray-100">
-                  {filteredWorkflows.map((workflow) => (
-                    <tr
-                      key={workflow.id}
-                      className="group cursor-pointer transition-colors hover:bg-indigo-50/40"
-                      onClick={() => router.push(`/automatisation/${workflow.id}`)}
-                    >
-                      <td className="px-6 py-4 whitespace-nowrap">
-                        <div className="flex flex-col">
-                          <span className="font-medium text-gray-900">{workflow.name}</span>
-                          {workflow.description && (
-                            <span className="mt-0.5 line-clamp-1 text-xs text-gray-500">
-                              {workflow.description}
-                            </span>
-                          )}
+            {showGuide && (
+              <div className="border-t border-blue-50 px-5 pt-4 pb-6">
+                {/* Principe */}
+                <p className="text-sm leading-relaxed text-gray-600">
+                  Un workflow suit un schéma simple : un <strong>déclencheur</strong> lance la
+                  séquence, puis une ou plusieurs <strong>actions</strong> s&apos;exécutent dans
+                  l&apos;ordre. Chaque action peut avoir un <strong>délai</strong> (jours / heures)
+                  et une <strong>condition</strong> optionnelle pour s&apos;exécuter uniquement si
+                  le contact remplit certains critères.
+                </p>
+
+                {/* Déclencheurs */}
+                <div className="mt-5">
+                  <h3 className="flex items-center gap-2 text-xs font-semibold tracking-wide text-blue-600 uppercase">
+                    <Zap className="h-4 w-4" />
+                    Déclencheurs disponibles
+                  </h3>
+                  <div className="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+                    {[
+                      {
+                        icon: <UserPlus className="h-4 w-4 text-emerald-600" />,
+                        title: 'Contact créé',
+                        desc: "Se lance dès qu'un nouveau contact est ajouté au CRM.",
+                      },
+                      {
+                        icon: <Tag className="h-4 w-4 text-blue-600" />,
+                        title: 'Changement de statut',
+                        desc: 'Se lance quand le statut du contact change (ex. Nouveau \u2192 Qualifié). Filtrable par statut source/cible.',
+                      },
+                      {
+                        icon: <Clock className="h-4 w-4 text-blue-600" />,
+                        title: 'Basé sur le temps',
+                        desc: 'Se lance X jours/heures après un événement (création, dernier changement de statut, dernière interaction).',
+                      },
+                      {
+                        icon: <CheckSquare className="h-4 w-4 text-violet-600" />,
+                        title: 'Tâche complétée',
+                        desc: 'Se lance quand une tâche liée à un contact est terminée. Filtrable par type de tâche.',
+                      },
+                      {
+                        icon: <ShoppingCart className="h-4 w-4 text-orange-600" />,
+                        title: 'Transaction créée',
+                        desc: 'Se lance quand une nouvelle transaction est créée pour un contact.',
+                      },
+                      {
+                        icon: <ArrowRightLeft className="h-4 w-4 text-rose-600" />,
+                        title: 'Statut transaction',
+                        desc: 'Se lance quand le statut d\u2019une transaction change (ex. Signée, Complétée). Filtrable par statut.',
+                      },
+                      {
+                        icon: <Users className="h-4 w-4 text-cyan-600" />,
+                        title: "Changement d'assignation",
+                        desc: 'Se lance quand le commercial ou le télépro assigné au contact change.',
+                      },
+                      {
+                        icon: <Zap className="h-4 w-4 text-purple-600" />,
+                        title: 'Manuel',
+                        desc: "Se lance manuellement depuis la fiche d'un contact (bouton \u00ab Auto \u00bb).",
+                      },
+                    ].map((item) => (
+                      <div
+                        key={item.title}
+                        className="rounded-xl border border-gray-100 bg-gray-50/50 p-3"
+                      >
+                        <div className="flex items-center gap-2">
+                          {item.icon}
+                          <p className="text-xs font-semibold text-gray-900">{item.title}</p>
                         </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-gray-700">
+                        <p className="mt-1.5 text-[11px] leading-relaxed text-gray-500">
+                          {item.desc}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Actions */}
+                <div className="mt-5">
+                  <h3 className="flex items-center gap-2 text-xs font-semibold tracking-wide text-blue-600 uppercase">
+                    <CheckSquare className="h-4 w-4" />
+                    Actions possibles
+                  </h3>
+                  <div className="mt-3 grid gap-2 sm:grid-cols-2 lg:grid-cols-4">
+                    {[
+                      {
+                        icon: <Mail className="h-4 w-4 text-blue-500" />,
+                        title: 'Envoyer un email',
+                        desc: 'Envoie un email au contact en utilisant un template prédéfini. Les variables (prénom, nom, etc.) sont remplacées automatiquement.',
+                      },
+                      {
+                        icon: <MessageSquare className="h-4 w-4 text-blue-500" />,
+                        title: 'Envoyer un SMS',
+                        desc: 'Envoie un SMS au numéro du contact avec un message personnalisable (variables supportées).',
+                      },
+                      {
+                        icon: <Tag className="h-4 w-4 text-blue-500" />,
+                        title: 'Changer le statut',
+                        desc: 'Modifie automatiquement le statut du contact vers un statut de votre choix.',
+                      },
+                      {
+                        icon: <CheckSquare className="h-4 w-4 text-blue-500" />,
+                        title: 'Créer une tâche',
+                        desc: 'Crée une tâche (appel, rendez-vous, etc.) avec type, priorité et assignation personnalisables.',
+                      },
+                      {
+                        icon: <UserPlus className="h-4 w-4 text-blue-500" />,
+                        title: 'Assigner le contact',
+                        desc: 'Assigne ou réassigne le contact à un commercial et/ou un télépro de votre choix.',
+                      },
+                      {
+                        icon: <StickyNote className="h-4 w-4 text-blue-500" />,
+                        title: 'Ajouter une note',
+                        desc: "Crée une note dans l'historique du contact. Supporte les variables de template.",
+                      },
+                      {
+                        icon: <Bell className="h-4 w-4 text-blue-500" />,
+                        title: 'Notifier un utilisateur',
+                        desc: "Crée une tâche pour un utilisateur spécifique (ex. alerter un manager qu'un contact est qualifié).",
+                      },
+                      {
+                        icon: <Clock className="h-4 w-4 text-blue-500" />,
+                        title: 'Attendre',
+                        desc: "Insère un délai dans la séquence avant l'action suivante (en jours et/ou heures).",
+                      },
+                    ].map((item) => (
+                      <div
+                        key={item.title}
+                        className="rounded-xl border border-gray-100 bg-gray-50/50 p-3"
+                      >
                         <div className="flex items-center gap-2">
-                          <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
-                            {getTriggerLabel(workflow.triggerType)}
-                          </span>
-                          {workflow.triggerType === 'STATUS_CHANGED' && (
-                            <span className="text-xs text-gray-500">
-                              {statuses.find((s) => s.id === workflow.triggerFromStatusId)?.name ??
-                                'Tous'}{' '}
-                              →{' '}
-                              {statuses.find((s) => s.id === workflow.triggerToStatusId)?.name ??
-                                'Tous'}
-                            </span>
-                          )}
+                          {item.icon}
+                          <p className="text-xs font-semibold text-gray-900">{item.title}</p>
                         </div>
-                      </td>
-                      <td className="px-6 py-4 whitespace-nowrap text-gray-700">
-                        <span className="inline-flex items-center rounded-full bg-indigo-50 px-2.5 py-0.5 text-xs font-medium text-indigo-700">
-                          {workflow.actions.length} action(s)
-                        </span>
-                      </td>
-                      <td className="px-6 py-4 text-xs whitespace-nowrap text-gray-500">
-                        {new Date(workflow.createdAt).toLocaleDateString()}
-                      </td>
-                      <td
-                        className="px-6 py-4 text-center whitespace-nowrap"
-                        onClick={(e) => {
-                          // Empêche la navigation vers la page de détail
-                          e.stopPropagation();
-                        }}
+                        <p className="mt-1.5 text-[11px] leading-relaxed text-gray-500">
+                          {item.desc}
+                        </p>
+                      </div>
+                    ))}
+                  </div>
+                </div>
+
+                {/* Conditions */}
+                <div className="mt-5">
+                  <h3 className="flex items-center gap-2 text-xs font-semibold tracking-wide text-blue-600 uppercase">
+                    <Filter className="h-4 w-4" />
+                    Conditions sur les actions
+                  </h3>
+                  <p className="mt-2 text-xs leading-relaxed text-gray-600">
+                    Chaque action peut être conditionnée pour ne s&apos;exécuter que si le contact
+                    remplit certains critères au moment du traitement :
+                  </p>
+                  <ul className="mt-2 space-y-1.5 text-xs text-gray-600">
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-400" />
+                      <span>
+                        <strong>Statut du contact</strong> -- l&apos;action s&apos;exécute
+                        uniquement si le statut du contact est (ou n&apos;est pas) égal à un statut
+                        donné.
+                      </span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-400" />
+                      <span>
+                        <strong>Origine du contact</strong> -- filtrer par origine (ex. &laquo; Site
+                        web &raquo;, &laquo; Facebook &raquo;).
+                      </span>
+                    </li>
+                    <li className="flex items-start gap-2">
+                      <span className="mt-0.5 h-1.5 w-1.5 shrink-0 rounded-full bg-blue-400" />
+                      <span>
+                        <strong>Société</strong> -- exécuter uniquement si le contact est (ou
+                        n&apos;est pas) rattaché à une société.
+                      </span>
+                    </li>
+                  </ul>
+                </div>
+
+                {/* Exemples */}
+                <div className="mt-5 rounded-xl border border-dashed border-blue-200 bg-blue-50/30 p-4">
+                  <h3 className="text-xs font-semibold text-blue-700">
+                    Exemples de workflows courants
+                  </h3>
+                  <ul className="mt-2 space-y-2 text-xs leading-relaxed text-blue-900/70">
+                    <li>
+                      <strong>Séquence de bienvenue :</strong> Déclencheur &laquo; Contact créé
+                      &raquo; &rarr; Envoyer un email de bienvenue &rarr; Attendre 2 jours &rarr;
+                      Créer une tâche d&apos;appel pour le commercial.
+                    </li>
+                    <li>
+                      <strong>Relance automatique :</strong> Déclencheur &laquo; Basé sur le temps
+                      &raquo; (7 jours sans interaction) &rarr; Envoyer un email de relance &rarr;
+                      Ajouter une note dans l&apos;historique.
+                    </li>
+                    <li>
+                      <strong>Qualification post-signature :</strong> Déclencheur &laquo; Statut
+                      transaction &raquo; vers &laquo; Signée &raquo; &rarr; Changer le statut du
+                      contact en &laquo; Client &raquo; &rarr; Notifier le manager.
+                    </li>
+                    <li>
+                      <strong>Réassignation intelligente :</strong> Déclencheur &laquo; Tâche
+                      complétée &raquo; (type Appel) &rarr; Si statut &ne; &laquo; Qualifié &raquo;,
+                      assigner à un autre commercial.
+                    </li>
+                  </ul>
+                </div>
+              </div>
+            )}
+          </div>
+
+          {loading ? (
+            <PageLoader text="Chargement des workflows..." />
+          ) : workflows.length === 0 ? (
+            <div className="rounded-xl bg-white p-12 text-center shadow-sm">
+              <p className="text-gray-500">Aucun workflow créé pour le moment.</p>
+              {canCreate && (
+                <button
+                  onClick={() => router.push('/automatisation/new')}
+                  className="mt-4 inline-flex cursor-pointer items-center gap-2 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white shadow-sm transition-colors hover:bg-blue-700"
+                >
+                  <Plus className="h-4 w-4" />
+                  Créer votre premier workflow
+                </button>
+              )}
+            </div>
+          ) : (
+            <div className="rounded-xl border border-gray-200 bg-white shadow-sm">
+              <div className="flex flex-col gap-3 border-b border-gray-100 px-4 py-3 sm:flex-row sm:items-center sm:justify-between sm:px-6">
+                <div className="flex items-center gap-2 text-sm text-gray-500">
+                  <span className="font-medium text-gray-900">Automatisations</span>
+                  <span className="rounded-full bg-gray-100 px-2 py-0.5 text-xs">
+                    {workflows.length}
+                  </span>
+                </div>
+                <div className="relative w-full max-w-xs">
+                  <Search className="pointer-events-none absolute top-2.5 left-3 h-4 w-4 text-gray-400" />
+                  <input
+                    type="text"
+                    value={search}
+                    onChange={(e) => setSearch(e.target.value)}
+                    placeholder="Rechercher une automatisation..."
+                    className="w-full rounded-full border border-gray-200 bg-gray-50 py-2 pr-3 pl-9 text-sm text-gray-900 placeholder:text-gray-400 focus:bg-white focus:ring-2 focus:ring-gray-400/30 focus:outline-none"
+                  />
+                </div>
+              </div>
+
+              <div className="overflow-x-auto">
+                <table className="min-w-full divide-y divide-gray-100 text-sm">
+                  <thead className="bg-gray-50/60">
+                    <tr>
+                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Nom
+                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Déclencheur
+                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Actions
+                      </th>
+                      <th className="px-6 py-3 text-left text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Créé le
+                      </th>
+                      <th className="px-6 py-3 text-center text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Statut
+                      </th>
+                      <th className="px-4 py-3 text-right text-xs font-medium tracking-wide text-gray-500 uppercase">
+                        Actions
+                      </th>
+                    </tr>
+                  </thead>
+                  <tbody className="divide-y divide-gray-100">
+                    {filteredWorkflows.map((workflow) => (
+                      <tr
+                        key={workflow.id}
+                        className="group cursor-pointer transition-colors hover:bg-blue-50/40"
+                        onClick={() => router.push(`/automatisation/${workflow.id}`)}
                       >
-                        <div className="flex items-center justify-center gap-2">
-                          <button
-                            type="button"
-                            aria-label={
-                              workflow.active ? 'Désactiver le workflow' : 'Activer le workflow'
-                            }
-                            onClick={() => handleToggleActive(workflow)}
-                            className={cn(
-                              'relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full border transition-colors',
-                              workflow.active
-                                ? 'border-green-500 bg-green-500'
-                                : 'border-gray-300 bg-gray-200',
+                        <td className="px-6 py-4 whitespace-nowrap">
+                          <div className="flex flex-col">
+                            <span className="font-medium text-gray-900">{workflow.name}</span>
+                            {workflow.description && (
+                              <span className="mt-0.5 line-clamp-1 text-xs text-gray-500">
+                                {workflow.description}
+                              </span>
+                            )}
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-gray-700">
+                          <div className="flex items-center gap-2">
+                            <span className="rounded-full bg-gray-100 px-2.5 py-0.5 text-xs font-medium text-gray-700">
+                              {getTriggerLabel(workflow.triggerType)}
+                            </span>
+                            {workflow.triggerType === 'STATUS_CHANGED' && (
+                              <span className="text-xs text-gray-500">
+                                {statuses.find((s) => s.id === workflow.triggerFromStatusId)
+                                  ?.name ?? 'Tous'}{' '}
+                                →{' '}
+                                {statuses.find((s) => s.id === workflow.triggerToStatusId)?.name ??
+                                  'Tous'}
+                              </span>
                             )}
-                          >
+                          </div>
+                        </td>
+                        <td className="px-6 py-4 whitespace-nowrap text-gray-700">
+                          <span className="inline-flex items-center rounded-full bg-blue-50 px-2.5 py-0.5 text-xs font-medium text-blue-700">
+                            {workflow.actions.length} action(s)
+                          </span>
+                        </td>
+                        <td className="px-6 py-4 text-xs whitespace-nowrap text-gray-500">
+                          {new Date(workflow.createdAt).toLocaleDateString()}
+                        </td>
+                        <td
+                          className="px-6 py-4 text-center whitespace-nowrap"
+                          onClick={(e) => {
+                            // Empêche la navigation vers la page de détail
+                            e.stopPropagation();
+                          }}
+                        >
+                          <div className="flex items-center justify-center gap-2">
+                            <button
+                              type="button"
+                              aria-label={
+                                workflow.active ? 'Désactiver le workflow' : 'Activer le workflow'
+                              }
+                              onClick={() => handleToggleActive(workflow)}
+                              className={cn(
+                                'relative inline-flex h-5 w-9 cursor-pointer items-center rounded-full border transition-colors',
+                                workflow.active
+                                  ? 'border-green-500 bg-green-500'
+                                  : 'border-gray-300 bg-gray-200',
+                              )}
+                            >
+                              <span
+                                className={cn(
+                                  'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
+                                  workflow.active ? 'translate-x-4' : 'translate-x-1',
+                                )}
+                              />
+                            </button>
                             <span
                               className={cn(
-                                'inline-block h-4 w-4 transform rounded-full bg-white shadow transition-transform',
-                                workflow.active ? 'translate-x-4' : 'translate-x-1',
+                                'text-xs font-medium',
+                                workflow.active ? 'text-green-600' : 'text-gray-500',
                               )}
-                            />
-                          </button>
-                          <span
-                            className={cn(
-                              'text-xs font-medium',
-                              workflow.active ? 'text-green-600' : 'text-gray-500',
+                            >
+                              {workflow.active ? 'Actif' : 'Inactif'}
+                            </span>
+                          </div>
+                        </td>
+                        <td
+                          className="px-4 py-4 text-right whitespace-nowrap"
+                          onClick={(e) => e.stopPropagation()}
+                        >
+                          <div className="flex items-center justify-end gap-1">
+                            {canDelete && (
+                              <button
+                                type="button"
+                                onClick={() => handleDelete(workflow.id)}
+                                className="inline-flex cursor-pointer items-center rounded-lg px-2 py-1 text-xs text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600"
+                              >
+                                <Trash2 className="mr-1 h-4 w-4" />
+                                Supprimer
+                              </button>
                             )}
-                          >
-                            {workflow.active ? 'Actif' : 'Inactif'}
-                          </span>
-                        </div>
-                      </td>
-                      <td
-                        className="px-4 py-4 text-right whitespace-nowrap"
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        <div className="flex items-center justify-end gap-1">
-                          <button
-                            type="button"
-                            onClick={() => handleDelete(workflow.id)}
-                            className="inline-flex cursor-pointer items-center rounded-lg px-2 py-1 text-xs text-gray-500 transition-colors hover:bg-red-50 hover:text-red-600"
-                          >
-                            <Trash2 className="mr-1 h-4 w-4" />
-                            Supprimer
-                          </button>
-                        </div>
-                      </td>
-                    </tr>
-                  ))}
-                </tbody>
-              </table>
+                          </div>
+                        </td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              </div>
             </div>
-          </div>
-        )}
+          )}
+        </div>
       </div>
-    </div>
+      <ConfirmDialog />
+    </ProtectedPage>
   );
 }