628 lines
23 KiB
TypeScript
628 lines
23 KiB
TypeScript
import { useState, useEffect } from "react";
|
|
import { useEditor, EditorContent } from '@tiptap/react';
|
|
import StarterKit from '@tiptap/starter-kit';
|
|
import { TextStyle } from '@tiptap/extension-text-style';
|
|
import { Color } from '@tiptap/extension-color';
|
|
import { Link } from '@tiptap/extension-link';
|
|
import { trpc } from "@/lib/trpc";
|
|
import DashboardLayout from "@/components/DashboardLayout";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { Textarea } from "@/components/ui/textarea";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { toast } from "sonner";
|
|
import { Mail, Eye, Save, RotateCcw, Plus } from "lucide-react";
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogDescription,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog";
|
|
|
|
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",
|
|
bodyContent: "",
|
|
footerText: "",
|
|
active: true,
|
|
});
|
|
|
|
const { data: templates, refetch } = trpc.emailTemplates.list.useQuery();
|
|
const { data: currentTemplate } = trpc.emailTemplates.getByType.useQuery(
|
|
{ type: selectedType },
|
|
{ enabled: !!selectedType }
|
|
);
|
|
|
|
// Initialiser l'éditeur TipTap
|
|
const editor = useEditor({
|
|
extensions: [
|
|
StarterKit,
|
|
TextStyle,
|
|
Color,
|
|
Link.configure({
|
|
openOnClick: false,
|
|
}),
|
|
],
|
|
content: formData.bodyContent,
|
|
onUpdate: ({ editor }) => {
|
|
setFormData({ ...formData, bodyContent: editor.getHTML() });
|
|
},
|
|
});
|
|
|
|
const upsertMutation = trpc.emailTemplates.upsert.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Template enregistré avec succès");
|
|
refetch();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(`Erreur: ${error.message}`);
|
|
},
|
|
});
|
|
|
|
const initMutation = trpc.emailTemplates.initializeDefaults.useMutation({
|
|
onSuccess: () => {
|
|
toast.success("Templates par défaut initialisés");
|
|
refetch();
|
|
},
|
|
onError: (error) => {
|
|
toast.error(`Erreur: ${error.message}`);
|
|
},
|
|
});
|
|
|
|
// Charger le template sélectionné
|
|
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,
|
|
bodyContent: currentTemplate.bodyContent || "",
|
|
footerText: currentTemplate.footerText || "",
|
|
active: currentTemplate.active,
|
|
};
|
|
setFormData(newData);
|
|
// Mettre à jour le contenu de l'éditeur
|
|
if (editor) {
|
|
editor.commands.setContent(newData.bodyContent);
|
|
}
|
|
}
|
|
}, [currentTemplate, editor]);
|
|
|
|
const handleSave = () => {
|
|
upsertMutation.mutate({
|
|
...formData,
|
|
logoUrl: formData.logoUrl || null,
|
|
bodyContent: formData.bodyContent || null,
|
|
footerText: formData.footerText || 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,
|
|
bodyContent: currentTemplate.bodyContent || "",
|
|
footerText: currentTemplate.footerText || "",
|
|
active: currentTemplate.active,
|
|
});
|
|
}
|
|
};
|
|
|
|
const handleInitDefaults = () => {
|
|
if (confirm("Initialiser les templates par défaut ? Cela ne modifiera pas les templates existants.")) {
|
|
initMutation.mutate();
|
|
}
|
|
};
|
|
|
|
// 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) => {
|
|
return text
|
|
.replace(/\{\{nomApprenant\}\}/g, 'Dupont')
|
|
.replace(/\{\{prenomApprenant\}\}/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');
|
|
};
|
|
|
|
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';
|
|
|
|
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>${headerWithVars}</h1>
|
|
</div>
|
|
<div class="content">
|
|
${bodyWithVars}
|
|
</div>
|
|
<div class="footer">
|
|
<p>${footerWithVars}</p>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`.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" },
|
|
{ value: "rappel", label: "Rappel J-7" },
|
|
{ value: "reset_password", label: "Réinitialisation de mot de passe" },
|
|
];
|
|
|
|
return (
|
|
<DashboardLayout>
|
|
<div className="mb-6">
|
|
<h1 className="text-3xl font-bold mb-2">Templates d'emails</h1>
|
|
<p className="text-muted-foreground">
|
|
Personnalisez l'apparence de vos emails automatiques
|
|
</p>
|
|
</div>
|
|
|
|
{(!templates || templates.length === 0) && (
|
|
<Card className="mb-6 border-yellow-200 bg-yellow-50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Mail className="h-5 w-5" />
|
|
Initialisation requise
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Aucun template trouvé. Initialisez les templates par défaut pour commencer.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Button onClick={handleInitDefaults} disabled={initMutation.isPending}>
|
|
{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 */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Éditeur de template</CardTitle>
|
|
<CardDescription>
|
|
Modifiez les paramètres du template sélectionné
|
|
</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>
|
|
</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" />
|
|
Aperçu email
|
|
</Button>
|
|
<Button onClick={handleReset} variant="outline">
|
|
<RotateCcw className="h-4 w-4 mr-2" />
|
|
Réinitialiser
|
|
</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, 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>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Eye className="h-5 w-5" />
|
|
Prévisualisation en temps réel
|
|
</CardTitle>
|
|
<CardDescription>
|
|
Aperçu de votre template avec les paramètres actuels
|
|
</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"
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</DashboardLayout>
|
|
);
|
|
}
|