Change chart

2025-08-21 14:44:38 +07:00
parent f7a7359408
commit 07ce37c98c
3 changed files with 156 additions and 0 deletions
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -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>
+  );
+}