172 lines
8.6 KiB
PHP
172 lines
8.6 KiB
PHP
<x-app-layout>
|
|
@section('page-title', 'Dashboard Admin')
|
|
|
|
<div class="mb-4">
|
|
<h3>Selamat Datang, {{ $user->nama_lengkap }}!</h3>
|
|
<p class="text-muted">Berikut adalah ringkasan aktivitas perpustakaan hari ini.</p>
|
|
</div>
|
|
|
|
{{-- Kartu Statistik --}}
|
|
<div class="row g-4 mb-4">
|
|
@foreach ($stats as $stat)
|
|
<div class="col-xl-3 col-lg-6 col-md-6">
|
|
<div class="card rounded-2 bg-{{ $stat['color'] }}-light border-0 h-100">
|
|
<div class="card-body p-4">
|
|
<div class="d-flex justify-content-between align-items-start">
|
|
<div class="flex-grow-1">
|
|
<h6 class="text-muted fw-normal mb-2 text-uppercase small">{{ $stat['label'] }}</h6>
|
|
<h3 class="fw-bold mb-0 text-dark">{{ $stat['value'] }}</h3>
|
|
</div>
|
|
<div class="icon-wrapper">
|
|
<div class="icon-circle bg-{{ $stat['color'] }}-light">
|
|
<i class="bi {{ $stat['icon'] }} text-{{ $stat['color'] }} fs-4"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-lg-7">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<h6 class="m-0 fw-bold text-dark"><i class="bi bi-bar-chart-fill text-primary me-2"></i>Total Peminjaman per Bulan</h6>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<canvas id="barChart" style="max-height: 300px;" data-stats='@json($statistikBulanan)'></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-5">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-0 py-3">
|
|
<h6 class="m-0 fw-bold text-dark"><i class="bi bi-pie-chart-fill text-primary me-2"></i>Komposisi Status Buku</h6>
|
|
</div>
|
|
<div class="card-body text-center d-flex justify-content-center align-items-center p-4">
|
|
<div style="position: relative; height: 200px; width: 200px;">
|
|
<canvas id="donutChartAdmin" data-progress='@json($komposisiBuku)'></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="text-center py-3 border-top">
|
|
<div class="d-flex justify-content-center gap-4">
|
|
<span class="badge bg-success-soft text-success px-3 py-2"><i class="bi bi-circle-fill me-1"></i> Tersedia</span>
|
|
<span class="badge bg-warning-soft text-warning px-3 py-2"><i class="bi bi-circle-fill me-1"></i> Dipinjam</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
|
|
<h6 class="m-0 fw-bold text-dark"><i class="bi bi-megaphone-fill text-warning me-2"></i>Pengumuman</h6>
|
|
<a href="{{ route('admin.pengumuman.index') }}" class="btn btn-sm btn-outline-primary rounded-pill px-3">
|
|
Kelola Semua
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
@forelse(collect($pengumuman)->take(2) as $item)
|
|
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm">
|
|
<i class="{{ $item['icon'] }} fs-5 me-3 mt-1"></i>
|
|
<div>
|
|
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
|
|
<div class="small">{{ $item['content'] }}</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center py-4"><i class="bi bi-inbox text-muted fs-2 mb-3"></i><p class="text-muted mb-0">Tidak ada pengumuman baru.</p></div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-lg-6">
|
|
<div class="card border-0 shadow-sm h-100">
|
|
<div class="card-header bg-white border-0 d-flex justify-content-between align-items-center py-3">
|
|
<h6 class="m-0 fw-bold text-dark"><i class="bi bi-bell-fill text-info me-2"></i>Aktivitas Peminjaman Terkini</h6>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover mb-0">
|
|
<tbody>
|
|
@forelse($aktivitasTerakhir as $aktivitas)
|
|
<tr>
|
|
<td class="ps-4 py-3">
|
|
<div class="fw-semibold text-dark">{{ $aktivitas['nama'] }}</div>
|
|
<div class="text-muted small truncate-text" style="max-width: 200px;">{{ $aktivitas['tipe'] }} buku "{{ $aktivitas['judul_buku'] }}"</div>
|
|
</td>
|
|
<td class="text-end pe-4 py-3">
|
|
@if($aktivitas['status'] == 'Dikembalikan' || $aktivitas['status'] == 'Selesai')
|
|
<span class="badge bg-success-subtle text-success-emphasis">{{$aktivitas['status']}}</span>
|
|
@else
|
|
<span class="badge bg-warning-subtle text-warning-emphasis">{{$aktivitas['status']}}</span>
|
|
@endif
|
|
<div class="text-muted small mt-1">{{ $aktivitas['waktu'] }}</div>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr><td class="text-center py-5"><p class="text-muted">Tidak ada aktivitas terkini.</p></td></tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Script untuk menginisialisasi chart di dashboard admin
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
if (window.myBarChart) window.myBarChart.destroy();
|
|
if (window.myDonutChart) window.myDonutChart.destroy();
|
|
|
|
// Bar Chart
|
|
const barCtx = document.getElementById('barChart');
|
|
if (barCtx) {
|
|
const barData = JSON.parse(barCtx.dataset.stats);
|
|
window.myBarChart = new Chart(barCtx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: barData.labels,
|
|
datasets: [{
|
|
label: 'Jumlah Peminjaman',
|
|
data: barData.data,
|
|
backgroundColor: 'rgba(67, 94, 190, 0.7)',
|
|
borderColor: 'rgba(67, 94, 190, 1)',
|
|
borderWidth: 1,
|
|
borderRadius: 5
|
|
}]
|
|
},
|
|
options: { scales: { y: { beginAtZero: true } }, responsive: true, maintainAspectRatio: false }
|
|
});
|
|
}
|
|
|
|
// Donut Chart
|
|
const donutCtx = document.getElementById('donutChartAdmin');
|
|
if (donutCtx) {
|
|
const donutData = JSON.parse(donutCtx.dataset.progress);
|
|
window.myDonutChart = new Chart(donutCtx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Tersedia', 'Dipinjam'],
|
|
datasets: [{
|
|
data: [donutData.tersedia, donutData.dipinjam],
|
|
backgroundColor: ['#198754', '#ffc107'],
|
|
borderWidth: 0,
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false, cutout: '75%' }
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|
|
</x-app-layout> |