import { Form, FormField } from '@admin/components/form'; import HeadingSmall from '@admin/components/heading-small'; import { Button } from '@admin/components/ui/button'; import { Card, CardContent } from '@admin/components/ui/card'; import { Checkbox } from '@admin/components/ui/checkbox'; import { Label } from '@admin/components/ui/label'; import { Switch } from '@admin/components/ui/switch'; import AdminLayout from '@admin/layouts/admin/admin-layout'; import AdminSettingsLayout from '@admin/layouts/admin/admin-settings-layout'; import { Head, router } from '@inertiajs/react'; import { Save } from 'lucide-react'; import { ReactNode } from 'react'; import { useFormContext, useWatch } from 'react-hook-form'; type NotificationType = { id: number; name: string; slug: string; notification_id: number; status: number; }; type Notification = { id: number; name: string; slug: string; status: number; types: NotificationType[]; group?: string; }; export default function NotificationSettings() { const notificationsByModule: Record = { Platform: [ { id: 1, name: 'User Registration', slug: 'user_registration', status: 1, group: 'Authentication and Security', types: [ { id: 1, name: 'Email', slug: 'email', notification_id: 1, status: 1 }, { id: 2, name: 'System', slug: 'system', notification_id: 1, status: 1 }, ], }, { id: 2, name: 'Password Reset', slug: 'password_reset', status: 1, group: 'Authentication and Security', types: [ { id: 3, name: 'Email', slug: 'email', notification_id: 2, status: 1 }, { id: 4, name: 'System', slug: 'system', notification_id: 2, status: 1 }, ], }, ], }; const modules: Record = Object.entries(notificationsByModule || {}).reduce( (acc: Record, [moduleName, items]) => { acc[moduleName] = (items as any[]).map((n) => ({ ...n, types: (n.types || []).map((t: any) => ({ ...t, status: t.status === 1 })), })); return acc; }, {}, ); const initialNotifications: Notification[] = Object.values(modules).flat(); const defaultValues = { notifications: initialNotifications }; const onSubmit = async (data: any) => { const notifications: Notification[] = (data.notifications || []).map((n: any) => ({ ...n, types: (n.types || []).map((t: any) => ({ ...t, status: t.status ? 1 : 0 })), })); router.patch('/admin/settings/notifications', { notifications }, { preserveScroll: true }); }; return ( <>
{Object.entries(modules).map(([moduleName, items]) => { const grouped = (items || []).reduce( (acc: Record, n: Notification) => { const g = n.group || 'Other'; if (!acc[g]) acc[g] = { title: g, items: [] }; acc[g].items.push(n); return acc; }, {}, ); 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; }); const idToIndex = new Map(); (defaultValues.notifications || []).forEach((n, i) => idToIndex.set(n.id, i)); return (

{moduleName}

{groups.length > 0 && (
{groups.map((group) => { const idIndices = group.items .map((n) => idToIndex.get(n.id)) .filter((v): v is number => typeof v === 'number'); return (

{group.title}

{group.items.map((notification) => { const nIdx = defaultValues.notifications.findIndex( (n) => n.id === notification.id, ); const findTypeIndex = (key: 'email' | 'system') => notification.types.findIndex( (t) => (t.slug || '').toLowerCase() === key || (t.name || '').toLowerCase() === key, ); const emailIdx = findTypeIndex('email'); const systemIdx = findTypeIndex('system'); return (
{notification.name}
{systemIdx !== -1 && (
)} {emailIdx !== -1 && (
)}
); })}
); })}
)} ); })}
); } NotificationSettings.layout = (page: ReactNode) => ( {page} ); function GroupMasterToggle({ indices }: { indices: number[] }) { const { setValue, getValues } = useFormContext(); const notifications: any = useWatch({ name: 'notifications' }) || []; const allChecked = indices.every((i) => (notifications?.[i]?.types || []).every((t: any) => Boolean(t.status))); return ( { const current = getValues('notifications') || []; const updated = current.map((n: any, idx: number) => { if (!indices.includes(idx)) return n; return { ...n, types: (n.types || []).map((t: any) => ({ ...t, status: checked })), }; }); setValue('notifications', updated, { shouldDirty: true, shouldTouch: true }); }} /> ); }