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

Add Dashboard

Browse Source
This commit is contained in:
Randa Firman Putra
2025-08-21 23:32:23 +07:00
parent 8190bf216d
commit 91f3445c3c
6 changed files with 53 additions and 131 deletions
Download Patch File Download Diff File Expand all files Collapse all files

135
app/dashboard/page.tsx
View File

@@ -15,123 +15,38 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
export default function TotalMahasiswaPage() {
const [selectedYear, setSelectedYear] = useState<string>("all");
// helper wrapper biar semua chart full-height di dalam card
const Tile = ({ title, children, className = "" }: any) => (
<Card className={`bg-white dark:bg-slate-900 shadow-lg gap-0 dark:text-white ${className}`}>
{title && (
<CardHeader className="py-3">
<CardTitle className="text-sm">{title}</CardTitle>
</CardHeader>
)}
<CardContent className="p-4"> {/* atur tinggi tile di sini */}
<div className="h-full">{children}</div>
</CardContent>
</Card>
);
return (
<div className="container mx-auto p-4 space-y-6">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-2">
<div>
<h1 className="text-3xl font-bold">Mahasiswa</h1>
<p className="text-sm text-gray-600 dark:text-gray-300 mt-1 max-w-prose">
Informasi jumlah mahasiswa, jenis pendaftaran, status mahasiswa, rata-rata IPK, dan asal daerah dengan filter tahun angkatan.
</p>
</div>
{/* (opsional) tempat tombol aksi */}
{/* <div className="flex items-center gap-2">
<Button variant="outline" size="sm">Export</Button>
</div> */}
</div>
{/* Toolbar Filter (sticky) */}
<div className="sticky top-16 z-30">
<Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
<CardContent className="py-3">
<div className="flex flex-wrap items-center gap-3">
<FilterTahunAngkatan
selectedYear={selectedYear}
onYearChange={setSelectedYear}
/>
{/* tombol reset (opsional) */}
{/* <Button variant="outline" size="sm" onClick={() => setSelectedYear('all')}>Reset</Button> */}
<h1 className="text-2xl font-bold mb-2">Dashboard Mahasiswa</h1>
<div className="mb-2">
<p className="text-gray-600 dark:text-gray-300">
Visualisasi data akademik mahasiswa Informartika Universitas Tanjungpura
</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
selectedYear={selectedYear}
onYearChange={setSelectedYear}
/>
</div>
</div>
</CardContent>
</Card>
</div>
{selectedYear === "all" ? (
/* ===== LAYOUT ALL YEARS (12 kolom) ===== */
<div
className="
grid gap-4
grid-cols-1
md:grid-cols-6
lg:grid-cols-12
"
>
{/* Bar besar kiri */}
<div className="md:col-span-6 lg:col-span-7">
<Tile title="Statistik Mahasiswa">
<StatistikMahasiswaChart />
</Tile>
</div>
{/* Dua tile kecil kanan atas */}
<div className="md:col-span-6 lg:col-span-5">
<Tile title="Jenis Pendaftaran">
<JenisPendaftaranChart />
</Tile>
</div>
{/* Bar horizontal (wilayah) */}
<div className="md:col-span-6 lg:col-span-7">
<Tile title="Status Mahasiswa">
<StatusMahasiswaChart />
</Tile>
</div>
{/* Rata-rata IPK */}
<div className="md:col-span-6 lg:col-span-5">
<Tile title="Rata-rata IPK">
<IPKChart />
</Tile>
</div>
{/* Lebar penuh di bawah */}
<div className="lg:col-span-12">
<Tile title="Asal Daerah">
<AsalDaerahChart />
</Tile>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<StatistikMahasiswaChart />
<JenisPendaftaranChart />
<StatusMahasiswaChart />
<IPKChart />
<AsalDaerahChart />
</div>
) : (
/* ===== LAYOUT PER ANGKATAN (12 kolom) ===== */
<div
className="
grid gap-4
grid-cols-1
md:grid-cols-6
lg:grid-cols-12
"
>
<div className="md:col-span-6 lg:col-span-7">
<Tile title={`Statistik Angkatan ${selectedYear}`}>
<StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
</Tile>
</div>
<div className="md:col-span-6 lg:col-span-5">
<Tile title="Jenis Pendaftaran per Angkatan">
<JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
</Tile>
</div>
<div className="lg:col-span-12">
<Tile title="Asal Daerah per Angkatan">
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
</Tile>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
<JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
</div>
)}
</div>