import AdminLayout from '@/Layouts/AdminLayout'; import { Head, useForm, Link } from '@inertiajs/react'; import { Save, Mail, ArrowLeft, Server, ShieldCheck, AtSign, Globe, History, Settings2, CheckCircle2, XCircle, Search, Cpu, Key, Layers } from 'lucide-react'; import { useState } from 'react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/Components/ui/select'; interface EmailLog { id: number; recipient: string; subject: string; mailable: string; status: 'sent' | 'failed'; error: string | null; created_at: string; } interface Props { settings: { mail_driver: 'smtp' | 'api'; mail_host: string; mail_port: number; mail_username: string; mail_password: string; mail_encryption: string; mail_api_key: string; mail_from_address: string; mail_from_name: string; booking_notification_email: string; }; logs: { data: EmailLog[]; links: any[]; }; } export default function EmailCenter({ settings, logs }: Props) { const [activeTab, setActiveTab] = useState<'logs' | 'settings'>('logs'); const { data, setData, patch, processing, errors } = useForm({ mail_driver: settings.mail_driver, mail_host: settings.mail_host, mail_port: settings.mail_port, mail_username: settings.mail_username, mail_password: settings.mail_password, mail_encryption: settings.mail_encryption, mail_api_key: settings.mail_api_key, mail_from_address: settings.mail_from_address, mail_from_name: settings.mail_from_name, booking_notification_email: settings.booking_notification_email, }); function submit(e: React.FormEvent) { e.preventDefault(); patch(route('admin.settings.notifications.update'), { preserveScroll: true, }); } return (
Back to Settings

Email Center

Monitor communication logs and manage your delivery infrastructure.

{/* Tabs */}
{activeTab === 'logs' ? (
{/* Search/Filter Bar */}
{/* Logs Table */}
{logs.data.map((log) => ( ))} {logs.data.length === 0 && ( )}
Recipient Subject Status Date & Time
{log.recipient}
{log.mailable}
{log.subject}
{log.status === 'sent' ? ( Sent ) : ( Failed )}
{new Date(log.created_at).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' })}
{new Date(log.created_at).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
No email logs found.
) : (
{/* Delivery Method Selector */}

Delivery Strategy

{data.mail_driver === 'smtp' ? (

SMTP Server Configuration

setData('mail_host', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="e.g., mail.yourdomain.com" />
setData('mail_port', parseInt(e.target.value))} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="465 (SSL) or 587 (TLS)" />
setData('mail_username', e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="e.g., info@yourdomain.com" />
setData('mail_password', e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="••••••••••••" />
) : (

Brevo API Authentication

setData('mail_api_key', e.target.value)} className="w-full pl-10 pr-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="xkeysib-..." />

Recommended for Brevo users. This bypasses SMTP port blocking issues. Find this in your Brevo Dashboard under SMTP & API.

)} {/* Sender Identity Section */}

Sender Identity

setData('mail_from_address', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="hello@altivatesolutions.com" />
setData('mail_from_name', e.target.value)} className="w-full px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="e.g., Altivate" />
{/* Administrative Alerts Section */}

Administrative Alerts

setData('booking_notification_email', e.target.value)} className="w-full max-w-md px-4 py-2.5 bg-white border border-[#E8E6DF] rounded-lg text-[13px] outline-none focus:ring-2 focus:ring-accent/10 focus:border-accent" placeholder="admin@altivatesolutions.com" />
{/* Test Email Section */}

Infrastructure Test

Verify your {data.mail_driver === 'api' ? 'API' : 'SMTP'} connection by sending a branded test message to any address.

{/* Save Button */}
)} ); }