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

components/charts/AsalDaerahPerAngkatanChart.tsx

@@ -301,9 +301,9 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
 
   // Calculate dynamic height based on number of kabupaten
   const calculateHeight = () => {
-    const minHeight = 200;
-    const barHeight = 25; // Height per bar in pixels
-    const padding = 100; // Extra space for title, legend, etc.
+    const minHeight = 100;
+    const barHeight = 15; // Height per bar in pixels
+    const padding = 50; // Extra space for title, legend, etc.
     const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
     return `${dynamicHeight}px`;
   };
@@ -317,7 +317,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
       </CardHeader>
       <CardContent>
         <div 
-          className="w-full max-w-5xl mx-auto"
+          className="w-full max-w-xl mx-auto"
           style={{ height: calculateHeight() }}
         >
           <Chart

components/charts/IPKChart.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 IPKData {
   rata_rata_ipk: number;
 }
 
-export default function IPKChart() {
+interface IPKChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function IPKChart({ 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: IPKChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -47,7 +58,7 @@ export default function IPKChart() {
       }
     },
     stroke: {
-      curve: 'smooth',
+      curve: 'straight',
       width: 3,
       lineCap: 'round'
     },
@@ -319,12 +330,22 @@ export default function IPKChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Rata-rata IPK Mahasiswa
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Rata-rata IPK Mahasiswa
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/rata-rata-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="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={options}
             series={series}

components/charts/JenisPendaftaranChart.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";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -14,7 +17,15 @@ interface JenisPendaftaranData {
   jumlah: number;
 }
 
-export default function JenisPendaftaranChart() {
+interface JenisPendaftaranChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function JenisPendaftaranChart({ 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: JenisPendaftaranChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [loading, setLoading] = useState(true);
@@ -276,12 +287,22 @@ export default function JenisPendaftaranChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Jenis Pendaftaran Mahasiswa
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Jenis Pendaftaran Mahasiswa
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/jenis-pendaftaran" 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={options}
             series={series}

components/charts/LulusTepatWaktuChart.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 });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function LulusTepatWaktuChart({ selectedYear }: Props) {
+interface LulusTepatWaktuChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function LulusTepatWaktuChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: LulusTepatWaktuChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<LulusTepatWaktuData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -240,13 +252,23 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Mahasiswa Lulus Tepat Waktu
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Mahasiswa Lulus Tepat Waktu
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/lulus-tepat-waktu" 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-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/charts/StatusMahasiswaChart.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 });
@@ -15,7 +18,15 @@ interface StatusData {
   jumlah: number;
 }
 
-export default function StatusMahasiswaChart() {
+interface StatusMahasiswaChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function StatusMahasiswaChart({ 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: StatusMahasiswaChartProps) {
   const { theme } = useTheme();
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
@@ -206,12 +217,22 @@ export default function StatusMahasiswaChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Status Mahasiswa
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Status Mahasiswa
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/status-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-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}

components/chartsDashboard/NamaBeasiswaDashChart.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 });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function NamaBeasiswaDashChart({ selectedYear }: Props) {
+interface NamaBeasiswaDashChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function NamaBeasiswaDashChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: NamaBeasiswaDashChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<NamaBeasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -242,13 +254,23 @@ export default function NamaBeasiswaDashChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Nama Beasiswa Mahasiswa
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Nama Beasiswa Mahasiswa
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/nama-beasiswa" 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-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/chartsDashboard/ProvinsiMahasiswaPieChart.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 ProvinsiMahasiswaData {
   jumlah_mahasiswa: number;
 }
 
-export default function ProvinsiMahasiswaPieChart() {
+interface ProvinsiMahasiswaPieChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function ProvinsiMahasiswaPieChart({ 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: ProvinsiMahasiswaPieChartProps = {}) {
   const { theme } = useTheme();
   const [data, setData] = useState<ProvinsiMahasiswaData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -158,12 +169,22 @@ export default function ProvinsiMahasiswaPieChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Asal Provinsi Mahasiswa
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Asal Provinsi Mahasiswa
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/asal-provinsi" 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] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
               options={chartOptions}

components/chartsDashboard/TingkatPrestasiDashChart.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 });
@@ -19,7 +22,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function TingkatPrestasiDashChart({ selectedYear }: Props) {
+interface TingkatPrestasiDashChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function TingkatPrestasiDashChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: TingkatPrestasiDashChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<TingkatPrestasiData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -241,13 +253,23 @@ export default function TingkatPrestasiDashChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Tingkat Prestasi Mahasiswa
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Tingkat Prestasi Mahasiswa
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/tingkat-prestasi" 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-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && series.length > 0 ? (
             <Chart
               options={chartOptions}

components/chartsDashboard/kkdashboardchart.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";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -18,7 +21,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function KelompokKeahlianStatusChart({ selectedYear }: Props) {
+interface KelompokKeahlianStatusChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function KelompokKeahlianStatusChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[300px] md:h-[300px]",
+  showDetailButton = true 
+}: KelompokKeahlianStatusChartProps) {
   const { theme } = useTheme();
   const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -198,13 +210,23 @@ export default function KelompokKeahlianStatusChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Kelompok Keahlian Mahasiswa
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Kelompok Keahlian Mahasiswa
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/kelompok-keahlian" 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-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}

components/chartsDashboard/kkdashboardtepatpiechart.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 KelompokKeahlianLulusTepatData {
   jumlah_lulusan_tercepat: number;
 }
 
-export default function KelompokKeahlianLulusTepatPieChart() {
+interface KelompokKeahlianLulusTepatPieChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function KelompokKeahlianLulusTepatPieChart({ 
+  height = "h-[300px]",
+  showDetailButton = true 
+}: KelompokKeahlianLulusTepatPieChartProps = {}) {
   const { theme } = useTheme();
   const [data, setData] = useState<KelompokKeahlianLulusTepatData[]>([]);
   const [loading, setLoading] = useState(true);
@@ -157,12 +168,22 @@ export default function KelompokKeahlianLulusTepatPieChart() {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Kelompok Keahlian Lulusan Tepat Waktu
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Kelompok Keahlian Lulusan Tepat Waktu
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/kelompok-keahlian-lulus-tepat" 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] w-full max-w-5xl mx-auto">
+        <div className={`${height} w-full max-w-5xl mx-auto`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={{...chartOptions, labels}}

components/chartsDashboard/masastudiluluschart.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";
 
 const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
@@ -18,7 +21,16 @@ interface Props {
   selectedYear: string;
 }
 
-export default function MasaStudiLulusChart({ selectedYear }: Props) {
+interface MasaStudiLulusChartProps extends Props {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function MasaStudiLulusChart({ 
+  selectedYear, 
+  height = "h-[300px] sm:h-[350px] md:h-[300px]",
+  showDetailButton = true 
+}: MasaStudiLulusChartProps) {
   const { theme } = useTheme();
   const [mounted, setMounted] = useState(false);
   const [data, setData] = useState<MasaStudiAktifData[]>([]);
@@ -247,13 +259,23 @@ export default function MasaStudiLulusChart({ selectedYear }: Props) {
   return (
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
-        <CardTitle className="text-xl font-bold dark:text-white">
-          Rata-rata Masa Studi Mahasiswa Lulus
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
-        </CardTitle>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Rata-rata Masa Studi Mahasiswa Lulus
+            {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/masa-studi-lulus" 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`}>
           {typeof window !== 'undefined' && (
             <Chart
               options={chartOptions}