again n again

components/chartsDashboard/DistribusiIPKChart.tsx

@@ -0,0 +1,359 @@
+'use client';
+
+import { useEffect, useState, useMemo } 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";
+
+// Dynamically import ApexCharts to avoid SSR issues
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+interface KategoriIPKData {
+  tahun_angkatan: number;
+  kategori_ipk: string;
+  jumlah: number;
+}
+
+interface DistribusiIPKChartProps {
+  selectedYear?: string;
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function DistribusiIPKChart({ 
+  selectedYear = 'all',
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: DistribusiIPKChartProps) {
+  const { theme } = useTheme();
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<KategoriIPKData[]>([]);
+  const [series, setSeries] = useState<ApexAxisChartSeries>([]);
+
+  // Get unique tahun angkatan and sort them
+  const tahunAngkatan = useMemo(() => {
+    return [...new Set(data.map(item => item.tahun_angkatan))].sort((a, b) => a - b);
+  }, [data]);
+
+  const chartOptions: ApexOptions = useMemo(() => ({
+    chart: {
+      type: 'bar',
+      stacked: true,
+      toolbar: {
+        show: true,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        },
+      },
+      background: theme === 'dark' ? '#0F172B' : '#fff',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        barHeight: '70%',
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: number, opts: any) {
+        const seriesIndex = opts.seriesIndex;
+        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 '0%';
+        
+        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: tahunAngkatan,
+      title: {
+        text: 'Jumlah Mahasiswa',
+        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: '11px',
+      markers: {
+        size: 8,
+      },
+      itemMargin: {
+        horizontal: 12,
+        vertical: 8,
+      },
+      labels: {
+        colors: theme === 'dark' ? '#fff' : '#000',
+      },
+      formatter: function(seriesName: string) {
+        return seriesName;
+      }
+    },
+    colors: ['#008FFB', '#00E396', '#FEB019', '#EF4444'], // Sangat Baik, Baik, Cukup, Kurang
+    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 kategoriLabels = [
+          '4.00 - 3.00 Sangat Baik',
+          '2.99 - 2.50 Baik',
+          '2.49 - 2.00 Cukup',
+          '< 2.00 Kurang'
+        ];
+        const kategoriColors = ['#008FFB', '#00E396', '#FEB019', '#EF4444'];
+        
+        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 kategori
+        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: ${kategoriColors[index]}; border-radius: 50%; margin-right: 8px;"></div>
+                <span style="font-size: 12px; color: ${isDark ? '#cbd5e1' : '#374151'};">${kategoriLabels[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</span>
+              <span style="font-size: 13px; font-weight: 700; color: #6366f1; margin-left: auto;">${total}</span>
+            </div>
+          </div>
+        `;
+        
+        return tooltipContent;
+      }
+    }
+  }), [theme, tahunAngkatan]);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const url = selectedYear === 'all'
+          ? '/api/mahasiswa/kategoriipk'
+          : `/api/mahasiswa/kategoriipk?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);
+
+        // Process data to create series
+        const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))].sort((a, b) => a - b);
+        const kategori = ['Sangat Baik', 'Baik', 'Cukup', 'Kurang'];
+        // Label lengkap dengan angka IPK untuk ditampilkan di legend
+        const kategoriLabels = [
+          '4.00 - 3.00 Sangat Baik',
+          '2.99 - 2.50 Baik',
+          '2.49 - 2.00 Cukup',
+          '< 2.00 Kurang'
+        ];
+        
+        // Buat series data dengan label lengkap (angka IPK + kategori)
+        const seriesData = kategori.map((kat, index) => ({
+          name: kategoriLabels[index], // Label ini akan ditampilkan di legend
+          data: tahunAngkatan.map(tahun => {
+            const item = result.find(d => d.tahun_angkatan === tahun && d.kategori_ipk === kat);
+            return item ? item.jumlah : 0;
+          }),
+        }));
+
+        setSeries(seriesData);
+      } 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 (loading) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Memuat data distribusi IPK...
+          </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">
+            Distribusi IPK
+            {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">
+            Distribusi IPK
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/kategori-ipk" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
+          {typeof window !== 'undefined' && (
+            <Chart
+              options={chartOptions}
+              series={series}
+              type="bar"
+              height="100%"
+              width="100%"
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

components/chartsDashboard/DistribusiIPKChartPerangkatan.tsx

@@ -0,0 +1,222 @@
+'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";
+
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+interface KategoriIPKPerAngkatanData {
+  kategori_ipk: string;
+  jumlah: number;
+}
+
+interface Props {
+  selectedYear: string;
+}
+
+export default function DistribusiIPKChartPerangkatan({ selectedYear }: Props) {
+  const { theme } = useTheme();
+  const [data, setData] = useState<KategoriIPKPerAngkatanData[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  // Label lengkap dengan angka IPK untuk ditampilkan di legend
+  const kategoriLabelsMap: { [key: string]: string } = {
+    'Sangat Baik': '4.00 - 3.00 Sangat Baik',
+    'Baik': '2.99 - 2.50 Baik',
+    'Cukup': '2.49 - 2.00 Cukup',
+    'Kurang': '< 2.00 Kurang'
+  };
+
+  // Urutan kategori untuk sorting
+  const kategoriOrder = ['Sangat Baik', 'Baik', 'Cukup', 'Kurang'];
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        const response = await fetch(
+          `/api/mahasiswa/kategoriipk?tahun_angkatan=${selectedYear}`
+        );
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        const result = await response.json();
+        
+        // Filter data for selected year and group by kategori_ipk
+        const yearData = result.filter((item: any) => 
+          item.tahun_angkatan.toString() === selectedYear
+        );
+        
+        // Group by kategori_ipk and sum jumlah
+        const groupedData = yearData.reduce((acc: { [key: string]: number }, item: any) => {
+          const kategori = item.kategori_ipk || 'Tidak Diketahui';
+          acc[kategori] = (acc[kategori] || 0) + item.jumlah;
+          return acc;
+        }, {});
+
+        // Convert to array format
+        const chartData = Object.entries(groupedData).map(([kategori_ipk, jumlah]) => ({
+          kategori_ipk,
+          jumlah: jumlah as number
+        }));
+
+        // Sort by kategori order
+        const sortedData = chartData.sort((a, b) => {
+          const indexA = kategoriOrder.indexOf(a.kategori_ipk);
+          const indexB = kategoriOrder.indexOf(b.kategori_ipk);
+          return indexA - indexB;
+        });
+
+        setData(sortedData);
+      } catch (err) {
+        setError(err instanceof Error ? err.message : 'An error occurred');
+      } finally {
+        setLoading(false);
+      }
+    };
+    fetchData();
+  }, [selectedYear]);
+
+  // Prepare data for pie chart
+  const series = data.map(item => item.jumlah);
+  const labels = data.map(item => kategoriLabelsMap[item.kategori_ipk] || item.kategori_ipk);
+
+  const chartOptions: ApexOptions = {
+    chart: {
+      type: 'pie',
+      toolbar: {
+        show: true,
+      },
+      background: theme === 'dark' ? '#0F172B' : '#fff',
+    },
+    labels: labels,
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: number) {
+        return `${val.toFixed(0)}%`;
+      },
+      style: {
+        fontSize: '14px',
+        fontFamily: 'Inter, sans-serif',
+        fontWeight: '500'
+      }
+    },
+    legend: {
+      position: 'bottom',
+      fontSize: '11px',
+      markers: {
+        size: 8,
+      },
+      itemMargin: {
+        horizontal: 10,
+        vertical: 5,
+      },
+      labels: {
+        colors: theme === 'dark' ? '#fff' : '#000'
+      },
+      formatter: function(seriesName: string) {
+        return seriesName;
+      }
+    },
+    colors: [
+      '#008FFB', // Sangat Baik - Blue
+      '#00E396', // Baik - Green
+      '#FEB019', // Cukup - Orange
+      '#EF4444', // Kurang - Red
+    ],
+    tooltip: {
+      theme: theme === 'dark' ? 'dark' : 'light',
+      y: {
+        formatter: function (val: number) {
+          return val + ' mahasiswa';
+        }
+      }
+    },
+    plotOptions: {
+      pie: {
+        donut: {
+          size: '0%',
+        },
+        offsetY: 0,
+      },
+    },
+    states: {
+      hover: {
+        filter: {
+          type: 'darken',
+        },
+      },
+    },
+  };
+
+  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 distribusi IPK...
+          </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">
+            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">
+            Distribusi IPK
+            {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>
+        <CardTitle className="text-xl font-bold dark:text-white">
+          Distribusi IPK
+          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+          {typeof window !== 'undefined' && (
+            <Chart
+              options={chartOptions}
+              series={series}
+              type="pie"
+              height="100%"
+              width="100%"
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+

components/chartsDashboard/TerancamDOChart.tsx

@@ -0,0 +1,255 @@
+'use client';
+
+import { useEffect, useMemo, 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 TerancamDOResponse {
+  tahun_angkatan: number;
+  jumlah_mahasiswa_do: number;
+}
+
+interface TerancamDOChartProps {
+  selectedYear?: string;
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function TerancamDOChart({
+  selectedYear = 'all',
+  height = 'h-[300px] sm:h-[320px]',
+  showDetailButton = true,
+}: TerancamDOChartProps) {
+  const { theme } = useTheme();
+  const [data, setData] = useState<TerancamDOResponse[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+
+        const url =
+          selectedYear === 'all'
+            ? '/api/mahasiswa/terancamdo'
+            : `/api/mahasiswa/terancamdo?tahun_angkatan=${selectedYear}`;
+
+        const response = await fetch(url);
+
+        if (!response.ok) {
+          const errorText = await response.text();
+          throw new Error(
+            `Failed to fetch data: ${response.status} ${response.statusText} - ${errorText}`,
+          );
+        }
+
+        const result = await response.json();
+
+        if (!Array.isArray(result)) {
+          throw new Error('Invalid data format received from server');
+        }
+
+        const sorted = [...result].sort(
+          (a, b) => a.tahun_angkatan - b.tahun_angkatan,
+        );
+
+        setData(sorted);
+      } catch (err) {
+        console.error('Error fetching terancam DO data:', err);
+        setError(
+          err instanceof Error ? err.message : 'Terjadi kesalahan saat memuat data',
+        );
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [selectedYear]);
+
+  const categories = useMemo(
+    () => data.map((item) => item.tahun_angkatan),
+    [data],
+  );
+
+  const series = useMemo(
+    () => [
+      {
+        name: 'Mahasiswa Terancam DO',
+        data: data.map((item) => item.jumlah_mahasiswa_do),
+      },
+    ],
+    [data],
+  );
+
+  const chartOptions: ApexOptions = {
+    chart: {
+      type: 'bar',
+      toolbar: {
+        show: true,
+      },
+      background: 'transparent',
+    },
+    plotOptions: {
+      bar: {
+        horizontal: false,
+        columnWidth: '55%',
+        borderRadius: 2,
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: (val: number) => val.toString(),
+      style: {
+        colors: [theme === 'dark' ? '#f9fafb' : '#1f2937'],
+      },
+    },
+    stroke: {
+      show: true,
+      width: 2,
+      colors: ['transparent'],
+    },
+    xaxis: {
+      categories,
+      title: {
+        text: 'Tahun Angkatan',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#f9fafb' : '#1f2937',
+        },
+      },
+      labels: {
+        style: {
+          colors: theme === 'dark' ? '#e5e7eb' : '#4b5563',
+        },
+      },
+    },
+    yaxis: {
+      title: {
+        text: 'Jumlah Mahasiswa',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#f9fafb' : '#1f2937',
+        },
+      },
+      labels: {
+        style: {
+          colors: theme === 'dark' ? '#e5e7eb' : '#4b5563',
+        },
+      },
+      min: 0,
+      forceNiceScale: true,
+    },
+    legend: {
+      show: false,
+    },
+    grid: {
+      borderColor: theme === 'dark' ? '#374151' : '#e5e7eb',
+      strokeDashArray: 4,
+      padding: {
+        top: 20,
+        right: 20,
+        left: 10,
+      },
+    },
+    colors: ['#ef4444'],
+    tooltip: {
+      theme: theme === 'dark' ? 'dark' : 'light',
+      y: {
+        formatter: (val: number) => `${val} mahasiswa`,
+      },
+    },
+  };
+
+  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 terancam DO...
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg border border-red-500/40">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-red-500">
+            Gagal memuat data
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-red-600 dark:text-red-400 whitespace-pre-line">
+            {error}
+          </p>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  if (!data.length) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Mahasiswa Terancam DO
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <p className="text-sm text-muted-foreground">
+            Tidak ada mahasiswa yang teridentifikasi terancam DO pada 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">
+            Mahasiswa Terancam Drop Out
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/terancam-do" 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`}>
+          {typeof window !== 'undefined' && (
+            <Chart
+              options={chartOptions}
+              series={series}
+              type="bar"
+              height="100%"
+              width="100%"
+            />
+          )}
+        </div>
+      </CardContent>
+    </Card>
+  );
+}
+