tes lagi

app/detail/jenis-pendaftaran/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
 import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelJenisPendaftaranMahasiswa from "@/components/chartstable/tabeljenisPendaftaranmahasiswa";
 
 export default function JenisPendaftaranDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -36,6 +37,9 @@ export default function JenisPendaftaranDetailPage() {
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelJenisPendaftaranMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/kelompok-keahlian-lulus-tepat/page.tsx

@@ -1,11 +1,22 @@
 'use client';
 
+import { useState } from "react";
 import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkdashboardtepatpiechart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelKKLulusTepatMahasiswa from "@/components/chartstable/tabelkklulustepatmahasiswa";
 
 export default function KelompokKeahlianLulusTepatDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
       <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
         {/* Chart Section - Enhanced Size */}
         <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
           {/* Kelompok Keahlian Lulus Tepat Chart dengan ukuran lebih besar */}
@@ -17,6 +28,9 @@ export default function KelompokKeahlianLulusTepatDetailPage() {
           </div>
         </div>
 
+        {/* Tabel Section */}
+        <TabelKKLulusTepatMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/kelompok-keahlian/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import KelompokKeahlianStatusChart from "@/components/chartsDashboard/kkdashboardchart";
 import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelKelompokKeahlianMahasiswa from "@/components/chartstable/tabelkelompokkeahliamahasiswa";
 
 export default function KelompokKeahlianDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -37,6 +38,9 @@ export default function KelompokKeahlianDetailPage() {
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelKelompokKeahlianMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/lulus-tepat-waktu/page.tsx

@@ -1,23 +1,37 @@
 'use client';
 
+import { useState } from "react";
 import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelLulusTepatWaktuMahasiswa from "@/components/chartstable/tabellulustepatwaktumahasiswa";
 
 export default function LulusTepatWaktuDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
       <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
         {/* Chart Section - Enhanced Size */}
         <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
           {/* Lulus Tepat Waktu Chart dengan ukuran lebih besar */}
           <div className="lg:col-span-2">
             <LulusTepatWaktuChart 
-              selectedYear="all"
+              selectedYear={selectedYear}
               height="h-[400px] sm:h-[400px] lg:h-[400px]"
               showDetailButton={false}
             />
           </div>
         </div>
 
+        {/* Tabel Section */}
+        <TabelLulusTepatWaktuMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/masa-studi-lulus/page.tsx

@@ -1,23 +1,37 @@
 'use client';
 
+import { useState } from "react";
 import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelMasaStudiMahasiswa from "@/components/chartstable/tabelmasastudimahasiswa";
 
 export default function MasaStudiLulusDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
       <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
         {/* Chart Section - Enhanced Size */}
         <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
           {/* Masa Studi Lulus Chart dengan ukuran lebih besar */}
           <div className="lg:col-span-2">
             <MasaStudiLulusChart 
-              selectedYear="all"
+              selectedYear={selectedYear}
               height="h-[400px] sm:h-[400px] lg:h-[400px]"
               showDetailButton={false}
             />
           </div>
         </div>
 
+        {/* Tabel Section */}
+        <TabelMasaStudiMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/rata-rata-ipk/page.tsx

@@ -1,11 +1,22 @@
 'use client';
 
+import { useState } from "react";
 import IPKChart from "@/components/charts/IPKChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelIPKMahasiswa from "@/components/chartstable/tabelipkmahasiswa";
 
 export default function RataRataIPKDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
       <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
         {/* Chart Section - Enhanced Size */}
         <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
           {/* IPK Chart dengan ukuran lebih besar */}
@@ -17,6 +28,9 @@ export default function RataRataIPKDetailPage() {
           </div>
         </div>
 
+        {/* Tabel Section */}
+        <TabelIPKMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">

app/detail/status-mahasiswa/page.tsx

@@ -4,6 +4,7 @@ import { useState } from "react";
 import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
 import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan";
 import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelStatusMahasiswa from "@/components/chartstable/tabelstatusmahasiswa";
 
 export default function StatusMahasiswaDetailPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -38,6 +39,9 @@ export default function StatusMahasiswaDetailPage() {
           )}
         </div>
 
+        {/* Tabel Section */}
+        <TabelStatusMahasiswa selectedYear={selectedYear} />
+
         {/* Information Section */}
         <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
           <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">