"use client"; import { useState } from "react"; import { useRouter } from "@/i18n/navigation"; import { useTranslations, useLocale } from "next-intl"; import { useQueryClient } from "@tanstack/react-query"; import { usePractitionerNotificationControllerGetNotificationsV1 as usePractitionerNotificationsGet, usePractitionerNotificationControllerGetUnreadCountV1 as usePractitionerNotificationsUnreadCount, usePractitionerNotificationControllerMarkAsReadV1 as usePractitionerNotificationsMarkAsRead, usePractitionerNotificationControllerMarkAllAsReadV1 as usePractitionerNotificationsMarkAllAsRead, } from "@/api/user/practitioner-notifications/practitioner-notifications"; const NOTIFICATION_TITLE_ES: Record = { "Subscription Cancelled": "Suscripción Cancelada", "Subscription Canceled": "Suscripción Cancelada", "New Subscription": "Nueva Suscripción", "Subscription Renewed": "Suscripción Renovada", "Subscription Expired": "Suscripción Expirada", "Subscription Updated": "Suscripción Actualizada", "Screening Completed": "Evaluación Completada", "Screening Complete": "Evaluación Completa", "New User": "Nuevo Usuario", "New User Registration": "Nuevo Registro de Usuario", "New Lead": "Nuevo Prospecto", "New Support Ticket": "Nuevo Ticket de Soporte", "Support Ticket Updated": "Ticket de Soporte Actualizado", "New Client Added": "Nuevo Cliente Agregado", "Client Added": "Cliente Agregado", "System Notification": "Notificación del Sistema", }; export default function NotificationsPage() { const router = useRouter(); const t = useTranslations(); const locale = useLocale(); const queryClient = useQueryClient(); const [filter, setFilter] = useState<"all" | "unread">("all"); const [page, setPage] = useState(1); // Fetch notifications from API const { data: notificationsData, isLoading } = usePractitionerNotificationsGet( filter === "unread" ? { page, limit: 20, is_read: false } : { page, limit: 20 } ); const rawData = notificationsData as any; const notifications: any[] = Array.isArray(rawData?.data) ? rawData.data : Array.isArray(rawData?.data?.data) ? rawData.data.data : Array.isArray(rawData?.data?.items) ? rawData.data.items : Array.isArray(rawData) ? rawData : []; const meta = rawData?.meta || rawData?.data?.meta; const totalPages = meta?.totalPages || 1; const totalItems = meta?.totalItems || notifications.length; // Fetch unread count from API const { data: unreadData } = usePractitionerNotificationsUnreadCount(); const unreadCount: number = (unreadData as any)?.data?.unread_count ?? (unreadData as any)?.unread_count ?? 0; // Mark as read mutation const markAsReadMutation = usePractitionerNotificationsMarkAsRead({ mutation: { onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['/v1/practitioner/notifications'] }); queryClient.invalidateQueries({ queryKey: ['/v1/practitioner/notifications/unread-count'] }); }, }, }); // Mark all as read mutation const markAllAsReadMutation = usePractitionerNotificationsMarkAllAsRead({ mutation: { onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['/v1/practitioner/notifications'] }); queryClient.invalidateQueries({ queryKey: ['/v1/practitioner/notifications/unread-count'] }); }, }, }); const formatTimeAgo = (dateStr: string): string => { const date = new Date(dateStr); const now = new Date(); const diffMs = now.getTime() - date.getTime(); const diffMins = Math.floor(diffMs / (1000 * 60)); const diffHours = Math.floor(diffMs / (1000 * 60 * 60)); const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24)); if (diffMins < 1) return t("practitioner.notifications.justNow"); if (diffMins < 60) return `${diffMins} ${t("practitioner.notifications.minutesAgo")}`; if (diffHours < 24) return `${diffHours} ${t("practitioner.notifications.hoursAgo")}`; return `${diffDays} ${t("practitioner.notifications.daysAgo")}`; }; const handleMarkAsRead = (id: string) => { markAsReadMutation.mutate({ id }); }; const handleMarkAllAsRead = () => { markAllAsReadMutation.mutate(); }; const handleNotificationClick = (notification: any) => { if (!notification.is_read) { handleMarkAsRead(String(notification.uuid || notification.id)); } const data = notification.data || {}; switch (notification.type) { case "screening_complete": if (data.client_id && data.screening_id) { router.push(`/practitioner/report/${data.client_id}/${data.screening_id}`); } break; case "system": case "client_added": router.push("/practitioner/clients"); break; case "subscription": router.push("/practitioner/subscription"); break; } }; const getNotificationIcon = (type: string) => { switch (type) { case "screening_complete": return (
); case "system": return (
); case "client_added": return (
); case "subscription": return (
); default: return (
); } }; return (
{/* Page Header */}

{t("practitioner.notifications.title")}

{unreadCount > 0 ? (unreadCount > 1 ? t("practitioner.notifications.unreadCountPlural", { count: unreadCount }) : t("practitioner.notifications.unreadCount", { count: unreadCount })) : t("practitioner.notifications.allCaughtUp") }

{/* Actions */}
{unreadCount > 0 && ( )}
{/* Filter Tabs */}
{/* Notifications List */}
{isLoading ? (
) : notifications.length === 0 ? (

{filter === "unread" ? t("practitioner.notifications.noUnreadNotifications") : t("practitioner.notifications.noNotifications")}

{filter === "unread" ? t("practitioner.notifications.noUnreadNotificationsDesc") : t("practitioner.notifications.noNotificationsDesc")}

) : (
{notifications.map((notification: any) => ( ))}
)}
{/* Pagination */} {totalPages > 1 && (
{t("practitioner.notifications.pageOf", { page, totalPages })}
)}
); }