252 lines
12 KiB
PHP
252 lines
12 KiB
PHP
@extends('layout.app')
|
|
|
|
@section('content')
|
|
|
|
<style>
|
|
.card-custom {
|
|
border: none;
|
|
border-radius: 12px;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.05);
|
|
transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
|
|
}
|
|
.card-custom:hover {
|
|
transform: translateY(-3px);
|
|
box-shadow: 0 8px 15px rgba(0,0,0,0.08);
|
|
}
|
|
.info-stats4 {
|
|
border: none !important;
|
|
border-radius: 12px;
|
|
background: #ffffff;
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.03);
|
|
transition: transform 0.2s;
|
|
}
|
|
.info-stats4:hover {
|
|
transform: translateY(-2px);
|
|
}
|
|
.table-modern td, .table-modern th {
|
|
vertical-align: middle !important;
|
|
border-top: none !important;
|
|
border-bottom: 1px solid #f1f3f5;
|
|
padding: 1rem 0.75rem;
|
|
}
|
|
.table-modern thead th {
|
|
color: #6c757d;
|
|
font-weight: 600;
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.5px;
|
|
border-bottom: 2px solid #e9ecef !important;
|
|
}
|
|
</style>
|
|
|
|
<div class="page-header">
|
|
<ol class="breadcrumb">
|
|
<li class="breadcrumb-item">Home</li>
|
|
<li class="breadcrumb-item active text-primary font-weight-bold">Ruang Kerja Verifikator</li>
|
|
</ol>
|
|
<div class="ml-auto">
|
|
<span class="badge badge-pill badge-primary px-3 py-2 shadow-sm">
|
|
<i class="icon-user mr-1"></i> {{ Auth::user()->nama_lengkap ?? 'Verifikator' }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- KOTAK INDIKATOR TUGAS VERIFIKATOR --}}
|
|
<div class="row gutters mb-3">
|
|
{{-- Card 1: Menunggu Verifikasi (Fokus Utama) --}}
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
|
|
<div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center" style="{{ $countPending > 0 ? 'border-left: 4px solid #ffc107 !important;' : '' }}">
|
|
<div class="d-flex align-items-center">
|
|
<div class="info-icon bg-light text-warning rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
|
|
<i class="icon-clock"></i>
|
|
</div>
|
|
<div class="sale-num">
|
|
<h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countPending }}</h4>
|
|
<p class="text-muted m-0" style="font-size: 0.8rem;">Menunggu Dicek</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 2: Dokumen Disetujui --}}
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
|
|
<div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="info-icon bg-light text-success rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
|
|
<i class="icon-check-circle"></i>
|
|
</div>
|
|
<div class="sale-num">
|
|
<h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countVerif }}</h4>
|
|
<p class="text-muted m-0" style="font-size: 0.8rem;">Dokumen Valid</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 3: Dokumen Ditolak --}}
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
|
|
<div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="info-icon bg-light text-danger rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
|
|
<i class="icon-x-circle"></i>
|
|
</div>
|
|
<div class="sale-num">
|
|
<h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countTolak }}</h4>
|
|
<p class="text-muted m-0" style="font-size: 0.8rem;">Dokumen Ditolak</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Card 4: Total Warga --}}
|
|
<div class="col-xl-3 col-lg-6 col-md-6 col-sm-6 col-12 mb-3">
|
|
<div class="info-stats4 p-3 h-100 d-flex flex-column justify-content-center">
|
|
<div class="d-flex align-items-center">
|
|
<div class="info-icon bg-light text-info rounded-circle m-0 mr-3" style="width: 40px; height: 40px; line-height: 40px; text-align: center; font-size: 1.2rem;">
|
|
<i class="icon-folder"></i>
|
|
</div>
|
|
<div class="sale-num">
|
|
<h4 class="mb-0 font-weight-bold" style="font-size: 1.2rem;">{{ $countWarga }}</h4>
|
|
<p class="text-muted m-0" style="font-size: 0.8rem;">Total Berkas Masuk</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row gutters mt-3">
|
|
{{-- BAGIAN KIRI: Antrean Tugas Verifikasi --}}
|
|
<div class="col-xl-8 col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
|
|
<div class="card card-custom h-100">
|
|
<div class="card-header bg-white pt-4 pb-3 border-bottom d-flex justify-content-between align-items-center">
|
|
<h6 class="card-title mb-0 font-weight-bold text-dark">
|
|
<i class="icon-clipboard text-warning mr-2"></i>Antrean Verifikasi Dokumen
|
|
</h6>
|
|
<a href="{{ route('verifikasi.index') }}" class="btn btn-sm btn-light text-primary font-weight-bold border shadow-sm px-3 rounded-pill">Lihat Detail</a>
|
|
</div>
|
|
<div class="card-body p-0">
|
|
<div class="table-responsive">
|
|
<table class="table table-hover table-modern m-0">
|
|
<thead class="bg-light">
|
|
<tr>
|
|
<th class="pl-4">Nama / NIK</th>
|
|
<th>Alamat Terdaftar</th>
|
|
<th>Waktu Pengajuan</th>
|
|
<th class="text-center">Aksi Cepat</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($wargaPendingList as $pending)
|
|
<tr>
|
|
<td class="pl-4">
|
|
<strong class="d-block text-dark" style="font-size: 0.95rem;">{{ $pending->nama }}</strong>
|
|
<small class="text-muted"><i class="icon-credit-card mr-1"></i>{{ $pending->nik }}</small>
|
|
</td>
|
|
<td>
|
|
<span class="text-dark">{{ $pending->alamat }}</span><br>
|
|
<small class="text-muted">RT {{ $pending->rt }} / RW {{ $pending->rw }}</small>
|
|
</td>
|
|
<td>
|
|
<span class="badge badge-light text-muted border">
|
|
{{ \Carbon\Carbon::parse($pending->created_at)->diffForHumans() }}
|
|
</span>
|
|
</td>
|
|
<td class="text-center">
|
|
{{-- Ganti href ini sesuai dengan route halaman detail/edit warga milikmu --}}
|
|
<a href="{{ route('verifikasi.show', $pending->id) }}" class="btn btn-sm btn-primary rounded-pill px-3 shadow-sm">Review Data</a>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="4" class="text-center py-5">
|
|
<div class="d-flex flex-column align-items-center justify-content-center">
|
|
<div class="bg-light rounded-circle d-flex justify-content-center align-items-center mb-3" style="width: 60px; height: 60px;">
|
|
<i class="icon-check text-success" style="font-size: 2rem;"></i>
|
|
</div>
|
|
<h6 class="font-weight-bold text-dark">Luar Biasa!</h6>
|
|
<p class="text-muted">Tidak ada antrean verifikasi saat ini. Semua dokumen warga sudah diproses.</p>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- BAGIAN KANAN: Grafik Progres Kerja Verifikator --}}
|
|
<div class="col-xl-4 col-lg-12 col-md-12 col-sm-12 col-12 mb-3">
|
|
<div class="card card-custom h-100">
|
|
<div class="card-header bg-white pt-4 pb-2 border-0">
|
|
<h6 class="card-title mb-0 font-weight-bold text-dark">
|
|
<i class="icon-pie-chart text-info mr-2"></i>Progres Kinerja
|
|
</h6>
|
|
</div>
|
|
<div class="card-body">
|
|
@if($countWarga == 0)
|
|
<div class="text-center py-5 text-muted">Belum ada berkas masuk sama sekali.</div>
|
|
@else
|
|
<div style="height: 250px; width: 100%; position: relative;">
|
|
<canvas id="kinerjaPieChart"></canvas>
|
|
</div>
|
|
|
|
{{-- Progress Bar Mini di Bawah Chart --}}
|
|
@php
|
|
$totalSelesai = $countVerif + $countTolak;
|
|
$persenSelesai = $countWarga > 0 ? round(($totalSelesai / $countWarga) * 100) : 0;
|
|
@endphp
|
|
<div class="mt-4 px-2">
|
|
<div class="d-flex justify-content-between mb-1">
|
|
<small class="font-weight-bold text-dark">Berkas Diproses</small>
|
|
<small class="text-success font-weight-bold">{{ $persenSelesai }}%</small>
|
|
</div>
|
|
<div class="progress progress-pill bg-light" style="height: 6px;">
|
|
<div class="progress-bar progress-pill bg-success" role="progressbar" style="width: {{ $persenSelesai }}%"></div>
|
|
</div>
|
|
<small class="text-muted d-block mt-2 text-center">{{ $totalSelesai }} dari {{ $countWarga }} berkas warga telah dicek.</small>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script>
|
|
// Chart: Doughnut Chart Khusus Verifikator
|
|
const ctx = document.getElementById('kinerjaPieChart').getContext('2d');
|
|
new Chart(ctx, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Valid', 'Menunggu', 'Ditolak'],
|
|
datasets: [{
|
|
data: [{{ $countVerif }}, {{ $countPending }}, {{ $countTolak }}],
|
|
backgroundColor: [
|
|
'rgba(40, 167, 69, 0.85)', // Success (Valid)
|
|
'rgba(255, 193, 7, 0.85)', // Warning (Pending)
|
|
'rgba(220, 53, 69, 0.85)' // Danger (Tolak)
|
|
],
|
|
borderWidth: 0,
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
cutout: '75%', // Donat lebih tipis dan modern
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { padding: 15, usePointStyle: true, pointStyle: 'circle', font: { size: 11 } }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
@endpush
|