Update frontend components and integrate firebase backend
This commit is contained in:
SACHIN
@@ -20,7 +20,8 @@ import {
|
||||
Building2,
|
||||
Users,
|
||||
Wallet,
|
||||
Ticket
|
||||
Ticket,
|
||||
Layers
|
||||
} from 'lucide-react';
|
||||
import { cn } from '../../lib/utils';
|
||||
import { format } from 'date-fns';
|
||||
@@ -41,13 +42,27 @@ interface Event {
|
||||
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 = () => {
|
||||
@@ -294,38 +309,129 @@ export const EventHistory: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<div className="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" />
|
||||
Date & Time
|
||||
</div>
|
||||
<p className="text-sm font-bold text-text-dark">{new Date(selectedEvent.startDate).toLocaleString()}</p>
|
||||
</div>
|
||||
<div className="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}</p>
|
||||
{/* 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="space-y-6">
|
||||
<div className="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" />
|
||||
Department
|
||||
</div>
|
||||
<p className="text-sm font-bold text-text-dark">{selectedEvent.department}</p>
|
||||
<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>
|
||||
<div className="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" />
|
||||
Target Batches
|
||||
</div>
|
||||
<p className="text-sm font-bold text-text-dark">{selectedEvent.academicYears?.join(', ') || 'N/A'}</p>
|
||||
<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>
|
||||
@@ -347,16 +453,77 @@ export const EventHistory: React.FC = () => {
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="grid grid-cols-2 gap-8 pt-4 border-t border-slate-50">
|
||||
<div className="p-4 bg-slate-50 rounded-2xl">
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted mb-1">
|
||||
<Wallet className="w-3.5 h-3.5" />
|
||||
Budget
|
||||
{/* 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>
|
||||
<p className="text-lg font-black text-text-dark">₹{selectedEvent.budget?.toLocaleString() || '0'}</p>
|
||||
</div>
|
||||
<div className="p-4 bg-slate-50 rounded-2xl">
|
||||
<div className="flex items-center gap-2 text-[10px] font-black uppercase tracking-widest text-text-muted mb-1">
|
||||
)}
|
||||
|
||||
{/* 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>
|
||||
|
||||
Reference in New Issue
Block a user