create-crm-tmp 2.0.0 → 2.1.0

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

@@ -6,7 +6,7 @@ import { Plus, Edit, Trash2, Mail, MessageSquare, FileText, X } from 'lucide-rea
 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 { cn, devToast } from '@/lib/utils';
 import { ProtectedPage } from '@/components/protected-page';
 import { useConfirm } from '@/hooks/use-confirm';
 import { useUserRole } from '@/hooks/use-user-role';
@@ -64,7 +64,7 @@ export default function TemplatesPage() {
       }
     } catch (error) {
       console.error('Erreur:', error);
-      setError('Erreur lors du chargement des templates');
+      setError(devToast('Erreur lors du chargement des templates', error));
     } finally {
       setLoading(false);
     }
@@ -153,7 +153,7 @@ export default function TemplatesPage() {
 
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast("Erreur lors de l'enregistrement du template", err));
     }
   };
 
@@ -184,7 +184,7 @@ export default function TemplatesPage() {
       fetchTemplates();
       setTimeout(() => setSuccess(''), 5000);
     } catch (err: any) {
-      setError(err.message);
+      setError(devToast('Erreur lors de la suppression du template', err));
     }
   };
 
@@ -292,7 +292,7 @@ export default function TemplatesPage() {
             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"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold shadow-(--shadow-card) transition-colors duration-200"
               >
                 <Plus className="mr-2 inline h-4 w-4" />
                 Nouveau template
@@ -307,10 +307,10 @@ export default function TemplatesPage() {
             <button
               onClick={() => setFilterType('ALL')}
               className={cn(
-                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-[color,background-color,box-shadow] 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',
+                  : 'border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground border shadow-sm',
               )}
             >
               <span className="flex items-center gap-2">
@@ -325,10 +325,10 @@ export default function TemplatesPage() {
             <button
               onClick={() => setFilterType('EMAIL')}
               className={cn(
-                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-[color,background-color,box-shadow] 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',
+                  : 'border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground border shadow-sm',
               )}
             >
               <span className="flex items-center gap-2">
@@ -344,10 +344,10 @@ export default function TemplatesPage() {
             <button
               onClick={() => setFilterType('SMS')}
               className={cn(
-                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-[color,background-color,box-shadow] 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',
+                  : 'border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground border shadow-sm',
               )}
             >
               <span className="flex items-center gap-2">
@@ -363,10 +363,10 @@ export default function TemplatesPage() {
             <button
               onClick={() => setFilterType('NOTE')}
               className={cn(
-                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-all duration-200',
+                'group cursor-pointer rounded-xl px-5 py-2.5 text-sm font-semibold transition-[color,background-color,box-shadow] 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',
+                  : 'border-border bg-card text-muted-foreground hover:bg-muted hover:text-foreground border shadow-sm',
               )}
             >
               <span className="flex items-center gap-2">
@@ -383,19 +383,19 @@ export default function TemplatesPage() {
 
           {/* 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 className="border-border from-muted to-card rounded-2xl border border-dashed bg-linear-to-br p-16 text-center shadow-sm">
+              <div className="bg-primary/15 mx-auto flex h-20 w-20 items-center justify-center rounded-full">
+                <FileText className="text-primary h-10 w-10" />
               </div>
-              <h2 className="mt-6 text-xl font-bold text-foreground">Aucun template</h2>
-              <p className="mt-2 text-sm text-muted-foreground">
+              <h2 className="text-foreground mt-6 text-xl font-bold">Aucun template</h2>
+              <p className="text-muted-foreground mt-2 text-sm">
                 {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"
+                className="bg-primary text-primary-foreground hover:bg-primary/90 mt-8 cursor-pointer rounded-xl px-6 py-3 text-sm font-semibold shadow-(--shadow-card) transition-colors duration-200"
               >
                 <Plus className="mr-2 inline h-4 w-4" />
                 Créer un template
@@ -406,7 +406,7 @@ export default function TemplatesPage() {
               {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"
+                  className="group border-border bg-card hover:border-primary/30 relative overflow-hidden rounded-2xl border p-6 shadow-(--shadow-card) transition-[border-color,box-shadow] duration-300"
                 >
                   {/* Badge de type avec icône */}
                   <div className="mb-4 flex items-center justify-between">
@@ -426,7 +426,7 @@ export default function TemplatesPage() {
                         </span>
                       </div>
                       <div>
-                        <h3 className="text-lg font-bold text-foreground transition-colors group-hover:text-primary">
+                        <h3 className="text-foreground group-hover:text-primary text-lg font-bold transition-colors">
                           {template.name}
                         </h3>
                         <span
@@ -443,15 +443,17 @@ export default function TemplatesPage() {
 
                   {/* 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 className="bg-muted mb-3 rounded-lg p-3">
+                      <p className="text-muted-foreground text-xs font-medium">Sujet</p>
+                      <p className="text-foreground mt-1 text-sm font-semibold">
+                        {template.subject}
+                      </p>
                     </div>
                   )}
 
                   {/* Aperçu du contenu */}
                   <div className="mb-4">
-                    <p className="line-clamp-3 text-sm leading-relaxed text-muted-foreground">
+                    <p className="text-muted-foreground line-clamp-3 text-sm leading-relaxed">
                       {template.content.replace(/<[^>]+>/g, '').substring(0, 120)}
                       {template.content.replace(/<[^>]+>/g, '').length > 120 && '...'}
                     </p>
@@ -459,11 +461,11 @@ export default function TemplatesPage() {
 
                   {/* Actions */}
                   {(canEdit || canDelete) && (
-                    <div className="flex items-center justify-end gap-2 border-t border-border pt-4">
+                    <div className="border-border flex items-center justify-end gap-2 border-t 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"
+                          className="text-muted-foreground hover:bg-primary/15 hover:text-primary cursor-pointer rounded-lg p-2 transition-colors duration-200"
                           title="Modifier"
                         >
                           <Edit className="h-4 w-4" />
@@ -472,7 +474,7 @@ export default function TemplatesPage() {
                       {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"
+                          className="cursor-pointer rounded-lg p-2 text-gray-600 transition-colors hover:bg-red-50 hover:text-red-600"
                           title="Supprimer"
                         >
                           <Trash2 className="h-4 w-4" />
@@ -488,16 +490,16 @@ export default function TemplatesPage() {
 
         {/* 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)">
+          <div className="bg-foreground/30 fixed inset-0 z-50 flex items-center justify-center p-4 backdrop-blur-sm sm:p-6">
+            <div className="border-border bg-card flex max-h-[90vh] w-full max-w-5xl flex-col overflow-hidden rounded-2xl border 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="border-border from-muted to-card shrink-0 border-b bg-linear-to-r 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">
+                    <h2 className="text-foreground text-2xl font-bold">
                       {editingTemplate ? 'Modifier le template' : 'Nouveau template'}
                     </h2>
-                    <p className="mt-1 text-sm text-muted-foreground">
+                    <p className="text-muted-foreground mt-1 text-sm">
                       {editingTemplate
                         ? 'Modifiez les informations du template'
                         : 'Créez un nouveau template réutilisable'}
@@ -510,7 +512,7 @@ export default function TemplatesPage() {
                       setEditingTemplate(null);
                       setError('');
                     }}
-                    className="cursor-pointer rounded-xl p-2 text-muted-foreground transition-all duration-200 hover:bg-muted hover:text-foreground"
+                    className="text-muted-foreground hover:bg-muted hover:text-foreground cursor-pointer rounded-xl p-2 transition-colors duration-200"
                   >
                     <X className="h-6 w-6" />
                   </button>
@@ -524,7 +526,7 @@ export default function TemplatesPage() {
                 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-semibold text-foreground">
+                  <label className="text-foreground block text-sm font-semibold">
                     Nom du template <span className="text-red-500">*</span>
                   </label>
                   <input
@@ -532,13 +534,13 @@ export default function TemplatesPage() {
                     required
                     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"
+                    className="border-border bg-background text-foreground focus:border-primary/50 focus:ring-primary/20 mt-2 block w-full rounded-xl border px-4 py-3 shadow-sm transition-[border-color,box-shadow] focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                     placeholder="Ex: Email de bienvenue"
                   />
                 </div>
 
                 <div>
-                  <label className="block text-sm font-semibold text-foreground">
+                  <label className="text-foreground block text-sm font-semibold">
                     Type <span className="text-red-500">*</span>
                   </label>
                   <select
@@ -551,7 +553,7 @@ export default function TemplatesPage() {
                         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"
+                    className="border-border bg-background text-foreground focus:border-primary/50 focus:ring-primary/20 mt-2 block w-full rounded-xl border px-4 py-3 shadow-sm transition-[border-color,box-shadow] focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                   >
                     <option value="EMAIL">Email</option>
                     <option value="SMS">SMS</option>
@@ -561,7 +563,7 @@ export default function TemplatesPage() {
 
                 {formData.type === 'EMAIL' && (
                   <div>
-                    <label className="block text-sm font-semibold text-foreground">
+                    <label className="text-foreground block text-sm font-semibold">
                       Sujet <span className="text-red-500">*</span>
                     </label>
                     <input
@@ -569,18 +571,18 @@ export default function TemplatesPage() {
                       required
                       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"
+                      className="border-border bg-background text-foreground focus:border-primary/50 focus:ring-primary/20 mt-2 block w-full rounded-xl border px-4 py-3 shadow-sm transition-[border-color,box-shadow] focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                       placeholder="Ex: Bienvenue dans notre CRM"
                     />
                   </div>
                 )}
 
                 <div>
-                  <label className="block text-sm font-semibold text-foreground">
+                  <label className="text-foreground block text-sm font-semibold">
                     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">
+                    <div className="border-border mt-2 rounded-xl border shadow-sm">
                       <Editor
                         ref={formData.type === 'EMAIL' ? emailEditorRef : noteEditorRef}
                         onReady={(methods) => {
@@ -603,21 +605,21 @@ export default function TemplatesPage() {
                         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"
+                        className="border-border bg-background text-foreground focus:border-primary/50 focus:ring-primary/20 mt-2 block w-full rounded-xl border px-4 py-3 shadow-sm transition-[border-color,box-shadow] focus:ring-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50"
                         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="border-primary/20 from-primary/10 to-card mt-6 rounded-xl border bg-linear-to-br 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 className="bg-primary/15 flex h-8 w-8 items-center justify-center rounded-lg">
+                        <FileText className="text-primary h-4 w-4" />
                       </div>
                       <div>
-                        <p className="text-sm font-bold text-foreground">Variables disponibles</p>
-                        <p className="text-xs text-muted-foreground">
+                        <p className="text-foreground text-sm font-bold">Variables disponibles</p>
+                        <p className="text-muted-foreground text-xs">
                           Cliquez sur une variable pour l&apos;insérer dans le contenu
                         </p>
                       </div>
@@ -707,7 +709,7 @@ export default function TemplatesPage() {
                                   }
                                 }}
                                 className={cn(
-                                  'cursor-pointer rounded-lg border px-3 py-2 text-left shadow-sm transition-all hover:shadow-md',
+                                  'cursor-pointer rounded-lg border px-3 py-2 text-left shadow-sm transition-[border-color,box-shadow] hover:shadow-md',
                                   colors.border,
                                   colors.bg,
                                   colors.hoverBg,
@@ -720,7 +722,7 @@ export default function TemplatesPage() {
                                 >
                                   {variable.key}
                                 </span>
-                                <p className="mt-1 max-w-[200px] text-[11px] leading-tight font-normal text-muted-foreground">
+                                <p className="text-muted-foreground mt-1 max-w-[200px] text-[11px] leading-tight font-normal">
                                   {variable.description}
                                 </p>
                               </button>
@@ -731,11 +733,10 @@ export default function TemplatesPage() {
                     })}
                   </div>
                 </div>
-
               </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="border-border bg-muted shrink-0 border-t 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"
@@ -744,14 +745,14 @@ export default function TemplatesPage() {
                       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"
+                    className="border-border bg-card text-foreground hover:bg-background w-full cursor-pointer rounded-xl border px-6 py-3 text-sm font-semibold shadow-sm transition-[color,background-color,box-shadow] duration-200 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"
+                    className="bg-primary text-primary-foreground hover:bg-primary/90 w-full cursor-pointer rounded-xl px-6 py-3 text-sm font-semibold shadow-(--shadow-card) transition-colors duration-200 sm:w-auto"
                   >
                     {editingTemplate ? 'Modifier le template' : 'Créer le template'}
                   </button>