 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/admin/ |
import React, { useState, useEffect } from 'react';
import { useSession } from 'next-auth/react';
import { useRouter } from 'next/router';
import LayoutWithSidebar from '@/components/LayoutWithSidebar';
import { Plus, Search, Filter, Eye, Edit, Users, Calendar, DollarSign, AlertTriangle, CheckCircle, Clock, XCircle } from 'lucide-react';
interface LegalCase {
id: string;
title: string;
description: string;
caseNumber?: string;
caseType: string;
status: string;
jurisdiction: string;
court?: string;
priority: string;
budget?: number;
expectedDuration?: number;
filingDate?: string;
applicationDeadline?: string;
isAcceptingApplications: boolean;
createdAt: string;
leadLawyer: {
id: string;
name: string;
email: string;
title?: string;
specialization?: string;
};
creator: {
id: string;
name: string;
email: string;
};
_count: {
registrations: number;
caseAssignments: number;
caseUpdates: number;
};
caseUpdates: Array<{
id: string;
title: string;
updateType: string;
isPublic: boolean;
createdAt: string;
}>;
}
const CaseManagementDashboard = () => {
const { data: session, status } = useSession();
const router = useRouter();
const [cases, setCases] = useState<LegalCase[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [searchTerm, setSearchTerm] = useState('');
const [statusFilter, setStatusFilter] = useState('all');
const [priorityFilter, setPriorityFilter] = useState('all');
useEffect(() => {
console.log('useEffect triggered - status:', status, 'session:', session);
if (status === 'loading') {
console.log('Still loading...');
return;
}
if (!session) {
console.log('No session found - redirecting to home');
setError('No session found. Please log in.');
router.push('/');
return;
}
if (!['SUPERADMIN', 'ADMIN'].includes(session.user.role)) {
console.log('User role not authorized:', session.user.role, '- redirecting to home');
setError(`Access denied. Your role (${session.user.role}) is not authorized.`);
router.push('/');
return;
}
console.log('User authorized, fetching cases...');
fetchCases();
}, [session, status, router]);
const fetchCases = async () => {
try {
setError(null);
console.log('Fetching cases...');
const response = await fetch('/api/admin/cases');
console.log('Response status:', response.status);
if (response.ok) {
const data = await response.json();
console.log('Cases data:', data);
setCases(data.cases || []);
} else {
console.error('Failed to fetch cases');
const errorText = await response.text();
console.error('Error response:', errorText);
setError(`Failed to fetch cases: ${response.status} ${response.statusText}`);
}
} catch (error) {
console.error('Error fetching cases:', error);
setError(`Network error: ${error instanceof Error ? error.message : 'Unknown error'}`);
} finally {
setLoading(false);
}
};
const handleCreateCase = () => {
try {
console.log('Create New Case button clicked');
router.push('/admin/cases/create');
} catch (error) {
console.error('Error navigating to create case:', error);
setError('Failed to navigate to create case page');
}
};
const handleViewCase = (caseId: string) => {
try {
console.log('View Details button clicked for case:', caseId);
router.push(`/admin/cases/${caseId}`);
} catch (error) {
console.error('Error navigating to case details:', error);
setError('Failed to navigate to case details');
}
};
const handleEditCase = (caseId: string) => {
try {
console.log('Edit Case button clicked for case:', caseId);
router.push(`/admin/cases/${caseId}/edit`);
} catch (error) {
console.error('Error navigating to edit case:', error);
setError('Failed to navigate to edit case page');
}
};
const getStatusIcon = (status: string) => {
switch (status) {
case 'active': return <CheckCircle className="h-4 w-4 text-green-500" />;
case 'pending': return <Clock className="h-4 w-4 text-yellow-500" />;
case 'closed': return <XCircle className="h-4 w-4 text-gray-500" />;
case 'suspended': return <AlertTriangle className="h-4 w-4 text-red-500" />;
default: return <Clock className="h-4 w-4 text-gray-400" />;
}
};
const getPriorityColor = (priority: string) => {
switch (priority) {
case 'urgent': return 'bg-red-100 text-red-800 border-red-200';
case 'high': return 'bg-orange-100 text-orange-800 border-orange-200';
case 'medium': return 'bg-blue-100 text-blue-800 border-blue-200';
case 'low': return 'bg-gray-100 text-gray-800 border-gray-200';
default: return 'bg-gray-100 text-gray-800 border-gray-200';
}
};
const filteredCases = cases.filter(caseItem => {
const matchesSearch = caseItem.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
caseItem.caseNumber?.toLowerCase().includes(searchTerm.toLowerCase()) ||
caseItem.leadLawyer.name.toLowerCase().includes(searchTerm.toLowerCase());
const matchesStatus = statusFilter === 'all' || caseItem.status === statusFilter;
const matchesPriority = priorityFilter === 'all' || caseItem.priority === priorityFilter;
return matchesSearch && matchesStatus && matchesPriority;
});
if (loading) {
return (
<LayoutWithSidebar>
<div className="p-8">
<div className="max-w-7xl mx-auto">
<div className="animate-pulse space-y-4">
<div className="h-8 bg-gray-200 rounded w-1/4"></div>
<div className="h-64 bg-gray-200 rounded"></div>
</div>
</div>
</div>
</LayoutWithSidebar>
);
}
return (
<LayoutWithSidebar>
<div className="p-6">
{/* Error Display */}
{error && (
<div className="mb-6 bg-red-50 border border-red-200 rounded-lg p-4">
<div className="flex items-center">
<AlertTriangle className="h-5 w-5 text-red-400 mr-2" />
<div className="text-sm text-red-800">
<strong>Error:</strong> {error}
<button
onClick={() => setError(null)}
className="ml-2 text-red-600 hover:text-red-800 underline"
>
Dismiss
</button>
</div>
</div>
</div>
)}
{/* Header */}
<div className="mb-6">
<div className="flex items-center justify-between">
<div>
<h1 className="text-2xl font-bold text-gray-900">Case Management</h1>
<p className="text-gray-600 mt-1">Manage all legal cases and applications</p>
</div>
<button
onClick={handleCreateCase}
className="inline-flex items-center px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
>
<Plus className="h-4 w-4 mr-2" />
Create New Case
</button>
</div>
</div>
{/* Filters */}
<div className="bg-white rounded-lg shadow-sm p-6 mb-6">
<div className="flex flex-wrap gap-4 items-center">
<div className="flex-1 min-w-64">
<div className="relative">
<Search className="h-4 w-4 absolute left-3 top-3 text-gray-400" />
<input
type="text"
placeholder="Search cases, numbers, or lawyers..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
/>
</div>
</div>
<div className="flex gap-3">
<select
value={statusFilter}
onChange={(e) => setStatusFilter(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="all">All Status</option>
<option value="active">Active</option>
<option value="pending">Pending</option>
<option value="closed">Closed</option>
<option value="suspended">Suspended</option>
</select>
<select
value={priorityFilter}
onChange={(e) => setPriorityFilter(e.target.value)}
className="px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
>
<option value="all">All Priority</option>
<option value="urgent">Urgent</option>
<option value="high">High</option>
<option value="medium">Medium</option>
<option value="low">Low</option>
</select>
</div>
</div>
</div>
{/* Stats Cards */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-6">
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center">
<div className="p-2 bg-blue-100 rounded-lg">
<CheckCircle className="h-6 w-6 text-blue-600" />
</div>
<div className="ml-4">
<p className="text-sm text-gray-600">Total Cases</p>
<p className="text-2xl font-bold text-gray-900">{cases.length}</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center">
<div className="p-2 bg-green-100 rounded-lg">
<Users className="h-6 w-6 text-green-600" />
</div>
<div className="ml-4">
<p className="text-sm text-gray-600">Active Cases</p>
<p className="text-2xl font-bold text-gray-900">
{cases.filter(c => c.status === 'active').length}
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center">
<div className="p-2 bg-orange-100 rounded-lg">
<Calendar className="h-6 w-6 text-orange-600" />
</div>
<div className="ml-4">
<p className="text-sm text-gray-600">Applications</p>
<p className="text-2xl font-bold text-gray-900">
{cases.reduce((sum, c) => sum + c._count.registrations, 0)}
</p>
</div>
</div>
</div>
<div className="bg-white rounded-lg shadow-sm p-6">
<div className="flex items-center">
<div className="p-2 bg-purple-100 rounded-lg">
<AlertTriangle className="h-6 w-6 text-purple-600" />
</div>
<div className="ml-4">
<p className="text-sm text-gray-600">High Priority</p>
<p className="text-2xl font-bold text-gray-900">
{cases.filter(c => c.priority === 'high' || c.priority === 'urgent').length}
</p>
</div>
</div>
</div>
</div>
{/* Cases List */}
<div className="bg-white rounded-lg shadow-sm overflow-hidden">
<div className="px-6 py-4 border-b border-gray-200">
<h2 className="text-lg font-semibold text-gray-900">
Cases ({filteredCases.length})
</h2>
</div>
{filteredCases.length === 0 ? (
<div className="p-12 text-center">
<div className="max-w-sm mx-auto">
<div className="p-3 bg-gray-100 rounded-full w-16 h-16 mx-auto mb-4 flex items-center justify-center">
<Search className="h-8 w-8 text-gray-400" />
</div>
<h3 className="text-lg font-medium text-gray-900 mb-2">No cases found</h3>
<p className="text-gray-500">
{searchTerm || statusFilter !== 'all' || priorityFilter !== 'all'
? 'Try adjusting your search or filters'
: 'Create your first case to get started'
}
</p>
</div>
</div>
) : (
<div className="divide-y divide-gray-200">
{filteredCases.map((caseItem) => (
<div key={caseItem.id} className="p-6 hover:bg-gray-50">
<div className="flex items-start justify-between">
<div className="flex-1">
<div className="flex items-center gap-3 mb-2">
{getStatusIcon(caseItem.status)}
<h3 className="text-lg font-semibold text-gray-900">
{caseItem.title}
</h3>
{caseItem.caseNumber && (
<span className="text-sm text-gray-500 bg-gray-100 px-2 py-1 rounded">
{caseItem.caseNumber}
</span>
)}
<span className={`text-xs px-2 py-1 rounded-full border ${getPriorityColor(caseItem.priority)}`}>
{caseItem.priority.toUpperCase()}
</span>
</div>
<p className="text-gray-600 mb-3 line-clamp-2">
{caseItem.description}
</p>
<div className="flex flex-wrap gap-4 text-sm text-gray-500">
<div className="flex items-center gap-1">
<Users className="h-4 w-4" />
Lead: {caseItem.leadLawyer.name}
</div>
<div className="flex items-center gap-1">
<Calendar className="h-4 w-4" />
{caseItem.jurisdiction} • {caseItem.caseType.replace('_', ' ').toUpperCase()}
</div>
<div className="flex items-center gap-1">
<Users className="h-4 w-4" />
{caseItem._count.registrations} applications
</div>
{caseItem.budget && (
<div className="flex items-center gap-1">
<DollarSign className="h-4 w-4" />
${caseItem.budget.toLocaleString()}
</div>
)}
</div>
</div>
<div className="flex gap-2 ml-4">
<button
onClick={() => handleViewCase(caseItem.id)}
className="p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
title="View Details"
>
<Eye className="h-4 w-4" />
</button>
<button
onClick={() => handleEditCase(caseItem.id)}
className="p-2 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded-lg transition-colors"
title="Edit Case"
>
<Edit className="h-4 w-4" />
</button>
</div>
</div>
</div>
))}
</div>
)}
</div>
</div>
</LayoutWithSidebar>
);
};
export default CaseManagementDashboard;