updates

Frontend/src/components/notifications/InAppNotificationBell.tsx

@@ -0,0 +1,139 @@
+import React, { useState, useEffect } from 'react';
+import { Bell, X } from 'lucide-react';
+import { toast } from 'react-toastify';
+import notificationService, { Notification } from '../../services/api/notificationService';
+import { formatDate } from '../../utils/format';
+
+const InAppNotificationBell: React.FC = () => {
+  const [notifications, setNotifications] = useState<Notification[]>([]);
+  const [unreadCount, setUnreadCount] = useState(0);
+  const [showDropdown, setShowDropdown] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  useEffect(() => {
+    loadNotifications();
+    // Poll for new notifications every 30 seconds
+    const interval = setInterval(loadNotifications, 30000);
+    return () => clearInterval(interval);
+  }, []);
+
+  const loadNotifications = async () => {
+    try {
+      const response = await notificationService.getMyNotifications({
+        status: 'delivered',
+        limit: 10,
+      });
+      const notifs = response.data.data || [];
+      setNotifications(notifs);
+      setUnreadCount(notifs.filter(n => !n.read_at).length);
+    } catch (error) {
+      // Silently fail
+    }
+  };
+
+  const handleMarkAsRead = async (notificationId: number) => {
+    try {
+      await notificationService.markAsRead(notificationId);
+      setNotifications(notifications.map(n => 
+        n.id === notificationId ? { ...n, status: 'read' as any, read_at: new Date().toISOString() } : n
+      ));
+      setUnreadCount(Math.max(0, unreadCount - 1));
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to mark as read');
+    }
+  };
+
+  const handleMarkAllAsRead = async () => {
+    try {
+      setLoading(true);
+      const unread = notifications.filter(n => !n.read_at);
+      await Promise.all(unread.map(n => notificationService.markAsRead(n.id)));
+      setNotifications(notifications.map(n => ({ ...n, status: 'read' as any, read_at: new Date().toISOString() })));
+      setUnreadCount(0);
+    } catch (error: any) {
+      toast.error(error.message || 'Failed to mark all as read');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <div className="relative">
+      <button
+        onClick={() => setShowDropdown(!showDropdown)}
+        className="relative p-2 text-gray-600 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors"
+      >
+        <Bell className="w-6 h-6" />
+        {unreadCount > 0 && (
+          <span className="absolute top-0 right-0 w-5 h-5 bg-red-500 text-white text-xs font-bold rounded-full flex items-center justify-center">
+            {unreadCount > 9 ? '9+' : unreadCount}
+          </span>
+        )}
+      </button>
+
+      {showDropdown && (
+        <>
+          <div
+            className="fixed inset-0 z-40"
+            onClick={() => setShowDropdown(false)}
+          />
+          <div className="absolute right-0 mt-2 w-80 bg-white rounded-xl shadow-2xl border border-gray-200 z-50 max-h-96 overflow-y-auto">
+            <div className="p-4 border-b border-gray-200 flex items-center justify-between">
+              <h3 className="font-semibold text-gray-900">Notifications</h3>
+              {unreadCount > 0 && (
+                <button
+                  onClick={handleMarkAllAsRead}
+                  disabled={loading}
+                  className="text-xs text-indigo-600 hover:text-indigo-700 font-medium"
+                >
+                  Mark all read
+                </button>
+              )}
+            </div>
+            <div className="divide-y divide-gray-200">
+              {notifications.length === 0 ? (
+                <div className="p-4 text-center text-sm text-gray-500">
+                  No notifications
+                </div>
+              ) : (
+                notifications.map((notification) => (
+                  <div
+                    key={notification.id}
+                    className={`p-4 hover:bg-gray-50 transition-colors cursor-pointer ${
+                      !notification.read_at ? 'bg-blue-50' : ''
+                    }`}
+                    onClick={() => {
+                      if (!notification.read_at) {
+                        handleMarkAsRead(notification.id);
+                      }
+                    }}
+                  >
+                    <div className="flex items-start justify-between">
+                      <div className="flex-1">
+                        <p className="text-sm font-semibold text-gray-900">
+                          {notification.subject || notification.notification_type.replace('_', ' ')}
+                        </p>
+                        <p className="text-xs text-gray-600 mt-1 line-clamp-2">
+                          {notification.content}
+                        </p>
+                        <p className="text-xs text-gray-400 mt-2">
+                          {formatDate(new Date(notification.created_at), 'short')}
+                        </p>
+                      </div>
+                      {!notification.read_at && (
+                        <div className="w-2 h-2 bg-blue-500 rounded-full ml-2 mt-1" />
+                      )}
+                    </div>
+                  </div>
+                ))
+              )}
+            </div>
+          </div>
+        </>
+      )}
+    </div>
+  );
+};
+
+export default InAppNotificationBell;
+