 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 {
BarChart3,
TrendingUp,
Star,
Users,
Calendar,
Globe,
FileText,
Eye,
Download,
Share2,
Filter,
Search,
ChevronDown,
ChevronUp,
ExternalLink,
Save,
Upload,
Award,
Target,
Zap,
Activity,
PieChart,
LineChart
} from 'lucide-react';
interface CitationData {
id: string;
publicationTitle: string;
publicationType: string;
publicationYear: number;
journal?: string;
citations: number;
selfCitations: number;
hIndex: number;
impactFactor?: number;
altmetricScore?: number;
downloads: number;
views: number;
countries: string[];
institutions: string[];
researchAreas: string[];
}
interface AnalyticsStats {
totalCitations: number;
hIndex: number;
i10Index: number;
totalPublications: number;
averageCitations: number;
totalDownloads: number;
totalViews: number;
thisYearCitations: number;
}
const JuristAnalytics: React.FC = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [isLoading, setIsLoading] = useState(true);
const [selectedYear, setSelectedYear] = useState<string>('all');
const [selectedType, setSelectedType] = useState<string>('all');
const [sortBy, setSortBy] = useState<string>('citations');
const [showFilters, setShowFilters] = useState(false);
// Mock data - replace with actual API calls
const [citationData] = useState<CitationData[]>([
{
id: '1',
publicationTitle: 'The Evolution of Constitutional Rights in Modern Legal Systems',
publicationType: 'Journal Article',
publicationYear: 2024,
journal: 'Harvard Law Review',
citations: 156,
selfCitations: 3,
hIndex: 12,
impactFactor: 8.5,
altmetricScore: 45,
downloads: 1247,
views: 3456,
countries: ['United States', 'Canada', 'United Kingdom', 'Germany', 'France'],
institutions: ['Harvard University', 'McGill University', 'Oxford University', 'Max Planck Institute'],
researchAreas: ['Constitutional Law', 'Human Rights', 'Comparative Law']
},
{
id: '2',
publicationTitle: 'Digital Privacy and Legal Frameworks: A Global Perspective',
publicationType: 'Journal Article',
publicationYear: 2023,
journal: 'International Law Journal',
citations: 89,
selfCitations: 1,
hIndex: 8,
impactFactor: 6.2,
altmetricScore: 32,
downloads: 892,
views: 2156,
countries: ['United States', 'Canada', 'Australia', 'Netherlands'],
institutions: ['Stanford University', 'McGill University', 'University of Melbourne'],
researchAreas: ['Privacy Law', 'Technology Law', 'International Law']
},
{
id: '3',
publicationTitle: 'Environmental Justice and Legal Remedies',
publicationType: 'Book Chapter',
publicationYear: 2023,
citations: 45,
selfCitations: 0,
hIndex: 5,
downloads: 567,
views: 1234,
countries: ['Canada', 'United States', 'United Kingdom'],
institutions: ['McGill University', 'University of Toronto', 'University of British Columbia'],
researchAreas: ['Environmental Law', 'Justice', 'Remedies']
},
{
id: '4',
publicationTitle: 'Comparative Analysis of Judicial Systems',
publicationType: 'Research Report',
publicationYear: 2022,
citations: 23,
selfCitations: 1,
hIndex: 3,
downloads: 345,
views: 789,
countries: ['Canada', 'United States', 'Germany'],
institutions: ['McGill University', 'Harvard University', 'Max Planck Institute'],
researchAreas: ['Judicial Systems', 'Comparative Law', 'Justice']
}
]);
const [stats] = useState<AnalyticsStats>({
totalCitations: 1247,
hIndex: 12,
i10Index: 18,
totalPublications: 24,
averageCitations: 52,
totalDownloads: 5678,
totalViews: 12345,
thisYearCitations: 156
});
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]);
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 analytics...</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">Citation Analytics</h1>
<p className="mt-1 text-sm text-gray-500">
Track citations, impact metrics, and academic performance analytics
</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">
<Download className="w-4 h-4 mr-2" />
Export Report
</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">
<BarChart3 className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Citations</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalCitations}</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">
<Star className="w-6 h-6 text-green-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">H-Index</p>
<p className="text-2xl font-bold text-gray-900">{stats.hIndex}</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">I10-Index</p>
<p className="text-2xl font-bold text-gray-900">{stats.i10Index}</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">
<Eye className="w-6 h-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Views</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalViews.toLocaleString()}</p>
</div>
</div>
</div>
</div>
{/* Additional Stats */}
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Total Publications</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalPublications}</p>
</div>
<FileText className="w-8 h-8 text-blue-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">Average Citations</p>
<p className="text-2xl font-bold text-gray-900">{stats.averageCitations}</p>
</div>
<Target className="w-8 h-8 text-green-600" />
</div>
</div>
<div className="bg-white rounded-lg shadow p-6">
<div className="flex items-center justify-between">
<div>
<p className="text-sm font-medium text-gray-600">This Year Citations</p>
<p className="text-2xl font-bold text-gray-900">{stats.thisYearCitations}</p>
</div>
<Calendar className="w-8 h-8 text-purple-600" />
</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">
<PieChart className="w-5 h-5 text-blue-600 mr-3" />
<span className="text-sm font-medium">Citation Trends</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Globe className="w-5 h-5 text-green-600 mr-3" />
<span className="text-sm font-medium">Geographic Impact</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Activity className="w-5 h-5 text-yellow-600 mr-3" />
<span className="text-sm font-medium">Performance Metrics</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-purple-600 mr-3" />
<span className="text-sm font-medium">Impact Analysis</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 publications..."
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-3 gap-4">
<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">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="Journal Article">Journal Articles</option>
<option value="Book Chapter">Book Chapters</option>
<option value="Research Report">Research Reports</option>
<option value="Conference Paper">Conference Papers</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="citations">Citations</option>
<option value="year">Year</option>
<option value="title">Title</option>
<option value="downloads">Downloads</option>
<option value="views">Views</option>
</select>
</div>
</div>
)}
</div>
{/* Citation Data 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">Publication Analytics</h2>
<span className="text-sm text-gray-500">{citationData.length} publications</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{citationData.map((publication) => (
<div key={publication.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 bg-blue-100 text-blue-800">
{publication.publicationType}
</span>
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
{publication.publicationYear}
</span>
{publication.impactFactor && (
<span className="px-2 py-1 text-xs font-medium rounded-full bg-purple-100 text-purple-800">
IF: {publication.impactFactor}
</span>
)}
{publication.altmetricScore && (
<span className="px-2 py-1 text-xs font-medium rounded-full bg-orange-100 text-orange-800">
Altmetric: {publication.altmetricScore}
</span>
)}
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{publication.publicationTitle}</h3>
{publication.journal && (
<p className="text-gray-600 mb-3">{publication.journal}</p>
)}
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div>
<p className="text-sm text-gray-600">
<strong>Citations:</strong> {publication.citations} (Self: {publication.selfCitations})
</p>
<p className="text-sm text-gray-600">
<strong>H-Index:</strong> {publication.hIndex}
</p>
<p className="text-sm text-gray-600">
<strong>Downloads:</strong> {publication.downloads.toLocaleString()}
</p>
<p className="text-sm text-gray-600">
<strong>Views:</strong> {publication.views.toLocaleString()}
</p>
</div>
<div>
<p className="text-sm text-gray-600">
<strong>Countries:</strong> {publication.countries.length}
</p>
<p className="text-sm text-gray-600">
<strong>Institutions:</strong> {publication.institutions.length}
</p>
<p className="text-sm text-gray-600">
<strong>Research Areas:</strong> {publication.researchAreas.join(', ')}
</p>
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
{publication.researchAreas.map((area) => (
<span key={area} className="px-2 py-1 bg-gray-100 text-gray-700 text-xs rounded">
{area}
</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">
<Globe className="w-4 h-4" />
<span className="text-xs ml-1">{publication.countries.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">{publication.institutions.length}</span>
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<TrendingUp className="w-4 h-4" />
<span className="text-xs ml-1">{publication.citations}</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">
<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="p-2 text-gray-400 hover:text-gray-600">
<ExternalLink className="w-4 h-4" />
</button>
</div>
</div>
</div>
</div>
</div>
))}
</div>
</div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default JuristAnalytics;