d1041211043_randa/portaldata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Bisa yuk

Browse Source
This commit is contained in:
Randa Firman Putra
2025-09-20 16:33:11 +07:00
parent 4bbef323a1
commit d1bd2d055b
5 changed files with 279 additions and 135 deletions
Download Patch File Download Diff File Expand all files Collapse all files

117
app/page.tsx
View File

@@ -1,13 +1,9 @@
'use client';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";
import { useEffect, useState } from "react";
import { useTheme } from "next-themes";
import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
import ProvinsiMahasiswaChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
import DashboardStats, { DashboardStatsSkeleton } from "@/components/dashboard/DashboardStats";
import DashboardCharts from "@/components/dashboard/DashboardCharts";
interface MahasiswaTotal {
total_mahasiswa: number;
@@ -24,22 +20,6 @@ interface MahasiswaTotal {
total_mahasiswa_beasiswa_non_pemerintah: number;
}
// Skeleton loading component
const CardSkeleton = () => (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div className="h-4 w-4 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
</CardHeader>
<CardContent>
<div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
<div className="flex justify-between">
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
<div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
</div>
</CardContent>
</Card>
);
export default function DashboardPage() {
const { theme } = useTheme();
@@ -108,12 +88,7 @@ export default function DashboardPage() {
<h1 className="text-2xl font-bold mb-4">Visualisasi Data Akademik Mahasiswa Informatika</h1>
{loading ? (
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
<CardSkeleton />
</div>
<DashboardStatsSkeleton />
) : error ? (
<div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
<div className="flex">
@@ -129,89 +104,9 @@ export default function DashboardPage() {
</div>
) : (
<>
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
{/* Kartu Total Mahasiswa */}
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium dark:text-white">
Total Mahasiswa
</CardTitle>
<Users className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa}</div>
<div className="flex justify-between mt-2 text-xs text-muted-foreground">
<span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.mahasiswa_aktif}</span></span>
</div>
</CardContent>
</Card>
{/* Kartu Total Kelulusan */}
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium dark:text-white">
Total Kelulusan
</CardTitle>
<GraduationCap className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_lulus}</div>
<div className="flex justify-between mt-2 text-xs text-muted-foreground">
<span className="dark:text-white">Laki-laki: <span className="text-blue-500">{mahasiswaData.pria_lulus}</span></span>
<span className="dark:text-white">Perempuan: <span className="text-pink-500">{mahasiswaData.wanita_lulus}</span></span>
</div>
</CardContent>
</Card>
{/* Kartu Total Prestasi */}
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium dark:text-white">
Mahasiswa Berprestasi
</CardTitle>
<Trophy className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_berprestasi}</div>
<div className="flex justify-between mt-2 text-xs text-muted-foreground">
<span className="dark:text-white">Akademik: <span className="text-yellow-500">{mahasiswaData.prestasi_akademik}</span></span>
<span className="dark:text-white">Non-Akademik: <span className="text-purple-500">{mahasiswaData.prestasi_non_akademik}</span></span>
</div>
</CardContent>
</Card>
{/* Kartu Mahasiswa Beasiswa */}
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium dark:text-white">
Mahasiswa Beasiswa
</CardTitle>
<BookOpen className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa_beasiswa}</div>
<div className="flex justify-between mt-2 text-xs text-muted-foreground">
<span className="dark:text-white">Pemerintah: <span className="text-green-500">{mahasiswaData.total_mahasiswa_beasiswa_pemerintah}</span></span>
<span className="dark:text-white">Non-Pemerintah: <span className="text-amber-400">{mahasiswaData.total_mahasiswa_beasiswa_non_pemerintah}</span></span>
</div>
</CardContent>
</Card>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="col-span-1">
<StatistikMahasiswaChart />
</div>
<div className="col-span-1">
<JenisPendaftaranChart />
</div>
<div className="col-span-1">
<AsalDaerahChart />
</div>
<div className="col-span-1">
<ProvinsiMahasiswaChart />
</div>
</div>
</>
<DashboardStats mahasiswaData={mahasiswaData} />
<DashboardCharts />
</>
)
}
</div>