create-crm-tmp 2.0.0 → 2.1.0

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

@@ -0,0 +1,1291 @@
+'use client';
+
+import { useState } from 'react';
+import { notFound } from 'next/navigation';
+import { useAppToast } from '@/contexts/app-toast-context';
+import { requestRemindersRefresh } from '@/lib/reminder-state';
+import { devToast } from '@/lib/utils';
+import {
+  Bell,
+  Plus,
+  Trash2,
+  RefreshCw,
+  Clock,
+  Zap,
+  FlaskConical,
+  Search,
+  Send,
+  User,
+  Building2,
+  Shield,
+  ScrollText,
+  Play,
+  Mail,
+} from 'lucide-react';
+
+const isDevMode = process.env.NODE_ENV === 'development';
+
+// ─── Types ───────────────────────────────────────────────────────────────────
+
+interface CreatedTask {
+  id: string;
+  type: string;
+  title: string;
+  scheduledAt: string;
+  reminderMinutesBefore: number;
+}
+
+interface CreatedContact {
+  id: string;
+  firstName: string | null;
+  lastName: string | null;
+  phone: string;
+}
+
+interface CreatedCompany {
+  id: string;
+  name: string;
+}
+
+interface AuditLog {
+  id: string;
+  action: string;
+  entityType: string;
+  entityId: string | null;
+  metadata: Record<string, unknown> | null;
+  createdAt: string;
+  actor: { name: string } | null;
+}
+
+interface Workflow {
+  id: string;
+  name: string;
+}
+
+// ─── Composant Section (wrapper réutilisable) ───────────────────────────────
+
+function Section({
+  title,
+  icon: Icon,
+  children,
+  className = '',
+}: {
+  title: string;
+  icon: React.ComponentType<{ className?: string }>;
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <section className={`rounded-xl border border-gray-200 bg-white p-5 shadow-sm ${className}`}>
+      <h2 className="mb-4 flex items-center gap-2 text-base font-semibold text-gray-900">
+        <Icon className="h-4 w-4" />
+        {title}
+      </h2>
+      {children}
+    </section>
+  );
+}
+
+// ─── Page ────────────────────────────────────────────────────────────────────
+
+export default function DevToolsPage() {
+  if (!isDevMode) notFound();
+
+  const toast = useAppToast();
+
+  // --- Task / Reminder state ---
+  const [reminderMinutes, setReminderMinutes] = useState(1);
+  const [taskInMinutes, setTaskInMinutes] = useState(2);
+  const [taskType, setTaskType] = useState('CALL');
+  const [taskTitle, setTaskTitle] = useState('Test rappel dev');
+  const [taskPriority, setTaskPriority] = useState('HIGH');
+  const [creating, setCreating] = useState(false);
+  const [createdTasks, setCreatedTasks] = useState<CreatedTask[]>([]);
+  const [reminders, setReminders] = useState<any[]>([]);
+  const [loadingReminders, setLoadingReminders] = useState(false);
+
+  // --- Dev reminder test state (from settings) ---
+  const [devReminderLoading, setDevReminderLoading] = useState(false);
+  const [devReminderForm, setDevReminderForm] = useState({
+    title: 'Rappel de test',
+    reminderMinutesBefore: 1,
+    offsetMinutes: 2,
+    sendNow: false,
+  });
+  const [devContactSearch, setDevContactSearch] = useState('');
+  const [devContactLoading, setDevContactLoading] = useState(false);
+  const [devContactResults, setDevContactResults] = useState<
+    Array<{ id: string; firstName: string | null; lastName: string | null; phone: string }>
+  >([]);
+  const [devSelectedContact, setDevSelectedContact] = useState<{
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+    phone: string;
+  } | null>(null);
+
+  // --- Quick contact creation ---
+  const [contactForm, setContactForm] = useState({ firstName: '', lastName: '', phone: '', email: '' });
+  const [contactCreating, setContactCreating] = useState(false);
+  const [createdContacts, setCreatedContacts] = useState<CreatedContact[]>([]);
+
+  // --- Quick company creation ---
+  const [companyForm, setCompanyForm] = useState({ name: '', phone: '', email: '' });
+  const [companyCreating, setCompanyCreating] = useState(false);
+  const [createdCompanies, setCreatedCompanies] = useState<CreatedCompany[]>([]);
+
+  // --- Workflow trigger ---
+  const [workflowContactSearch, setWorkflowContactSearch] = useState('');
+  const [workflowContactResults, setWorkflowContactResults] = useState<
+    Array<{ id: string; firstName: string | null; lastName: string | null; phone: string }>
+  >([]);
+  const [workflowSelectedContact, setWorkflowSelectedContact] = useState<{
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+  } | null>(null);
+  const [availableWorkflows, setAvailableWorkflows] = useState<Workflow[]>([]);
+  const [workflowLoading, setWorkflowLoading] = useState(false);
+
+  // --- SMTP test ---
+  const [smtpTesting, setSmtpTesting] = useState(false);
+  const [smtpConfig, setSmtpConfig] = useState<{
+    host: string;
+    port: number;
+    secure: boolean;
+    username: string;
+    fromEmail: string;
+    fromName: string;
+    signature: string | null;
+  } | null>(null);
+  const [smtpLoaded, setSmtpLoaded] = useState(false);
+  const [smtpPassword, setSmtpPassword] = useState('');
+
+  // --- Permissions ---
+  const [userInfo, setUserInfo] = useState<any>(null);
+  const [loadingUser, setLoadingUser] = useState(false);
+
+  // --- Audit logs ---
+  const [auditLogs, setAuditLogs] = useState<AuditLog[]>([]);
+  const [loadingAudit, setLoadingAudit] = useState(false);
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Handlers
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  // --- Task creation (via /api/tasks) ---
+  const createTestTask = async () => {
+    setCreating(true);
+    try {
+      const scheduledAt = new Date(Date.now() + taskInMinutes * 60 * 1000);
+      const res = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: taskType,
+          title: taskTitle || `Test ${taskType} - rappel ${reminderMinutes}min`,
+          description: `<p>Tâche de test créée depuis /dev. Programmée dans ${taskInMinutes} min, rappel ${reminderMinutes} min avant.</p>`,
+          scheduledAt: scheduledAt.toISOString(),
+          reminderMinutesBefore: reminderMinutes,
+          priority: taskPriority,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || 'Erreur lors de la création');
+        return;
+      }
+      setCreatedTasks((prev) => [
+        {
+          id: data.id,
+          type: data.type,
+          title: data.title || data.type,
+          scheduledAt: data.scheduledAt,
+          reminderMinutesBefore: data.reminderMinutesBefore,
+        },
+        ...prev,
+      ]);
+      const reminderAt = new Date(scheduledAt.getTime() - reminderMinutes * 60 * 1000);
+      const secsUntilReminder = Math.round((reminderAt.getTime() - Date.now()) / 1000);
+      toast.success(
+        `Tâche créée. Rappel dans ${secsUntilReminder > 0 ? `${secsUntilReminder}s` : 'maintenant (déjà passé)'}`,
+      );
+    } catch (err: any) {
+      toast.error(err.message || 'Erreur réseau');
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const createQuickReminder = async (label: string, taskMin: number, reminderMin: number) => {
+    setCreating(true);
+    try {
+      const scheduledAt = new Date(Date.now() + taskMin * 60 * 1000);
+      const res = await fetch('/api/tasks', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          type: 'CALL',
+          title: label,
+          description: `<p>Quick test: ${label}</p>`,
+          scheduledAt: scheduledAt.toISOString(),
+          reminderMinutesBefore: reminderMin,
+          priority: 'HIGH',
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || 'Erreur');
+        return;
+      }
+      setCreatedTasks((prev) => [
+        {
+          id: data.id,
+          type: data.type,
+          title: data.title,
+          scheduledAt: data.scheduledAt,
+          reminderMinutesBefore: data.reminderMinutesBefore,
+        },
+        ...prev,
+      ]);
+      toast.success(`"${label}" créé`);
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setCreating(false);
+    }
+  };
+
+  const fetchReminders = async () => {
+    setLoadingReminders(true);
+    try {
+      const res = await fetch('/api/reminders');
+      const data = await res.json();
+      setReminders(Array.isArray(data) ? data : []);
+      toast.info(`${Array.isArray(data) ? data.length : 0} rappel(s) trouvé(s)`);
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setLoadingReminders(false);
+    }
+  };
+
+  const deleteTask = async (taskId: string) => {
+    try {
+      const res = await fetch(`/api/tasks/${taskId}`, { method: 'DELETE' });
+      if (res.ok) {
+        setCreatedTasks((prev) => prev.filter((t) => t.id !== taskId));
+        toast.success('Tâche supprimée');
+      } else {
+        const data = await res.json();
+        toast.error(data.error || 'Erreur suppression');
+      }
+    } catch (err: any) {
+      toast.error(err.message);
+    }
+  };
+
+  // --- Dev reminder test (from settings, via /api/dev/reminders/test) ---
+  const handleCreateDevReminder = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    const offsetMinutes = Number(devReminderForm.offsetMinutes);
+    const reminderMinutesBefore = Number(devReminderForm.reminderMinutesBefore);
+    if (Number.isNaN(offsetMinutes) || offsetMinutes < 1) {
+      toast.error("Le délai avant l'échéance doit être d'au moins 1 minute.");
+      return;
+    }
+    if (Number.isNaN(reminderMinutesBefore) || reminderMinutesBefore < 1) {
+      toast.error('Le rappel doit être supérieur ou égal à 1 minute.');
+      return;
+    }
+    setDevReminderLoading(true);
+    try {
+      const scheduledAt = new Date(Date.now() + offsetMinutes * 60 * 1000).toISOString();
+      const response = await fetch('/api/dev/reminders/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          title: devReminderForm.title,
+          reminderMinutesBefore,
+          scheduledAt,
+          sendNow: devReminderForm.sendNow,
+          contactId: devSelectedContact?.id ?? undefined,
+        }),
+      });
+      const data = await response.json();
+      if (!response.ok) {
+        throw new Error(data.error || 'Impossible de créer le rappel de test.');
+      }
+      toast.success('Rappel de test créé.');
+      requestRemindersRefresh();
+      if (data.immediateNotification?.message) {
+        toast.persistent(data.immediateNotification.tone ?? 'warning', data.immediateNotification.message, {
+          actionLink: data.immediateNotification.link,
+          actionLabel: data.immediateNotification.actionLabel,
+        });
+      }
+    } catch (error) {
+      toast.error(devToast('Impossible de créer le rappel.', error));
+    } finally {
+      setDevReminderLoading(false);
+    }
+  };
+
+  const handleSearchContacts = async (
+    search: string,
+    setResults: (r: Array<{ id: string; firstName: string | null; lastName: string | null; phone: string }>) => void,
+    setLoading: (l: boolean) => void,
+  ) => {
+    const trimmed = search.trim();
+    if (!trimmed) {
+      setResults([]);
+      return;
+    }
+    setLoading(true);
+    try {
+      const response = await fetch(`/api/contacts?search=${encodeURIComponent(trimmed)}&page=1&limit=8`);
+      const data = await response.json();
+      if (!response.ok) throw new Error(data.error || 'Erreur recherche');
+      setResults(Array.isArray(data.contacts) ? data.contacts : []);
+    } catch (error) {
+      toast.error(devToast('Erreur recherche contacts.', error));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // --- Contact creation ---
+  const createContact = async () => {
+    if (!contactForm.phone.trim()) {
+      toast.error('Le téléphone est requis.');
+      return;
+    }
+    setContactCreating(true);
+    try {
+      const res = await fetch('/api/contacts', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          firstName: contactForm.firstName || undefined,
+          lastName: contactForm.lastName || undefined,
+          phone: contactForm.phone,
+          email: contactForm.email || undefined,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || 'Erreur création contact');
+        return;
+      }
+      setCreatedContacts((prev) => [
+        { id: data.id, firstName: data.firstName, lastName: data.lastName, phone: data.phone },
+        ...prev,
+      ]);
+      toast.success(`Contact "${data.firstName || ''} ${data.lastName || ''}".trim() créé`);
+      setContactForm({ firstName: '', lastName: '', phone: '', email: '' });
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setContactCreating(false);
+    }
+  };
+
+  // --- Company creation ---
+  const createCompany = async () => {
+    if (!companyForm.name.trim()) {
+      toast.error('Le nom est requis.');
+      return;
+    }
+    setCompanyCreating(true);
+    try {
+      const res = await fetch('/api/companies', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          name: companyForm.name,
+          phone: companyForm.phone || undefined,
+          email: companyForm.email || undefined,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || 'Erreur création entreprise');
+        return;
+      }
+      setCreatedCompanies((prev) => [{ id: data.id, name: data.name }, ...prev]);
+      toast.success(`Entreprise "${data.name}" créée`);
+      setCompanyForm({ name: '', phone: '', email: '' });
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setCompanyCreating(false);
+    }
+  };
+
+  // --- Workflow trigger ---
+  const searchWorkflowContacts = async () => {
+    await handleSearchContacts(workflowContactSearch, setWorkflowContactResults, () => {});
+  };
+
+  const selectWorkflowContact = async (contact: { id: string; firstName: string | null; lastName: string | null }) => {
+    setWorkflowSelectedContact(contact);
+    setWorkflowContactResults([]);
+    try {
+      const res = await fetch(`/api/contacts/${contact.id}/workflows/run`);
+      const data = await res.json();
+      setAvailableWorkflows(Array.isArray(data) ? data : []);
+    } catch {
+      setAvailableWorkflows([]);
+    }
+  };
+
+  const triggerWorkflow = async (workflowId: string) => {
+    if (!workflowSelectedContact) return;
+    setWorkflowLoading(true);
+    try {
+      const res = await fetch(`/api/contacts/${workflowSelectedContact.id}/workflows/run`, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ workflowId }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        toast.error(data.error || 'Erreur exécution workflow');
+        return;
+      }
+      toast.success(data.message || 'Workflow exécuté');
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setWorkflowLoading(false);
+    }
+  };
+
+  // --- SMTP test ---
+  const loadSmtpConfig = async () => {
+    try {
+      const res = await fetch('/api/settings/smtp');
+      const data = await res.json();
+      if (data && data.host) {
+        setSmtpConfig(data);
+        setSmtpLoaded(true);
+      } else {
+        toast.warning('Aucune configuration SMTP trouvée. Configurez-la dans Paramètres > Système.');
+        setSmtpLoaded(true);
+      }
+    } catch (err: any) {
+      toast.error(err.message);
+    }
+  };
+
+  const testSmtp = async () => {
+    if (!smtpConfig) {
+      toast.error('Aucune configuration SMTP disponible.');
+      return;
+    }
+    if (!smtpPassword) {
+      toast.error('Le mot de passe SMTP est requis pour tester.');
+      return;
+    }
+    setSmtpTesting(true);
+    try {
+      const res = await fetch('/api/settings/smtp/test', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({
+          ...smtpConfig,
+          password: smtpPassword,
+        }),
+      });
+      const data = await res.json();
+      if (data.success) {
+        toast.success(data.message || 'Connexion SMTP réussie — email de test envoyé');
+      } else {
+        toast.error(data.error || data.message || 'Erreur SMTP');
+      }
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setSmtpTesting(false);
+    }
+  };
+
+  // --- Current user permissions ---
+  const fetchUserInfo = async () => {
+    setLoadingUser(true);
+    try {
+      const res = await fetch('/api/users/me');
+      const data = await res.json();
+      setUserInfo(data);
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setLoadingUser(false);
+    }
+  };
+
+  // --- Audit logs ---
+  const fetchAuditLogs = async () => {
+    setLoadingAudit(true);
+    try {
+      const res = await fetch('/api/audit-logs?limit=10');
+      const data = await res.json();
+      setAuditLogs(Array.isArray(data) ? data : []);
+      toast.info(`${Array.isArray(data) ? data.length : 0} log(s) trouvé(s)`);
+    } catch (err: any) {
+      toast.error(err.message);
+    } finally {
+      setLoadingAudit(false);
+    }
+  };
+
+  // ═══════════════════════════════════════════════════════════════════════════
+  // Render
+  // ═══════════════════════════════════════════════════════════════════════════
+
+  return (
+    <div className="mx-auto max-w-3xl space-y-8 p-6">
+      {/* ── Header ─────────────────────────────────────────────────────────── */}
+      <div className="flex items-center gap-3">
+        <FlaskConical className="h-7 w-7 text-purple-600" />
+        <div>
+          <h1 className="text-2xl font-bold text-gray-900">Outils de développement</h1>
+          <p className="text-sm text-gray-500">
+            Page de dev pour tester rappels, toasts, contacts, workflows et plus.
+          </p>
+        </div>
+      </div>
+
+      {/* ── B. Presets rapides ──────────────────────────────────────────────── */}
+      <section className="ui-slide-up rounded-xl border border-purple-200 bg-purple-50 p-5">
+        <h2 className="mb-3 flex items-center gap-2 text-base font-semibold text-purple-900">
+          <Zap className="h-4 w-4" />
+          Presets rapides
+        </h2>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => createQuickReminder('Rappel immédiat', 1, 1)}
+            disabled={creating}
+            className="rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-red-700 disabled:opacity-50"
+          >
+            Rappel immédiat (1min)
+          </button>
+          <button
+            onClick={() => createQuickReminder('Rappel dans 2min', 5, 3)}
+            disabled={creating}
+            className="rounded-lg bg-orange-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-orange-700 disabled:opacity-50"
+          >
+            Rappel dans 2min (tâche 5min)
+          </button>
+          <button
+            onClick={() => createQuickReminder('Rappel dans 5min', 10, 5)}
+            disabled={creating}
+            className="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground transition hover:bg-primary/90 disabled:opacity-50"
+          >
+            Rappel dans 5min (tâche 10min)
+          </button>
+          <button
+            onClick={() => createQuickReminder('Tâche déjà en rappel', 30, 60)}
+            disabled={creating}
+            className="rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white transition hover:bg-green-700 disabled:opacity-50"
+          >
+            Rappel déjà passé (tâche 30min)
+          </button>
+        </div>
+      </section>
+
+      {/* ── C. Création tâche personnalisée ─────────────────────────────────── */}
+      <Section title="Créer une tâche avec rappel" icon={Plus}>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Type</label>
+            <select
+              value={taskType}
+              onChange={(e) => setTaskType(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            >
+              <option value="CALL">Appel</option>
+              <option value="MEETING">Rendez-vous</option>
+              <option value="EMAIL">Email</option>
+              <option value="VIDEO_CONFERENCE">Visioconférence</option>
+              <option value="TASK">Tâche</option>
+              <option value="OTHER">Autre</option>
+            </select>
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Priorité</label>
+            <select
+              value={taskPriority}
+              onChange={(e) => setTaskPriority(e.target.value)}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            >
+              <option value="LOW">Basse</option>
+              <option value="MEDIUM">Moyenne</option>
+              <option value="HIGH">Haute</option>
+              <option value="URGENT">Urgente</option>
+            </select>
+          </div>
+          <div className="col-span-2">
+            <label className="mb-1 block text-sm font-medium text-gray-700">Titre</label>
+            <input
+              type="text"
+              value={taskTitle}
+              onChange={(e) => setTaskTitle(e.target.value)}
+              placeholder="Titre de la tâche..."
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              <Clock className="mr-1 inline h-3.5 w-3.5" />
+              Tâche dans (minutes)
+            </label>
+            <input
+              type="number"
+              min={1}
+              max={1440}
+              value={taskInMinutes}
+              onChange={(e) => setTaskInMinutes(Number(e.target.value))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              <Bell className="mr-1 inline h-3.5 w-3.5" />
+              Rappel (minutes avant)
+            </label>
+            <input
+              type="number"
+              min={0}
+              max={1440}
+              value={reminderMinutes}
+              onChange={(e) => setReminderMinutes(Number(e.target.value))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+        <div className="mt-4 flex items-center gap-3">
+          <button
+            onClick={createTestTask}
+            disabled={creating}
+            className="flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 disabled:opacity-50"
+          >
+            <Plus className="h-4 w-4" />
+            {creating ? 'Création...' : 'Créer la tâche'}
+          </button>
+          <span className="text-xs text-gray-500">
+            {reminderMinutes < taskInMinutes
+              ? `Le rappel se déclenchera dans ~${taskInMinutes - reminderMinutes} min`
+              : 'Le rappel sera immédiat (déjà passé)'}
+          </span>
+        </div>
+      </Section>
+
+      {/* ── D. Test rappel dev (from settings) ─────────────────────────────── */}
+      <Section title="Test rappel dev (API /api/dev/reminders/test)" icon={Bell}>
+        <form onSubmit={handleCreateDevReminder} className="space-y-4">
+          <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
+            <div className="md:col-span-3">
+              <label className="block text-sm font-medium text-gray-700">Titre</label>
+              <input
+                type="text"
+                value={devReminderForm.title}
+                onChange={(e) => setDevReminderForm((prev) => ({ ...prev, title: e.target.value }))}
+                className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                placeholder="Rappel de test"
+              />
+            </div>
+
+            <div className="space-y-3 md:col-span-3">
+              <label className="block text-sm font-medium text-gray-700">Contact lié (optionnel)</label>
+              <div className="flex gap-2">
+                <input
+                  type="text"
+                  value={devContactSearch}
+                  onChange={(e) => setDevContactSearch(e.target.value)}
+                  className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                  placeholder="Nom, prénom, email ou téléphone"
+                />
+                <button
+                  type="button"
+                  onClick={() => handleSearchContacts(devContactSearch, setDevContactResults, setDevContactLoading)}
+                  disabled={devContactLoading}
+                  className="cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 disabled:opacity-50"
+                >
+                  {devContactLoading ? 'Recherche...' : 'Rechercher'}
+                </button>
+              </div>
+              {devSelectedContact && (
+                <div className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-900">
+                  Contact sélectionné:{' '}
+                  <span className="font-medium">
+                    {`${devSelectedContact.firstName || ''} ${devSelectedContact.lastName || ''}`.trim() ||
+                      devSelectedContact.phone}
+                  </span>{' '}
+                  <button
+                    type="button"
+                    onClick={() => setDevSelectedContact(null)}
+                    className="ml-2 cursor-pointer text-blue-700 underline underline-offset-2"
+                  >
+                    Retirer
+                  </button>
+                </div>
+              )}
+              {!devSelectedContact && devContactResults.length > 0 && (
+                <div className="max-h-44 space-y-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
+                  {devContactResults.map((contact) => {
+                    const fullName =
+                      `${contact.firstName || ''} ${contact.lastName || ''}`.trim() || 'Contact sans nom';
+                    return (
+                      <button
+                        key={contact.id}
+                        type="button"
+                        onClick={() => setDevSelectedContact(contact)}
+                        className="w-full cursor-pointer rounded-md border border-gray-200 px-3 py-2 text-left text-sm transition-colors hover:bg-gray-50"
+                      >
+                        <p className="font-medium text-gray-900">{fullName}</p>
+                        <p className="text-xs text-gray-600">{contact.phone}</p>
+                      </button>
+                    );
+                  })}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Rappel (minutes avant)</label>
+              <input
+                type="number"
+                min={1}
+                value={devReminderForm.reminderMinutesBefore}
+                onChange={(e) =>
+                  setDevReminderForm((prev) => ({ ...prev, reminderMinutesBefore: Number(e.target.value) }))
+                }
+                className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="block text-sm font-medium text-gray-700">Échéance dans (minutes)</label>
+              <input
+                type="number"
+                min={1}
+                value={devReminderForm.offsetMinutes}
+                onChange={(e) =>
+                  setDevReminderForm((prev) => ({ ...prev, offsetMinutes: Number(e.target.value) }))
+                }
+                className="mt-1 w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+              />
+            </div>
+            <div className="flex items-center gap-3 pt-6">
+              <label className="relative inline-flex cursor-pointer items-center">
+                <input
+                  aria-label="Envoyer une notification immédiate"
+                  type="checkbox"
+                  checked={devReminderForm.sendNow}
+                  onChange={(e) => setDevReminderForm((prev) => ({ ...prev, sendNow: e.target.checked }))}
+                  className="peer sr-only"
+                />
+                <div className="peer h-5 w-9 rounded-full bg-gray-200 peer-checked:bg-blue-600 peer-focus:ring-2 peer-focus:ring-gray-400/30 after:absolute after:top-[2px] after:left-[2px] after:h-4 after:w-4 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-transform after:content-[''] peer-checked:after:translate-x-full peer-checked:after:border-white" />
+              </label>
+              <span className="text-sm text-gray-700">Notification immédiate</span>
+            </div>
+          </div>
+          <div className="flex justify-end">
+            <button
+              type="submit"
+              disabled={devReminderLoading}
+              className="cursor-pointer rounded-lg bg-blue-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-blue-700 disabled:opacity-50"
+            >
+              {devReminderLoading ? 'Création...' : 'Créer un rappel de test'}
+            </button>
+          </div>
+        </form>
+      </Section>
+
+      {/* ── E. Rappels actifs ──────────────────────────────────────────────── */}
+      <Section title="Rappels actifs (API /api/reminders)" icon={Bell}>
+        <div className="mb-4 flex items-center justify-between">
+          <button
+            onClick={fetchReminders}
+            disabled={loadingReminders}
+            className="flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50"
+          >
+            <RefreshCw className={`h-3.5 w-3.5 ${loadingReminders ? 'animate-spin' : ''}`} />
+            Rafraîchir
+          </button>
+        </div>
+        {reminders.length === 0 ? (
+          <p className="text-sm text-gray-500">
+            Aucun rappel. Cliquez sur &quot;Rafraîchir&quot; pour charger.
+          </p>
+        ) : (
+          <div className="space-y-2">
+            {reminders.map((r: any) => {
+              const reminderTime = new Date(r.reminderTime);
+              const scheduledAt = new Date(r.scheduledAt);
+              const now = new Date();
+              const isActive = reminderTime <= now && now < scheduledAt;
+              const isPast = now >= scheduledAt;
+              return (
+                <div
+                  key={r.id}
+                  className={`flex items-center justify-between rounded-lg border p-3 text-sm ${
+                    isActive
+                      ? 'border-orange-300 bg-orange-50'
+                      : isPast
+                        ? 'border-gray-200 bg-gray-50 opacity-60'
+                        : 'border-blue-200 bg-blue-50'
+                  }`}
+                >
+                  <div>
+                    <div className="font-medium text-gray-900">
+                      {r.title || r.type}
+                      <span
+                        className={`ml-2 inline-block rounded-full px-2 py-0.5 text-xs font-medium ${
+                          r.priority === 'URGENT'
+                            ? 'bg-red-100 text-red-700'
+                            : r.priority === 'HIGH'
+                              ? 'bg-orange-100 text-orange-700'
+                              : r.priority === 'MEDIUM'
+                                ? 'bg-yellow-100 text-yellow-700'
+                                : 'bg-gray-100 text-gray-600'
+                        }`}
+                      >
+                        {r.priority}
+                      </span>
+                      {isActive && (
+                        <span className="ml-2 inline-block rounded-full bg-orange-200 px-2 py-0.5 text-xs font-medium text-orange-800">
+                          ACTIF
+                        </span>
+                      )}
+                    </div>
+                    <div className="mt-0.5 text-xs text-gray-500">
+                      Rappel: {reminderTime.toLocaleTimeString('fr-FR')} | Tâche:{' '}
+                      {scheduledAt.toLocaleTimeString('fr-FR')} | {r.reminderMinutesBefore}min avant
+                    </div>
+                    {r.contact && (
+                      <div className="mt-0.5 text-xs text-gray-400">
+                        Contact: {r.contact.firstName} {r.contact.lastName}
+                      </div>
+                    )}
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        )}
+      </Section>
+
+      {/* ── F. Tâches créées cette session ─────────────────────────────────── */}
+      {createdTasks.length > 0 && (
+        <Section title={`Tâches créées cette session (${createdTasks.length})`} icon={Clock}>
+          <div className="space-y-2">
+            {createdTasks.map((task) => {
+              const scheduledAt = new Date(task.scheduledAt);
+              const reminderAt = new Date(scheduledAt.getTime() - task.reminderMinutesBefore * 60 * 1000);
+              return (
+                <div
+                  key={task.id}
+                  className="flex items-center justify-between rounded-lg border border-gray-200 p-3 text-sm"
+                >
+                  <div>
+                    <div className="font-medium text-gray-900">{task.title}</div>
+                    <div className="text-xs text-gray-500">
+                      {task.type} | Tâche: {scheduledAt.toLocaleTimeString('fr-FR')} | Rappel:{' '}
+                      {reminderAt.toLocaleTimeString('fr-FR')} ({task.reminderMinutesBefore}min avant)
+                    </div>
+                  </div>
+                  <button
+                    onClick={() => deleteTask(task.id)}
+                    className="rounded-lg p-1.5 text-gray-400 transition hover:bg-red-50 hover:text-red-600"
+                    title="Supprimer"
+                  >
+                    <Trash2 className="h-4 w-4" />
+                  </button>
+                </div>
+              );
+            })}
+          </div>
+        </Section>
+      )}
+
+      {/* ── G. Création rapide de contact ──────────────────────────────────── */}
+      <Section title="Création rapide de contact" icon={User}>
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Prénom</label>
+            <input
+              type="text"
+              value={contactForm.firstName}
+              onChange={(e) => setContactForm((prev) => ({ ...prev, firstName: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Nom</label>
+            <input
+              type="text"
+              value={contactForm.lastName}
+              onChange={(e) => setContactForm((prev) => ({ ...prev, lastName: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Téléphone <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={contactForm.phone}
+              onChange={(e) => setContactForm((prev) => ({ ...prev, phone: e.target.value }))}
+              placeholder="06 12 34 56 78"
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Email</label>
+            <input
+              type="email"
+              value={contactForm.email}
+              onChange={(e) => setContactForm((prev) => ({ ...prev, email: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+        <button
+          onClick={createContact}
+          disabled={contactCreating}
+          className="mt-4 flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 disabled:opacity-50"
+        >
+          <Plus className="h-4 w-4" />
+          {contactCreating ? 'Création...' : 'Créer le contact'}
+        </button>
+        {createdContacts.length > 0 && (
+          <div className="mt-4 space-y-2">
+            {createdContacts.map((c) => (
+              <div key={c.id} className="rounded-lg border border-gray-200 px-3 py-2 text-sm">
+                <a href={`/contacts/${c.id}`} className="font-medium text-blue-600 hover:underline">
+                  {`${c.firstName || ''} ${c.lastName || ''}`.trim() || c.phone}
+                </a>
+                <span className="ml-2 text-xs text-gray-400">{c.id}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {/* ── H. Création rapide d'entreprise ────────────────────────────────── */}
+      <Section title="Création rapide d'entreprise" icon={Building2}>
+        <div className="grid grid-cols-3 gap-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">
+              Nom <span className="text-red-500">*</span>
+            </label>
+            <input
+              type="text"
+              value={companyForm.name}
+              onChange={(e) => setCompanyForm((prev) => ({ ...prev, name: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Téléphone</label>
+            <input
+              type="text"
+              value={companyForm.phone}
+              onChange={(e) => setCompanyForm((prev) => ({ ...prev, phone: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Email</label>
+            <input
+              type="email"
+              value={companyForm.email}
+              onChange={(e) => setCompanyForm((prev) => ({ ...prev, email: e.target.value }))}
+              className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+            />
+          </div>
+        </div>
+        <button
+          onClick={createCompany}
+          disabled={companyCreating}
+          className="mt-4 flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 disabled:opacity-50"
+        >
+          <Plus className="h-4 w-4" />
+          {companyCreating ? 'Création...' : "Créer l'entreprise"}
+        </button>
+        {createdCompanies.length > 0 && (
+          <div className="mt-4 space-y-2">
+            {createdCompanies.map((c) => (
+              <div key={c.id} className="rounded-lg border border-gray-200 px-3 py-2 text-sm">
+                <a href={`/contacts?entity=companies`} className="font-medium text-blue-600 hover:underline">
+                  {c.name}
+                </a>
+                <span className="ml-2 text-xs text-gray-400">{c.id}</span>
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {/* ── I. Déclenchement manuel de workflow ─────────────────────────────── */}
+      <Section title="Déclenchement manuel de workflow" icon={Play}>
+        <div className="space-y-4">
+          <div>
+            <label className="mb-1 block text-sm font-medium text-gray-700">Rechercher un contact</label>
+            <div className="flex gap-2">
+              <input
+                type="text"
+                value={workflowContactSearch}
+                onChange={(e) => setWorkflowContactSearch(e.target.value)}
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+                placeholder="Nom, téléphone, email..."
+              />
+              <button
+                onClick={searchWorkflowContacts}
+                className="rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50"
+              >
+                <Search className="h-4 w-4" />
+              </button>
+            </div>
+          </div>
+
+          {workflowContactResults.length > 0 && !workflowSelectedContact && (
+            <div className="max-h-44 space-y-2 overflow-y-auto rounded-lg border border-gray-200 p-2">
+              {workflowContactResults.map((c) => (
+                <button
+                  key={c.id}
+                  onClick={() => selectWorkflowContact(c)}
+                  className="w-full cursor-pointer rounded-md border border-gray-200 px-3 py-2 text-left text-sm hover:bg-gray-50"
+                >
+                  {`${c.firstName || ''} ${c.lastName || ''}`.trim() || c.phone}
+                </button>
+              ))}
+            </div>
+          )}
+
+          {workflowSelectedContact && (
+            <div className="rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-900">
+              Contact:{' '}
+              <span className="font-medium">
+                {`${workflowSelectedContact.firstName || ''} ${workflowSelectedContact.lastName || ''}`.trim()}
+              </span>{' '}
+              <button
+                onClick={() => {
+                  setWorkflowSelectedContact(null);
+                  setAvailableWorkflows([]);
+                }}
+                className="ml-2 cursor-pointer text-blue-700 underline underline-offset-2"
+              >
+                Changer
+              </button>
+            </div>
+          )}
+
+          {workflowSelectedContact && availableWorkflows.length === 0 && (
+            <p className="text-sm text-gray-500">Aucun workflow manuel disponible pour ce contact.</p>
+          )}
+
+          {availableWorkflows.length > 0 && (
+            <div className="space-y-2">
+              {availableWorkflows.map((wf) => (
+                <div key={wf.id} className="flex items-center justify-between rounded-lg border border-gray-200 p-3">
+                  <span className="text-sm font-medium text-gray-900">{wf.name}</span>
+                  <button
+                    onClick={() => triggerWorkflow(wf.id)}
+                    disabled={workflowLoading}
+                    className="rounded-lg bg-purple-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-purple-700 disabled:opacity-50"
+                  >
+                    <Play className="mr-1 inline h-3.5 w-3.5" />
+                    Exécuter
+                  </button>
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </Section>
+
+      {/* ── J. Test SMTP ───────────────────────────────────────────────────── */}
+      <Section title="Test SMTP" icon={Mail}>
+        <p className="mb-3 text-sm text-gray-500">
+          Teste la connexion SMTP configurée et envoie un email de test à votre adresse.
+        </p>
+        {!smtpLoaded ? (
+          <button
+            onClick={loadSmtpConfig}
+            className="flex items-center gap-2 rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition hover:bg-gray-50"
+          >
+            <RefreshCw className="h-4 w-4" />
+            Charger la configuration SMTP
+          </button>
+        ) : !smtpConfig ? (
+          <p className="text-sm text-yellow-600">
+            Aucune configuration SMTP trouvée. Configurez-la dans Paramètres &gt; Système.
+          </p>
+        ) : (
+          <div className="space-y-3">
+            <div className="rounded-lg border border-gray-200 p-3 text-sm">
+              <p><span className="font-medium">Serveur:</span> {smtpConfig.host}:{smtpConfig.port} ({smtpConfig.secure ? 'SSL' : 'STARTTLS'})</p>
+              <p><span className="font-medium">Utilisateur:</span> {smtpConfig.username}</p>
+              <p><span className="font-medium">Expéditeur:</span> {smtpConfig.fromName} &lt;{smtpConfig.fromEmail}&gt;</p>
+            </div>
+            <div>
+              <label className="mb-1 block text-sm font-medium text-gray-700">Mot de passe SMTP</label>
+              <input
+                type="password"
+                value={smtpPassword}
+                onChange={(e) => setSmtpPassword(e.target.value)}
+                placeholder="Entrez le mot de passe SMTP..."
+                className="w-full rounded-lg border border-gray-300 px-3 py-2 text-sm"
+              />
+            </div>
+            <button
+              onClick={testSmtp}
+              disabled={smtpTesting || !smtpPassword}
+              className="flex items-center gap-2 rounded-lg bg-gray-900 px-4 py-2 text-sm font-medium text-white transition hover:bg-gray-800 disabled:opacity-50"
+            >
+              <Send className="h-4 w-4" />
+              {smtpTesting ? 'Test en cours...' : 'Tester la connexion SMTP'}
+            </button>
+          </div>
+        )}
+      </Section>
+
+      {/* ── K. Permissions utilisateur courant ──────────────────────────────── */}
+      <Section title="Permissions utilisateur courant" icon={Shield}>
+        <button
+          onClick={fetchUserInfo}
+          disabled={loadingUser}
+          className="mb-4 flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50"
+        >
+          <RefreshCw className={`h-3.5 w-3.5 ${loadingUser ? 'animate-spin' : ''}`} />
+          Charger
+        </button>
+        {userInfo && (
+          <div className="space-y-3">
+            <div className="rounded-lg border border-gray-200 p-3 text-sm">
+              <p>
+                <span className="font-medium">Nom:</span> {userInfo.name}
+              </p>
+              <p>
+                <span className="font-medium">Email:</span> {userInfo.email}
+              </p>
+              <p>
+                <span className="font-medium">Rôle:</span> {userInfo.role}
+                {userInfo.customRole && ` (${userInfo.customRole.name})`}
+              </p>
+            </div>
+            {userInfo.customRole?.permissions && (
+              <div className="rounded-lg border border-gray-200 p-3">
+                <p className="mb-2 text-sm font-medium text-gray-700">
+                  Permissions ({userInfo.customRole.permissions.length})
+                </p>
+                <div className="flex flex-wrap gap-1">
+                  {userInfo.customRole.permissions.map((p: string) => (
+                    <span key={p} className="rounded-full bg-gray-100 px-2 py-0.5 text-xs text-gray-700">
+                      {p}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+          </div>
+        )}
+      </Section>
+
+      {/* ── L. Logs d'audit récents ────────────────────────────────────────── */}
+      <Section title="Logs d'audit récents" icon={ScrollText}>
+        <button
+          onClick={fetchAuditLogs}
+          disabled={loadingAudit}
+          className="mb-4 flex items-center gap-1.5 rounded-lg border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-700 transition hover:bg-gray-50 disabled:opacity-50"
+        >
+          <RefreshCw className={`h-3.5 w-3.5 ${loadingAudit ? 'animate-spin' : ''}`} />
+          Charger
+        </button>
+        {auditLogs.length === 0 ? (
+          <p className="text-sm text-gray-500">Aucun log. Cliquez sur &quot;Charger&quot;.</p>
+        ) : (
+          <div className="space-y-2">
+            {auditLogs.map((log) => (
+              <div key={log.id} className="rounded-lg border border-gray-200 p-3 text-sm">
+                <div className="flex items-center justify-between">
+                  <span className="font-medium text-gray-900">{log.action}</span>
+                  <span className="text-xs text-gray-400">
+                    {new Date(log.createdAt).toLocaleString('fr-FR')}
+                  </span>
+                </div>
+                <div className="mt-0.5 text-xs text-gray-500">
+                  {log.entityType}
+                  {log.entityId && ` #${log.entityId.slice(0, 8)}`}
+                  {log.actor && ` — par ${log.actor.name}`}
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </Section>
+
+      {/* ── M. Test des toasts ─────────────────────────────────────────────── */}
+      <Section title="Test des toasts" icon={Bell}>
+        <div className="flex flex-wrap gap-2">
+          <button
+            onClick={() => toast.success('Opération réussie')}
+            className="rounded-lg bg-green-600 px-3 py-2 text-sm font-medium text-white hover:bg-green-700"
+          >
+            Success
+          </button>
+          <button
+            onClick={() => toast.error('Une erreur est survenue')}
+            className="rounded-lg bg-red-600 px-3 py-2 text-sm font-medium text-white hover:bg-red-700"
+          >
+            Error
+          </button>
+          <button
+            onClick={() => toast.info('Information importante')}
+            className="rounded-lg bg-primary px-3 py-2 text-sm font-medium text-primary-foreground hover:bg-primary/90"
+          >
+            Info
+          </button>
+          <button
+            onClick={() => toast.warning('Attention requise')}
+            className="rounded-lg bg-yellow-600 px-3 py-2 text-sm font-medium text-white hover:bg-yellow-700"
+          >
+            Warning
+          </button>
+          <button
+            onClick={() => toast.errorConfigRequired('SMTP non configuré', '/settings?section=system')}
+            className="rounded-lg bg-red-800 px-3 py-2 text-sm font-medium text-white hover:bg-red-900"
+          >
+            Config Error (persistent)
+          </button>
+          <button
+            onClick={() =>
+              toast.persistent('info', 'Action annulable', {
+                actionLabel: 'Annuler',
+                actionOnClick: () => toast.success('Annulé !'),
+                autoDismissMs: 8000,
+              })
+            }
+            className="rounded-lg bg-purple-600 px-3 py-2 text-sm font-medium text-white hover:bg-purple-700"
+          >
+            Persistent + Undo
+          </button>
+          <button
+            onClick={() => {
+              toast.success('Toast 1');
+              setTimeout(() => toast.info('Toast 2'), 300);
+              setTimeout(() => toast.warning('Toast 3'), 600);
+              setTimeout(() => toast.error('Toast 4'), 900);
+            }}
+            className="rounded-lg bg-gray-800 px-3 py-2 text-sm font-medium text-white hover:bg-gray-900"
+          >
+            Stack (x4)
+          </button>
+        </div>
+      </Section>
+    </div>
+  );
+}