 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 Head from 'next/head';
import Link from 'next/link';
import Image from 'next/image';
import { motion } from 'framer-motion';
import {
Building2, Users, TrendingUp, MapPin,
Phone, Mail, Globe, Star, Target, Shield,
Calendar, DollarSign, Clock, Filter, Search,
Scale, Gavel, Crown, BookOpen,
Heart, Eye, Lightbulb
} from 'lucide-react';
import LayoutWithSidebar from '../components/LayoutWithSidebar';
import { useTheme } from '../context/ThemeContext';
interface SocietyDegree {
id: string;
degreeNumber: number;
name: string;
title: string;
track: string;
symbol: string;
color: string;
lodgeLevel: string;
isSecret: boolean;
}
interface UserDegree {
id: string;
achievedAt: string;
ceremonyCompleted: boolean;
progressPercentage: number;
degree: SocietyDegree;
}
interface Lodge {
id: string;
name: string;
track: string;
lodgeLevel: string;
isSecret: boolean;
}
interface LodgeMembership {
id: string;
role: string;
isActive: boolean;
joinedDate: string;
lodge: Lodge;
}
interface PublicProfile {
id: string;
username?: string;
name: string;
email: string;
role: string;
profilePicture?: string;
bio?: string;
title?: string;
specialization?: string;
yearsOfExperience?: number;
officeLocation?: string;
availability?: string;
hourlyRate?: number;
proBono?: boolean;
averageRating?: number;
totalCases?: number;
wonCases?: number;
isVerified?: boolean;
xpPoints?: number;
level?: number;
businessId?: string;
businessName?: string;
degrees?: UserDegree[];
lodgeMemberships?: LodgeMembership[];
reviewsWritten?: number;
forumPosts?: number;
helpedOthers?: number;
observationHours?: number;
reformProposals?: number;
wisdomScore?: number;
civicEngagement?: number;
}
interface BusinessProfile {
id: string;
businessName: string;
businessType: string;
industry?: string;
description?: string;
logo?: string;
website?: string;
phone?: string;
email?: string;
address?: string;
employeeCount?: string;
annualRevenue?: string;
isVerified: boolean;
createdAt: string;
updatedAt: string;
user: {
id: string;
name: string;
email: string;
role: string;
};
lawyers: Array<{
id: string;
name: string;
role: string;
profilePicture?: string;
specialization?: string;
yearsOfExperience?: number;
totalCases: number;
wonCases: number;
lostCases: number;
winRate: number;
averageRating: number;
hourlyRate?: number;
totalBadges: number;
level: number;
isVerified: boolean;
}>;
firmStats: {
totalLawyers: number;
totalCases: number;
totalWonCases: number;
totalLostCases: number;
averageWinRate: number;
averageRating: number;
averageHourlyRate: number;
totalBadges: number;
averageLevel: number;
};
}
const JudicialDirectory: React.FC = () => {
const [activeTab, setActiveTab] = useState<'overview' | 'lawyers' | 'firms' | 'society'>('overview');
const [profiles, setProfiles] = useState<PublicProfile[]>([]);
const [businesses, setBusinesses] = useState<BusinessProfile[]>([]);
const [loading, setLoading] = useState(true);
const [searchTerm, setSearchTerm] = useState('');
const [filterRole, setFilterRole] = useState('all');
const [filterLodge, setFilterLodge] = useState('all');
const { theme } = useTheme();
useEffect(() => {
fetchData();
}, []);
const fetchData = async () => {
try {
const [profilesRes, businessesRes] = await Promise.all([
fetch('/api/public/profiles'),
fetch('/api/public/business-profiles')
]);
if (profilesRes.ok) {
const profilesData = await profilesRes.json();
setProfiles(profilesData);
}
if (businessesRes.ok) {
const businessesData = await businessesRes.json();
setBusinesses(businessesData);
}
} catch (error) {
console.error('Error fetching data:', error);
} finally {
setLoading(false);
}
};
const getRoleIcon = (role: string) => {
switch (role) {
case 'SUPERADMIN':
case 'SUPERADMIN':
case 'SUPERADMIN': return <Crown className="w-4 h-4" />;
case 'ADMIN': return <Shield className="w-4 h-4" />;
case 'JUDGE': return <Scale className="w-4 h-4" />;
case 'LAWYER': return <Gavel className="w-4 h-4" />;
case 'JURIST': return <BookOpen className="w-4 h-4" />;
case 'MEDIATOR': return <Heart className="w-4 h-4" />;
case 'USER': return <Users className="w-4 h-4" />;
default: return <Users className="w-4 h-4" />;
}
};
const getRoleName = (role: string) => {
switch (role) {
case 'SUPERADMIN':
case 'SUPERADMIN':
case 'SUPERADMIN': return 'System Administrator';
case 'ADMIN': return 'Legal Team';
case 'JUDGE': return 'Judge';
case 'LAWYER': return 'Legal Counsel';
case 'JURIST': return 'Jurist';
case 'MEDIATOR': return 'Mediator';
case 'USER': return 'Justice Seeker';
default: return role;
}
};
const getHighestDegree = (degrees?: UserDegree[]) => {
if (!degrees || degrees.length === 0) return null;
return degrees.reduce((highest, current) =>
current.degree.degreeNumber > highest.degree.degreeNumber ? current : highest
);
};
const filteredProfiles = profiles.filter(profile => {
const matchesSearch = profile.name.toLowerCase().includes(searchTerm.toLowerCase()) ||
profile.specialization?.toLowerCase().includes(searchTerm.toLowerCase());
const matchesRole = filterRole === 'all' || profile.role === filterRole;
const matchesLodge = filterLodge === 'all' ||
profile.lodgeMemberships?.some(lm => lm.lodge.lodgeLevel === filterLodge);
return matchesSearch && matchesRole && matchesLodge;
});
const filteredBusinesses = businesses.filter(business => {
return business.businessName.toLowerCase().includes(searchTerm.toLowerCase()) ||
business.industry?.toLowerCase().includes(searchTerm.toLowerCase());
});
const stats = {
totalLawyers: profiles.filter(p => p.role === 'LAWYER').length,
totalFirms: businesses.length,
totalSocietyMembers: profiles.filter(p => p.degrees && p.degrees.length > 0).length,
averageWinRate: profiles.filter(p => p.role === 'LAWYER' && p.totalCases && p.totalCases > 0)
.reduce((sum, p) => sum + ((p.wonCases || 0) / (p.totalCases || 1) * 100), 0) /
profiles.filter(p => p.role === 'LAWYER' && p.totalCases && p.totalCases > 0).length || 0
};
if (loading) {
return (
<LayoutWithSidebar>
<div className="flex items-center justify-center min-h-screen">
<div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
</div>
</LayoutWithSidebar>
);
}
return (
<LayoutWithSidebar>
<Head>
<title>🏛️ Judicial Directory - Legal Ecosystem</title>
<meta name="description" content="Comprehensive directory of legal professionals, law firms, and society members in our judicial ecosystem." />
</Head>
<div className="max-w-7xl mx-auto px-4 py-8">
{/* Quick Navigation */}
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="bg-gradient-to-r from-blue-50 to-purple-50 dark:from-blue-900/20 dark:to-purple-900/20 rounded-xl p-6 border border-blue-200 dark:border-blue-800 mb-8"
>
<h2 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
🏛️ Judicial Ecosystem Navigation
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
<Link
href="/judicial-directory"
className="flex items-center space-x-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group"
>
<div className="w-10 h-10 bg-blue-100 dark:bg-blue-900/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span className="text-blue-600 text-lg">⚖️</span>
</div>
<div>
<div className="font-medium text-gray-900 dark:text-white group-hover:text-blue-600 transition-colors">
Judicial Directory
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Legal professionals & expertise
</div>
</div>
</Link>
<Link
href="/business-profiles"
className="flex items-center space-x-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group"
>
<div className="w-10 h-10 bg-purple-100 dark:bg-purple-900/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span className="text-purple-600 text-lg">🏢</span>
</div>
<div>
<div className="font-medium text-gray-900 dark:text-white group-hover:text-purple-600 transition-colors">
Law Firms & Businesses
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Professional organizations
</div>
</div>
</Link>
<Link
href="/profiles"
className="flex items-center space-x-3 p-4 bg-white dark:bg-gray-800 rounded-lg shadow-sm hover:shadow-md transition-all duration-200 group"
>
<div className="w-10 h-10 bg-green-100 dark:bg-green-900/30 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<span className="text-green-600 text-lg">👥</span>
</div>
<div>
<div className="font-medium text-gray-900 dark:text-white group-hover:text-green-600 transition-colors">
Society Members
</div>
<div className="text-sm text-gray-500 dark:text-gray-400">
Community directory
</div>
</div>
</Link>
</div>
</motion.div>
{/* Header */}
<div className="mb-8">
<h1 className="text-4xl font-bold text-gray-900 dark:text-white mb-4">
🏛️ Judicial Directory
</h1>
<p className="text-xl text-gray-600 dark:text-gray-400">
Discover our comprehensive legal ecosystem - from individual practitioners to law firms, all connected through our Society of Brothers
</p>
</div>
{/* Stats Overview */}
<div className="grid grid-cols-1 md:grid-cols-4 gap-6 mb-8">
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="bg-gradient-to-r from-blue-500 to-blue-600 rounded-lg p-6 text-white"
>
<div className="flex items-center justify-between">
<div>
<p className="text-sm opacity-90">Total Lawyers</p>
<p className="text-2xl font-bold">{stats.totalLawyers}</p>
</div>
<Gavel className="w-8 h-8 opacity-80" />
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.1 }}
className="bg-gradient-to-r from-green-500 to-green-600 rounded-lg p-6 text-white"
>
<div className="flex items-center justify-between">
<div>
<p className="text-sm opacity-90">Law Firms</p>
<p className="text-2xl font-bold">{stats.totalFirms}</p>
</div>
<Building2 className="w-8 h-8 opacity-80" />
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.2 }}
className="bg-gradient-to-r from-purple-500 to-purple-600 rounded-lg p-6 text-white"
>
<div className="flex items-center justify-between">
<div>
<p className="text-sm opacity-90">Society Members</p>
<p className="text-2xl font-bold">{stats.totalSocietyMembers}</p>
</div>
<Crown className="w-8 h-8 opacity-80" />
</div>
</motion.div>
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: 0.3 }}
className="bg-gradient-to-r from-yellow-500 to-yellow-600 rounded-lg p-6 text-white"
>
<div className="flex items-center justify-between">
<div>
<p className="text-sm opacity-90">Avg Win Rate</p>
<p className="text-2xl font-bold">{stats.averageWinRate.toFixed(1)}%</p>
</div>
<TrendingUp className="w-8 h-8 opacity-80" />
</div>
</motion.div>
</div>
{/* Navigation Tabs */}
<div className="flex flex-wrap gap-2 mb-8">
<button
onClick={() => setActiveTab('overview')}
className={`px-4 py-2 rounded-lg font-medium transition-all ${
activeTab === 'overview'
? 'bg-blue-600 text-white shadow-lg'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
>
📊 Overview
</button>
<button
onClick={() => setActiveTab('lawyers')}
className={`px-4 py-2 rounded-lg font-medium transition-all ${
activeTab === 'lawyers'
? 'bg-blue-600 text-white shadow-lg'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
>
⚖️ Legal Professionals
</button>
<button
onClick={() => setActiveTab('firms')}
className={`px-4 py-2 rounded-lg font-medium transition-all ${
activeTab === 'firms'
? 'bg-blue-600 text-white shadow-lg'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
>
🏢 Law Firms
</button>
<button
onClick={() => setActiveTab('society')}
className={`px-4 py-2 rounded-lg font-medium transition-all ${
activeTab === 'society'
? 'bg-blue-600 text-white shadow-lg'
: 'bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
}`}
>
🏛️ Society of Brothers
</button>
</div>
{/* Search and Filters */}
<div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 mb-8">
<div className="flex flex-col md:flex-row gap-4">
<div className="flex-1">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400" />
<input
type="text"
placeholder="Search professionals, firms, or specializations..."
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
className="w-full pl-10 pr-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
/>
</div>
</div>
{activeTab === 'lawyers' && (
<div className="flex gap-4">
<select
value={filterRole}
onChange={(e) => setFilterRole(e.target.value)}
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
>
<option value="all">All Roles</option>
<option value="LAWYER">Lawyers</option>
<option value="JUDGE">Judges</option>
<option value="JURIST">Jurists</option>
<option value="MEDIATOR">Mediators</option>
<option value="USER">Justice Seekers</option>
</select>
<select
value={filterLodge}
onChange={(e) => setFilterLodge(e.target.value)}
className="px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-gray-700 dark:text-white"
>
<option value="all">All Lodges</option>
<option value="BLUE">Blue Lodge</option>
<option value="RED">Red Lodge</option>
<option value="BLACK">Black Lodge</option>
<option value="CIVIC">Civic Lodge</option>
<option value="REFORMER">Reformer Lodge</option>
<option value="ORACLE">Oracle Lodge</option>
</select>
</div>
)}
</div>
</div>
{/* Interactive Sidebar and Main Content */}
<div className="grid grid-cols-1 lg:grid-cols-4 gap-8">
{/* Sidebar Widgets */}
<div className="lg:col-span-1 space-y-6">
{/* Recent Activity Widget */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.2 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="mr-2 text-xl">⚡</span>
Recent Activity
</h3>
<div className="space-y-4">
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-blue-100 dark:bg-blue-900 rounded-full flex items-center justify-center">
<span className="text-blue-600 text-sm font-bold">JD</span>
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 dark:text-white font-medium">John Doe</p>
<p className="text-xs text-gray-600 dark:text-gray-400">Joined Blue Lodge • 2h ago</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-green-100 dark:bg-green-900 rounded-full flex items-center justify-center">
<span className="text-green-600 text-sm font-bold">JS</span>
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 dark:text-white font-medium">Jane Smith</p>
<p className="text-xs text-gray-600 dark:text-gray-400">Won case #1234 • 4h ago</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-purple-100 dark:bg-purple-900 rounded-full flex items-center justify-center">
<span className="text-purple-600 text-sm font-bold">MJ</span>
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 dark:text-white font-medium">Mike Johnson</p>
<p className="text-xs text-gray-600 dark:text-gray-400">Achieved 15° degree • 6h ago</p>
</div>
</div>
<div className="flex items-start space-x-3">
<div className="w-8 h-8 bg-yellow-100 dark:bg-yellow-900 rounded-full flex items-center justify-center">
<span className="text-yellow-600 text-sm font-bold">SL</span>
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 dark:text-white font-medium">Sarah Lee</p>
<p className="text-xs text-gray-600 dark:text-gray-400">New case posted • 8h ago</p>
</div>
</div>
</div>
<button className="w-full mt-4 text-blue-600 hover:text-blue-700 text-sm font-medium">
View All Activity →
</button>
</motion.div>
{/* Top Contributors Widget */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.3 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
>
<h3 className="text-lg font-semibold text-gray-900 dark:text-white mb-4 flex items-center">
<span className="mr-2 text-xl">🏆</span>
Top Contributors
</h3>
<div className="space-y-3">
{profiles
.filter(p => p.role === 'LAWYER' && p.totalCases && p.totalCases > 0)
.sort((a, b) => ((b.wonCases || 0) / (b.totalCases || 1)) - ((a.wonCases || 0) / (a.totalCases || 1)))
.slice(0, 5)
.map((profile, index) => (
<div key={profile.id} className="flex items-center space-x-3">
<div className="w-8 h-8 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white text-sm font-bold">
{profile.name.split(' ').map(n => n[0]).join('')}
</div>
<div className="flex-1">
<p className="text-sm text-gray-900 dark:text-white font-medium">{profile.name}</p>
<p className="text-xs text-gray-600 dark:text-gray-400">
{profile.totalCases && profile.totalCases > 0 ? (((profile.wonCases || 0) / profile.totalCases) * 100).toFixed(1) : '0'}% win rate
</p>
</div>
<div className="text-xs text-gray-500">
#{index + 1}
</div>
</div>
))}
</div>
</motion.div>
{/* Quick Connect Widget */}
<motion.div
initial={{ opacity: 0, x: -20 }}
animate={{ opacity: 1, x: 0 }}
transition={{ delay: 0.4 }}
className="bg-gradient-to-r from-blue-500 to-purple-600 rounded-lg p-6 text-white"
>
<h3 className="text-lg font-semibold mb-4 flex items-center">
<span className="mr-2 text-xl">👥</span>
Quick Connect
</h3>
<div className="space-y-3">
<button className="w-full bg-white/20 hover:bg-white/30 rounded-lg p-3 text-left transition-colors">
<div className="font-medium">Find Mentor</div>
<div className="text-sm opacity-90">Connect with experienced professionals</div>
</button>
<button className="w-full bg-white/20 hover:bg-white/30 rounded-lg p-3 text-left transition-colors">
<div className="font-medium">Join Case</div>
<div className="text-sm opacity-90">Collaborate on active cases</div>
</button>
<button className="w-full bg-white/20 hover:bg-white/30 rounded-lg p-3 text-left transition-colors">
<div className="font-medium">Society Events</div>
<div className="text-sm opacity-90">Upcoming ceremonies & meetings</div>
</button>
</div>
</motion.div>
</div>
{/* Main Content */}
<div className="lg:col-span-3">
{/* Content Tabs */}
{activeTab === 'overview' && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-8"
>
{/* Featured Lawyers */}
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
⭐ Featured Legal Professionals
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{profiles
.filter(p => p.role === 'LAWYER' && p.isVerified)
.slice(0, 6)
.map((profile, index) => (
<motion.div
key={profile.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold">
{profile.name.split(' ').map(n => n[0]).join('')}
</div>
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">{profile.name}</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">{profile.specialization}</p>
{profile.businessName && (
<p className="text-xs text-blue-600 dark:text-blue-400">🏢 {profile.businessName}</p>
)}
</div>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Win Rate:</span>
<span className="font-medium">
{profile.totalCases && profile.totalCases > 0 ? (((profile.wonCases || 0) / profile.totalCases) * 100).toFixed(1) : 'N/A'}%
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Cases:</span>
<span className="font-medium">{profile.totalCases || 0}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Rating:</span>
<span className="font-medium">{profile.averageRating?.toFixed(1) || 'N/A'}</span>
</div>
</div>
{profile.degrees && profile.degrees.length > 0 && (
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
<p className="text-xs text-gray-500 dark:text-gray-400">
{getHighestDegree(profile.degrees)?.degree.symbol} {getHighestDegree(profile.degrees)?.degree.name}
</p>
</div>
)}
</motion.div>
))}
</div>
</div>
{/* Featured Firms */}
<div>
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
🏢 Featured Law Firms
</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
{businesses.slice(0, 4).map((business, index) => (
<motion.div
key={business.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-md transition-shadow"
>
<div className="flex items-center space-x-4 mb-4">
<Building2 className="w-8 h-8 text-blue-600" />
<div>
<h3 className="font-semibold text-gray-900 dark:text-white">{business.businessName}</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">{business.businessType}</p>
</div>
</div>
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
{business.description?.substring(0, 100)}...
</p>
<div className="grid grid-cols-2 gap-4 text-sm">
<div>
<span className="text-gray-600 dark:text-gray-400">Lawyers:</span>
<span className="font-medium ml-2">{business.firmStats.totalLawyers}</span>
</div>
<div>
<span className="text-gray-600 dark:text-gray-400">Win Rate:</span>
<span className="font-medium ml-2">{business.firmStats.averageWinRate.toFixed(1)}%</span>
</div>
<div>
<span className="text-gray-600 dark:text-gray-400">Cases:</span>
<span className="font-medium ml-2">{business.firmStats.totalCases}</span>
</div>
<div>
<span className="text-gray-600 dark:text-gray-400">Rating:</span>
<span className="font-medium ml-2">{business.firmStats.averageRating.toFixed(1)}</span>
</div>
</div>
</motion.div>
))}
</div>
</div>
</motion.div>
)}
{activeTab === 'lawyers' && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"
>
{filteredProfiles.map((profile, index) => (
<motion.div
key={profile.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.05 }}
whileHover={{ y: -5, scale: 1.02 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-lg hover:shadow-2xl transition-all duration-300 overflow-hidden border border-gray-100 dark:border-gray-700 cursor-pointer group"
>
<div className="flex items-center space-x-4 mb-4 p-2">
<div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-full flex items-center justify-center text-white font-bold group-hover:scale-110 transition-transform">
{profile.name.split(' ').map(n => n[0]).join('')}
</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 transition-colors">{profile.name}</h3>
<div className="flex items-center space-x-2">
{getRoleIcon(profile.role)}
<span className="text-sm text-gray-600 dark:text-gray-400">{getRoleName(profile.role)}</span>
{/* Simulated online indicator */}
<span className="ml-2 inline-flex items-center">
<span className="h-2 w-2 rounded-full bg-green-500 mr-1 animate-pulse"></span>
<span className="text-xs text-green-600">Online</span>
</span>
</div>
</div>
{profile.username && (
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-blue-600 text-sm">👁️ View Profile</span>
</div>
)}
</div>
{profile.specialization && (
<p className="text-sm text-gray-600 dark:text-gray-400 mb-4 px-2">{profile.specialization}</p>
)}
{profile.businessName && (
<p className="text-xs text-blue-600 dark:text-blue-400">🏢 {profile.businessName}</p>
)}
<div className="space-y-2 text-sm mb-4 px-2">
{profile.role === 'LAWYER' && (
<>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Win Rate:</span>
<span className="font-medium text-green-600">
{profile.totalCases && profile.totalCases > 0 ? (((profile.wonCases || 0) / profile.totalCases) * 100).toFixed(1) + '%' : <span className='text-gray-400'>N/A</span>}
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Cases:</span>
<span className="font-medium">{profile.totalCases && profile.totalCases > 0 ? profile.totalCases : <span className='text-gray-400'>No cases yet</span>}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Rating:</span>
<span className="font-medium text-yellow-600">{profile.averageRating && profile.averageRating > 0 ? profile.averageRating.toFixed(1) : <span className='text-gray-400'>N/A</span>}</span>
</div>
</>
)}
{profile.xpPoints && (
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">XP:</span>
<span className="font-medium text-purple-600">{profile.xpPoints.toLocaleString()}</span>
</div>
)}
</div>
{/* Quick Action Buttons */}
<div className="mt-4 flex gap-2 px-2">
{profile.username && (
<button
onClick={() => window.open(`/profile/${profile.username}`, '_blank')}
className="flex-1 bg-gradient-to-r from-blue-500 to-purple-600 text-white px-4 py-2 rounded-lg font-medium hover:from-blue-600 hover:to-purple-700 transition-all"
title="View Profile"
>
👁️ View Profile
</button>
)}
{/* New: Message button */}
<button
onClick={() => alert(`Open chat with ${profile.name}`)}
className="bg-blue-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-blue-700 transition-colors"
title="Message this professional"
>
💬 Message
</button>
{/* New: Invite to Case button */}
<button
onClick={() => alert(`Invite ${profile.name} to a case`)}
className="bg-green-600 text-white px-4 py-2 rounded-lg font-medium hover:bg-green-700 transition-colors"
title="Invite to Case"
>
📩 Invite to Case
</button>
</div>
{/* Cross-link to business if available */}
{profile.role === 'LAWYER' && profile.businessId && (
<div className="mt-2 px-2">
<Link href={`/business/${profile.businessId}`} className="text-blue-600 hover:underline text-xs">
View Law Firm Profile
</Link>
</div>
)}
{profile.degrees && profile.degrees.length > 0 && (
<div className="pt-4 border-t border-gray-200 dark:border-gray-700 px-2">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Society Degrees:</p>
<div className="flex flex-wrap gap-1">
{profile.degrees.slice(0, 3).map((ud, idx) => (
<span
key={ud.id}
className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium hover:scale-105 transition-transform"
style={{ background: ud.degree.color, color: '#fff' }}
>
{ud.degree.symbol} {ud.degree.name}
</span>
))}
</div>
</div>
)}
</motion.div>
))}
</motion.div>
)}
{activeTab === 'firms' && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="grid grid-cols-1 md:grid-cols-2 gap-6"
>
{filteredBusinesses.map((business, index) => (
<motion.div
key={business.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
whileHover={{ y: -5, scale: 1.02 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6 hover:shadow-xl transition-all duration-300 cursor-pointer group"
onClick={() => window.open(`/business/${business.id}`, '_blank')}
>
<div className="flex items-center space-x-4 mb-4">
<div className="w-12 h-12 bg-gradient-to-r from-green-500 to-blue-600 rounded-lg flex items-center justify-center group-hover:scale-110 transition-transform">
<Building2 className="w-6 h-6 text-white" />
</div>
<div className="flex-1">
<h3 className="font-semibold text-gray-900 dark:text-white group-hover:text-blue-600 transition-colors flex items-center">
{business.businessName}
{business.isVerified && (
<span className="ml-2 text-blue-600">✓</span>
)}
</h3>
<p className="text-sm text-gray-600 dark:text-gray-400">{business.businessType}</p>
</div>
<div className="opacity-0 group-hover:opacity-100 transition-opacity">
<span className="text-blue-600 text-sm">🏢 View Firm</span>
</div>
</div>
{business.description && (
<p className="text-gray-600 dark:text-gray-400 text-sm mb-4">
{business.description.substring(0, 150)}...
</p>
)}
<div className="grid grid-cols-2 gap-4 text-sm mb-4">
<div className="text-center p-2 bg-blue-50 dark:bg-blue-900/20 rounded">
<div className="text-lg font-bold text-blue-600">{business.firmStats.totalLawyers}</div>
<div className="text-xs text-gray-600 dark:text-gray-400">Lawyers</div>
</div>
<div className="text-center p-2 bg-green-50 dark:bg-green-900/20 rounded">
<div className="text-lg font-bold text-green-600">{business.firmStats.averageWinRate.toFixed(1)}%</div>
<div className="text-xs text-gray-600 dark:text-gray-400">Win Rate</div>
</div>
<div className="text-center p-2 bg-purple-50 dark:bg-purple-900/20 rounded">
<div className="text-lg font-bold text-purple-600">{business.firmStats.totalCases}</div>
<div className="text-xs text-gray-600 dark:text-gray-400">Cases</div>
</div>
<div className="text-center p-2 bg-yellow-50 dark:bg-yellow-900/20 rounded">
<div className="text-lg font-bold text-yellow-600">{business.firmStats.averageRating.toFixed(1)}</div>
<div className="text-xs text-gray-600 dark:text-gray-400">Rating</div>
</div>
</div>
<div className="pt-4 border-t border-gray-200 dark:border-gray-700">
<p className="text-xs text-gray-500 dark:text-gray-400 mb-2">Team Members:</p>
<div className="flex flex-wrap gap-2">
{business.lawyers.slice(0, 4).map((lawyer, idx) => (
<span
key={lawyer.id}
className="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors cursor-pointer"
onClick={(e) => {
e.stopPropagation();
window.open(`/profile/${lawyer.id}`, '_blank');
}}
>
{lawyer.name.split(' ')[0]}
</span>
))}
{business.lawyers.length > 4 && (
<span className="text-xs text-gray-500">+{business.lawyers.length - 4} more</span>
)}
</div>
</div>
{/* Quick Action Buttons */}
<div className="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700 flex gap-2">
<button
onClick={(e) => {
e.stopPropagation();
window.open(`/business/${business.id}`, '_blank');
}}
className="flex-1 bg-gradient-to-r from-green-500 to-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:from-green-600 hover:to-blue-700 transition-all"
>
🏢 View Firm Profile
</button>
<button
onClick={(e) => {
e.stopPropagation();
alert(`Message ${business.businessName}`);
}}
className="bg-blue-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-blue-700 transition-colors"
>
💬 Message
</button>
<button
onClick={(e) => {
e.stopPropagation();
window.open(`/hire?firm=${business.id}`, '_blank');
}}
className="bg-purple-600 text-white px-3 py-2 rounded-md text-sm font-medium hover:bg-purple-700 transition-colors"
>
💼 Hire Firm
</button>
</div>
</motion.div>
))}
</motion.div>
)}
{activeTab === 'society' && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
className="space-y-8"
>
{/* Society Overview */}
<div className="bg-gradient-to-r from-purple-600 to-blue-600 rounded-lg p-8 text-white">
<h2 className="text-3xl font-bold mb-4">🏛️ Society of Brothers</h2>
<p className="text-lg opacity-90 mb-6">
Our judicial ecosystem is built on the foundation of the Society of Brothers - a comprehensive system of degrees, lodges, and ceremonial progression that unites legal professionals and justice seekers.
</p>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="text-center">
<div className="text-3xl font-bold mb-2">33</div>
<div className="text-sm opacity-90">Lawyer Degrees</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold mb-2">10</div>
<div className="text-sm opacity-90">Client Degrees</div>
</div>
<div className="text-center">
<div className="text-3xl font-bold mb-2">6</div>
<div className="text-sm opacity-90">Lodge Types</div>
</div>
</div>
</div>
{/* Lodge Overview */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{[
{ name: 'Blue Lodge', level: 'BLUE', description: 'Foundation degrees for legal professionals', color: 'from-blue-500 to-blue-600' },
{ name: 'Red Lodge', level: 'RED', description: 'Advanced degrees and secret knowledge', color: 'from-red-500 to-red-600' },
{ name: 'Black Lodge', level: 'BLACK', description: 'Master degrees and ultimate authority', color: 'from-gray-800 to-black' },
{ name: 'Civic Lodge', level: 'CIVIC', description: 'Justice seekers and community advocates', color: 'from-green-500 to-green-600' },
{ name: 'Reformer Lodge', level: 'REFORMER', description: 'System reformers and change agents', color: 'from-yellow-500 to-orange-500' },
{ name: 'Oracle Lodge', level: 'ORACLE', description: 'Wisdom keepers and ultimate guides', color: 'from-purple-500 to-purple-600' }
].map((lodge, index) => (
<motion.div
key={lodge.level}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className={`bg-gradient-to-r ${lodge.color} rounded-lg p-6 text-white`}
>
<h3 className="text-xl font-bold mb-2">{lodge.name}</h3>
<p className="text-sm opacity-90 mb-4">{lodge.description}</p>
<div className="text-sm">
Members: {profiles.filter(p => p.lodgeMemberships?.some(lm => lm.lodge.lodgeLevel === lodge.level)).length}
</div>
</motion.div>
))}
</div>
{/* High-Degree Members */}
<div>
<h3 className="text-2xl font-bold text-gray-900 dark:text-white mb-6">
👑 High-Degree Society Members
</h3>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{profiles
.filter(p => p.degrees && p.degrees.length > 0)
.sort((a, b) => {
const aHighest = getHighestDegree(a.degrees)?.degree.degreeNumber || 0;
const bHighest = getHighestDegree(b.degrees)?.degree.degreeNumber || 0;
return bHighest - aHighest;
})
.slice(0, 9)
.map((profile, index) => {
const highestDegree = getHighestDegree(profile.degrees);
return (
<motion.div
key={profile.id}
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ delay: index * 0.1 }}
className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 p-6"
>
<div className="flex items-center space-x-4 mb-4">
<div
className="w-12 h-12 rounded-full flex items-center justify-center text-white font-bold"
style={{ backgroundColor: highestDegree?.degree.color }}
>
{profile.name.split(' ').map(n => n[0]).join('')}
</div>
<div>
<h4 className="font-semibold text-gray-900 dark:text-white">{profile.name}</h4>
<p className="text-sm text-gray-600 dark:text-gray-400">{getRoleName(profile.role)}</p>
</div>
</div>
<div className="space-y-2 text-sm">
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Highest Degree:</span>
<span className="font-medium">
{highestDegree?.degree.symbol} {highestDegree?.degree.degreeNumber}°
</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Title:</span>
<span className="font-medium">{highestDegree?.degree.title}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600 dark:text-gray-400">Lodge:</span>
<span className="font-medium">{highestDegree?.degree.lodgeLevel}</span>
</div>
</div>
</motion.div>
);
})}
</div>
</div>
</motion.div>
)}
</div>
</div>
</div>
</LayoutWithSidebar>
);
};
export default JudicialDirectory;