initial commit

app/detail/asal-daerah/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from "react";
+import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
+import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function AsalDaerahDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <AsalDaerahChart 
+                height="h-[600px] sm:h-[600px] lg:h-[600px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <AsalDaerahPerAngkatanChart 
+                tahunAngkatan={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Asal Daerah)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi mahasiswa berdasarkan asal kabupaten/kota</li>
+                <li>• Data geografis menunjukkan sebaran mahasiswa dari berbagai daerah</li>
+                <li>• Grafik horizontal bar chart untuk kemudahan membaca nama daerah</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan distribusi asal daerah untuk angkatan {selectedYear}</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Insight detail sebaran geografis per angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/asal-provinsi/page.tsx

@@ -0,0 +1,40 @@
+'use client';
+
+import ProvinsiMahasiswaPieChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
+
+export default function AsalProvinsiDetailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Asal Provinsi Chart dengan ukuran lebih besar */}
+          <div className="lg:col-span-2">
+            <ProvinsiMahasiswaPieChart 
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          </div>
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Asal Provinsi Mahasiswa
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan proporsi mahasiswa berdasarkan provinsi kalimantan barat dengan luar kalimantan barat</li>
+              </ul>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/jenis-pendaftaran/page.tsx

@@ -0,0 +1,74 @@
+'use client';
+
+import { useState } from "react";
+import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
+import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function JenisPendaftaranDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <JenisPendaftaranChart 
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <JenisPendaftaranPerAngkatanChart 
+                tahunAngkatan={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Semua Angkatan)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi jenis pendaftaran mahasiswa per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan jalur masuk mahasiswa</li>
+                <li>• Grafik batang yang menunjukkan jumlah mahasiswa per jenis pendaftaran</li>
+                <li>• Data mencakup seluruh mahasiswa dari semua angkatan</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan distribusi jenis pendaftaran untuk angkatan {selectedYear}</li>
+                  <li>• Grafik pie chart dengan persentase per jenis pendaftaran</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Memberikan insight detail jalur masuk per angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/jumlah-mahasiswa/page.tsx

@@ -41,7 +41,7 @@ export default function JumlahMahasiswaDetailPage() {
         </div>
 
         {/* Information Section */}
-        <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
             Informasi Visualisasi
           </h2>
@@ -54,7 +54,7 @@ export default function JumlahMahasiswaDetailPage() {
                 <li>• Menampilkan jumlah mahasiswa per tahun angkatan</li>
                 <li>• Data dibagi berdasarkan jenis kelamin (Laki-laki & Perempuan)</li>
                 <li>• Grafik batang dengan tiga kategori: Laki-laki, Total, dan Perempuan</li>
-                <li>• Data dapat ditampilkan berdasarkan kategori dan di-download</li>
+                <li>• Data dapat di-download, dan dianalisis per kategori</li>
               </ul>
             </div>
             {selectedYear !== "all" && (

app/detail/kelompok-keahlian-lulus-tepat/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart";
+
+export default function KelompokKeahlianLulusTepatDetailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Kelompok Keahlian Lulus Tepat Chart dengan ukuran lebih besar */}
+          <div className="lg:col-span-2">
+            <KelompokKeahlianLulusTepatPieChart 
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          </div>
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Kelompok Keahlian Lulus Tepat Waktu
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi lulusan tepat waktu berdasarkan kelompok keahlian</li>
+                <li>• Data menunjukkan jumlah mahasiswa yang lulus sesuai durasi standar per bidang studi</li>
+                <li>• Grafik pie chart untuk visualisasi proporsi keberhasilan per kelompok keahlian</li>
+              </ul>
+            </div>
+          </div>
+        
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/kelompok-keahlian/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from "react";
+import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboardchart";
+import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function KelompokKeahlianDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <KelompokKeahlianStatusChart 
+                selectedYear={selectedYear}
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <KelompokKeahlianPieChartPerAngkatan 
+                selectedYear={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Kelompok Keahlian)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi mahasiswa berdasarkan kelompok keahlian per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan bidang studi/konsentrasi mahasiswa</li>
+                <li>• Grafik horizontal bar chart dengan stacked data per angkatan</li>
+                <li>• Visualisasi pola distribusi mahasiswa di setiap kelompok keahlian</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan proporsi mahasiswa per kelompok keahlian untuk angkatan {selectedYear}</li>
+                  <li>• Grafik pie chart dengan persentase per kelompok keahlian</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Memberikan insight detail distribusi per bidang studi</li>
+                </ul>
+              </div>
+            )}
+          </div>
+
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/lulus-tepat-waktu/page.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
+
+export default function LulusTepatWaktuDetailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Lulus Tepat Waktu Chart dengan ukuran lebih besar */}
+          <div className="lg:col-span-2">
+            <LulusTepatWaktuChart 
+              selectedYear="all"
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          </div>
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Tentang Grafik Lulus Tepat Waktu
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan jumlah mahasiswa yang lulus tepat waktu per tahun angkatan</li>
+                <li>• Data mencakup mahasiswa yang menyelesaikan studi sesuai durasi standar</li>
+                <li>• Grafik batang yang menunjukkan tren kelulusan tepat waktu</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/masa-studi-lulus/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart";
+
+export default function MasaStudiLulusDetailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Masa Studi Lulus Chart dengan ukuran lebih besar */}
+          <div className="lg:col-span-2">
+            <MasaStudiLulusChart 
+              selectedYear="all"
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          </div>
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Tentang Grafik Masa Studi Lulus
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan rata-rata masa studi mahasiswa yang telah lulus per tahun angkatan</li>
+                <li>• Data menunjukkan durasi waktu yang dibutuhkan mahasiswa untuk menyelesaikan studi</li>
+                <li>• Grafik line chart untuk melihat tren perubahan masa studi dari waktu ke waktu</li>
+                <li>• Indikator efisiensi waktu penyelesaian studi mahasiswa</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/nama-beasiswa/page.tsx

@@ -0,0 +1,75 @@
+'use client';
+
+import { useState } from "react";
+import NamaBeasiswaDashChart from "@/components/chartsDashboard/NamaBeasiswaDashChart";
+import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function NamaBeasiswaDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <NamaBeasiswaDashChart 
+                selectedYear={selectedYear}
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <NamaBeasiswaDashPieChartPerangkatan 
+                selectedYear={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Nama Beasiswa)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi mahasiswa berdasarkan jenis beasiswa per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan nama program beasiswa yang diterima</li>
+                <li>• Grafik bar chart yang menunjukkan jumlah penerima per jenis beasiswa</li>
+                <li>• Visualisasi tren penerimaan beasiswa dari waktu ke waktu</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan proporsi penerima beasiswa per jenis untuk angkatan {selectedYear}</li>
+                  <li>• Grafik pie chart dengan persentase per nama beasiswa</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Memberikan insight detail distribusi beasiswa per angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/rata-rata-ipk/page.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import IPKChart from "@/components/charts/IPKChart";
+
+export default function RataRataIPKDetailPage() {
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* IPK Chart dengan ukuran lebih besar */}
+          <div className="lg:col-span-2">
+            <IPKChart 
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          </div>
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Tentang Grafik Rata-rata IPK
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan tren rata-rata IPK mahasiswa per tahun angkatan</li>
+                <li>• Grafik garis yang menunjukkan perkembangan IPK dari waktu ke waktu</li>
+                <li>• Data mencakup seluruh mahasiswa dari semua angkatan</li>
+                <li>• Skala IPK dari 0.00 hingga 4.00</li>
+              </ul>
+            </div>
+          </div>
+          
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/status-mahasiswa/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from "react";
+import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
+import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function StatusMahasiswaDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Header Section */}
+
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <StatusMahasiswaChart 
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <StatusMahasiswaPieChartPerangkatan 
+                selectedYear={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Semua Angkatan)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi status kuliah mahasiswa per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan status: Aktif, Lulus, Cuti, Non Aktif</li>
+                <li>• Grafik batang yang menunjukkan jumlah mahasiswa per status</li>
+                <li>• Data dapat di-download dan dianalisis per kategori</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan distribusi status untuk angkatan {selectedYear}</li>
+                  <li>• Grafik pie chart dengan persentase per status</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Memberikan insight detail status mahasiswa per angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/detail/tingkat-prestasi/page.tsx

@@ -0,0 +1,76 @@
+'use client';
+
+import { useState } from "react";
+import TingkatPrestasiDashChart from "@/components/chartsDashboard/TingkatPrestasiDashChart";
+import TingkatPrestasiPieChart from "@/components/chartsDashboard/TingkatPrestasiPieChartDash";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function TingkatPrestasiDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <TingkatPrestasiDashChart 
+                selectedYear={selectedYear}
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <TingkatPrestasiPieChart 
+                selectedYear={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Tingkat Prestasi)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi mahasiswa berprestasi berdasarkan tingkat prestasi per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan tingkat/level prestasi yang diraih mahasiswa</li>
+                <li>• Grafik bar chart yang menunjukkan jumlah mahasiswa per tingkat prestasi</li>
+                <li>• Visualisasi tren pencapaian prestasi dari waktu ke waktu</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan proporsi mahasiswa per tingkat prestasi untuk angkatan {selectedYear}</li>
+                  <li>• Grafik pie chart dengan persentase per tingkat prestasi</li>
+                  <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
+                  <li>• Memberikan insight detail distribusi prestasi per angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        
+        </div>
+      </div>
+    </div>
+  );
+}