Change Alur Aplikasi

app/visualisasi/beasiswa/page.tsx

@@ -0,0 +1,94 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterJenisBeasiswa from "@/components/FilterJenisBeasiswa";
+import TotalBeasiswaChart from "@/components/charts/TotalBeasiswaChart";
+import TotalBeasiswaPieChart from "@/components/charts/TotalBeasiswaPieChart";
+import NamaBeasiswaChart from "@/components/charts/NamaBeasiswaChart";
+import NamaBeasiswaPieChart from "@/components/charts/NamaBeasiswaPieChart";
+import JenisPendaftaranBeasiswaChart from "@/components/charts/JenisPendaftaranBeasiswaChart";
+import JenisPendaftaranBeasiswaPieChart from "@/components/charts/JenisPendaftaranBeasiswaPieChart";
+import AsalDaerahBeasiswaChart from "@/components/charts/AsalDaerahBeasiswaChart";
+import IPKBeasiswaChart from "@/components/charts/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>
+    );
+  }

app/visualisasi/berprestasi/page.tsx

@@ -0,0 +1,80 @@
+'use client';
+
+import { useState } from "react";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterJenisPrestasi from "@/components/FilterJenisPrestasi";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import TotalPrestasiChart from "@/components/charts/TotalPrestasiChart";
+import TotalPrestasiPieChart from "@/components/charts/TotalPrestasiPieChart";
+import TingkatPrestasiChart from "@/components/charts/TingkatPrestasiChart";
+import TingkatPrestasiPieChart from "@/components/charts/TingkatPrestasiPieChart";
+import JenisPendaftaranPrestasiChart from "@/components/charts/JenisPendaftaranPrestasiChart";
+import JenisPendaftaranPrestasiPieChart from "@/components/charts/JenisPendaftaranPrestasiPieChart";
+import AsalDaerahPrestasiChart from "@/components/charts/AsalDaerahPrestasiChart";
+import IPKPrestasiChart from "@/components/charts/IPKPrestasiChart";
+
+export default function BerprestasiMahasiswaPage() {
+    const [selectedYear, setSelectedYear] = useState<string>("all");
+    const [selectedJenisPrestasi, setSelectedJenisPrestasi] = useState<string>("Akademik");
+  
+    return (
+      <div className="container mx-auto p-4 space-y-6">
+        <h1 className="text-3xl font-bold mb-4">Mahasiswa Berprestasi</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa yang mendapatkan prestasi akademik dan non akademik 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}
+              />
+              <FilterJenisPrestasi
+                selectedJenisPrestasi={selectedJenisPrestasi}
+                onJenisPrestasiChange={setSelectedJenisPrestasi}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <TotalPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+          <TingkatPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+          <JenisPendaftaranPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+        </>
+        ) : (
+          <>
+            <TotalPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+            <TingkatPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+            <JenisPendaftaranPrestasiPieChart 
+              selectedYear={selectedYear}
+              selectedJenisPrestasi={selectedJenisPrestasi}
+            />
+          </>
+        )}
+
+        <AsalDaerahPrestasiChart selectedYear={selectedYear} selectedJenisPrestasi={selectedJenisPrestasi} />
+
+        {selectedYear === "all" && (
+          <IPKPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
+        )}
+      </div>
+    );
+  }

app/visualisasi/status/page.tsx

@@ -0,0 +1,86 @@
+'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 { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+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 Mahasiswa</h1>
+        
+        <div className="mb-4">
+          <p className="text-gray-600 dark:text-gray-300">
+            Mahasiswa status adalah status kuliah mahasiswa 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}
+              />
+              <FilterStatusKuliah
+                selectedStatus={selectedStatus}
+                onStatusChange={setSelectedStatus}
+              />
+            </div>
+          </CardContent>
+        </Card>
+
+        {selectedYear === "all" ? (
+        <>
+          <StatusMahasiswaFilterChart 
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+          <JenisPendaftaranStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+        </>
+        ) : (
+          <>
+            <StatusMahasiswaFilterPieChart
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+            <JenisPendaftaranStatusPieChart
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+          </>
+        )}
+
+        <AsalDaerahStatusChart
+          selectedYear={selectedYear}
+          selectedStatus={selectedStatus}
+        />
+
+        {selectedYear === "all" && (
+          <IpkStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+          />
+        )}
+
+      </div>
+    );
+  }

app/visualisasi/tipekelulusan/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/charts/LulusTepatWaktuChart";
+import LulusTepatWaktuPieChart from "@/components/charts/LulusTepatWaktuPieChart";
+import JenisPendaftaranLulusChart from "@/components/charts/JenisPendaftaranLulusChart";
+import JenisPendaftaranLulusPieChart from "@/components/charts/JenisPendaftaranLulusPieChart";
+import AsalDaerahLulusChart from "@/components/charts/AsalDaerahLulusChart";
+import IPKLulusTepatChart from "@/components/charts/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>
+    );
+  }

app/visualisasi/total/page.tsx

@@ -0,0 +1,59 @@
+'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 { 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-3xl font-bold mb-4">Total Mahasiswa</h1>
+      
+      <div className="mb-4">
+        <p className="text-gray-600 dark:text-gray-300">
+          Mahasiswa total adalah jumlah mahasiswa 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" ? (
+        <>
+          <StatistikMahasiswaChart />
+          <JenisPendaftaranChart />
+          <AsalDaerahChart />
+          <IPKChart />
+        </>
+      ) : (
+        <>
+          <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
+          <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
+          <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
+        </>
+      )}
+    </div>
+  );
+}