 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/components/ |
import React, { useState, useEffect } from 'react';
import { format } from 'date-fns';
import { FiUser, FiClock, FiTrendingUp, FiDollarSign, FiAward, FiHeart, FiCalendar, FiFileText } from 'react-icons/fi';
import LawyerRatingStars from './LawyerRatingStars';
interface ClientHistoryProps {
lawyerId: string;
}
interface ClientRelationship {
id: string;
relationshipType: string;
startDate: string;
endDate?: string;
isActive: boolean;
caseStatus?: string;
outcomeDescription?: string;
impactLevel?: string;
clientSatisfaction?: number;
wouldRecommend?: boolean;
totalHoursWorked?: number;
totalFeePaid?: number;
feeStructure?: string;
settlementAmount?: number;
client: {
id: string;
name: string;
profilePicture?: string;
occupation?: string;
address?: string;
};
case?: {
id: string;
title: string;
caseType: string;
status: string;
};
milestones: Array<{
id: string;
milestoneType: string;
title: string;
description?: string;
date: string;
amount?: number;
}>;
hasTestimonial: boolean;
}
interface LawyerStats {
id: string;
totalClients: number;
activeClients: number;
casesWon: number;
casesLost: number;
casesSettled: number;
casesDismissed: number;
winRate: number;
totalRevenue: number;
totalProBonoHours: number;
totalProBonoValue: number;
averageSatisfaction: number;
recommendationRate: number;
totalTestimonials: number;
lifeChangingCases: number;
totalSettlementValue: number;
}
interface FeaturedTestimonial {
id: string;
title: string;
content: string;
category: string;
impactLevel: string;
beforeSituation?: string;
afterSituation?: string;
helpfulVotes: number;
views: number;
createdAt: string;
client: {
name: string;
profilePicture?: string;
occupation?: string;
};
relationship?: {
caseStatus?: string;
impactLevel?: string;
};
}
interface ClientHistoryData {
relationships: ClientRelationship[];
stats?: LawyerStats;
featuredTestimonials: FeaturedTestimonial[];
}
const LawyerClientHistory: React.FC<ClientHistoryProps> = ({ lawyerId }) => {
const [data, setData] = useState<ClientHistoryData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<'overview' | 'cases' | 'testimonials'>('overview');
useEffect(() => {
const fetchClientHistory = async () => {
try {
setLoading(true);
const response = await fetch(`/api/lawyer/${lawyerId}/client-history`);
if (!response.ok) {
throw new Error('Failed to fetch client history');
}
const historyData = await response.json();
setData(historyData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
if (lawyerId) {
fetchClientHistory();
}
}, [lawyerId]);
if (loading) {
return (
<div className="flex items-center justify-center p-8">
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600"></div>
</div>
);
}
if (error) {
return (
<div className="text-center p-8">
<p className="text-red-600">Error loading client history: {error}</p>
</div>
);
}
if (!data) {
return (
<div className="text-center p-8">
<p className="text-gray-600">No client history available</p>
</div>
);
}
const { relationships, stats, featuredTestimonials } = data;
const getImpactLevelColor = (level?: string) => {
switch (level) {
case 'LIFE_CHANGING': return 'text-purple-600 bg-purple-100';
case 'SIGNIFICANT': return 'text-blue-600 bg-blue-100';
case 'MODERATE': return 'text-green-600 bg-green-100';
case 'MINOR': return 'text-gray-600 bg-gray-100';
default: return 'text-gray-600 bg-gray-100';
}
};
const getCaseStatusColor = (status?: string) => {
switch (status) {
case 'WON': return 'text-green-600 bg-green-100';
case 'SETTLED': return 'text-blue-600 bg-blue-100';
case 'LOST': return 'text-red-600 bg-red-100';
case 'DISMISSED': return 'text-gray-600 bg-gray-100';
case 'ONGOING': return 'text-yellow-600 bg-yellow-100';
default: return 'text-gray-600 bg-gray-100';
}
};
const formatCurrency = (amount?: number) => {
if (!amount) return 'N/A';
return new Intl.NumberFormat('en-CA', {
style: 'currency',
currency: 'CAD'
}).format(amount);
};
return (
<div className="bg-white rounded-lg shadow-lg p-6">
{/* Header */}
<div className="mb-6">
<h2 className="text-2xl font-bold text-gray-900 mb-2">Client Relationship History</h2>
<p className="text-gray-600">Track record of success and client satisfaction</p>
</div>
{/* Navigation Tabs */}
<div className="border-b border-gray-200 mb-6">
<nav className="-mb-px flex space-x-8">
{[
{ key: 'overview', label: 'Overview', icon: FiTrendingUp },
{ key: 'cases', label: 'Client Cases', icon: FiFileText },
{ key: 'testimonials', label: 'Testimonials', icon: FiHeart }
].map(({ key, label, icon: Icon }) => (
<button
key={key}
onClick={() => setActiveTab(key as any)}
className={`py-2 px-1 border-b-2 font-medium text-sm flex items-center space-x-2 ${
activeTab === key
? 'border-blue-500 text-blue-600'
: 'border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300'
}`}
>
<Icon className="w-4 h-4" />
<span>{label}</span>
</button>
))}
</nav>
</div>
{/* Overview Tab */}
{activeTab === 'overview' && stats && (
<div className="space-y-6">
{/* Key Statistics */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<div className="bg-blue-50 p-4 rounded-lg">
<div className="flex items-center">
<FiUser className="w-6 h-6 text-blue-600 mr-2" />
<div>
<p className="text-2xl font-bold text-blue-600">{stats.totalClients}</p>
<p className="text-sm text-gray-600">Total Clients</p>
</div>
</div>
</div>
<div className="bg-green-50 p-4 rounded-lg">
<div className="flex items-center">
<FiTrendingUp className="w-6 h-6 text-green-600 mr-2" />
<div>
<p className="text-2xl font-bold text-green-600">
{typeof stats.winRate === 'number' ? stats.winRate.toFixed(1) + '%' : 'N/A'}
</p>
<p className="text-sm text-gray-600">Success Rate</p>
</div>
</div>
</div>
<div className="bg-purple-50 p-4 rounded-lg">
<div className="flex items-center">
<FiAward className="w-6 h-6 text-purple-600 mr-2" />
<div>
<p className="text-2xl font-bold text-purple-600">{stats.lifeChangingCases}</p>
<p className="text-sm text-gray-600">Life-Changing Cases</p>
</div>
</div>
</div>
<div className="bg-yellow-50 p-4 rounded-lg">
<div className="flex items-center">
<FiHeart className="w-6 h-6 text-yellow-600 mr-2" />
<div>
<p className="text-2xl font-bold text-yellow-600">{stats.recommendationRate.toFixed(1)}%</p>
<p className="text-sm text-gray-600">Would Recommend</p>
</div>
</div>
</div>
</div>
{/* Detailed Stats */}
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold text-gray-900 mb-3">Case Outcomes</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Cases Won:</span>
<span className="font-medium text-green-600">{stats.casesWon}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Cases Settled:</span>
<span className="font-medium text-blue-600">{stats.casesSettled}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Cases Lost:</span>
<span className="font-medium text-red-600">{stats.casesLost}</span>
</div>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold text-gray-900 mb-3">Financial Impact</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Total Settlements:</span>
<span className="font-medium text-green-600">{formatCurrency(stats.totalSettlementValue)}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Pro Bono Hours:</span>
<span className="font-medium text-purple-600">{stats.totalProBonoHours}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Pro Bono Value:</span>
<span className="font-medium text-purple-600">{formatCurrency(stats.totalProBonoValue)}</span>
</div>
</div>
</div>
</div>
{/* Client Satisfaction */}
<div className="bg-gradient-to-r from-blue-50 to-purple-50 p-6 rounded-lg">
<h3 className="font-semibold text-gray-900 mb-4">Client Satisfaction</h3>
<div className="flex items-center space-x-6">
<div className="flex items-center">
<LawyerRatingStars rating={stats.averageSatisfaction} size="lg" />
<span className="ml-2 text-sm text-gray-600">Average Rating</span>
</div>
<div className="text-center">
<p className="text-2xl font-bold text-purple-600">{stats.totalTestimonials}</p>
<p className="text-sm text-gray-600">Testimonials</p>
</div>
</div>
</div>
</div>
)}
{/* Client Cases Tab */}
{activeTab === 'cases' && (
<div className="space-y-4">
{relationships.length === 0 ? (
<p className="text-gray-600 text-center py-8">No client cases available</p>
) : (
relationships.map((relationship) => (
<div key={relationship.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-blue-100 rounded-full flex items-center justify-center">
<FiUser className="w-5 h-5 text-blue-600" />
</div>
<div>
<h3 className="font-semibold text-gray-900">{relationship.client.name}</h3>
<p className="text-sm text-gray-600">{relationship.client.occupation} • {relationship.client.address}</p>
</div>
</div>
<div className="flex items-center space-x-2">
{relationship.caseStatus && (
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getCaseStatusColor(relationship.caseStatus)}`}>
{relationship.caseStatus}
</span>
)}
{relationship.impactLevel && (
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getImpactLevelColor(relationship.impactLevel)}`}>
{relationship.impactLevel.replace('_', ' ')}
</span>
)}
</div>
</div>
{relationship.case && (
<div className="mb-4 p-3 bg-gray-50 rounded-lg">
<h4 className="font-medium text-gray-900">{relationship.case.title}</h4>
<p className="text-sm text-gray-600">{relationship.case.caseType}</p>
</div>
)}
{relationship.outcomeDescription && (
<p className="text-gray-700 mb-4">{relationship.outcomeDescription}</p>
)}
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
<div className="text-center">
<FiCalendar className="w-4 h-4 text-gray-400 mx-auto mb-1" />
<p className="text-xs text-gray-600">Duration</p>
<p className="text-sm font-medium">
{format(new Date(relationship.startDate), 'MMM yyyy')} -
{relationship.endDate ? format(new Date(relationship.endDate), 'MMM yyyy') : 'Present'}
</p>
</div>
{relationship.totalHoursWorked && (
<div className="text-center">
<FiClock className="w-4 h-4 text-gray-400 mx-auto mb-1" />
<p className="text-xs text-gray-600">Hours</p>
<p className="text-sm font-medium">{relationship.totalHoursWorked}h</p>
</div>
)}
{relationship.totalFeePaid !== null && (
<div className="text-center">
<FiDollarSign className="w-4 h-4 text-gray-400 mx-auto mb-1" />
<p className="text-xs text-gray-600">Fee</p>
<p className="text-sm font-medium">{formatCurrency(relationship.totalFeePaid)}</p>
</div>
)}
{relationship.clientSatisfaction && (
<div className="text-center">
<FiHeart className="w-4 h-4 text-gray-400 mx-auto mb-1" />
<p className="text-xs text-gray-600">Satisfaction</p>
<LawyerRatingStars rating={relationship.clientSatisfaction} size="sm" />
</div>
)}
</div>
{/* Milestones */}
{relationship.milestones.length > 0 && (
<div className="mt-4 pt-4 border-t border-gray-200">
<h5 className="font-medium text-gray-900 mb-2">Key Milestones</h5>
<div className="space-y-2">
{relationship.milestones.slice(0, 3).map((milestone) => (
<div key={milestone.id} className="flex items-center space-x-2 text-sm">
<div className="w-2 h-2 bg-blue-600 rounded-full"></div>
<span className="text-gray-600">{format(new Date(milestone.date), 'MMM dd, yyyy')}</span>
<span className="text-gray-900">{milestone.title}</span>
</div>
))}
</div>
</div>
)}
</div>
))
)}
</div>
)}
{/* Testimonials Tab */}
{activeTab === 'testimonials' && (
<div className="space-y-6">
{featuredTestimonials.length === 0 ? (
<p className="text-gray-600 text-center py-8">No testimonials available</p>
) : (
featuredTestimonials.map((testimonial) => (
<div key={testimonial.id} className="border border-gray-200 rounded-lg p-6 hover:shadow-md transition-shadow">
<div className="flex items-start justify-between mb-4">
<div className="flex items-center space-x-3">
<div className="w-10 h-10 bg-purple-100 rounded-full flex items-center justify-center">
<FiHeart className="w-5 h-5 text-purple-600" />
</div>
<div>
<h3 className="font-semibold text-gray-900">{testimonial.title}</h3>
<p className="text-sm text-gray-600">
by {testimonial.client.name} • {testimonial.client.occupation}
</p>
</div>
</div>
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getImpactLevelColor(testimonial.impactLevel)}`}>
{testimonial.impactLevel.replace('_', ' ')}
</span>
</div>
<blockquote className="text-gray-700 italic mb-4">
"{testimonial.content}"
</blockquote>
{testimonial.beforeSituation && testimonial.afterSituation && (
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
<div className="bg-red-50 p-3 rounded-lg">
<h5 className="font-medium text-red-800 mb-1">Before</h5>
<p className="text-sm text-red-700">{testimonial.beforeSituation}</p>
</div>
<div className="bg-green-50 p-3 rounded-lg">
<h5 className="font-medium text-green-800 mb-1">After</h5>
<p className="text-sm text-green-700">{testimonial.afterSituation}</p>
</div>
</div>
)}
<div className="flex items-center justify-between text-sm text-gray-500">
<span>{format(new Date(testimonial.createdAt), 'MMM dd, yyyy')}</span>
<div className="flex items-center space-x-4">
<span>{testimonial.views} views</span>
<span>{testimonial.helpfulVotes} helpful votes</span>
</div>
</div>
</div>
))
)}
</div>
)}
</div>
);
};
export default LawyerClientHistory;