on email tab create a test email button to test smtp integration

package-lock.json

@@ -43,6 +43,7 @@
         "genkit": "^1.14.1",
         "lucide-react": "^0.475.0",
         "next": "15.3.3",
+        "nodemailer": "^6.9.14",
         "patch-package": "^8.0.0",
         "react": "^18.3.1",
         "react-day-picker": "^8.10.1",
@@ -56,6 +57,7 @@
       "devDependencies": {
         "@types/better-sqlite3": "^7.6.11",
         "@types/node": "^20",
+        "@types/nodemailer": "^6.4.15",
         "@types/react": "^18",
         "@types/react-dom": "^18",
         "genkit-cli": "^1.14.1",
@@ -4300,6 +4302,16 @@
         "undici-types": "~6.19.2"
       }
     },
+    "node_modules/@types/nodemailer": {
+      "version": "6.4.17",
+      "resolved": "https://registry.npmjs.org/@types/nodemailer/-/nodemailer-6.4.17.tgz",
+      "integrity": "sha512-I9CCaIp6DTldEg7vyUTZi8+9Vo0hi1/T8gv3C89yk1rSAAzoKQ8H8ki/jBYJSFoH/BisgLP8tkZMlQ91CIquww==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/prop-types": {
       "version": "15.7.14",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
@@ -7873,6 +7885,15 @@
         "url": "https://opencollective.com/node-fetch"
       }
     },
+    "node_modules/nodemailer": {
+      "version": "6.10.1",
+      "resolved": "https://registry.npmjs.org/nodemailer/-/nodemailer-6.10.1.tgz",
+      "integrity": "sha512-Z+iLaBGVaSjbIzQ4pX6XV41HrooLsQ10ZWPUehGmuantvzWoDVBnmsdUcOIDM1t+yPor5pDhVlDESgOMEGxhHA==",
+      "license": "MIT-0",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
     "node_modules/normalize-path": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",

package.json

@@ -48,6 +48,7 @@
     "genkit": "^1.14.1",
     "lucide-react": "^0.475.0",
     "next": "15.3.3",
+    "nodemailer": "^6.9.14",
     "patch-package": "^8.0.0",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
@@ -61,6 +62,7 @@
   "devDependencies": {
     "@types/better-sqlite3": "^7.6.11",
     "@types/node": "^20",
+    "@types/nodemailer": "^6.4.15",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "genkit-cli": "^1.14.1",

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

@@ -9,12 +9,16 @@ import {
   Card,
   CardContent,
   CardDescription,
+  CardFooter,
   CardHeader,
   CardTitle,
 } from "@/components/ui/card";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { useToast } from "@/hooks/use-toast";
+import { useState, useTransition } from "react";
+import { sendTestEmail } from "@/lib/actions/email";
+import { Mail } from "lucide-react";
 
 const emailSettingsSchema = z.object({
   smtpHost: z.string().min(1, "SMTP Host is required"),
@@ -29,9 +33,13 @@ type EmailSettingsFormValues = z.infer<typeof emailSettingsSchema>;
 
 export default function EmailSettingsPage() {
   const { toast } = useToast();
+  const [isSaving, startSavingTransition] = useTransition();
+  const [isTesting, setIsTesting] = useState(false);
+
   const {
     register,
     handleSubmit,
+    getValues,
     formState: { errors },
   } = useForm<EmailSettingsFormValues>({
     resolver: zodResolver(emailSettingsSchema),
@@ -46,6 +54,7 @@ export default function EmailSettingsPage() {
   });
 
   const onSubmit: SubmitHandler<EmailSettingsFormValues> = async (data) => {
+    startSavingTransition(async () => {
         // Here you would typically send the data to your backend to save it
         console.log("Saving email settings:", data);
 
@@ -56,18 +65,47 @@ export default function EmailSettingsPage() {
         title: "Settings Saved",
         description: "Your SMTP email settings have been updated successfully.",
         });
+    });
+  };
+
+  const handleTestEmail = async () => {
+    setIsTesting(true);
+    try {
+      const settings = getValues();
+      const result = await sendTestEmail(settings);
+      if (result.success) {
+        toast({
+          title: "Test Email Sent",
+          description: "The test email was sent successfully.",
+        });
+      } else {
+        toast({
+          title: "Failed to Send Email",
+          description: result.error || "An unknown error occurred.",
+          variant: "destructive",
+        });
+      }
+    } catch (error) {
+      toast({
+        title: "Error",
+        description: "An unexpected error occurred while sending the test email.",
+        variant: "destructive",
+      });
+    } finally {
+      setIsTesting(false);
+    }
   };
 
   return (
     <Card className="max-w-4xl">
+      <form onSubmit={handleSubmit(onSubmit)}>
         <CardHeader>
           <CardTitle>Email Settings</CardTitle>
           <CardDescription>
             Configure your SMTP settings to send emails from the platform.
           </CardDescription>
         </CardHeader>
-      <CardContent>
+        <CardContent className="grid gap-6">
-        <form onSubmit={handleSubmit(onSubmit)} className="grid gap-6">
             <div className="grid grid-cols-1 gap-6 md:grid-cols-2">
               <div className="grid gap-2">
                 <Label htmlFor="smtpHost">SMTP Host</Label>
@@ -121,11 +159,14 @@ export default function EmailSettingsPage() {
                 {errors.fromEmail && <p className="text-sm text-destructive">{errors.fromEmail.message}</p>}
               </div>
             </div>
-          <div className="flex justify-end">
-            <Button type="submit">Save Settings</Button>
-          </div>
-        </form>
         </CardContent>
+        <CardFooter className="flex justify-end gap-2">
+            <Button type="button" variant="outline" onClick={handleTestEmail} disabled={isTesting}>
+                {isTesting ? 'Sending...' : <> <Mail className="mr-2 h-4 w-4" /> Send Test Email</> }
+            </Button>
+            <Button type="submit" disabled={isSaving}>{isSaving ? 'Saving...' : 'Save Settings'}</Button>
+        </CardFooter>
+      </form>
     </Card>
   );
 }

src/lib/actions/email.ts

@@ -0,0 +1,65 @@
+
+'use server';
+
+import nodemailer from 'nodemailer';
+import { z } from 'zod';
+
+const emailSettingsSchema = z.object({
+  smtpHost: z.string(),
+  smtpPort: z.number(),
+  smtpUsername: z.string(),
+  smtpPassword: z.string(),
+  fromName: z.string(),
+  fromEmail: z.string().email(),
+});
+
+type EmailSettings = z.infer<typeof emailSettingsSchema>;
+
+export async function sendTestEmail(
+  settings: EmailSettings
+): Promise<{ success: boolean; error?: string }> {
+  const { smtpHost, smtpPort, smtpUsername, smtpPassword, fromName, fromEmail } = settings;
+
+  try {
+    const transporter = nodemailer.createTransport({
+      host: smtpHost,
+      port: smtpPort,
+      secure: smtpPort === 465, // true for 465, false for other ports
+      auth: {
+        user: smtpUsername,
+        pass: smtpPassword,
+      },
+      // In a real app, you might want more robust TLS options
+      // For example, rejecting unauthorized connections
+      tls: {
+        rejectUnauthorized: false
+      }
+    });
+
+    await transporter.verify();
+
+    const mailOptions = {
+      from: `"${fromName}" <${fromEmail}>`,
+      to: fromEmail, // Send the test to the 'from' address
+      subject: 'SMTP Test Email from EstimateFlow',
+      text: 'This is a test email to verify your SMTP settings. If you received this, your configuration is correct.',
+      html: '<p>This is a test email to verify your SMTP settings. If you received this, your configuration is correct.</p>',
+    };
+
+    await transporter.sendMail(mailOptions);
+
+    return { success: true };
+  } catch (error: any) {
+    console.error('Failed to send test email:', error);
+    // Provide a more user-friendly error message
+    let errorMessage = 'An unknown error occurred.';
+    if (error.code === 'ECONNREFUSED') {
+      errorMessage = `Connection refused. Check if the SMTP host (${smtpHost}) and port (${smtpPort}) are correct and accessible.`;
+    } else if (error.code === 'EAUTH') {
+      errorMessage = 'Authentication failed. Please check your SMTP username and password.';
+    } else if (error.message) {
+      errorMessage = error.message;
+    }
+    return { success: false, error: errorMessage };
+  }
+}