Checkpoint: Ajout du template "Réinitialisation de mot de passe" (reset_password) :

- Ajout de "reset_password" à l'enum du schéma Drizzle (table emailTemplates)
- Migration SQL pour modifier l'enum dans la base de données
- Création du template dans la base de données avec un contenu par défaut approprié
- Mise à jour de la procédure tRPC emailTemplates.upsert pour utiliser les noms de colonnes français (titre, couleurPrincipale, couleurSecondaire, piedDePage)
- Mise à jour de la fonction upsertEmailTemplate dans server/db.ts pour utiliser les noms de colonnes français
- Réécriture complète de AdminEmailTemplates.tsx pour utiliser les noms de colonnes français
- Test complet de l'interface : le template s'affiche correctement, peut être modifié et prévisualisé
- Le template contient les variables {{prenom}}, {{nom}}, {{lienReinitialisation}} pour la réinitialisation de mot de passe
- Total de 9 templates d'emails maintenant disponibles (inscription, teaser, rappel, rappelJ1, rappel3-6, reset_password)

client/src/pages/AdminEmailTemplates.tsx

@@ -38,16 +38,12 @@ export default function AdminEmailTemplates() {
   const [selectedType, setSelectedType] = useState<string>("inscription");
   const [showPreviewModal, setShowPreviewModal] = useState(false);
   const [formData, setFormData] = useState({
-    type: "inscription",
-    name: "",
-    logoUrl: "",
-    primaryColor: "#2563eb",
-    headerBgColor: "#2563eb",
-    headerTextColor: "#ffffff",
-    headerTitle: "Formation Manager Itinova",
+    type: "inscription" as "inscription" | "teaser" | "rappel" | "rappelJ1" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password",
+    titre: "",
     bodyContent: "",
-    footerText: "",
-    active: true,
+    couleurPrincipale: "#283581",
+    couleurSecondaire: "#0578BE",
+    piedDePage: "",
   });
 
   const { data: templates, refetch } = trpc.emailTemplates.list.useQuery();
@@ -96,16 +92,12 @@ export default function AdminEmailTemplates() {
   useEffect(() => {
     if (currentTemplate) {
       const newData = {
-        type: currentTemplate.type,
-        name: currentTemplate.name,
-        logoUrl: currentTemplate.logoUrl || "",
-        primaryColor: currentTemplate.primaryColor,
-        headerBgColor: currentTemplate.headerBgColor,
-        headerTextColor: currentTemplate.headerTextColor,
-        headerTitle: currentTemplate.headerTitle,
+        type: currentTemplate.type as "inscription" | "teaser" | "rappel" | "rappelJ1" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password",
+        titre: currentTemplate.titre,
         bodyContent: currentTemplate.bodyContent || "",
-        footerText: currentTemplate.footerText || "",
-        active: currentTemplate.active,
+        couleurPrincipale: currentTemplate.couleurPrincipale,
+        couleurSecondaire: currentTemplate.couleurSecondaire,
+        piedDePage: currentTemplate.piedDePage || "",
       };
       setFormData(newData);
       // Mettre à jour le contenu de l'éditeur
@@ -117,27 +109,28 @@ export default function AdminEmailTemplates() {
 
   const handleSave = () => {
     upsertMutation.mutate({
-      ...formData,
-      logoUrl: formData.logoUrl || null,
-      bodyContent: formData.bodyContent || null,
-      footerText: formData.footerText || null,
+      type: formData.type,
+      titre: formData.titre,
+      bodyContent: formData.bodyContent,
+      couleurPrincipale: formData.couleurPrincipale,
+      couleurSecondaire: formData.couleurSecondaire,
+      piedDePage: formData.piedDePage || null,
     });
   };
 
   const handleReset = () => {
     if (currentTemplate) {
       setFormData({
-        type: currentTemplate.type,
-        name: currentTemplate.name,
-        logoUrl: currentTemplate.logoUrl || "",
-        primaryColor: currentTemplate.primaryColor,
-        headerBgColor: currentTemplate.headerBgColor,
-        headerTextColor: currentTemplate.headerTextColor,
-        headerTitle: currentTemplate.headerTitle,
+        type: currentTemplate.type as "inscription" | "teaser" | "rappel" | "rappelJ1" | "rappel3" | "rappel4" | "rappel5" | "rappel6" | "reset_password",
+        titre: currentTemplate.titre,
         bodyContent: currentTemplate.bodyContent || "",
-        footerText: currentTemplate.footerText || "",
-        active: currentTemplate.active,
+        couleurPrincipale: currentTemplate.couleurPrincipale,
+        couleurSecondaire: currentTemplate.couleurSecondaire,
+        piedDePage: currentTemplate.piedDePage || "",
       });
+      if (editor) {
+        editor.commands.setContent(currentTemplate.bodyContent || "");
+      }
     }
   };
 
@@ -150,24 +143,27 @@ export default function AdminEmailTemplates() {
   // Générer la prévisualisation HTML avec variables remplacées
   const generatePreviewWithVariables = () => {
     // Remplacer les variables par des données d'exemple
-    const replaceVariables = (text: string) => {
+    const replaceVariables = (text: string | null | undefined): string => {
+      if (!text) return '';
       return text
-        .replace(/\{\{nomApprenant\}\}/g, 'Dupont')
-        .replace(/\{\{prenomApprenant\}\}/g, 'Marie')
+        .replace(/\{\{nom\}\}/g, 'Dupont')
+        .replace(/\{\{prenom\}\}/g, 'Marie')
         .replace(/\{\{nomFormation\}\}/g, 'Formation Management')
         .replace(/\{\{nomSequence\}\}/g, 'Séquence 1 - Introduction')
         .replace(/\{\{dateDebut\}\}/g, '15/01/2025')
         .replace(/\{\{dateFin\}\}/g, '17/01/2025')
         .replace(/\{\{lieu\}\}/g, 'Salle de formation A - Bâtiment principal')
         .replace(/\{\{formateur\}\}/g, 'Jean Martin')
+        .replace(/\{\{couleurPrincipale\}\}/g, formData.couleurPrincipale)
+        .replace(/\{\{couleurSecondaire\}\}/g, formData.couleurSecondaire)
+        .replace(/\{\{lienReinitialisation\}\}/g, 'https://formations.itinova.org/reset-password/token123')
         .replace(/\{\{datesHTML\}\}/g, '<div class="date-item"><strong>Date 1 :</strong> lundi 15 janvier 2025</div><div class="date-item"><strong>Date 2 :</strong> mardi 16 janvier 2025</div>');
     };
 
     const bodyWithVars = formData.bodyContent ? replaceVariables(formData.bodyContent) : `
       <p style="color: #9ca3af; font-style: italic;">Saisissez le contenu de votre email dans le champ "Corps du message" pour voir la prévisualisation ici...</p>
     `;
-    const headerWithVars = replaceVariables(formData.headerTitle);
-    const footerWithVars = formData.footerText ? replaceVariables(formData.footerText) : 'Texte du pied de page';
+    const footerWithVars = formData.piedDePage ? replaceVariables(formData.piedDePage) : 'Texte du pied de page';
 
     return `
 <!DOCTYPE html>
@@ -177,21 +173,19 @@ export default function AdminEmailTemplates() {
   <style>
     body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f5f5f5; }
     .container { max-width: 600px; margin: 0 auto; background-color: white; }
-    .header { background-color: ${formData.headerBgColor}; color: ${formData.headerTextColor}; padding: 30px 20px; text-align: center; }
+    .header { background-color: ${formData.couleurPrincipale}; color: white; padding: 30px 20px; text-align: center; }
     .header h1 { margin: 0; font-size: 24px; }
-    ${formData.logoUrl ? `.header img { max-width: 150px; margin-bottom: 15px; }` : ''}
     .content { background-color: #f9fafb; padding: 30px 20px; }
-    .content h2 { color: ${formData.primaryColor}; margin-top: 0; }
+    .content h2 { color: ${formData.couleurPrincipale}; margin-top: 0; }
     .footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
-    .button { display: inline-block; padding: 12px 24px; background-color: ${formData.primaryColor}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
-    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.primaryColor}; padding: 15px; margin: 15px 0; }
+    .button { display: inline-block; padding: 12px 24px; background-color: ${formData.couleurPrincipale}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
+    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.couleurPrincipale}; padding: 15px; margin: 15px 0; }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="header">
-      ${formData.logoUrl ? `<img src="${formData.logoUrl}" alt="Logo" />` : ''}
-      <h1>${headerWithVars}</h1>
+      <h1>${formData.titre}</h1>
     </div>
     <div class="content">
       ${bodyWithVars}
@@ -205,46 +199,6 @@ export default function AdminEmailTemplates() {
     `.trim();
   };
 
-  // Générer la prévisualisation HTML
-  const generatePreview = () => {
-    return `
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>
-    body { font-family: Arial, sans-serif; line-height: 1.6; color: #333; margin: 0; padding: 20px; background-color: #f5f5f5; }
-    .container { max-width: 600px; margin: 0 auto; background-color: white; }
-    .header { background-color: ${formData.headerBgColor}; color: ${formData.headerTextColor}; padding: 30px 20px; text-align: center; }
-    .header h1 { margin: 0; font-size: 24px; }
-    ${formData.logoUrl ? `.header img { max-width: 150px; margin-bottom: 15px; }` : ''}
-    .content { background-color: #f9fafb; padding: 30px 20px; }
-    .content h2 { color: ${formData.primaryColor}; margin-top: 0; }
-    .footer { background-color: #f3f4f6; padding: 20px; text-align: center; font-size: 12px; color: #6b7280; }
-    .button { display: inline-block; padding: 12px 24px; background-color: ${formData.primaryColor}; color: white; text-decoration: none; border-radius: 6px; margin: 10px 0; }
-    .info-box { background-color: #dbeafe; border-left: 4px solid ${formData.primaryColor}; padding: 15px; margin: 15px 0; }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div class="header">
-      ${formData.logoUrl ? `<img src="${formData.logoUrl}" alt="Logo" />` : ''}
-      <h1>${formData.headerTitle}</h1>
-    </div>
-    <div class="content">
-      ${formData.bodyContent ? formData.bodyContent.replace(/\n/g, '<br>') : `
-      <p style="color: #9ca3af; font-style: italic;">Saisissez le contenu de votre email dans le champ "Corps du message" pour voir la prévisualisation ici...</p>
-      `}
-    </div>
-    <div class="footer">
-      <p>${formData.footerText || 'Texte du pied de page'}</p>
-    </div>
-  </div>
-</body>
-</html>
-    `.trim();
-  };
-
   const templateTypes = [
     { value: "inscription", label: "Confirmation d'inscription" },
     { value: "teaser", label: "Email teaser" },
@@ -279,364 +233,199 @@ export default function AdminEmailTemplates() {
           </CardHeader>
           <CardContent>
             <Button onClick={handleInitDefaults} disabled={initMutation.isPending}>
+              <Plus className="mr-2 h-4 w-4" />
               {initMutation.isPending ? "Initialisation..." : "Initialiser les templates par défaut"}
             </Button>
           </CardContent>
         </Card>
       )}
 
-      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
-        {/* Éditeur */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
+        {/* Liste des templates */}
         <Card>
           <CardHeader>
-            <CardTitle>Éditeur de template</CardTitle>
+            <CardTitle>Types de templates</CardTitle>
             <CardDescription>
-              Modifiez les paramètres du template sélectionné
+              Sélectionnez un template à modifier
             </CardDescription>
           </CardHeader>
-          <CardContent className="space-y-4">
-            <div>
-              <Label htmlFor="templateType">Type de template</Label>
-              <Select
-                value={selectedType}
-                onValueChange={(value) => {
-                  setSelectedType(value);
-                  setFormData((prev) => ({ ...prev, type: value }));
-                }}
-              >
-                <SelectTrigger id="templateType">
-                  <SelectValue />
-                </SelectTrigger>
-                <SelectContent>
-                  {templateTypes.map((type) => (
-                    <SelectItem key={type.value} value={type.value}>
-                      {type.label}
-                    </SelectItem>
-                  ))}
-                </SelectContent>
-              </Select>
-            </div>
-
-            <div>
-              <Label htmlFor="name">Nom du template</Label>
-              <Input
-                id="name"
-                value={formData.name}
-                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                placeholder="Ex: Confirmation d'inscription"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="logoUrl">URL du logo (optionnel)</Label>
-              <Input
-                id="logoUrl"
-                value={formData.logoUrl}
-                onChange={(e) => setFormData({ ...formData, logoUrl: e.target.value })}
-                placeholder="https://exemple.com/logo.png"
-              />
-            </div>
-
-            <div className="grid grid-cols-2 gap-4">
-              <div>
-                <Label htmlFor="headerBgColor">Couleur fond en-tête</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="headerBgColor"
-                    type="color"
-                    value={formData.headerBgColor}
-                    onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
-                    className="w-16 h-10 p-1"
-                  />
-                  <Input
-                    value={formData.headerBgColor}
-                    onChange={(e) => setFormData({ ...formData, headerBgColor: e.target.value })}
-                    placeholder="#2563eb"
-                  />
-                </div>
-              </div>
-
-              <div>
-                <Label htmlFor="headerTextColor">Couleur texte en-tête</Label>
-                <div className="flex gap-2">
-                  <Input
-                    id="headerTextColor"
-                    type="color"
-                    value={formData.headerTextColor}
-                    onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
-                    className="w-16 h-10 p-1"
-                  />
-                  <Input
-                    value={formData.headerTextColor}
-                    onChange={(e) => setFormData({ ...formData, headerTextColor: e.target.value })}
-                    placeholder="#ffffff"
-                  />
-                </div>
-              </div>
-            </div>
-
-            <div>
-              <Label htmlFor="primaryColor">Couleur principale</Label>
-              <div className="flex gap-2">
-                <Input
-                  id="primaryColor"
-                  type="color"
-                  value={formData.primaryColor}
-                  onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
-                  className="w-16 h-10 p-1"
-                />
-                <Input
-                  value={formData.primaryColor}
-                  onChange={(e) => setFormData({ ...formData, primaryColor: e.target.value })}
-                  placeholder="#2563eb"
-                />
-              </div>
-              <p className="text-xs text-muted-foreground mt-1">
-                Utilisée pour les boutons et les accents
-              </p>
-            </div>
-
-            <div>
-              <Label htmlFor="headerTitle">Titre de l'en-tête</Label>
-              <Input
-                id="headerTitle"
-                value={formData.headerTitle}
-                onChange={(e) => setFormData({ ...formData, headerTitle: e.target.value })}
-                placeholder="Formation Manager Itinova"
-              />
-            </div>
-
-            <div>
-              <Label htmlFor="bodyContent">Corps du message</Label>
-              
-              {/* Boutons de variables dynamiques */}
-              <div className="flex flex-wrap gap-2 mb-2">
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{nomApprenant}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Nom apprenant
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{prenomApprenant}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Prénom apprenant
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{nomFormation}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Nom formation
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{nomSequence}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Nom séquence
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{dateDebut}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Date début
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{lieu}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Lieu
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{formateur}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Formateur
-                </Button>
-                <Button
-                  type="button"
-                  variant="outline"
-                  size="sm"
-                  onClick={() => editor?.chain().focus().insertContent('{{datesHTML}}').run()}
-                >
-                  <Plus className="h-3 w-3 mr-1" />
-                  Dates (HTML)
-                </Button>
-              </div>
-
-              {/* Éditeur WYSIWYG TipTap */}
-              <div className="border rounded-md">
-                {/* Barre d'outils */}
-                {editor && (
-                  <div className="border-b p-2 flex flex-wrap gap-1 bg-muted/30">
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleBold().run()}
-                      className={editor.isActive('bold') ? 'bg-muted' : ''}
-                    >
-                      <strong>B</strong>
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleItalic().run()}
-                      className={editor.isActive('italic') ? 'bg-muted' : ''}
-                    >
-                      <em>I</em>
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleStrike().run()}
-                      className={editor.isActive('strike') ? 'bg-muted' : ''}
-                    >
-                      <s>S</s>
-                    </Button>
-                    <div className="w-px h-6 bg-border mx-1" />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleHeading({ level: 2 }).run()}
-                      className={editor.isActive('heading', { level: 2 }) ? 'bg-muted' : ''}
-                    >
-                      H2
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleHeading({ level: 3 }).run()}
-                      className={editor.isActive('heading', { level: 3 }) ? 'bg-muted' : ''}
-                    >
-                      H3
-                    </Button>
-                    <div className="w-px h-6 bg-border mx-1" />
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleBulletList().run()}
-                      className={editor.isActive('bulletList') ? 'bg-muted' : ''}
-                    >
-                      • Liste
-                    </Button>
-                    <Button
-                      type="button"
-                      variant="ghost"
-                      size="sm"
-                      onClick={() => editor.chain().focus().toggleOrderedList().run()}
-                      className={editor.isActive('orderedList') ? 'bg-muted' : ''}
-                    >
-                      1. Liste
-                    </Button>
-                  </div>
-                )}
-                {/* Zone d'édition */}
-                <div className="p-3 min-h-[200px] prose prose-sm max-w-none">
-                  <EditorContent editor={editor} />
-                </div>
-              </div>
-              <p className="text-xs text-muted-foreground mt-1">
-                Le contenu du corps du message. Utilisez les boutons ci-dessus pour insérer des variables dynamiques.
-              </p>
-            </div>
-
-            <div>
-              <Label htmlFor="footerText">Texte du pied de page</Label>
-              <Textarea
-                id="footerText"
-                value={formData.footerText}
-                onChange={(e) => setFormData({ ...formData, footerText: e.target.value })}
-                placeholder="Cet email a été envoyé automatiquement..."
-                rows={3}
-              />
-            </div>
-
-            <div className="flex gap-2 pt-4">
-              <Button onClick={handleSave} disabled={upsertMutation.isPending} className="flex-1">
-                <Save className="h-4 w-4 mr-2" />
-                {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
-              </Button>
-              <Button onClick={() => setShowPreviewModal(true)} variant="secondary">
-                <Eye className="h-4 w-4 mr-2 text-blue-600" />
-                Aperçu email
-              </Button>
-              <Button onClick={handleReset} variant="outline">
-                <RotateCcw className="h-4 w-4 mr-2" />
-                Réinitialiser
-              </Button>
+          <CardContent>
+            <div className="space-y-2">
+              {templateTypes.map((templateType) => {
+                const template = templates?.find((t) => t.type === templateType.value);
+                return (
+                  <Button
+                    key={templateType.value}
+                    variant={selectedType === templateType.value ? "default" : "outline"}
+                    className="w-full justify-start"
+                    onClick={() => setSelectedType(templateType.value)}
+                  >
+                    <Mail className="mr-2 h-4 w-4" />
+                    {templateType.label}
+                    {template && (
+                      <span className="ml-auto text-xs text-green-600">✓</span>
+                    )}
+                  </Button>
+                );
+              })}
             </div>
           </CardContent>
         </Card>
 
-        {/* Modal d'aperçu email */}
-        <Dialog open={showPreviewModal} onOpenChange={setShowPreviewModal}>
-          <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
-            <DialogHeader>
-              <DialogTitle>Aperçu de l'email final</DialogTitle>
-              <DialogDescription>
-                Cet aperçu montre comment l'email apparaîtra avec des données d'exemple.
-                Les variables (nomApprenant, nomFormation, datesHTML, etc.) sont remplacées par des valeurs de test.
-              </DialogDescription>
-            </DialogHeader>
-            <div className="border rounded-lg overflow-hidden bg-gray-50">
-              <iframe
-                srcDoc={generatePreviewWithVariables()}
-                className="w-full h-[600px] border-0"
-                title="Aperçu de l'email final"
-              />
-            </div>
-          </DialogContent>
-        </Dialog>
-
-        {/* Prévisualisation */}
-        <Card>
+        {/* Formulaire d'édition */}
+        <Card className="lg:col-span-2">
           <CardHeader>
-            <CardTitle className="flex items-center gap-2">
-              <Eye className="h-5 w-5" />
-              Prévisualisation en temps réel
-            </CardTitle>
+            <CardTitle>Éditer le template</CardTitle>
             <CardDescription>
-              Aperçu de votre template avec les paramètres actuels
+              Personnalisez le contenu et l'apparence de l'email
             </CardDescription>
           </CardHeader>
-          <CardContent>
-            <div className="border rounded-lg overflow-hidden bg-gray-50">
-              <iframe
-                srcDoc={generatePreview()}
-                className="w-full h-[600px] border-0"
-                title="Prévisualisation du template"
-              />
+          <CardContent className="space-y-4">
+            <div className="grid grid-cols-1 gap-4">
+              <div>
+                <Label htmlFor="type">Type de template</Label>
+                <Select
+                  value={formData.type}
+                  onValueChange={(value) =>
+                    setFormData({ ...formData, type: value as typeof formData.type })
+                  }
+                >
+                  <SelectTrigger>
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    {templateTypes.map((type) => (
+                      <SelectItem key={type.value} value={type.value}>
+                        {type.label}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <div>
+                <Label htmlFor="titre">Titre du template</Label>
+                <Input
+                  id="titre"
+                  value={formData.titre}
+                  onChange={(e) => setFormData({ ...formData, titre: e.target.value })}
+                  placeholder="Ex: Confirmation d'inscription"
+                />
+              </div>
+
+              <div className="grid grid-cols-2 gap-4">
+                <div>
+                  <Label htmlFor="couleurPrincipale">Couleur principale</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="couleurPrincipale"
+                      type="color"
+                      value={formData.couleurPrincipale}
+                      onChange={(e) =>
+                        setFormData({ ...formData, couleurPrincipale: e.target.value })
+                      }
+                      className="w-20 h-10"
+                    />
+                    <Input
+                      value={formData.couleurPrincipale}
+                      onChange={(e) =>
+                        setFormData({ ...formData, couleurPrincipale: e.target.value })
+                      }
+                      placeholder="#283581"
+                    />
+                  </div>
+                </div>
+
+                <div>
+                  <Label htmlFor="couleurSecondaire">Couleur secondaire</Label>
+                  <div className="flex gap-2">
+                    <Input
+                      id="couleurSecondaire"
+                      type="color"
+                      value={formData.couleurSecondaire}
+                      onChange={(e) =>
+                        setFormData({ ...formData, couleurSecondaire: e.target.value })
+                      }
+                      className="w-20 h-10"
+                    />
+                    <Input
+                      value={formData.couleurSecondaire}
+                      onChange={(e) =>
+                        setFormData({ ...formData, couleurSecondaire: e.target.value })
+                      }
+                      placeholder="#0578BE"
+                    />
+                  </div>
+                </div>
+              </div>
+
+              <div>
+                <Label htmlFor="bodyContent">Corps du message</Label>
+                <div className="border rounded-md p-2 min-h-[200px]">
+                  <EditorContent editor={editor} />
+                </div>
+                <p className="text-xs text-muted-foreground mt-1">
+                  Variables disponibles : {"{"}{"{"} nom {"}"}{"}"}, {"{"}{"{"} prenom {"}"}{"}"}, {"{"}{"{"} nomFormation {"}"}{"}"}, {"{"}{"{"} nomSequence {"}"}{"}"}, {"{"}{"{"} dateDebut {"}"}{"}"}, {"{"}{"{"} dateFin {"}"}{"}"}, {"{"}{"{"} lieu {"}"}{"}"}, {"{"}{"{"} formateur {"}"}{"}"}, {"{"}{"{"} lienReinitialisation {"}"}{"}"}
+                </p>
+              </div>
+
+              <div>
+                <Label htmlFor="piedDePage">Pied de page</Label>
+                <Textarea
+                  id="piedDePage"
+                  value={formData.piedDePage}
+                  onChange={(e) =>
+                    setFormData({ ...formData, piedDePage: e.target.value })
+                  }
+                  placeholder="Ex: Itinova - Gestion des Formations | contact@itinova.fr"
+                  rows={3}
+                />
+              </div>
+            </div>
+
+            <div className="flex gap-2 pt-4">
+              <Button onClick={handleSave} disabled={upsertMutation.isPending}>
+                <Save className="mr-2 h-4 w-4" />
+                {upsertMutation.isPending ? "Enregistrement..." : "Enregistrer"}
+              </Button>
+              <Button
+                variant="outline"
+                onClick={handleReset}
+                disabled={!currentTemplate}
+              >
+                <RotateCcw className="mr-2 h-4 w-4" />
+                Réinitialiser
+              </Button>
+              <Button
+                variant="outline"
+                onClick={() => setShowPreviewModal(true)}
+              >
+                <Eye className="mr-2 h-4 w-4" />
+                Prévisualiser
+              </Button>
             </div>
           </CardContent>
         </Card>
       </div>
+
+      {/* Modal de prévisualisation */}
+      <Dialog open={showPreviewModal} onOpenChange={setShowPreviewModal}>
+        <DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Prévisualisation de l'email</DialogTitle>
+            <DialogDescription>
+              Aperçu avec les variables remplacées par des exemples
+            </DialogDescription>
+          </DialogHeader>
+          <div className="mt-4">
+            <iframe
+              srcDoc={generatePreviewWithVariables()}
+              className="w-full h-[600px] border rounded-lg"
+              title="Prévisualisation email"
+            />
+          </div>
+        </DialogContent>
+      </Dialog>
     </DashboardLayout>
   );
 }