100 lines
3.8 KiB
TypeScript
100 lines
3.8 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
|
|
import FilterStatusKuliah from "@/components/FilterStatusKuliah";
|
|
import StatusMahasiswaFilterChart from "@/components/charts/StatusMahasiswaFilterChart";
|
|
import StatusMahasiswaFilterPieChart from "@/components/charts/StatusMahasiswaFilterPieChart";
|
|
import JenisPendaftaranStatusChart from "@/components/charts/JenisPendaftaranStatusChart";
|
|
import JenisPendaftaranStatusPieChart from "@/components/charts/JenisPendaftaranStatusPieChart";
|
|
import AsalDaerahStatusChart from '@/components/charts/AsalDaerahStatusChart';
|
|
import IpkStatusChart from '@/components/charts/IpkStatusChart';
|
|
import MasaStudiChart from '@/components/charts/MasaStudiChart';
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
import KelompokKeahlianStatusChart from "@/components/charts/KelompokKeahlianStatusChart";
|
|
import KelompokKeahlianStatusPieChart from "@/components/charts/KelompokKeahlianStatusPieChart";
|
|
|
|
export default function StatusMahasiswaPage() {
|
|
const [selectedYear, setSelectedYear] = useState<string>("all");
|
|
const [selectedStatus, setSelectedStatus] = useState<string>("Aktif");
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 space-y-6">
|
|
<h1 className="text-3xl font-bold mb-4">Status Kuliah</h1>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
Informasi jumlah mahasiswa, jenis pendaftaran, asal daerah, dan rata-rata IPK dengan filter tahun angkatan dan status kuliah.
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
|
|
<CardContent>
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
|
|
<FilterTahunAngkatan
|
|
selectedYear={selectedYear}
|
|
onYearChange={setSelectedYear}
|
|
/>
|
|
<FilterStatusKuliah
|
|
selectedStatus={selectedStatus}
|
|
onStatusChange={setSelectedStatus}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{selectedYear === "all" ? (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<StatusMahasiswaFilterChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<JenisPendaftaranStatusChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<MasaStudiChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<KelompokKeahlianStatusChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<IpkStatusChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<AsalDaerahStatusChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<StatusMahasiswaFilterPieChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<JenisPendaftaranStatusPieChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<KelompokKeahlianStatusPieChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
<AsalDaerahStatusChart
|
|
selectedYear={selectedYear}
|
|
selectedStatus={selectedStatus}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
|
|
</div>
|
|
);
|
|
} |