639 lines
34 KiB
TypeScript
639 lines
34 KiB
TypeScript
import React, { useState, useMemo, useEffect } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import { Event } from '../types';
|
|
import { CATEGORIES, DOMAIN_MAP } from '../constants';
|
|
import { supabase } from '../supabase';
|
|
import * as XLSX from 'xlsx-js-style';
|
|
|
|
type ParticipantsSubView = 'CATEGORIES' | 'DOMAINS' | 'EVENTS' | 'STUDENTS';
|
|
interface FacultyParticipantsViewProps {
|
|
events: Event[];
|
|
localRegistrations?: any[];
|
|
currentUserId?: string;
|
|
}
|
|
|
|
const FacultyParticipantsView: React.FC<FacultyParticipantsViewProps> = ({ events, localRegistrations = [], currentUserId }) => {
|
|
const [currentView, setCurrentView] = useState<ParticipantsSubView>('STUDENTS');
|
|
const [selectedCategory, setSelectedCategory] = useState<string | null>(null);
|
|
const [selectedDomain, setSelectedDomain] = useState<string | null>(null);
|
|
const [selectedEventId, setSelectedEventId] = useState<string | null>(null);
|
|
const [searchTerm, setSearchTerm] = useState('');
|
|
const [showEventFilter, setShowEventFilter] = useState(false);
|
|
const [showSideFilter, setShowSideFilter] = useState(false);
|
|
const [selectedDepts, setSelectedDepts] = useState<string[]>([]);
|
|
const [selectedYears, setSelectedYears] = useState<string[]>([]);
|
|
const [activeFilterTab, setActiveFilterTab] = useState<'DEPT' | 'YEAR'>('DEPT');
|
|
const [registrations, setRegistrations] = useState<any[]>(localRegistrations);
|
|
const [isLoading, setIsLoading] = useState(true);
|
|
const [selectedStudentIds, setSelectedStudentIds] = useState<Set<string>>(new Set());
|
|
const [studentTypeFilter, setStudentTypeFilter] = useState<'INTERNAL' | 'EXTERNAL'>('INTERNAL');
|
|
const [externalUserIds, setExternalUserIds] = useState<Set<string>>(new Set());
|
|
|
|
// Fetch registrations directly from Supabase for reliability
|
|
useEffect(() => {
|
|
const fetchRegistrations = async () => {
|
|
setIsLoading(true);
|
|
let { data, error } = await supabase
|
|
.from('participants')
|
|
.select('*')
|
|
.order('created_at', { ascending: false });
|
|
|
|
if (error) {
|
|
// Fallback to registrations if participants table doesn't exist yet
|
|
const fallback = await supabase
|
|
.from('registrations')
|
|
.select('*')
|
|
.order('registered_at', { ascending: false });
|
|
data = fallback.data;
|
|
error = fallback.error;
|
|
}
|
|
|
|
if (data && !error) {
|
|
setRegistrations(data);
|
|
} else if (localRegistrations.length > 0) {
|
|
setRegistrations(localRegistrations);
|
|
}
|
|
|
|
const { data: extUsers } = await supabase.from('externalusers').select('id');
|
|
if (extUsers) {
|
|
setExternalUserIds(new Set(extUsers.map(u => u.id)));
|
|
}
|
|
setIsLoading(false);
|
|
};
|
|
fetchRegistrations();
|
|
}, []);
|
|
|
|
const departments = ['CSBS', 'AIDS', 'AIML', 'ECE', 'VLSI', 'H&S', 'CCE', 'CSE', 'MECH', 'BIO-TECH', 'Information Technology (IT)', 'Electrical & Electronics Engineering (EEE)', 'Civil Engineering', 'Biomedical Engineering', 'Chemical Engineering', 'Aeronautical / Aerospace Engineering', 'Mechatronics Engineering', 'Others'];
|
|
const years = ['1st Year', '2nd Year', '3rd Year', '4th Year', '5th Year'];
|
|
|
|
const handleCategorySelect = (id: string) => {
|
|
setSelectedCategory(id);
|
|
setCurrentView('DOMAINS');
|
|
};
|
|
|
|
const handleDomainSelect = (id: string) => {
|
|
setSelectedDomain(id);
|
|
setCurrentView('EVENTS');
|
|
};
|
|
|
|
const handleEventSelect = (id: string) => {
|
|
setSelectedEventId(id);
|
|
setCurrentView('STUDENTS');
|
|
};
|
|
|
|
const handleBack = () => {
|
|
if (currentView === 'STUDENTS') {
|
|
setSelectedEventId(null);
|
|
setCurrentView('EVENTS');
|
|
} else if (currentView === 'EVENTS') {
|
|
setSelectedDomain(null);
|
|
setCurrentView('DOMAINS');
|
|
} else if (currentView === 'DOMAINS') {
|
|
setSelectedCategory(null);
|
|
setCurrentView('CATEGORIES');
|
|
}
|
|
};
|
|
|
|
const filteredParticipants = useMemo(() => {
|
|
return registrations.filter(r => {
|
|
const userName = r.user_name || '';
|
|
const regNo = r.reg_no || '';
|
|
const searchLower = searchTerm.toLowerCase();
|
|
|
|
const matchesSearch = !searchTerm ||
|
|
userName.toLowerCase().includes(searchLower) ||
|
|
regNo.toLowerCase().includes(searchLower);
|
|
|
|
const matchesEvent = !selectedEventId || String(r.event_id) === String(selectedEventId);
|
|
const matchesDept = selectedDepts.length === 0 || (r.dept && selectedDepts.includes(r.dept));
|
|
const matchesYear = selectedYears.length === 0 || (r.year && selectedYears.includes(r.year));
|
|
|
|
const isExternal = r.college && r.college !== 'RAJALAKSHMI INSTITUTE OF TECHNOLOGY' && r.college !== 'Rajalakshmi Institute of Technology';
|
|
const matchesType = studentTypeFilter === 'EXTERNAL' ? isExternal : !isExternal;
|
|
|
|
return matchesSearch && matchesEvent && matchesDept && matchesYear && matchesType;
|
|
});
|
|
}, [registrations, selectedEventId, searchTerm, selectedDepts, selectedYears, studentTypeFilter, externalUserIds]);
|
|
|
|
const getEventTitle = (eventId: string) => {
|
|
return events.find(e => e.id === eventId)?.title || 'Unknown Event';
|
|
};
|
|
|
|
const handleExportSelected = () => {
|
|
if (selectedStudentIds.size === 0) return;
|
|
|
|
const selectedData = filteredParticipants.filter(p => selectedStudentIds.has(p.id));
|
|
|
|
// Formatting data for Excel
|
|
const formattedData = selectedData.map(p => ({
|
|
'Student Name': p.user_name || 'N/A',
|
|
'Reg No': String(p.reg_no || 'N/A'),
|
|
'Gender': p.gender || 'N/A',
|
|
'College': p.college || 'RIT',
|
|
'Department': p.dept || 'N/A',
|
|
'Section': p.section || 'N/A',
|
|
'Year': p.year || 'N/A',
|
|
'Email': p.user_id?.includes('@') ? p.user_id : (p.user_email || 'N/A'),
|
|
'Phone': String(p.phone || 'N/A'),
|
|
'Event': p.event_name || getEventTitle(String(p.event_id)),
|
|
'Team': p.team_name || 'N/A',
|
|
'Payment Status': p.payment_status || 'PENDING',
|
|
'Cert Status': p.certification_status === 'APPROVED' ? 'VERIFIED' : (p.certification_url ? 'PENDING' : 'NO CERT'),
|
|
'OD Status': p.od_url ? 'OD READY' : 'NO OD'
|
|
}));
|
|
|
|
// Create worksheet
|
|
const worksheet = XLSX.utils.json_to_sheet(formattedData);
|
|
|
|
// Auto-fit columns
|
|
if (formattedData.length > 0) {
|
|
const keys = Object.keys(formattedData[0]);
|
|
const wscols = keys.map(key => ({
|
|
wch: Math.max(
|
|
key.length,
|
|
...formattedData.map(row => String(row[key as keyof typeof row] || '').length)
|
|
) + 2
|
|
}));
|
|
worksheet['!cols'] = wscols;
|
|
}
|
|
|
|
// Create workbook and export
|
|
const workbook = XLSX.utils.book_new();
|
|
XLSX.utils.book_append_sheet(workbook, worksheet, 'Participants');
|
|
|
|
XLSX.writeFile(workbook, `Participants_Export_${new Date().getTime()}.xlsx`);
|
|
};
|
|
|
|
return (
|
|
<div className="animate-in slide-in-from-bottom-10 duration-500 pt-12">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between mb-8 gap-8 border-b border-slate-200 pb-8">
|
|
<div>
|
|
<h3 className="text-4xl font-black tracking-tighter uppercase mb-2 text-slate-900">
|
|
SYSTEM <span className="text-[#004a99]">REGISTRY</span>
|
|
</h3>
|
|
<p className="text-[10px] font-black text-slate-500 uppercase tracking-[0.4em]">Live Database Dossier Sync</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
{currentView !== 'CATEGORIES' && (
|
|
<button
|
|
onClick={handleBack}
|
|
className="text-slate-600 font-black uppercase tracking-widest text-[10px] bg-slate-50 px-6 py-3 rounded-full border border-slate-200 hover:bg-slate-100 hover:text-slate-900 shadow-sm transition-all"
|
|
>
|
|
Back
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mb-10 flex flex-col md:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<i className="fas fa-search absolute left-6 top-1/2 -translate-y-1/2 text-slate-400"></i>
|
|
<input
|
|
type="text"
|
|
placeholder="Search registry..."
|
|
className="w-full bg-white border border-slate-200 rounded-2xl pl-14 pr-6 py-4 text-slate-900 focus:ring-2 focus:ring-[#004a99] outline-none font-bold placeholder:text-slate-400 transition-all shadow-sm"
|
|
value={searchTerm}
|
|
onChange={(e) => setSearchTerm(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setShowEventFilter(!showEventFilter)}
|
|
className="h-full px-6 py-4 bg-white border border-slate-200 rounded-2xl flex items-center gap-3 text-slate-700 font-bold hover:bg-slate-50 hover:border-slate-300 transition-all min-w-[240px] justify-between shadow-sm"
|
|
>
|
|
<div className="flex items-center gap-3">
|
|
<i className="fas fa-filter text-[#004a99] text-xs"></i>
|
|
<span className="text-xs uppercase tracking-widest truncate max-w-[150px]">
|
|
{selectedEventId ? events.find(e => e.id === selectedEventId)?.title : 'All Events'}
|
|
</span>
|
|
</div>
|
|
<i className={`fas fa-chevron-down text-[10px] transition-transform ${showEventFilter ? 'rotate-180' : ''}`}></i>
|
|
</button>
|
|
|
|
{showEventFilter && (
|
|
<div className="absolute top-full right-0 mt-2 w-80 bg-white border border-slate-200 rounded-2xl shadow-xl z-50 py-2 max-h-[400px] overflow-y-auto custom-scrollbar animate-in fade-in slide-in-from-top-2">
|
|
<button
|
|
onClick={() => { setSelectedEventId(null); setShowEventFilter(false); setCurrentView('STUDENTS'); }}
|
|
className={`w-full text-left px-6 py-3 text-[10px] font-black uppercase tracking-widest hover:bg-slate-50 transition-all ${!selectedEventId ? 'text-[#004a99] bg-blue-50/50' : 'text-slate-600'}`}
|
|
>
|
|
All Events
|
|
</button>
|
|
<div className="h-px bg-slate-100 my-2" />
|
|
{events.map(event => (
|
|
<button
|
|
key={event.id}
|
|
onClick={() => { setSelectedEventId(event.id); setShowEventFilter(false); setCurrentView('STUDENTS'); }}
|
|
className={`w-full text-left px-6 py-3 text-[10px] font-black uppercase tracking-widest hover:bg-slate-50 transition-all ${selectedEventId === event.id ? 'text-[#004a99] bg-blue-50/50' : 'text-slate-600'}`}
|
|
>
|
|
{event.title}
|
|
</button>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => setShowSideFilter(true)}
|
|
className="px-6 py-4 bg-white border border-slate-200 rounded-2xl text-slate-700 font-black uppercase text-[10px] tracking-widest hover:bg-slate-50 transition-all flex items-center gap-2 relative shadow-sm"
|
|
>
|
|
<i className="fas fa-sliders-h text-[#004a99]"></i>
|
|
Filters
|
|
{(selectedDepts.length > 0 || selectedYears.length > 0) && (
|
|
<span className="absolute -top-1 -right-1 w-4 h-4 bg-[#004a99] rounded-full text-[8px] flex items-center justify-center text-white shadow-md">
|
|
{selectedDepts.length + selectedYears.length}
|
|
</span>
|
|
)}
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => {
|
|
setCurrentView(currentView === 'CATEGORIES' ? 'STUDENTS' : 'CATEGORIES');
|
|
setSelectedEventId(null);
|
|
setSearchTerm('');
|
|
}}
|
|
className="px-6 py-4 bg-[#004a99] text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-blue-800 transition-all flex items-center gap-2 shadow-md hover:shadow-lg active:scale-95"
|
|
>
|
|
<i className={`fas ${currentView === 'CATEGORIES' ? 'fa-list' : 'fa-grid-2'}`}></i>
|
|
{currentView === 'CATEGORIES' ? 'List View' : 'Browse System'}
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex gap-4 mb-8">
|
|
<button
|
|
onClick={() => setStudentTypeFilter('INTERNAL')}
|
|
className={`flex-1 py-4 rounded-2xl border transition-all flex items-center justify-center gap-3 ${studentTypeFilter === 'INTERNAL' ? 'bg-blue-50 border-[#004a99] text-[#004a99] shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:border-blue-300'}`}
|
|
>
|
|
<i className="fas fa-university text-sm"></i>
|
|
<span className="font-black uppercase tracking-widest text-[10px]">Internal Students</span>
|
|
</button>
|
|
<button
|
|
onClick={() => setStudentTypeFilter('EXTERNAL')}
|
|
className={`flex-1 py-4 rounded-2xl border transition-all flex items-center justify-center gap-3 ${studentTypeFilter === 'EXTERNAL' ? 'bg-orange-50 border-orange-500 text-orange-600 shadow-sm' : 'bg-white border-slate-200 text-slate-500 hover:border-orange-300'}`}
|
|
>
|
|
<i className="fas fa-globe text-sm"></i>
|
|
<span className="font-black uppercase tracking-widest text-[10px]">External Students</span>
|
|
</button>
|
|
</div>
|
|
|
|
{currentView === 'CATEGORIES' && !searchTerm && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-8">
|
|
{CATEGORIES.map((cat) => (
|
|
<div key={cat.id} onClick={() => handleCategorySelect(cat.id)} className="group relative h-[400px] rounded-[3rem] overflow-hidden cursor-pointer bg-slate-100 border border-slate-200 hover:border-blue-300 hover:shadow-xl transition-all shadow-sm">
|
|
<img src={cat.image} className="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-700" alt={cat.name} />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
<div className="absolute bottom-10 left-10">
|
|
<h4 className="text-3xl font-black text-white uppercase tracking-tighter">{cat.name}</h4>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{currentView === 'DOMAINS' && (
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{(DOMAIN_MAP[selectedCategory!] || []).map((domain) => (
|
|
<div key={domain.id} onClick={() => handleDomainSelect(domain.id)} className="group relative h-[350px] rounded-[2.5rem] overflow-hidden cursor-pointer bg-slate-100 border border-slate-200 hover:border-blue-300 hover:shadow-xl transition-all shadow-sm">
|
|
<img src={domain.image} className="w-full h-full object-cover opacity-60 group-hover:scale-105 transition-transform duration-700" alt={domain.name} />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent"></div>
|
|
<div className="absolute bottom-10 left-10"><h4 className="text-2xl font-black text-white uppercase tracking-tight">{domain.name}</h4></div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{currentView === 'EVENTS' && (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
|
|
{events.filter(e => (!selectedCategory || selectedCategory === 'ALL' || e.category === selectedCategory) && (!selectedDomain || selectedDomain === 'ALL' || e.domain === selectedDomain)).map((event) => (
|
|
<div key={event.id} onClick={() => handleEventSelect(event.id)} className="bg-white border border-slate-200 rounded-[2.5rem] p-8 cursor-pointer hover:border-blue-300 hover:shadow-md transition-all flex flex-col h-full shadow-sm">
|
|
<h4 className="text-xl font-black uppercase mb-4 text-slate-900 line-clamp-2">{event.title}</h4>
|
|
<div className="mt-auto flex items-center justify-between">
|
|
<p className="text-[10px] font-black text-slate-500 uppercase tracking-widest">
|
|
{registrations.filter(r => String(r.event_id) === String(event.id)).length} Enrolled
|
|
</p>
|
|
<div className="w-10 h-10 rounded-full bg-slate-50 flex items-center justify-center text-[#004a99] group-hover:bg-blue-50 transition-colors">
|
|
<i className="fas fa-arrow-right"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<FilterDrawer
|
|
isOpen={showSideFilter}
|
|
onClose={() => setShowSideFilter(false)}
|
|
activeTab={activeFilterTab}
|
|
setActiveTab={setActiveFilterTab}
|
|
departments={departments}
|
|
years={years}
|
|
selectedDepts={selectedDepts}
|
|
setSelectedDepts={setSelectedDepts}
|
|
selectedYears={selectedYears}
|
|
setSelectedYears={setSelectedYears}
|
|
/>
|
|
|
|
{(currentView === 'STUDENTS' || searchTerm) && (
|
|
<div className="space-y-8">
|
|
{isLoading ? (
|
|
<div className="col-span-full py-32 flex flex-col items-center justify-center text-center bg-white border border-dashed border-slate-200 rounded-[3rem]">
|
|
<div className="w-16 h-16 border-4 border-blue-100 border-t-[#004a99] rounded-full animate-spin mb-6"></div>
|
|
<p className="text-slate-400 font-black uppercase tracking-[0.3em] text-sm">Loading Registrations...</p>
|
|
</div>
|
|
) : (
|
|
<div className="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden shadow-sm">
|
|
<div className="overflow-x-auto custom-scrollbar">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="bg-slate-50 border-b border-slate-200">
|
|
<th className="px-8 py-6 w-10">
|
|
<input
|
|
type="checkbox"
|
|
className="w-4 h-4 rounded border-slate-300 text-[#004a99] focus:ring-[#004a99] cursor-pointer"
|
|
checked={filteredParticipants.length > 0 && filteredParticipants.every(p => selectedStudentIds.has(p.id))}
|
|
onChange={(e) => {
|
|
if (e.target.checked) {
|
|
setSelectedStudentIds(new Set(filteredParticipants.map(p => p.id)));
|
|
} else {
|
|
setSelectedStudentIds(new Set());
|
|
}
|
|
}}
|
|
/>
|
|
</th>
|
|
<th className="px-8 py-6 text-[10px] font-black tracking-widest text-slate-400 uppercase whitespace-nowrap">Student</th>
|
|
<th className="px-8 py-6 text-[10px] font-black tracking-widest text-slate-400 uppercase whitespace-nowrap">Event Info</th>
|
|
<th className="px-8 py-6 text-[10px] font-black tracking-widest text-slate-400 uppercase whitespace-nowrap">Academic</th>
|
|
<th className="px-8 py-6 text-[10px] font-black tracking-widest text-slate-400 uppercase whitespace-nowrap">Contact</th>
|
|
<th className="px-8 py-6 text-[10px] font-black tracking-widest text-slate-400 uppercase whitespace-nowrap text-center">Status</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-100">
|
|
{filteredParticipants.length > 0 ? filteredParticipants.map((p) => (
|
|
<tr key={p.id} className="hover:bg-slate-50/50 transition-colors group">
|
|
<td className="px-8 py-6 w-10">
|
|
<input
|
|
type="checkbox"
|
|
className="w-4 h-4 rounded border-slate-300 text-[#004a99] focus:ring-[#004a99] cursor-pointer"
|
|
checked={selectedStudentIds.has(p.id)}
|
|
onChange={(e) => {
|
|
const newSet = new Set(selectedStudentIds);
|
|
if (e.target.checked) newSet.add(p.id);
|
|
else newSet.delete(p.id);
|
|
setSelectedStudentIds(newSet);
|
|
}}
|
|
/>
|
|
</td>
|
|
<td className="px-8 py-6 whitespace-nowrap">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-12 h-12 rounded-2xl bg-blue-50 text-[#004a99] flex items-center justify-center font-black text-lg border border-blue-100 shadow-sm">
|
|
{(p.user_name || 'N').charAt(0).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<div className="flex items-center gap-2">
|
|
<p className="text-sm font-black text-slate-900 uppercase tracking-tight group-hover:text-[#004a99] transition-colors">{p.user_name || 'N/A'}</p>
|
|
{(externalUserIds.has(p.user_id) || !!p.college) && (
|
|
<span className="bg-orange-100 text-orange-600 text-[7px] font-black px-1.5 py-0.5 rounded-md border border-orange-200 uppercase tracking-tighter">External</span>
|
|
)}
|
|
</div>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">{p.reg_no || 'N/A'}</p>
|
|
{p.college && (
|
|
<p className="text-[9px] font-black text-orange-500 uppercase tracking-widest mt-0.5 flex items-center gap-1">
|
|
<i className="fas fa-school text-[8px]"></i> {p.college}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 whitespace-nowrap">
|
|
<div className="flex items-center gap-3">
|
|
<div className="w-8 h-8 rounded-full bg-orange-50 text-orange-500 flex items-center justify-center border border-orange-100 shrink-0">
|
|
<i className="fas fa-calendar-alt text-[10px]"></i>
|
|
</div>
|
|
<p className="text-xs font-bold text-slate-700 truncate max-w-[200px] uppercase">{p.event_name || getEventTitle(String(p.event_id))}</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 whitespace-nowrap">
|
|
<div className="flex flex-col gap-1.5">
|
|
<div className="flex items-center gap-2">
|
|
<i className="fas fa-university text-slate-400 text-[10px]"></i>
|
|
<p className="text-[10px] font-black text-slate-700 uppercase tracking-wider">{p.dept || 'N/A'} {p.section ? `• SEC ${p.section}` : ''}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 pl-[18px]">
|
|
<p className="text-[9px] font-bold text-slate-400 uppercase tracking-widest">{p.year || 'N/A'}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 whitespace-nowrap">
|
|
<div className="flex items-center gap-2">
|
|
<div className="w-7 h-7 rounded-full bg-slate-100 text-slate-400 flex items-center justify-center shrink-0">
|
|
<i className="fas fa-envelope text-[9px]"></i>
|
|
</div>
|
|
<p className="text-[11px] font-bold text-slate-600 lowercase tracking-wide">
|
|
{p.user_id?.includes('@') ? p.user_id : (p.user_email || 'N/A')}
|
|
</p>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 whitespace-nowrap">
|
|
<div className="flex flex-col gap-1.5 items-center justify-center">
|
|
<span className={`text-[7px] font-black px-2 py-1 rounded-md uppercase tracking-widest border w-24 text-center shadow-sm ${p.payment_status === 'COMPLETED' ? 'bg-emerald-50 text-emerald-600 border-emerald-200' : 'bg-rose-50 text-rose-600 border-rose-200'}`}>
|
|
<i className={`fas mr-1 ${p.payment_status === 'COMPLETED' ? 'fa-check' : 'fa-clock'}`}></i> {p.payment_status || 'PENDING'}
|
|
</span>
|
|
<span className={`text-[7px] font-black px-2 py-1 rounded-md uppercase tracking-widest border w-24 text-center shadow-sm ${p.certification_status === 'APPROVED' ? 'bg-blue-50 text-[#004a99] border-blue-200' : (p.certification_url ? 'bg-amber-50 text-amber-600 border-amber-200' : 'bg-slate-50 text-slate-400 border-slate-200')}`}>
|
|
<i className={`fas mr-1 ${p.certification_status === 'APPROVED' ? 'fa-check-double' : (p.certification_url ? 'fa-spinner' : 'fa-certificate')}`}></i> {p.certification_status === 'APPROVED' ? 'VERIFIED' : (p.certification_url ? 'PENDING' : 'NO CERT')}
|
|
</span>
|
|
<span className={`text-[7px] font-black px-2 py-1 rounded-md uppercase tracking-widest border w-24 text-center shadow-sm ${p.od_url ? 'bg-teal-50 text-teal-600 border-teal-200' : 'bg-slate-50 text-slate-400 border-slate-200'}`}>
|
|
<i className={`fas mr-1 ${p.od_url ? 'fa-file-signature' : 'fa-file-excel'}`}></i> {p.od_url ? 'OD READY' : 'NO OD'}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)) : (
|
|
<tr>
|
|
<td colSpan={6} className="px-8 py-32 text-center">
|
|
<div className="flex flex-col items-center justify-center">
|
|
<div className="w-20 h-20 bg-slate-50 border border-slate-200 rounded-full flex items-center justify-center mb-6 shadow-sm">
|
|
<i className="fas fa-search text-slate-300 text-2xl"></i>
|
|
</div>
|
|
<p className="text-slate-400 font-black uppercase tracking-[0.3em] text-sm">No active registrations for this scope</p>
|
|
<p className="text-slate-500 text-[10px] font-bold uppercase tracking-widest mt-2 mb-8">Try adjusting your search or filters</p>
|
|
<button
|
|
onClick={() => {
|
|
setSearchTerm('');
|
|
setSelectedEventId(null);
|
|
setSelectedDepts([]);
|
|
setSelectedYears([]);
|
|
}}
|
|
className="px-8 py-3 bg-white border border-slate-200 rounded-xl text-[#004a99] font-black uppercase text-[10px] tracking-widest hover:bg-slate-50 hover:border-slate-300 transition-all shadow-sm"
|
|
>
|
|
Clear All Filters
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
)}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{selectedStudentIds.size > 0 && (
|
|
<div className="fixed bottom-10 left-1/2 -translate-x-1/2 z-[1000] flex justify-center animate-in slide-in-from-bottom-10 pointer-events-none">
|
|
<div className="bg-white/95 backdrop-blur-xl border border-slate-200 shadow-2xl rounded-full px-8 py-4 flex items-center gap-6 pointer-events-auto ring-1 ring-[#004a99]/10">
|
|
<span className="text-xs font-black text-slate-600 uppercase tracking-widest">
|
|
{selectedStudentIds.size} Selected
|
|
</span>
|
|
<button
|
|
onClick={handleExportSelected}
|
|
className="bg-emerald-600 text-white px-8 py-3 rounded-full text-[10px] font-black uppercase tracking-widest hover:bg-emerald-700 transition-all shadow-lg shadow-emerald-600/20 active:scale-95 flex items-center gap-2"
|
|
>
|
|
<i className="fas fa-file-excel"></i> Export as Excel
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const FilterDrawer: React.FC<{
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
activeTab: 'DEPT' | 'YEAR';
|
|
setActiveTab: (tab: 'DEPT' | 'YEAR') => void;
|
|
departments: string[];
|
|
years: string[];
|
|
selectedDepts: string[];
|
|
setSelectedDepts: (depts: string[]) => void;
|
|
selectedYears: string[];
|
|
setSelectedYears: (years: string[]) => void;
|
|
}> = ({
|
|
isOpen,
|
|
onClose,
|
|
activeTab,
|
|
setActiveTab,
|
|
departments,
|
|
years,
|
|
selectedDepts,
|
|
setSelectedDepts,
|
|
selectedYears,
|
|
setSelectedYears
|
|
}) => {
|
|
if (!isOpen) return null;
|
|
|
|
const toggleDept = (dept: string) => {
|
|
if (selectedDepts.includes(dept)) {
|
|
setSelectedDepts(selectedDepts.filter(d => d !== dept));
|
|
} else {
|
|
setSelectedDepts([...selectedDepts, dept]);
|
|
}
|
|
};
|
|
|
|
const toggleYear = (year: string) => {
|
|
if (selectedYears.includes(year)) {
|
|
setSelectedYears(selectedYears.filter(y => y !== year));
|
|
} else {
|
|
setSelectedYears([...selectedYears, year]);
|
|
}
|
|
};
|
|
|
|
const clearAll = () => {
|
|
setSelectedDepts([]);
|
|
setSelectedYears([]);
|
|
};
|
|
|
|
return createPortal(
|
|
<div className="fixed inset-0 z-[9999] flex justify-end">
|
|
<div className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm" onClick={onClose}></div>
|
|
<div className="relative w-full max-w-md bg-white h-full shadow-2xl flex flex-col animate-in slide-in-from-right duration-300">
|
|
<div className="p-8 border-b border-slate-100 flex items-center justify-between">
|
|
<div>
|
|
<h4 className="text-xl font-black text-slate-900 uppercase tracking-tight">Refine Results</h4>
|
|
<p className="text-[10px] font-bold text-slate-400 uppercase tracking-widest mt-1">Select multiple filters</p>
|
|
</div>
|
|
<button onClick={onClose} className="w-10 h-10 rounded-full bg-slate-50 border border-slate-200 flex items-center justify-center text-slate-400 hover:text-slate-900 hover:bg-slate-100 transition-all">
|
|
<i className="fas fa-times"></i>
|
|
</button>
|
|
</div>
|
|
|
|
<div className="flex-1 flex overflow-hidden">
|
|
{/* Sidebar Tabs */}
|
|
<div className="w-32 border-r border-slate-100 bg-slate-50/50">
|
|
<button
|
|
onClick={() => setActiveTab('DEPT')}
|
|
className={`w-full py-6 px-4 text-left relative transition-all ${activeTab === 'DEPT' ? 'bg-blue-50 text-blue-800' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100/50'}`}
|
|
>
|
|
<span className="text-[10px] font-black uppercase tracking-widest">Department</span>
|
|
{activeTab === 'DEPT' && <div className="absolute right-0 top-0 bottom-0 w-1 bg-[#004a99]"></div>}
|
|
</button>
|
|
<button
|
|
onClick={() => setActiveTab('YEAR')}
|
|
className={`w-full py-6 px-4 text-left relative transition-all ${activeTab === 'YEAR' ? 'bg-blue-50 text-blue-800' : 'text-slate-500 hover:text-slate-700 hover:bg-slate-100/50'}`}
|
|
>
|
|
<span className="text-[10px] font-black uppercase tracking-widest">Year</span>
|
|
{activeTab === 'YEAR' && <div className="absolute right-0 top-0 bottom-0 w-1 bg-[#004a99]"></div>}
|
|
</button>
|
|
</div>
|
|
|
|
{/* Options Content */}
|
|
<div className="flex-1 p-8 overflow-y-auto custom-scrollbar">
|
|
{activeTab === 'DEPT' ? (
|
|
<div className="space-y-4">
|
|
{departments.map(dept => (
|
|
<label key={dept} className="flex items-center gap-4 group cursor-pointer">
|
|
<div
|
|
onClick={() => toggleDept(dept)}
|
|
className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-all ${selectedDepts.includes(dept) ? 'bg-[#004a99] border-[#004a99] text-white' : 'border-slate-200 bg-white group-hover:border-blue-400'}`}
|
|
>
|
|
{selectedDepts.includes(dept) && <i className="fas fa-check text-[10px]"></i>}
|
|
</div>
|
|
<span className={`text-xs font-black uppercase tracking-widest transition-colors ${selectedDepts.includes(dept) ? 'text-slate-900' : 'text-slate-500'}`}>
|
|
{dept}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
{years.map(year => (
|
|
<label key={year} className="flex items-center gap-4 group cursor-pointer">
|
|
<div
|
|
onClick={() => toggleYear(year)}
|
|
className={`w-6 h-6 rounded-lg border-2 flex items-center justify-center transition-all ${selectedYears.includes(year) ? 'bg-[#004a99] border-[#004a99] text-white' : 'border-slate-200 bg-white group-hover:border-blue-400'}`}
|
|
>
|
|
{selectedYears.includes(year) && <i className="fas fa-check text-[10px]"></i>}
|
|
</div>
|
|
<span className={`text-xs font-black uppercase tracking-widest transition-colors ${selectedYears.includes(year) ? 'text-slate-900' : 'text-slate-500'}`}>
|
|
{year}
|
|
</span>
|
|
</label>
|
|
))}
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 border-t border-slate-100 bg-slate-50 flex gap-4">
|
|
<button
|
|
onClick={clearAll}
|
|
className="flex-1 py-4 bg-white border border-slate-200 rounded-2xl text-[10px] font-black text-slate-500 uppercase tracking-widest hover:bg-slate-100 transition-all shadow-sm"
|
|
>
|
|
Clear All
|
|
</button>
|
|
<button
|
|
onClick={onClose}
|
|
className="flex-1 py-4 bg-[#004a99] text-white rounded-2xl text-[10px] font-black uppercase tracking-widest hover:bg-blue-800 transition-all shadow-md active:scale-95"
|
|
>
|
|
Apply Filters
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>,
|
|
document.body
|
|
);
|
|
};
|
|
|
|
export default FacultyParticipantsView; |