186 lines
9.3 KiB
PHP
186 lines
9.3 KiB
PHP
<x-app-layout>
|
|
@section('page-title', $pageTitle)
|
|
|
|
<div class="container-fluid px-1 px-md-3">
|
|
<div class="row g-3 g-md-4 flex-wrap">
|
|
{{-- ========================= --}}
|
|
{{-- KOLOM KIRI (KONTEN UTAMA) --}}
|
|
{{-- ========================= --}}
|
|
<div class="col-12 col-lg-8 d-flex flex-column gap-3 gap-md-4">
|
|
{{-- Grafik Aktivitas Membaca --}}
|
|
<div class="card shadow-sm border-0 rounded-4 p-3">
|
|
<div class="card-header bg-white border-0 pb-0">
|
|
<p class="fw-semibold mb-2 text-primary">
|
|
<i class="bi bi-graph-up me-2"></i>Grafik Aktivitas Membaca (7 Hari Terakhir)
|
|
</p>
|
|
</div>
|
|
<div class="card-body pt-3 pb-2">
|
|
<div class="chart-container chart-responsive">
|
|
<canvas id="lineChart" data-stats='@json($aktivitasMingguan)'></canvas>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-3 g-md-4">
|
|
|
|
{{-- BUKU TERPOPULER --}}
|
|
<div class="col-12 col-md-6">
|
|
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
|
|
<div class="card-header bg-white border-0 pb-0">
|
|
<p class="fw-semibold mb-2 text-warning">
|
|
<i class="bi bi-trophy-fill me-2"></i>Buku Terpopuler
|
|
</p>
|
|
</div>
|
|
<div class="card-body pt-2">
|
|
<div class="list-group list-group-flush">
|
|
@foreach ($laporan['buku_terpopuler'] as $buku)
|
|
<div
|
|
class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 hover-bg-light my-1">
|
|
<img src="{{ asset($buku['cover']) }}" class="rounded shadow-sm"
|
|
width="48" alt="Cover">
|
|
<div class="flex-grow-1">
|
|
<div class="fw-semibold small text-truncate">{{ $buku['judul'] }}</div>
|
|
</div>
|
|
<span class="badge bg-primary-subtle text-primary rounded-pill px-3">
|
|
{{ $buku['total_pembaca'] }}
|
|
</span>
|
|
</div>
|
|
@if (!$loop->last)
|
|
<hr class="my-0">
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KATEGORI PALING DIMINATI --}}
|
|
<div class="col-12 col-md-6">
|
|
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
|
|
<div class="card-header bg-white border-0 pb-0">
|
|
<p class="fw-semibold mb-2 text-info">
|
|
<i class="bi bi-tags-fill me-2"></i>Kategori Paling Diminati
|
|
</p>
|
|
</div>
|
|
<div class="card-body pt-2">
|
|
<div class="list-group list-group-flush">
|
|
@foreach ($laporan['kategori_populer'] as $kategori)
|
|
<div
|
|
class="list-group-item d-flex justify-content-between align-items-center px-0 border-0 py-2 hover-bg-light my-1">
|
|
<span class="small d-flex align-items-center">
|
|
<i
|
|
class="bi {{ $kategori['icon'] }} me-2
|
|
@if ($kategori['trend'] == 'naik') text-success
|
|
@elseif($kategori['trend'] == 'turun') text-danger @endif"></i>
|
|
{{ $kategori['nama'] }}
|
|
</span>
|
|
<span class="badge bg-info-subtle text-info rounded-pill px-3">
|
|
{{ $kategori['total_pembaca'] }}
|
|
</span>
|
|
</div>
|
|
@if (!$loop->last)
|
|
<hr class="my-0">
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ========================= --}}
|
|
{{-- KOLOM KANAN {SISWA AKTIF} --}}
|
|
{{-- ========================= --}}
|
|
<div class="col-12 col-lg-4">
|
|
<div class="card shadow-sm border-0 rounded-4 p-3 h-100">
|
|
<div class="card-header bg-white border-0 pb-0">
|
|
<p class="fw-semibold mb-2 text-success">
|
|
<i class="bi bi-person-check-fill me-2"></i>Siswa Paling Aktif
|
|
</p>
|
|
</div>
|
|
<div class="card-body pt-2">
|
|
@foreach ($siswaTeraktif as $siswa)
|
|
<div
|
|
class="list-group-item d-flex align-items-center gap-3 px-0 border-0 py-2 my-1 hover-bg-light">
|
|
<img src="https://ui-avatars.com/api/?name={{ urlencode($siswa['nama']) }}&background=random"
|
|
class="rounded-circle shadow-sm" width="42" height="42" alt="Avatar">
|
|
<div class="flex-grow-1">
|
|
<div class="fw-semibold">{{ $siswa['nama'] }}</div>
|
|
<small class="text-muted">{{ $siswa['kelas'] }}</small>
|
|
</div>
|
|
<span class="badge bg-success-subtle text-success rounded-pill px-3">
|
|
{{ $siswa['total_buku'] }}
|
|
</span>
|
|
</div>
|
|
@if (!$loop->last)
|
|
<hr class="my-0">
|
|
@endif
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- ========================= --}}
|
|
{{-- SCRIPT CHART.JS --}}
|
|
{{-- ========================= --}}
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.myLineChart) window.myLineChart.destroy();
|
|
|
|
const lineCanvas = document.getElementById('lineChart');
|
|
if (lineCanvas) {
|
|
const lineData = JSON.parse(lineCanvas.dataset.stats);
|
|
window.myLineChart = new Chart(lineCanvas, {
|
|
type: 'line',
|
|
data: {
|
|
labels: lineData.labels,
|
|
datasets: [{
|
|
label: 'Aktivitas Baca',
|
|
data: lineData.data,
|
|
fill: true,
|
|
backgroundColor: 'rgba(67, 94, 190, 0.1)',
|
|
borderColor: '#435ebe',
|
|
borderWidth: 2,
|
|
tension: 0.35,
|
|
pointRadius: 4,
|
|
pointBackgroundColor: '#435ebe'
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: '#f0f0f0'
|
|
},
|
|
ticks: {
|
|
stepSize: 5
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout>
|