d1041211043_randa/portaldata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add Kelola Data

Browse Source
This commit is contained in:
Randa Firman Putra
2025-07-15 14:46:34 +07:00
parent 833b307602
commit 4585f6a346
28 changed files with 2251 additions and 887 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
app/api/keloladata/data-beasiswa-mahasiswa/route.ts
View File

@@ -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);

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

@@ -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 };
}

9
app/dashboard/layout.tsx
View File

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

94
app/dashboard/mahasiswa/beasiswa/page.tsx
View File

@@ -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>
);
}

80
app/dashboard/mahasiswa/berprestasi/page.tsx
View File

@@ -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>
);
}

61
app/dashboard/mahasiswa/lulustepatwaktu/page.tsx
View File

@@ -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>
);
}

11
app/dashboard/mahasiswa/profile/page.tsx
View File

@@ -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>
);
}

86
app/dashboard/mahasiswa/status/page.tsx
View File

@@ -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>
);
}

59
app/dashboard/mahasiswa/total/page.tsx
View File

@@ -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>
);
}

238
app/dashboard/page.tsx
View File

@@ -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>
);
}

6
app/keloladata/beasiswa/page.tsx
View File

@@ -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">
<h1>Beasiswa</h1>
<div className="container mx-auto p-4 space-y-6">
<DataTableBeasiswaMahasiswa />
</div>
);
}

6
app/keloladata/prestasi/page.tsx
View File

@@ -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">
<h1>Prestasi</h1>
<div className="container mx-auto p-4 space-y-6">
<DataTablePrestasiMahasiswa />
</div>
);
}

5
app/layout.tsx
View File

@@ -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>
);

8
app/page.tsx
View File

@@ -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">