331 lines
12 KiB
TypeScript
331 lines
12 KiB
TypeScript
'use client';
|
|
|
|
import { Student } from './columns';
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from '@workspace/ui/components/dialog';
|
|
import { Badge } from '@workspace/ui/components/badge';
|
|
import { Avatar, AvatarFallback, AvatarImage } from '@workspace/ui/components/avatar';
|
|
import { Separator } from '@workspace/ui/components/separator';
|
|
import { Button } from '@workspace/ui/components/button';
|
|
import {
|
|
Mail,
|
|
Phone,
|
|
MapPin,
|
|
Calendar,
|
|
GraduationCap,
|
|
User,
|
|
Linkedin,
|
|
Github,
|
|
FileText,
|
|
Award,
|
|
BookOpen,
|
|
ExternalLink,
|
|
X,
|
|
Edit,
|
|
Download,
|
|
Share2
|
|
} from 'lucide-react';
|
|
|
|
interface StudentDetailsModalProps {
|
|
student: Student;
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
}
|
|
|
|
export function StudentDetailsModal({ student, isOpen, onClose }: StudentDetailsModalProps) {
|
|
const fullName = [
|
|
student.firstName,
|
|
student.middleName,
|
|
student.lastName
|
|
].filter(Boolean).join(' ') || 'Name not provided';
|
|
|
|
const formatDate = (date: Date | null) => {
|
|
if (!date) return 'Not provided';
|
|
return new Date(date).toLocaleDateString('en-US', {
|
|
year: 'numeric',
|
|
month: 'long',
|
|
day: 'numeric'
|
|
});
|
|
};
|
|
|
|
const formatPercentage = (value: number | null) => {
|
|
if (value === null) return 'Not provided';
|
|
return `${value}%`;
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={onClose}>
|
|
<DialogContent className="max-w-4xl max-h-[90vh] overflow-y-auto">
|
|
<DialogHeader>
|
|
<div className="flex items-center justify-between">
|
|
<DialogTitle className="text-2xl font-bold text-gray-800">
|
|
Student Details
|
|
</DialogTitle>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={onClose}
|
|
className="text-gray-500 hover:text-gray-700"
|
|
>
|
|
<X className="w-5 h-5" />
|
|
</Button>
|
|
</div>
|
|
</DialogHeader>
|
|
|
|
<div className="space-y-6">
|
|
{/* Header Section */}
|
|
<div className="flex items-start gap-6 p-6 bg-gradient-to-r from-blue-50 to-purple-50 rounded-xl">
|
|
<Avatar className="w-20 h-20">
|
|
<AvatarImage src={student.profilePicture || undefined} />
|
|
<AvatarFallback className="bg-gradient-to-br from-blue-500 to-purple-600 text-white text-2xl font-bold">
|
|
{student.firstName ? student.firstName.charAt(0).toUpperCase() :
|
|
student.email ? student.email.charAt(0).toUpperCase() : 'S'}
|
|
</AvatarFallback>
|
|
</Avatar>
|
|
|
|
<div className="flex-1">
|
|
<div className="flex items-center gap-3 mb-2">
|
|
<h2 className="text-2xl font-bold text-gray-800">{fullName}</h2>
|
|
<Badge
|
|
variant={student.verified ? "default" : "secondary"}
|
|
className={`${student.verified ? 'bg-green-100 text-green-700' : 'bg-yellow-100 text-yellow-700'}`}
|
|
>
|
|
{student.verified ? 'Verified' : 'Pending Verification'}
|
|
</Badge>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-4 text-sm text-gray-600">
|
|
<span className="font-medium">ID: #{student.id}</span>
|
|
{student.rollNumber && (
|
|
<span className="font-medium">Roll: {student.rollNumber}</span>
|
|
)}
|
|
<span className="font-medium">
|
|
Joined: {formatDate(new Date(Number(student.createdAt)))}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
|
<Edit className="w-4 h-4" />
|
|
Edit
|
|
</Button>
|
|
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
|
<Download className="w-4 h-4" />
|
|
Export
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
{/* Personal Information */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
|
<User className="w-5 h-5 text-blue-600" />
|
|
Personal Information
|
|
</h3>
|
|
|
|
<div className="space-y-3">
|
|
<div className="flex items-center gap-3">
|
|
<Mail className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Email</p>
|
|
<p className="text-gray-900">{student.email}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{student.personalGmail && (
|
|
<div className="flex items-center gap-3">
|
|
<Mail className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Personal Gmail</p>
|
|
<p className="text-gray-900">{student.personalGmail}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.phoneNumber && (
|
|
<div className="flex items-center gap-3">
|
|
<Phone className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Phone Number</p>
|
|
<p className="text-gray-900">{student.phoneNumber}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.address && (
|
|
<div className="flex items-start gap-3">
|
|
<MapPin className="w-4 h-4 text-gray-400 mt-1" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Address</p>
|
|
<p className="text-gray-900">{student.address}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.dob && (
|
|
<div className="flex items-center gap-3">
|
|
<Calendar className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Date of Birth</p>
|
|
<p className="text-gray-900">{formatDate(student.dob)}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.gender && (
|
|
<div className="flex items-center gap-3">
|
|
<User className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Gender</p>
|
|
<p className="text-gray-900">{student.gender}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.mothersName && (
|
|
<div className="flex items-center gap-3">
|
|
<User className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Mother's Name</p>
|
|
<p className="text-gray-900">{student.mothersName}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Academic Information */}
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
|
<GraduationCap className="w-5 h-5 text-green-600" />
|
|
Academic Information
|
|
</h3>
|
|
|
|
<div className="space-y-3">
|
|
{student.degree && (
|
|
<div className="flex items-center gap-3">
|
|
<GraduationCap className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Degree</p>
|
|
<p className="text-gray-900">{student.degree}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.branch && (
|
|
<div className="flex items-center gap-3">
|
|
<BookOpen className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Branch</p>
|
|
<p className="text-gray-900">{student.branch}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{student.year && (
|
|
<div className="flex items-center gap-3">
|
|
<Calendar className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Year</p>
|
|
<p className="text-gray-900">{student.year}</p>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Award className="w-4 h-4 text-gray-400" />
|
|
<div>
|
|
<p className="text-sm font-medium text-gray-700">Diploma Student</p>
|
|
<p className="text-gray-900">{student.isDiploma ? 'Yes' : 'No'}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<Separator />
|
|
|
|
{/* Academic Scores */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-md font-semibold text-gray-700">Academic Scores</h4>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-gray-700">SSC Score</p>
|
|
<p className="text-lg font-bold text-gray-900">
|
|
{formatPercentage(Number(student.ssc))}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="bg-gray-50 p-3 rounded-lg">
|
|
<p className="text-sm font-medium text-gray-700">HSC Score</p>
|
|
<p className="text-lg font-bold text-gray-900">
|
|
{formatPercentage(Number(student.hsc))}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Skills Section */}
|
|
{student.skills && student.skills.length > 0 && (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
|
<Award className="w-5 h-5 text-orange-600" />
|
|
Skills & Expertise
|
|
</h3>
|
|
<div className="flex flex-wrap gap-2">
|
|
{student.skills.map((skill, index) => (
|
|
<Badge key={index} variant="outline" className="text-sm">
|
|
{skill}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Professional Links */}
|
|
{(student.linkedin || student.github) && (
|
|
<div className="space-y-4">
|
|
<h3 className="text-lg font-semibold text-gray-800 flex items-center gap-2">
|
|
<ExternalLink className="w-5 h-5 text-blue-600" />
|
|
Professional Links
|
|
</h3>
|
|
<div className="flex gap-3">
|
|
{student.linkedin && (
|
|
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
|
<Linkedin className="w-4 h-4" />
|
|
LinkedIn
|
|
</Button>
|
|
)}
|
|
{student.github && (
|
|
<Button variant="outline" size="sm" className="flex items-center gap-2">
|
|
<Github className="w-4 h-4" />
|
|
GitHub
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Footer Actions */}
|
|
<Separator />
|
|
<div className="flex justify-end gap-3">
|
|
<Button variant="outline" onClick={onClose}>
|
|
Close
|
|
</Button>
|
|
<Button className="flex items-center gap-2">
|
|
<Share2 className="w-4 h-4" />
|
|
Share Profile
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|