create-crm-tmp 1.0.0

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

@@ -0,0 +1,35 @@
+interface EmailTemplateProps {
+  firstName: string;
+  signature?: string | null;
+}
+
+export function EmailTemplate({ firstName, signature }: EmailTemplateProps) {
+  return (
+    <div
+      style={{
+        fontFamily: 'Arial, sans-serif',
+        padding: '20px',
+        maxWidth: '600px',
+        margin: '0 auto',
+      }}
+    >
+      <h1 style={{ color: '#1F2937', fontSize: '24px', marginBottom: '16px' }}>
+        Welcome, {firstName}!
+      </h1>
+
+      {signature && (
+        <div
+          style={{
+            marginTop: '24px',
+            paddingTop: '16px',
+            borderTop: '1px solid #E5E7EB',
+            color: '#4B5563',
+            fontSize: '14px',
+            lineHeight: '1.6',
+          }}
+          dangerouslySetInnerHTML={{ __html: signature }}
+        />
+      )}
+    </div>
+  );
+}

package/template/src/components/header.tsx

@@ -0,0 +1,320 @@
+'use client';
+
+import { useSession, signOut } from '@/lib/auth-client';
+import { Bell, ChevronDown, LogOut, Calendar } from 'lucide-react';
+import { useState, useEffect, useRef } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+import { cn } from '@/lib/utils';
+
+interface Reminder {
+  id: string;
+  taskId: string;
+  type: string;
+  title: string | null;
+  description: string;
+  priority: string;
+  scheduledAt: string;
+  reminderTime: string;
+  reminderMinutesBefore: number | null;
+  contact: {
+    id: string;
+    firstName: string | null;
+    lastName: string | null;
+  } | null;
+}
+
+const TASK_TYPE_LABELS: Record<string, string> = {
+  CALL: 'Appel téléphonique',
+  MEETING: 'Rendez-vous',
+  EMAIL: 'Email',
+  VIDEO_CONFERENCE: 'Google Meet',
+  OTHER: 'Autre',
+};
+
+const PRIORITY_COLORS: Record<string, string> = {
+  LOW: 'bg-gray-100 text-gray-700',
+  MEDIUM: 'bg-yellow-100 text-yellow-700',
+  HIGH: 'bg-orange-100 text-orange-700',
+  URGENT: 'bg-red-100 text-red-700',
+};
+
+function formatDateTime(dateString: string) {
+  const date = new Date(dateString);
+  return {
+    date: date.toLocaleDateString('fr-FR', {
+      day: 'numeric',
+      month: 'short',
+    }),
+    time: date.toLocaleTimeString('fr-FR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    }),
+  };
+}
+
+export function Header() {
+  const { data: session } = useSession();
+  const router = useRouter();
+  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 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
+  useEffect(() => {
+    if (!session) return;
+
+    const fetchReminders = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch('/api/reminders');
+        if (response.ok) {
+          const data = await response.json();
+          setReminders(data);
+        }
+      } catch (error) {
+        console.error('Erreur lors du chargement des rappels:', error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchReminders();
+    const interval = setInterval(fetchReminders, 60 * 1000); // Rafraîchir toutes les minutes
+    return () => clearInterval(interval);
+  }, [session]);
+
+  // Fermer les dropdowns en cliquant à l'extérieur
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (remindersRef.current && !remindersRef.current.contains(event.target as Node)) {
+        setShowRemindersDropdown(false);
+      }
+      if (userRef.current && !userRef.current.contains(event.target as Node)) {
+        setShowUserDropdown(false);
+      }
+    };
+
+    document.addEventListener('mousedown', handleClickOutside);
+    return () => document.removeEventListener('mousedown', handleClickOutside);
+  }, []);
+
+  const unreadCount = reminders.filter((r) => !readReminders.has(r.id)).length;
+
+  const handleMarkAsRead = (reminderId: string) => {
+    setReadReminders((prev) => new Set([...prev, reminderId]));
+  };
+
+  const handleMarkAllAsRead = () => {
+    const allIds = new Set(reminders.map((r) => r.id));
+    setReadReminders((prev) => new Set([...prev, ...allIds]));
+  };
+
+  const handleSignOut = async () => {
+    await signOut();
+    router.push('/signin');
+  };
+
+  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: Logo + Greeting */}
+        <div className="flex 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>
+          </div>
+          <span className="hidden text-sm text-gray-600 sm:inline">👋 Salut {userName} !</span>
+        </div>
+
+        {/* Right: Notifications + User Avatar */}
+        <div className="flex 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"
+              aria-label="Notifications"
+            >
+              <Bell className="h-5 w-5" />
+              {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">
+                  {unreadCount > 9 ? '9+' : unreadCount}
+                </span>
+              )}
+            </button>
+
+            {/* 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="flex items-center justify-between">
+                    <h3 className="text-sm font-semibold text-gray-900">Rappels</h3>
+                    {unreadCount > 0 && (
+                      <button
+                        onClick={handleMarkAllAsRead}
+                        className="cursor-pointer text-xs text-indigo-600 hover:text-indigo-700"
+                      >
+                        Tout marquer comme lu
+                      </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">
+                      {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;
+
+                        return (
+                          <div
+                            key={reminder.id}
+                            className={cn(
+                              'px-4 py-3 transition-colors hover:bg-gray-50',
+                              !isRead && 'bg-blue-50/50',
+                            )}
+                            onClick={() => 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" />
+                              </div>
+                              <div className="min-w-0 flex-1">
+                                <div className="flex items-start justify-between gap-2">
+                                  <div className="min-w-0 flex-1">
+                                    <p
+                                      className={cn(
+                                        'text-sm font-medium',
+                                        !isRead ? 'text-gray-900' : 'text-gray-700',
+                                      )}
+                                    >
+                                      {reminder.title || TASK_TYPE_LABELS[reminder.type] || 'Tâche'}
+                                    </p>
+                                    {contactName && (
+                                      <p className="mt-0.5 text-xs text-gray-500">{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>
+                                      <span
+                                        className={cn(
+                                          'rounded-full px-1.5 py-0.5 text-[10px] font-medium',
+                                          PRIORITY_COLORS[reminder.priority] ||
+                                            PRIORITY_COLORS.MEDIUM,
+                                        )}
+                                      >
+                                        {reminder.priority === 'URGENT'
+                                          ? 'Urgente'
+                                          : reminder.priority === 'HIGH'
+                                            ? 'Haute'
+                                            : reminder.priority === 'MEDIUM'
+                                              ? 'Moyenne'
+                                              : 'Faible'}
+                                      </span>
+                                    </div>
+                                  </div>
+                                  {!isRead && (
+                                    <div className="h-2 w-2 shrink-0 rounded-full bg-blue-600" />
+                                  )}
+                                </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"
+                                  >
+                                    Voir le contact
+                                  </Link>
+                                )}
+                              </div>
+                            </div>
+                          </div>
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              </div>
+            )}
+          </div>
+
+          {/* User Avatar Dropdown */}
+          <div className="relative" ref={userRef}>
+            <button
+              onClick={() => setShowUserDropdown(!showUserDropdown)}
+              className="flex items-center gap-1.5 sm:gap-2 cursor-pointer"
+              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">
+                {userInitial}
+              </div>
+              <ChevronDown className="hidden h-4 w-4 text-gray-400 transition-colors hover:text-gray-600 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="px-4 py-3 border-b border-gray-200">
+                  <p className="text-sm font-medium text-gray-900">{userName}</p>
+                  <p className="mt-0.5 text-xs text-gray-500">{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"
+                  >
+                    <LogOut className="h-4 w-4" />
+                    <span>Déconnexion</span>
+                  </button>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </header>
+  );
+}

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

@@ -0,0 +1,79 @@
+interface InvitationEmailProps {
+  name: string;
+  invitationUrl: string;
+  signature?: string | null;
+}
+
+export function InvitationEmailTemplate({ name, invitationUrl, signature }: InvitationEmailProps) {
+  return (
+    <div
+      style={{
+        fontFamily: 'Arial, sans-serif',
+        padding: '20px',
+        maxWidth: '600px',
+        margin: '0 auto',
+      }}
+    >
+      <h1 style={{ color: '#1F2937', fontSize: '24px', marginBottom: '16px' }}>
+        Bienvenue, {name} !
+      </h1>
+      <p style={{ color: '#4B5563', fontSize: '16px', lineHeight: '1.6', marginBottom: '16px' }}>
+        Vous avez été invité à rejoindre notre plateforme CRM.
+      </p>
+      <p style={{ color: '#4B5563', fontSize: '16px', lineHeight: '1.6', marginBottom: '24px' }}>
+        Cliquez sur le bouton ci-dessous pour définir votre mot de passe et activer votre compte :
+      </p>
+      <div style={{ textAlign: 'center', marginBottom: '32px' }}>
+        <a
+          href={invitationUrl}
+          style={{
+            display: 'inline-block',
+            padding: '12px 24px',
+            backgroundColor: '#4F46E5',
+            color: 'white',
+            textDecoration: 'none',
+            borderRadius: '6px',
+            fontWeight: '600',
+            fontSize: '16px',
+          }}
+        >
+          Définir mon mot de passe
+        </a>
+      </div>
+      <p style={{ color: '#6B7280', fontSize: '14px', lineHeight: '1.6', marginBottom: '8px' }}>
+        Si le bouton ne fonctionne pas, copiez et collez ce lien dans votre navigateur :
+      </p>
+      <p
+        style={{ color: '#4F46E5', fontSize: '12px', wordBreak: 'break-all', marginBottom: '24px' }}
+      >
+        {invitationUrl}
+      </p>
+      <p
+        style={{
+          color: '#9CA3AF',
+          fontSize: '12px',
+          marginTop: '32px',
+          paddingTop: '16px',
+          borderTop: '1px solid #E5E7EB',
+        }}
+      >
+        Ce lien est valide pendant 24 heures. Si vous n'avez pas demandé cette invitation, vous
+        pouvez ignorer cet email.
+      </p>
+
+      {signature && (
+        <div
+          style={{
+            marginTop: '24px',
+            paddingTop: '16px',
+            borderTop: '1px solid #E5E7EB',
+            color: '#4B5563',
+            fontSize: '14px',
+            lineHeight: '1.6',
+          }}
+          dangerouslySetInnerHTML={{ __html: signature }}
+        />
+      )}
+    </div>
+  );
+}

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

@@ -0,0 +1,120 @@
+interface MeetCancellationEmailTemplateProps {
+  contactName: string;
+  title: string;
+  scheduledAt: string;
+  durationMinutes?: number;
+  meetLink?: string;
+  description?: string;
+  organizerName: string;
+  signature?: string;
+}
+
+export function MeetCancellationEmailTemplate({
+  contactName,
+  title,
+  scheduledAt,
+  durationMinutes,
+  meetLink,
+  description,
+  organizerName,
+  signature,
+}: MeetCancellationEmailTemplateProps) {
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString('fr-FR', {
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    });
+  };
+
+  const formatTime = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleTimeString('fr-FR', {
+      hour: '2-digit',
+      minute: '2-digit',
+    });
+  };
+
+  const formatDuration = (minutes: number) => {
+    if (minutes < 60) {
+      return `${minutes} minutes`;
+    }
+    const hours = Math.floor(minutes / 60);
+    const mins = minutes % 60;
+    if (mins === 0) {
+      return `${hours} heure${hours > 1 ? 's' : ''}`;
+    }
+    return `${hours} heure${hours > 1 ? 's' : ''} ${mins} minute${mins > 1 ? 's' : ''}`;
+  };
+
+  return (
+    <div style={{ fontFamily: 'Arial, 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
+        </h1>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>Bonjour {contactName},</p>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>
+          Nous vous informons que votre rendez-vous a été annulé.
+        </p>
+
+        <div
+          style={{
+            backgroundColor: '#FEF2F2',
+            borderLeft: '4px solid #EF4444',
+            padding: '20px',
+            borderRadius: '8px',
+            marginBottom: '20px',
+          }}
+        >
+          <h2 style={{ color: '#1a1a1a', fontSize: '20px', marginBottom: '15px' }}>{title}</h2>
+
+          <div style={{ marginBottom: '10px' }}>
+            <strong>Date :</strong> {formatDate(scheduledAt)}
+          </div>
+          <div style={{ marginBottom: '10px' }}>
+            <strong>Heure :</strong> {formatTime(scheduledAt)}
+          </div>
+          {meetLink && durationMinutes && (
+            <div style={{ marginBottom: '10px' }}>
+              <strong>Durée :</strong> {formatDuration(durationMinutes)}
+            </div>
+          )}
+          <div style={{ marginBottom: '10px' }}>
+            <strong>Organisateur :</strong> {organizerName}
+          </div>
+
+          {description && (
+            <div style={{ marginTop: '15px', paddingTop: '15px', borderTop: '1px solid #ddd' }}>
+              <strong>Description :</strong>
+              <div
+                style={{ marginTop: '10px' }}
+                dangerouslySetInnerHTML={{ __html: description }}
+              />
+            </div>
+          )}
+        </div>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px', color: '#666' }}>
+          Si vous souhaitez reprogrammer ce rendez-vous, n'hésitez pas à nous contacter.
+        </p>
+
+        {signature && (
+          <div
+            style={{
+              marginTop: '30px',
+              paddingTop: '20px',
+              borderTop: '1px solid #ddd',
+              fontSize: '14px',
+            }}
+            dangerouslySetInnerHTML={{ __html: signature }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}