Maulana SodiqinandClaude
7e5e4cc29b
🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
900 lines
38 KiB
TypeScript
900 lines
38 KiB
TypeScript
import { FC, ReactElement, useState, useEffect } from 'react';
|
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
import { Link, useParams, useNavigate } from 'react-router';
|
|
import {
|
|
useTeamById,
|
|
useTeamMembers,
|
|
useInviteMember,
|
|
useTeamJoinRequests,
|
|
useRespondToJoinRequest,
|
|
useLeaveTeam,
|
|
useDeleteTeam,
|
|
ETeamMemberRole,
|
|
useAuthStore,
|
|
} from '@imphnen-frontend-service/service';
|
|
import { toast } from 'sonner';
|
|
import { Icon } from '@iconify/react';
|
|
|
|
const MAX_TEAM_MEMBERS = 5;
|
|
|
|
// Image component with loading state
|
|
const ImageWithLoader: FC<{
|
|
src: string;
|
|
alt: string;
|
|
className?: string;
|
|
onLoad?: () => void;
|
|
}> = ({ src, alt, className, onLoad }) => {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
|
|
return (
|
|
<div className="relative">
|
|
{!isLoaded && (
|
|
<div
|
|
className={`absolute inset-0 bg-gray-200 animate-pulse ${className}`}
|
|
/>
|
|
)}
|
|
<img
|
|
src={src}
|
|
alt={alt}
|
|
className={`${className} ${
|
|
isLoaded ? 'opacity-100' : 'opacity-0'
|
|
} transition-opacity duration-300`}
|
|
onLoad={() => {
|
|
setIsLoaded(true);
|
|
onLoad?.();
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const TeamDashboardPage: FC = (): ReactElement => {
|
|
const { teamId } = useParams<{ teamId: string }>();
|
|
const navigate = useNavigate();
|
|
const { session } = useAuthStore();
|
|
const [showInviteModal, setShowInviteModal] = useState(false);
|
|
const [showJoinRequestsModal, setShowJoinRequestsModal] = useState(false);
|
|
const [showLeaveModal, setShowLeaveModal] = useState(false);
|
|
const [showDeleteModal, setShowDeleteModal] = useState(false);
|
|
const [deleteConfirmText, setDeleteConfirmText] = useState('');
|
|
const [inviteEmail, setInviteEmail] = useState('');
|
|
const [imagesLoaded, setImagesLoaded] = useState(false);
|
|
const [imageLoadCount, setImageLoadCount] = useState(0);
|
|
|
|
// Calculate total images to load (banner + logo + member avatars)
|
|
const totalImagesToLoad = 0; // Simplified - disable image loading overlay
|
|
|
|
const handleImageLoad = () => {
|
|
setImageLoadCount((prev) => {
|
|
const newCount = prev + 1;
|
|
if (newCount >= totalImagesToLoad) {
|
|
setImagesLoaded(true);
|
|
}
|
|
return newCount;
|
|
});
|
|
};
|
|
|
|
const handleImageError = () => {
|
|
// Treat error as loaded to not block the UI
|
|
handleImageLoad();
|
|
};
|
|
|
|
// Set images as loaded immediately since we disabled the loading overlay
|
|
useEffect(() => {
|
|
setImagesLoaded(true);
|
|
}, []);
|
|
|
|
const { data: teamData, isLoading: isLoadingTeam } = useTeamById(
|
|
teamId || ''
|
|
);
|
|
const { data: membersData, isLoading: isLoadingMembers } = useTeamMembers(
|
|
teamId || ''
|
|
);
|
|
|
|
const team = teamData?.data;
|
|
const members = membersData?.data || [];
|
|
const currentUserId = session?.user?.id;
|
|
const isLeader = currentUserId === team?.leader_id;
|
|
|
|
// Only fetch join requests if user is the team leader
|
|
const { data: joinRequestsData } = useTeamJoinRequests(
|
|
teamId || '',
|
|
!!teamId && isLeader
|
|
);
|
|
const { mutateAsync: inviteMember, isPending: isInviting } = useInviteMember(
|
|
teamId || ''
|
|
);
|
|
const { mutateAsync: respondToJoinRequest, isPending: isResponding } =
|
|
useRespondToJoinRequest(teamId || '');
|
|
const { mutateAsync: leaveTeam, isPending: isLeaving } = useLeaveTeam();
|
|
const { mutateAsync: deleteTeam, isPending: isDeleting } = useDeleteTeam();
|
|
|
|
const joinRequests = joinRequestsData?.data || [];
|
|
const pendingJoinRequests = joinRequests.filter(
|
|
(req: any) => req.status === 'pending'
|
|
);
|
|
const isMember = members.some(
|
|
(member: any) => member.user_id === currentUserId
|
|
);
|
|
const canInvite = isLeader && members.length < MAX_TEAM_MEMBERS;
|
|
|
|
const handleInviteMember = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
if (!inviteEmail.trim() || isInviting) return;
|
|
|
|
try {
|
|
await inviteMember({ email: inviteEmail.trim() });
|
|
toast.success('Invitation sent successfully!');
|
|
setInviteEmail('');
|
|
setShowInviteModal(false);
|
|
} catch (error) {
|
|
console.error('Failed to invite member:', error);
|
|
toast.error('Failed to send invitation');
|
|
}
|
|
};
|
|
|
|
const handleRespondToJoinRequest = async (
|
|
requestId: string,
|
|
action: 'approve' | 'reject'
|
|
) => {
|
|
try {
|
|
await respondToJoinRequest({ requestId, action });
|
|
toast.success(
|
|
action === 'approve' ? 'Request approved!' : 'Request rejected'
|
|
);
|
|
} catch (error) {
|
|
console.error('Failed to respond to join request:', error);
|
|
toast.error('Failed to process request');
|
|
}
|
|
};
|
|
|
|
const handleLeaveTeam = async () => {
|
|
if (!teamId) return;
|
|
|
|
try {
|
|
await leaveTeam(teamId);
|
|
toast.success('You have left the team');
|
|
navigate('/dashboard');
|
|
} catch (error) {
|
|
console.error('Failed to leave team:', error);
|
|
toast.error('Failed to leave team');
|
|
}
|
|
};
|
|
|
|
const handleDeleteTeam = async () => {
|
|
if (!teamId) return;
|
|
|
|
try {
|
|
await deleteTeam(teamId);
|
|
toast.success('Team deleted successfully');
|
|
navigate('/dashboard');
|
|
} catch (error: any) {
|
|
console.error('Failed to delete team:', error);
|
|
toast.error(error?.message || 'Failed to delete team');
|
|
}
|
|
};
|
|
|
|
if (isLoadingTeam || isLoadingMembers) {
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 dark:bg-gray-950">
|
|
{/* Skeleton Header */}
|
|
<div className="bg-white dark:bg-gray-950 border-b">
|
|
<div className="w-full h-48 bg-gray-200 dark:bg-gray-800 animate-pulse" />
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-4">
|
|
<div className="w-20 h-20 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse -mt-10" />
|
|
<div>
|
|
<div className="h-8 w-48 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
|
|
<div className="h-4 w-32 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
|
|
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
|
<div className="grid gap-6 lg:grid-cols-3">
|
|
{/* Main Content Skeleton */}
|
|
<div className="lg:col-span-2 space-y-6">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
|
|
<div className="h-6 w-32 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
|
|
<div className="space-y-2">
|
|
<div className="h-4 w-full bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
|
|
<div className="h-4 w-3/4 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
|
|
<div className="h-4 w-5/6 bg-gray-200 dark:bg-gray-800 rounded animate-pulse" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sidebar Skeleton */}
|
|
<div className="space-y-6">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-6">
|
|
<div className="h-6 w-40 bg-gray-300 dark:bg-gray-700 rounded animate-pulse mb-4" />
|
|
<div className="space-y-4">
|
|
{[1, 2, 3].map((i) => (
|
|
<div key={i} className="flex items-center space-x-3">
|
|
<div className="w-12 h-12 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse" />
|
|
<div>
|
|
<div className="h-4 w-24 bg-gray-300 dark:bg-gray-700 rounded animate-pulse" />
|
|
<div className="h-3 w-16 bg-gray-200 dark:bg-gray-800 rounded animate-pulse mt-1" />
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Loading Overlay */}
|
|
<div className="fixed inset-0 bg-white/60 dark:bg-black/50 flex items-center justify-center z-50">
|
|
<div className="text-center">
|
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
|
<p className="mt-4 text-gray-600 dark:text-white">
|
|
Loading team data...
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!team) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center min-h-screen">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Team not found
|
|
</h2>
|
|
<Button onClick={() => navigate('/dashboard')}>
|
|
Back to Dashboard
|
|
</Button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="min-h-screen bg-gray-50 relative dark:bg-gray-950">
|
|
{/* Loading overlay while images are loading */}
|
|
{!imagesLoaded && totalImagesToLoad > 0 && (
|
|
<div className="fixed inset-0 bg-white/80 flex items-center justify-center z-50">
|
|
<div className="text-center">
|
|
<div className="inline-block animate-spin rounded-full h-12 w-12 border-4 border-blue-600 border-t-transparent"></div>
|
|
<p className="mt-4 text-gray-600 font-medium">Loading images...</p>
|
|
<p className="text-sm text-gray-400 mt-1">
|
|
{imageLoadCount} / {totalImagesToLoad}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Header with Banner */}
|
|
<div className="bg-white dark:bg-gray-900 border-b dark:border-gray-700">
|
|
{team.banner && (
|
|
<div className="relative w-full aspect-3/1 overflow-hidden">
|
|
<div
|
|
className={`absolute inset-0 bg-gray-200 animate-pulse ${
|
|
imagesLoaded ? 'hidden' : ''
|
|
}`}
|
|
/>
|
|
<img
|
|
src={team.banner}
|
|
alt={team.name}
|
|
className={`absolute inset-0 w-full h-full object-cover transition-opacity duration-300 ${
|
|
imagesLoaded ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
onLoad={handleImageLoad}
|
|
onError={handleImageError}
|
|
/>
|
|
<div className="pointer-events-none absolute inset-0 bg-linear-to-b from-transparent via-black/20 to-black/60" />
|
|
</div>
|
|
)}
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-6">
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-center space-x-3 md:space-x-4">
|
|
{team.logo && (
|
|
<div className="relative shrink-0">
|
|
{!imagesLoaded && (
|
|
<div className="absolute inset-0 w-20 h-20 rounded-full bg-gray-300 dark:bg-gray-700 animate-pulse -mt-10" />
|
|
)}
|
|
<img
|
|
src={team.logo}
|
|
alt={team.name}
|
|
className={`w-16 h-16 md:w-20 md:h-20 rounded-full object-cover border-4 border-white shadow-lg -mt-8 md:-mt-10 transition-opacity duration-300 shrink-0 ${
|
|
imagesLoaded ? 'opacity-100' : 'opacity-0'
|
|
}`}
|
|
onLoad={handleImageLoad}
|
|
onError={handleImageError}
|
|
/>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<h1 className="text-xl md:text-3xl font-bold text-gray-900 dark:text-white line-clamp-2">
|
|
{team.name}
|
|
</h1>
|
|
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 mt-1 line-clamp-1 font-sans flex items-center">
|
|
<Icon icon="mdi:map-marker" className="inline-block mr-1" />
|
|
<span>{team.city}</span>
|
|
</p>
|
|
<div className="flex flex-wrap items-center gap-2 md:space-x-4 mt-2">
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
|
|
<Icon
|
|
icon="mdi:account-multiple"
|
|
className="inline-block mr-1"
|
|
/>
|
|
{members.length}{' '}
|
|
{members.length === 1 ? 'Member' : 'Members'}
|
|
</span>
|
|
<span className="text-sm text-gray-500 dark:text-gray-400 flex items-center">
|
|
<Icon
|
|
icon={
|
|
team.visibility === 'public' ? 'mdi:web' : 'mdi:lock'
|
|
}
|
|
className="inline-block mr-1"
|
|
/>
|
|
{team.visibility === 'public' ? 'Public' : 'Private'}
|
|
</span>
|
|
{isLeader && (
|
|
<span className="hidden md:inline-flex px-3 py-1 bg-blue-600 text-white rounded-md text-sm font-semibold shadow-sm items-center">
|
|
<Icon icon="mdi:crown" className="inline-block mr-1" />
|
|
<span>Team Leader</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4 md:py-8">
|
|
<div className="grid gap-4 md:gap-6 xl:grid-cols-3">
|
|
{/* Main Content */}
|
|
<div className="lg:col-span-2 space-y-4 md:space-y-6">
|
|
{/* Team Description */}
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
About Team
|
|
</h2>
|
|
<p className="text-gray-700 dark:text-gray-300 whitespace-pre-wrap break-all font-sans">
|
|
{team.description}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Team Actions - Only for Leader */}
|
|
{isLeader && (
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
Team Management
|
|
</h2>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
{/* Hide invite/join management after submission */}
|
|
{!team.has_submission && (
|
|
<>
|
|
<Button
|
|
className="w-full"
|
|
variant="secondary"
|
|
onClick={() => setShowInviteModal(true)}
|
|
disabled={!canInvite}
|
|
>
|
|
<Icon icon="mdi:plus" className="inline-block mr-2" />
|
|
Invite Member{' '}
|
|
{!canInvite && `(${members.length}/${MAX_TEAM_MEMBERS})`}
|
|
</Button>
|
|
<Button
|
|
className="w-full relative"
|
|
variant="secondary"
|
|
onClick={() => setShowJoinRequestsModal(true)}
|
|
>
|
|
<Icon icon="mdi:email" className="inline-block mr-2" /> Join
|
|
Requests
|
|
{pendingJoinRequests.length > 0 && (
|
|
<span className="absolute -top-2 -right-2 bg-red-500 text-white text-xs font-bold rounded-full w-6 h-6 flex items-center justify-center">
|
|
{pendingJoinRequests.length}
|
|
</span>
|
|
)}
|
|
</Button>
|
|
</>
|
|
)}
|
|
{!team.has_submission && (
|
|
<Link to={`/teams/${teamId}/edit`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon icon="mdi:pencil" className="inline-block mr-2" />
|
|
Edit Team Info
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
<Link to={`/teams/${teamId}/members`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon
|
|
icon="mdi:account-group"
|
|
className="inline-block mr-2"
|
|
/>
|
|
View Members
|
|
</Button>
|
|
</Link>
|
|
<Link to={`/teams/${teamId}/chat`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon icon="mdi:chat" className="inline-block mr-2" />
|
|
Team Chat
|
|
</Button>
|
|
</Link>
|
|
{team.has_submission ? (
|
|
<Link to={`/teams/${teamId}/submission`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon icon="mdi:file-document" className="inline-block mr-2" />
|
|
View Submission
|
|
</Button>
|
|
</Link>
|
|
) : (
|
|
<Link to={`/teams/${teamId}/submit`}>
|
|
<Button className="w-full" disabled={members.length < 2}>
|
|
<Icon icon="mdi:rocket" className="inline-block mr-2" />
|
|
Submit Project
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
{!team.has_submission && !canInvite && members.length >= MAX_TEAM_MEMBERS && (
|
|
<p className="text-sm text-gray-600 dark:text-gray-400 mt-3 text-center">
|
|
Maximum team size reached ({MAX_TEAM_MEMBERS} members)
|
|
</p>
|
|
)}
|
|
{/* Danger Zone - Only show when leader is alone and no submission */}
|
|
{members.length === 1 && !team.has_submission && (
|
|
<div className="mt-6 pt-4 border-t border-gray-200 dark:border-gray-700">
|
|
<h3 className="text-sm font-medium text-red-600 dark:text-red-400 mb-3">
|
|
Danger Zone
|
|
</h3>
|
|
<Button
|
|
className="w-full bg-red-600 hover:bg-red-700 text-white"
|
|
onClick={() => setShowDeleteModal(true)}
|
|
>
|
|
<Icon icon="mdi:delete" className="inline-block mr-2" />
|
|
Delete Team
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{/* Quick Actions for Members (non-leaders) */}
|
|
{!isLeader && isMember && (
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
|
<h2 className="text-lg md:text-xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
Quick Actions
|
|
</h2>
|
|
<div className="grid gap-3 sm:grid-cols-2">
|
|
<Link to={`/teams/${teamId}/chat`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon icon="mdi:chat" className="inline-block mr-2" />
|
|
Team Chat
|
|
</Button>
|
|
</Link>
|
|
{team.has_submission && (
|
|
<Link to={`/teams/${teamId}/submission`}>
|
|
<Button className="w-full" variant="secondary">
|
|
<Icon icon="mdi:file-document" className="inline-block mr-2" />
|
|
View Submission
|
|
</Button>
|
|
</Link>
|
|
)}
|
|
<Button
|
|
className="w-full bg-red-600 hover:bg-red-700 text-white"
|
|
onClick={() => setShowLeaveModal(true)}
|
|
>
|
|
<Icon icon="mdi:exit-run" className="inline-block mr-2" />
|
|
Leave Team
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Warning for single member teams */}
|
|
{members.length === 1 && !team.has_submission && isMember && (
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 md:p-6">
|
|
<div className="flex items-center space-x-3">
|
|
<span className="text-3xl">⚠️</span>
|
|
<div>
|
|
<h3 className="font-bold text-amber-900 dark:text-amber-400">
|
|
Team Needs More Members
|
|
</h3>
|
|
<p className="text-amber-700 dark:text-amber-300 text-sm">
|
|
Your team needs at least 2 members to submit a project. Invite someone or wait for join requests!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Submission Status - Only show to members */}
|
|
{team.has_submission && isMember && (
|
|
<div className="bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 rounded-lg p-4 md:p-6">
|
|
<div className="flex items-center space-x-3">
|
|
<span className="text-3xl">✅</span>
|
|
<div>
|
|
<h3 className="font-bold text-green-900 dark:text-green-400">
|
|
Project Submitted
|
|
</h3>
|
|
<p className="text-green-700 dark:text-green-300 text-sm">
|
|
Your team has successfully submitted a project
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Link to={`/teams/${teamId}/submission`}>
|
|
<Button className="mt-4 w-full" variant="secondary">
|
|
View Submission Details
|
|
</Button>
|
|
</Link>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Sidebar */}
|
|
<div className="space-y-4 md:space-y-6">
|
|
{/* Team Leader */}
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
|
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
Team Leader
|
|
</h3>
|
|
{team.leader && (
|
|
<button
|
|
onClick={() => navigate(`/users/${team.leader.id}`)}
|
|
className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
|
|
>
|
|
{team.leader.avatar ? (
|
|
<img
|
|
src={team.leader.avatar}
|
|
alt={team.leader.fullname}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
<span className="text-gray-500 dark:text-gray-400">
|
|
👤
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div>
|
|
<p className="font-medium text-gray-900 dark:text-white">
|
|
{team.leader.fullname}
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{team.leader.email}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Team Members */}
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-md p-4 md:p-6">
|
|
<h3 className="text-base md:text-lg font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
Members ({members.length})
|
|
</h3>
|
|
<div className="space-y-3">
|
|
{members.map((member: any) => (
|
|
<button
|
|
key={member.id}
|
|
onClick={() => navigate(`/users/${member.user.id}`)}
|
|
className="w-full flex items-center space-x-3 hover:bg-gray-100 dark:hover:bg-gray-700 rounded-lg p-2 transition-colors text-left cursor-pointer"
|
|
>
|
|
{member.user?.avatar ? (
|
|
<img
|
|
src={member.user.avatar}
|
|
alt={member.user.fullname || 'Member'}
|
|
className="w-10 h-10 rounded-full object-cover"
|
|
onLoad={handleImageLoad}
|
|
onError={handleImageError}
|
|
/>
|
|
) : (
|
|
<div className="w-10 h-10 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
<span className="text-gray-500 dark:text-gray-400 text-sm">
|
|
👤
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<p className="font-medium text-gray-900 dark:text-white truncate">
|
|
{member.user?.fullname || 'Unknown'}
|
|
</p>
|
|
<p className="text-xs text-gray-500 dark:text-gray-400">
|
|
{member.role === ETeamMemberRole.LEADER
|
|
? 'Leader'
|
|
: 'Member'}
|
|
</p>
|
|
</div>
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Invite Member Modal */}
|
|
{showInviteModal && (
|
|
<div className="fixed inset-0 bg-black/20 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Invite Team Member
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400 mb-4 font-sans">
|
|
Send an invitation to join your team. The invited member will see
|
|
the invitation on their dashboard after logging in.
|
|
</p>
|
|
<div className="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3 mb-6">
|
|
<p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
|
|
<strong>Important:</strong> The email you enter must match the
|
|
GitHub email address the member uses to sign in.
|
|
</p>
|
|
</div>
|
|
<form onSubmit={handleInviteMember} className="space-y-4">
|
|
<div>
|
|
<label
|
|
htmlFor="invite-email"
|
|
className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
|
|
>
|
|
Email Address
|
|
</label>
|
|
<input
|
|
id="invite-email"
|
|
type="email"
|
|
value={inviteEmail}
|
|
onChange={(e) => setInviteEmail(e.target.value)}
|
|
placeholder="Enter email address..."
|
|
className="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
|
|
required
|
|
/>
|
|
<p className="text-sm text-gray-500 dark:text-gray-400 mt-1">
|
|
Current members: {members.length}/{MAX_TEAM_MEMBERS}
|
|
</p>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
className="flex-1"
|
|
onClick={() => {
|
|
setShowInviteModal(false);
|
|
setInviteEmail('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
type="submit"
|
|
className="flex-1"
|
|
disabled={!inviteEmail.trim() || isInviting}
|
|
>
|
|
{isInviting ? 'Sending...' : 'Send Invitation'}
|
|
</Button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Join Requests Modal */}
|
|
{showJoinRequestsModal && (
|
|
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-2xl w-full p-6 max-h-[80vh] overflow-y-auto">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white">
|
|
Join Requests ({pendingJoinRequests.length})
|
|
</h2>
|
|
<button
|
|
onClick={() => setShowJoinRequestsModal(false)}
|
|
className="text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 text-2xl cursor-pointer"
|
|
>
|
|
✕
|
|
</button>
|
|
</div>
|
|
|
|
{pendingJoinRequests.length === 0 ? (
|
|
<div className="text-center py-12">
|
|
<p className="text-gray-600 dark:text-gray-400 text-lg">
|
|
No pending join requests
|
|
</p>
|
|
<p className="text-gray-500 dark:text-gray-500 text-sm mt-2 font-sans">
|
|
When users request to join your team, they'll appear here
|
|
</p>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{pendingJoinRequests.map((request: any) => (
|
|
<div
|
|
key={request.id}
|
|
className="border border-gray-200 dark:border-gray-700 rounded-lg p-4 hover:shadow-md transition-shadow"
|
|
>
|
|
<div className="flex items-start justify-between">
|
|
<div className="flex items-start space-x-3 flex-1">
|
|
{request.user?.avatar ? (
|
|
<img
|
|
src={request.user.avatar}
|
|
alt={request.user.fullname}
|
|
className="w-12 h-12 rounded-full object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-12 h-12 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
|
|
<span className="text-gray-500 dark:text-gray-400 text-xl">
|
|
<Icon
|
|
icon="mdi:account-circle"
|
|
className="text-3xl"
|
|
/>
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="flex-1">
|
|
<p className="font-semibold text-gray-900 dark:text-white">
|
|
{request.user?.fullname || 'Unknown User'}
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
{request.user?.email}
|
|
</p>
|
|
{request.message && (
|
|
<div className="mt-2 bg-gray-50 dark:bg-gray-800 rounded-lg p-3">
|
|
<p className="text-sm text-gray-700 dark:text-gray-300">
|
|
<strong>Message:</strong> {request.message}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<p className="text-sm text-gray-500 dark:text-gray-500 mt-2 font-sans">
|
|
Requested{' '}
|
|
{new Date(request.created_at).toLocaleDateString()}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex space-x-2 mt-4 justify-end">
|
|
<Button
|
|
onClick={() =>
|
|
handleRespondToJoinRequest(request.id, 'approve')
|
|
}
|
|
disabled={
|
|
isResponding || members.length >= MAX_TEAM_MEMBERS
|
|
}
|
|
className="px-4 py-2 text-sm"
|
|
>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
onClick={() =>
|
|
handleRespondToJoinRequest(request.id, 'reject')
|
|
}
|
|
disabled={isResponding}
|
|
variant="secondary"
|
|
className="px-4 py-2 text-sm"
|
|
>
|
|
Reject
|
|
</Button>
|
|
</div>
|
|
|
|
{members.length >= MAX_TEAM_MEMBERS && (
|
|
<div className="mt-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg p-3">
|
|
<p className="text-sm text-yellow-800 dark:text-yellow-300 font-sans">
|
|
Team is full ({MAX_TEAM_MEMBERS}/{MAX_TEAM_MEMBERS}{' '}
|
|
members). Remove a member before accepting new
|
|
requests.
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Leave Team Confirmation Modal */}
|
|
{showLeaveModal && (
|
|
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
<div className="text-center mb-6">
|
|
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
<Icon
|
|
icon="mdi:exit-run"
|
|
className="text-3xl text-red-600 dark:text-red-400"
|
|
/>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Leave Team?
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
Are you sure you want to leave <strong>{team?.name}</strong>?
|
|
</p>
|
|
</div>
|
|
<div className="bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-amber-800 dark:text-amber-300 font-sans">
|
|
<strong>Warning:</strong> If you leave, you will need to request to join again or be re-invited by the team leader.
|
|
</p>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
className="flex-1"
|
|
onClick={() => setShowLeaveModal(false)}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleLeaveTeam}
|
|
className="flex-1 bg-red-600 hover:bg-red-700"
|
|
disabled={isLeaving}
|
|
>
|
|
{isLeaving ? 'Leaving...' : 'Leave Team'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Delete Team Confirmation Modal */}
|
|
{showDeleteModal && (
|
|
<div className="fixed inset-0 bg-black/30 dark:bg-black/50 backdrop-blur-sm flex items-center justify-center z-50 p-4">
|
|
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-xl max-w-md w-full p-6">
|
|
<div className="text-center mb-6">
|
|
<div className="mx-auto w-16 h-16 bg-red-100 dark:bg-red-900/30 rounded-full flex items-center justify-center mb-4">
|
|
<Icon
|
|
icon="mdi:delete-alert"
|
|
className="text-3xl text-red-600 dark:text-red-400"
|
|
/>
|
|
</div>
|
|
<h2 className="text-2xl font-bold text-gray-900 dark:text-white mb-2">
|
|
Delete Team?
|
|
</h2>
|
|
<p className="text-gray-600 dark:text-gray-400">
|
|
This action is <strong className="text-red-600 dark:text-red-400">permanent</strong> and cannot be undone.
|
|
</p>
|
|
</div>
|
|
<div className="bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg p-4 mb-6">
|
|
<p className="text-sm text-red-800 dark:text-red-300 font-sans">
|
|
<strong>Warning:</strong> All team data, chat messages, and submissions will be permanently deleted.
|
|
</p>
|
|
</div>
|
|
<div className="mb-6">
|
|
<label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
Type <span className="font-bold text-red-600 dark:text-red-400">{team?.name}</span> to confirm:
|
|
</label>
|
|
<input
|
|
type="text"
|
|
value={deleteConfirmText}
|
|
onChange={(e) => setDeleteConfirmText(e.target.value)}
|
|
placeholder="Type team name here"
|
|
className="w-full px-4 py-2.5 border border-gray-300 dark:border-gray-600 rounded-lg focus:outline-none focus:ring-2 focus:ring-red-500 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder:text-gray-400 dark:placeholder:text-gray-500"
|
|
autoComplete="off"
|
|
/>
|
|
</div>
|
|
<div className="flex space-x-3">
|
|
<Button
|
|
type="button"
|
|
variant="secondary"
|
|
className="flex-1"
|
|
onClick={() => {
|
|
setShowDeleteModal(false);
|
|
setDeleteConfirmText('');
|
|
}}
|
|
>
|
|
Cancel
|
|
</Button>
|
|
<Button
|
|
onClick={handleDeleteTeam}
|
|
className="flex-1 bg-red-600 hover:bg-red-700"
|
|
disabled={isDeleting || deleteConfirmText !== team?.name}
|
|
>
|
|
{isDeleting ? 'Deleting...' : 'Delete Team'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default TeamDashboardPage;
|