100 lines
4.2 KiB
TypeScript
100 lines
4.2 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
|
|
import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
|
|
import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
|
|
import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
|
|
import IPKChart from "@/components/charts/IPKChart";
|
|
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
|
|
import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
|
|
import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
|
|
import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
|
|
import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboardchart";
|
|
import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart";
|
|
import MasaStudiAktifChart from "@/components/chartsDashboard/masastudiaktifchart";
|
|
import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart";
|
|
import NamaBeasiswaChart from "@/components/chartsDashboard/NamaBeasiswaDashChart";
|
|
import TingkatPrestasiChart from "@/components/chartsDashboard/TingkatPrestasiDashChart";
|
|
import ProvinsiMahasiswaChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
export default function TotalMahasiswaPage() {
|
|
const [selectedYear, setSelectedYear] = useState<string>("all");
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 space-y-6">
|
|
<h1 className="text-2xl font-bold mb-2">Dashboard Mahasiswa</h1>
|
|
|
|
<div className="mb-2">
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
Visualisasi Data Akademik Mahasiswa Informatika Universitas Tanjungpura
|
|
</p>
|
|
</div>
|
|
|
|
<div className="mb-4">
|
|
<div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
|
|
<FilterTahunAngkatan
|
|
selectedYear={selectedYear}
|
|
onYearChange={setSelectedYear}
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{selectedYear === "all" ? (
|
|
<div className="space-y-6">
|
|
{/* Overview Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<StatistikMahasiswaChart />
|
|
<StatusMahasiswaChart />
|
|
</div>
|
|
|
|
{/* Academic Performance Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<IPKChart />
|
|
<JenisPendaftaranChart />
|
|
</div>
|
|
|
|
{/* Study Duration Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<MasaStudiAktifChart selectedYear={selectedYear} />
|
|
<MasaStudiLulusChart selectedYear={selectedYear} />
|
|
</div>
|
|
|
|
{/* Expertise & Achievement Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<KelompokKeahlianStatusChart selectedYear={selectedYear} />
|
|
<KelompokKeahlianLulusTepatPieChart />
|
|
</div>
|
|
|
|
{/* Scholarship & Achievement Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<NamaBeasiswaChart selectedYear={selectedYear} />
|
|
<TingkatPrestasiChart selectedYear={selectedYear} />
|
|
</div>
|
|
|
|
{/* Demographics Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<AsalDaerahChart />
|
|
<ProvinsiMahasiswaChart />
|
|
</div>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-6">
|
|
{/* Overview Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
|
|
<KelompokKeahlianStatusChart selectedYear={selectedYear} />
|
|
</div>
|
|
|
|
{/* Demographics Section */}
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|
<JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
|
|
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|