 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/public_html/src/pages/ |
import React, { useState, useEffect } from 'react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import LiveCaseFeed from '../components/LiveCaseFeed';
import OpenGraphMeta from '../components/OpenGraphMeta';
import StructuredData, { createWebSiteStructuredData, createBreadcrumbStructuredData } from '../components/StructuredData';
import { Users, DollarSign, Award, BarChart3, BookOpen } from 'lucide-react';
interface LiveCasesStats {
totalCases: number;
activeCases: number;
urgentCases: number;
totalValue: number;
averageCaseValue: number;
totalLawyers: number;
totalClients: number;
successRate: number;
averageResponseTime: number;
topCategories: Array<{ name: string; count: number; percentage: number }>;
topJurisdictions: Array<{ name: string; count: number; percentage: number }>;
recentActivity: Array<{ type: string; description: string; timestamp: string }>;
}
const LiveCasesPage: React.FC = () => {
const [stats, setStats] = useState<LiveCasesStats | null>(null);
const [loading, setLoading] = useState(true);
const [activeTab, setActiveTab] = useState<'overview' | 'cases' | 'analytics'>('overview');
useEffect(() => {
fetchLiveCasesStats();
}, []);
const fetchLiveCasesStats = async () => {
try {
setLoading(true);
const response = await fetch('/api/live-cases/stats');
if (response.ok) {
const data = await response.json();
setStats(data);
}
} catch (error) {
console.error('Error fetching stats:', error);
} finally {
setLoading(false);
}
};
// Dashboard-style stat card
const StatCard = ({ icon: Icon, title, value, subtitle }: {
icon: any;
title: string;
value: string | number;
subtitle?: string;
}) => (
<div className="bg-white rounded-lg shadow-sm border p-6 flex items-center gap-4 min-w-[180px]">
<div className="p-3 rounded-lg bg-blue-50 text-blue-700 flex items-center justify-center">
<Icon className="h-6 w-6" />
</div>
<div>
<div className="text-xs text-gray-500 font-medium uppercase mb-1">{title}</div>
<div className="text-2xl font-bold text-gray-900">{value}</div>
{subtitle && <div className="text-xs text-gray-400 mt-1">{subtitle}</div>}
</div>
</div>
);
return (
<>
<OpenGraphMeta
title="Live Cases - Next-Gen Legal Marketplace - Liberté Même en Prison"
description="Experience the future of legal case management with real-time analytics, AI-powered insights, and cutting-edge design. Discover opportunities in the most advanced legal marketplace."
url="/live-cases"
type="website"
tags={[
'legal cases',
'lawyers',
'legal marketplace',
'justice',
'legal services',
'case management',
'legal analytics',
'case tracking',
'AI legal',
'next-gen legal'
]}
image="/images/logo.png"
/>
<StructuredData
type="website"
data={createWebSiteStructuredData()}
/>
<StructuredData
type="breadcrumb"
data={createBreadcrumbStructuredData([
{ name: 'Home', url: '/' },
{ name: 'Live Cases', url: '/live-cases' }
])}
/>
<LayoutWithSidebar>
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
{/* Simple Header */}
<div className="mb-8">
<h1 className="text-3xl font-bold text-gray-900 mb-2">Live Cases</h1>
<p className="text-gray-600 text-lg max-w-2xl">
Experience the future of legal case management. Real-time analytics, AI-powered insights, and a professional legal marketplace.
</p>
</div>
{/* Tabs */}
<div className="mb-8">
<nav className="flex space-x-0 bg-white rounded-lg border shadow-sm w-fit overflow-hidden">
{[
{ id: 'overview', label: 'Overview' },
{ id: 'cases', label: 'All Cases' },
{ id: 'analytics', label: 'Analytics' }
].map((tab, idx, arr) => (
<button
key={tab.id}
onClick={() => setActiveTab(tab.id as any)}
className={`px-8 py-2 font-semibold text-sm transition-colors border-0 focus:outline-none focus:z-10
${activeTab === tab.id
? 'bg-blue-600 text-white shadow-sm'
: 'bg-white text-blue-700 hover:bg-blue-50'}
${idx === 0 ? 'rounded-l-lg' : ''}
${idx === arr.length - 1 ? 'rounded-r-lg' : ''}
`}
style={{ borderRight: idx < arr.length - 1 ? '1px solid #e5e7eb' : undefined }}
>
{tab.label}
</button>
))}
</nav>
</div>
{/* Content */}
{activeTab === 'overview' && (
<>
{/* Stats Row */}
<div className="flex flex-wrap gap-6 mb-10">
<StatCard
icon={BookOpen}
title="Total Cases"
value={stats ? stats.totalCases : '—'}
subtitle="Active in marketplace"
/>
<StatCard
icon={DollarSign}
title="Total Value"
value={stats ? `$${(stats.totalValue / 1000000).toFixed(1)}M` : '—'}
subtitle="Combined case value"
/>
<StatCard
icon={Users}
title="Active Lawyers"
value={stats ? stats.totalLawyers : '—'}
subtitle="Available for cases"
/>
<StatCard
icon={Award}
title="Success Rate"
value={stats ? `${stats.successRate}%` : '—'}
subtitle="Case completion rate"
/>
</div>
{/* Recent Activity */}
{stats?.recentActivity && (
<div className="bg-white rounded-lg shadow-sm border mb-10">
<div className="px-6 py-4 border-b text-lg font-semibold text-gray-800 flex items-center gap-2">
<BarChart3 className="h-5 w-5 text-blue-600" />
Recent Activity
</div>
<div className="divide-y divide-gray-100">
{stats.recentActivity.slice(0, 5).map((activity, index) => (
<div key={index} className="px-6 py-4 flex items-center justify-between">
<div>
<div className="text-gray-900 font-medium">{activity.description}</div>
<div className="text-gray-500 text-xs">{activity.timestamp}</div>
</div>
<span className="text-xs bg-blue-50 text-blue-700 px-3 py-1 rounded-full border border-blue-100">
{activity.type}
</span>
</div>
))}
</div>
</div>
)}
</>
)}
{activeTab === 'cases' && (
<div>
<div className="mb-2 pt-2">
<h2 className="text-2xl font-bold text-gray-900">All Cases</h2>
<p className="text-sm text-gray-500 mt-1">Browse and filter through all available legal cases</p>
</div>
<div className="border-b border-gray-100 mb-6" />
<LiveCaseFeed />
</div>
)}
{activeTab === 'analytics' && stats && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
<div className="bg-white rounded-lg shadow-sm border p-6">
<h3 className="text-lg font-bold text-gray-900 mb-4">Case Distribution by Category</h3>
{stats.topCategories.map((category, index) => (
<div key={index} className="flex items-center justify-between py-2">
<span className="text-gray-700">{category.name}</span>
<div className="flex items-center gap-3">
<div className="w-24 bg-gray-100 rounded-full h-2">
<div
className="h-full bg-blue-600 rounded-full"
style={{ width: `${category.percentage}%` }}
/>
</div>
<span className="text-gray-900 font-medium">{category.count}</span>
</div>
</div>
))}
</div>
<div className="bg-white rounded-lg shadow-sm border p-6">
<h3 className="text-lg font-bold text-gray-900 mb-4">Cases by Jurisdiction</h3>
{stats.topJurisdictions.map((jurisdiction, index) => (
<div key={index} className="flex items-center justify-between py-2">
<span className="text-gray-700">{jurisdiction.name}</span>
<div className="flex items-center gap-3">
<div className="w-24 bg-blue-100 rounded-full h-2">
<div
className="h-full bg-blue-600 rounded-full"
style={{ width: `${jurisdiction.percentage}%` }}
/>
</div>
<span className="text-gray-900 font-medium">{jurisdiction.count}</span>
</div>
</div>
))}
</div>
</div>
)}
</div>
</LayoutWithSidebar>
</>
);
};
export default LiveCasesPage;