Add title field to EmailTemplate model and update UI

src/app/(admin)/admin/email-templates/components/EditEmailTemplate.tsx

@@ -6,6 +6,7 @@ import Link from 'next/link';
 
 interface EmailTemplate {
     id: string;
+    title: string;
     content: string;
     createdAt: string;
     modifiedAt: string;
@@ -18,6 +19,7 @@ interface EditEmailTemplateProps {
 export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
     const router = useRouter();
     const [formData, setFormData] = useState({
+        title: '',
         content: '',
     });
     const [isLoading, setIsLoading] = useState(!!id); // Only loading if editing
@@ -42,6 +44,7 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
                 const template: EmailTemplate = await response.json();
 
                 setFormData({
+                    title: template.title,
                     content: template.content,
                 });
 
@@ -55,7 +58,7 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
         fetchEmailTemplate();
     }, [id]);
 
-    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    const handleChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
         const { name, value } = e.target;
         setFormData((prev) => ({ ...prev, [name]: value }));
     };
@@ -67,8 +70,8 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
 
         try {
             // Validate form
-            if (!formData.content) {
+            if (!formData.title || !formData.content) {
-                throw new Error('Content is required');
+                throw new Error('Title and content are required');
             }
 
             // Determine if creating or updating
@@ -132,6 +135,22 @@ export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
             )}
 
             <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <div className="mb-4">
+                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="title">
+                        Title
+                    </label>
+                    <input
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id="title"
+                        type="text"
+                        name="title"
+                        value={formData.title}
+                        onChange={handleChange}
+                        placeholder="Email template title"
+                        required
+                    />
+                </div>
+
                 <div className="mb-6">
                     <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="content">
                         Content

src/app/(admin)/admin/email-templates/detail/[id]/page.tsx

@@ -83,6 +83,12 @@ export default async function EmailTemplateDetailPage(props: { params: Promise<{
                             </dd>
                         </div>
                         <div className="bg-white px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
+                            <dt className="text-sm font-medium text-gray-500">Title</dt>
+                            <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2">
+                                {emailTemplate.title}
+                            </dd>
+                        </div>
+                        <div className="bg-gray-50 px-4 py-5 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-6">
                             <dt className="text-sm font-medium text-gray-500">Content</dt>
                             <dd className="mt-1 text-sm text-gray-900 sm:mt-0 sm:col-span-2 whitespace-pre-wrap">
                                 {emailTemplate.content}

src/app/(admin)/admin/email-templates/page.tsx

@@ -40,7 +40,7 @@ export default async function AdminEmailTemplates() {
                                             scope="col"
                                             className="px-3 py-3.5 text-left text-sm font-semibold text-gray-900"
                                         >
-                                            Content Preview
+                                            Title
                                         </th>
                                         <th
                                             scope="col"
@@ -76,9 +76,7 @@ export default async function AdminEmailTemplates() {
                                                         href={`/admin/email-templates/detail/${template.id}`}
                                                         className="text-indigo-600 hover:text-indigo-900"
                                                     >
-                                                        {template.content.length > 100
+                                                        {template.title}
-                                                            ? template.content.substring(0, 100) + '...'
-                                                            : template.content}
                                                     </Link>
                                                 </td>
                                                 <td className="whitespace-nowrap px-3 py-4 text-sm text-gray-500">

src/app/api/email-templates/[id]/route.ts

@@ -55,17 +55,18 @@ export async function PUT(
         }
 
         const data = await request.json();
-        const { content } = data;
+        const { title, content } = data;
 
         // Validate required fields
-        if (!content) {
+        if (!title || !content) {
             return NextResponse.json(
-                { error: 'Content is required' },
+                { error: 'Title and content are required' },
                 { status: 400 }
             );
         }
 
         // Update email template fields
+        emailTemplate.title = title;
         emailTemplate.content = content;
 
         // Save the updated email template

src/app/api/email-templates/route.ts

@@ -28,18 +28,19 @@ export async function POST(request: NextRequest) {
         const emailTemplateRepository = dataSource.getRepository(EmailTemplate);
 
         const data = await request.json();
-        const { content } = data;
+        const { title, content } = data;
 
         // Validate required fields
-        if (!content) {
+        if (!title || !content) {
             return NextResponse.json(
-                { error: 'Content is required' },
+                { error: 'Title and content are required' },
                 { status: 400 }
             );
         }
 
         // Create and save the new email template
         const emailTemplate = new EmailTemplate();
+        emailTemplate.title = title;
         emailTemplate.content = content;
 
         const savedEmailTemplate = await emailTemplateRepository.save(emailTemplate);

src/lib/database/entities/EmailTemplate.ts

@@ -5,6 +5,9 @@ export class EmailTemplate {
     @PrimaryGeneratedColumn('uuid')
     id: string;
 
+    @Column()
+    title: string;
+
     @Column('text')
     content: string;