initial commit

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}