312 lines
16 KiB
PHP
312 lines
16 KiB
PHP
@extends('layout.main')
|
|
|
|
@push('styles')
|
|
<style>
|
|
/* Animasi sederhana */
|
|
.fade-in { animation: fadeIn 0.4s ease-in-out; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
</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">Ringkasan M&E (Theory of Change)</h2>
|
|
<p class="text-gray-500 text-sm mt-1">Capaian Utama Transformasi Bioekonomi Desa Ngada</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">
|
|
<i data-lucide="download" class="w-4 h-4"></i> Export PDF
|
|
</button>
|
|
<button class="bg-green-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-green-700 flex items-center gap-2">
|
|
<i data-lucide="calendar" class="w-4 h-4"></i> Filter Tahun
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 4 Pilar ToC Cards -->
|
|
<!-- Catatan: Anda bisa mengganti class bg-white border dll dengan class '.card' bawaan Vuexy -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
|
|
<!-- Card 1: Resiliensi -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">1. Resiliensi</p>
|
|
<h3 class="text-3xl font-bold text-gray-800 mt-1">85%</h3>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-green-100 text-green-600">
|
|
<i data-lucide="leaf" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-3">Sistem Pertanian Tangguh Iklim</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-green-500" style="width: 85%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 2: Hilirisasi -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">2. Hilirisasi</p>
|
|
<h3 class="text-3xl font-bold text-gray-800 mt-1">60%</h3>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-amber-100 text-amber-600">
|
|
<i data-lucide="factory" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-3">Peningkatan Nilai Tambah</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-amber-500" style="width: 60%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 3: Koneksi -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">3. Koneksi</p>
|
|
<h3 class="text-3xl font-bold text-gray-800 mt-1">75%</h3>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-blue-100 text-blue-600">
|
|
<i data-lucide="network" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-3">Akses Pasar & Kelembagaan</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-blue-500" style="width: 75%"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Card 4: Akselerasi -->
|
|
<div class="bg-white p-5 rounded-xl shadow-sm border border-gray-100 relative overflow-hidden group">
|
|
<div class="flex justify-between items-start mb-4">
|
|
<div>
|
|
<p class="text-sm font-semibold text-gray-500">4. Akselerasi</p>
|
|
<h3 class="text-3xl font-bold text-gray-800 mt-1">40%</h3>
|
|
</div>
|
|
<div class="p-3 rounded-lg bg-purple-100 text-purple-600">
|
|
<i data-lucide="rocket" class="w-6 h-6"></i>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-500 mb-3">Replikasi & Kebijakan</p>
|
|
<div class="w-full bg-gray-100 rounded-full h-1.5">
|
|
<div class="h-1.5 rounded-full bg-purple-500" style="width: 40%"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Row 2: Charts -->
|
|
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|
|
|
<!-- Chart 1: Dampak Pendapatan (2/3 width) -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 lg:col-span-2">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
|
<i data-lucide="trending-up" class="w-5 h-5 text-green-600"></i> Dampak Peningkatan Pendapatan
|
|
</h3>
|
|
<span class="text-xs font-medium bg-green-50 text-green-700 px-2 py-1 rounded">2021 - 2024</span>
|
|
</div>
|
|
<p class="text-sm text-gray-500 mb-4">Perbandingan antara skenario tanpa intervensi (baseline) dengan pendapatan aktual setelah intervensi ToC.</p>
|
|
<div class="h-72 w-full relative">
|
|
<canvas id="chart-impact"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Chart 2: Komposisi Komoditas (1/3 width) -->
|
|
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
|
<h3 class="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2">
|
|
<i data-lucide="sprout" class="w-5 h-5 text-amber-700"></i> Distribusi Lahan
|
|
</h3>
|
|
<p class="text-sm text-gray-500 mb-4">Komposisi agroforestri berdasarkan 4 komoditas utama (Kopi, Vanili, Kakao, Kemiri).</p>
|
|
<div class="h-64 w-full relative flex justify-center items-center">
|
|
<canvas id="chart-commodity"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<!-- Row 3: Tabel Kinerja Cepat -->
|
|
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
|
<div class="p-6 border-b border-gray-100">
|
|
<h3 class="text-lg font-bold text-gray-800">Status Capaian Output Terkini</h3>
|
|
<p class="text-sm text-gray-500">Ringkasan matriks aktivitas berdasarkan indikator logframe.</p>
|
|
</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">Indikator Output</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100">Pilar ToC</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Target</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Realisasi</th>
|
|
<th class="p-4 font-semibold border-b border-gray-100 text-center">Status</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 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-green-100 flex items-center justify-center text-green-600"><i data-lucide="users" class="w-4 h-4"></i></div>
|
|
Petani dilatih GAP & Agroforestri
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Resiliensi</span></td>
|
|
<td class="p-4 text-center font-medium">1,500</td>
|
|
<td class="p-4 text-center font-bold text-green-600">1,245</td>
|
|
<td class="p-4 text-center">
|
|
<span class="px-2 py-1 bg-blue-100 text-blue-700 rounded-full text-xs font-semibold">On Track</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-amber-100 flex items-center justify-center text-amber-600"><i data-lucide="home" class="w-4 h-4"></i></div>
|
|
Unit Pengolahan Desa Dibangun
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Hilirisasi</span></td>
|
|
<td class="p-4 text-center font-medium">10</td>
|
|
<td class="p-4 text-center font-bold text-amber-600">8</td>
|
|
<td class="p-4 text-center">
|
|
<span class="px-2 py-1 bg-green-100 text-green-700 rounded-full text-xs font-semibold">Tercapai</span>
|
|
</td>
|
|
</tr>
|
|
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
|
<td class="p-4 flex items-center gap-3">
|
|
<div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center text-blue-600"><i data-lucide="handshake" class="w-4 h-4"></i></div>
|
|
Kontrak Offtaker (MoU)
|
|
</td>
|
|
<td class="p-4"><span class="px-2 py-1 bg-gray-100 rounded text-xs">Koneksi</span></td>
|
|
<td class="p-4 text-center font-medium">10</td>
|
|
<td class="p-4 text-center font-bold text-blue-600">5</td>
|
|
<td class="p-4 text-center">
|
|
<span class="px-2 py-1 bg-amber-100 text-amber-700 rounded-full text-xs font-semibold">Perlu Perhatian</span>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
|
|
// Inisialisasi Icons (Khusus Mockup, Vuexy mungkin pakai library icon sendiri seperti Tabler/FontAwesome)
|
|
if(typeof lucide !== 'undefined') {
|
|
lucide.createIcons();
|
|
}
|
|
|
|
// 1. Chart Dampak Pendapatan (Line/Area Chart)
|
|
const ctxImpact = document.getElementById('chart-impact');
|
|
if(ctxImpact) {
|
|
new Chart(ctxImpact, {
|
|
type: 'line',
|
|
data: {
|
|
labels: ['2021', '2022', '2023', '2024'],
|
|
datasets: [
|
|
{
|
|
label: 'Baseline (Tanpa Intervensi)',
|
|
data: [12, 12.5, 13, 13.5],
|
|
borderColor: '#9ca3af',
|
|
backgroundColor: 'transparent',
|
|
borderDash: [5, 5],
|
|
fill: false,
|
|
tension: 0.4
|
|
},
|
|
{
|
|
label: 'Pendapatan Aktual',
|
|
data: [12, 15, 22, 31],
|
|
borderColor: '#10b981',
|
|
backgroundColor: 'rgba(16, 185, 129, 0.15)', // Light green fill
|
|
fill: true,
|
|
tension: 0.4,
|
|
pointBackgroundColor: '#10b981',
|
|
pointBorderWidth: 2,
|
|
pointRadius: 4
|
|
}
|
|
]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
interaction: {
|
|
mode: 'index',
|
|
intersect: false,
|
|
},
|
|
scales: {
|
|
y: {
|
|
beginAtZero: false,
|
|
grid: { color: '#f3f4f6' },
|
|
ticks: { callback: function(val) { return 'Rp ' + val + 'M'; } }
|
|
},
|
|
x: {
|
|
grid: { display: false }
|
|
}
|
|
},
|
|
plugins: {
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(ctx) { return ctx.dataset.label + ': Rp ' + ctx.raw + ' Juta'; }
|
|
}
|
|
},
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { usePointStyle: true, boxWidth: 8 }
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
// 2. Chart Distribusi Komoditas (Doughnut Chart)
|
|
const ctxCommodity = document.getElementById('chart-commodity');
|
|
if(ctxCommodity) {
|
|
new Chart(ctxCommodity, {
|
|
type: 'doughnut',
|
|
data: {
|
|
labels: ['Kopi', 'Vanili', 'Kakao', 'Kemiri'],
|
|
datasets: [{
|
|
data: [45, 25, 15, 15],
|
|
backgroundColor: ['#6F4E37', '#eab308', '#D2691E', '#9ca3af'],
|
|
borderWidth: 2,
|
|
borderColor: '#ffffff',
|
|
hoverOffset: 4
|
|
}]
|
|
},
|
|
options: {
|
|
maintainAspectRatio: false,
|
|
responsive: true,
|
|
cutout: '65%', // Membuat lubang di tengah lebih besar
|
|
plugins: {
|
|
legend: {
|
|
position: 'bottom',
|
|
labels: { usePointStyle: true, padding: 20, boxWidth: 8 }
|
|
},
|
|
tooltip: {
|
|
callbacks: {
|
|
label: function(context) {
|
|
return ' ' + context.label + ': ' + context.raw + '%';
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
</script>
|
|
@endpush |