Add Kelola Data

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

@@ -111,14 +111,13 @@ export async function POST(request: NextRequest) {
       nim,
       nama_beasiswa,
       sumber_beasiswa,
-      beasiswa_status,
       jenis_beasiswa
     } = body;
 
     // Validate required fields
-    if (!nim || !nama_beasiswa || !sumber_beasiswa || !beasiswa_status || !jenis_beasiswa) {
+    if (!nim || !nama_beasiswa || !sumber_beasiswa || !jenis_beasiswa) {
       return NextResponse.json(
-        { message: 'Missing required fields: nim, nama_beasiswa, sumber_beasiswa, beasiswa_status, jenis_beasiswa' },
+        { message: 'Missing required fields: nim, nama_beasiswa, sumber_beasiswa, jenis_beasiswa' },
         { status: 400 }
       );
     }
@@ -138,16 +137,8 @@ export async function POST(request: NextRequest) {
     }
 
     // Validate enum values
-    const validStatus = ['Aktif', 'Selesai', 'Dibatalkan'];
     const validJenisBeasiswa = ['Pemerintah', 'Non-Pemerintah'];
 
-    if (!validStatus.includes(beasiswa_status)) {
-      return NextResponse.json(
-        { message: 'Invalid beasiswa_status value. Must be one of: Aktif, Selesai, Dibatalkan' },
-        { status: 400 }
-      );
-    }
-
     if (!validJenisBeasiswa.includes(jenis_beasiswa)) {
       return NextResponse.json(
         { message: 'Invalid jenis_beasiswa value. Must be one of: Pemerintah, Non-Pemerintah' },
@@ -162,7 +153,6 @@ export async function POST(request: NextRequest) {
         id_mahasiswa: mahasiswaExists.id_mahasiswa,
         nama_beasiswa,
         sumber_beasiswa,
-        beasiswa_status,
         jenis_beasiswa
       })
       .select()
@@ -201,14 +191,13 @@ export async function PUT(request: NextRequest) {
       nim,
       nama_beasiswa,
       sumber_beasiswa,
-      beasiswa_status,
       jenis_beasiswa
     } = body;
 
     // Validate required fields
-    if (!nim || !nama_beasiswa || !sumber_beasiswa || !beasiswa_status || !jenis_beasiswa) {
+    if (!nim || !nama_beasiswa || !sumber_beasiswa || !jenis_beasiswa) {
       return NextResponse.json(
-        { message: 'Missing required fields: nim, nama_beasiswa, sumber_beasiswa, beasiswa_status, jenis_beasiswa' },
+        { message: 'Missing required fields: nim, nama_beasiswa, sumber_beasiswa, jenis_beasiswa' },
         { status: 400 }
       );
     }
@@ -239,16 +228,8 @@ export async function PUT(request: NextRequest) {
     }
 
     // Validate enum values
-    const validStatus = ['Aktif', 'Selesai', 'Dibatalkan'];
     const validJenisBeasiswa = ['Pemerintah', 'Non-Pemerintah'];
 
-    if (!validStatus.includes(beasiswa_status)) {
-      return NextResponse.json(
-        { message: 'Invalid beasiswa_status value. Must be one of: Aktif, Selesai, Dibatalkan' },
-        { status: 400 }
-      );
-    }
-
     if (!validJenisBeasiswa.includes(jenis_beasiswa)) {
       return NextResponse.json(
         { message: 'Invalid jenis_beasiswa value. Must be one of: Pemerintah, Non-Pemerintah' },
@@ -263,7 +244,6 @@ export async function PUT(request: NextRequest) {
         id_mahasiswa: mahasiswaExists.id_mahasiswa,
         nama_beasiswa,
         sumber_beasiswa,
-        beasiswa_status,
         jenis_beasiswa
       })
       .eq('id_beasiswa', id);

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

@@ -2,6 +2,11 @@ import { NextRequest, NextResponse } from 'next/server';
 import * as XLSX from 'xlsx';
 import supabase from '@/lib/db';
 
+// GET method for testing the route
+export async function GET() {
+  return NextResponse.json({ message: 'Upload route is working' });
+}
+
 export async function POST(request: NextRequest) {
   try {
     // Get form data from request
@@ -12,6 +17,11 @@ export async function POST(request: NextRequest) {
       return NextResponse.json({ message: 'File tidak ditemukan' }, { status: 400 });
     }
     
+    // Validate file size (max 10MB)
+    if (file.size > 10 * 1024 * 1024) {
+      return NextResponse.json({ message: 'File terlalu besar. Maksimal 10MB' }, { status: 400 });
+    }
+    
     // Process file data based on file type
     let validData = [];
     let errors: string[] = [];
@@ -65,10 +75,18 @@ async function processExcelData(fileBuffer: ArrayBuffer) {
     // Parse Excel file
     const workbook = XLSX.read(fileBuffer, { type: 'array' });
     
+    if (!workbook.SheetNames || workbook.SheetNames.length === 0) {
+      return { validData: [], errors: ['File Excel tidak memiliki sheet'] };
+    }
+    
     // Get first sheet
     const sheetName = workbook.SheetNames[0];
     const worksheet = workbook.Sheets[sheetName];
     
+    if (!worksheet) {
+      return { validData: [], errors: ['Sheet pertama tidak ditemukan'] };
+    }
+    
     // Convert to JSON with proper typing
     const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 }) as any[][];
     
@@ -76,6 +94,10 @@ async function processExcelData(fileBuffer: ArrayBuffer) {
       return { validData: [], errors: ['File Excel kosong'] };
     }
     
+    if (jsonData.length < 2) {
+      return { validData: [], errors: ['File Excel hanya memiliki header, tidak ada data'] };
+    }
+    
     // Convert Excel data to CSV-like format for processing
     const headers = jsonData[0].map(h => String(h).toLowerCase());
     const rows = jsonData.slice(1);
@@ -84,7 +106,7 @@ async function processExcelData(fileBuffer: ArrayBuffer) {
     return processData(headers, rows);
   } catch (error) {
     console.error('Error processing Excel data:', error);
-    return { validData: [], errors: [(error as Error).message] };
+    return { validData: [], errors: [`Error memproses file Excel: ${(error as Error).message}`] };
   }
 }
 
@@ -113,7 +135,6 @@ function processData(headers: string[], rows: any[][]) {
     nim: ['nim', 'nomor induk', 'nomor mahasiswa'],
     nama_beasiswa: ['nama_beasiswa', 'nama beasiswa', 'namabeasiswa', 'beasiswa', 'nama'],
     sumber_beasiswa: ['sumber_beasiswa', 'sumber beasiswa', 'sumberbeasiswa', 'sumber'],
-    beasiswa_status: ['beasiswa_status', 'status beasiswa', 'statusbeasiswa', 'status'],
     jenis_beasiswa: ['jenis_beasiswa', 'jenis beasiswa', 'jenisbeasiswa', 'jenis']
   };
   
@@ -129,19 +150,18 @@ function processData(headers: string[], rows: any[][]) {
   }
   
   // Check required headers
-  const requiredHeaders = ['nim', 'nama_beasiswa', 'sumber_beasiswa', 'beasiswa_status', 'jenis_beasiswa'];
+  const requiredHeaders = ['nim', 'nama_beasiswa', 'sumber_beasiswa', 'jenis_beasiswa'];
   const missingHeaders = requiredHeaders.filter(h => headerMap[h] === undefined);
   
   if (missingHeaders.length > 0) {
     return { 
       validData: [], 
-      errors: [`Kolom berikut tidak ditemukan: ${missingHeaders.join(', ')}. Pastikan file memiliki kolom: NIM, Nama Beasiswa, Sumber Beasiswa, Status Beasiswa, dan Jenis Beasiswa.`] 
+      errors: [`Kolom berikut tidak ditemukan: ${missingHeaders.join(', ')}. Pastikan file memiliki kolom: NIM, Nama Beasiswa, Sumber Beasiswa, dan Jenis Beasiswa.`] 
     };
   }
   
   const validData = [];
   const errors = [];
-  const validStatuses = ['Aktif', 'Selesai', 'Dibatalkan'];
   const validJenis = ['Pemerintah', 'Non-Pemerintah'];
   
   // Process data rows
@@ -154,24 +174,14 @@ function processData(headers: string[], rows: any[][]) {
       const nim = String(values[headerMap.nim] || '').trim();
       const nama_beasiswa = String(values[headerMap.nama_beasiswa] || '').trim();
       const sumber_beasiswa = String(values[headerMap.sumber_beasiswa] || '').trim();
-      let beasiswa_status = String(values[headerMap.beasiswa_status] || '').trim();
       let jenis_beasiswa = String(values[headerMap.jenis_beasiswa] || '').trim();
       
       // Validate required fields
-      if (!nim || !nama_beasiswa || !sumber_beasiswa || !beasiswa_status || !jenis_beasiswa) {
+      if (!nim || !nama_beasiswa || !sumber_beasiswa || !jenis_beasiswa) {
         errors.push(`Baris ${i+2}: Data tidak lengkap (NIM: ${nim || 'kosong'})`);
         continue;
       }
       
-      // Normalize status beasiswa
-      beasiswa_status = normalizeBeasiswaStatus(beasiswa_status);
-      
-      // Validate status beasiswa
-      if (!validStatuses.includes(beasiswa_status)) {
-        errors.push(`Baris ${i+2}: Status beasiswa tidak valid "${beasiswa_status}" untuk NIM ${nim}. Harus salah satu dari: ${validStatuses.join(', ')}`);
-        continue;
-      }
-      
       // Normalize jenis beasiswa
       jenis_beasiswa = normalizeJenisBeasiswa(jenis_beasiswa);
       
@@ -186,7 +196,6 @@ function processData(headers: string[], rows: any[][]) {
         nim,
         nama_beasiswa,
         sumber_beasiswa,
-        beasiswa_status,
         jenis_beasiswa
       });
       
@@ -198,25 +207,6 @@ function processData(headers: string[], rows: any[][]) {
   return { validData, errors };
 }
 
-// Function to normalize beasiswa status values
-function normalizeBeasiswaStatus(value: string): string {
-  const lowerValue = value.toLowerCase();
-  
-  if (['aktif', 'active', 'a'].includes(lowerValue)) {
-    return 'Aktif';
-  }
-  
-  if (['selesai', 'complete', 'completed', 's', 'finish', 'finished'].includes(lowerValue)) {
-    return 'Selesai';
-  }
-  
-  if (['dibatalkan', 'cancel', 'cancelled', 'canceled', 'batal', 'd', 'c'].includes(lowerValue)) {
-    return 'Dibatalkan';
-  }
-  
-  return value; // Return original if no match
-}
-
 // Function to normalize jenis beasiswa values
 function normalizeJenisBeasiswa(value: string): string {
   const lowerValue = value.toLowerCase();
@@ -238,22 +228,13 @@ async function insertDataToDatabase(data: any[]) {
   let errorCount = 0;
   const errorMessages: string[] = [];
   
-  console.log('=== DEBUG: Starting beasiswa data insertion process ===');
-  console.log(`Total data items to process: ${data.length}`);
-  console.log('Sample data items:', data.slice(0, 3));
-  
   // First, validate all NIMs exist before processing
   const uniqueNims = [...new Set(data.map(item => item.nim))];
-  console.log(`Unique NIMs found: ${uniqueNims.length}`);
-  console.log('Unique NIMs:', uniqueNims);
-  
   const nimValidationMap = new Map();
   
   // Batch check all NIMs for existence
-  console.log('=== DEBUG: Starting NIM validation ===');
   for (const nim of uniqueNims) {
     try {
-      console.log(`Checking NIM: ${nim}`);
       const { data: mahasiswaData, error: checkError } = await supabase
         .from('mahasiswa')
         .select('id_mahasiswa, nama')
@@ -261,45 +242,28 @@ async function insertDataToDatabase(data: any[]) {
         .single();
 
       if (checkError || !mahasiswaData) {
-        console.log(`❌ NIM ${nim}: NOT FOUND in database`);
-        console.log(`Error details:`, checkError);
         nimValidationMap.set(nim, { exists: false, error: 'Mahasiswa dengan NIM ini tidak ditemukan dalam database' });
       } else {
-        console.log(`✅ NIM ${nim}: FOUND - ID: ${mahasiswaData.id_mahasiswa}, Nama: ${mahasiswaData.nama}`);
         nimValidationMap.set(nim, { exists: true, id_mahasiswa: mahasiswaData.id_mahasiswa, nama: mahasiswaData.nama });
       }
     } catch (error) {
-      console.log(`❌ NIM ${nim}: ERROR during validation`);
-      console.log(`Error details:`, error);
       nimValidationMap.set(nim, { exists: false, error: `Error checking NIM: ${(error as Error).message}` });
     }
   }
   
-  console.log('=== DEBUG: NIM validation results ===');
-  console.log('Validation map:', Object.fromEntries(nimValidationMap));
-  
   // Process each data item
-  console.log('=== DEBUG: Starting beasiswa data processing ===');
   for (const item of data) {
     try {
-      console.log(`\n--- Processing beasiswa item: NIM ${item.nim} ---`);
-      console.log('Item data:', item);
-      
       const nimValidation = nimValidationMap.get(item.nim);
-      console.log('NIM validation result:', nimValidation);
       
       if (!nimValidation || !nimValidation.exists) {
         errorCount++;
         const errorMsg = nimValidation?.error || `NIM ${item.nim}: Mahasiswa dengan NIM ini tidak ditemukan dalam database`;
-        console.log(`❌ Skipping item - ${errorMsg}`);
         errorMessages.push(errorMsg);
         continue;
       }
 
-      console.log(`✅ NIM ${item.nim} is valid, proceeding with beasiswa check/insert`);
-
       // Check if beasiswa already exists for this mahasiswa and nama_beasiswa
-      console.log(`Checking existing beasiswa for mahasiswa ID: ${nimValidation.id_mahasiswa}, nama_beasiswa: ${item.nama_beasiswa}`);
       const { data: existingBeasiswa, error: beasiswaCheckError } = await supabase
         .from('beasiswa_mahasiswa')
         .select('id_beasiswa')
@@ -307,18 +271,12 @@ async function insertDataToDatabase(data: any[]) {
         .eq('nama_beasiswa', item.nama_beasiswa)
         .single();
 
-      if (beasiswaCheckError && beasiswaCheckError.code !== 'PGRST116') {
-        console.log(`❌ Error checking existing beasiswa:`, beasiswaCheckError);
-      }
-
       if (existingBeasiswa) {
-        console.log(`📝 Updating existing beasiswa (ID: ${existingBeasiswa.id_beasiswa})`);
         // Update existing beasiswa
         const { error: updateError } = await supabase
           .from('beasiswa_mahasiswa')
           .update({
             sumber_beasiswa: item.sumber_beasiswa,
-            beasiswa_status: item.beasiswa_status,
             jenis_beasiswa: item.jenis_beasiswa
           })
           .eq('id_beasiswa', existingBeasiswa.id_beasiswa);
@@ -326,14 +284,10 @@ async function insertDataToDatabase(data: any[]) {
         if (updateError) {
           errorCount++;
           const errorMsg = `NIM ${item.nim} (${nimValidation.nama}): Gagal memperbarui beasiswa: ${updateError.message}`;
-          console.log(`❌ Update failed: ${errorMsg}`);
           errorMessages.push(errorMsg);
           continue;
-        } else {
-          console.log(`✅ Beasiswa updated successfully`);
         }
       } else {
-        console.log(`📝 Inserting new beasiswa for mahasiswa ID: ${nimValidation.id_mahasiswa}`);
         // Insert new beasiswa
         const { error: insertError } = await supabase
           .from('beasiswa_mahasiswa')
@@ -341,34 +295,23 @@ async function insertDataToDatabase(data: any[]) {
             id_mahasiswa: nimValidation.id_mahasiswa,
             nama_beasiswa: item.nama_beasiswa,
             sumber_beasiswa: item.sumber_beasiswa,
-            beasiswa_status: item.beasiswa_status,
             jenis_beasiswa: item.jenis_beasiswa
           });
 
         if (insertError) {
           errorCount++;
           const errorMsg = `NIM ${item.nim} (${nimValidation.nama}): Gagal menyimpan beasiswa: ${insertError.message}`;
-          console.log(`❌ Insert failed: ${errorMsg}`);
           errorMessages.push(errorMsg);
           continue;
-        } else {
-          console.log(`✅ Beasiswa inserted successfully`);
         }
       }
 
       imported++;
-      console.log(`✅ Item processed successfully. Imported count: ${imported}`);
     } catch (error) {
-      console.error(`❌ Error processing record for NIM ${item.nim}:`, error);
       errorCount++;
       errorMessages.push(`NIM ${item.nim}: Terjadi kesalahan: ${(error as Error).message}`);
     }
   }
   
-  console.log('=== DEBUG: Final results ===');
-  console.log(`Total imported: ${imported}`);
-  console.log(`Total errors: ${errorCount}`);
-  console.log(`Error messages:`, errorMessages);
-  
   return { imported, errorCount, errorMessages };
 } 

app/dashboard/layout.tsx

@@ -1,9 +0,0 @@
-import ClientLayout from '@/components/ClientLayout';
-
-export default function DashboardLayout({
-  children,
-}: {
-  children: React.ReactNode;
-}) {
-  return <ClientLayout>{children}</ClientLayout>;
-} 

app/dashboard/mahasiswa/beasiswa/page.tsx

@@ -1,94 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import FilterJenisBeasiswa from "@/components/FilterJenisBeasiswa";
-import TotalBeasiswaChart from "@/components/charts/TotalBeasiswaChart";
-import TotalBeasiswaPieChart from "@/components/charts/TotalBeasiswaPieChart";
-import NamaBeasiswaChart from "@/components/charts/NamaBeasiswaChart";
-import NamaBeasiswaPieChart from "@/components/charts/NamaBeasiswaPieChart";
-import JenisPendaftaranBeasiswaChart from "@/components/charts/JenisPendaftaranBeasiswaChart";
-import JenisPendaftaranBeasiswaPieChart from "@/components/charts/JenisPendaftaranBeasiswaPieChart";
-import AsalDaerahBeasiswaChart from "@/components/charts/AsalDaerahBeasiswaChart";
-import IPKBeasiswaChart from "@/components/charts/IPKBeasiswaChart";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function BeasiswaMahasiswaPage() {
-    const [selectedYear, setSelectedYear] = useState<string>("all");
-    const [selectedJenisBeasiswa, setSelectedJenisBeasiswa] = useState<string>("Pemerintah");
-  
-    return (
-      <div className="container mx-auto p-4 space-y-6">
-        <h1 className="text-3xl font-bold mb-4">Mahasiswa Beasiswa</h1>
-        
-        <div className="mb-4">
-          <p className="text-gray-600 dark:text-gray-300">
-            Mahasiswa yang mendapatkan beasiswa di program studi Informatika Fakultas Teknik Universitas Tanjungpura.
-          </p>
-        </div>
-  
-        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-              <FilterJenisBeasiswa
-                selectedJenisBeasiswa={selectedJenisBeasiswa}
-                onJenisBeasiswaChange={setSelectedJenisBeasiswa}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-        <>
-          <TotalBeasiswaChart 
-            selectedYear={selectedYear}
-            selectedJenisBeasiswa={selectedJenisBeasiswa}
-          />
-          <NamaBeasiswaChart 
-            selectedYear={selectedYear}
-            selectedJenisBeasiswa={selectedJenisBeasiswa}
-          />
-          <JenisPendaftaranBeasiswaChart 
-            selectedYear={selectedYear}
-            selectedJenisBeasiswa={selectedJenisBeasiswa}
-          />
-        </>
-        ) : (
-          <>
-            <TotalBeasiswaPieChart 
-              selectedYear={selectedYear}
-              selectedJenisBeasiswa={selectedJenisBeasiswa}
-            />
-            <NamaBeasiswaPieChart 
-              selectedYear={selectedYear}
-              selectedJenisBeasiswa={selectedJenisBeasiswa}
-            />
-            <JenisPendaftaranBeasiswaPieChart 
-              selectedYear={selectedYear}
-              selectedJenisBeasiswa={selectedJenisBeasiswa}
-            />
-          </>
-        )}
-
-        <AsalDaerahBeasiswaChart 
-          selectedYear={selectedYear}
-          selectedJenisBeasiswa={selectedJenisBeasiswa}
-        />
-
-        {selectedYear === "all" && (
-          <IPKBeasiswaChart 
-            selectedJenisBeasiswa={selectedJenisBeasiswa}
-          />
-        )}
-      </div>
-    );
-  }

app/dashboard/mahasiswa/berprestasi/page.tsx

@@ -1,80 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import FilterJenisPrestasi from "@/components/FilterJenisPrestasi";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import TotalPrestasiChart from "@/components/charts/TotalPrestasiChart";
-import TotalPrestasiPieChart from "@/components/charts/TotalPrestasiPieChart";
-import TingkatPrestasiChart from "@/components/charts/TingkatPrestasiChart";
-import TingkatPrestasiPieChart from "@/components/charts/TingkatPrestasiPieChart";
-import JenisPendaftaranPrestasiChart from "@/components/charts/JenisPendaftaranPrestasiChart";
-import JenisPendaftaranPrestasiPieChart from "@/components/charts/JenisPendaftaranPrestasiPieChart";
-import AsalDaerahPrestasiChart from "@/components/charts/AsalDaerahPrestasiChart";
-import IPKPrestasiChart from "@/components/charts/IPKPrestasiChart";
-
-export default function BerprestasiMahasiswaPage() {
-    const [selectedYear, setSelectedYear] = useState<string>("all");
-    const [selectedJenisPrestasi, setSelectedJenisPrestasi] = useState<string>("Akademik");
-  
-    return (
-      <div className="container mx-auto p-4 space-y-6">
-        <h1 className="text-3xl font-bold mb-4">Mahasiswa Berprestasi</h1>
-        
-        <div className="mb-4">
-          <p className="text-gray-600 dark:text-gray-300">
-            Mahasiswa yang mendapatkan prestasi akademik dan non akademik di program studi Informatika Fakultas Teknik Universitas Tanjungpura.
-          </p>
-        </div>
-  
-        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-              <FilterJenisPrestasi
-                selectedJenisPrestasi={selectedJenisPrestasi}
-                onJenisPrestasiChange={setSelectedJenisPrestasi}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-        <>
-          <TotalPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
-          <TingkatPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
-          <JenisPendaftaranPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
-        </>
-        ) : (
-          <>
-            <TotalPrestasiPieChart 
-              selectedYear={selectedYear}
-              selectedJenisPrestasi={selectedJenisPrestasi}
-            />
-            <TingkatPrestasiPieChart 
-              selectedYear={selectedYear}
-              selectedJenisPrestasi={selectedJenisPrestasi}
-            />
-            <JenisPendaftaranPrestasiPieChart 
-              selectedYear={selectedYear}
-              selectedJenisPrestasi={selectedJenisPrestasi}
-            />
-          </>
-        )}
-
-        <AsalDaerahPrestasiChart selectedYear={selectedYear} selectedJenisPrestasi={selectedJenisPrestasi} />
-
-        {selectedYear === "all" && (
-          <IPKPrestasiChart selectedJenisPrestasi={selectedJenisPrestasi} />
-        )}
-      </div>
-    );
-  }

app/dashboard/mahasiswa/lulustepatwaktu/page.tsx

@@ -1,61 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
-import LulusTepatWaktuPieChart from "@/components/charts/LulusTepatWaktuPieChart";
-import JenisPendaftaranLulusChart from "@/components/charts/JenisPendaftaranLulusChart";
-import JenisPendaftaranLulusPieChart from "@/components/charts/JenisPendaftaranLulusPieChart";
-import AsalDaerahLulusChart from "@/components/charts/AsalDaerahLulusChart";
-import IPKLulusTepatChart from "@/components/charts/IPKLulusTepatChart";
-
-export default function LulusTepatWaktuPage() {
-    const [selectedYear, setSelectedYear] = useState<string>("all");
-  
-    return (
-      <div className="container mx-auto p-4 space-y-6">
-        <h1 className="text-3xl font-bold mb-4">Mahasiswa Lulus Tepat Waktu</h1>
-        
-        <div className="mb-4">
-          <p className="text-gray-600 dark:text-gray-300">
-            Mahasiswa yang lulus tepat waktu sesuai dengan masa studi ≤ 4 tahun program studi Informatika Fakultas Teknik Universitas Tanjungpura.
-          </p>
-        </div>
-  
-        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-        <>
-          <LulusTepatWaktuChart selectedYear={selectedYear} />
-          <JenisPendaftaranLulusChart selectedYear={selectedYear} />
-        </>
-        ) : (
-          <>
-            <LulusTepatWaktuPieChart selectedYear={selectedYear} />
-            <JenisPendaftaranLulusPieChart selectedYear={selectedYear} />
-          </>
-        )}
-  
-        <AsalDaerahLulusChart selectedYear={selectedYear} />
-        {selectedYear === "all" && (
-        <IPKLulusTepatChart selectedYear={selectedYear} />
-        )}
-
-      </div>
-    );
-  }

app/dashboard/mahasiswa/profile/page.tsx

@@ -1,11 +0,0 @@
-'use client';
-
-export default function ProfilePage() {
-  return (
-    <div className="container mx-auto p-4 w-full max-w-4xl">
-      <div className="text-center text-muted-foreground">
-        Sedang dalam pengembangan :)
-      </div>
-    </div>
-  );
-}

app/dashboard/mahasiswa/status/page.tsx

@@ -1,86 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import FilterStatusKuliah from "@/components/FilterStatusKuliah";
-import StatusMahasiswaFilterChart from "@/components/charts/StatusMahasiswaFilterChart";
-import StatusMahasiswaFilterPieChart from "@/components/charts/StatusMahasiswaFilterPieChart";
-import JenisPendaftaranStatusChart from "@/components/charts/JenisPendaftaranStatusChart";
-import JenisPendaftaranStatusPieChart from "@/components/charts/JenisPendaftaranStatusPieChart";
-import AsalDaerahStatusChart from '@/components/charts/AsalDaerahStatusChart';
-import IpkStatusChart from '@/components/charts/IpkStatusChart';
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function StatusMahasiswaPage() {
-    const [selectedYear, setSelectedYear] = useState<string>("all");
-    const [selectedStatus, setSelectedStatus] = useState<string>("Aktif");
-  
-    return (
-      <div className="container mx-auto p-4 space-y-6">
-        <h1 className="text-3xl font-bold mb-4">Status Mahasiswa</h1>
-        
-        <div className="mb-4">
-          <p className="text-gray-600 dark:text-gray-300">
-            Mahasiswa status adalah status kuliah mahasiswa program studi Informatika Fakultas Teknik Universitas Tanjungpura.
-          </p>
-        </div>
-  
-        <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-              <FilterStatusKuliah
-                selectedStatus={selectedStatus}
-                onStatusChange={setSelectedStatus}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-        <>
-          <StatusMahasiswaFilterChart 
-            selectedYear={selectedYear}
-            selectedStatus={selectedStatus}
-          />
-          <JenisPendaftaranStatusChart
-            selectedYear={selectedYear}
-            selectedStatus={selectedStatus}
-          />
-        </>
-        ) : (
-          <>
-            <StatusMahasiswaFilterPieChart
-              selectedYear={selectedYear}
-              selectedStatus={selectedStatus}
-            />
-            <JenisPendaftaranStatusPieChart
-              selectedYear={selectedYear}
-              selectedStatus={selectedStatus}
-            />
-          </>
-        )}
-
-        <AsalDaerahStatusChart
-          selectedYear={selectedYear}
-          selectedStatus={selectedStatus}
-        />
-
-        {selectedYear === "all" && (
-          <IpkStatusChart
-            selectedYear={selectedYear}
-            selectedStatus={selectedStatus}
-          />
-        )}
-
-      </div>
-    );
-  }

app/dashboard/mahasiswa/total/page.tsx

@@ -1,59 +0,0 @@
-'use client';
-
-import { useState } from "react";
-import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
-import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
-import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
-import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
-import IPKChart from "@/components/charts/IPKChart";
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
-import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-
-export default function TotalMahasiswaPage() {
-  const [selectedYear, setSelectedYear] = useState<string>("all");
-
-  return (
-    <div className="container mx-auto p-4 space-y-6">
-      <h1 className="text-3xl font-bold mb-4">Total Mahasiswa</h1>
-      
-      <div className="mb-4">
-        <p className="text-gray-600 dark:text-gray-300">
-          Mahasiswa total adalah jumlah mahasiswa program studi Informatika Fakultas Teknik Universitas Tanjungpura.
-        </p>
-      </div>
-
-      <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-      {selectedYear === "all" ? (
-        <>
-          <StatistikMahasiswaChart />
-          <JenisPendaftaranChart />
-          <AsalDaerahChart />
-          <IPKChart />
-        </>
-      ) : (
-        <>
-          <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
-          <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
-          <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
-        </>
-      )}
-    </div>
-  );
-}

app/dashboard/page.tsx

@@ -1,238 +0,0 @@
-'use client';
-
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
-import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";
-import { useEffect, useState } from "react";
-import { useTheme } from "next-themes";
-import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
-import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
-import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
-import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
-import IPKChart from '@/components/charts/IPKChart';
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
-import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
-import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
-
-interface MahasiswaTotal {
-  total_mahasiswa: number;
-  mahasiswa_aktif: number;
-  total_lulus: number;
-  pria_lulus: number;
-  wanita_lulus: number;
-  total_berprestasi: number;
-  prestasi_akademik: number;
-  prestasi_non_akademik: number;
-  ipk_rata_rata_aktif: number;
-  ipk_rata_rata_lulus: number;
-  total_mahasiswa_aktif_lulus: number;
-}
-
-// Skeleton loading component
-const CardSkeleton = () => (
-  <Card className="bg-white dark:bg-slate-900 shadow-lg">
-    <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-      <div className="h-4 w-24 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-      <div className="h-4 w-4 bg-gray-200 dark:bg-gray-700 rounded-full animate-pulse"></div>
-    </CardHeader>
-    <CardContent>
-      <div className="h-8 w-16 bg-gray-200 dark:bg-gray-700 rounded animate-pulse mb-2"></div>
-      <div className="flex justify-between">
-        <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-        <div className="h-3 w-20 bg-gray-200 dark:bg-gray-700 rounded animate-pulse"></div>
-      </div>
-    </CardContent>
-  </Card>
-);
-
-export default function DashboardPage() {
-  const { theme } = useTheme();
-  const [mahasiswaData, setMahasiswaData] = useState<MahasiswaTotal>({
-    total_mahasiswa: 0,
-    mahasiswa_aktif: 0,
-    total_lulus: 0,
-    pria_lulus: 0,
-    wanita_lulus: 0,
-    total_berprestasi: 0,
-    prestasi_akademik: 0,
-    prestasi_non_akademik: 0,
-    ipk_rata_rata_aktif: 0,
-    ipk_rata_rata_lulus: 0,
-    total_mahasiswa_aktif_lulus: 0
-  });
-  const [selectedYear, setSelectedYear] = useState<string>("all");
-  const [loading, setLoading] = useState(true);
-  const [error, setError] = useState<string | null>(null);
-
-  useEffect(() => {
-    const fetchData = async () => {
-      try {
-        // Menggunakan cache API untuk mempercepat loading
-        const cacheKey = 'mahasiswa-total-data';
-        const cachedData = sessionStorage.getItem(cacheKey);
-        const cachedTimestamp = sessionStorage.getItem(`${cacheKey}-timestamp`);
-        
-        // Cek apakah data cache masih valid (kurang dari 60 detik)
-        const isCacheValid = cachedTimestamp && 
-          (Date.now() - parseInt(cachedTimestamp)) < 60000;
-        
-        if (cachedData && isCacheValid) {
-          setMahasiswaData(JSON.parse(cachedData));
-        }
-        
-        // Fetch data total mahasiswa
-        const totalResponse = await fetch('/api/mahasiswa/total', {
-          cache: 'no-store',
-        });
-        
-        if (!totalResponse.ok) {
-          throw new Error('Failed to fetch total data');
-        }
-        
-        const totalData = await totalResponse.json();
-        setMahasiswaData(totalData);
-        
-        // Menyimpan data dan timestamp ke sessionStorage
-        sessionStorage.setItem(cacheKey, JSON.stringify(totalData));
-        sessionStorage.setItem(`${cacheKey}-timestamp`, Date.now().toString());
-      } catch (err) {
-        setError(err instanceof Error ? err.message : 'An error occurred');
-        console.error('Error fetching data:', err);
-      } finally {
-        setLoading(false);
-      }
-    };
-
-    fetchData();
-  }, []);
-
-  return (
-    <div className="container mx-auto p-4 space-y-6">
-      <h1 className="text-3xl font-bold mb-8">Dashboard Portal Data Informatika</h1>
-      
-      {loading ? (
-        <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
-          <CardSkeleton />
-          <CardSkeleton />
-          <CardSkeleton />
-          <CardSkeleton />
-        </div>
-      ) : error ? (
-        <div className="bg-red-50 border-l-4 border-red-500 p-4 mb-4">
-          <div className="flex">
-            <div className="flex-shrink-0">
-              <svg className="h-5 w-5 text-red-500" viewBox="0 0 20 20" fill="currentColor">
-                <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clipRule="evenodd" />
-              </svg>
-            </div>
-            <div className="ml-3">
-              <p className="text-sm text-red-700">{error}</p>
-            </div>
-          </div>
-        </div>
-      ) : (
-        <>
-          <div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4 mb-8">
-            {/* Kartu Total Mahasiswa */}
-            <Card className="bg-white dark:bg-slate-900 shadow-lg">
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium dark:text-white">
-                  Total Mahasiswa
-                </CardTitle>
-                <Users className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_mahasiswa}</div>
-                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
-                  <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.mahasiswa_aktif}</span></span>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Kartu Total Kelulusan */}
-            <Card className="bg-white dark:bg-slate-900 shadow-lg">
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium dark:text-white">
-                  Total Kelulusan
-                </CardTitle>
-                <GraduationCap className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_lulus}</div>
-                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
-                  <span className="dark:text-white">Laki-laki: <span className="text-blue-500">{mahasiswaData.pria_lulus}</span></span>
-                  <span className="dark:text-white">Perempuan: <span className="text-pink-500">{mahasiswaData.wanita_lulus}</span></span>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Kartu Total Prestasi */}
-            <Card className="bg-white dark:bg-slate-900 shadow-lg">
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium dark:text-white">
-                  Mahasiswa Berprestasi
-                </CardTitle>
-                <Trophy className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.total_berprestasi}</div>
-                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
-                  <span className="dark:text-white">Akademik: <span className="text-yellow-500">{mahasiswaData.prestasi_akademik}</span></span>
-                  <span className="dark:text-white">Non-Akademik: <span className="text-purple-500">{mahasiswaData.prestasi_non_akademik}</span></span>
-                </div>
-              </CardContent>
-            </Card>
-
-            {/* Kartu Rata-rata IPK */}
-            <Card className="bg-white dark:bg-slate-900 shadow-lg">
-              <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-                <CardTitle className="text-sm font-medium dark:text-white">
-                  Rata-rata IPK
-                </CardTitle>
-                <BookOpen className="h-4 w-4 text-muted-foreground" />
-              </CardHeader>
-              <CardContent>
-                <div className="text-2xl font-bold dark:text-white">{mahasiswaData.mahasiswa_aktif}</div>
-                <div className="flex justify-between mt-2 text-xs text-muted-foreground">
-                  <span className="dark:text-white">Aktif: <span className="text-green-500">{mahasiswaData.ipk_rata_rata_aktif}</span></span>
-                </div>
-              </CardContent>
-            </Card>
-          </div>
-
-          <Card className="bg-white dark:bg-slate-900 shadow-lg dark:text-white">
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium dark:text-white">
-              Filter Data
-            </CardTitle>
-          </CardHeader>
-          <CardContent>
-            <div className="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:space-x-4">
-              <FilterTahunAngkatan 
-                selectedYear={selectedYear}
-                onYearChange={setSelectedYear}
-              />
-            </div>
-          </CardContent>
-        </Card>
-
-        {selectedYear === "all" ? (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <StatistikMahasiswaChart />
-            <JenisPendaftaranChart />
-            <StatusMahasiswaChart />
-            <IPKChart />
-            <AsalDaerahChart />
-          </div>
-        ) : (
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-            <StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
-            <JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
-            <AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
-          </div>
-        )}
-        </>
-      )}
-    </div>
-  );
-} 

app/keloladata/beasiswa/page.tsx

@@ -1,7 +1,9 @@
+import DataTableBeasiswaMahasiswa from "@/components/datatable/data-table-beasiswa-mahasiswa";
+
 export default function BeasiswaPage() {
   return (
-    <div className="flex flex-col gap-4 py-4 px-4 md:gap-6 md:py-6">
+    <div className="container mx-auto p-4 space-y-6">
-      <h1>Beasiswa</h1>
+      <DataTableBeasiswaMahasiswa />
     </div>
   );
 } 

app/keloladata/prestasi/page.tsx

@@ -1,7 +1,9 @@
+import DataTablePrestasiMahasiswa from "@/components/datatable/data-table-prestasi-mahasiswa";
+
 export default function PrestasiPage() {
   return (
-    <div className="flex flex-col gap-4 py-4 px-4 md:gap-6 md:py-6">
+    <div className="container mx-auto p-4 space-y-6">
-      <h1>Prestasi</h1>
+      <DataTablePrestasiMahasiswa />
     </div>
   );
 } 

app/layout.tsx

@@ -2,6 +2,7 @@ import type { Metadata } from 'next';
 import { Geist, Geist_Mono } from 'next/font/google';
 import './globals.css';
 import ClientLayout from '@/components/ClientLayout';
+import { ToastProvider } from "@/components/ui/toast-provider";
 
 const geistSans = Geist({
   variable: '--font-geist-sans',
@@ -33,7 +34,9 @@ export default function RootLayout({
         <meta name="robots" content="noindex, nofollow" />
       </head>
       <body suppressHydrationWarning className={`${geistSans.variable} ${geistMono.variable} antialiased min-h-screen`}>
-        <ClientLayout>{children}</ClientLayout>
+        <ToastProvider>
+          <ClientLayout>{children}</ClientLayout>
+        </ToastProvider>
       </body>
     </html>
   );

app/page.tsx

@@ -4,15 +4,9 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Users, GraduationCap, Trophy, BookOpen } from "lucide-react";
 import { useEffect, useState } from "react";
 import { useTheme } from "next-themes";
-import StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
 import StatistikMahasiswaChart from "@/components/charts/StatistikMahasiswaChart";
 import JenisPendaftaranChart from "@/components/charts/JenisPendaftaranChart";
 import AsalDaerahChart from "@/components/charts/AsalDaerahChart";
-import IPKChart from '@/components/charts/IPKChart';
-import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
-import StatistikPerAngkatanChart from "@/components/charts/StatistikPerAngkatanChart";
-import JenisPendaftaranPerAngkatanChart from "@/components/charts/JenisPendaftaranPerAngkatanChart";
-import AsalDaerahPerAngkatanChart from "@/components/charts/AsalDaerahPerAngkatanChart";
 
 interface MahasiswaTotal {
   total_mahasiswa: number;
@@ -108,7 +102,7 @@ export default function DashboardPage() {
 
   return (
     <div className="container mx-auto p-4 space-y-6">
-      <h1 className="text-3xl font-bold mb-8">Dashboard Portal Data Informatika</h1>
+      <h1 className="text-3xl font-bold mb-8">Visualisasi Data Mahasiswa Informatika</h1>
       
       {loading ? (
         <div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">

components/datatable/data-table-beasiswa-mahasiswa.tsx

@@ -0,0 +1,685 @@
+"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,
+  Filter
+} from "lucide-react";
+import UploadExcelBeasiswaMahasiswa from "@/components/datatable/upload-file-beasiswa-mahasiswa";
+import { useToast } from "@/components/ui/toast-provider";
+
+// Define the BeasiswaMahasiswa type
+interface BeasiswaMahasiswa {
+  id_beasiswa: number;
+  nim: string;
+  nama: string;
+  nama_beasiswa: string;
+  sumber_beasiswa: string;
+  jenis_beasiswa: "Pemerintah" | "Non-Pemerintah";
+  created_at: string;
+}
+
+export default function DataTableBeasiswaMahasiswa() {
+  const { showSuccess, showError } = useToast();
+
+  // State for data
+  const [beasiswaMahasiswa, setBeasiswaMahasiswa] = useState<BeasiswaMahasiswa[]>([]);
+  const [filteredData, setFilteredData] = useState<BeasiswaMahasiswa[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // State for filtering
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterJenisBeasiswa, setFilterJenisBeasiswa] = useState<string>("");
+  
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginatedData, setPaginatedData] = useState<BeasiswaMahasiswa[]>([]);
+  
+  // State for form
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [formData, setFormData] = useState<Partial<BeasiswaMahasiswa>>({
+    jenis_beasiswa: "Pemerintah"
+  });
+  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(() => {
+    fetchBeasiswaMahasiswa();
+  }, []);
+
+  // Filter data when search term or filter changes
+  useEffect(() => {
+    filterData();
+  }, [searchTerm, filterJenisBeasiswa, beasiswaMahasiswa]);
+
+  // Update paginated data when filtered data or pagination settings change
+  useEffect(() => {
+    paginateData();
+  }, [filteredData, currentPage, pageSize]);
+
+  // Fetch beasiswa mahasiswa data from API
+  const fetchBeasiswaMahasiswa = async () => {
+    try {
+      setLoading(true);
+      let url = "/api/keloladata/data-beasiswa-mahasiswa";
+      
+      // Add filters to URL if they exist
+      const params = new URLSearchParams();
+      if (searchTerm) {
+        params.append("search", searchTerm);
+      }
+      if (filterJenisBeasiswa && filterJenisBeasiswa !== "all") {
+        params.append("jenis_beasiswa", filterJenisBeasiswa);
+      }
+      
+      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();
+      setBeasiswaMahasiswa(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 and filters
+  const filterData = () => {
+    let filtered = [...beasiswaMahasiswa];
+    
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (item) =>
+          (item.nim?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
+          (item.nama?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
+          (item.nama_beasiswa?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
+          (item.sumber_beasiswa?.toLowerCase() || "").includes(searchTerm.toLowerCase())
+      );
+    }
+    
+    // Filter by jenis beasiswa
+    if (filterJenisBeasiswa && filterJenisBeasiswa !== "all") {
+      filtered = filtered.filter((item) => item.jenis_beasiswa === filterJenisBeasiswa);
+    }
+    
+    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({
+      jenis_beasiswa: "Pemerintah"
+    });
+  };
+
+  // Handle form input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Handle select input changes
+  const handleSelectChange = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Open form dialog for adding new beasiswa
+  const handleAdd = () => {
+    setFormMode("add");
+    resetForm();
+    setIsDialogOpen(true);
+  };
+
+  // Open form dialog for editing beasiswa
+  const handleEdit = (data: BeasiswaMahasiswa) => {
+    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 beasiswa
+        const response = await fetch("/api/keloladata/data-beasiswa-mahasiswa", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific NIM not found error
+          if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
+            showError("Gagal!", `NIM ${formData.nim} tidak terdaftar dalam database. Silakan cek kembali NIM yang dimasukkan.`);
+            throw new Error(`NIM ${formData.nim} tidak terdaftar. Silakan cek kembali NIM yang dimasukkan.`);
+          }
+          showError("Gagal!", "Gagal menambahkan beasiswa");
+          throw new Error(responseData.message || "Failed to add beasiswa");
+        }
+        
+        // Show success message with student info
+        showSuccess("Berhasil!", "Beasiswa mahasiswa berhasil ditambahkan");
+      } else {
+        // Edit existing beasiswa
+        const response = await fetch(`/api/keloladata/data-beasiswa-mahasiswa?id=${formData.id_beasiswa}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific NIM not found error
+          if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
+            throw new Error(`NIM ${formData.nim} tidak terdaftar. Silakan cek kembali NIM yang dimasukkan.`);
+          }
+          showError("Gagal!", responseData.message || "Failed to update beasiswa");
+          throw new Error(responseData.message || "Failed to update beasiswa");
+        }
+        
+        showSuccess("Berhasil!", "Beasiswa mahasiswa berhasil diperbarui");
+      }
+      
+      // Refresh data after successful operation
+      await fetchBeasiswaMahasiswa();
+      setIsDialogOpen(false);
+      resetForm();
+    } catch (err) {
+      console.error("Error submitting form:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Delete beasiswa
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    
+    try {
+      setIsDeleting(true);
+      
+      const response = await fetch(`/api/keloladata/data-beasiswa-mahasiswa?id=${deleteId}`, {
+        method: "DELETE",
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to delete beasiswa");
+      }
+      
+      // Refresh data after successful deletion
+      await fetchBeasiswaMahasiswa();
+      setIsDeleteDialogOpen(false);
+      setDeleteId(null);
+      showSuccess("Berhasil!", "Beasiswa mahasiswa berhasil dihapus");
+      } catch (err) {
+      console.error("Error deleting beasiswa:", 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 Beasiswa Mahasiswa</h2>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <UploadExcelBeasiswaMahasiswa onUploadSuccess={fetchBeasiswaMahasiswa} />
+          <Button onClick={handleAdd}>
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Tambah Beasiswa
+          </Button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <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 NIM, nama, nama beasiswa, atau sumber..."
+            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>
+        <Select
+          value={filterJenisBeasiswa}
+          onValueChange={(value) => setFilterJenisBeasiswa(value)}
+        >
+          <SelectTrigger className="w-[200px]">
+            <SelectValue placeholder="Jenis Beasiswa" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Semua Jenis</SelectItem>
+            <SelectItem value="Pemerintah">Pemerintah</SelectItem>
+            <SelectItem value="Non-Pemerintah">Non-Pemerintah</SelectItem>
+          </SelectContent>
+        </Select>
+      </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 className="w-[100px]">NIM</TableHead>
+                <TableHead>Nama</TableHead>
+                <TableHead>Nama Beasiswa</TableHead>
+                <TableHead>Sumber Beasiswa</TableHead>
+                <TableHead>Jenis Beasiswa</TableHead>
+                {/* <TableHead>Tanggal</TableHead> */}
+                <TableHead className="text-right">Aksi</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="text-center py-8">
+                    Tidak ada data yang sesuai dengan filter
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((beasiswa) => (
+                  <TableRow key={beasiswa.id_beasiswa}>
+                    {/* <TableCell>{beasiswa.id_beasiswa}</TableCell> */}
+                    <TableCell className="font-medium">{beasiswa.nim}</TableCell>
+                    <TableCell>{beasiswa.nama}</TableCell>
+                    <TableCell>{beasiswa.nama_beasiswa}</TableCell>
+                    <TableCell>{beasiswa.sumber_beasiswa}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          beasiswa.jenis_beasiswa === "Pemerintah"
+                            ? "bg-purple-100 text-purple-800"
+                            : "bg-orange-100 text-orange-800"
+                        }`}
+                      >
+                        {beasiswa.jenis_beasiswa}
+                      </span>
+                    </TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleEdit(beasiswa)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="text-destructive hover:bg-destructive/10"
+                          onClick={() => handleDeleteConfirm(beasiswa.id_beasiswa)}
+                        >
+                          <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-[600px]">
+          <DialogHeader>
+            <DialogTitle>
+              {formMode === "add" ? "Tambah Beasiswa" : "Edit Beasiswa"}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label htmlFor="nim" className="text-sm font-medium">
+                    NIM <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="nim"
+                    name="nim"
+                    value={formData.nim || ""}
+                    onChange={handleInputChange}
+                    required
+                    maxLength={11}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="nama_beasiswa" className="text-sm font-medium">
+                    Nama Beasiswa <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="nama_beasiswa"
+                    name="nama_beasiswa"
+                    value={formData.nama_beasiswa || ""}
+                    onChange={handleInputChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="sumber_beasiswa" className="text-sm font-medium">
+                    Sumber Beasiswa <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="sumber_beasiswa"
+                    name="sumber_beasiswa"
+                    value={formData.sumber_beasiswa || ""}
+                    onChange={handleInputChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="jenis_beasiswa" className="text-sm font-medium">
+                    Jenis Beasiswa <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.jenis_beasiswa || "Pemerintah"}
+                    onValueChange={(value) => handleSelectChange("jenis_beasiswa", value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Pemerintah">Pemerintah</SelectItem>
+                      <SelectItem value="Non-Pemerintah">Non-Pemerintah</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </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 beasiswa 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

@@ -47,7 +47,7 @@ import {
 } from "lucide-react";
 import EditJenisPendaftaran from "@/components/datatable/edit-jenis-pendaftaran";
 import UploadExcelMahasiswa from "@/components/datatable/upload-excel-mahasiswa";
-
+import { useToast } from "@/components/ui/toast-provider";
 // Define the Mahasiswa type based on API route structure
 interface Mahasiswa {
   nim: string;
@@ -68,6 +68,7 @@ interface Mahasiswa {
 }
 
 export default function DataTableMahasiswa() {
+  const { showSuccess, showError } = useToast();
   // State for data
   const [mahasiswa, setMahasiswa] = useState<Mahasiswa[]>([]);
   const [filteredData, setFilteredData] = useState<Mahasiswa[]>([]);
@@ -162,11 +163,13 @@ export default function DataTableMahasiswa() {
         throw new Error(errorData.message || "Failed to update semesters");
       }
 
+      showSuccess("Berhasil!", "Semester mahasiswa aktif berhasil diperbarui");
 
       // Refresh data after successful update
       await fetchMahasiswa();
     } catch (err) {
       console.error("Error updating semesters:", err);
+      showError("Gagal!", (err as Error).message);
     } finally {
       setIsUpdatingSemester(false);
     }
@@ -337,7 +340,7 @@ export default function DataTableMahasiswa() {
           const errorData = await response.json();
           throw new Error(errorData.message || "Failed to add mahasiswa");
         }
-        
+        showSuccess("Data mahasiswa berhasil ditambahkan!");
       } else {
         // Edit existing mahasiswa
         const response = await fetch(`/api/keloladata/data-mahasiswa?nim=${formData.nim}`, {
@@ -352,7 +355,7 @@ export default function DataTableMahasiswa() {
           const errorData = await response.json();
           throw new Error(errorData.message || "Failed to update mahasiswa");
         }
-        
+        showSuccess("Data mahasiswa berhasil diperbarui!");
       } 
       
       // Refresh data after successful operation
@@ -361,6 +364,7 @@ export default function DataTableMahasiswa() {
       resetForm();
     } catch (err) {
       console.error("Error submitting form:", err);
+      showError(`Gagal ${formMode === "add" ? "menambahkan" : "memperbarui"} data mahasiswa.`);
     } finally {
       setIsSubmitting(false);
     }
@@ -387,8 +391,10 @@ export default function DataTableMahasiswa() {
       await fetchMahasiswa();
       setIsDeleteDialogOpen(false);
       setDeleteNim(null);
+      showSuccess("Data mahasiswa berhasil dihapus!");
     } catch (err) {
       console.error("Error deleting mahasiswa:", err);
+      showError("Gagal menghapus data mahasiswa.");
     } finally {
       setIsDeleting(false);
     }

components/datatable/data-table-prestasi-mahasiswa.tsx

@@ -0,0 +1,797 @@
+"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,
+  Filter,
+  Trophy
+} from "lucide-react";
+import UploadFilePrestasiMahasiswa from "@/components/datatable/upload-file-prestasi-mahasiswa";
+import { useToast } from "@/components/ui/toast-provider";
+
+// Define the PrestasiMahasiswa type
+interface PrestasiMahasiswa {
+  id_prestasi: number;
+  nim: string;
+  nama: string;
+  jenis_prestasi: "Akademik" | "Non-Akademik";
+  nama_prestasi: string;
+  tingkat_prestasi: "Kabupaten" | "Provinsi" | "Nasional" | "Internasional";
+  peringkat: string;
+  tanggal_prestasi: string;
+  keterangan: string | null;
+  created_at: string;
+}
+
+export default function DataTablePrestasiMahasiswa() {
+  const { showSuccess, showError } = useToast();
+  // State for data
+  const [prestasiMahasiswa, setPrestasiMahasiswa] = useState<PrestasiMahasiswa[]>([]);
+  const [filteredData, setFilteredData] = useState<PrestasiMahasiswa[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  
+  // State for filtering
+  const [searchTerm, setSearchTerm] = useState("");
+  const [filterJenisPrestasi, setFilterJenisPrestasi] = useState<string>("");
+  const [filterTingkat, setFilterTingkat] = useState<string>("");
+  
+  // State for pagination
+  const [currentPage, setCurrentPage] = useState(1);
+  const [pageSize, setPageSize] = useState(10);
+  const [paginatedData, setPaginatedData] = useState<PrestasiMahasiswa[]>([]);
+  
+  // State for form
+  const [formMode, setFormMode] = useState<"add" | "edit">("add");
+  const [formData, setFormData] = useState<Partial<PrestasiMahasiswa>>({
+    jenis_prestasi: "Akademik",
+    tingkat_prestasi: "Nasional"
+  });
+  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(() => {
+    fetchPrestasiMahasiswa();
+  }, []);
+
+  // Filter data when search term or filter changes
+  useEffect(() => {
+    filterData();
+  }, [searchTerm, filterJenisPrestasi, filterTingkat, prestasiMahasiswa]);
+
+  // Update paginated data when filtered data or pagination settings change
+  useEffect(() => {
+    paginateData();
+  }, [filteredData, currentPage, pageSize]);
+
+  // Fetch prestasi mahasiswa data from API
+  const fetchPrestasiMahasiswa = async () => {
+    try {
+      setLoading(true);
+      let url = "/api/keloladata/data-prestasi-mahasiswa";
+      
+      // Add filters to URL if they exist
+      const params = new URLSearchParams();
+      if (searchTerm) {
+        params.append("search", searchTerm);
+      }
+      if (filterJenisPrestasi && filterJenisPrestasi !== "all") {
+        params.append("jenis_prestasi", filterJenisPrestasi);
+      }
+      if (filterTingkat && filterTingkat !== "all") {
+        params.append("tingkat_prestasi", filterTingkat);
+      }
+      
+      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();
+      setPrestasiMahasiswa(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 and filters
+  const filterData = () => {
+    let filtered = [...prestasiMahasiswa];
+    
+    // Filter by search term
+    if (searchTerm) {
+      filtered = filtered.filter(
+        (item) =>
+          (item.nim && item.nim.toLowerCase().includes(searchTerm.toLowerCase())) ||
+          (item.nama && item.nama.toLowerCase().includes(searchTerm.toLowerCase())) ||
+          (item.nama_prestasi && item.nama_prestasi.toLowerCase().includes(searchTerm.toLowerCase())) ||
+          (item.peringkat && item.peringkat.toLowerCase().includes(searchTerm.toLowerCase())) ||
+          (item.keterangan && item.keterangan.toLowerCase().includes(searchTerm.toLowerCase()))
+      );
+    }
+    
+    // Filter by jenis prestasi
+    if (filterJenisPrestasi && filterJenisPrestasi !== "all") {
+      filtered = filtered.filter((item) => item.jenis_prestasi === filterJenisPrestasi);
+    }
+    
+    // Filter by tingkat
+    if (filterTingkat && filterTingkat !== "all") {
+      filtered = filtered.filter((item) => item.tingkat_prestasi === filterTingkat);
+    }
+    
+    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
+  };
+
+  // Format date for display
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString("id-ID", {
+      day: "numeric",
+      month: "long",
+      year: "numeric",
+    });
+  };
+
+  // Reset form data
+  const resetForm = () => {
+    setFormData({
+      jenis_prestasi: "Akademik",
+      tingkat_prestasi: "Nasional"
+    });
+  };
+
+  // Handle form input changes
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Handle select input changes
+  const handleSelectChange = (name: string, value: string) => {
+    setFormData((prev) => ({ ...prev, [name]: value }));
+  };
+
+  // Open form dialog for adding new prestasi
+  const handleAdd = () => {
+    setFormMode("add");
+    resetForm();
+    setIsDialogOpen(true);
+  };
+
+  // Open form dialog for editing prestasi
+  const handleEdit = (data: PrestasiMahasiswa) => {
+    setFormMode("edit");
+    // Format the date for the input field (YYYY-MM-DD)
+    const formattedData = {
+      ...data,
+      tanggal_prestasi: new Date(data.tanggal_prestasi).toISOString().split('T')[0]
+    };
+    setFormData(formattedData);
+    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 prestasi
+        const response = await fetch("/api/keloladata/data-prestasi-mahasiswa", {
+          method: "POST",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific NIM not found error
+          if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
+            throw new Error(`NIM ${formData.nim} tidak terdaftar dalam database. Silakan cek kembali NIM yang dimasukkan.`);
+          }
+          throw new Error(responseData.message || "Failed to add prestasi");
+        }
+        
+        // Show success message with student info
+        showSuccess("Berhasil!", "Prestasi mahasiswa berhasil ditambahkan");
+      } else {
+        // Edit existing prestasi
+        const response = await fetch(`/api/keloladata/data-prestasi-mahasiswa?id=${formData.id_prestasi}`, {
+          method: "PUT",
+          headers: {
+            "Content-Type": "application/json",
+          },
+          body: JSON.stringify(formData),
+        });
+        
+        const responseData = await response.json();
+        
+        if (!response.ok) {
+          // Handle specific NIM not found error
+          if (response.status === 404 && responseData.message.includes("tidak terdaftar")) {
+            throw new Error(`NIM ${formData.nim} tidak terdaftar dalam database. Silakan cek kembali NIM yang dimasukkan.`);
+          }
+          throw new Error(responseData.message || "Failed to update prestasi");
+        }
+        
+        showSuccess("Berhasil!", "Prestasi mahasiswa berhasil diperbarui");
+      }
+      
+      // Refresh data after successful operation
+      await fetchPrestasiMahasiswa();
+      setIsDialogOpen(false);
+      resetForm();
+    } catch (err) {
+      console.error("Error submitting form:", err);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  // Delete prestasi
+  const handleDelete = async () => {
+    if (!deleteId) return;
+    
+    try {
+      setIsDeleting(true);
+      
+      const response = await fetch(`/api/keloladata/data-prestasi-mahasiswa?id=${deleteId}`, {
+        method: "DELETE",
+      });
+      
+      if (!response.ok) {
+        const errorData = await response.json();
+        throw new Error(errorData.message || "Failed to delete prestasi");
+      }
+      
+      // Refresh data after successful deletion
+      await fetchPrestasiMahasiswa();
+      setIsDeleteDialogOpen(false);
+      setDeleteId(null);
+      showSuccess("Berhasil!", "Prestasi mahasiswa berhasil dihapus");
+    } catch (err) {
+      console.error("Error deleting prestasi:", 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 };
+  };
+
+  // Get badge color based on tingkat
+  const getTingkatBadgeColor = (tingkat: string) => {
+    switch (tingkat) {
+      case "Kabupaten":
+        return "bg-green-100 text-green-800";
+      case "Provinsi":
+        return "bg-blue-100 text-blue-800";
+      case "Nasional":
+        return "bg-purple-100 text-purple-800";
+      case "Internasional":
+        return "bg-red-100 text-red-800";
+      default:
+        return "bg-gray-100 text-gray-800";
+    }
+  };
+
+  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 Prestasi Mahasiswa</h2>
+        <div className="flex flex-col sm:flex-row gap-2">
+          <UploadFilePrestasiMahasiswa onUploadSuccess={fetchPrestasiMahasiswa} />
+          <Button onClick={handleAdd}>
+            <PlusCircle className="mr-2 h-4 w-4" />
+            Tambah Prestasi
+          </Button>
+        </div>
+      </div>
+
+      {/* Filters */}
+      <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 NIM, nama, nama prestasi, peringkat..."
+            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>
+        <Select
+          value={filterJenisPrestasi}
+          onValueChange={(value) => setFilterJenisPrestasi(value)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Jenis Prestasi" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Semua Jenis</SelectItem>
+            <SelectItem value="Akademik">Akademik</SelectItem>
+            <SelectItem value="Non-Akademik">Non-Akademik</SelectItem>
+          </SelectContent>
+        </Select>
+        <Select
+          value={filterTingkat}
+          onValueChange={(value) => setFilterTingkat(value)}
+        >
+          <SelectTrigger className="w-[180px]">
+            <SelectValue placeholder="Tingkat" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">Semua Tingkat</SelectItem>
+            <SelectItem value="Kabupaten">Kabupaten</SelectItem>
+            <SelectItem value="Provinsi">Provinsi</SelectItem>
+            <SelectItem value="Nasional">Nasional</SelectItem>
+            <SelectItem value="Internasional">Internasional</SelectItem>
+          </SelectContent>
+        </Select>
+      </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 className="w-[100px]">NIM</TableHead>
+                <TableHead>Nama</TableHead>
+                <TableHead>Jenis</TableHead>
+                <TableHead>Nama Prestasi</TableHead>  
+                <TableHead>Tingkat</TableHead>
+                <TableHead>Peringkat</TableHead>
+                <TableHead>Tanggal</TableHead>
+                <TableHead className="text-right">Aksi</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {paginatedData.length === 0 ? (
+                <TableRow>
+                  <TableCell colSpan={9} className="text-center py-8">
+                    Tidak ada data yang sesuai dengan filter
+                  </TableCell>
+                </TableRow>
+              ) : (
+                paginatedData.map((prestasi) => (
+                  <TableRow key={prestasi.id_prestasi}>
+                    {/* <TableCell>{prestasi.id_prestasi}</TableCell> */}
+                    <TableCell className="font-medium">{prestasi.nim}</TableCell>
+                    <TableCell>{prestasi.nama}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${
+                          prestasi.jenis_prestasi === "Akademik"
+                            ? "bg-blue-100 text-blue-800"
+                            : "bg-orange-100 text-orange-800"
+                        }`}
+                      >
+                        {prestasi.jenis_prestasi}
+                      </span>
+                    </TableCell>
+                    <TableCell>{prestasi.nama_prestasi}</TableCell>
+                    <TableCell>
+                      <span
+                        className={`px-2 py-1 rounded-full text-xs font-medium ${getTingkatBadgeColor(prestasi.tingkat_prestasi)}`}
+                      >
+                        {prestasi.tingkat_prestasi}
+                      </span>
+                    </TableCell>
+                    <TableCell>{prestasi.peringkat}</TableCell>
+                    <TableCell>{formatDate(prestasi.tanggal_prestasi)}</TableCell>
+                    <TableCell className="text-right">
+                      <div className="flex justify-end gap-2">
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          onClick={() => handleEdit(prestasi)}
+                        >
+                          <Pencil className="h-4 w-4" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="text-destructive hover:bg-destructive/10"
+                          onClick={() => handleDeleteConfirm(prestasi.id_prestasi)}
+                        >
+                          <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-[600px]">
+          <DialogHeader>
+            <DialogTitle>
+              {formMode === "add" ? "Tambah Prestasi" : "Edit Prestasi"}
+            </DialogTitle>
+          </DialogHeader>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4 py-4">
+              <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                <div className="space-y-2">
+                  <label htmlFor="nim" className="text-sm font-medium">
+                    NIM <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="nim"
+                    name="nim"
+                    value={formData.nim || ""}
+                    onChange={handleInputChange}
+                    required
+                    maxLength={11}
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="jenis_prestasi" className="text-sm font-medium">
+                    Jenis Prestasi <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.jenis_prestasi || "Akademik"}
+                    onValueChange={(value) => handleSelectChange("jenis_prestasi", value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Akademik">Akademik</SelectItem>
+                      <SelectItem value="Non-Akademik">Non-Akademik</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="nama_prestasi" className="text-sm font-medium">
+                    Nama Prestasi <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="nama_prestasi"
+                    name="nama_prestasi"
+                    value={formData.nama_prestasi || ""}
+                    onChange={handleInputChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="tingkat_prestasi" className="text-sm font-medium">
+                    Tingkat <span className="text-destructive">*</span>
+                  </label>
+                  <Select
+                    value={formData.tingkat_prestasi || "Nasional"}
+                    onValueChange={(value) => handleSelectChange("tingkat_prestasi", value)}
+                  >
+                    <SelectTrigger>
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="Kabupaten">Kabupaten</SelectItem>
+                      <SelectItem value="Provinsi">Provinsi</SelectItem>
+                      <SelectItem value="Nasional">Nasional</SelectItem>
+                      <SelectItem value="Internasional">Internasional</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="peringkat" className="text-sm font-medium">
+                    Peringkat <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="peringkat"
+                    name="peringkat"
+                    value={formData.peringkat || ""}
+                    onChange={handleInputChange}
+                    placeholder="Contoh: Juara 1, Medali Emas, Finalis"
+                    required
+                  />
+                </div>
+                <div className="space-y-2">
+                  <label htmlFor="tanggal_prestasi" className="text-sm font-medium">
+                    Tanggal Prestasi <span className="text-destructive">*</span>
+                  </label>
+                  <Input
+                    id="tanggal_prestasi"
+                    name="tanggal_prestasi"
+                    type="date"
+                    value={formData.tanggal_prestasi || ""}
+                    onChange={handleInputChange}
+                    required
+                  />
+                </div>
+                <div className="space-y-2 sm:col-span-2">
+                  <label htmlFor="keterangan" className="text-sm font-medium">
+                    Keterangan
+                  </label>
+                  <textarea
+                    id="keterangan"
+                    name="keterangan"
+                    className="w-full min-h-[100px] px-3 py-2 rounded-md border border-input bg-background ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+                    value={formData.keterangan || ""}
+                    onChange={handleInputChange}
+                    placeholder="Informasi tambahan tentang prestasi"
+                  />
+                </div>
+              </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 prestasi 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/edit-jenis-pendaftaran.tsx

@@ -19,6 +19,7 @@ import {
   SelectValue 
 } from "@/components/ui/select";
 import { Loader2, Settings } from "lucide-react";
+import { useToast } from "@/components/ui/toast-provider";
 
 interface JenisPendaftaran {
   jenis_pendaftaran: string;
@@ -29,7 +30,7 @@ interface EditJenisPendaftaranProps {
 }
 
 export default function EditJenisPendaftaran({ onUpdateSuccess }: EditJenisPendaftaranProps) {
-  // Toast hook
+  const { showSuccess, showError } = useToast();
 
   const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [jenisPendaftaranList, setJenisPendaftaranList] = useState<JenisPendaftaran[]>([]);
@@ -124,6 +125,7 @@ export default function EditJenisPendaftaran({ onUpdateSuccess }: EditJenisPenda
       await fetchJenisPendaftaran();
       
       // Show success message
+      showSuccess("Berhasil!", "Jenis pendaftaran berhasil diperbarui");
 
       // Close dialog
       setIsDialogOpen(false);
@@ -135,6 +137,7 @@ export default function EditJenisPendaftaran({ onUpdateSuccess }: EditJenisPenda
     } catch (err) {
       setError((err as Error).message);
       console.error("Error updating jenis pendaftaran:", err);
+      showError("Gagal!", (err as Error).message);
     } finally {
       setUpdating(false);
     }

components/datatable/upload-excel-mahasiswa.tsx

@@ -16,12 +16,14 @@ import {
   Loader2,
   AlertCircle
 } from "lucide-react";
+import { useToast } from "@/components/ui/toast-provider";
 
 interface UploadExcelMahasiswaProps {
   onUploadSuccess: () => void;
 }
 
 export default function UploadExcelMahasiswa({ onUploadSuccess }: UploadExcelMahasiswaProps) {
+  const { showSuccess, showError } = useToast();
   const [file, setFile] = useState<File | null>(null);
   const [isUploading, setIsUploading] = useState(false);
   const [isDialogOpen, setIsDialogOpen] = useState(false);
@@ -78,7 +80,7 @@ export default function UploadExcelMahasiswa({ onUploadSuccess }: UploadExcelMah
       const formData = new FormData();
       formData.append('file', file);
       
-      const response = await fetch('/api/data-mahasiswa/upload', {
+      const response = await fetch('/api/keloladata/data-mahasiswa/upload', {
         method: 'POST',
         body: formData,
       });
@@ -92,10 +94,11 @@ export default function UploadExcelMahasiswa({ onUploadSuccess }: UploadExcelMah
       setIsDialogOpen(false);
       setFile(null);
       onUploadSuccess();
-      
+      showSuccess("Berhasil!", "Data mahasiswa berhasil diunggah");
     } catch (err) {
       console.error('Error uploading file:', err);
       setError((err as Error).message || 'Terjadi kesalahan saat mengunggah file');
+      showError("Gagal!", (err as Error).message);
     } finally {
       setIsUploading(false);
     }

components/datatable/upload-file-beasiswa-mahasiswa.tsx

@@ -0,0 +1,160 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger,
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { 
+  FileUp, 
+  Loader2,
+  AlertCircle
+} from "lucide-react";
+
+interface UploadFileBeasiswaMahasiswaProps {
+  onUploadSuccess: () => void;
+}
+
+export default function UploadFileBeasiswaMahasiswa({ onUploadSuccess }: UploadFileBeasiswaMahasiswaProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    setError(null);
+    
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }
+    
+    // Check file type
+    const fileType = selectedFile.type;
+    const validTypes = [
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'text/csv',
+      'application/csv',
+      'text/plain'
+    ];
+    
+    if (!validTypes.includes(fileType) && 
+        !selectedFile.name.endsWith('.xlsx') && 
+        !selectedFile.name.endsWith('.xls') &&
+        !selectedFile.name.endsWith('.csv')) {
+      setError("Format file tidak valid. Harap unggah file Excel (.xlsx, .xls) atau CSV (.csv)");
+      setFile(null);
+      return;
+    }
+    
+    // Check file size (max 5MB)
+    if (selectedFile.size > 5 * 1024 * 1024) {
+      setError("Ukuran file terlalu besar. Maksimum 5MB");
+      setFile(null);
+      return;
+    }
+    
+    setFile(selectedFile);
+  };
+
+  const handleUpload = async () => {
+    if (!file) {
+      setError("Pilih file terlebih dahulu");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setError(null);
+      
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      const response = await fetch('/api/keloladata/data-beasiswa-mahasiswa/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      
+      const result = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(result.message || 'Terjadi kesalahan saat mengunggah file');
+      }
+      
+      setIsDialogOpen(false);
+      setFile(null);
+      onUploadSuccess();
+      
+    } catch (err) {
+      console.error('Error uploading file:', err);
+      setError((err as Error).message || 'Terjadi kesalahan saat mengunggah file');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <FileUp className="mr-2 h-4 w-4" />
+          Upload Beasiswa
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Upload Data Beasiswa Mahasiswa</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="text-sm text-muted-foreground">
+            <p>Upload file Excel (.xlsx, .xls) atau CSV (.csv)</p>
+          </div>
+          
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <label htmlFor="file-upload" className="text-sm font-medium">
+              Pilih File
+            </label>
+            <input
+              id="file-upload"
+              type="file"
+              className="file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 text-sm text-muted-foreground"
+              accept=".xlsx,.xls,.csv"
+              onChange={handleFileChange}
+            />
+            {file && (
+              <p className="text-xs text-muted-foreground mt-1">
+                File terpilih: {file.name}
+              </p>
+            )}
+          </div>
+          
+          {error && (
+            <div className="bg-destructive/10 text-destructive text-sm p-2 rounded-md flex items-start">
+              <AlertCircle className="h-4 w-4 mr-2 mt-0.5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Batal
+            </Button>
+          </DialogClose>
+          <Button onClick={handleUpload} disabled={!file || isUploading}>
+            {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            Upload
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+} 

components/datatable/upload-file-prestasi-mahasiswa.tsx

@@ -0,0 +1,161 @@
+"use client";
+
+import { useState } from "react";
+import { Button } from "@/components/ui/button";
+import { 
+  Dialog, 
+  DialogContent, 
+  DialogHeader, 
+  DialogTitle, 
+  DialogTrigger,
+  DialogFooter,
+  DialogClose
+} from "@/components/ui/dialog";
+import { 
+  FileUp, 
+  Loader2,
+  AlertCircle
+} from "lucide-react";
+
+interface UploadFilePrestasiMahasiswaProps {
+  onUploadSuccess: () => void;
+}
+
+export default function UploadFilePrestasiMahasiswa({ onUploadSuccess }: UploadFilePrestasiMahasiswaProps) {
+  const [file, setFile] = useState<File | null>(null);
+  const [isUploading, setIsUploading] = useState(false);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.target.files?.[0];
+    setError(null);
+    
+    if (!selectedFile) {
+      setFile(null);
+      return;
+    }
+    
+    // Check file type
+    const fileType = selectedFile.type;
+    const validTypes = [
+      'application/vnd.ms-excel',
+      'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
+      'text/csv',
+      'application/csv',
+      'text/plain'
+    ];
+    
+    if (!validTypes.includes(fileType) && 
+        !selectedFile.name.endsWith('.xlsx') && 
+        !selectedFile.name.endsWith('.xls') &&
+        !selectedFile.name.endsWith('.csv')) {
+      setError("Format file tidak valid. Harap unggah file Excel (.xlsx, .xls) atau CSV (.csv)");
+      setFile(null);
+      return;
+    }
+    
+    // Check file size (max 5MB)
+    if (selectedFile.size > 5 * 1024 * 1024) {
+      setError("Ukuran file terlalu besar. Maksimum 5MB");
+      setFile(null);
+      return;
+    }
+    
+    setFile(selectedFile);
+  };
+
+  const handleUpload = async () => {
+    if (!file) {
+      setError("Pilih file terlebih dahulu");
+      return;
+    }
+
+    try {
+      setIsUploading(true);
+      setError(null);
+      
+      const formData = new FormData();
+      formData.append('file', file);
+      
+      const response = await fetch('/api/keloladata/data-prestasi-mahasiswa/upload', {
+        method: 'POST',
+        body: formData,
+      });
+      
+      const result = await response.json();
+      
+      if (!response.ok) {
+        throw new Error(result.message || 'Terjadi kesalahan saat mengunggah file');
+      }
+      
+      setIsDialogOpen(false);
+      setFile(null);
+      onUploadSuccess();
+      
+    } catch (err) {
+      console.error('Error uploading file:', err);
+      setError((err as Error).message || 'Terjadi kesalahan saat mengunggah file');
+    } finally {
+      setIsUploading(false);
+    }
+  };
+
+  return (
+    <Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
+      <DialogTrigger asChild>
+        <Button variant="outline">
+          <FileUp className="mr-2 h-4 w-4" />
+          Upload Prestasi
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="sm:max-w-[500px]">
+        <DialogHeader>
+          <DialogTitle>Upload Data Prestasi Mahasiswa</DialogTitle>
+        </DialogHeader>
+        <div className="space-y-4 py-4">
+          <div className="text-sm text-muted-foreground">
+            <p>Upload file Excel (.xlsx, .xls) atau CSV (.csv)</p>
+            <p className="mt-1">Format kolom: NIM, Jenis Prestasi, Nama Prestasi, Tingkat Prestasi, Peringkat, Tanggal (DD-MM-YYYY, DD/MM/YYYY, atau YYYY-MM-DD)</p>
+          </div>
+          
+          <div className="grid w-full max-w-sm items-center gap-1.5">
+            <label htmlFor="file-upload" className="text-sm font-medium">
+              Pilih File
+            </label>
+            <input
+              id="file-upload"
+              type="file"
+              className="file:mr-4 file:py-2 file:px-4 file:rounded-md file:border-0 file:text-sm file:font-semibold file:bg-primary file:text-primary-foreground hover:file:bg-primary/90 text-sm text-muted-foreground"
+              accept=".xlsx,.xls,.csv"
+              onChange={handleFileChange}
+            />
+            {file && (
+              <p className="text-xs text-muted-foreground mt-1">
+                File terpilih: {file.name}
+              </p>
+            )}
+          </div>
+          
+          {error && (
+            <div className="bg-destructive/10 text-destructive text-sm p-2 rounded-md flex items-start">
+              <AlertCircle className="h-4 w-4 mr-2 mt-0.5 flex-shrink-0" />
+              <span>{error}</span>
+            </div>
+          )}
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button type="button" variant="outline">
+              Batal
+            </Button>
+          </DialogClose>
+          <Button onClick={handleUpload} disabled={!file || isUploading}>
+            {isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+            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, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
+import { Menu, ChevronDown, BarChart, Database, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
 import { Button } from '@/components/ui/button';
 import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
 import {
@@ -15,7 +15,7 @@ import {
 } from '@/components/ui/dropdown-menu';
 import Link from 'next/link';
 import LoginDialog from './login-dialog';
-import { useToast } from '@/components/ui/use-toast';
+import { useToast } from '@/components/ui/toast-provider';
 
 interface UserData {
   id_user: number;
@@ -27,7 +27,7 @@ interface UserData {
 const Navbar = () => {
   const [user, setUser] = useState<UserData | null>(null);
   const [isLoading, setIsLoading] = useState(true);
-  const { toast } = useToast();
+  const { showSuccess, showError } = useToast ();
   const router = useRouter();
 
   // Check for existing user session on mount
@@ -61,20 +61,13 @@ const Navbar = () => {
 
       if (response.ok) {
         setUser(null);
-        toast({
+        showSuccess("Berhasil!", "Anda telah keluar dari sistem");
-          title: "Logout Berhasil",
-          description: "Anda telah keluar dari sistem",
-        });
         // Redirect to root page after successful logout
         router.push('/');
       }
     } catch (error) {
       console.error('Logout error:', error);
-      toast({
+      showError("Gagal!", "Terjadi kesalahan saat logout");
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat logout",
-      });
     }
   };
 
@@ -111,7 +104,7 @@ const Navbar = () => {
         <div className="hidden md:flex items-center gap-4">
           {/* Beranda - Always visible */}
           <Link href="/" className="flex items-center gap-2 px-3 py-2 text-sm font-medium hover:text-primary transition-colors">
-            <Home className="h-4 w-4" />
+            <School className="h-4 w-4" />
             Beranda
           </Link>
           
@@ -120,7 +113,7 @@ const Navbar = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
-                  <School className="h-4 w-4" />
+                  <BarChart className="h-4 w-4" />
                   Visualisasi
                   <ChevronDown className="h-4 w-4" />
                 </Button>
@@ -165,7 +158,7 @@ const Navbar = () => {
             <DropdownMenu>
               <DropdownMenuTrigger asChild>
                 <Button variant="ghost" className="flex items-center gap-2 px-3 py-2 text-sm font-medium">
-                  <School className="h-4 w-4" />
+                  <Database className="h-4 w-4" />
                   Kelola Data
                   <ChevronDown className="h-4 w-4" />
                 </Button>
@@ -189,12 +182,6 @@ const Navbar = () => {
                     Prestasi
                   </Link>
                 </DropdownMenuItem>
-                <DropdownMenuItem asChild>
-                  <Link href="/keloladata/kelompokkeahlian" className="flex items-center gap-2 w-full">
-                    <Award className="h-4 w-4" />
-                    Kelompok Keahlian
-                  </Link>
-                </DropdownMenuItem>
               </DropdownMenuContent>
             </DropdownMenu>
           )}
@@ -202,7 +189,6 @@ const Navbar = () => {
 
         {/* Right Side - Theme Toggle, Login/User Menu, and Mobile Menu */}
         <div className="flex items-center gap-4">
-          <ThemeToggle />
           
           {user ? (
             <DropdownMenu>
@@ -215,7 +201,7 @@ const Navbar = () => {
               <DropdownMenuContent align="end">
                 <DropdownMenuItem disabled>
                   <User className="h-4 w-4 mr-2" />
-                  {user.role_user === 'ketuajurusan' ? user.nip : user.username}
+                  {user.role_user === 'ketuajurusan' ? user.username : user.username}
                 </DropdownMenuItem>
                 <DropdownMenuSeparator />
                 <DropdownMenuItem onClick={handleLogout}>
@@ -227,6 +213,7 @@ const Navbar = () => {
           ) : (
             <LoginDialog onLoginSuccess={handleLoginSuccess} />
           )}
+          <ThemeToggle />
           
         {/* Mobile Menu Button */}
         <div className="md:hidden">

components/ui/login-dialog.tsx

@@ -12,7 +12,7 @@ import {
   DialogTrigger,
 } from "@/components/ui/dialog";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { useToast } from "@/components/ui/use-toast";
+import { useToast } from "@/components/ui/toast-provider";
 import { LogIn, User, Key } from "lucide-react";
 
 interface LoginDialogProps {
@@ -20,9 +20,10 @@ interface LoginDialogProps {
 }
 
 export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
+  const { showSuccess, showError } = useToast();
   const [isOpen, setIsOpen] = useState(false);
   const [isLoading, setIsLoading] = useState(false);
-  const { toast } = useToast();
+
 
   // Ketua Jurusan form state
   const [ketuaForm, setKetuaForm] = useState({
@@ -56,26 +57,15 @@ export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
       const data = await response.json();
 
       if (response.ok) {
-        toast({
+        showSuccess("Berhasil!", "Selamat datang, Ketua Jurusan!");
-          title: "Login Berhasil",
-          description: "Selamat datang, Ketua Jurusan!",
-        });
         onLoginSuccess(data);
         setIsOpen(false);
         setKetuaForm({ nip: "", password: "" });
       } else {
-        toast({
+        showError("Gagal!", data.message || "NIP atau password salah");
-          variant: "destructive",
-          title: "Login Gagal",
-          description: data.message || "NIP atau password salah",
-        });
       }
     } catch (error) {
-      toast({
+      showError("Gagal!", "Terjadi kesalahan saat login");
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat login",
-      });
     } finally {
       setIsLoading(false);
     }
@@ -101,26 +91,15 @@ export default function LoginDialog({ onLoginSuccess }: LoginDialogProps) {
       const data = await response.json();
 
       if (response.ok) {
-        toast({
+        showSuccess("Berhasil!", "Selamat datang, Admin!");
-          title: "Login Berhasil",
-          description: "Selamat datang, Admin!",
-        });
         onLoginSuccess(data);
         setIsOpen(false);
         setAdminForm({ username: "", password: "" });
       } else {
-        toast({
+        showError("Gagal!", data.message || "Username atau password salah");
-          variant: "destructive",
-          title: "Login Gagal",
-          description: data.message || "Username atau password salah",
-        });
       }
     } catch (error) {
-      toast({
+      showError("Gagal!", "Terjadi kesalahan saat login");
-        variant: "destructive",
-        title: "Error",
-        description: "Terjadi kesalahan saat login",
-      });
     } finally {
       setIsLoading(false);
     }

components/ui/toast-provider.tsx

@@ -0,0 +1,135 @@
+"use client";
+
+import React, { createContext, useContext, useState, useCallback } from "react";
+import { Toast, ToastTitle, ToastDescription, ToastClose } from "./toast";
+import { CheckCircle, AlertCircle, AlertTriangle, Info, X } from "lucide-react";
+
+interface ToastMessage {
+  id: string;
+  type: "success" | "error" | "warning" | "info";
+  title: string;
+  description?: string;
+  duration?: number;
+}
+
+interface ToastContextType {
+  showToast: (message: Omit<ToastMessage, "id">) => void;
+  showSuccess: (title: string, description?: string) => void;
+  showError: (title: string, description?: string) => void;
+  showWarning: (title: string, description?: string) => void;
+  showInfo: (title: string, description?: string) => void;
+}
+
+const ToastContext = createContext<ToastContextType | undefined>(undefined);
+
+export const useToast = () => {
+  const context = useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+
+interface ToastProviderProps {
+  children: React.ReactNode;
+}
+
+export const ToastProvider: React.FC<ToastProviderProps> = ({ children }) => {
+  const [toasts, setToasts] = useState<ToastMessage[]>([]);
+
+  const removeToast = useCallback((id: string) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+
+  const showToast = useCallback((message: Omit<ToastMessage, "id">) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    const newToast: ToastMessage = {
+      ...message,
+      id,
+      duration: message.duration || 5000,
+    };
+
+    setToasts((prev) => [...prev, newToast]);
+
+    // Auto remove toast after duration
+    setTimeout(() => {
+      removeToast(id);
+    }, newToast.duration);
+  }, [removeToast]);
+
+  const showSuccess = useCallback((title: string, description?: string) => {
+    showToast({ type: "success", title, description });
+  }, [showToast]);
+
+  const showError = useCallback((title: string, description?: string) => {
+    showToast({ type: "error", title, description });
+  }, [showToast]);
+
+  const showWarning = useCallback((title: string, description?: string) => {
+    showToast({ type: "warning", title, description });
+  }, [showToast]);
+
+  const showInfo = useCallback((title: string, description?: string) => {
+    showToast({ type: "info", title, description });
+  }, [showToast]);
+
+  const getToastVariant = (type: ToastMessage["type"]) => {
+    switch (type) {
+      case "success":
+        return "success";
+      case "error":
+        return "destructive";
+      case "warning":
+        return "warning";
+      case "info":
+        return "info";
+      default:
+        return "default";
+    }
+  };
+
+  const getToastIcon = (type: ToastMessage["type"]) => {
+    switch (type) {
+      case "success":
+        return <CheckCircle className="h-5 w-5 text-green-600" />;
+      case "error":
+        return <AlertCircle className="h-5 w-5 text-red-600" />;
+      case "warning":
+        return <AlertTriangle className="h-5 w-5 text-yellow-600" />;
+      case "info":
+        return <Info className="h-5 w-5 text-blue-600" />;
+      default:
+        return null;
+    }
+  };
+
+  return (
+    <ToastContext.Provider
+      value={{ showToast, showSuccess, showError, showWarning, showInfo }}
+    >
+      {children}
+      
+      {/* Toast Container */}
+      <div className="fixed top-4 right-4 z-50 space-y-2">
+        {toasts.map((toast) => (
+          <Toast
+            key={toast.id}
+            variant={getToastVariant(toast.type)}
+            className="min-w-[300px]"
+          >
+            <div className="flex items-start space-x-3">
+              {getToastIcon(toast.type)}
+              <div className="flex-1">
+                <ToastTitle>{toast.title}</ToastTitle>
+                {toast.description && (
+                  <ToastDescription>{toast.description}</ToastDescription>
+                )}
+              </div>
+            </div>
+            <ToastClose onClick={() => removeToast(toast.id)} />
+          </Toast>
+        ))}
+      </div>
+    </ToastContext.Provider>
+  );
+}; 

components/ui/toast.tsx

@@ -1,63 +1,48 @@
-import * as React from "react"
+"use client";
-import * as ToastPrimitives from "@radix-ui/react-toast"
-import { cva, type VariantProps } from "class-variance-authority"
-import { X } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import * as React from "react";
-
+import { cva, type VariantProps } from "class-variance-authority";
-const ToastProvider = ToastPrimitives.Provider
+import { X, CheckCircle, AlertCircle, AlertTriangle, Info } from "lucide-react";
-
+import { cn } from "@/lib/utils";
-const ToastViewport = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Viewport>,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Viewport>
->(({ className, ...props }, ref) => (
-  <ToastPrimitives.Viewport
-    ref={ref}
-    className={cn(
-      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
-      className
-    )}
-    {...props}
-  />
-))
-ToastViewport.displayName = ToastPrimitives.Viewport.displayName
 
 const toastVariants = cva(
-  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[swipe=end]:slide-out-to-right-full sm:data-[state=open]:slide-in-from-bottom-full",
+  "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)] data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)] data-[swipe=move]:transition-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[swipe=end]:animate-out data-[state=closed]:fade-out-80 data-[state=closed]:slide-out-to-right-full data-[state=open]:slide-in-from-top-full data-[state=open]:sm:slide-in-from-bottom-full",
   {
     variants: {
       variant: {
         default: "border bg-background text-foreground",
         destructive:
-          "destructive group border-destructive bg-destructive text-destructive-foreground",
+          "destructive border-destructive bg-destructive text-destructive-foreground",
+        success: "border-green-200 bg-green-50 text-green-900",
+        warning: "border-yellow-200 bg-yellow-50 text-yellow-900",
+        info: "border-blue-200 bg-blue-50 text-blue-900",
       },
     },
     defaultVariants: {
       variant: "default",
     },
   }
-)
+);
 
 const Toast = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Root>,
+  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Root> &
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof toastVariants>
-    VariantProps<typeof toastVariants>
 >(({ className, variant, ...props }, ref) => {
   return (
-    <ToastPrimitives.Root
+    <div
       ref={ref}
       className={cn(toastVariants({ variant }), className)}
       {...props}
     />
-  )
+  );
-})
+});
-Toast.displayName = ToastPrimitives.Root.displayName
+Toast.displayName = "Toast";
 
 const ToastAction = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Action>,
+  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Action>
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Action
+  <button
     ref={ref}
     className={cn(
       "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
@@ -65,14 +50,14 @@ const ToastAction = React.forwardRef<
     )}
     {...props}
   />
-))
+));
-ToastAction.displayName = ToastPrimitives.Action.displayName
+ToastAction.displayName = "ToastAction";
 
 const ToastClose = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Close>,
+  HTMLButtonElement,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Close>
+  React.ButtonHTMLAttributes<HTMLButtonElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Close
+  <button
     ref={ref}
     className={cn(
       "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600",
@@ -82,46 +67,55 @@ const ToastClose = React.forwardRef<
     {...props}
   >
     <X className="h-4 w-4" />
-  </ToastPrimitives.Close>
+  </button>
-))
+));
-ToastClose.displayName = ToastPrimitives.Close.displayName
+ToastClose.displayName = "ToastClose";
 
 const ToastTitle = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Title>,
+  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Title>
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Title
+  <div
     ref={ref}
     className={cn("text-sm font-semibold", className)}
     {...props}
   />
-))
+));
-ToastTitle.displayName = ToastPrimitives.Title.displayName
+ToastTitle.displayName = "ToastTitle";
 
 const ToastDescription = React.forwardRef<
-  React.ElementRef<typeof ToastPrimitives.Description>,
+  HTMLDivElement,
-  React.ComponentPropsWithoutRef<typeof ToastPrimitives.Description>
+  React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
-  <ToastPrimitives.Description
+  <div
     ref={ref}
     className={cn("text-sm opacity-90", className)}
     {...props}
   />
-))
+));
-ToastDescription.displayName = ToastPrimitives.Description.displayName
+ToastDescription.displayName = "ToastDescription";
 
-type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>
+const ToastViewport = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]",
+      className
+    )}
+    {...props}
+  />
+));
+ToastViewport.displayName = "ToastViewport";
 
-type ToastActionElement = React.ReactElement<typeof ToastAction>
+const ToastProvider = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+ToastProvider.displayName = "ToastProvider";
 
-export {
+export { Toast, ToastAction, ToastClose, ToastTitle, ToastDescription, ToastViewport, ToastProvider };
-  type ToastProps,
+
-  type ToastActionElement,
+export type ToastProps = React.ComponentPropsWithoutRef<typeof Toast>;
-  ToastProvider,
+export type ToastActionElement = React.ReactElement<typeof ToastAction>; 
-  ToastViewport,
-  Toast,
-  ToastTitle,
-  ToastDescription,
-  ToastClose,
-  ToastAction,
-} 

components/ui/toast/README.md

@@ -0,0 +1,164 @@
+# Toast Notification Component
+
+Komponen toast notification yang dinamis menggunakan Lucide React icons.
+
+## Fitur
+
+- ✅ 4 jenis toast: Success, Error, Warning, Info
+- ✅ Auto-dismiss setelah durasi tertentu
+- ✅ Manual close dengan tombol X
+- ✅ Animasi smooth
+- ✅ Responsive design
+- ✅ TypeScript support
+- ✅ Context-based state management
+
+## Cara Penggunaan
+
+### 1. Setup Provider
+
+Bungkus aplikasi Anda dengan `ToastProvider`:
+
+```tsx
+import { ToastProvider } from "@/components/ui/toast";
+
+export default function RootLayout({ children }) {
+  return (
+    <html>
+      <body>
+        <ToastProvider>{children}</ToastProvider>
+      </body>
+    </html>
+  );
+}
+```
+
+### 2. Gunakan Hook useToast
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyComponent() {
+  const { showSuccess, showError, showWarning, showInfo } = useToast();
+
+  const handleSuccess = () => {
+    showSuccess("Berhasil!", "Data telah disimpan dengan sukses.");
+  };
+
+  const handleError = () => {
+    showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
+  };
+
+  const handleWarning = () => {
+    showWarning("Peringatan!", "Data akan dihapus secara permanen.");
+  };
+
+  const handleInfo = () => {
+    showInfo("Informasi", "Sistem sedang dalam maintenance.");
+  };
+
+  return (
+    <div>
+      <button onClick={handleSuccess}>Show Success</button>
+      <button onClick={handleError}>Show Error</button>
+      <button onClick={handleWarning}>Show Warning</button>
+      <button onClick={handleInfo}>Show Info</button>
+    </div>
+  );
+}
+```
+
+### 3. Custom Toast
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyComponent() {
+  const { showToast } = useToast();
+
+  const handleCustomToast = () => {
+    showToast({
+      type: "success",
+      title: "Custom Toast",
+      description: "Ini adalah toast kustom dengan durasi 10 detik",
+      duration: 10000, // 10 detik
+    });
+  };
+
+  return <button onClick={handleCustomToast}>Show Custom Toast</button>;
+}
+```
+
+## API Reference
+
+### useToast Hook
+
+```tsx
+const {
+  showToast, // Fungsi umum untuk menampilkan toast
+  showSuccess, // Menampilkan toast success
+  showError, // Menampilkan toast error
+  showWarning, // Menampilkan toast warning
+  showInfo, // Menampilkan toast info
+} = useToast();
+```
+
+### showToast Parameters
+
+```tsx
+showToast({
+  type: "success" | "error" | "warning" | "info",
+  title: string,
+  description: string,
+  duration: number, // dalam milliseconds, default: 5000
+});
+```
+
+### showSuccess/showError/showWarning/showInfo Parameters
+
+```tsx
+showSuccess(title: string, description?: string);
+showError(title: string, description?: string);
+showWarning(title: string, description?: string);
+showInfo(title: string, description?: string);
+```
+
+## Styling
+
+Toast menggunakan Tailwind CSS dengan variant yang dapat dikustomisasi:
+
+- `success`: Green theme
+- `error`: Red theme (destructive)
+- `warning`: Yellow theme
+- `info`: Blue theme
+- `default`: Default theme
+
+## Contoh Integrasi dengan Form
+
+```tsx
+import { useToast } from "@/components/ui/toast";
+
+export default function MyForm() {
+  const { showSuccess, showError } = useToast();
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    try {
+      const response = await fetch("/api/data", {
+        method: "POST",
+        body: JSON.stringify(formData),
+      });
+
+      if (response.ok) {
+        showSuccess("Berhasil!", "Data telah disimpan.");
+      } else {
+        showError("Gagal!", "Terjadi kesalahan saat menyimpan data.");
+      }
+    } catch (error) {
+      showError("Error!", "Koneksi terputus.");
+    }
+  };
+
+  return <form onSubmit={handleSubmit}>{/* form fields */}</form>;
+}
+```

components/ui/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast, ToastAction, ToastClose, ToastTitle, ToastDescription } from "../toast";
+export { ToastProvider, useToast } from "../toast-provider"; 

components/ui/use-toast.tsx

@@ -14,6 +14,8 @@ type ToasterToast = ToastProps & {
   title?: React.ReactNode
   description?: React.ReactNode
   action?: ToastActionElement
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
 }
 
 const actionTypes = {
@@ -26,7 +28,7 @@ const actionTypes = {
 let count = 0
 
 function genId() {
-  count = (count + 1) % Number.MAX_VALUE
+  count = (count + 1) % Number.MAX_SAFE_INTEGER
   return count.toString()
 }