 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/jurist/ |
import React, { useState, useEffect } from 'react';
import { useRouter } from 'next/router';
import { useSession } from 'next-auth/react';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import {
MessageSquare,
Plus,
Edit,
Trash2,
Eye,
Calendar,
Clock,
DollarSign,
Star,
Users,
TrendingUp,
CheckCircle,
AlertCircle,
Filter,
Search,
ChevronDown,
ChevronUp,
ExternalLink,
Save,
Upload,
BarChart3,
Award,
Globe,
UserCheck,
UserX,
Phone,
Mail,
MapPin,
FileText,
Video,
ThumbsUp,
ThumbsDown,
Zap
} from 'lucide-react';
interface Consultation {
id: string;
title: string;
description: string;
clientName: string;
clientEmail: string;
clientPhone?: string;
clientOrganization?: string;
type: 'legal_opinion' | 'expert_witness' | 'policy_analysis' | 'research_consultation' | 'training' | 'review';
status: 'requested' | 'scheduled' | 'in_progress' | 'completed' | 'cancelled' | 'declined';
priority: 'low' | 'medium' | 'high' | 'urgent';
requestDate: string;
scheduledDate?: string;
completedDate?: string;
duration: number;
rate: number;
totalCost: number;
paymentStatus: 'pending' | 'partial' | 'paid' | 'overdue';
expertise: string[];
deliverables: string[];
notes: string;
documents: string[];
communications: Communication[];
tags: string[];
}
interface Communication {
id: string;
type: 'email' | 'phone' | 'meeting' | 'message';
date: string;
summary: string;
notes: string;
attachments: string[];
}
interface ConsultationStats {
totalConsultations: number;
active: number;
completed: number;
requested: number;
totalEarnings: number;
averageRating: number;
totalClients: number;
thisMonthConsultations: number;
}
const JuristConsultation: 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 [showNewConsultationModal, setShowNewConsultationModal] = useState(false);
const [selectedConsultation, setSelectedConsultation] = useState<Consultation | null>(null);
// Mock data - replace with actual API calls
const [consultations] = useState<Consultation[]>([
{
id: '1',
title: 'Constitutional Rights Analysis for Tech Company',
description: 'Legal analysis of constitutional rights implications for new technology implementation.',
clientName: 'TechCorp Solutions',
clientEmail: 'legal@techcorp.com',
clientPhone: '+1-555-0123',
clientOrganization: 'TechCorp Solutions Inc.',
type: 'legal_opinion',
status: 'in_progress',
priority: 'high',
requestDate: '2024-06-15',
scheduledDate: '2024-06-20',
duration: 120,
rate: 250,
totalCost: 500,
paymentStatus: 'partial',
expertise: ['Constitutional Law', 'Technology Law', 'Privacy Rights'],
deliverables: [
'Legal opinion memorandum',
'Risk assessment report',
'Compliance recommendations'
],
notes: 'Client needs urgent analysis for upcoming board meeting. Focus on privacy implications.',
documents: ['techcorp-request.pdf', 'constitutional-analysis-draft.pdf'],
communications: [
{
id: '1',
type: 'email',
date: '2024-06-15',
summary: 'Initial consultation request received',
notes: 'Client provided detailed background on technology implementation',
attachments: ['techcorp-request.pdf']
},
{
id: '2',
type: 'meeting',
date: '2024-06-18',
summary: 'Follow-up meeting scheduled',
notes: 'Discussed scope and timeline. Client emphasized urgency.',
attachments: []
}
],
tags: ['Constitutional Law', 'Technology', 'Privacy', 'Corporate']
},
{
id: '2',
title: 'Expert Witness Testimony - Environmental Case',
description: 'Expert witness testimony on environmental law and regulatory compliance.',
clientName: 'Environmental Defense Group',
clientEmail: 'legal@envdefense.org',
clientOrganization: 'Environmental Defense Group',
type: 'expert_witness',
status: 'scheduled',
priority: 'medium',
requestDate: '2024-06-10',
scheduledDate: '2024-07-15',
duration: 480,
rate: 300,
totalCost: 2400,
paymentStatus: 'pending',
expertise: ['Environmental Law', 'Regulatory Compliance', 'Expert Testimony'],
deliverables: [
'Expert report',
'Court testimony',
'Cross-examination preparation'
],
notes: 'Case involves complex environmental regulations. Need to prepare comprehensive expert report.',
documents: ['env-case-brief.pdf', 'regulatory-framework.pdf'],
communications: [
{
id: '3',
type: 'phone',
date: '2024-06-12',
summary: 'Initial phone consultation',
notes: 'Discussed case details and testimony requirements',
attachments: []
}
],
tags: ['Environmental Law', 'Expert Witness', 'Litigation', 'Regulatory']
},
{
id: '3',
title: 'Policy Analysis - Digital Rights Framework',
description: 'Analysis of proposed digital rights framework for government implementation.',
clientName: 'Ministry of Justice',
clientEmail: 'policy@justice.gov.ca',
clientOrganization: 'Government of Canada',
type: 'policy_analysis',
status: 'requested',
priority: 'urgent',
requestDate: '2024-06-20',
duration: 240,
rate: 200,
totalCost: 800,
paymentStatus: 'pending',
expertise: ['Digital Rights', 'Policy Analysis', 'Constitutional Law'],
deliverables: [
'Policy analysis report',
'Implementation recommendations',
'Stakeholder consultation summary'
],
notes: 'Government seeking expert analysis for new digital rights legislation.',
documents: ['policy-draft.pdf'],
communications: [],
tags: ['Policy Analysis', 'Digital Rights', 'Government', 'Legislation']
},
{
id: '4',
title: 'Legal Training - Constitutional Law Workshop',
description: 'Training workshop on constitutional law for legal professionals.',
clientName: 'Law Society of Quebec',
clientEmail: 'education@barreau.qc.ca',
clientOrganization: 'Law Society of Quebec',
type: 'training',
status: 'completed',
priority: 'medium',
requestDate: '2024-05-01',
scheduledDate: '2024-05-15',
completedDate: '2024-05-15',
duration: 360,
rate: 150,
totalCost: 900,
paymentStatus: 'paid',
expertise: ['Constitutional Law', 'Legal Education', 'Workshop Facilitation'],
deliverables: [
'Training materials',
'Workshop facilitation',
'Participant evaluation'
],
notes: 'Successful workshop with 25 participants. Excellent feedback received.',
documents: ['training-materials.pdf', 'participant-feedback.pdf'],
communications: [
{
id: '4',
type: 'meeting',
date: '2024-05-10',
summary: 'Pre-workshop planning meeting',
notes: 'Discussed workshop format and participant expectations',
attachments: ['workshop-outline.pdf']
}
],
tags: ['Training', 'Constitutional Law', 'Legal Education', 'Workshop']
}
]);
const [stats] = useState<ConsultationStats>({
totalConsultations: 12,
active: 3,
completed: 7,
requested: 2,
totalEarnings: 15600,
averageRating: 4.7,
totalClients: 8,
thisMonthConsultations: 4
});
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 'completed': return 'bg-green-100 text-green-800';
case 'in_progress': return 'bg-blue-100 text-blue-800';
case 'scheduled': return 'bg-yellow-100 text-yellow-800';
case 'requested': return 'bg-purple-100 text-purple-800';
case 'cancelled': return 'bg-red-100 text-red-800';
case 'declined': return 'bg-gray-100 text-gray-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getTypeColor = (type: string) => {
switch (type) {
case 'legal_opinion': return 'bg-blue-100 text-blue-800';
case 'expert_witness': return 'bg-purple-100 text-purple-800';
case 'policy_analysis': return 'bg-green-100 text-green-800';
case 'research_consultation': return 'bg-orange-100 text-orange-800';
case 'training': return 'bg-teal-100 text-teal-800';
case 'review': return 'bg-red-100 text-red-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';
}
};
const getPaymentStatusColor = (status: string) => {
switch (status) {
case 'paid': return 'bg-green-100 text-green-800';
case 'partial': return 'bg-yellow-100 text-yellow-800';
case 'pending': return 'bg-blue-100 text-blue-800';
case 'overdue': return 'bg-red-100 text-red-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 consultations...</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">Expert Consultation</h1>
<p className="mt-1 text-sm text-gray-500">
Manage consultation services, client requests, and professional advice
</p>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowNewConsultationModal(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 Consultation
</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">
<MessageSquare className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Consultations</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalConsultations}</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.completed}</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">
<DollarSign className="w-6 h-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Earnings</p>
<p className="text-2xl font-bold text-gray-900">${(stats.totalEarnings / 1000).toFixed(1)}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">
<Star className="w-6 h-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Avg Rating</p>
<p className="text-2xl font-bold text-gray-900">{stats.averageRating}</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">
<UserCheck className="w-5 h-5 text-blue-600 mr-3" />
<span className="text-sm font-medium">Accept Request</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Calendar className="w-5 h-5 text-green-600 mr-3" />
<span className="text-sm font-medium">Schedule Meeting</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">Send Invoice</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<FileText className="w-5 h-5 text-purple-600 mr-3" />
<span className="text-sm font-medium">Generate Report</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 consultations..."
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="completed">Completed</option>
<option value="in_progress">In Progress</option>
<option value="scheduled">Scheduled</option>
<option value="requested">Requested</option>
<option value="cancelled">Cancelled</option>
<option value="declined">Declined</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="legal_opinion">Legal Opinion</option>
<option value="expert_witness">Expert Witness</option>
<option value="policy_analysis">Policy Analysis</option>
<option value="research_consultation">Research Consultation</option>
<option value="training">Training</option>
<option value="review">Review</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="priority">Priority</option>
<option value="status">Status</option>
<option value="cost">Cost</option>
</select>
</div>
</div>
)}
</div>
{/* Consultations 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 Consultations</h2>
<span className="text-sm text-gray-500">{consultations.length} consultations</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{consultations.map((consultation) => (
<div key={consultation.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(consultation.status)}`}>
{consultation.status.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(consultation.type)}`}>
{consultation.type.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(consultation.priority)}`}>
{consultation.priority.toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getPaymentStatusColor(consultation.paymentStatus)}`}>
{consultation.paymentStatus.toUpperCase()}
</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{consultation.title}</h3>
<p className="text-gray-700 mb-3">{consultation.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>Client:</strong> {consultation.clientName}
</p>
<p className="text-sm text-gray-600">
<strong>Organization:</strong> {consultation.clientOrganization}
</p>
<p className="text-sm text-gray-600">
<strong>Email:</strong> {consultation.clientEmail}
</p>
{consultation.clientPhone && (
<p className="text-sm text-gray-600">
<strong>Phone:</strong> {consultation.clientPhone}
</p>
)}
</div>
<div>
<p className="text-sm text-gray-600">
<strong>Requested:</strong> {new Date(consultation.requestDate).toLocaleDateString()}
</p>
{consultation.scheduledDate && (
<p className="text-sm text-gray-600">
<strong>Scheduled:</strong> {new Date(consultation.scheduledDate).toLocaleDateString()}
</p>
)}
<p className="text-sm text-gray-600">
<strong>Duration:</strong> {consultation.duration} minutes
</p>
<p className="text-sm text-gray-600">
<strong>Rate:</strong> ${consultation.rate}/hour
</p>
<p className="text-sm text-gray-600">
<strong>Total Cost:</strong> ${consultation.totalCost}
</p>
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
{consultation.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">{consultation.communications.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">{consultation.documents.length}</span>
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<DollarSign className="w-4 h-4" />
<span className="text-xs ml-1">${consultation.totalCost}</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 JuristConsultation;