create-crm-tmp 2.0.0 → 2.1.0

package/template/src/components/header.tsx

@@ -8,11 +8,18 @@ import Link from 'next/link';
 import { cn } from '@/lib/utils';
 import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
 import { GlobalSearch } from '@/components/global-search';
-import { safeLocalStorageGet, safeLocalStorageSet } from '@/lib/local-storage';
+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;
@@ -20,6 +27,9 @@ interface Reminder {
   scheduledAt: string;
   reminderTime: string;
   reminderMinutesBefore: number | null;
+  isRead: boolean;
+  isDismissed: boolean;
+  isClearedByCutoff: boolean;
   contact: {
     id: string;
     firstName: string | null;
@@ -42,6 +52,30 @@ const PRIORITY_COLORS: Record<string, string> = {
   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 {
@@ -58,12 +92,12 @@ function formatDateTime(dateString: string) {
 
 export function Header() {
   const { data: session } = useSession();
+  const { persistent: showPersistentToast } = useAppToast();
   const router = useRouter();
   const { toggle: toggleMobileMenu } = useMobileMenuContext();
   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);
@@ -72,26 +106,15 @@ export function Header() {
   const userEmail = session?.user?.email || '';
   const userInitial = userName?.[0]?.toUpperCase() || 'U';
 
-  // Charger les rappels lus depuis localStorage
-  useEffect(() => {
-    const stored = safeLocalStorageGet<string[]>('read-reminders', []);
-    setReadReminders(new Set(stored));
-  }, []);
-
-  // Sauvegarder les rappels lus dans localStorage
-  useEffect(() => {
-    if (readReminders.size > 0) {
-      safeLocalStorageSet('read-reminders', 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();
@@ -100,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
@@ -124,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 () => {
@@ -141,7 +218,7 @@ export function Header() {
   };
 
   return (
-    <header className="sticky top-0 z-40 border-b border-border bg-background/95 px-4 py-3 backdrop-blur-sm sm:px-6 lg:px-8">
+    <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">
@@ -149,12 +226,12 @@ export function Header() {
             {/* Bouton burger pour mobile */}
             <button
               onClick={toggleMobileMenu}
-              className="cursor-pointer rounded-lg p-2 text-foreground/80 transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none lg:hidden"
+              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-base font-bold text-foreground sm:text-lg">Gold Blessing</span>
+            <span className="text-foreground text-base font-bold sm:text-lg">CRM Template</span>
           </div>
         </div>
 
@@ -169,12 +246,21 @@ export function Header() {
           <div className="relative" ref={remindersRef}>
             <button
               onClick={() => setShowRemindersDropdown(!showRemindersDropdown)}
-              className="relative cursor-pointer rounded-lg p-2 text-muted-foreground transition-colors duration-200 hover:bg-muted focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+              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-primary text-[10px] font-semibold text-primary-foreground">
+                <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>
               )}
@@ -182,67 +268,85 @@ export function Header() {
 
             {/* Dropdown des rappels */}
             {showRemindersDropdown && (
-              <div className="absolute right-0 mt-2 w-80 max-w-[calc(100vw-2rem)] rounded-xl border border-border bg-popover shadow-(--shadow-dropdown)">
-                <div className="border-b border-border 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-popover-foreground">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-primary hover:text-primary/80 focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+                        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-muted-foreground">Chargement...</div>
-                  ) : reminders.length === 0 ? (
-                    <div className="px-4 py-8 text-center text-sm text-muted-foreground">Aucun rappel</div>
-                  ) : (
-                    <div className="divide-y divide-border">
+                  {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 (
                           <button
                             type="button"
                             key={reminder.id}
                             className={cn(
-                              'w-full px-4 py-3 text-left transition-colors duration-200 hover:bg-accent',
-                              !isRead && 'bg-accent/70',
+                              '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-primary" />
+                                <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-foreground' : 'text-muted-foreground',
+                                        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-muted-foreground">{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-muted-foreground">{date}</span>
-                                      <span className="text-xs text-muted-foreground/70">•</span>
-                                      <span className="text-xs text-muted-foreground">{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',
@@ -250,25 +354,19 @@ 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-primary" />
+                                    <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-primary hover:text-primary/80"
+                                    className="text-primary hover:text-primary/80 mt-2 inline-block text-xs font-medium"
                                   >
                                     Voir le contact
                                   </Link>
@@ -289,26 +387,26 @@ export function Header() {
           <div className="relative" ref={userRef}>
             <button
               onClick={() => setShowUserDropdown(!showUserDropdown)}
-              className="flex cursor-pointer items-center gap-1.5 rounded-md transition-colors duration-200 hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none 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-primary/15 text-xs font-semibold text-primary 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-muted-foreground transition-colors hover:text-foreground 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-xl border border-border bg-popover shadow-(--shadow-dropdown)">
-                <div className="border-b border-border px-4 py-3">
-                  <p className="text-sm font-medium text-popover-foreground">{userName}</p>
-                  <p className="mt-0.5 text-xs text-muted-foreground">{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-popover-foreground transition-colors duration-200 hover:bg-accent focus-visible:ring-2 focus-visible:ring-primary focus-visible:outline-none"
+                    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,4 +1,4 @@
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface InvitationEmailProps {
   name: string;
@@ -73,7 +73,7 @@ export function InvitationEmailTemplate({ name, invitationUrl, signature }: Invi
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+          dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
         />
       )}
     </div>

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

@@ -1,4 +1,4 @@
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface MeetCancellationEmailTemplateProps {
   contactName: string;
@@ -101,7 +101,7 @@ export function MeetCancellationEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
+                dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(description) }}
               />
             </div>
           )}
@@ -119,7 +119,7 @@ export function MeetCancellationEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+            dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
           />
         )}
       </div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface MeetConfirmationEmailTemplateProps {
   contactName: string;
@@ -101,7 +101,7 @@ export function MeetConfirmationEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
+                dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(description) }}
               />
             </div>
           )}
@@ -154,7 +154,7 @@ export function MeetConfirmationEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+            dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
           />
         )}
       </div>

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface MeetUpdateEmailTemplateProps {
   contactName: string;
@@ -161,7 +161,7 @@ export function MeetUpdateEmailTemplate({
               <strong>Description :</strong>
               <div
                 style={{ marginTop: '10px' }}
-                dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(description) }}
+                dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(description) }}
               />
             </div>
           )}
@@ -207,7 +207,7 @@ export function MeetUpdateEmailTemplate({
               borderTop: '1px solid #ddd',
               fontSize: '14px',
             }}
-            dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+            dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
           />
         )}
       </div>

package/template/src/components/page-header.tsx

@@ -8,21 +8,21 @@ interface PageHeaderProps {
 
 export function PageHeader({ title, description, action }: Readonly<PageHeaderProps>) {
   return (
-    <div className="border-b border-border bg-background/95 px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
+    <div className="border-border bg-background/95 border-b px-4 py-4 backdrop-blur-sm sm:px-6 lg:px-8 lg:py-6">
       <div className="flex items-start gap-3">
         <div className="min-w-0 flex-1">
           {action ? (
             <div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
               <div className="min-w-0 flex-1">
-                <h1 className="text-xl font-bold text-foreground sm:text-2xl">{title}</h1>
-                {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+                <h1 className="text-foreground text-xl font-bold sm:text-2xl">{title}</h1>
+                {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
               </div>
               <div className="shrink-0">{action}</div>
             </div>
           ) : (
             <>
-              <h1 className="text-xl font-bold text-foreground sm:text-2xl">{title}</h1>
-              {description && <p className="mt-1 text-sm text-muted-foreground">{description}</p>}
+              <h1 className="text-foreground text-xl font-bold sm:text-2xl">{title}</h1>
+              {description && <p className="text-muted-foreground mt-1 text-sm">{description}</p>}
             </>
           )}
         </div>

package/template/src/components/protected-page.tsx

@@ -20,7 +20,7 @@ function getFirstAccessibleRoute(hasPermission: (p: string) => boolean): string
       return route.href;
     }
   }
-  return '/contacts';
+  return '/dashboard';
 }
 
 interface ProtectedPageProps {

package/template/src/components/reset-password-email-template.tsx

@@ -1,4 +1,4 @@
-import DOMPurify from 'isomorphic-dompurify';
+import { sanitizeEmailHtml } from '@/lib/email-html-sanitize';
 
 interface ResetPasswordEmailProps {
   code: string;
@@ -73,7 +73,7 @@ export function ResetPasswordEmailTemplate({ code, signature }: ResetPasswordEma
             fontSize: '14px',
             lineHeight: '1.6',
           }}
-          dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(signature) }}
+          dangerouslySetInnerHTML={{ __html: sanitizeEmailHtml(signature) }}
         />
       )}
     </div>