90 lines
2.2 KiB
PHP
90 lines
2.2 KiB
PHP
|
|
@extends('layouts.anggota')
|
|
|
|
@section('content')
|
|
<!DOCTYPE html>
|
|
<html lang="id">
|
|
<head>
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
body {
|
|
background: url('{{ asset("images/bg2.jpg") }}') no-repeat center center fixed;
|
|
background-size: cover;
|
|
font-family: 'Inter', sans-serif;
|
|
backdrop-filter: blur(5px);
|
|
margin: 0;
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.85);
|
|
border-radius: 16px;
|
|
box-shadow: 0 8px 30px rgba(0,0,0,0.2);
|
|
padding: 30px;
|
|
margin-top: 30px;
|
|
}
|
|
|
|
.navbar-custom {
|
|
background: rgba(13, 71, 161, 0.95);
|
|
backdrop-filter: blur(6px);
|
|
}
|
|
|
|
.navbar-custom .nav-link {
|
|
color: #fff !important;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.navbar-custom .nav-link:hover {
|
|
color: #ffeb3b !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
|
|
<div class="container glass">
|
|
<h3 class="fw-bold mb-4 text-center text-primary">
|
|
<i class="bi bi-bar-chart-line"></i> Statistik & Laporan
|
|
</h3>
|
|
|
|
<div class="row text-center mb-4">
|
|
<div class="col-md-3"><h6>Total Koleksi</h6><h4>{{ $totalBuku }}</h4></div>
|
|
<div class="col-md-3"><h6>Total Anggota</h6><h4>{{ $totalAnggota }}</h4></div>
|
|
<div class="col-md-3"><h6>Peminjaman</h6><h4>{{ $totalPeminjaman }}</h4></div>
|
|
<div class="col-md-3"><h6>Pengembalian</h6><h4>{{ $totalPengembalian }}</h4></div>
|
|
</div>
|
|
|
|
<canvas id="chartPeminjaman" height="120"></canvas>
|
|
</div>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('chartPeminjaman').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: {!! json_encode($bulanLabels) !!},
|
|
datasets: [{
|
|
label: 'Jumlah Peminjaman per Bulan',
|
|
data: {!! json_encode($dataPeminjaman) !!},
|
|
backgroundColor: 'rgba(13, 71, 161, 0.6)',
|
|
borderColor: '#0d47a1',
|
|
borderWidth: 1
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
scales: {
|
|
y: { beginAtZero: true }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|
|
@endsection
|
|
|