Change chart
This commit is contained in:
Randa Firman Putra
139
app/dashboard/page.tsx
Normal file
139
app/dashboard/page.tsx
Normal 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
11
app/page.tsx
@@ -198,8 +198,19 @@ export default function DashboardPage() {
|
|||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||||
<div className="col-span-1">
|
<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 />
|
<StatistikMahasiswaChart />
|
||||||
</div>
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
</div>
|
||||||
<div className="col-span-1">
|
<div className="col-span-1">
|
||||||
<JenisPendaftaranChart />
|
<JenisPendaftaranChart />
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -110,6 +110,11 @@ const Navbar = () => {
|
|||||||
|
|
||||||
{/* Visualisasi Dropdown - Only when logged in */}
|
{/* Visualisasi Dropdown - Only when logged in */}
|
||||||
{user && (
|
{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>
|
<DropdownMenu>
|
||||||
<DropdownMenuTrigger asChild>
|
<DropdownMenuTrigger asChild>
|
||||||
<Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
|
<Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
|
||||||
@@ -157,6 +162,7 @@ const Navbar = () => {
|
|||||||
</DropdownMenuItem>
|
</DropdownMenuItem>
|
||||||
</DropdownMenuContent>
|
</DropdownMenuContent>
|
||||||
</DropdownMenu>
|
</DropdownMenu>
|
||||||
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Kelola Data Dropdown - Only for Admin */}
|
{/* Kelola Data Dropdown - Only for Admin */}
|
||||||
|
|||||||
Reference in New Issue
Block a user