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

25
components/dashboard/DashboardCharts.tsx Normal file
View File

@@ -0,0 +1,25 @@
'use client';
import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
import ProvinsiMahasiswaChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
export default function DashboardCharts() {
return (
<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>
);
}

117
components/dashboard/DashboardStats.tsx Normal file
View File

@@ -0,0 +1,117 @@
'use client';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";
// Skeleton loading component for stats cards
export const DashboardStatsSkeleton = () => (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
{[...Array(4)].map((_, i) => (
<Card key={i} 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>
))}
</div>
);
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;
}
interface DashboardStatsProps {
mahasiswaData: MahasiswaTotal;
}
export default function DashboardStats({ mahasiswaData }: DashboardStatsProps) {
return (
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-4">
{/* 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>
);
}