478 lines
23 KiB
PHP
478 lines
23 KiB
PHP
@extends('layouts.admin')
|
|
|
|
@section('title', 'Rekapitulasi Konsultasi Siswa')
|
|
|
|
@section('content')
|
|
|
|
<!-- Custom Styling Tambahan -->
|
|
<style>
|
|
/* Stats Card Gradient */
|
|
.card-stat-primary {
|
|
background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
.card-stat-dark {
|
|
background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* Hover Interactive Card */
|
|
.interactive-card {
|
|
transition: transform 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
.interactive-card:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.08) !important;
|
|
}
|
|
|
|
/* Custom Rank Badge */
|
|
.rank-badge {
|
|
width: 28px;
|
|
height: 28px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 50%;
|
|
font-weight: 700;
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* Avatar Initial */
|
|
.avatar-circle {
|
|
width: 36px;
|
|
height: 36px;
|
|
background-color: #e0f2fe;
|
|
color: #0369a1;
|
|
font-weight: 700;
|
|
font-size: 13px;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* Media Print */
|
|
@media print {
|
|
.no-print {
|
|
display: none !important;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<div class="container-fluid px-3 py-2">
|
|
|
|
<!-- Header & Action -->
|
|
<div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 pb-3 border-bottom gap-3">
|
|
<div>
|
|
<div class="d-flex align-items-center gap-2 mb-1">
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1 fs-7 fw-semibold">
|
|
<i class="fas fa-chart-line me-1"></i> Executive Summary
|
|
</span>
|
|
</div>
|
|
<h2 class="fw-bold text-dark m-0 d-flex align-items-center gap-2 fs-3">
|
|
<i class="fas fa-file-invoice text-primary"></i> Rekapitulasi Konsultasi Siswa
|
|
</h2>
|
|
<p class="text-muted small mb-0 mt-1">Ringkasan laporan statistik dan grafik distribusi hasil rekomendasi jurusan berbasis C4.5</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Ringkasan Statistik Cards -->
|
|
<div class="row g-3 mb-4">
|
|
<!-- Total Konsultasi -->
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card border-0 shadow-sm rounded-4 card-stat-primary overflow-hidden position-relative h-100 interactive-card">
|
|
<!-- Ikon Watermark Transparan di Pojok Kanan Bawah -->
|
|
<div class="position-absolute" style="right: -10px; bottom: -15px; font-size: 5.5rem; opacity: 0.12; color: #ffffff; pointer-events: none; z-index: 0;">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
</div>
|
|
|
|
<div class="card-body p-4 position-relative" style="z-index: 1;">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-uppercase fw-bold text-white opacity-75 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
|
|
<i class="fas fa-users"></i> Total Konsultasi
|
|
</span>
|
|
<span class="badge bg-black bg-opacity-25 text-white rounded-pill px-3 py-1.5 small border border-white border-opacity-20" style="font-size: 10px;">
|
|
Akumulasi
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2 mb-2">
|
|
<h1 class="display-5 fw-bold mb-0 text-white font-monospace">
|
|
{{ number_format($totalKonsultasi) }}
|
|
</h1>
|
|
<span class="fs-6 text-white opacity-75">Siswa</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<small class="text-white opacity-75 d-block" style="font-size: 11.5px; line-height: 1.3;">
|
|
<i class="fas fa-check-circle me-1"></i>Siswa yang telah menyelesaikan sesi tes
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Total Opsi Jurusan Terrekomendasi -->
|
|
<div class="col-md-6 col-xl-4">
|
|
<div class="card border-0 shadow-sm rounded-4 card-stat-dark overflow-hidden position-relative h-100 interactive-card">
|
|
<!-- Ikon Watermark Transparan di Pojok Kanan Bawah -->
|
|
<div class="position-absolute" style="right: -10px; bottom: -15px; font-size: 5.5rem; opacity: 0.12; color: #ffffff; pointer-events: none; z-index: 0;">
|
|
<i class="fas fa-layer-group"></i>
|
|
</div>
|
|
|
|
<div class="card-body p-4 position-relative" style="z-index: 1;">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-uppercase fw-bold text-white opacity-75 small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
|
|
<i class="fas fa-layer-group text-warning"></i> Sebaran Jurusan
|
|
</span>
|
|
<span class="badge bg-white bg-opacity-10 text-white rounded-pill px-3 py-1.5 small border border-white border-opacity-20" style="font-size: 10px;">
|
|
Kategori
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2 mb-2">
|
|
<h1 class="display-5 fw-bold mb-0 text-white font-monospace">
|
|
{{ count($rekapJurusan) }}
|
|
</h1>
|
|
<span class="fs-6 text-white opacity-75">Jurusan</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<small class="text-white opacity-75 d-block" style="font-size: 11.5px; line-height: 1.3;">
|
|
<i class="fas fa-info-circle me-1"></i>Variasi jurusan yang muncul pada hasil sistem
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Rata-rata per Jurusan -->
|
|
<div class="col-md-12 col-xl-4">
|
|
<div class="card border-0 shadow-sm rounded-4 bg-white overflow-hidden position-relative h-100 interactive-card">
|
|
<div class="card-body p-4 position-relative" style="z-index: 1;">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<span class="text-uppercase fw-bold text-muted small d-flex align-items-center gap-2" style="letter-spacing: 0.5px; font-size: 11px;">
|
|
<i class="fas fa-calculator text-primary"></i> Rata-rata / Jurusan
|
|
</span>
|
|
<span class="badge bg-primary-subtle text-primary rounded-pill px-3 py-1.5 small" style="font-size: 10px;">
|
|
Metrik
|
|
</span>
|
|
</div>
|
|
<div class="d-flex align-items-baseline gap-2 mb-2">
|
|
<h1 class="display-5 fw-bold mb-0 text-dark font-monospace">
|
|
{{ count($rekapJurusan) > 0 ? number_format($totalKonsultasi / count($rekapJurusan), 1) : 0 }}
|
|
</h1>
|
|
<span class="fs-6 text-muted">Siswa/Jurusan</span>
|
|
</div>
|
|
<div class="pt-2">
|
|
<small class="text-muted d-block" style="font-size: 11.5px; line-height: 1.3;">
|
|
<i class="fas fa-chart-pie me-1 text-primary"></i>Distribusi rata-rata minat per program studi
|
|
</small>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Grafik & Peringkat -->
|
|
<div class="row g-4 mb-4">
|
|
<!-- Visualisasi Grafik Chart.js -->
|
|
<div class="col-lg-8">
|
|
<div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-chart-bar text-primary"></i> Visualisasi Distribusi Rekomendasi
|
|
</h6>
|
|
<span class="badge bg-light text-secondary border rounded-pill px-3 py-1 small">Bar Chart</span>
|
|
</div>
|
|
<div class="card-body p-4 d-flex align-items-center">
|
|
<div class="w-100" style="position: relative; min-height: 280px;">
|
|
<canvas id="chartJurusan"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel Peringkat Jurusan Terfavorit -->
|
|
<div class="col-lg-4">
|
|
<div class="card border-0 shadow-sm rounded-4 h-100 overflow-hidden">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex align-items-center justify-content-between">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-trophy text-warning"></i> Peringkat Jurusan
|
|
</h6>
|
|
<span class="badge bg-warning-subtle text-warning-emphasis border border-warning-subtle rounded-pill px-3 py-1 small">Top Dominan</span>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="list-group list-group-flush">
|
|
@forelse($rekapJurusan as $idx => $item)
|
|
<div class="list-group-item d-flex align-items-center justify-content-between p-3 border-bottom border-light">
|
|
<div class="d-flex align-items-center gap-3">
|
|
<span class="rank-badge {{ $idx == 0 ? 'bg-warning text-dark' : ($idx == 1 ? 'bg-secondary text-white' : ($idx == 2 ? 'bg-danger-subtle text-danger' : 'bg-light text-muted border')) }}">
|
|
{{ $idx + 1 }}
|
|
</span>
|
|
<div>
|
|
<div class="fw-bold text-dark small">{{ $item->hasil_rekomendasi }}</div>
|
|
<div class="text-muted" style="font-size: 11px;">
|
|
{{ $totalKonsultasi > 0 ? number_format(($item->total / $totalKonsultasi) * 100, 1) : 0 }}% dari total
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span class="badge bg-primary-subtle text-primary border border-primary-subtle rounded-pill px-3 py-1.5 font-monospace fs-7">
|
|
{{ $item->total }} Siswa
|
|
</span>
|
|
</div>
|
|
@empty
|
|
<div class="text-center text-muted py-5">
|
|
<i class="fas fa-inbox fs-2 mb-2 opacity-30"></i>
|
|
<p class="mb-0 small">Belum ada data konsultasi.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- Tabel Riwayat Terbaru -->
|
|
<div class="card border-0 shadow-sm rounded-4 overflow-hidden mb-4">
|
|
<div class="card-header bg-white py-3 px-4 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="fw-bold text-dark mb-0 d-flex align-items-center gap-2">
|
|
<i class="fas fa-history text-primary"></i> Riwayat 10 Konsultasi Terbaru
|
|
</h6>
|
|
<!-- Diganti dari Live Data menjadi Tombol Export PDF -->
|
|
<a href="{{ route('admin.rekap.pdf') }}" class="btn btn-danger btn-sm rounded-pill px-3 py-1-5 d-inline-flex align-items-center gap-2 shadow-sm">
|
|
<i class="fas fa-file-pdf"></i> Export PDF Laporan
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover align-middle mb-0">
|
|
<thead class="bg-light-subtle text-muted small text-uppercase" style="font-size: 11px;">
|
|
<tr>
|
|
<th class="ps-4 py-3 text-center" style="width: 60px;">No</th>
|
|
<th class="py-3">Nama Siswa</th>
|
|
<th class="py-3">Waktu Konsultasi</th>
|
|
<th class="text-center py-3">Hasil Rekomendasi Jurusan</th>
|
|
<th class="text-center py-3 pe-4" style="width: 130px;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="border-top-0">
|
|
@forelse($riwayatTerbaru as $idx => $row)
|
|
<tr>
|
|
<td class="ps-4 text-center font-monospace text-muted small">{{ $idx + 1 }}</td>
|
|
|
|
<td>
|
|
<span class="fw-bold text-dark">{{ $row->nama }}</span>
|
|
</td>
|
|
|
|
<td class="text-muted small">
|
|
<i class="far fa-clock me-1 opacity-75"></i>
|
|
{{ \Carbon\Carbon::parse($row->created_at)->format('d M Y, H:i') }} WIB
|
|
</td>
|
|
<td class="text-center">
|
|
<span class="badge bg-success-subtle text-success border border-success-subtle px-3 py-2 rounded-pill fw-bold">
|
|
<i class="fas fa-check-circle me-1"></i>{{ $row->hasil_rekomendasi }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center pe-4">
|
|
<!-- Tombol Detail (Ikon & Teks Berdampingan Horizontal) -->
|
|
<button type="button"
|
|
class="btn btn-sm btn-outline-primary rounded-pill px-3 py-1 d-inline-flex align-items-center gap-1 btn-detail-konsultasi"
|
|
data-nama="{{ $row->nama }}"
|
|
data-waktu="{{ \Carbon\Carbon::parse($row->created_at)->format('d M Y, H:i') }} WIB"
|
|
data-hasil="{{ $row->hasil_rekomendasi }}"
|
|
data-nilai="{{ $row->nilai_raw }} ({{ $row->nilai }})"
|
|
data-minat="{{ $row->minat_raw }} ({{ $row->minat }})"
|
|
data-citacita="{{ $row->cita_cita_raw }} ({{ $row->cita_cita }})"
|
|
data-preferensi="{{ $row->preferensi_studi_raw }} ({{ $row->preferensi_studi }})">
|
|
<i class="fas fa-eye"></i> Detail
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center text-muted py-5">
|
|
<i class="fas fa-folder-open fs-2 mb-2 opacity-30"></i>
|
|
<p class="mb-0 small">Belum ada riwayat data konsultasi.</p>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart.js Engine -->
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const ctx = document.getElementById('chartJurusan').getContext('2d');
|
|
|
|
// Custom Gradient Fill
|
|
const gradient = ctx.createLinearGradient(0, 0, 0, 300);
|
|
gradient.addColorStop(0, 'rgba(37, 99, 235, 0.85)');
|
|
gradient.addColorStop(1, 'rgba(59, 130, 246, 0.15)');
|
|
|
|
new Chart(ctx, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: {!! json_encode($labels) !!},
|
|
datasets: [{
|
|
label: 'Jumlah Siswa',
|
|
data: {!! json_encode($totals) !!},
|
|
backgroundColor: gradient,
|
|
borderColor: '#2563eb',
|
|
borderWidth: 2,
|
|
borderRadius: 8,
|
|
borderSkipped: false,
|
|
barThickness: 32,
|
|
maxBarThickness: 48
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
plugins: {
|
|
legend: {
|
|
display: false
|
|
},
|
|
tooltip: {
|
|
backgroundColor: '#0f172a',
|
|
titleFont: { size: 13, weight: 'bold' },
|
|
bodyFont: { size: 12 },
|
|
padding: 12,
|
|
cornerRadius: 8,
|
|
displayColors: false,
|
|
callbacks: {
|
|
label: function(context) {
|
|
return ` Total Siswa: ${context.parsed.y} Orang`;
|
|
}
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
grid: {
|
|
display: false
|
|
},
|
|
ticks: {
|
|
font: { family: "'Inter', sans-serif", size: 11, weight: '600' },
|
|
color: '#64748b'
|
|
}
|
|
},
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: {
|
|
color: '#f1f5f9',
|
|
drawBorder: false
|
|
},
|
|
ticks: {
|
|
stepSize: 1,
|
|
font: { family: "'Inter', sans-serif", size: 11 },
|
|
color: '#64748b'
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
|
|
<script>
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
const detailButtons = document.querySelectorAll('.btn-detail-konsultasi');
|
|
const modalElement = new bootstrap.Modal(document.getElementById('modalDetailKonsultasi'));
|
|
|
|
detailButtons.forEach(button => {
|
|
button.addEventListener('click', function () {
|
|
// Ambil data atribut dari tombol
|
|
const nama = this.getAttribute('data-nama');
|
|
const waktu = this.getAttribute('data-waktu');
|
|
const hasil = this.getAttribute('data-hasil');
|
|
const nilai = this.getAttribute('data-nilai');
|
|
const minat = this.getAttribute('data-minat');
|
|
const citacita = this.getAttribute('data-citacita');
|
|
const preferensi = this.getAttribute('data-preferensi');
|
|
|
|
// Masukkan data ke dalam elemen modal
|
|
document.getElementById('detailNamaSiswa').innerText = nama ?? '-';
|
|
document.getElementById('detailWaktuKonsultasi').innerText = waktu ?? '-';
|
|
document.getElementById('detailHasilRekomendasi').innerText = hasil ?? '-';
|
|
|
|
document.getElementById('detailNilai').innerText = nilai ?? '-';
|
|
document.getElementById('detailMinat').innerText = minat ?? '-';
|
|
document.getElementById('detailCitaCita').innerText = citacita ?? '-';
|
|
document.getElementById('detailPreferensi').innerText = preferensi ?? '-';
|
|
|
|
// Tampilkan Modal
|
|
modalElement.show();
|
|
});
|
|
});
|
|
});
|
|
</script>
|
|
|
|
@endsection
|
|
<!-- Modal Detail Konsultasi -->
|
|
<div class="modal fade" id="modalDetailKonsultasi" tabindex="-1" aria-labelledby="modalDetailLabel" aria-hidden="true">
|
|
<div class="modal-dialog modal-dialog-centered modal-lg">
|
|
<div class="modal-content border-0 shadow rounded-4 overflow-hidden">
|
|
<div class="modal-header bg-primary text-white py-3 px-4">
|
|
<h5 class="modal-title fw-bold fs-6 d-flex align-items-center gap-2" id="modalDetailLabel">
|
|
<i class="fas fa-file-alt"></i> Rincian Input Data Konsultasi Siswa
|
|
</h5>
|
|
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal" aria-label="Close"></button>
|
|
</div>
|
|
<div class="modal-body p-4">
|
|
<!-- Header Informasi Siswa -->
|
|
<div class="p-3 bg-light rounded-3 mb-4 d-flex justify-content-between align-items-center flex-wrap gap-2">
|
|
<div>
|
|
<span class="text-muted small d-block">Nama Siswa</span>
|
|
<h6 class="fw-bold text-dark mb-0 fs-5" id="detailNamaSiswa">-</h6>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted small d-block">Waktu Konsultasi</span>
|
|
<span class="fw-semibold text-dark small" id="detailWaktuKonsultasi">-</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-muted small d-block">Hasil Rekomendasi C4.5</span>
|
|
<span class="badge bg-success fs-6" id="detailHasilRekomendasi">-</span>
|
|
</div>
|
|
</div>
|
|
|
|
<h6 class="fw-bold text-dark mb-3">
|
|
<i class="fas fa-list-check text-primary me-1"></i> Data Input Kuesioner (Raw & Transformed)
|
|
</h6>
|
|
|
|
<!-- Tabel Rincian Kolom Database -->
|
|
<div class="table-responsive">
|
|
<table class="table table-bordered table-striped align-middle mb-0">
|
|
<thead class="table-light small text-uppercase">
|
|
<tr>
|
|
<th style="width: 35%;">Kriteria / Atribut</th>
|
|
<th>Nilai / Jawaban Inputan</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td class="fw-semibold text-muted small">Nilai Akademik</td>
|
|
<td class="fw-bold text-dark" id="detailNilai">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-semibold text-muted small">Minat Utama</td>
|
|
<td class="fw-bold text-dark" id="detailMinat">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-semibold text-muted small">Cita-Cita / Karir</td>
|
|
<td class="fw-bold text-dark" id="detailCitaCita">-</td>
|
|
</tr>
|
|
<tr>
|
|
<td class="fw-semibold text-muted small">Preferensi Studi</td>
|
|
<td class="fw-bold text-dark" id="detailPreferensi">-</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<div class="modal-footer bg-light border-0 py-2 px-4">
|
|
<button type="button" class="btn btn-secondary btn-sm rounded-pill px-4" data-bs-dismiss="modal">Tutup</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div> |