import { Head, Link, router } from '@inertiajs/react'; import { Bell, BellOff, CheckCheck, Megaphone, GraduationCap, CreditCard, MessageSquare, FileText } from 'lucide-react'; import AppLayout from '@/layouts/app-layout'; import type { BreadcrumbItem } from '@/types'; type Notification = { id: string; read_at: string | null; created_at: string; data: { type: string; title: string; body: string; url?: string; }; }; type Paginator = { data: T[]; current_page: number; last_page: number; total: number; links: { url: string | null; label: string; active: boolean }[]; }; type Props = { notifications: Paginator }; const breadcrumbs: BreadcrumbItem[] = [{ title: 'Notifikasi', href: '/notifications' }]; const TYPE_CONFIG: Record = { payment_approved: { color: 'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400', icon: CreditCard, label: 'Pembayaran' }, payment_rejected: { color: 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400', icon: CreditCard, label: 'Pembayaran' }, new_payment: { color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', icon: CreditCard, label: 'Pembayaran' }, new_order: { color: 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400', icon: CreditCard, label: 'Pesanan' }, assignment_graded:{ color: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400', icon: FileText, label: 'Nilai' }, essay_graded: { color: 'bg-indigo-100 text-indigo-700 dark:bg-indigo-900/30 dark:text-indigo-400', icon: FileText, label: 'Nilai' }, announcement: { color: 'bg-amber-100 text-amber-700 dark:bg-amber-900/30 dark:text-amber-400', icon: Megaphone, label: 'Pengumuman' }, discussion_replied:{ color: 'bg-purple-100 text-purple-700 dark:bg-purple-900/30 dark:text-purple-400', icon: MessageSquare, label: 'Diskusi' }, course_enrolled: { color: 'bg-teal-100 text-teal-700 dark:bg-teal-900/30 dark:text-teal-400', icon: GraduationCap, label: 'Kelas' }, }; function getTypeConfig(type: string) { return TYPE_CONFIG[type] ?? { color: 'bg-muted text-muted-foreground', icon: Bell, label: 'Info' }; } function timeAgo(date: string): string { const diff = Math.floor((Date.now() - new Date(date).getTime()) / 1000); if (diff < 60) return 'Baru saja'; if (diff < 3600) return `${Math.floor(diff / 60)} menit lalu`; if (diff < 86400) return `${Math.floor(diff / 3600)} jam lalu`; return `${Math.floor(diff / 86400)} hari lalu`; } export default function NotificationsIndex({ notifications }: Props) { const unreadCount = notifications.data.filter((n) => !n.read_at).length; function markRead(id: string) { router.patch(`/notifications/${id}/read`, {}, { preserveScroll: true }); } function markAllRead() { router.patch('/notifications/read-all'); } return ( <>
{/* Header */}

Notifikasi

{notifications.total} total notifikasi {unreadCount > 0 && ( {unreadCount} belum dibaca )}

{unreadCount > 0 && ( )}
{/* Empty */} {notifications.data.length === 0 && (

Belum ada notifikasi

Notifikasi baru akan muncul di sini.

)} {/* List */} {notifications.data.length > 0 && (
{notifications.data.map((n) => { const cfg = getTypeConfig(n.data.type); const Icon = cfg.icon; return (
{/* Icon */}
{/* Content */}

{n.data.title}

{timeAgo(n.created_at)}

{n.data.body}

{n.data.url && ( Lihat → )} {!n.read_at && ( )}
{/* Unread dot */} {!n.read_at && (
)}
); })}
)} {/* Pagination */} {notifications.last_page > 1 && (
{notifications.links.map((link, i) => link.url ? ( ) : ( ), )}
)}
); } NotificationsIndex.layout = (page: React.ReactNode) => {page};