initial commit

components/charts/AsalDaerahChart.tsx

@@ -5,6 +5,9 @@ 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 });
@@ -14,7 +17,15 @@ interface AsalDaerahData {
   jumlah: number;
 }
 
-export default function AsalDaerahChart() {
+interface AsalDaerahChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function AsalDaerahChart({ 
+  height = "h-[400px] sm:h-[450px] md:h-[500px] lg:h-[600px]",
+  showDetailButton = true 
+}: AsalDaerahChartProps = {}) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -265,13 +276,23 @@ export default function AsalDaerahChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Asal Kabupaten Mahasiswa
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Asal Kabupaten Mahasiswa
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/asal-daerah" 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="w-full max-w-xl mx-auto"
+          className={`${height} w-full max-w-xl mx-auto`}
           style={{ height: calculateHeight() }}
         >
           <Chart