Change total mahasiswa

app/api/mahasiswa/profile/route.ts

@@ -3,19 +3,42 @@ import supabase from '@/lib/db';
 import { cookies } from 'next/headers';
 import { jwtVerify } from 'jose';
 
+interface PrestasiMahasiswa {
+  nama_prestasi: string;
+  jenis_prestasi: string;
+  tingkat_prestasi: string;
+  peringkat: string;
+  tanggal_prestasi: string;
+}
+
+interface BeasiswaMahasiswa {
+  nama_beasiswa: string;
+  sumber_beasiswa: string;
+  jenis_beasiswa: string;
+  beasiswa_status: string;
+}
+
 interface MahasiswaProfile {
-  nim: string;
+  // Data Mahasiswa
   nama: string;
+  nim: string;
+  tahun_angkatan: string;
   jk: 'Pria' | 'Wanita';
+  jenis_pendaftaran: string;
+  ipk: number | null;
   agama: string;
   kabupaten: string;
   provinsi: string;
-  jenis_pendaftaran: string;
+  
-  status_beasiswa: 'YA' | 'TIDAK';
+  // Status Mahasiswa
-  tahun_angkatan: string;
-  ipk: number | null;
-  prestasi: 'YA' | 'TIDAK';
   status_kuliah: string;
+  semester: string;
+  
+  // Prestasi Mahasiswa
+  prestasi: PrestasiMahasiswa[];
+  
+  // Beasiswa Mahasiswa
+  beasiswa: BeasiswaMahasiswa[];
 }
 
 export async function GET(request: Request) {
@@ -43,17 +66,15 @@ export async function GET(request: Request) {
     const { data: mahasiswaData, error: mahasiswaError } = await supabase
       .from('mahasiswa')
       .select(`
-        nim,
         nama,
+        nim,
+        tahun_angkatan,
         jk,
+        jenis_pendaftaran,
+        ipk,
         agama,
         kabupaten,
-        provinsi,
+        provinsi
-        jenis_pendaftaran,
-        status_beasiswa,
-        tahun_angkatan,
-        ipk,
-        prestasi
       `)
       .eq('nim', nim)
       .single();
@@ -65,27 +86,58 @@ export async function GET(request: Request) {
       );
     }
 
-    // Get status_kuliah separately
+    // Get status_mahasiswa data
     const { data: statusData, error: statusError } = await supabase
       .from('status_mahasiswa')
-      .select('status_kuliah')
+      .select('status_kuliah, semester')
       .eq('nim', nim)
       .single();
 
+    // Get prestasi_mahasiswa data
+    const { data: prestasiData, error: prestasiError } = await supabase
+      .from('prestasi_mahasiswa')
+      .select(`
+        nama_prestasi,
+        jenis_prestasi,
+        tingkat_prestasi,
+        peringkat,
+        tanggal_prestasi
+      `)
+      .eq('nim', nim);
+
+    // Get beasiswa_mahasiswa data
+    const { data: beasiswaData, error: beasiswaError } = await supabase
+      .from('beasiswa_mahasiswa')
+      .select(`
+        nama_beasiswa,
+        sumber_beasiswa,
+        jenis_beasiswa,
+        beasiswa_status
+      `)
+      .eq('nim', nim);
+
     // Transform the data to match the expected interface
     const profile: MahasiswaProfile = {
-      nim: mahasiswaData.nim,
+      // Data Mahasiswa
       nama: mahasiswaData.nama,
+      nim: mahasiswaData.nim,
+      tahun_angkatan: mahasiswaData.tahun_angkatan,
       jk: mahasiswaData.jk,
+      jenis_pendaftaran: mahasiswaData.jenis_pendaftaran,
+      ipk: mahasiswaData.ipk,
       agama: mahasiswaData.agama,
       kabupaten: mahasiswaData.kabupaten,
       provinsi: mahasiswaData.provinsi,
-      jenis_pendaftaran: mahasiswaData.jenis_pendaftaran,
+      
-      status_beasiswa: mahasiswaData.status_beasiswa,
+      // Status Mahasiswa
-      tahun_angkatan: mahasiswaData.tahun_angkatan,
+      status_kuliah: statusData?.status_kuliah || '-',
-      ipk: mahasiswaData.ipk,
+      semester: statusData?.semester || '-',
-      prestasi: mahasiswaData.prestasi,
+      
-      status_kuliah: statusData?.status_kuliah || ''
+      // Prestasi Mahasiswa
+      prestasi: prestasiData || [],
+      
+      // Beasiswa Mahasiswa
+      beasiswa: beasiswaData || []
     };
 
     return NextResponse.json(profile);

app/api/mahasiswa/tingkat-prestasi/route.ts

@@ -4,18 +4,43 @@ import supabase from '@/lib/db';
 export async function GET(request: Request) {
   try {
     const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahunAngkatan');
     const jenisPrestasi = searchParams.get('jenisPrestasi');
 
-    const { data, error } = await supabase
+    // Validate jenisPrestasi parameter (allow null)
+    if (jenisPrestasi && jenisPrestasi !== 'null' && jenisPrestasi !== 'undefined') {
+      // Validate against valid enum values only if jenisPrestasi is provided
+      const validJenisPrestasi = ['Akademik', 'Non-Akademik'];
+      if (!validJenisPrestasi.includes(jenisPrestasi)) {
+        return NextResponse.json(
+          { error: `Invalid jenisPrestasi value. Must be one of: ${validJenisPrestasi.join(', ')}` },
+          { status: 400 }
+        );
+      }
+    }
+
+    // Build query based on parameters
+    let query = supabase
       .from('mahasiswa')
       .select(`
         tahun_angkatan,
-        prestasi_mahasiswa!inner(
+        prestasi_mahasiswa(
           tingkat_prestasi,
           jenis_prestasi
         )
-      `)
+      `);
-      .eq('prestasi_mahasiswa.jenis_prestasi', jenisPrestasi);
+
+    // Add tahun angkatan filter if provided
+    if (tahunAngkatan && tahunAngkatan !== 'null' && tahunAngkatan !== 'undefined') {
+      query = query.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    // Add jenis prestasi filter if provided
+    if (jenisPrestasi && jenisPrestasi !== 'null' && jenisPrestasi !== 'undefined') {
+      query = query.eq('prestasi_mahasiswa.jenis_prestasi', jenisPrestasi);
+    }
+
+    const { data, error } = await query;
     
     if (error) {
       console.error('Supabase error:', error);
@@ -28,9 +53,21 @@ export async function GET(request: Request) {
     // Group and count the data in JavaScript
     const groupedData = data.reduce((acc: any[], row: any) => {
       const tahunAngkatan = row.tahun_angkatan;
-      const tingkatPrestasi = row.prestasi_mahasiswa?.tingkat_prestasi;
       
-      if (!tahunAngkatan || !tingkatPrestasi) return acc;
+      // Handle array of prestasi_mahasiswa
+      const prestasiArray = Array.isArray(row.prestasi_mahasiswa) ? row.prestasi_mahasiswa : [row.prestasi_mahasiswa];
+      
+      if (!tahunAngkatan) {
+        return acc;
+      }
+
+      // Process each prestasi in the array
+      prestasiArray.forEach((prestasi: any) => {
+        if (!prestasi || !prestasi.tingkat_prestasi) {
+          return;
+        }
+
+        const tingkatPrestasi = prestasi.tingkat_prestasi;
         
         const existingGroup = acc.find(
           (item: any) => 
@@ -41,12 +78,14 @@ export async function GET(request: Request) {
         if (existingGroup) {
           existingGroup.tingkat_mahasiswa_prestasi++;
         } else {
-        acc.push({
+          const newGroup = {
             tahun_angkatan: tahunAngkatan,
             tingkat_prestasi: tingkatPrestasi,
             tingkat_mahasiswa_prestasi: 1
-        });
+          };
+          acc.push(newGroup);
         }
+      });
       
       return acc;
     }, []);

app/mahasiswa/profile/page.tsx

@@ -5,22 +5,45 @@ import { useRouter } from 'next/navigation';
 import { useToast } from '@/components/ui/use-toast';
 import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
 import { Skeleton } from '@/components/ui/skeleton';
-import { User } from 'lucide-react';
+import { User, Trophy, Award } from 'lucide-react';
 import { useTheme } from 'next-themes';
 
+interface PrestasiMahasiswa {
+  nama_prestasi: string;
+  jenis_prestasi: string;
+  tingkat_prestasi: string;
+  peringkat: string;
+  tanggal_prestasi: string;
+}
+
+interface BeasiswaMahasiswa {
+  nama_beasiswa: string;
+  sumber_beasiswa: string;
+  jenis_beasiswa: string;
+  beasiswa_status: string;
+}
+
 interface MahasiswaProfile {
-  nim: string;
+  // Data Mahasiswa
   nama: string;
+  nim: string;
+  tahun_angkatan: string;
   jk: 'Pria' | 'Wanita';
+  jenis_pendaftaran: string;
+  ipk: number | null;
   agama: string;
   kabupaten: string;
   provinsi: string;
-  jenis_pendaftaran: string;
+  
-  status_beasiswa: 'YA' | 'TIDAK';
+  // Status Mahasiswa
-  tahun_angkatan: string;
-  ipk: number | null;
-  prestasi: 'YA' | 'TIDAK';
   status_kuliah: string;
+  semester: string;
+  
+  // Prestasi Mahasiswa
+  prestasi: PrestasiMahasiswa[];
+  
+  // Beasiswa Mahasiswa
+  beasiswa: BeasiswaMahasiswa[];
 }
 
 export default function ProfilePage() {
@@ -72,15 +95,16 @@ export default function ProfilePage() {
 
   if (loading) {
     return (
-      <div className="container mx-auto p-4 max-w-2xl">
+      <div className="container mx-auto p-4 max-w-4xl space-y-4">
-        <Card className="border shadow-sm bg-white dark:bg-slate-900">
+        {[...Array(3)].map((_, i) => (
+          <Card key={i} className="border shadow-sm bg-white dark:bg-slate-900">
             <CardHeader className="border-b py-3 bg-white dark:bg-slate-900 text-black dark:text-white">
-            <CardTitle className="text-lg">Profil Mahasiswa</CardTitle>
+              <Skeleton className="h-6 w-[200px]" />
             </CardHeader>
             <CardContent className="p-4">
               <div className="space-y-3">
-              {[...Array(8)].map((_, i) => (
+                {[...Array(8)].map((_, j) => (
-                <div key={i} className="flex items-center gap-2">
+                  <div key={j} className="flex items-center gap-2">
                     <Skeleton className="h-3 w-[80px]" />
                     <Skeleton className="h-3 w-[140px]" />
                   </div>
@@ -88,13 +112,14 @@ export default function ProfilePage() {
               </div>
             </CardContent>
           </Card>
+        ))}
       </div>
     );
   }
 
   if (!profile) {
     return (
-      <div className="container mx-auto p-4 max-w-2xl">
+      <div className="container mx-auto p-4 max-w-4xl">
         <Card className="border shadow-sm">
           <CardHeader className="border-b bg-muted/30 py-3">
             <CardTitle className="text-lg">Profil Mahasiswa</CardTitle>
@@ -115,8 +140,26 @@ export default function ProfilePage() {
     return Number(ipk).toFixed(2);
   };
 
+  // Get first prestasi or create empty object
+  const firstPrestasi = profile.prestasi.length > 0 ? profile.prestasi[0] : {
+    nama_prestasi: '-',
+    jenis_prestasi: '-',
+    tingkat_prestasi: '-',
+    peringkat: '-',
+    tanggal_prestasi: '-'
+  };
+
+  // Get first beasiswa or create empty object
+  const firstBeasiswa = profile.beasiswa.length > 0 ? profile.beasiswa[0] : {
+    nama_beasiswa: '-',
+    sumber_beasiswa: '-',
+    jenis_beasiswa: '-',
+    beasiswa_status: '-'
+  };
+
   return (
-    <div className="container mx-auto p-4 w-full">
+    <div className="container mx-auto p-4 w-full max-w-4xl space-y-4">
+      {/* Data Mahasiswa */}
       <Card className="gap-0 bg-white dark:bg-slate-900 border shadow-sm">
         <CardHeader className="border-b py-2">
           <div className="flex items-center gap-3">
@@ -124,17 +167,47 @@ export default function ProfilePage() {
               <User className="h-5 w-5 text-primary" />
             </div>
             <div>
-              <CardTitle className="text-base font-medium text-black dark:text-white">{profile.nama}</CardTitle>
+              <CardTitle className="text-base font-medium text-black dark:text-white">Data Mahasiswa</CardTitle>
-              <p className="text-xs text-muted-foreground">{profile.nim}</p>
             </div>
           </div>
         </CardHeader>
         <CardContent className="py-2 px-4">
-          <div className="space-y-1 text-sm text-black dark:text-white">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-black dark:text-white">
+            <div className="space-y-1">
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Nama Lengkap</div>
+                <div>{profile.nama}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">NIM</div>
+                <div>{profile.nim}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Status Kuliah</div>
+                <div>{profile.status_kuliah}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Semester</div>
+                <div>{profile.semester}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Tahun Angkatan</div>
+                <div>{profile.tahun_angkatan}</div>
+              </div>
               <div className="py-1.5 border-b">
                 <div className="text-muted-foreground">Jenis Kelamin</div>
                 <div>{profile.jk}</div>
               </div>
+            </div>
+            <div className="space-y-1">
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Jenis Pendaftaran</div>
+                <div>{profile.jenis_pendaftaran}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">IPK</div>
+                <div>{formatIPK(profile.ipk)}</div>
+              </div>
               <div className="py-1.5 border-b">
                 <div className="text-muted-foreground">Agama</div>
                 <div>{profile.agama}</div>
@@ -143,25 +216,90 @@ export default function ProfilePage() {
                 <div className="text-muted-foreground">Kabupaten</div>
                 <div>{profile.kabupaten}</div>
               </div>
-            <div className="py-1.5 border-b">
+              <div className="py-1.5">
                 <div className="text-muted-foreground">Provinsi</div>
                 <div>{profile.provinsi}</div>
               </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Prestasi Mahasiswa */}
+      <Card className="gap-0 bg-white dark:bg-slate-900 border shadow-sm">
+        <CardHeader className="border-b py-2">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-yellow-100 dark:bg-yellow-900/20 flex items-center justify-center">
+              <Trophy className="h-5 w-5 text-yellow-600 dark:text-yellow-400" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-medium text-black dark:text-white">Prestasi Mahasiswa</CardTitle>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="py-2 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-black dark:text-white">
+            <div className="space-y-1">
               <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Jenis Pendaftaran</div>
+                <div className="text-muted-foreground">Nama Prestasi</div>
-              <div>{profile.jenis_pendaftaran}</div>
+                <div>{firstPrestasi.nama_prestasi}</div>
               </div>
               <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Tahun Angkatan</div>
+                <div className="text-muted-foreground">Jenis Prestasi</div>
-              <div>{profile.tahun_angkatan}</div>
+                <div>{firstPrestasi.jenis_prestasi}</div>
               </div>
               <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">IPK</div>
+                <div className="text-muted-foreground">Tingkat Prestasi</div>
-              <div>{formatIPK(profile.ipk)}</div>
+                <div>{firstPrestasi.tingkat_prestasi}</div>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Peringkat</div>
+                <div>{firstPrestasi.peringkat}</div>
               </div>
               <div className="py-1.5">
-              <div className="text-muted-foreground">Status Kuliah</div>
+                <div className="text-muted-foreground">Tanggal Prestasi</div>
-              <div>{profile.status_kuliah || '-'}</div>
+                <div>{firstPrestasi.tanggal_prestasi}</div>
+              </div>
+            </div>
+          </div>
+        </CardContent>
+      </Card>
+
+      {/* Beasiswa Mahasiswa */}
+      <Card className="gap-0 bg-white dark:bg-slate-900 border shadow-sm">
+        <CardHeader className="border-b py-2">
+          <div className="flex items-center gap-3">
+            <div className="h-10 w-10 rounded-full bg-green-100 dark:bg-green-900/20 flex items-center justify-center">
+              <Award className="h-5 w-5 text-green-600 dark:text-green-400" />
+            </div>
+            <div>
+              <CardTitle className="text-base font-medium text-black dark:text-white">Beasiswa Mahasiswa</CardTitle>
+            </div>
+          </div>
+        </CardHeader>
+        <CardContent className="py-2 px-4">
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-4 text-sm text-black dark:text-white">
+            <div className="space-y-1">
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Nama Beasiswa</div>
+                <div>{firstBeasiswa.nama_beasiswa}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Sumber Beasiswa</div>
+                <div>{firstBeasiswa.sumber_beasiswa}</div>
+              </div>
+            </div>
+            <div className="space-y-1">
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Jenis Beasiswa</div>
+                <div>{firstBeasiswa.jenis_beasiswa}</div>
+              </div>
+              <div className="py-1.5">
+                <div className="text-muted-foreground">Status Beasiswa</div>
+                <div>{firstBeasiswa.beasiswa_status}</div>
+              </div>
             </div>
           </div>
         </CardContent>

app/page.tsx

@@ -188,10 +188,9 @@ export default function HomePage() {
                 <BookOpen className="h-4 w-4 text-muted-foreground" />
               </CardHeader>
               <CardContent>
-                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa_aktif_lulus}</div>
+                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.mahasiswa_aktif}</div>
                 <div className="flex justify-between mt-2 text-xs text-muted-foreground">
                   <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.ipk_rata_rata_aktif}</span></span>
-                  <span className="dark:text-white">Lulus: <span className="text-blue-500">{mahasiswaData.ipk_rata_rata_lulus}</span></span>
                 </div>
               </CardContent>
             </Card>

components/AsalDaerahPerAngkatanChart.tsx

@@ -227,11 +227,19 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
           name: 'Jumlah Mahasiswa',
           data: jumlah
         }]);
+        
+        // Calculate the maximum value from data
+        const maxValue = Math.max(...jumlah);
+        
+        // Add 10% padding to the maximum value
+        const xAxisMax = Math.ceil(maxValue * 1.1);
+        
         setOptions(prev => ({
           ...prev,
           xaxis: {
             ...prev.xaxis,
             categories: kabupaten,
+            max: xAxisMax
           },
           chart: {
             ...prev.chart,

components/JenisPendaftaranBeasiswaChart.tsx

@@ -203,6 +203,23 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -251,7 +268,7 @@ export default function JenisPendaftaranBeasiswaChart({ selectedYear, selectedJe
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/JenisPendaftaranChart.tsx

@@ -212,11 +212,21 @@ export default function JenisPendaftaranChart() {
         }));
 
         setSeries(seriesData);
+        
+        // Calculate the maximum value from all series
+        const maxValue = Math.max(
+          ...seriesData.flatMap(series => series.data)
+        );
+        
+        // Add 20% padding to the maximum value
+        const xAxisMax = Math.ceil(maxValue * 1.1);
+        
         setOptions(prev => ({
           ...prev,
           xaxis: {
             ...prev.xaxis,
             categories: tahunAngkatan,
+            max: xAxisMax
           },
         }));
       } catch (err) {

components/JenisPendaftaranLulusChart.tsx

@@ -200,6 +200,23 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -248,7 +265,7 @@ export default function JenisPendaftaranLulusChart({ selectedYear }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/JenisPendaftaranPrestasiChart.tsx

@@ -161,6 +161,9 @@ export default function JenisPendaftaranPrestasiChart({ selectedJenisPrestasi }:
       axisBorder: {
         show: true,
         color: theme === 'dark' ? '#374151' : '#E5E7EB'
+      },
+      max: function(val) {
+        return Math.ceil(val * 1.2);
       }
     },
     fill: {

components/JenisPendaftaranStatusChart.tsx

@@ -188,6 +188,23 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
   const series = processSeriesData();
   console.log('Processed series data:', series);
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -236,7 +253,7 @@ export default function JenisPendaftaranStatusChart({ selectedYear, selectedStat
         <div className="h-[350px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/LulusTepatWaktuChart.tsx

@@ -218,6 +218,23 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -266,7 +283,7 @@ export default function LulusTepatWaktuChart({ selectedYear }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/NamaBeasiswaChart.tsx

@@ -203,6 +203,23 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -251,7 +268,7 @@ export default function NamaBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/StatistikMahasiswaChart.tsx

@@ -68,9 +68,9 @@ export default function StatistikMahasiswaChart() {
       },
     },
     stroke: {
-      show: true,
+      show: false,
-      width: [0, 0, 2],
+      width: [0, 0, 0],
-      colors: ['transparent', 'transparent', '#10B981'],
+      colors: ['transparent', 'transparent', 'transparent'],
       curve: 'straight' as const
     },
     xaxis: {
@@ -124,7 +124,7 @@ export default function StatistikMahasiswaChart() {
         colors: '#000'
       }
     },
-    colors: ['#3B82F6', '#EC4899', '#10B981'],
+    colors: ['#3B82F6', '#10B981', '#EC4899'],
     tooltip: {
       theme: 'light',
       y: [
@@ -243,12 +243,28 @@ export default function StatistikMahasiswaChart() {
   // Update categories when data changes
   useEffect(() => {
     if (statistikData.length > 0) {
+      // Calculate the maximum value from all series
+      const maxValue = Math.max(
+        ...statistikData.map(item => item.total_mahasiswa),
+        ...statistikData.map(item => item.pria),
+        ...statistikData.map(item => item.wanita)
+      );
+      
+      // Add 50% padding to the maximum value
+      const yAxisMax = Math.ceil(maxValue * 1.2);
+      
       setChartOptions(prev => ({
         ...prev,
         xaxis: {
           ...prev.xaxis,
           categories: statistikData.map(item => item.tahun_angkatan)
+        },
+        yaxis: [
+          {
+            ...prev.yaxis[0],
+            max: yAxisMax
           }
+        ]
       }));
     }
   }, [statistikData]);
@@ -259,15 +275,15 @@ export default function StatistikMahasiswaChart() {
       type: 'bar' as const,
       data: statistikData.map(item => item.pria)
     },
+    {
+      name: 'Total',
+      type: 'bar' as const,
+      data: statistikData.map(item => item.total_mahasiswa)
+    },
     {
       name: 'Perempuan',
       type: 'bar' as const,
       data: statistikData.map(item => item.wanita)
-    },
-    {
-      name: 'Total',
-      type: 'line' as const,
-      data: statistikData.map(item => item.total_mahasiswa)
     }
   ];
 

components/StatusMahasiswaChart.tsx

@@ -143,12 +143,25 @@ export default function StatusMahasiswaChart() {
         }));
 
         setSeries(seriesData);
+        
+        // Calculate the maximum value from all series
+        const maxValue = Math.max(
+          ...seriesData.flatMap(series => series.data)
+        );
+        
+        // Add 20% padding to the maximum value
+        const yAxisMax = Math.ceil(maxValue * 1.2);
+        
         setOptions(prev => ({
           ...prev,
           xaxis: {
             ...prev.xaxis,
             categories: tahunAngkatan,
           },
+          yaxis: {
+            ...prev.yaxis,
+            max: yAxisMax
+          }
         }));
       } catch (err) {
         console.error('Error in fetchData:', err);

components/StatusMahasiswaFilterChart.tsx

@@ -190,6 +190,23 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
   const series = processSeriesData();
   console.log('Processed series data:', series);
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -238,7 +255,7 @@ export default function StatusMahasiswaFilterChart({ selectedYear, selectedStatu
         <div className="h-[350px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/TingkatPrestasiChart.tsx

@@ -11,7 +11,7 @@ const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 interface TingkatPrestasiData {
   tahun_angkatan: number;
-  tingkat: string;
+  tingkat_prestasi: string;
   tingkat_mahasiswa_prestasi: number;
 }
 
@@ -67,12 +67,12 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
     if (!data.length) return [];
 
     const years = [...new Set(data.map(item => item.tahun_angkatan))].sort();
-    const tingkatTypes = [...new Set(data.map(item => item.tingkat))].sort();
+    const tingkatTypes = [...new Set(data.map(item => item.tingkat_prestasi))].sort();
 
     return tingkatTypes.map(tingkat => ({
       name: tingkat,
       data: years.map(year => {
-        const item = data.find(d => d.tahun_angkatan === year && d.tingkat === tingkat);
+        const item = data.find(d => d.tahun_angkatan === year && d.tingkat_prestasi === tingkat);
         return item?.tingkat_mahasiswa_prestasi || 0;
       })
     }));
@@ -202,6 +202,23 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -249,7 +266,7 @@ export default function TingkatPrestasiChart({ selectedJenisPrestasi }: Props) {
         <div className="h-[400px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/TingkatPrestasiPieChart.tsx

@@ -11,7 +11,7 @@ const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
 
 interface TingkatPrestasiData {
   tahun_angkatan: number;
-  tingkat: string;
+  tingkat_prestasi: string;
   tingkat_mahasiswa_prestasi: number;
 }
 
@@ -52,6 +52,23 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
     fetchData();
   }, [selectedYear, selectedJenisPrestasi]);
 
+  // Process data for series
+  const processSeriesData = () => {
+    // Data sudah difilter dari API berdasarkan tahun angkatan dan jenis prestasi
+    // Langsung gunakan data yang diterima dari API
+    const tingkat = [...new Set(data.map(item => item.tingkat_prestasi))].sort();
+    const jumlahData = tingkat.map(t => {
+      const item = data.find(d => d.tingkat_prestasi === t);
+      return item ? item.tingkat_mahasiswa_prestasi : 0;
+    });
+    return {
+      series: jumlahData,
+      labels: tingkat
+    };
+  };
+
+  const { series, labels } = processSeriesData();
+
   const chartOptions: ApexOptions = {
     chart: {
       type: 'pie',
@@ -69,7 +86,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         }
       }
     },
-    labels: [],
+    labels: labels,
     colors: ['#3B82F6', '#10B981', '#F59E0B', '#EF4444', '#8B5CF6', '#EC4899', '#06B6D4'],
     legend: {
       position: 'bottom',
@@ -110,23 +127,6 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
     }
   };
 
-  // Process data for series
-  const processSeriesData = () => {
-    // Filter data sesuai tahun angkatan
-    const filtered = data.filter(item => String(item.tahun_angkatan) === String(selectedYear));
-    const tingkat = [...new Set(filtered.map(item => item.tingkat))].sort();
-    const jumlahData = tingkat.map(t => {
-      const item = filtered.find(d => d.tingkat === t);
-      return item ? item.tingkat_mahasiswa_prestasi : 0;
-    });
-    return {
-      series: jumlahData,
-      labels: tingkat
-    };
-  };
-
-  const { series, labels } = processSeriesData();
-
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -174,7 +174,7 @@ export default function TingkatPrestasiPieChart({ selectedYear, selectedJenisPre
         <div className="h-[350px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && (
             <Chart
-              options={{...chartOptions, labels}}
+              options={chartOptions}
               series={series}
               type="pie"
               height="100%"

components/TotalBeasiswaChart.tsx

@@ -215,6 +215,23 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -263,7 +280,7 @@ export default function TotalBeasiswaChart({ selectedYear, selectedJenisBeasiswa
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"

components/TotalPrestasiChart.tsx

@@ -214,6 +214,23 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
 
   const series = processSeriesData();
 
+  // Calculate the maximum value from all series for y-axis padding
+  const maxValue = Math.max(
+    ...series.flatMap(s => s.data)
+  );
+  
+  // Add 20% padding to the maximum value
+  const yAxisMax = Math.ceil(maxValue * 1.2);
+
+  // Update chart options with y-axis max
+  const updatedChartOptions: ApexOptions = {
+    ...chartOptions,
+    yaxis: {
+      ...chartOptions.yaxis,
+      max: yAxisMax
+    }
+  };
+
   if (loading) {
     return (
       <Card className="bg-white dark:bg-slate-900 shadow-lg">
@@ -261,7 +278,7 @@ export default function TotalPrestasiChart({ selectedJenisPrestasi }: Props) {
         <div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
           {typeof window !== 'undefined' && series.length > 0 && (
             <Chart
-              options={chartOptions}
+              options={updatedChartOptions}
               series={series}
               type="bar"
               height="100%"