diff --git a/src/app/admin/layout.tsx b/src/app/admin/layout.tsx index 097f5fc..d9dfc5a 100644 --- a/src/app/admin/layout.tsx +++ b/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({ - + Dashboard + + + + Settings + + + + + + Email + + + + diff --git a/src/app/admin/settings/email/page.tsx b/src/app/admin/settings/email/page.tsx new file mode 100644 index 0000000..08548ce --- /dev/null +++ b/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; + +export default function EmailSettingsPage() { + const { toast } = useToast(); + const { + register, + handleSubmit, + formState: { errors }, + } = useForm({ + 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 = 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 ( + + + Email Settings + + Configure your SMTP settings to send emails from the platform. + + + +
+
+
+ + + {errors.smtpHost &&

{errors.smtpHost.message}

} +
+
+ + + {errors.smtpPort &&

{errors.smtpPort.message}

} +
+
+ + + {errors.smtpUsername &&

{errors.smtpUsername.message}

} +
+
+ + + {errors.smtpPassword &&

{errors.smtpPassword.message}

} +
+
+ + + {errors.fromName &&

{errors.fromName.message}

} +
+
+ + + {errors.fromEmail &&

{errors.fromEmail.message}

} +
+
+
+ +
+
+
+
+ ); +}