555 lines
27 KiB
TypeScript
555 lines
27 KiB
TypeScript
import { API_BASE_URL } from '../../lib/config';
|
|
import React, { useEffect, useState } from 'react';
|
|
import { motion, AnimatePresence } from 'framer-motion';
|
|
import {
|
|
History,
|
|
Search,
|
|
Calendar,
|
|
MapPin,
|
|
CheckCircle2,
|
|
XCircle,
|
|
Clock,
|
|
Download,
|
|
Filter,
|
|
AlertTriangle,
|
|
ChevronRight,
|
|
User,
|
|
Heart,
|
|
FileText,
|
|
X,
|
|
Building2,
|
|
Users,
|
|
Wallet,
|
|
Ticket,
|
|
Layers
|
|
} from 'lucide-react';
|
|
import { cn } from '../../lib/utils';
|
|
import { format } from 'date-fns';
|
|
import { Pagination } from './Pagination';
|
|
|
|
interface Event {
|
|
id: number;
|
|
title: string;
|
|
startDate: string;
|
|
endDate: string;
|
|
type: string;
|
|
status: string;
|
|
department: string;
|
|
location: string;
|
|
budget: number;
|
|
conflictMessage?: string;
|
|
rejectionReason?: string;
|
|
institution: string;
|
|
category: string;
|
|
academicYears: string[];
|
|
targetDepartments?: string[];
|
|
targetedSections?: string[];
|
|
proposer?: {
|
|
fullName: string;
|
|
email?: string;
|
|
department?: string;
|
|
role?: string;
|
|
};
|
|
description?: string;
|
|
sponsors?: string[];
|
|
hasRegistrationFee: boolean;
|
|
registrationFee: number;
|
|
maxParticipants?: number | null;
|
|
requirements?: string[];
|
|
refreshment_expense?: number;
|
|
transportation_expense?: number;
|
|
session_coverage_fee?: number;
|
|
total_expense?: number;
|
|
paymentLink?: string;
|
|
isClubEvent?: boolean;
|
|
eventScope?: string;
|
|
}
|
|
|
|
export const EventHistory: React.FC = () => {
|
|
const [events, setEvents] = useState<Event[]>([]);
|
|
const [searchQuery, setSearchQuery] = useState('');
|
|
const [statusFilter, setStatusFilter] = useState('ALL');
|
|
const [selectedEvent, setSelectedEvent] = useState<Event | null>(null);
|
|
const [currentPage, setCurrentPage] = useState(1);
|
|
const [itemsPerPage, setItemsPerPage] = useState(10);
|
|
|
|
useEffect(() => {
|
|
fetch(API_BASE_URL + '/api/events')
|
|
.then(res => res.json())
|
|
.then(data => setEvents(data))
|
|
.catch(err => console.error('History fetch failed:', err));
|
|
}, []);
|
|
|
|
const getStatusStyle = (status: string, hasConflict: boolean) => {
|
|
if (hasConflict && status !== 'APPROVED') return {
|
|
bg: 'bg-red-50',
|
|
text: 'text-red-600',
|
|
border: 'border-red-100',
|
|
icon: AlertTriangle,
|
|
label: 'CONFLICT'
|
|
};
|
|
|
|
switch (status) {
|
|
case 'APPROVED': return { bg: 'bg-emerald-50', text: 'text-emerald-600', border: 'border-emerald-100', icon: CheckCircle2, label: 'APPROVED' };
|
|
case 'REQUESTED': return { bg: 'bg-blue-50', text: 'text-blue-600', border: 'border-blue-100', icon: Clock, label: 'REQUESTED' };
|
|
case 'PENDING_PR': return { bg: 'bg-purple-50', text: 'text-purple-600', border: 'border-purple-100', icon: ShieldCheck, label: 'PENDING PRINCIPAL' };
|
|
case 'HOD_REJECTED':
|
|
case 'PRINCIPAL_REJECTED': return { bg: 'bg-red-50', text: 'text-red-600', border: 'border-red-100', icon: XCircle, label: 'REJECTED' };
|
|
default: return { bg: 'bg-slate-50', text: 'text-slate-600', border: 'border-slate-100', icon: Clock, label: status };
|
|
}
|
|
};
|
|
|
|
const filteredEvents = events
|
|
.filter(e => {
|
|
const matchesSearch = e.title.toLowerCase().includes(searchQuery.toLowerCase()) ||
|
|
e.department.toLowerCase().includes(searchQuery.toLowerCase());
|
|
|
|
if (statusFilter === 'ALL') return matchesSearch;
|
|
if (statusFilter === 'PENDING') return matchesSearch && (e.status === 'REQUESTED' || e.status === 'PENDING_PR');
|
|
if (statusFilter === 'REJECTED') return matchesSearch && e.status.includes('REJECTED');
|
|
return matchesSearch && e.status === statusFilter;
|
|
})
|
|
.sort((a, b) => new Date(b.startDate).getTime() - new Date(a.startDate).getTime());
|
|
|
|
const currentEvents = filteredEvents.slice(
|
|
(currentPage - 1) * itemsPerPage,
|
|
currentPage * itemsPerPage
|
|
);
|
|
|
|
return (
|
|
<div className="space-y-8 pb-10">
|
|
{/* Header Section */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-6">
|
|
<div className="flex items-center gap-5">
|
|
<div className="w-12 h-12 bg-brand-navy rounded-2xl flex items-center justify-center text-white premium-shadow">
|
|
<History className="w-6 h-6" />
|
|
</div>
|
|
<div>
|
|
<h2 className="text-2xl font-black text-text-dark tracking-tight">Institutional Event History</h2>
|
|
<p className="text-[10px] font-black uppercase tracking-widest text-text-muted">Audit-ready comprehensive event ledger</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<button className="flex items-center gap-2 px-4 py-2 bg-white border border-slate-100 rounded-xl text-[10px] font-black uppercase tracking-widest text-text-muted hover:bg-slate-50 transition-all">
|
|
<Download className="w-4 h-4" />
|
|
Export CSV
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filters Bar */}
|
|
<div className="flex flex-col lg:flex-row gap-4">
|
|
<div className="relative flex-1">
|
|
<Search className="absolute left-6 top-1/2 -translate-y-1/2 w-5 h-5 text-slate-300" />
|
|
<input
|
|
type="text"
|
|
placeholder="Search by event title or department..."
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
className="w-full h-16 pl-16 pr-8 bg-white border border-slate-100 rounded-3xl text-sm font-bold text-text-dark focus:outline-none focus:ring-4 focus:ring-brand-indigo/5 focus:border-brand-indigo transition-all"
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-2 bg-white p-2 rounded-3xl border border-slate-100">
|
|
{['ALL', 'APPROVED', 'PENDING', 'REJECTED'].map(status => (
|
|
<button
|
|
key={status}
|
|
onClick={() => setStatusFilter(status)}
|
|
className={cn(
|
|
"px-6 py-3 rounded-2xl text-[10px] font-black uppercase tracking-widest transition-all",
|
|
statusFilter === status
|
|
? "bg-brand-indigo text-white premium-shadow-sm"
|
|
: "text-text-muted hover:bg-slate-50"
|
|
)}
|
|
>
|
|
{status}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Events Ledger */}
|
|
<div className="bg-white rounded-[2.5rem] border border-slate-100 premium-shadow overflow-hidden">
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-slate-50">
|
|
<th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Event Details</th>
|
|
<th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Logistics</th>
|
|
<th className="px-8 py-6 text-left text-[10px] font-black uppercase tracking-widest text-text-muted">Status</th>
|
|
<th className="px-8 py-6 text-right text-[10px] font-black uppercase tracking-widest text-text-muted">Budget</th>
|
|
<th className="px-8 py-6 text-right text-[10px] font-black uppercase tracking-widest text-text-muted"></th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-50">
|
|
<AnimatePresence mode="popLayout">
|
|
{currentEvents.map((event, idx) => {
|
|
const statusStyle = getStatusStyle(event.status, !!event.conflictMessage);
|
|
const StatusIcon = statusStyle.icon;
|
|
|
|
return (
|
|
<motion.tr
|
|
key={event.id}
|
|
initial={{ opacity: 0, y: 10 }}
|
|
animate={{ opacity: 1, y: 0 }}
|
|
transition={{ delay: idx * 0.03 }}
|
|
onClick={() => setSelectedEvent(event)}
|
|
className="group hover:bg-slate-50/50 transition-colors cursor-pointer"
|
|
>
|
|
<td className="px-8 py-6">
|
|
<div className="flex items-center gap-4">
|
|
<div className={cn(
|
|
"w-10 h-10 rounded-xl flex items-center justify-center font-black text-[10px]",
|
|
event.conflictMessage ? "bg-red-50 text-red-500" : "bg-brand-indigo/5 text-brand-indigo"
|
|
)}>
|
|
{event.department?.slice(0, 3).toUpperCase()}
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-black text-text-dark group-hover:text-brand-indigo transition-colors">{event.title}</p>
|
|
<p className="text-[10px] font-bold text-text-muted uppercase tracking-widest mt-0.5">{event.type}</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6">
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-text-muted">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
<span className="text-[10px] font-bold">{format(new Date(event.startDate), 'MMM d, yyyy')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 text-text-muted">
|
|
<MapPin className="w-3.5 h-3.5" />
|
|
<span className="text-[10px] font-bold">{event.location}</span>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6">
|
|
<div className={cn(
|
|
"inline-flex items-center gap-2 px-3 py-1.5 rounded-full border text-[9px] font-black uppercase tracking-widest",
|
|
statusStyle.bg, statusStyle.text, statusStyle.border
|
|
)}>
|
|
<StatusIcon className="w-3.5 h-3.5" />
|
|
{statusStyle.label}
|
|
</div>
|
|
</td>
|
|
<td className="px-8 py-6 text-right">
|
|
<span className="text-sm font-black text-text-dark">₹{event.budget?.toLocaleString() || '0'}</span>
|
|
</td>
|
|
<td className="px-8 py-6 text-right">
|
|
<button className="p-2 hover:bg-white hover:premium-shadow-sm rounded-lg transition-all text-slate-300 group-hover:text-brand-indigo">
|
|
<ChevronRight className="w-5 h-5" />
|
|
</button>
|
|
</td>
|
|
</motion.tr>
|
|
);
|
|
})}
|
|
</AnimatePresence>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<Pagination
|
|
currentPage={currentPage}
|
|
totalItems={filteredEvents.length}
|
|
itemsPerPage={itemsPerPage}
|
|
onPageChange={setCurrentPage}
|
|
onItemsPerPageChange={(val) => {
|
|
setItemsPerPage(val);
|
|
setCurrentPage(1);
|
|
}}
|
|
itemsPerPageOptions={[5, 10, 20, 50]}
|
|
/>
|
|
</div>
|
|
|
|
{/* Detail Modal */}
|
|
<AnimatePresence>
|
|
{selectedEvent && (
|
|
<div className="fixed inset-0 z-[100] flex items-center justify-center p-4">
|
|
<motion.div
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
onClick={() => setSelectedEvent(null)}
|
|
className="absolute inset-0 bg-slate-900/40 backdrop-blur-sm"
|
|
/>
|
|
<motion.div
|
|
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
animate={{ opacity: 1, scale: 1, y: 0 }}
|
|
exit={{ opacity: 0, scale: 0.9, y: 20 }}
|
|
className="relative w-full max-w-2xl bg-white rounded-[2.5rem] premium-shadow overflow-hidden max-h-[90vh] overflow-y-auto"
|
|
>
|
|
<div className="p-8 bg-brand-navy text-white flex justify-between items-start">
|
|
<div>
|
|
<div className="flex items-center gap-2 mb-2">
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-white/60">Event History</span>
|
|
<span className="w-1 h-1 bg-white/30 rounded-full" />
|
|
<span className="text-[10px] font-black uppercase tracking-[0.2em] text-white/60">{selectedEvent.institution}</span>
|
|
</div>
|
|
<h3 className="text-2xl font-black tracking-tight">{selectedEvent.title}</h3>
|
|
</div>
|
|
<button
|
|
onClick={() => setSelectedEvent(null)}
|
|
className="p-2 hover:bg-white/10 rounded-xl transition-all"
|
|
>
|
|
<X className="w-6 h-6" />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-8 space-y-8">
|
|
{/* Description */}
|
|
{selectedEvent.description && (
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
Description
|
|
</div>
|
|
<p className="text-sm font-medium text-text-dark leading-relaxed bg-slate-50 p-4 rounded-2xl border border-slate-100">
|
|
{selectedEvent.description}
|
|
</p>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Classification */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<FileText className="w-3.5 h-3.5" />
|
|
Event Type
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">{selectedEvent.type || 'N/A'}</p>
|
|
</div>
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Layers className="w-3.5 h-3.5" />
|
|
Hub Category
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark capitalize">
|
|
{selectedEvent.category === 'TECHNICAL' ? 'Technical'
|
|
: selectedEvent.category === 'NON-TECHNICAL' ? 'Non-Technical'
|
|
: selectedEvent.category === 'WORKSHOP' ? 'Workshop'
|
|
: selectedEvent.category === 'CENTRE-ACTIVITY' ? 'Centre Based Activity'
|
|
: selectedEvent.category || 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Dates */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
Start Date & Time
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{selectedEvent.startDate
|
|
? new Date(selectedEvent.startDate).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }) + ' IST'
|
|
: 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Calendar className="w-3.5 h-3.5" />
|
|
End Date & Time
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{selectedEvent.endDate
|
|
? new Date(selectedEvent.endDate).toLocaleString('en-IN', { timeZone: 'Asia/Kolkata', day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', hour12: false }) + ' IST'
|
|
: 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Location & Capacity */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<MapPin className="w-3.5 h-3.5" />
|
|
Location
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">{selectedEvent.location || 'N/A'}</p>
|
|
</div>
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Users className="w-3.5 h-3.5" />
|
|
Total Capacity
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{selectedEvent.maxParticipants ? selectedEvent.maxParticipants.toLocaleString() : 'Unlimited'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Scope */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Building2 className="w-3.5 h-3.5" />
|
|
Event Scope
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{selectedEvent.department === 'Institutional' ? 'Institutional Event' : 'Departmental Event'}
|
|
</p>
|
|
</div>
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Building2 className="w-3.5 h-3.5" />
|
|
Proposing Department
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{(selectedEvent.proposer?.department && selectedEvent.proposer?.department !== 'N/A')
|
|
? selectedEvent.proposer.department
|
|
: (selectedEvent.proposer?.role === 'ADMIN' ? 'System Administrator' : selectedEvent.department)
|
|
|| 'N/A'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Target Departments & Batches */}
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Users className="w-3.5 h-3.5" />
|
|
Target Audience
|
|
</div>
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Departments</p>
|
|
<p className="text-xs font-bold text-text-dark">
|
|
{(selectedEvent.targetDepartments && selectedEvent.targetDepartments.length > 0)
|
|
? selectedEvent.targetDepartments.join(', ')
|
|
: selectedEvent.department || 'N/A'}
|
|
</p>
|
|
</div>
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Batches</p>
|
|
<p className="text-xs font-bold text-text-dark">
|
|
{selectedEvent.academicYears?.length > 0 ? selectedEvent.academicYears.join(', ') : 'All'}
|
|
</p>
|
|
</div>
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Sections</p>
|
|
<p className="text-xs font-bold text-text-dark">
|
|
{(selectedEvent.targetedSections && selectedEvent.targetedSections.length > 0)
|
|
? selectedEvent.targetedSections.join(', ')
|
|
: 'All Sections'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sponsors */}
|
|
{selectedEvent.sponsors && selectedEvent.sponsors.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Heart className="w-3.5 h-3.5 text-brand-indigo" />
|
|
Event Sponsors
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedEvent.sponsors.map((sponsor, idx) => (
|
|
<span key={idx} className="px-3 py-1 bg-brand-glow text-brand-indigo rounded-lg text-[10px] font-black uppercase tracking-widest border border-brand-indigo/10">
|
|
{sponsor}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Event Amenities / Requirements */}
|
|
{selectedEvent.requirements && selectedEvent.requirements.length > 0 && (
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<CheckCircle2 className="w-3.5 h-3.5 text-emerald-500" />
|
|
Event Amenities
|
|
</div>
|
|
<div className="flex flex-wrap gap-2">
|
|
{selectedEvent.requirements.map((req, idx) => (
|
|
<span key={idx} className="px-3 py-1 bg-emerald-50 text-emerald-700 rounded-lg text-[10px] font-black uppercase tracking-widest border border-emerald-100">
|
|
{req}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Financial Details */}
|
|
<div className="space-y-3 border-t border-slate-50 pt-4">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Wallet className="w-3.5 h-3.5" />
|
|
Financial Details
|
|
</div>
|
|
<div className="grid grid-cols-2 md:grid-cols-3 gap-3">
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Budget</p>
|
|
<p className="text-sm font-black text-text-dark">₹{selectedEvent.budget?.toLocaleString() || '0'}</p>
|
|
</div>
|
|
{(selectedEvent.refreshment_expense || 0) > 0 && (
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Refreshments</p>
|
|
<p className="text-sm font-black text-text-dark">₹{selectedEvent.refreshment_expense?.toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
{(selectedEvent.transportation_expense || 0) > 0 && (
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Transportation</p>
|
|
<p className="text-sm font-black text-text-dark">₹{selectedEvent.transportation_expense?.toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
{(selectedEvent.session_coverage_fee || 0) > 0 && (
|
|
<div className="p-3 bg-slate-50 rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-text-muted mb-1">Session Coverage</p>
|
|
<p className="text-sm font-black text-text-dark">₹{selectedEvent.session_coverage_fee?.toLocaleString()}</p>
|
|
</div>
|
|
)}
|
|
<div className="p-3 bg-brand-navy rounded-xl">
|
|
<p className="text-[9px] font-black uppercase tracking-widest text-white/60 mb-1">Total Expense</p>
|
|
<p className="text-sm font-black text-white">₹{(selectedEvent.total_expense || selectedEvent.budget || 0).toLocaleString()}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Registration / Free Event */}
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Ticket className="w-3.5 h-3.5" />
|
|
Registration
|
|
</div>
|
|
<p className="text-sm font-bold text-text-dark">
|
|
{selectedEvent.hasRegistrationFee
|
|
? `Paid — ₹${selectedEvent.registrationFee?.toLocaleString()}`
|
|
: 'Free Event'}
|
|
</p>
|
|
{selectedEvent.hasRegistrationFee && selectedEvent.paymentLink && (
|
|
<a href={selectedEvent.paymentLink} target="_blank" rel="noopener noreferrer" className="text-[10px] text-brand-indigo font-bold underline">Payment Link ↗</a>
|
|
)}
|
|
</div>
|
|
<div className="p-4 bg-slate-50 rounded-2xl space-y-1">
|
|
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted">
|
|
<Ticket className="w-3.5 h-3.5" />
|
|
Status
|
|
</div>
|
|
<p className="text-xs font-black text-brand-indigo uppercase">{selectedEvent.status}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedEvent.rejectionReason && (
|
|
<div className="p-4 bg-red-50 border border-red-100 rounded-2xl">
|
|
<p className="text-[10px] font-black uppercase text-red-500 mb-1">Rejection Reason</p>
|
|
<p className="text-xs font-bold text-red-700">{selectedEvent.rejectionReason}</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</motion.div>
|
|
</div>
|
|
)}
|
|
</AnimatePresence>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const ShieldCheck = (props: any) => (
|
|
<svg {...props} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10" />
|
|
<path d="m9 12 2 2 4-4" />
|
|
</svg>
|
|
);
|