 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/private_html/src/pages/jurist/ |
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import {
Users,
Plus,
Edit,
Trash2,
Eye,
MessageSquare,
Calendar,
Star,
TrendingUp,
CheckCircle,
Clock,
AlertCircle,
Filter,
Search,
ChevronDown,
ChevronUp,
ExternalLink,
Save,
Upload,
BarChart3,
Award,
Globe,
GitBranch,
FileText,
ThumbsUp,
ThumbsDown,
Mail,
Phone,
MapPin,
Building,
UserPlus,
UserCheck,
UserX,
Handshake,
Target,
Zap
} from 'lucide-react';
interface Collaboration {
id: string;
title: string;
description: string;
type: 'research_project' | 'joint_publication' | 'conference' | 'workshop' | 'institution_partnership' | 'student_supervision';
status: 'proposed' | 'active' | 'completed' | 'on_hold' | 'cancelled';
priority: 'low' | 'medium' | 'high' | 'urgent';
startDate: string;
endDate?: string;
leadResearcher: string;
collaborators: Collaborator[];
institutions: string[];
funding?: string;
budget?: number;
objectives: string[];
deliverables: string[];
progress: number;
documents: string[];
meetings: Meeting[];
notes: string;
tags: string[];
}
interface Collaborator {
id: string;
name: string;
role: string;
institution: string;
email: string;
phone?: string;
expertise: string[];
contribution: string;
status: 'active' | 'inactive' | 'pending';
avatar?: string;
}
interface Meeting {
id: string;
title: string;
date: string;
duration: number;
participants: string[];
agenda: string[];
notes: string;
followUp: string[];
}
interface CollaborationStats {
totalCollaborations: number;
active: number;
completed: number;
proposed: number;
totalCollaborators: number;
totalInstitutions: number;
totalFunding: number;
averageProgress: number;
}
const JuristCollaboration: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [isLoading, setIsLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [selectedStatus, setSelectedStatus] = useState<string>('all');
const [selectedType, setSelectedType] = useState<string>('all');
const [selectedPriority, setSelectedPriority] = useState<string>('all');
const [sortBy, setSortBy] = useState<string>('date');
const [showFilters, setShowFilters] = useState(false);
const [showNewCollaborationModal, setShowNewCollaborationModal] = useState(false);
const [selectedCollaboration, setSelectedCollaboration] = useState<Collaboration | null>(null);
// Mock data - replace with actual API calls
const [collaborations] = useState<Collaboration[]>([
{
id: '1',
title: 'Comparative Constitutional Law Research Network',
description: 'International research network studying constitutional developments across jurisdictions.',
type: 'research_project',
status: 'active',
priority: 'high',
startDate: '2023-09-01',
endDate: '2025-08-31',
leadResearcher: 'Dr. Marie Dubois',
collaborators: [
{
id: '1',
name: 'Prof. Jean-Luc Martin',
role: 'Co-Principal Investigator',
institution: 'Sorbonne University',
email: 'jean-luc.martin@sorbonne.fr',
expertise: ['Constitutional Law', 'Comparative Law'],
contribution: 'European constitutional analysis',
status: 'active'
},
{
id: '2',
name: 'Dr. Sarah Chen',
role: 'Research Associate',
institution: 'Harvard Law School',
email: 'schen@law.harvard.edu',
expertise: ['Constitutional Theory', 'Human Rights'],
contribution: 'North American perspective',
status: 'active'
}
],
institutions: ['McGill University', 'Sorbonne University', 'Harvard Law School'],
funding: 'SSHRC Partnership Grant',
budget: 250000,
objectives: [
'Analyze constitutional developments across 15 jurisdictions',
'Develop comparative constitutional theory framework',
'Publish joint research findings'
],
deliverables: [
'Research database of constitutional cases',
'Comparative analysis report',
'Academic publications (minimum 5)',
'International conference'
],
progress: 65,
documents: ['research-proposal.pdf', 'ethics-approval.pdf', 'data-collection-protocol.pdf'],
meetings: [
{
id: '1',
title: 'Quarterly Research Review',
date: '2024-06-15',
duration: 120,
participants: ['Dr. Marie Dubois', 'Prof. Jean-Luc Martin', 'Dr. Sarah Chen'],
agenda: ['Progress review', 'Data analysis discussion', 'Publication planning'],
notes: 'Good progress on data collection. Need to accelerate analysis phase.',
followUp: ['Schedule analysis workshops', 'Draft publication timeline']
}
],
notes: 'Strong collaboration with international partners. Data collection phase completed successfully.',
tags: ['Constitutional Law', 'Comparative Research', 'International Collaboration']
},
{
id: '2',
title: 'Digital Privacy Rights Joint Publication',
description: 'Collaborative publication on digital privacy rights in the age of AI.',
type: 'joint_publication',
status: 'active',
priority: 'medium',
startDate: '2024-01-15',
endDate: '2024-12-31',
leadResearcher: 'Dr. Marie Dubois',
collaborators: [
{
id: '3',
name: 'Dr. Alex Rodriguez',
role: 'Co-Author',
institution: 'Stanford Law School',
email: 'arodriguez@stanford.edu',
expertise: ['Technology Law', 'AI Ethics'],
contribution: 'AI and privacy analysis',
status: 'active'
}
],
institutions: ['McGill University', 'Stanford Law School'],
objectives: [
'Analyze privacy implications of AI technologies',
'Develop regulatory framework recommendations',
'Publish in top-tier law journal'
],
deliverables: [
'Research paper (8000-10000 words)',
'Policy recommendations document',
'Journal submission'
],
progress: 40,
documents: ['research-outline.pdf', 'literature-review.pdf'],
meetings: [],
notes: 'Research phase in progress. Literature review completed.',
tags: ['Digital Privacy', 'AI Law', 'Technology Regulation']
},
{
id: '3',
title: 'Environmental Justice Workshop Series',
description: 'Series of workshops on environmental justice and legal remedies.',
type: 'workshop',
status: 'proposed',
priority: 'low',
startDate: '2024-09-01',
endDate: '2024-12-31',
leadResearcher: 'Dr. Marie Dubois',
collaborators: [
{
id: '4',
name: 'Prof. Elena Petrova',
role: 'Workshop Coordinator',
institution: 'University of Toronto',
email: 'epetrova@utoronto.ca',
expertise: ['Environmental Law', 'Justice Theory'],
contribution: 'Workshop design and facilitation',
status: 'pending'
}
],
institutions: ['McGill University', 'University of Toronto'],
objectives: [
'Educate legal professionals on environmental justice',
'Develop practical tools for environmental cases',
'Build network of environmental law practitioners'
],
deliverables: [
'4 workshop sessions',
'Training materials',
'Participant handbook',
'Network directory'
],
progress: 10,
documents: ['workshop-proposal.pdf'],
meetings: [],
notes: 'Proposal submitted for funding approval.',
tags: ['Environmental Justice', 'Workshop', 'Professional Development']
}
]);
const [stats] = useState<CollaborationStats>({
totalCollaborations: 8,
active: 4,
completed: 2,
proposed: 2,
totalCollaborators: 12,
totalInstitutions: 8,
totalFunding: 450000,
averageProgress: 58
});
useEffect(() => {
if (status === 'loading') return;
if (!session) {
router.push('/auth/login');
return;
}
if (session.user?.role !== 'JURIST') {
router.push('/unauthorized');
return;
}
setIsLoading(false);
}, [session, status, router]);
const getStatusColor = (status: string) => {
switch (status) {
case 'active': return 'bg-green-100 text-green-800';
case 'completed': return 'bg-blue-100 text-blue-800';
case 'proposed': return 'bg-yellow-100 text-yellow-800';
case 'on_hold': return 'bg-orange-100 text-orange-800';
case 'cancelled': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getTypeColor = (type: string) => {
switch (type) {
case 'research_project': return 'bg-blue-100 text-blue-800';
case 'joint_publication': return 'bg-purple-100 text-purple-800';
case 'conference': return 'bg-green-100 text-green-800';
case 'workshop': return 'bg-orange-100 text-orange-800';
case 'institution_partnership': return 'bg-red-100 text-red-800';
case 'student_supervision': return 'bg-teal-100 text-teal-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getPriorityColor = (priority: string) => {
switch (priority) {
case 'urgent': return 'bg-red-100 text-red-800';
case 'high': return 'bg-orange-100 text-orange-800';
case 'medium': return 'bg-yellow-100 text-yellow-800';
case 'low': return 'bg-green-100 text-green-800';
default: return 'bg-gray-100 text-gray-800';
}
};
if (isLoading) {
return (
<LayoutWithSidebar>
<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 collaborations...</p>
</div>
</div>
</LayoutWithSidebar>
);
}
return (
<LayoutWithSidebar>
<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">Academic Collaboration</h1>
<p className="mt-1 text-sm text-gray-500">
Manage collaborative research projects, academic partnerships, and joint publications
</p>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowNewCollaborationModal(true)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors flex items-center"
>
<Plus className="w-4 h-4 mr-2" />
New Collaboration
</button>
</div>
</div>
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* 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">
<Users className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Collaborations</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalCollaborations}</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">Active</p>
<p className="text-2xl font-bold text-gray-900">{stats.active}</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">
<TrendingUp className="w-6 h-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Funding</p>
<p className="text-2xl font-bold text-gray-900">${(stats.totalFunding / 1000).toFixed(0)}k</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">
<BarChart3 className="w-6 h-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Avg Progress</p>
<p className="text-2xl font-bold text-gray-900">{stats.averageProgress}%</p>
</div>
</div>
</div>
</div>
{/* Quick Actions */}
<div className="bg-white rounded-lg shadow p-6 mb-8">
<h2 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Handshake className="w-5 h-5 text-blue-600 mr-3" />
<span className="text-sm font-medium">New Partnership</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Target className="w-5 h-5 text-green-600 mr-3" />
<span className="text-sm font-medium">Project Planning</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Zap className="w-5 h-5 text-yellow-600 mr-3" />
<span className="text-sm font-medium">Meeting Schedule</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<UserPlus className="w-5 h-5 text-purple-600 mr-3" />
<span className="text-sm font-medium">Add Collaborator</span>
</button>
</div>
</div>
{/* Search and Filters */}
<div className="bg-white rounded-lg shadow p-6 mb-8">
<div className="flex items-center space-x-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 w-5 h-5" />
<input
type="text"
placeholder="Search collaborations..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="w-full pl-10 pr-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
/>
</div>
</div>
<button
onClick={() => setShowFilters(!showFilters)}
className="flex items-center space-x-2 px-4 py-3 border border-gray-300 rounded-lg hover:bg-gray-50 transition-colors"
>
<Filter className="w-4 h-4" />
<span>Filters</span>
{showFilters ? <ChevronUp className="w-4 h-4" /> : <ChevronDown className="w-4 h-4" />}
</button>
</div>
{/* Filters */}
{showFilters && (
<div className="mt-6 grid grid-cols-1 md:grid-cols-4 gap-4">
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Status</label>
<select
value={selectedStatus}
onChange={(e) => setSelectedStatus(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">All Status</option>
<option value="active">Active</option>
<option value="completed">Completed</option>
<option value="proposed">Proposed</option>
<option value="on_hold">On Hold</option>
<option value="cancelled">Cancelled</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Type</label>
<select
value={selectedType}
onChange={(e) => setSelectedType(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">All Types</option>
<option value="research_project">Research Project</option>
<option value="joint_publication">Joint Publication</option>
<option value="conference">Conference</option>
<option value="workshop">Workshop</option>
<option value="institution_partnership">Institution Partnership</option>
<option value="student_supervision">Student Supervision</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Priority</label>
<select
value={selectedPriority}
onChange={(e) => setSelectedPriority(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="all">All Priorities</option>
<option value="urgent">Urgent</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Sort By</label>
<select
value={sortBy}
onChange={(e) => setSortBy(e.target.value)}
className="w-full border border-gray-300 rounded-lg px-3 py-2 focus:ring-2 focus:ring-blue-500 focus:border-transparent"
>
<option value="date">Date</option>
<option value="title">Title</option>
<option value="progress">Progress</option>
<option value="priority">Priority</option>
<option value="status">Status</option>
</select>
</div>
</div>
)}
</div>
{/* Collaborations List */}
<div className="bg-white rounded-lg shadow">
<div className="p-6 border-b border-gray-200">
<div className="flex items-center justify-between">
<h2 className="text-lg font-semibold text-gray-900">Your Collaborations</h2>
<span className="text-sm text-gray-500">{collaborations.length} collaborations</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{collaborations.map((collaboration) => (
<div key={collaboration.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center space-x-3 mb-2">
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getStatusColor(collaboration.status)}`}>
{collaboration.status.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(collaboration.type)}`}>
{collaboration.type.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(collaboration.priority)}`}>
{collaboration.priority.toUpperCase()}
</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{collaboration.title}</h3>
<p className="text-gray-700 mb-3">{collaboration.description}</p>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<p className="text-sm text-gray-600">
<strong>Lead:</strong> {collaboration.leadResearcher}
</p>
<p className="text-sm text-gray-600">
<strong>Collaborators:</strong> {collaboration.collaborators.length}
</p>
<p className="text-sm text-gray-600">
<strong>Institutions:</strong> {collaboration.institutions.join(', ')}
</p>
{collaboration.funding && (
<p className="text-sm text-gray-600">
<strong>Funding:</strong> {collaboration.funding}
</p>
)}
</div>
<div>
<p className="text-sm text-gray-600">
<strong>Start:</strong> {new Date(collaboration.startDate).toLocaleDateString()}
</p>
{collaboration.endDate && (
<p className="text-sm text-gray-600">
<strong>End:</strong> {new Date(collaboration.endDate).toLocaleDateString()}
</p>
)}
<p className="text-sm text-gray-600">
<strong>Progress:</strong> {collaboration.progress}%
</p>
{collaboration.budget && (
<p className="text-sm text-gray-600">
<strong>Budget:</strong> ${collaboration.budget.toLocaleString()}
</p>
)}
</div>
</div>
{/* Progress Bar */}
<div className="mb-4">
<div className="flex justify-between text-sm text-gray-600 mb-1">
<span>Progress</span>
<span>{collaboration.progress}%</span>
</div>
<div className="w-full bg-gray-200 rounded-full h-2">
<div
className="bg-blue-600 h-2 rounded-full transition-all duration-300"
style={{ width: `${collaboration.progress}%` }}
></div>
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
{collaboration.tags.map((tag) => (
<span key={tag} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
{tag}
</span>
))}
</div>
<div className="flex items-center justify-between">
<div className="flex items-center space-x-2">
<button className="p-2 text-gray-400 hover:text-gray-600">
<MessageSquare className="w-4 h-4" />
<span className="text-xs ml-1">{collaboration.meetings.length}</span>
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<FileText className="w-4 h-4" />
<span className="text-xs ml-1">{collaboration.documents.length}</span>
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<Users className="w-4 h-4" />
<span className="text-xs ml-1">{collaboration.collaborators.length}</span>
</button>
</div>
<div className="flex items-center space-x-2">
<button className="p-2 text-gray-400 hover:text-gray-600">
<Eye className="w-4 h-4" />
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<Edit className="w-4 h-4" />
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<MessageSquare className="w-4 h-4" />
</button>
<button className="p-2 text-gray-400 hover:text-red-600">
<Trash2 className="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default JuristCollaboration;