Change update semester

app/visualisasi/dashboard/page.tsx

@@ -0,0 +1,147 @@
+'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";
+
+export default function TotalMahasiswaPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="p-4 bg-gray-50 dark:bg-[var(--background)] min-h-screen">
+      {/* Header */}
+      <div className="mb-4">
+        <div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
+          <div>
+            <h1 className="text-2xl font-bold text-gray-900 dark:text-white">
+              Dashboard Mahasiswa
+            </h1>
+            <p className="text-sm text-gray-600 dark:text-gray-300">
+              Data visualisasi mahasiswa per jenis pendaftaran, status, IPK, dan asal daerah
+            </p>
+          </div>
+          <div className="flex-shrink-0">
+            <FilterTahunAngkatan 
+              selectedYear={selectedYear}
+              onYearChange={setSelectedYear}
+            />
+          </div>
+        </div>
+      </div>
+
+      {selectedYear === "all" ? (
+        /* Layout untuk semua data */
+        <div className="space-y-4">
+          {/* Row 1: Main chart + Side chart */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            {/* Statistik Mahasiswa - Large */}
+            <div className="lg:col-span-2">
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
+                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                  Statistik Mahasiswa (Keseluruhan)
+                </h3>
+                <div style={{ height: '300px' }}>
+                  <StatistikMahasiswaChart />
+                </div>
+              </div>
+            </div>
+
+            {/* Jenis Pendaftaran */}
+            <div className="lg:col-span-1">
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
+                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                  Jenis Pendaftaran Mahasiswa
+                </h3>
+                <div style={{ height: '300px' }}>
+                  <JenisPendaftaranChart />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Row 2: Three equal charts */}
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+            {/* Status Mahasiswa */}
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                Status Mahasiswa
+              </h3>
+              <div style={{ height: '250px' }}>
+                <StatusMahasiswaChart />
+              </div>
+            </div>
+
+            {/* IPK Chart */}
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                Rata-rata IPK per Program Studi
+              </h3>
+              <div style={{ height: '250px' }}>
+                <IPKChart />
+              </div>
+            </div>
+
+            {/* Asal Daerah */}
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                Distribusi Asal Daerah Mahasiswa
+              </h3>
+              <div style={{ height: '250px' }}>
+                <AsalDaerahChart />
+              </div>
+            </div>
+          </div>
+        </div>
+      ) : (
+        /* Layout untuk data per angkatan */
+        <div className="space-y-4">
+          {/* Row 1: Main chart + Side chart */}
+          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
+            {/* Statistik Per Angkatan - Large */}
+            <div className="lg:col-span-2">
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
+                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                  Statistik Mahasiswa Angkatan {selectedYear}
+                </h3>
+                <div style={{ height: '300px' }}>
+                  <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
+                </div>
+              </div>
+            </div>
+
+            {/* Jenis Pendaftaran Per Angkatan */}
+            <div className="lg:col-span-1">
+              <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
+                <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                  Jenis Pendaftaran Angkatan {selectedYear}
+                </h3>
+                <div style={{ height: '300px' }}>
+                  <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Row 2: Full width chart */}
+          <div className="grid grid-cols-1 gap-4">
+            <div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
+              <h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
+                Asal Daerah Mahasiswa Angkatan {selectedYear}
+              </h3>
+              <div style={{ height: '250px' }}>
+                <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
+              </div>
+            </div>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

app/visualisasi/status/page.tsx

@@ -11,6 +11,8 @@ 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");
@@ -44,7 +46,7 @@ export default function StatusMahasiswaPage() {
         {selectedYear === "all" ? (
         <>
           <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-            <StatusMahasiswaFilterChart 
+            <StatusMahasiswaFilterChart
               selectedYear={selectedYear}
               selectedStatus={selectedStatus}
             />
@@ -56,6 +58,10 @@ export default function StatusMahasiswaPage() {
             selectedYear={selectedYear}
             selectedStatus={selectedStatus}
             />
+            <KelompokKeahlianStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+            />
             <IpkStatusChart
             selectedYear={selectedYear}
             selectedStatus={selectedStatus}
@@ -77,6 +83,10 @@ export default function StatusMahasiswaPage() {
               selectedYear={selectedYear}
               selectedStatus={selectedStatus}
             />
+            <KelompokKeahlianStatusPieChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+            />
             <AsalDaerahStatusChart
             selectedYear={selectedYear}
             selectedStatus={selectedStatus}