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: 'api'; 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_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.
) : (
{/* Brevo API Key */}

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-..." />

Required for email delivery. This routes communication directly via the Brevo transactional API. 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 Brevo API connection by sending a branded test message to any address.

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