- {/* Mention Suggestions */}
- {showMentionSuggestions && filteredParticipants.length > 0 && (
-
- {filteredParticipants.map((participant) => (
-
- ))}
+
+
+ {/* Attachment Previews */}
+ {attachedFiles.length > 0 && (
+
+ {attachedFiles.map(file => {
+ const isPreviewable = file.mimeType.startsWith('image/') || file.mimeType === 'application/pdf';
+ return (
+
+
+ {getFileIcon(file.mimeType, file.filePath)}
+
+
+
isPreviewable && setPreviewFile(file)}
+ >
+ {file.fileName}
+
+
+
+
+ );
+ })}
)}
- {/* Input Field */}
-
-
-
-
-
-
+
+ {/* Mention Suggestions moved inside relative container */}
+ {showMentionSuggestions && filteredParticipants.length > 0 && (
+
+ {filteredParticipants.map((participant) => (
+
+ ))}
+
+ )}
+
+
+
+
+
+
-
- Press Enter to send โข Use @ to mention someone
+
+ Press Enter to send โข Use @ to mention someone โข {isUploading ? 'Uploading files...' : 'Files attached appear above'}
+
+ {/* Preview Modal */}
+
);
}
diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 7611b2a..635aee5 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -1,3 +1,4 @@
+import { useState, useEffect } from 'react';
import { Bell, RefreshCw, HelpCircle, User as UserIcon } from 'lucide-react';
import { Button } from '../ui/button';
import {
@@ -7,9 +8,13 @@ import {
DropdownMenuTrigger,
} from '../ui/dropdown-menu';
import { Badge } from '../ui/badge';
+import { toast } from 'sonner';
import { useSelector } from 'react-redux';
import { RootState } from '../../store';
+import { notificationService, Notification } from '../../services/notification.service';
+import { useSocket } from '../../context/SocketContext';
+import { formatDistanceToNow } from 'date-fns';
interface HeaderProps {
title: string;
@@ -18,28 +23,66 @@ interface HeaderProps {
export function Header({ title, onRefresh }: HeaderProps) {
const { user: currentUser } = useSelector((state: RootState) => state.auth);
- const notifications = [
- {
- id: '1',
- message: 'New application assigned: APP-006',
- time: '5 min ago',
- unread: true
- },
- {
- id: '2',
- message: 'Interview scheduled for APP-001',
- time: '1 hour ago',
- unread: true
- },
- {
- id: '3',
- message: 'Document verified for APP-004',
- time: '2 hours ago',
- unread: false
- }
- ];
+ const { socket } = useSocket();
+ const [notifications, setNotifications] = useState
([]);
- const unreadCount = notifications.filter(n => n.unread).length;
+ useEffect(() => {
+ const fetchNotifications = async () => {
+ try {
+ const res: any = await notificationService.getNotifications();
+ if (res.success) {
+ setNotifications(res.data);
+ }
+ } catch (error) {
+ console.error('Fetch notifications error:', error);
+ }
+ };
+
+ fetchNotifications();
+ }, []);
+
+ useEffect(() => {
+ if (socket) {
+ socket.on('notification', (newNotification: Notification) => {
+ setNotifications(prev => [newNotification, ...prev]);
+ toast(newNotification.title, {
+ description: newNotification.message,
+ action: newNotification.link ? {
+ label: 'View',
+ onClick: () => window.location.href = newNotification.link!
+ } : undefined
+ });
+ });
+
+ return () => {
+ socket.off('notification');
+ };
+ }
+ }, [socket]);
+
+ const handleMarkAsRead = async (id: string) => {
+ try {
+ const res: any = await notificationService.markAsRead(id);
+ if (res.success) {
+ setNotifications(prev => prev.map(n => n.id === id ? { ...n, isRead: true } : n));
+ }
+ } catch (error) {
+ console.error('Mark as read error:', error);
+ }
+ };
+
+ const handleMarkAllAsRead = async () => {
+ try {
+ const res: any = await notificationService.markAllAsRead();
+ if (res.success) {
+ setNotifications(prev => prev.map(n => ({ ...n, isRead: true })));
+ }
+ } catch (error) {
+ console.error('Mark all as read error:', error);
+ }
+ };
+
+ const unreadCount = notifications.filter(n => !n.isRead).length;
return (
@@ -96,30 +139,48 @@ export function Header({ title, onRefresh }: HeaderProps) {
-
-
- {notifications.map((notification) => (
-
+ Notifications
+ {unreadCount > 0 && (
+
- ))}
+ Mark all read
+
+ )}
+
+ {notifications.length === 0 ? (
+
+ No notifications yet
+
+ ) : (
+ notifications.map((notification) => (
+
handleMarkAsRead(notification.id)}
+ >
+
+
{notification.title}
+
{notification.message}
+
+ {formatDistanceToNow(new Date(notification.createdAt), { addSuffix: true })}
+
+
+ ))
+ )}
-
+
+ Stay updated with your mentions and tasks
+