added changes ready to ship

src/App.tsx

@@ -12,6 +12,7 @@ import { TaskDrawer, AddTaskModal } from './TaskDrawer';
 import { DashboardPage } from './Dashboard';
 import { TeamTasksPage, MembersPage } from './Pages';
 import { ReportsPage } from './Reports';
+import { NotificationProvider } from './NotificationContext';
 import './index.css';
 
 const PAGE_TITLES: Record<string, string> = {
@@ -242,56 +243,58 @@ export default function App() {
   }
 
   return (
-    <div className="app-shell">
-      <TopNavbar title={pageTitle} filterUser={filterUser} onFilterChange={setFilterUser}
-        searchQuery={searchQuery} onSearch={setSearchQuery} onNewTask={handleNewTask}
-        onOpenSidebar={() => setSidebarOpen(true)} users={users} />
-      <div className="app-body">
-        <Sidebar currentUser={currentUser} activePage={activePage} onNavigate={handleNavigate}
-          onSignOut={() => { setCurrentUser(null); setActivePage('calendar'); setActiveView('calendar'); setSidebarOpen(false); }}
-          isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} users={users} />
-        <div className="main-content">
-          {displayPage === 'calendar' && (
-            <CalendarView tasks={tasks} currentUser={currentUser} calMonth={calMonth} calView={calView}
-              onMonthChange={setCalMonth} onViewChange={setCalView} onTaskClick={handleTaskClick}
-              onDayClick={handleDayClick} filterUser={filterUser} searchQuery={searchQuery} users={users} />
-          )}
-          {displayPage === 'kanban' && (
-            <KanbanBoard tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              onAddTask={handleKanbanAdd} onMoveTask={handleMoveTask} filterUser={filterUser} searchQuery={searchQuery} users={users} />
-          )}
-          {displayPage === 'list' && (
-            <ListView tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              filterUser={filterUser} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
-          )}
-          {displayPage === 'dashboard' && <DashboardPage tasks={tasks} currentUser={currentUser} users={users} />}
-          {displayPage === 'mytasks' && (
-            <ListView tasks={filteredMyTasks} currentUser={currentUser} onTaskClick={handleTaskClick}
-              filterUser={null} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
-          )}
-          {displayPage === 'teamtasks' && <TeamTasksPage tasks={tasks} currentUser={currentUser} users={users} />}
-          {displayPage === 'reports' && <ReportsPage tasks={tasks} users={users} currentUser={currentUser} />}
-          {displayPage === 'members' && <MembersPage tasks={tasks} users={users} currentUser={currentUser} onAddUser={handleAddUser} onDeleteUser={handleDeleteUser} />}
-        </div>
-      </div>
-
-      {VIEW_PAGES.includes(activePage) && (
-        <BottomToggleBar activeView={activeView} onViewChange={handleViewChange} />
-      )}
-
-      {activeTask && <TaskDrawer task={activeTask} currentUser={currentUser} onClose={() => setActiveTask(null)} onUpdate={handleUpdateTask} onAddDependency={handleAddDep} onToggleDependency={handleToggleDep} onRemoveDependency={handleRemoveDep} users={users} />}
-      {showAddModal && <AddTaskModal onClose={() => setShowAddModal(false)} onAdd={handleAddTask} defaultDate={addModalDefaults.date} defaultStatus={addModalDefaults.status} users={users} currentUser={currentUser} />}
-
-      {quickAddDay && (
-        <div style={{ position: 'fixed', inset: 0, zIndex: 199 }} onClick={() => setQuickAddDay(null)}>
-          <div style={{ position: 'absolute', top: Math.min(quickAddDay.rect.top, window.innerHeight - 280), left: Math.min(quickAddDay.rect.left, window.innerWidth - 340) }}
-            onClick={e => e.stopPropagation()}>
-            <QuickAddPanel date={quickAddDay.date} onAdd={handleQuickAdd}
-              onOpenFull={() => { setAddModalDefaults({ date: quickAddDay.date }); setShowAddModal(true); setQuickAddDay(null); }}
-              onClose={() => setQuickAddDay(null)} users={users} />
+    <NotificationProvider userId={currentUser.id}>
+      <div className="app-shell">
+        <TopNavbar title={pageTitle} filterUser={filterUser} onFilterChange={setFilterUser}
+          searchQuery={searchQuery} onSearch={setSearchQuery} onNewTask={handleNewTask}
+          onOpenSidebar={() => setSidebarOpen(true)} users={users} />
+        <div className="app-body">
+          <Sidebar currentUser={currentUser} activePage={activePage} onNavigate={handleNavigate}
+            onSignOut={() => { setCurrentUser(null); setActivePage('calendar'); setActiveView('calendar'); setSidebarOpen(false); }}
+            isOpen={sidebarOpen} onClose={() => setSidebarOpen(false)} users={users} />
+          <div className="main-content">
+            {displayPage === 'calendar' && (
+              <CalendarView tasks={tasks} currentUser={currentUser} calMonth={calMonth} calView={calView}
+                onMonthChange={setCalMonth} onViewChange={setCalView} onTaskClick={handleTaskClick}
+                onDayClick={handleDayClick} filterUser={filterUser} searchQuery={searchQuery} users={users} />
+            )}
+            {displayPage === 'kanban' && (
+              <KanbanBoard tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
+                onAddTask={handleKanbanAdd} onMoveTask={handleMoveTask} filterUser={filterUser} searchQuery={searchQuery} users={users} />
+            )}
+            {displayPage === 'list' && (
+              <ListView tasks={tasks} currentUser={currentUser} onTaskClick={handleTaskClick}
+                filterUser={filterUser} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
+            )}
+            {displayPage === 'dashboard' && <DashboardPage tasks={tasks} currentUser={currentUser} users={users} />}
+            {displayPage === 'mytasks' && (
+              <ListView tasks={filteredMyTasks} currentUser={currentUser} onTaskClick={handleTaskClick}
+                filterUser={null} searchQuery={searchQuery} onToggleDone={handleToggleDone} users={users} />
+            )}
+            {displayPage === 'teamtasks' && <TeamTasksPage tasks={tasks} currentUser={currentUser} users={users} />}
+            {displayPage === 'reports' && <ReportsPage tasks={tasks} users={users} currentUser={currentUser} />}
+            {displayPage === 'members' && <MembersPage tasks={tasks} users={users} currentUser={currentUser} onAddUser={handleAddUser} onDeleteUser={handleDeleteUser} />}
           </div>
         </div>
-      )}
-    </div>
+
+        {VIEW_PAGES.includes(activePage) && (
+          <BottomToggleBar activeView={activeView} onViewChange={handleViewChange} />
+        )}
+
+        {activeTask && <TaskDrawer task={activeTask} currentUser={currentUser} onClose={() => setActiveTask(null)} onUpdate={handleUpdateTask} onAddDependency={handleAddDep} onToggleDependency={handleToggleDep} onRemoveDependency={handleRemoveDep} users={users} />}
+        {showAddModal && <AddTaskModal onClose={() => setShowAddModal(false)} onAdd={handleAddTask} defaultDate={addModalDefaults.date} defaultStatus={addModalDefaults.status} users={users} currentUser={currentUser} />}
+
+        {quickAddDay && (
+          <div style={{ position: 'fixed', inset: 0, zIndex: 199 }} onClick={() => setQuickAddDay(null)}>
+            <div style={{ position: 'absolute', top: Math.min(quickAddDay.rect.top, window.innerHeight - 280), left: Math.min(quickAddDay.rect.left, window.innerWidth - 340) }}
+              onClick={e => e.stopPropagation()}>
+              <QuickAddPanel date={quickAddDay.date} onAdd={handleQuickAdd}
+                onOpenFull={() => { setAddModalDefaults({ date: quickAddDay.date }); setShowAddModal(true); setQuickAddDay(null); }}
+                onClose={() => setQuickAddDay(null)} users={users} />
+            </div>
+          </div>
+        )}
+      </div>
+    </NotificationProvider>
   );
 }

src/NavBars.tsx

@@ -1,4 +1,5 @@
 import type { User } from './data';
+import { NotificationBell } from './components/NotificationBell';
 
 interface TopNavbarProps {
     title: string;
@@ -31,7 +32,7 @@ export function TopNavbar({ title, filterUser, onFilterChange, searchQuery, onSe
                         </div>
                     ))}
                 </div>
-                <button className="notif-btn">🔔<span className="notif-badge">3</span></button>
+                <NotificationBell />
                 <button className="new-task-btn" onClick={onNewTask}>+ New Task</button>
             </div>
         </div>

src/NotificationContext.tsx

@@ -0,0 +1,80 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+import { io } from 'socket.io-client';
+
+export interface Notification {
+    id: string;
+    type: 'assignment' | 'mention' | 'update';
+    title: string;
+    message: string;
+    link?: string;
+    is_read: boolean;
+    created_at: string;
+}
+
+interface NotificationContextType {
+    notifications: Notification[];
+    unreadCount: number;
+    markAsRead: (id: string) => Promise<void>;
+}
+
+const NotificationContext = createContext<NotificationContextType | undefined>(undefined);
+
+export const NotificationProvider: React.FC<{ children: React.ReactNode, userId: string }> = ({ children, userId }) => {
+    const [notifications, setNotifications] = useState<Notification[]>([]);
+
+    useEffect(() => {
+        if (!userId) return;
+
+        const newSocket = io(window.location.protocol + '//' + window.location.hostname + ':3001');
+
+        newSocket.emit('join', userId);
+
+        newSocket.on('notification', (notif: Notification) => {
+            setNotifications(prev => [notif, ...prev]);
+            // Optional: Show browser toast here
+        });
+
+        fetchNotifications();
+
+        return () => {
+            newSocket.close();
+        };
+    }, [userId]);
+
+    const fetchNotifications = async () => {
+        try {
+            const res = await fetch(`/api/notifications/${userId}`);
+            if (res.ok) {
+                const data = await res.json();
+                setNotifications(data);
+            }
+        } catch (err) {
+            console.error('Fetch notifications failed', err);
+        }
+    };
+
+    const markAsRead = async (id: string) => {
+        try {
+            const res = await fetch(`/api/notifications/${id}/read`, { method: 'PUT' });
+            if (res.ok) {
+                setNotifications(prev => prev.map(n => n.id === id ? { ...n, is_read: true } : n));
+            }
+        } catch (err) {
+            console.error('Mark read failed', err);
+        }
+    };
+
+    const unreadCount = notifications.filter(n => !n.is_read).length;
+
+    return (
+        <NotificationContext.Provider value={{ notifications, unreadCount, markAsRead }}>
+            {children}
+        </NotificationContext.Provider>
+    );
+};
+
+export const useNotifications = () => {
+    const context = useContext(NotificationContext);
+    if (!context) throw new Error('useNotifications must be used within NotificationProvider');
+    return context;
+};

src/components/NotificationBell.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react';
+import { useNotifications } from '../NotificationContext';
+
+export const NotificationBell: React.FC = () => {
+    const { notifications, unreadCount, markAsRead } = useNotifications();
+    const [isOpen, setIsOpen] = useState(false);
+
+    return (
+        <div className="relative">
+            <button
+                className="p-2 rounded-full hover:bg-white/10 relative transition-colors"
+                onClick={() => setIsOpen(!isOpen)}
+            >
+                <span className="text-xl">🔔</span>
+                {unreadCount > 0 && (
+                    <span className="absolute top-1 right-1 bg-red-500 text-white text-[10px] font-bold px-1.5 py-0.5 rounded-full min-w-[18px] text-center border-2 border-[#0f172a]">
+                        {unreadCount}
+                    </span>
+                )}
+            </button>
+
+            {isOpen && (
+                <div className="absolute right-0 mt-2 w-80 bg-[#1e293b] border border-white/10 rounded-xl shadow-2xl z-50 overflow-hidden backdrop-blur-md">
+                    <div className="p-4 border-b border-white/10 flex justify-between items-center">
+                        <h3 className="font-semibold text-white">Notifications</h3>
+                        <span className="text-xs text-slate-400">{unreadCount} unread</span>
+                    </div>
+                    <div className="max-height-[400px] overflow-y-auto">
+                        {notifications.length === 0 ? (
+                            <div className="p-8 text-center text-slate-500 italic">
+                                No notifications yet
+                            </div>
+                        ) : (
+                            notifications.map(n => (
+                                <div
+                                    key={n.id}
+                                    className={`p-4 border-b border-white/5 hover:bg-white/5 cursor-pointer transition-colors ${!n.is_read ? 'bg-blue-500/5' : ''}`}
+                                    onClick={() => markAsRead(n.id)}
+                                >
+                                    <div className="flex gap-3">
+                                        <div className="text-lg">
+                                            {n.type === 'assignment' ? '📋' : n.type === 'mention' ? '💬' : '🔔'}
+                                        </div>
+                                        <div className="flex-1 min-w-0">
+                                            <p className={`text-sm ${!n.is_read ? 'text-white font-medium' : 'text-slate-300'}`}>
+                                                {n.title}
+                                            </p>
+                                            <p className="text-xs text-slate-400 mt-1 truncate">
+                                                {n.message}
+                                            </p>
+                                            <p className="text-[10px] text-slate-500 mt-1">
+                                                {new Date(n.created_at).toLocaleString()}
+                                            </p>
+                                        </div>
+                                        {!n.is_read && <div className="w-2 h-2 bg-blue-500 rounded-full mt-2" />}
+                                    </div>
+                                </div>
+                            ))
+                        )}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};