88 lines
3.0 KiB
PHP
88 lines
3.0 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('content')
|
|
<div class="p-4" style="min-height: 80vh; background: linear-gradient(to right, #6eb7e7ff, #cedff3ff);">
|
|
<div class="container mt-5">
|
|
<div class="card shadow-lg" style="background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); border-radius: 16px; color: white;">
|
|
<div class="card-body">
|
|
<h1 class="card-title h4 font-weight-bold mb-2">👋 Selamat datang, {{ Auth::user()->name }}!</h1>
|
|
<p class="card-text">Kamu berhasil login ke aplikasi Data Siswa 🎉</p>
|
|
|
|
<div class="row mt-4">
|
|
<!-- Kotak Data Siswa -->
|
|
<div class="col-md-4 col-sm-12 mb-3">
|
|
<a href="{{ route('siswa.index') }}" class="text-decoration-none">
|
|
<div class="card shadow-sm h-100" style="background-color: #3a8cf7ff; color: #ffffffff;">
|
|
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
|
|
<i class="fas fa-user-graduate fa-4x mb-3" style="color: #ffffffff;"></i>
|
|
<h5 class="card-title">2 Siswa</h5>
|
|
<p class="m-0">View Details</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<!-- Kotak Data Kelas -->
|
|
<div class="col-md-4 col-sm-12 mb-3">
|
|
<a href="{{ route('kelas.index') }}" class="text-decoration-none">
|
|
<div class="card shadow-sm h-100" style="background-color: #3a8cf7ff; color: #ffffffff;">
|
|
<div class="card-body text-center d-flex flex-column justify-content-center align-items-center">
|
|
<i class="fas fa-school fa-4x mb-3" style="color: #ffffffff;"></i>
|
|
<h5 class="card-title">4 Kelas</h5>
|
|
<p class="m-0">View Details</p>
|
|
</div>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
|
|
<!-- Grafik Statistik Pengguna -->
|
|
<div class="col-md-8 col-sm-12 mb-3">
|
|
<div class="card bg-white text-dark shadow-sm h-100">
|
|
<div class="card-body">
|
|
<h5 class="mb-3">Statistik Pengguna</h5>
|
|
<canvas id="userChart" height="100"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.card:hover {
|
|
transform: scale(1.03);
|
|
transition: 0.3s ease-in-out;
|
|
}
|
|
</style>
|
|
|
|
<!-- Chart.js CDN -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('userChart').getContext('2d');
|
|
const userChart = new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Siswa', 'Kelas'],
|
|
datasets: [{
|
|
label: 'Jumlah Data',
|
|
data: [2, 4],
|
|
backgroundColor: ['#007bff', '#28a745', '#dc3545'],
|
|
borderRadius: 5
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: { display: false }
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endsection
|