initial commit

2025-09-10 02:38:32 +07:00
parent a5f2a1f069
commit 61a08dc212
25 changed files with 964 additions and 70 deletions
--- a/components/chartsDashboard/NamaBeasiswaDashChart.tsx
+++ b/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}
--- a/components/chartsDashboard/ProvinsiMahasiswaPieChart.tsx
+++ b/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}
--- a/components/chartsDashboard/TingkatPrestasiDashChart.tsx
+++ b/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}
--- a/components/chartsDashboard/kkdashboardchart.tsx
+++ b/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}
--- a/components/chartsDashboard/kkdashboardtepatpiechart.tsx
+++ b/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}}
--- a/components/chartsDashboard/masastudiluluschart.tsx
+++ b/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}