again n again

app/detail/asal-provinsi/page.tsx

@@ -1,8 +1,13 @@
 'use client';
 
+import { useState } from 'react';
 import ProvinsiMahasiswaPieChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelAsalProvinsiMahasiswa from "@/components/chartstable/tabelasalprovinsi mahasiswa";
 
 export default function AsalProvinsiDetailPage() {
+  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">
@@ -17,6 +22,17 @@ export default function AsalProvinsiDetailPage() {
           </div>
         </div>
 
+        {/* Filter Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-4">
+          <FilterTahunAngkatan 
+            selectedYear={selectedYear} 
+            onYearChange={setSelectedYear}
+          />
+        </div>
+
+        {/* Table Section */}
+        <TabelAsalProvinsiMahasiswa 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">