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

Change update semester

Browse Source
This commit is contained in:
Randa Firman Putra
2025-08-21 00:13:35 +07:00
parent 04150b681d
commit f7a7359408
13 changed files with 667 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
app/api/keloladata/update-semester/route.ts
View File

@@ -42,22 +42,23 @@ export async function POST() {
}
// Calculate current semester based on tahun_angkatan and current date
const yearsSinceEnrollment = currentYear - tahunAngkatan;
let currentSemester = yearsSinceEnrollment * 2; // 2 semesters per year
const years = currentYear - tahunAngkatan;
let currentSemester: number;
// Adjust for current month (odd months = odd semesters, even months = even semesters)
if (currentMonth >= 2 && currentMonth <= 7) {
// February to July = odd semester (1, 3, 5, etc.)
currentSemester += 1;
if (currentMonth >= 8 && currentMonth <= 12) {
// Agustus–Desember: semester ganjil tahun akademik berjalan
currentSemester = years * 2 + 1;
} else if (currentMonth >= 2 && currentMonth <= 7) {
// Februari–Juli: semester genap tahun akademik berjalan
currentSemester = years * 2 + 2;
} else {
// August to January = even semester (2, 4, 6, etc.)
currentSemester += 2;
// Januari: masih semester ganjil dari T.A. sebelumnya
currentSemester = (years - 1) * 2 + 1;
}
// Cap at semester 14 (7 years)
if (currentSemester > 14) {
currentSemester = 14;
}
// Jaga batas
if (currentSemester < 1) currentSemester = 1;
if (currentSemester > 14) currentSemester = 14;
// Update semester if different
if (student.semester !== currentSemester) {

96
app/api/mahasiswa/kelompok-keahlian-status/route.ts Normal file
View File

@@ -0,0 +1,96 @@
import { NextResponse } from 'next/server';
import supabase from '@/lib/db';
interface KelompokKeahlianStatus {
tahun_angkatan: number;
status_kuliah: string;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
export async function GET(request: Request) {
const { searchParams } = new URL(request.url);
const tahunAngkatan = searchParams.get('tahun_angkatan');
const statusKuliah = searchParams.get('status_kuliah');
try {
let query = supabase
.from('mahasiswa')
.select('tahun_angkatan, status_kuliah, id_kelompok_keahlian, kelompok_keahlian!inner(id_kk, nama_kelompok)')
.eq('status_kuliah', statusKuliah);
if (tahunAngkatan && tahunAngkatan !== 'all') {
query = query.eq('tahun_angkatan', parseInt(tahunAngkatan));
}
const { data, error } = await query;
if (error) {
console.error('Error fetching kelompok keahlian status:', error);
return NextResponse.json(
{ error: 'Failed to fetch kelompok keahlian status data' },
{
status: 500,
headers: {
'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
}
);
}
// Group by tahun_angkatan, status_kuliah, nama_kelompok
const groupedData = data.reduce((acc, item: any) => {
const tahun_angkatan = item.tahun_angkatan;
const status_kuliah = item.status_kuliah;
const nama_kelompok = item.kelompok_keahlian?.nama_kelompok;
const key = `${tahun_angkatan}-${status_kuliah}-${nama_kelompok}`;
acc[key] = (acc[key] || 0) + 1;
return acc;
}, {} as Record<string, number>);
// Convert to final format and sort
const results: KelompokKeahlianStatus[] = Object.entries(groupedData)
.map(([key, jumlah_mahasiswa]) => {
const [tahun_angkatan, status_kuliah, nama_kelompok] = key.split('-');
return {
tahun_angkatan: parseInt(tahun_angkatan),
status_kuliah,
nama_kelompok,
jumlah_mahasiswa
};
})
.sort((a, b) => {
// Sort by tahun_angkatan ASC, nama_kelompok ASC
if (a.tahun_angkatan !== b.tahun_angkatan) {
return a.tahun_angkatan - b.tahun_angkatan;
}
return a.nama_kelompok.localeCompare(b.nama_kelompok);
});
return NextResponse.json(results, {
headers: {
'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
});
} catch (error) {
console.error('Error fetching kelompok keahlian status:', error);
return NextResponse.json(
{ error: 'Failed to fetch kelompok keahlian status data' },
{
status: 500,
headers: {
'Cache-Control': 'public, max-age=60, stale-while-revalidate=30',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, OPTIONS',
'Access-Control-Allow-Headers': 'Content-Type, Authorization',
},
}
);
}
}

147
app/visualisasi/dashboard/page.tsx Normal file
View File

@@ -0,0 +1,147 @@
'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 StatusMahasiswaChart from "@/components/charts/StatusMahasiswaChart";
export default function TotalMahasiswaPage() {
const [selectedYear, setSelectedYear] = useState<string>("all");
return (
<div className="p-4 bg-gray-50 dark:bg-[var(--background)] min-h-screen">
{/* Header */}
<div className="mb-4">
<div className="flex flex-col lg:flex-row justify-between items-start lg:items-center gap-4">
<div>
<h1 className="text-2xl font-bold text-gray-900 dark:text-white">
Dashboard Mahasiswa
</h1>
<p className="text-sm text-gray-600 dark:text-gray-300">
Data visualisasi mahasiswa per jenis pendaftaran, status, IPK, dan asal daerah
</p>
</div>
<div className="flex-shrink-0">
<FilterTahunAngkatan
selectedYear={selectedYear}
onYearChange={setSelectedYear}
/>
</div>
</div>
</div>
{selectedYear === "all" ? (
/* Layout untuk semua data */
<div className="space-y-4">
{/* Row 1: Main chart + Side chart */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{/* Statistik Mahasiswa - Large */}
<div className="lg:col-span-2">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Statistik Mahasiswa (Keseluruhan)
</h3>
<div style={{ height: '300px' }}>
<StatistikMahasiswaChart />
</div>
</div>
</div>
{/* Jenis Pendaftaran */}
<div className="lg:col-span-1">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Jenis Pendaftaran Mahasiswa
</h3>
<div style={{ height: '300px' }}>
<JenisPendaftaranChart />
</div>
</div>
</div>
</div>
{/* Row 2: Three equal charts */}
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{/* Status Mahasiswa */}
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Status Mahasiswa
</h3>
<div style={{ height: '250px' }}>
<StatusMahasiswaChart />
</div>
</div>
{/* IPK Chart */}
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Rata-rata IPK per Program Studi
</h3>
<div style={{ height: '250px' }}>
<IPKChart />
</div>
</div>
{/* Asal Daerah */}
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Distribusi Asal Daerah Mahasiswa
</h3>
<div style={{ height: '250px' }}>
<AsalDaerahChart />
</div>
</div>
</div>
</div>
) : (
/* Layout untuk data per angkatan */
<div className="space-y-4">
{/* Row 1: Main chart + Side chart */}
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
{/* Statistik Per Angkatan - Large */}
<div className="lg:col-span-2">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Statistik Mahasiswa Angkatan {selectedYear}
</h3>
<div style={{ height: '300px' }}>
<StatistikPerAngkatanChart tahunAngkatan={selectedYear} />
</div>
</div>
</div>
{/* Jenis Pendaftaran Per Angkatan */}
<div className="lg:col-span-1">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm h-full">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Jenis Pendaftaran Angkatan {selectedYear}
</h3>
<div style={{ height: '300px' }}>
<JenisPendaftaranPerAngkatanChart tahunAngkatan={selectedYear} />
</div>
</div>
</div>
</div>
{/* Row 2: Full width chart */}
<div className="grid grid-cols-1 gap-4">
<div className="bg-white dark:bg-slate-800 rounded-lg p-4 shadow-sm">
<h3 className="text-base font-medium text-gray-800 dark:text-gray-200 mb-3">
Asal Daerah Mahasiswa Angkatan {selectedYear}
</h3>
<div style={{ height: '250px' }}>
<AsalDaerahPerAngkatanChart tahunAngkatan={selectedYear} />
</div>
</div>
</div>
</div>
)}
</div>
);
}

0
app/visualisasi/tipekelulusan/page.tsx → app/visualisasi/lulustepatwaktu/page.tsx
View File

12
app/visualisasi/status/page.tsx
View File

@@ -11,6 +11,8 @@ import AsalDaerahStatusChart from '@/components/charts/AsalDaerahStatusChart';
import IpkStatusChart from '@/components/charts/IpkStatusChart';
import MasaStudiChart from '@/components/charts/MasaStudiChart';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import KelompokKeahlianStatusChart from "@/components/charts/KelompokKeahlianStatusChart";
import KelompokKeahlianStatusPieChart from "@/components/charts/KelompokKeahlianStatusPieChart";
export default function StatusMahasiswaPage() {
const [selectedYear, setSelectedYear] = useState<string>("all");
@@ -44,7 +46,7 @@ export default function StatusMahasiswaPage() {
{selectedYear === "all" ? (
<>
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
<StatusMahasiswaFilterChart
<StatusMahasiswaFilterChart
selectedYear={selectedYear}
selectedStatus={selectedStatus}
/>
@@ -56,6 +58,10 @@ export default function StatusMahasiswaPage() {
selectedYear={selectedYear}
selectedStatus={selectedStatus}
/>
<KelompokKeahlianStatusChart
selectedYear={selectedYear}
selectedStatus={selectedStatus}
/>
<IpkStatusChart
selectedYear={selectedYear}
selectedStatus={selectedStatus}
@@ -77,6 +83,10 @@ export default function StatusMahasiswaPage() {
selectedYear={selectedYear}
selectedStatus={selectedStatus}
/>
<KelompokKeahlianStatusPieChart
selectedYear={selectedYear}
selectedStatus={selectedStatus}
/>
<AsalDaerahStatusChart
selectedYear={selectedYear}
selectedStatus={selectedStatus}

6
components/charts/IPKLulusTepatChart.tsx
View File

@@ -51,7 +51,7 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
}
},
stroke: {
curve: 'smooth',
curve: 'straight',
width: 3,
lineCap: 'round'
},
@@ -322,13 +322,13 @@ export default function IPKLulusTepatChart({ selectedYear }: IPKLulusTepatChartP
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[400px] w-full max-w-5xl mx-auto">
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={options}
series={series}
type="line"
height="100%"
width="90%"
width="100%"
/>
</div>
</CardContent>

3
components/charts/JenisPendaftaranLulusPieChart.tsx
View File

@@ -169,9 +169,6 @@ export default function JenisPendaftaranLulusPieChart({ selectedYear }: Props) {
Jenis Pendaftaran Mahasiswa Lulus Tepat Waktu
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
<div className="text-lg font-semibold text-gray-600 dark:text-gray-300">
Total Mahasiswa: {totalMahasiswa}
</div>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-5xl mx-auto">

224
components/charts/KelompokKeahlianStatusChart.tsx Normal file
View File

@@ -0,0 +1,224 @@
'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";
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface KelompokKeahlianStatusData {
tahun_angkatan: number;
status_kuliah: string;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
interface Props {
selectedYear: string;
selectedStatus: string;
}
export default function KelompokKeahlianStatusChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(
`/api/mahasiswa/kelompok-keahlian-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
// Sort data by nama_kelompok
const sortedData = result.sort((a: KelompokKeahlianStatusData, b: KelompokKeahlianStatusData) =>
a.nama_kelompok.localeCompare(b.nama_kelompok)
);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear, selectedStatus]);
// Get unique tahun_angkatan (series)
const years = [...new Set(data.map(item => item.tahun_angkatan))].sort((a, b) => Number(a) - Number(b));
// Get unique kelompok keahlian (x axis)
const kelompokList = [...new Set(data.map(item => item.nama_kelompok))];
// Process data for series
const processSeriesData = () => {
return kelompokList.map(kelompok => {
const seriesData = years.map(tahun => {
const found = data.find(item => item.tahun_angkatan === tahun && item.nama_kelompok === kelompok);
return found ? found.jumlah_mahasiswa : 0;
});
return {
name: kelompok,
data: seriesData
};
});
};
const series = processSeriesData();
const chartOptions: ApexOptions = {
chart: {
type: 'bar',
stacked: true,
toolbar: {
show: true,
},
background: theme === 'dark' ? '#0F172B' : '#fff',
},
plotOptions: {
bar: {
horizontal: true,
columnWidth: '55%',
},
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return val.toString();
},
style: {
fontSize: '12px',
colors: [theme === 'dark' ? '#fff' : '#000']
}
},
stroke: {
show: true,
width: 2,
colors: ['transparent'],
},
xaxis: {
categories: years.map(y => y.toString()),
title: {
text: 'Tahun Angkatan',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
}
},
yaxis: {
title: {
text: 'Jumlah Mahasiswa',
style: {
fontSize: '14px',
fontWeight: 'bold',
color: theme === 'dark' ? '#fff' : '#000'
}
},
labels: {
style: {
fontSize: '12px',
colors: theme === 'dark' ? '#fff' : '#000'
}
},
},
fill: {
opacity: 1,
},
legend: {
position: 'top',
fontSize: '14px',
markers: {
size: 12,
},
itemMargin: {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + ' mahasiswa';
}
}
}
};
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">
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 yang tersedia
</CardTitle>
</CardHeader>
</Card>
);
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Mahasiswa {selectedStatus}
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[300px] md:h-[300px] w-full max-w-5xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="bar"
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

158
components/charts/KelompokKeahlianStatusPieChart.tsx Normal file
View File

@@ -0,0 +1,158 @@
'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";
const Chart = dynamic(() => import('react-apexcharts'), { ssr: false });
interface KelompokKeahlianStatusData {
tahun_angkatan: number;
status_kuliah: string;
nama_kelompok: string;
jumlah_mahasiswa: number;
}
interface Props {
selectedYear: string;
selectedStatus: string;
}
export default function KelompokKeahlianStatusPieChart({ selectedYear, selectedStatus }: Props) {
const { theme } = useTheme();
const [data, setData] = useState<KelompokKeahlianStatusData[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
const fetchData = async () => {
try {
setLoading(true);
const response = await fetch(
`/api/mahasiswa/kelompok-keahlian-status?tahun_angkatan=${selectedYear}&status_kuliah=${selectedStatus}`
);
if (!response.ok) {
throw new Error('Failed to fetch data');
}
const result = await response.json();
// Sort data by nama_kelompok
const sortedData = result.sort((a: KelompokKeahlianStatusData, b: KelompokKeahlianStatusData) =>
a.nama_kelompok.localeCompare(b.nama_kelompok)
);
setData(sortedData);
} catch (err) {
setError(err instanceof Error ? err.message : 'An error occurred');
} finally {
setLoading(false);
}
};
fetchData();
}, [selectedYear, selectedStatus]);
// Pie chart: label = nama_kelompok, value = jumlah_mahasiswa
const labels = data.map(item => item.nama_kelompok);
const series = data.map(item => item.jumlah_mahasiswa);
const chartOptions: ApexOptions = {
chart: {
type: 'pie',
background: theme === 'dark' ? '#0F172B' : '#fff',
},
labels,
legend: {
position: 'bottom',
fontSize: '14px',
markers: {
size: 12,
},
itemMargin: {
horizontal: 10,
},
labels: {
colors: theme === 'dark' ? '#fff' : '#000'
}
},
dataLabels: {
enabled: true,
formatter: function (val: number) {
return `${val.toFixed(0)}%`;
},
style: {
fontSize: '14px',
fontFamily: 'Inter, sans-serif',
fontWeight: '500'
},
},
tooltip: {
theme: theme === 'dark' ? 'dark' : 'light',
y: {
formatter: function (val: number) {
return val + ' mahasiswa';
}
}
},
colors: ['#008FFB', '#00E396', '#FEB019', '#FF4560', '#775DD0', '#8B5CF6', '#EC4899', '#06B6D4', '#F97316'],
};
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">
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 yang tersedia
</CardTitle>
</CardHeader>
</Card>
);
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Kelompok Keahlian Mahasiswa {selectedStatus}
{selectedYear !== 'all' ? ` Angkatan ${selectedYear}` : ''}
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] w-full max-w-3xl mx-auto">
{typeof window !== 'undefined' && (
<Chart
options={chartOptions}
series={series}
type="pie"
height="100%"
width="100%"
/>
)}
</div>
</CardContent>
</Card>
);
}

1
components/charts/LulusTepatWaktuPieChart.tsx
View File

@@ -109,7 +109,6 @@ export default function LulusTepatWaktuPieChart({ selectedYear }: Props) {
}
};
// Process data for series
const processSeriesData = () => {
const maleData = data.find(item => item.jk === 'Pria')?.jumlah_lulus_tepat_waktu || 0;
const femaleData = data.find(item => item.jk === 'Wanita')?.jumlah_lulus_tepat_waktu || 0;

9
components/charts/StatistikMahasiswaChart.tsx
View File

@@ -304,13 +304,6 @@ export default function StatistikMahasiswaChart() {
}
return (
<Card className="bg-white dark:bg-slate-900 shadow-lg">
<CardHeader>
<CardTitle className="text-xl font-bold dark:text-white">
Total Mahasiswa
</CardTitle>
</CardHeader>
<CardContent>
<div className="h-[300px] sm:h-[350px] md:h-[300px] w-full max-w-5xl mx-auto">
<Chart
options={chartOptions}
@@ -320,7 +313,5 @@ export default function StatistikMahasiswaChart() {
width="100%"
/>
</div>
</CardContent>
</Card>
);
}

10
components/datatable/data-table-mahasiswa.tsx
View File

@@ -489,6 +489,10 @@ export default function DataTableMahasiswa() {
<div className="flex flex-col sm:flex-row justify-between items-start sm:items-center gap-4">
<h2 className="text-2xl font-bold">Data Mahasiswa</h2>
<div className="flex flex-col sm:flex-row gap-2">
<Button onClick={handleAdd}>
<PlusCircle className="mr-2 h-4 w-4" />
Tambah Mahasiswa
</Button>
<Button
variant="outline"
onClick={handleUpdateSemester}
@@ -501,10 +505,6 @@ export default function DataTableMahasiswa() {
)}
Update Semester Mahasiswa Aktif
</Button>
<Button onClick={handleAdd}>
<PlusCircle className="mr-2 h-4 w-4" />
Tambah Mahasiswa
</Button>
<EditJenisPendaftaran onUpdateSuccess={fetchMahasiswa} />
<UploadExcelMahasiswa onUploadSuccess={fetchMahasiswa} />
</div>
@@ -865,7 +865,7 @@ export default function DataTableMahasiswa() {
<SelectItem value="Aktif">Aktif</SelectItem>
<SelectItem value="Cuti">Cuti</SelectItem>
<SelectItem value="Lulus">Lulus</SelectItem>
<SelectItem value="DO">DO</SelectItem>
<SelectItem value="Non-Aktif">Non-Aktif</SelectItem>
</SelectContent>
</Select>
</div>

14
components/ui/Navbar.tsx
View File

@@ -119,6 +119,12 @@ const Navbar = () => {
</Button>
</DropdownMenuTrigger>
<DropdownMenuContent align="center" className="w-48">
<DropdownMenuItem asChild>
<Link href="/visualisasi/dashboard" className="flex items-center gap-2 w-full">
<GraduationCap className="h-4 w-4" />
Dashboard Mahasiswa
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/visualisasi/mahasiswa" className="flex items-center gap-2 w-full">
<GraduationCap className="h-4 w-4" />
@@ -132,9 +138,9 @@ const Navbar = () => {
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
<Link href="/visualisasi/tipekelulusan" className="flex items-center gap-2 w-full">
<Link href="/visualisasi/lulustepatwaktu" className="flex items-center gap-2 w-full">
<Clock className="h-4 w-4" />
Tipe Kelulusan
Lulus Tepat Waktu
</Link>
</DropdownMenuItem>
<DropdownMenuItem asChild>
@@ -266,9 +272,9 @@ const MobileNavContent = ({ user, onLogout }: MobileNavContentProps) => {
<CircleCheck className="h-4 w-4" />
Status Kuliah
</Link>
<Link href="/visualisasi/tipekelulusan" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
<Link href="/visualisasi/lulustepatwaktu" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
<Clock className="h-4 w-4" />
Tipe Kelulusan
Lulus Tepat Waktu
</Link>
<Link href="/visualisasi/beasiswa" className="flex items-center gap-2 px-3 py-2 text-sm hover:bg-accent hover:text-accent-foreground rounded-md transition-colors">
<BookOpen className="h-4 w-4" />