initial commit

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}