455 lines
23 KiB
PHP
455 lines
23 KiB
PHP
@section('page-title', 'Dashboard')
|
|
<x-app-layout>
|
|
|
|
{{-- <button type="button" class="btn btn-sm btn-primary end-0">
|
|
<i class="bi bi-plus-circle me-1"></i>
|
|
Pinjam Buku Baru
|
|
</button> --}}
|
|
|
|
<div class="mb-4">
|
|
<h3>Selamat Pagi, {{ $user->nama_lengkap }} !</h3>
|
|
<p class="text-muted">Apa yang ingin kamu baca hari ini?</p>
|
|
</div>
|
|
|
|
<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 border-0 shadow-sm 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>
|
|
|
|
<!-- Charts Section -->
|
|
<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">
|
|
<div class="d-flex align-items-center">
|
|
<div class="chart-icon me-3">
|
|
<i class="bi bi-bar-chart-fill text-primary"></i>
|
|
</div>
|
|
<h6 class="m-0 fw-bold text-dark">Statistik Bulanan</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body p-4">
|
|
<canvas id="barChart" style="max-height: 300px;"></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">
|
|
<div class="d-flex align-items-center">
|
|
<div class="chart-icon me-3">
|
|
<i class="bi bi-pie-chart-fill text-primary"></i>
|
|
</div>
|
|
<h6 class="m-0 fw-bold text-dark">Progress Membaca</h6>
|
|
</div>
|
|
</div>
|
|
<div class="card-body text-center d-flex justify-content-center align-items-center p-4">
|
|
<div class="chart-container" style="position: relative; height: 200px; width: 200px;">
|
|
<canvas id="donutChart"></canvas>
|
|
</div>
|
|
</div>
|
|
<div class="text-center py-3">
|
|
<div class="d-flex justify-content-center gap-4">
|
|
<span class="badge bg-primary-soft text-primary px-3 py-2">
|
|
<i class="bi bi-circle-fill me-1"></i> Telah Dibaca
|
|
</span>
|
|
<span class="badge bg-light text-secondary px-3 py-2">
|
|
<i class="bi bi-circle-fill me-1"></i> Belum Dibaca
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Announcements and Notifications Section -->
|
|
<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">
|
|
<div class="d-flex align-items-center">
|
|
<div class="notification-icon me-3">
|
|
<i class="bi bi-megaphone-fill text-warning"></i>
|
|
</div>
|
|
<h6 class="m-0 fw-bold text-dark">Pengumuman</h6>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
|
|
data-bs-toggle="modal" data-bs-target="#pengumumanModal">
|
|
Lihat Semua
|
|
</button>
|
|
</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"
|
|
role="alert">
|
|
<div class="alert-icon me-3 mt-1">
|
|
<i class="{{ $item['icon'] }} fs-5"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<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 mb-3" style="font-size: 3rem;"></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">
|
|
<div class="d-flex align-items-center">
|
|
<div class="notification-icon me-3">
|
|
<i class="bi bi-bell-fill text-info"></i>
|
|
</div>
|
|
<h6 class="m-0 fw-bold text-dark">Pemberitahuan</h6>
|
|
</div>
|
|
<button type="button" class="btn btn-sm btn-outline-primary rounded-pill px-3"
|
|
data-bs-toggle="modal" data-bs-target="#pemberitahuanModal">
|
|
Lihat Semua
|
|
</button>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
@forelse(collect($pemberitahuan)->take(3) as $item)
|
|
<div
|
|
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
|
|
<div class="d-flex align-items-start flex-grow-1">
|
|
<div class="notification-icon me-3 mt-1">
|
|
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
|
|
<div class="text-muted small">{{ $item['content'] }}</div>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
|
|
{{ $item['badge'] }}
|
|
</span>
|
|
</div>
|
|
@if (!$loop->last)
|
|
<hr class="my-0 mx-4">
|
|
@endif
|
|
@empty
|
|
<div class="text-center py-4">
|
|
<i class="bi bi-bell-slash text-muted mb-3" style="font-size: 3rem;"></i>
|
|
<p class="text-muted mb-0 px-4">Tidak ada pemberitahuan baru.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Book Activities Section -->
|
|
<div class="card border-0 shadow-sm py-2">
|
|
<div class="card-body px-3">
|
|
|
|
<div class="mb-5" x-data="{ expanded: false }">
|
|
<div class="section-header mb-4 d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="section-icon me-3">
|
|
<i class="bi bi-book-half text-danger"></i>
|
|
</div>
|
|
<h6 class="mb-0 fw-bold text-dark">Buku Pinjam Offline</h6>
|
|
</div>
|
|
<button type-="button" :class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' : 'btn btn-sm btn-outline-primary rounded-pill px-3'"
|
|
@click="expanded = !expanded" x-show="{{ count($bukuPinjamOffline) > 2 }}">
|
|
<span x-text="expanded ? 'Tampilkan Lebih Sedikit' : 'Lihat Semua'">Lihat Semua</span>
|
|
</button>
|
|
</div>
|
|
<div class="row g-4">
|
|
@forelse($bukuPinjamOffline as $buku)
|
|
<div class="col-xl-4 col-md-6" x-show="{{ $loop->index }} < 3 || expanded" x-transition>
|
|
<div class="card border-0 shadow-sm h-100 book-card">
|
|
<div class="row g-0 h-100">
|
|
<div class="col-4">
|
|
<div
|
|
class="book-cover-container d-flex align-items-center justify-content-center p-3 h-100">
|
|
<img src="{{ asset($buku['cover']) }}"
|
|
class="img-fluid rounded shadow-sm book-cover"
|
|
alt="Cover {{ $buku['judul'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="card-body d-flex flex-column h-100 p-3">
|
|
<div class="flex-grow-1">
|
|
<h6 class="card-title fw-bold text-dark mb-2 line-clamp-2">
|
|
{{ $buku['judul'] }}</h6>
|
|
<p class="card-subtitle text-muted small mb-2">
|
|
<i class="bi bi-person-fill me-1"></i>{{ $buku['penulis'] }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<div
|
|
class="alert alert-danger border-0 py-2 px-3 mb-0 d-flex align-items-center">
|
|
<i class="bi bi-clock-fill me-2"></i>
|
|
<span class="fw-bold small">Sisa: {{ $buku['sisa_hari'] }}
|
|
hari</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
|
|
<p class="text-muted mb-0">Tidak ada buku yang sedang dipinjam secara offline.</p>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-5" x-data="{ expanded: false }">
|
|
<div class="section-header mb-4 d-flex justify-content-between align-items-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="section-icon me-3">
|
|
<i class="bi bi-globe text-success"></i>
|
|
</div>
|
|
<h6 class="mb-0 fw-bold text-dark">Baca Buku Online</h6>
|
|
</div>
|
|
<button type="button" :class="expanded ? 'btn btn-sm btn-primary rounded-pill px-3' : 'btn btn-sm btn-outline-primary rounded-pill px-3'"
|
|
@click="expanded = !expanded" x-show="{{ count($bacaBukuOnline) > 3 }}">
|
|
<span x-text="expanded ? 'Tampilkan Lebih Sedikit' : 'Lihat Semua'">Lihat Semua</span>
|
|
</button>
|
|
</div>
|
|
<div class="row g-4">
|
|
@forelse($bacaBukuOnline as $buku)
|
|
<div class="col-xl-4 col-md-6" x-show="{{ $loop->index }} < 3 || expanded" x-transition>
|
|
<div class="card border-0 shadow-sm h-100 book-card">
|
|
<div class="row g-0 h-100">
|
|
<div class="col-4">
|
|
<div
|
|
class="book-cover-container d-flex align-items-center justify-content-center p-3 h-100">
|
|
<img src="{{ asset($buku['cover']) }}"
|
|
class="img-fluid rounded shadow-sm book-cover"
|
|
alt="Cover {{ $buku['judul'] }}">
|
|
</div>
|
|
</div>
|
|
<div class="col-8">
|
|
<div class="card-body d-flex flex-column h-100 p-3">
|
|
<div class="flex-grow-1">
|
|
<h6 class="card-title fw-bold text-dark mb-2 line-clamp-2">
|
|
{{ $buku['judul'] }}</h6>
|
|
<p class="card-subtitle text-muted small mb-3">
|
|
<i class="bi bi-person-fill me-1"></i>{{ $buku['penulis'] }}
|
|
</p>
|
|
</div>
|
|
<div class="mt-auto">
|
|
<div class="progress-wrapper">
|
|
<div
|
|
class="d-flex justify-content-between align-items-center mb-2">
|
|
<span class="small text-muted">Progress</span>
|
|
<span
|
|
class="small fw-bold text-primary">{{ $buku['progress'] }}%</span>
|
|
</div>
|
|
<div class="progress" style="height: 8px;">
|
|
<div class="progress-bar bg-gradient"
|
|
style="width: {{ $buku['progress'] }}%"
|
|
role="progressbar">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="col-12">
|
|
<div class="text-center py-5">
|
|
<i class="bi bi-book text-muted mb-3" style="font-size: 4rem;"></i>
|
|
<p class="text-muted mb-0">Tidak ada buku yang sedang dibaca secara online.</p>
|
|
</div>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<!-- Modals -->
|
|
<div class="modal fade" id="pengumumanModal" tabindex="-1" aria-labelledby="pengumumanModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold text-dark" id="pengumumanModalLabel">
|
|
<i class="bi bi-megaphone-fill text-warning me-2"></i>Semua Pengumuman
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body px-4">
|
|
@foreach ($pengumuman as $item)
|
|
<div class="alert alert-{{ $item['type'] }} border-0 d-flex align-items-start mb-3 shadow-sm"
|
|
role="alert">
|
|
<div class="alert-icon me-3 mt-1">
|
|
<i class="{{ $item['icon'] }} fs-5"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-bold mb-1">{{ $item['title'] }}!</div>
|
|
<div class="small">{{ $item['content'] }}</div>
|
|
</div>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-secondary rounded-pill px-4"
|
|
data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="pemberitahuanModal" tabindex="-1" aria-labelledby="pemberitahuanModalLabel"
|
|
aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-scrollable modal-lg">
|
|
<div class="modal-content border-0 shadow">
|
|
<div class="modal-header border-0 pb-0">
|
|
<h5 class="modal-title fw-bold text-dark" id="pemberitahuanModalLabel">
|
|
<i class="bi bi-bell-fill text-info me-2"></i>Semua Pemberitahuan
|
|
</h5>
|
|
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
@foreach ($pemberitahuan as $item)
|
|
<div
|
|
class="list-group-item border-0 d-flex justify-content-between align-items-center px-4 py-3">
|
|
<div class="d-flex align-items-start flex-grow-1">
|
|
<div class="notification-icon me-3 mt-1">
|
|
<i class="bi {{ $item['icon'] }} text-{{ $item['type'] }}"></i>
|
|
</div>
|
|
<div class="flex-grow-1">
|
|
<div class="fw-semibold text-dark mb-1">{{ $item['title'] }}:</div>
|
|
<div class="text-muted small">{{ $item['content'] }}</div>
|
|
</div>
|
|
</div>
|
|
<span
|
|
class="badge bg-{{ $item['type'] }}-soft text-{{ $item['type'] }} rounded-pill px-3 py-2 ms-3">
|
|
{{ $item['badge'] }}
|
|
</span>
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer border-0">
|
|
<button type="button" class="btn btn-secondary rounded-pill px-4"
|
|
data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const statistikData = @json($statistikBulanan ?? ['labels' => [], 'data' => []]);
|
|
const progressData = @json($progressMembaca ?? ['selesai' => 0, 'sisa' => 0]);
|
|
|
|
// Bar Chart with improved styling
|
|
const ctxBar = document.getElementById('barChart').getContext('2d');
|
|
new Chart(ctxBar, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: statistikData.labels,
|
|
datasets: [{
|
|
label: 'Buku Dibaca',
|
|
data: statistikData.data,
|
|
backgroundColor: '#435ebe',
|
|
borderRadius: 8,
|
|
borderSkipped: false,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: 'rgba(0,0,0,0.05)',
|
|
},
|
|
ticks: {
|
|
color: '#6c757d',
|
|
font: {
|
|
size: 12
|
|
}
|
|
}
|
|
},
|
|
x: {
|
|
grid: {
|
|
display: false,
|
|
},
|
|
ticks: {
|
|
color: '#6c757d',
|
|
font: {
|
|
size: 12
|
|
}
|
|
}
|
|
}
|
|
},
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Donut Chart
|
|
const ctxDonut = document.getElementById('donutChart').getContext('2d');
|
|
new Chart(ctxDonut, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Telah Dibaca', 'Belum Dibaca'],
|
|
datasets: [{
|
|
data: [progressData.selesai, progressData.sisa],
|
|
backgroundColor: ['#435ebe', '#e9ecef'],
|
|
borderColor: ['#435ebe', '#dee2e6'],
|
|
borderWidth: 3,
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
}
|
|
},
|
|
cutout: '75%'
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
</x-app-layout>
|