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

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,86 +54,119 @@ export default function EmailSettingsPage() {
   });
 
   const onSubmit: SubmitHandler<EmailSettingsFormValues> = async (data) => {
-    // Here you would typically send the data to your backend to save it
-    console.log("Saving email settings:", data);
+    startSavingTransition(async () => {
+        // Here you would typically send the data to your backend to save it
+        console.log("Saving email settings:", data);
 
-    // Simulate an API call
-    await new Promise(resolve => setTimeout(resolve, 1000));
+        // Simulate an API call
+        await new Promise(resolve => setTimeout(resolve, 1000));
 
-    toast({
-      title: "Settings Saved",
-      description: "Your SMTP email settings have been updated successfully.",
+        toast({
+        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">
-      <CardHeader>
-        <CardTitle>Email Settings</CardTitle>
-        <CardDescription>
-          Configure your SMTP settings to send emails from the platform.
-        </CardDescription>
-      </CardHeader>
-      <CardContent>
-        <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>
-              <Input
-                id="smtpHost"
-                {...register("smtpHost")}
-              />
-              {errors.smtpHost && <p className="text-sm text-destructive">{errors.smtpHost.message}</p>}
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <CardHeader>
+          <CardTitle>Email Settings</CardTitle>
+          <CardDescription>
+            Configure your SMTP settings to send emails from the platform.
+          </CardDescription>
+        </CardHeader>
+        <CardContent 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>
+                <Input
+                  id="smtpHost"
+                  {...register("smtpHost")}
+                />
+                {errors.smtpHost && <p className="text-sm text-destructive">{errors.smtpHost.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="smtpPort">SMTP Port</Label>
+                <Input
+                  id="smtpPort"
+                  type="number"
+                  {...register("smtpPort")}
+                />
+                {errors.smtpPort && <p className="text-sm text-destructive">{errors.smtpPort.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="smtpUsername">SMTP Username</Label>
+                <Input
+                  id="smtpUsername"
+                  {...register("smtpUsername")}
+                />
+                {errors.smtpUsername && <p className="text-sm text-destructive">{errors.smtpUsername.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="smtpPassword">SMTP Password</Label>
+                <Input
+                  id="smtpPassword"
+                  type="password"
+                  {...register("smtpPassword")}
+                />
+                {errors.smtpPassword && <p className="text-sm text-destructive">{errors.smtpPassword.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="fromName">From Name</Label>
+                <Input
+                  id="fromName"
+                  {...register("fromName")}
+                />
+                {errors.fromName && <p className="text-sm text-destructive">{errors.fromName.message}</p>}
+              </div>
+              <div className="grid gap-2">
+                <Label htmlFor="fromEmail">From Email</Label>
+                <Input
+                  id="fromEmail"
+                  type="email"
+                  {...register("fromEmail")}
+                />
+                {errors.fromEmail && <p className="text-sm text-destructive">{errors.fromEmail.message}</p>}
+              </div>
             </div>
-             <div className="grid gap-2">
-              <Label htmlFor="smtpPort">SMTP Port</Label>
-              <Input
-                id="smtpPort"
-                type="number"
-                {...register("smtpPort")}
-              />
-              {errors.smtpPort && <p className="text-sm text-destructive">{errors.smtpPort.message}</p>}
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="smtpUsername">SMTP Username</Label>
-              <Input
-                id="smtpUsername"
-                {...register("smtpUsername")}
-              />
-              {errors.smtpUsername && <p className="text-sm text-destructive">{errors.smtpUsername.message}</p>}
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="smtpPassword">SMTP Password</Label>
-              <Input
-                id="smtpPassword"
-                type="password"
-                {...register("smtpPassword")}
-              />
-              {errors.smtpPassword && <p className="text-sm text-destructive">{errors.smtpPassword.message}</p>}
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="fromName">From Name</Label>
-              <Input
-                id="fromName"
-                {...register("fromName")}
-              />
-              {errors.fromName && <p className="text-sm text-destructive">{errors.fromName.message}</p>}
-            </div>
-            <div className="grid gap-2">
-              <Label htmlFor="fromEmail">From Email</Label>
-              <Input
-                id="fromEmail"
-                type="email"
-                {...register("fromEmail")}
-              />
-              {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>
+        </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>
   );
 }