mukeshs/cmc_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Further updates on 03-11-2025

Browse Source
This commit is contained in:
mukeshs
2025-11-03 13:45:52 +05:30
parent 5481f2e38a
commit 03f6e8432e
26 changed files with 2299 additions and 848 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/components/faculty/TeamMemberDetail.tsx
View File

@ -21,6 +21,7 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
const [loading, setLoading] = useState(!memberData);
const [error, setError] = useState<string | null>(null);
const [showSocialShare, setShowSocialShare] = useState(false);
const [imageError, setImageError] = useState(false);
useEffect(() => {
const loadMemberData = async () => {
@ -72,9 +73,24 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
);
}
const isTrainee = member.category === 'TRAINEE_FELLOW';
// Check if image URL is valid and not a default placeholder
const hasValidImage = member.image &&
member.image.trim() !== '' &&
!member.image.includes('default-avatar') &&
!member.image.includes('placeholder.') &&
!member.image.includes('robot') &&
// Only filter if URL ENDS with /profile-image (backend default endpoint)
!(member.image.endsWith('/profile-image') ||
member.image.includes('/profile-image?') ||
member.image === 'https://via.placeholder.com/400');
const shouldShowImage = !isTrainee && hasValidImage && !imageError;
// Create a comprehensive description from the member's details
const getFullDescription = () => {
return member.description || `${member.name} is a dedicated member of our faculty with expertise in ${member.specialty?.toLowerCase() || 'medical practice'}. They bring valuable experience in surgical education, patient care, and clinical research to Christian Medical College, Vellore.`;
return member.description || `${member.name} is a dedicated member of our ${isTrainee ? 'trainee program' : 'faculty'} with expertise in ${member.specialty?.toLowerCase() || 'medical practice'}. They bring valuable experience in ${isTrainee ? 'clinical training' : 'surgical education'}, patient care, and clinical research to Christian Medical College, Vellore.`;
};
// Parse phone numbers if multiple are provided
@ -87,6 +103,11 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
: member.phone;
};
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
console.error('Image failed to load:', member.image);
setImageError(true);
};
return (
<div className="min-h-screen bg-white">
{/* Breadcrumb Section */}
@ -120,6 +141,11 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
<h1 className="text-3xl font-bold" style={{ color: '#012068' }}>
{member.name}
</h1>
{isTrainee && (
<span className="ml-4 px-3 py-1 text-xs font-medium rounded-full bg-gray-200 text-gray-700">
Trainee/Fellow
</span>
)}
</div>
<p className="text-base max-w-2xl leading-relaxed" style={{ color: '#333' }}>
{member.designation || member.position} {member.experience && `with ${member.experience} of experience`} at CMC Vellore
@ -134,17 +160,29 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
{/* Sidebar */}
<div className="xl:col-span-1">
<div className="bg-white rounded-md border border-gray-300 overflow-hidden sticky top-8">
{/* Profile Image */}
<div className="aspect-square relative overflow-hidden">
<img
src={member.image}
alt={member.name}
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-300"
onError={(e) => {
const target = e.target as HTMLImageElement;
target.src = '/images/default-avatar.jpg';
}}
/>
{/* Profile Image or Avatar */}
<div className="aspect-square relative overflow-hidden bg-gray-50">
{shouldShowImage ? (
<img
src={member.image}
alt={member.name}
className="w-full h-full object-cover transform hover:scale-105 transition-transform duration-300"
onError={handleImageError}
/>
) : (
<div
className="w-full h-full flex items-center justify-center"
style={{ backgroundColor: '#e0e5eb' }}
>
<svg
className="w-48 h-48 text-gray-400"
fill="currentColor"
viewBox="0 0 24 24"
>
<path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/>
</svg>
</div>
)}
</div>
{/* Profile Info */}
@ -160,7 +198,7 @@ const TeamMemberDetail: React.FC<TeamMemberDetailProps> = ({ memberId, memberDat
</div>
<p className="text-sm mb-6 leading-relaxed" style={{ color: '#333' }}>
{member.description || `${member.name} is a dedicated faculty member at CMC Vellore.`}
{member.description || `${member.name} is a dedicated ${isTrainee ? 'trainee' : 'faculty member'} at CMC Vellore.`}
</p>
<div className="space-y-4 mb-6">