again n again

app/api/mahasiswa/kategoriipk/route.ts

@@ -0,0 +1,101 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+interface KategoriIPKData {
+  tahun_angkatan: number;
+  kategori_ipk: string;
+  jumlah: number;
+}
+
+// Fungsi untuk mengkategorikan IPK
+function getKategoriIPK(ipk: number): string {
+  if (ipk >= 3.00 && ipk <= 4.00) {
+    return 'Sangat Baik';
+  } else if (ipk >= 2.50 && ipk < 3.00) {
+    return 'Baik';
+  } else if (ipk >= 2.00 && ipk < 2.50) {
+    return 'Cukup';
+  } else if (ipk < 2.00) {
+    return 'Kurang';
+  }
+  return 'Tidak Terkategorikan';
+}
+
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+
+    // Ambil data mahasiswa dengan IPK (tidak null)
+    let query = supabase
+      .from('mahasiswa')
+      .select('tahun_angkatan, ipk')
+      .not('ipk', 'is', null);
+
+    // Jika ada filter tahun angkatan, terapkan filter
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query = query.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      console.error('Error fetching kategori IPK data:', error);
+      return NextResponse.json(
+        { error: 'Failed to fetch kategori IPK data' },
+        { status: 500 }
+      );
+    }
+
+    // Kelompokkan berdasarkan tahun_angkatan dan kategori_ipk
+    const groupedData = new Map<string, number>();
+    
+    data.forEach((item: any) => {
+      const tahun_angkatan = item.tahun_angkatan;
+      const ipk = Number(item.ipk);
+      
+      // Skip jika IPK tidak valid atau tahun_angkatan tidak ada
+      if (isNaN(ipk) || !tahun_angkatan) return;
+      
+      const kategori_ipk = getKategoriIPK(ipk);
+      // Gunakan separator yang lebih aman untuk key
+      const key = `${tahun_angkatan}||${kategori_ipk}`;
+      groupedData.set(key, (groupedData.get(key) || 0) + 1);
+    });
+
+    // Konversi ke format akhir
+    const results: KategoriIPKData[] = Array.from(groupedData.entries()).map(([key, jumlah]) => {
+      const [tahun_angkatan, kategori_ipk] = key.split('||');
+      return {
+        tahun_angkatan: parseInt(tahun_angkatan),
+        kategori_ipk,
+        jumlah
+      };
+    });
+
+    // Urutkan berdasarkan tahun_angkatan dan kategori_ipk
+    results.sort((a, b) => {
+      if (a.tahun_angkatan !== b.tahun_angkatan) {
+        return a.tahun_angkatan - b.tahun_angkatan;
+      }
+      // Urutkan kategori: Sangat Baik, Baik, Cukup, Kurang
+      const kategoriOrder = ['Sangat Baik', 'Baik', 'Cukup', 'Kurang'];
+      return kategoriOrder.indexOf(a.kategori_ipk) - kategoriOrder.indexOf(b.kategori_ipk);
+    });
+
+    return NextResponse.json(results, {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error fetching kategori IPK data:', error);
+    return NextResponse.json(
+      { error: 'Internal Server Error' },
+      { status: 500 }
+    );
+  }
+}
+

app/api/mahasiswa/terancamdo/route.ts

@@ -0,0 +1,192 @@
+import { NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+const MANDATORY = [
+  'UMG-55201-105', // Pendidikan Agama
+  'UMG-55201-101', // Pendidikan Pancasila
+  'UMG-55201-104', // Kewarganegaraan
+  'UMG-55201-102', // Bahasa Indonesia
+];
+
+export async function GET() {
+  try {
+    // 1. Ambil data mahasiswa
+    const { data: mahasiswa, error: errMhs } = await supabase
+      .from('mahasiswa')
+      .select('id_mahasiswa, tahun_angkatan, ipk, semester');
+
+    if (errMhs) throw errMhs;
+
+    // 2. Ambil semua nilai + info mata kuliah
+    const { data: nilai, error: errNilai } = await supabase
+      .from('nilai_mahasiswa')
+      .select('id_mahasiswa, nilai_huruf, nilai_angka, mata_kuliah(kode_mk, sks)');
+
+    if (errNilai) throw errNilai;
+
+    // 3. Kelompokkan nilai per mahasiswa (mirip CTE total_sks & cekmk_wajib)
+    const nilaiMap = new Map<number, any[]>();
+    nilai?.forEach((n) => {
+      if (!nilaiMap.has(n.id_mahasiswa)) nilaiMap.set(n.id_mahasiswa, []);
+      nilaiMap.get(n.id_mahasiswa)!.push(n);
+    });
+
+    // Map jumlah DO per angkatan (hasil akhirnya)
+    const doPerAngkatan = new Map<string, number>();
+
+    for (const m of mahasiswa ?? []) {
+      const tahun_angkatan = m.tahun_angkatan; // di DB bentuknya char(4) → string
+      if (!tahun_angkatan) continue;
+
+      const list = nilaiMap.get(m.id_mahasiswa) ?? [];
+      const sem = m.semester ?? 0;
+
+      // ipk bisa NULL → jangan dipaksa jadi 0
+      const ipk = m.ipk === null ? null : Number(m.ipk);
+
+      // ==== replikasi CTE total_sks ====
+      // Jika tidak ada nilai, semua nilai akan NULL (sesuai LEFT JOIN di SQL)
+      // Di JavaScript, kita set ke null untuk menandakan tidak ada data
+      let sksTotal: number | null = null;         // hanya nilai ≠ E
+      let sksD: number | null = null;             // total SKS nilai D/D+
+      let jumlahE: number | null = null;          // jumlah matkul nilai E
+      let lulusTA1: number | null = null;         // MAX(CASE WHEN ... THEN 1 ELSE 0 END)
+      let lulusTA2: number | null = null;         // MAX(CASE WHEN ... THEN 1 ELSE 0 END)
+      let minWajib: number | null = null;         // MIN(nilai_angka) FILTER (WHERE ...)
+
+      if (list.length > 0) {
+        // Inisialisasi dengan 0 jika ada data
+        sksTotal = 0;
+        sksD = 0;
+        jumlahE = 0;
+        // lulusTA1 dan lulusTA2 tetap null, akan di-set ke 0 atau 1 jika ada nilai yang sesuai
+
+        for (const n of list) {
+          const mk = n.mata_kuliah;
+          if (!mk) continue;
+
+          const sks = mk.sks ?? 0;
+          const huruf = n.nilai_huruf;
+          const angka = n.nilai_angka; // bisa null → jangan dipaksa 0
+
+          // SKS total: hanya nilai != E
+          if (huruf !== 'E') {
+            sksTotal! += sks;
+          }
+
+          // SKS D/D+
+          if (huruf === 'D' || huruf === 'D+') {
+            sksD! += sks;
+          }
+
+          // jumlah E
+          if (huruf === 'E') {
+            jumlahE! += 1;
+          }
+
+          // nilai minimal mk wajib (MIN dengan FILTER)
+          if (MANDATORY.includes(mk.kode_mk) && angka !== null) {
+            if (minWajib === null || angka < minWajib) {
+              minWajib = angka;
+            }
+          }
+
+          // TA1 & TA2: MAX(CASE WHEN mk.kode_mk = '...' AND nm.nilai_angka >= 2.0 THEN 1 ELSE 0 END)
+          // Artinya: 
+          // - Jika ada setidaknya satu nilai >= 2.0, hasilnya 1
+          // - Jika ada nilai TA1/TA2 tapi tidak ada yang >= 2.0, hasilnya 0
+          // - Jika tidak ada nilai TA1/TA2 sama sekali, hasilnya NULL
+          if (mk.kode_mk === 'INF-55201-406') {
+            if (lulusTA1 === null) {
+              // Pertama kali menemukan nilai TA1, inisialisasi dengan 0
+              lulusTA1 = 0;
+            }
+            if (angka !== null && angka >= 2.0) {
+              lulusTA1 = 1;
+            }
+          }
+          if (mk.kode_mk === 'INF-55201-407') {
+            if (lulusTA2 === null) {
+              // Pertama kali menemukan nilai TA2, inisialisasi dengan 0
+              lulusTA2 = 0;
+            }
+            if (angka !== null && angka >= 2.0) {
+              lulusTA2 = 1;
+            }
+          }
+        }
+      }
+
+      // ==== replikasi CTE evaluasi (CASE ... WHEN ... THEN 1 ELSE 0) ====
+      // Sesuai dengan query SQL: CASE WHEN ... THEN 1 ELSE 0 END
+      // Di SQL, jika nilai NULL, kondisi akan menghasilkan NULL (dianggap FALSE dalam CASE WHEN)
+      let isDO = 0;
+
+      // Evaluasi 4 semester: semester BETWEEN 4 AND 7 AND (sks_total < 40 OR ipk <= 2.50)
+      // Jika sksTotal NULL (tidak ada nilai), kondisi sksTotal < 40 akan NULL (FALSE)
+      if (
+        sem >= 4 &&
+        sem <= 7 &&
+        sksTotal !== null && // Pastikan ada data nilai
+        (
+          sksTotal < 40 ||
+          (ipk !== null && ipk <= 2.50)
+        )
+      ) {
+        isDO = 1;
+      }
+      // Evaluasi 8 semester: semester BETWEEN 8 AND 13 AND (sks_total < 80 OR ipk <= 2.50)
+      else if (
+        sem >= 8 &&
+        sem <= 13 &&
+        sksTotal !== null && // Pastikan ada data nilai
+        (
+          sksTotal < 80 ||
+          (ipk !== null && ipk <= 2.50)
+        )
+      ) {
+        isDO = 1;
+      }
+      // Evaluasi akhir masa studi: semester = 14 AND (sks_total < 144 OR ipk <= 2.00 OR jumlah_e > 0 OR sks_d > 14 OR min_wajib < 2.00 OR lulus_ta1 = 0 OR lulus_ta2 = 0)
+      // Di SQL: lulus_ta1 = 0 akan TRUE jika lulus_ta1 adalah 0, FALSE jika NULL atau 1
+      else if (
+        sem === 14 &&
+        sksTotal !== null && // Pastikan ada data nilai
+        (
+          sksTotal < 144 ||
+          (ipk !== null && ipk <= 2.00) ||
+          (jumlahE !== null && jumlahE > 0) ||
+          (sksD !== null && sksD > 14) ||
+          (minWajib !== null && minWajib < 2.00) ||
+          lulusTA1 === 0 || // TRUE jika 0, FALSE jika NULL atau 1
+          lulusTA2 === 0    // TRUE jika 0, FALSE jika NULL atau 1
+        )
+      ) {
+        isDO = 1;
+      }
+
+      if (isDO === 1) {
+        doPerAngkatan.set(
+          tahun_angkatan,
+          (doPerAngkatan.get(tahun_angkatan) ?? 0) + 1
+        );
+      }
+    }
+
+    // Susun output sama seperti query SQL
+    // HAVING COUNT(*) FILTER (WHERE is_do = 1) > 0
+    // Artinya hanya menampilkan tahun_angkatan yang memiliki setidaknya 1 mahasiswa DO
+    const output = [...doPerAngkatan.entries()]
+      .filter(([_, jumlah]) => jumlah > 0) // Filter sesuai HAVING clause
+      .map(([tahun_angkatan, jumlah_mahasiswa_do]) => ({
+        tahun_angkatan,
+        jumlah_mahasiswa_do,
+      }))
+      .sort((a, b) => Number(a.tahun_angkatan) - Number(b.tahun_angkatan));
+
+    return NextResponse.json(output);
+  } catch (err) {
+    console.error('❌ Error Evaluasi DO:', err);
+    return NextResponse.json({ error: 'Internal Server Error' }, { status: 500 });
+  }
+}

app/api/tabeldetail/kategori-ipk/route.ts

@@ -0,0 +1,89 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+interface MahasiswaKategoriIPK {
+  nim: string;
+  nama: string;
+  tahun_angkatan: number;
+  ipk: number;
+}
+
+// Fungsi untuk mengkategorikan IPK
+function getKategoriIPK(ipk: number): string {
+  if (ipk >= 3.00 && ipk <= 4.00) {
+    return 'Sangat Baik';
+  } else if (ipk >= 2.50 && ipk < 3.00) {
+    return 'Baik';
+  } else if (ipk >= 2.00 && ipk < 2.50) {
+    return 'Cukup';
+  } else if (ipk < 2.00) {
+    return 'Kurang';
+  }
+  return 'Tidak Terkategorikan';
+}
+
+// GET - Ambil data mahasiswa dengan IPK dan filter tahun angkatan serta kategori IPK untuk tabel detail
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+    const kategoriIPK = searchParams.get('kategori_ipk');
+
+    let query = supabase
+      .from('mahasiswa')
+      .select('nim, nama, ipk, tahun_angkatan')
+      .not('ipk', 'is', null) // Hanya ambil mahasiswa yang memiliki IPK
+      .order('ipk', { ascending: false }); // Urutkan berdasarkan IPK tertinggi
+
+    // Jika ada filter tahun angkatan, terapkan filter
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      query = query.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      console.error('Error fetching data:', error);
+      return NextResponse.json(
+        { message: 'Failed to fetch data', error: error.message }, 
+        { status: 500 }
+      );
+    }
+
+    // Filter berdasarkan kategori IPK jika diberikan
+    let filteredData = (data || []) as any[];
+    
+    if (kategoriIPK && kategoriIPK !== 'all') {
+      filteredData = filteredData.filter(item => {
+        const ipk = Number(item.ipk);
+        if (isNaN(ipk)) return false;
+        
+        const kategori = getKategoriIPK(ipk);
+        return kategori === kategoriIPK;
+      });
+    }
+
+    // Transform data untuk memastikan format yang benar
+    const transformedData: MahasiswaKategoriIPK[] = filteredData.map((item: any) => ({
+      nim: item.nim,
+      nama: item.nama,
+      tahun_angkatan: Number(item.tahun_angkatan),
+      ipk: Number(item.ipk)
+    }));
+
+    return NextResponse.json(transformedData, {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error in tabeldetail/kategori-ipk API:', error);
+    return NextResponse.json(
+      { message: 'Internal Server Error' }, 
+      { status: 500 }
+    );
+  }
+}
+

app/api/tabeldetail/terancam-do/route.ts

@@ -0,0 +1,241 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+const MANDATORY = [
+  'UMG-55201-105', // Pendidikan Agama
+  'UMG-55201-101', // Pendidikan Pancasila
+  'UMG-55201-104', // Kewarganegaraan
+  'UMG-55201-102', // Bahasa Indonesia
+];
+
+interface MahasiswaTerancamDO {
+  nim: string;
+  nama: string;
+  tahun_angkatan: number;
+  ipk: number | null;
+  semester: number;
+  sks_total: number | null;
+  alasan_do: string;
+}
+
+// GET - Ambil data detail mahasiswa terancam DO dengan alasan untuk tabel detail
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahunAngkatan = searchParams.get('tahun_angkatan');
+
+    // 1. Ambil data mahasiswa
+    let mahasiswaQuery = supabase
+      .from('mahasiswa')
+      .select('id_mahasiswa, nim, nama, tahun_angkatan, ipk, semester');
+
+    // Jika ada filter tahun angkatan, terapkan filter
+    if (tahunAngkatan && tahunAngkatan !== 'all') {
+      mahasiswaQuery = mahasiswaQuery.eq('tahun_angkatan', parseInt(tahunAngkatan));
+    }
+
+    const { data: mahasiswa, error: errMhs } = await mahasiswaQuery;
+
+    if (errMhs) throw errMhs;
+
+    // 2. Ambil semua nilai + info mata kuliah
+    const { data: nilai, error: errNilai } = await supabase
+      .from('nilai_mahasiswa')
+      .select('id_mahasiswa, nilai_huruf, nilai_angka, mata_kuliah(kode_mk, sks)');
+
+    if (errNilai) throw errNilai;
+
+    // 3. Kelompokkan nilai per mahasiswa (mirip CTE total_sks & cekmk_wajib)
+    const nilaiMap = new Map<number, any[]>();
+    nilai?.forEach((n) => {
+      if (!nilaiMap.has(n.id_mahasiswa)) nilaiMap.set(n.id_mahasiswa, []);
+      nilaiMap.get(n.id_mahasiswa)!.push(n);
+    });
+
+    // Array untuk menyimpan hasil akhir
+    const hasil: MahasiswaTerancamDO[] = [];
+
+    for (const m of mahasiswa ?? []) {
+      const tahun_angkatan = m.tahun_angkatan;
+      if (!tahun_angkatan) continue;
+
+      const list = nilaiMap.get(m.id_mahasiswa) ?? [];
+      const sem = m.semester ?? 0;
+
+      // ipk bisa NULL → jangan dipaksa jadi 0
+      const ipk = m.ipk === null ? null : Number(m.ipk);
+
+      // ==== replikasi CTE total_sks ====
+      let sksTotal: number | null = null;
+      let sksD: number | null = null;
+      let jumlahE: number | null = null;
+      let lulusTA1: number | null = null;
+      let lulusTA2: number | null = null;
+      let minWajib: number | null = null;
+
+      if (list.length > 0) {
+        sksTotal = 0;
+        sksD = 0;
+        jumlahE = 0;
+
+        for (const n of list) {
+          const mk = n.mata_kuliah;
+          if (!mk) continue;
+
+          const sks = mk.sks ?? 0;
+          const huruf = n.nilai_huruf;
+          const angka = n.nilai_angka;
+
+          // SKS total: hanya nilai != E
+          if (huruf !== 'E') {
+            sksTotal! += sks;
+          }
+
+          // SKS D/D+
+          if (huruf === 'D' || huruf === 'D+') {
+            sksD! += sks;
+          }
+
+          // jumlah E
+          if (huruf === 'E') {
+            jumlahE! += 1;
+          }
+
+          // nilai minimal mk wajib (MIN dengan FILTER)
+          if (MANDATORY.includes(mk.kode_mk) && angka !== null) {
+            if (minWajib === null || angka < minWajib) {
+              minWajib = angka;
+            }
+          }
+
+          // TA1 & TA2
+          if (mk.kode_mk === 'INF-55201-406') {
+            if (lulusTA1 === null) {
+              lulusTA1 = 0;
+            }
+            if (angka !== null && angka >= 2.0) {
+              lulusTA1 = 1;
+            }
+          }
+          if (mk.kode_mk === 'INF-55201-407') {
+            if (lulusTA2 === null) {
+              lulusTA2 = 0;
+            }
+            if (angka !== null && angka >= 2.0) {
+              lulusTA2 = 1;
+            }
+          }
+        }
+      }
+
+      // ==== Evaluasi kondisi DO dan kumpulkan alasan ====
+      const alasanList: string[] = [];
+      let isDO = false;
+
+      // Evaluasi 4 semester: semester BETWEEN 4 AND 7 AND (sks_total < 40 OR ipk <= 2.50)
+      if (
+        sem >= 4 &&
+        sem <= 7 &&
+        sksTotal !== null &&
+        (
+          sksTotal < 40 ||
+          (ipk !== null && ipk <= 2.50)
+        )
+      ) {
+        isDO = true;
+        if (sksTotal < 40) {
+          alasanList.push('SKS kurang dari 40 pada evaluasi semester 4');
+        }
+        if (ipk !== null && ipk <= 2.50) {
+          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 4');
+        }
+      }
+      // Evaluasi 8 semester: semester BETWEEN 8 AND 13 AND (sks_total < 80 OR ipk <= 2.50)
+      else if (
+        sem >= 8 &&
+        sem <= 13 &&
+        sksTotal !== null &&
+        (
+          sksTotal < 80 ||
+          (ipk !== null && ipk <= 2.50)
+        )
+      ) {
+        isDO = true;
+        if (sksTotal < 80) {
+          alasanList.push('SKS kurang dari 80 pada evaluasi semester 8');
+        }
+        if (ipk !== null && ipk <= 2.50) {
+          alasanList.push('IPK kurang dari 2.50 pada evaluasi semester 8');
+        }
+      }
+      // Evaluasi akhir masa studi: semester = 14
+      else if (
+        sem === 14 &&
+        sksTotal !== null &&
+        (
+          sksTotal < 144 ||
+          (ipk !== null && ipk <= 2.00) ||
+          (jumlahE !== null && jumlahE > 0) ||
+          (sksD !== null && sksD > 14) ||
+          (minWajib !== null && minWajib < 2.00) ||
+          lulusTA1 === 0 ||
+          lulusTA2 === 0
+        )
+      ) {
+        isDO = true;
+        if (sksTotal < 144) {
+          alasanList.push('Belum mencapai 144 SKS pada akhir masa studi');
+        }
+        if (ipk !== null && ipk <= 2.00) {
+          alasanList.push('IPK di bawah 2.00 pada akhir masa studi');
+        }
+        if (jumlahE !== null && jumlahE > 0) {
+          alasanList.push('Memiliki nilai E pada akhir masa studi');
+        }
+        if (sksD !== null && sksD > 14) {
+          alasanList.push('Total SKS dari nilai D lebih dari 14 SKS');
+        }
+        if (minWajib !== null && minWajib < 2.00) {
+          alasanList.push('Nilai minimal mata kuliah wajib di bawah C');
+        }
+        if (lulusTA1 === 0) {
+          alasanList.push('Belum lulus Tugas Akhir 1 (INF-55201-406)');
+        }
+        if (lulusTA2 === 0) {
+          alasanList.push('Belum lulus Tugas Akhir 2 (INF-55201-407)');
+        }
+      }
+
+      // Hanya tambahkan ke hasil jika terancam DO
+      if (isDO) {
+        hasil.push({
+          nim: m.nim,
+          nama: m.nama,
+          tahun_angkatan: Number(tahun_angkatan),
+          ipk: ipk,
+          semester: sem,
+          sks_total: sksTotal,
+          alasan_do: alasanList.join('; '),
+        });
+      }
+    }
+
+    // Urutkan berdasarkan tahun_angkatan ASC
+    hasil.sort((a, b) => a.tahun_angkatan - b.tahun_angkatan);
+
+    return NextResponse.json(hasil, {
+      headers: {
+        'Cache-Control': 'no-cache, no-store, must-revalidate',
+        'Pragma': 'no-cache',
+        'Expires': '0',
+      },
+    });
+  } catch (error) {
+    console.error('Error in tabeldetail/terancam-do API:', error);
+    return NextResponse.json(
+      { message: 'Internal Server Error', error: error instanceof Error ? error.message : 'Unknown error' },
+      { status: 500 }
+    );
+  }
+}
+

app/dashboard/page.tsx

@@ -15,6 +15,7 @@ import KelompokKeahlianLulusTepatPieChart from "@/components/chartsDashboard/kkd
 import KelompokKeahlianPieChartPerAngkatan from "@/components/chartsDashboard/kkdashboardpiechartperangkatan";
 import StatusMahasiswaPieChartPerangkatan from "@/components/chartsDashboard/StatusMahasiswaPieChartPerangkatan";
 import MasaStudiLulusChart from "@/components/chartsDashboard/masastudiluluschart";
+import TerancamDOChart from "@/components/chartsDashboard/TerancamDOChart";
 import NamaBeasiswaChart from "@/components/chartsDashboard/NamaBeasiswaDashChart";
 import NamaBeasiswaDashPieChartPerangkatan from "@/components/chartsDashboard/NamaBeasiswaDashPieChartPerangkatan";
 import TingkatPrestasiChart from "@/components/chartsDashboard/TingkatPrestasiDashChart";
@@ -23,6 +24,8 @@ import TingkatPrestasiPieChartDash from "@/components/chartsDashboard/TingkatPre
 import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
 import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
 import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
+import DistribusiIPKChart from "@/components/chartsDashboard/DistribusiIPKChart";
+import DistribusiIPKChartPerangkatan from "@/components/chartsDashboard/DistribusiIPKChartPerangkatan";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import {
@@ -135,8 +138,10 @@ export default function TotalMahasiswaPage() {
   // Navigation menu items for per year data
   const perYearNavItems = [
     { id: 'overview-year', label: 'Jumlah & Status per Angkatan' },
+    
     { id: 'status-year', label: 'Jenis Pendaftaran & Kelompok Keahlian' },
     { id: 'achievement-year', label: 'Beasiswa & Prestasi per Angkatan' },
+    { id: 'academic-year', label: 'Distribusi IPK per Angkatan' },
     { id: 'demographics-year', label: 'Asal Kabupaten per Angkatan' },
     { id: 'bimbingan-dosen-year', label: 'Bimbingan Dosen' }
   ];
@@ -213,6 +218,8 @@ export default function TotalMahasiswaPage() {
           <div id="study-duration" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
             <LulusTepatWaktuChart selectedYear={selectedYear} />
             <MasaStudiLulusChart selectedYear={selectedYear} />
+            <TerancamDOChart selectedYear={selectedYear} />
+            <DistribusiIPKChart selectedYear={selectedYear} />
           </div>
 
           {/* Expertise & Achievement Section */}
@@ -260,6 +267,11 @@ export default function TotalMahasiswaPage() {
             <TingkatPrestasiPieChartDash selectedYear={selectedYear} />
           </div>
 
+          {/* Distribusi IPK Section */}
+          <div id="academic-year" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
+            <DistribusiIPKChartPerangkatan selectedYear={selectedYear} />
+          </div>
+
           {/* Demographics Section */}
           <div id="demographics-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
             <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />

app/detail/kategori-ipk/page.tsx

@@ -0,0 +1,68 @@
+'use client';
+
+import { useState } from "react";
+import DistribusiIPKChart from "@/components/chartsDashboard/DistribusiIPKChart";
+import DistribusiIPKChartPerangkatan from "@/components/chartsDashboard/DistribusiIPKChartPerangkatan";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelKategoriIPKMahasiswa from "@/components/chartstable/tabelkategoriipkmahasiswa";
+
+export default function KategoriIPKDetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau chart per angkatan ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <DistribusiIPKChart 
+              selectedYear={selectedYear}
+              height="h-[400px] sm:h-[400px] lg:h-[400px]"
+              showDetailButton={false}
+            />
+          ) : (
+            <DistribusiIPKChartPerangkatan 
+              selectedYear={selectedYear}
+            />
+          )}
+        </div>
+
+        {/* Tabel Section */}
+        <TabelKategoriIPKMahasiswa selectedYear={selectedYear} />
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-1 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Distribusi IPK Mahasiswa
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan distribusi mahasiswa berdasarkan kategori IPK per tahun angkatan</li>
+                <li>• IPK dikategorikan menjadi empat kelompok berdasarkan skala penilaian:</li>
+                <li className="ml-4">- <strong>4.00 - 3.00 Sangat Baik</strong>: Mahasiswa dengan IPK sangat baik</li>
+                <li className="ml-4">- <strong>2.99 - 2.50 Baik</strong>: Mahasiswa dengan IPK baik</li>
+                <li className="ml-4">- <strong>2.49 - 2.00 Cukup</strong>: Mahasiswa dengan IPK cukup</li>
+                <li className="ml-4">- <strong>&lt; 2.00 Kurang</strong>: Mahasiswa dengan IPK kurang</li>
+                <li>• Grafik stacked bar chart horizontal yang menunjukkan persentase setiap kategori IPK per tahun angkatan</li>
+                <li>• Data dapat di-download dan dianalisis untuk monitoring kualitas akademik mahasiswa</li>
+                <li>• Filter berdasarkan tahun angkatan tersedia untuk analisis per angkatan</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+

app/detail/terancam-do/page.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { useState } from "react";
+import TerancamDOChart from "@/components/chartsDashboard/TerancamDOChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+import TabelNamaTerancamDO from "@/components/chartstable/tabelnamaterancamdo";
+
+export default function TerancamDODetailPage() {
+  const [selectedYear, setSelectedYear] = useState<string>("all");
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
+      <div className="container mx-auto max-w-7xl space-y-2">
+        {/* Filter Section */}
+        <FilterTahunAngkatan 
+          selectedYear={selectedYear}
+          onYearChange={setSelectedYear}
+        />
+
+        {/* Chart Section */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          <TerancamDOChart 
+            selectedYear={selectedYear}
+            height="h-[400px] sm:h-[400px] lg:h-[400px]"
+            showDetailButton={false}
+          />
+        </div>
+
+        {/* Tabel Section */}
+        <TabelNamaTerancamDO selectedYear={selectedYear} />
+
+        {/* Information Section */}
+        <div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
+          <h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
+            Informasi Visualisasi
+          </h2>
+          <div className="grid md:grid-cols-1 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Mahasiswa Terancam Drop Out
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan jumlah mahasiswa yang terancam drop out (DO) per tahun angkatan</li>
+                <li>• Evaluasi dilakukan berdasarkan pedoman akademik UNTAN tahun 2023/2024</li>
+                <li>• Kriteria evaluasi terdiri dari tiga tahap:</li>
+                <li className="ml-4">- Evaluasi 4 semester: SKS minimal 40 dan IPK &gt; 2.50</li>
+                <li className="ml-4">- Evaluasi 8 semester: SKS minimal 80 dan IPK &gt; 2.50</li>
+                <li className="ml-4">- Evaluasi akhir masa studi: SKS minimal 144, IPK &gt; 2.00, tidak ada nilai E, nilai D maksimal 10%, nilai mata kuliah wajib minimal C, dan lulus tugas akhir</li>
+                <li>• Grafik batang vertikal yang menunjukkan jumlah mahasiswa terancam DO per tahun angkatan</li>
+                <li>• Data dapat di-download dan dianalisis untuk monitoring akademik</li>
+              </ul>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}