Fix Layout

2025-07-14 22:49:22 +07:00
parent f76440c4e2
commit 833b307602
21 changed files with 143 additions and 126 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -199,40 +199,20 @@ export default function DashboardPage() {
              </CardContent>
            </Card>
              </div>
-
-          <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <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>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <StatistikMahasiswaChart />
-            <JenisPendaftaranChart />
-            <StatusMahasiswaChart />
-            <IPKChart />
-            <AsalDaerahChart />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
-            <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
-            <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
-          </div>
-        )}
-        </>
-      )}
-      </div>
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+                <div className="col-span-1">
+                  <StatistikMahasiswaChart />
+                </div>
+                <div className="col-span-1">
+                  <JenisPendaftaranChart />
+                </div>
+                <div className="col-span-1">
+                  <AsalDaerahChart />
+                </div>
+              </div>
+          </>
+        )
+      }
+    </div>  
  );
 }
--- a/app/visualisasi/mahasiswa/page.tsx
+++ b/app/visualisasi/mahasiswa/page.tsx
@@ -0,0 +1,56 @@
+'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");
+
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <h1 className="text-3xl font-bold mb-4">Mahasiswa</h1>
+      
+      <div className="mb-4">
+        <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.
+        </p>
+      </div>
+
+      <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+          <CardContent>
+            <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>
+          </CardContent>
+        </Card>
+
+      {selectedYear === "all" ? (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <StatistikMahasiswaChart />
+          <JenisPendaftaranChart />
+          <StatusMahasiswaChart />
+          <IPKChart />
+          <AsalDaerahChart />
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
+          <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
+          <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
+        </div>
+      )}
+    </div>
+  );
+}
--- a/app/visualisasi/status/page.tsx
+++ b/app/visualisasi/status/page.tsx
@@ -17,20 +17,15 @@ export default function StatusMahasiswaPage() {
  
    return (
      <div className="container mx-auto p-4 space-y-6">
-        <h1 className="text-3xl font-bold mb-4">Status Mahasiswa</h1>
+        <h1 className="text-3xl font-bold mb-4">Status Kuliah</h1>
        
        <div className="mb-4">
          <p className="text-gray-600 dark:text-gray-300">
-            Mahasiswa status adalah status kuliah mahasiswa program studi Informatika Fakultas Teknik Universitas Tanjungpura.
+            Informasi jumlah mahasiswa, jenis pendaftaran, asal daerah, dan rata-rata IPK dengan filter tahun angkatan dan status kuliah.
          </p>
        </div>
  
        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
          <CardContent>
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
              <FilterTahunAngkatan 
@@ -47,17 +42,28 @@ export default function StatusMahasiswaPage() {

        {selectedYear === "all" ? (
        <>
-          <StatusMahasiswaFilterChart 
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <StatusMahasiswaFilterChart 
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+            <JenisPendaftaranStatusChart
+              selectedYear={selectedYear}
+              selectedStatus={selectedStatus}
+            />
+            <IpkStatusChart
            selectedYear={selectedYear}
            selectedStatus={selectedStatus}
-          />
-          <JenisPendaftaranStatusChart
+            />
+            <AsalDaerahStatusChart
            selectedYear={selectedYear}
            selectedStatus={selectedStatus}
-          />
+            />
+          </div>
        </>
        ) : (
          <>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <StatusMahasiswaFilterPieChart
              selectedYear={selectedYear}
              selectedStatus={selectedStatus}
@@ -66,19 +72,12 @@ export default function StatusMahasiswaPage() {
              selectedYear={selectedYear}
              selectedStatus={selectedStatus}
            />
-          </>
-        )}
-
-        <AsalDaerahStatusChart
-          selectedYear={selectedYear}
-          selectedStatus={selectedStatus}
-        />
-
-        {selectedYear === "all" && (
-          <IpkStatusChart
+            <AsalDaerahStatusChart
            selectedYear={selectedYear}
            selectedStatus={selectedStatus}
-          />
+            />
+            </div>
+          </>
        )}

      </div>
--- a/app/visualisasi/tipekelulusan/page.tsx
+++ b/app/visualisasi/tipekelulusan/page.tsx
@@ -24,11 +24,6 @@ export default function LulusTepatWaktuPage() {
        </div>
  
        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
          <CardContent>
            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
              <FilterTahunAngkatan 
@@ -40,21 +35,23 @@ export default function LulusTepatWaktuPage() {
        </Card>

        {selectedYear === "all" ? (
-        <>
-          <LulusTepatWaktuChart selectedYear={selectedYear} />
-          <JenisPendaftaranLulusChart selectedYear={selectedYear} />
-        </>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+            <LulusTepatWaktuChart selectedYear={selectedYear} />
+            <JenisPendaftaranLulusChart selectedYear={selectedYear} />
+          </div>
        ) : (
-          <>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
            <LulusTepatWaktuPieChart selectedYear={selectedYear} />
            <JenisPendaftaranLulusPieChart selectedYear={selectedYear} />
-          </>
+          </div>
        )}
  
-        <AsalDaerahLulusChart selectedYear={selectedYear} />
-        {selectedYear === "all" && (
-        <IPKLulusTepatChart selectedYear={selectedYear} />
-        )}
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <AsalDaerahLulusChart selectedYear={selectedYear} />
+          {selectedYear === "all" && (
+            <IPKLulusTepatChart selectedYear={selectedYear} />
+          )}
+        </div>

      </div>
    );
--- a/components/FilterStatusKuliah.tsx
+++ b/components/FilterStatusKuliah.tsx
@@ -17,7 +17,6 @@ export default function FilterStatusKuliah({ selectedStatus, onStatusChange }: P
  ];

  return (
-    <div className="w-64">
      <Select
        value={selectedStatus}
        onValueChange={onStatusChange}
@@ -33,6 +32,5 @@ export default function FilterStatusKuliah({ selectedStatus, onStatusChange }: P
          ))}
        </SelectContent>
      </Select>
-    </div>
  );
 } 
--- a/components/FilterTahunAngkatan.tsx
+++ b/components/FilterTahunAngkatan.tsx
@@ -30,7 +30,6 @@ export default function FilterTahunAngkatan({ selectedYear, onYearChange, showAl
  }, []);

  return (
-    <div className="w-64">
      <Select value={selectedYear} onValueChange={onYearChange}>
        <SelectTrigger className="focus:outline-none focus:ring-0 focus:ring-offset-0">
          <SelectValue placeholder="Pilih Tahun Angkatan" />
@@ -49,6 +48,5 @@ export default function FilterTahunAngkatan({ selectedYear, onYearChange, showAl
          ))}
        </SelectContent>
      </Select>
-    </div>
  );
 } 
--- a/components/charts/AsalDaerahChart.tsx
+++ b/components/charts/AsalDaerahChart.tsx
@@ -262,7 +262,7 @@ export default function AsalDaerahChart() {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[600px] w-full">
+        <div className="h-[300px] w-full">
          <Chart
            options={options}
            series={series}
--- a/components/charts/AsalDaerahPerAngkatanChart.tsx
+++ b/components/charts/AsalDaerahPerAngkatanChart.tsx
@@ -308,13 +308,13 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[600px] w-full">
+        <div className="h-[300px] w-full">
          <Chart
            options={options}
            series={series}
            type="bar"
            height="100%"
-            width="90%"
+            width="100%"
          />
        </div>
      </CardContent>
--- a/components/charts/AsalDaerahStatusChart.tsx
+++ b/components/charts/AsalDaerahStatusChart.tsx
@@ -119,7 +119,7 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
          fontSize: '12px',
          colors: theme === 'dark' ? '#fff' : '#000'
        }
-      }
+      },
    },
    yaxis: {
      title: {
@@ -224,14 +224,14 @@ export default function AsalDaerahStatusChart({ selectedYear, selectedStatus }:
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[500px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
              series={series}
              type="bar"
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/charts/IPKChart.tsx
+++ b/components/charts/IPKChart.tsx
@@ -324,13 +324,13 @@ export default function IPKChart() {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
          <Chart
            options={options}
            series={series}
            type="line"
            height="100%"
-            width="90%"
+            width="100%"
          />
        </div>
      </CardContent>
--- a/components/charts/IpkStatusChart.tsx
+++ b/components/charts/IpkStatusChart.tsx
@@ -278,14 +278,14 @@ export default function IpkStatusChart({ selectedYear, selectedStatus }: Props)
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
              series={series}
              type={selectedYear === 'all' ? 'line' : 'bar'}
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/charts/JenisPendaftaranChart.tsx
+++ b/components/charts/JenisPendaftaranChart.tsx
@@ -32,7 +32,7 @@ export default function JenisPendaftaranChart() {
    },
    plotOptions: {
      bar: {
-        horizontal: true,
+        horizontal: false,
        columnWidth: '55%',
      },
    },
@@ -66,7 +66,7 @@ export default function JenisPendaftaranChart() {
          fontSize: '12px',
          colors: theme === 'dark' ? '#fff' : '#000'
        }
-      }
+      },
    },
    yaxis: {
      title: {
@@ -82,7 +82,9 @@ export default function JenisPendaftaranChart() {
          fontSize: '12px',
          colors: theme === 'dark' ? '#fff' : '#000'
        }
-      }
+      },
+      min:0,
+      tickAmount: 5
    },
    fill: {
      opacity: 1,
@@ -280,7 +282,7 @@ export default function JenisPendaftaranChart() {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
          <Chart
            options={options}
            series={series}
--- a/components/charts/JenisPendaftaranPerAngkatanChart.tsx
+++ b/components/charts/JenisPendaftaranPerAngkatanChart.tsx
@@ -230,18 +230,15 @@ export default function JenisPendaftaranPerAngkatanChart({ tahunAngkatan }: Prop
        <CardTitle className="text-xl font-bold dark:text-white">
          Jenis Pendaftaran Angkatan {tahunAngkatan}
        </CardTitle>
-        <div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
-          Total Mahasiswa: {totalMahasiswa}
-        </div>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          <Chart
            options={options}
            series={series}
            type="pie"
            height="100%"
-            width="90%"
+            width="100%"
          />
        </div>
      </CardContent>
--- a/components/charts/JenisPendaftaranStatusChart.tsx
+++ b/components/charts/JenisPendaftaranStatusChart.tsx
@@ -137,7 +137,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
        }
      },
      min:0,
-      tickAmount: 5
+      tickAmount: 10
    },
    fill: {
      opacity: 1,
@@ -235,14 +235,14 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
              series={series}
              type="bar"
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/charts/JenisPendaftaranStatusPieChart.tsx
+++ b/components/charts/JenisPendaftaranStatusPieChart.tsx
@@ -171,19 +171,16 @@ export default function JenisPendaftaranStatusPieChart({ selectedYear, selectedS
          Jenis Pendaftaran Mahasiswa {selectedStatus}
          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
        </CardTitle>
-        <div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
-          Total Mahasiswa: {totalMahasiswa}
-        </div>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={{...chartOptions, labels}}
              series={series}
              type="pie"
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/charts/StatistikMahasiswaChart.tsx
+++ b/components/charts/StatistikMahasiswaChart.tsx
@@ -311,7 +311,7 @@ export default function StatistikMahasiswaChart() {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
          <Chart
            options={chartOptions}
            series={chartSeries}
--- a/components/charts/StatistikPerAngkatanChart.tsx
+++ b/components/charts/StatistikPerAngkatanChart.tsx
@@ -218,18 +218,15 @@ export default function StatistikPerAngkatanChart({ tahunAngkatan }: Props) {
        <CardTitle className="text-xl font-bold dark:text-white">
          Total Mahasiswa Angkatan {tahunAngkatan}
        </CardTitle>
-        <div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
-          Total Mahasiswa: {totalMahasiswa}
-        </div>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          <Chart
            options={chartOptions}
            series={chartSeries}
            type="pie"
            height="100%"
-            width="90%"
+            width="100%"
          />
        </div>
      </CardContent>
--- a/components/charts/StatusMahasiswaChart.tsx
+++ b/components/charts/StatusMahasiswaChart.tsx
@@ -84,6 +84,8 @@ export default function StatusMahasiswaChart() {
          colors: theme === 'dark' ? '#fff' : '#000'
        }
      },
+      min:0,
+      tickAmount: 5
    },
    fill: {
      opacity: 1,
@@ -200,7 +202,7 @@ export default function StatusMahasiswaChart() {
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
--- a/components/charts/StatusMahasiswaFilterChart.tsx
+++ b/components/charts/StatusMahasiswaFilterChart.tsx
@@ -130,7 +130,9 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
          fontSize: '12px',
          colors: theme === 'dark' ? '#fff' : '#000'
        }
-      }
+      },
+      min:0,
+      tickAmount: 5
    },
    fill: {
      opacity: 1,
@@ -231,19 +233,18 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
    <Card className="bg-white dark:bg-slate-900 shadow-lg">
      <CardHeader>
        <CardTitle className="text-xl font-bold dark:text-white">
-          Status Mahasiswa {selectedStatus}
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
+          Jumlah Mahasiswa {selectedStatus}
        </CardTitle>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
              series={series}
              type="bar"
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/charts/StatusMahasiswaFilterPieChart.tsx
+++ b/components/charts/StatusMahasiswaFilterPieChart.tsx
@@ -163,19 +163,16 @@ export default function StatusMahasiswaFilterPieChart({ selectedYear, selectedSt
          Status Mahasiswa {selectedStatus}
          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
        </CardTitle>
-        <div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
-          Total Mahasiswa: {totalMahasiswa}
-        </div>
      </CardHeader>
      <CardContent>
-        <div className="h-[350px] w-full max-w-5xl mx-auto">
+        <div className="h-[300px] w-full max-w-5xl mx-auto">
          {typeof window !== 'undefined' && (
            <Chart
              options={chartOptions}
              series={series}
              type="pie"
              height="100%"
-              width="90%"
+              width="100%"
            />
          )}
        </div>
--- a/components/ui/Navbar.tsx
+++ b/components/ui/Navbar.tsx
@@ -151,7 +151,7 @@ const Navbar = () => {
                  </Link>
                </DropdownMenuItem>
                <DropdownMenuItem asChild>
-                  <Link href="/visualisasi/prestasi" className="flex items-center gap-2 w-full">
+                  <Link href="/visualisasi/berprestasi" className="flex items-center gap-2 w-full">
                    <Award className="h-4 w-4" />
                    Prestasi
                  </Link>
@@ -287,7 +287,7 @@ const MobileNavContent = ({ user, onLogout }: MobileNavContentProps) => {
              <BookOpen className="h-4 w-4" />
              Beasiswa
            </Link>
-            <Link href="/visualisasi/prestasi" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
+            <Link href="/visualisasi/berprestasi" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
              <Award className="h-4 w-4" />
              Prestasi
            </Link>
@@ -309,10 +309,6 @@ const MobileNavContent = ({ user, onLogout }: MobileNavContentProps) => {
                <Award className="h-4 w-4" />
                Prestasi
              </Link>
-              <Link href="/keloladata/kelompokkeahlian" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
-                <Award className="h-4 w-4" />
-                Kelompok Keahlian
-              </Link>
            </div>
          )}