256 lines
15 KiB
PHP
256 lines
15 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>ASGARD - Dashboard Siswa</title>
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&display=swap" rel="stylesheet">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<style>
|
|
body { font-family: 'Plus Jakarta Sans', sans-serif; background-color: #f8fafc; }
|
|
.card-shadow { box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.02); }
|
|
</style>
|
|
</head>
|
|
<body class="flex flex-col min-h-screen">
|
|
|
|
<nav class="bg-white border-b border-slate-100 px-6 py-4 mb-10">
|
|
<div class="max-w-7xl mx-auto flex justify-between items-center">
|
|
<div class="flex items-center gap-4">
|
|
<div class="w-10 h-10 bg-emerald-100 rounded-xl flex items-center justify-center text-emerald-600 font-bold">AS</div>
|
|
<span class="font-black text-xl tracking-tighter text-emerald-950 uppercase italic">ASGARD.</span>
|
|
</div>
|
|
<div class="flex items-center gap-8">
|
|
<div class="hidden md:flex gap-8 text-[11px] font-bold uppercase tracking-widest text-slate-400">
|
|
<a href="{{ route('student.profile') }}" class="text-emerald-600">Beranda</a>
|
|
<a href="{{ route('student.prediction') }}" class="hover:text-emerald-600 transition">Cek Rekomendasi</a>
|
|
<a href="#" class="hover:text-emerald-600 transition">Kontak BK</a>
|
|
</div>
|
|
<div class="flex items-center gap-3">
|
|
<div class="flex items-center gap-3 bg-emerald-50 px-4 py-2 rounded-full border border-emerald-100">
|
|
<div class="w-2 h-2 bg-emerald-500 rounded-full animate-pulse"></div>
|
|
<span class="text-[10px] font-bold text-emerald-700 uppercase">Galang Sefian</span>
|
|
</div>
|
|
<button onclick="handleLogout()" class="bg-red-50 hover:bg-red-100 text-red-600 border border-red-100 px-4 py-2 rounded-full transition-all">
|
|
<span class="text-[10px] font-bold uppercase tracking-widest">Logout</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<div class="max-w-7xl mx-auto px-6 flex-grow mb-20">
|
|
<header class="mb-10">
|
|
<h1 class="text-4xl font-extrabold text-slate-900 tracking-tight">Halo, Siswa SMAPA! 👋</h1>
|
|
<p class="text-slate-500 font-medium mt-2">Senang melihat Anda kembali! Mari terus pantau masa depan Anda. ✨</p>
|
|
</header>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-10">
|
|
<div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
|
|
<h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Total Aktivitas Rekomendasi</h4>
|
|
<p id="stat-total" class="text-6xl font-black text-emerald-600 tracking-tighter">0</p>
|
|
<p class="text-[11px] text-slate-400 mt-6 font-medium leading-relaxed">Jumlah total diagnosis & prediksi jurusan kuliah kamu.</p>
|
|
</div>
|
|
<div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
|
|
<h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Rekomendasi Terakhir</h4>
|
|
<p id="stat-last" class="text-sm font-bold text-slate-700 italic leading-relaxed">Memuat data...</p>
|
|
</div>
|
|
<div class="bg-white p-8 rounded-3xl card-shadow border border-slate-100">
|
|
<h4 class="text-slate-400 text-xs font-bold uppercase tracking-widest mb-4">Aktivitas Terbaru</h4>
|
|
<div id="activity-list" class="space-y-3 py-2">
|
|
<p class="text-xs text-slate-300 italic">Belum ada aktivitas baru.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-10 rounded-[2.5rem] card-shadow border border-slate-100 mb-10">
|
|
<h3 class="text-lg font-black text-emerald-950 mb-8 uppercase italic tracking-wider">Akses Cepat</h3>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<a href="{{ route('student.prediction') }}" class="flex items-center p-6 bg-blue-50 rounded-2xl border border-blue-100 hover:scale-[1.02] transition-all">
|
|
<div class="w-12 h-12 bg-blue-500 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-blue-200">🤖</div>
|
|
<div>
|
|
<h4 class="font-black text-blue-900 text-sm italic">Mulai Analisis Jurusan Baru</h4>
|
|
<p class="text-[10px] text-blue-600 font-bold mt-1">Dapatkan Rekomendasi AI Sekarang.</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="flex items-center p-6 bg-yellow-50 rounded-2xl border border-yellow-100 hover:scale-[1.02] transition-all">
|
|
<div class="w-12 h-12 bg-yellow-400 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-yellow-200">📊</div>
|
|
<div>
|
|
<h4 class="font-black text-yellow-900 text-sm italic">Lengkapi Data Rapor</h4>
|
|
<p class="text-[10px] text-yellow-700 font-bold mt-1">Input variabel nilai semester 1-5.</p>
|
|
</div>
|
|
</a>
|
|
<a href="#" class="flex items-center p-6 bg-purple-50 rounded-2xl border border-purple-100 hover:scale-[1.02] transition-all">
|
|
<div class="w-12 h-12 bg-purple-500 text-white rounded-xl flex items-center justify-center text-xl mr-5 shadow-lg shadow-purple-200">🎓</div>
|
|
<div>
|
|
<h4 class="font-black text-purple-900 text-sm italic">Riwayat Rekomendasi</h4>
|
|
<p class="text-[10px] text-purple-600 font-bold mt-1">Pantau progres pilihan kuliah.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="bg-white p-10 rounded-[2.5rem] card-shadow border border-slate-100 mb-10">
|
|
<h3 class="text-lg font-black text-emerald-950 mb-2 uppercase italic tracking-wider">Tren Prestasi Akademik Anda</h3>
|
|
<p class="text-xs text-slate-400 font-medium italic mb-10">Grafik ini menunjukkan perkembangan rata-rata nilai Anda seiring waktu.</p>
|
|
<div id="chart-container" class="h-80 w-full">
|
|
<canvas id="trendChart"></canvas>
|
|
</div>
|
|
<p id="chart-placeholder" class="hidden text-center text-slate-400 italic text-sm py-20">Input minimal 2 sesi rekomendasi untuk melihat tren di sini.</p>
|
|
</div>
|
|
|
|
<div class="bg-indigo-600 p-12 rounded-[3.5rem] text-white relative overflow-hidden shadow-2xl mb-16">
|
|
<div class="relative z-10">
|
|
<div class="flex items-center gap-3 mb-8">
|
|
<span class="text-3xl">🎓</span>
|
|
<h2 class="text-3xl font-black italic tracking-tighter uppercase leading-none">Masa Depan Anda Prioritas Kami</h2>
|
|
</div>
|
|
<p class="text-indigo-100 max-w-3xl mb-12 leading-relaxed font-medium">
|
|
Tahukah kamu? <span class="font-black text-white italic underline">87% mahasiswa merasa salah jurusan</span>. ASGARD hadir membantu siswa SMAN 4 Jember menghindari risiko tersebut melalui analisis profil yang objektif menggunakan Random Forest.
|
|
</p>
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
|
<div class="bg-white/10 backdrop-blur-md p-8 rounded-[2rem] border border-white/20">
|
|
<h4 class="font-black text-sm uppercase italic mb-3 tracking-widest">Anti-Blacklist SNBP</h4>
|
|
<p class="text-xs text-indigo-100 leading-relaxed italic">Hindari risiko sekolah masuk blacklist perguruan tinggi karena pembatalan kelulusan.</p>
|
|
</div>
|
|
<div class="bg-white/10 backdrop-blur-md p-8 rounded-[2rem] border border-white/20">
|
|
<h4 class="font-black text-sm uppercase italic mb-3 tracking-widest">Prospek Karir AI</h4>
|
|
<p class="text-xs text-indigo-100 leading-relaxed italic">Dapatkan informasi jalur karir yang dapat ditempuh sesuai rekomendasi jurusan.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p class="mt-12 text-center text-[10px] font-black uppercase tracking-[0.2em] italic opacity-80 border-t border-white/10 pt-8 text-white">Penting untuk berkonsultasi dengan Guru BK setelah mendapatkan hasil rekomendasi AI ❤️</p>
|
|
</div>
|
|
</div>
|
|
|
|
<footer class="bg-[#062C22] text-white py-16 px-6">
|
|
<div class="max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-3 gap-12">
|
|
<div class="space-y-6">
|
|
<div class="flex items-center gap-4">
|
|
<span class="font-black text-2xl tracking-tighter uppercase italic">ASGARD.</span>
|
|
</div>
|
|
<p class="text-slate-300 text-sm leading-relaxed max-w-xs">
|
|
Sistem pakar rekomendasi jurusan kuliah SMAN 4 Jember berbasis data-driven.
|
|
</p>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6">Informasi</h5>
|
|
<ul class="space-y-4 text-sm text-slate-300">
|
|
<li><a href="{{ route('panduan') }}" class="hover:text-white transition">Panduan Sistem</a></li>
|
|
<li><a href="#" class="hover:text-white transition">Kebijakan Privasi</a></li>
|
|
</ul>
|
|
</div>
|
|
<div>
|
|
<h5 class="font-bold text-xs uppercase tracking-widest text-emerald-400 mb-6">Sekolah</h5>
|
|
<ul class="space-y-4 text-sm text-slate-300">
|
|
<li>SMAN 4 Jember</li>
|
|
<li>Jl. Wolter Monginsidi No.24</li>
|
|
<li>Jember, Jawa Timur</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="max-w-7xl mx-auto mt-16 pt-8 border-t border-white/10 text-center">
|
|
<p class="text-[10px] font-medium uppercase tracking-[0.5em] text-slate-400">© 2026 GALANG SEFIAN ADJI - POLITEKNIK NEGERI JEMBER</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
async function handleLogout() {
|
|
const token = localStorage.getItem('access_token');
|
|
if (token) {
|
|
try {
|
|
await fetch('/api/logout', {
|
|
method: 'POST',
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
} catch (error) {
|
|
console.error('Logout error:', error);
|
|
}
|
|
localStorage.removeItem('access_token');
|
|
}
|
|
window.location.href = '/';
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', async function() {
|
|
const token = localStorage.getItem('access_token');
|
|
if (!token) {
|
|
window.location.href = '/login';
|
|
return;
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/student/dashboard-stats', {
|
|
headers: {
|
|
'Authorization': `Bearer ${token}`,
|
|
'Accept': 'application/json'
|
|
}
|
|
});
|
|
|
|
const result = await response.json();
|
|
if (result.success) {
|
|
const data = result.data;
|
|
|
|
// Update Statistik
|
|
document.getElementById('stat-total').innerText = data.total_aktivitas;
|
|
document.getElementById('stat-last').innerText = data.rekomendasi_terakhir;
|
|
|
|
// Update List Aktivitas
|
|
const listContainer = document.getElementById('activity-list');
|
|
if (data.aktivitas_terbaru.length > 0) {
|
|
listContainer.innerHTML = data.aktivitas_terbaru.map(act => `
|
|
<div class="flex items-center justify-between bg-slate-50 p-3 rounded-xl border border-slate-100">
|
|
<div class="flex items-center gap-3">
|
|
<span class="text-lg">📋</span>
|
|
<span class="text-[11px] font-bold text-slate-700 uppercase tracking-tight">${act.jurusan}</span>
|
|
</div>
|
|
<span class="text-[9px] font-black text-slate-400 uppercase italic">${act.tanggal}</span>
|
|
</div>
|
|
`).join('');
|
|
}
|
|
|
|
// Render Chart
|
|
const tren = data.tren_nilai;
|
|
if (tren.length >= 1) {
|
|
const ctx = document.getElementById('trendChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: tren.map(t => t.label),
|
|
datasets: [{
|
|
label: 'Rata-rata Nilai',
|
|
data: tren.map(t => t.nilai),
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.1)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointRadius: 6,
|
|
pointBackgroundColor: '#fff',
|
|
pointBorderColor: '#10b981',
|
|
pointBorderWidth: 3
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: {
|
|
y: { min: 0, max: 100, grid: { display: false } },
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
} else {
|
|
document.getElementById('trendChart').classList.add('hidden');
|
|
document.getElementById('chart-placeholder').classList.remove('hidden');
|
|
}
|
|
}
|
|
} catch (error) {
|
|
console.error('Gagal memuat data dashboard:', error);
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |