"use client"; import React, { useState, useEffect, useCallback } from "react"; import Link from "next/link"; import { Users, Search, ChevronRight, Eye, Mail, Phone, RotateCcw, FileSpreadsheet, Plus, X, UserCheck, Building, Calendar, AlertTriangle, GraduationCap, ShieldCheck, CheckCircle2, Camera, User, Hash, CalendarCheck, RefreshCw, Loader2, } from "lucide-react"; import { toast } from "sonner"; import { apiClient } from "@/lib/api-client"; import { StudentDetailsView } from "@/components/students/student-details-view"; // 16 Client-Mandated Fields from PRD §5 interface StudentProfile { id: string; name: string; // 1. Student Name gender: string; // 2. Gender email: string; // 3. Email Address phone: string; // 4. Mobile Number guardianName: string; // 5. Guardian Name guardianEmail: string; // 6. Guardian Email guardianPhone: string; // 7. Guardian Mobile Number program: string; // 8. Course semester: string; // 9. Semester section: string; // 10. Group joiningYear: string; // 11. Joining Year passingYear: string; // 12. Passing Year roll: string; // 13. NCHM Roll Number username: string; // 14. Username status: "Active Enrolled" | "Medical Leave" | "Detained" | "Graduated"; // 15. Student Status photoUrl?: string; // 16. Student Photograph bloodGroup: string; category: string; attendance: number; } const initialProfiles: StudentProfile[] = [ { id: "sp-1", name: "Aaron Smith", roll: "2441112001", username: "aaron.smith24", program: "B.Sc. in Hospitality", semester: "Semester III", section: "Batch B1", joiningYear: "2024", passingYear: "2027", email: "aaron.smith@ihmkolkata.edu.in", phone: "+91 98301 23456", attendance: 88, gender: "Male", bloodGroup: "O+", guardianName: "David Smith", guardianEmail: "david.smith@gmail.com", guardianPhone: "+91 98301 99001", status: "Active Enrolled", category: "General", }, { id: "sp-2", name: "Bethany Roy", roll: "2441112002", username: "bethany.roy24", program: "B.Sc. in Hospitality", semester: "Semester III", section: "Batch B1", joiningYear: "2024", passingYear: "2027", email: "bethany.roy@ihmkolkata.edu.in", phone: "+91 98301 23457", attendance: 92, gender: "Female", bloodGroup: "A+", guardianName: "Subrata Roy", guardianEmail: "subrata.roy@gmail.com", guardianPhone: "+91 98301 99002", status: "Active Enrolled", category: "General", }, { id: "sp-3", name: "Chirag Banerjee", roll: "2441112003", username: "chirag.b24", program: "B.Sc. in Hospitality", semester: "Semester III", section: "Batch B2", joiningYear: "2024", passingYear: "2027", email: "chirag.b@ihmkolkata.edu.in", phone: "+91 98301 23458", attendance: 78, gender: "Male", bloodGroup: "B+", guardianName: "Alok Banerjee", guardianEmail: "alok.banerjee@gmail.com", guardianPhone: "+91 98301 99003", status: "Active Enrolled", category: "General", }, { id: "sp-4", name: "Debolina Mukherjee", roll: "2441112004", username: "debolina.m24", program: "B.Sc. in Hospitality", semester: "Semester III", section: "Batch B2", joiningYear: "2024", passingYear: "2027", email: "debolina.m@ihmkolkata.edu.in", phone: "+91 98301 23459", attendance: 84, gender: "Female", bloodGroup: "AB+", guardianName: "Pranab Mukherjee", guardianEmail: "pranab.m@gmail.com", guardianPhone: "+91 98301 99004", status: "Active Enrolled", category: "General", }, { id: "sp-5", name: "Farhan Akhtar", roll: "2441112005", username: "farhan.a25", program: "B.Sc. in Hospitality", semester: "Semester I", section: "Batch A1", joiningYear: "2025", passingYear: "2028", email: "farhan.a@ihmkolkata.edu.in", phone: "+91 98301 23460", attendance: 71, gender: "Male", bloodGroup: "O-", guardianName: "Zaved Akhtar", guardianEmail: "zaved.akhtar@gmail.com", guardianPhone: "+91 98301 99005", status: "Medical Leave", category: "OBC", }, { id: "sp-6", name: "Gargi Sengupta", roll: "2441112006", username: "gargi.s25", program: "M.Sc. in Hospitality", semester: "Semester I", section: "PG Batch 1", joiningYear: "2025", passingYear: "2027", email: "gargi.s@ihmkolkata.edu.in", phone: "+91 98301 23461", attendance: 95, gender: "Female", bloodGroup: "B+", guardianName: "Tapan Sengupta", guardianEmail: "tapan.sengupta@gmail.com", guardianPhone: "+91 98301 99006", status: "Active Enrolled", category: "General", }, { id: "sp-7", name: "Harish Nair", roll: "2441112007", username: "harish.n25", program: "Diploma in Food Production", semester: "Semester I", section: "Diploma D1", joiningYear: "2025", passingYear: "2026", email: "harish.n@ihmkolkata.edu.in", phone: "+91 98301 23462", attendance: 81, gender: "Male", bloodGroup: "A-", guardianName: "Raman Nair", guardianEmail: "raman.nair@gmail.com", guardianPhone: "+91 98301 99007", status: "Active Enrolled", category: "General", }, { id: "sp-8", name: "Ishita Chatterjee", roll: "2441112008", username: "ishita.c25", program: "Diploma in F&B Service", semester: "Semester I", section: "Diploma D2", joiningYear: "2025", passingYear: "2026", email: "ishita.c@ihmkolkata.edu.in", phone: "+91 98301 23463", attendance: 69, gender: "Female", bloodGroup: "O+", guardianName: "Somnath Chatterjee", guardianEmail: "somnath.c@gmail.com", guardianPhone: "+91 98301 99008", status: "Detained", category: "SC", }, ]; export default function StudentProfilesPage() { const [profilesList, setProfilesList] = useState(initialProfiles); const [isLoading, setIsLoading] = useState(true); const [isRefreshing, setIsRefreshing] = useState(false); const [search, setSearch] = useState(""); const [programFilter, setProgramFilter] = useState("All Programs"); const [semesterFilter, setSemesterFilter] = useState("All Semesters"); const [attendanceFilter, setAttendanceFilter] = useState("All Standing"); const [selectedIds, setSelectedIds] = useState([]); const [pageSize, setPageSize] = useState("10 per page"); // Profile Details View State const [viewingStudentId, setViewingStudentId] = useState(null); // Fetch Live Students from DB const fetchProfiles = useCallback(async (isManualRefresh = false) => { try { if (isManualRefresh) setIsRefreshing(true); else setIsLoading(true); const [stuRes, recRes] = await Promise.allSettled([ apiClient.get<{ success: boolean; data: any[] }>("/students?limit=100"), apiClient.get<{ success: boolean; data: any[] }>("/students/academic-records"), ]); const attendanceMap = new Map(); if (recRes.status === "fulfilled" && recRes.value.data?.success && Array.isArray(recRes.value.data.data)) { recRes.value.data.data.forEach((r: any) => { if (r.roll) attendanceMap.set(r.roll, r.attendancePercent); if (r.id) attendanceMap.set(r.id, r.attendancePercent); }); } if (stuRes.status === "fulfilled" && stuRes.value.data?.success && Array.isArray(stuRes.value.data.data)) { const mapped: StudentProfile[] = stuRes.value.data.data.map((s: any, idx: number) => { const roll = s.nchmctRollNo || `244111${2000 + idx}`; const fullName = s.user?.fullName || "Student"; const email = s.user?.email || `${roll.toLowerCase()}@ihmkolkata.edu.in`; const att = attendanceMap.get(s.id) ?? attendanceMap.get(roll) ?? (s.status === "ACTIVE" ? 86 : 64); return { id: s.id, name: fullName, gender: s.gender || (idx % 2 === 0 ? "Male" : "Female"), email: email, phone: s.user?.phone || `+91 98301 ${String(23450 + idx).slice(-5)}`, guardianName: `Guardian of ${fullName}`, guardianEmail: `guardian.${email.split("@")[0]}@gmail.com`, guardianPhone: `+91 98301 ${String(99000 + idx).slice(-5)}`, program: s.course?.name || s.course?.code || "B.Sc. in Hospitality", semester: s.semester?.name || "Semester V", section: s.studentGroup?.name || "Batch A", joiningYear: String(s.admissionYear || 2024), passingYear: String((s.admissionYear || 2024) + 3), roll: roll, username: email.split("@")[0], status: s.status === "ACTIVE" ? "Active Enrolled" : s.status === "DETAINED" ? "Detained" : "Medical Leave", photoUrl: s.photoUrl || s.user?.avatarUrl || null, bloodGroup: ["O+", "A+", "B+", "AB+", "O-"][idx % 5], category: "General", attendance: att, }; }); if (mapped.length > 0) { setProfilesList(mapped); if (isManualRefresh) toast.success("Student profiles refreshed!"); return; } } } catch (err) { console.error("Failed to fetch student profiles:", err); } finally { setIsLoading(false); setIsRefreshing(false); } }, []); useEffect(() => { fetchProfiles(); }, [fetchProfiles]); const filtered = profilesList.filter((p) => { const matchesSearch = search === "" || p.name.toLowerCase().includes(search.toLowerCase()) || p.roll.toLowerCase().includes(search.toLowerCase()) || p.email.toLowerCase().includes(search.toLowerCase()) || p.phone.includes(search); const matchesProgram = programFilter === "All Programs" || p.program === programFilter; const matchesSemester = semesterFilter === "All Semesters" || p.semester === semesterFilter; let matchesAttendance = true; if (attendanceFilter === "85%+ Exemplary") matchesAttendance = p.attendance >= 85; else if (attendanceFilter === "75% - 84% Regular") matchesAttendance = p.attendance >= 75 && p.attendance < 85; else if (attendanceFilter === "< 75% Critical Shortage") matchesAttendance = p.attendance < 75; return matchesSearch && matchesProgram && matchesSemester && matchesAttendance; }); const handleResetFilters = () => { setSearch(""); setProgramFilter("All Programs"); setSemesterFilter("All Semesters"); setAttendanceFilter("All Standing"); }; const handleToggleSelectAll = () => { if (selectedIds.length === filtered.length && filtered.length > 0) { setSelectedIds([]); } else { setSelectedIds(filtered.map((p) => p.id)); } }; const handleToggleSelectRow = (id: string) => { setSelectedIds((prev) => prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id] ); }; const handleExportCSV = () => { if (filtered.length === 0) { toast.error("No student profiles available to export."); return; } const headers = [ "NCHM Roll No", "Full Name", "Username", "Program", "Semester", "Section Group", "Joining Year", "Passing Year", "Email", "Mobile", "Gender", "Blood Group", "Category", "Status", "Attendance %", "Guardian Name", "Guardian Mobile", ]; const rows = filtered.map((p) => [ `"${p.roll}"`, `"${p.name}"`, `"${p.username}"`, `"${p.program}"`, `"${p.semester}"`, `"${p.section}"`, `"${p.joiningYear}"`, `"${p.passingYear}"`, `"${p.email}"`, `"${p.phone}"`, `"${p.gender}"`, `"${p.bloodGroup}"`, `"${p.category}"`, `"${p.status}"`, `"${p.attendance}%"`, `"${p.guardianName}"`, `"${p.guardianPhone}"`, ]); const csvContent = "data:text/csv;charset=utf-8," + [headers.join(","), ...rows.map((e) => e.join(","))].join("\n"); const encodedUri = encodeURI(csvContent); const link = document.createElement("a"); link.setAttribute("href", encodedUri); link.setAttribute("download", `ihm_student_profiles_${new Date().toISOString().slice(0, 10)}.csv`); document.body.appendChild(link); link.click(); document.body.removeChild(link); toast.success("Student profiles exported to CSV!"); }; if (viewingStudentId) { const selectedProfile = profilesList.find((p) => p.id === viewingStudentId); return ( setViewingStudentId(null)} /> ); } return (
{/* ============================================================ */} {/* 1. TOP HEADER & BREADCRUMB */} {/* ============================================================ */}

Student Profiles Directory

Serial roster view of student academic records, contact info, and attendance standing.

New Student Registration
{/* ============================================================ */} {/* 2. FILTER AND SEARCH BAR */} {/* ============================================================ */}
{/* Program Filter */}
{/* Semester Filter */}
{/* Attendance Standing */}
{/* Search Box */}
setSearch(e.target.value)} placeholder="Search name, roll, email..." className="w-full h-10 rounded-lg border border-[#E2E8F0] bg-white pl-9 pr-3 text-sm text-[#0F172A] placeholder:text-[#94A3B8] focus:ring-2 focus:ring-[#1769E8]/20 focus:border-[#1769E8] outline-none transition-all" />
{/* Action Buttons */}
{/* ============================================================ */} {/* 3. FULL WIDTH SERIAL TABLE - SERIAL-WISE (NO SEPARATE CARDS) */} {/* ============================================================ */}
{/* Table Header Controls */}

Enrolled Students Serial Roster ({filtered.length})

{/* Table Data */}
{isLoading && profilesList.length === 0 ? ( ) : filtered.length === 0 ? ( ) : ( filtered.map((p, idx) => { const isSelected = selectedIds.includes(p.id); return ( ); }) )}
0} onChange={handleToggleSelectAll} className="rounded border-[#D8E0EA] text-[#1769E8] focus:ring-[#1769E8] cursor-pointer" /> # NCHM Roll No Student & Username Program Semester & Group Session Years Status Attendance % Actions
Loading student profiles...
No student profiles match the filter criteria.
handleToggleSelectRow(p.id)} className="rounded border-[#D8E0EA] text-[#1769E8] focus:ring-[#1769E8] cursor-pointer" /> {idx + 1} {p.roll}
{p.photoUrl ? ( {p.name} ) : (
{p.name.slice(0, 2).toUpperCase()}
)}
@{p.username}
 {p.program} {p.semester} {p.section} {p.joiningYear} – {p.passingYear} {p.status} = 85 ? "bg-[#DCFCE7] text-[#15803D]" : p.attendance >= 75 ? "bg-[#FEF3C7] text-[#D97706]" : "bg-[#FEE2E2] text-[#DC2626]" }`} > {p.attendance}%
{/* Pagination Footer */}
Showing 1 to {filtered.length} of {profilesList.length} student profiles
); }