Add EmailTemplate model and CRUD UI in admin console

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

@@ -0,0 +1,169 @@
+'use client';
+
+import { useState, useEffect, FormEvent, ChangeEvent } from 'react';
+import { useRouter } from 'next/navigation';
+import Link from 'next/link';
+
+interface EmailTemplate {
+    id: string;
+    content: string;
+    createdAt: string;
+    modifiedAt: string;
+}
+
+interface EditEmailTemplateProps {
+    id?: string; // Optional for new template
+}
+
+export default function EditEmailTemplate({ id }: EditEmailTemplateProps) {
+    const router = useRouter();
+    const [formData, setFormData] = useState({
+        content: '',
+    });
+    const [isLoading, setIsLoading] = useState(!!id); // Only loading if editing
+    const [isSubmitting, setIsSubmitting] = useState(false);
+    const [error, setError] = useState<string | null>(null);
+
+    // Fetch email template data if editing
+    useEffect(() => {
+        const fetchEmailTemplate = async () => {
+            if (!id) {
+                setIsLoading(false);
+                return;
+            }
+
+            try {
+                const response = await fetch(`/api/email-templates/${id}`);
+
+                if (!response.ok) {
+                    throw new Error('Failed to fetch email template');
+                }
+
+                const template: EmailTemplate = await response.json();
+
+                setFormData({
+                    content: template.content,
+                });
+
+                setIsLoading(false);
+            } catch (err) {
+                setError('Failed to load email template data');
+                setIsLoading(false);
+            }
+        };
+
+        fetchEmailTemplate();
+    }, [id]);
+
+    const handleChange = (e: ChangeEvent<HTMLTextAreaElement>) => {
+        const { name, value } = e.target;
+        setFormData((prev) => ({ ...prev, [name]: value }));
+    };
+
+    const handleSubmit = async (e: FormEvent) => {
+        e.preventDefault();
+        setIsSubmitting(true);
+        setError(null);
+
+        try {
+            // Validate form
+            if (!formData.content) {
+                throw new Error('Content is required');
+            }
+
+            // Determine if creating or updating
+            const url = id ? `/api/email-templates/${id}` : '/api/email-templates';
+            const method = id ? 'PUT' : 'POST';
+
+            // Submit the form
+            const response = await fetch(url, {
+                method,
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(formData),
+            });
+
+            if (!response.ok) {
+                const data = await response.json();
+                throw new Error(data.error || `Failed to ${id ? 'update' : 'create'} email template`);
+            }
+
+            // Redirect to email templates list on success
+            router.push('/admin/email-templates');
+            router.refresh();
+        } catch (err) {
+            setError(err instanceof Error ? err.message : 'An error occurred');
+            setIsSubmitting(false);
+        }
+    };
+
+    if (isLoading) {
+        return <div className="text-center py-10">Loading...</div>;
+    }
+
+    return (
+        <div>
+            <div className="flex justify-between items-center mb-6">
+                <h1 className="text-2xl font-semibold text-gray-900">
+                    {id ? 'Edit Email Template' : 'Add New Email Template'}
+                </h1>
+                <Link
+                    href="/admin/email-templates"
+                    className="text-indigo-600 hover:text-indigo-900"
+                >
+                    Back to Email Templates
+                </Link>
+            </div>
+
+            {error && (
+                <div className="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
+                    <div className="flex">
+                        <div className="flex-shrink-0">
+                            <svg className="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
+                                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
+                            </svg>
+                        </div>
+                        <div className="ml-3">
+                            <p className="text-sm text-red-700">{error}</p>
+                        </div>
+                    </div>
+                </div>
+            )}
+
+            <form onSubmit={handleSubmit} className="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
+                <div className="mb-6">
+                    <label className="block text-gray-700 text-sm font-bold mb-2" htmlFor="content">
+                        Content
+                    </label>
+                    <textarea
+                        className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                        id="content"
+                        name="content"
+                        value={formData.content}
+                        onChange={handleChange}
+                        placeholder="Email template content"
+                        rows={10}
+                        required
+                    />
+                </div>
+
+                <div className="flex items-center justify-between">
+                    <button
+                        className="bg-indigo-600 hover:bg-indigo-700 text-white font-bold py-2 px-4 rounded focus:outline-none focus:shadow-outline disabled:opacity-50"
+                        type="submit"
+                        disabled={isSubmitting}
+                    >
+                        {isSubmitting ? (id ? 'Updating...' : 'Creating...') : (id ? 'Update Template' : 'Create Template')}
+                    </button>
+                    <Link
+                        href="/admin/email-templates"
+                        className="inline-block align-baseline font-bold text-sm text-indigo-600 hover:text-indigo-800"
+                    >
+                        Cancel
+                    </Link>
+                </div>
+            </form>
+        </div>
+    );
+}