338 lines
19 KiB
PHP
338 lines
19 KiB
PHP
@extends('layout.main')
|
|
@push('style')
|
|
<style>
|
|
.fade-in { animation: fadeIn 0.4s ease-in-out; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.progress-bar { transition: width 1s ease-in-out; }
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts-head')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="content-body fade-in space-y-6">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">Akselerasi & Skala Up</h2>
|
|
<p class="text-gray-500 text-sm mt-1">Pengembangan Desa Percontohan, Replika Model, dan Pengarusutamaan Kebijakan</p>
|
|
</div>
|
|
<div class="flex gap-2">
|
|
<button class="bg-white border border-gray-200 text-gray-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 flex items-center gap-2 shadow-sm">
|
|
<i data-lucide="share-2" class="w-4 h-4"></i> Bagikan Laporan
|
|
</button>
|
|
<button class="bg-purple-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-purple-700 flex items-center gap-2 shadow-sm">
|
|
<i data-lucide="plus" class="w-4 h-4"></i> Catat Kunjungan
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 KPI Cards (Berdasarkan ToC Output Indicators Akselerasi) -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
<!-- KPI 1: Desa Percontohan -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Desa Percontohan</p>
|
|
<div class="p-2 rounded-md bg-purple-50 text-purple-600"><i data-lucide="map-pin" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">3 <span class="text-base font-normal text-gray-500">Desa Inti</span></h3>
|
|
<p class="text-xs text-gray-500 mt-1">Learning Villages beroperasi</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
|
<div class="h-1.5 rounded-full bg-purple-500 progress-bar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 2: Wilayah Replikasi Baru -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Wilayah Replikasi</p>
|
|
<div class="p-2 rounded-md bg-blue-50 text-blue-600"><i data-lucide="copy" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">12 <span class="text-base font-normal text-gray-500">Desa Baru</span></h3>
|
|
<p class="text-xs text-blue-600 font-medium mt-1 flex items-center gap-1">
|
|
<i data-lucide="trending-up" class="w-3 h-3"></i> Tersebar di 4 Kecamatan
|
|
</p>
|
|
<div class="mt-3 pt-3 border-t border-gray-50 flex justify-between text-xs text-gray-400">
|
|
<span>Adopsi Model Transformasi</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 3: Integrasi Kebijakan -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Integrasi Kebijakan</p>
|
|
<div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="book-open" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">8 <span class="text-base font-normal text-gray-500">Dokumen</span></h3>
|
|
<p class="text-xs text-gray-500 mt-1">Mengarusutamakan bioekonomi</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
|
<div class="h-1.5 rounded-full bg-amber-500 progress-bar" style="width: 80%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- KPI 4: Kunjungan Pembelajaran -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden">
|
|
<div class="flex justify-between items-start mb-2">
|
|
<p class="text-sm font-semibold text-gray-500">Kunjungan Eksternal</p>
|
|
<div class="p-2 rounded-md bg-emerald-50 text-emerald-600"><i data-lucide="users" class="w-5 h-5"></i></div>
|
|
</div>
|
|
<h3 class="text-2xl font-bold text-gray-800">25+ <span class="text-base font-normal text-gray-500">Instansi</span></h3>
|
|
<p class="text-xs text-emerald-600 font-medium mt-1 flex items-center gap-1">
|
|
<i data-lucide="globe" class="w-3 h-3"></i> Forum Diseminasi Regional
|
|
</p>
|
|
<div class="mt-3 pt-3 border-t border-gray-50 flex justify-between text-xs text-gray-400">
|
|
<span>Pusat rujukan pembelajaran</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Bagian Tengah: Widget Desa Percontohan & Chart Ekspansi -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- List Widget: Status Desa Percontohan -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 flex flex-col">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
|
<h3 class="text-lg font-bold text-gray-800">Status Desa Percontohan</h3>
|
|
<div class="p-1.5 bg-purple-50 text-purple-600 rounded"><i data-lucide="award" class="w-4 h-4"></i></div>
|
|
</div>
|
|
<div class="p-6 space-y-6 flex-1 overflow-y-auto">
|
|
<!-- Desa 1 -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h4 class="font-bold text-gray-900">Desa Radabata</h4>
|
|
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-[10px] font-bold">MATURE</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-2">Fokus: Agroforestri Kopi & Koperasi</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-green-500 progress-bar" style="width: 100%"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Desa 2 -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h4 class="font-bold text-gray-900">Desa Ubedolumolo</h4>
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-[10px] font-bold">SCALING UP</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-2">Fokus: Hilirisasi Vanili & Inklusi Pemuda</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-blue-500 progress-bar" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
<!-- Desa 3 -->
|
|
<div>
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h4 class="font-bold text-gray-900">Desa Beja</h4>
|
|
<span class="px-2 py-1 bg-amber-100 text-amber-700 rounded-full text-[10px] font-bold">INISIASI</span>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-2">Fokus: Kakao Terintegrasi & Pengolahan</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-amber-500 progress-bar" style="width: 40%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="p-4 border-t border-gray-100 bg-gray-50 rounded-b-xl text-center">
|
|
<a href="#" class="text-sm font-semibold text-purple-600 hover:text-purple-700">Lihat Modul Panduan Replikasi →</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 1: Ekspansi Wilayah (Bar Chart) -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2 flex flex-col">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h3 class="text-lg font-bold text-gray-800">Tren Replikasi Model (Kumulatif Desa)</h3>
|
|
<div class="p-1.5 bg-blue-50 text-blue-600 rounded"><i data-lucide="bar-chart-2" class="w-4 h-4"></i></div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-6">Pertumbuhan jumlah desa dan kecamatan yang mengadopsi model transformasi bioekonomi dari tahun ke tahun.</p>
|
|
<div class="flex-1 w-full relative min-h-[250px]">
|
|
<canvas id="chart-replikasi"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Row Bawah: Chart Kebijakan & Tabel Kunjungan -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Chart 2: Proporsi Dokumen Kebijakan -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 flex flex-col">
|
|
<div class="flex justify-between items-center mb-1">
|
|
<h3 class="text-lg font-bold text-gray-800">Dokumen Kebijakan</h3>
|
|
<div class="p-1.5 bg-amber-50 text-amber-600 rounded"><i data-lucide="pie-chart" class="w-4 h-4"></i></div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-4">Pengarusutamaan model di regulasi daerah</p>
|
|
<div class="flex-1 w-full relative flex justify-center items-center min-h-[200px]">
|
|
<canvas id="chart-kebijakan"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabel Logbook Kunjungan Eksternal -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden lg:col-span-2">
|
|
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-800">Logbook Forum & Kunjungan Pembelajaran</h3>
|
|
<p class="text-sm text-gray-500">Daftar instansi/wilayah yang melaksanakan studi banding ke Learning Villages.</p>
|
|
</div>
|
|
<button class="text-gray-400 hover:text-gray-600"><i data-lucide="more-horizontal" class="w-5 h-5"></i></button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr class="bg-gray-50 text-gray-500 text-sm">
|
|
<th class="p-4 font-semibold border-b border-gray-100">Tanggal</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Instansi / Asal Wilayah</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Desa Tujuan</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Fokus Pembelajaran</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Peserta</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="text-sm text-gray-700">
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 font-medium text-gray-500 whitespace-nowrap">12 Mei 2024</td>
|
|
<td class="p-4 font-bold text-gray-800">Pemkab Manggarai Timur</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-purple-50 text-purple-700 rounded text-xs">Radabata</span></td>
|
|
<td class="p-4">Pengembangan Koperasi Kopi & GAP</td>
|
|
<td class="p-4 text-center font-medium">15 Orang</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 font-medium text-gray-500 whitespace-nowrap">28 Apr 2024</td>
|
|
<td class="p-4 font-bold text-gray-800">Dinas Pertanian Provinsi NTT</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-purple-50 text-purple-700 rounded text-xs">Ubedolumolo</span></td>
|
|
<td class="p-4">Hilirisasi Vanili & Pemberdayaan Pemuda</td>
|
|
<td class="p-4 text-center font-medium">8 Orang</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 font-medium text-gray-500 whitespace-nowrap">05 Mar 2024</td>
|
|
<td class="p-4 font-bold text-gray-800">LSM Bina Desa Keerom (Papua)</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-purple-50 text-purple-700 rounded text-xs">Beja & Radabata</span></td>
|
|
<td class="p-4">Studi Model Transformasi Bioekonomi Menyeluruh</td>
|
|
<td class="p-4 text-center font-medium">12 Orang</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 font-medium text-gray-500 whitespace-nowrap">10 Feb 2024</td>
|
|
<td class="p-4 font-bold text-gray-800">Kementerian Desa PDTT</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-purple-50 text-purple-700 rounded text-xs">Radabata</span></td>
|
|
<td class="p-4">Evaluasi Model untuk Rujukan Nasional</td>
|
|
<td class="p-4 text-center font-medium">5 Orang</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// 1. Inisialisasi Icons
|
|
if(typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// 2. Chart 1: Tren Replikasi (Bar + Line Chart)
|
|
const ctxReplikasi = document.getElementById('chart-replikasi');
|
|
if (ctxReplikasi) {
|
|
new Chart(ctxReplikasi, {
|
|
type: 'bar',
|
|
data: {
|
|
labels: ['2021', '2022', '2023', '2024'],
|
|
datasets: [
|
|
{
|
|
label: 'Desa Mengadopsi (Realisasi)',
|
|
data: [0, 3, 8, 15], // Kumulatif: 3 Desa Inti + 12 Baru
|
|
backgroundColor: '#8b5cf6', // Purple-500
|
|
borderRadius: 4,
|
|
order: 2
|
|
},
|
|
{
|
|
label: 'Target Perluasan ToC',
|
|
type: 'line',
|
|
data: [3, 5, 10, 15],
|
|
borderColor: '#d946ef', // Fuchsia-500
|
|
backgroundColor: 'transparent',
|
|
borderWidth: 3,
|
|
borderDash: [5, 5],
|
|
tension: 0.3,
|
|
pointBackgroundColor: '#d946ef',
|
|
order: 1
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
maintainAspectRatio: false,
|
|
interaction: { mode: 'index', intersect: false },
|
|
scales: {
|
|
y: {
|
|
beginAtZero: true,
|
|
grid: { color: '#f3f4f6' },
|
|
ticks: { stepSize: 5 }
|
|
},
|
|
x: { grid: { display: false } }
|
|
},
|
|
plugins: {
|
|
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(ctx) {
|
|
return ctx.dataset.label + ': ' + ctx.raw + ' Desa';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 3. Chart 2: Komposisi Dokumen Kebijakan (Doughnut Chart)
|
|
const ctxKebijakan = document.getElementById('chart-kebijakan');
|
|
if (ctxKebijakan) {
|
|
new Chart(ctxKebijakan, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['RPJMDes Terintegrasi', 'Peraturan Desa (Perdes)', 'SK Bupati / Perbup', 'Dokumen Renstra Dinas'],
|
|
datasets: [{
|
|
data: [4, 2, 1, 1],
|
|
backgroundColor: [
|
|
'#f59e0b', // Amber-500
|
|
'#10b981', // Emerald-500
|
|
'#3b82f6', // Blue-500
|
|
'#8b5cf6' // Purple-500
|
|
],
|
|
borderWidth: 2,
|
|
borderColor: '#ffffff',
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
cutout: '70%',
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { usePointStyle: true, padding: 15, boxWidth: 8, font: { size: 11 } }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
});
|
|
</script>
|
|
@endpush |