initial commit

app/dashboard/page.tsx

@@ -14,7 +14,6 @@ import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboar
 import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart";
 import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan";
 import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan";
-import MasaStudiAktifChart from "@/components/chartsDashboard/masastudiaktifchart";
 import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart";
 import NamaBeasiswaChart from "@/components/chartsDashboard/NamaBeasiswaDashChart";
 import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan";
@@ -72,7 +71,7 @@ export default function TotalMahasiswaPage() {
             inline: 'nearest'
           });
         }
-      }, 100);
+      }, 200);
     });
   };
 
@@ -199,7 +198,7 @@ export default function TotalMahasiswaPage() {
           </div>
 
           {/* Demographics Section */}
-          <div id="demographics-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
+          <div id="demographics-year" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
             <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
           </div>
         </div>

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>
+  );
+}

components/charts/AsalDaerahChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -14,7 +17,15 @@ interface AsalDaerahData {
   jumlah: number;
 }
 
-export default function AsalDaerahChart() {
+interface AsalDaerahChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function AsalDaerahChart({ 
+  height = "h-[400px] sm:h-[450px] md:h-[500px] lg:h-[600px]",
+  showDetailButton = true 
+}: AsalDaerahChartProps = {}) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -265,13 +276,23 @@ export default function AsalDaerahChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Asal Kabupaten Mahasiswa
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/asal-daerah" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
         <div 
-          className="w-full max-w-xl mx-auto"
+          className={`${height} w-full max-w-xl mx-auto`}
           style={{ height: calculateHeight() }}
         >
           <Chart

components/charts/AsalDaerahPerAngkatanChart.tsx

@@ -301,9 +301,9 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
 
   // Calculate dynamic height based on number of kabupaten
   const calculateHeight = () => {
-    const minHeight = 200;
+    const minHeight = 100;
-    const barHeight = 25; // Height per bar in pixels
+    const barHeight = 15; // Height per bar in pixels
-    const padding = 100; // Extra space for title, legend, etc.
+    const padding = 50; // Extra space for title, legend, etc.
     const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
     return `${dynamicHeight}px`;
   };
@@ -317,7 +317,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
       </CardHeader>
       <CardContent>
         <div 
-          className="w-full max-w-5xl mx-auto"
+          className="w-full max-w-xl mx-auto"
           style={{ height: calculateHeight() }}
         >
           <Chart

components/charts/IPKChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -14,7 +17,15 @@ interface IPKData {
   rata_rata_ipk: number;
 }
 
-export default function IPKChart() {
+interface IPKChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function IPKChart({ 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: IPKChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -47,7 +58,7 @@ export default function IPKChart() {
       }
     },
     stroke: {
-      curve: 'smooth',
+      curve: 'straight',
       width: 3,
       lineCap: 'round'
     },
@@ -319,12 +330,22 @@ export default function IPKChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Rata-rata IPK Mahasiswa
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/rata-rata-ipk" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           <Chart
             options={options}
             series={series}

components/charts/JenisPendaftaranChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -14,7 +17,15 @@ interface JenisPendaftaranData {
   jumlah: number;
 }
 
-export default function JenisPendaftaranChart() {
+interface JenisPendaftaranChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function JenisPendaftaranChart({ 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: JenisPendaftaranChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -276,12 +287,22 @@ export default function JenisPendaftaranChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Jenis Pendaftaran Mahasiswa
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/jenis-pendaftaran" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           <Chart
             options={options}
             series={series}

components/charts/LulusTepatWaktuChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function LulusTepatWaktuChart({ selectedYear }: Props) {
+interface LulusTepatWaktuChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function LulusTepatWaktuChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: LulusTepatWaktuChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<LulusTepatWaktuData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -240,13 +252,23 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Mahasiswa Lulus Tepat Waktu
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/lulus-tepat-waktu" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/charts/StatusMahasiswaChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -15,7 +18,15 @@ interface StatusData {
   jumlah: number;
 }
 
-export default function StatusMahasiswaChart() {
+interface StatusMahasiswaChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function StatusMahasiswaChart({ 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: StatusMahasiswaChartProps) {
   const { theme } = useTheme();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -206,12 +217,22 @@ export default function StatusMahasiswaChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Status Mahasiswa
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/status-mahasiswa" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}

components/chartsDashboard/NamaBeasiswaDashChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function NamaBeasiswaDashChart({ selectedYear }: Props) {
+interface NamaBeasiswaDashChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function NamaBeasiswaDashChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: NamaBeasiswaDashChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -242,13 +254,23 @@ export default function NamaBeasiswaDashChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Nama Beasiswa Mahasiswa
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/nama-beasiswa" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/chartsDashboard/ProvinsiMahasiswaPieChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -14,7 +17,15 @@ interface ProvinsiMahasiswaData {
   jumlah_mahasiswa: number;
 }
 
-export default function ProvinsiMahasiswaPieChart() {
+interface ProvinsiMahasiswaPieChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function ProvinsiMahasiswaPieChart({ 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: ProvinsiMahasiswaPieChartProps = {}) {
   const { theme } = useTheme();
   const [data, setData] = useState<ProvinsiMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -158,12 +169,22 @@ export default function ProvinsiMahasiswaPieChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Asal Provinsi Mahasiswa
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/asal-provinsi" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/chartsDashboard/TingkatPrestasiDashChart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function TingkatPrestasiDashChart({ selectedYear }: Props) {
+interface TingkatPrestasiDashChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function TingkatPrestasiDashChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: TingkatPrestasiDashChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -241,13 +253,23 @@ export default function TingkatPrestasiDashChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Tingkat Prestasi Mahasiswa
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/tingkat-prestasi" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 ? (
             <Chart
               options={chartOptions}

components/chartsDashboard/kkdashboardchart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -18,7 +21,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function KelompokKeahlianStatusChart({ selectedYear }: Props) {
+interface KelompokKeahlianStatusChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function KelompokKeahlianStatusChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: KelompokKeahlianStatusChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -198,13 +210,23 @@ export default function KelompokKeahlianStatusChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Kelompok Keahlian Mahasiswa
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/kelompok-keahlian" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}

components/chartsDashboard/kkdashboardtepatpiechart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Dynamically import ApexCharts to avoid SSR issues
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -14,7 +17,15 @@ interface KelompokKeahlianLulusTepatData {
   jumlah_lulusan_tercepat: number;
 }
 
-export default function KelompokKeahlianLulusTepatPieChart() {
+interface KelompokKeahlianLulusTepatPieChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function KelompokKeahlianLulusTepatPieChart({ 
+  height = "h-[300px]",
+  showDetailButton = true 
+}: KelompokKeahlianLulusTepatPieChartProps = {}) {
   const { theme } = useTheme();
   const [data, setData] = useState<KelompokKeahlianLulusTepatData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -157,12 +168,22 @@ export default function KelompokKeahlianLulusTepatPieChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Kelompok Keahlian Lulusan Tepat Waktu
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/kelompok-keahlian-lulus-tepat" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}

components/chartsDashboard/masastudiluluschart.tsx

@@ -5,6 +5,9 @@ import dynamic from 'next/dynamic';
 import { ApexOptions } from 'apexcharts';
 import { useTheme } from 'next-themes';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -18,7 +21,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function MasaStudiLulusChart({ selectedYear }: Props) {
+interface MasaStudiLulusChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function MasaStudiLulusChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: MasaStudiLulusChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [data, setData] = useState<MasaStudiAktifData[]>([]);
@@ -247,13 +259,23 @@ export default function MasaStudiLulusChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
+        <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
             Rata-rata Masa Studi Mahasiswa Lulus
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/masa-studi-lulus" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
       </CardHeader>
       <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}