again n again

app/detail/asal-daerah/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
 import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelAsalDaerahMahasiswa from "@/components/chartstable/tabelasaldaerahmahasiswa";
 
 export default function AsalDaerahDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -36,6 +37,9 @@ export default function AsalDaerahDetailPage() {
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelAsalDaerahMahasiswa selectedYear={selectedYear} />
+
         {/* 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">
@@ -50,6 +54,7 @@ export default function AsalDaerahDetailPage() {
                 <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>
+                <li>• Data dapat di-download dan dianalisis per daerah</li>
               </ul>
             </div>
             {selectedYear !== "all" && (

app/detail/asal-provinsi/page.tsx

@@ -1,8 +1,13 @@
 'use client';
 
+import { useState } from 'react';
 import ProvinsiMahasiswaPieChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelAsalProvinsiMahasiswa from "@/components/chartstable/tabelasalprovinsi mahasiswa";
 
 export default function AsalProvinsiDetailPage() {
+  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">
@@ -17,6 +22,17 @@ export default function AsalProvinsiDetailPage() {
           </div>
         </div>
 
+        {/* Filter Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-4">
+          <FilterTahunAngkatan 
+            selectedYear={selectedYear} 
+            onYearChange={setSelectedYear}
+          />
+        </div>
+
+        {/* Table Section */}
+        <TabelAsalProvinsiMahasiswa selectedYear={selectedYear} />
+
         {/* 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">

app/detail/bimbingan-dosen/page.tsx

@@ -4,9 +4,12 @@ import { useState } from "react";
 import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
 import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import FilterNamaDosen from "@/components/ui/filter-nama-dosen";
+import TabelBimbinganDosenMahasiswa from "@/components/chartstable/tabelbimbingandosenmahasiswa";
 
 export default function BimbinganDosenDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
+  const [selectedDosen, setSelectedDosen] = useState<string>("all");
 
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
@@ -36,6 +39,20 @@ export default function BimbinganDosenDetailPage() {
           )}
         </div>
 
+        {/* Filter Nama Dosen Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-4">
+          <FilterNamaDosen 
+            selectedDosen={selectedDosen}
+            onDosenChange={setSelectedDosen}
+          />
+        </div>
+
+        {/* Tabel Section */}
+        <TabelBimbinganDosenMahasiswa 
+          selectedYear={selectedYear} 
+          selectedDosen={selectedDosen}
+        />
+
         {/* 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">
@@ -50,6 +67,7 @@ export default function BimbinganDosenDetailPage() {
                 <li>• Menampilkan statistik bimbingan mahasiswa per dosen pembimbing</li>
                 <li>• Data terbagi menjadi dua kategori: "Selesai" dan "Belum Selesai"</li>
                 <li>• Hijau menunjukkan bimbingan selesai, kuning untuk belum selesai</li>
+                <li>• Data dapat di-download dan dianalisis per dosen</li>
               </ul>
             </div>
             {selectedYear !== "all" && (

app/detail/nama-beasiswa/page.tsx

@@ -2,8 +2,8 @@
 
 import { useState } from "react";
 import NamaBeasiswaDashChart from "@/components/chartsDashboard/NamaBeasiswaDashChart";
-import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelNamaBeasiswaMahasiswa from "@/components/chartstable/tabelnamabeasiswamahasiswa";
 
 export default function NamaBeasiswaDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -11,6 +11,8 @@ export default function NamaBeasiswaDetailPage() {
   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}
@@ -30,13 +32,18 @@ export default function NamaBeasiswaDetailPage() {
             </div>
           ) : (
             <>
-              <NamaBeasiswaDashPieChartPerangkatan 
+              <NamaBeasiswaDashChart 
                 selectedYear={selectedYear}
+                height="h-[400px] sm:h-[400px] lg:h-[400px]"
+                showDetailButton={false}
               />
             </>
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelNamaBeasiswaMahasiswa selectedYear={selectedYear} />
+
         {/* 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">
@@ -45,13 +52,13 @@ export default function NamaBeasiswaDetailPage() {
           <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)
+                Grafik Utama (Semua Angkatan)
               </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>
+                <li>• Menampilkan distribusi nama beasiswa mahasiswa per tahun angkatan</li>
+                <li>• Data dikategorikan berdasarkan jenis beasiswa yang diterima</li>
+                <li>• Grafik batang horizontal yang menunjukkan jumlah penerima per beasiswa</li>
+                <li>• Data dapat di-download dan dianalisis per kategori</li>
               </ul>
             </div>
             {selectedYear !== "all" && (
@@ -60,10 +67,10 @@ export default function NamaBeasiswaDetailPage() {
                   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>• Menampilkan distribusi beasiswa untuk angkatan {selectedYear}</li>
+                  <li>• Grafik batang horizontal dengan persentase per jenis beasiswa</li>
                   <li>• Data spesifik untuk tahun angkatan yang dipilih</li>
-                  <li>• Memberikan insight detail distribusi beasiswa per angkatan</li>
+                  <li>• Memberikan insight detail penerima beasiswa per angkatan</li>
                 </ul>
               </div>
             )}
@@ -72,4 +79,4 @@ export default function NamaBeasiswaDetailPage() {
       </div>
     </div>
   );
-}
+}

app/detail/tingkat-prestasi/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import TingkatPrestasiDashChart from "@/components/chartsDashboard/TingkatPrestasiDashChart";
 import TingkatPrestasiPieChart from "@/components/chartsDashboard/TingkatPrestasiPieChartDash";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelTingkatPrestasiMahasiswa from "@/components/chartstable/tabeltingkatprestasimahasiswa";
 
 export default function TingkatPrestasiDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -37,6 +38,9 @@ export default function TingkatPrestasiDetailPage() {
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelTingkatPrestasiMahasiswa selectedYear={selectedYear} />
+
         {/* 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">
@@ -50,8 +54,8 @@ export default function TingkatPrestasiDetailPage() {
               <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>
+                <li>• Grafik batang horizontal yang menunjukkan jumlah mahasiswa per tingkat prestasi</li>
+                <li>• Data dapat di-download dan dianalisis per kategori</li>
               </ul>
             </div>
             {selectedYear !== "all" && (
@@ -60,7 +64,7 @@ export default function TingkatPrestasiDetailPage() {
                   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>• Menampilkan distribusi 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>