import { ActivityLogSidebar } from '@admin/components/activity-log/ActivityLogSidebar'; import { useModelActivityLog } from '@admin/components/activity-log/useModelActivityLog'; import HeadingSmall from '@admin/components/heading-small'; import { Button } from '@admin/components/ui/button'; import { Card, CardHeader } from '@admin/components/ui/card'; import { Switch } from '@admin/components/ui/switch'; import AppLayout from '@admin/layouts/app-layout'; import SettingsLayout from '@admin/layouts/settings/layout'; import { Head, Link, router } from '@inertiajs/react'; import { Activity, ExternalLink } from 'lucide-react'; // Removed in-page module switcher (Settings layout already handles module context) import { ReactNode } from 'react'; // removed toast import (empty-state block deleted) type EmailTemplateContent = { subject: string; header: string; body: string; footer: string; banner: string | null; tags: string[]; }; type EmailTemplate = { id: number; uid: string; name: string; description: string; content: EmailTemplateContent; status: 'ACTIVE' | 'INACTIVE' | string; group?: string; group_slug?: string; created_at: string; updated_at: string; }; type IndexProps = { // New shape: grouped by module name emailTemplates: Record; }; export default function Index({ emailTemplates }: IndexProps) { const activityLogCtl = useModelActivityLog(); // Determine module tab (prefer single returned module, else default Platform) const moduleNames = Object.keys(emailTemplates || {}); const currentModule = (moduleNames.length === 1 ? moduleNames[0] : 'Platform') as string; const settingsTab = (currentModule || 'Platform').toLowerCase(); const handleToggleTemplate = (templateId: string, currentStatus: string) => { const newStatus = currentStatus === 'ACTIVE' ? 0 : 1; router.put( route('settings.email-templates.email-templates.update-status', { uid: templateId }), { status: newStatus }, { preserveScroll: true, onError: (errors) => { alert('Failed to update template status'); console.error(errors); }, }, ); }; // Convert grouped-by-module to array for rendering const modules = Object.entries(emailTemplates || {}); const handleAllToggle = (group: any) => { const status = group.items.every((item: EmailTemplate) => item.status === 'ACTIVE') ? 0 : 1; const slug = group?.group_slug; router.put( route('settings.email-templates.email-template-groups.update-status', { slug }), { status }, { preserveScroll: true, onError: (errors) => { alert('Failed to update template group status'); console.error(errors); }, }, ); }; return ( <>
{modules.map(([moduleName, items]) => { // Group each module's templates by 'group' const grouped = (items as EmailTemplate[]).reduce< Record >((acc, template) => { const group = template.group || 'General'; if (!acc[group]) acc[group] = { title: group, items: [], group_slug: template.group_slug }; acc[group].items.push(template); return acc; }, {}); // Order group sections by desired order, then alphabetically for others const order: Record = { 'Authentication and Security': 0, 'User And Role Management': 1, }; const groups = Object.values(grouped).sort((a, b) => { const oa = order[a.title] ?? 99; const ob = order[b.title] ?? 99; if (oa === ob) return a.title.localeCompare(b.title); return oa - ob; }); return (

{moduleName}

{groups.length > 0 && (
{groups.map((group) => (

{group.title}

 item.status === 'ACTIVE')} onCheckedChange={() => handleAllToggle(group)} className="" />
{group.items.map((template, idx) => { const isLast = idx === group.items.length - 1; return (
{template.name} handleToggleTemplate(template.uid, template.status) } />
); })}
))}
)}
); })} ); } Index.layout = (page: ReactNode) => { // Infer module from page props if provided // @ts-ignore const module = (page as any).props?.module || (page as any).props?.emailTemplates?.queryParams?.module || 'Platform'; const tab = (module || 'Platform').toLowerCase(); return ( {/* Clone page with injected tab for SettingsLayout wrapper inside component tree */} {page} ); };