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

Change chart

Browse Source
This commit is contained in:
Randa Firman Putra
2025-08-21 14:44:38 +07:00
parent f7a7359408
commit 07ce37c98c
3 changed files with 156 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

139
app/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,139 @@
'use client';
import { useState } from "react";
import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
import IPKChart from "@/components/charts/IPKChart";
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
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> */}
</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>
) : (
/* ===== 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>
)}
</div>
);
}

11
app/page.tsx
View File

@@ -198,7 +198,18 @@ export default function DashboardPage() {
</div>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<div className="col-span-1">
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Jenis Pendaftaran Mahasiswa
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
<StatistikMahasiswaChart />
</div>
</CardContent>
</Card>
</div>
<div className="col-span-1">
<JenisPendaftaranChart />

6
components/ui/Navbar.tsx
View File

@@ -110,6 +110,11 @@ const Navbar = () => {
{/* Visualisasi Dropdown - Only when logged in */}
{user && (
<>
<Link href="/dashboard" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
<BarChart className="h-4 w-4" />
Visualisasi Data
</Link>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
@@ -157,6 +162,7 @@ const Navbar = () => {
</DropdownMenuItem>
</DropdownMenuContent>
</DropdownMenu>
</>
)}
{/* Kelola Data Dropdown - Only for Admin */}