Fix Layout

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

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