410 lines
16 KiB
TypeScript
410 lines
16 KiB
TypeScript
"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<string | null>(null);
|
|
|
|
// Data states
|
|
const [mahasiswaData, setMahasiswaData] = useState<MahasiswaData | null>(null);
|
|
const [beasiswaData, setBeasiswaData] = useState<BeasiswaData[]>([]);
|
|
const [prestasiData, setPrestasiData] = useState<PrestasiData[]>([]);
|
|
|
|
// 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 (
|
|
<Dialog open={isOpen} onOpenChange={handleOpenChange}>
|
|
<DialogTrigger asChild>
|
|
<Button size="sm" variant="outline" className="flex items-center gap-1">
|
|
<User className="h-4 w-4" />
|
|
<span className="hidden sm:inline">Detail</span>
|
|
</Button>
|
|
</DialogTrigger>
|
|
<DialogContent className="w-[95vw] max-w-4xl max-h-[90vh] overflow-y-auto p-4 sm:p-6">
|
|
<DialogHeader>
|
|
<DialogTitle className="flex items-center gap-2">
|
|
<User className="h-5 w-5" />
|
|
Profil Mahasiswa - {nama}
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
{loading ? (
|
|
<div className="flex justify-center items-center py-8">
|
|
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
|
<span className="ml-2">Memuat biodata...</span>
|
|
</div>
|
|
) : error ? (
|
|
<div className="bg-destructive/10 p-4 rounded-md text-destructive text-center">
|
|
Error: {error}
|
|
</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
{/* Data Pribadi */}
|
|
{mahasiswaData && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 dark:text-white">
|
|
<User className="h-5 w-5" />
|
|
Data Pribadi
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 dark:text-white">
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">NIM</label>
|
|
<p className="font-semi">{mahasiswaData.nim}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Nama Lengkap</label>
|
|
<p className="font-semi">{mahasiswaData.nama}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Jenis Kelamin</label>
|
|
<p>{mahasiswaData.jk}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Agama</label>
|
|
<p>{mahasiswaData.agama || "-"}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Kabupaten</label>
|
|
<p className="flex items-center gap-1">
|
|
{mahasiswaData.kabupaten || "-"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Provinsi</label>
|
|
<p className="flex items-center gap-1">
|
|
{mahasiswaData.provinsi || "-"}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
{/* Data Akademik */}
|
|
{mahasiswaData && (
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 dark:text-white">
|
|
<GraduationCap className="h-5 w-5" />
|
|
Data Akademik
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 sm:gap-4 dark:text-white">
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Tahun Angkatan</label>
|
|
<p className="flex items-center gap-1">
|
|
{mahasiswaData.tahun_angkatan}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Jenis Pendaftaran</label>
|
|
<p>{mahasiswaData.jenis_pendaftaran || "-"}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Semester</label>
|
|
<p className="flex items-center gap-1">
|
|
{mahasiswaData.semester}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">IPK</label>
|
|
<p className="font-semi text-lg">
|
|
{mahasiswaData.ipk ? Number(mahasiswaData.ipk).toFixed(2) : "-"}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Status Kuliah</label>
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(mahasiswaData.status_kuliah)}`}>
|
|
{mahasiswaData.status_kuliah}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Kelompok Keahlian</label>
|
|
<p>{mahasiswaData.nama_kelompok_keahlian || "-"}</p>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<div className="border-t border-gray-200 dark:border-gray-700"></div>
|
|
|
|
{/* Data Beasiswa */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 dark:text-white">
|
|
<BookOpen className="h-5 w-5" />
|
|
Riwayat Beasiswa
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{beasiswaData.length === 0 ? (
|
|
<p className="text-muted-foreground text-center py-4 dark:text-white">
|
|
Tidak ada riwayat beasiswa
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{beasiswaData.map((beasiswa) => (
|
|
<div key={beasiswa.id_beasiswa} className="border rounded-lg p-4">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3 dark:text-white">
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Nama Beasiswa</label>
|
|
<p className="font-semibold">{beasiswa.nama_beasiswa}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Sumber Beasiswa</label>
|
|
<p>{beasiswa.sumber_beasiswa}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Jenis Beasiswa</label>
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-full text-xs font-medium ${
|
|
beasiswa.jenis_beasiswa === "Pemerintah"
|
|
? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
|
|
: "bg-purple-100 text-purple-800 dark:bg-purple-900 dark:text-purple-100"
|
|
}`}>
|
|
{beasiswa.jenis_beasiswa}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Data Prestasi */}
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2 dark:text-white">
|
|
<Trophy className="h-5 w-5" />
|
|
Riwayat Prestasi
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{prestasiData.length === 0 ? (
|
|
<p className="text-muted-foreground text-center py-4 dark:text-white">
|
|
Tidak ada riwayat prestasi
|
|
</p>
|
|
) : (
|
|
<div className="space-y-3">
|
|
{prestasiData.map((prestasi) => (
|
|
<div key={prestasi.id_prestasi} className="border rounded-lg p-4 dark:text-white">
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Nama Prestasi</label>
|
|
<p className="font-semibold">{prestasi.nama_prestasi}</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Jenis Prestasi</label>
|
|
<span className={`inline-flex items-center px-2 py-1 rounded-md text-xs font-medium ${
|
|
prestasi.jenis_prestasi === "Akademik"
|
|
? "bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-100"
|
|
: "bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-100"
|
|
}`}>
|
|
{prestasi.jenis_prestasi}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Tingkat Prestasi</label>
|
|
<span className="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-100">
|
|
{prestasi.tingkat_prestasi}
|
|
</span>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Peringkat</label>
|
|
<p className="flex items-center gap-1 font-semibold text-orange-600">
|
|
<Trophy className="h-4 w-4" />
|
|
{prestasi.peringkat}
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<label className="text-sm font-medium text-muted-foreground">Tanggal Prestasi</label>
|
|
<p className="flex items-center gap-1">
|
|
{new Date(prestasi.tanggal_prestasi).toLocaleDateString('id-ID', {
|
|
day: '2-digit',
|
|
month: 'long',
|
|
year: 'numeric'
|
|
})}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)}
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|