92 lines
5.1 KiB
TypeScript
92 lines
5.1 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { StudentRequest } from '../types';
|
|
|
|
interface FacultyRequestsViewProps {
|
|
onShowToast: (msg: string) => void;
|
|
}
|
|
|
|
const FacultyRequestsView: React.FC<FacultyRequestsViewProps> = ({ onShowToast }) => {
|
|
const [requests, setRequests] = useState<StudentRequest[]>([
|
|
{ id: 'R1', studentName: 'Aditya Varma', rollNo: '21IT001', branch: 'Information Technology', eventName: 'Next-Gen AI Forum', eventId: '1', timestamp: '2h ago', status: 'PENDING' },
|
|
{ id: 'R2', studentName: 'Priya Dharshini', rollNo: '21CS042', branch: 'Computer Science', eventName: 'Robo-Wars 2025', eventId: '6', timestamp: '4h ago', status: 'PENDING' },
|
|
{ id: 'R3', studentName: 'Manoj Kumar', rollNo: '22ME015', branch: 'Mechanical Engineering', eventName: 'Robo-Wars 2025', eventId: '6', timestamp: '5h ago', status: 'PENDING' },
|
|
{ id: 'R4', studentName: 'Sneha Reddy', rollNo: '21IT112', branch: 'Information Technology', eventName: 'Web Architecture 2025', eventId: '2', timestamp: '1d ago', status: 'PENDING' },
|
|
]);
|
|
|
|
const handleAction = (id: string, action: 'APPROVED' | 'REJECTED') => {
|
|
const req = requests.find(r => r.id === id);
|
|
if (!req) return;
|
|
|
|
setRequests(prev => prev.filter(r => r.id !== id));
|
|
onShowToast(`Request from ${req.studentName} has been ${action.toLowerCase()}.`);
|
|
};
|
|
|
|
return (
|
|
<div className="animate-in slide-in-from-bottom-10 duration-700">
|
|
<div className="flex items-end justify-between mb-12">
|
|
<div>
|
|
<h3 className="text-4xl font-black tracking-tight uppercase mb-2">Registration <span className="text-blue-500">Requests</span></h3>
|
|
<p className="text-[10px] font-black text-gray-500 uppercase tracking-[0.4em]">Review & Approve Student Access</p>
|
|
</div>
|
|
<div className="bg-white/5 px-6 py-3 rounded-2xl border border-white/10 flex items-center gap-4">
|
|
<span className="text-[10px] font-black uppercase tracking-widest text-gray-400">Total Pending:</span>
|
|
<span className="text-xl font-black text-blue-500 tabular-nums">{requests.length}</span>
|
|
</div>
|
|
</div>
|
|
|
|
{requests.length > 0 ? (
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
|
|
{requests.map((req) => (
|
|
<div key={req.id} className="bg-white/5 border border-white/10 rounded-[2.5rem] p-8 transition-all hover:bg-white/[0.08] group relative overflow-hidden">
|
|
<div className="absolute top-0 right-0 p-8 opacity-5 group-hover:opacity-10 transition-opacity">
|
|
<i className="fas fa-user-graduate text-8xl"></i>
|
|
</div>
|
|
|
|
<div className="flex items-start justify-between mb-8 relative z-10">
|
|
<div className="flex items-center gap-4">
|
|
<div className="w-14 h-14 rounded-2xl bg-blue-500/10 flex items-center justify-center text-blue-500">
|
|
<i className="fas fa-user-edit"></i>
|
|
</div>
|
|
<div>
|
|
<h4 className="text-xl font-black uppercase tracking-tight">{req.studentName}</h4>
|
|
<span className="text-[10px] font-bold text-gray-500 uppercase tracking-widest">{req.rollNo} • {req.branch}</span>
|
|
</div>
|
|
</div>
|
|
<span className="text-[9px] font-black text-gray-600 uppercase tracking-widest">{req.timestamp}</span>
|
|
</div>
|
|
|
|
<div className="bg-black/40 rounded-2xl p-6 mb-8 border border-white/5 relative z-10">
|
|
<span className="block text-[9px] font-black text-blue-500 uppercase tracking-widest mb-2">Requested Event</span>
|
|
<p className="text-lg font-black uppercase tracking-tight">{req.eventName}</p>
|
|
</div>
|
|
|
|
<div className="flex gap-4 relative z-10">
|
|
<button
|
|
onClick={() => handleAction(req.id, 'APPROVED')}
|
|
className="flex-1 py-4 bg-emerald-600 text-white rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-emerald-700 transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<i className="fas fa-check-circle"></i> Approve
|
|
</button>
|
|
<button
|
|
onClick={() => handleAction(req.id, 'REJECTED')}
|
|
className="flex-1 py-4 bg-rose-600/10 border border-rose-600/20 text-rose-500 rounded-2xl font-black uppercase text-[10px] tracking-widest hover:bg-rose-600 hover:text-white transition-all flex items-center justify-center gap-2"
|
|
>
|
|
<i className="fas fa-times-circle"></i> Reject
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<div className="py-32 flex flex-col items-center justify-center bg-white/5 border-2 border-dashed border-white/10 rounded-[3rem]">
|
|
<i className="fas fa-inbox text-6xl text-white/10 mb-6"></i>
|
|
<p className="text-white/40 font-black uppercase tracking-widest">No pending requests found</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default FacultyRequestsView;
|