the email template itself has to be able to get modified by admin

src/app/admin/settings/email-templates/page.tsx

@@ -1,8 +1,95 @@
 
+'use client';
+
+import { useState, useEffect } from 'react';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { Button } from '@/components/ui/button';
+import { useToast } from '@/hooks/use-toast';
+import { getEmailTemplate, updateEmailTemplate } from '@/lib/actions/email';
+import { Input } from '@/components/ui/input';
+import { Textarea } from '@/components/ui/textarea';
+import { Label } from '@/components/ui/label';
+
+type EmailTemplate = {
+  subject: string;
+  body: string;
+};
+
+function EmailPreview({ template }: { template: EmailTemplate }) {
+  const previewBody = template.body.replace(
+    '[EstimateDetails]',
+    `<div class="my-6 space-y-4 rounded-lg border bg-background p-4">
+        <div>
+            <h3 class="font-semibold">Custom Development Estimate</h3>
+            <p class="text-2xl font-bold">[Custom Hours]+ hours</p>
+        </div>
+        <div>
+            <h3 class="font-semibold">Ready-Made Tools Estimate</h3>
+            <p class="text-2xl font-bold">[Ready-Made Hours]+ hours</p>
+        </div>
+    </div>`
+  ).replace(/\n/g, '<br />');
+
+  return (
+    <div className="w-full rounded-lg border bg-muted p-6">
+      <div className="font-sans text-sm text-foreground">
+        <h2 className="text-xl font-bold">{template.subject}</h2>
+        <div className="mt-4" dangerouslySetInnerHTML={{ __html: previewBody }} />
+      </div>
+    </div>
+  );
+}
 
 export default function EmailTemplatesPage() {
+  const [isEditing, setIsEditing] = useState(false);
+  const [template, setTemplate] = useState<EmailTemplate>({ subject: '', body: '' });
+  const [isLoading, setIsLoading] = useState(true);
+  const { toast } = useToast();
+
+  useEffect(() => {
+    async function fetchTemplate() {
+      setIsLoading(true);
+      try {
+        const fetchedTemplate = await getEmailTemplate();
+        if (fetchedTemplate) {
+          setTemplate(fetchedTemplate);
+        } else {
+           throw new Error('Could not find email template.');
+        }
+      } catch (error: any) {
+        toast({
+          variant: 'destructive',
+          title: 'Error',
+          description: error.message || 'Failed to load email template.',
+        });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    fetchTemplate();
+  }, [toast]);
+
+  const handleSave = async () => {
+    try {
+      const result = await updateEmailTemplate(template);
+      if (result.success) {
+        toast({
+          title: 'Success',
+          description: 'Email template updated successfully.',
+        });
+        setIsEditing(false);
+      } else {
+        throw new Error(result.message);
+      }
+    } catch (error: any) {
+      toast({
+        variant: 'destructive',
+        title: 'Error',
+        description: error.message || 'Failed to save template.',
+      });
+    }
+  };
+
   return (
     <div className="space-y-8">
       <div>
@@ -18,33 +105,45 @@ export default function EmailTemplatesPage() {
               <CardTitle>Estimate Completion Email</CardTitle>
               <CardDescription>This is the email users receive.</CardDescription>
             </div>
-            <Button variant="outline">Edit Template</Button>
+            {!isEditing ? (
+              <Button variant="outline" onClick={() => setIsEditing(true)}>Edit Template</Button>
+            ) : (
+                <div className="flex gap-2">
+                    <Button variant="outline" onClick={() => setIsEditing(false)}>Cancel</Button>
+                    <Button onClick={handleSave}>Save Changes</Button>
+                </div>
+            )}
           </div>
         </CardHeader>
         <CardContent>
-          <div className="w-full rounded-lg border bg-muted p-6">
-            <div className="font-sans text-sm text-foreground">
-              <h2 className="text-xl font-bold">Your Project Estimate is Ready!</h2>
-              <p className="mt-4">Hello, [User Name],</p>
-              <p className="mt-2">Thank you for using EstimateFlow. We've prepared a rough estimate for your project based on your selections.</p>
-              
-              <div className="my-6 space-y-4 rounded-lg border bg-background p-4">
-                <div>
-                  <h3 className="font-semibold">Custom Development Estimate</h3>
-                  <p className="text-2xl font-bold">[Custom Hours]+ hours</p>
-                </div>
-                 <div>
-                  <h3 className="font-semibold">Ready-Made Tools Estimate</h3>
-                  <p className="text-2xl font-bold">[Ready-Made Hours]+ hours</p>
-                </div>
+          {isLoading ? (
+            <p>Loading template...</p>
+          ) : isEditing ? (
+            <div className="space-y-4">
+              <div className="space-y-2">
+                <Label htmlFor="subject">Subject</Label>
+                <Input
+                  id="subject"
+                  value={template.subject}
+                  onChange={(e) => setTemplate({ ...template, subject: e.target.value })}
+                />
+              </div>
+              <div className="space-y-2">
+                <Label htmlFor="body">Body</Label>
+                <Textarea
+                  id="body"
+                  value={template.body}
+                  onChange={(e) => setTemplate({ ...template, body: e.target.value })}
+                  className="h-64 font-mono"
+                />
+                 <p className="text-xs text-muted-foreground">
+                  Use placeholders like [User Name] and [EstimateDetails]. They will be replaced with actual values.
+                </p>
               </div>
-
-              <p className="mt-2">Please note that this is a preliminary estimate. For a more detailed quote and to discuss your project further, please don't hesitate to contact us.</p>
-              
-              <p className="mt-6">Best regards,</p>
-              <p className="font-semibold">The EstimateFlow Team</p>
             </div>
-          </div>
+          ) : (
+            <EmailPreview template={template} />
+          )}
         </CardContent>
       </Card>
     </div>