 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/mediator/ |
import React, { useEffect, useState } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import { toast } from 'react-hot-toast';
import {
Users,
User,
Handshake,
Calendar,
BarChart2,
MessageSquare,
FileText,
Clock,
CheckCircle,
AlertTriangle,
TrendingUp,
Plus,
Phone,
Video,
Scale,
Target,
Award,
BookOpen,
Shield
} from 'lucide-react';
const navCards = [
{
title: 'Profile Management',
description: 'Manage your professional profile and mediation expertise.',
icon: <User className="h-8 w-8 text-blue-600" />,
href: '/mediator/profile',
color: 'from-blue-500 to-blue-600',
},
{
title: 'Active Mediations',
description: 'Manage ongoing mediation sessions and track progress.',
icon: <Users className="h-8 w-8 text-green-600" />,
href: '/mediator/mediations',
color: 'from-green-500 to-green-600',
},
{
title: 'Settlement Tracking',
description: 'Monitor settlement agreements and compliance.',
icon: <Handshake className="h-8 w-8 text-purple-600" />,
href: '/mediator/settlements',
color: 'from-purple-500 to-purple-600',
},
{
title: 'Mediation Tools',
description: 'Access mediation techniques and conflict resolution tools.',
icon: <Scale className="h-8 w-8 text-orange-600" />,
href: '/mediator/tools',
color: 'from-orange-500 to-orange-600',
},
{
title: 'Party Communications',
description: 'Manage communications between all parties involved.',
icon: <MessageSquare className="h-8 w-8 text-pink-600" />,
href: '/mediator/communications',
color: 'from-pink-500 to-pink-600',
},
{
title: 'Settlement Analytics',
description: 'Analyze success rates and mediation outcomes.',
icon: <BarChart2 className="h-8 w-8 text-teal-600" />,
href: '/mediator/analytics',
color: 'from-teal-500 to-teal-600',
},
{
title: 'Mediation Calendar',
description: 'Schedule and manage mediation sessions.',
icon: <Calendar className="h-8 w-8 text-indigo-600" />,
href: '/mediator/calendar',
color: 'from-indigo-500 to-indigo-600',
},
{
title: 'Agreement Templates',
description: 'Access and customize settlement agreement templates.',
icon: <FileText className="h-8 w-8 text-emerald-600" />,
href: '/mediator/templates',
color: 'from-emerald-500 to-emerald-600',
},
{
title: 'Training Resources',
description: 'Access mediation training and professional development.',
icon: <BookOpen className="h-8 w-8 text-yellow-600" />,
href: '/mediator/training',
color: 'from-yellow-500 to-yellow-600',
},
];
const MediatorDashboard: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [loading, setLoading] = useState(true);
const [stats, setStats] = useState<any>(null);
useEffect(() => {
if (status === 'loading') return;
if (!session || !['MEDIATOR', 'ADMIN', 'SUPERADMIN'].includes(session.user.role)) {
router.push('/');
return;
}
fetchStats();
}, [session, status, router]);
const fetchStats = async () => {
try {
// Placeholder: Replace with real API call
setStats({
activeMediations: 5,
completedSettlements: 12,
successRate: 85,
upcomingSessions: 3,
totalParties: 18,
averageResolutionTime: 14,
pendingAgreements: 2,
trainingHours: 24,
clientSatisfaction: 4.7,
});
} catch (e) {
toast.error('Failed to load stats');
} finally {
setLoading(false);
}
};
if (status === 'loading' || 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-blue-600"></div>
</div>
</LayoutWithSidebar>
);
}
return (
<LayoutWithSidebar>
<div className="max-w-7xl mx-auto px-4 py-8">
{/* Welcome Section */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">
Welcome, {session?.user?.name || 'Mediator'}
</h1>
<p className="text-gray-600">
Your neutral platform for facilitating resolution and building bridges between parties.
Manage mediations, track settlements, and promote peaceful conflict resolution.
</p>
</div>
{/* Enhanced Stats */}
<div className="grid grid-cols-2 md:grid-cols-5 lg:grid-cols-9 gap-4 mb-10">
<div className="bg-gradient-to-r from-blue-500 to-blue-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Active Mediations</div>
<div className="text-2xl font-bold">{stats?.activeMediations ?? '-'}</div>
</div>
<div className="bg-gradient-to-r from-green-500 to-green-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Settlements</div>
<div className="text-2xl font-bold">{stats?.completedSettlements ?? '-'}</div>
</div>
<div className="bg-gradient-to-r from-emerald-500 to-emerald-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Success Rate</div>
<div className="text-2xl font-bold">{stats?.successRate ?? '-'}%</div>
</div>
<div className="bg-gradient-to-r from-orange-500 to-orange-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Upcoming</div>
<div className="text-2xl font-bold">{stats?.upcomingSessions ?? '-'}</div>
</div>
<div className="bg-gradient-to-r from-purple-500 to-purple-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Total Parties</div>
<div className="text-2xl font-bold">{stats?.totalParties ?? '-'}</div>
</div>
<div className="bg-gradient-to-r from-teal-500 to-teal-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Avg. Resolution</div>
<div className="text-2xl font-bold">{stats?.averageResolutionTime ?? '-'} days</div>
</div>
<div className="bg-gradient-to-r from-indigo-500 to-indigo-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Pending</div>
<div className="text-2xl font-bold">{stats?.pendingAgreements ?? '-'}</div>
</div>
<div className="bg-gradient-to-r from-pink-500 to-pink-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Training Hours</div>
<div className="text-2xl font-bold">{stats?.trainingHours ?? '-'}h</div>
</div>
<div className="bg-gradient-to-r from-yellow-500 to-yellow-600 text-white rounded-lg p-4 shadow">
<div className="text-xs">Satisfaction</div>
<div className="text-2xl font-bold">{stats?.clientSatisfaction ?? '-'}/5</div>
</div>
</div>
{/* Quick Actions */}
<div className="bg-white rounded-lg shadow-sm border border-gray-200 p-6 mb-8">
<h2 className="text-xl font-semibold text-gray-900 mb-4">Quick Actions</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<button
onClick={() => router.push('/mediator/mediations')}
className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
>
<Plus className="h-6 w-6 text-blue-600 mr-3" />
<div className="text-left">
<div className="font-medium text-gray-900">Start New Mediation</div>
<div className="text-sm text-gray-500">Initiate mediation session</div>
</div>
</button>
<button
onClick={() => router.push('/mediator/calendar')}
className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
>
<Calendar className="h-6 w-6 text-green-600 mr-3" />
<div className="text-left">
<div className="font-medium text-gray-900">Schedule Session</div>
<div className="text-sm text-gray-500">Book mediation meeting</div>
</div>
</button>
<button
onClick={() => router.push('/mediator/communications')}
className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors"
>
<MessageSquare className="h-6 w-6 text-purple-600 mr-3" />
<div className="text-left">
<div className="font-medium text-gray-900">Party Communication</div>
<div className="text-sm text-gray-500">Send updates to parties</div>
</div>
</button>
</div>
</div>
{/* Navigation Cards */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
{navCards.map((card) => (
<button
key={card.title}
onClick={() => router.push(card.href)}
className={`bg-gradient-to-r ${card.color} rounded-xl p-6 shadow-lg hover:scale-105 transition-transform text-left focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500`}
>
<div className="flex items-center mb-4">{card.icon}</div>
<h2 className="text-xl font-semibold text-white mb-1">{card.title}</h2>
<p className="text-white text-sm opacity-90">{card.description}</p>
</button>
))}
</div>
{/* Recent Activity */}
<div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 className="text-xl font-semibold text-gray-900 mb-4">Recent Activity</h2>
<div className="space-y-4">
<div className="flex items-center p-3 bg-green-50 rounded-lg">
<CheckCircle className="h-5 w-5 text-green-600 mr-3" />
<div>
<div className="font-medium text-gray-900">Settlement Reached</div>
<div className="text-sm text-gray-500">Smith v. Johnson - Employment dispute resolved - 2 hours ago</div>
</div>
</div>
<div className="flex items-center p-3 bg-blue-50 rounded-lg">
<Users className="h-5 w-5 text-blue-600 mr-3" />
<div>
<div className="font-medium text-gray-900">New Mediation Started</div>
<div className="text-sm text-gray-500">Davis family - Property dispute - 4 hours ago</div>
</div>
</div>
<div className="flex items-center p-3 bg-yellow-50 rounded-lg">
<AlertTriangle className="h-5 w-5 text-yellow-600 mr-3" />
<div>
<div className="font-medium text-gray-900">Session Rescheduled</div>
<div className="text-sm text-gray-500">Wilson case - Moved to tomorrow 2:00 PM - 6 hours ago</div>
</div>
</div>
<div className="flex items-center p-3 bg-purple-50 rounded-lg">
<Award className="h-5 w-5 text-purple-600 mr-3" />
<div>
<div className="font-medium text-gray-900">Training Completed</div>
<div className="text-sm text-gray-500">Advanced Conflict Resolution - 8 CPE credits earned - 1 day ago</div>
</div>
</div>
</div>
</div>
{/* Today's Schedule */}
<div className="mt-8 bg-white rounded-lg shadow-sm border border-gray-200 p-6">
<h2 className="text-xl font-semibold text-gray-900 mb-4">Today's Schedule</h2>
<div className="space-y-4">
<div className="flex items-center p-3 bg-blue-50 rounded-lg">
<Clock className="h-5 w-5 text-blue-600 mr-3" />
<div className="flex-1">
<div className="font-medium text-gray-900">10:00 AM - Smith v. Johnson</div>
<div className="text-sm text-gray-500">Employment dispute - Session 3 of 5</div>
</div>
<span className="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded-full">In Progress</span>
</div>
<div className="flex items-center p-3 bg-green-50 rounded-lg">
<Clock className="h-5 w-5 text-green-600 mr-3" />
<div className="flex-1">
<div className="font-medium text-gray-900">2:00 PM - Davis Family</div>
<div className="text-sm text-gray-500">Property dispute - Initial consultation</div>
</div>
<span className="text-xs bg-green-100 text-green-800 px-2 py-1 rounded-full">Scheduled</span>
</div>
<div className="flex items-center p-3 bg-purple-50 rounded-lg">
<Clock className="h-5 w-5 text-purple-600 mr-3" />
<div className="flex-1">
<div className="font-medium text-gray-900">4:30 PM - Wilson Case</div>
<div className="text-sm text-gray-500">Contract dispute - Follow-up session</div>
</div>
<span className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded-full">Confirmed</span>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default MediatorDashboard;