 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 {
Search,
BookOpen,
FileText,
Database,
Globe,
Filter,
Download,
Share2,
Bookmark,
Star,
TrendingUp,
Users,
Calendar,
ArrowRight,
Plus,
ChevronDown,
ChevronUp,
ExternalLink,
Save,
Eye
} from 'lucide-react';
interface ResearchItem {
id: string;
title: string;
authors: string[];
abstract: string;
type: 'article' | 'case' | 'book' | 'report' | 'thesis';
year: number;
citations: number;
source: string;
tags: string[];
isBookmarked: boolean;
isRead: boolean;
}
interface ResearchDatabase {
id: string;
name: string;
description: string;
accessLevel: 'free' | 'premium' | 'institutional';
lastUpdated: string;
recordCount: number;
}
const JuristResearch: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [isLoading, setIsLoading] = useState(true);
const [searchQuery, setSearchQuery] = useState('');
const [selectedType, setSelectedType] = useState<string>('all');
const [selectedYear, setSelectedYear] = useState<string>('all');
const [sortBy, setSortBy] = useState<string>('relevance');
const [showFilters, setShowFilters] = useState(false);
// Mock data - replace with actual API calls
const [researchItems] = useState<ResearchItem[]>([
{
id: '1',
title: 'The Evolution of Constitutional Rights in Modern Legal Systems',
authors: ['Dr. Marie Dubois', 'Prof. Jean-Luc Martin'],
abstract: 'This comprehensive study examines the development of constitutional rights across various legal systems, analyzing trends and implications for contemporary jurisprudence.',
type: 'article',
year: 2024,
citations: 156,
source: 'Harvard Law Review',
tags: ['Constitutional Law', 'Human Rights', 'Comparative Law'],
isBookmarked: true,
isRead: false
},
{
id: '2',
title: 'Digital Privacy and Legal Frameworks: A Global Perspective',
authors: ['Dr. Sarah Chen', 'Prof. Michael Rodriguez'],
abstract: 'Analysis of digital privacy laws across jurisdictions, examining the balance between technological advancement and individual rights protection.',
type: 'report',
year: 2024,
citations: 89,
source: 'International Law Journal',
tags: ['Privacy Law', 'Technology Law', 'International Law'],
isBookmarked: false,
isRead: true
},
{
id: '3',
title: 'Environmental Justice and Legal Remedies',
authors: ['Prof. Elena Vasquez'],
abstract: 'Exploration of legal mechanisms for addressing environmental injustices and the role of courts in environmental protection.',
type: 'book',
year: 2023,
citations: 234,
source: 'Oxford University Press',
tags: ['Environmental Law', 'Justice', 'Remedies'],
isBookmarked: true,
isRead: false
}
]);
const [databases] = useState<ResearchDatabase[]>([
{
id: '1',
name: 'Legal Academic Database',
description: 'Comprehensive collection of legal academic papers and research',
accessLevel: 'institutional',
lastUpdated: '2025-06-30',
recordCount: 1250000
},
{
id: '2',
name: 'International Case Law Repository',
description: 'Global case law database with advanced search capabilities',
accessLevel: 'premium',
lastUpdated: '2025-06-29',
recordCount: 890000
},
{
id: '3',
name: 'Legal Theory Archive',
description: 'Historical and contemporary legal theory resources',
accessLevel: 'free',
lastUpdated: '2025-06-28',
recordCount: 450000
}
]);
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 getTypeColor = (type: string) => {
switch (type) {
case 'article': return 'bg-blue-100 text-blue-800';
case 'case': return 'bg-green-100 text-green-800';
case 'book': return 'bg-purple-100 text-purple-800';
case 'report': return 'bg-orange-100 text-orange-800';
case 'thesis': return 'bg-red-100 text-red-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getAccessLevelColor = (level: string) => {
switch (level) {
case 'free': return 'bg-green-100 text-green-800';
case 'premium': return 'bg-yellow-100 text-yellow-800';
case 'institutional': return 'bg-blue-100 text-blue-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 research hub...</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">Legal Research Hub</h1>
<p className="mt-1 text-sm text-gray-500">
Access academic databases, case law analysis, and legal theory resources
</p>
</div>
<div className="flex items-center space-x-4">
<button 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 Research
</button>
</div>
</div>
</div>
</div>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Search Section */}
<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 legal research, cases, articles..."
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>
<button className="bg-blue-600 text-white px-6 py-3 rounded-lg hover:bg-blue-700 transition-colors">
Search
</button>
</div>
{/* Filters */}
{showFilters && (
<div className="mt-6 grid grid-cols-1 md:grid-cols-3 gap-4">
<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="article">Articles</option>
<option value="case">Cases</option>
<option value="book">Books</option>
<option value="report">Reports</option>
<option value="thesis">Theses</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Year</label>
<select
value={selectedYear}
onChange={(e) => setSelectedYear(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 Years</option>
<option value="2024">2024</option>
<option value="2023">2023</option>
<option value="2022">2022</option>
<option value="2021">2021</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="relevance">Relevance</option>
<option value="date">Date</option>
<option value="citations">Citations</option>
<option value="title">Title</option>
</select>
</div>
</div>
)}
</div>
<div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
{/* Research Results */}
<div className="lg:col-span-2">
<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">Research Results</h2>
<span className="text-sm text-gray-500">{researchItems.length} results</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{researchItems.map((item) => (
<div key={item.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 ${getTypeColor(item.type)}`}>
{item.type.toUpperCase()}
</span>
<span className="text-sm text-gray-500">{item.year}</span>
<div className="flex items-center space-x-1 text-sm text-gray-500">
<Star className="w-4 h-4 text-yellow-400" />
<span>{item.citations} citations</span>
</div>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{item.title}</h3>
<p className="text-sm text-gray-600 mb-3">
<strong>Authors:</strong> {item.authors.join(', ')}
</p>
<p className="text-gray-700 mb-4">{item.abstract}</p>
<div className="flex items-center space-x-2 mb-4">
{item.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">
<span className="text-sm text-gray-500">Source: {item.source}</span>
<div className="flex items-center space-x-2">
<button className="p-2 text-gray-400 hover:text-gray-600">
<Bookmark className={`w-4 h-4 ${item.isBookmarked ? 'text-blue-600 fill-current' : ''}`} />
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<Download className="w-4 h-4" />
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<Share2 className="w-4 h-4" />
</button>
<button className="flex items-center space-x-1 text-blue-600 hover:text-blue-700 text-sm font-medium">
<span>Read More</span>
<ArrowRight className="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
{/* Sidebar */}
<div className="space-y-6">
{/* Research Databases */}
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Research Databases</h3>
<div className="space-y-4">
{databases.map((db) => (
<div key={db.id} className="border border-gray-200 rounded-lg p-4">
<div className="flex items-center justify-between mb-2">
<h4 className="font-medium text-gray-900">{db.name}</h4>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getAccessLevelColor(db.accessLevel)}`}>
{db.accessLevel}
</span>
</div>
<p className="text-sm text-gray-600 mb-3">{db.description}</p>
<div className="flex items-center justify-between text-xs text-gray-500">
<span>{db.recordCount.toLocaleString()} records</span>
<span>Updated: {db.lastUpdated}</span>
</div>
<button className="w-full mt-3 bg-blue-600 text-white px-3 py-2 rounded text-sm hover:bg-blue-700 transition-colors">
Access Database
</button>
</div>
))}
</div>
</div>
{/* Quick Actions */}
<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">
<BookOpen className="w-5 h-5 text-blue-600 mr-3" />
<span className="font-medium text-gray-900">Browse Journals</span>
</div>
<ArrowRight 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">
<Database className="w-5 h-5 text-green-600 mr-3" />
<span className="font-medium text-gray-900">Case Law Search</span>
</div>
<ArrowRight 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">
<Users className="w-5 h-5 text-purple-600 mr-3" />
<span className="font-medium text-gray-900">Research Network</span>
</div>
<ArrowRight 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">
<TrendingUp className="w-5 h-5 text-orange-600 mr-3" />
<span className="font-medium text-gray-900">Research Trends</span>
</div>
<ArrowRight className="w-4 h-4 text-gray-400" />
</button>
</div>
</div>
{/* Recent Activity */}
<div className="bg-white rounded-lg shadow p-6">
<h3 className="text-lg font-semibold text-gray-900 mb-4">Recent Activity</h3>
<div className="space-y-3">
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
<div className="flex-1">
<p className="text-sm text-gray-900">Accessed "Constitutional Rights" article</p>
<p className="text-xs text-gray-500">2 hours ago</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-green-600 rounded-full"></div>
<div className="flex-1">
<p className="text-sm text-gray-900">Bookmarked "Digital Privacy" report</p>
<p className="text-xs text-gray-500">4 hours ago</p>
</div>
</div>
<div className="flex items-center space-x-3">
<div className="w-2 h-2 bg-purple-600 rounded-full"></div>
<div className="flex-1">
<p className="text-sm text-gray-900">Searched "Environmental Law"</p>
<p className="text-xs text-gray-500">1 day ago</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default JuristResearch;