resolve todos in website and api

apps/website/components/notifications/NotificationCenter.tsx

@@ -1,7 +1,5 @@
 'use client';
 
-import { useEffectiveDriverId } from '@/hooks/useEffectiveDriverId';
-import type { Notification } from '@core/notifications/application';
 import {
   AlertTriangle,
   Bell,
@@ -36,33 +34,14 @@ const notificationColors: Record<string, string> = {
   race_reminder: 'text-warning-amber bg-warning-amber/10',
 };
 
+import { useNotifications } from './NotificationProvider';
+import type { Notification } from './NotificationProvider';
+
 export default function NotificationCenter() {
   const [isOpen, setIsOpen] = useState(false);
-  const [notifications, setNotifications] = useState<Notification[]>([]);
-  const [loading, setLoading] = useState(false);
   const panelRef = useRef<HTMLDivElement>(null);
   const router = useRouter();
-  const currentDriverId = useEffectiveDriverId();
-
-  // Polling for new notifications
-  // TODO
-  // useEffect(() => {
-  //   const loadNotifications = async () => {
-  //     try {
-  //       const repo = getNotificationRepository();
-  //       const allNotifications = await repo.findByRecipientId(currentDriverId);
-  //       setNotifications(allNotifications);
-  //     } catch (error) {
-  //       console.error('Failed to load notifications:', error);
-  //     }
-  //   };
-
-  //   loadNotifications();
-    
-  //   // Poll every 5 seconds
-  //   const interval = setInterval(loadNotifications, 5000);
-  //   return () => clearInterval(interval);
-  // }, [currentDriverId]);
+  const { notifications, unreadCount, markAsRead, markAllAsRead } = useNotifications();
 
   // Close panel when clicking outside
   useEffect(() => {
@@ -81,42 +60,9 @@ export default function NotificationCenter() {
     };
   }, [isOpen]);
 
-  const unreadCount = notifications.filter((n) => n.isUnread()).length;
+  const handleNotificationClick = (notification: Notification) => {
+    markAsRead(notification.id);
 
-  const handleMarkAsRead = async (notification: Notification) => {
-    if (!notification.isUnread()) return;
-
-    try {
-      const markRead = getMarkNotificationReadUseCase();
-      await markRead.execute({
-        notificationId: notification.id,
-        recipientId: currentDriverId,
-      });
-      
-      // Update local state
-      setNotifications((prev) =>
-        prev.map((n) => (n.id === notification.id ? n.markAsRead() : n))
-      );
-    } catch (error) {
-      console.error('Failed to mark notification as read:', error);
-    }
-  };
-
-  const handleMarkAllAsRead = async () => {
-    try {
-      const repo = getNotificationRepository();
-      await repo.markAllAsReadByRecipientId(currentDriverId);
-      
-      // Update local state
-      setNotifications((prev) => prev.map((n) => n.markAsRead()));
-    } catch (error) {
-      console.error('Failed to mark all as read:', error);
-    }
-  };
-
-  const handleNotificationClick = async (notification: Notification) => {
-    await handleMarkAsRead(notification);
-    
     if (notification.actionUrl) {
       router.push(notification.actionUrl);
       setIsOpen(false);
@@ -176,7 +122,7 @@ export default function NotificationCenter() {
             </div>
             {unreadCount > 0 && (
               <button
-                onClick={handleMarkAllAsRead}
+                onClick={markAllAsRead}
                 className="flex items-center gap-1 text-xs text-gray-400 hover:text-white transition-colors"
               >
                 <CheckCheck className="w-3.5 h-3.5" />
@@ -209,7 +155,7 @@ export default function NotificationCenter() {
                       onClick={() => handleNotificationClick(notification)}
                       className={`
                         w-full text-left px-4 py-3 transition-colors hover:bg-iron-gray/30
-                        ${notification.isUnread() ? 'bg-primary-blue/5' : ''}
+                        ${!notification.read ? 'bg-primary-blue/5' : ''}
                       `}
                     >
                       <div className="flex gap-3">
@@ -219,16 +165,16 @@ export default function NotificationCenter() {
                         <div className="flex-1 min-w-0">
                           <div className="flex items-start justify-between gap-2">
                             <p className={`text-sm font-medium truncate ${
-                              notification.isUnread() ? 'text-white' : 'text-gray-300'
+                              !notification.read ? 'text-white' : 'text-gray-300'
                             }`}>
                               {notification.title}
                             </p>
-                            {notification.isUnread() && (
+                            {!notification.read && (
                               <span className="w-2 h-2 bg-primary-blue rounded-full flex-shrink-0 mt-1.5" />
                             )}
                           </div>
                           <p className="text-xs text-gray-500 line-clamp-2 mt-0.5">
-                            {notification.body}
+                            {notification.message}
                           </p>
                           <div className="flex items-center gap-2 mt-1.5">
                             <span className="text-[10px] text-gray-600">