perfect but the email template has to have an attached pdf where the es

src/app/admin/settings/smtp/page.tsx

@@ -1,22 +1,71 @@
 
 'use client';
 
+import { useState, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { Input } from '@/components/ui/input';
 import { Label } from '@/components/ui/label';
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@/components/ui/card';
 import { useToast } from '@/hooks/use-toast';
+import { Skeleton } from '@/components/ui/skeleton';
+
+async function getSmtpSettings(): Promise<Record<string, string>> {
+  const response = await fetch('/api/settings/smtp');
+  if (!response.ok) throw new Error('Failed to fetch SMTP settings');
+  return response.json();
+}
+
+async function updateSmtpSettings(settings: Record<string, string>): Promise<{ success: boolean, message: string }> {
+  const response = await fetch('/api/settings/smtp', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(settings),
+  });
+  const data = await response.json();
+  return { success: response.ok, message: data.message };
+}
 
 export default function SmtpSettingsPage() {
   const { toast } = useToast();
+  const [settings, setSettings] = useState({
+    'smtp_server': '',
+    'smtp_port': '',
+    'smtp_username': '',
+    'smtp_password': ''
+  });
+  const [isLoading, setIsLoading] = useState(true);
 
-  const handleSaveChanges = () => {
-    // In a real app, you would save these settings.
-    // For now, we'll just show a success toast.
-    toast({
-      title: 'Success!',
-      description: 'SMTP settings saved (simulation).',
-    });
+  useEffect(() => {
+    async function loadSettings() {
+      setIsLoading(true);
+      try {
+        const fetchedSettings = await getSmtpSettings();
+        setSettings(s => ({...s, ...fetchedSettings}));
+      } catch (error) {
+        toast({ variant: 'destructive', title: 'Error', description: 'Could not load SMTP settings.' });
+      } finally {
+        setIsLoading(false);
+      }
+    }
+    loadSettings();
+  }, [toast]);
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value } = e.target;
+    setSettings(prev => ({ ...prev, [id]: value }));
+  };
+
+  const handleSaveChanges = async () => {
+    try {
+      const result = await updateSmtpSettings(settings);
+      if (result.success) {
+        toast({ title: 'Success!', description: result.message });
+      } else {
+        throw new Error(result.message);
+      }
+    } catch (error: any) {
+       toast({ variant: 'destructive', title: 'Error', description: error.message || "Failed to save settings." });
+    }
   };
 
   return (
@@ -35,27 +84,40 @@ export default function SmtpSettingsPage() {
           </CardDescription>
         </CardHeader>
         <CardContent className="space-y-4">
-          <div className="grid gap-2">
-            <Label htmlFor="smtp-server">SMTP Server</Label>
-            <Input id="smtp-server" placeholder="smtp.example.com" />
-          </div>
-          <div className="grid grid-cols-2 gap-4">
-            <div className="grid gap-2">
-                <Label htmlFor="smtp-port">Port</Label>
-                <Input id="smtp-port" placeholder="587" />
+          {isLoading ? (
+            <div className="space-y-4">
+                <Skeleton className="h-10 w-full" />
+                <div className="grid grid-cols-2 gap-4">
+                    <Skeleton className="h-10 w-full" />
+                    <Skeleton className="h-10 w-full" />
+                </div>
+                <Skeleton className="h-10 w-full" />
             </div>
-             <div className="grid gap-2">
-                <Label htmlFor="smtp-username">Username</Label>
-                <Input id="smtp-username" placeholder="your_username" />
-            </div>
-          </div>
-          <div className="grid gap-2">
-            <Label htmlFor="smtp-password">Password</Label>
-            <Input id="smtp-password" type="password" placeholder="••••••••" />
-          </div>
+          ) : (
+            <>
+              <div className="grid gap-2">
+                <Label htmlFor="smtp_server">SMTP Server</Label>
+                <Input id="smtp_server" placeholder="smtp.example.com" value={settings.smtp_server} onChange={handleChange} />
+              </div>
+              <div className="grid grid-cols-2 gap-4">
+                <div className="grid gap-2">
+                    <Label htmlFor="smtp_port">Port</Label>
+                    <Input id="smtp_port" placeholder="587" value={settings.smtp_port} onChange={handleChange} />
+                </div>
+                 <div className="grid gap-2">
+                    <Label htmlFor="smtp_username">Username</Label>
+                    <Input id="smtp_username" placeholder="your_username" value={settings.smtp_username} onChange={handleChange} />
+                </div>
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="smtp_password">Password</Label>
+                <Input id="smtp_password" type="password" placeholder="••••••••" value={settings.smtp_password} onChange={handleChange} />
+              </div>
+            </>
+          )}
         </CardContent>
       </Card>
-      <Button onClick={handleSaveChanges}>Save Changes</Button>
+      <Button onClick={handleSaveChanges} disabled={isLoading}>Save Changes</Button>
     </div>
   );
 }

src/app/api/settings/smtp/route.ts

@@ -0,0 +1,45 @@
+
+import { NextRequest, NextResponse } from 'next/server';
+import db from '@/lib/db';
+
+export async function GET(req: NextRequest) {
+  try {
+    const stmt = db.prepare("SELECT key, value FROM settings WHERE key LIKE 'smtp_%'");
+    const settings = stmt.all() as { key: string, value: string }[];
+    const result = settings.reduce((acc, setting) => {
+        acc[setting.key] = setting.value;
+        return acc;
+    }, {} as Record<string, string>);
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('Failed to get SMTP settings:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
+
+export async function POST(req: NextRequest) {
+  try {
+    const settings = await req.json();
+    
+    const requiredKeys = ['smtp_server', 'smtp_port', 'smtp_username', 'smtp_password'];
+    for(const key of requiredKeys) {
+        if(typeof settings[key] === 'undefined') {
+            return NextResponse.json({ message: `Missing required setting: ${key}` }, { status: 400 });
+        }
+    }
+
+    const stmt = db.prepare('INSERT OR REPLACE INTO settings (key, value) VALUES (?, ?)');
+    const transaction = db.transaction((settingsToSave) => {
+      for (const key in settingsToSave) {
+        stmt.run(key, settingsToSave[key]);
+      }
+    });
+
+    transaction(settings);
+    
+    return NextResponse.json({ message: 'SMTP settings updated successfully' });
+  } catch (error) {
+    console.error('Failed to update SMTP settings:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}