398 lines
17 KiB
PHP
398 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="id">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Dashboard - Pustaka Nawasena</title>
|
|
<link rel="icon" href="{{ asset('images/pustaka.jpeg') }}" type="image/png">
|
|
|
|
<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">
|
|
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap" rel="stylesheet">
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<style>
|
|
:root {
|
|
--primary-color: #0d47a1;
|
|
--secondary-color: #ffb300;
|
|
}
|
|
|
|
body {
|
|
font-family: 'Inter', sans-serif;
|
|
background: url('{{ asset("images/utama.jpg") }}') no-repeat center center fixed;
|
|
background-size: cover;
|
|
min-height: 100vh;
|
|
backdrop-filter: blur(4px);
|
|
}
|
|
|
|
.glass {
|
|
background: rgba(255, 255, 255, 0.7);
|
|
border-radius: 20px;
|
|
box-shadow: 0 10px 40px rgba(31, 38, 135, 0.15);
|
|
backdrop-filter: blur(10px);
|
|
border: 1px solid rgba(255, 255, 255, 0.4);
|
|
padding: 30px;
|
|
transition: all 0.3s ease-in-out;
|
|
}
|
|
|
|
.glass:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 15px 50px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.navbar-custom {
|
|
background: rgba(13, 71, 161, 0.9);
|
|
backdrop-filter: blur(8px);
|
|
border-bottom: 3px solid var(--secondary-color);
|
|
}
|
|
|
|
.navbar-custom .nav-link {
|
|
color: #fff !important;
|
|
font-weight: 500;
|
|
padding: 15px 15px;
|
|
}
|
|
|
|
.navbar-custom .nav-link:hover {
|
|
color: var(--secondary-color) !important;
|
|
}
|
|
|
|
.dashboard-title {
|
|
font-weight: 800;
|
|
color: var(--primary-color);
|
|
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.stat-box {
|
|
border-left: 5px solid var(--primary-color);
|
|
padding: 20px;
|
|
border-radius: 15px;
|
|
background-color: rgba(255, 255, 255, 0.95);
|
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
|
|
transition: 0.3s;
|
|
height: 100%;
|
|
}
|
|
|
|
.stat-box:hover {
|
|
transform: scale(1.02);
|
|
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.footer-custom {
|
|
background: rgba(0, 0, 0, 0.6);
|
|
backdrop-filter: blur(5px);
|
|
color: white;
|
|
}
|
|
|
|
.logo-circle {
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #f9f8f5ff;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.logo-circle img {
|
|
width: 32px;
|
|
height: 32px;
|
|
object-fit: contain;
|
|
}
|
|
|
|
.subtitle-small {
|
|
font-size: 0.8rem;
|
|
font-weight: 500;
|
|
color: #555;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<nav class="navbar navbar-expand-lg navbar-custom sticky-top">
|
|
<div class="container-fluid container-xl">
|
|
<a class="navbar-brand fw-bold text-white fs-4 d-flex align-items-center"
|
|
href="{{ route('admin.dashboard') }}">
|
|
<div class="logo-circle">
|
|
<img src="{{ asset('images/kartu.png') }}" alt="Logo">
|
|
</div>
|
|
<div>
|
|
<div>PUSTAKA NAWASENA</div>
|
|
<div class="subtitle-small text-light opacity-75">Bakorwil III Malang</div>
|
|
</div>
|
|
</a>
|
|
<button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
|
|
<i class="bi bi-list text-white fs-2"></i>
|
|
</button>
|
|
<div class="collapse navbar-collapse" id="navbarNav">
|
|
<ul class="navbar-nav ms-auto align-items-center">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="{{ route('profile') }}">
|
|
<i class="bi bi-person-circle me-1"></i> Profil
|
|
</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link btn btn-sm btn-warning text-dark px-3 ms-lg-2 mt-2 mt-lg-0"
|
|
href="{{ route('logout') }}"
|
|
onclick="event.preventDefault(); document.getElementById('logout-form').submit();">
|
|
<i class="bi bi-box-arrow-right"></i> Logout
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
<form id="logout-form" action="{{ route('logout') }}" method="POST" class="d-none">@csrf</form>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="py-5">
|
|
<div class="container container-xl">
|
|
<h2 class="dashboard-title mb-2 text-center display-6">
|
|
<i class="bi bi-speedometer2 me-2"></i> Dashboard Administrasi
|
|
</h2>
|
|
<p class="text-center subtitle-small mb-5">Sistem Informasi Perpustakaan - Pustaka Nawasena | Bakorwil III
|
|
Malang</p>
|
|
<div class="row g-4 mb-4">
|
|
<div class="col-12">
|
|
<div class="stat-box shadow-sm d-flex align-items-center justify-content-between"
|
|
style="border-left-color: #6f42c1;">
|
|
<div>
|
|
<h6 class="text-secondary fw-semibold mb-1">Buku Paling Sering Dipinjam</h6>
|
|
<h3 class="fw-bold text-purple">{{ $mostBorrowedBook->koleksi->title ?? 'Belum ada data' }}
|
|
</h3>
|
|
<p class="small text-success mb-0">
|
|
<i class="bi bi-arrow-up-right-circle-fill"></i> Dipinjam
|
|
{{ $mostBorrowedBook->total ?? 0 }} kali
|
|
</p>
|
|
</div>
|
|
<div>
|
|
@if($mostBorrowedBook->koleksi->cover ?? false)
|
|
<img src="{{ asset('storage/' . $mostBorrowedBook->koleksi->cover) }}" alt="Cover Buku"
|
|
style="height:60px; border-radius:5px;">
|
|
@else
|
|
<i class="bi bi-book fs-1 text-purple"></i>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row g-4 mb-5">
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="stat-box shadow-sm">
|
|
<h6 class="text-secondary fw-semibold mb-1">Jumlah Koleksi</h6>
|
|
<h3 class="fw-bold text-primary">{{ number_format($totalBuku ?? 0) }}</h3>
|
|
<p class="text-success small mb-0"><i class="bi bi-arrow-up-right-circle-fill"></i> +5% dari
|
|
bulan lalu</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="stat-box shadow-sm" style="border-left-color: #17a2b8;">
|
|
<h6 class="text-secondary fw-semibold mb-1">Total Anggota</h6>
|
|
<h3 class="fw-bold text-info">{{ number_format($anggotaBulanIni ?? 0) }}</h3>
|
|
<p class="text-primary small mb-0"><i class="bi bi-person-fill"></i> Aktif bulan ini</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="stat-box shadow-sm" style="border-left-color: #ffc107;">
|
|
<h6 class="text-secondary fw-semibold mb-1">Peminjaman Aktif</h6>
|
|
<h3 class="fw-bold text-warning">{{ number_format($totalPeminjaman ?? 0) }}</h3>
|
|
<p class="text-danger small mb-0"><i class="bi bi-book-fill"></i> Transaksi berjalan</p>
|
|
</div>
|
|
</div>
|
|
<div class="col-sm-6 col-lg-3">
|
|
<div class="stat-box shadow-sm" style="border-left-color: #dc3545;">
|
|
<h6 class="text-secondary fw-semibold mb-1">Pengembalian</h6>
|
|
<h3 class="fw-bold text-danger">{{ number_format($totalPengembalian ?? 0) }}</h3>
|
|
<p class="text-success small mb-0"><i class="bi bi-arrow-repeat"></i> Minggu ini</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="glass mb-5">
|
|
<h5 class="fw-bold mb-4 text-primary">
|
|
<i class="bi bi-graph-up me-2"></i> Tren Minat Baca Pengguna
|
|
</h5>
|
|
<div style="max-height: 400px;">
|
|
<canvas id="chartMinat"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
<div class="col-12">
|
|
<div class="glass mb-5">
|
|
<h5 class="fw-bold mb-4 text-primary">
|
|
<i class="bi bi-star-fill me-2"></i> Rating & Feedback Pengguna
|
|
</h5>
|
|
<div class="table-responsive">
|
|
<table class="table table-striped table-hover align-middle">
|
|
<thead class="table-light">
|
|
<tr>
|
|
<th>No</th>
|
|
<th>Nama Pengguna</th>
|
|
<th>Judul Buku</th>
|
|
<th>Rating</th>
|
|
<th>Feedback</th>
|
|
<th>Tanggal</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($ratings ?? [] as $index => $rating)
|
|
<tr>
|
|
<td>{{ $index + 1 }}</td>
|
|
<td>{{ $rating->user->name ?? 'Anonim' }}</td>
|
|
<td>{{ $rating->transaction->koleksi->title ?? '-' }}</td>
|
|
<td>
|
|
@for($i = 1; $i <= 5; $i++)
|
|
<i class="bi bi-star-fill"
|
|
style="color: {{ $i <= $rating->rating ? '#FF6600' : '#ddd' }}"></i>
|
|
@endfor
|
|
</td>
|
|
<td>{{ $rating->feedback ?? '-' }}</td>
|
|
<td>{{ date('d M Y', strtotime($rating->created_at)) }}</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="6" class="text-center text-muted">Belum ada rating atau feedback.
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<h3 class="dashboard-title mb-4 text-center fs-4">
|
|
<i class="bi bi-grid-fill me-2"></i> Menu Akses Cepat
|
|
</h3>
|
|
|
|
<div class="row g-4 mb-5">
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ route('admin.statistik') }}" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-bar-chart-line fs-1" style="color: var(--primary-color);"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Statistik & Laporan</h5>
|
|
<p class="small text-muted mb-0">Lihat laporan rinci dan tren aktivitas pengguna.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ route('admin.koleksi.index') }}" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-journal-text fs-1 text-success"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Manajemen Koleksi</h5>
|
|
<p class="small text-muted mb-0">Tambah, ubah, atau kelola katalog buku & jurnal.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ route('admin.anggota.index') }}" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-people fs-1 text-info"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Manajemen Anggota</h5>
|
|
<p class="small text-muted mb-0">Atur data anggota & cetak kartu anggota.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ route('admin.peminjaman') }}" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-arrow-repeat fs-1 text-warning"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Manajemen Sirkulasi</h5>
|
|
<p class="small text-muted mb-0">Kelola peminjaman & pengembalian.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ route('admin.system') }}" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-gear fs-1 text-secondary"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Pengaturan Sistem</h5>
|
|
<p class="small text-muted mb-0">Konfigurasi akun & backup sistem.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
|
|
<div class="col-md-4">
|
|
<a href="{{ asset('pdf/ManualBook.pdf') }}" target="_blank" class="text-decoration-none">
|
|
<div class="glass text-center shadow h-100">
|
|
<i class="bi bi-book-half fs-1 text-primary"></i>
|
|
<h5 class="mt-3 fw-bold text-dark">Manual Book Sistem</h5>
|
|
<p class="small text-muted mb-0">Panduan lengkap penggunaan sistem.</p>
|
|
</div>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="footer-custom py-4 mt-auto">
|
|
<div class="container container-xl text-center">
|
|
<p class="mb-0 small">© {{ date('Y') }} Pustaka Nawasena Bakorwil III Malang. Hak Cipta Dilindungi.</p>
|
|
<p class="mb-0 small text-light mt-1">.</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
const ctx = document.getElementById('chartMinat').getContext('2d');
|
|
const bulan = @json($bulanLabel ?? []);
|
|
const dataTren = @json($chartDataFull ?? []);
|
|
|
|
new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
labels: bulan,
|
|
datasets: [{
|
|
label: 'Jumlah Transaksi Peminjaman',
|
|
data: dataTren,
|
|
borderColor: '#0d47a1',
|
|
backgroundColor: 'rgba(13, 71, 161, 0.1)',
|
|
tension: 0.4,
|
|
fill: true,
|
|
pointRadius: 6,
|
|
pointBackgroundColor: 'white',
|
|
pointBorderWidth: 3,
|
|
pointHoverRadius: 8
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: { display: true, position: 'bottom' },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: (context) => context.dataset.label + ': ' + context.parsed.y + ' Transaksi'
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
y: { beginAtZero: true, grid: { color: 'rgba(0, 0, 0, 0.05)' } },
|
|
x: { grid: { display: false } }
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
|
|
</body>
|
|
|
|
</html> |