ayo bisa

app/api/keloladata/data-dosen/route.ts

@@ -0,0 +1,251 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+// GET - Ambil semua data dosen atau filter berdasarkan kriteria
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
+    const search = searchParams.get('search');
+
+    // Jika ID diberikan, ambil data dosen spesifik berdasarkan ID
+    if (id) {
+      const { data, error } = await supabase
+        .from('dosen')
+        .select('*')
+        .eq('id_dosen', id)
+        .single();
+
+      if (error || !data) {
+        return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
+      }
+
+      return NextResponse.json(data);
+    }
+
+    // Bangun query berdasarkan filter
+    let query = supabase.from('dosen').select('*');
+
+    // Tambahkan kondisi pencarian jika diberikan
+    if (search) {
+      query = query.or(`nama_dosen.ilike.%${search}%,nip.ilike.%${search}%`);
+    }
+
+    // Tambahkan pengurutan berdasarkan nama dosen
+    query = query.order('nama_dosen', { ascending: true });
+
+    // Eksekusi query
+    const { data, error } = await query;
+
+    if (error) {
+      console.error('Error fetching data:', error);
+      return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+    }
+
+    return NextResponse.json(data);
+  } catch (error) {
+    console.error('Error fetching data:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
+
+// POST - Buat data dosen baru
+export async function POST(request: NextRequest) {
+  try {
+    const body = await request.json();
+    const {
+      nama_dosen,
+      nip
+    } = body;
+
+    // Validate required fields
+    if (!nama_dosen || !nip) {
+      return NextResponse.json(
+        { message: 'Missing required fields: nama_dosen, nip' },
+        { status: 400 }
+      );
+    }
+
+    // Validate NIP length (harus 18 karakter)
+    if (nip.length !== 18) {
+      return NextResponse.json(
+        { message: 'NIP harus terdiri dari 18 karakter' },
+        { status: 400 }
+      );
+    }
+
+    // Cek apakah NIP sudah ada
+    const { data: existingDosen, error: checkError } = await supabase
+      .from('dosen')
+      .select('nip')
+      .eq('nip', nip)
+      .single();
+
+    if (!checkError && existingDosen) {
+      return NextResponse.json(
+        { message: 'NIP sudah terdaftar dalam database' },
+        { status: 409 }
+      );
+    }
+
+    // Insert data dosen baru
+    const { data, error } = await supabase
+      .from('dosen')
+      .insert({
+        nama_dosen,
+        nip
+      })
+      .select()
+      .single();
+
+    if (error) {
+      console.error('Error creating dosen:', error);
+      return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+    }
+
+    return NextResponse.json(
+      { 
+        message: `Dosen berhasil ditambahkan`, 
+        id: data.id_dosen 
+      },
+      { status: 201 }
+    );
+  } catch (error) {
+    console.error('Error creating dosen:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
+
+// PUT - Update data dosen yang sudah ada
+export async function PUT(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
+
+    if (!id) {
+      return NextResponse.json({ message: 'ID is required' }, { status: 400 });
+    }
+
+    const body = await request.json();
+    const {
+      nama_dosen,
+      nip
+    } = body;
+
+    // Validate required fields
+    if (!nama_dosen || !nip) {
+      return NextResponse.json(
+        { message: 'Missing required fields: nama_dosen, nip' },
+        { status: 400 }
+      );
+    }
+
+    // Validate NIP length (harus 18 karakter)
+    if (nip.length !== 18) {
+      return NextResponse.json(
+        { message: 'NIP harus terdiri dari 18 karakter' },
+        { status: 400 }
+      );
+    }
+
+    // Cek apakah dosen ada
+    const { data: existing, error: checkError } = await supabase
+      .from('dosen')
+      .select('*')
+      .eq('id_dosen', id)
+      .single();
+
+    if (checkError || !existing) {
+      return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
+    }
+
+    // Cek apakah NIP sudah ada untuk dosen lain
+    const { data: existingNip, error: nipCheckError } = await supabase
+      .from('dosen')
+      .select('id_dosen, nip')
+      .eq('nip', nip)
+      .neq('id_dosen', id)
+      .single();
+
+    if (!nipCheckError && existingNip) {
+      return NextResponse.json(
+        { message: 'NIP sudah digunakan oleh dosen lain' },
+        { status: 409 }
+      );
+    }
+
+    // Update dosen
+    const { error } = await supabase
+      .from('dosen')
+      .update({
+        nama_dosen,
+        nip
+      })
+      .eq('id_dosen', id);
+
+    if (error) {
+      console.error('Error updating dosen:', error);
+      return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+    }
+
+    return NextResponse.json({ 
+      message: `Dosen berhasil diperbarui` 
+    });
+  } catch (error) {
+    console.error('Error updating dosen:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}
+
+// DELETE - Hapus data dosen
+export async function DELETE(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const id = searchParams.get('id');
+
+    if (!id) {
+      return NextResponse.json({ message: 'ID is required' }, { status: 400 });
+    }
+
+    // Cek apakah dosen ada
+    const { data: existing, error: checkError } = await supabase
+      .from('dosen')
+      .select('id_dosen')
+      .eq('id_dosen', id)
+      .single();
+
+    if (checkError || !existing) {
+      return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
+    }
+
+    // Cek apakah dosen sedang digunakan sebagai pembimbing
+    const { data: bimbinganCheck, error: bimbinganError } = await supabase
+      .from('mahasiswa')
+      .select('id_mahasiswa')
+      .or(`pembimbing1_id.eq.${id},pembimbing2_id.eq.${id}`)
+      .limit(1);
+
+    if (!bimbinganError && bimbinganCheck && bimbinganCheck.length > 0) {
+      return NextResponse.json(
+        { message: 'Tidak dapat menghapus dosen yang sedang menjadi pembimbing mahasiswa' },
+        { status: 409 }
+      );
+    }
+
+    // Hapus dosen
+    const { error } = await supabase
+      .from('dosen')
+      .delete()
+      .eq('id_dosen', id);
+
+    if (error) {
+      console.error('Error deleting dosen:', error);
+      return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+    }
+
+    return NextResponse.json({ message: 'Dosen berhasil dihapus' });
+  } catch (error) {
+    console.error('Error deleting dosen:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}

app/api/keloladata/data-dosen/upload/route.ts

@@ -0,0 +1,167 @@
+import { NextRequest, NextResponse } from 'next/server';
+import * as XLSX from 'xlsx';
+import supabase from '@/lib/db';
+
+// POST - Upload dan proses file Excel/CSV untuk data dosen
+export async function POST(request: NextRequest) {
+  try {
+    // Ambil data formulir dari request
+    const formData = await request.formData();
+    const file = formData.get('file') as File;
+
+    if (!file) {
+      return NextResponse.json(
+        { message: 'File is required' },
+        { status: 400 }
+      );
+    }
+
+    // Validasi tipe file (Excel atau CSV)
+    const allowedTypes = [
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
+      'application/vnd.ms-excel', // .xls
+      'text/csv' // .csv
+    ];
+
+    if (!allowedTypes.includes(file.type)) {
+      return NextResponse.json(
+        { message: 'File type not supported. Please upload Excel (.xlsx, .xls) or CSV file.' },
+        { status: 400 }
+      );
+    }
+
+    // Baca file sebagai buffer
+    const buffer = Buffer.from(await file.arrayBuffer());
+    
+    // Parse file menggunakan XLSX
+    const workbook = XLSX.read(buffer, { type: 'buffer' });
+    const sheetName = workbook.SheetNames[0];
+    const worksheet = workbook.Sheets[sheetName];
+    
+    // Konversi ke JSON
+    const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
+    
+    if (jsonData.length === 0) {
+      return NextResponse.json(
+        { message: 'File is empty' },
+        { status: 400 }
+      );
+    }
+
+    // Ambil header dari baris pertama
+    const headers = jsonData[0] as string[];
+    const dataRows = jsonData.slice(1);
+
+    // Validasi header yang diperlukan
+    const requiredHeaders = ['nama_dosen', 'nip'];
+    const missingHeaders = requiredHeaders.filter(header => 
+      !headers.some(h => h && h.toString().toLowerCase().includes(header.toLowerCase()))
+    );
+
+    if (missingHeaders.length > 0) {
+      return NextResponse.json(
+        { message: `Missing required columns: ${missingHeaders.join(', ')}` },
+        { status: 400 }
+      );
+    }
+
+    // Mapping index kolom
+    const getColumnIndex = (headerName: string) => {
+      return headers.findIndex(h => h && h.toString().toLowerCase().includes(headerName.toLowerCase()));
+    };
+
+    const nama_dosenIndex = getColumnIndex('nama_dosen');
+    const nipIndex = getColumnIndex('nip');
+
+    // Proses setiap baris data
+    const results = {
+      success: 0,
+      failed: 0,
+      errors: [] as string[]
+    };
+
+    for (let i = 0; i < dataRows.length; i++) {
+      const row = dataRows[i] as any[];
+      const rowNumber = i + 2; // +2 karena index dimulai dari 0 dan ada header
+
+      try {
+        // Ekstrak data dari row
+        const nama_dosen = row[nama_dosenIndex]?.toString().trim();
+        const nip = row[nipIndex]?.toString().trim();
+
+        // Validasi data yang diperlukan
+        if (!nama_dosen || !nip) {
+          results.failed++;
+          results.errors.push(`Row ${rowNumber}: Missing required data (nama_dosen or nip)`);
+          continue;
+        }
+
+        // Validasi panjang NIP
+        if (nip.length !== 18) {
+          results.failed++;
+          results.errors.push(`Row ${rowNumber}: NIP harus terdiri dari 18 karakter`);
+          continue;
+        }
+
+        // Cek apakah NIP sudah ada
+        const { data: existingDosen, error: checkError } = await supabase
+          .from('dosen')
+          .select('nip')
+          .eq('nip', nip)
+          .single();
+
+        if (!checkError && existingDosen) {
+          // Update data yang sudah ada
+          const { error: updateError } = await supabase
+            .from('dosen')
+            .update({
+              nama_dosen
+            })
+            .eq('nip', nip);
+
+          if (updateError) {
+            results.failed++;
+            results.errors.push(`Row ${rowNumber}: Error updating dosen with NIP ${nip}: ${updateError.message}`);
+            continue;
+          }
+        } else {
+          // Insert data baru
+          const { error: insertError } = await supabase
+            .from('dosen')
+            .insert({
+              nama_dosen,
+              nip
+            });
+
+          if (insertError) {
+            results.failed++;
+            results.errors.push(`Row ${rowNumber}: Error inserting dosen with NIP ${nip}: ${insertError.message}`);
+            continue;
+          }
+        }
+
+        results.success++;
+      } catch (error) {
+        results.failed++;
+        results.errors.push(`Row ${rowNumber}: Unexpected error: ${error}`);
+      }
+    }
+
+    return NextResponse.json({
+      message: `Upload completed. Success: ${results.success}, Failed: ${results.failed}`,
+      details: {
+        totalRows: dataRows.length,
+        successCount: results.success,
+        failedCount: results.failed,
+        errors: results.errors
+      }
+    });
+
+  } catch (error) {
+    console.error('Error processing file:', error);
+    return NextResponse.json(
+      { message: 'Error processing file' },
+      { status: 500 }
+    );
+  }
+}

app/api/keloladata/data-mahasiswa/route.ts

@@ -13,7 +13,9 @@ export async function GET(request: NextRequest) {
         .from('mahasiswa')
         .select(`
           *,
-          kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok)
+          kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok),
+          dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
+          dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
         `)
         .eq('nim', nim)
         .single();
@@ -25,9 +27,13 @@ export async function GET(request: NextRequest) {
       // Transformasi data untuk meratakan field yang di-join
       const transformedData = {
         ...data,
-        nama_kelompok_keahlian: data.kelompok_keahlian?.nama_kelompok || null
+        nama_kelompok_keahlian: data.kelompok_keahlian?.nama_kelompok || null,
+        nama_pembimbing_1: data.dosen_pembimbing_1?.nama_dosen || null,
+        nama_pembimbing_2: data.dosen_pembimbing_2?.nama_dosen || null
       };
       delete transformedData.kelompok_keahlian;
+      delete transformedData.dosen_pembimbing_1;
+      delete transformedData.dosen_pembimbing_2;
 
       return NextResponse.json(transformedData);
     } else {
@@ -36,7 +42,9 @@ export async function GET(request: NextRequest) {
         .from('mahasiswa')
         .select(`
           *,
-          kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok)
+          kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok),
+          dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
+          dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
         `)
         .order('nim');
 
@@ -48,8 +56,10 @@ export async function GET(request: NextRequest) {
       // Transformasi data untuk meratakan field yang di-join
       const transformedData = data.map(item => ({
         ...item,
-        nama_kelompok_keahlian: item.kelompok_keahlian?.nama_kelompok || null
+        nama_kelompok_keahlian: item.kelompok_keahlian?.nama_kelompok || null,
-      })).map(({ kelompok_keahlian, ...rest }) => rest);
+        nama_pembimbing_1: item.dosen_pembimbing_1?.nama_dosen || null,
+        nama_pembimbing_2: item.dosen_pembimbing_2?.nama_dosen || null
+      })).map(({ kelompok_keahlian, dosen_pembimbing_1, dosen_pembimbing_2, ...rest }) => rest);
 
       return NextResponse.json(transformedData);
     }
@@ -75,7 +85,10 @@ export async function POST(request: NextRequest) {
       ipk,
       id_kelompok_keahlian,
       status_kuliah,
-      semester
+      semester,
+      pembimbing_1,
+      pembimbing_2,
+      status_bimbingan
     } = body;
 
     // Validasi field yang wajib diisi
@@ -115,7 +128,10 @@ export async function POST(request: NextRequest) {
         ipk: ipk || null,
         id_kelompok_keahlian: id_kelompok_keahlian || null,
         status_kuliah: status_kuliah || "Aktif",
-        semester: semester || 1
+        semester: semester || 1,
+        pembimbing_1: pembimbing_1 || null,
+        pembimbing_2: pembimbing_2 || null,
+        status_bimbingan: status_bimbingan || "Belum Selesai"
       })
       .select()
       .single();
@@ -157,7 +173,10 @@ export async function PUT(request: NextRequest) {
       ipk,
       id_kelompok_keahlian,
       status_kuliah,
-      semester
+      semester,
+      pembimbing_1,
+      pembimbing_2,
+      status_bimbingan
     } = body;
 
     // Cek apakah mahasiswa ada
@@ -185,7 +204,10 @@ export async function PUT(request: NextRequest) {
         ipk: ipk || existing.ipk,
         id_kelompok_keahlian: id_kelompok_keahlian || existing.id_kelompok_keahlian,
         status_kuliah: status_kuliah || existing.status_kuliah,
-        semester: semester || existing.semester
+        semester: semester || existing.semester,
+        pembimbing_1: pembimbing_1 !== undefined ? pembimbing_1 : existing.pembimbing_1,
+        pembimbing_2: pembimbing_2 !== undefined ? pembimbing_2 : existing.pembimbing_2,
+        status_bimbingan: status_bimbingan || existing.status_bimbingan
       })
       .eq('nim', nim);
 

app/api/keloladata/data-mahasiswa/upload/route.ts

@@ -120,7 +120,10 @@ function processData(headers: string[], rows: any[][]) {
     ipk: ['ipk', 'gpa'],
     kelompok_keahlian: ['kelompok_keahlian', 'kk', 'keahlian', 'id_kk'],
     status_kuliah: ['status_kuliah', 'status', 'status_mahasiswa'],
-    semester: ['semester', 'sem']
+    semester: ['semester', 'sem'],
+    pembimbing_1_nip: ['pembimbing_1_nip', 'nip_pembimbing_1', 'pembimbing1_nip', 'dosen_pembimbing_1'],
+    pembimbing_2_nip: ['pembimbing_2_nip', 'nip_pembimbing_2', 'pembimbing2_nip', 'dosen_pembimbing_2'],
+    status_bimbingan: ['status_bimbingan', 'status_guidance', 'bimbingan_status']
   };
   
   // Map actual headers to expected headers
@@ -205,6 +208,22 @@ function processData(headers: string[], rows: any[][]) {
         }
       }
       
+      // Handle pembimbing NIP
+      const pembimbing_1_nip = headerMap.pembimbing_1_nip !== undefined ? String(values[headerMap.pembimbing_1_nip] || '') || null : null;
+      const pembimbing_2_nip = headerMap.pembimbing_2_nip !== undefined ? String(values[headerMap.pembimbing_2_nip] || '') || null : null;
+      
+      // Handle status bimbingan
+      let status_bimbingan = 'Belum Selesai'; // Default value
+      if (headerMap.status_bimbingan !== undefined && values[headerMap.status_bimbingan] !== undefined) {
+        const statusValue = String(values[headerMap.status_bimbingan] || '').trim();
+        if (statusValue) {
+          const mappedStatus = mapStatusBimbingan(statusValue);
+          if (mappedStatus) {
+            status_bimbingan = mappedStatus;
+          }
+        }
+      }
+      
       // Validate required fields
       if (!nim || !nama || !jenis_kelamin || !tahun_angkatan) {
         errors.push(`Row ${i+1}: Missing required fields`);
@@ -248,7 +267,10 @@ function processData(headers: string[], rows: any[][]) {
         ipk,
         kelompok_keahlian_id,
         status_kuliah,
-        semester
+        semester,
+        pembimbing_1_nip,
+        pembimbing_2_nip,
+        status_bimbingan
       });
       
     } catch (error) {
@@ -301,6 +323,23 @@ function mapStatus(value: string): 'Aktif' | 'Cuti' | 'Lulus' | 'Non-Aktif' | nu
   return null;
 }
 
+// Function to map status bimbingan values to standardized format
+function mapStatusBimbingan(value: string): 'Selesai' | 'Belum Selesai' | null {
+  if (!value) return null;
+  
+  const lowerValue = value.toLowerCase();
+  
+  if (['selesai', 'completed', 'done', 'finished', 's', '1'].includes(lowerValue)) {
+    return 'Selesai';
+  }
+  
+  if (['belum selesai', 'belum_selesai', 'not completed', 'incomplete', 'ongoing', 'in progress', 'b', '0'].includes(lowerValue)) {
+    return 'Belum Selesai';
+  }
+  
+  return null;
+}
+
 // Fungsi untuk insert data ke database
 async function insertDataToDatabase(data: any[]) {
   let insertedCount = 0;
@@ -315,6 +354,28 @@ async function insertDataToDatabase(data: any[]) {
         .eq('nim', item.nim)
         .single();
       
+      // Lookup pembimbing berdasarkan NIP
+      let pembimbing_1_id = null;
+      let pembimbing_2_id = null;
+      
+      if (item.pembimbing_1_nip) {
+        const { data: dosen1 } = await supabase
+          .from('dosen')
+          .select('id_dosen')
+          .eq('nip', item.pembimbing_1_nip)
+          .single();
+        pembimbing_1_id = dosen1?.id_dosen || null;
+      }
+      
+      if (item.pembimbing_2_nip) {
+        const { data: dosen2 } = await supabase
+          .from('dosen')
+          .select('id_dosen')
+          .eq('nip', item.pembimbing_2_nip)
+          .single();
+        pembimbing_2_id = dosen2?.id_dosen || null;
+      }
+      
       const mahasiswaData = {
         nama: item.nama,
         jk: item.jk,
@@ -326,7 +387,10 @@ async function insertDataToDatabase(data: any[]) {
         ipk: item.ipk,
         id_kelompok_keahlian: item.kelompok_keahlian_id,
         status_kuliah: item.status_kuliah,
-        semester: item.semester
+        semester: item.semester,
+        pembimbing_1: pembimbing_1_id,
+        pembimbing_2: pembimbing_2_id,
+        status_bimbingan: item.status_bimbingan
       };
       
       if (existingData) {

app/api/mahasiswa/bimbingan-dosen/route.ts

@@ -0,0 +1,101 @@
+import { NextRequest, NextResponse } from 'next/server';
+import supabase from '@/lib/db';
+
+// GET - Ambil data bimbingan dosen berdasarkan status bimbingan
+export async function GET(request: NextRequest) {
+  try {
+    const { searchParams } = new URL(request.url);
+    const tahun_angkatan = searchParams.get('tahun_angkatan');
+
+    let query = supabase
+      .from('mahasiswa')
+      .select(`
+        pembimbing_1,
+        pembimbing_2,
+        status_bimbingan,
+        tahun_angkatan,
+        dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
+        dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
+      `);
+
+    // Filter berdasarkan tahun angkatan jika diberikan
+    if (tahun_angkatan && tahun_angkatan !== 'all') {
+      query = query.eq('tahun_angkatan', tahun_angkatan);
+    }
+
+    const { data, error } = await query;
+
+    if (error) {
+      console.error('Error fetching bimbingan data:', error);
+      return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+    }
+
+    // Proses data untuk menggabungkan pembimbing 1 dan 2
+    const bimbinganMap = new Map();
+
+    data.forEach(mahasiswa => {
+      // Proses pembimbing 1
+      if (mahasiswa.pembimbing_1 && mahasiswa.dosen_pembimbing_1) {
+        const dosenId = (mahasiswa.dosen_pembimbing_1 as any).id_dosen;
+        const dosenNama = (mahasiswa.dosen_pembimbing_1 as any).nama_dosen;
+        const status = mahasiswa.status_bimbingan;
+
+        if (!bimbinganMap.has(dosenId)) {
+          bimbinganMap.set(dosenId, {
+            id_dosen: dosenId,
+            nama_dosen: dosenNama,
+            selesai: 0,
+            belum_selesai: 0
+          });
+        }
+
+        const dosenData = bimbinganMap.get(dosenId);
+        if (dosenData) {
+          if (status === 'Selesai') {
+            dosenData.selesai++;
+          } else {
+            dosenData.belum_selesai++;
+          }
+        }
+      }
+
+      // Proses pembimbing 2
+      if (mahasiswa.pembimbing_2 && mahasiswa.dosen_pembimbing_2) {
+        const dosenId = (mahasiswa.dosen_pembimbing_2 as any).id_dosen;
+        const dosenNama = (mahasiswa.dosen_pembimbing_2 as any).nama_dosen;
+        const status = mahasiswa.status_bimbingan;
+
+        if (!bimbinganMap.has(dosenId)) {
+          bimbinganMap.set(dosenId, {
+            id_dosen: dosenId,
+            nama_dosen: dosenNama,
+            selesai: 0,
+            belum_selesai: 0
+          });
+        }
+
+        const dosenData = bimbinganMap.get(dosenId);
+        if (dosenData) {
+          if (status === 'Selesai') {
+            dosenData.selesai++;
+          } else {
+            dosenData.belum_selesai++;
+          }
+        }
+      }
+    });
+
+    // Konversi Map ke Array dan urutkan berdasarkan nama dosen A-Z
+    const result = Array.from(bimbinganMap.values())
+      .map(dosen => ({
+        ...dosen,
+        total: dosen.selesai + dosen.belum_selesai
+      }))
+      .sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
+
+    return NextResponse.json(result);
+  } catch (error) {
+    console.error('Error fetching bimbingan data:', error);
+    return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
+  }
+}

app/dashboard/page.tsx

@@ -21,6 +21,8 @@ import TingkatPrestasiChart from "@/components/chartsDashboard/TingkatPrestasiDa
 import ProvinsiMahasiswaChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
 import TingkatPrestasiPieChartDash from "@/components/chartsDashboard/TingkatPrestasiPieChartDash";
 import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
+import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
+import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Button } from "@/components/ui/button";
 import {
@@ -82,7 +84,8 @@ export default function TotalMahasiswaPage() {
     { id: 'study-duration', label: 'Kelulusan Tepat Waktu & Masa Studi' },
     { id: 'expertise', label: 'Kelompok Keahlian' },
     { id: 'scholarship', label: 'Beasiswa & Prestasi' },
-    { id: 'demographics', label: 'Asal Kabupaten & Provinsi' }
+    { id: 'demographics', label: 'Asal Kabupaten & Provinsi' },
+    { id: 'bimbingan-dosen', label: 'Bimbingan Dosen' }
   ];
 
   // Navigation menu items for per year data
@@ -90,7 +93,8 @@ export default function TotalMahasiswaPage() {
     { 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: 'demographics-year', label: 'Asal Kabupaten per Angkatan' }
+    { id: 'demographics-year', label: 'Asal Kabupaten per Angkatan' },
+    { id: 'bimbingan-dosen-year', label: 'Bimbingan Dosen' }
   ];
 
   return (
@@ -177,6 +181,10 @@ export default function TotalMahasiswaPage() {
                   <ProvinsiMahasiswaChart />
                 </div>
           </div>
+
+          <div id="bimbingan-dosen" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
+            <BimbinganDosenChart />
+          </div>
         </div>
       ) : (
         <div className="space-y-6">
@@ -198,9 +206,13 @@ export default function TotalMahasiswaPage() {
           </div>
 
           {/* Demographics Section */}
-          <div id="demographics-year" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
+          <div id="demographics-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
             <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
           </div>
+
+          <div id="bimbingan-dosen-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
+            <BimbinganDosenPerAngkatanChart tahunAngkatan={selectedYear} />
+          </div>
         </div>
       )}
 

app/detail/bimbingan-dosen/page.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { useState } from "react";
+import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
+import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
+import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
+
+export default function BimbinganDosenDetailPage() {
+  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 - Enhanced Size */}
+        <div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
+          {/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
+          {selectedYear === "all" ? (
+            <div className="lg:col-span-2">
+              <BimbinganDosenChart 
+                height="h-[600px] sm:h-[600px] lg:h-[600px]"
+                showDetailButton={false}
+              />
+            </div>
+          ) : (
+            <>
+              <BimbinganDosenPerAngkatanChart 
+                tahunAngkatan={selectedYear}
+              />
+            </>
+          )}
+        </div>
+
+        {/* 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-2 gap-6">
+            <div>
+              <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                Grafik Utama (Bimbingan Dosen)
+              </h3>
+              <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                <li>• Menampilkan statistik bimbingan mahasiswa per dosen pembimbing</li>
+                <li>• Data terbagi menjadi dua kategori: "Selesai" dan "Belum Selesai"</li>
+                <li>• Hijau menunjukkan bimbingan selesai, kuning untuk belum selesai</li>
+              </ul>
+            </div>
+            {selectedYear !== "all" && (
+              <div>
+                <h3 className="font-medium text-gray-900 dark:text-white mb-2">
+                  Grafik Per Angkatan ({selectedYear})
+                </h3>
+                <ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
+                  <li>• Menampilkan statistik bimbingan untuk angkatan {selectedYear}</li>
+                  <li>• Data spesifik beban bimbingan dosen per angkatan</li>
+                  <li>• Insight progress penyelesaian bimbingan per tahun angkatan</li>
+                </ul>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

app/keloladata/dosen/page.tsx

@@ -0,0 +1,9 @@
+import DataTableDosen from "@/components/datatable/data-table-dosen";
+
+export default function DosenPage() {
+  return (
+    <div className="container mx-auto p-4 space-y-6">
+      <DataTableDosen />
+    </div>
+  );
+}

app/page.tsx

@@ -105,7 +105,7 @@ export default function DashboardPage() {
 
   return (
     <div className="container mx-auto p-4 space-y-6">
-      <h1 className="text-2xl font-bold mb-8">Visualisasi Data Akademik Mahasiswa Informatika</h1>
+      {/* <h1 className="text-2xl font-bold mb-8">Visualisasi Data Akademik Mahasiswa Informatika</h1> */}
       
       {loading ? (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">

components/charts/AsalDaerahChart.tsx

@@ -50,7 +50,7 @@ export default function AsalDaerahChart({
         distributed: false,
         barHeight: '90%',
         dataLabels: {
-          position: 'top',
+          position: 'center',
         },
       },
     },
@@ -60,10 +60,9 @@ export default function AsalDaerahChart({
         return val.toString();
       },
       style: {
-        fontSize: '14px',
+        fontSize: '12px',
         colors: [theme === 'dark' ? '#fff' : '#000']
       },
-      offsetX: 10,
     },
     stroke: {
       show: true,
@@ -268,7 +267,7 @@ export default function AsalDaerahChart({
   const calculateHeight = () => {
     const minHeight = 100;
     const barHeight = 15; // Tinggi per bar dalam piksel
-    const padding = 50; // Ruang ekstra untuk judul, legenda, dll
+    const padding = 100; // Ruang ekstra untuk judul, legenda, dll
     const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
     return `${dynamicHeight}px`;
   };
@@ -292,7 +291,7 @@ export default function AsalDaerahChart({
       </CardHeader>
       <CardContent>
         <div 
-          className={`${height} w-full max-w-xl mx-auto`}
+          className={`${height} w-full`}
           style={{ height: calculateHeight() }}
         >
           <Chart

components/charts/AsalDaerahPerAngkatanChart.tsx

@@ -61,7 +61,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
         distributed: false,
         barHeight: '90%',
         dataLabels: {
-          position: 'top'
+          position: 'center'
         }
       }
     },
@@ -71,10 +71,9 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
         return val.toString();
       },
       style: {
-        fontSize: '14px',
+        fontSize: '12px',
         colors: [theme === 'dark' ? '#fff' : '#000']
       },
-      offsetX: 10,
     },
     stroke: {
       show: true,
@@ -303,7 +302,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
   const calculateHeight = () => {
     const minHeight = 100;
     const barHeight = 15; // Tinggi per bar dalam piksel
-    const padding = 50; // Ruang ekstra untuk judul, legenda, dll
+    const padding = 100; // Ruang ekstra untuk judul, legenda, dll
     const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
     return `${dynamicHeight}px`;
   };
@@ -317,7 +316,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
       </CardHeader>
       <CardContent>
         <div 
-          className="w-full max-w-xl mx-auto"
+          className="w-full"
           style={{ height: calculateHeight() }}
         >
           <Chart

components/charts/BimbinganDosenChart.tsx

@@ -0,0 +1,341 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { ApexOptions } from 'apexcharts';
+import { useTheme } from 'next-themes';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Button } from "@/components/ui/button";
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
+
+// Import ApexCharts secara dinamis untuk menghindari masalah SSR
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+interface BimbinganDosenData {
+  id_dosen: number;
+  nama_dosen: string;
+  selesai: number;
+  belum_selesai: number;
+  total: number;
+}
+
+interface BimbinganDosenChartProps {
+  height?: string;
+  showDetailButton?: boolean;
+}
+
+export default function BimbinganDosenChart({ 
+  height = "h-[400px] sm:h-[450px] md:h-[500px] lg:h-[600px]",
+  showDetailButton = true 
+}: BimbinganDosenChartProps = {}) {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<BimbinganDosenData[]>([]);
+  const [series, setSeries] = useState<ApexAxisChartSeries>([
+    {
+      name: 'Selesai',
+      data: []
+    },
+    {
+      name: 'Belum Selesai',
+      data: []
+    }
+  ]);
+  const [options, setOptions] = useState<ApexOptions>({
+    chart: {
+      type: 'bar',
+      stacked: true,
+      toolbar: {
+        show: true,
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        columnWidth: '85%',
+        distributed: false,
+        barHeight: '90%',
+        dataLabels: {
+          position: 'center',
+        },
+      },
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: number) {
+        return val > 0 ? val.toString() : '';
+      },
+      style: {
+        fontSize: '12px',
+        colors: [theme === 'dark' ? '#fff' : '#000']
+      },
+    },
+    stroke: {
+      show: true,
+      width: 1,
+      colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
+    },
+    xaxis: {
+      categories: [],
+      title: {
+        text: 'Jumlah Bimbingan',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '12px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      }
+    },
+    yaxis: {
+      title: {
+        text: 'Nama Dosen',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '14px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        },
+        maxWidth: 200,
+      },
+    },
+    legend: {
+      position: 'top',
+      fontSize: '14px',
+      markers: {
+        size: 12,
+      },
+      itemMargin: {
+        horizontal: 10,
+      },
+      horizontalAlign: 'center',
+      labels: {
+        colors: theme === 'dark' ? '#fff' : '#000'
+      }
+    },
+    fill: {
+      opacity: 1,
+    },
+    colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
+    tooltip: {
+      theme: theme === 'dark' ? 'dark' : 'light',
+      y: {
+        formatter: function (val: number) {
+          return val + " mahasiswa";
+        }
+      }
+    }
+  });
+
+  // Perbarui tema saat berubah
+  useEffect(() => {
+    setOptions(prev => ({
+      ...prev,
+      chart: {
+        ...prev.chart,
+        background: theme === 'dark' ? '#0F172B' : '#fff',
+      },
+      xaxis: {
+        ...prev.xaxis,
+        title: {
+          ...prev.xaxis?.title,
+          style: {
+            ...prev.xaxis?.title?.style,
+            color: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...prev.xaxis?.labels,
+          style: {
+            ...prev.xaxis?.labels?.style,
+            colors: theme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      yaxis: {
+        ...prev.yaxis,
+        title: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
+            color: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
+            colors: theme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      legend: {
+        ...prev.legend,
+        labels: {
+          ...prev.legend?.labels,
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      tooltip: {
+        ...prev.tooltip,
+        theme: theme === 'dark' ? 'dark' : 'light'
+      }
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await fetch('/api/mahasiswa/bimbingan-dosen');
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        if (!Array.isArray(result)) {
+          throw new Error('Format data tidak valid diterima dari server');
+        }
+        
+        // Urutkan data berdasarkan nama dosen A-Z
+        const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
+        setData(sortedResult);
+
+        // Proses data untuk chart
+        const namaDosen = sortedResult.map(item => item.nama_dosen);
+        const selesaiData = sortedResult.map(item => item.selesai);
+        const belumSelesaiData = sortedResult.map(item => item.belum_selesai);
+
+        setSeries([
+          {
+            name: 'Selesai',
+            data: selesaiData
+          },
+          {
+            name: 'Belum Selesai',
+            data: belumSelesaiData
+          }
+        ]);
+        
+        setOptions(prev => ({
+          ...prev,
+          xaxis: {
+            ...prev.xaxis,
+            categories: namaDosen,
+          },
+        }));
+      } catch (err) {
+        console.error('Error in fetchData:', err);
+        setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Loading...
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
+            Error: {error}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Tidak ada data bimbingan yang tersedia
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  // Hitung tinggi dinamis berdasarkan jumlah dosen
+  const calculateHeight = () => {
+    const minHeight = 200;
+    const barHeight = 25; // Tinggi per bar dalam piksel
+    const padding = 100; // Ruang ekstra untuk judul, legenda, dll
+    const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
+    return `${dynamicHeight}px`;
+  };
+
+  return (
+    <Card className="bg-white dark:bg-slate-900 shadow-lg">
+      <CardHeader>
+        <div className="flex justify-between items-center">
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Bimbingan Dosen
+          </CardTitle>
+          {showDetailButton && (
+            <Link href="/detail/bimbingan-dosen" target="_blank">
+              <Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
+                <ExternalLink className="size-3" />
+                Detail
+              </Button>
+            </Link>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div 
+          className={`${height} w-full`}
+          style={{ height: calculateHeight() }}
+        >
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="100%"
+            width="100%"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/charts/BimbinganDosenPerAngkatanChart.tsx

@@ -0,0 +1,358 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import dynamic from 'next/dynamic';
+import { ApexOptions } from 'apexcharts';
+import { useTheme } from 'next-themes';
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+
+// Import ApexCharts secara dinamis untuk menghindari masalah SSR
+const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
+
+interface BimbinganDosenData {
+  id_dosen: number;
+  nama_dosen: string;
+  selesai: number;
+  belum_selesai: number;
+  total: number;
+}
+
+interface Props {
+  tahunAngkatan: string;
+}
+
+export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props) {
+  const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const [data, setData] = useState<BimbinganDosenData[]>([]);
+  const [series, setSeries] = useState<ApexAxisChartSeries>([
+    {
+      name: 'Selesai',
+      data: []
+    },
+    {
+      name: 'Belum Selesai',
+      data: []
+    }
+  ]);
+  const [options, setOptions] = useState<ApexOptions>({
+    chart: {
+      type: 'bar',
+      stacked: true,
+      toolbar: {
+        show: true,
+        tools: {
+          download: true,
+          selection: true,
+          zoom: true,
+          zoomin: true,
+          zoomout: true,
+          pan: true,
+          reset: true,
+          customIcons: []
+        },
+        export: {
+          csv: {
+            filename: `bimbingan-dosen-angkatan`,
+            columnDelimiter: ',',
+            headerCategory: 'Nama Dosen',
+            headerValue: 'Jumlah Bimbingan'
+          }
+        },
+      },
+    },
+    plotOptions: {
+      bar: {
+        horizontal: true,
+        columnWidth: '85%',
+        distributed: false,
+        barHeight: '90%',
+        dataLabels: {
+          position: 'center'
+        }
+      }
+    },
+    dataLabels: {
+      enabled: true,
+      formatter: function (val: number) {
+        return val > 0 ? val.toString() : '';
+      },
+      style: {
+        fontSize: '12px',
+        colors: [theme === 'dark' ? '#fff' : '#000']
+      },
+    },
+    stroke: {
+      show: true,
+      width: 1,
+      colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
+    },
+    xaxis: {
+      categories: [],
+      title: {
+        text: 'Jumlah Bimbingan',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '12px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      }
+    },
+    yaxis: {
+      title: {
+        text: 'Nama Dosen',
+        style: {
+          fontSize: '14px',
+          fontWeight: 'bold',
+          color: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      labels: {
+        style: {
+          fontSize: '14px',
+          colors: theme === 'dark' ? '#fff' : '#000'
+        },
+        maxWidth: 200,
+      },
+    },
+    legend: {
+      position: 'top',
+      horizontalAlign: 'center',
+      labels: {
+        colors: theme === 'dark' ? '#fff' : '#000'
+      }
+    },
+    grid: {
+      padding: {
+        top: 0,
+        right: 0,
+        bottom: 0,
+        left: 0
+      }
+    },
+    fill: {
+      opacity: 1,
+    },
+    colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
+    tooltip: {
+      theme: theme === 'dark' ? 'dark' : 'light',
+      y: {
+        formatter: function (val: number) {
+          return val + " mahasiswa";
+        }
+      }
+    }
+  });
+
+  // Perbarui tema saat berubah
+  useEffect(() => {
+    setOptions(prev => ({
+      ...prev,
+      chart: {
+        ...prev.chart,
+        background: theme === 'dark' ? '#0F172B' : '#fff',
+      },
+      xaxis: {
+        ...prev.xaxis,
+        title: {
+          ...prev.xaxis?.title,
+          style: {
+            ...prev.xaxis?.title?.style,
+            color: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...prev.xaxis?.labels,
+          style: {
+            ...prev.xaxis?.labels?.style,
+            colors: theme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      yaxis: {
+        ...prev.yaxis,
+        title: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
+            color: theme === 'dark' ? '#fff' : '#000'
+          }
+        },
+        labels: {
+          ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
+          style: {
+            ...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
+            colors: theme === 'dark' ? '#fff' : '#000'
+          }
+        }
+      },
+      legend: {
+        ...prev.legend,
+        labels: {
+          ...prev.legend?.labels,
+          colors: theme === 'dark' ? '#fff' : '#000'
+        }
+      },
+      tooltip: {
+        ...prev.tooltip,
+        theme: theme === 'dark' ? 'dark' : 'light'
+      }
+    }));
+  }, [theme]);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  useEffect(() => {
+    const fetchData = async () => {
+      try {
+        setLoading(true);
+        setError(null);
+        
+        const response = await fetch(`/api/mahasiswa/bimbingan-dosen?tahun_angkatan=${tahunAngkatan}`);
+        
+        if (!response.ok) {
+          throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
+        }
+        
+        const result = await response.json();
+        
+        if (!Array.isArray(result)) {
+          throw new Error('Format data tidak valid diterima dari server');
+        }
+        
+        // Urutkan data berdasarkan nama dosen A-Z
+        const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
+        setData(sortedResult);
+
+        // Proses data untuk chart
+        const namaDosen = sortedResult.map(item => item.nama_dosen);
+        const selesaiData = sortedResult.map(item => item.selesai);
+        const belumSelesaiData = sortedResult.map(item => item.belum_selesai);
+
+        setSeries([
+          {
+            name: 'Selesai',
+            data: selesaiData
+          },
+          {
+            name: 'Belum Selesai',
+            data: belumSelesaiData
+          }
+        ]);
+        
+        setOptions(prev => ({
+          ...prev,
+          xaxis: {
+            ...prev.xaxis,
+            categories: namaDosen,
+          },
+          chart: {
+            ...prev.chart,
+            toolbar: {
+              ...prev.chart?.toolbar,
+              export: {
+                ...prev.chart?.toolbar?.export,
+                csv: {
+                  ...prev.chart?.toolbar?.export?.csv,
+                  filename: `bimbingan-dosen-angkatan-${tahunAngkatan}`,
+                }
+              }
+            }
+          }
+        }));
+      } catch (err) {
+        console.error('Error in fetchData:', err);
+        setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (tahunAngkatan) {
+      fetchData();
+    }
+  }, [tahunAngkatan]);
+
+  if (!mounted) {
+    return null;
+  }
+
+  if (loading) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Loading...
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (error) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
+            Error: {error}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  if (data.length === 0) {
+    return (
+      <Card className="bg-white dark:bg-slate-900 shadow-lg">
+        <CardHeader>
+          <CardTitle className="text-xl font-bold dark:text-white">
+            Tidak ada data bimbingan yang tersedia untuk angkatan {tahunAngkatan}
+          </CardTitle>
+        </CardHeader>
+      </Card>
+    );
+  }
+
+  // Hitung tinggi dinamis berdasarkan jumlah dosen
+  const calculateHeight = () => {
+    const minHeight = 200;
+    const barHeight = 25; // Tinggi per bar dalam piksel
+    const padding = 100; // Ruang ekstra untuk judul, legenda, dll
+    const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
+    return `${dynamicHeight}px`;
+  };
+
+  return (
+    <Card className="bg-white dark:bg-slate-900 shadow-lg">
+      <CardHeader>
+        <CardTitle className="text-xl font-bold dark:text-white">
+          Bimbingan Dosen Angkatan {tahunAngkatan}
+        </CardTitle>
+      </CardHeader>
+      <CardContent>
+        <div 
+          className="w-full"
+          style={{ height: calculateHeight() }}
+        >
+          <Chart
+            options={options}
+            series={series}
+            type="bar"
+            height="100%"
+            width="100%"
+          />
+        </div>
+      </CardContent>
+    </Card>
+  );
+}

components/datatable/data-table-dosen.tsx

@@ -0,0 +1,617 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { 
+  Table, 
+  TableBody, 
+  TableCell, 
+  TableHead, 
+  TableHeader, 
+  TableRow 
+} from "@/components/ui/table";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { 
+  Select, 
+  SelectContent, 
+  SelectItem, 
+  SelectTrigger, 
+  SelectValue 
+} from "@/components/ui/select";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+import { 
+  PlusCircle, 
+  Pencil, 
+  Trash2, 
+  Search, 
+  X, 
+  Loader2
+} from "lucide-react";
+import UploadExcelDosen from "@/components/datatable/upload-file-dosen";
+import { useToast } from "@/components/ui/toast-provider";
+
+// Define the Dosen type
+interface Dosen {
+  id_dosen: number;
+  nama_dosen: string;
+  nip: string;
+}
+
+export default function DataTableDosen() {
+  const { showSuccess, showError } = useToast();
+
+  // State for data
+  const [dosen, setDosen] = useState<Dosen[]>([]);
+  const [filteredData, setFilteredData] = useState<Dosen[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // State for filtering
+  const [searchTerm, setSearchTerm] = useState("");
+  
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginatedData, setPaginatedData] = useState<Dosen[]>([]);
+  
+  // State for form
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [formData, setFormData] = useState<Partial<Dosen>>({});
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  
+  // State for delete confirmation
+  const [deleteId, setDeleteId] = useState<number | null>(null);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
+
+  // Fetch data on component mount
+  useEffect(() => {
+    fetchDosen();
+  }, []);
+
+  // Filter data when search term changes
+  useEffect(() => {
+    filterData();
+  }, [searchTerm, dosen]);
+
+  // Update paginated data when filtered data or pagination settings change
+  useEffect(() => {
+    paginateData();
+  }, [filteredData, currentPage, pageSize]);
+
+  // Fetch dosen data from API
+  const fetchDosen = async () => {
+    try {
+      setLoading(true);
+      let url = "/api/keloladata/data-dosen";
+      
+      // Add search to URL if it exists
+      const params = new URLSearchParams();
+      if (searchTerm) {
+        params.append("search", searchTerm);
+      }
+      
+      if (params.toString()) {
+        url += `?${params.toString()}`;
+      }
+      
+      const response = await fetch(url);
+      
+      if (!response.ok) {
+        throw new Error("Failed to fetch data");
+      }
+      
+      const data = await response.json();
+      setDosen(data);
+      setFilteredData(data);
+      setError(null);
+    } catch (err) {
+      setError("Error fetching data. Please try again later.");
+      console.error("Error fetching data:", err);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Filter data based on search term
+  const filterData = () => {
+    let filtered = [...dosen];
+    
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (item) =>
+          (item.nama_dosen?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
+          (item.nip?.toLowerCase() || "").includes(searchTerm.toLowerCase())
+      );
+    }
+    
+    setFilteredData(filtered);
+    // Reset to first page when filters change
+    setCurrentPage(1);
+  };
+
+  // Paginate data
+  const paginateData = () => {
+    const startIndex = (currentPage - 1) * pageSize;
+    const endIndex = startIndex + pageSize;
+    setPaginatedData(filteredData.slice(startIndex, endIndex));
+  };
+
+  // Get total number of pages
+  const getTotalPages = () => {
+    return Math.ceil(filteredData.length / pageSize);
+  };
+
+  // Handle page change
+  const handlePageChange = (page: number) => {
+    setCurrentPage(page);
+  };
+
+  // Handle page size change
+  const handlePageSizeChange = (size: string) => {
+    setPageSize(Number(size));
+    setCurrentPage(1); // Reset to first page when changing page size
+  };
+
+  // Reset form data
+  const resetForm = () => {
+    setFormData({});
+  };
+
+  // Handle form input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Open form dialog for adding new dosen
+  const handleAdd = () => {
+    setFormMode("add");
+    resetForm();
+    setIsDialogOpen(true);
+  };
+
+  // Open form dialog for editing dosen
+  const handleEdit = (data: Dosen) => {
+    setFormMode("edit");
+    setFormData(data);
+    setIsDialogOpen(true);
+  };
+
+  // Open delete confirmation dialog
+  const handleDeleteConfirm = (id: number) => {
+    setDeleteId(id);
+    setIsDeleteDialogOpen(true);
+  };
+
+  // Submit form for add/edit
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+    
+    try {
+      setIsSubmitting(true);
+      
+      if (formMode === "add") {
+        // Add new dosen
+        const response = await fetch("/api/keloladata/data-dosen", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific errors
+          if (response.status === 409) {
+            showError("Gagal!", responseData.message);
+            throw new Error(responseData.message);
+          }
+          if (response.status === 400) {
+            showError("Gagal!", responseData.message);
+            throw new Error(responseData.message);
+          }
+          showError("Gagal!", "Gagal menambahkan dosen");
+          throw new Error(responseData.message || "Failed to add dosen");
+        }
+        
+        showSuccess("Berhasil!", "Dosen berhasil ditambahkan");
+      } else {
+        // Edit existing dosen
+        const response = await fetch(`/api/keloladata/data-dosen?id=${formData.id_dosen}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific errors
+          if (response.status === 409) {
+            showError("Gagal!", responseData.message);
+            throw new Error(responseData.message);
+          }
+          if (response.status === 400) {
+            showError("Gagal!", responseData.message);
+            throw new Error(responseData.message);
+          }
+          showError("Gagal!", responseData.message || "Failed to update dosen");
+          throw new Error(responseData.message || "Failed to update dosen");
+        }
+        
+        showSuccess("Berhasil!", "Dosen berhasil diperbarui");
+      }
+      
+      // Refresh data after successful operation
+      await fetchDosen();
+      setIsDialogOpen(false);
+      resetForm();
+    } catch (err) {
+      console.error("Error submitting form:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Delete dosen
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    
+    try {
+      setIsDeleting(true);
+      
+      const response = await fetch(`/api/keloladata/data-dosen?id=${deleteId}`, {
+        method: "DELETE",
+      });
+      
+      const responseData = await response.json();
+      
+      if (!response.ok) {
+        if (response.status === 409) {
+          showError("Gagal!", responseData.message);
+          throw new Error(responseData.message);
+        }
+        showError("Gagal!", responseData.message || "Failed to delete dosen");
+        throw new Error(responseData.message || "Failed to delete dosen");
+      }
+      
+      // Refresh data after successful deletion
+      await fetchDosen();
+      setIsDeleteDialogOpen(false);
+      setDeleteId(null);
+      showSuccess("Berhasil!", "Dosen berhasil dihapus");
+      } catch (err) {
+      console.error("Error deleting dosen:", err);
+    } finally {
+      setIsDeleting(false);
+    }
+  };
+
+  // Generate pagination items
+  const renderPaginationItems = () => {
+    const totalPages = getTotalPages();
+    const items = [];
+    
+    // Always show first page
+    items.push(
+      <PaginationItem key="first">
+        <PaginationLink 
+          isActive={currentPage === 1} 
+          onClick={() => handlePageChange(1)}
+        >
+          1
+        </PaginationLink>
+      </PaginationItem>
+    );
+    
+    // Show ellipsis if needed
+    if (currentPage > 3) {
+      items.push(
+        <PaginationItem key="ellipsis-start">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+    
+    // Show pages around current page
+    for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
+      if (i === 1 || i === totalPages) continue; // Skip first and last pages as they're always shown
+      items.push(
+        <PaginationItem key={i}>
+          <PaginationLink 
+            isActive={currentPage === i} 
+            onClick={() => handlePageChange(i)}
+          >
+            {i}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+    
+    // Show ellipsis if needed
+    if (currentPage < totalPages - 2) {
+      items.push(
+        <PaginationItem key="ellipsis-end">
+          <PaginationEllipsis />
+        </PaginationItem>
+      );
+    }
+    
+    // Always show last page if there's more than one page
+    if (totalPages > 1) {
+      items.push(
+        <PaginationItem key="last">
+          <PaginationLink 
+            isActive={currentPage === totalPages} 
+            onClick={() => handlePageChange(totalPages)}
+          >
+            {totalPages}
+          </PaginationLink>
+        </PaginationItem>
+      );
+    }
+    
+    return items;
+  };
+
+  // Calculate the range of entries being displayed
+  const getDisplayRange = () => {
+    if (filteredData.length === 0) return { start: 0, end: 0 };
+    
+    const start = (currentPage - 1) * pageSize + 1;
+    const end = Math.min(currentPage * pageSize, filteredData.length);
+    
+    return { start, end };
+  };
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
+        <h2 className="text-2xl font-bold">Data Dosen</h2>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <Button onClick={handleAdd}>
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Tambah Dosen
+          </Button>
+        </div>
+      </div>
+
+      {/* Search */}
+      <div className="flex flex-col sm:flex-row gap-4">
+        <div className="relative flex-1">
+          <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
+          <Input
+            placeholder="Cari berdasarkan nama dosen atau NIP..."
+            className="pl-8"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+          {searchTerm && (
+            <X
+              className="absolute right-2.5 top-2.5 h-4 w-4 text-muted-foreground cursor-pointer"
+              onClick={() => setSearchTerm("")}
+            />
+          )}
+        </div>
+      </div>
+
+      {/* Show entries selector */}
+      <div className="flex items-center gap-2">
+        <span className="text-sm">Show</span>
+        <Select
+          value={pageSize.toString()}
+          onValueChange={handlePageSizeChange}
+        >
+          <SelectTrigger className="w-[80px]">
+            <SelectValue placeholder={pageSize.toString()} />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="5">5</SelectItem>
+            <SelectItem value="10">10</SelectItem>
+            <SelectItem value="25">25</SelectItem>
+            <SelectItem value="50">50</SelectItem>
+            <SelectItem value="100">100</SelectItem>
+          </SelectContent>
+        </Select>
+        <span className="text-sm">entries</span>
+      </div>
+
+      {/* Table */}
+      {loading ? (
+        <div className="flex justify-center items-center py-8">
+          <Loader2 className="h-8 w-8 animate-spin text-primary" />
+        </div>
+      ) : error ? (
+        <div className="bg-destructive/10 p-4 rounded-md text-destructive text-center">
+          {error}
+        </div>
+      ) : (
+        <div className="border rounded-md">
+          <Table>
+            <TableHeader>
+              <TableRow>
+                {/* <TableHead className="w-[80px]">ID</TableHead> */}
+                <TableHead>Nama Dosen</TableHead>
+                <TableHead>NIP</TableHead>
+                <TableHead className="text-right">Aksi</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={4} className="text-center py-8">
+                    Tidak ada data yang sesuai dengan pencarian
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((dosenItem) => (
+                  <TableRow key={dosenItem.id_dosen}>
+                    {/* <TableCell>{dosenItem.id_dosen}</TableCell> */}
+                    <TableCell className="font-medium">{dosenItem.nama_dosen}</TableCell>
+                    <TableCell>{dosenItem.nip}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleEdit(dosenItem)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="text-destructive hover:bg-destructive/10"
+                          onClick={() => handleDeleteConfirm(dosenItem.id_dosen)}
+                        >
+                          <Trash2 className="h-4 w-4" />
+                        </Button>
+                      </div>
+                    </TableCell>
+                  </TableRow>
+                ))
+              )}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+
+      {/* Pagination info and controls */}
+      {!loading && !error && filteredData.length > 0 && (
+        <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+          <div className="text-sm text-muted-foreground">
+            Showing {getDisplayRange().start} to {getDisplayRange().end} of {filteredData.length} entries
+          </div>
+          <Pagination>
+            <PaginationContent>
+              <PaginationItem>
+                <PaginationPrevious 
+                  onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
+                  className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+              
+              {renderPaginationItems()}
+              
+              <PaginationItem>
+                <PaginationNext 
+                  onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
+                  className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : ""}
+                />
+              </PaginationItem>
+            </PaginationContent>
+          </Pagination>
+        </div>
+      )}
+
+      {/* Add/Edit Dialog */}
+      <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+        <DialogContent className="sm:max-w-[500px]">
+          <DialogHeader>
+            <DialogTitle>
+              {formMode === "add" ? "Tambah Dosen" : "Edit Dosen"}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="space-y-2">
+                <label htmlFor="nama_dosen" className="text-sm font-medium">
+                  Nama Dosen <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  id="nama_dosen"
+                  name="nama_dosen"
+                  value={formData.nama_dosen || ""}
+                  onChange={handleInputChange}
+                  required
+                  maxLength={120}
+                />
+              </div>
+              <div className="space-y-2">
+                <label htmlFor="nip" className="text-sm font-medium">
+                  NIP <span className="text-destructive">*</span>
+                </label>
+                <Input
+                  id="nip"
+                  name="nip"
+                  value={formData.nip || ""}
+                  onChange={handleInputChange}
+                  required
+                  maxLength={18}
+                  placeholder="18 karakter"
+                />
+                <p className="text-xs text-muted-foreground">
+                  NIP harus terdiri dari 18 karakter
+                </p>
+              </div>
+            </div>
+            <DialogFooter>
+              <DialogClose asChild>
+                <Button type="button" variant="outline">
+                  Batal
+                </Button>
+              </DialogClose>
+              <Button type="submit" disabled={isSubmitting}>
+                {isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+                {formMode === "add" ? "Tambah" : "Simpan"}
+              </Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      {/* Delete Confirmation Dialog */}
+      <Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
+        <DialogContent className="sm:max-w-[400px]">
+          <DialogHeader>
+            <DialogTitle>Konfirmasi Hapus</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <p>Apakah Anda yakin ingin menghapus data dosen ini?</p>
+            <p className="text-sm text-muted-foreground mt-1">
+              Tindakan ini tidak dapat dibatalkan.
+            </p>
+          </div>
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Batal
+              </Button>
+            </DialogClose>
+            <Button
+              variant="destructive"
+              onClick={handleDelete}
+              disabled={isDeleting}
+            >
+              {isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              Hapus
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </div>
+  );
+}

components/datatable/data-table-mahasiswa.tsx

@@ -66,6 +66,11 @@ interface Mahasiswa {
   nama_kelompok_keahlian: string | null;
   status_kuliah: "Aktif" | "Cuti" | "Lulus" | "Non-Aktif";
   semester: number;
+  pembimbing_1: number | null;
+  nama_pembimbing_1: string | null;
+  pembimbing_2: number | null;
+  nama_pembimbing_2: string | null;
+  status_bimbingan: "Selesai" | "Belum Selesai";
   created_at: string;
   updated_at: string;
 }
@@ -76,6 +81,13 @@ interface KelompokKeahlian {
   nama_kelompok: string;
 }
 
+// Define the Dosen type
+interface Dosen {
+  id_dosen: number;
+  nama_dosen: string;
+  nip: string;
+}
+
 export default function DataTableMahasiswa() {
   const { showSuccess, showError } = useToast();
   // State for data
@@ -126,12 +138,16 @@ export default function DataTableMahasiswa() {
   const [isKelompokKeahlianDeleting, setIsKelompokKeahlianDeleting] = useState(false);
   const [isKelompokKeahlianDeleteDialogOpen, setIsKelompokKeahlianDeleteDialogOpen] = useState(false);
   
+  // State for dosen data
+  const [dosenData, setDosenData] = useState<Dosen[]>([]);
+
   // Fetch data on component mount
   useEffect(() => {
     fetchMahasiswa();
     fetchJenisPendaftaranOptions();
     fetchKelompokKeahlianOptions();
     fetchKelompokKeahlianData();
+    fetchDosenData();
   }, []);
 
   // Filter data when search term or filter changes
@@ -267,7 +283,8 @@ export default function DataTableMahasiswa() {
     setFormData({
       jk: "Pria",
       status_kuliah: "Aktif",
-      semester: 1
+      semester: 1,
+      status_bimbingan: "Belum Selesai"
     });
   };
 
@@ -291,6 +308,9 @@ export default function DataTableMahasiswa() {
     } else if (name === "semester") {
       const numValue = value === "" ? 1 : parseInt(value);
       setFormData((prev) => ({ ...prev, [name]: numValue }));
+    } else if (name === "pembimbing_1" || name === "pembimbing_2") {
+      const numValue = value === "null" || value === "" ? null : parseInt(value);
+      setFormData((prev) => ({ ...prev, [name]: numValue }));
     } else {
       setFormData((prev) => ({ ...prev, [name]: value }));
     }
@@ -329,6 +349,22 @@ export default function DataTableMahasiswa() {
     }
   };
 
+  // Fetch dosen data from API
+  const fetchDosenData = async () => {
+    try {
+      const response = await fetch("/api/keloladata/data-dosen");
+      
+      if (!response.ok) {
+        throw new Error("Failed to fetch dosen data");
+      }
+      
+      const data = await response.json();
+      setDosenData(data);
+    } catch (err) {
+      console.error("Error fetching dosen data:", err);
+    }
+  };
+
   // Open form dialog for adding new mahasiswa
   const handleAdd = () => {
     setFormMode("add");
@@ -337,6 +373,7 @@ export default function DataTableMahasiswa() {
     // Make sure we have the latest options
     fetchJenisPendaftaranOptions();
     fetchKelompokKeahlianOptions();
+    fetchDosenData();
   };
 
   // Open form dialog for editing mahasiswa
@@ -347,6 +384,7 @@ export default function DataTableMahasiswa() {
     // Make sure we have the latest options
     fetchJenisPendaftaranOptions();
     fetchKelompokKeahlianOptions();
+    fetchDosenData();
   };
 
   // Open delete confirmation dialog
@@ -748,13 +786,16 @@ export default function DataTableMahasiswa() {
                 <TableHead>IPK</TableHead>
                 <TableHead>Status Kuliah</TableHead>
                 <TableHead>Kelompok Keahlian</TableHead>
+                <TableHead>Pembimbing 1</TableHead>
+                <TableHead>Pembimbing 2</TableHead>
+                <TableHead>Status Bimbingan</TableHead>
                 <TableHead className="text-right">Aksi</TableHead>
               </TableRow>
             </TableHeader>
             <TableBody>
               {paginatedData.length === 0 ? (
                 <TableRow>
-                  <TableCell colSpan={13} className="text-center py-8">
+                  <TableCell colSpan={16} className="text-center py-8">
                     Tidak ada data yang sesuai dengan filter
                   </TableCell>
                 </TableRow>
@@ -787,6 +828,19 @@ export default function DataTableMahasiswa() {
                       </span>
                     </TableCell>
                     <TableCell>{mhs.nama_kelompok_keahlian || "-"}</TableCell>
+                    <TableCell>{mhs.nama_pembimbing_1 || "-"}</TableCell>
+                    <TableCell>{mhs.nama_pembimbing_2 || "-"}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          mhs.status_bimbingan === "Selesai"
+                            ? "bg-green-100 text-green-800"
+                            : "bg-orange-100 text-orange-800"
+                        }`}
+                      >
+                        {mhs.status_bimbingan}
+                      </span>
+                    </TableCell>
                     <TableCell className="text-right">
                       <div className="flex justify-end gap-2">
                         <BiodataMahasiswaDialog nim={mhs.nim} nama={mhs.nama} />
@@ -1026,6 +1080,65 @@ export default function DataTableMahasiswa() {
                     required
                   />
                 </div>
+                <div className="space-y-2">
+                  <label htmlFor="pembimbing_1" className="text-sm font-medium">
+                    Pembimbing 1
+                  </label>
+                  <Select
+                    value={formData.pembimbing_1?.toString() || "null"}
+                    onValueChange={(value) => handleSelectChange("pembimbing_1", value)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Pilih Pembimbing 1" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="null">-- Tidak Ada --</SelectItem>
+                      {dosenData.map((dosen) => (
+                        <SelectItem key={dosen.id_dosen} value={dosen.id_dosen.toString()}>
+                          {dosen.nama_dosen}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="pembimbing_2" className="text-sm font-medium">
+                    Pembimbing 2
+                  </label>
+                  <Select
+                    value={formData.pembimbing_2?.toString() || "null"}
+                    onValueChange={(value) => handleSelectChange("pembimbing_2", value)}
+                  >
+                    <SelectTrigger className="w-full">
+                      <SelectValue placeholder="Pilih Pembimbing 2" />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="null">-- Tidak Ada --</SelectItem>
+                      {dosenData.map((dosen) => (
+                        <SelectItem key={dosen.id_dosen} value={dosen.id_dosen.toString()}>
+                          {dosen.nama_dosen}
+                        </SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="status_bimbingan" className="text-sm font-medium">
+                    Status Bimbingan <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.status_bimbingan || "Belum Selesai"}
+                    onValueChange={(value) => handleSelectChange("status_bimbingan", value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Belum Selesai">Belum Selesai</SelectItem>
+                      <SelectItem value="Selesai">Selesai</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
               </div>
             </div>
             <DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-0">

components/datatable/upload-file-dosen.tsx

@@ -0,0 +1,225 @@
+"use client";
+
+import { useState, useRef } from "react";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { Upload, FileText, Loader2, X, CheckCircle, AlertCircle } from "lucide-react";
+import { useToast } from "@/components/ui/toast-provider";
+
+interface UploadExcelDosenProps {
+  onUploadSuccess: () => void;
+}
+
+export default function UploadExcelDosen({ onUploadSuccess }: UploadExcelDosenProps) {
+  const { showSuccess, showError } = useToast();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [uploadResult, setUploadResult] = useState<any>(null);
+
+  // Handle file selection
+  const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      // Validate file type
+      const allowedTypes = [
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+        'application/vnd.ms-excel',
+        'text/csv'
+      ];
+      
+      if (allowedTypes.includes(file.type)) {
+        setSelectedFile(file);
+      } else {
+        showError("File tidak valid", "Silakan pilih file Excel (.xlsx, .xls) atau CSV (.csv)");
+        e.target.value = '';
+      }
+    }
+  };
+
+  // Handle file upload
+  const handleUpload = async () => {
+    if (!selectedFile) {
+      showError("Tidak ada file", "Silakan pilih file terlebih dahulu");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      
+      const formData = new FormData();
+      formData.append('file', selectedFile);
+
+      const response = await fetch('/api/keloladata/data-dosen/upload', {
+        method: 'POST',
+        body: formData,
+      });
+
+      const result = await response.json();
+
+      if (!response.ok) {
+        throw new Error(result.message || 'Upload failed');
+      }
+
+      setUploadResult(result);
+      
+      if (result.details.successCount > 0) {
+        showSuccess("Upload berhasil!", result.message);
+        onUploadSuccess(); // Refresh the main table
+      } else {
+        showError("Upload gagal", "Tidak ada data yang berhasil diupload");
+      }
+
+    } catch (error) {
+      console.error('Upload error:', error);
+      showError("Error", error instanceof Error ? error.message : "Terjadi kesalahan saat upload");
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  // Reset dialog
+  const resetDialog = () => {
+    setSelectedFile(null);
+    setUploadResult(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  // Close dialog
+  const handleDialogClose = () => {
+    setIsDialogOpen(false);
+    resetDialog();
+  };
+
+  return (
+    <>
+      <Button variant="outline" onClick={() => setIsDialogOpen(true)}>
+        <Upload className="mr-2 h-4 w-4" />
+        Upload Excel
+      </Button>
+
+      <Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
+        <DialogContent className="sm:max-w-[600px]">
+          <DialogHeader>
+            <DialogTitle>Upload Data Dosen</DialogTitle>
+          </DialogHeader>
+          
+          <div className="space-y-4 py-4">
+            {/* Instructions */}
+            <div className="bg-blue-50 p-4 rounded-lg">
+              <h4 className="font-medium text-blue-900 mb-2">Petunjuk Upload:</h4>
+              <ul className="text-sm text-blue-800 space-y-1">
+                <li>• File harus berformat Excel (.xlsx, .xls) atau CSV (.csv)</li>
+                <li>• Kolom yang diperlukan: <strong>nama_dosen</strong>, <strong>nip</strong></li>
+                <li>• NIP harus terdiri dari 18 karakter</li>
+                <li>• Jika NIP sudah ada, data akan diupdate</li>
+                <li>• Baris pertama harus berisi header kolom</li>
+              </ul>
+            </div>
+
+            {/* File Input */}
+            <div className="space-y-2">
+              <label className="text-sm font-medium">Pilih File:</label>
+              <div className="flex items-center gap-2">
+                <Input
+                  ref={fileInputRef}
+                  type="file"
+                  accept=".xlsx,.xls,.csv"
+                  onChange={handleFileSelect}
+                  className="flex-1"
+                />
+                {selectedFile && (
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={resetDialog}
+                  >
+                    <X className="h-4 w-4" />
+                  </Button>
+                )}
+              </div>
+              {selectedFile && (
+                <div className="flex items-center gap-2 text-sm text-green-600">
+                  <FileText className="h-4 w-4" />
+                  <span>{selectedFile.name}</span>
+                  <span className="text-muted-foreground">
+                    ({(selectedFile.size / 1024).toFixed(1)} KB)
+                  </span>
+                </div>
+              )}
+            </div>
+
+            {/* Upload Result */}
+            {uploadResult && (
+              <div className="space-y-3">
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="font-medium mb-2">Hasil Upload:</h4>
+                  <div className="grid grid-cols-2 gap-4 text-sm">
+                    <div className="flex items-center gap-2 text-green-600">
+                      <CheckCircle className="h-4 w-4" />
+                      <span>Berhasil: {uploadResult.details.successCount}</span>
+                    </div>
+                    <div className="flex items-center gap-2 text-red-600">
+                      <AlertCircle className="h-4 w-4" />
+                      <span>Gagal: {uploadResult.details.failedCount}</span>
+                    </div>
+                  </div>
+                  <div className="text-sm text-muted-foreground mt-2">
+                    Total baris: {uploadResult.details.totalRows}
+                  </div>
+                </div>
+
+                {/* Show errors if any */}
+                {uploadResult.details.errors && uploadResult.details.errors.length > 0 && (
+                  <div className="bg-red-50 p-4 rounded-lg max-h-60 overflow-y-auto">
+                    <h5 className="font-medium text-red-900 mb-2">Error Details:</h5>
+                    <div className="space-y-1">
+                      {uploadResult.details.errors.slice(0, 10).map((error: string, index: number) => (
+                        <div key={index} className="text-sm text-red-800">
+                          {error}
+                        </div>
+                      ))}
+                      {uploadResult.details.errors.length > 10 && (
+                        <div className="text-sm text-red-600 font-medium">
+                          ... dan {uploadResult.details.errors.length - 10} error lainnya
+                        </div>
+                      )}
+                    </div>
+                  </div>
+                )}
+              </div>
+            )}
+          </div>
+
+          <DialogFooter>
+            <DialogClose asChild>
+              <Button type="button" variant="outline">
+                Tutup
+              </Button>
+            </DialogClose>
+            <Button 
+              onClick={handleUpload} 
+              disabled={!selectedFile || isUploading}
+            >
+              {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+              {isUploading ? "Uploading..." : "Upload"}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+}

components/ui/Navbar.tsx

@@ -3,7 +3,7 @@
 import { useState, useEffect } from 'react';
 import { useRouter } from 'next/navigation';
 import { ThemeToggle } from '@/components/theme-toggle';
-import { Menu, ChevronDown, BarChart, Database, CircleCheck, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
+import { Menu, ChevronDown, BarChart, Database, CircleCheck, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User, Users } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import {
@@ -194,6 +194,12 @@ const Navbar = () => {
                     Prestasi
                   </Link>
                 </DropdownMenuItem>
+                <DropdownMenuItem asChild>
+                  <Link href="/keloladata/dosen" className="flex items-center gap-2 w-full">
+                    <Users className="h-4 w-4" />
+                    Dosen
+                  </Link>
+                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           )}