Change Alur Aplikasi

components/charts/JenisPendaftaranChart.tsx

@@ -280,13 +280,13 @@ export default function JenisPendaftaranChart() {
         </CardTitle>
       </CardHeader>
       <CardContent>
-        <div className="h-[400px] w-full">
+        <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           <Chart
             options={options}
             series={series}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>

components/charts/StatistikMahasiswaChart.tsx

@@ -317,7 +317,7 @@ export default function StatistikMahasiswaChart() {
             series={chartSeries}
             type="bar"
             height="100%"
-            width="90%"
+            width="100%"
           />
         </div>
       </CardContent>

components/charts/StatusMahasiswaChart.tsx

@@ -134,7 +134,7 @@ export default function StatusMahasiswaChart() {
 
         // Process data to create series
         const tahunAngkatan = [...new Set(result.map(item => item.tahun_angkatan))].sort();
-        const statuses = ['Aktif', 'Lulus', 'Cuti', 'DO'];
+        const statuses = ['Aktif', 'Lulus', 'Cuti', 'Non-Aktif'];
         
         const seriesData = statuses.map(status => ({
           name: status,
@@ -207,7 +207,7 @@ export default function StatusMahasiswaChart() {
               series={series}
               type="bar"
               height="100%"
-              width="90%"
+              width="100%"
             />
           )}
         </div>