Hafid NurandGitHub
fe172cc128
* update hackathon landing page * feat(hackathon): draft winner certificate * feat(hackathon): refine winner certificate
487 lines
20 KiB
TypeScript
487 lines
20 KiB
TypeScript
import { FC, ReactElement, useEffect, useMemo, useState } from 'react';
|
|
import { Link, useNavigate } from 'react-router';
|
|
import {
|
|
useMyTeams,
|
|
useMyInvitations,
|
|
useRespondToInvitation,
|
|
useAuthStore,
|
|
useWinners,
|
|
} from '@imphnen-frontend-service/service';
|
|
import { toast } from 'sonner';
|
|
import { Button } from '@imphnen-frontend-service/ui/atoms';
|
|
import { Icon } from '@iconify/react';
|
|
import ProfilePage from '../profile/page';
|
|
import { encodeWinnerCertificateId } from '../../utils/certificate';
|
|
|
|
// Team features deadline: 2025-11-30 23:59:00 WIB (UTC+7)
|
|
const TEAM_FEATURES_DEADLINE = new Date('2025-11-30T16:59:00Z');
|
|
|
|
// Submission deadline: 2025-12-07 23:59:00 WIB (UTC+7)
|
|
const SUBMISSION_DEADLINE = new Date('2025-12-07T16:59:00Z');
|
|
|
|
type Invitation = {
|
|
id: string;
|
|
team: {
|
|
id?: string;
|
|
name?: string;
|
|
logo?: string;
|
|
banner?: string;
|
|
description?: string;
|
|
city?: string;
|
|
visibility?: string;
|
|
leader_id?: string;
|
|
};
|
|
inviter: {
|
|
id?: string;
|
|
fullname?: string;
|
|
email?: string;
|
|
avatar?: string;
|
|
};
|
|
};
|
|
|
|
const DashboardPage: FC = (): ReactElement => {
|
|
const { session } = useAuthStore();
|
|
const navigate = useNavigate();
|
|
const [showProfileModal, setShowProfileModal] = useState(false);
|
|
const [timeLeft, setTimeLeft] = useState<{
|
|
days: number;
|
|
hours: number;
|
|
minutes: number;
|
|
seconds: number;
|
|
} | null>(null);
|
|
|
|
// Check if team features are closed
|
|
const isTeamFeaturesClosed = new Date() >= TEAM_FEATURES_DEADLINE;
|
|
|
|
// Check if submission deadline passed
|
|
const isSubmissionDeadlinePassed = new Date() >= SUBMISSION_DEADLINE;
|
|
|
|
// Countdown timer
|
|
useEffect(() => {
|
|
if (isSubmissionDeadlinePassed) return;
|
|
|
|
const calculateTimeLeft = () => {
|
|
const now = new Date();
|
|
const difference = SUBMISSION_DEADLINE.getTime() - now.getTime();
|
|
|
|
if (difference <= 0) {
|
|
setTimeLeft(null);
|
|
return;
|
|
}
|
|
|
|
const days = Math.floor(difference / (1000 * 60 * 60 * 24));
|
|
const hours = Math.floor((difference / (1000 * 60 * 60)) % 24);
|
|
const minutes = Math.floor((difference / 1000 / 60) % 60);
|
|
const seconds = Math.floor((difference / 1000) % 60);
|
|
|
|
setTimeLeft({ days, hours, minutes, seconds });
|
|
};
|
|
|
|
calculateTimeLeft();
|
|
const timer = setInterval(calculateTimeLeft, 1000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, [isSubmissionDeadlinePassed]);
|
|
|
|
// Lock background scroll when profile modal is open
|
|
useEffect(() => {
|
|
if (showProfileModal) {
|
|
const originalOverflow = document.body.style.overflow;
|
|
document.body.style.overflow = 'hidden';
|
|
return () => {
|
|
document.body.style.overflow = originalOverflow || '';
|
|
};
|
|
}
|
|
}, [showProfileModal]);
|
|
const { data: teamsData } = useMyTeams();
|
|
const { data: winnersResponse } = useWinners();
|
|
const { data: invitationsData } = useMyInvitations();
|
|
const { mutateAsync: respondToInvitation } = useRespondToInvitation();
|
|
|
|
const user = session?.user;
|
|
const myTeams = teamsData?.data || [];
|
|
const invitations: Invitation[] = (invitationsData?.data ||
|
|
[]) as Invitation[];
|
|
|
|
const winnerEntry = useMemo(() => {
|
|
const team = (myTeams[0] as { id?: string } | null | undefined) || null;
|
|
const winners = winnersResponse?.data || [];
|
|
if (!team?.id) return null;
|
|
return winners.find((w) => w.team_id === team.id) || null;
|
|
}, [myTeams, winnersResponse?.data]);
|
|
|
|
const handleAcceptInvitation = async (invitationId: string) => {
|
|
try {
|
|
await respondToInvitation({ invitationId, action: 'accept' });
|
|
toast.success('Invitation accepted! You are now a team member.');
|
|
} catch (error) {
|
|
console.error('Failed to accept invitation:', error);
|
|
toast.error('Failed to accept invitation');
|
|
}
|
|
};
|
|
|
|
const handleRejectInvitation = async (invitationId: string) => {
|
|
try {
|
|
await respondToInvitation({ invitationId, action: 'reject' });
|
|
toast.success('Invitation declined');
|
|
} catch (error) {
|
|
console.error('Failed to reject invitation:', error);
|
|
toast.error('Failed to decline invitation');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="p-6 md:p-8 md:max-w-7xl w-full mx-auto">
|
|
<div className="mb-8">
|
|
<h1 className="text-3xl font-bold text-gray-900 dark:text-white">
|
|
Welcome, {user?.fullname || user?.email?.split('@')[0] || 'User'}!
|
|
</h1>
|
|
{user?.location && (
|
|
<p className="text-gray-600 dark:text-gray-400 mt-1 font-sans flex items-center space-x-1">
|
|
<Icon icon="heroicons:map-pin-16-solid" width="24" height="24" />
|
|
<span>{user.location}</span>
|
|
</p>
|
|
)}
|
|
</div>
|
|
|
|
{/* Winner Banner */}
|
|
{winnerEntry && myTeams.length > 0 && (
|
|
<div className="mb-8 bg-amber-50 dark:bg-amber-900/20 border-2 border-amber-400 dark:border-amber-500 rounded-lg p-6">
|
|
<div className="flex items-center justify-between flex-wrap gap-4">
|
|
<div className="flex items-center space-x-3 flex-1 min-w-0">
|
|
<span className="text-4xl shrink-0">🏆</span>
|
|
<div className="min-w-0">
|
|
<h3 className="font-bold text-amber-900 dark:text-amber-100 text-lg">
|
|
Selamat! Tim Anda meraih JUARA {winnerEntry.rank}
|
|
</h3>
|
|
<p className="text-amber-700 dark:text-amber-300 text-sm">
|
|
Anda dapat generate sertifikat penghargaan dan
|
|
membagikannya.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<button
|
|
onClick={async () => {
|
|
const team = myTeams[0] as { id?: string } | null | undefined;
|
|
if (!team?.id) return;
|
|
const certId = await encodeWinnerCertificateId(team.id);
|
|
navigate(`/certificate/winner/${encodeURIComponent(certId)}`);
|
|
}}
|
|
className="shrink-0 px-6 py-2 bg-amber-600 hover:bg-amber-700 dark:bg-amber-600 dark:hover:bg-amber-700 text-white font-medium rounded-lg transition-colors cursor-pointer"
|
|
>
|
|
Generate Sertifikat Juara
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Countdown Timer */}
|
|
{timeLeft && !isSubmissionDeadlinePassed && (
|
|
<div className="mb-8 bg-blue-50 dark:bg-blue-900/20 border-2 border-blue-500 rounded-lg p-6">
|
|
<div className="flex items-start space-x-3">
|
|
<span className="text-3xl">⏰</span>
|
|
<div className="flex-1">
|
|
<h3 className="font-bold text-blue-900 dark:text-blue-100 text-lg">
|
|
Submission Deadline
|
|
</h3>
|
|
<p className="text-blue-800 dark:text-blue-200 mt-2 text-sm font-sans">
|
|
Project submissions close on December 7, 2025 at 23:59 WIB
|
|
</p>
|
|
<div className="mt-4 grid grid-cols-4 gap-4">
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
{timeLeft.days}
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Days
|
|
</div>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
{timeLeft.hours.toString().padStart(2, '0')}
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Hours
|
|
</div>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
{timeLeft.minutes.toString().padStart(2, '0')}
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Minutes
|
|
</div>
|
|
</div>
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-3 text-center">
|
|
<div className="text-2xl font-bold text-blue-600 dark:text-blue-400">
|
|
{timeLeft.seconds.toString().padStart(2, '0')}
|
|
</div>
|
|
<div className="text-xs text-gray-600 dark:text-gray-400 mt-1">
|
|
Seconds
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{invitations.length > 0 && (
|
|
<div className="mb-8 bg-primary-50 dark:bg-blue-900/20 border border-primary-200 dark:border-blue-800 rounded-lg p-6">
|
|
<h2 className="text-xl font-bold text-gray-900 dark:text-white mb-4">
|
|
Team Invitations ({invitations.length})
|
|
</h2>
|
|
{isTeamFeaturesClosed && (
|
|
<div className="mb-4 bg-amber-50 dark:bg-amber-900/20 border border-amber-200 dark:border-amber-800 rounded-lg p-3">
|
|
<p className="text-sm text-amber-700 dark:text-amber-300 flex items-center gap-2">
|
|
<Icon icon="mdi:clock-alert" className="text-lg shrink-0" />
|
|
Team features are closed. You can no longer accept
|
|
invitations.
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div className="space-y-3 font-sans">
|
|
{invitations.map((invitation) => (
|
|
<div
|
|
key={invitation.id}
|
|
className="bg-white dark:bg-gray-900 p-4 rounded-lg shadow-sm flex items-center justify-between"
|
|
>
|
|
<div>
|
|
<p className="font-medium text-gray-900 dark:text-white">
|
|
{invitation.team?.name ?? 'Unnamed Team'}
|
|
</p>
|
|
<p className="text-sm text-gray-600 dark:text-gray-400">
|
|
Invited by{' '}
|
|
{invitation.inviter?.fullname ?? 'Unknown User'}
|
|
</p>
|
|
</div>
|
|
{!isTeamFeaturesClosed && (
|
|
<div className="flex space-x-2">
|
|
<Button
|
|
size="sm"
|
|
onClick={() => handleAcceptInvitation(invitation.id)}
|
|
>
|
|
Accept
|
|
</Button>
|
|
<Button
|
|
size="sm"
|
|
variant="secondary"
|
|
onClick={() => handleRejectInvitation(invitation.id)}
|
|
>
|
|
Decline
|
|
</Button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{myTeams.length > 0 ? (
|
|
(() => {
|
|
const team = myTeams[0] as any;
|
|
return (
|
|
<div className="mb-6 md:mb-8">
|
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-3 md:mb-4">
|
|
My Team
|
|
</h2>
|
|
<Link
|
|
to={'/teams/' + team.id}
|
|
className="block bg-white dark:bg-gray-900 rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow border dark:border-gray-700"
|
|
>
|
|
<img
|
|
src={team.banner || '/images/banner-imphnen.webp'}
|
|
alt={team.name}
|
|
className="w-full aspect-3/1 object-cover"
|
|
/>
|
|
<div className="p-4 md:p-6">
|
|
<div className="flex items-center space-x-4 mb-4">
|
|
{team.logo ? (
|
|
<img
|
|
src={team.logo}
|
|
alt={team.name}
|
|
className="w-16 h-16 rounded-full object-cover shrink-0"
|
|
/>
|
|
) : (
|
|
<div className="w-16 h-16 rounded-full bg-gray-200 dark:bg-gray-700 flex items-center justify-center shrink-0">
|
|
<Icon
|
|
icon="mdi:account-group"
|
|
className="text-gray-500 dark:text-gray-400 text-2xl"
|
|
/>
|
|
</div>
|
|
)}
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white leading-tight line-clamp-1">
|
|
{team.name}
|
|
</h3>
|
|
<div className="text-sm text-gray-600 dark:text-gray-400 flex items-center gap-3 font-sans mt-2">
|
|
{team.has_submission && (
|
|
<span className="inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 shrink-0">
|
|
<Icon
|
|
icon="mdi:check-circle"
|
|
className="text-sm"
|
|
/>
|
|
Submitted
|
|
</span>
|
|
)}
|
|
{team.city && (
|
|
<span className="flex items-center gap-1 truncate">
|
|
<Icon
|
|
icon="mdi:map-marker"
|
|
className="shrink-0"
|
|
/>
|
|
<span className="truncate">{team.city}</span>
|
|
</span>
|
|
)}
|
|
<span className="flex items-center gap-1 shrink-0">
|
|
<Icon icon="mdi:account-group" />
|
|
{team.member_count ||
|
|
team.members?.length ||
|
|
0}{' '}
|
|
member
|
|
{(team.member_count ||
|
|
team.members?.length ||
|
|
0) !== 1
|
|
? 's'
|
|
: ''}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{team.description && (
|
|
<p className="text-gray-600 dark:text-gray-400 line-clamp-3 font-sans">
|
|
{team.description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</Link>
|
|
</div>
|
|
);
|
|
})()
|
|
) : (
|
|
<div className="mb-6 md:mb-8 bg-white dark:bg-gray-900 rounded-lg shadow-md p-6 md:p-8">
|
|
<div className="text-center">
|
|
<div className="text-3xl md:text-4xl mb-2 md:mb-3">👋</div>
|
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white mb-1 md:mb-2">
|
|
You are not in a team yet
|
|
</h2>
|
|
<p className="text-sm md:text-base text-gray-600 dark:text-gray-400 font-sans">
|
|
Use the sidebar to browse teams or create your own
|
|
</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="mt-8 bg-white dark:bg-gray-900 rounded-xl shadow-lg">
|
|
<div className="bg-linear-to-r from-primary-600 to-primary-500 h-24 rounded-t-xl"></div>
|
|
<div className="px-4 md:px-8 pb-4 md:pb-8 max-w-7xl">
|
|
<div className="flex flex-col md:flex-row md:items-start -mt-12 mb-4 md:mb-6">
|
|
<div className="flex flex-col md:flex-row items-start">
|
|
{user?.avatar ? (
|
|
<img
|
|
src={user.avatar}
|
|
alt={user.fullname || 'User'}
|
|
className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg object-cover"
|
|
/>
|
|
) : (
|
|
<div className="w-20 h-20 md:w-24 md:h-24 rounded-full border-4 border-white dark:border-gray-700 shadow-lg bg-gray-200 dark:bg-gray-700 flex items-center justify-center">
|
|
<span className="text-gray-400 dark:text-gray-500 text-3xl md:text-4xl font-sans">
|
|
U
|
|
</span>
|
|
</div>
|
|
)}
|
|
<div className="md:ml-6 mt-4 md:mt-14">
|
|
<h2 className="text-xl md:text-2xl font-bold text-gray-900 dark:text-white">
|
|
{user?.fullname ||
|
|
user?.email?.split('@')[0] ||
|
|
'Unnamed User'}
|
|
</h2>
|
|
|
|
{user?.location ? (
|
|
<p className="text-gray-600 dark:text-gray-400 flex items-center mt-1 text-sm md:text-base font-sans">
|
|
<Icon
|
|
icon="heroicons:map-pin-16-solid"
|
|
width="16"
|
|
height="16"
|
|
/>
|
|
<span className="ml-1">{user.location}</span>
|
|
</p>
|
|
) : (
|
|
<Link
|
|
to="/onboarding/user"
|
|
className="text-primary-500 dark:text-blue-400 hover:text-primary-600 dark:hover:text-blue-300 text-sm md:text-sm mt-1 flex items-center"
|
|
>
|
|
<span className="font-sans">Complete your profile</span>
|
|
<Icon
|
|
icon="ic:baseline-chevron-right"
|
|
width="24"
|
|
height="24"
|
|
/>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
</div>
|
|
{user?.location && (
|
|
<button
|
|
type="button"
|
|
onClick={() => setShowProfileModal(true)}
|
|
className="mt-3 md:mt-14 md:ml-auto inline-flex items-center justify-center px-3 py-1.5 md:px-4 md:py-2 bg-primary-500 text-white rounded-lg text md:text-sm font-medium shadow-sm hover:bg-primary-600 transition-colors w-full md:w-auto cursor-pointer"
|
|
>
|
|
Edit Profile
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="space-y-4 md:space-y-6 w-full max-w-full">
|
|
{user?.bio && (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm w-full max-w-full overflow-x-hidden">
|
|
<h3 className="text-sm font-semibold text-gray-700 dark:text-gray-300 uppercase tracking-wide mb-2">
|
|
About
|
|
</h3>
|
|
<p className="text-gray-800 dark:text-gray-200 leading-relaxed line-clamp-3 wrap-break-word break-all overflow-hidden w-full max-w-full">
|
|
{user.bio}
|
|
</p>
|
|
</div>
|
|
)}
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
|
Contact
|
|
</h3>
|
|
<div className="flex items-center text-gray-700 dark:text-gray-300">
|
|
<span className="text-gray-900 dark:text-white">
|
|
{user?.email}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{user?.skills && user.skills.length > 0 && (
|
|
<div className="bg-white dark:bg-gray-800 rounded-lg p-4 shadow-sm">
|
|
<h3 className="font-semibold text-gray-700 dark:text-gray-300 tracking-wide mb-3">
|
|
Skills
|
|
</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{user.skills.map((skill: string) => (
|
|
<span
|
|
key={skill}
|
|
className="inline-flex items-center px-4 py-2 border border-primary-600 dark:border-gray-500 text-primary-600 dark:text-white rounded-4xl text-xs font-medium dark:bg-gray-600"
|
|
>
|
|
{skill}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<ProfilePage
|
|
open={showProfileModal}
|
|
onClose={() => setShowProfileModal(false)}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default DashboardPage;
|