Fix Layout

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

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,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>

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