94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from "react";
|
|
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
|
|
import FilterJenisBeasiswa from "@/components/FilterJenisBeasiswa";
|
|
import TotalBeasiswaChart from "@/components/TotalBeasiswaChart";
|
|
import TotalBeasiswaPieChart from "@/components/TotalBeasiswaPieChart";
|
|
import NamaBeasiswaChart from "@/components/NamaBeasiswaChart";
|
|
import NamaBeasiswaPieChart from "@/components/NamaBeasiswaPieChart";
|
|
import JenisPendaftaranBeasiswaChart from "@/components/JenisPendaftaranBeasiswaChart";
|
|
import JenisPendaftaranBeasiswaPieChart from "@/components/JenisPendaftaranBeasiswaPieChart";
|
|
import AsalDaerahBeasiswaChart from "@/components/AsalDaerahBeasiswaChart";
|
|
import IPKBeasiswaChart from "@/components/IPKBeasiswaChart";
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
|
|
|
export default function BeasiswaMahasiswaPage() {
|
|
const [selectedYear, setSelectedYear] = useState<string>("all");
|
|
const [selectedJenisBeasiswa, setSelectedJenisBeasiswa] = useState<string>("Pemerintah");
|
|
|
|
return (
|
|
<div className="container mx-auto p-4 space-y-6">
|
|
<h1 className="text-3xl font-bold mb-4">Mahasiswa Beasiswa</h1>
|
|
|
|
<div className="mb-4">
|
|
<p className="text-gray-600 dark:text-gray-300">
|
|
Mahasiswa yang mendapatkan beasiswa di program studi Informatika Fakultas Teknik Universitas Tanjungpura.
|
|
</p>
|
|
</div>
|
|
|
|
<Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
|
|
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
<CardTitle className="text-sm font-medium dark:text-white">
|
|
Filter Data
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<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}
|
|
/>
|
|
<FilterJenisBeasiswa
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
onJenisBeasiswaChange={setSelectedJenisBeasiswa}
|
|
/>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{selectedYear === "all" ? (
|
|
<>
|
|
<TotalBeasiswaChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
<NamaBeasiswaChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
<JenisPendaftaranBeasiswaChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
</>
|
|
) : (
|
|
<>
|
|
<TotalBeasiswaPieChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
<NamaBeasiswaPieChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
<JenisPendaftaranBeasiswaPieChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
</>
|
|
)}
|
|
|
|
<AsalDaerahBeasiswaChart
|
|
selectedYear={selectedYear}
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
|
|
{selectedYear === "all" && (
|
|
<IPKBeasiswaChart
|
|
selectedJenisBeasiswa={selectedJenisBeasiswa}
|
|
/>
|
|
)}
|
|
</div>
|
|
);
|
|
} |