initial commit

components/charts/StatistikMahasiswaChart.tsx

@@ -3,7 +3,10 @@
 import { useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
 import { useTheme } from "next-themes";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 
 // Import ApexCharts secara dinamis untuk menghindari error SSR
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
@@ -15,7 +18,15 @@ interface MahasiswaStatistik {
   wanita: number;
 }
 
-export default function StatistikMahasiswaChart() {
+interface StatistikMahasiswaChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function StatistikMahasiswaChart({ 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: StatistikMahasiswaChartProps) {
   const { theme } = useTheme();
   const [statistikData, setStatistikData] = useState<MahasiswaStatistik[]>([]);
   const [loading, setLoading] = useState(true);
@@ -306,12 +317,22 @@ export default function StatistikMahasiswaChart() {
   return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
         <CardHeader>
-          <CardTitle className="text-xl font-bold dark:text-white">
-            Jumlah Mahasiswa
-          </CardTitle>
+          <div className="flex justify-between items-center">
+            <CardTitle className="text-xl font-bold dark:text-white">
+              Jumlah Mahasiswa
+            </CardTitle>
+            {showDetailButton && (
+              <Link href="/detail/jumlah-mahasiswa" 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="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+          <div className={`${height} w-full max-w-5xl mx-auto`}>
             <Chart
             options={chartOptions}
             series={chartSeries}