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

Team and service update

Browse Source
This commit is contained in:
mukeshs
2025-11-12 09:20:24 +05:30
parent d38ee9ea42
commit f55a506ea5
4 changed files with 195 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
src/components/faculty/TeamListing.tsx
View File

@ -35,10 +35,19 @@ const TeamListing: React.FC<TeamListingProps> = ({
loadFacultyData();
}, []);
// Filter members by category
const facultyMembers = teamMembers.filter(member => member.category === 'FACULTY');
const supportTeam = teamMembers.filter(member => member.category === 'SUPPORT_TEAM');
const traineesAndFellows = teamMembers.filter(member => member.category === 'TRAINEE_FELLOW');
// Filter members by category and status
const facultyMembers = teamMembers.filter(member =>
member.category === 'FACULTY' && member.status !== 'RETIRED'
);
const supportTeam = teamMembers.filter(member =>
member.category === 'SUPPORT_TEAM' && member.status !== 'RETIRED'
);
const traineesAndFellows = teamMembers.filter(member =>
member.category === 'TRAINEE_FELLOW' && member.status !== 'RETIRED'
);
const retiredStaff = teamMembers.filter(member =>
member.status === 'RETIRED'
);
const handleMemberClick = (member: TeamMember) => {
if (onMemberClick) {
@ -79,6 +88,9 @@ const TeamListing: React.FC<TeamListingProps> = ({
const [imageError, setImageError] = useState(false);
const [imageLoading, setImageLoading] = useState(true);
const isTrainee = member.category === 'TRAINEE_FELLOW';
const isSupportTeam = member.category === 'SUPPORT_TEAM';
const isRetired = member.status === 'RETIRED';
const isNonClickable = isTrainee || isSupportTeam;
// Check if image URL is valid and not a default placeholder
const hasValidImage = member.image &&
@ -91,7 +103,8 @@ const TeamListing: React.FC<TeamListingProps> = ({
member.image.includes('/profile-image?') ||
member.image === 'https://via.placeholder.com/400');
const shouldShowImage = !isTrainee && hasValidImage;
// Don't show images for trainees or support team
const shouldShowImage = !isNonClickable && hasValidImage;
const handleImageError = (e: React.SyntheticEvent<HTMLImageElement>) => {
console.error('Image failed to load:', member.image);
@ -108,12 +121,12 @@ const TeamListing: React.FC<TeamListingProps> = ({
return (
<div
className={`bg-white rounded-lg border border-gray-300 overflow-hidden transition-all duration-300 ${
!isTrainee ? 'group cursor-pointer hover:shadow-lg' : 'cursor-default'
!isNonClickable ? 'group cursor-pointer hover:shadow-lg' : 'cursor-default'
}`}
onClick={() => !isTrainee && handleMemberClick(member)}
onClick={() => !isNonClickable && handleMemberClick(member)}
>
{/* Only show image section for non-trainees */}
{!isTrainee && (
{/* Only show image section for faculty */}
{!isNonClickable && (
<div className="relative aspect-square overflow-hidden bg-gray-50">
{shouldShowImage && !imageError ? (
<>
@ -158,7 +171,7 @@ const TeamListing: React.FC<TeamListingProps> = ({
<p className="text-sm leading-relaxed" style={{ color: '#e64838' }}>
{member.position}
</p>
{!isTrainee && (
{!isNonClickable && (
<>
{member.department && (
<p className="text-xs mt-1" style={{ color: '#666' }}>
@ -230,9 +243,30 @@ const TeamListing: React.FC<TeamListingProps> = ({
</section>
)}
{/* Retired Staff Section */}
{retiredStaff.length > 0 && (
<section className="py-8" style={{ backgroundColor: '#f9f9f9' }}>
<div className="max-w-7xl mx-auto px-4">
<div className="mb-8">
<h2 className="text-2xl font-bold mb-4" style={{ color: '#012068' }}>
Retired Staff
</h2>
<p className="text-sm mb-2" style={{ color: '#666' }}>
Honoring our retired faculty and staff members for their dedicated service
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
{retiredStaff.map((member) => (
<TeamMemberCard key={member.id} member={member} />
))}
</div>
</div>
</section>
)}
{/* Support Team Section */}
{supportTeam.length > 0 && (
<section className="py-8" style={{ backgroundColor: '#f9f9f9' }}>
<section className="py-8" style={{ backgroundColor: '#fff' }}>
<div className="max-w-7xl mx-auto px-4">
<div className="mb-8">
<h2 className="text-2xl font-bold mb-4" style={{ color: '#012068' }}>
@ -241,7 +275,7 @@ const TeamListing: React.FC<TeamListingProps> = ({
<p className="text-base leading-relaxed mb-2" style={{ color: '#012068' }}>
<strong>Clinical Support Staff</strong> - Essential team members providing specialized support services
</p>
<p className="text-sm" style={{ color: '#012068' }}>
<p className="text-sm mb-1" style={{ color: '#012068' }}>
<strong>Administrative & Technical Support</strong> - Dedicated professionals ensuring smooth operations
</p>
</div>
@ -256,7 +290,7 @@ const TeamListing: React.FC<TeamListingProps> = ({
{/* Trainees & Fellows Section */}
{traineesAndFellows.length > 0 && (
<section className="py-8" style={{ backgroundColor: '#fff' }}>
<section className="py-8" style={{ backgroundColor: '#f9f9f9' }}>
<div className="max-w-7xl mx-auto px-4">
<div className="mb-8">
<h2 className="text-2xl font-bold mb-4" style={{ color: '#012068' }}>
@ -296,7 +330,7 @@ const TeamListing: React.FC<TeamListingProps> = ({
)}
{/* Show message if all categories are empty but we have data */}
{teamMembers.length > 0 && facultyMembers.length === 0 && supportTeam.length === 0 && traineesAndFellows.length === 0 && (
{teamMembers.length > 0 && facultyMembers.length === 0 && supportTeam.length === 0 && traineesAndFellows.length === 0 && retiredStaff.length === 0 && (
<section className="py-16 text-center">
<div className="max-w-2xl mx-auto px-4">
<h2 className="text-2xl font-bold mb-4" style={{ color: '#012068' }}>