again n again

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" && (