Fix Layout

app/page.tsx

@@ -199,40 +199,20 @@ export default function DashboardPage() {
               </CardContent>
             </Card>
               </div>
-
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
-          <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
+                <div className="col-span-1">
-          <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 />
+                </div>
+                <div className="col-span-1">
                   <JenisPendaftaranChart />
-            <StatusMahasiswaChart />
+                </div>
-            <IPKChart />
+                <div className="col-span-1">
                   <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>  
   );
 }

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>
+  );
+}

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,6 +42,7 @@ export default function StatusMahasiswaPage() {
 
         {selectedYear === "all" ? (
         <>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
             <StatusMahasiswaFilterChart 
               selectedYear={selectedYear}
               selectedStatus={selectedStatus}
@@ -55,9 +51,19 @@ export default function StatusMahasiswaPage() {
               selectedYear={selectedYear}
               selectedStatus={selectedStatus}
             />
+            <IpkStatusChart
+            selectedYear={selectedYear}
+            selectedStatus={selectedStatus}
+            />
+            <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}
             />
-
+            </div>
-        {selectedYear === "all" && (
+          </>
-          <IpkStatusChart
-            selectedYear={selectedYear}
-            selectedStatus={selectedStatus}
-          />
         )}
 
       </div>

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" ? (
-        <>
+          <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>
         )}
   
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
           <AsalDaerahLulusChart selectedYear={selectedYear} />
           {selectedYear === "all" && (
             <IPKLulusTepatChart selectedYear={selectedYear} />
           )}
+        </div>
 
       </div>
     );

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>
   );
 } 

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>
   );
 } 

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}

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>

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>

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>

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>

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}

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>

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>

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>

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}

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>

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}

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}
+          Jumlah Mahasiswa {selectedStatus}
-          {selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
         </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>

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>

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>
           )}