 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/components/ |
import React, { useState, useEffect } from 'react';
import { Search, BookOpen, TrendingUp, AlertTriangle, CheckCircle, Brain, Database, FileText, Scale, Clock, DollarSign, Shield } from 'lucide-react';
interface CaseLaw {
id: string;
citation: string;
title: string;
court: string;
year: number;
relevanceScore: number;
keySummary: string;
outcome: 'favorable' | 'unfavorable' | 'neutral';
jurisdiction: 'quebec' | 'federal' | 'other_provincial';
caseType: string;
precedentialValue: 'binding' | 'persuasive' | 'informational';
legalPrinciples: string[];
factSimilarity: number;
}
interface LegalResearchQuery {
id: string;
query: string;
practiceArea: string;
jurisdiction: string;
dateRange: string;
status: 'pending' | 'completed' | 'error';
results: CaseLaw[];
aiAnalysis: {
strengthOfCase: number;
riskFactors: string[];
strategicRecommendations: string[];
estimatedOutcome: 'strong' | 'moderate' | 'weak';
confidenceLevel: number;
};
}
interface OutcomePrediction {
caseId: string;
caseType: string;
clientName: string;
predictedOutcome: 'favorable' | 'unfavorable' | 'settlement';
confidenceScore: number;
keyFactors: string[];
similarCases: number;
estimatedDuration: string;
estimatedCost: string;
riskAssessment: 'low' | 'medium' | 'high';
strategicInsights: string[];
}
const AILegalResearch: React.FC = () => {
const [activeTab, setActiveTab] = useState<'research' | 'predictions' | 'citations' | 'analytics'>('research');
const [searchQuery, setSearchQuery] = useState('');
const [researchQueries, setResearchQueries] = useState<LegalResearchQuery[]>([]);
const [outcomePredictions, setOutcomePredictions] = useState<OutcomePrediction[]>([]);
const [isResearching, setIsResearching] = useState(false);
useEffect(() => {
loadSampleData();
}, []);
const loadSampleData = () => {
const sampleQueries: LegalResearchQuery[] = [
{
id: 'research_1',
query: 'Prisoners rights violations Quebec detention centers',
practiceArea: 'Detention Law',
jurisdiction: 'Quebec',
dateRange: '2020-2024',
status: 'completed',
results: [
{
id: 'case_1',
citation: '2023 QCCS 1234',
title: 'Doe v. Quebec Detention Authority',
court: 'Quebec Superior Court',
year: 2023,
relevanceScore: 94,
keySummary: 'Successful class action for overcrowding and inadequate medical care in provincial detention centers.',
outcome: 'favorable',
jurisdiction: 'quebec',
caseType: 'Class Action',
precedentialValue: 'binding',
legalPrinciples: ['Charter s.7 rights', 'Cruel and unusual punishment', 'Duty of care'],
factSimilarity: 87
},
{
id: 'case_2',
citation: '2022 SCC 45',
title: 'R. v. Detention Conditions',
court: 'Supreme Court of Canada',
year: 2022,
relevanceScore: 89,
keySummary: 'Landmark decision on minimum standards for detention facility conditions.',
outcome: 'favorable',
jurisdiction: 'federal',
caseType: 'Constitutional Challenge',
precedentialValue: 'binding',
legalPrinciples: ['Charter s.12', 'Administrative law', 'Institutional liability'],
factSimilarity: 78
}
],
aiAnalysis: {
strengthOfCase: 78,
riskFactors: ['Government immunity arguments', 'Jurisdictional challenges'],
strategicRecommendations: [
'Focus on Charter s.7 and s.12 violations',
'Gather medical evidence of harm',
'Build class of similarly affected detainees'
],
estimatedOutcome: 'strong',
confidenceLevel: 82
}
}
];
const samplePredictions: OutcomePrediction[] = [
{
caseId: 'case_pred_1',
caseType: 'Bordeaux Class Action 2024QCCS4539',
clientName: 'Class Representatives',
predictedOutcome: 'settlement',
confidenceScore: 87,
keyFactors: [
'Strong Charter violations evidence',
'Media attention and public support',
'Government willingness to settle',
'Precedent from similar cases'
],
similarCases: 23,
estimatedDuration: '18-24 months',
estimatedCost: '$485,000 - $675,000',
riskAssessment: 'medium',
strategicInsights: [
'Settlement negotiations likely in months 12-15',
'Focus on systemic relief over individual damages',
'Media strategy critical for leverage'
]
},
{
caseId: 'case_pred_2',
caseType: 'Immigration Detention Appeal',
clientName: 'Maria Santos',
predictedOutcome: 'favorable',
confidenceScore: 73,
keyFactors: [
'Strong humanitarian factors',
'Recent favorable precedents',
'Weak government evidence',
'Family ties in Canada'
],
similarCases: 156,
estimatedDuration: '8-12 months',
estimatedCost: '$25,000 - $35,000',
riskAssessment: 'low',
strategicInsights: [
'Emphasize best interests of child',
'Challenge credibility assessment',
'Seek interim release pending appeal'
]
}
];
setResearchQueries(sampleQueries);
setOutcomePredictions(samplePredictions);
};
const handleResearch = async () => {
if (!searchQuery.trim()) return;
setIsResearching(true);
// Simulate AI research
await new Promise(resolve => setTimeout(resolve, 3000));
const newQuery: LegalResearchQuery = {
id: `research_${Date.now()}`,
query: searchQuery,
practiceArea: 'General',
jurisdiction: 'Quebec',
dateRange: '2020-2024',
status: 'completed',
results: [],
aiAnalysis: {
strengthOfCase: Math.floor(Math.random() * 40) + 60,
riskFactors: ['Procedural challenges', 'Evidentiary requirements'],
strategicRecommendations: ['Conduct thorough discovery', 'Consider alternative dispute resolution'],
estimatedOutcome: 'moderate',
confidenceLevel: 75
}
};
setResearchQueries([newQuery, ...researchQueries]);
setSearchQuery('');
setIsResearching(false);
};
const getOutcomeColor = (outcome: string) => {
switch (outcome) {
case 'favorable': case 'strong': return 'text-green-600';
case 'unfavorable': case 'weak': return 'text-red-600';
case 'settlement': case 'moderate': return 'text-yellow-600';
default: return 'text-gray-600';
}
};
const getRiskColor = (risk: string) => {
switch (risk) {
case 'low': return 'bg-green-100 text-green-800';
case 'medium': return 'bg-yellow-100 text-yellow-800';
case 'high': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
};
return (
<div className="p-6 bg-white">
{/* Header */}
<div className="mb-8">
<div className="flex items-center space-x-3 mb-4">
<Brain className="h-8 w-8 text-purple-600" />
<h1 className="text-3xl font-bold text-gray-900">AI Legal Research Hub</h1>
</div>
<p className="text-gray-600">
Advanced AI-powered legal research, case analysis, and outcome prediction
</p>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<div className="bg-gradient-to-r from-purple-500 to-purple-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-purple-100">Research Queries</p>
<p className="text-2xl font-bold">2,847</p>
</div>
<Search className="h-8 w-8 text-purple-200" />
</div>
</div>
<div className="bg-gradient-to-r from-blue-500 to-blue-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-blue-100">AI Accuracy</p>
<p className="text-2xl font-bold">94.7%</p>
</div>
<TrendingUp className="h-8 w-8 text-blue-200" />
</div>
</div>
<div className="bg-gradient-to-r from-green-500 to-green-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-green-100">Cases Analyzed</p>
<p className="text-2xl font-bold">12,456</p>
</div>
<Scale className="h-8 w-8 text-green-200" />
</div>
</div>
<div className="bg-gradient-to-r from-orange-500 to-orange-600 p-6 rounded-lg text-white">
<div className="flex items-center justify-between">
<div>
<p className="text-orange-100">Time Saved</p>
<p className="text-2xl font-bold">847h</p>
</div>
<Clock className="h-8 w-8 text-orange-200" />
</div>
</div>
</div>
{/* Navigation Tabs */}
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
{[
{ id: 'research', label: 'AI Research', icon: Search },
{ id: 'predictions', label: 'Outcome Predictions', icon: TrendingUp },
{ id: 'citations', label: 'Citation Verification', icon: CheckCircle },
{ id: 'analytics', label: 'Research Analytics', icon: Database }
].map(({ id, label, icon: Icon }) => (
<button
key={id}
onClick={() => setActiveTab(id as any)}
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 ${
activeTab === id
? 'border-purple-500 text-purple-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
<Icon className="h-5 w-5" />
<span>{label}</span>
</button>
))}
</nav>
</div>
{/* Research Tab */}
{activeTab === 'research' && (
<div className="space-y-6">
{/* Search Interface */}
<div className="bg-gray-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-4">AI-Powered Legal Research</h3>
<div className="flex space-x-4">
<input
type="text"
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
placeholder="Enter your legal research query..."
className="flex-1 px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent"
/>
<button
onClick={handleResearch}
disabled={isResearching}
className="bg-purple-600 text-white px-6 py-2 rounded-lg hover:bg-purple-700 disabled:opacity-50 flex items-center space-x-2"
>
{isResearching ? (
<>
<div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
<span>Researching...</span>
</>
) : (
<>
<Search className="h-4 w-4" />
<span>Research</span>
</>
)}
</button>
</div>
</div>
{/* Research Results */}
<div className="space-y-6">
{researchQueries.map(query => (
<div key={query.id} className="border border-gray-200 rounded-lg p-6">
<div className="mb-4">
<h4 className="text-lg font-semibold text-gray-900">{query.query}</h4>
<div className="flex items-center space-x-4 text-sm text-gray-500 mt-1">
<span>{query.practiceArea}</span>
<span>•</span>
<span>{query.jurisdiction}</span>
<span>•</span>
<span>{query.results.length} cases found</span>
</div>
</div>
{/* AI Analysis */}
<div className="bg-blue-50 p-4 rounded-lg mb-4">
<h5 className="font-semibold text-blue-900 mb-2">AI Analysis</h5>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p className="text-sm text-blue-700">Case Strength: {query.aiAnalysis.strengthOfCase}%</p>
<div className="w-full bg-blue-200 rounded-full h-2 mt-1">
<div
className="bg-blue-600 h-2 rounded-full"
style={{ width: `${query.aiAnalysis.strengthOfCase}%` }}
></div>
</div>
</div>
<div>
<p className="text-sm text-blue-700">
Estimated Outcome:
<span className={`ml-1 font-semibold ${getOutcomeColor(query.aiAnalysis.estimatedOutcome)}`}>
{query.aiAnalysis.estimatedOutcome}
</span>
</p>
</div>
</div>
<div className="mt-3">
<p className="text-sm font-medium text-blue-900 mb-1">Strategic Recommendations:</p>
<ul className="text-sm text-blue-700 space-y-1">
{query.aiAnalysis.strategicRecommendations.map((rec, idx) => (
<li key={idx}>• {rec}</li>
))}
</ul>
</div>
</div>
{/* Case Results */}
<div className="space-y-3">
{query.results.map(caselaw => (
<div key={caselaw.id} className="border border-gray-100 rounded-lg p-4">
<div className="flex items-start justify-between mb-2">
<div>
<h6 className="font-semibold text-gray-900">{caselaw.title}</h6>
<p className="text-sm text-gray-600">{caselaw.citation} • {caselaw.court} ({caselaw.year})</p>
</div>
<div className="flex items-center space-x-2">
<span className="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">
{caselaw.relevanceScore}% relevant
</span>
<span className={`text-xs px-2 py-1 rounded ${
caselaw.outcome === 'favorable' ? 'bg-green-100 text-green-800' :
caselaw.outcome === 'unfavorable' ? 'bg-red-100 text-red-800' :
'bg-yellow-100 text-yellow-800'
}`}>
{caselaw.outcome}
</span>
</div>
</div>
<p className="text-sm text-gray-700 mb-2">{caselaw.keySummary}</p>
<div className="flex flex-wrap gap-2">
{caselaw.legalPrinciples.map((principle, idx) => (
<span key={idx} className="text-xs bg-purple-100 text-purple-800 px-2 py-1 rounded">
{principle}
</span>
))}
</div>
</div>
))}
</div>
</div>
))}
</div>
</div>
)}
{/* Predictions Tab */}
{activeTab === 'predictions' && (
<div className="space-y-6">
<div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">AI Outcome Predictions</h3>
<p className="text-gray-600">Advanced machine learning analysis of case outcomes based on historical data and current factors.</p>
</div>
<div className="space-y-6">
{outcomePredictions.map(prediction => (
<div key={prediction.caseId} className="border border-gray-200 rounded-lg p-6">
<div className="flex items-start justify-between mb-4">
<div>
<h4 className="text-lg font-semibold text-gray-900">{prediction.caseType}</h4>
<p className="text-gray-600">{prediction.clientName}</p>
</div>
<div className="text-right">
<p className={`text-lg font-semibold ${getOutcomeColor(prediction.predictedOutcome)}`}>
{prediction.predictedOutcome.toUpperCase()}
</p>
<p className="text-sm text-gray-500">{prediction.confidenceScore}% confidence</p>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-4">
<div>
<p className="text-sm font-medium text-gray-900 mb-1">Estimated Duration</p>
<p className="text-gray-700">{prediction.estimatedDuration}</p>
</div>
<div>
<p className="text-sm font-medium text-gray-900 mb-1">Estimated Cost</p>
<p className="text-gray-700">{prediction.estimatedCost}</p>
</div>
<div>
<p className="text-sm font-medium text-gray-900 mb-1">Risk Assessment</p>
<span className={`inline-block px-2 py-1 rounded text-sm ${getRiskColor(prediction.riskAssessment)}`}>
{prediction.riskAssessment.toUpperCase()}
</span>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<p className="text-sm font-medium text-gray-900 mb-2">Key Factors</p>
<ul className="text-sm text-gray-700 space-y-1">
{prediction.keyFactors.map((factor, idx) => (
<li key={idx} className="flex items-start space-x-2">
<CheckCircle className="h-4 w-4 text-green-500 mt-0.5 flex-shrink-0" />
<span>{factor}</span>
</li>
))}
</ul>
</div>
<div>
<p className="text-sm font-medium text-gray-900 mb-2">Strategic Insights</p>
<ul className="text-sm text-gray-700 space-y-1">
{prediction.strategicInsights.map((insight, idx) => (
<li key={idx} className="flex items-start space-x-2">
<Brain className="h-4 w-4 text-purple-500 mt-0.5 flex-shrink-0" />
<span>{insight}</span>
</li>
))}
</ul>
</div>
</div>
<div className="mt-4 pt-4 border-t border-gray-200 text-sm text-gray-500">
Based on analysis of {prediction.similarCases} similar cases
</div>
</div>
))}
</div>
</div>
)}
{/* Citations Tab */}
{activeTab === 'citations' && (
<div className="space-y-6">
<div className="bg-green-50 p-6 rounded-lg">
<h3 className="text-lg font-semibold text-gray-900 mb-2">AI Citation Verification</h3>
<p className="text-gray-600">Automated verification and validation of legal citations with 99.3% accuracy.</p>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Citation Checker</h4>
<textarea
placeholder="Paste your document or citations here for AI verification..."
className="w-full h-32 px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent"
></textarea>
<button className="mt-3 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 flex items-center space-x-2">
<CheckCircle className="h-4 w-4" />
<span>Verify Citations</span>
</button>
</div>
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Recent Verifications</h4>
<div className="space-y-3">
{[
{ citation: '2023 QCCS 1234', status: 'verified', accuracy: 99 },
{ citation: 'R. v. Smith, 2022 SCC 45', status: 'verified', accuracy: 100 },
{ citation: '[2021] 3 FCR 456', status: 'needs_review', accuracy: 87 },
{ citation: '2020 QCCA 123', status: 'verified', accuracy: 98 }
].map((item, idx) => (
<div key={idx} className="flex items-center justify-between p-3 bg-gray-50 rounded">
<span className="text-sm font-medium">{item.citation}</span>
<div className="flex items-center space-x-2">
<span className="text-xs text-gray-500">{item.accuracy}%</span>
{item.status === 'verified' ? (
<CheckCircle className="h-4 w-4 text-green-500" />
) : (
<AlertTriangle className="h-4 w-4 text-yellow-500" />
)}
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
{/* Analytics Tab */}
{activeTab === 'analytics' && (
<div className="space-y-6">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Research Efficiency</p>
<p className="text-2xl font-bold text-purple-600">847%</p>
<p className="text-xs text-green-600">↑ 23% this month</p>
</div>
<TrendingUp className="h-8 w-8 text-purple-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Time Saved</p>
<p className="text-2xl font-bold text-blue-600">2,847h</p>
<p className="text-xs text-green-600">↑ 156h this week</p>
</div>
<Clock className="h-8 w-8 text-blue-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Cost Savings</p>
<p className="text-2xl font-bold text-green-600">$456K</p>
<p className="text-xs text-green-600">↑ $23K this month</p>
</div>
<DollarSign className="h-8 w-8 text-green-500" />
</div>
</div>
<div className="bg-white border border-gray-200 rounded-lg p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm text-gray-600">Prediction Accuracy</p>
<p className="text-2xl font-bold text-orange-600">94.7%</p>
<p className="text-xs text-green-600">↑ 2.1% this quarter</p>
</div>
<Shield className="h-8 w-8 text-orange-500" />
</div>
</div>
</div>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Research Volume Trends</h4>
<div className="h-64 bg-gray-50 rounded-lg flex items-center justify-center">
<p className="text-gray-500">Research volume chart would go here</p>
</div>
</div>
<div className="border border-gray-200 rounded-lg p-6">
<h4 className="font-semibold text-gray-900 mb-4">Practice Area Distribution</h4>
<div className="space-y-3">
{[
{ area: 'Detention Law', percentage: 45, color: 'bg-purple-500' },
{ area: 'Immigration', percentage: 25, color: 'bg-blue-500' },
{ area: 'Family Law', percentage: 15, color: 'bg-green-500' },
{ area: 'Criminal Defense', percentage: 10, color: 'bg-orange-500' },
{ area: 'Other', percentage: 5, color: 'bg-gray-500' }
].map((item, idx) => (
<div key={idx} className="flex items-center justify-between">
<span className="text-sm text-gray-700">{item.area}</span>
<div className="flex items-center space-x-2">
<div className="w-20 bg-gray-200 rounded-full h-2">
<div
className={`h-2 rounded-full ${item.color}`}
style={{ width: `${item.percentage}%` }}
></div>
</div>
<span className="text-sm text-gray-600 w-8">{item.percentage}%</span>
</div>
</div>
))}
</div>
</div>
</div>
</div>
)}
</div>
);
};
export default AILegalResearch;