"use client"; import { useState, useEffect } from "react"; import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger, } from "@/components/ui/dialog"; import { Button } from "@/components/ui/button"; import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"; import { User, Loader2, Calendar, MapPin, GraduationCap, Trophy, DollarSign, Mail, Phone, BookOpen, Award } from "lucide-react"; // Interface definitions interface MahasiswaData { nim: string; nama: string; jk: "Pria" | "Wanita"; agama: string | null; kabupaten: string | null; provinsi: string | null; jenis_pendaftaran: string | null; tahun_angkatan: string; ipk: number | null; id_kelompok_keahlian: number | null; nama_kelompok_keahlian: string | null; status_kuliah: "Aktif" | "Cuti" | "Lulus" | "Non-Aktif"; semester: number; created_at: string; updated_at: string; } interface BeasiswaData { id_beasiswa: number; nim: string; nama: string; nama_beasiswa: string; sumber_beasiswa: string; jenis_beasiswa: "Pemerintah" | "Non-Pemerintah"; created_at: string; } interface PrestasiData { id_prestasi: number; nim: string; nama: string; jenis_prestasi: "Akademik" | "Non-Akademik"; nama_prestasi: string; tingkat_prestasi: "Kabupaten" | "Provinsi" | "Nasional" | "Internasional"; peringkat: string; tanggal_prestasi: string; keterangan: string | null; created_at: string; } interface BiodataMahasiswaDialogProps { nim: string; nama: string; } export default function BiodataMahasiswaDialog({ nim, nama }: BiodataMahasiswaDialogProps) { const [isOpen, setIsOpen] = useState(false); const [loading, setLoading] = useState(false); const [error, setError] = useState(null); // Data states const [mahasiswaData, setMahasiswaData] = useState(null); const [beasiswaData, setBeasiswaData] = useState([]); const [prestasiData, setPrestasiData] = useState([]); // Fetch all data when dialog opens const fetchBiodataData = async () => { try { setLoading(true); setError(null); // Fetch mahasiswa data const mahasiswaResponse = await fetch(`/api/keloladata/data-mahasiswa`); if (!mahasiswaResponse.ok) { throw new Error("Failed to fetch mahasiswa data"); } const mahasiswaResult = await mahasiswaResponse.json(); // Find specific student data const studentData = Array.isArray(mahasiswaResult) ? mahasiswaResult.find((m: MahasiswaData) => m.nim === nim) : null; setMahasiswaData(studentData); // Fetch beasiswa data try { const beasiswaResponse = await fetch(`/api/keloladata/data-beasiswa-mahasiswa`); if (beasiswaResponse.ok) { const beasiswaResult = await beasiswaResponse.json(); const filteredBeasiswa = Array.isArray(beasiswaResult) ? beasiswaResult.filter((b: BeasiswaData) => b.nim === nim) : []; setBeasiswaData(filteredBeasiswa); } else { setBeasiswaData([]); } } catch (err) { console.warn("Beasiswa data not available:", err); setBeasiswaData([]); } // Fetch prestasi data try { const prestasiResponse = await fetch(`/api/keloladata/data-prestasi-mahasiswa`); if (prestasiResponse.ok) { const prestasiResult = await prestasiResponse.json(); const filteredPrestasi = Array.isArray(prestasiResult) ? prestasiResult.filter((p: PrestasiData) => p.nim === nim) : []; setPrestasiData(filteredPrestasi); } else { setPrestasiData([]); } } catch (err) { console.warn("Prestasi data not available:", err); setPrestasiData([]); } } catch (err) { console.error("Error fetching biodata:", err); setError(err instanceof Error ? err.message : "Failed to fetch data"); } finally { setLoading(false); } }; // Handle dialog open const handleOpenChange = (open: boolean) => { setIsOpen(open); if (open) { fetchBiodataData(); } else { // Reset data when closing setMahasiswaData(null); setBeasiswaData([]); setPrestasiData([]); setError(null); } }; // Get status badge color const getStatusColor = (status: string) => { switch (status?.toLowerCase()) { case "aktif": return "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"; case "cuti": return "bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100"; case "lulus": return "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"; case "non-aktif": return "bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-100"; default: return "bg-gray-100 text-gray-800 dark:bg-gray-900 dark:text-gray-100"; } }; return ( ); }