create-crm-tmp 1.0.0

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

@@ -0,0 +1,156 @@
+import React from 'react';
+
+interface MeetConfirmationEmailTemplateProps {
+  contactName: string;
+  title: string;
+  scheduledAt: string;
+  durationMinutes: number;
+  meetLink?: string;
+  description?: string;
+  organizerName: string;
+  signature?: string;
+}
+
+export function MeetConfirmationEmailTemplate({
+  contactName,
+  title,
+  scheduledAt,
+  durationMinutes,
+  meetLink,
+  description,
+  organizerName,
+  signature,
+}: MeetConfirmationEmailTemplateProps) {
+  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: '#1a1a1a', fontSize: '24px', marginBottom: '20px' }}>
+          Confirmation de rendez-vous
+        </h1>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>Bonjour {contactName},</p>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>
+          Votre rendez-vous a été confirmé avec succès.
+        </p>
+
+        <div
+          style={{
+            backgroundColor: '#f5f5f5',
+            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>
+          {durationMinutes > 0 && (
+            <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>
+
+        {meetLink && (
+          <>
+            <div style={{ marginBottom: '30px', textAlign: 'center' }}>
+              <a
+                href={meetLink}
+                style={{
+                  display: 'inline-block',
+                  backgroundColor: '#4285f4',
+                  color: '#ffffff',
+                  padding: '12px 24px',
+                  textDecoration: 'none',
+                  borderRadius: '4px',
+                  fontSize: '16px',
+                  fontWeight: 'bold',
+                }}
+              >
+                Rejoindre la réunion Google Meet
+              </a>
+            </div>
+
+            <div style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #ddd' }}>
+              <p style={{ fontSize: '14px', color: '#666' }}>
+                <strong>Lien de la réunion :</strong>
+                <br />
+                <a href={meetLink} style={{ color: '#4285f4', wordBreak: 'break-all' }}>
+                  {meetLink}
+                </a>
+              </p>
+            </div>
+          </>
+        )}
+
+        {!meetLink && (
+          <p style={{ fontSize: '14px', color: '#666', marginTop: '20px' }}>
+            Nous vous remercions de votre confiance et restons à votre disposition pour toute
+            question.
+          </p>
+        )}
+
+        {signature && (
+          <div
+            style={{
+              marginTop: '30px',
+              paddingTop: '15px',
+              borderTop: '1px solid #ddd',
+              fontSize: '14px',
+            }}
+            dangerouslySetInnerHTML={{ __html: signature }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,209 @@
+import React from 'react';
+
+interface MeetUpdateEmailTemplateProps {
+  contactName: string;
+  title: string;
+  oldScheduledAt: string;
+  newScheduledAt: string;
+  oldDuration?: number;
+  newDuration?: number;
+  hasDateChanged: boolean;
+  hasDurationChanged: boolean;
+  meetLink?: string;
+  description?: string;
+  organizerName: string;
+  signature?: string;
+}
+
+export function MeetUpdateEmailTemplate({
+  contactName,
+  title,
+  oldScheduledAt,
+  newScheduledAt,
+  oldDuration,
+  newDuration,
+  hasDateChanged,
+  hasDurationChanged,
+  meetLink,
+  description,
+  organizerName,
+  signature,
+}: MeetUpdateEmailTemplateProps) {
+  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' : ''}`;
+  };
+
+  const isGoogleMeet = !!meetLink;
+
+  return (
+    <div style={{ fontFamily: 'Arial, sans-serif', lineHeight: '1.6', color: '#333' }}>
+      <div style={{ maxWidth: '600px', margin: '0 auto', padding: '20px' }}>
+        <h1 style={{ color: '#1a1a1a', fontSize: '24px', marginBottom: '20px' }}>
+          Modification de rendez-vous
+        </h1>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>Bonjour {contactName},</p>
+
+        <p style={{ fontSize: '16px', marginBottom: '20px' }}>
+          Les informations de votre rendez-vous ont été modifiées.
+        </p>
+
+        <div
+          style={{
+            backgroundColor: '#f5f5f5',
+            padding: '20px',
+            borderRadius: '8px',
+            marginBottom: '20px',
+          }}
+        >
+          <h2 style={{ color: '#1a1a1a', fontSize: '20px', marginBottom: '15px' }}>{title}</h2>
+
+          {hasDateChanged ? (
+            <div
+              style={{
+                marginBottom: '15px',
+                paddingBottom: '15px',
+                borderBottom: '1px solid #ddd',
+              }}
+            >
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Ancienne date :</strong>
+                <span style={{ textDecoration: 'line-through', color: '#999', marginLeft: '8px' }}>
+                  {formatDate(oldScheduledAt)} à {formatTime(oldScheduledAt)}
+                </span>
+              </div>
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Nouvelle date :</strong>
+                <span style={{ color: '#10B981', fontWeight: 'bold', marginLeft: '8px' }}>
+                  {formatDate(newScheduledAt)} à {formatTime(newScheduledAt)}
+                </span>
+              </div>
+            </div>
+          ) : (
+            <>
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Date :</strong> {formatDate(newScheduledAt)}
+              </div>
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Heure :</strong> {formatTime(newScheduledAt)}
+              </div>
+            </>
+          )}
+
+          {isGoogleMeet && hasDurationChanged && oldDuration && newDuration && (
+            <div
+              style={{
+                marginBottom: '15px',
+                paddingBottom: '15px',
+                borderBottom: '1px solid #ddd',
+              }}
+            >
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Ancienne durée :</strong>
+                <span style={{ textDecoration: 'line-through', color: '#999', marginLeft: '8px' }}>
+                  {formatDuration(oldDuration)}
+                </span>
+              </div>
+              <div style={{ marginBottom: '10px' }}>
+                <strong>Nouvelle durée :</strong>
+                <span style={{ color: '#10B981', fontWeight: 'bold', marginLeft: '8px' }}>
+                  {formatDuration(newDuration)}
+                </span>
+              </div>
+            </div>
+          )}
+
+          {isGoogleMeet && !hasDurationChanged && newDuration && (
+            <div style={{ marginBottom: '10px' }}>
+              <strong>Durée :</strong> {formatDuration(newDuration)}
+            </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>
+
+        {meetLink && (
+          <>
+            <div style={{ marginBottom: '30px', textAlign: 'center' }}>
+              <a
+                href={meetLink}
+                style={{
+                  display: 'inline-block',
+                  backgroundColor: '#4285f4',
+                  color: '#ffffff',
+                  padding: '12px 24px',
+                  textDecoration: 'none',
+                  borderRadius: '4px',
+                  fontSize: '16px',
+                  fontWeight: 'bold',
+                }}
+              >
+                Rejoindre la réunion Google Meet
+              </a>
+            </div>
+
+            <div style={{ marginTop: '20px', paddingTop: '20px', borderTop: '1px solid #ddd' }}>
+              <p style={{ fontSize: '14px', color: '#666' }}>
+                <strong>Lien de la réunion :</strong>
+                <br />
+                <a href={meetLink} style={{ color: '#4285f4', wordBreak: 'break-all' }}>
+                  {meetLink}
+                </a>
+              </p>
+            </div>
+          </>
+        )}
+
+        {signature && (
+          <div
+            style={{
+              marginTop: '30px',
+              paddingTop: '15px',
+              borderTop: '1px solid #ddd',
+              fontSize: '14px',
+            }}
+            dangerouslySetInnerHTML={{ __html: signature }}
+          />
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,61 @@
+'use client';
+
+import { useMobileMenuContext } from '@/contexts/mobile-menu-context';
+
+interface PageHeaderProps {
+  title: string;
+  description?: string;
+  action?: React.ReactNode;
+}
+
+export function PageHeader({ title, description, action }: PageHeaderProps) {
+  const { isOpen, toggle } = useMobileMenuContext();
+
+  return (
+    <div className="border-b border-gray-200 bg-white px-4 py-4 sm:px-6 lg:px-8 lg:py-6">
+      <div className="flex items-start gap-3">
+        {/* Mobile menu button */}
+        <button
+          onClick={toggle}
+          className="mt-1 shrink-0 cursor-pointer rounded-lg p-2 text-gray-700 transition-colors hover:bg-gray-100 lg:hidden"
+          aria-label="Toggle menu"
+        >
+          <svg className="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            {isOpen ? (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M6 18L18 6M6 6l12 12"
+              />
+            ) : (
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M4 6h16M4 12h16M4 18h16"
+              />
+            )}
+          </svg>
+        </button>
+
+        <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-gray-900 sm:text-2xl">{title}</h1>
+                {description && <p className="mt-1 text-sm text-gray-600">{description}</p>}
+              </div>
+              <div className="shrink-0">{action}</div>
+            </div>
+          ) : (
+            <>
+              <h1 className="text-xl font-bold text-gray-900 sm:text-2xl">{title}</h1>
+              {description && <p className="mt-1 text-sm text-gray-600">{description}</p>}
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -0,0 +1,79 @@
+interface ResetPasswordEmailProps {
+  code: string;
+  signature?: string | null;
+}
+
+export function ResetPasswordEmailTemplate({ code, signature }: ResetPasswordEmailProps) {
+  return (
+    <div
+      style={{
+        fontFamily: 'Arial, sans-serif',
+        padding: '20px',
+        maxWidth: '600px',
+        margin: '0 auto',
+      }}
+    >
+      <h1 style={{ color: '#1F2937', fontSize: '24px', marginBottom: '16px' }}>
+        Réinitialisation de mot de passe
+      </h1>
+      <p style={{ color: '#4B5563', fontSize: '16px', lineHeight: '1.6', marginBottom: '16px' }}>
+        Vous avez demandé à réinitialiser votre mot de passe.
+      </p>
+      <p style={{ color: '#4B5563', fontSize: '16px', lineHeight: '1.6', marginBottom: '24px' }}>
+        Utilisez le code suivant pour continuer :
+      </p>
+      <div style={{ textAlign: 'center', marginBottom: '32px' }}>
+        <div
+          style={{
+            display: 'inline-block',
+            padding: '20px 40px',
+            backgroundColor: '#F3F4F6',
+            borderRadius: '8px',
+            border: '2px solid #4F46E5',
+          }}
+        >
+          <div
+            style={{
+              fontSize: '36px',
+              fontWeight: 'bold',
+              letterSpacing: '8px',
+              color: '#4F46E5',
+              fontFamily: 'monospace',
+            }}
+          >
+            {code}
+          </div>
+        </div>
+      </div>
+      <p style={{ color: '#6B7280', fontSize: '14px', lineHeight: '1.6', marginBottom: '8px' }}>
+        Ce code est valide pendant 15 minutes.
+      </p>
+      <p
+        style={{
+          color: '#9CA3AF',
+          fontSize: '12px',
+          marginTop: '32px',
+          paddingTop: '16px',
+          borderTop: '1px solid #E5E7EB',
+        }}
+      >
+        Si vous n'avez pas demandé cette réinitialisation, vous pouvez ignorer cet email. Votre mot
+        de passe ne sera pas modifié.
+      </p>
+
+      {signature && (
+        <div
+          style={{
+            marginTop: '24px',
+            paddingTop: '16px',
+            borderTop: '1px solid #E5E7EB',
+            color: '#4B5563',
+            fontSize: '14px',
+            lineHeight: '1.6',
+          }}
+          dangerouslySetInnerHTML={{ __html: signature }}
+        />
+      )}
+    </div>
+  );
+}