import React, { useState, useEffect, useRef } from 'react'; import { Head, Link, router } from '@inertiajs/react'; import PortalLayout from '@/layouts/portal-layout'; import { Search, X, ArrowRight, GraduationCap, Award, CheckCircle2, Calendar, ChevronLeft, ChevronRight, UsersRound, } from 'lucide-react'; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from '@/components/ui/select'; import '../../../css/alumni-home.css'; interface AlumniItem { npm: string; idMahasiswaPt?: string; nama: string; namaProdi: string; namaFakultas?: string; mulaiSmt?: number; keluarSmt?: number | null; noSkpi?: string | null; tglCetakSkpi?: string | null; ipk?: string | null; jenisKelamin?: string; tempatLahir?: string | null; tanggalLahir?: string | null; npmAktif?: boolean; foto_url?: string; pekerjaan_saat_ini?: string; status_kelulusan?: string; tahun_lulus?: number | string; prodi?: string; } interface AlumniProps { alumni: { data: AlumniItem[]; current_page: number; last_page: number; total: number; per_page?: number; filter_options?: { prodi: string[]; tahun_lulus: string[] }; }; filters: { search: string; prodi: string; tahun_lulus: string; }; } export default function AlumniDirectory({ alumni, filters }: AlumniProps) { const [search, setSearch] = useState(filters.search || ''); const [prodi, setProdi] = useState(filters.prodi || ''); const [tahunLulus, setTahunLulus] = useState(filters.tahun_lulus || ''); useEffect(() => { const elements = document.querySelectorAll('.scroll-reveal'); if (!elements.length) return; const observer = new IntersectionObserver( (entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { entry.target.classList.add('is-visible'); observer.unobserve(entry.target); } }); }, { threshold: 0.1, rootMargin: '0px 0px -30px 0px' }, ); elements.forEach((el) => observer.observe(el)); return () => observer.disconnect(); }, [alumni.data]); const isFirstRender = useRef(true); const lastQueriedRef = useRef({ search: filters.search || '', prodi: filters.prodi || '', tahun_lulus: filters.tahun_lulus || '', }); useEffect(() => { if (isFirstRender.current) { isFirstRender.current = false; return; } const trimmed = search.trim(); if ( trimmed === lastQueriedRef.current.search && prodi === lastQueriedRef.current.prodi && tahunLulus === lastQueriedRef.current.tahun_lulus ) { return; } const timer = setTimeout(() => { lastQueriedRef.current = { search: trimmed, prodi, tahun_lulus: tahunLulus, }; router.get( '/alumni', { search: trimmed || undefined, prodi: prodi || undefined, tahun_lulus: tahunLulus || undefined, page: 1, }, { preserveState: true, preserveScroll: true, replace: true, }, ); }, 350); return () => clearTimeout(timer); }, [search, prodi, tahunLulus]); const handleFilter = (e?: React.FormEvent) => { if (e) e.preventDefault(); const trimmed = search.trim(); lastQueriedRef.current = { search: trimmed, prodi, tahun_lulus: tahunLulus, }; router.get( '/alumni', { search: trimmed || undefined, prodi: prodi || undefined, tahun_lulus: tahunLulus || undefined, page: 1, }, { preserveState: true, preserveScroll: true, replace: true, }, ); }; const handleReset = () => { setSearch(''); setProdi(''); setTahunLulus(''); lastQueriedRef.current = { search: '', prodi: '', tahun_lulus: '' }; router.get( '/alumni', {}, { preserveState: true, preserveScroll: true, replace: true, }, ); }; const prodiOptions = alumni.filter_options?.prodi ?? []; const tahunOptions = alumni.filter_options?.tahun_lulus ?? []; const getTahunLulus = (item: AlumniItem): string => { return item.tahun_lulus ? String(item.tahun_lulus) : '-'; }; const getProdi = (item: AlumniItem): string => { return item.namaProdi || item.prodi || 'Fakultas Teknik'; }; const pageNumbers = [...new Set([1, alumni.current_page - 1, alumni.current_page, alumni.current_page + 1, alumni.last_page])] .filter((page) => page >= 1 && page <= alumni.last_page) .sort((a, b) => a - b); const pagination: (number | string)[] = pageNumbers.flatMap((page, index) => index > 0 && page - pageNumbers[index - 1] > 1 ? [`gap-${page}`, page] : [page], ); const isFiltered = Boolean(search || prodi || tahunLulus); return (
{/* Header Banner - Editorial Konsisten dengan Home */}

DIREKTORI ALUMNI

Temukan Alumni FT UNMA

Akses data resmi alumni dan lulusan Fakultas Teknik Universitas Majalengka. Terhubung langsung dengan sistem verifikasi Satu UNMA dan rekam jejak SKPI.

{/* Filter and Search Console */}
{/* Card Box Filter Terpadu */}
{/* Kolom 1: Search Input */}
{/* Kolom 2: Dropdown Program Studi */}
{/* Kolom 3: Dropdown Tahun Lulus */}
{/* Action Buttons */}
{isFiltered && ( )}
{/* Status Count & Summary */}
Menampilkan{' '} {alumni.data.length} {' '} dari total{' '} {alumni.total} {' '} alumni terdaftar
{isFiltered && ( Filter aktif )}
{/* Main Table / Directory List */}
{alumni.data.length === 0 ? (

Data Alumni Tidak Ditemukan

Tidak ada data alumni yang cocok dengan pencarian atau filter yang dipilih. Silakan ubah kata kunci atau bersihkan filter.

{isFiltered && ( )}
) : (
{/* Table Header */}
Nama Lengkap & NPM
Program Studi
Tahun Kelulusan
Aksi Profil
{/* Rows */}
{alumni.data.map((item, idx) => { const prodiName = getProdi(item); const tahunVal = getTahunLulus(item); return (
{/* Identitas Alumni */}

{item.nama}

NPM {item.npm} {item.noSkpi && ( {' '} SKPI Terverifikasi )}
{/* Program Studi */}
Prodi: {prodiName}
{/* Tahun Lulus */}
Status:
{tahunVal !== '-' ? `Lulus ${tahunVal}` : 'Aktif / Belum Lulus'}
{/* Tombol Aksi */}
SKPI Profil
); })}
)} {/* Pagination */} {alumni.last_page > 1 && ( )}
); }