again n again

app/api/mahasiswa/mkbelumdiambil/route.ts

@@ -0,0 +1,156 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+interface MKBelumDiambilData {
+  tahun_angkatan: number;
+  jenis_mk: string;
+  jumlah_belum_diambil: number;
+  total_mata_kuliah: number;
+  total_mahasiswa: number;
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+
+    // 1. Ambil semua mata kuliah
+    const { data: mataKuliah, error: errMK } = await supabase
+      .from('mata_kuliah')
+      .select('id_mk, jenis_mk');
+
+    if (errMK) {
+      console.error('Error fetching mata kuliah:', errMK);
+      throw errMK;
+    }
+
+    // 2. Hitung total mata kuliah per kategori (total_mk CTE)
+    const totalMKPerJenis = new Map<string, number>();
+    mataKuliah?.forEach((mk) => {
+      const jenis = mk.jenis_mk;
+      totalMKPerJenis.set(jenis, (totalMKPerJenis.get(jenis) || 0) + 1);
+    });
+
+    // 3. Ambil data mahasiswa
+    let mahasiswaQuery = supabase
+      .from('mahasiswa')
+      .select('id_mahasiswa, tahun_angkatan');
+
+    // Jika ada filter tahun angkatan, terapkan filter
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      mahasiswaQuery = mahasiswaQuery.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    const { data: mahasiswa, error: errMhs } = await mahasiswaQuery;
+
+    if (errMhs) {
+      console.error('Error fetching mahasiswa:', errMhs);
+      throw errMhs;
+    }
+
+    // 4. Hitung total mahasiswa per angkatan (total_mhs CTE)
+    const totalMhsPerAngkatan = new Map<number, number>();
+    mahasiswa?.forEach((m) => {
+      const tahun = m.tahun_angkatan;
+      if (tahun) {
+        totalMhsPerAngkatan.set(tahun, (totalMhsPerAngkatan.get(tahun) || 0) + 1);
+      }
+    });
+
+    // 5. Ambil semua nilai mahasiswa
+    const { data: nilaiMahasiswa, error: errNilai } = await supabase
+      .from('nilai_mahasiswa')
+      .select('id_mahasiswa, id_mk, nilai_huruf');
+
+    if (errNilai) {
+      console.error('Error fetching nilai mahasiswa:', errNilai);
+      throw errNilai;
+    }
+
+    // 6. Buat Map untuk cek apakah mahasiswa sudah mengambil MK (dengan nilai != E)
+    // Key: "id_mahasiswa-id_mk", Value: true jika sudah diambil dan nilai != E
+    const sudahAmbilMap = new Map<string, boolean>();
+    nilaiMahasiswa?.forEach((nilai) => {
+      // Hanya dianggap sudah ambil jika nilai != E
+      if (nilai.nilai_huruf !== 'E') {
+        const key = `${nilai.id_mahasiswa}-${nilai.id_mk}`;
+        sudahAmbilMap.set(key, true);
+      }
+    });
+
+    // 7. Hitung mata kuliah belum diambil per angkatan per jenis MK (belum_ambil CTE)
+    // Map dengan key yang unik menggunakan object
+    const belumAmbilMap = new Map<string, { tahun: number; jenis: string; jumlah: number }>();
+
+    // CROSS JOIN mahasiswa dengan mata_kuliah
+    mahasiswa?.forEach((mhs) => {
+      if (!mhs.tahun_angkatan) return;
+
+      mataKuliah?.forEach((mk) => {
+        const key = `${mhs.id_mahasiswa}-${mk.id_mk}`;
+        
+        // WHERE NOT EXISTS: jika tidak ada di sudahAmbilMap, berarti belum diambil
+        if (!sudahAmbilMap.has(key)) {
+          // Gunakan separator yang aman (||) untuk menghindari konflik dengan nama jenis_mk
+          const groupKey = `${mhs.tahun_angkatan}||${mk.jenis_mk}`;
+          const existing = belumAmbilMap.get(groupKey);
+          
+          if (existing) {
+            existing.jumlah += 1;
+          } else {
+            belumAmbilMap.set(groupKey, {
+              tahun: mhs.tahun_angkatan,
+              jenis: mk.jenis_mk,
+              jumlah: 1
+            });
+          }
+        }
+      });
+    });
+
+    // 8. Gabungkan semua data (JOIN)
+    const results: MKBelumDiambilData[] = [];
+
+    belumAmbilMap.forEach((value) => {
+      const tahun_angkatan = value.tahun;
+      const jenis_mk = value.jenis;
+      const jumlah_belum_diambil = value.jumlah;
+
+      const total_mata_kuliah = totalMKPerJenis.get(jenis_mk) || 0;
+      const total_mahasiswa = totalMhsPerAngkatan.get(tahun_angkatan) || 0;
+
+      results.push({
+        tahun_angkatan,
+        jenis_mk,
+        jumlah_belum_diambil,
+        total_mata_kuliah,
+        total_mahasiswa,
+      });
+    });
+
+    // 9. Urutkan berdasarkan tahun_angkatan dan jenis_mk
+    results.sort((a, b) => {
+      if (a.tahun_angkatan !== b.tahun_angkatan) {
+        return a.tahun_angkatan - b.tahun_angkatan;
+      }
+      // Urutkan jenis MK: Wajib, Pilihan Wajib, Pilihan
+      const jenisOrder = ['Wajib', 'Pilihan Wajib', 'Pilihan'];
+      return jenisOrder.indexOf(a.jenis_mk) - jenisOrder.indexOf(b.jenis_mk);
+    });
+
+    return NextResponse.json(results, {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error in mkbelumdiambil API:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error', message: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

app/api/mahasiswa/terancamdo/route.ts

@@ -122,11 +122,11 @@ export async function GET() {
       // Di SQL, jika nilai NULL, kondisi akan menghasilkan NULL (dianggap FALSE dalam CASE WHEN)
       let isDO = 0;
 
-      // Evaluasi 4 semester: semester BETWEEN 4 AND 7 AND (sks_total < 40 OR ipk <= 2.50)
+      // Evaluasi 4 semester: semester BETWEEN 3 AND 6 AND (sks_total < 40 OR ipk <= 2.50)
       // Jika sksTotal NULL (tidak ada nilai), kondisi sksTotal < 40 akan NULL (FALSE)
       if (
-        sem >= 4 &&
-        sem <= 7 &&
+        sem >= 3 &&
+        sem <= 6 &&
         sksTotal !== null && // Pastikan ada data nilai
         (
           sksTotal < 40 ||
@@ -135,10 +135,10 @@ export async function GET() {
       ) {
         isDO = 1;
       }
-      // Evaluasi 8 semester: semester BETWEEN 8 AND 13 AND (sks_total < 80 OR ipk <= 2.50)
+      // Evaluasi 8 semester: semester BETWEEN 7 AND 11 AND (sks_total < 80 OR ipk <= 2.50)
       else if (
-        sem >= 8 &&
-        sem <= 13 &&
+        sem >= 7 &&
+        sem <= 11 &&
         sksTotal !== null && // Pastikan ada data nilai
         (
           sksTotal < 80 ||
@@ -147,10 +147,10 @@ export async function GET() {
       ) {
         isDO = 1;
       }
-      // Evaluasi akhir masa studi: semester = 14 AND (sks_total < 144 OR ipk <= 2.00 OR jumlah_e > 0 OR sks_d > 14 OR min_wajib < 2.00 OR lulus_ta1 = 0 OR lulus_ta2 = 0)
+      // Evaluasi akhir masa studi: semester = 12 AND (sks_total < 144 OR ipk <= 2.00 OR jumlah_e > 0 OR sks_d > 14 OR min_wajib < 2.00 OR lulus_ta1 = 0 OR lulus_ta2 = 0)
       // Di SQL: lulus_ta1 = 0 akan TRUE jika lulus_ta1 adalah 0, FALSE jika NULL atau 1
       else if (
-        sem === 14 &&
+        sem === 12 &&
         sksTotal !== null && // Pastikan ada data nilai
         (
           sksTotal < 144 ||

app/api/tabeldetail/mk-belum-diambil/route.ts

@@ -0,0 +1,154 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+interface MataKuliahBelumDiambil {
+  nama_mk: string;
+  jenis_mk: string;
+  kode_mk: string;
+  sks: number;
+  semester: number;
+}
+
+interface MahasiswaMKBelumDiambil {
+  nim: string;
+  nama: string;
+  tahun_angkatan: number;
+  sks_total: number;
+  mk_belum_diambil: MataKuliahBelumDiambil[];
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+    const jenisMK = searchParams.get('jenis_mk');
+
+    // 1. Ambil data mahasiswa
+    let mahasiswaQuery = supabase
+      .from('mahasiswa')
+      .select('id_mahasiswa, nim, nama, tahun_angkatan')
+      .order('tahun_angkatan', { ascending: true })
+      .order('nim', { ascending: true });
+
+    // Jika ada filter tahun angkatan, terapkan filter
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      mahasiswaQuery = mahasiswaQuery.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    const { data: mahasiswa, error: errMhs } = await mahasiswaQuery;
+
+    if (errMhs) {
+      console.error('Error fetching mahasiswa:', errMhs);
+      throw errMhs;
+    }
+
+    // 2. Ambil semua mata kuliah
+    let mkQuery = supabase
+      .from('mata_kuliah')
+      .select('id_mk, kode_mk, nama_mk, jenis_mk, sks, semester')
+      .order('semester', { ascending: true })
+      .order('nama_mk', { ascending: true });
+
+    // Filter jenis MK jika ada
+    if (jenisMK && jenisMK !== 'all') {
+      mkQuery = mkQuery.eq('jenis_mk', jenisMK);
+    }
+
+    const { data: mataKuliah, error: errMK } = await mkQuery;
+
+    if (errMK) {
+      console.error('Error fetching mata kuliah:', errMK);
+      throw errMK;
+    }
+
+    // 3. Ambil semua nilai mahasiswa (hanya yang nilai != E, karena E dianggap belum lulus)
+    const { data: nilaiMahasiswa, error: errNilai } = await supabase
+      .from('nilai_mahasiswa')
+      .select('id_mahasiswa, id_mk, nilai_huruf');
+
+    if (errNilai) {
+      console.error('Error fetching nilai mahasiswa:', errNilai);
+      throw errNilai;
+    }
+
+    // 4. Buat Map untuk cek MK yang sudah diambil (nilai != E)
+    // Key: "id_mahasiswa-id_mk", Value: true
+    const sudahAmbilMap = new Map<string, boolean>();
+    nilaiMahasiswa?.forEach((nilai) => {
+      // Hanya dianggap sudah ambil jika nilai != E
+      if (nilai.nilai_huruf !== 'E') {
+        const key = `${nilai.id_mahasiswa}-${nilai.id_mk}`;
+        sudahAmbilMap.set(key, true);
+      }
+    });
+
+    // 5. Hitung SKS total per mahasiswa (dari MK yang sudah lulus, nilai != E)
+    const sksTotalMap = new Map<number, number>();
+    nilaiMahasiswa?.forEach((nilai) => {
+      if (nilai.nilai_huruf !== 'E') {
+        const mk = mataKuliah?.find(m => m.id_mk === nilai.id_mk);
+        if (mk) {
+          const currentSKS = sksTotalMap.get(nilai.id_mahasiswa) || 0;
+          sksTotalMap.set(nilai.id_mahasiswa, currentSKS + mk.sks);
+        }
+      }
+    });
+
+    // 6. Proses data mahasiswa dan MK belum diambil
+    const results: MahasiswaMKBelumDiambil[] = [];
+
+    mahasiswa?.forEach((mhs) => {
+      const mkBelumDiambil: MataKuliahBelumDiambil[] = [];
+
+      // CROSS JOIN: cek setiap MK untuk mahasiswa ini
+      mataKuliah?.forEach((mk) => {
+        const key = `${mhs.id_mahasiswa}-${mk.id_mk}`;
+        
+        // WHERE nm.id_mk IS NULL: jika tidak ada di sudahAmbilMap, berarti belum diambil
+        if (!sudahAmbilMap.has(key)) {
+          mkBelumDiambil.push({
+            nama_mk: mk.nama_mk,
+            jenis_mk: mk.jenis_mk,
+            kode_mk: mk.kode_mk,
+            sks: mk.sks,
+            semester: mk.semester
+          });
+        }
+      });
+
+      // Hanya tambahkan jika ada MK yang belum diambil
+      if (mkBelumDiambil.length > 0) {
+        results.push({
+          nim: mhs.nim,
+          nama: mhs.nama,
+          tahun_angkatan: mhs.tahun_angkatan,
+          sks_total: sksTotalMap.get(mhs.id_mahasiswa) || 0,
+          mk_belum_diambil: mkBelumDiambil
+        });
+      }
+    });
+
+    // 7. Urutkan berdasarkan tahun_angkatan dan nim
+    results.sort((a, b) => {
+      if (a.tahun_angkatan !== b.tahun_angkatan) {
+        return a.tahun_angkatan - b.tahun_angkatan;
+      }
+      return a.nim.localeCompare(b.nim);
+    });
+
+    return NextResponse.json(results, {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error in mk-belum-diambil API:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error', message: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

app/api/tabeldetail/terancam-do/route.ts

@@ -132,10 +132,10 @@ export async function GET(request: NextRequest) {
       const alasanList: string[] = [];
       let isDO = false;
 
-      // Evaluasi 4 semester: semester BETWEEN 4 AND 7 AND (sks_total < 40 OR ipk <= 2.50)
+      // Evaluasi 4 semester: semester BETWEEN 3 AND 6 AND (sks_total < 40 OR ipk <= 2.50)
       if (
-        sem >= 4 &&
-        sem <= 7 &&
+        sem >= 3 &&
+        sem <= 6 &&
         sksTotal !== null &&
         (
           sksTotal < 40 ||
@@ -144,16 +144,16 @@ export async function GET(request: NextRequest) {
       ) {
         isDO = true;
         if (sksTotal < 40) {
-          alasanList.push('SKS kurang dari 40 pada evaluasi semester 4');
+          alasanList.push('SKS kurang dari 40 pada evaluasi semester 3');
         }
         if (ipk !== null && ipk <= 2.50) {
-          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 4');
+          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 3');
         }
       }
-      // Evaluasi 8 semester: semester BETWEEN 8 AND 13 AND (sks_total < 80 OR ipk <= 2.50)
+      // Evaluasi 8 semester: semester BETWEEN 7 AND 11 AND (sks_total < 80 OR ipk <= 2.50)
       else if (
-        sem >= 8 &&
-        sem <= 13 &&
+        sem >= 7 &&
+        sem <= 11 &&
         sksTotal !== null &&
         (
           sksTotal < 80 ||
@@ -162,15 +162,15 @@ export async function GET(request: NextRequest) {
       ) {
         isDO = true;
         if (sksTotal < 80) {
-          alasanList.push('SKS kurang dari 80 pada evaluasi semester 8');
+          alasanList.push('SKS kurang dari 80 pada evaluasi semester 7');
         }
         if (ipk !== null && ipk <= 2.50) {
-          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 8');
+          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 7');
         }
       }
       // Evaluasi akhir masa studi: semester = 14
       else if (
-        sem === 14 &&
+        sem === 12 &&
         sksTotal !== null &&
         (
           sksTotal < 144 ||
@@ -184,25 +184,25 @@ export async function GET(request: NextRequest) {
       ) {
         isDO = true;
         if (sksTotal < 144) {
-          alasanList.push('Belum mencapai 144 SKS pada akhir masa studi');
+          alasanList.push('Belum mencapai 144 SKS pada evaluasi semester 12');
         }
         if (ipk !== null && ipk <= 2.00) {
-          alasanList.push('IPK di bawah 2.00 pada akhir masa studi');
+          alasanList.push('IPK di bawah 2.00 pada evaluasi semester 12');
         }
         if (jumlahE !== null && jumlahE > 0) {
-          alasanList.push('Memiliki nilai E pada akhir masa studi');
+          alasanList.push('Memiliki nilai E pada evaluasi semester 12');
         }
         if (sksD !== null && sksD > 14) {
-          alasanList.push('Total SKS dari nilai D lebih dari 14 SKS');
+          alasanList.push('Total SKS dari nilai D lebih dari 14 SKS pada evaluasi semester 12');
         }
         if (minWajib !== null && minWajib < 2.00) {
-          alasanList.push('Nilai minimal mata kuliah wajib di bawah C');
+          alasanList.push('Nilai minimal mata kuliah wajib di bawah C pada evaluasi semester 12');
         }
         if (lulusTA1 === 0) {
-          alasanList.push('Belum lulus Tugas Akhir 1 (INF-55201-406)');
+          alasanList.push('Belum lulus Tugas Akhir 1 (INF-55201-406) pada evaluasi semester 12');
         }
         if (lulusTA2 === 0) {
-          alasanList.push('Belum lulus Tugas Akhir 2 (INF-55201-407)');
+          alasanList.push('Belum lulus Tugas Akhir 2 (INF-55201-407) pada evaluasi semester 12');
         }
       }
 

app/dashboard/page.tsx

@@ -26,6 +26,7 @@ import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
 import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
 import DistribusiIPKChart from "@/components/chartsDashboard/DistribusiIPKChart";
 import DistribusiIPKChartPerangkatan from "@/components/chartsDashboard/DistribusiIPKChartPerangkatan";
+import MKBelumDiambilChart from "@/components/chartsDashboard/MKBelumDiambilChart";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import {
@@ -130,9 +131,11 @@ export default function TotalMahasiswaPage() {
     { id: 'academic', label: 'IPK & Jenis Pendaftaran' },
     { id: 'study-duration', label: 'Kelulusan Tepat Waktu & Masa Studi' },
     { id: 'expertise', label: 'Kelompok Keahlian' },
+    { id: 'dropout', label: 'Terancam Drop Out & Distribusi IPK' },
     { id: 'scholarship', label: 'Beasiswa & Prestasi' },
     { id: 'demographics', label: 'Asal Kabupaten & Provinsi' },
-    { id: 'bimbingan-dosen', label: 'Bimbingan Dosen' }
+    { id: 'bimbingan-dosen', label: 'Bimbingan Dosen' },
+    { id: 'mk-belum-diambil', label: 'Mata Kuliah Belum Diambil' }
   ];
 
   // Navigation menu items for per year data
@@ -218,6 +221,10 @@ export default function TotalMahasiswaPage() {
           <div id="study-duration" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
             <LulusTepatWaktuChart selectedYear={selectedYear} />
             <MasaStudiLulusChart selectedYear={selectedYear} />
+          </div>
+
+          {/* Dropout Section */}
+          <div id="dropout" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
             <TerancamDOChart selectedYear={selectedYear} />
             <DistribusiIPKChart selectedYear={selectedYear} />
           </div>
@@ -234,6 +241,11 @@ export default function TotalMahasiswaPage() {
             <TingkatPrestasiChart selectedYear={selectedYear} />
           </div>
 
+          {/* MK Belum Diambil Section */}
+          <div id="mk-belum-diambil" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
+            <MKBelumDiambilChart selectedYear={selectedYear} />
+          </div>
+
           {/* Demographics Section */}
           <div id="demographics" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
                 <div className="col-span-1">

app/detail/mk-belum-diambil/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from "react";
+import MKBelumDiambilChart from "@/components/chartsDashboard/MKBelumDiambilChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelMKBelumDiambil from "@/components/chartstable/tabelmkbelumdiambil";
+
+export default function MKBelumDiambilDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+  const [selectedJenisMK, setSelectedJenisMK] = 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 */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          <MKBelumDiambilChart 
+            selectedYear={selectedYear}
+            height="h-[400px] sm:h-[400px] lg:h-[400px]"
+            showDetailButton={false}
+          />
+        </div>
+
+        {/* Tabel Section */}
+        <TabelMKBelumDiambil 
+          selectedYear={selectedYear}
+          selectedJenisMK={selectedJenisMK}
+          onJenisMKChange={setSelectedJenisMK}
+        />
+
+        {/* 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-1 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik dan Tabel Mata Kuliah Belum Diambil
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan data mahasiswa yang masih memiliki mata kuliah yang belum diambil atau belum lulus</li>
+                <li>• Grafik stacked bar horizontal menunjukkan jumlah MK belum diambil per jenis MK per tahun angkatan</li>
+                <li>• Mata kuliah dikategorikan menjadi tiga jenis:</li>
+                <li className="ml-4">- <strong className="text-blue-600 dark:text-blue-400">Wajib</strong>: Mata kuliah yang wajib diambil oleh semua mahasiswa</li>
+                <li className="ml-4">- <strong className="text-green-600 dark:text-green-400">Pilihan Wajib</strong>: Mata kuliah pilihan yang wajib diambil minimal satu dari kelompoknya</li>
+                <li className="ml-4">- <strong className="text-amber-600 dark:text-amber-400">Pilihan</strong>: Mata kuliah pilihan bebas</li>
+                <li>• Mata kuliah dianggap <strong>belum diambil</strong> jika:</li>
+                <li className="ml-4">- Mahasiswa belum pernah mengambil MK tersebut, ATAU</li>
+                <li className="ml-4">- Mahasiswa mendapat nilai E (gagal/tidak lulus)</li>
+                <li>• Tabel detail menampilkan daftar mahasiswa dengan:</li>
+                <li className="ml-4">- Informasi dasar mahasiswa (NIM, nama, angkatan)</li>
+                <li className="ml-4">- Total SKS yang sudah lulus (nilai != E)</li>
+                <li className="ml-4">- Jumlah MK yang belum diambil</li>
+                <li className="ml-4">- Dropdown detail MK belum diambil (kode MK, nama MK, jenis MK, SKS, semester)</li>
+                <li>• Filter tersedia untuk tahun angkatan dan jenis MK untuk analisis lebih spesifik</li>
+                <li>• Data dapat digunakan untuk monitoring progres akademik dan identifikasi mahasiswa yang perlu bimbingan</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/detail/terancam-do/page.tsx

@@ -42,10 +42,10 @@ export default function TerancamDODetailPage() {
               <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
                 <li>• Menampilkan jumlah mahasiswa yang terancam drop out (DO) per tahun angkatan</li>
                 <li>• Evaluasi dilakukan berdasarkan pedoman akademik UNTAN tahun 2023/2024</li>
-                <li>• Kriteria evaluasi terdiri dari tiga tahap:</li>
-                <li className="ml-4">- Evaluasi 4 semester: SKS minimal 40 dan IPK &gt; 2.50</li>
-                <li className="ml-4">- Evaluasi 8 semester: SKS minimal 80 dan IPK &gt; 2.50</li>
-                <li className="ml-4">- Evaluasi akhir masa studi: SKS minimal 144, IPK &gt; 2.00, tidak ada nilai E, nilai D maksimal 10%, nilai mata kuliah wajib minimal C, dan lulus tugas akhir</li>
+                <li>• Kriteria evaluasi terdiri dari tiga tahap (evaluasi dilakukan sebelum semester target):</li>
+                <li className="ml-4">- <strong>Evaluasi semester 3</strong>: SKS minimal 40 dan IPK &gt; 2.50 (sebelum masuk semester 4)</li>
+                <li className="ml-4">- <strong>Evaluasi semester 7</strong>: SKS minimal 80 dan IPK &gt; 2.50 (sebelum masuk semester 8)</li>
+                <li className="ml-4">- <strong>Evaluasi semester 12</strong>: SKS minimal 144, IPK &gt; 2.00, tidak ada nilai E, nilai D maksimal 10%, nilai mata kuliah wajib minimal C, dan lulus tugas akhir (sebelum semester 14)</li>
                 <li>• Grafik batang vertikal yang menunjukkan jumlah mahasiswa terancam DO per tahun angkatan</li>
                 <li>• Data dapat di-download dan dianalisis untuk monitoring akademik</li>
               </ul>

components/charts/BimbinganDosenChart.tsx

@@ -375,7 +375,7 @@ export default function BimbinganDosenChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Bimbingan Dosen
+            Jumlah Bimbingan Dosen Berdasarkan Nama Dosen dan Status Bimbingan
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/bimbingan-dosen" target="_blank">

components/charts/BimbinganDosenPerAngkatanChart.tsx

@@ -408,7 +408,7 @@ export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props)
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Bimbingan Dosen Angkatan {tahunAngkatan}
+          Jumlah Bimbingan Dosen Berdasarkan Nama Dosen dan Status Bimbingan Angkatan {tahunAngkatan}
         </CardTitle>
       </CardHeader>
       <CardContent>

components/charts/IPKChart.tsx

@@ -332,7 +332,7 @@ export default function IPKChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Rata-rata IPK Mahasiswa
+            Rata-rata IPK Mahasiswa Berdasarkan Tahun Angkatan
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/rata-rata-ipk" target="_blank">

components/charts/JenisPendaftaranChart.tsx

@@ -437,7 +437,7 @@ export default function JenisPendaftaranChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Jenis Pendaftaran Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Jenis Pendaftaran dan Tahun Angkatan
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/jenis-pendaftaran" target="_blank">

components/charts/JenisPendaftaranPerAngkatanChart.tsx

@@ -227,7 +227,7 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Jenis Pendaftaran Angkatan {tahunAngkatan}
+          Persentase Jumlah Mahasiswa Berdasarkan Jenis Pendaftaran Angkatan {tahunAngkatan}
         </CardTitle>
       </CardHeader>
       <CardContent>

components/charts/LulusTepatWaktuChart.tsx

@@ -254,7 +254,7 @@ export default function LulusTepatWaktuChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Mahasiswa Lulus Tepat Waktu
+            Jumlah Mahasiswa Lulus Tepat Waktu Berdasarkan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/charts/LulusTepatWaktuPieChart.tsx

@@ -158,7 +158,7 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Mahasiswa Lulus Tepat Waktu
+          Jumlah Mahasiswa Lulus Tepat Waktu
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
         <div className="text-lg font-semibold text-gray-600 dark:text-gray-300">

components/charts/StatistikMahasiswaChart.tsx

@@ -441,7 +441,7 @@ export default function StatistikMahasiswaChart({
         <CardHeader>
           <div className="flex justify-between items-center">
             <CardTitle className="text-xl font-bold dark:text-white">
-              Jumlah Mahasiswa
+              Persentase Jumlah Mahasiswa Berdasarkan Gender dan Tahun Angkatan
             </CardTitle>
             {showDetailButton && (
               <Link href="/detail/jumlah-mahasiswa" target="_blank">

components/charts/StatistikPerAngkatanChart.tsx

@@ -216,7 +216,7 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Jumlah Mahasiswa Angkatan {tahunAngkatan}
+          Persentase Jumlah Mahasiswa Berdasarkan Gender dan Tahun Angkatan {tahunAngkatan}
         </CardTitle>
       </CardHeader>
       <CardContent>

components/charts/StatusMahasiswaChart.tsx

@@ -290,7 +290,7 @@ export default function StatusMahasiswaChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Status Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Status Kuliah dan Tahun Angkatan
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/status-mahasiswa" target="_blank">

components/chartsDashboard/DistribusiIPKChart.tsx

@@ -285,7 +285,7 @@ export default function DistribusiIPKChart({
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
         <CardHeader>
           <CardTitle className="text-xl font-bold dark:text-white">
-            Memuat data distribusi IPK...
+            Loading...
           </CardTitle>
         </CardHeader>
       </Card>
@@ -327,7 +327,7 @@ export default function DistribusiIPKChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Distribusi IPK
+            Persentase Distribusi IPK Berdasarkan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartsDashboard/DistribusiIPKChartPerangkatan.tsx

@@ -199,7 +199,7 @@ export default function DistribusiIPKChartPerangkatan({ selectedYear }: Props) {
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Distribusi IPK
+          Persentase Distribusi IPK
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
       </CardHeader>

components/chartsDashboard/MKBelumDiambilChart.tsx

@@ -0,0 +1,491 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+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 });
+
+interface MKBelumDiambilData {
+  tahun_angkatan: number;
+  jenis_mk: string;
+  jumlah_belum_diambil: number;
+  total_mata_kuliah: number;
+  total_mahasiswa: number;
+}
+
+interface MKBelumDiambilChartProps {
+  selectedYear?: string;
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function MKBelumDiambilChart({ 
+  selectedYear = 'all',
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: MKBelumDiambilChartProps) {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<MKBelumDiambilData[]>([]);
+  const [series, setSeries] = useState<ApexAxisChartSeries>([]);
+  const [options, setOptions] = useState<ApexOptions>({
+    chart: {
+      type: 'bar',
+      stacked: true,
+      toolbar: {
+        show: true,
+      },
+      background: theme === 'dark' ? '#0F172B' : '#fff',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: '70%',
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: number, opts: any) {
+        const dataPointIndex = opts.dataPointIndex;
+        
+        // Hitung total untuk tahun angkatan ini
+        const allSeries = opts.w.config.series;
+        let totalForYear = 0;
+        allSeries.forEach((series: any) => {
+          totalForYear += series.data[dataPointIndex] || 0;
+        });
+        
+        if (totalForYear === 0 || val === 0) return '';
+        
+        const percentage = ((val / totalForYear) * 100).toFixed(0);
+        return percentage + '%';
+      },
+      style: {
+        fontSize: '12px',
+        colors: [theme === 'dark' ? '#fff' : '#000']
+      }
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories: [],
+      title: {
+        text: 'Jumlah Mata Kuliah Belum Diambil',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '12px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      min: 0,
+      tickAmount: 5
+    },
+    yaxis: {
+      title: {
+        text: 'Tahun Angkatan',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '12px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      }
+    },
+    fill: {
+      opacity: 1,
+    },
+    legend: {
+      position: 'top',
+      fontSize: '14px',
+      markers: {
+        size: 12,
+      },
+      itemMargin: {
+        horizontal: 10,
+      },
+      labels: {
+        colors: theme === 'dark' ? '#fff' : '#000'
+      }
+    },
+    colors: ['#3B82F6', '#10B981', '#F59E0B'], // Wajib (blue), Pilihan Wajib (green), Pilihan (amber)
+    tooltip: {
+      theme: theme === 'dark' ? 'dark' : 'light',
+      shared: true,
+      intersect: false,
+      custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+        const tahun = w.globals.labels[dataPointIndex];
+        const isDark = theme === 'dark';
+        
+        // Hitung total untuk tahun ini
+        let total = 0;
+        series.forEach((seriesData: number[]) => {
+          total += seriesData[dataPointIndex] || 0;
+        });
+        
+        const jenisMKNames = w.config.series.map((s: any) => s.name);
+        const jenisMKColors = w.config.colors;
+        
+        let tooltipContent = `
+          <div style="
+            padding: 12px 16px; 
+            background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'}; 
+            backdrop-filter: blur(10px);
+            border: none; 
+            border-radius: 12px; 
+            box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            min-width: 200px;
+          ">
+            <div style="
+              font-size: 13px; 
+              font-weight: 600; 
+              color: ${isDark ? '#f1f5f9' : '#1f2937'}; 
+              margin-bottom: 8px;
+              text-align: center;
+            ">Angkatan ${tahun}</div>`;
+        
+        // Tambahkan setiap jenis MK
+        series.forEach((seriesData: number[], index: number) => {
+          const value = seriesData[dataPointIndex] || 0;
+          if (value > 0) {
+            const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
+            tooltipContent += `
+              <div style="display: flex; align-items: center; margin-bottom: 4px;">
+                <div style="width: 8px; height: 8px; background: ${jenisMKColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisMKNames[index]}</span>
+                <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value} (${percentage}%)</span>
+              </div>`;
+          }
+        });
+        
+        // Tambahkan total
+        tooltipContent += `
+            <div style="
+              border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'}; 
+              margin-top: 8px; 
+              padding-top: 8px;
+              display: flex; 
+              align-items: center;
+            ">
+              <div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
+              <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total MK Belum Diambil</span>
+              <span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
+            </div>
+          </div>
+        `;
+        
+        return tooltipContent;
+      }
+    }
+  });
+
+  // Update theme when it changes
+  useEffect(() => {
+    const currentTheme = theme;
+    setOptions(prev => ({
+      ...prev,
+      chart: {
+        ...prev.chart,
+        background: currentTheme === 'dark' ? '#0F172B' : '#fff',
+      },
+      dataLabels: {
+        ...prev.dataLabels,
+        formatter: function (val: number, opts: any) {
+          const dataPointIndex = opts.dataPointIndex;
+          
+          // Hitung total untuk tahun angkatan ini
+          const allSeries = opts.w.config.series;
+          let totalForYear = 0;
+          allSeries.forEach((series: any) => {
+            totalForYear += series.data[dataPointIndex] || 0;
+          });
+          
+          if (totalForYear === 0 || val === 0) return '';
+          
+          const percentage = ((val / totalForYear) * 100).toFixed(0);
+          return percentage + '%';
+        },
+        style: {
+          ...prev.dataLabels?.style,
+          colors: [currentTheme === 'dark' ? '#fff' : '#000']
+        }
+      },
+      xaxis: {
+        ...prev.xaxis,
+        title: {
+          ...prev.xaxis?.title,
+          style: {
+            ...prev.xaxis?.title?.style,
+            color: currentTheme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...prev.xaxis?.labels,
+          style: {
+            ...prev.xaxis?.labels?.style,
+            colors: currentTheme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      yaxis: {
+        ...prev.yaxis,
+        title: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
+            color: currentTheme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
+            colors: currentTheme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      legend: {
+        ...prev.legend,
+        labels: {
+          ...prev.legend?.labels,
+          colors: currentTheme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      tooltip: {
+        ...prev.tooltip,
+        theme: currentTheme === 'dark' ? 'dark' : 'light',
+        custom: function({ series, seriesIndex, dataPointIndex, w }: any) {
+          const tahun = w.globals.labels[dataPointIndex];
+          const isDark = currentTheme === 'dark';
+          
+          // Hitung total untuk tahun ini
+          let total = 0;
+          series.forEach((seriesData: number[]) => {
+            total += seriesData[dataPointIndex] || 0;
+          });
+          
+          const jenisMKNames = w.config.series.map((s: any) => s.name);
+          const jenisMKColors = w.config.colors;
+          
+          let tooltipContent = `
+            <div style="
+              padding: 12px 16px; 
+              background: ${isDark ? 'rgba(30, 41, 59, 0.95)' : 'rgba(255, 255, 255, 0.95)'}; 
+              backdrop-filter: blur(10px);
+              border: none; 
+              border-radius: 12px; 
+              box-shadow: 0 8px 32px ${isDark ? 'rgba(0, 0, 0, 0.3)' : 'rgba(0, 0, 0, 0.1)'};
+              font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+              min-width: 200px;
+            ">
+              <div style="
+                font-size: 13px; 
+                font-weight: 600; 
+                color: ${isDark ? '#f1f5f9' : '#1f2937'}; 
+                margin-bottom: 8px;
+                text-align: center;
+              ">Angkatan ${tahun}</div>`;
+          
+          // Tambahkan setiap jenis MK
+          series.forEach((seriesData: number[], index: number) => {
+            const value = seriesData[dataPointIndex] || 0;
+            if (value > 0) {
+              const percentage = total > 0 ? ((value / total) * 100).toFixed(1) : '0';
+              tooltipContent += `
+                <div style="display: flex; align-items: center; margin-bottom: 4px;">
+                  <div style="width: 8px; height: 8px; background: ${jenisMKColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+                  <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${jenisMKNames[index]}</span>
+                  <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'}; margin-left: auto;">${value} (${percentage}%)</span>
+                </div>`;
+            }
+          });
+          
+          // Tambahkan total
+          tooltipContent += `
+              <div style="
+                border-top: 1px solid ${isDark ? '#475569' : '#e5e7eb'}; 
+                margin-top: 8px; 
+                padding-top: 8px;
+                display: flex; 
+                align-items: center;
+              ">
+                <div style="width: 8px; height: 8px; background: #6366f1; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; font-weight: 600; color: ${isDark ? '#f1f5f9' : '#1f2937'};">Total MK Belum Diambil</span>
+                <span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
+              </div>
+            </div>
+          `;
+          
+          return tooltipContent;
+        }
+      }
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const url = selectedYear === 'all'
+          ? '/api/mahasiswa/mkbelumdiambil'
+          : `/api/mahasiswa/mkbelumdiambil?tahun_angkatan=${selectedYear}`;
+        
+        const response = await fetch(url);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        if (!Array.isArray(result)) {
+          throw new Error('Invalid data format received from server');
+        }
+        
+        setData(result);
+
+        // Ambil tahun angkatan unik dan urutkan
+        const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))].sort((a, b) => a - b);
+        
+        // Ambil jenis MK unik dan urutkan sesuai urutan: Wajib, Pilihan Wajib, Pilihan
+        const jenisMKOrder = ['Wajib', 'Pilihan Wajib', 'Pilihan'];
+        const jenisMK = [...new Set(result.map(item => item.jenis_mk))].sort((a, b) => {
+          return jenisMKOrder.indexOf(a) - jenisMKOrder.indexOf(b);
+        });
+        
+        // Buat series data
+        const seriesData = jenisMK.map(jenis => ({
+          name: jenis,
+          data: tahunAngkatan.map(tahun => {
+            const item = result.find(d => d.tahun_angkatan === tahun && d.jenis_mk === jenis);
+            return item ? item.jumlah_belum_diambil : 0;
+          }),
+        }));
+
+        setSeries(seriesData);
+        
+        setOptions(prev => ({
+          ...prev,
+          xaxis: {
+            ...prev.xaxis,
+            categories: tahunAngkatan,
+          },
+        }));
+      } catch (err) {
+        console.error('Error in fetchData:', err);
+        setError(err instanceof Error ? err.message : 'An error occurred while fetching data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [selectedYear]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Memuat data mata kuliah belum diambil...
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
+            Error: {error}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Mata Kuliah Belum Diambil
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Tidak ada data yang tersedia untuk periode ini.
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  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">
+            Mata Kuliah Belum Diambil Berdasarkan Jenis MK
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/mk-belum-diambil" 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={`${height} w-full max-w-5xl mx-auto`}>
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="100%"
+            width="100%"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

components/chartsDashboard/NamaBeasiswaDashChart.tsx

@@ -329,7 +329,7 @@ export default function NamaBeasiswaDashChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Nama Beasiswa Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Nama Beasiswa dan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan.tsx

@@ -199,7 +199,7 @@ export default function NamaBeasiswaDashPieChartPerangkatan({ selectedYear }: Pr
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Nama Beasiswa
+          Persentase Jumlah Mahasiswa Berdasarkan Nama Beasiswa
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
       </CardHeader>

components/chartsDashboard/ProvinsiMahasiswaPieChart.tsx

@@ -171,7 +171,7 @@ export default function ProvinsiMahasiswaPieChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Asal Provinsi Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Asal Provinsi
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/asal-provinsi" target="_blank">

components/chartsDashboard/StatusMahasiswaPieChartPerangkatan.tsx

@@ -175,7 +175,7 @@ export default function StatusMahasiswaPieChartPerangkatan({ selectedYear }: Pro
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Status Mahasiswa
+          Persentase Jumlah Mahasiswa Berdasarkan Status Kuliah
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
       </CardHeader>

components/chartsDashboard/TerancamDOChart.tsx

@@ -177,7 +177,7 @@ export default function TerancamDOChart({
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
         <CardHeader>
           <CardTitle className="text-xl font-bold dark:text-white">
-            Memuat data terancam DO...
+            Loading...
           </CardTitle>
         </CardHeader>
       </Card>
@@ -223,7 +223,7 @@ export default function TerancamDOChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Mahasiswa Terancam Drop Out
+            Jumlah Mahasiswa Terancam Drop Out Berdasarkan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartsDashboard/TingkatPrestasiDashChart.tsx

@@ -314,7 +314,7 @@ export default function TingkatPrestasiDashChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Tingkat Prestasi Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Tingkat Prestasi dan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartsDashboard/TingkatPrestasiPieChartDash.tsx

@@ -166,7 +166,7 @@ export default function TingkatPrestasiPieChart({ selectedYear }: Props) {
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Tingkat Prestasi
+          Persentase Jumlah Mahasiswa Berdasarkan Tingkat Prestasi
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
       </CardHeader>

components/chartsDashboard/kkdashboardchart.tsx

@@ -285,7 +285,7 @@ export default function KelompokKeahlianStatusChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Kelompok Keahlian Mahasiswa
+            Persentase Jumlah Mahasiswa Berdasarkan Kelompok Keahlian dan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartsDashboard/kkdashboardpiechartperangkatan.tsx

@@ -166,7 +166,7 @@ export default function KelompokKeahlianPieChartPerAngkatan({ selectedYear }: Pr
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Kelompok Keahlian
+          Persentase Jumlah Mahasiswa Berdasarkan Kelompok Keahlian
           {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </CardTitle>
       </CardHeader>

components/chartsDashboard/kkdashboardtepatpiechart.tsx

@@ -170,7 +170,7 @@ export default function KelompokKeahlianLulusTepatPieChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Kelompok Keahlian Lulusan Tepat Waktu
+            Persentase Jumlah Mahasiswa Lulus Tepat Waktu Berdasarkan Kelompok Keahlian
           </CardTitle>
           {showDetailButton && (
             <Link href="/detail/kelompok-keahlian-lulus-tepat" target="_blank">

components/chartsDashboard/masastudiluluschart.tsx

@@ -261,7 +261,7 @@ export default function MasaStudiLulusChart({
       <CardHeader>
         <div className="flex justify-between items-center">
           <CardTitle className="text-xl font-bold dark:text-white">
-            Rata-rata Masa Studi Mahasiswa Lulus
+            Rata-rata Masa Studi Mahasiswa Lulus Berdasarkan Tahun Angkatan
             {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
           </CardTitle>
           {showDetailButton && (

components/chartstable/tabelmkbelumdiambil.tsx

@@ -0,0 +1,494 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from "@/components/ui/table";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from "@/components/ui/select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { Loader2, BookOpen, ChevronDown } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+
+interface MataKuliahBelumDiambil {
+  nama_mk: string;
+  jenis_mk: string;
+  kode_mk: string;
+  sks: number;
+  semester: number;
+}
+
+interface MahasiswaMKBelumDiambil {
+  nim: string;
+  nama: string;
+  tahun_angkatan: number;
+  sks_total: number;
+  mk_belum_diambil: MataKuliahBelumDiambil[];
+}
+
+interface TabelMKBelumDiambilProps {
+  selectedYear: string;
+  selectedJenisMK: string;
+  onJenisMKChange: (jenis: string) => void;
+}
+
+export default function TabelMKBelumDiambil({ 
+  selectedYear, 
+  selectedJenisMK, 
+  onJenisMKChange 
+}: TabelMKBelumDiambilProps) {
+  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaMKBelumDiambil[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginatedData, setPaginatedData] = useState<MahasiswaMKBelumDiambil[]>([]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        let url = '/api/tabeldetail/mk-belum-diambil';
+        const params = new URLSearchParams();
+
+        if (selectedYear && selectedYear !== 'all') {
+          params.append('tahun_angkatan', selectedYear);
+        }
+        if (selectedJenisMK && selectedJenisMK !== 'all') {
+          params.append('jenis_mk', selectedJenisMK);
+        }
+
+        if (params.toString()) {
+          url += `?${params.toString()}`;
+        }
+          
+        const response = await fetch(url, {
+          cache: 'no-store',
+        });
+        
+        if (!response.ok) {
+          throw new Error('Failed to fetch mahasiswa MK belum diambil data');
+        }
+        
+        const data = await response.json();
+        setMahasiswaData(data);
+        setCurrentPage(1); // Reset ke halaman pertama saat filter berubah
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'Terjadi kesalahan');
+        console.error('Error fetching data:', err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [selectedYear, selectedJenisMK]);
+
+  // Update paginated data when data or pagination settings change
+  useEffect(() => {
+    paginateData();
+  }, [mahasiswaData, currentPage, pageSize]);
+
+  // Paginate data
+  const paginateData = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    setPaginatedData(mahasiswaData.slice(startIndex, endIndex));
+  };
+
+  // Get total number of pages
+  const getTotalPages = () => {
+    return Math.ceil(mahasiswaData.length / pageSize);
+  };
+
+  // Handle page change
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  // Handle page size change
+  const handlePageSizeChange = (size: string) => {
+    setPageSize(Number(size));
+    setCurrentPage(1);
+  };
+
+  // Get badge color based on jenis_mk
+  const getJenisMKBadgeColor = (jenis: string) => {
+    switch (jenis) {
+      case 'Wajib':
+        return 'bg-blue-500 hover:bg-blue-600';
+      case 'Pilihan Wajib':
+        return 'bg-green-500 hover:bg-green-600';
+      case 'Pilihan':
+        return 'bg-amber-500 hover:bg-amber-600';
+      default:
+        return 'bg-gray-500 hover:bg-gray-600';
+    }
+  };
+
+  // Calculate statistics
+  const stats = {
+    total: mahasiswaData.length,
+    total_mk_belum_diambil: mahasiswaData.reduce((sum, mhs) => sum + mhs.mk_belum_diambil.length, 0),
+    avg_mk_belum_diambil: mahasiswaData.length > 0 
+      ? (mahasiswaData.reduce((sum, mhs) => sum + mhs.mk_belum_diambil.length, 0) / mahasiswaData.length).toFixed(1)
+      : 0,
+  };
+
+  // Get jenis MK counts
+  const jenisMKCounts = mahasiswaData.reduce((acc, mhs) => {
+    mhs.mk_belum_diambil.forEach(mk => {
+      acc[mk.jenis_mk] = (acc[mk.jenis_mk] || 0) + 1;
+    });
+    return acc;
+  }, {} as Record<string, number>);
+
+  if (loading) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            <div className="flex items-center gap-2">
+              <Loader2 className="h-5 w-5 animate-spin" />
+              Memuat data...
+            </div>
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
+            Error: {error}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  return (
+    <Card className="bg-white dark:bg-slate-900 shadow-lg">
+      <CardHeader>
+        <CardTitle className="text-xl font-bold dark:text-white flex items-center gap-2">
+          <BookOpen className="h-5 w-5" />
+          Tabel Mahasiswa - Mata Kuliah Belum Diambil {selectedYear !== 'all' ? `Angkatan ${selectedYear}` : 'Semua Angkatan'}
+        </CardTitle>
+        {/* Tampilkan ringkasan statistik */}
+        <div className="grid grid-cols-2 md:grid-cols-3 gap-2 mt-2">
+          <div className="px-3 py-2 rounded-lg bg-blue-50 dark:bg-blue-900/20">
+            <div className="text-xs text-blue-600 dark:text-blue-400">Total Mahasiswa</div>
+            <div className="font-bold text-blue-800 dark:text-blue-300">{stats.total}</div>
+          </div>
+          <div className="px-3 py-2 rounded-lg bg-amber-50 dark:bg-amber-900/20">
+            <div className="text-xs text-amber-600 dark:text-amber-400">Total MK Belum Diambil</div>
+            <div className="font-bold text-amber-800 dark:text-amber-300">{stats.total_mk_belum_diambil}</div>
+          </div>
+        </div>
+        {/* Tampilkan badge jenis MK */}
+        {selectedJenisMK === 'all' && Object.keys(jenisMKCounts).length > 0 && (
+          <div className="flex flex-wrap gap-2 mt-2">
+            {Object.entries(jenisMKCounts)
+              .sort(([a], [b]) => {
+                const order = ['Wajib', 'Pilihan Wajib', 'Pilihan'];
+                return order.indexOf(a) - order.indexOf(b);
+              })
+              .map(([jenis, count]) => (
+                <Badge
+                  key={jenis}
+                  className={`${getJenisMKBadgeColor(jenis)} text-white`}
+                >
+                  {jenis}: {count} MK
+                </Badge>
+              ))}
+          </div>
+        )}
+      </CardHeader>
+      <CardContent>
+        {/* Show entries selector and filter */}
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 mb-4">
+          <div className="flex items-center gap-2 dark:text-white">
+            <span className="text-sm">Show</span>
+            <Select
+              value={pageSize.toString()}
+              onValueChange={handlePageSizeChange}
+            >
+              <SelectTrigger className="w-[80px]">
+                <SelectValue placeholder={pageSize.toString()} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="5">5</SelectItem>
+                <SelectItem value="10">10</SelectItem>
+                <SelectItem value="25">25</SelectItem>
+                <SelectItem value="50">50</SelectItem>
+                <SelectItem value="100">100</SelectItem>
+              </SelectContent>
+            </Select>
+            <span className="text-sm">entries</span>
+          </div>
+
+          {/* Filter Jenis MK */}
+          <div className="flex items-center gap-2 dark:text-white">
+            <span className="text-sm">Filter Jenis MK:</span>
+            <Select
+              value={selectedJenisMK}
+              onValueChange={onJenisMKChange}
+            >
+              <SelectTrigger className="w-[180px]">
+                <SelectValue placeholder="Semua Jenis MK" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="all">Semua Jenis MK</SelectItem>
+                <SelectItem value="Wajib">Wajib</SelectItem>
+                <SelectItem value="Pilihan Wajib">Pilihan Wajib</SelectItem>
+                <SelectItem value="Pilihan">Pilihan</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+        </div>
+
+        <div className="border rounded-md overflow-hidden">
+          <Table>
+            <TableHeader>
+              <TableRow className="bg-gray-50 dark:bg-slate-800">
+                <TableHead className="font-semibold text-center">No</TableHead>
+                <TableHead className="font-semibold">NIM</TableHead>
+                <TableHead className="font-semibold">Nama Mahasiswa</TableHead>
+                <TableHead className="font-semibold text-center">Tahun Angkatan</TableHead>
+                <TableHead className="font-semibold text-center">SKS Total</TableHead>
+                <TableHead className="font-semibold text-center">Jumlah MK Belum Diambil</TableHead>
+                <TableHead className="font-semibold">MK Belum Diambil</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={7} className="text-center py-8 text-muted-foreground">
+                    Tidak ada data yang tersedia
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((mahasiswa, index) => (
+                  <TableRow 
+                    key={`${mahasiswa.nim}-${mahasiswa.tahun_angkatan}`}
+                    className={index % 2 === 0 ? "bg-white dark:bg-slate-900" : "bg-gray-50/50 dark:bg-slate-800/50"}
+                  >
+                    <TableCell className="text-center font-medium dark:text-white">
+                      {(currentPage - 1) * pageSize + index + 1}
+                    </TableCell>
+                    <TableCell className="font-medium dark:text-white">
+                      {mahasiswa.nim}
+                    </TableCell>
+                    <TableCell className="dark:text-white">
+                      {mahasiswa.nama}
+                    </TableCell>
+                    <TableCell className="text-center dark:text-white">
+                      {mahasiswa.tahun_angkatan}
+                    </TableCell>
+                    <TableCell className="text-center dark:text-white">
+                      {mahasiswa.sks_total}
+                    </TableCell>
+                    <TableCell className="text-center dark:text-white">
+                      <Badge variant="outline" className="font-semibold">
+                        {mahasiswa.mk_belum_diambil.length} MK
+                      </Badge>
+                    </TableCell>
+                    <TableCell className="text-center dark:text-white">
+                      <DropdownMenu>
+                        <DropdownMenuTrigger asChild>
+                          <Button 
+                            variant="outline" 
+                            size="sm" 
+                            className="flex items-center gap-1"
+                          >
+                            Lihat Detail
+                            <ChevronDown className="h-4 w-4" />
+                          </Button>
+                        </DropdownMenuTrigger>
+                        <DropdownMenuContent 
+                          className="w-[400px] max-h-[400px] overflow-y-auto"
+                          align="end"
+                        >
+                          {mahasiswa.mk_belum_diambil.length === 0 ? (
+                            <DropdownMenuItem disabled>
+                              Tidak ada MK yang belum diambil
+                            </DropdownMenuItem>
+                          ) : (
+                            mahasiswa.mk_belum_diambil.map((mk, mkIndex) => (
+                              <DropdownMenuItem 
+                                key={`${mk.kode_mk}-${mkIndex}`}
+                                className="flex flex-col items-start py-3 cursor-default focus:bg-slate-100 dark:focus:bg-slate-800"
+                              >
+                                <div className="flex items-center justify-between w-full mb-1">
+                                  <span className="font-medium text-sm">{mk.nama_mk}</span>
+                                  <Badge 
+                                    className={`${getJenisMKBadgeColor(mk.jenis_mk)} text-white text-xs ml-2`}
+                                  >
+                                    {mk.jenis_mk}
+                                  </Badge>
+                                </div>
+                                <div className="flex items-center gap-2 text-xs text-muted-foreground">
+                                  <span className="font-mono">{mk.kode_mk}</span>
+                                  <span>•</span>
+                                  <span>{mk.sks} SKS</span>
+                                  <span>•</span>
+                                  <span>Semester {mk.semester}</span>
+                                </div>
+                              </DropdownMenuItem>
+                            ))
+                          )}
+                        </DropdownMenuContent>
+                      </DropdownMenu>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+
+        {/* Pagination info and controls */}
+        {!loading && !error && mahasiswaData.length > 0 && (
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4 mt-4">
+            <div className="text-sm text-muted-foreground">
+              Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.length} entries
+            </div>
+            <Pagination className="dark:text-white">
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationPrevious 
+                    onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
+                    className={currentPage === 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+                
+                {renderPaginationItems()}
+                
+                <PaginationItem>
+                  <PaginationNext 
+                    onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
+                    className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : "cursor-pointer"}
+                  />
+                </PaginationItem>
+              </PaginationContent>
+            </Pagination>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+
+  // Calculate the range of entries being displayed
+  function getDisplayRange() {
+    if (mahasiswaData.length === 0) return { start: 0, end: 0 };
+    
+    const start = (currentPage - 1) * pageSize + 1;
+    const end = Math.min(currentPage * pageSize, mahasiswaData.length);
+    
+    return { start, end };
+  }
+
+  // Generate pagination items
+  function renderPaginationItems() {
+    const totalPages = getTotalPages();
+    const items = [];
+    
+    // Always show first page
+    items.push(
+      <PaginationItem key="first">
+        <PaginationLink 
+          isActive={currentPage === 1} 
+          onClick={() => handlePageChange(1)}
+          className="cursor-pointer"
+        >
+          1
+        </PaginationLink>
+      </PaginationItem>
+    );
+    
+    // Show ellipsis if needed
+    if (currentPage > 3) {
+      items.push(
+        <PaginationItem key="ellipsis-start">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+    
+    // Show pages around current page
+    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
+      if (i === 1 || i === totalPages) continue;
+      items.push(
+        <PaginationItem key={i}>
+          <PaginationLink 
+            isActive={currentPage === i} 
+            onClick={() => handlePageChange(i)}
+            className="cursor-pointer"
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+    
+    // Show ellipsis if needed
+    if (currentPage < totalPages - 2) {
+      items.push(
+        <PaginationItem key="ellipsis-end">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+    
+    // Always show last page if there's more than one page
+    if (totalPages > 1) {
+      items.push(
+        <PaginationItem key="last">
+          <PaginationLink 
+            isActive={currentPage === totalPages} 
+            onClick={() => handlePageChange(totalPages)}
+            className="cursor-pointer"
+          >
+            {totalPages}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+    
+    return items;
+  }
+}
+

components/chartstable/tabelnamaterancamdo.tsx

@@ -188,7 +188,7 @@ export default function TabelNamaTerancamDO({ selectedYear }: TabelNamaTerancamD
       </CardHeader>
       <CardContent>
         {/* Show entries selector */}
-        <div className="flex items-center gap-2 mb-4">
+        <div className="flex items-center gap-2 mb-4 dark:text-white">
           <span className="text-sm">Show</span>
           <Select
             value={pageSize.toString()}
@@ -272,7 +272,7 @@ export default function TabelNamaTerancamDO({ selectedYear }: TabelNamaTerancamD
             <div className="text-sm text-muted-foreground">
               Showing {getDisplayRange().start} to {getDisplayRange().end} of {mahasiswaData.length} entries
             </div>
-            <Pagination>
+            <Pagination className="dark:text-white">
               <PaginationContent>
                 <PaginationItem>
                   <PaginationPrevious