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.ca/public_html/src/pages/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { useEffect, useState } from 'react';
import { useSession } from 'next-auth/react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { useRequireRole, USER_ROLES } from '../lib/auth-utils';
import { MessageSquare, CheckCircle, Mail } from 'lucide-react';
import Link from 'next/link';

interface Message {
  id: string;
  sender: string;
  subject: string;
  date: string;
  status: 'UNREAD' | 'READ';
}

const MessagesPage: React.FC = () => {
  const { data: session, status } = useSession();
  const [messages, setMessages] = useState<Message[]>([]);
  const [loading, setLoading] = useState(true);

  // Access control
  useRequireRole([
    USER_ROLES.USER,
    USER_ROLES.CLIENT,
    USER_ROLES.ADMIN,
    USER_ROLES.SUPERADMIN, USER_ROLES.SUPERADMIN
  ], '/');

  useEffect(() => {
    // Mock data, replace with API call
    setMessages([
      {
        id: '1',
        sender: 'Sarah Johnson',
        subject: 'Welcome to the platform!',
        date: '2024-06-28T10:00:00Z',
        status: 'UNREAD',
      },
      {
        id: '2',
        sender: 'Michael Chen',
        subject: 'Case Update: Employment Discrimination',
        date: '2024-06-27T14:30:00Z',
        status: 'READ',
      },
      {
        id: '3',
        sender: 'Admin',
        subject: 'Your document has been verified',
        date: '2024-06-25T09:00:00Z',
        status: 'READ',
      },
    ]);
    setLoading(false);
  }, []);

  if (loading) {
    return (
      <LayoutWithSidebar>
        <div className="flex items-center justify-center min-h-screen">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-primary mx-auto"></div>
        </div>
      </LayoutWithSidebar>
    );
  }

  return (
    <LayoutWithSidebar>
      <div className="max-w-4xl mx-auto px-4 py-8">
        <h1 className="text-3xl font-bold text-gray-900 mb-6">Messages</h1>
        <div className="bg-white rounded-lg shadow-sm border border-gray-200">
          {messages.length === 0 ? (
            <div className="p-8 text-center text-gray-600">
              <Mail className="h-12 w-12 mx-auto mb-4 text-gray-400" />
              No messages yet.
            </div>
          ) : (
            <table className="min-w-full divide-y divide-gray-200">
              <thead>
                <tr>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Sender</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Subject</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Date</th>
                  <th className="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
                  <th className="px-6 py-3"></th>
                </tr>
              </thead>
              <tbody className="bg-white divide-y divide-gray-200">
                {messages.map((msg) => (
                  <tr key={msg.id} className={msg.status === 'UNREAD' ? 'bg-blue-50' : ''}>
                    <td className="px-6 py-4 whitespace-nowrap font-medium text-gray-900">{msg.sender}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-gray-700">{msg.subject}</td>
                    <td className="px-6 py-4 whitespace-nowrap text-gray-500">{new Date(msg.date).toLocaleDateString()}</td>
                    <td className="px-6 py-4 whitespace-nowrap flex items-center gap-2">
                      {msg.status === 'UNREAD' ? (
                        <MessageSquare className="h-5 w-5 text-blue-600" />
                      ) : (
                        <CheckCircle className="h-5 w-5 text-green-600" />
                      )}
                      <span>{msg.status}</span>
                    </td>
                    <td className="px-6 py-4 whitespace-nowrap text-right">
                      <Link
                        href={`/messages/${msg.id}`}
                        className="inline-flex items-center px-3 py-1 bg-primary text-white rounded hover:bg-primary-dark transition-colors"
                      >
                        View
                      </Link>
                    </td>
                  </tr>
                ))}
              </tbody>
            </table>
          )}
        </div>
      </div>
    </LayoutWithSidebar>
  );
};

export default MessagesPage;