create-crm-tmp 1.1.2 → 2.0.0

package/template/src/app/(dashboard)/templates/page.tsx

@@ -3,10 +3,14 @@
 import { useState, useEffect, useRef } from 'react';
 import { PageHeader } from '@/components/page-header';
 import { Plus, Edit, Trash2, Mail, MessageSquare, FileText, X } from 'lucide-react';
-import { Editor, type DefaultTemplateRef } from '@/components/editor';
-import { AVAILABLE_VARIABLES } from '@/lib/template-variables';
+import { LazyEditor as Editor, type DefaultTemplateRef } from '@/components/lazy-editor';
+import { AVAILABLE_VARIABLES, VARIABLE_SECTIONS } from '@/lib/template-variables';
 import { TemplatesPageSkeleton } from '@/components/skeleton';
 import { cn } from '@/lib/utils';
+import { ProtectedPage } from '@/components/protected-page';
+import { useConfirm } from '@/hooks/use-confirm';
+import { useUserRole } from '@/hooks/use-user-role';
+import { useAppToast } from '@/contexts/app-toast-context';
 
 interface Template {
   id: string;
@@ -19,6 +23,15 @@ interface Template {
 }
 
 export default function TemplatesPage() {
+  const { confirm, ConfirmDialog } = useConfirm();
+  const { hasPermission } = useUserRole();
+  const toast = useAppToast();
+
+  // Permissions
+  const canCreate = hasPermission('templates.create');
+  const canEdit = hasPermission('templates.edit');
+  const canDelete = hasPermission('templates.delete');
+
   const [templates, setTemplates] = useState<Template[]>([]);
   const [loading, setLoading] = useState(true);
   const [showModal, setShowModal] = useState(false);
@@ -61,6 +74,20 @@ export default function TemplatesPage() {
     fetchTemplates();
   }, [filterType]);
 
+  useEffect(() => {
+    if (error) {
+      toast.error(error);
+      setError('');
+    }
+  }, [error, toast]);
+
+  useEffect(() => {
+    if (success) {
+      toast.success(success);
+      setSuccess('');
+    }
+  }, [success, toast]);
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault();
     setError('');
@@ -131,7 +158,16 @@ export default function TemplatesPage() {
   };
 
   const handleDelete = async (id: string) => {
-    if (!confirm('Êtes-vous sûr de vouloir supprimer ce template ?')) {
+    const confirmed = await confirm({
+      title: 'Supprimer le template',
+      description:
+        'Êtes-vous sûr de vouloir supprimer ce template ? Cette action est irréversible.',
+      confirmText: 'Supprimer',
+      cancelText: 'Annuler',
+      variant: 'destructive',
+    });
+
+    if (!confirmed) {
       return;
     }
 
@@ -217,13 +253,26 @@ export default function TemplatesPage() {
   const getTypeColor = (type: string) => {
     switch (type) {
       case 'EMAIL':
-        return 'bg-blue-100 text-blue-800 border-blue-200';
+        return 'bg-blue-50 text-blue-700 border-blue-200';
+      case 'SMS':
+        return 'bg-emerald-50 text-emerald-700 border-emerald-200';
+      case 'NOTE':
+        return 'bg-violet-50 text-violet-700 border-violet-200';
+      default:
+        return 'bg-gray-50 text-gray-700 border-gray-200';
+    }
+  };
+
+  const getTypeIconColor = (type: string) => {
+    switch (type) {
+      case 'EMAIL':
+        return 'text-blue-600';
       case 'SMS':
-        return 'bg-green-100 text-green-800 border-green-200';
+        return 'text-emerald-600';
       case 'NOTE':
-        return 'bg-purple-100 text-purple-800 border-purple-200';
+        return 'text-violet-600';
       default:
-        return 'bg-gray-100 text-gray-800 border-gray-200';
+        return 'text-gray-600';
     }
   };
 
@@ -234,334 +283,485 @@ export default function TemplatesPage() {
   }
 
   return (
-    <div className="h-full">
-      <PageHeader
-        title="Templates"
-        description="Gérez vos templates d'emails, SMS et notes"
-        action={
-          <button
-            onClick={handleNewTemplate}
-            className="cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
-          >
-            <Plus className="mr-2 inline h-4 w-4" />
-            Nouveau template
-          </button>
-        }
-      />
-
-      <div className="p-4 sm:p-6 lg:p-8">
-        {error && <div className="mb-4 rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>}
-        {success && (
-          <div className="mb-4 rounded-lg bg-green-50 p-4 text-sm text-green-600">{success}</div>
-        )}
-
-        {/* Filtres */}
-        <div className="mb-6 flex flex-wrap gap-2">
-          <button
-            onClick={() => setFilterType('ALL')}
-            className={cn(
-              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-              filterType === 'ALL'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50',
-            )}
-          >
-            Tous
-          </button>
-          <button
-            onClick={() => setFilterType('EMAIL')}
-            className={cn(
-              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-              filterType === 'EMAIL'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50',
-            )}
-          >
-            <Mail className="mr-2 inline h-4 w-4" />
-            Emails
-          </button>
-          <button
-            onClick={() => setFilterType('SMS')}
-            className={cn(
-              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-              filterType === 'SMS'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50',
-            )}
-          >
-            <MessageSquare className="mr-2 inline h-4 w-4" />
-            SMS
-          </button>
-          <button
-            onClick={() => setFilterType('NOTE')}
-            className={cn(
-              'rounded-lg px-4 py-2 text-sm font-medium transition-colors',
-              filterType === 'NOTE'
-                ? 'bg-indigo-600 text-white'
-                : 'bg-white text-gray-700 hover:bg-gray-50',
-            )}
-          >
-            <FileText className="mr-2 inline h-4 w-4" />
-            Notes
-          </button>
-        </div>
-
-        {/* Liste des templates */}
-        {filteredTemplates.length === 0 ? (
-          <div className="rounded-lg bg-white p-12 text-center shadow">
-            <div className="text-4xl">📝</div>
-            <h2 className="mt-4 text-lg font-semibold text-gray-900">Aucun template</h2>
-            <p className="mt-2 text-sm text-gray-600">
-              {filterType === 'ALL'
-                ? 'Commencez par créer votre premier template'
-                : `Aucun template de type ${getTypeLabel(filterType)}`}
-            </p>
+    <ProtectedPage requiredPermission="templates.view">
+      <div className="h-full">
+        <PageHeader
+          title="Templates"
+          description="Gérez vos templates d'emails, SMS et notes"
+          action={
+            canCreate ? (
+              <button
+                onClick={handleNewTemplate}
+                className="cursor-pointer rounded-xl bg-primary px-5 py-2.5 text-sm font-semibold text-primary-foreground shadow-(--shadow-card) transition-all duration-200 hover:bg-primary/90"
+              >
+                <Plus className="mr-2 inline h-4 w-4" />
+                Nouveau template
+              </button>
+            ) : undefined
+          }
+        />
+
+        <div className="p-4 sm:p-6 lg:p-8">
+          {/* Filtres modernes */}
+          <div className="mb-8 flex flex-wrap gap-3">
             <button
-              onClick={handleNewTemplate}
-              className="mt-6 cursor-pointer rounded-lg bg-indigo-600 px-6 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700"
+              onClick={() => setFilterType('ALL')}
+              className={cn(
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                filterType === 'ALL'
+                  ? 'bg-primary text-primary-foreground shadow-(--shadow-card)'
+                  : 'border border-border bg-card text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground',
+              )}
             >
-              Créer un template
+              <span className="flex items-center gap-2">
+                <span>Tous</span>
+                {filterType === 'ALL' && (
+                  <span className="ml-1 rounded-full bg-white/20 px-2 py-0.5 text-xs">
+                    {templates.length}
+                  </span>
+                )}
+              </span>
+            </button>
+            <button
+              onClick={() => setFilterType('EMAIL')}
+              className={cn(
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                filterType === 'EMAIL'
+                  ? 'bg-linear-to-r from-blue-600 to-blue-700 text-white shadow-md shadow-blue-500/30'
+                  : 'border border-border bg-card text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground',
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <Mail className="h-4 w-4" />
+                <span>Emails</span>
+                {filterType === 'EMAIL' && (
+                  <span className="ml-1 rounded-full bg-white/20 px-2 py-0.5 text-xs">
+                    {templates.filter((t) => t.type === 'EMAIL').length}
+                  </span>
+                )}
+              </span>
+            </button>
+            <button
+              onClick={() => setFilterType('SMS')}
+              className={cn(
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                filterType === 'SMS'
+                  ? 'bg-linear-to-r from-emerald-600 to-emerald-700 text-white shadow-md shadow-emerald-500/30'
+                  : 'border border-border bg-card text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground',
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <MessageSquare className="h-4 w-4" />
+                <span>SMS</span>
+                {filterType === 'SMS' && (
+                  <span className="ml-1 rounded-full bg-white/20 px-2 py-0.5 text-xs">
+                    {templates.filter((t) => t.type === 'SMS').length}
+                  </span>
+                )}
+              </span>
+            </button>
+            <button
+              onClick={() => setFilterType('NOTE')}
+              className={cn(
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                filterType === 'NOTE'
+                  ? 'bg-linear-to-r from-violet-600 to-violet-700 text-white shadow-md shadow-violet-500/30'
+                  : 'border border-border bg-card text-muted-foreground shadow-sm hover:bg-muted hover:text-foreground',
+              )}
+            >
+              <span className="flex items-center gap-2">
+                <FileText className="h-4 w-4" />
+                <span>Notes</span>
+                {filterType === 'NOTE' && (
+                  <span className="ml-1 rounded-full bg-white/20 px-2 py-0.5 text-xs">
+                    {templates.filter((t) => t.type === 'NOTE').length}
+                  </span>
+                )}
+              </span>
             </button>
           </div>
-        ) : (
-          <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
-            {filteredTemplates.map((template) => (
-              <div
-                key={template.id}
-                className="rounded-lg border border-gray-200 bg-white p-4 shadow transition-shadow hover:shadow-md"
+
+          {/* Liste des templates */}
+          {filteredTemplates.length === 0 ? (
+            <div className="rounded-2xl border border-dashed border-border bg-linear-to-br from-muted to-card p-16 text-center shadow-sm">
+              <div className="mx-auto flex h-20 w-20 items-center justify-center rounded-full bg-primary/15">
+                <FileText className="h-10 w-10 text-primary" />
+              </div>
+              <h2 className="mt-6 text-xl font-bold text-foreground">Aucun template</h2>
+              <p className="mt-2 text-sm text-muted-foreground">
+                {filterType === 'ALL'
+                  ? 'Commencez par créer votre premier template pour gagner du temps'
+                  : `Aucun template de type ${getTypeLabel(filterType)} trouvé`}
+              </p>
+              <button
+                onClick={handleNewTemplate}
+                className="mt-8 cursor-pointer rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-(--shadow-card) transition-all duration-200 hover:bg-primary/90"
               >
-                <div className="flex items-start justify-between">
-                  <div className="flex-1">
-                    <div className="flex items-center gap-2">
-                      {getTypeIcon(template.type)}
-                      <h3 className="text-lg font-semibold text-gray-900">{template.name}</h3>
+                <Plus className="mr-2 inline h-4 w-4" />
+                Créer un template
+              </button>
+            </div>
+          ) : (
+            <div className="grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3">
+              {filteredTemplates.map((template) => (
+                <div
+                  key={template.id}
+                  className="group relative overflow-hidden rounded-2xl border border-border bg-card p-6 shadow-(--shadow-card) transition-all duration-300 hover:border-primary/30"
+                >
+                  {/* Badge de type avec icône */}
+                  <div className="mb-4 flex items-center justify-between">
+                    <div className="flex items-center gap-3">
+                      <div
+                        className={cn(
+                          'flex h-10 w-10 items-center justify-center rounded-xl',
+                          template.type === 'EMAIL'
+                            ? 'bg-blue-100'
+                            : template.type === 'SMS'
+                              ? 'bg-emerald-100'
+                              : 'bg-violet-100',
+                        )}
+                      >
+                        <span className={cn('h-5 w-5', getTypeIconColor(template.type))}>
+                          {getTypeIcon(template.type)}
+                        </span>
+                      </div>
+                      <div>
+                        <h3 className="text-lg font-bold text-foreground transition-colors group-hover:text-primary">
+                          {template.name}
+                        </h3>
+                        <span
+                          className={cn(
+                            'mt-1 inline-flex items-center gap-1.5 rounded-lg border px-2.5 py-1 text-xs font-semibold',
+                            getTypeColor(template.type),
+                          )}
+                        >
+                          {getTypeLabel(template.type)}
+                        </span>
+                      </div>
                     </div>
-                    <span
-                      className={cn(
-                        'mt-2 inline-flex rounded-full border px-2 py-1 text-xs font-medium',
-                        getTypeColor(template.type),
-                      )}
-                    >
-                      {getTypeLabel(template.type)}
-                    </span>
-                    {template.type === 'EMAIL' && template.subject && (
-                      <p className="mt-2 text-sm text-gray-600">
-                        <strong>Sujet:</strong> {template.subject}
-                      </p>
-                    )}
-                    <p className="mt-2 line-clamp-3 text-sm text-gray-500">
-                      {template.content.replace(/<[^>]+>/g, '').substring(0, 100)}
-                      {template.content.length > 100 && '...'}
+                  </div>
+
+                  {/* Sujet pour les emails */}
+                  {template.type === 'EMAIL' && template.subject && (
+                    <div className="mb-3 rounded-lg bg-muted p-3">
+                      <p className="text-xs font-medium text-muted-foreground">Sujet</p>
+                      <p className="mt-1 text-sm font-semibold text-foreground">{template.subject}</p>
+                    </div>
+                  )}
+
+                  {/* Aperçu du contenu */}
+                  <div className="mb-4">
+                    <p className="line-clamp-3 text-sm leading-relaxed text-muted-foreground">
+                      {template.content.replace(/<[^>]+>/g, '').substring(0, 120)}
+                      {template.content.replace(/<[^>]+>/g, '').length > 120 && '...'}
                     </p>
                   </div>
+
+                  {/* Actions */}
+                  {(canEdit || canDelete) && (
+                    <div className="flex items-center justify-end gap-2 border-t border-border pt-4">
+                      {canEdit && (
+                        <button
+                          onClick={() => handleEdit(template)}
+                          className="cursor-pointer rounded-lg p-2 text-muted-foreground transition-all duration-200 hover:bg-primary/15 hover:text-primary"
+                          title="Modifier"
+                        >
+                          <Edit className="h-4 w-4" />
+                        </button>
+                      )}
+                      {canDelete && (
+                        <button
+                          onClick={() => handleDelete(template.id)}
+                          className="cursor-pointer rounded-lg p-2 text-gray-600 transition-all hover:bg-red-50 hover:text-red-600"
+                          title="Supprimer"
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </button>
+                      )}
+                    </div>
+                  )}
                 </div>
-                <div className="mt-4 flex items-center justify-end gap-2">
-                  <button
-                    onClick={() => handleEdit(template)}
-                    className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-gray-100"
-                    title="Modifier"
-                  >
-                    <Edit className="h-4 w-4" />
-                  </button>
+              ))}
+            </div>
+          )}
+        </div>
+
+        {/* Modal de création/édition */}
+        {showModal && (
+          <div className="fixed inset-0 z-50 flex items-center justify-center bg-foreground/30 p-4 backdrop-blur-sm sm:p-6">
+            <div className="flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border border-border bg-card shadow-(--shadow-dropdown)">
+              {/* En-tête fixe */}
+              <div className="shrink-0 border-b border-border bg-linear-to-r from-muted to-card px-6 py-5 sm:px-8 sm:py-6">
+                <div className="flex items-center justify-between">
+                  <div>
+                    <h2 className="text-2xl font-bold text-foreground">
+                      {editingTemplate ? 'Modifier le template' : 'Nouveau template'}
+                    </h2>
+                    <p className="mt-1 text-sm text-muted-foreground">
+                      {editingTemplate
+                        ? 'Modifiez les informations du template'
+                        : 'Créez un nouveau template réutilisable'}
+                    </p>
+                  </div>
                   <button
-                    onClick={() => handleDelete(template.id)}
-                    className="cursor-pointer rounded-lg p-2 text-red-600 transition-colors hover:bg-red-50"
-                    title="Supprimer"
+                    type="button"
+                    onClick={() => {
+                      setShowModal(false);
+                      setEditingTemplate(null);
+                      setError('');
+                    }}
+                    className="cursor-pointer rounded-xl p-2 text-muted-foreground transition-all duration-200 hover:bg-muted hover:text-foreground"
                   >
-                    <Trash2 className="h-4 w-4" />
+                    <X className="h-6 w-6" />
                   </button>
                 </div>
               </div>
-            ))}
-          </div>
-        )}
-      </div>
 
-      {/* Modal de création/édition */}
-      {showModal && (
-        <div className="fixed inset-0 z-50 flex items-center justify-center bg-gray-500/20 p-4 backdrop-blur-sm sm:p-6">
-          <div className="flex max-h-[90vh] w-full max-w-5xl flex-col rounded-lg bg-white p-6 shadow-xl sm:p-8">
-            {/* En-tête fixe */}
-            <div className="shrink-0 border-b border-gray-100 pb-4">
-              <div className="flex items-center justify-between">
-                <h2 className="text-xl font-bold text-gray-900 sm:text-2xl">
-                  {editingTemplate ? 'Modifier le template' : 'Nouveau template'}
-                </h2>
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowModal(false);
-                    setEditingTemplate(null);
-                    setError('');
-                  }}
-                  className="cursor-pointer rounded-lg p-2 text-gray-400 transition-colors hover:bg-gray-100"
-                >
-                  <X className="h-6 w-6" />
-                </button>
-              </div>
-            </div>
-
-            {/* Contenu scrollable */}
-            <form
-              id="template-form"
-              onSubmit={handleSubmit}
-              className="flex-1 space-y-6 overflow-y-auto pt-4 [-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
-            >
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Nom du template *</label>
-                <input
-                  type="text"
-                  required
-                  value={formData.name}
-                  onChange={(e) => setFormData({ ...formData, name: e.target.value })}
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                  placeholder="Ex: Email de bienvenue"
-                />
-              </div>
-
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Type *</label>
-                <select
-                  required
-                  value={formData.type}
-                  onChange={(e) => {
-                    setFormData({
-                      ...formData,
-                      type: e.target.value as 'EMAIL' | 'SMS' | 'NOTE',
-                      subject: e.target.value === 'EMAIL' ? formData.subject : '',
-                    });
-                  }}
-                  className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                >
-                  <option value="EMAIL">Email</option>
-                  <option value="SMS">SMS</option>
-                  <option value="NOTE">Note</option>
-                </select>
-              </div>
-
-              {formData.type === 'EMAIL' && (
+              {/* Contenu scrollable */}
+              <form
+                id="template-form"
+                onSubmit={handleSubmit}
+                className="flex-1 space-y-6 overflow-y-auto px-6 py-6 [-ms-overflow-style:none] [scrollbar-width:none] sm:px-8 sm:py-8 [&::-webkit-scrollbar]:hidden"
+              >
                 <div>
-                  <label className="block text-sm font-medium text-gray-700">Sujet *</label>
+                  <label className="block text-sm font-semibold text-foreground">
+                    Nom du template <span className="text-red-500">*</span>
+                  </label>
                   <input
                     type="text"
                     required
-                    value={formData.subject}
-                    onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
-                    className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                    placeholder="Ex: Bienvenue dans notre CRM"
+                    value={formData.name}
+                    onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                    className="mt-2 block w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground shadow-sm transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                    placeholder="Ex: Email de bienvenue"
                   />
                 </div>
-              )}
 
-              <div>
-                <label className="block text-sm font-medium text-gray-700">Contenu *</label>
-                {formData.type === 'EMAIL' || formData.type === 'NOTE' ? (
-                  <div className="mt-1">
-                    <Editor
-                      ref={formData.type === 'EMAIL' ? emailEditorRef : noteEditorRef}
-                      onReady={(methods) => {
-                        if (formData.type === 'EMAIL') {
-                          emailEditorRef.current = methods;
-                        } else {
-                          noteEditorRef.current = methods;
-                        }
-                        if (formData.content) {
-                          methods.injectHTML(formData.content);
-                        }
-                      }}
-                    />
-                  </div>
-                ) : (
+                <div>
+                  <label className="block text-sm font-semibold text-foreground">
+                    Type <span className="text-red-500">*</span>
+                  </label>
+                  <select
+                    required
+                    value={formData.type}
+                    onChange={(e) => {
+                      setFormData({
+                        ...formData,
+                        type: e.target.value as 'EMAIL' | 'SMS' | 'NOTE',
+                        subject: e.target.value === 'EMAIL' ? formData.subject : '',
+                      });
+                    }}
+                    className="mt-2 block w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground shadow-sm transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                  >
+                    <option value="EMAIL">Email</option>
+                    <option value="SMS">SMS</option>
+                    <option value="NOTE">Note</option>
+                  </select>
+                </div>
+
+                {formData.type === 'EMAIL' && (
                   <div>
-                    <textarea
-                      ref={smsTextareaRef}
+                    <label className="block text-sm font-semibold text-foreground">
+                      Sujet <span className="text-red-500">*</span>
+                    </label>
+                    <input
+                      type="text"
                       required
-                      value={formData.content}
-                      onChange={(e) => setFormData({ ...formData, content: e.target.value })}
-                      rows={6}
-                      className="mt-1 block w-full rounded-lg border border-gray-300 px-4 py-2 text-gray-900 focus:border-indigo-500 focus:ring-2 focus:ring-indigo-500 focus:outline-none"
-                      placeholder="Contenu du SMS..."
+                      value={formData.subject}
+                      onChange={(e) => setFormData({ ...formData, subject: e.target.value })}
+                      className="mt-2 block w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground shadow-sm transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                      placeholder="Ex: Bienvenue dans notre CRM"
                     />
                   </div>
                 )}
 
-                {/* Section Variables */}
-                <div className="mt-4 rounded-lg bg-blue-50 p-4">
-                  <p className="mb-3 text-sm font-semibold text-gray-700">
-                    Variables disponibles :
-                  </p>
-                  <p className="mb-3 text-xs text-gray-600">
-                    Cliquez sur une variable pour l'insérer dans le contenu
-                  </p>
-                  <div className="flex flex-wrap gap-2">
-                    {AVAILABLE_VARIABLES.map((variable) => (
-                      <button
-                        key={variable.key}
-                        type="button"
-                        onClick={() => {
-                          if (formData.type === 'EMAIL' && emailEditorRef.current) {
-                            emailEditorRef.current.insertText(variable.key);
-                          } else if (formData.type === 'NOTE' && noteEditorRef.current) {
-                            noteEditorRef.current.insertText(variable.key);
-                          } else if (formData.type === 'SMS' && smsTextareaRef.current) {
-                            const textarea = smsTextareaRef.current;
-                            const start = textarea.selectionStart || 0;
-                            const end = textarea.selectionEnd || 0;
-                            const text = formData.content;
-                            const newText =
-                              text.substring(0, start) + variable.key + text.substring(end);
-                            setFormData({ ...formData, content: newText });
-                            // Repositionner le curseur après la variable insérée
-                            setTimeout(() => {
-                              textarea.focus();
-                              textarea.setSelectionRange(
-                                start + variable.key.length,
-                                start + variable.key.length,
-                              );
-                            }, 0);
+                <div>
+                  <label className="block text-sm font-semibold text-foreground">
+                    Contenu <span className="text-red-500">*</span>
+                  </label>
+                  {formData.type === 'EMAIL' || formData.type === 'NOTE' ? (
+                    <div className="mt-2 rounded-xl border border-border shadow-sm">
+                      <Editor
+                        ref={formData.type === 'EMAIL' ? emailEditorRef : noteEditorRef}
+                        onReady={(methods) => {
+                          if (formData.type === 'EMAIL') {
+                            emailEditorRef.current = methods;
+                          } else {
+                            noteEditorRef.current = methods;
+                          }
+                          if (formData.content) {
+                            methods.injectHTML(formData.content);
                           }
                         }}
-                        className="cursor-pointer rounded-lg bg-blue-100 px-3 py-1.5 font-mono text-xs text-blue-800 transition-colors hover:bg-blue-200"
-                        title={variable.description}
-                      >
-                        {variable.key}
-                      </button>
-                    ))}
+                      />
+                    </div>
+                  ) : (
+                    <div>
+                      <textarea
+                        ref={smsTextareaRef}
+                        required
+                        value={formData.content}
+                        onChange={(e) => setFormData({ ...formData, content: e.target.value })}
+                        rows={6}
+                        className="mt-2 block w-full rounded-xl border border-border bg-background px-4 py-3 text-foreground shadow-sm transition-all focus:border-primary/50 focus:ring-2 focus:ring-primary/20 focus:outline-none"
+                        placeholder="Contenu du SMS..."
+                      />
+                    </div>
+                  )}
+
+                  {/* Section Variables */}
+                  <div className="mt-6 rounded-xl border border-primary/20 bg-linear-to-br from-primary/10 to-card p-5">
+                    <div className="mb-4 flex items-center gap-2">
+                      <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary/15">
+                        <FileText className="h-4 w-4 text-primary" />
+                      </div>
+                      <div>
+                        <p className="text-sm font-bold text-foreground">Variables disponibles</p>
+                        <p className="text-xs text-muted-foreground">
+                          Cliquez sur une variable pour l&apos;insérer dans le contenu
+                        </p>
+                      </div>
+                    </div>
+                    {(
+                      Object.entries(VARIABLE_SECTIONS) as [
+                        string,
+                        { label: string; color: string },
+                      ][]
+                    ).map(([sectionKey, sectionInfo]) => {
+                      const sectionVars = AVAILABLE_VARIABLES.filter(
+                        (v) => v.section === sectionKey,
+                      );
+                      if (sectionVars.length === 0) return null;
+                      const colorMap: Record<
+                        string,
+                        {
+                          border: string;
+                          bg: string;
+                          text: string;
+                          hoverBg: string;
+                          hoverBorder: string;
+                          label: string;
+                        }
+                      > = {
+                        indigo: {
+                          border: 'border-blue-200',
+                          bg: 'bg-white',
+                          text: 'text-blue-700',
+                          hoverBg: 'hover:bg-blue-50',
+                          hoverBorder: 'hover:border-blue-300',
+                          label: 'text-blue-800',
+                        },
+                        blue: {
+                          border: 'border-blue-200',
+                          bg: 'bg-white',
+                          text: 'text-blue-700',
+                          hoverBg: 'hover:bg-blue-50',
+                          hoverBorder: 'hover:border-blue-300',
+                          label: 'text-blue-800',
+                        },
+                        emerald: {
+                          border: 'border-emerald-200',
+                          bg: 'bg-white',
+                          text: 'text-emerald-700',
+                          hoverBg: 'hover:bg-emerald-50',
+                          hoverBorder: 'hover:border-emerald-300',
+                          label: 'text-emerald-800',
+                        },
+                      };
+                      const colors = colorMap[sectionInfo.color] || colorMap.indigo;
+                      return (
+                        <div key={sectionKey} className="mb-3 last:mb-0">
+                          <p
+                            className={cn(
+                              'mb-1.5 text-xs font-semibold tracking-wide uppercase',
+                              colors.label,
+                            )}
+                          >
+                            {sectionInfo.label}
+                          </p>
+                          <div className="flex flex-wrap gap-3">
+                            {sectionVars.map((variable) => (
+                              <button
+                                key={variable.key}
+                                type="button"
+                                onClick={() => {
+                                  if (formData.type === 'EMAIL' && emailEditorRef.current) {
+                                    emailEditorRef.current.insertText(variable.key);
+                                  } else if (formData.type === 'NOTE' && noteEditorRef.current) {
+                                    noteEditorRef.current.insertText(variable.key);
+                                  } else if (formData.type === 'SMS' && smsTextareaRef.current) {
+                                    const textarea = smsTextareaRef.current;
+                                    const start = textarea.selectionStart || 0;
+                                    const end = textarea.selectionEnd || 0;
+                                    const text = formData.content;
+                                    const newText =
+                                      text.substring(0, start) + variable.key + text.substring(end);
+                                    setFormData({ ...formData, content: newText });
+                                    setTimeout(() => {
+                                      textarea.focus();
+                                      textarea.setSelectionRange(
+                                        start + variable.key.length,
+                                        start + variable.key.length,
+                                      );
+                                    }, 0);
+                                  }
+                                }}
+                                className={cn(
+                                  'cursor-pointer rounded-lg border px-3 py-2 text-left shadow-sm transition-all hover:shadow-md',
+                                  colors.border,
+                                  colors.bg,
+                                  colors.hoverBg,
+                                  colors.hoverBorder,
+                                )}
+                                title="Cliquer pour insérer"
+                              >
+                                <span
+                                  className={cn('font-mono text-xs font-semibold', colors.text)}
+                                >
+                                  {variable.key}
+                                </span>
+                                <p className="mt-1 max-w-[200px] text-[11px] leading-tight font-normal text-muted-foreground">
+                                  {variable.description}
+                                </p>
+                              </button>
+                            ))}
+                          </div>
+                        </div>
+                      );
+                    })}
                   </div>
                 </div>
-              </div>
 
-              {error && (
-                <div className="rounded-lg bg-red-50 p-4 text-sm text-red-600">{error}</div>
-              )}
-            </form>
-
-            {/* Pied de modal fixe */}
-            <div className="shrink-0 border-t border-gray-100 pt-4">
-              <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
-                <button
-                  type="button"
-                  onClick={() => {
-                    setShowModal(false);
-                    setEditingTemplate(null);
-                    setError('');
-                  }}
-                  className="w-full cursor-pointer rounded-lg border border-gray-300 px-4 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 sm:w-auto"
-                >
-                  Annuler
-                </button>
-                <button
-                  type="submit"
-                  form="template-form"
-                  className="w-full cursor-pointer rounded-lg bg-indigo-600 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-indigo-700 sm:w-auto"
-                >
-                  {editingTemplate ? 'Modifier' : 'Créer'}
-                </button>
+              </form>
+
+              {/* Pied de modal fixe */}
+              <div className="shrink-0 border-t border-border bg-muted px-6 py-5 sm:px-8 sm:py-6">
+                <div className="flex flex-col gap-3 sm:flex-row sm:justify-end">
+                  <button
+                    type="button"
+                    onClick={() => {
+                      setShowModal(false);
+                      setEditingTemplate(null);
+                      setError('');
+                    }}
+                    className="w-full cursor-pointer rounded-xl border border-border bg-card px-6 py-3 text-sm font-semibold text-foreground shadow-sm transition-all duration-200 hover:bg-background hover:shadow-md sm:w-auto"
+                  >
+                    Annuler
+                  </button>
+                  <button
+                    type="submit"
+                    form="template-form"
+                    className="w-full cursor-pointer rounded-xl bg-primary px-6 py-3 text-sm font-semibold text-primary-foreground shadow-(--shadow-card) transition-all duration-200 hover:bg-primary/90 sm:w-auto"
+                  >
+                    {editingTemplate ? 'Modifier le template' : 'Créer le template'}
+                  </button>
+                </div>
               </div>
             </div>
           </div>
-        </div>
-      )}
-    </div>
+        )}
+      </div>
+      <ConfirmDialog />
+    </ProtectedPage>
   );
 }