Change total mahasiswa

2025-06-24 00:50:02 +07:00
parent fadca46dc1
commit eb7c884c41
19 changed files with 569 additions and 138 deletions
--- a/app/api/mahasiswa/profile/route.ts
+++ b/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';
-  tahun_angkatan: string;
-  ipk: number | null;
-  prestasi: 'YA' | 'TIDAK';
+  
+  // Status Mahasiswa
  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,
-        jenis_pendaftaran,
-        status_beasiswa,
-        tahun_angkatan,
-        ipk,
-        prestasi
+        provinsi
      `)
      .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,
-      tahun_angkatan: mahasiswaData.tahun_angkatan,
-      ipk: mahasiswaData.ipk,
-      prestasi: mahasiswaData.prestasi,
-      status_kuliah: statusData?.status_kuliah || ''
+      
+      // Status Mahasiswa
+      status_kuliah: statusData?.status_kuliah || '-',
+      semester: statusData?.semester || '-',
+      
+      // Prestasi Mahasiswa
+      prestasi: prestasiData || [],
+      
+      // Beasiswa Mahasiswa
+      beasiswa: beasiswaData || []
    };

    return NextResponse.json(profile);
--- a/app/api/mahasiswa/tingkat-prestasi/route.ts
+++ b/app/api/mahasiswa/tingkat-prestasi/route.ts
@@ -4,19 +4,44 @@ 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);
      return NextResponse.json(
@@ -28,25 +53,39 @@ 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];
      
-      const existingGroup = acc.find(
-        (item: any) => 
-          item.tahun_angkatan === tahunAngkatan && 
-          item.tingkat_prestasi === tingkatPrestasi
-      );
-      
-      if (existingGroup) {
-        existingGroup.tingkat_mahasiswa_prestasi++;
-      } else {
-        acc.push({
-          tahun_angkatan: tahunAngkatan,
-          tingkat_prestasi: tingkatPrestasi,
-          tingkat_mahasiswa_prestasi: 1
-        });
+      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) => 
+            item.tahun_angkatan === tahunAngkatan && 
+            item.tingkat_prestasi === tingkatPrestasi
+        );
+        
+        if (existingGroup) {
+          existingGroup.tingkat_mahasiswa_prestasi++;
+        } else {
+          const newGroup = {
+            tahun_angkatan: tahunAngkatan,
+            tingkat_prestasi: tingkatPrestasi,
+            tingkat_mahasiswa_prestasi: 1
+          };
+          acc.push(newGroup);
+        }
+      });
      
      return acc;
    }, []);
--- a/app/mahasiswa/profile/page.tsx
+++ b/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';
-  tahun_angkatan: string;
-  ipk: number | null;
-  prestasi: 'YA' | 'TIDAK';
+  
+  // Status Mahasiswa
  status_kuliah: string;
+  semester: string;
+  
+  // Prestasi Mahasiswa
+  prestasi: PrestasiMahasiswa[];
+  
+  // Beasiswa Mahasiswa
+  beasiswa: BeasiswaMahasiswa[];
 }

 export default function ProfilePage() {
@@ -72,29 +95,31 @@ export default function ProfilePage() {

  if (loading) {
    return (
-      <div className="container mx-auto p-4 max-w-2xl">
-        <Card 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>
-          </CardHeader>
-          <CardContent className="p-4">
-            <div className="space-y-3">
-              {[...Array(8)].map((_, i) => (
-                <div key={i} className="flex items-center gap-2">
-                  <Skeleton className="h-3 w-[80px]" />
-                  <Skeleton className="h-3 w-[140px]" />
-                </div>
-              ))}
-            </div>
-          </CardContent>
-        </Card>
+      <div className="container mx-auto p-4 max-w-4xl space-y-4">
+        {[...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">
+              <Skeleton className="h-6 w-[200px]" />
+            </CardHeader>
+            <CardContent className="p-4">
+              <div className="space-y-3">
+                {[...Array(8)].map((_, j) => (
+                  <div key={j} className="flex items-center gap-2">
+                    <Skeleton className="h-3 w-[80px]" />
+                    <Skeleton className="h-3 w-[140px]" />
+                  </div>
+                ))}
+              </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,44 +167,139 @@ 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>
-              <p className="text-xs text-muted-foreground">{profile.nim}</p>
+              <CardTitle className="text-base font-medium text-black dark:text-white">Data Mahasiswa</CardTitle>
            </div>
          </div>
        </CardHeader>
        <CardContent className="py-2 px-4">
-          <div className="space-y-1 text-sm text-black dark:text-white">
-            <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Jenis Kelamin</div>
-              <div>{profile.jk}</div>
+          <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="py-1.5 border-b">
-              <div className="text-muted-foreground">Agama</div>
-              <div>{profile.agama}</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>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Kabupaten</div>
+                <div>{profile.kabupaten}</div>
+              </div>
+              <div className="py-1.5">
+                <div className="text-muted-foreground">Provinsi</div>
+                <div>{profile.provinsi}</div>
+              </div>
            </div>
-            <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Kabupaten</div>
-              <div>{profile.kabupaten}</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 className="py-1.5 border-b">
-              <div className="text-muted-foreground">Provinsi</div>
-              <div>{profile.provinsi}</div>
+            <div>
+              <CardTitle className="text-base font-medium text-black dark:text-white">Prestasi Mahasiswa</CardTitle>
            </div>
-            <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Jenis Pendaftaran</div>
-              <div>{profile.jenis_pendaftaran}</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 Prestasi</div>
+                <div>{firstPrestasi.nama_prestasi}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Jenis Prestasi</div>
+                <div>{firstPrestasi.jenis_prestasi}</div>
+              </div>
+              <div className="py-1.5 border-b">
+                <div className="text-muted-foreground">Tingkat Prestasi</div>
+                <div>{firstPrestasi.tingkat_prestasi}</div>
+              </div>
            </div>
-            <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">Tahun Angkatan</div>
-              <div>{profile.tahun_angkatan}</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">Tanggal Prestasi</div>
+                <div>{firstPrestasi.tanggal_prestasi}</div>
+              </div>
            </div>
-            <div className="py-1.5 border-b">
-              <div className="text-muted-foreground">IPK</div>
-              <div>{formatIPK(profile.ipk)}</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 className="py-1.5">
-              <div className="text-muted-foreground">Status Kuliah</div>
-              <div>{profile.status_kuliah || '-'}</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>
--- a/app/page.tsx
+++ b/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>
--- a/components/AsalDaerahPerAngkatanChart.tsx
+++ b/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,
--- a/components/JenisPendaftaranBeasiswaChart.tsx
+++ b/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%"
--- a/components/JenisPendaftaranChart.tsx
+++ b/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) {
--- a/components/JenisPendaftaranLulusChart.tsx
+++ b/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%"
--- a/components/JenisPendaftaranPrestasiChart.tsx
+++ b/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: {
--- a/components/JenisPendaftaranStatusChart.tsx
+++ b/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%"
--- a/components/LulusTepatWaktuChart.tsx
+++ b/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%"
--- a/components/NamaBeasiswaChart.tsx
+++ b/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%"
--- a/components/StatistikMahasiswaChart.tsx
+++ b/components/StatistikMahasiswaChart.tsx
@@ -68,9 +68,9 @@ export default function StatistikMahasiswaChart() {
      },
    },
    stroke: {
-      show: true,
-      width: [0, 0, 2],
-      colors: ['transparent', 'transparent', '#10B981'],
+      show: false,
+      width: [0, 0, 0],
+      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)
    }
  ];

--- a/components/StatusMahasiswaChart.tsx
+++ b/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);
--- a/components/StatusMahasiswaFilterChart.tsx
+++ b/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%"
--- a/components/TingkatPrestasiChart.tsx
+++ b/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%"
--- a/components/TingkatPrestasiPieChart.tsx
+++ b/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%"
--- a/components/TotalBeasiswaChart.tsx
+++ b/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%"
--- a/components/TotalPrestasiChart.tsx
+++ b/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%"