create-crm-tmp 1.1.3 → 2.1.0

package/template/src/components/header.tsx

@@ -7,11 +7,19 @@ import { useRouter } from 'next/navigation';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
-import { useViewAs } from '@/contexts/view-as-context';
+import { GlobalSearch } from '@/components/global-search';
+import {
+  REMINDERS_CLEAR_UNDO_WINDOW_MS,
+  REMINDERS_POLL_INTERVAL_MS,
+  REMINDERS_REFRESH_EVENT,
+  requestRemindersRefresh,
+} from '@/lib/reminder-state';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Reminder {
   id: string;
   taskId: string;
+  kind: 'due' | 'reminder';
   type: string;
   title: string | null;
   description: string;
@@ -19,6 +27,9 @@ interface Reminder {
   scheduledAt: string;
   reminderTime: string;
   reminderMinutesBefore: number | null;
+  isRead: boolean;
+  isDismissed: boolean;
+  isClearedByCutoff: boolean;
   contact: {
     id: string;
     firstName: string | null;
@@ -35,12 +46,36 @@ const TASK_TYPE_LABELS: Record<string, string> = {
 };
 
 const PRIORITY_COLORS: Record<string, string> = {
-  LOW: 'bg-gray-100 text-gray-700',
+  LOW: 'bg-muted text-muted-foreground',
   MEDIUM: 'bg-yellow-100 text-yellow-700',
   HIGH: 'bg-orange-100 text-orange-700',
   URGENT: 'bg-red-100 text-red-700',
 };
 
+const REMINDER_KIND_BADGE: Record<Reminder['kind'], { label: string; className: string }> = {
+  due: {
+    label: 'À faire maintenant',
+    className: 'bg-amber-100 text-amber-900 ring-1 ring-amber-200/80',
+  },
+  reminder: {
+    label: 'Rappel',
+    className: 'bg-sky-100 text-sky-900 ring-1 ring-sky-200/80',
+  },
+};
+
+function priorityLabel(priority: string): string {
+  switch (priority) {
+    case 'URGENT':
+      return 'Urgente';
+    case 'HIGH':
+      return 'Haute';
+    case 'MEDIUM':
+      return 'Moyenne';
+    default:
+      return 'Faible';
+  }
+}
+
 function formatDateTime(dateString: string) {
   const date = new Date(dateString);
   return {
@@ -57,50 +92,29 @@ function formatDateTime(dateString: string) {
 
 export function Header() {
   const { data: session } = useSession();
+  const { persistent: showPersistentToast } = useAppToast();
   const router = useRouter();
   const { toggle: toggleMobileMenu } = useMobileMenuContext();
-  const { viewAsUser, isViewingAsOther } = useViewAs();
   const [showRemindersDropdown, setShowRemindersDropdown] = useState(false);
   const [showUserDropdown, setShowUserDropdown] = useState(false);
   const [reminders, setReminders] = useState<Reminder[]>([]);
-  const [readReminders, setReadReminders] = useState<Set<string>>(new Set());
   const [loading, setLoading] = useState(false);
   const remindersRef = useRef<HTMLDivElement>(null);
   const userRef = useRef<HTMLDivElement>(null);
 
-  const realUserName = session?.user?.name || 'Utilisateur';
-  const userName = isViewingAsOther ? viewAsUser?.name || 'Utilisateur' : realUserName;
+  const userName = session?.user?.name || 'Utilisateur';
   const userEmail = session?.user?.email || '';
   const userInitial = userName?.[0]?.toUpperCase() || 'U';
 
-  // Charger les rappels lus depuis localStorage
-  useEffect(() => {
-    if (typeof window !== 'undefined') {
-      const stored = localStorage.getItem('readReminders');
-      if (stored) {
-        try {
-          setReadReminders(new Set(JSON.parse(stored)));
-        } catch (e) {
-          console.error('Erreur lors du chargement des rappels lus:', e);
-        }
-      }
-    }
-  }, []);
-
-  // Sauvegarder les rappels lus dans localStorage
-  useEffect(() => {
-    if (typeof window !== 'undefined' && readReminders.size > 0) {
-      localStorage.setItem('readReminders', JSON.stringify(Array.from(readReminders)));
-    }
-  }, [readReminders]);
-
-  // Charger les rappels
+  // Charger les rappels (polling + retour sur l’onglet + événement explicite)
   useEffect(() => {
     if (!session) return;
 
-    const fetchReminders = async () => {
+    const fetchReminders = async (opts?: { silent?: boolean }) => {
       try {
-        setLoading(true);
+        if (!opts?.silent) {
+          setLoading(true);
+        }
         const response = await fetch('/api/reminders');
         if (response.ok) {
           const data = await response.json();
@@ -109,13 +123,29 @@ export function Header() {
       } catch (error) {
         console.error('Erreur lors du chargement des rappels:', error);
       } finally {
-        setLoading(false);
+        if (!opts?.silent) {
+          setLoading(false);
+        }
+      }
+    };
+
+    void fetchReminders();
+    const interval = setInterval(() => void fetchReminders({ silent: true }), REMINDERS_POLL_INTERVAL_MS);
+
+    const onVisible = () => {
+      if (document.visibilityState === 'visible') {
+        void fetchReminders({ silent: true });
       }
     };
+    const onRefresh = () => void fetchReminders({ silent: true });
 
-    fetchReminders();
-    const interval = setInterval(fetchReminders, 60 * 1000); // Rafraîchir toutes les minutes
-    return () => clearInterval(interval);
+    document.addEventListener('visibilitychange', onVisible);
+    globalThis.addEventListener(REMINDERS_REFRESH_EVENT, onRefresh);
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', onVisible);
+      globalThis.removeEventListener(REMINDERS_REFRESH_EVENT, onRefresh);
+    };
   }, [session]);
 
   // Fermer les dropdowns en cliquant à l'extérieur
@@ -133,15 +163,53 @@ export function Header() {
     return () => document.removeEventListener('mousedown', handleClickOutside);
   }, []);
 
-  const unreadCount = reminders.filter((r) => !readReminders.has(r.id)).length;
+  const unreadCount = reminders.filter((r) => !r.isRead && !r.isDismissed).length;
 
-  const handleMarkAsRead = (reminderId: string) => {
-    setReadReminders((prev) => new Set([...prev, reminderId]));
+  const handleMarkAsRead = async (reminderId: string) => {
+    setReminders((prev) =>
+      prev.map((reminder) =>
+        reminder.id === reminderId ? { ...reminder, isRead: true } : reminder,
+      ),
+    );
+    globalThis.dispatchEvent(new CustomEvent('reminders:read', { detail: { reminderId } }));
+    try {
+      await fetch('/api/reminders/state', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ reminderId, status: 'READ' }),
+      });
+    } catch (error) {
+      console.error("Erreur lors du marquage d'un rappel comme lu:", error);
+    }
   };
 
-  const handleMarkAllAsRead = () => {
-    const allIds = new Set(reminders.map((r) => r.id));
-    setReadReminders((prev) => new Set([...prev, ...allIds]));
+  const handleClearReminders = async () => {
+    try {
+      const response = await fetch('/api/reminders/clear', { method: 'POST' });
+      const data = (await response.json().catch(() => ({}))) as {
+        degraded?: boolean;
+        undoUntil?: string;
+      };
+      if (!response.ok) {
+        throw new Error('Impossible de vider les rappels.');
+      }
+      setReminders([]);
+      globalThis.dispatchEvent(new CustomEvent('reminders:cleared'));
+      if (data.degraded !== true && typeof data.undoUntil === 'string') {
+        showPersistentToast('info', 'Rappels vidés.', {
+          actionLabel: 'Annuler',
+          actionOnClick: async () => {
+            const undoRes = await fetch('/api/reminders/clear/undo', { method: 'POST' });
+            if (undoRes.ok) {
+              requestRemindersRefresh();
+            }
+          },
+          autoDismissMs: REMINDERS_CLEAR_UNDO_WINDOW_MS,
+        });
+      }
+    } catch (error) {
+      console.error('Erreur lors du vidage des rappels:', error);
+    }
   };
 
   const handleSignOut = async () => {
@@ -150,37 +218,49 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-30 border-b border-gray-200 bg-white px-4 py-3 sm:px-6 lg:px-8">
-      <div className="flex items-center justify-between gap-2 sm:gap-4">
-        {/* Left: Burger + Logo + Greeting */}
-        <div className="flex items-center gap-2 sm:gap-3">
-          {/* Bouton burger - visible uniquement sur mobile/tablette */}
-          <button
-            onClick={toggleMobileMenu}
-            className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100 lg:hidden"
-            aria-label="Ouvrir le menu"
-          >
-            <Menu className="h-5 w-5" />
-          </button>
+    <header className="border-border bg-background/95 sticky top-0 z-40 border-b px-4 py-3 backdrop-blur-sm sm:px-6 lg:px-8">
+      <div className="flex items-center gap-2 sm:gap-4">
+        {/* Left: Logo + Greeting */}
+        <div className="flex shrink-0 items-center gap-2 sm:gap-3">
           <div className="flex items-center gap-1.5 sm:gap-2">
-            {/* <Rocket className="h-5 w-5 text-indigo-600 sm:h-6 sm:w-6" /> */}
-            <span className="text-base font-bold text-gray-900 sm:text-lg">CRM Template</span>
+            {/* Bouton burger pour mobile */}
+            <button
+              onClick={toggleMobileMenu}
+              className="text-foreground/80 hover:bg-muted focus-visible:ring-primary cursor-pointer rounded-lg p-2 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none lg:hidden"
+              aria-label="Ouvrir ou fermer le menu"
+            >
+              <Menu className="h-5 w-5" />
+            </button>
+            <span className="text-foreground text-base font-bold sm:text-lg">CRM Template</span>
           </div>
-          <span className="hidden text-sm text-gray-600 sm:inline">👋 Salut {userName} !</span>
+        </div>
+
+        {/* Center: Global Search */}
+        <div className="flex min-w-0 flex-1 justify-center">
+          <GlobalSearch />
         </div>
 
         {/* Right: Notifications + User Avatar */}
-        <div className="flex items-center gap-2 sm:gap-3">
+        <div className="flex shrink-0 items-center gap-2 sm:gap-3">
           {/* Notifications Dropdown */}
           <div className="relative" ref={remindersRef}>
             <button
               onClick={() => setShowRemindersDropdown(!showRemindersDropdown)}
-              className="relative cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
+              className="text-muted-foreground hover:bg-muted focus-visible:ring-primary relative cursor-pointer rounded-lg p-2 transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none"
               aria-label="Notifications"
             >
-              <Bell className="h-5 w-5" />
+              <span
+                className={cn(
+                  unreadCount > 0 && !showRemindersDropdown && 'ui-bell-notify',
+                )}
+              >
+                <Bell className="h-5 w-5" />
+              </span>
               {unreadCount > 0 && (
-                <span className="absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full bg-blue-600 text-[10px] font-semibold text-white">
+                <span
+                  key={unreadCount}
+                  className="bg-primary text-primary-foreground ui-count-pop absolute top-1 right-1 flex h-4 w-4 items-center justify-center rounded-full text-[10px] font-semibold"
+                >
                   {unreadCount > 9 ? '9+' : unreadCount}
                 </span>
               )}
@@ -188,66 +268,85 @@ export function Header() {
 
             {/* Dropdown des rappels */}
             {showRemindersDropdown && (
-              <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-lg border border-gray-200 bg-white shadow-xl">
-                <div className="border-b border-gray-200 px-4 py-3">
+              <div className="border-border bg-popover ui-dropdown-enter absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border shadow-(--shadow-dropdown)">
+                <div className="border-border border-b px-4 py-3">
                   <div className="flex items-center justify-between">
-                    <h3 className="text-sm font-semibold text-gray-900">Rappels</h3>
-                    {unreadCount > 0 && (
+                    <h3 className="text-popover-foreground text-sm font-semibold">Rappels</h3>
+                    {reminders.length > 0 && (
                       <button
-                        onClick={handleMarkAllAsRead}
-                        className="cursor-pointer text-xs text-indigo-600 hover:text-indigo-700"
+                        onClick={handleClearReminders}
+                        className="text-primary hover:text-primary/80 focus-visible:ring-primary cursor-pointer text-xs focus-visible:ring-2 focus-visible:outline-none"
                       >
-                        Tout marquer comme lu
+                        Vider les rappels
                       </button>
                     )}
                   </div>
                 </div>
                 <div className="max-h-96 overflow-y-auto">
-                  {loading ? (
-                    <div className="px-4 py-8 text-center text-sm text-gray-500">Chargement...</div>
-                  ) : reminders.length === 0 ? (
-                    <div className="px-4 py-8 text-center text-sm text-gray-500">Aucun rappel</div>
-                  ) : (
-                    <div className="divide-y divide-gray-100">
+                  {loading && (
+                    <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+                      Chargement...
+                    </div>
+                  )}
+                  {!loading && reminders.length === 0 && (
+                    <div className="text-muted-foreground px-4 py-8 text-center text-sm">
+                      Aucun rappel
+                    </div>
+                  )}
+                  {!loading && reminders.length > 0 && (
+                    <div className="divide-border divide-y">
                       {reminders.map((reminder) => {
-                        const isRead = readReminders.has(reminder.id);
-                        const { date, time } = formatDateTime(reminder.scheduledAt);
-                        const contactName = reminder.contact
-                          ? `${reminder.contact.firstName || ''} ${reminder.contact.lastName || ''}`.trim() ||
-                            'Contact sans nom'
-                          : null;
+                        const isRead = reminder.isRead || reminder.isDismissed;
+                        const { date, time } = formatDateTime(reminder.reminderTime);
+                        const kindBadge = REMINDER_KIND_BADGE[reminder.kind] ?? REMINDER_KIND_BADGE.reminder;
+                        let contactName: string | null = null;
+                        if (reminder.contact) {
+                          const full = `${reminder.contact.firstName || ''} ${reminder.contact.lastName || ''}`.trim();
+                          contactName = full.length > 0 ? full : 'Contact sans nom';
+                        }
 
                         return (
-                          <div
+                          <button
+                            type="button"
                             key={reminder.id}
                             className={cn(
-                              'px-4 py-3 transition-colors hover:bg-gray-50',
-                              !isRead && 'bg-blue-50/50',
+                              'hover:bg-accent w-full px-4 py-3 text-left transition-colors duration-200',
+                              isRead ? undefined : 'bg-accent/70',
                             )}
-                            onClick={() => handleMarkAsRead(reminder.id)}
+                            onClick={() => void handleMarkAsRead(reminder.id)}
                           >
                             <div className="flex items-start gap-3">
                               <div className="mt-0.5 shrink-0">
-                                <Calendar className="h-4 w-4 text-indigo-600" />
+                                <Calendar aria-hidden="true" className="text-primary h-4 w-4" />
                               </div>
                               <div className="min-w-0 flex-1">
                                 <div className="flex items-start justify-between gap-2">
                                   <div className="min-w-0 flex-1">
+                                    <span
+                                      className={cn(
+                                        'mb-1 inline-flex max-w-full rounded-full px-2 py-0.5 text-[10px] font-semibold tracking-wide uppercase',
+                                        kindBadge.className,
+                                      )}
+                                    >
+                                      {kindBadge.label}
+                                    </span>
                                     <p
                                       className={cn(
                                         'text-sm font-medium',
-                                        !isRead ? 'text-gray-900' : 'text-gray-700',
+                                        isRead ? 'text-muted-foreground' : 'text-foreground',
                                       )}
                                     >
                                       {reminder.title || TASK_TYPE_LABELS[reminder.type] || 'Tâche'}
                                     </p>
                                     {contactName && (
-                                      <p className="mt-0.5 text-xs text-gray-500">{contactName}</p>
+                                      <p className="text-muted-foreground mt-0.5 text-xs">
+                                        {contactName}
+                                      </p>
                                     )}
-                                    <div className="mt-1 flex items-center gap-2">
-                                      <span className="text-xs text-gray-500">{date}</span>
-                                      <span className="text-xs text-gray-400">•</span>
-                                      <span className="text-xs text-gray-500">{time}</span>
+                                    <div className="mt-1 flex flex-wrap items-center gap-2">
+                                      <span className="text-muted-foreground text-xs">{date}</span>
+                                      <span className="text-muted-foreground/70 text-xs">•</span>
+                                      <span className="text-muted-foreground text-xs">{time}</span>
                                       <span
                                         className={cn(
                                           'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
@@ -255,32 +354,26 @@ export function Header() {
                                             PRIORITY_COLORS.MEDIUM,
                                         )}
                                       >
-                                        {reminder.priority === 'URGENT'
-                                          ? 'Urgente'
-                                          : reminder.priority === 'HIGH'
-                                            ? 'Haute'
-                                            : reminder.priority === 'MEDIUM'
-                                              ? 'Moyenne'
-                                              : 'Faible'}
+                                        {priorityLabel(reminder.priority)}
                                       </span>
                                     </div>
                                   </div>
                                   {!isRead && (
-                                    <div className="h-2 w-2 shrink-0 rounded-full bg-blue-600" />
+                                    <div className="bg-primary h-2 w-2 shrink-0 rounded-full" />
                                   )}
                                 </div>
                                 {reminder.contact && (
                                   <Link
                                     href={`/contacts/${reminder.contact.id}`}
                                     onClick={(e) => e.stopPropagation()}
-                                    className="mt-2 inline-block text-xs font-medium text-indigo-600 hover:text-indigo-700"
+                                    className="text-primary hover:text-primary/80 mt-2 inline-block text-xs font-medium"
                                   >
                                     Voir le contact
                                   </Link>
                                 )}
                               </div>
                             </div>
-                          </div>
+                          </button>
                         );
                       })}
                     </div>
@@ -294,26 +387,26 @@ export function Header() {
           <div className="relative" ref={userRef}>
             <button
               onClick={() => setShowUserDropdown(!showUserDropdown)}
-              className="flex cursor-pointer items-center gap-1.5 sm:gap-2"
+              className="hover:bg-accent focus-visible:ring-primary flex cursor-pointer items-center gap-1.5 rounded-md transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none sm:gap-2"
               aria-label="Menu utilisateur"
             >
-              <div className="flex h-8 w-8 items-center justify-center rounded-full bg-indigo-100 text-xs font-semibold text-indigo-600 sm:h-9 sm:w-9 sm:text-sm">
+              <div className="bg-primary/15 text-primary flex h-8 w-8 items-center justify-center rounded-full text-xs font-semibold sm:h-9 sm:w-9 sm:text-sm">
                 {userInitial}
               </div>
-              <ChevronDown className="hidden h-4 w-4 text-gray-400 transition-colors hover:text-gray-600 sm:block" />
+              <ChevronDown className="text-muted-foreground hover:text-foreground hidden h-4 w-4 transition-colors sm:block" />
             </button>
 
             {/* Dropdown utilisateur */}
             {showUserDropdown && (
-              <div className="absolute right-0 mt-2 w-56 rounded-lg border border-gray-200 bg-white shadow-xl">
-                <div className="border-b border-gray-200 px-4 py-3">
-                  <p className="text-sm font-medium text-gray-900">{realUserName}</p>
-                  <p className="mt-0.5 text-xs text-gray-500">{userEmail}</p>
+              <div className="border-border bg-popover ui-dropdown-enter absolute right-0 mt-2 w-56 rounded-xl border shadow-(--shadow-dropdown)">
+                <div className="border-border border-b px-4 py-3">
+                  <p className="text-popover-foreground text-sm font-medium">{userName}</p>
+                  <p className="text-muted-foreground mt-0.5 text-xs">{userEmail}</p>
                 </div>
                 <div className="py-1">
                   <button
                     onClick={handleSignOut}
-                    className="flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm text-gray-700 transition-colors hover:bg-gray-50"
+                    className="text-popover-foreground hover:bg-accent focus-visible:ring-primary flex w-full cursor-pointer items-center gap-2 px-4 py-2 text-sm transition-colors duration-200 focus-visible:ring-2 focus-visible:outline-none"
                   >
                     <LogOut className="h-4 w-4" />
                     <span>Déconnexion</span>

package/template/src/components/inactive-account-guard.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import { signOut } from '@/lib/auth-client';
+
+const POLL_MS = 25_000;
+
+async function fetchActiveStatus(): Promise<boolean | null> {
+  try {
+    const res = await fetch('/api/auth/check-active', { credentials: 'include' });
+    if (!res.ok) return null;
+    const data = (await res.json()) as { active?: boolean };
+    if (typeof data.active !== 'boolean') return null;
+    return data.active;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Déconnecte et redirige vers /signin si le compte courant est inactif ou sans session valide,
+ * pour éviter de rester sur le shell du CRM avec une session révoquée côté serveur.
+ */
+export function InactiveAccountGuard() {
+  const router = useRouter();
+  const signingOutRef = useRef(false);
+
+  useEffect(() => {
+    const run = async () => {
+      if (signingOutRef.current) return;
+      const active = await fetchActiveStatus();
+      if (active === false) {
+        signingOutRef.current = true;
+        await signOut();
+        router.replace('/signin?inactive=1');
+      }
+    };
+
+    void run();
+
+    const interval = setInterval(() => {
+      if (document.visibilityState === 'visible') void run();
+    }, POLL_MS);
+
+    const onVisibility = () => {
+      if (document.visibilityState === 'visible') void run();
+    };
+    document.addEventListener('visibilitychange', onVisibility);
+
+    return () => {
+      clearInterval(interval);
+      document.removeEventListener('visibilitychange', onVisibility);
+    };
+  }, [router]);
+
+  return null;
+}

package/template/src/components/integration-notifications-listener.tsx

@@ -0,0 +1,12 @@
+'use client';
+
+import { useIntegrationNotifications } from '@/hooks/useIntegrationNotifications';
+
+/**
+ * Renders nothing; runs the integration notifications polling hook
+ * (toasts disabled to avoid accumulation).
+ */
+export function IntegrationNotificationsListener() {
+  useIntegrationNotifications();
+  return null;
+}

package/template/src/components/invitation-email-template.tsx

@@ -1,3 +1,5 @@
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
+
 interface InvitationEmailProps {
   name: string;
   invitationUrl: string;
@@ -8,7 +10,7 @@ export function InvitationEmailTemplate({ name, invitationUrl, signature }: Invi
   return (
     <div
       style={{
-        fontFamily: 'Arial, sans-serif',
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
         padding: '20px',
         maxWidth: '600px',
         margin: '0 auto',
@@ -71,7 +73,7 @@ export function InvitationEmailTemplate({ name, invitationUrl, signature }: Invi
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: signature }}
+          dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
         />
       )}
     </div>

package/template/src/components/lazy-editor.tsx

@@ -0,0 +1,11 @@
+'use client';
+
+import dynamic from 'next/dynamic';
+import { Skeleton } from '@/components/skeleton';
+
+export type { DefaultTemplateRef } from '@/components/editor';
+
+export const LazyEditor = dynamic(() => import('@/components/editor').then((m) => m.Editor), {
+  ssr: false,
+  loading: () => <Skeleton className="h-64 rounded-lg" />,
+});

package/template/src/components/meet-cancellation-email-template.tsx

@@ -1,3 +1,5 @@
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
+
 interface MeetCancellationEmailTemplateProps {
   contactName: string;
   title: string;
@@ -50,7 +52,13 @@ export function MeetCancellationEmailTemplate({
   };
 
   return (
-    <div style={{ fontFamily: 'Arial, sans-serif', lineHeight: '1.6', color: '#333' }}>
+    <div
+      style={{
+        fontFamily: '"Segoe UI", "Helvetica Neue", sans-serif',
+        lineHeight: '1.6',
+        color: '#333',
+      }}
+    >
       <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
         <h1 style={{ color: '#EF4444', fontSize: '24px', marginBottom: '20px' }}>
           Annulation de rendez-vous
@@ -93,7 +101,7 @@ export function MeetCancellationEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: description }}
+                dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(description) }}
               />
             </div>
           )}
@@ -111,7 +119,7 @@ export function MeetCancellationEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: signature }}
+            dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
           />
         )}
       </div>