Update TemplateList.tsx

components/TemplateList.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { EmailTemplate } from '../types';
-import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key } from 'lucide-react';
+import { Plus, Edit, Trash2, FileCode, Search, Database, ArrowRightCircle, Code, CopyPlus, Key, HelpCircle, X, Globe, Server, Braces } from 'lucide-react';
 import { generateSelectSQL, generateN8nCode, generateTemplateKey } from '../services/storage';
 
 interface Props {
@@ -13,6 +13,7 @@ interface Props {
 
 const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, onDelete }) => {
   const [search, setSearch] = React.useState('');
+  const [showHelp, setShowHelp] = React.useState(false);
 
   const filtered = templates.filter(t => 
     t.name.toLowerCase().includes(search.toLowerCase()) || 
@@ -23,64 +24,74 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
     e.stopPropagation();
     const sql = generateSelectSQL(t);
     navigator.clipboard.writeText(sql);
-    alert('SELECT query copied! Use this in your n8n SQL node.');
+    alert('Query SELECT copiata! Usala nel tuo nodo SQL su n8n.');
   };
 
   const copyN8nCode = (t: EmailTemplate, e: React.MouseEvent) => {
     e.stopPropagation();
     const code = generateN8nCode(t);
     navigator.clipboard.writeText(code);
-    alert('JS Code copied! Paste this into your n8n Code node.');
+    alert('Codice JS copiato! Incollalo nel tuo nodo Code su n8n.');
   };
 
   const copyTemplateKey = (t: EmailTemplate, e: React.MouseEvent) => {
     e.stopPropagation();
     const key = generateTemplateKey(t.name);
     navigator.clipboard.writeText(key);
-    alert(`Template Key '${key}' copied to clipboard!`);
+    alert(`Chiave Template '${key}' copiata negli appunti!`);
   };
 
   return (
     <div className="p-8 max-w-7xl mx-auto h-screen flex flex-col">
       <div className="flex justify-between items-center mb-8">
         <div>
-          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Email Templates</h1>
+          <h1 className="text-3xl font-bold text-slate-900 tracking-tight">Template Email</h1>
-          <p className="text-slate-500 mt-1">Manage HTML templates for your n8n workflows</p>
+          <p className="text-slate-500 mt-1">Gestisci i template HTML per i tuoi flussi di lavoro n8n</p>
         </div>
         <button 
           onClick={onCreate}
           className="bg-brand-600 hover:bg-brand-700 text-white px-5 py-2.5 rounded-lg font-medium flex items-center gap-2 shadow-sm transition-all active:scale-95"
         >
           <Plus size={20} />
-          New Template
+          Nuovo Template
         </button>
       </div>
 
-      <div className="relative mb-6">
+      <div className="flex items-center gap-3 mb-6">
+        <div className="relative w-full md:w-96">
           <div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
             <Search className="h-5 w-5 text-slate-400" />
           </div>
           <input 
             type="text"
-          placeholder="Search templates..."
+            placeholder="Cerca template..."
             value={search}
             onChange={(e) => setSearch(e.target.value)}
-          className="pl-10 w-full md:w-96 px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
+            className="pl-10 w-full px-4 py-2 border border-slate-200 rounded-lg focus:ring-2 focus:ring-brand-500 focus:border-brand-500 outline-none text-slate-700 bg-white shadow-sm"
           />
         </div>
         
+        <button
+          onClick={() => setShowHelp(true)}
+          className="p-2 bg-white text-slate-500 border border-slate-200 hover:border-brand-500 hover:text-brand-600 rounded-lg shadow-sm transition-all"
+          title="Documentazione API"
+        >
+          <HelpCircle size={20} />
+        </button>
+      </div>
+
       {filtered.length === 0 ? (
         <div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed border-slate-200 rounded-2xl bg-slate-50">
           <div className="bg-white p-4 rounded-full shadow-sm mb-4">
             <FileCode className="h-8 w-8 text-slate-400" />
           </div>
-          <h3 className="text-lg font-medium text-slate-900">No templates found</h3>
+          <h3 className="text-lg font-medium text-slate-900">Nessun template trovato</h3>
-          <p className="text-slate-500 mt-1 max-w-sm text-center">Get started by creating your first HTML email template for automation.</p>
+          <p className="text-slate-500 mt-1 max-w-sm text-center">Inizia creando il tuo primo template email HTML per l'automazione.</p>
           <button 
             onClick={onCreate}
             className="mt-6 text-brand-600 font-medium hover:text-brand-800"
           >
-            Create one now &rarr;
+            Creane uno ora &rarr;
           </button>
         </div>
       ) : (
@@ -97,25 +108,24 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                     {t.name}
                   </h3>
                   <span className="text-xs bg-slate-100 text-slate-500 px-2 py-1 rounded">
-                    {new Date(t.updatedAt).toLocaleDateString()}
+                    {new Date(t.updatedAt).toLocaleDateString('it-IT')}
                   </span>
                 </div>
                 <p className="text-sm text-slate-500 line-clamp-2 mb-3 h-10">
-                  {t.description || 'No description provided.'}
+                  {t.description || 'Nessuna descrizione fornita.'}
                 </p>
-                <div className="text-xs text-slate-400 mb-1">Subject:</div>
+                <div className="text-xs text-slate-400 mb-1">Oggetto:</div>
                 <div className="text-sm text-slate-700 font-medium bg-slate-50 p-2 rounded truncate border border-slate-100">
                   {t.subject}
                 </div>
                 <div className="mt-3 flex flex-wrap gap-1">
                    {t.variables.slice(0, 3).map(v => (
                      <span key={v} className="text-[10px] bg-brand-50 text-brand-600 px-1.5 py-0.5 rounded border border-brand-100">
-                       {/* Explicitly building the string to avoid rendering issues */}
                        {'{{' + v + '}}'}
                      </span>
                    ))}
                    {t.variables.length > 3 && (
-                     <span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} more</span>
+                     <span className="text-[10px] text-slate-400 px-1 py-0.5">+ {t.variables.length - 3} altri</span>
                    )}
                 </div>
               </div>
@@ -124,7 +134,7 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                    <button 
                     onClick={(e) => copySelectSQL(t, e)}
                     className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-brand-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
-                    title="Copy SELECT query"
+                    title="Copia query SELECT"
                   >
                     <ArrowRightCircle size={14} />
                     SQL
@@ -132,7 +142,7 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                   <button 
                     onClick={(e) => copyN8nCode(t, e)}
                     className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-purple-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
-                    title="Copy n8n Code Node JS"
+                    title="Copia Codice JS n8n"
                   >
                     <Code size={14} />
                     JS
@@ -140,7 +150,7 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                   <button 
                     onClick={(e) => copyTemplateKey(t, e)}
                     className="flex items-center gap-1 text-xs font-medium text-slate-600 hover:text-orange-600 px-2 py-1 rounded hover:bg-white border border-transparent hover:border-slate-200 transition-all shadow-sm"
-                    title="Copy Template Key"
+                    title="Copia Chiave Template"
                   >
                     <Key size={14} />
                     Key
@@ -150,21 +160,21 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
                   <button 
                     onClick={(e) => { e.stopPropagation(); onClone(t); }}
                     className="p-1.5 text-slate-500 hover:text-blue-600 hover:bg-white rounded shadow-sm transition-all"
-                    title="Clone Template"
+                    title="Clona Template"
                   >
                     <CopyPlus size={16} />
                   </button>
                   <button 
                     onClick={(e) => { e.stopPropagation(); onEdit(t); }}
                     className="p-1.5 text-slate-500 hover:text-brand-600 hover:bg-white rounded shadow-sm transition-all"
-                    title="Edit"
+                    title="Modifica"
                   >
                     <Edit size={16} />
                   </button>
                   <button 
                     onClick={(e) => { e.stopPropagation(); onDelete(t.id); }}
                     className="p-1.5 text-slate-500 hover:text-red-600 hover:bg-white rounded shadow-sm transition-all"
-                    title="Delete"
+                    title="Elimina"
                   >
                     <Trash2 size={16} />
                   </button>
@@ -174,6 +184,117 @@ const TemplateList: React.FC<Props> = ({ templates, onCreate, onEdit, onClone, o
           ))}
         </div>
       )}
+
+      {/* API Documentation Modal */}
+      {showHelp && (
+        <div className="fixed inset-0 bg-black/60 flex items-center justify-center z-50 p-4 animate-in fade-in duration-200">
+          <div className="bg-white rounded-xl shadow-2xl w-full max-w-3xl flex flex-col max-h-[90vh] overflow-hidden">
+            
+            {/* Modal Header */}
+            <div className="px-6 py-4 border-b border-slate-100 flex justify-between items-center bg-slate-50">
+              <div>
+                <h2 className="text-xl font-bold text-slate-800 flex items-center gap-2">
+                  <Globe className="text-brand-600" size={24} />
+                  Guida Integrazione API
+                </h2>
+                <p className="text-sm text-slate-500">Come inviare email esternamente</p>
+              </div>
+              <button 
+                onClick={() => setShowHelp(false)}
+                className="p-2 hover:bg-slate-200 rounded-full text-slate-500 transition-colors"
+              >
+                <X size={20} />
+              </button>
+            </div>
+
+            {/* Modal Content */}
+            <div className="p-6 overflow-y-auto custom-scrollbar space-y-6">
+              
+              <div className="prose prose-sm text-slate-600">
+                <p>
+                  Dopo aver definito il template, la mail può essere inviata tramite l'endpoint API 'https://ap.site.unisa.it/api/v1/webhooks/NxUftpB17tWeJIZmzN4wl'
+                </p>
+                <p className="font-bold text-slate-700 mt-4">PARAMETRI DA PASSARE:</p>
+              </div>
+
+              {/* Endpoint */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1">
+                  <Server size={14} /> API Endpoint (POST)
+                </label>
+                <div className="bg-slate-900 text-slate-100 p-3 rounded-lg font-mono text-sm break-all">
+                  https://ap.site.unisa.it/api/v1/webhooks/NxUftpB17tWeJIZmzN4wl
+                </div>
+              </div>
+
+              {/* Headers */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1">
+                  <Key size={14} /> Header Richiesti
+                </label>
+                <div className="border border-slate-200 rounded-lg overflow-hidden">
+                  <table className="w-full text-sm text-left">
+                    <thead className="bg-slate-50 text-slate-600 font-medium border-b border-slate-200">
+                      <tr>
+                        <th className="px-4 py-2 w-1/3">Chiave Header</th>
+                        <th className="px-4 py-2">Valore / Descrizione</th>
+                      </tr>
+                    </thead>
+                    <tbody className="divide-y divide-slate-100 text-slate-700">
+                      <tr>
+                        <td className="px-4 py-3 font-mono text-brand-700">template</td>
+                        <td className="px-4 py-3">
+                          <span className="font-mono bg-slate-100 px-1 py-0.5 rounded text-xs">&lt;template_key&gt;</span>
+                          <span className="block text-xs text-slate-500 mt-1">Recuperabile tramite l'icona Chiave nella card del template. Serve al sistema per recuperare il template corretto.</span>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td className="px-4 py-3 font-mono text-brand-700">destinatario</td>
+                        <td className="px-4 py-3">
+                          <span className="font-mono bg-slate-100 px-1 py-0.5 rounded text-xs">email@esempio.it</span>
+                          <span className="block text-xs text-slate-500 mt-1">L'indirizzo email del destinatario.</span>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              {/* Body */}
+              <div className="space-y-2">
+                <label className="text-xs font-bold text-slate-500 uppercase tracking-wider flex items-center gap-1">
+                  <Braces size={14} /> Body della Richiesta (JSON)
+                </label>
+                <p className="text-xs text-slate-500 mb-2">Passa qui i valori delle variabili dinamiche.</p>
+                <div className="bg-slate-50 border border-slate-200 rounded-lg p-4 font-mono text-sm text-slate-800">
+                  <span className="text-slate-500">{'{'}</span>
+                  <div className="pl-4">
+                    <span className="text-purple-700">"nome"</span>: <span className="text-green-600">"Mario"</span>,
+                  </div>
+                  <div className="pl-4">
+                     <span className="text-purple-700">"cognome"</span>: <span className="text-green-600">"Rossi"</span>,
+                  </div>
+                  <div className="pl-4">
+                     <span className="text-purple-700">"email"</span>: <span className="text-green-600">"mrossi@unisa.it"</span>
+                  </div>
+                  <span className="text-slate-500">{'}'}</span>
+                </div>
+              </div>
+
+            </div>
+
+            {/* Modal Footer */}
+            <div className="p-4 bg-slate-50 border-t border-slate-200 flex justify-end">
+              <button 
+                onClick={() => setShowHelp(false)}
+                className="px-4 py-2 bg-brand-600 text-white font-medium rounded hover:bg-brand-700 transition-colors"
+              >
+                Chiudi Guida
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
     </div>
   );
 };