Change Audiens

app/dashboard/mahasiswa/lulustepatwaktu/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import LulusTepatWaktuChart from "@/components/LulusTepatWaktuChart";
+import LulusTepatWaktuPieChart from "@/components/LulusTepatWaktuPieChart";
+import JenisPendaftaranLulusChart from "@/components/JenisPendaftaranLulusChart";
+import JenisPendaftaranLulusPieChart from "@/components/JenisPendaftaranLulusPieChart";
+import AsalDaerahLulusChart from "@/components/AsalDaerahLulusChart";
+import IPKLulusTepatChart from "@/components/IPKLulusTepatChart";
+
+export default function LulusTepatWaktuPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Mahasiswa Lulus Tepat Waktu</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa yang lulus tepat waktu sesuai dengan masa studi ≤ 4 tahun 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}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <LulusTepatWaktuChart selectedYear={selectedYear} />
+          <JenisPendaftaranLulusChart selectedYear={selectedYear} />
+        </>
+        ) : (
+          <>
+            <LulusTepatWaktuPieChart selectedYear={selectedYear} />
+            <JenisPendaftaranLulusPieChart selectedYear={selectedYear} />
+          </>
+        )}
+  
+        <AsalDaerahLulusChart selectedYear={selectedYear} />
+        {selectedYear === "all" && (
+        <IPKLulusTepatChart selectedYear={selectedYear} />
+        )}
+
+      </div>
+    );
+  }