 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/lavocat.quebec/private_html/src/components/ |
import React, { useState, useEffect } from 'react';
import { motion, AnimatePresence } from 'framer-motion';
import { useSession } from 'next-auth/react';
import { formatDistanceToNow } from 'date-fns';
import toast from 'react-hot-toast';
interface Message {
id: string;
content: string;
createdAt: string;
isRead: boolean;
sender: {
id: string;
name: string;
profilePicture?: string;
role: string;
title?: string;
availability?: string;
};
type: 'direct' | 'system' | 'case_update' | 'meeting_request';
metadata?: {
caseId?: string;
caseTitle?: string;
meetingDate?: string;
priority?: 'low' | 'medium' | 'high' | 'urgent';
};
}
interface MessageCenterProps {
isOpen: boolean;
onClose: () => void;
onMessageClick?: (messageId: string, senderId: string) => void;
}
const MessageCenter: React.FC<MessageCenterProps> = ({
isOpen,
onClose,
onMessageClick
}) => {
const { data: session } = useSession();
const [messages, setMessages] = useState<Message[]>([]);
const [loading, setLoading] = useState(false);
const [filter, setFilter] = useState<'all' | 'unread' | 'important'>('unread');
const [selectedMessage, setSelectedMessage] = useState<Message | null>(null);
useEffect(() => {
if (isOpen) {
fetchMessages();
}
}, [isOpen, filter]);
const fetchMessages = async () => {
setLoading(true);
try {
const response = await fetch(
if (response.ok) {
const data = await response.json();
setMessages(data.messages || []);
}
} catch (error) {
} finally {
setLoading(false);
}
};
const markAsRead = async (messageId: string) => {
try {
await fetch(`/api/messages/${messageId}/read
method: 'POST'
});
setMessages(prev =>
prev.map(msg =>
msg.id === messageId ? { ...msg, isRead: true } : msg
)
);
} catch (error) {
}
};
const deleteMessage = async (messageId: string) => {
try {
await fetch(`/api/messages/${messageId}
method: 'DELETE'
});
setMessages(prev => prev.filter(msg => msg.id !== messageId));
toast.success('Message deleted');
} catch (error) {
toast.error('Failed to delete message');
}
};
const getMessageIcon = (type: string) => {
switch (type) {
case 'direct': return '💬';
case 'system': return '🔔';
case 'case_update': return '⚖️';
case 'meeting_request': return '📅';
default: return '📧';
}
};
const getPriorityColor = (priority?: string) => {
switch (priority) {
case 'urgent': return 'border-l-red-500 bg-red-50';
case 'high': return 'border-l-orange-500 bg-orange-50';
case 'medium': return 'border-l-yellow-500 bg-yellow-50';
default: return 'border-l-blue-500 bg-blue-50';
}
};
const getInitials = (name: string) => {
return name
.split(' ')
.map(n => n[0])
.join('')
.toUpperCase()
.slice(0, 2);
};
const handleMessageClick = (message: Message) => {
setSelectedMessage(message);
if (!message.isRead) {
markAsRead(message.id);
}
if (onMessageClick) {
onMessageClick(message.id, message.sender.id);
}
};
const filteredMessages = messages.filter(msg => {
switch (filter) {
case 'unread': return !msg.isRead;
case 'important': return msg.metadata?.priority === 'high' || msg.metadata?.priority === 'urgent';
default: return true;
}
});
const unreadCount = messages.filter(msg => !msg.isRead).length;
if (!isOpen) return null;
return (
<AnimatePresence>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4"
onClick={onClose}
>
<motion.div
initial={{ scale: 0.95, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.95, opacity: 0 }}
className="bg-white dark:bg-gray-900 rounded-2xl shadow-2xl w-full max-w-4xl h-[80vh] overflow-hidden"
onClick={(e) => e.stopPropagation()}
>
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-6 text-white">
<div className="flex items-center justify-between">
<div>
<h2 className="text-2xl font-bold flex items-center gap-2">
💬 Message Center
</h2>
<p className="text-blue-100 mt-1">
{unreadCount > 0 ? `${unreadCount} unread messages
</p>
</div>
<button
onClick={onClose}
className="text-white hover:text-blue-200 transition-colors bg-white bg-opacity-20 rounded-full p-2"
>
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
<div className="flex space-x-1 mt-4 bg-white bg-opacity-20 rounded-lg p-1">
{[
{ key: 'unread', label: 'Unread', count: unreadCount },
{ key: 'all', label: 'All', count: messages.length },
{ key: 'important', label: 'Important', count: messages.filter(m => m.metadata?.priority === 'high' || m.metadata?.priority === 'urgent').length }
].map((tab) => (
<button
key={tab.key}
onClick={() => setFilter(tab.key as any)}
className={
filter === tab.key
? 'bg-white text-blue-600 shadow-sm'
: 'text-blue-100 hover:text-white hover:bg-white hover:bg-opacity-10'
}
>
{tab.label} {tab.count > 0 && `(${tab.count})
</button>
))}
</div>
</div>
<div className="flex h-full">
<div className="w-1/2 border-r border-gray-200 dark:border-gray-700 overflow-y-auto">
{loading ? (
<div className="p-8 text-center">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
<p className="text-sm text-gray-500 mt-2">Loading messages...</p>
</div>
) : filteredMessages.length === 0 ? (
<div className="p-8 text-center">
<div className="text-6xl mb-4">📭</div>
<p className="text-gray-500 font-medium">No messages found</p>
<p className="text-sm text-gray-400 mt-1">
{filter === 'unread' ? 'All messages have been read' : 'Check back later for new messages'}
</p>
</div>
) : (
<div className="space-y-2 p-4">
{filteredMessages.map((message) => (
<motion.div
key={message.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className={
!message.isRead
? getPriorityColor(message.metadata?.priority)
: 'border-l-gray-300 bg-gray-50 dark:bg-gray-800'
} ${selectedMessage?.id === message.id ? 'ring-2 ring-blue-500' : ''}
onClick={() => handleMessageClick(message)}
>
{message.metadata?.priority === 'urgent' && (
<div className="absolute top-2 right-2 w-2 h-2 bg-red-500 rounded-full animate-pulse"></div>
)}
<div className="flex items-start space-x-3">
<div className="w-10 h-10 rounded-full overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold text-sm">
{message.sender.profilePicture ? (
<img
src={message.sender.profilePicture}
alt={message.sender.name}
className="w-full h-full object-cover"
/>
) : (
getInitials(message.sender.name)
)}
</div>
<div className="flex-1 min-w-0">
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<span className="text-lg">{getMessageIcon(message.type)}</span>
<p className={`font-medium truncate ${!message.isRead ? 'text-gray-900' : 'text-gray-600'}
{message.sender.name}
</p>
{message.sender.title && (
<span className="text-xs text-gray-500">• {message.sender.title}</span>
)}
</div>
<div className="text-xs text-gray-400">
{formatDistanceToNow(new Date(message.createdAt), { addSuffix: true })}
</div>
</div>
<p className={`text-sm mt-1 line-clamp-2 ${!message.isRead ? 'text-gray-700' : 'text-gray-500'}
{message.content}
</p>
{message.metadata?.caseTitle && (
<div className="mt-2 text-xs text-blue-600 bg-blue-100 dark:bg-blue-900 px-2 py-1 rounded inline-block">
⚖️ {message.metadata.caseTitle}
</div>
)}
{!message.isRead && (
<div className="mt-2">
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
New
</span>
</div>
)}
</div>
</div>
</motion.div>
))}
</div>
)}
</div>
<div className="w-1/2 flex flex-col">
{selectedMessage ? (
<div className="flex-1 flex flex-col">
<div className="border-b border-gray-200 dark:border-gray-700 p-6">
<div className="flex items-start justify-between">
<div className="flex items-center space-x-3">
<div className="w-12 h-12 rounded-full overflow-hidden bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-semibold">
{selectedMessage.sender.profilePicture ? (
<img
src={selectedMessage.sender.profilePicture}
alt={selectedMessage.sender.name}
className="w-full h-full object-cover"
/>
) : (
getInitials(selectedMessage.sender.name)
)}
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">
{selectedMessage.sender.name}
</h3>
<p className="text-sm text-gray-500">
{selectedMessage.sender.title} • {selectedMessage.sender.role}
</p>
<p className="text-xs text-gray-400">
{formatDistanceToNow(new Date(selectedMessage.createdAt), { addSuffix: true })}
</p>
</div>
</div>
<div className="flex space-x-2">
<button
onClick={() => deleteMessage(selectedMessage.id)}
className="p-2 text-gray-400 hover:text-red-500 transition-colors rounded-lg hover:bg-red-50"
title="Delete message"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
</svg>
</button>
</div>
</div>
</div>
<div className="flex-1 p-6 overflow-y-auto">
<div className="prose prose-sm max-w-none dark:prose-invert">
<p className="text-gray-700 dark:text-gray-300 leading-relaxed whitespace-pre-wrap">
{selectedMessage.content}
</p>
</div>
{selectedMessage.metadata && (
<div className="mt-6 space-y-3">
{selectedMessage.metadata.caseTitle && (
<div className="bg-blue-50 dark:bg-blue-900/20 rounded-lg p-4">
<h4 className="font-medium text-blue-900 dark:text-blue-100 flex items-center gap-2">
⚖️ Related Case
</h4>
<p className="text-blue-700 dark:text-blue-300 mt-1">
{selectedMessage.metadata.caseTitle}
</p>
</div>
)}
{selectedMessage.metadata.priority && (
<div className={
selectedMessage.metadata.priority === 'urgent' ? 'bg-red-50 dark:bg-red-900/20' :
selectedMessage.metadata.priority === 'high' ? 'bg-orange-50 dark:bg-orange-900/20' :
'bg-yellow-50 dark:bg-yellow-900/20'
}
<h4 className={
selectedMessage.metadata.priority === 'urgent' ? 'text-red-900 dark:text-red-100' :
selectedMessage.metadata.priority === 'high' ? 'text-orange-900 dark:text-orange-100' :
'text-yellow-900 dark:text-yellow-100'
}
🔥 Priority: {selectedMessage.metadata.priority.charAt(0).toUpperCase() + selectedMessage.metadata.priority.slice(1)}
</h4>
</div>
)}
</div>
)}
</div>
<div className="border-t border-gray-200 dark:border-gray-700 p-4">
<div className="flex space-x-3">
<button
onClick={() => onMessageClick?.(selectedMessage.id, selectedMessage.sender.id)}
className="flex-1 bg-blue-600 text-white py-2 px-4 rounded-lg hover:bg-blue-700 transition-colors flex items-center justify-center space-x-2"
>
<span>💬</span>
<span>Reply</span>
</button>
{selectedMessage.type === 'meeting_request' && (
<button className="flex-1 bg-green-600 text-white py-2 px-4 rounded-lg hover:bg-green-700 transition-colors flex items-center justify-center space-x-2">
<span>📅</span>
<span>Schedule</span>
</button>
)}
</div>
</div>
</div>
) : (
<div className="flex-1 flex items-center justify-center text-gray-500">
<div className="text-center">
<div className="text-6xl mb-4">💬</div>
<p className="font-medium">Select a message to view details</p>
<p className="text-sm mt-1">Click on any message from the list</p>
</div>
</div>
)}
</div>
</div>
</motion.div>
</motion.div>
</AnimatePresence>
);
};
export default MessageCenter;