Bisa yuk

app/dashboard/page.tsx

@@ -32,11 +32,55 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { ChevronDown, Navigation, ArrowUp } from "lucide-react";
+import DashboardStats, { DashboardStatsSkeleton } from "@/components/dashboard/DashboardStats";
+
+interface MahasiswaTotal {
+  total_mahasiswa: number;
+  mahasiswa_aktif: number;
+  total_lulus: number;
+  pria_lulus: number;
+  wanita_lulus: number;
+  total_berprestasi: number;
+  prestasi_akademik: number;
+  prestasi_non_akademik: number;
+  total_mahasiswa_aktif_lulus: number;
+  total_mahasiswa_beasiswa: number;
+  total_mahasiswa_beasiswa_pemerintah: number;
+  total_mahasiswa_beasiswa_non_pemerintah: number;
+}
 
 export default function TotalMahasiswaPage() {
   const [selectedYear, setSelectedYear] = useState<string>("all");
   const [dropdownOpen, setDropdownOpen] = useState(false);
   const [showBackToTop, setShowBackToTop] = useState(false);
+  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaTotal | null>(null);
+  const [loading, setLoading] = useState(true);
+
+  // Fetch mahasiswa data based on selected year
+  useEffect(() => {
+    const fetchMahasiswaData = async () => {
+      setLoading(true);
+      try {
+        const url = selectedYear === "all" 
+          ? '/api/mahasiswa/total'
+          : `/api/mahasiswa/total?tahun_angkatan=${selectedYear}`;
+        
+        const response = await fetch(url);
+        if (!response.ok) {
+          throw new Error('Failed to fetch data');
+        }
+        const data = await response.json();
+        setMahasiswaData(data);
+      } catch (error) {
+        console.error('Error fetching mahasiswa data:', error);
+        setMahasiswaData(null);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchMahasiswaData();
+  }, [selectedYear]);
 
   // Handle scroll event to show/hide back to top button
   useEffect(() => {
@@ -107,6 +151,17 @@ export default function TotalMahasiswaPage() {
         </p>
       </div>
 
+      {/* Dashboard Stats Cards */}
+      {loading ? (
+        <DashboardStatsSkeleton />
+      ) : mahasiswaData ? (
+        <DashboardStats mahasiswaData={mahasiswaData} />
+      ) : (
+        <div className="mb-8 p-4 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg">
+          <p className="text-red-600 dark:text-red-400">Gagal memuat data statistik mahasiswa</p>
+        </div>
+      )}
+
       <div className="mb-4">
         <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
           <FilterTahunAngkatan