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/backups/lavocat.quebec/backup-20250730-021618/src/pages/support/

Upload File : current_dir [ Writeable ] document_root [ Writeable ]

import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import { useRequireRole, USER_ROLES } from '../../lib/auth-utils';
import {
  Calendar,
  Clock,
  FileText,
  Users,
  CheckCircle,
  AlertCircle,
  Plus,
  Search,
  Filter,
  Download,
  Upload,
  MessageSquare,
  Phone,
  Mail,
  Settings,
  BarChart3,
  ClipboardList,
  CalendarDays,
  UserCheck,
  FileCheck,
  HelpCircle,
  TrendingUp,
  Shield,
  Zap,
  Target,
  Award,
  Star,
  Activity,
  Bell,
  ChevronRight,
  ExternalLink,
  MoreHorizontal,
  User,
} from 'lucide-react';

interface Task {
  id: string;
  title: string;
  description: string;
  priority: 'low' | 'medium' | 'high' | 'urgent';
  status: 'pending' | 'in-progress' | 'completed' | 'overdue';
  assignedTo: string;
  dueDate: string;
  category: string;
}

interface RecentActivity {
  id: string;
  type: 'task' | 'document' | 'support' | 'collaboration';
  title: string;
  description: string;
  timestamp: string;
  user: string;
}

interface TodaySchedule {
  id: string;
  time: string;
  title: string;
  type: 'meeting' | 'task' | 'support' | 'training';
  status: 'upcoming' | 'in-progress' | 'completed';
}

const SupportStaffDashboard: React.FC = () => {
  const { data: session, status } = useSession();
  const router = useRouter();
  const [isLoading, setIsLoading] = useState(true);
  const [activeTab, setActiveTab] = useState('overview');

  // Add permission guard
  const { isAuthorized } = useRequireRole([
    USER_ROLES.SECRETARY,
    USER_ROLES.ASSISTANT,
    USER_ROLES.CLERK,
    USER_ROLES.COURT_CLERK,
    USER_ROLES.PARALEGAL,
    USER_ROLES.ADMIN,
    USER_ROLES.SUPERADMIN
  ], '/auth/login');

  // Mock data - replace with actual API calls
  const [stats] = useState({
    totalTasks: 47,
    completedTasks: 32,
    pendingTasks: 15,
    overdueTasks: 3,
    documentsProcessed: 128,
    supportTickets: 24,
    resolvedTickets: 21,
    teamCollaborations: 18,
    performanceScore: 94
  });

  const [tasks] = useState<Task[]>([
    {
      id: '1',
      title: 'Process client registration documents',
      description: 'Review and validate new client applications',
      priority: 'high',
      status: 'in-progress',
      assignedTo: 'You',
      dueDate: '2025-01-27',
      category: 'Document Processing'
    },
    {
      id: '2',
      title: 'Schedule team meeting',
      description: 'Coordinate weekly team sync meeting',
      priority: 'medium',
      status: 'pending',
      assignedTo: 'You',
      dueDate: '2025-01-28',
      category: 'Administrative'
    },
    {
      id: '3',
      title: 'Update client database',
      description: 'Sync client information with new system',
      priority: 'low',
      status: 'completed',
      assignedTo: 'You',
      dueDate: '2025-01-26',
      category: 'Data Management'
    }
  ]);

  const [recentActivity] = useState<RecentActivity[]>([
    {
      id: '1',
      type: 'task',
      title: 'Completed document processing',
      description: 'Processed 15 client registration forms',
      timestamp: '2 hours ago',
      user: 'You'
    },
    {
      id: '2',
      type: 'support',
      title: 'Resolved client inquiry',
      description: 'Helped client with payment processing issue',
      timestamp: '4 hours ago',
      user: 'You'
    },
    {
      id: '3',
      type: 'collaboration',
      title: 'Team collaboration',
      description: 'Coordinated with legal team on case preparation',
      timestamp: '6 hours ago',
      user: 'You'
    }
  ]);

  const [todaySchedule] = useState<TodaySchedule[]>([
    {
      id: '1',
      time: '09:00',
      title: 'Morning team check-in',
      type: 'meeting',
      status: 'completed'
    },
    {
      id: '2',
      time: '11:00',
      title: 'Document processing batch',
      type: 'task',
      status: 'in-progress'
    },
    {
      id: '3',
      time: '14:00',
      title: 'Client support training',
      type: 'training',
      status: 'upcoming'
    },
    {
      id: '4',
      time: '16:00',
      title: 'End-of-day review',
      type: 'task',
      status: 'upcoming'
    }
  ]);

  useEffect(() => {
    if (status === 'loading') return;
    
    if (!session) {
      router.push('/auth/login');
      return;
    }

    // Check if user has support staff role
    if (session.user?.role !== 'SUPPORT_STAFF') {
      router.push('/unauthorized');
      return;
    }

    setIsLoading(false);
  }, [session, status, router]);

  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'urgent': return 'text-red-600 bg-red-50';
      case 'high': return 'text-orange-600 bg-orange-50';
      case 'medium': return 'text-yellow-600 bg-yellow-50';
      case 'low': return 'text-green-600 bg-green-50';
      default: return 'text-gray-600 bg-gray-50';
    }
  };

  const getStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'text-green-600 bg-green-50';
      case 'in-progress': return 'text-blue-600 bg-blue-50';
      case 'overdue': return 'text-red-600 bg-red-50';
      case 'pending': return 'text-gray-600 bg-gray-50';
      default: return 'text-gray-600 bg-gray-50';
    }
  };

  const getScheduleStatusColor = (status: string) => {
    switch (status) {
      case 'completed': return 'text-green-600';
      case 'in-progress': return 'text-blue-600';
      case 'upcoming': return 'text-gray-600';
      default: return 'text-gray-600';
    }
  };

  const getScheduleTypeIcon = (type: string) => {
    switch (type) {
      case 'meeting': return <Users className="w-4 h-4" />;
      case 'task': return <ClipboardList className="w-4 h-4" />;
      case 'support': return <HelpCircle className="w-4 h-4" />;
      case 'training': return <Award className="w-4 h-4" />;
      default: return <Calendar className="w-4 h-4" />;
    }
  };

  if (isLoading) {
    return (
      <div className="min-h-screen bg-gray-50 flex items-center justify-center">
        <div className="text-center">
          <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-4 text-gray-600">Loading your dashboard...</p>
        </div>
      </div>
    );
  }

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Header */}
      <div className="bg-white shadow-sm border-b">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
          <div className="flex justify-between items-center py-6">
            <div>
              <h1 className="text-3xl font-bold text-gray-900">Support Staff Dashboard</h1>
              <p className="mt-1 text-sm text-gray-500">
                Welcome back, {session?.user?.name || 'Support Staff'}. Here's your administrative overview.
              </p>
            </div>
            <div className="flex items-center space-x-4">
              <button className="p-2 text-gray-400 hover:text-gray-600">
                <Bell className="w-5 h-5" />
              </button>
              <div className="w-8 h-8 bg-blue-600 rounded-full flex items-center justify-center">
                <span className="text-white text-sm font-medium">
                  {session?.user?.name?.charAt(0) || 'S'}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
        {/* Welcome Section */}
        <div className="bg-gradient-to-r from-blue-600 to-purple-600 rounded-lg shadow-lg p-6 mb-8">
          <div className="flex items-center justify-between">
            <div className="text-white">
              <h2 className="text-2xl font-bold mb-2">Administrative Excellence</h2>
              <p className="text-blue-100">
                Your performance score is {stats.performanceScore}% - Keep up the great work supporting our legal team!
              </p>
            </div>
            <div className="hidden md:block">
              <div className="w-16 h-16 bg-white bg-opacity-20 rounded-full flex items-center justify-center">
                <Target className="w-8 h-8 text-white" />
              </div>
            </div>
          </div>
        </div>

        {/* Stats Grid */}
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 mb-8">
          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center">
              <div className="p-2 bg-blue-100 rounded-lg">
                <ClipboardList className="w-6 h-6 text-blue-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Total Tasks</p>
                <p className="text-2xl font-bold text-gray-900">{stats.totalTasks}</p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center">
              <div className="p-2 bg-green-100 rounded-lg">
                <CheckCircle className="w-6 h-6 text-green-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Completed</p>
                <p className="text-2xl font-bold text-gray-900">{stats.completedTasks}</p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center">
              <div className="p-2 bg-orange-100 rounded-lg">
                <FileText className="w-6 h-6 text-orange-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Documents Processed</p>
                <p className="text-2xl font-bold text-gray-900">{stats.documentsProcessed}</p>
              </div>
            </div>
          </div>

          <div className="bg-white rounded-lg shadow p-6">
            <div className="flex items-center">
              <div className="p-2 bg-purple-100 rounded-lg">
                <HelpCircle className="w-6 h-6 text-purple-600" />
              </div>
              <div className="ml-4">
                <p className="text-sm font-medium text-gray-600">Support Tickets</p>
                <p className="text-2xl font-bold text-gray-900">{stats.supportTickets}</p>
              </div>
            </div>
          </div>
        </div>

        <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
          {/* Quick Actions */}
          <div className="lg:col-span-1">
            <div className="bg-white rounded-lg shadow p-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
              <div className="space-y-3">
                <button className="w-full flex items-center justify-between p-3 text-left bg-blue-50 hover:bg-blue-100 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <Plus className="w-5 h-5 text-blue-600 mr-3" />
                    <span className="font-medium text-gray-900">Create New Task</span>
                  </div>
                  <ChevronRight className="w-4 h-4 text-gray-400" />
                </button>

                <button className="w-full flex items-center justify-between p-3 text-left bg-green-50 hover:bg-green-100 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <Upload className="w-5 h-5 text-green-600 mr-3" />
                    <span className="font-medium text-gray-900">Process Documents</span>
                  </div>
                  <ChevronRight className="w-4 h-4 text-gray-400" />
                </button>

                <button className="w-full flex items-center justify-between p-3 text-left bg-purple-50 hover:bg-purple-100 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <MessageSquare className="w-5 h-5 text-purple-600 mr-3" />
                    <span className="font-medium text-gray-900">Client Support</span>
                  </div>
                  <ChevronRight className="w-4 h-4 text-gray-400" />
                </button>

                <button className="w-full flex items-center justify-between p-3 text-left bg-orange-50 hover:bg-orange-100 rounded-lg transition-colors">
                  <div className="flex items-center">
                    <Users className="w-5 h-5 text-orange-600 mr-3" />
                    <span className="font-medium text-gray-900">Team Collaboration</span>
                  </div>
                  <ChevronRight className="w-4 h-4 text-gray-400" />
                </button>
              </div>
            </div>

            {/* Navigation Cards */}
            <div className="bg-white rounded-lg shadow p-6 mt-6">
              <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Navigation</h3>
              <div className="grid grid-cols-2 gap-3">
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <ClipboardList className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Task Management</span>
                </button>
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <FileText className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Documents</span>
                </button>
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <Users className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Team</span>
                </button>
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <HelpCircle className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Support</span>
                </button>
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <Calendar className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Calendar</span>
                </button>
                <button className="p-3 text-center bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
                  <BarChart3 className="w-6 h-6 text-gray-600 mx-auto mb-2" />
                  <span className="text-sm font-medium text-gray-900">Reports</span>
                </button>
              </div>
            </div>

            {/* Profile Management Button */}
            <div className="mb-4">
              <button
                onClick={() => {
                  if (session?.user?.role === 'SECRETARY') {
                    router.push('/secretary/profile');
                  } else if (session?.user?.role === 'ASSISTANT') {
                    router.push('/assistant/profile');
                  } else if (session?.user?.role === 'PARALEGAL') {
                    router.push('/paralegal/profile');
                  } else if (session?.user?.role === 'CLERK') {
                    router.push('/clerk/profile');
                  }
                }}
                className="flex items-center px-4 py-2 bg-blue-600 text-white rounded-md shadow hover:bg-blue-700 transition-colors"
              >
                <User className="w-5 h-5 mr-2" />
                Profile Management
              </button>
            </div>
          </div>

          {/* Main Content */}
          <div className="lg:col-span-2 space-y-6">
            {/* Recent Tasks */}
            <div className="bg-white rounded-lg shadow">
              <div className="p-6 border-b border-gray-200">
                <div className="flex items-center justify-between">
                  <h3 className="text-lg font-semibold text-gray-900">Recent Tasks</h3>
                  <button className="text-blue-600 hover:text-blue-700 text-sm font-medium">
                    View All
                  </button>
                </div>
              </div>
              <div className="p-6">
                <div className="space-y-4">
                  {tasks.map((task) => (
                    <div key={task.id} className="flex items-center justify-between p-4 bg-gray-50 rounded-lg">
                      <div className="flex-1">
                        <div className="flex items-center space-x-3">
                          <h4 className="font-medium text-gray-900">{task.title}</h4>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(task.priority)}`}>
                            {task.priority}
                          </span>
                          <span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(task.status)}`}>
                            {task.status}
                          </span>
                        </div>
                        <p className="text-sm text-gray-600 mt-1">{task.description}</p>
                        <div className="flex items-center space-x-4 mt-2 text-xs text-gray-500">
                          <span>Due: {task.dueDate}</span>
                          <span>Category: {task.category}</span>
                        </div>
                      </div>
                      <button className="p-2 text-gray-400 hover:text-gray-600">
                        <MoreHorizontal className="w-4 h-4" />
                      </button>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Today's Schedule */}
            <div className="bg-white rounded-lg shadow">
              <div className="p-6 border-b border-gray-200">
                <h3 className="text-lg font-semibold text-gray-900">Today's Schedule</h3>
              </div>
              <div className="p-6">
                <div className="space-y-4">
                  {todaySchedule.map((item) => (
                    <div key={item.id} className="flex items-center space-x-4">
                      <div className={`w-12 text-center ${getScheduleStatusColor(item.status)}`}>
                        <span className="text-sm font-medium">{item.time}</span>
                      </div>
                      <div className={`p-2 rounded-lg ${getScheduleStatusColor(item.status)} bg-opacity-10`}>
                        {getScheduleTypeIcon(item.type)}
                      </div>
                      <div className="flex-1">
                        <h4 className="font-medium text-gray-900">{item.title}</h4>
                        <p className={`text-sm ${getScheduleStatusColor(item.status)}`}>
                          {item.status.charAt(0).toUpperCase() + item.status.slice(1)}
                        </p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>

            {/* Recent Activity */}
            <div className="bg-white rounded-lg shadow">
              <div className="p-6 border-b border-gray-200">
                <h3 className="text-lg font-semibold text-gray-900">Recent Activity</h3>
              </div>
              <div className="p-6">
                <div className="space-y-4">
                  {recentActivity.map((activity) => (
                    <div key={activity.id} className="flex items-start space-x-3">
                      <div className="p-2 bg-blue-100 rounded-lg">
                        {activity.type === 'task' && <ClipboardList className="w-4 h-4 text-blue-600" />}
                        {activity.type === 'document' && <FileText className="w-4 h-4 text-blue-600" />}
                        {activity.type === 'support' && <HelpCircle className="w-4 h-4 text-blue-600" />}
                        {activity.type === 'collaboration' && <Users className="w-4 h-4 text-blue-600" />}
                      </div>
                      <div className="flex-1">
                        <h4 className="font-medium text-gray-900">{activity.title}</h4>
                        <p className="text-sm text-gray-600">{activity.description}</p>
                        <p className="text-xs text-gray-500 mt-1">{activity.timestamp}</p>
                      </div>
                    </div>
                  ))}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default SupportStaffDashboard;