 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 {
Lightbulb,
Plus,
Edit,
Trash2,
Eye,
Save,
Share2,
Bookmark,
Star,
Calendar,
Users,
TrendingUp,
CheckCircle,
Clock,
AlertCircle,
Filter,
Search,
ChevronDown,
ChevronUp,
ExternalLink,
Upload,
BarChart3,
Award,
Globe,
Brain,
Target,
Zap,
Layers,
GitBranch,
FileText,
MessageSquare,
ThumbsUp,
ThumbsDown
} from 'lucide-react';
interface Theory {
id: string;
title: string;
description: string;
abstract: string;
author: string;
coAuthors: string[];
status: 'concept' | 'development' | 'review' | 'published' | 'archived';
category: 'constitutional' | 'criminal' | 'civil' | 'commercial' | 'international' | 'environmental' | 'technology' | 'human_rights';
complexity: 'basic' | 'intermediate' | 'advanced' | 'expert';
creationDate: string;
lastModified: string;
version: string;
citations: number;
followers: number;
isPublic: boolean;
isBookmarked: boolean;
tags: string[];
relatedTheories: string[];
documents: string[];
comments: TheoryComment[];
}
interface TheoryComment {
id: string;
author: string;
content: string;
date: string;
rating: number;
isHelpful: boolean;
}
interface TheoryStats {
totalTheories: number;
published: number;
inDevelopment: number;
concepts: number;
totalCitations: number;
totalFollowers: number;
averageRating: number;
thisYearTheories: number;
}
const JuristTheory: 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 [selectedCategory, setSelectedCategory] = useState<string>('all');
const [selectedComplexity, setSelectedComplexity] = useState<string>('all');
const [sortBy, setSortBy] = useState<string>('date');
const [showFilters, setShowFilters] = useState(false);
const [showNewTheoryModal, setShowNewTheoryModal] = useState(false);
const [selectedTheory, setSelectedTheory] = useState<Theory | null>(null);
// Mock data - replace with actual API calls
const [theories] = useState<Theory[]>([
{
id: '1',
title: 'The Adaptive Constitution Framework',
description: 'A dynamic approach to constitutional interpretation that adapts to societal changes while maintaining core principles.',
abstract: 'This theory proposes a new framework for constitutional interpretation that balances stability with adaptability, addressing the challenges of modern governance.',
author: 'Dr. Marie Dubois',
coAuthors: ['Prof. Jean-Luc Martin', 'Dr. Sarah Chen'],
status: 'published',
category: 'constitutional',
complexity: 'advanced',
creationDate: '2023-06-15',
lastModified: '2024-03-20',
version: '2.1',
citations: 89,
followers: 156,
isPublic: true,
isBookmarked: true,
tags: ['Constitutional Law', 'Interpretation', 'Adaptation', 'Governance'],
relatedTheories: ['Living Constitution Theory', 'Originalism'],
documents: ['adaptive-constitution-framework.pdf', 'case-studies.pdf'],
comments: [
{
id: '1',
author: 'Prof. Robert Wilson',
content: 'Excellent framework that addresses the gap between traditional and modern approaches.',
date: '2024-03-25',
rating: 5,
isHelpful: true
}
]
},
{
id: '2',
title: 'Digital Rights Equilibrium Theory',
description: 'Balancing individual privacy rights with technological advancement in the digital age.',
abstract: 'A comprehensive theory addressing the tension between digital innovation and fundamental rights protection.',
author: 'Dr. Marie Dubois',
coAuthors: ['Prof. Michael Johnson'],
status: 'development',
category: 'technology',
complexity: 'intermediate',
creationDate: '2024-01-10',
lastModified: '2024-06-15',
version: '1.3',
citations: 0,
followers: 23,
isPublic: false,
isBookmarked: false,
tags: ['Digital Rights', 'Privacy', 'Technology Law', 'Human Rights'],
relatedTheories: ['Right to be Forgotten', 'Data Protection'],
documents: ['digital-rights-draft.pdf'],
comments: []
},
{
id: '3',
title: 'Environmental Justice Procedural Framework',
description: 'Procedural mechanisms for ensuring environmental justice in legal proceedings.',
abstract: 'A procedural framework that ensures fair representation and access to justice in environmental cases.',
author: 'Dr. Marie Dubois',
coAuthors: ['Dr. Sarah Chen', 'Prof. David Wilson'],
status: 'review',
category: 'environmental',
complexity: 'intermediate',
creationDate: '2024-02-20',
lastModified: '2024-06-10',
version: '1.0',
citations: 0,
followers: 45,
isPublic: true,
isBookmarked: true,
tags: ['Environmental Law', 'Procedural Justice', 'Access to Justice'],
relatedTheories: ['Environmental Democracy', 'Procedural Fairness'],
documents: ['environmental-justice-framework.pdf'],
comments: []
},
{
id: '4',
title: 'Cross-Border Legal Harmonization Model',
description: 'A model for harmonizing legal standards across jurisdictions while respecting local autonomy.',
abstract: 'Proposes a flexible model for legal harmonization that balances global standards with local legal traditions.',
author: 'Dr. Marie Dubois',
coAuthors: [],
status: 'concept',
category: 'international',
complexity: 'expert',
creationDate: '2024-05-01',
lastModified: '2024-06-20',
version: '0.5',
citations: 0,
followers: 12,
isPublic: false,
isBookmarked: false,
tags: ['International Law', 'Harmonization', 'Legal Systems', 'Globalization'],
relatedTheories: ['Legal Pluralism', 'Global Governance'],
documents: ['harmonization-concept.pdf'],
comments: []
}
]);
const [stats] = useState<TheoryStats>({
totalTheories: 15,
published: 8,
inDevelopment: 4,
concepts: 3,
totalCitations: 342,
totalFollowers: 567,
averageRating: 4.2,
thisYearTheories: 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 'published': return 'bg-green-100 text-green-800';
case 'review': return 'bg-yellow-100 text-yellow-800';
case 'development': return 'bg-blue-100 text-blue-800';
case 'concept': return 'bg-purple-100 text-purple-800';
case 'archived': return 'bg-gray-100 text-gray-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getCategoryColor = (category: string) => {
switch (category) {
case 'constitutional': return 'bg-red-100 text-red-800';
case 'criminal': return 'bg-orange-100 text-orange-800';
case 'civil': return 'bg-blue-100 text-blue-800';
case 'commercial': return 'bg-green-100 text-green-800';
case 'international': return 'bg-purple-100 text-purple-800';
case 'environmental': return 'bg-teal-100 text-teal-800';
case 'technology': return 'bg-indigo-100 text-indigo-800';
case 'human_rights': return 'bg-pink-100 text-pink-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getComplexityColor = (complexity: string) => {
switch (complexity) {
case 'basic': return 'bg-green-100 text-green-800';
case 'intermediate': return 'bg-yellow-100 text-yellow-800';
case 'advanced': return 'bg-orange-100 text-orange-800';
case 'expert': 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 theories...</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">Theory Development</h1>
<p className="mt-1 text-sm text-gray-500">
Develop and manage legal theories, frameworks, and academic concepts
</p>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowNewTheoryModal(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 Theory
</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">
<Lightbulb className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Theories</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalTheories}</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">Published</p>
<p className="text-2xl font-bold text-gray-900">{stats.published}</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">
<Users className="w-6 h-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Followers</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalFollowers}</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">
<Brain className="w-5 h-5 text-blue-600 mr-3" />
<span className="text-sm font-medium">Concept Development</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">Theory Validation</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">Collaboration</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<Layers className="w-5 h-5 text-purple-600 mr-3" />
<span className="text-sm font-medium">Framework 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 theories..."
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="published">Published</option>
<option value="review">Under Review</option>
<option value="development">In Development</option>
<option value="concept">Concept</option>
<option value="archived">Archived</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Category</label>
<select
value={selectedCategory}
onChange={(e) => setSelectedCategory(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 Categories</option>
<option value="constitutional">Constitutional</option>
<option value="criminal">Criminal</option>
<option value="civil">Civil</option>
<option value="commercial">Commercial</option>
<option value="international">International</option>
<option value="environmental">Environmental</option>
<option value="technology">Technology</option>
<option value="human_rights">Human Rights</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Complexity</label>
<select
value={selectedComplexity}
onChange={(e) => setSelectedComplexity(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 Levels</option>
<option value="basic">Basic</option>
<option value="intermediate">Intermediate</option>
<option value="advanced">Advanced</option>
<option value="expert">Expert</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="citations">Citations</option>
<option value="followers">Followers</option>
<option value="status">Status</option>
</select>
</div>
</div>
)}
</div>
{/* Theories 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 Theories</h2>
<span className="text-sm text-gray-500">{theories.length} theories</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{theories.map((theory) => (
<div key={theory.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(theory.status)}`}>
{theory.status.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getCategoryColor(theory.category)}`}>
{theory.category.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getComplexityColor(theory.complexity)}`}>
{theory.complexity.toUpperCase()}
</span>
{theory.isPublic && (
<span className="px-2 py-1 text-xs font-medium rounded-full bg-green-100 text-green-800">
PUBLIC
</span>
)}
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{theory.title}</h3>
<p className="text-gray-700 mb-3">{theory.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>Author:</strong> {theory.author}
</p>
{theory.coAuthors.length > 0 && (
<p className="text-sm text-gray-600">
<strong>Co-authors:</strong> {theory.coAuthors.join(', ')}
</p>
)}
<p className="text-sm text-gray-600">
<strong>Version:</strong> {theory.version}
</p>
<p className="text-sm text-gray-600">
<strong>Created:</strong> {new Date(theory.creationDate).toLocaleDateString()}
</p>
</div>
<div>
<p className="text-sm text-gray-600">
<strong>Citations:</strong> {theory.citations}
</p>
<p className="text-sm text-gray-600">
<strong>Followers:</strong> {theory.followers}
</p>
<p className="text-sm text-gray-600">
<strong>Last Modified:</strong> {new Date(theory.lastModified).toLocaleDateString()}
</p>
<p className="text-sm text-gray-600">
<strong>Documents:</strong> {theory.documents.length}
</p>
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
{theory.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">{theory.comments.length}</span>
</button>
<button className="p-2 text-gray-400 hover:text-gray-600">
<GitBranch className="w-4 h-4" />
<span className="text-xs ml-1">{theory.relatedTheories.length}</span>
</button>
</div>
<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 ${theory.isBookmarked ? 'text-blue-600 fill-current' : ''}`} />
</button>
<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">
<Share2 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 JuristTheory;