1037 lines
65 KiB
TypeScript
1037 lines
65 KiB
TypeScript
import React, { useState, useEffect, useCallback } from 'react';
|
|
import { createPortal } from 'react-dom';
|
|
import html2canvas from 'html2canvas';
|
|
import { jsPDF } from 'jspdf';
|
|
import { generateEventDetailsPDF } from '../utils/pdfGenerator';
|
|
import CreateEventForm from './CreateEventForm';
|
|
import AdminStatusTrackerView from './AdminStatusTrackerView';
|
|
import AdminEventStatusView from './AdminEventStatusView';
|
|
import FacultyParticipantsView from './FacultyParticipantsView';
|
|
import FacultyAttendanceView from './FacultyAttendanceView';
|
|
import FacultyProfileView from './FacultyProfileView';
|
|
import CreateSpecialEventsView from './CreateSpecialEventsView';
|
|
import CreateDomainView from './CreateDomainView';
|
|
import { Event, Announcement } from '../types';
|
|
|
|
interface AdminLandingPageProps {
|
|
onBack: () => void;
|
|
onAddEvent: (event: Event) => void;
|
|
onUpdateEvent: (event: Event) => void;
|
|
onDeleteEvent: (id: string) => void;
|
|
events: Event[];
|
|
announcements: Announcement[];
|
|
onAddAnnouncement: (ann: Announcement) => Promise<void>;
|
|
onUpdateAnnouncement?: (ann: Announcement) => Promise<void>;
|
|
onDeleteAnnouncement: (id: string) => Promise<void>;
|
|
studentDocuments: Record<string, string>;
|
|
onSupabaseError?: () => void;
|
|
onApproveCertificate: (regId: string) => Promise<void>;
|
|
localRegistrations?: any[];
|
|
onViewStudentHub?: () => void;
|
|
currentUserName?: string;
|
|
currentUserDept?: string;
|
|
currentUserEmail?: string;
|
|
currentUserPhone?: string;
|
|
currentUserPhoto?: string;
|
|
currentUserId?: string;
|
|
domains?: any[];
|
|
currentUserFacultyRole?: string;
|
|
}
|
|
|
|
const SuccessPopup: React.FC<{ onClose: () => void }> = ({ onClose }) => (
|
|
<div className="fixed inset-0 z-[10001] flex items-center justify-center p-6 bg-black/80 backdrop-blur-xl animate-in fade-in duration-300">
|
|
<div className="bg-white rounded-[3rem] w-full max-w-sm p-12 shadow-2xl flex flex-col items-center text-center animate-in zoom-in-95 duration-500">
|
|
<div className="w-24 h-24 bg-emerald-100 text-emerald-500 rounded-full flex items-center justify-center text-4xl mb-8 shadow-inner">
|
|
<i className="fas fa-check"></i>
|
|
</div>
|
|
<h3 className="text-2xl font-black text-slate-900 mb-2 uppercase tracking-tight">Success!</h3>
|
|
<p className="text-gray-500 font-bold text-[10px] uppercase tracking-[0.3em] mb-10">Event successfully created</p>
|
|
<button
|
|
onClick={onClose}
|
|
className="w-full py-5 bg-slate-900 text-white rounded-2xl font-black uppercase tracking-widest text-[11px] hover:bg-black transition-all shadow-xl shadow-slate-200 active:scale-95"
|
|
>
|
|
View Creations
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const Toast: React.FC<{ message: string; type: 'success' | 'delete'; onClose: () => void }> = ({ message, type, onClose }) => {
|
|
useEffect(() => {
|
|
const timer = setTimeout(onClose, 3000);
|
|
return () => clearTimeout(timer);
|
|
}, [onClose]);
|
|
|
|
return createPortal(
|
|
<div className={`fixed bottom-10 left-1/2 -translate-x-1/2 z-[10000] ${type === 'delete' ? 'bg-rose-600' : 'bg-emerald-600'} text-white px-8 py-4 rounded-2xl shadow-2xl font-black text-xs uppercase tracking-widest flex items-center gap-3 animate-in slide-in-from-bottom-10`}>
|
|
<i className={`fas ${type === 'delete' ? 'fa-trash-alt' : 'fa-check-circle'}`}></i>
|
|
{message}
|
|
</div>,
|
|
document.body
|
|
);
|
|
};
|
|
|
|
const AdminLandingPage: React.FC<AdminLandingPageProps> = ({
|
|
onBack,
|
|
onAddEvent,
|
|
onUpdateEvent,
|
|
onDeleteEvent,
|
|
events,
|
|
announcements,
|
|
onAddAnnouncement,
|
|
onUpdateAnnouncement,
|
|
onDeleteAnnouncement,
|
|
studentDocuments,
|
|
onSupabaseError,
|
|
onApproveCertificate,
|
|
localRegistrations = [],
|
|
onViewStudentHub,
|
|
currentUserName,
|
|
currentUserDept,
|
|
currentUserEmail,
|
|
currentUserPhone,
|
|
currentUserPhoto,
|
|
currentUserId,
|
|
domains = [],
|
|
currentUserFacultyRole
|
|
}) => {
|
|
const [isLoaded, setIsLoaded] = useState(false);
|
|
const [view, setView] = useState<'OVERVIEW' | 'CREATE' | 'CREATIONS' | 'EDIT' | 'STATUS_TRACKER' | 'EVENT_STATUS' | 'PARTICIPANTS' | 'ATTENDANCE' | 'PROFILE' | 'VERIFICATION'>('OVERVIEW');
|
|
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
|
|
const [inspectedEvent, setInspectedEvent] = useState<Event | null>(null);
|
|
const [toast, setToast] = useState<{ message: string; type: 'success' | 'delete' } | null>(null);
|
|
const [showSuccessPopup, setShowSuccessPopup] = useState(false);
|
|
const [isScrolled, setIsScrolled] = useState(false);
|
|
const [selectionType, setSelectionType] = useState<'NONE' | 'NORMAL' | 'SPECIAL' | 'DOMAIN'>('NONE');
|
|
const [isDownloading, setIsDownloading] = useState(false);
|
|
|
|
const downloadPDF = async () => {
|
|
if (!inspectedEvent) return;
|
|
setIsDownloading(true);
|
|
try {
|
|
generateEventDetailsPDF(inspectedEvent);
|
|
} catch (error) {
|
|
console.error("Failed to generate PDF", error);
|
|
alert("Failed to download PDF. Please try again.");
|
|
} finally {
|
|
setIsDownloading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (view !== 'CREATE' && view !== 'EDIT') {
|
|
setSelectionType('NONE');
|
|
}
|
|
}, [view]);
|
|
|
|
useEffect(() => {
|
|
setIsLoaded(true);
|
|
const mainElement = document.querySelector('main');
|
|
if (!mainElement) return;
|
|
|
|
const handleScroll = () => {
|
|
setIsScrolled(mainElement.scrollTop > 20);
|
|
};
|
|
mainElement.addEventListener('scroll', handleScroll);
|
|
return () => {
|
|
mainElement.removeEventListener('scroll', handleScroll);
|
|
};
|
|
}, []);
|
|
|
|
const handleCloseToast = useCallback(() => setToast(null), []);
|
|
|
|
const handleEditClick = (event: Event) => {
|
|
setSelectedEvent(event);
|
|
setView('EDIT');
|
|
};
|
|
|
|
const handleDelete = (id: string, title: string) => {
|
|
onDeleteEvent(id);
|
|
setToast({ message: `"${title}" has been deleted.`, type: 'delete' });
|
|
};
|
|
|
|
const handleCreateSuccess = (event: Event) => {
|
|
if (view === 'EDIT') {
|
|
onUpdateEvent(event);
|
|
setToast({ message: "Event updated successfully!", type: 'success' });
|
|
setView('CREATIONS');
|
|
} else {
|
|
onAddEvent(event);
|
|
setShowSuccessPopup(true);
|
|
}
|
|
setSelectedEvent(null);
|
|
};
|
|
|
|
const closeSuccessPopup = () => {
|
|
setShowSuccessPopup(false);
|
|
setView('CREATIONS');
|
|
};
|
|
|
|
const navLinks = [
|
|
{ label: 'HOME', active: view === 'OVERVIEW', onClick: () => setView('OVERVIEW') },
|
|
{ label: 'CREATE EVENTS', active: view === 'CREATE' || view === 'EDIT', onClick: () => { setSelectedEvent(null); setView('CREATE'); } },
|
|
{ label: 'CREATIONS', active: view === 'CREATIONS', onClick: () => setView('CREATIONS') },
|
|
...(currentUserFacultyRole === 'HOD' ? [
|
|
{ label: 'VERIFICATION', active: view === 'VERIFICATION', onClick: () => setView('VERIFICATION') }
|
|
] : []),
|
|
{ label: 'STATUS TRACKER', active: view === 'STATUS_TRACKER', onClick: () => setView('STATUS_TRACKER') },
|
|
{ label: 'EVENT STATUS', active: view === 'EVENT_STATUS', onClick: () => setView('EVENT_STATUS') },
|
|
{ label: 'PARTICIPANTS', active: view === 'PARTICIPANTS', onClick: () => setView('PARTICIPANTS') },
|
|
{ label: 'ATTENDANCE', active: view === 'ATTENDANCE', onClick: () => setView('ATTENDANCE') },
|
|
{ label: 'PROFILE', active: view === 'PROFILE', onClick: () => setView('PROFILE') },
|
|
];
|
|
|
|
return (
|
|
<div className="min-h-screen w-full relative overflow-x-hidden font-inter">
|
|
{showSuccessPopup && <SuccessPopup onClose={closeSuccessPopup} />}
|
|
|
|
<div className="fixed inset-0 z-0 overflow-hidden">
|
|
<div
|
|
className="absolute inset-0 bg-cover bg-center"
|
|
style={{ backgroundImage: 'url("https://cache.careers360.mobi/media/presets/720X480/colleges/social-media/media-gallery/3425/2021/6/16/DSC08602.JPG")' }}
|
|
></div>
|
|
<div className="absolute inset-0 bg-white/80 backdrop-blur-sm"></div>
|
|
</div>
|
|
|
|
<header className={`fixed top-0 left-0 w-full z-[1000] transition-all duration-500 px-8 py-4 flex items-center justify-between ${isScrolled ? 'bg-white shadow-[0_4px_30px_rgba(0,0,0,0.05)] border-b border-slate-100' : 'bg-transparent'}`}>
|
|
<div className="flex items-center gap-12">
|
|
<div
|
|
className="flex items-center cursor-pointer group transition-transform hover:scale-105"
|
|
onClick={() => setView('OVERVIEW')}
|
|
>
|
|
<img
|
|
src="https://www.facultyplus.com/wp-content/uploads/2020/11/Rit-logo.png"
|
|
alt="RIT Logo"
|
|
className="h-12 w-auto object-contain transition-all duration-300"
|
|
/>
|
|
</div>
|
|
|
|
<nav className="hidden lg:flex items-center gap-8">
|
|
{navLinks.map((link) => (
|
|
<button
|
|
key={link.label}
|
|
onClick={link.onClick}
|
|
className={`text-[10px] font-black tracking-[0.3em] transition-all relative py-1 group ${link.active ? 'text-[#004a99]' : 'text-slate-500 hover:text-[#004a99]'
|
|
}`}
|
|
>
|
|
{link.label}
|
|
<span className={`absolute bottom-0 left-1/2 -translate-x-1/2 h-[2px] bg-orange-500 transition-all duration-500 ${link.active ? 'w-full' : 'w-0 group-hover:w-full'}`}></span>
|
|
</button>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-8 md:gap-12">
|
|
<button
|
|
onClick={onBack}
|
|
className={`text-[10px] font-black tracking-[0.2em] px-6 py-2 rounded-full transition-all border ${isScrolled ? 'text-slate-700 bg-white border-transparent hover:bg-slate-100' : 'text-slate-700 border-slate-200 hover:border-slate-300 hover:bg-slate-50'}`}
|
|
>
|
|
LOG OUT
|
|
</button>
|
|
</div>
|
|
</header>
|
|
|
|
<main className="relative z-10 w-full pt-28 pb-20 px-6 overflow-y-auto h-[calc(100vh)]">
|
|
{view === 'OVERVIEW' && (
|
|
<div className="max-w-6xl mx-auto h-full flex flex-col items-center justify-center text-center animate-in fade-in zoom-in-95 duration-700 p-10">
|
|
<div className="relative z-10">
|
|
<h1 className="text-5xl md:text-7xl font-black tracking-tighter mb-8 text-slate-900 uppercase leading-[0.9] drop-shadow-sm pointer-events-none">
|
|
EVENT <br />
|
|
COORDINATOR <br />
|
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#004a99] to-orange-500">HUB</span>
|
|
</h1>
|
|
|
|
<p className="max-w-2xl mx-auto text-lg md:text-xl font-medium mb-12 text-slate-600 leading-relaxed uppercase tracking-[0.2em]">
|
|
Orchestrate prestigious campus events within <br /> an innovative digital environment.
|
|
</p>
|
|
|
|
<div className="flex flex-col sm:flex-row items-center justify-center gap-6 pt-4 mb-16">
|
|
<button
|
|
onClick={() => { setSelectedEvent(null); setView('CREATE'); }}
|
|
className="px-12 py-5 bg-white border border-slate-200 text-orange-500 font-black uppercase tracking-[0.2em] text-[11px] hover:bg-slate-50 transition-all rounded-2xl shadow-sm flex items-center justify-center gap-3 hover:-translate-y-1 active:translate-y-0"
|
|
>
|
|
GENERATE NEW <i className="fas fa-sparkles text-sm"></i>
|
|
</button>
|
|
|
|
{onViewStudentHub && (
|
|
<button
|
|
onClick={onViewStudentHub}
|
|
className="px-12 py-5 bg-slate-900 text-white font-black uppercase tracking-[0.2em] text-[11px] hover:bg-black transition-all rounded-2xl shadow-xl flex items-center justify-center gap-3 hover:-translate-y-1 active:translate-y-0"
|
|
>
|
|
VIEW STUDENT HUB <i className="fas fa-external-link-alt text-sm"></i>
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{(view === 'CREATE' || view === 'EDIT') && (
|
|
<div className="max-w-7xl mx-auto px-4 py-20 min-h-screen">
|
|
{selectionType === 'NONE' && view === 'CREATE' ? (
|
|
<div className="animate-in fade-in slide-in-from-bottom-10 duration-700">
|
|
<div className="text-center mb-20">
|
|
<h2 className="text-6xl font-black text-slate-900 tracking-tighter uppercase mb-4">Generate Event</h2>
|
|
<p className="text-[#004a99] font-bold text-xs tracking-[0.4em] uppercase flex items-center justify-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-[#004a99] rounded-full animate-pulse"></span>
|
|
Choose Verification Category
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-10 max-w-7xl mx-auto">
|
|
{/* Normal Events Bar */}
|
|
<div
|
|
onClick={() => setSelectionType('NORMAL')}
|
|
className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-[#004a99]/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
|
|
>
|
|
<div className="absolute top-0 right-0 w-40 h-40 bg-blue-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-blue-100/50 transition-colors"></div>
|
|
<div className="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
|
|
<i className="fas fa-calendar-check text-3xl text-[#004a99]"></i>
|
|
</div>
|
|
<h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Normal Events</h3>
|
|
<p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
|
|
Standard campus activities, workshops, and departmental seminars.
|
|
</p>
|
|
<div className="mt-10 flex items-center gap-3 text-[#004a99] font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
|
|
Explore Registry <i className="fas fa-arrow-right text-[8px]"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Special Events Bar */}
|
|
<div
|
|
onClick={() => setSelectionType('SPECIAL')}
|
|
className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-orange-500/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
|
|
>
|
|
<div className="absolute top-0 right-0 w-40 h-40 bg-orange-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-orange-100/50 transition-colors"></div>
|
|
<div className="w-24 h-24 bg-orange-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
|
|
<i className="fas fa-star text-3xl text-orange-500"></i>
|
|
</div>
|
|
<h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Special Events</h3>
|
|
<p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
|
|
Prestigious summits, symposiums, and high-impact institutional celebrations.
|
|
</p>
|
|
<div className="mt-10 flex items-center gap-3 text-orange-500 font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
|
|
Explore Registry <i className="fas fa-arrow-right text-[8px]"></i>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Domains Bar */}
|
|
<div
|
|
onClick={() => setSelectionType('DOMAIN')}
|
|
className="group relative bg-white/70 backdrop-blur-xl border border-white rounded-[4rem] p-12 shadow-2xl hover:shadow-emerald-500/10 transition-all duration-500 cursor-pointer overflow-hidden flex flex-col items-center text-center hover:-translate-y-2 border-slate-200/50"
|
|
>
|
|
<div className="absolute top-0 right-0 w-40 h-40 bg-emerald-50/50 rounded-full blur-3xl -mr-20 -mt-20 group-hover:bg-emerald-100/50 transition-colors"></div>
|
|
<div className="w-24 h-24 bg-emerald-50 rounded-full flex items-center justify-center mb-10 group-hover:scale-110 transition-transform duration-500">
|
|
<i className="fas fa-layer-group text-3xl text-emerald-500"></i>
|
|
</div>
|
|
<h3 className="text-3xl font-black text-slate-900 uppercase tracking-tighter mb-4">Create Domains</h3>
|
|
<p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] leading-relaxed max-w-[240px]">
|
|
Propose new domains for Technical, Non-Technical, and Workshop categories.
|
|
</p>
|
|
<div className="mt-10 flex items-center gap-3 text-emerald-500 font-black text-[10px] uppercase tracking-widest opacity-0 group-hover:opacity-100 transition-all translate-y-4 group-hover:translate-y-0">
|
|
Create Registry <i className="fas fa-arrow-right text-[8px]"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="animate-in fade-in slide-in-from-bottom-10 duration-500">
|
|
<button
|
|
onClick={() => { setSelectionType('NONE'); setSelectedEvent(null); }}
|
|
className="mb-8 flex items-center gap-2 text-slate-500 font-black text-[10px] uppercase tracking-widest hover:text-[#004a99] transition-colors"
|
|
>
|
|
<i className="fas fa-arrow-left"></i> Back to Categories
|
|
</button>
|
|
|
|
{(selectionType === 'NORMAL' || view === 'EDIT') && (
|
|
<div className="w-full flex justify-center">
|
|
<CreateEventForm
|
|
eventToEdit={selectedEvent || undefined}
|
|
onCancel={() => { setView('CREATIONS'); setSelectionType('NONE'); }}
|
|
onSuccess={handleCreateSuccess}
|
|
onSupabaseError={onSupabaseError}
|
|
/>
|
|
</div>
|
|
)}
|
|
|
|
{selectionType === 'SPECIAL' && (
|
|
<div className="w-full">
|
|
<CreateSpecialEventsView onShowToast={(msg, type) => setToast({ message: msg, type: type })} />
|
|
</div>
|
|
)}
|
|
|
|
{selectionType === 'DOMAIN' && (
|
|
<div className="w-full relative z-20">
|
|
<CreateDomainView onBack={() => { setSelectionType('NONE'); }} onShowToast={(msg, type) => setToast({ message: msg, type: type })} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{view === 'CREATIONS' && (
|
|
<div className="max-w-7xl mx-auto px-4 md:px-10 py-10 animate-in fade-in slide-in-from-bottom-10 duration-500">
|
|
<div className="flex flex-col md:flex-row md:items-end justify-between gap-6 mb-16 px-4 border-b border-slate-200 pb-8">
|
|
<div>
|
|
<h2 className="text-6xl font-black text-slate-900 tracking-tighter uppercase mb-2">Creations</h2>
|
|
<p className="text-[#004a99] font-bold text-xs tracking-[0.4em] uppercase flex items-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-[#004a99] rounded-full"></span>
|
|
Synchronized Digital Hub
|
|
</p>
|
|
</div>
|
|
<div className="flex items-center gap-4">
|
|
<button
|
|
onClick={() => { setSelectedEvent(null); setView('CREATE'); }}
|
|
className="bg-white border border-slate-200 text-slate-700 px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:border-[#004a99] hover:text-[#004a99] transition-all shadow-sm active:scale-95"
|
|
>
|
|
+ Generate Event
|
|
</button>
|
|
<button
|
|
onClick={() => setView('EVENT_STATUS')}
|
|
className="bg-orange-500 text-white px-8 py-4 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-orange-600 transition-all shadow-xl shadow-orange-500/20 active:scale-95"
|
|
>
|
|
Hub Analytics
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<h3 className="text-xl font-black text-slate-900 uppercase tracking-tight mb-8 px-4 flex items-center gap-3">
|
|
<i className="fas fa-calendar-check text-[#004a99]"></i>
|
|
Event Creations
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-10">
|
|
{events.length > 0 ? events.map((event) => (
|
|
<div key={event.id} className="bg-white border border-slate-200 rounded-[2.5rem] overflow-hidden group transition-all duration-500 hover:border-[#004a99]/30 hover:-translate-y-2 shadow-sm hover:shadow-2xl hover:shadow-[#004a99]/10">
|
|
<div className="h-64 relative overflow-hidden bg-slate-100">
|
|
<img src={event.image} alt={event.title} className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-105" />
|
|
<div className="absolute top-6 right-6 bg-white/90 backdrop-blur-md px-6 py-2 rounded-full text-[9px] font-black uppercase tracking-widest text-slate-900 shadow-sm">{event.category}</div>
|
|
|
|
<div className="absolute bottom-4 left-4 right-4 bg-white/90 backdrop-blur-md px-6 py-3 rounded-2xl flex items-center justify-between shadow-sm">
|
|
<span className="text-[9px] font-black text-slate-500 uppercase tracking-widest">Enrollment Status</span>
|
|
<span className="text-[10px] font-black text-[#004a99]">
|
|
{event.currentParticipants || 0} / {event.maxParticipants || (event.deptLimits && Object.keys(event.deptLimits).length > 0 ? Object.values(event.deptLimits).map(Number).reduce((a, b) => a + b, 0) : '∞')}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="p-8">
|
|
<div className="flex items-center justify-between mb-6">
|
|
<div className="flex items-center gap-2">
|
|
{event.verificationStatus === 'APPROVED' ? (
|
|
<>
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
|
|
<span className="text-[10px] font-black text-slate-600 uppercase tracking-widest">Active / Approved</span>
|
|
</>
|
|
) : event.verificationStatus === 'REJECTED' ? (
|
|
<>
|
|
<span className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.5)]"></span>
|
|
<span className="text-[10px] font-black text-rose-600 uppercase tracking-widest">Rejected</span>
|
|
</>
|
|
) : event.verificationStatus === 'PENDING_HOD' ? (
|
|
<>
|
|
<span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]"></span>
|
|
<span className="text-[10px] font-black text-amber-600 uppercase tracking-widest">Awaiting HOD Approval</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span className="w-2 h-2 rounded-full bg-blue-500 animate-pulse shadow-[0_0_8px_rgba(59,130,246,0.5)]"></span>
|
|
<span className="text-[10px] font-black text-blue-600 uppercase tracking-widest">Awaiting Admin Approval</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
<div className={`px-4 py-1.5 rounded-full text-[9px] font-black uppercase tracking-widest border transition-all ${event.pricingType === 'PAID' ? 'bg-rose-50 border-rose-200 text-rose-600' : 'bg-emerald-50 border-emerald-200 text-emerald-600'}`}>{event.pricingType}</div>
|
|
</div>
|
|
<div className="flex items-center justify-between mb-2">
|
|
<h3 className="text-2xl font-black text-slate-900 tracking-tight line-clamp-1 group-hover:text-[#004a99] transition-colors duration-300">{event.title}</h3>
|
|
<button
|
|
onClick={() => setInspectedEvent(event)}
|
|
className="w-10 h-10 rounded-full bg-slate-50 text-[#004a99] flex items-center justify-center hover:bg-[#004a99] hover:text-white transition-all shadow-sm active:scale-95"
|
|
title="Inspect Details"
|
|
>
|
|
<i className="fas fa-eye text-sm"></i>
|
|
</button>
|
|
</div>
|
|
<p className="text-xs text-slate-500 line-clamp-2 mb-4 italic">
|
|
{event.event_summary || "No summary provided."}
|
|
</p>
|
|
<div className="space-y-4 text-slate-500 font-bold text-[10px] uppercase tracking-[0.2em] mb-6">
|
|
<div className="flex items-center gap-3"><i className="far fa-calendar text-[#004a99]"></i><span>{event.date}{event.schedule?.[0]?.start_time ? ` • ${event.schedule[0].start_time}` : ''}</span></div>
|
|
<div className="flex items-center gap-3"><i className="fas fa-location-dot text-[#004a99]"></i><span>{event.location}</span></div>
|
|
{event.conducting_dept && <div className="flex items-center gap-3"><i className="fas fa-building text-[#004a99]"></i><span>{event.conducting_dept}</span></div>}
|
|
</div>
|
|
{/* Financial Summary */}
|
|
{(event.total_expense || 0) > 0 && (
|
|
<div className="bg-slate-50 border border-slate-100 rounded-2xl p-4 mb-6 space-y-1.5">
|
|
<p className="text-[8px] font-black text-slate-400 uppercase tracking-widest mb-2">Financial Projections</p>
|
|
{(event.refreshment_expense || 0) > 0 && (
|
|
<div className="flex justify-between text-[9px]">
|
|
<span className="font-bold text-slate-500 uppercase">Refreshment</span>
|
|
<span className="font-black text-slate-700">₹{event.refreshment_expense}</span>
|
|
</div>
|
|
)}
|
|
{(event.transportation_expense || 0) > 0 && (
|
|
<div className="flex justify-between text-[9px]">
|
|
<span className="font-bold text-slate-500 uppercase">Transportation</span>
|
|
<span className="font-black text-slate-700">₹{event.transportation_expense}</span>
|
|
</div>
|
|
)}
|
|
{((event as any).session_coverage_fee || 0) > 0 && (
|
|
<div className="flex justify-between text-[9px]">
|
|
<span className="font-bold text-slate-500 uppercase">Session Coverage</span>
|
|
<span className="font-black text-slate-700">₹{(event as any).session_coverage_fee}</span>
|
|
</div>
|
|
)}
|
|
<div className="flex justify-between text-[9px] pt-1.5 border-t border-slate-200">
|
|
<span className="font-black text-emerald-600 uppercase">Total</span>
|
|
<span className="font-black text-emerald-700">₹{event.total_expense}</span>
|
|
</div>
|
|
</div>
|
|
)}
|
|
<div className="flex gap-4">
|
|
{event.created_by === currentUserId ? (
|
|
<>
|
|
<button onClick={() => handleEditClick(event)} className="flex-1 py-4 bg-slate-50 border border-slate-200 rounded-2xl text-[10px] font-black text-slate-700 uppercase tracking-widest hover:bg-blue-50 hover:text-[#004a99] hover:border-blue-200 transition-all active:scale-95">Update</button>
|
|
<button onClick={() => handleDelete(event.id, event.title)} className="w-14 h-14 bg-rose-50 border border-rose-100 text-rose-500 rounded-2xl flex items-center justify-center hover:bg-rose-500 hover:text-white transition-all active:scale-95"><i className="fas fa-trash-alt"></i></button>
|
|
</>
|
|
) : (
|
|
<div className="flex-1 py-4 bg-slate-100 rounded-2xl text-[10px] font-black text-slate-400 uppercase tracking-widest text-center border border-slate-200">
|
|
<i className="fas fa-lock mr-2"></i> View Only
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)) : (
|
|
<div className="col-span-full py-40 flex flex-col items-center justify-center bg-white border border-dashed border-slate-300 rounded-[3rem] text-center px-10 shadow-sm">
|
|
<div className="w-24 h-24 bg-blue-50 rounded-full flex items-center justify-center mb-8">
|
|
<i className="fas fa-plus text-3xl text-[#004a99]"></i>
|
|
</div>
|
|
<h4 className="text-slate-900 font-black uppercase tracking-[0.3em] text-sm mb-4">Awaiting New Sessions</h4>
|
|
<p className="text-slate-500 font-bold uppercase tracking-[0.2em] text-[10px] max-w-sm">Start your curation by generating a new prestigious event for the community.</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
{/* Domains Subsection — moved to end for UX clarity */}
|
|
{domains.length > 0 && (
|
|
<div className="mt-20">
|
|
<h3 className="text-xl font-black text-slate-900 uppercase tracking-tight mb-8 px-4 flex items-center gap-3">
|
|
<i className="fas fa-layer-group text-emerald-500"></i>
|
|
Proposed Domains
|
|
</h3>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 px-4">
|
|
{domains.map((domain) => (
|
|
<div key={domain.id} className="bg-white/50 backdrop-blur-md border border-slate-200 rounded-3xl p-6 transition-all hover:border-emerald-500/30 hover:shadow-xl hover:shadow-emerald-500/5 group">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<span className="text-[8px] font-black text-slate-400 uppercase tracking-[0.2em]">{domain.category}</span>
|
|
{domain.status === 'APPROVED' ? (
|
|
<span className="w-2 h-2 rounded-full bg-emerald-500 shadow-[0_0_8px_rgba(16,185,129,0.5)]"></span>
|
|
) : domain.status === 'REJECTED' ? (
|
|
<span className="w-2 h-2 rounded-full bg-rose-500 shadow-[0_0_8px_rgba(244,63,94,0.5)]"></span>
|
|
) : (
|
|
<span className="w-2 h-2 rounded-full bg-amber-500 animate-pulse shadow-[0_0_8px_rgba(245,158,11,0.5)]"></span>
|
|
)}
|
|
</div>
|
|
<h4 className="text-lg font-black text-slate-900 uppercase tracking-tight group-hover:text-emerald-600 transition-colors mb-2">{domain.name}</h4>
|
|
<p className="text-[10px] font-bold text-slate-500 uppercase tracking-widest italic">{domain.status || 'PENDING'}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{view === 'STATUS_TRACKER' && <AdminStatusTrackerView events={events} onShowToast={(msg) => setToast({ message: msg, type: 'success' })} studentDocuments={studentDocuments} onApproveCertificate={onApproveCertificate} localRegistrations={localRegistrations} currentUserId={currentUserId} />}
|
|
|
|
{view === 'EVENT_STATUS' && (
|
|
<AdminEventStatusView
|
|
events={events}
|
|
announcements={announcements}
|
|
onAddAnnouncement={onAddAnnouncement}
|
|
onUpdateAnnouncement={onUpdateAnnouncement}
|
|
onDeleteAnnouncement={onDeleteAnnouncement}
|
|
onBack={() => setView('CREATIONS')}
|
|
onUpdateEvent={onUpdateEvent}
|
|
currentUserId={currentUserId}
|
|
localRegistrations={localRegistrations}
|
|
/>
|
|
)}
|
|
|
|
{view === 'PARTICIPANTS' && <FacultyParticipantsView events={events} localRegistrations={localRegistrations} currentUserId={currentUserId} />}
|
|
|
|
{view === 'ATTENDANCE' && <FacultyAttendanceView events={events} onShowToast={(msg) => setToast({ message: msg, type: 'success' })} localRegistrations={localRegistrations} currentUserId={currentUserId} />}
|
|
|
|
{view === 'PROFILE' && (
|
|
<FacultyProfileView
|
|
onLogout={onBack}
|
|
name={currentUserName}
|
|
dept={currentUserDept}
|
|
email={currentUserEmail}
|
|
phone={currentUserPhone}
|
|
photo={currentUserPhoto}
|
|
/>
|
|
)}
|
|
|
|
{view === 'VERIFICATION' && currentUserFacultyRole === 'HOD' && (
|
|
<div className="animate-in fade-in slide-in-from-bottom-10 duration-500 max-w-6xl mx-auto pb-20">
|
|
<div className="mb-10 text-left">
|
|
<h2 className="text-4xl font-black text-slate-900 uppercase tracking-tighter mb-2">
|
|
HOD Event <span className="text-[#004a99]">Verification</span>
|
|
</h2>
|
|
<p className="text-slate-400 text-xs font-bold uppercase tracking-widest flex items-center gap-2">
|
|
<span className="w-2 h-2 bg-[#004a99] rounded-full"></span>
|
|
Review and approve/decline event creation requests for the {currentUserDept || 'your'} department
|
|
</p>
|
|
</div>
|
|
|
|
{(() => {
|
|
const pendingEvents = events.filter(
|
|
e => e.verificationStatus === 'PENDING_HOD' &&
|
|
e.conducting_dept === currentUserDept
|
|
);
|
|
|
|
if (pendingEvents.length === 0) {
|
|
return (
|
|
<div className="bg-white/50 border border-dashed border-slate-200 rounded-[2.5rem] p-16 text-center shadow-sm">
|
|
<div className="w-20 h-20 bg-slate-100 text-slate-400 rounded-full flex items-center justify-center mx-auto mb-6 text-2xl shadow-inner">
|
|
<i className="fas fa-shield-check"></i>
|
|
</div>
|
|
<h4 className="text-slate-900 font-black uppercase tracking-[0.2em] text-sm mb-2">Clear Queue</h4>
|
|
<p className="text-slate-400 text-xs font-bold uppercase tracking-wider">No pending verification requests found for your department.</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
{pendingEvents.map((event) => (
|
|
<div key={event.id} className="bg-white border border-slate-100 rounded-[2.5rem] p-8 shadow-md hover:shadow-xl transition-all duration-300 relative overflow-hidden group">
|
|
<div className="absolute top-0 right-0 w-24 h-24 bg-[#004a99]/5 rounded-full -translate-y-1/2 translate-x-1/2 group-hover:scale-150 transition-transform duration-700"></div>
|
|
<div className="flex justify-between items-start mb-6">
|
|
<div>
|
|
<span className="bg-[#004a99]/10 text-[#004a99] px-4 py-1.5 rounded-full text-[8px] font-black uppercase tracking-widest">{event.category}</span>
|
|
<h3 className="text-2xl font-black text-slate-900 uppercase tracking-tight mt-3 mb-1">{event.title}</h3>
|
|
<p className="text-[9px] font-black text-slate-400 uppercase tracking-widest flex items-center gap-1.5">
|
|
<i className="fas fa-user-tie text-orange-500"></i>
|
|
Created by: <span className="text-slate-700">{event.coordinator}</span>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4 bg-slate-50 p-5 rounded-2xl mb-8 text-left text-[10px] font-bold text-slate-500 uppercase tracking-wider">
|
|
<div>
|
|
<span className="block text-[8px] text-slate-400 mb-0.5">Domain</span>
|
|
<span className="text-slate-800 font-black">{event.domain}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] text-slate-400 mb-0.5">Venue</span>
|
|
<span className="text-slate-800 font-black">{event.location}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] text-slate-400 mb-0.5">Date</span>
|
|
<span className="text-slate-800 font-black">{event.date}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] text-slate-400 mb-0.5">Type</span>
|
|
<span className="text-slate-800 font-black">{event.pricingType}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-4">
|
|
<button
|
|
onClick={() => setInspectedEvent(event)}
|
|
className="w-14 h-14 bg-blue-50 text-[#004a99] rounded-2xl flex items-center justify-center hover:bg-[#004a99] hover:text-white transition-all shadow-sm active:scale-95 shrink-0"
|
|
title="Inspect Details"
|
|
>
|
|
<i className="fas fa-eye text-lg"></i>
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
try {
|
|
await onUpdateEvent({
|
|
...event,
|
|
verificationStatus: 'PENDING_ADMIN',
|
|
request_by_HOD: new Date().toISOString()
|
|
});
|
|
setToast({ message: `"${event.title}" approved and sent to Admin.`, type: 'success' });
|
|
} catch (err) {
|
|
alert("Failed to approve event.");
|
|
}
|
|
}}
|
|
className="flex-1 py-4 bg-emerald-600 hover:bg-emerald-700 text-white rounded-2xl font-black text-[10px] uppercase tracking-widest shadow-lg shadow-emerald-200 transition-all active:scale-95 flex items-center justify-center gap-2"
|
|
>
|
|
<i className="fas fa-check-circle"></i> Accept Request
|
|
</button>
|
|
<button
|
|
onClick={async () => {
|
|
if (window.confirm(`Are you sure you want to decline "${event.title}"?`)) {
|
|
try {
|
|
await onUpdateEvent({ ...event, verificationStatus: 'REJECTED' });
|
|
setToast({ message: `"${event.title}" has been declined.`, type: 'delete' });
|
|
} catch (err) {
|
|
alert("Failed to decline event.");
|
|
}
|
|
}
|
|
}}
|
|
className="px-6 py-4 bg-rose-50 hover:bg-rose-100 text-rose-600 rounded-2xl font-black text-[10px] uppercase tracking-widest transition-all active:scale-95 flex items-center justify-center"
|
|
title="Decline"
|
|
>
|
|
<i className="fas fa-times-circle text-lg"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
})()}
|
|
</div>
|
|
)}
|
|
</main>
|
|
|
|
{toast && <Toast message={toast.message} type={toast.type} onClose={handleCloseToast} />}
|
|
|
|
{inspectedEvent && (
|
|
<div className="fixed inset-0 z-[10002] flex items-center justify-center p-4 md:p-10 bg-gradient-to-br from-[#0a0f1a]/95 via-[#001e3d]/95 to-[#050a14]/95 backdrop-blur-xl animate-in fade-in duration-300">
|
|
<div id="inspection-modal-content" className="bg-white rounded-[3rem] w-full max-w-5xl max-h-[90vh] overflow-y-auto shadow-2xl relative animate-in zoom-in-95 duration-500 custom-scrollbar">
|
|
<button
|
|
onClick={() => setInspectedEvent(null)}
|
|
data-html2canvas-ignore="true"
|
|
className="absolute top-6 right-6 z-20 w-12 h-12 bg-black/10 backdrop-blur-md rounded-full flex items-center justify-center text-slate-900 hover:bg-black/20 transition-all active:scale-95"
|
|
>
|
|
<i className="fas fa-times text-xl"></i>
|
|
</button>
|
|
<button
|
|
onClick={downloadPDF}
|
|
disabled={isDownloading}
|
|
data-html2canvas-ignore="true"
|
|
className="absolute top-6 right-20 z-20 px-6 h-12 bg-white/90 backdrop-blur-md rounded-full flex items-center justify-center text-[#004a99] font-black text-[10px] uppercase tracking-widest hover:bg-white transition-all shadow-lg active:scale-95 disabled:opacity-50"
|
|
>
|
|
{isDownloading ? <><i className="fas fa-spinner fa-spin mr-2"></i> Generating...</> : <><i className="fas fa-download mr-2"></i> Download PDF</>}
|
|
</button>
|
|
|
|
<div className="h-64 md:h-96 relative overflow-hidden bg-slate-100">
|
|
<img src={inspectedEvent.image} alt={inspectedEvent.title} className="w-full h-full object-cover" />
|
|
<div className="absolute inset-0 bg-gradient-to-t from-white via-transparent to-transparent"></div>
|
|
<div className="absolute bottom-8 left-8 md:left-12">
|
|
<div className="flex flex-wrap gap-3 mb-4">
|
|
<span className="bg-[#004a99] text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-[#004a99]/20">{inspectedEvent.category}</span>
|
|
<span className="bg-white/90 backdrop-blur-md text-slate-900 px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest border border-slate-200">{inspectedEvent.pricingType}</span>
|
|
{inspectedEvent.status && (
|
|
<span className="bg-emerald-600 text-white px-6 py-2 rounded-full text-[10px] font-black uppercase tracking-widest shadow-lg shadow-emerald-600/20">{inspectedEvent.status}</span>
|
|
)}
|
|
</div>
|
|
<h2 className="text-4xl md:text-6xl font-black text-slate-900 uppercase tracking-tighter leading-none">{inspectedEvent.title}</h2>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="p-8 md:p-12 grid grid-cols-1 lg:grid-cols-3 gap-12">
|
|
<div className="lg:col-span-2 space-y-10">
|
|
<div>
|
|
<h4 className="text-[#004a99] font-black text-xs uppercase tracking-[0.4em] mb-4 flex items-center gap-3">
|
|
<span className="w-2 h-0.5 bg-[#004a99]"></span> Event Summary
|
|
</h4>
|
|
<p className="text-slate-600 text-lg leading-relaxed font-medium">
|
|
{inspectedEvent.event_summary || "No detailed summary available for this prestigious event session."}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
|
|
<div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
|
|
<span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Domain Focus</span>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-[#004a99] shadow-sm font-black text-xs">
|
|
{inspectedEvent.domain?.charAt(0) || <i className="fas fa-microchip"></i>}
|
|
</div>
|
|
<span className="text-sm font-black uppercase tracking-tight text-slate-900">{inspectedEvent.domain}</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
|
|
<span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Coordinator</span>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-orange-500 shadow-sm"><i className="fas fa-user-tie"></i></div>
|
|
<span className="text-sm font-black uppercase tracking-tight text-slate-900">{inspectedEvent.coordinator}</span>
|
|
</div>
|
|
</div>
|
|
<div className="bg-slate-50 p-6 rounded-3xl border border-slate-100 text-left">
|
|
<span className="block text-[10px] font-black text-slate-400 uppercase tracking-widest mb-4">Creation Time (IST)</span>
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-10 h-10 bg-white rounded-xl flex items-center justify-center text-emerald-500 shadow-sm"><i className="fas fa-clock"></i></div>
|
|
<span className="text-sm font-black uppercase tracking-tight text-slate-900">
|
|
{inspectedEvent.request_by_faculty
|
|
? new Date(inspectedEvent.request_by_faculty).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', dateStyle: 'medium', timeStyle: 'short' })
|
|
: 'N/A'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Operational Settings & Rules */}
|
|
<div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
|
|
<h4 className="text-[#004a99] font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-[#004a99] rounded-full"></span> Operational Details
|
|
</h4>
|
|
<div className="grid grid-cols-2 gap-6">
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Conducting Dept</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.conducting_dept || 'General'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Associated Club</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.club || 'None'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Participant Target</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.participantType || 'All'}</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Duration</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.durationDays || 1} Day(s)</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Reg. Deadline</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">
|
|
{inspectedEvent.registrationDeadline ? new Date(inspectedEvent.registrationDeadline).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' }) : 'None'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div className="pt-6 border-t border-slate-200 grid grid-cols-2 gap-6">
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Event Format</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">{inspectedEvent.isTeamEvent ? 'Team Play' : 'Solo Mode'}</span>
|
|
</div>
|
|
{inspectedEvent.isTeamEvent && (
|
|
<div>
|
|
<span className="block text-[9px] font-black text-slate-400 uppercase tracking-widest mb-1.5">Team Size Limit</span>
|
|
<span className="text-xs font-black text-slate-900 uppercase tracking-tight">Max {inspectedEvent.teamSizeLimit || 1} ({inspectedEvent.teamComposition})</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Finance & Budget */}
|
|
<div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
|
|
<h4 className="text-[#f97316] font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-[#f97316] rounded-full"></span> Budget & Financial Summary
|
|
</h4>
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-6">
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Refreshments</span>
|
|
<span className="text-sm font-black text-slate-900">₹{inspectedEvent.refreshment_expense || 0}</span>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Transport</span>
|
|
<span className="text-sm font-black text-slate-900">₹{inspectedEvent.transportation_expense || 0}</span>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-2xl border border-slate-200/50 shadow-sm text-center">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest mb-1">Session Fee</span>
|
|
<span className="text-sm font-black text-slate-900">₹{inspectedEvent.session_coverage_fee || 0}</span>
|
|
</div>
|
|
<div className="bg-white p-4 rounded-2xl border-2 border-orange-200 shadow-sm text-center bg-orange-50/50">
|
|
<span className="block text-[8px] font-black text-orange-600 uppercase tracking-widest mb-1">Total Expense</span>
|
|
<span className="text-sm font-black text-orange-600">₹{inspectedEvent.total_expense || 0}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Department Allocations & Quotas */}
|
|
{inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 && (
|
|
<div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
|
|
<h4 className="text-indigo-600 font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-indigo-500 rounded-full"></span> Department Limits & Seat Quotas
|
|
</h4>
|
|
<div className="grid grid-cols-2 sm:grid-cols-4 md:grid-cols-5 gap-4">
|
|
{Object.entries(inspectedEvent.deptLimits).map(([dept, maxSeats]) => {
|
|
const current = inspectedEvent.currentDeptCounts?.[dept] || 0;
|
|
const sectionLimits = inspectedEvent.deptSectionLimits?.[dept];
|
|
const hasSectionLimits = sectionLimits && Object.keys(sectionLimits).length > 0;
|
|
return (
|
|
<div key={dept} className="bg-white border border-slate-200/50 rounded-2xl p-4 shadow-sm text-center flex flex-col justify-between">
|
|
<div>
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase mb-1">{dept}</span>
|
|
<span className="text-xs font-black text-slate-900">{current} / {maxSeats} Seats</span>
|
|
</div>
|
|
{hasSectionLimits && (
|
|
<div className="mt-2 pt-2 border-t border-slate-100 text-left space-y-0.5">
|
|
{Object.entries(sectionLimits).map(([sec, limit]) => {
|
|
const secCount = inspectedEvent.currentDeptSectionCounts?.[dept]?.[sec] || 0;
|
|
return (
|
|
<div key={sec} className="flex justify-between text-[7px] font-black uppercase text-slate-500">
|
|
<span>Sec {sec}:</span>
|
|
<span className="text-slate-800">{secCount} / {limit}</span>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Schedule & Resource Persons */}
|
|
{inspectedEvent.schedule && inspectedEvent.schedule.length > 0 && (
|
|
<div className="bg-slate-50 p-8 rounded-[2.5rem] border border-slate-100 space-y-6 text-left">
|
|
<h4 className="text-emerald-600 font-black text-[10px] uppercase tracking-[0.3em] flex items-center gap-3">
|
|
<span className="w-1.5 h-1.5 bg-emerald-500 rounded-full"></span> Event Schedule & Resource Persons
|
|
</h4>
|
|
<div className="space-y-4">
|
|
{inspectedEvent.schedule.map((slot, idx) => (
|
|
<div key={slot.id || idx} className="bg-white border border-slate-200/50 p-6 rounded-2xl shadow-sm text-left">
|
|
<div className="flex justify-between items-center pb-3 border-b border-slate-100 mb-4">
|
|
<span className="text-xs font-black text-slate-900 uppercase">Day {slot.day_idx} — Batch {slot.batch_idx}</span>
|
|
<span className="text-[10px] font-bold text-slate-500 uppercase">{slot.date} ({slot.start_time} - {slot.end_time})</span>
|
|
</div>
|
|
{slot.resource_person ? (
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Resource Person</span>
|
|
<span className="text-xs font-bold text-slate-900 uppercase flex items-center gap-2">
|
|
<i className="fas fa-user-circle text-orange-500"></i>
|
|
{slot.resource_person.name}
|
|
</span>
|
|
<span className="text-[8px] text-slate-400 font-black uppercase mt-0.5 block">{slot.resource_person.type} speaker</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Affiliation</span>
|
|
<span className="text-xs font-semibold text-slate-700 uppercase leading-tight">
|
|
{slot.resource_person.dept ? `${slot.resource_person.dept} dept, ` : ''}
|
|
{slot.resource_person.college_name || 'RIT'}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase mb-0.5">Contact</span>
|
|
<span className="text-xs font-semibold text-slate-700 block">{slot.resource_person.email}</span>
|
|
<span className="text-[10px] font-semibold text-slate-500 block">{slot.resource_person.phone}</span>
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="text-xs text-slate-400 font-bold uppercase tracking-widest text-center py-2">No Resource Person Assigned</div>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="space-y-6">
|
|
<div className="bg-slate-900 text-white p-8 rounded-[2.5rem] shadow-xl">
|
|
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest mb-8">Session Details</h4>
|
|
<div className="space-y-6">
|
|
<div className="flex items-start gap-4">
|
|
<i className="far fa-calendar text-[#004a99] mt-1"></i>
|
|
<div>
|
|
<p className="text-xs font-black uppercase tracking-widest">{inspectedEvent.date}</p>
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">{inspectedEvent.time}</p>
|
|
</div>
|
|
</div>
|
|
<div className="flex items-start gap-4">
|
|
<i className="fas fa-location-dot text-[#004a99] mt-1"></i>
|
|
<div>
|
|
<p className="text-xs font-black uppercase tracking-widest">{inspectedEvent.location}</p>
|
|
<p className="text-[10px] text-slate-400 font-bold uppercase mt-1">Institutional Venue</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-12 pt-8 border-t border-slate-800">
|
|
<div className="flex justify-between items-end mb-4">
|
|
<span className="text-[10px] font-black text-slate-400 uppercase tracking-widest">Enrollment Status</span>
|
|
<span className="text-xl font-black text-white">{inspectedEvent.currentParticipants || 0} / {inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : '∞')}</span>
|
|
</div>
|
|
<div className="h-2 bg-slate-800 rounded-full overflow-hidden">
|
|
<div
|
|
className="h-full bg-gradient-to-r from-[#004a99] to-blue-400 font-black"
|
|
style={{ width: `${Math.min(((inspectedEvent.currentParticipants || 0) / (typeof (inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : null)) === 'number' ? (inspectedEvent.maxParticipants || (inspectedEvent.deptLimits && Object.keys(inspectedEvent.deptLimits).length > 0 ? Object.values(inspectedEvent.deptLimits).map(Number).reduce((a, b) => a + b, 0) : 100)) : 100)) * 100, 100)}%` }}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Verification Hierarchy & Request Timeline */}
|
|
<div className="bg-white border border-slate-200 p-8 rounded-[2.5rem] shadow-sm text-left">
|
|
<h4 className="text-[#004a99] font-black text-[10px] uppercase tracking-[0.3em] mb-6 flex items-center gap-2">
|
|
<i className="fas fa-history text-[#004a99]"></i> Verification Timeline
|
|
</h4>
|
|
<div className="space-y-6 relative before:absolute before:left-3.5 before:top-2 before:bottom-2 before:w-[2px] before:bg-slate-100">
|
|
{/* Faculty Step */}
|
|
<div className="flex gap-4 relative">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
|
|
inspectedEvent.request_by_faculty ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400'
|
|
}`}>
|
|
<i className="fas fa-file-signature text-[10px]"></i>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Faculty Coordinator</span>
|
|
<span className="block text-xs font-black text-slate-900 uppercase">Request Initiated</span>
|
|
{inspectedEvent.request_by_faculty ? (
|
|
<span className="block text-[9px] text-slate-500 font-bold mt-1">
|
|
{new Date(inspectedEvent.request_by_faculty).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
) : (
|
|
<span className="block text-[9px] text-slate-400 font-bold mt-1">Pending</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* HOD Step */}
|
|
<div className="flex gap-4 relative">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
|
|
inspectedEvent.category === 'CENTRE-ACTIVITY' ? 'bg-blue-50 text-blue-500' :
|
|
inspectedEvent.request_by_HOD ? 'bg-emerald-100 text-emerald-600' : 'bg-slate-100 text-slate-400'
|
|
}`}>
|
|
<i className="fas fa-user-shield text-[10px]"></i>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Head of Department</span>
|
|
<span className="block text-xs font-black text-slate-900 uppercase">HOD Request Raised</span>
|
|
{inspectedEvent.category === 'CENTRE-ACTIVITY' ? (
|
|
<span className="block text-[9px] text-blue-600 font-black uppercase mt-1">Bypassed (Centre Activity)</span>
|
|
) : inspectedEvent.request_by_HOD ? (
|
|
<span className="block text-[9px] text-slate-500 font-bold mt-1">
|
|
{new Date(inspectedEvent.request_by_HOD).toLocaleString('en-US', { month: 'short', day: '2-digit', year: 'numeric', hour: '2-digit', minute: '2-digit' })}
|
|
</span>
|
|
) : (
|
|
<span className="block text-[9px] text-slate-400 font-bold mt-1">Pending HOD Verification</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Admin Step */}
|
|
<div className="flex gap-4 relative">
|
|
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black z-10 ${
|
|
inspectedEvent.verificationStatus === 'APPROVED' ? 'bg-emerald-100 text-emerald-600' :
|
|
inspectedEvent.verificationStatus === 'REJECTED' ? 'bg-rose-100 text-rose-600' :
|
|
'bg-slate-100 text-slate-400'
|
|
}`}>
|
|
<i className="fas fa-university text-[10px]"></i>
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<span className="block text-[8px] font-black text-slate-400 uppercase tracking-widest">Admin Hub</span>
|
|
<span className="block text-xs font-black text-slate-900 uppercase">Publish Status</span>
|
|
<span className={`inline-block text-[9px] font-black uppercase tracking-wider px-2 py-0.5 rounded-md mt-1 ${
|
|
inspectedEvent.verificationStatus === 'APPROVED' ? 'bg-emerald-50 text-emerald-600 border border-emerald-100' :
|
|
inspectedEvent.verificationStatus === 'REJECTED' ? 'bg-rose-50 text-rose-600 border border-rose-100' :
|
|
'bg-amber-50 text-amber-600 border border-amber-100'
|
|
}`}>
|
|
{inspectedEvent.verificationStatus === 'APPROVED' ? 'Published' :
|
|
inspectedEvent.verificationStatus === 'REJECTED' ? 'Rejected' :
|
|
'Awaiting Admin Approval'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AdminLandingPage; |