create-crm-tmp 1.0.0

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

@@ -0,0 +1,20 @@
+'use client';
+
+import { PageHeader } from '@/components/page-header';
+import { WorkflowEditor } from '../_components/workflow-editor';
+
+export default function NewWorkflowPage() {
+  return (
+    <div className="h-full">
+      <PageHeader
+        title="Nouvelle automatisation"
+        description="Créez un nouveau workflow d'automatisation étape par étape."
+      />
+      <div className="p-4 sm:p-6 lg:p-8">
+        <WorkflowEditor />
+      </div>
+    </div>
+  );
+}
+
+

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

@@ -0,0 +1,337 @@
+'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 { cn } from '@/lib/utils';
+
+interface Status {
+  id: string;
+  name: string;
+  color: string;
+}
+
+interface Workflow {
+  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: { id: string }[];
+  createdAt: string;
+  updatedAt: string;
+}
+
+export default function AutomatisationPage() {
+  const router = useRouter();
+  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('');
+
+  async function fetchWorkflows() {
+    try {
+      setLoading(true);
+      const response = await fetch('/api/workflows');
+      if (!response.ok) {
+        throw new Error('Erreur lors du chargement des workflows');
+      }
+      const data = await response.json();
+      setWorkflows(data);
+    } catch (err: any) {
+      console.error('Erreur lors du chargement des workflows:', err);
+      setError(err.message || 'Erreur lors du chargement des workflows');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function fetchStatuses() {
+    try {
+      const response = await fetch('/api/settings/statuses');
+      if (!response.ok) return;
+      const data = await response.json();
+      setStatuses(data);
+    } catch (err) {
+      console.error('Erreur lors du chargement des statuts:', err);
+    }
+  }
+
+  useEffect(() => {
+    fetchWorkflows();
+    fetchStatuses();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const handleDelete = async (id: string) => {
+    if (!confirm('Voulez-vous vraiment supprimer ce workflow ?')) {
+      return;
+    }
+
+    try {
+      const response = await fetch(`/api/workflows/${id}`, {
+        method: 'DELETE',
+      });
+
+      if (!response.ok) {
+        throw new Error('Erreur lors de la suppression');
+      }
+
+      setSuccess('Workflow supprimé avec succès');
+      fetchWorkflows();
+      setTimeout(() => setSuccess(''), 5000);
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la suppression');
+    }
+  };
+
+  const handleToggleActive = async (workflow: Workflow) => {
+    try {
+      const response = await fetch(`/api/workflows/${workflow.id}`, {
+        method: 'PUT',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...workflow,
+          active: !workflow.active,
+          actions: workflow.actions.map((action, index) => ({
+            ...action,
+            order: index,
+          })),
+        }),
+      });
+
+      if (!response.ok) {
+        throw new Error('Erreur lors de la mise à jour');
+      }
+
+      fetchWorkflows();
+    } catch (err: any) {
+      setError(err.message || 'Erreur lors de la mise à jour');
+    }
+  };
+  const getTriggerLabel = (triggerType: Workflow['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 '';
+    }
+  };
+
+  const filteredWorkflows = workflows.filter((workflow) => {
+    if (!search.trim()) return true;
+    const term = search.toLowerCase();
+    return (
+      workflow.name.toLowerCase().includes(term) ||
+      (workflow.description ?? '').toLowerCase().includes(term)
+    );
+  });
+
+  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>
+        )}
+
+        {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>
+        )}
+
+        {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>
+            <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"
+            >
+              <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>
+            </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-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>
+                          )}
+                        </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-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();
+                        }}
+                      >
+                        <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(
+                              '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">
+                          <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>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}