ayo bisa
This commit is contained in:
Randa Firman Putra
251
app/api/keloladata/data-dosen/route.ts
Normal file
251
app/api/keloladata/data-dosen/route.ts
Normal file
@@ -0,0 +1,251 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import supabase from '@/lib/db';
|
||||
|
||||
// GET - Ambil semua data dosen atau filter berdasarkan kriteria
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get('id');
|
||||
const search = searchParams.get('search');
|
||||
|
||||
// Jika ID diberikan, ambil data dosen spesifik berdasarkan ID
|
||||
if (id) {
|
||||
const { data, error } = await supabase
|
||||
.from('dosen')
|
||||
.select('*')
|
||||
.eq('id_dosen', id)
|
||||
.single();
|
||||
|
||||
if (error || !data) {
|
||||
return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
return NextResponse.json(data);
|
||||
}
|
||||
|
||||
// Bangun query berdasarkan filter
|
||||
let query = supabase.from('dosen').select('*');
|
||||
|
||||
// Tambahkan kondisi pencarian jika diberikan
|
||||
if (search) {
|
||||
query = query.or(`nama_dosen.ilike.%${search}%,nip.ilike.%${search}%`);
|
||||
}
|
||||
|
||||
// Tambahkan pengurutan berdasarkan nama dosen
|
||||
query = query.order('nama_dosen', { ascending: true });
|
||||
|
||||
// Eksekusi query
|
||||
const { data, error } = await query;
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json(data);
|
||||
} catch (error) {
|
||||
console.error('Error fetching data:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// POST - Buat data dosen baru
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
const body = await request.json();
|
||||
const {
|
||||
nama_dosen,
|
||||
nip
|
||||
} = body;
|
||||
|
||||
// Validate required fields
|
||||
if (!nama_dosen || !nip) {
|
||||
return NextResponse.json(
|
||||
{ message: 'Missing required fields: nama_dosen, nip' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validate NIP length (harus 18 karakter)
|
||||
if (nip.length !== 18) {
|
||||
return NextResponse.json(
|
||||
{ message: 'NIP harus terdiri dari 18 karakter' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Cek apakah NIP sudah ada
|
||||
const { data: existingDosen, error: checkError } = await supabase
|
||||
.from('dosen')
|
||||
.select('nip')
|
||||
.eq('nip', nip)
|
||||
.single();
|
||||
|
||||
if (!checkError && existingDosen) {
|
||||
return NextResponse.json(
|
||||
{ message: 'NIP sudah terdaftar dalam database' },
|
||||
{ status: 409 }
|
||||
);
|
||||
}
|
||||
|
||||
// Insert data dosen baru
|
||||
const { data, error } = await supabase
|
||||
.from('dosen')
|
||||
.insert({
|
||||
nama_dosen,
|
||||
nip
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
|
||||
if (error) {
|
||||
console.error('Error creating dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json(
|
||||
{
|
||||
message: `Dosen berhasil ditambahkan`,
|
||||
id: data.id_dosen
|
||||
},
|
||||
{ status: 201 }
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('Error creating dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// PUT - Update data dosen yang sudah ada
|
||||
export async function PUT(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get('id');
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ message: 'ID is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
const body = await request.json();
|
||||
const {
|
||||
nama_dosen,
|
||||
nip
|
||||
} = body;
|
||||
|
||||
// Validate required fields
|
||||
if (!nama_dosen || !nip) {
|
||||
return NextResponse.json(
|
||||
{ message: 'Missing required fields: nama_dosen, nip' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validate NIP length (harus 18 karakter)
|
||||
if (nip.length !== 18) {
|
||||
return NextResponse.json(
|
||||
{ message: 'NIP harus terdiri dari 18 karakter' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Cek apakah dosen ada
|
||||
const { data: existing, error: checkError } = await supabase
|
||||
.from('dosen')
|
||||
.select('*')
|
||||
.eq('id_dosen', id)
|
||||
.single();
|
||||
|
||||
if (checkError || !existing) {
|
||||
return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Cek apakah NIP sudah ada untuk dosen lain
|
||||
const { data: existingNip, error: nipCheckError } = await supabase
|
||||
.from('dosen')
|
||||
.select('id_dosen, nip')
|
||||
.eq('nip', nip)
|
||||
.neq('id_dosen', id)
|
||||
.single();
|
||||
|
||||
if (!nipCheckError && existingNip) {
|
||||
return NextResponse.json(
|
||||
{ message: 'NIP sudah digunakan oleh dosen lain' },
|
||||
{ status: 409 }
|
||||
);
|
||||
}
|
||||
|
||||
// Update dosen
|
||||
const { error } = await supabase
|
||||
.from('dosen')
|
||||
.update({
|
||||
nama_dosen,
|
||||
nip
|
||||
})
|
||||
.eq('id_dosen', id);
|
||||
|
||||
if (error) {
|
||||
console.error('Error updating dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
message: `Dosen berhasil diperbarui`
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('Error updating dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
|
||||
// DELETE - Hapus data dosen
|
||||
export async function DELETE(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const id = searchParams.get('id');
|
||||
|
||||
if (!id) {
|
||||
return NextResponse.json({ message: 'ID is required' }, { status: 400 });
|
||||
}
|
||||
|
||||
// Cek apakah dosen ada
|
||||
const { data: existing, error: checkError } = await supabase
|
||||
.from('dosen')
|
||||
.select('id_dosen')
|
||||
.eq('id_dosen', id)
|
||||
.single();
|
||||
|
||||
if (checkError || !existing) {
|
||||
return NextResponse.json({ message: 'Dosen not found' }, { status: 404 });
|
||||
}
|
||||
|
||||
// Cek apakah dosen sedang digunakan sebagai pembimbing
|
||||
const { data: bimbinganCheck, error: bimbinganError } = await supabase
|
||||
.from('mahasiswa')
|
||||
.select('id_mahasiswa')
|
||||
.or(`pembimbing1_id.eq.${id},pembimbing2_id.eq.${id}`)
|
||||
.limit(1);
|
||||
|
||||
if (!bimbinganError && bimbinganCheck && bimbinganCheck.length > 0) {
|
||||
return NextResponse.json(
|
||||
{ message: 'Tidak dapat menghapus dosen yang sedang menjadi pembimbing mahasiswa' },
|
||||
{ status: 409 }
|
||||
);
|
||||
}
|
||||
|
||||
// Hapus dosen
|
||||
const { error } = await supabase
|
||||
.from('dosen')
|
||||
.delete()
|
||||
.eq('id_dosen', id);
|
||||
|
||||
if (error) {
|
||||
console.error('Error deleting dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
|
||||
return NextResponse.json({ message: 'Dosen berhasil dihapus' });
|
||||
} catch (error) {
|
||||
console.error('Error deleting dosen:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
167
app/api/keloladata/data-dosen/upload/route.ts
Normal file
167
app/api/keloladata/data-dosen/upload/route.ts
Normal file
@@ -0,0 +1,167 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import * as XLSX from 'xlsx';
|
||||
import supabase from '@/lib/db';
|
||||
|
||||
// POST - Upload dan proses file Excel/CSV untuk data dosen
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Ambil data formulir dari request
|
||||
const formData = await request.formData();
|
||||
const file = formData.get('file') as File;
|
||||
|
||||
if (!file) {
|
||||
return NextResponse.json(
|
||||
{ message: 'File is required' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Validasi tipe file (Excel atau CSV)
|
||||
const allowedTypes = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet', // .xlsx
|
||||
'application/vnd.ms-excel', // .xls
|
||||
'text/csv' // .csv
|
||||
];
|
||||
|
||||
if (!allowedTypes.includes(file.type)) {
|
||||
return NextResponse.json(
|
||||
{ message: 'File type not supported. Please upload Excel (.xlsx, .xls) or CSV file.' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Baca file sebagai buffer
|
||||
const buffer = Buffer.from(await file.arrayBuffer());
|
||||
|
||||
// Parse file menggunakan XLSX
|
||||
const workbook = XLSX.read(buffer, { type: 'buffer' });
|
||||
const sheetName = workbook.SheetNames[0];
|
||||
const worksheet = workbook.Sheets[sheetName];
|
||||
|
||||
// Konversi ke JSON
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 });
|
||||
|
||||
if (jsonData.length === 0) {
|
||||
return NextResponse.json(
|
||||
{ message: 'File is empty' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Ambil header dari baris pertama
|
||||
const headers = jsonData[0] as string[];
|
||||
const dataRows = jsonData.slice(1);
|
||||
|
||||
// Validasi header yang diperlukan
|
||||
const requiredHeaders = ['nama_dosen', 'nip'];
|
||||
const missingHeaders = requiredHeaders.filter(header =>
|
||||
!headers.some(h => h && h.toString().toLowerCase().includes(header.toLowerCase()))
|
||||
);
|
||||
|
||||
if (missingHeaders.length > 0) {
|
||||
return NextResponse.json(
|
||||
{ message: `Missing required columns: ${missingHeaders.join(', ')}` },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Mapping index kolom
|
||||
const getColumnIndex = (headerName: string) => {
|
||||
return headers.findIndex(h => h && h.toString().toLowerCase().includes(headerName.toLowerCase()));
|
||||
};
|
||||
|
||||
const nama_dosenIndex = getColumnIndex('nama_dosen');
|
||||
const nipIndex = getColumnIndex('nip');
|
||||
|
||||
// Proses setiap baris data
|
||||
const results = {
|
||||
success: 0,
|
||||
failed: 0,
|
||||
errors: [] as string[]
|
||||
};
|
||||
|
||||
for (let i = 0; i < dataRows.length; i++) {
|
||||
const row = dataRows[i] as any[];
|
||||
const rowNumber = i + 2; // +2 karena index dimulai dari 0 dan ada header
|
||||
|
||||
try {
|
||||
// Ekstrak data dari row
|
||||
const nama_dosen = row[nama_dosenIndex]?.toString().trim();
|
||||
const nip = row[nipIndex]?.toString().trim();
|
||||
|
||||
// Validasi data yang diperlukan
|
||||
if (!nama_dosen || !nip) {
|
||||
results.failed++;
|
||||
results.errors.push(`Row ${rowNumber}: Missing required data (nama_dosen or nip)`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Validasi panjang NIP
|
||||
if (nip.length !== 18) {
|
||||
results.failed++;
|
||||
results.errors.push(`Row ${rowNumber}: NIP harus terdiri dari 18 karakter`);
|
||||
continue;
|
||||
}
|
||||
|
||||
// Cek apakah NIP sudah ada
|
||||
const { data: existingDosen, error: checkError } = await supabase
|
||||
.from('dosen')
|
||||
.select('nip')
|
||||
.eq('nip', nip)
|
||||
.single();
|
||||
|
||||
if (!checkError && existingDosen) {
|
||||
// Update data yang sudah ada
|
||||
const { error: updateError } = await supabase
|
||||
.from('dosen')
|
||||
.update({
|
||||
nama_dosen
|
||||
})
|
||||
.eq('nip', nip);
|
||||
|
||||
if (updateError) {
|
||||
results.failed++;
|
||||
results.errors.push(`Row ${rowNumber}: Error updating dosen with NIP ${nip}: ${updateError.message}`);
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
// Insert data baru
|
||||
const { error: insertError } = await supabase
|
||||
.from('dosen')
|
||||
.insert({
|
||||
nama_dosen,
|
||||
nip
|
||||
});
|
||||
|
||||
if (insertError) {
|
||||
results.failed++;
|
||||
results.errors.push(`Row ${rowNumber}: Error inserting dosen with NIP ${nip}: ${insertError.message}`);
|
||||
continue;
|
||||
}
|
||||
}
|
||||
|
||||
results.success++;
|
||||
} catch (error) {
|
||||
results.failed++;
|
||||
results.errors.push(`Row ${rowNumber}: Unexpected error: ${error}`);
|
||||
}
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
message: `Upload completed. Success: ${results.success}, Failed: ${results.failed}`,
|
||||
details: {
|
||||
totalRows: dataRows.length,
|
||||
successCount: results.success,
|
||||
failedCount: results.failed,
|
||||
errors: results.errors
|
||||
}
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error processing file:', error);
|
||||
return NextResponse.json(
|
||||
{ message: 'Error processing file' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -13,7 +13,9 @@ export async function GET(request: NextRequest) {
|
||||
.from('mahasiswa')
|
||||
.select(`
|
||||
*,
|
||||
kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok)
|
||||
kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok),
|
||||
dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
|
||||
dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
|
||||
`)
|
||||
.eq('nim', nim)
|
||||
.single();
|
||||
@@ -25,9 +27,13 @@ export async function GET(request: NextRequest) {
|
||||
// Transformasi data untuk meratakan field yang di-join
|
||||
const transformedData = {
|
||||
...data,
|
||||
nama_kelompok_keahlian: data.kelompok_keahlian?.nama_kelompok || null
|
||||
nama_kelompok_keahlian: data.kelompok_keahlian?.nama_kelompok || null,
|
||||
nama_pembimbing_1: data.dosen_pembimbing_1?.nama_dosen || null,
|
||||
nama_pembimbing_2: data.dosen_pembimbing_2?.nama_dosen || null
|
||||
};
|
||||
delete transformedData.kelompok_keahlian;
|
||||
delete transformedData.dosen_pembimbing_1;
|
||||
delete transformedData.dosen_pembimbing_2;
|
||||
|
||||
return NextResponse.json(transformedData);
|
||||
} else {
|
||||
@@ -36,7 +42,9 @@ export async function GET(request: NextRequest) {
|
||||
.from('mahasiswa')
|
||||
.select(`
|
||||
*,
|
||||
kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok)
|
||||
kelompok_keahlian!id_kelompok_keahlian(id_kk, nama_kelompok),
|
||||
dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
|
||||
dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
|
||||
`)
|
||||
.order('nim');
|
||||
|
||||
@@ -48,8 +56,10 @@ export async function GET(request: NextRequest) {
|
||||
// Transformasi data untuk meratakan field yang di-join
|
||||
const transformedData = data.map(item => ({
|
||||
...item,
|
||||
nama_kelompok_keahlian: item.kelompok_keahlian?.nama_kelompok || null
|
||||
})).map(({ kelompok_keahlian, ...rest }) => rest);
|
||||
nama_kelompok_keahlian: item.kelompok_keahlian?.nama_kelompok || null,
|
||||
nama_pembimbing_1: item.dosen_pembimbing_1?.nama_dosen || null,
|
||||
nama_pembimbing_2: item.dosen_pembimbing_2?.nama_dosen || null
|
||||
})).map(({ kelompok_keahlian, dosen_pembimbing_1, dosen_pembimbing_2, ...rest }) => rest);
|
||||
|
||||
return NextResponse.json(transformedData);
|
||||
}
|
||||
@@ -75,7 +85,10 @@ export async function POST(request: NextRequest) {
|
||||
ipk,
|
||||
id_kelompok_keahlian,
|
||||
status_kuliah,
|
||||
semester
|
||||
semester,
|
||||
pembimbing_1,
|
||||
pembimbing_2,
|
||||
status_bimbingan
|
||||
} = body;
|
||||
|
||||
// Validasi field yang wajib diisi
|
||||
@@ -115,7 +128,10 @@ export async function POST(request: NextRequest) {
|
||||
ipk: ipk || null,
|
||||
id_kelompok_keahlian: id_kelompok_keahlian || null,
|
||||
status_kuliah: status_kuliah || "Aktif",
|
||||
semester: semester || 1
|
||||
semester: semester || 1,
|
||||
pembimbing_1: pembimbing_1 || null,
|
||||
pembimbing_2: pembimbing_2 || null,
|
||||
status_bimbingan: status_bimbingan || "Belum Selesai"
|
||||
})
|
||||
.select()
|
||||
.single();
|
||||
@@ -157,7 +173,10 @@ export async function PUT(request: NextRequest) {
|
||||
ipk,
|
||||
id_kelompok_keahlian,
|
||||
status_kuliah,
|
||||
semester
|
||||
semester,
|
||||
pembimbing_1,
|
||||
pembimbing_2,
|
||||
status_bimbingan
|
||||
} = body;
|
||||
|
||||
// Cek apakah mahasiswa ada
|
||||
@@ -185,7 +204,10 @@ export async function PUT(request: NextRequest) {
|
||||
ipk: ipk || existing.ipk,
|
||||
id_kelompok_keahlian: id_kelompok_keahlian || existing.id_kelompok_keahlian,
|
||||
status_kuliah: status_kuliah || existing.status_kuliah,
|
||||
semester: semester || existing.semester
|
||||
semester: semester || existing.semester,
|
||||
pembimbing_1: pembimbing_1 !== undefined ? pembimbing_1 : existing.pembimbing_1,
|
||||
pembimbing_2: pembimbing_2 !== undefined ? pembimbing_2 : existing.pembimbing_2,
|
||||
status_bimbingan: status_bimbingan || existing.status_bimbingan
|
||||
})
|
||||
.eq('nim', nim);
|
||||
|
||||
|
||||
@@ -120,7 +120,10 @@ function processData(headers: string[], rows: any[][]) {
|
||||
ipk: ['ipk', 'gpa'],
|
||||
kelompok_keahlian: ['kelompok_keahlian', 'kk', 'keahlian', 'id_kk'],
|
||||
status_kuliah: ['status_kuliah', 'status', 'status_mahasiswa'],
|
||||
semester: ['semester', 'sem']
|
||||
semester: ['semester', 'sem'],
|
||||
pembimbing_1_nip: ['pembimbing_1_nip', 'nip_pembimbing_1', 'pembimbing1_nip', 'dosen_pembimbing_1'],
|
||||
pembimbing_2_nip: ['pembimbing_2_nip', 'nip_pembimbing_2', 'pembimbing2_nip', 'dosen_pembimbing_2'],
|
||||
status_bimbingan: ['status_bimbingan', 'status_guidance', 'bimbingan_status']
|
||||
};
|
||||
|
||||
// Map actual headers to expected headers
|
||||
@@ -205,6 +208,22 @@ function processData(headers: string[], rows: any[][]) {
|
||||
}
|
||||
}
|
||||
|
||||
// Handle pembimbing NIP
|
||||
const pembimbing_1_nip = headerMap.pembimbing_1_nip !== undefined ? String(values[headerMap.pembimbing_1_nip] || '') || null : null;
|
||||
const pembimbing_2_nip = headerMap.pembimbing_2_nip !== undefined ? String(values[headerMap.pembimbing_2_nip] || '') || null : null;
|
||||
|
||||
// Handle status bimbingan
|
||||
let status_bimbingan = 'Belum Selesai'; // Default value
|
||||
if (headerMap.status_bimbingan !== undefined && values[headerMap.status_bimbingan] !== undefined) {
|
||||
const statusValue = String(values[headerMap.status_bimbingan] || '').trim();
|
||||
if (statusValue) {
|
||||
const mappedStatus = mapStatusBimbingan(statusValue);
|
||||
if (mappedStatus) {
|
||||
status_bimbingan = mappedStatus;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Validate required fields
|
||||
if (!nim || !nama || !jenis_kelamin || !tahun_angkatan) {
|
||||
errors.push(`Row ${i+1}: Missing required fields`);
|
||||
@@ -241,14 +260,17 @@ function processData(headers: string[], rows: any[][]) {
|
||||
nama,
|
||||
jk: jenis_kelamin,
|
||||
agama,
|
||||
kabupaten,
|
||||
kabupaten,
|
||||
provinsi,
|
||||
jenis_pendaftaran,
|
||||
tahun_angkatan,
|
||||
ipk,
|
||||
kelompok_keahlian_id,
|
||||
status_kuliah,
|
||||
semester
|
||||
semester,
|
||||
pembimbing_1_nip,
|
||||
pembimbing_2_nip,
|
||||
status_bimbingan
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
@@ -301,6 +323,23 @@ function mapStatus(value: string): 'Aktif' | 'Cuti' | 'Lulus' | 'Non-Aktif' | nu
|
||||
return null;
|
||||
}
|
||||
|
||||
// Function to map status bimbingan values to standardized format
|
||||
function mapStatusBimbingan(value: string): 'Selesai' | 'Belum Selesai' | null {
|
||||
if (!value) return null;
|
||||
|
||||
const lowerValue = value.toLowerCase();
|
||||
|
||||
if (['selesai', 'completed', 'done', 'finished', 's', '1'].includes(lowerValue)) {
|
||||
return 'Selesai';
|
||||
}
|
||||
|
||||
if (['belum selesai', 'belum_selesai', 'not completed', 'incomplete', 'ongoing', 'in progress', 'b', '0'].includes(lowerValue)) {
|
||||
return 'Belum Selesai';
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Fungsi untuk insert data ke database
|
||||
async function insertDataToDatabase(data: any[]) {
|
||||
let insertedCount = 0;
|
||||
@@ -315,6 +354,28 @@ async function insertDataToDatabase(data: any[]) {
|
||||
.eq('nim', item.nim)
|
||||
.single();
|
||||
|
||||
// Lookup pembimbing berdasarkan NIP
|
||||
let pembimbing_1_id = null;
|
||||
let pembimbing_2_id = null;
|
||||
|
||||
if (item.pembimbing_1_nip) {
|
||||
const { data: dosen1 } = await supabase
|
||||
.from('dosen')
|
||||
.select('id_dosen')
|
||||
.eq('nip', item.pembimbing_1_nip)
|
||||
.single();
|
||||
pembimbing_1_id = dosen1?.id_dosen || null;
|
||||
}
|
||||
|
||||
if (item.pembimbing_2_nip) {
|
||||
const { data: dosen2 } = await supabase
|
||||
.from('dosen')
|
||||
.select('id_dosen')
|
||||
.eq('nip', item.pembimbing_2_nip)
|
||||
.single();
|
||||
pembimbing_2_id = dosen2?.id_dosen || null;
|
||||
}
|
||||
|
||||
const mahasiswaData = {
|
||||
nama: item.nama,
|
||||
jk: item.jk,
|
||||
@@ -326,7 +387,10 @@ async function insertDataToDatabase(data: any[]) {
|
||||
ipk: item.ipk,
|
||||
id_kelompok_keahlian: item.kelompok_keahlian_id,
|
||||
status_kuliah: item.status_kuliah,
|
||||
semester: item.semester
|
||||
semester: item.semester,
|
||||
pembimbing_1: pembimbing_1_id,
|
||||
pembimbing_2: pembimbing_2_id,
|
||||
status_bimbingan: item.status_bimbingan
|
||||
};
|
||||
|
||||
if (existingData) {
|
||||
|
||||
101
app/api/mahasiswa/bimbingan-dosen/route.ts
Normal file
101
app/api/mahasiswa/bimbingan-dosen/route.ts
Normal file
@@ -0,0 +1,101 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import supabase from '@/lib/db';
|
||||
|
||||
// GET - Ambil data bimbingan dosen berdasarkan status bimbingan
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
const { searchParams } = new URL(request.url);
|
||||
const tahun_angkatan = searchParams.get('tahun_angkatan');
|
||||
|
||||
let query = supabase
|
||||
.from('mahasiswa')
|
||||
.select(`
|
||||
pembimbing_1,
|
||||
pembimbing_2,
|
||||
status_bimbingan,
|
||||
tahun_angkatan,
|
||||
dosen_pembimbing_1:dosen!pembimbing_1(id_dosen, nama_dosen),
|
||||
dosen_pembimbing_2:dosen!pembimbing_2(id_dosen, nama_dosen)
|
||||
`);
|
||||
|
||||
// Filter berdasarkan tahun angkatan jika diberikan
|
||||
if (tahun_angkatan && tahun_angkatan !== 'all') {
|
||||
query = query.eq('tahun_angkatan', tahun_angkatan);
|
||||
}
|
||||
|
||||
const { data, error } = await query;
|
||||
|
||||
if (error) {
|
||||
console.error('Error fetching bimbingan data:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
|
||||
// Proses data untuk menggabungkan pembimbing 1 dan 2
|
||||
const bimbinganMap = new Map();
|
||||
|
||||
data.forEach(mahasiswa => {
|
||||
// Proses pembimbing 1
|
||||
if (mahasiswa.pembimbing_1 && mahasiswa.dosen_pembimbing_1) {
|
||||
const dosenId = (mahasiswa.dosen_pembimbing_1 as any).id_dosen;
|
||||
const dosenNama = (mahasiswa.dosen_pembimbing_1 as any).nama_dosen;
|
||||
const status = mahasiswa.status_bimbingan;
|
||||
|
||||
if (!bimbinganMap.has(dosenId)) {
|
||||
bimbinganMap.set(dosenId, {
|
||||
id_dosen: dosenId,
|
||||
nama_dosen: dosenNama,
|
||||
selesai: 0,
|
||||
belum_selesai: 0
|
||||
});
|
||||
}
|
||||
|
||||
const dosenData = bimbinganMap.get(dosenId);
|
||||
if (dosenData) {
|
||||
if (status === 'Selesai') {
|
||||
dosenData.selesai++;
|
||||
} else {
|
||||
dosenData.belum_selesai++;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Proses pembimbing 2
|
||||
if (mahasiswa.pembimbing_2 && mahasiswa.dosen_pembimbing_2) {
|
||||
const dosenId = (mahasiswa.dosen_pembimbing_2 as any).id_dosen;
|
||||
const dosenNama = (mahasiswa.dosen_pembimbing_2 as any).nama_dosen;
|
||||
const status = mahasiswa.status_bimbingan;
|
||||
|
||||
if (!bimbinganMap.has(dosenId)) {
|
||||
bimbinganMap.set(dosenId, {
|
||||
id_dosen: dosenId,
|
||||
nama_dosen: dosenNama,
|
||||
selesai: 0,
|
||||
belum_selesai: 0
|
||||
});
|
||||
}
|
||||
|
||||
const dosenData = bimbinganMap.get(dosenId);
|
||||
if (dosenData) {
|
||||
if (status === 'Selesai') {
|
||||
dosenData.selesai++;
|
||||
} else {
|
||||
dosenData.belum_selesai++;
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Konversi Map ke Array dan urutkan berdasarkan nama dosen A-Z
|
||||
const result = Array.from(bimbinganMap.values())
|
||||
.map(dosen => ({
|
||||
...dosen,
|
||||
total: dosen.selesai + dosen.belum_selesai
|
||||
}))
|
||||
.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
|
||||
|
||||
return NextResponse.json(result);
|
||||
} catch (error) {
|
||||
console.error('Error fetching bimbingan data:', error);
|
||||
return NextResponse.json({ message: 'Internal Server Error' }, { status: 500 });
|
||||
}
|
||||
}
|
||||
@@ -21,6 +21,8 @@ import TingkatPrestasiChart from "@/components/chartsDashboard/TingkatPrestasiDa
|
||||
import ProvinsiMahasiswaChart from "@/components/chartsDashboard/ProvinsiMahasiswaPieChart";
|
||||
import TingkatPrestasiPieChartDash from "@/components/chartsDashboard/TingkatPrestasiPieChartDash";
|
||||
import LulusTepatWaktuChart from "@/components/charts/LulusTepatWaktuChart";
|
||||
import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
|
||||
import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import {
|
||||
@@ -82,7 +84,8 @@ export default function TotalMahasiswaPage() {
|
||||
{ id: 'study-duration', label: 'Kelulusan Tepat Waktu & Masa Studi' },
|
||||
{ id: 'expertise', label: 'Kelompok Keahlian' },
|
||||
{ id: 'scholarship', label: 'Beasiswa & Prestasi' },
|
||||
{ id: 'demographics', label: 'Asal Kabupaten & Provinsi' }
|
||||
{ id: 'demographics', label: 'Asal Kabupaten & Provinsi' },
|
||||
{ id: 'bimbingan-dosen', label: 'Bimbingan Dosen' }
|
||||
];
|
||||
|
||||
// Navigation menu items for per year data
|
||||
@@ -90,7 +93,8 @@ export default function TotalMahasiswaPage() {
|
||||
{ id: 'overview-year', label: 'Jumlah & Status per Angkatan' },
|
||||
{ id: 'status-year', label: 'Jenis Pendaftaran & Kelompok Keahlian' },
|
||||
{ id: 'achievement-year', label: 'Beasiswa & Prestasi per Angkatan' },
|
||||
{ id: 'demographics-year', label: 'Asal Kabupaten per Angkatan' }
|
||||
{ id: 'demographics-year', label: 'Asal Kabupaten per Angkatan' },
|
||||
{ id: 'bimbingan-dosen-year', label: 'Bimbingan Dosen' }
|
||||
];
|
||||
|
||||
return (
|
||||
@@ -177,6 +181,10 @@ export default function TotalMahasiswaPage() {
|
||||
<ProvinsiMahasiswaChart />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bimbingan-dosen" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
|
||||
<BimbinganDosenChart />
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-6">
|
||||
@@ -198,9 +206,13 @@ export default function TotalMahasiswaPage() {
|
||||
</div>
|
||||
|
||||
{/* Demographics Section */}
|
||||
<div id="demographics-year" className="grid grid-cols-1 md:grid-cols-2 gap-4 scroll-mt-24">
|
||||
<div id="demographics-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
|
||||
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
|
||||
</div>
|
||||
|
||||
<div id="bimbingan-dosen-year" className="grid grid-cols-1 md:grid-cols-1 gap-4 scroll-mt-24">
|
||||
<BimbinganDosenPerAngkatanChart tahunAngkatan={selectedYear} />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
72
app/detail/bimbingan-dosen/page.tsx
Normal file
72
app/detail/bimbingan-dosen/page.tsx
Normal file
@@ -0,0 +1,72 @@
|
||||
'use client';
|
||||
|
||||
import { useState } from "react";
|
||||
import BimbinganDosenChart from "@/components/charts/BimbinganDosenChart";
|
||||
import BimbinganDosenPerAngkatanChart from "@/components/charts/BimbinganDosenPerAngkatanChart";
|
||||
import FilterTahunAngkatan from "@/components/FilterTahunAngkatan";
|
||||
|
||||
export default function BimbinganDosenDetailPage() {
|
||||
const [selectedYear, setSelectedYear] = useState<string>("all");
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 dark:bg-[var(--background)] p-4">
|
||||
<div className="container mx-auto max-w-7xl space-y-2">
|
||||
{/* Filter Section */}
|
||||
<FilterTahunAngkatan
|
||||
selectedYear={selectedYear}
|
||||
onYearChange={setSelectedYear}
|
||||
/>
|
||||
|
||||
{/* Chart Section - Enhanced Size */}
|
||||
<div className="grid grid-cols-1 lg:grid-cols-1 gap-6">
|
||||
{/* Chart untuk semua data atau dual chart ketika tahun tertentu dipilih */}
|
||||
{selectedYear === "all" ? (
|
||||
<div className="lg:col-span-2">
|
||||
<BimbinganDosenChart
|
||||
height="h-[600px] sm:h-[600px] lg:h-[600px]"
|
||||
showDetailButton={false}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<BimbinganDosenPerAngkatanChart
|
||||
tahunAngkatan={selectedYear}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Information Section */}
|
||||
<div className="bg-white dark:bg-slate-900 rounded-lg shadow-sm p-6">
|
||||
<h2 className="text-xl font-semibold text-gray-900 dark:text-white mb-4">
|
||||
Informasi Visualisasi
|
||||
</h2>
|
||||
<div className="grid md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">
|
||||
Grafik Utama (Bimbingan Dosen)
|
||||
</h3>
|
||||
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
|
||||
<li>• Menampilkan statistik bimbingan mahasiswa per dosen pembimbing</li>
|
||||
<li>• Data terbagi menjadi dua kategori: "Selesai" dan "Belum Selesai"</li>
|
||||
<li>• Hijau menunjukkan bimbingan selesai, kuning untuk belum selesai</li>
|
||||
</ul>
|
||||
</div>
|
||||
{selectedYear !== "all" && (
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900 dark:text-white mb-2">
|
||||
Grafik Per Angkatan ({selectedYear})
|
||||
</h3>
|
||||
<ul className="text-sm text-gray-600 dark:text-gray-300 space-y-1">
|
||||
<li>• Menampilkan statistik bimbingan untuk angkatan {selectedYear}</li>
|
||||
<li>• Data spesifik beban bimbingan dosen per angkatan</li>
|
||||
<li>• Insight progress penyelesaian bimbingan per tahun angkatan</li>
|
||||
</ul>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
9
app/keloladata/dosen/page.tsx
Normal file
9
app/keloladata/dosen/page.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import DataTableDosen from "@/components/datatable/data-table-dosen";
|
||||
|
||||
export default function DosenPage() {
|
||||
return (
|
||||
<div className="container mx-auto p-4 space-y-6">
|
||||
<DataTableDosen />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -105,7 +105,7 @@ export default function DashboardPage() {
|
||||
|
||||
return (
|
||||
<div className="container mx-auto p-4 space-y-6">
|
||||
<h1 className="text-2xl font-bold mb-8">Visualisasi Data Akademik Mahasiswa Informatika</h1>
|
||||
{/* <h1 className="text-2xl font-bold mb-8">Visualisasi Data Akademik Mahasiswa Informatika</h1> */}
|
||||
|
||||
{loading ? (
|
||||
<div className="grid gap-6 md:grid-cols-2 lg:grid-cols-4">
|
||||
|
||||
@@ -50,7 +50,7 @@ export default function AsalDaerahChart({
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top',
|
||||
position: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
@@ -60,10 +60,9 @@ export default function AsalDaerahChart({
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
@@ -268,7 +267,7 @@ export default function AsalDaerahChart({
|
||||
const calculateHeight = () => {
|
||||
const minHeight = 100;
|
||||
const barHeight = 15; // Tinggi per bar dalam piksel
|
||||
const padding = 50; // Ruang ekstra untuk judul, legenda, dll
|
||||
const padding = 100; // Ruang ekstra untuk judul, legenda, dll
|
||||
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
|
||||
return `${dynamicHeight}px`;
|
||||
};
|
||||
@@ -292,7 +291,7 @@ export default function AsalDaerahChart({
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`${height} w-full max-w-xl mx-auto`}
|
||||
className={`${height} w-full`}
|
||||
style={{ height: calculateHeight() }}
|
||||
>
|
||||
<Chart
|
||||
|
||||
@@ -61,7 +61,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'top'
|
||||
position: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
@@ -71,10 +71,9 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
return val.toString();
|
||||
},
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
offsetX: 10,
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
@@ -303,7 +302,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
const calculateHeight = () => {
|
||||
const minHeight = 100;
|
||||
const barHeight = 15; // Tinggi per bar dalam piksel
|
||||
const padding = 50; // Ruang ekstra untuk judul, legenda, dll
|
||||
const padding = 100; // Ruang ekstra untuk judul, legenda, dll
|
||||
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
|
||||
return `${dynamicHeight}px`;
|
||||
};
|
||||
@@ -317,7 +316,7 @@ export default function AsalDaerahPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className="w-full max-w-xl mx-auto"
|
||||
className="w-full"
|
||||
style={{ height: calculateHeight() }}
|
||||
>
|
||||
<Chart
|
||||
|
||||
341
components/charts/BimbinganDosenChart.tsx
Normal file
341
components/charts/BimbinganDosenChart.tsx
Normal file
@@ -0,0 +1,341 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ApexOptions } from 'apexcharts';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { ExternalLink } from "lucide-react";
|
||||
import Link from "next/link";
|
||||
|
||||
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
interface BimbinganDosenData {
|
||||
id_dosen: number;
|
||||
nama_dosen: string;
|
||||
selesai: number;
|
||||
belum_selesai: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface BimbinganDosenChartProps {
|
||||
height?: string;
|
||||
showDetailButton?: boolean;
|
||||
}
|
||||
|
||||
export default function BimbinganDosenChart({
|
||||
height = "h-[400px] sm:h-[450px] md:h-[500px] lg:h-[600px]",
|
||||
showDetailButton = true
|
||||
}: BimbinganDosenChartProps = {}) {
|
||||
const { theme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<BimbinganDosenData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([
|
||||
{
|
||||
name: 'Selesai',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Belum Selesai',
|
||||
data: []
|
||||
}
|
||||
]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: true,
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'center',
|
||||
},
|
||||
},
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val > 0 ? val.toString() : '';
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jumlah Bimbingan',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Nama Dosen',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
fontSize: '14px',
|
||||
markers: {
|
||||
size: 12,
|
||||
},
|
||||
itemMargin: {
|
||||
horizontal: 10,
|
||||
},
|
||||
horizontalAlign: 'center',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Perbarui tema saat berubah
|
||||
useEffect(() => {
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
title: {
|
||||
...prev.xaxis?.title,
|
||||
style: {
|
||||
...prev.xaxis?.title?.style,
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...prev.xaxis?.labels,
|
||||
style: {
|
||||
...prev.xaxis?.labels?.style,
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
...prev.yaxis,
|
||||
title: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
|
||||
style: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
|
||||
style: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
...prev.legend,
|
||||
labels: {
|
||||
...prev.legend?.labels,
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: theme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mahasiswa/bimbingan-dosen');
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!Array.isArray(result)) {
|
||||
throw new Error('Format data tidak valid diterima dari server');
|
||||
}
|
||||
|
||||
// Urutkan data berdasarkan nama dosen A-Z
|
||||
const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
|
||||
setData(sortedResult);
|
||||
|
||||
// Proses data untuk chart
|
||||
const namaDosen = sortedResult.map(item => item.nama_dosen);
|
||||
const selesaiData = sortedResult.map(item => item.selesai);
|
||||
const belumSelesaiData = sortedResult.map(item => item.belum_selesai);
|
||||
|
||||
setSeries([
|
||||
{
|
||||
name: 'Selesai',
|
||||
data: selesaiData
|
||||
},
|
||||
{
|
||||
name: 'Belum Selesai',
|
||||
data: belumSelesaiData
|
||||
}
|
||||
]);
|
||||
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: namaDosen,
|
||||
},
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchData();
|
||||
}, []);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Loading...
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Tidak ada data bimbingan yang tersedia
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Hitung tinggi dinamis berdasarkan jumlah dosen
|
||||
const calculateHeight = () => {
|
||||
const minHeight = 200;
|
||||
const barHeight = 25; // Tinggi per bar dalam piksel
|
||||
const padding = 100; // Ruang ekstra untuk judul, legenda, dll
|
||||
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
|
||||
return `${dynamicHeight}px`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<div className="flex justify-between items-center">
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Bimbingan Dosen
|
||||
</CardTitle>
|
||||
{showDetailButton && (
|
||||
<Link href="/detail/bimbingan-dosen" target="_blank">
|
||||
<Button variant="outline" size="sm" className="flex items-center gap-1 dark:text-white">
|
||||
<ExternalLink className="size-3" />
|
||||
Detail
|
||||
</Button>
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className={`${height} w-full`}
|
||||
style={{ height: calculateHeight() }}
|
||||
>
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
358
components/charts/BimbinganDosenPerAngkatanChart.tsx
Normal file
358
components/charts/BimbinganDosenPerAngkatanChart.tsx
Normal file
@@ -0,0 +1,358 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import dynamic from 'next/dynamic';
|
||||
import { ApexOptions } from 'apexcharts';
|
||||
import { useTheme } from 'next-themes';
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
|
||||
// Import ApexCharts secara dinamis untuk menghindari masalah SSR
|
||||
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
|
||||
|
||||
interface BimbinganDosenData {
|
||||
id_dosen: number;
|
||||
nama_dosen: string;
|
||||
selesai: number;
|
||||
belum_selesai: number;
|
||||
total: number;
|
||||
}
|
||||
|
||||
interface Props {
|
||||
tahunAngkatan: string;
|
||||
}
|
||||
|
||||
export default function BimbinganDosenPerAngkatanChart({ tahunAngkatan }: Props) {
|
||||
const { theme } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [data, setData] = useState<BimbinganDosenData[]>([]);
|
||||
const [series, setSeries] = useState<ApexAxisChartSeries>([
|
||||
{
|
||||
name: 'Selesai',
|
||||
data: []
|
||||
},
|
||||
{
|
||||
name: 'Belum Selesai',
|
||||
data: []
|
||||
}
|
||||
]);
|
||||
const [options, setOptions] = useState<ApexOptions>({
|
||||
chart: {
|
||||
type: 'bar',
|
||||
stacked: true,
|
||||
toolbar: {
|
||||
show: true,
|
||||
tools: {
|
||||
download: true,
|
||||
selection: true,
|
||||
zoom: true,
|
||||
zoomin: true,
|
||||
zoomout: true,
|
||||
pan: true,
|
||||
reset: true,
|
||||
customIcons: []
|
||||
},
|
||||
export: {
|
||||
csv: {
|
||||
filename: `bimbingan-dosen-angkatan`,
|
||||
columnDelimiter: ',',
|
||||
headerCategory: 'Nama Dosen',
|
||||
headerValue: 'Jumlah Bimbingan'
|
||||
}
|
||||
},
|
||||
},
|
||||
},
|
||||
plotOptions: {
|
||||
bar: {
|
||||
horizontal: true,
|
||||
columnWidth: '85%',
|
||||
distributed: false,
|
||||
barHeight: '90%',
|
||||
dataLabels: {
|
||||
position: 'center'
|
||||
}
|
||||
}
|
||||
},
|
||||
dataLabels: {
|
||||
enabled: true,
|
||||
formatter: function (val: number) {
|
||||
return val > 0 ? val.toString() : '';
|
||||
},
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: [theme === 'dark' ? '#fff' : '#000']
|
||||
},
|
||||
},
|
||||
stroke: {
|
||||
show: true,
|
||||
width: 1,
|
||||
colors: [theme === 'dark' ? '#374151' : '#E5E7EB'],
|
||||
},
|
||||
xaxis: {
|
||||
categories: [],
|
||||
title: {
|
||||
text: 'Jumlah Bimbingan',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '12px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
title: {
|
||||
text: 'Nama Dosen',
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
fontWeight: 'bold',
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
style: {
|
||||
fontSize: '14px',
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
},
|
||||
maxWidth: 200,
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
position: 'top',
|
||||
horizontalAlign: 'center',
|
||||
labels: {
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
padding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0
|
||||
}
|
||||
},
|
||||
fill: {
|
||||
opacity: 1,
|
||||
},
|
||||
colors: ['#10B981', '#F59E0B'], // Hijau untuk Selesai, Kuning untuk Belum Selesai
|
||||
tooltip: {
|
||||
theme: theme === 'dark' ? 'dark' : 'light',
|
||||
y: {
|
||||
formatter: function (val: number) {
|
||||
return val + " mahasiswa";
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Perbarui tema saat berubah
|
||||
useEffect(() => {
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
chart: {
|
||||
...prev.chart,
|
||||
background: theme === 'dark' ? '#0F172B' : '#fff',
|
||||
},
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
title: {
|
||||
...prev.xaxis?.title,
|
||||
style: {
|
||||
...prev.xaxis?.title?.style,
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...prev.xaxis?.labels,
|
||||
style: {
|
||||
...prev.xaxis?.labels?.style,
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
yaxis: {
|
||||
...prev.yaxis,
|
||||
title: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title : prev.yaxis?.title),
|
||||
style: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.title?.style : prev.yaxis?.title?.style),
|
||||
color: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
labels: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels : prev.yaxis?.labels),
|
||||
style: {
|
||||
...(Array.isArray(prev.yaxis) ? prev.yaxis[0]?.labels?.style : prev.yaxis?.labels?.style),
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
...prev.legend,
|
||||
labels: {
|
||||
...prev.legend?.labels,
|
||||
colors: theme === 'dark' ? '#fff' : '#000'
|
||||
}
|
||||
},
|
||||
tooltip: {
|
||||
...prev.tooltip,
|
||||
theme: theme === 'dark' ? 'dark' : 'light'
|
||||
}
|
||||
}));
|
||||
}, [theme]);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchData = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch(`/api/mahasiswa/bimbingan-dosen?tahun_angkatan=${tahunAngkatan}`);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`Failed to fetch data: ${response.status} ${response.statusText}`);
|
||||
}
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!Array.isArray(result)) {
|
||||
throw new Error('Format data tidak valid diterima dari server');
|
||||
}
|
||||
|
||||
// Urutkan data berdasarkan nama dosen A-Z
|
||||
const sortedResult = result.sort((a, b) => a.nama_dosen.localeCompare(b.nama_dosen));
|
||||
setData(sortedResult);
|
||||
|
||||
// Proses data untuk chart
|
||||
const namaDosen = sortedResult.map(item => item.nama_dosen);
|
||||
const selesaiData = sortedResult.map(item => item.selesai);
|
||||
const belumSelesaiData = sortedResult.map(item => item.belum_selesai);
|
||||
|
||||
setSeries([
|
||||
{
|
||||
name: 'Selesai',
|
||||
data: selesaiData
|
||||
},
|
||||
{
|
||||
name: 'Belum Selesai',
|
||||
data: belumSelesaiData
|
||||
}
|
||||
]);
|
||||
|
||||
setOptions(prev => ({
|
||||
...prev,
|
||||
xaxis: {
|
||||
...prev.xaxis,
|
||||
categories: namaDosen,
|
||||
},
|
||||
chart: {
|
||||
...prev.chart,
|
||||
toolbar: {
|
||||
...prev.chart?.toolbar,
|
||||
export: {
|
||||
...prev.chart?.toolbar?.export,
|
||||
csv: {
|
||||
...prev.chart?.toolbar?.export?.csv,
|
||||
filename: `bimbingan-dosen-angkatan-${tahunAngkatan}`,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}));
|
||||
} catch (err) {
|
||||
console.error('Error in fetchData:', err);
|
||||
setError(err instanceof Error ? err.message : 'Terjadi kesalahan saat mengambil data');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
if (tahunAngkatan) {
|
||||
fetchData();
|
||||
}
|
||||
}, [tahunAngkatan]);
|
||||
|
||||
if (!mounted) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Loading...
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (error) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold text-red-500 dark:text-red-400">
|
||||
Error: {error}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (data.length === 0) {
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Tidak ada data bimbingan yang tersedia untuk angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
// Hitung tinggi dinamis berdasarkan jumlah dosen
|
||||
const calculateHeight = () => {
|
||||
const minHeight = 200;
|
||||
const barHeight = 25; // Tinggi per bar dalam piksel
|
||||
const padding = 100; // Ruang ekstra untuk judul, legenda, dll
|
||||
const dynamicHeight = Math.max(minHeight, (data.length * barHeight) + padding);
|
||||
return `${dynamicHeight}px`;
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white dark:bg-slate-900 shadow-lg">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-xl font-bold dark:text-white">
|
||||
Bimbingan Dosen Angkatan {tahunAngkatan}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div
|
||||
className="w-full"
|
||||
style={{ height: calculateHeight() }}
|
||||
>
|
||||
<Chart
|
||||
options={options}
|
||||
series={series}
|
||||
type="bar"
|
||||
height="100%"
|
||||
width="100%"
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
617
components/datatable/data-table-dosen.tsx
Normal file
617
components/datatable/data-table-dosen.tsx
Normal file
@@ -0,0 +1,617 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import {
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableHead,
|
||||
TableHeader,
|
||||
TableRow
|
||||
} from "@/components/ui/table";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogClose
|
||||
} from "@/components/ui/dialog";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "@/components/ui/select";
|
||||
import {
|
||||
Pagination,
|
||||
PaginationContent,
|
||||
PaginationEllipsis,
|
||||
PaginationItem,
|
||||
PaginationLink,
|
||||
PaginationNext,
|
||||
PaginationPrevious,
|
||||
} from "@/components/ui/pagination";
|
||||
import {
|
||||
PlusCircle,
|
||||
Pencil,
|
||||
Trash2,
|
||||
Search,
|
||||
X,
|
||||
Loader2
|
||||
} from "lucide-react";
|
||||
import UploadExcelDosen from "@/components/datatable/upload-file-dosen";
|
||||
import { useToast } from "@/components/ui/toast-provider";
|
||||
|
||||
// Define the Dosen type
|
||||
interface Dosen {
|
||||
id_dosen: number;
|
||||
nama_dosen: string;
|
||||
nip: string;
|
||||
}
|
||||
|
||||
export default function DataTableDosen() {
|
||||
const { showSuccess, showError } = useToast();
|
||||
|
||||
// State for data
|
||||
const [dosen, setDosen] = useState<Dosen[]>([]);
|
||||
const [filteredData, setFilteredData] = useState<Dosen[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
// State for filtering
|
||||
const [searchTerm, setSearchTerm] = useState("");
|
||||
|
||||
// State for pagination
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [paginatedData, setPaginatedData] = useState<Dosen[]>([]);
|
||||
|
||||
// State for form
|
||||
const [formMode, setFormMode] = useState<"add" | "edit">("add");
|
||||
const [formData, setFormData] = useState<Partial<Dosen>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
|
||||
// State for delete confirmation
|
||||
const [deleteId, setDeleteId] = useState<number | null>(null);
|
||||
const [isDeleting, setIsDeleting] = useState(false);
|
||||
const [isDeleteDialogOpen, setIsDeleteDialogOpen] = useState(false);
|
||||
|
||||
// Fetch data on component mount
|
||||
useEffect(() => {
|
||||
fetchDosen();
|
||||
}, []);
|
||||
|
||||
// Filter data when search term changes
|
||||
useEffect(() => {
|
||||
filterData();
|
||||
}, [searchTerm, dosen]);
|
||||
|
||||
// Update paginated data when filtered data or pagination settings change
|
||||
useEffect(() => {
|
||||
paginateData();
|
||||
}, [filteredData, currentPage, pageSize]);
|
||||
|
||||
// Fetch dosen data from API
|
||||
const fetchDosen = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
let url = "/api/keloladata/data-dosen";
|
||||
|
||||
// Add search to URL if it exists
|
||||
const params = new URLSearchParams();
|
||||
if (searchTerm) {
|
||||
params.append("search", searchTerm);
|
||||
}
|
||||
|
||||
if (params.toString()) {
|
||||
url += `?${params.toString()}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setDosen(data);
|
||||
setFilteredData(data);
|
||||
setError(null);
|
||||
} catch (err) {
|
||||
setError("Error fetching data. Please try again later.");
|
||||
console.error("Error fetching data:", err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Filter data based on search term
|
||||
const filterData = () => {
|
||||
let filtered = [...dosen];
|
||||
|
||||
// Filter by search term
|
||||
if (searchTerm) {
|
||||
filtered = filtered.filter(
|
||||
(item) =>
|
||||
(item.nama_dosen?.toLowerCase() || "").includes(searchTerm.toLowerCase()) ||
|
||||
(item.nip?.toLowerCase() || "").includes(searchTerm.toLowerCase())
|
||||
);
|
||||
}
|
||||
|
||||
setFilteredData(filtered);
|
||||
// Reset to first page when filters change
|
||||
setCurrentPage(1);
|
||||
};
|
||||
|
||||
// Paginate data
|
||||
const paginateData = () => {
|
||||
const startIndex = (currentPage - 1) * pageSize;
|
||||
const endIndex = startIndex + pageSize;
|
||||
setPaginatedData(filteredData.slice(startIndex, endIndex));
|
||||
};
|
||||
|
||||
// Get total number of pages
|
||||
const getTotalPages = () => {
|
||||
return Math.ceil(filteredData.length / pageSize);
|
||||
};
|
||||
|
||||
// Handle page change
|
||||
const handlePageChange = (page: number) => {
|
||||
setCurrentPage(page);
|
||||
};
|
||||
|
||||
// Handle page size change
|
||||
const handlePageSizeChange = (size: string) => {
|
||||
setPageSize(Number(size));
|
||||
setCurrentPage(1); // Reset to first page when changing page size
|
||||
};
|
||||
|
||||
// Reset form data
|
||||
const resetForm = () => {
|
||||
setFormData({});
|
||||
};
|
||||
|
||||
// Handle form input changes
|
||||
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const { name, value } = e.target;
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
};
|
||||
|
||||
// Open form dialog for adding new dosen
|
||||
const handleAdd = () => {
|
||||
setFormMode("add");
|
||||
resetForm();
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Open form dialog for editing dosen
|
||||
const handleEdit = (data: Dosen) => {
|
||||
setFormMode("edit");
|
||||
setFormData(data);
|
||||
setIsDialogOpen(true);
|
||||
};
|
||||
|
||||
// Open delete confirmation dialog
|
||||
const handleDeleteConfirm = (id: number) => {
|
||||
setDeleteId(id);
|
||||
setIsDeleteDialogOpen(true);
|
||||
};
|
||||
|
||||
// Submit form for add/edit
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
try {
|
||||
setIsSubmitting(true);
|
||||
|
||||
if (formMode === "add") {
|
||||
// Add new dosen
|
||||
const response = await fetch("/api/keloladata/data-dosen", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
// Handle specific errors
|
||||
if (response.status === 409) {
|
||||
showError("Gagal!", responseData.message);
|
||||
throw new Error(responseData.message);
|
||||
}
|
||||
if (response.status === 400) {
|
||||
showError("Gagal!", responseData.message);
|
||||
throw new Error(responseData.message);
|
||||
}
|
||||
showError("Gagal!", "Gagal menambahkan dosen");
|
||||
throw new Error(responseData.message || "Failed to add dosen");
|
||||
}
|
||||
|
||||
showSuccess("Berhasil!", "Dosen berhasil ditambahkan");
|
||||
} else {
|
||||
// Edit existing dosen
|
||||
const response = await fetch(`/api/keloladata/data-dosen?id=${formData.id_dosen}`, {
|
||||
method: "PUT",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(formData),
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
// Handle specific errors
|
||||
if (response.status === 409) {
|
||||
showError("Gagal!", responseData.message);
|
||||
throw new Error(responseData.message);
|
||||
}
|
||||
if (response.status === 400) {
|
||||
showError("Gagal!", responseData.message);
|
||||
throw new Error(responseData.message);
|
||||
}
|
||||
showError("Gagal!", responseData.message || "Failed to update dosen");
|
||||
throw new Error(responseData.message || "Failed to update dosen");
|
||||
}
|
||||
|
||||
showSuccess("Berhasil!", "Dosen berhasil diperbarui");
|
||||
}
|
||||
|
||||
// Refresh data after successful operation
|
||||
await fetchDosen();
|
||||
setIsDialogOpen(false);
|
||||
resetForm();
|
||||
} catch (err) {
|
||||
console.error("Error submitting form:", err);
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Delete dosen
|
||||
const handleDelete = async () => {
|
||||
if (!deleteId) return;
|
||||
|
||||
try {
|
||||
setIsDeleting(true);
|
||||
|
||||
const response = await fetch(`/api/keloladata/data-dosen?id=${deleteId}`, {
|
||||
method: "DELETE",
|
||||
});
|
||||
|
||||
const responseData = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
if (response.status === 409) {
|
||||
showError("Gagal!", responseData.message);
|
||||
throw new Error(responseData.message);
|
||||
}
|
||||
showError("Gagal!", responseData.message || "Failed to delete dosen");
|
||||
throw new Error(responseData.message || "Failed to delete dosen");
|
||||
}
|
||||
|
||||
// Refresh data after successful deletion
|
||||
await fetchDosen();
|
||||
setIsDeleteDialogOpen(false);
|
||||
setDeleteId(null);
|
||||
showSuccess("Berhasil!", "Dosen berhasil dihapus");
|
||||
} catch (err) {
|
||||
console.error("Error deleting dosen:", err);
|
||||
} finally {
|
||||
setIsDeleting(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Generate pagination items
|
||||
const renderPaginationItems = () => {
|
||||
const totalPages = getTotalPages();
|
||||
const items = [];
|
||||
|
||||
// Always show first page
|
||||
items.push(
|
||||
<PaginationItem key="first">
|
||||
<PaginationLink
|
||||
isActive={currentPage === 1}
|
||||
onClick={() => handlePageChange(1)}
|
||||
>
|
||||
1
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
|
||||
// Show ellipsis if needed
|
||||
if (currentPage > 3) {
|
||||
items.push(
|
||||
<PaginationItem key="ellipsis-start">
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Show pages around current page
|
||||
for (let i = Math.max(2, currentPage - 1); i <= Math.min(totalPages - 1, currentPage + 1); i++) {
|
||||
if (i === 1 || i === totalPages) continue; // Skip first and last pages as they're always shown
|
||||
items.push(
|
||||
<PaginationItem key={i}>
|
||||
<PaginationLink
|
||||
isActive={currentPage === i}
|
||||
onClick={() => handlePageChange(i)}
|
||||
>
|
||||
{i}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Show ellipsis if needed
|
||||
if (currentPage < totalPages - 2) {
|
||||
items.push(
|
||||
<PaginationItem key="ellipsis-end">
|
||||
<PaginationEllipsis />
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
// Always show last page if there's more than one page
|
||||
if (totalPages > 1) {
|
||||
items.push(
|
||||
<PaginationItem key="last">
|
||||
<PaginationLink
|
||||
isActive={currentPage === totalPages}
|
||||
onClick={() => handlePageChange(totalPages)}
|
||||
>
|
||||
{totalPages}
|
||||
</PaginationLink>
|
||||
</PaginationItem>
|
||||
);
|
||||
}
|
||||
|
||||
return items;
|
||||
};
|
||||
|
||||
// Calculate the range of entries being displayed
|
||||
const getDisplayRange = () => {
|
||||
if (filteredData.length === 0) return { start: 0, end: 0 };
|
||||
|
||||
const start = (currentPage - 1) * pageSize + 1;
|
||||
const end = Math.min(currentPage * pageSize, filteredData.length);
|
||||
|
||||
return { start, end };
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
|
||||
<h2 className="text-2xl font-bold">Data Dosen</h2>
|
||||
<div className="flex flex-col sm:flex-row gap-2">
|
||||
<Button onClick={handleAdd}>
|
||||
<PlusCircle className="mr-2 h-4 w-4" />
|
||||
Tambah Dosen
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Search */}
|
||||
<div className="flex flex-col sm:flex-row gap-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
|
||||
<Input
|
||||
placeholder="Cari berdasarkan nama dosen atau NIP..."
|
||||
className="pl-8"
|
||||
value={searchTerm}
|
||||
onChange={(e) => setSearchTerm(e.target.value)}
|
||||
/>
|
||||
{searchTerm && (
|
||||
<X
|
||||
className="absolute right-2.5 top-2.5 h-4 w-4 text-muted-foreground cursor-pointer"
|
||||
onClick={() => setSearchTerm("")}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show entries selector */}
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm">Show</span>
|
||||
<Select
|
||||
value={pageSize.toString()}
|
||||
onValueChange={handlePageSizeChange}
|
||||
>
|
||||
<SelectTrigger className="w-[80px]">
|
||||
<SelectValue placeholder={pageSize.toString()} />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="5">5</SelectItem>
|
||||
<SelectItem value="10">10</SelectItem>
|
||||
<SelectItem value="25">25</SelectItem>
|
||||
<SelectItem value="50">50</SelectItem>
|
||||
<SelectItem value="100">100</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<span className="text-sm">entries</span>
|
||||
</div>
|
||||
|
||||
{/* Table */}
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center py-8">
|
||||
<Loader2 className="h-8 w-8 animate-spin text-primary" />
|
||||
</div>
|
||||
) : error ? (
|
||||
<div className="bg-destructive/10 p-4 rounded-md text-destructive text-center">
|
||||
{error}
|
||||
</div>
|
||||
) : (
|
||||
<div className="border rounded-md">
|
||||
<Table>
|
||||
<TableHeader>
|
||||
<TableRow>
|
||||
{/* <TableHead className="w-[80px]">ID</TableHead> */}
|
||||
<TableHead>Nama Dosen</TableHead>
|
||||
<TableHead>NIP</TableHead>
|
||||
<TableHead className="text-right">Aksi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={4} className="text-center py-8">
|
||||
Tidak ada data yang sesuai dengan pencarian
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
) : (
|
||||
paginatedData.map((dosenItem) => (
|
||||
<TableRow key={dosenItem.id_dosen}>
|
||||
{/* <TableCell>{dosenItem.id_dosen}</TableCell> */}
|
||||
<TableCell className="font-medium">{dosenItem.nama_dosen}</TableCell>
|
||||
<TableCell>{dosenItem.nip}</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
onClick={() => handleEdit(dosenItem)}
|
||||
>
|
||||
<Pencil className="h-4 w-4" />
|
||||
</Button>
|
||||
<Button
|
||||
size="sm"
|
||||
variant="outline"
|
||||
className="text-destructive hover:bg-destructive/10"
|
||||
onClick={() => handleDeleteConfirm(dosenItem.id_dosen)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
))
|
||||
)}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Pagination info and controls */}
|
||||
{!loading && !error && filteredData.length > 0 && (
|
||||
<div className="flex flex-col sm:flex-row justify-between items-center gap-4">
|
||||
<div className="text-sm text-muted-foreground">
|
||||
Showing {getDisplayRange().start} to {getDisplayRange().end} of {filteredData.length} entries
|
||||
</div>
|
||||
<Pagination>
|
||||
<PaginationContent>
|
||||
<PaginationItem>
|
||||
<PaginationPrevious
|
||||
onClick={() => handlePageChange(Math.max(1, currentPage - 1))}
|
||||
className={currentPage === 1 ? "pointer-events-none opacity-50" : ""}
|
||||
/>
|
||||
</PaginationItem>
|
||||
|
||||
{renderPaginationItems()}
|
||||
|
||||
<PaginationItem>
|
||||
<PaginationNext
|
||||
onClick={() => handlePageChange(Math.min(getTotalPages(), currentPage + 1))}
|
||||
className={currentPage === getTotalPages() ? "pointer-events-none opacity-50" : ""}
|
||||
/>
|
||||
</PaginationItem>
|
||||
</PaginationContent>
|
||||
</Pagination>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Add/Edit Dialog */}
|
||||
<Dialog open={isDialogOpen} onOpenChange={setIsDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[500px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>
|
||||
{formMode === "add" ? "Tambah Dosen" : "Edit Dosen"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="grid gap-4 py-4">
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="nama_dosen" className="text-sm font-medium">
|
||||
Nama Dosen <span className="text-destructive">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="nama_dosen"
|
||||
name="nama_dosen"
|
||||
value={formData.nama_dosen || ""}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
maxLength={120}
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="nip" className="text-sm font-medium">
|
||||
NIP <span className="text-destructive">*</span>
|
||||
</label>
|
||||
<Input
|
||||
id="nip"
|
||||
name="nip"
|
||||
value={formData.nip || ""}
|
||||
onChange={handleInputChange}
|
||||
required
|
||||
maxLength={18}
|
||||
placeholder="18 karakter"
|
||||
/>
|
||||
<p className="text-xs text-muted-foreground">
|
||||
NIP harus terdiri dari 18 karakter
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
Batal
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button type="submit" disabled={isSubmitting}>
|
||||
{isSubmitting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{formMode === "add" ? "Tambah" : "Simpan"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</form>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
{/* Delete Confirmation Dialog */}
|
||||
<Dialog open={isDeleteDialogOpen} onOpenChange={setIsDeleteDialogOpen}>
|
||||
<DialogContent className="sm:max-w-[400px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Konfirmasi Hapus</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className="py-4">
|
||||
<p>Apakah Anda yakin ingin menghapus data dosen ini?</p>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Tindakan ini tidak dapat dibatalkan.
|
||||
</p>
|
||||
</div>
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
Batal
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
variant="destructive"
|
||||
onClick={handleDelete}
|
||||
disabled={isDeleting}
|
||||
>
|
||||
{isDeleting && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
Hapus
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -66,6 +66,11 @@ interface Mahasiswa {
|
||||
nama_kelompok_keahlian: string | null;
|
||||
status_kuliah: "Aktif" | "Cuti" | "Lulus" | "Non-Aktif";
|
||||
semester: number;
|
||||
pembimbing_1: number | null;
|
||||
nama_pembimbing_1: string | null;
|
||||
pembimbing_2: number | null;
|
||||
nama_pembimbing_2: string | null;
|
||||
status_bimbingan: "Selesai" | "Belum Selesai";
|
||||
created_at: string;
|
||||
updated_at: string;
|
||||
}
|
||||
@@ -76,6 +81,13 @@ interface KelompokKeahlian {
|
||||
nama_kelompok: string;
|
||||
}
|
||||
|
||||
// Define the Dosen type
|
||||
interface Dosen {
|
||||
id_dosen: number;
|
||||
nama_dosen: string;
|
||||
nip: string;
|
||||
}
|
||||
|
||||
export default function DataTableMahasiswa() {
|
||||
const { showSuccess, showError } = useToast();
|
||||
// State for data
|
||||
@@ -125,6 +137,9 @@ export default function DataTableMahasiswa() {
|
||||
const [deleteKelompokKeahlianId, setDeleteKelompokKeahlianId] = useState<number | null>(null);
|
||||
const [isKelompokKeahlianDeleting, setIsKelompokKeahlianDeleting] = useState(false);
|
||||
const [isKelompokKeahlianDeleteDialogOpen, setIsKelompokKeahlianDeleteDialogOpen] = useState(false);
|
||||
|
||||
// State for dosen data
|
||||
const [dosenData, setDosenData] = useState<Dosen[]>([]);
|
||||
|
||||
// Fetch data on component mount
|
||||
useEffect(() => {
|
||||
@@ -132,6 +147,7 @@ export default function DataTableMahasiswa() {
|
||||
fetchJenisPendaftaranOptions();
|
||||
fetchKelompokKeahlianOptions();
|
||||
fetchKelompokKeahlianData();
|
||||
fetchDosenData();
|
||||
}, []);
|
||||
|
||||
// Filter data when search term or filter changes
|
||||
@@ -267,7 +283,8 @@ export default function DataTableMahasiswa() {
|
||||
setFormData({
|
||||
jk: "Pria",
|
||||
status_kuliah: "Aktif",
|
||||
semester: 1
|
||||
semester: 1,
|
||||
status_bimbingan: "Belum Selesai"
|
||||
});
|
||||
};
|
||||
|
||||
@@ -291,6 +308,9 @@ export default function DataTableMahasiswa() {
|
||||
} else if (name === "semester") {
|
||||
const numValue = value === "" ? 1 : parseInt(value);
|
||||
setFormData((prev) => ({ ...prev, [name]: numValue }));
|
||||
} else if (name === "pembimbing_1" || name === "pembimbing_2") {
|
||||
const numValue = value === "null" || value === "" ? null : parseInt(value);
|
||||
setFormData((prev) => ({ ...prev, [name]: numValue }));
|
||||
} else {
|
||||
setFormData((prev) => ({ ...prev, [name]: value }));
|
||||
}
|
||||
@@ -329,6 +349,22 @@ export default function DataTableMahasiswa() {
|
||||
}
|
||||
};
|
||||
|
||||
// Fetch dosen data from API
|
||||
const fetchDosenData = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/keloladata/data-dosen");
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error("Failed to fetch dosen data");
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
setDosenData(data);
|
||||
} catch (err) {
|
||||
console.error("Error fetching dosen data:", err);
|
||||
}
|
||||
};
|
||||
|
||||
// Open form dialog for adding new mahasiswa
|
||||
const handleAdd = () => {
|
||||
setFormMode("add");
|
||||
@@ -337,6 +373,7 @@ export default function DataTableMahasiswa() {
|
||||
// Make sure we have the latest options
|
||||
fetchJenisPendaftaranOptions();
|
||||
fetchKelompokKeahlianOptions();
|
||||
fetchDosenData();
|
||||
};
|
||||
|
||||
// Open form dialog for editing mahasiswa
|
||||
@@ -347,6 +384,7 @@ export default function DataTableMahasiswa() {
|
||||
// Make sure we have the latest options
|
||||
fetchJenisPendaftaranOptions();
|
||||
fetchKelompokKeahlianOptions();
|
||||
fetchDosenData();
|
||||
};
|
||||
|
||||
// Open delete confirmation dialog
|
||||
@@ -748,13 +786,16 @@ export default function DataTableMahasiswa() {
|
||||
<TableHead>IPK</TableHead>
|
||||
<TableHead>Status Kuliah</TableHead>
|
||||
<TableHead>Kelompok Keahlian</TableHead>
|
||||
<TableHead>Pembimbing 1</TableHead>
|
||||
<TableHead>Pembimbing 2</TableHead>
|
||||
<TableHead>Status Bimbingan</TableHead>
|
||||
<TableHead className="text-right">Aksi</TableHead>
|
||||
</TableRow>
|
||||
</TableHeader>
|
||||
<TableBody>
|
||||
{paginatedData.length === 0 ? (
|
||||
<TableRow>
|
||||
<TableCell colSpan={13} className="text-center py-8">
|
||||
<TableCell colSpan={16} className="text-center py-8">
|
||||
Tidak ada data yang sesuai dengan filter
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
@@ -787,6 +828,19 @@ export default function DataTableMahasiswa() {
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell>{mhs.nama_kelompok_keahlian || "-"}</TableCell>
|
||||
<TableCell>{mhs.nama_pembimbing_1 || "-"}</TableCell>
|
||||
<TableCell>{mhs.nama_pembimbing_2 || "-"}</TableCell>
|
||||
<TableCell>
|
||||
<span
|
||||
className={`px-2 py-1 rounded-full text-xs font-medium ${
|
||||
mhs.status_bimbingan === "Selesai"
|
||||
? "bg-green-100 text-green-800"
|
||||
: "bg-orange-100 text-orange-800"
|
||||
}`}
|
||||
>
|
||||
{mhs.status_bimbingan}
|
||||
</span>
|
||||
</TableCell>
|
||||
<TableCell className="text-right">
|
||||
<div className="flex justify-end gap-2">
|
||||
<BiodataMahasiswaDialog nim={mhs.nim} nama={mhs.nama} />
|
||||
@@ -1026,6 +1080,65 @@ export default function DataTableMahasiswa() {
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="pembimbing_1" className="text-sm font-medium">
|
||||
Pembimbing 1
|
||||
</label>
|
||||
<Select
|
||||
value={formData.pembimbing_1?.toString() || "null"}
|
||||
onValueChange={(value) => handleSelectChange("pembimbing_1", value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih Pembimbing 1" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="null">-- Tidak Ada --</SelectItem>
|
||||
{dosenData.map((dosen) => (
|
||||
<SelectItem key={dosen.id_dosen} value={dosen.id_dosen.toString()}>
|
||||
{dosen.nama_dosen}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="pembimbing_2" className="text-sm font-medium">
|
||||
Pembimbing 2
|
||||
</label>
|
||||
<Select
|
||||
value={formData.pembimbing_2?.toString() || "null"}
|
||||
onValueChange={(value) => handleSelectChange("pembimbing_2", value)}
|
||||
>
|
||||
<SelectTrigger className="w-full">
|
||||
<SelectValue placeholder="Pilih Pembimbing 2" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="null">-- Tidak Ada --</SelectItem>
|
||||
{dosenData.map((dosen) => (
|
||||
<SelectItem key={dosen.id_dosen} value={dosen.id_dosen.toString()}>
|
||||
{dosen.nama_dosen}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label htmlFor="status_bimbingan" className="text-sm font-medium">
|
||||
Status Bimbingan <span className="text-destructive">*</span>
|
||||
</label>
|
||||
<Select
|
||||
value={formData.status_bimbingan || "Belum Selesai"}
|
||||
onValueChange={(value) => handleSelectChange("status_bimbingan", value)}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="Belum Selesai">Belum Selesai</SelectItem>
|
||||
<SelectItem value="Selesai">Selesai</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<DialogFooter className="flex flex-col sm:flex-row gap-2 sm:gap-0">
|
||||
|
||||
225
components/datatable/upload-file-dosen.tsx
Normal file
225
components/datatable/upload-file-dosen.tsx
Normal file
@@ -0,0 +1,225 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useRef } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogFooter,
|
||||
DialogClose
|
||||
} from "@/components/ui/dialog";
|
||||
import { Upload, FileText, Loader2, X, CheckCircle, AlertCircle } from "lucide-react";
|
||||
import { useToast } from "@/components/ui/toast-provider";
|
||||
|
||||
interface UploadExcelDosenProps {
|
||||
onUploadSuccess: () => void;
|
||||
}
|
||||
|
||||
export default function UploadExcelDosen({ onUploadSuccess }: UploadExcelDosenProps) {
|
||||
const { showSuccess, showError } = useToast();
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const [isDialogOpen, setIsDialogOpen] = useState(false);
|
||||
const [selectedFile, setSelectedFile] = useState<File | null>(null);
|
||||
const [isUploading, setIsUploading] = useState(false);
|
||||
const [uploadResult, setUploadResult] = useState<any>(null);
|
||||
|
||||
// Handle file selection
|
||||
const handleFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||||
const file = e.target.files?.[0];
|
||||
if (file) {
|
||||
// Validate file type
|
||||
const allowedTypes = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-excel',
|
||||
'text/csv'
|
||||
];
|
||||
|
||||
if (allowedTypes.includes(file.type)) {
|
||||
setSelectedFile(file);
|
||||
} else {
|
||||
showError("File tidak valid", "Silakan pilih file Excel (.xlsx, .xls) atau CSV (.csv)");
|
||||
e.target.value = '';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Handle file upload
|
||||
const handleUpload = async () => {
|
||||
if (!selectedFile) {
|
||||
showError("Tidak ada file", "Silakan pilih file terlebih dahulu");
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setIsUploading(true);
|
||||
|
||||
const formData = new FormData();
|
||||
formData.append('file', selectedFile);
|
||||
|
||||
const response = await fetch('/api/keloladata/data-dosen/upload', {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(result.message || 'Upload failed');
|
||||
}
|
||||
|
||||
setUploadResult(result);
|
||||
|
||||
if (result.details.successCount > 0) {
|
||||
showSuccess("Upload berhasil!", result.message);
|
||||
onUploadSuccess(); // Refresh the main table
|
||||
} else {
|
||||
showError("Upload gagal", "Tidak ada data yang berhasil diupload");
|
||||
}
|
||||
|
||||
} catch (error) {
|
||||
console.error('Upload error:', error);
|
||||
showError("Error", error instanceof Error ? error.message : "Terjadi kesalahan saat upload");
|
||||
} finally {
|
||||
setIsUploading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Reset dialog
|
||||
const resetDialog = () => {
|
||||
setSelectedFile(null);
|
||||
setUploadResult(null);
|
||||
if (fileInputRef.current) {
|
||||
fileInputRef.current.value = '';
|
||||
}
|
||||
};
|
||||
|
||||
// Close dialog
|
||||
const handleDialogClose = () => {
|
||||
setIsDialogOpen(false);
|
||||
resetDialog();
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button variant="outline" onClick={() => setIsDialogOpen(true)}>
|
||||
<Upload className="mr-2 h-4 w-4" />
|
||||
Upload Excel
|
||||
</Button>
|
||||
|
||||
<Dialog open={isDialogOpen} onOpenChange={handleDialogClose}>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Upload Data Dosen</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="space-y-4 py-4">
|
||||
{/* Instructions */}
|
||||
<div className="bg-blue-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium text-blue-900 mb-2">Petunjuk Upload:</h4>
|
||||
<ul className="text-sm text-blue-800 space-y-1">
|
||||
<li>• File harus berformat Excel (.xlsx, .xls) atau CSV (.csv)</li>
|
||||
<li>• Kolom yang diperlukan: <strong>nama_dosen</strong>, <strong>nip</strong></li>
|
||||
<li>• NIP harus terdiri dari 18 karakter</li>
|
||||
<li>• Jika NIP sudah ada, data akan diupdate</li>
|
||||
<li>• Baris pertama harus berisi header kolom</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
{/* File Input */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-medium">Pilih File:</label>
|
||||
<div className="flex items-center gap-2">
|
||||
<Input
|
||||
ref={fileInputRef}
|
||||
type="file"
|
||||
accept=".xlsx,.xls,.csv"
|
||||
onChange={handleFileSelect}
|
||||
className="flex-1"
|
||||
/>
|
||||
{selectedFile && (
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={resetDialog}
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
{selectedFile && (
|
||||
<div className="flex items-center gap-2 text-sm text-green-600">
|
||||
<FileText className="h-4 w-4" />
|
||||
<span>{selectedFile.name}</span>
|
||||
<span className="text-muted-foreground">
|
||||
({(selectedFile.size / 1024).toFixed(1)} KB)
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Upload Result */}
|
||||
{uploadResult && (
|
||||
<div className="space-y-3">
|
||||
<div className="bg-gray-50 p-4 rounded-lg">
|
||||
<h4 className="font-medium mb-2">Hasil Upload:</h4>
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div className="flex items-center gap-2 text-green-600">
|
||||
<CheckCircle className="h-4 w-4" />
|
||||
<span>Berhasil: {uploadResult.details.successCount}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-red-600">
|
||||
<AlertCircle className="h-4 w-4" />
|
||||
<span>Gagal: {uploadResult.details.failedCount}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-muted-foreground mt-2">
|
||||
Total baris: {uploadResult.details.totalRows}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Show errors if any */}
|
||||
{uploadResult.details.errors && uploadResult.details.errors.length > 0 && (
|
||||
<div className="bg-red-50 p-4 rounded-lg max-h-60 overflow-y-auto">
|
||||
<h5 className="font-medium text-red-900 mb-2">Error Details:</h5>
|
||||
<div className="space-y-1">
|
||||
{uploadResult.details.errors.slice(0, 10).map((error: string, index: number) => (
|
||||
<div key={index} className="text-sm text-red-800">
|
||||
{error}
|
||||
</div>
|
||||
))}
|
||||
{uploadResult.details.errors.length > 10 && (
|
||||
<div className="text-sm text-red-600 font-medium">
|
||||
... dan {uploadResult.details.errors.length - 10} error lainnya
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<DialogFooter>
|
||||
<DialogClose asChild>
|
||||
<Button type="button" variant="outline">
|
||||
Tutup
|
||||
</Button>
|
||||
</DialogClose>
|
||||
<Button
|
||||
onClick={handleUpload}
|
||||
disabled={!selectedFile || isUploading}
|
||||
>
|
||||
{isUploading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
|
||||
{isUploading ? "Uploading..." : "Upload"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</>
|
||||
);
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { ThemeToggle } from '@/components/theme-toggle';
|
||||
import { Menu, ChevronDown, BarChart, Database, CircleCheck, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User } from 'lucide-react';
|
||||
import { Menu, ChevronDown, BarChart, Database, CircleCheck, School, GraduationCap, Clock, BookOpen, Award, Home, LogOut, User, Users } from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Sheet, SheetContent, SheetTrigger } from '@/components/ui/sheet';
|
||||
import {
|
||||
@@ -194,6 +194,12 @@ const Navbar = () => {
|
||||
Prestasi
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
<DropdownMenuItem asChild>
|
||||
<Link href="/keloladata/dosen" className="flex items-center gap-2 w-full">
|
||||
<Users className="h-4 w-4" />
|
||||
Dosen
|
||||
</Link>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
</DropdownMenu>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user