 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 {
DollarSign,
Plus,
Edit,
Trash2,
Eye,
Download,
Share2,
Bookmark,
Star,
Calendar,
Users,
TrendingUp,
CheckCircle,
Clock,
AlertCircle,
Filter,
Search,
ChevronDown,
ChevronUp,
ExternalLink,
Save,
Upload,
BarChart3,
Award,
Globe,
FileText,
MessageSquare,
ThumbsUp,
ThumbsDown,
Zap,
Target,
Building,
CreditCard
} from 'lucide-react';
interface Funding {
id: string;
title: string;
description: string;
type: 'research_grant' | 'fellowship' | 'scholarship' | 'contract' | 'donation' | 'partnership';
status: 'draft' | 'submitted' | 'under_review' | 'approved' | 'funded' | 'rejected' | 'completed';
priority: 'low' | 'medium' | 'high' | 'urgent';
funder: string;
funderType: 'government' | 'foundation' | 'university' | 'private' | 'international';
amount: number;
requestedAmount: number;
duration: number;
startDate?: string;
endDate?: string;
submissionDate: string;
decisionDate?: string;
principalInvestigator: string;
coInvestigators: string[];
researchArea: string[];
objectives: string[];
deliverables: string[];
budget: BudgetItem[];
documents: string[];
notes: string;
tags: string[];
}
interface BudgetItem {
id: string;
category: string;
description: string;
amount: number;
justification: string;
}
interface FundingStats {
totalFunding: number;
active: number;
completed: number;
pending: number;
totalAmount: number;
totalRequested: number;
successRate: number;
thisYearFunding: number;
}
const JuristFunding: 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 [selectedFunderType, setSelectedFunderType] = useState<string>('all');
const [sortBy, setSortBy] = useState<string>('date');
const [showFilters, setShowFilters] = useState(false);
const [showNewFundingModal, setShowNewFundingModal] = useState(false);
const [selectedFunding, setSelectedFunding] = useState<Funding | null>(null);
// Mock data - replace with actual API calls
const [fundings] = useState<Funding[]>([
{
id: '1',
title: 'Constitutional Rights in Digital Age Research Grant',
description: 'Comprehensive study of constitutional rights implications in emerging digital technologies.',
type: 'research_grant',
status: 'funded',
priority: 'high',
funder: 'Social Sciences and Humanities Research Council (SSHRC)',
funderType: 'government',
amount: 250000,
requestedAmount: 250000,
duration: 36,
startDate: '2024-09-01',
endDate: '2027-08-31',
submissionDate: '2024-03-15',
decisionDate: '2024-06-15',
principalInvestigator: 'Dr. Marie Dubois',
coInvestigators: ['Prof. Jean-Luc Martin', 'Dr. Sarah Chen'],
researchArea: ['Constitutional Law', 'Digital Rights', 'Technology Law'],
objectives: [
'Analyze constitutional implications of AI and digital technologies',
'Develop legal frameworks for digital rights protection',
'Publish comprehensive research findings'
],
deliverables: [
'Research database of digital rights cases',
'Policy recommendations report',
'Academic publications (minimum 8)',
'International conference'
],
budget: [
{
id: '1',
category: 'Personnel',
description: 'Research assistants and graduate students',
amount: 120000,
justification: 'Required for data collection and analysis'
},
{
id: '2',
category: 'Travel',
description: 'International research visits and conferences',
amount: 45000,
justification: 'Comparative research across jurisdictions'
},
{
id: '3',
category: 'Equipment',
description: 'Research software and databases',
amount: 25000,
justification: 'Legal research databases and analysis tools'
}
],
documents: ['grant-proposal.pdf', 'budget-justification.pdf', 'ethics-approval.pdf'],
notes: 'Successfully funded. Project implementation starting September 2024.',
tags: ['Constitutional Law', 'Digital Rights', 'Research Grant', 'SSHRC']
},
{
id: '2',
title: 'Environmental Justice Fellowship',
description: 'Fellowship to study environmental justice and legal remedies.',
type: 'fellowship',
status: 'under_review',
priority: 'medium',
funder: 'Environmental Law Foundation',
funderType: 'foundation',
amount: 0,
requestedAmount: 75000,
duration: 12,
submissionDate: '2024-05-20',
principalInvestigator: 'Dr. Marie Dubois',
coInvestigators: [],
researchArea: ['Environmental Law', 'Justice', 'Remedies'],
objectives: [
'Study environmental justice mechanisms',
'Analyze legal remedies for environmental harm',
'Develop policy recommendations'
],
deliverables: [
'Research report on environmental justice',
'Policy recommendations',
'Academic publication'
],
budget: [
{
id: '4',
category: 'Stipend',
description: 'Research fellowship stipend',
amount: 60000,
justification: 'Full-time research support'
},
{
id: '5',
category: 'Research Expenses',
description: 'Travel and research materials',
amount: 15000,
justification: 'Field research and data collection'
}
],
documents: ['fellowship-application.pdf', 'research-proposal.pdf'],
notes: 'Application under review. Decision expected in August 2024.',
tags: ['Environmental Law', 'Fellowship', 'Justice', 'Research']
},
{
id: '3',
title: 'International Legal Systems Partnership',
description: 'Partnership grant for comparative legal systems research.',
type: 'partnership',
status: 'submitted',
priority: 'low',
funder: 'International Legal Research Institute',
funderType: 'international',
amount: 0,
requestedAmount: 180000,
duration: 24,
submissionDate: '2024-06-10',
principalInvestigator: 'Dr. Marie Dubois',
coInvestigators: ['Prof. Elena Petrova', 'Dr. Alex Rodriguez'],
researchArea: ['Comparative Law', 'International Law', 'Legal Systems'],
objectives: [
'Compare legal systems across jurisdictions',
'Identify best practices in legal frameworks',
'Develop international legal standards'
],
deliverables: [
'Comparative analysis report',
'Best practices guide',
'International conference',
'Academic publications'
],
budget: [
{
id: '6',
category: 'International Travel',
description: 'Research visits to partner institutions',
amount: 80000,
justification: 'Required for comparative research'
},
{
id: '7',
category: 'Personnel',
description: 'International research team',
amount: 70000,
justification: 'Multi-jurisdictional research support'
},
{
id: '8',
category: 'Conference',
description: 'International research conference',
amount: 30000,
justification: 'Knowledge dissemination and networking'
}
],
documents: ['partnership-proposal.pdf', 'budget-details.pdf'],
notes: 'Proposal submitted. Awaiting review process.',
tags: ['Comparative Law', 'International', 'Partnership', 'Research']
}
]);
const [stats] = useState<FundingStats>({
totalFunding: 8,
active: 3,
completed: 2,
pending: 3,
totalAmount: 325000,
totalRequested: 505000,
successRate: 62.5,
thisYearFunding: 250000
});
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 'funded': return 'bg-green-100 text-green-800';
case 'approved': return 'bg-blue-100 text-blue-800';
case 'under_review': return 'bg-yellow-100 text-yellow-800';
case 'submitted': return 'bg-purple-100 text-purple-800';
case 'draft': return 'bg-gray-100 text-gray-800';
case 'rejected': return 'bg-red-100 text-red-800';
case 'completed': return 'bg-teal-100 text-teal-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getTypeColor = (type: string) => {
switch (type) {
case 'research_grant': return 'bg-blue-100 text-blue-800';
case 'fellowship': return 'bg-purple-100 text-purple-800';
case 'scholarship': return 'bg-green-100 text-green-800';
case 'contract': return 'bg-orange-100 text-orange-800';
case 'donation': return 'bg-red-100 text-red-800';
case 'partnership': return 'bg-teal-100 text-teal-800';
default: return 'bg-gray-100 text-gray-800';
}
};
const getFunderTypeColor = (type: string) => {
switch (type) {
case 'government': return 'bg-blue-100 text-blue-800';
case 'foundation': return 'bg-green-100 text-green-800';
case 'university': return 'bg-purple-100 text-purple-800';
case 'private': return 'bg-orange-100 text-orange-800';
case 'international': 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';
}
};
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 funding information...</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">Research Funding</h1>
<p className="mt-1 text-sm text-gray-500">
Manage research grants, funding applications, and financial resources
</p>
</div>
<div className="flex items-center space-x-4">
<button
onClick={() => setShowNewFundingModal(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 Funding Application
</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">
<DollarSign className="w-6 h-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Total Funding</p>
<p className="text-2xl font-bold text-gray-900">{stats.totalFunding}</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">Active</p>
<p className="text-2xl font-bold text-gray-900">{stats.active}</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">Total Amount</p>
<p className="text-2xl font-bold text-gray-900">${(stats.totalAmount / 1000).toFixed(0)}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">
<Target className="w-6 h-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm font-medium text-gray-600">Success Rate</p>
<p className="text-2xl font-bold text-gray-900">{stats.successRate}%</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">
<Building className="w-5 h-5 text-blue-600 mr-3" />
<span className="text-sm font-medium">Find Funders</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-green-600 mr-3" />
<span className="text-sm font-medium">Draft Proposal</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">Track Deadlines</span>
</button>
<button className="flex items-center p-4 border border-gray-200 rounded-lg hover:bg-gray-50 transition-colors">
<CreditCard className="w-5 h-5 text-purple-600 mr-3" />
<span className="text-sm font-medium">Budget Planning</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 funding..."
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="funded">Funded</option>
<option value="approved">Approved</option>
<option value="under_review">Under Review</option>
<option value="submitted">Submitted</option>
<option value="draft">Draft</option>
<option value="rejected">Rejected</option>
<option value="completed">Completed</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="research_grant">Research Grant</option>
<option value="fellowship">Fellowship</option>
<option value="scholarship">Scholarship</option>
<option value="contract">Contract</option>
<option value="donation">Donation</option>
<option value="partnership">Partnership</option>
</select>
</div>
<div>
<label className="block text-sm font-medium text-gray-700 mb-2">Funder Type</label>
<select
value={selectedFunderType}
onChange={(e) => setSelectedFunderType(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 Funder Types</option>
<option value="government">Government</option>
<option value="foundation">Foundation</option>
<option value="university">University</option>
<option value="private">Private</option>
<option value="international">International</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="amount">Amount</option>
<option value="status">Status</option>
<option value="priority">Priority</option>
</select>
</div>
</div>
)}
</div>
{/* Funding 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 Funding</h2>
<span className="text-sm text-gray-500">{fundings.length} funding applications</span>
</div>
</div>
<div className="p-6">
<div className="space-y-6">
{fundings.map((funding) => (
<div key={funding.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(funding.status)}`}>
{funding.status.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getTypeColor(funding.type)}`}>
{funding.type.replace('_', ' ').toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getFunderTypeColor(funding.funderType)}`}>
{funding.funderType.toUpperCase()}
</span>
<span className={`px-2 py-1 text-xs font-medium rounded-full ${getPriorityColor(funding.priority)}`}>
{funding.priority.toUpperCase()}
</span>
</div>
<h3 className="text-lg font-semibold text-gray-900 mb-2">{funding.title}</h3>
<p className="text-gray-700 mb-3">{funding.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>Funder:</strong> {funding.funder}
</p>
<p className="text-sm text-gray-600">
<strong>PI:</strong> {funding.principalInvestigator}
</p>
{funding.coInvestigators.length > 0 && (
<p className="text-sm text-gray-600">
<strong>Co-Investigators:</strong> {funding.coInvestigators.join(', ')}
</p>
)}
<p className="text-sm text-gray-600">
<strong>Duration:</strong> {funding.duration} months
</p>
</div>
<div>
<p className="text-sm text-gray-600">
<strong>Requested:</strong> ${funding.requestedAmount.toLocaleString()}
</p>
<p className="text-sm text-gray-600">
<strong>Awarded:</strong> ${funding.amount.toLocaleString()}
</p>
<p className="text-sm text-gray-600">
<strong>Submitted:</strong> {new Date(funding.submissionDate).toLocaleDateString()}
</p>
{funding.decisionDate && (
<p className="text-sm text-gray-600">
<strong>Decision:</strong> {new Date(funding.decisionDate).toLocaleDateString()}
</p>
)}
</div>
</div>
<div className="flex items-center space-x-2 mb-4">
{funding.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">
<FileText className="w-4 h-4" />
<span className="text-xs ml-1">{funding.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">${funding.amount.toLocaleString()}</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">{funding.coInvestigators.length + 1}</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">
<Download 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 JuristFunding;