330 lines
17 KiB
PHP
330 lines
17 KiB
PHP
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="">
|
|
<meta name="author" content="">
|
|
|
|
<title>Dashboard</title>
|
|
|
|
<!-- Custom fonts for this template-->
|
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
<link
|
|
href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
|
|
rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template-->
|
|
<link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
|
|
<body id="page-top">
|
|
|
|
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<title>Dashboard - E-Surat Desa</title>
|
|
|
|
<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
|
|
<link href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i" rel="stylesheet">
|
|
|
|
<link href="{{ asset('assets/css/sb-admin-2.min.css') }}" rel="stylesheet">
|
|
</head>
|
|
|
|
<body id="page-top">
|
|
|
|
<div id="wrapper">
|
|
@include('sidebar')
|
|
|
|
<div id="content-wrapper" class="d-flex flex-column">
|
|
<div id="content">
|
|
|
|
<nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
|
|
<button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
|
|
<i class="fa fa-bars"></i>
|
|
</button>
|
|
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item dropdown no-arrow mx-1">
|
|
<li class="nav-item dropdown no-arrow mx-1">
|
|
<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button"
|
|
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" onclick="hilangkanBadge()">
|
|
<i class="fas fa-bell fa-fw"></i>
|
|
@if(isset($totalMenungguSurat) && $totalMenungguSurat > 0)
|
|
<span id="badge-notif" class="badge badge-danger badge-counter">
|
|
{{ $totalMenungguSurat > 9 ? '9+' : $totalMenungguSurat }}
|
|
</span>
|
|
@endif
|
|
</a>
|
|
|
|
<div class="dropdown-list dropdown-menu dropdown-menu-right shadow animated--grow-in" aria-labelledby="alertsDropdown" style="width:360px !important;">
|
|
<h6 class="dropdown-header bg-primary border-primary text-white">
|
|
🔔 Notifikasi Masuk (Validasi & Surat)
|
|
</h6>
|
|
|
|
@if(isset($notifikasiTerbaru) && $notifikasiTerbaru->count() > 0)
|
|
@foreach($notifikasiTerbaru as $notif)
|
|
<a class="dropdown-item d-flex align-items-center border-bottom" href="{{ route($notif->rute) }}">
|
|
<div class="mr-3">
|
|
{{-- Ikon berubah warna sesuai jenis: Biru untuk Validasi, Kuning untuk Surat --}}
|
|
<div class="icon-circle {{ $notif->rute == 'validasi.index' ? 'bg-info' : 'bg-warning' }}">
|
|
<i class="fas {{ $notif->rute == 'validasi.index' ? 'fa-user-check' : 'fa-file-alt' }} text-white"></i>
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<div class="small text-gray-500">
|
|
{{ \Carbon\Carbon::parse($notif->created_at)->diffForHumans() }}
|
|
</div>
|
|
<span class="font-weight-bold">{{ $notif->name }}</span>
|
|
@if($notif->rute == 'validasi.index')
|
|
mengirim <span class="text-info">Data Validasi Baru</span>
|
|
@else
|
|
mengajukan <span class="text-primary">{{ $notif->tipe }}</span>
|
|
@endif
|
|
</div>
|
|
</a>
|
|
@endforeach
|
|
@else
|
|
<div class="dropdown-item text-center small text-gray-500 py-3">
|
|
Tidak ada aktivitas baru
|
|
</div>
|
|
@endif
|
|
|
|
<div class="dropdown-item text-center small text-gray-500 bg-light">
|
|
Silakan cek menu masing-masing untuk detail
|
|
</div>
|
|
</div>
|
|
</li>
|
|
|
|
<div class="topbar-divider d-none d-sm-block"></div>
|
|
|
|
<li class="nav-item d-flex align-items-center">
|
|
<a href="{{ route('profil') }}" class="d-flex align-items-center" style="text-decoration:none; gap:10px;">
|
|
{{-- Gambar diletakkan sebelum Nama agar berada di sebelah kiri --}}
|
|
<img src="{{ Auth::user()->foto ? asset('foto_profil/' . Auth::user()->foto) : 'https://bootdey.com/img/Content/avatar/avatar7.png' }}"
|
|
class="rounded-circle"
|
|
style="width:32px; height:32px; object-fit:cover; border: 1px solid #e3e6f0;"
|
|
alt="Profil">
|
|
|
|
{{-- Nama diletakkan setelah gambar --}}
|
|
<span class="d-none d-lg-inline text-gray-600 small font-weight-bold">
|
|
{{ Auth::user()->nama_lengkap ?? Auth::user()->username }}
|
|
</span>
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</nav>
|
|
|
|
<div class="container-fluid">
|
|
<div class="d-sm-flex align-items-center justify-content-between mb-4">
|
|
<h1 class="h3 mb-0 text-gray-800">Dashboard Admin</h1>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-primary shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-primary text-uppercase mb-1">Total Data KTP</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalValidasi ?? 0 }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-id-card fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-danger shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-danger text-uppercase mb-1">KTP Perlu Validasi</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalKtpMenunggu ?? 0 }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-user-check fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-info shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-info text-uppercase mb-1">Total Pengajuan Surat</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalPengajuan ?? 0 }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-file-signature fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-3 col-md-6 mb-4">
|
|
<div class="card border-left-warning shadow h-100 py-2">
|
|
<div class="card-body">
|
|
<div class="row no-gutters align-items-center">
|
|
<div class="col mr-2">
|
|
<div class="text-xs font-weight-bold text-warning text-uppercase mb-1">Surat Perlu Verifikasi</div>
|
|
<div class="h5 mb-0 font-weight-bold text-gray-800">{{ $totalMenungguSurat ?? 0 }}</div>
|
|
</div>
|
|
<div class="col-auto">
|
|
<i class="fas fa-clock fa-2x text-gray-300"></i>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row">
|
|
<div class="col-xl-8 col-lg-7">
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Grafik Aktivitas</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="height:320px;">
|
|
<canvas id="myBarChart"></canvas>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-xl-4 col-lg-5">
|
|
<div class="card shadow mb-4">
|
|
<div class="card-header py-3">
|
|
<h6 class="m-0 font-weight-bold text-primary">Persentase Status</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
<div style="height:300px">
|
|
<canvas id="myPieChart"></canvas>
|
|
</div>
|
|
<div class="mt-4 text-center small">
|
|
<span class="mr-2"><i class="fas fa-circle text-primary"></i> Data KTP</span>
|
|
<span class="mr-2"><i class="fas fa-circle text-info"></i> Pengajuan</span>
|
|
<span class="mr-2"><i class="fas fa-circle text-warning"></i> Menunggu</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
|
|
<script>
|
|
// 1. Fungsi Hilangkan Badge dengan Transisi Halus
|
|
function hilangkanBadge() {
|
|
const badge = document.getElementById('badge-notif');
|
|
if (badge) {
|
|
badge.style.transition = "opacity 0.5s ease";
|
|
badge.style.opacity = "0";
|
|
setTimeout(() => {
|
|
badge.style.display = 'none';
|
|
}, 500);
|
|
}
|
|
}
|
|
|
|
// 2. Gunakan jQuery NoConflict untuk menghindari bentrok dengan script lain
|
|
(function($) {
|
|
"use strict";
|
|
|
|
$(document).ready(function() {
|
|
// Paksa dropdown berfungsi jika klik biasa gagal
|
|
$('#alertsDropdown').on('click', function (e) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
|
|
// Panggil fungsi hilangkan badge
|
|
hilangkanBadge();
|
|
|
|
// Toggle menu dropdown secara manual
|
|
const $parent = $(this).parent();
|
|
const $menu = $(this).next('.dropdown-menu');
|
|
|
|
// Tutup dropdown lain yang mungkin sedang terbuka
|
|
$('.nav-item.dropdown').not($parent).removeClass('show');
|
|
$('.dropdown-menu').not($menu).removeClass('show');
|
|
|
|
// Buka/Tutup menu yang diklik
|
|
$parent.toggleClass('show');
|
|
$menu.toggleClass('show');
|
|
});
|
|
|
|
// Tutup dropdown jika klik di luar elemen lonceng
|
|
$(document).on('click', function (e) {
|
|
if (!$(e.target).closest('.nav-item.dropdown').length) {
|
|
$('.nav-item.dropdown, .dropdown-menu').removeClass('show');
|
|
}
|
|
});
|
|
});
|
|
})(jQuery);
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const dataStatistik = {
|
|
validasi: {{ $totalValidasi ?? 0 }},
|
|
pengajuan: {{ $totalPengajuan ?? 0 }},
|
|
menunggu: {{ $totalMenungguSurat ?? 0 }},
|
|
ktp_pending: {{ $totalKtpMenunggu ?? 0 }}
|
|
};
|
|
|
|
// Bar Chart
|
|
new Chart(document.getElementById('myBarChart'), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['Total KTP', 'Pengajuan Surat', 'Surat Pending', 'KTP Pending'],
|
|
datasets: [{
|
|
label: 'Jumlah',
|
|
data: [dataStatistik.validasi, dataStatistik.pengajuan, dataStatistik.menunggu, dataStatistik.ktp_pending],
|
|
backgroundColor: ['#4e73df', '#36b9cc', '#f6c23e', '#e74a3b']
|
|
}]
|
|
},
|
|
options: { responsive: true, maintainAspectRatio: false }
|
|
});
|
|
|
|
// Pie Chart
|
|
new Chart(document.getElementById('myPieChart'), {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['KTP', 'Pengajuan', 'Pending'],
|
|
datasets: [{
|
|
data: [dataStatistik.validasi, dataStatistik.pengajuan, dataStatistik.menunggu],
|
|
backgroundColor: ['#4e73df', '#36b9cc', '#f6c23e']
|
|
}]
|
|
},
|
|
options: { maintainAspectRatio: false, cutout: '70%' }
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html>
|
|
|
|
</body>
|
|
|
|
</html> |