Add Dashboard

app/dashboard/page.tsx

@@ -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">
+      <h1 className="text-2xl font-bold mb-2">Dashboard Mahasiswa</h1>
-  <div>
+      
-    <h1 className="text-3xl font-bold">Mahasiswa</h1>
+      <div className="mb-2">
-    <p className="text-sm text-gray-600 dark:text-gray-300 mt-1 max-w-prose">
+        <p className="text-gray-600 dark:text-gray-300">
-      Informasi jumlah mahasiswa, jenis pendaftaran, status mahasiswa, rata-rata IPK, dan asal daerah dengan filter tahun angkatan.
+          Visualisasi data akademik mahasiswa Informartika Universitas Tanjungpura
-    </p>
+        </p>
-  </div>
+      </div>
-  {/* (opsional) tempat tombol aksi */}
+
-  {/* <div className="flex items-center gap-2">
+      <div className="mb-4">
-    <Button variant="outline" size="sm">Export</Button>
+        <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-  </div> */}
+          <FilterTahunAngkatan 
-</div>
+            selectedYear={selectedYear}
-
+            onYearChange={setSelectedYear}
-{/* Toolbar Filter (sticky) */}
+          />
-<div className="sticky top-16 z-30"> 
+        </div>
-  <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 grid-cols-1 md:grid-cols-2 gap-4">
-        <div
+          <StatistikMahasiswaChart />
-          className="
+          <JenisPendaftaranChart />
-            grid gap-4
+          <StatusMahasiswaChart />
-            grid-cols-1
+          <IPKChart />
-            md:grid-cols-6
+          <AsalDaerahChart />
-            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 grid-cols-1 md:grid-cols-2 gap-4">
-        <div
+          <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
-          className="
+          <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
-            grid gap-4
+          <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
-            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>

app/page.tsx

@@ -198,18 +198,7 @@ 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 />

components/charts/JenisPendaftaranChart.tsx

@@ -54,7 +54,7 @@ export default function JenisPendaftaranChart() {
     xaxis: {
       categories: [],
       title: {
-        text: 'Jumlah Mahasiswa',
+        text: 'Tahun Angkatan',
         style: {
           fontSize: '14px',
           fontWeight: 'bold',
@@ -70,7 +70,7 @@ export default function JenisPendaftaranChart() {
     },
     yaxis: {
       title: {
-        text: 'Tahun Angkatan',
+        text: 'Jumlah Mahasiswa',
         style: {
           fontSize: '14px',
           fontWeight: 'bold',

components/charts/StatistikMahasiswaChart.tsx

@@ -68,8 +68,8 @@ export default function StatistikMahasiswaChart() {
       },
     },
     stroke: {
-      show: false,
+      show: true,
-      width: [0, 0, 0],
+      width: 2,
       colors: ['transparent', 'transparent', 'transparent'],
       curve: 'straight' as const
     },
@@ -304,8 +304,15 @@ export default function StatistikMahasiswaChart() {
   }
 
   return (
-        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
-          <Chart
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Jumlah Mahasiswa
+          </CardTitle>
+        </CardHeader>
+        <CardContent>
+          <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
+            <Chart
             options={chartOptions}
             series={chartSeries}
             type="bar"
@@ -313,5 +320,7 @@ export default function StatistikMahasiswaChart() {
             width="100%"
           />
         </div>
-  );
+      </CardContent>
+      </Card>
+);
 } 

components/charts/StatusMahasiswaChart.tsx

@@ -28,13 +28,22 @@ export default function StatusMahasiswaChart() {
       stacked: false,
       toolbar: {
         show: true,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true
+        },
       },
       background: theme === 'dark' ? '#0F172B' : '#fff',
     },
     plotOptions: {
       bar: {
         horizontal: false,
-        columnWidth: '55%',
+        columnWidth: '65%',
       },
     },
     dataLabels: {

components/ui/Navbar.tsx

@@ -108,12 +108,12 @@ const Navbar = () => {
             Beranda
           </Link>
           
-          {/* Visualisasi Dropdown - Only when logged in */}
+          {/* Dashboard 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
+              Dashboard
             </Link>
             <DropdownMenu>
               <DropdownMenuTrigger asChild>