again n again

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