414 lines
23 KiB
TypeScript
414 lines
23 KiB
TypeScript
import React from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import type { Event } from '../../types';
|
|
import EventCard from './EventCard';
|
|
import { API_BASE_URL } from '../../lib/config';
|
|
import { useAuth } from '../../context/AuthContext';
|
|
|
|
interface RegistrationsViewProps {
|
|
events: Event[];
|
|
bookedEventIds: string[];
|
|
userRegistrations: any[];
|
|
onToggleBooking: (id: string) => void;
|
|
onTrackStatus: (event: Event) => void;
|
|
currentUserName: string;
|
|
userRole?: string;
|
|
}
|
|
|
|
const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
|
|
return createPortal(children, document.body);
|
|
};
|
|
|
|
const RegistrationsView: React.FC<RegistrationsViewProps> = ({ events, bookedEventIds, userRegistrations, onToggleBooking, onTrackStatus, currentUserName, userRole }) => {
|
|
const { user } = useAuth();
|
|
const [showInspectModal, setShowInspectModal] = React.useState<{eventId: string, title: string, teamCode: string} | null>(null);
|
|
const [showRemoveConfirm, setShowRemoveConfirm] = React.useState<{member: any, eventId: string, teamCode: string} | null>(null);
|
|
const [showRemoveSuccess, setShowRemoveSuccess] = React.useState<{name: string} | null>(null);
|
|
const [showDisbandConfirm, setShowDisbandConfirm] = React.useState<{eventId: string, teamCode: string} | null>(null);
|
|
const [showLeaveConfirm, setShowLeaveConfirm] = React.useState<{eventId: string} | null>(null);
|
|
const [teamMembers, setTeamMembers] = React.useState<any[]>([]);
|
|
const [isProcessing, setIsProcessing] = React.useState(false);
|
|
const [copyingCode, setCopyingCode] = React.useState<string | null>(null);
|
|
|
|
const bookedEvents = events.filter(e => bookedEventIds.includes(e.id));
|
|
|
|
const handleCopyCode = async (code: string) => {
|
|
try {
|
|
await navigator.clipboard.writeText(code);
|
|
setCopyingCode(code);
|
|
setTimeout(() => setCopyingCode(null), 2000);
|
|
} catch (err) {
|
|
console.error("Copy failed", err);
|
|
}
|
|
};
|
|
|
|
const executeLeaveTeam = async (eventId: string) => {
|
|
if (!user) return;
|
|
setIsProcessing(true);
|
|
try {
|
|
const registrationId = `${user.id}_${eventId}`;
|
|
const res = await fetch(`${API_BASE_URL}/api/registrations/${registrationId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
team_code: null,
|
|
team_name: null,
|
|
is_team_leader: false
|
|
})
|
|
});
|
|
|
|
if (!res.ok) throw new Error("Failed to leave team");
|
|
|
|
setShowLeaveConfirm(null);
|
|
setShowInspectModal(null);
|
|
window.location.reload();
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to leave team");
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const executeDisbandTeam = async (eventId: string, code: string) => {
|
|
setIsProcessing(true);
|
|
try {
|
|
// Fetch all members of this team
|
|
const resMembers = await fetch(`${API_BASE_URL}/api/registrations?eventId=${eventId}&teamCode=${code}`);
|
|
const members = resMembers.ok ? await resMembers.json() : [];
|
|
|
|
// Update all members to disband
|
|
for (const m of members) {
|
|
const regId = m.id || `${m.userId || m.user_id}_${eventId}`;
|
|
await fetch(`${API_BASE_URL}/api/registrations/${regId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
team_code: null,
|
|
team_name: null,
|
|
is_team_leader: false
|
|
})
|
|
});
|
|
}
|
|
|
|
setShowDisbandConfirm(null);
|
|
setShowInspectModal(null);
|
|
window.location.reload();
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to disband team");
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
const handleInspectTeam = async (eventId: string, code: string, title: string) => {
|
|
setIsProcessing(true);
|
|
try {
|
|
const res = await fetch(`${API_BASE_URL}/api/registrations?eventId=${eventId}&teamCode=${code}`);
|
|
if (!res.ok) throw new Error("Failed to fetch team roster");
|
|
const members = await res.json();
|
|
|
|
const formattedMembers = members.map((m: any) => ({
|
|
user_id: m.userId || m.user_id,
|
|
name: m.userName || m.user_name,
|
|
reg_no: m.regNo || m.reg_no,
|
|
year: m.year,
|
|
department: m.dept || m.department,
|
|
section: m.section,
|
|
is_team_leader: m.isTeamLeader || m.is_team_leader
|
|
}));
|
|
|
|
setTeamMembers(formattedMembers);
|
|
setShowInspectModal({ eventId, title, teamCode: code });
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to fetch team members");
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="pt-40 pb-20 px-6 md:px-12 lg:px-24 animate-in fade-in duration-500 font-inter">
|
|
<h1 className="text-5xl font-black text-[#1A202C] mb-16 tracking-tight uppercase">My <span className="text-[#f97316]">Registrations</span></h1>
|
|
|
|
{bookedEvents.length > 0 ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
{bookedEvents.map(event => {
|
|
const reg = userRegistrations.find(r => String(r.eventId || r.event_id) === String(event.id));
|
|
const teamCodeVal = reg?.teamCode || reg?.team_code;
|
|
const teamNameVal = reg?.teamName || reg?.team_name;
|
|
const isLeaderVal = reg?.isTeamLeader || reg?.is_team_leader;
|
|
|
|
return (
|
|
<div key={event.id} className="space-y-6">
|
|
<EventCard
|
|
event={event}
|
|
isBooked={true}
|
|
onToggle={() => onToggleBooking(event.id)}
|
|
onTrackStatus={onTrackStatus}
|
|
currentUserName={currentUserName}
|
|
userRole={userRole}
|
|
registration={reg}
|
|
/>
|
|
|
|
{event.isTeamEvent && (
|
|
<div className="bg-white rounded-3xl p-6 border border-slate-200 shadow-sm relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 w-24 h-24 bg-orange-50/50 rounded-full -translate-y-1/2 translate-x-1/2 blur-2xl group-hover:bg-orange-100/50 transition-colors"></div>
|
|
{teamCodeVal ? (
|
|
<div className="flex items-center justify-between relative z-10">
|
|
<div>
|
|
<span className="block text-[8px] font-black text-emerald-500 uppercase tracking-widest mb-1 flex items-center gap-1">
|
|
<i className="fas fa-check-circle"></i> Status: Teamed Up
|
|
</span>
|
|
<h4 className="text-sm font-black text-slate-900 uppercase">{teamNameVal}</h4>
|
|
<p className="text-[10px] text-slate-400 font-bold mt-1 uppercase flex items-center gap-2">
|
|
CODE: <span className="text-slate-900 underline font-black">{teamCodeVal}</span>
|
|
<button
|
|
onClick={() => handleCopyCode(teamCodeVal)}
|
|
className="text-slate-400 hover:text-[#f97316] transition-colors"
|
|
title="Copy Code"
|
|
>
|
|
<i className={`fas ${copyingCode === teamCodeVal ? 'fa-check text-emerald-500' : 'fa-copy'}`}></i>
|
|
</button>
|
|
</p>
|
|
</div>
|
|
<div className="flex flex-col items-end gap-2">
|
|
<div className={`w-12 h-12 ${isLeaderVal ? 'bg-amber-100 text-amber-600' : 'bg-emerald-50 text-emerald-500'} rounded-2xl flex items-center justify-center text-lg shadow-sm border ${isLeaderVal ? 'border-amber-200' : 'border-emerald-100'}`}>
|
|
<i className={`fas ${isLeaderVal ? 'fa-crown animate-pulse' : 'fa-user-group'}`}></i>
|
|
</div>
|
|
<button
|
|
onClick={() => handleInspectTeam(event.id, teamCodeVal, event.title)}
|
|
className="text-[9px] font-black text-slate-400 uppercase tracking-widest hover:text-[#f97316] transition-colors flex items-center gap-1"
|
|
>
|
|
<i className="fas fa-search"></i> Inspect Team
|
|
</button>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-5 relative z-10">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-1.5 h-4 bg-slate-200 rounded-full"></div>
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Team Required</span>
|
|
</div>
|
|
<p className="text-[9px] text-slate-400 font-bold uppercase leading-relaxed">Please use the "Track Progress" button to manage your team for this event.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center min-h-[40vh] bg-white rounded-[40px] border border-dashed border-gray-300 p-10 text-center">
|
|
<i className="fas fa-ticket-alt text-6xl text-gray-200 mb-6"></i>
|
|
<p className="text-gray-400 text-xl font-medium max-w-sm">You haven't booked any events yet, or your previously registered events have been removed.</p>
|
|
</div>
|
|
)}
|
|
|
|
{showInspectModal && (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-[10000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[3rem] w-full max-w-2xl p-10 shadow-2xl animate-in zoom-in-95 duration-500 relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-2 bg-gradient-to-r from-[#f97316] to-amber-500"></div>
|
|
|
|
<div className="flex items-center justify-between mb-8">
|
|
<div>
|
|
<h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight">Team Roster</h3>
|
|
<p className="text-[10px] text-gray-400 font-bold uppercase tracking-widest mt-1">Code: <span className="text-[#f97316]">{showInspectModal.teamCode}</span> | {showInspectModal.title}</p>
|
|
</div>
|
|
<button onClick={() => setShowInspectModal(null)} className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
|
|
<i className="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="max-h-[50vh] overflow-y-auto no-scrollbar space-y-4 pr-2 mb-8">
|
|
{teamMembers.map((member, idx) => {
|
|
const isLeader = teamMembers.find(m => m.is_team_leader && m.name === currentUserName);
|
|
return (
|
|
<div key={idx} className="bg-slate-50 rounded-3xl p-6 flex items-center justify-between border border-slate-100 hover:border-slate-200 transition-all group">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-14 h-14 bg-white rounded-2xl flex items-center justify-center text-xl text-[#f97316] border border-slate-100 shadow-sm group-hover:scale-110 transition-transform">
|
|
<i className={`fas ${member.is_team_leader ? 'fa-crown' : 'fa-user'}`}></i>
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<h4 className="text-sm font-black text-slate-900 uppercase">{member.name}</h4>
|
|
{member.is_team_leader && <span className="bg-amber-100 text-amber-600 text-[8px] font-black px-2 py-0.5 rounded-full uppercase tracking-tighter">Leader</span>}
|
|
</div>
|
|
<p className="text-[10px] text-slate-400 font-bold mt-0.5 uppercase tracking-widest">{member.reg_no}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-center gap-6 text-right">
|
|
<div>
|
|
<p className="text-[9px] font-black text-slate-900 uppercase">{member.department}</p>
|
|
<p className="text-[8px] text-slate-400 font-bold uppercase">{member.year} • SEC {member.section}</p>
|
|
</div>
|
|
{isLeader && !member.is_team_leader && (
|
|
<button
|
|
onClick={() => {
|
|
setShowRemoveConfirm({
|
|
member,
|
|
eventId: showInspectModal.eventId,
|
|
teamCode: showInspectModal.teamCode
|
|
});
|
|
}}
|
|
className="w-10 h-10 rounded-xl bg-white text-rose-500 border border-rose-100 flex items-center justify-center transition-all hover:bg-rose-500 hover:text-white shadow-sm"
|
|
title="Remove from team"
|
|
>
|
|
<i className="fas fa-user-minus"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3">
|
|
{teamMembers.find(m => m.is_team_leader && m.name === currentUserName) ? (
|
|
<button
|
|
onClick={() => setShowDisbandConfirm({ eventId: showInspectModal.eventId, teamCode: showInspectModal.teamCode })}
|
|
disabled={isProcessing}
|
|
className="w-full py-4 bg-rose-50 text-rose-600 border border-rose-100 rounded-[2rem] font-black uppercase text-[10px] tracking-widest hover:bg-rose-100 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<i className="fas fa-trash-can"></i> Disband Team
|
|
</button>
|
|
) : (
|
|
<button
|
|
onClick={() => setShowLeaveConfirm({ eventId: showInspectModal?.eventId || '' })}
|
|
disabled={isProcessing}
|
|
className="w-full py-4 bg-amber-50 text-amber-600 border border-amber-100 rounded-[2rem] font-black uppercase text-[10px] tracking-widest hover:bg-amber-100 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<i className="fas fa-right-from-bracket"></i> Leave Team
|
|
</button>
|
|
)}
|
|
<button
|
|
onClick={() => setShowInspectModal(null)}
|
|
className="w-full py-5 bg-slate-900 text-white rounded-[2rem] font-black uppercase text-[11px] tracking-[0.2em] shadow-xl hover:bg-black transition-all active:scale-95"
|
|
>
|
|
Close Inspection
|
|
</button>
|
|
</div>
|
|
|
|
{/* Confirmation Modals (Portaled to prevent clipping) */}
|
|
{showRemoveConfirm && (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-[13000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-sm overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500">
|
|
<div className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-rose-50 text-rose-500 rounded-2xl flex items-center justify-center text-2xl mx-auto mb-6">
|
|
<i className="fas fa-user-slash"></i>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900 uppercase mb-2">Remove Member?</h3>
|
|
<p className="text-sm text-slate-500 font-medium">Are you sure you want to remove <span className="font-black text-slate-900 uppercase">{showRemoveConfirm.member.name}</span> from the team?</p>
|
|
</div>
|
|
<div className="p-6 bg-slate-50 flex gap-4">
|
|
<button onClick={() => setShowRemoveConfirm(null)} className="flex-1 py-4 bg-white text-slate-400 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:text-slate-900 transition-all border border-slate-200">Cancel</button>
|
|
<button
|
|
onClick={async () => {
|
|
setIsProcessing(true);
|
|
try {
|
|
const registrationId = `${showRemoveConfirm.member.user_id}_${showRemoveConfirm.eventId}`;
|
|
const res = await fetch(`${API_BASE_URL}/api/registrations/${registrationId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({
|
|
team_code: null,
|
|
team_name: null,
|
|
is_team_leader: false
|
|
})
|
|
});
|
|
if (!res.ok) throw new Error("Failed to remove member");
|
|
|
|
setTeamMembers(prev => prev.filter(m => m.user_id !== showRemoveConfirm.member.user_id));
|
|
const removedName = showRemoveConfirm.member.name;
|
|
setShowRemoveConfirm(null);
|
|
setShowRemoveSuccess({ name: removedName });
|
|
} catch (err) {
|
|
console.error(err);
|
|
alert("Failed to remove member");
|
|
} finally {
|
|
setIsProcessing(false);
|
|
}
|
|
}}
|
|
disabled={isProcessing}
|
|
className="flex-1 py-4 bg-rose-500 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-600 transition-all shadow-lg shadow-rose-200"
|
|
>
|
|
{isProcessing ? 'Removing...' : 'Confirm'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
|
|
{showRemoveSuccess && (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-[13000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-sm overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500">
|
|
<div className="p-10 text-center">
|
|
<div className="w-16 h-16 bg-emerald-50 text-emerald-500 rounded-2xl flex items-center justify-center text-2xl mx-auto mb-6">
|
|
<i className="fas fa-check-circle"></i>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900 uppercase mb-2">Member Removed</h3>
|
|
<p className="text-sm text-slate-500 font-medium"><span className="font-black text-slate-900 uppercase">{showRemoveSuccess.name}</span> has been removed.</p>
|
|
<button onClick={() => setShowRemoveSuccess(null)} className="mt-8 w-full py-4 bg-[#1A202C] text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-black transition-all shadow-xl shadow-slate-200">Got it</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
|
|
{showLeaveConfirm && (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-[13000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-sm overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500">
|
|
<div className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-rose-50 text-rose-500 rounded-2xl flex items-center justify-center text-2xl mx-auto mb-6">
|
|
<i className="fas fa-sign-out-alt"></i>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900 uppercase mb-2">Leave Team?</h3>
|
|
<p className="text-sm text-slate-500 font-medium">Are you sure you want to leave this team?</p>
|
|
</div>
|
|
<div className="p-6 bg-slate-50 flex gap-4">
|
|
<button onClick={() => setShowLeaveConfirm(null)} className="flex-1 py-4 bg-white text-slate-400 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:text-slate-900 transition-all border border-slate-200">Cancel</button>
|
|
<button onClick={() => executeLeaveTeam(showLeaveConfirm.eventId)} disabled={isProcessing} className="flex-1 py-4 bg-rose-500 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-600 transition-all shadow-lg shadow-rose-200">{isProcessing ? 'Leaving...' : 'Confirm'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
|
|
{showDisbandConfirm && (
|
|
<Portal>
|
|
<div className="fixed inset-0 z-[13000] flex items-center justify-center p-6 bg-slate-900/60 backdrop-blur-sm animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[2.5rem] w-full max-w-sm overflow-hidden shadow-2xl animate-in zoom-in-95 duration-500">
|
|
<div className="p-8 text-center">
|
|
<div className="w-16 h-16 bg-rose-50 text-rose-500 rounded-2xl flex items-center justify-center text-2xl mx-auto mb-6">
|
|
<i className="fas fa-ban"></i>
|
|
</div>
|
|
<h3 className="text-xl font-black text-slate-900 uppercase mb-2">Disband Team?</h3>
|
|
<p className="text-sm text-slate-500 font-medium">Are you sure? This will disband the team for <span className="font-black text-slate-900">ALL</span> members.</p>
|
|
</div>
|
|
<div className="p-6 bg-slate-50 flex gap-4">
|
|
<button onClick={() => setShowDisbandConfirm(null)} className="flex-1 py-4 bg-white text-slate-400 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:text-slate-900 transition-all border border-slate-200">Cancel</button>
|
|
<button onClick={() => executeDisbandTeam(showDisbandConfirm.eventId, showDisbandConfirm.teamCode)} disabled={isProcessing} className="flex-1 py-4 bg-rose-500 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-600 transition-all shadow-lg shadow-rose-200">{isProcessing ? 'Disbanding...' : 'Confirm'}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</Portal>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default RegistrationsView;
|