create a tab on admin dashbiard called "email settings" and create a vie

src/app/admin/layout.tsx

@@ -15,7 +15,7 @@ import {
   SidebarTrigger,
   SidebarFooter,
 } from '@/components/ui/sidebar';
-import { LayoutDashboard, LogOut } from 'lucide-react';
+import { LayoutDashboard, LogOut, Settings, Mail } from 'lucide-react';
 import { signOut } from '@/lib/auth';
 import { Button } from '@/components/ui/button';
 
@@ -36,11 +36,25 @@ export default function AdminLayout({
         <SidebarContent>
           <SidebarMenu>
             <SidebarMenuItem>
-              <SidebarMenuButton href="/admin" isActive>
+              <SidebarMenuButton href="/admin">
                 <LayoutDashboard />
                 Dashboard
               </SidebarMenuButton>
             </SidebarMenuItem>
+             <SidebarMenuItem>
+              <SidebarMenuButton>
+                <Settings />
+                Settings
+              </SidebarMenuButton>
+              <SidebarMenuSub>
+                <SidebarMenuSubItem>
+                  <SidebarMenuSubButton href="/admin/settings/email" >
+                    <Mail />
+                    Email
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              </SidebarMenuSub>
+            </SidebarMenuItem>
           </SidebarMenu>
         </SidebarContent>
         <SidebarFooter>

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

@@ -0,0 +1,131 @@
+
+"use client";
+
+import { useForm, type SubmitHandler } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { Button } from "@/components/ui/button";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { useToast } from "@/hooks/use-toast";
+
+const emailSettingsSchema = z.object({
+  smtpHost: z.string().min(1, "SMTP Host is required"),
+  smtpPort: z.coerce.number().min(1, "Port is required"),
+  smtpUsername: z.string().min(1, "Username is required"),
+  smtpPassword: z.string().min(1, "Password is required"),
+  fromName: z.string().min(1, "From Name is required"),
+  fromEmail: z.string().email("Invalid email address"),
+});
+
+type EmailSettingsFormValues = z.infer<typeof emailSettingsSchema>;
+
+export default function EmailSettingsPage() {
+  const { toast } = useToast();
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<EmailSettingsFormValues>({
+    resolver: zodResolver(emailSettingsSchema),
+    defaultValues: {
+        // In a real application, you would fetch these values from a secure backend
+        smtpHost: "smtp.example.com",
+        smtpPort: 587,
+        smtpUsername: "user@example.com",
+        fromName: "EstimateFlow",
+        fromEmail: "noreply@estimateflow.com",
+    }
+  });
+
+  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);
+
+    // Simulate an API call
+    await new Promise(resolve => setTimeout(resolve, 1000));
+
+    toast({
+      title: "Settings Saved",
+      description: "Your SMTP email settings have been updated successfully.",
+    });
+  };
+
+  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>}
+            </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>
+    </Card>
+  );
+}