import React from 'react'; import { Head, Link, useForm, usePage } from '@inertiajs/react'; import PortalLayout from '@/layouts/portal-layout'; import { GraduationCap, Calendar, ChevronLeft, Briefcase, PlusCircle, } from 'lucide-react'; import '../../../css/alumni-home.css'; interface SkpiGroup { name: string; nameEn: string; items: { text: string; textEn: string; date?: string }[]; } interface SkpiDetail { learningOutcomes?: SkpiGroup[]; additionalInformation?: SkpiGroup[]; academicActivities?: SkpiGroup[]; noSkpi?: string; tglCetak?: string; prestasi?: Array; sertifikasi?: Array; organisasi?: Array; pelatihan?: Array; seminar?: Array; } interface AlumniItem { npm: string; nama: string; prodi?: string; namaProdi?: string; namaFakultas?: string; tahun_masuk?: number; mulaiSmt?: number; tahun_lulus?: number | string; keluarSmt?: number | null; status_kelulusan?: string; npmAktif?: boolean; ipk?: string; judul_skripsi?: string; fotoUrl?: string | null; pekerjaan_saat_ini?: string; skpi?: SkpiDetail; } interface DetailProps { alumni: AlumniItem; skpi?: SkpiDetail; activities: Array<{ id: number | string; title: string; description: string; activity_date?: string; category?: { name: string; }; }>; } export default function AlumniDetail({ alumni, skpi, activities, }: DetailProps) { const effectiveSkpi = skpi || alumni.skpi; const [failedPhoto, setFailedPhoto] = React.useState(null); const { auth } = usePage<{ auth: { user: unknown | null } }>().props; const photoRefresh = useForm({ npm: alumni.npm }); // Derived fields const prodiName = alumni.namaProdi || alumni.prodi || 'Informatika'; const tahunMasuk = alumni.tahun_masuk || (alumni.mulaiSmt ? Math.floor(alumni.mulaiSmt / 10) : '-'); const tahunLulus = alumni.tahun_lulus || (alumni.keluarSmt ? Math.floor(alumni.keluarSmt / 10) : alumni.mulaiSmt ? Math.floor(alumni.mulaiSmt / 10) + 4 : '-'); // Status NPM tidak menentukan status kelulusan pada profil alumni. const statusKelulusan = alumni.status_kelulusan || 'Lulus'; return ( {/* Breadcrumb Navigation */}
Direktori Alumni / {alumni.nama}
NPM: {alumni.npm}
{/* Profil Kiri */}
{/* Foto */}
{alumni.fotoUrl && failedPhoto !== alumni.fotoUrl ? (
{`Foto setFailedPhoto(alumni.fotoUrl ?? null)} />
) : (
)}
{!!auth?.user && (
{ event.preventDefault(); photoRefresh.post('/admin/foto/refresh', { preserveScroll: true }); }} > {Object.values(photoRefresh.errors).map((error) => (

{error}

))}
)} {/* Nama & Prodi */}

{alumni.nama}

{prodiName}

Fakultas Teknik · Universitas Majalengka

{/* Divider */}
{/* Metadata */}
NPM
{alumni.npm}
Angkatan
{tahunMasuk}
Lulus
{tahunLulus}
{alumni.ipk && (
IPK
{alumni.ipk}
)}
Status
{statusKelulusan}
{/* Tugas Akhir */} {alumni.judul_skripsi && ( <>

Tugas Akhir

“{alumni.judul_skripsi}”

)} {/* Pekerjaan */} {alumni.pekerjaan_saat_ini && ( <>

Pekerjaan

{alumni.pekerjaan_saat_ini}

)}
{/* Konten Kanan: Akademik, SKPI & Rekam Jejak */}

Surat Keterangan Pendamping Ijazah

{alumni.nama} • {alumni.npm}

{effectiveSkpi?.noSkpi && (

No. {effectiveSkpi.noSkpi}

)} {effectiveSkpi?.tglCetak && (

Dicetak: {effectiveSkpi.tglCetak}

)}
{!effectiveSkpi && (

Data SKPI belum tersedia atau layanan sedang tidak dapat diakses.

)}
{/* Capaian Pembelajaran Lulusan */} {effectiveSkpi && (effectiveSkpi.learningOutcomes ?? []).length > 0 && ( <>

Capaian Pembelajaran Lulusan

Learning Outcomes
{(effectiveSkpi.learningOutcomes ?? []).map((group: any, i: number) => (

{group.name}

{group.nameEn && ( {group.nameEn} )}
    {(group.items ?? []).map((item: any, j: number) => (
  1. {item.text} {item.textEn && ( ({item.textEn}) )}
    2. ))}
))} )} {/* Informasi Tambahan */} {effectiveSkpi && (effectiveSkpi.additionalInformation ?? []).length > 0 && (

Informasi Tambahan Additional Information

{(effectiveSkpi.additionalInformation ?? []).map((group: any, i: number) => (

{group.name}

{group.nameEn && {group.nameEn}}
    {(group.items ?? []).map((item: any, j: number) => (

  • {item.text}

    {item.textEn &&

    {item.textEn}

    } {item.date &&

    Tanggal: {item.date}

    }
    • ))}
))}
)} {/* Kerja Praktek & Skripsi */} {effectiveSkpi && (effectiveSkpi.academicActivities ?? []).length > 0 && (

Kerja Praktek & Skripsi

{(effectiveSkpi.academicActivities ?? []).map((group: any, i: number) => (
{group.name} {(group.items ?? []).map((item: any, j: number) => ( item.text ? (

{item.text}

) : (

Judul belum tersedia.

) ))}
))}
)} {/* Kiprah & Kegiatan Alumni Terverifikasi */}
Rekam Jejak & Kontribusi

Kegiatan & Jejak Karier Alumni

Ajukan Portofolio
{activities.length === 0 ? (

Belum ada catatan kegiatan publik yang diajukan

Alumni yang bersangkutan dapat mengajukan aktivitas, kontribusi keilmuan, atau jejak karier melalui formulir kegiatan resmi.

) : (
{activities.map((act) => (
{act.category?.name || 'Kegiatan'} {act.activity_date && ( {new Date( act.activity_date, ).toLocaleDateString( 'id-ID', { day: 'numeric', month: 'long', year: 'numeric', }, )} )}

{act.title}

{act.description}

))}
)}
); }