initial commit

components/charts/AsalDaerahChart.tsx

@@ -266,7 +266,7 @@ export default function AsalDaerahChart() {
     <Card className="bg-white dark:bg-slate-900 shadow-lg">
       <CardHeader>
         <CardTitle className="text-xl font-bold dark:text-white">
-          Asal Daerah Mahasiswa
+          Asal Kabupaten Mahasiswa
         </CardTitle>
       </CardHeader>
       <CardContent>

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}

components/ui/select.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { CheckIcon, ChevronDown, ChevronUpIcon } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
@@ -37,14 +37,14 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "border-input [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm font-medium whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
     >
       {children}
       <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+        <ChevronDown className="size-4" />
       </SelectPrimitive.Icon>
     </SelectPrimitive.Trigger>
   )
@@ -166,7 +166,7 @@ function SelectScrollDownButton({
       )}
       {...props}
     >
-      <ChevronDownIcon className="size-4" />
+      <ChevronDown className="size-4" />
     </SelectPrimitive.ScrollDownButton>
   )
 }