 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, FiThumbsUp } from 'react-icons/fi';
import LawyerRatingStars from './LawyerRatingStars';
interface ClientLawyerHistoryProps {
userId: string;
}
interface LawyerRelationship {
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;
clientReview?: string;
lawyer: {
id: string;
name: string;
profilePicture?: string;
title?: string;
specialization?: string;
averageRating?: number;
totalCases: number;
wonCases: number;
hourlyRate?: number;
proBono: boolean;
isVerified: boolean;
};
case?: {
id: string;
title: string;
caseType: string;
status: string;
priority: string;
};
milestones: Array<{
id: string;
milestoneType: string;
title: string;
description?: string;
date: string;
amount?: number;
}>;
}
interface ClientTestimonial {
id: string;
title: string;
content: string;
category: string;
impactLevel: string;
beforeSituation?: string;
afterSituation?: string;
isPublic: boolean;
isFeatured: boolean;
helpfulVotes: number;
views: number;
createdAt: string;
lawyer: {
id: string;
name: string;
profilePicture?: string;
title?: string;
specialization?: string;
};
case?: {
id: string;
title: string;
caseType: string;
};
}
interface ClientSummary {
totalLawyers: number;
activeCases: number;
completedCases: number;
successfulCases: number;
successRate: number;
totalSpent: number;
totalSettlementsReceived: number;
averageSatisfaction: number;
totalTestimonials: number;
}
interface ClientHistoryData {
relationships: LawyerRelationship[];
testimonials: ClientTestimonial[];
summary: ClientSummary;
}
const ClientLawyerHistory: React.FC<ClientLawyerHistoryProps> = ({ userId }) => {
const [data, setData] = useState<ClientHistoryData | null>(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
const [activeTab, setActiveTab] = useState<'overview' | 'lawyers' | 'testimonials'>('overview');
useEffect(() => {
const fetchLawyerHistory = async () => {
try {
setLoading(true);
const response = await fetch(`/api/user/${userId}/lawyer-history`);
if (!response.ok) {
throw new Error('Failed to fetch lawyer history');
}
const historyData = await response.json();
setData(historyData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
if (userId) {
fetchLawyerHistory();
}
}, [userId]);
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 lawyer history: {error}</p>
</div>
);
}
if (!data) {
return (
<div className="text-center p-8">
<p className="text-gray-600">No lawyer history available</p>
</div>
);
}
const { relationships, testimonials, summary } = 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">Legal Journey</h2>
<p className="text-gray-600">Your history with legal professionals and case outcomes</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: 'lawyers', label: 'My Lawyers', icon: FiUser },
{ key: 'testimonials', label: 'My Reviews', icon: FiFileText }
].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' && (
<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">{summary.totalLawyers}</p>
<p className="text-sm text-gray-600">Lawyers Worked With</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">{summary.successRate}%</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">
<FiDollarSign className="w-6 h-6 text-purple-600 mr-2" />
<div>
<p className="text-2xl font-bold text-purple-600">{formatCurrency(summary.totalSettlementsReceived)}</p>
<p className="text-sm text-gray-600">Total Recovered</p>
</div>
</div>
</div>
<div className="bg-yellow-50 p-4 rounded-lg">
<div className="flex items-center">
<FiFileText className="w-6 h-6 text-yellow-600 mr-2" />
<div>
<p className="text-2xl font-bold text-yellow-600">{summary.totalTestimonials}</p>
<p className="text-sm text-gray-600">Reviews Written</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 Summary</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Active Cases:</span>
<span className="font-medium text-yellow-600">{summary.activeCases}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Completed Cases:</span>
<span className="font-medium text-blue-600">{summary.completedCases}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Successful Outcomes:</span>
<span className="font-medium text-green-600">{summary.successfulCases}</span>
</div>
</div>
</div>
<div className="bg-gray-50 p-4 rounded-lg">
<h3 className="font-semibold text-gray-900 mb-3">Financial Summary</h3>
<div className="space-y-2">
<div className="flex justify-between">
<span className="text-gray-600">Legal Fees Paid:</span>
<span className="font-medium text-red-600">{formatCurrency(summary.totalSpent)}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Settlements Received:</span>
<span className="font-medium text-green-600">{formatCurrency(summary.totalSettlementsReceived)}</span>
</div>
<div className="flex justify-between">
<span className="text-gray-600">Net Outcome:</span>
<span className={`font-medium ${
summary.totalSettlementsReceived - summary.totalSpent >= 0
? 'text-green-600'
: 'text-red-600'
}`}>
{formatCurrency(summary.totalSettlementsReceived - summary.totalSpent)}
</span>
</div>
</div>
</div>
</div>
{/* Satisfaction Rating */}
{summary.averageSatisfaction > 0 && (
<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">My Satisfaction with Legal Services</h3>
<div className="flex items-center space-x-6">
<div className="flex items-center">
<LawyerRatingStars rating={summary.averageSatisfaction} size="lg" />
<span className="ml-2 text-sm text-gray-600">Average Rating Given</span>
</div>
</div>
</div>
)}
</div>
)}
{/* Lawyers Tab */}
{activeTab === 'lawyers' && (
<div className="space-y-4">
{relationships.length === 0 ? (
<p className="text-gray-600 text-center py-8">No lawyer relationships 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-12 h-12 bg-blue-100 rounded-full flex items-center justify-center">
<FiUser className="w-6 h-6 text-blue-600" />
</div>
<div>
<h3 className="font-semibold text-gray-900">{relationship.lawyer.name}</h3>
<p className="text-sm text-gray-600">
{relationship.lawyer.title} • {relationship.lawyer.specialization}
</p>
<div className="flex items-center space-x-2 mt-1">
{relationship.lawyer.averageRating && (
<LawyerRatingStars rating={relationship.lawyer.averageRating} size="sm" />
)}
{relationship.lawyer.isVerified && (
<span className="text-xs bg-green-100 text-green-600 px-2 py-1 rounded-full">Verified</span>
)}
{relationship.lawyer.proBono && (
<span className="text-xs bg-purple-100 text-purple-600 px-2 py-1 rounded-full">Pro Bono</span>
)}
</div>
</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.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 Paid</p>
<p className="text-sm font-medium">{formatCurrency(relationship.totalFeePaid)}</p>
</div>
)}
{relationship.settlementAmount && (
<div className="text-center">
<FiAward className="w-4 h-4 text-gray-400 mx-auto mb-1" />
<p className="text-xs text-gray-600">Received</p>
<p className="text-sm font-medium text-green-600">{formatCurrency(relationship.settlementAmount)}</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">My Rating</p>
<LawyerRatingStars rating={relationship.clientSatisfaction} size="sm" />
</div>
)}
</div>
{relationship.clientReview && (
<div className="mt-4 pt-4 border-t border-gray-200">
<h5 className="font-medium text-gray-900 mb-2">My Review</h5>
<p className="text-gray-700 italic">"{relationship.clientReview}"</p>
</div>
)}
{relationship.wouldRecommend !== null && (
<div className="mt-3">
<div className={`flex items-center space-x-2 ${relationship.wouldRecommend ? 'text-green-600' : 'text-red-600'}`}>
<FiThumbsUp className="w-4 h-4" />
<span className="text-sm font-medium">
{relationship.wouldRecommend ? 'Would recommend' : 'Would not recommend'}
</span>
</div>
</div>
)}
</div>
))
)}
</div>
)}
{/* Testimonials Tab */}
{activeTab === 'testimonials' && (
<div className="space-y-6">
{testimonials.length === 0 ? (
<p className="text-gray-600 text-center py-8">No testimonials written yet</p>
) : (
testimonials.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>
<h3 className="font-semibold text-gray-900">{testimonial.title}</h3>
<p className="text-sm text-gray-600">
About {testimonial.lawyer.name} • {testimonial.lawyer.specialization}
</p>
</div>
<div className="flex items-center space-x-2">
<span className={`px-2 py-1 rounded-full text-xs font-medium ${getImpactLevelColor(testimonial.impactLevel)}`}>
{testimonial.impactLevel.replace('_', ' ')}
</span>
{testimonial.isFeatured && (
<span className="px-2 py-1 rounded-full text-xs font-medium text-yellow-600 bg-yellow-100">
Featured
</span>
)}
{testimonial.isPublic ? (
<span className="px-2 py-1 rounded-full text-xs font-medium text-green-600 bg-green-100">
Public
</span>
) : (
<span className="px-2 py-1 rounded-full text-xs font-medium text-gray-600 bg-gray-100">
Private
</span>
)}
</div>
</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 ClientLawyerHistory;