213 lines
9.1 KiB
PHP
213 lines
9.1 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
<div class="container-fluid py-4">
|
|
<!-- Header Section -->
|
|
<div class="d-flex justify-content-between align-items-center mb-4 text-start">
|
|
<div>
|
|
<h3 class="fw-bold text-dark mb-1">Dashboard Pengurus</h3>
|
|
<p class="text-muted small">Ringkasan data Merpati Putih Cabang Jember • {{ date('d M Y') }}</p>
|
|
</div>
|
|
<div>
|
|
<span class="badge bg-primary-soft text-primary px-3 py-2 rounded-pill">
|
|
<i class="fas fa-user-shield me-1"></i> Mode Administrator
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Statistik Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm p-3" style="border-radius: 15px; border-left: 5px solid #0d6efd;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="p-3 bg-primary bg-opacity-10 rounded-3 text-primary me-3">
|
|
<i class="fas fa-users fa-lg"></i>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted d-block">Anggota Aktif</small>
|
|
<h4 class="fw-bold mb-0">{{ $total_anggota_aktif }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm p-3" style="border-radius: 15px; border-left: 5px solid #198754;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="p-3 bg-success bg-opacity-10 rounded-3 text-success me-3">
|
|
<i class="fas fa-user-tie fa-lg"></i>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted d-block">Total Pelatih</small>
|
|
<h4 class="fw-bold mb-0">{{ $total_pelatih }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm p-3" style="border-radius: 15px; border-left: 5px solid #0dcaf0;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="p-3 bg-info bg-opacity-10 rounded-3 text-info me-3">
|
|
<i class="fas fa-university fa-lg"></i>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted d-block">Total Kolat</small>
|
|
<h4 class="fw-bold mb-0">{{ $total_kolat }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="card border-0 shadow-sm p-3" style="border-radius: 15px; border-left: 5px solid #ffc107;">
|
|
<div class="d-flex align-items-center">
|
|
<div class="p-3 bg-warning bg-opacity-10 rounded-3 text-warning me-3">
|
|
<i class="fas fa-file-invoice-dollar fa-lg"></i>
|
|
</div>
|
|
<div>
|
|
<small class="text-muted d-block">SPP Tertunda</small>
|
|
<h4 class="fw-bold mb-0">{{ $spp_pending }}</h4>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Charts Row -->
|
|
<div class="row g-4 mb-4 text-start">
|
|
<div class="col-md-8">
|
|
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
|
<h6 class="fw-bold text-dark mb-4"><i class="fas fa-chart-line me-2 text-primary"></i>Tren Kehadiran Latihan (7 Hari Terakhir)</h6>
|
|
<div style="height: 300px;">
|
|
<canvas id="chartPresensi"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
|
<h6 class="fw-bold text-dark mb-4"><i class="fas fa-chart-pie me-2 text-primary"></i>Komposisi Tingkatan</h6>
|
|
<div style="height: 300px;">
|
|
<canvas id="chartSabuk"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Activities & Quick Actions Row -->
|
|
<div class="row g-4 text-start">
|
|
<!-- Aktivitas Terbaru -->
|
|
<div class="col-md-8">
|
|
<div class="card border-0 shadow-sm p-4" style="border-radius: 20px;">
|
|
<h6 class="fw-bold text-dark mb-4">Aktivitas Transaksi Terbaru</h6>
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle">
|
|
<thead class="bg-light">
|
|
<tr class="small text-muted">
|
|
<th>WAKTU</th>
|
|
<th>KEGIATAN</th>
|
|
<th>USER</th>
|
|
<th>STATUS</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@foreach($aktivitas as $act)
|
|
<tr>
|
|
<td class="small text-muted">{{ $act['waktu'] }}</td>
|
|
<td class="small fw-bold">{{ $act['kegiatan'] }}</td>
|
|
<td class="small">{{ $act['user'] }}</td>
|
|
<td>
|
|
<span class="badge bg-{{ $act['badge'] }}-soft text-{{ $act['badge'] }} px-2 py-1 rounded small">
|
|
{{ $act['status'] }}
|
|
</span>
|
|
</td>
|
|
</tr>
|
|
@endforeach
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Actions & Summary -->
|
|
<div class="col-md-4">
|
|
<div class="card border-0 shadow-sm p-4 h-100" style="border-radius: 20px; background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);">
|
|
<h6 class="fw-bold text-dark mb-4">Ringkasan Operasional</h6>
|
|
|
|
<div class="mb-4">
|
|
<small class="text-muted d-block mb-2">Kelayakan Ujian Saat Ini</small>
|
|
<div class="d-flex align-items-center">
|
|
<h3 class="fw-bold text-primary mb-0 me-2">{{ $jumlah_layak_ujian }}</h3>
|
|
<span class="text-muted small">Anggota Siap Ujian</span>
|
|
</div>
|
|
<div class="progress mt-2" style="height: 5px;">
|
|
<div class="progress-bar bg-primary" style="width: {{ ($total_anggota_aktif > 0) ? ($jumlah_layak_ujian/$total_anggota_aktif)*100 : 0 }}%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="d-grid gap-2">
|
|
<a href="{{ route('rekap.index') }}" class="btn btn-primary py-3 rounded-3 shadow-sm">
|
|
<i class="fas fa-clipboard-check me-2"></i> Buka Rekap Kelayakan
|
|
</a>
|
|
<a href="{{ route('spp.index') }}" class="btn btn-outline-primary py-3 rounded-3">
|
|
<i class="fas fa-wallet me-2"></i> Verifikasi SPP
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart JS -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Grafik Presensi (Line Chart)
|
|
const ctxP = document.getElementById('chartPresensi').getContext('2d');
|
|
new Chart(ctxP, {
|
|
type: 'line',
|
|
data: {
|
|
labels: {!! json_encode($grafikPresensi->pluck('date')) !!},
|
|
datasets: [{
|
|
label: 'Jumlah Hadir',
|
|
data: {!! json_encode($grafikPresensi->pluck('total')) !!},
|
|
borderColor: '#0d6efd',
|
|
backgroundColor: 'rgba(13, 110, 253, 0.05)',
|
|
fill: true,
|
|
tension: 0.4,
|
|
borderWidth: 3
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: { legend: { display: false } },
|
|
scales: { y: { beginAtZero: true, grid: { display: false } }, x: { grid: { display: false } } }
|
|
}
|
|
});
|
|
|
|
// Grafik Sabuk (Doughnut Chart)
|
|
const ctxS = document.getElementById('chartSabuk').getContext('2d');
|
|
new Chart(ctxS, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: {!! json_encode($persebaran_sabuk->pluck('tingkatan')) !!},
|
|
datasets: [{
|
|
data: {!! json_encode($persebaran_sabuk->pluck('total')) !!},
|
|
backgroundColor: ['#0d6efd', '#0dcaf0', '#198754', '#ffc107', '#dc3545', '#6610f2']
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '75%',
|
|
plugins: { legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 10 } } }
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style>
|
|
.bg-primary-soft { background-color: #e7f0ff; }
|
|
.bg-success-soft { background-color: #e6fffa; }
|
|
.bg-warning-soft { background-color: #fffaf0; }
|
|
.bg-info-soft { background-color: #e0f2fe; }
|
|
.bg-danger-soft { background-color: #fff5f5; }
|
|
</style>
|
|
@endsection
|