Update Dashboard & Logo
This commit is contained in:
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Web;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class AkselerasiDashboardController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('dashboard.akselerasi');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Web;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class HilirisasiDashboardController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('dashboard.hilirisasi');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Web;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class KonektivitasDashboardController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('dashboard.konektivitas');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Web;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class ResiliensiDashboardController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('dashboard.resiliensi');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,14 @@
|
||||
<?php
|
||||
|
||||
namespace App\Http\Controllers\Web;
|
||||
|
||||
use App\Http\Controllers\Controller;
|
||||
use Illuminate\Http\Request;
|
||||
|
||||
class SummaryDashboardController extends Controller
|
||||
{
|
||||
public function index()
|
||||
{
|
||||
return view('dashboard.summary');
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,338 @@
|
||||
@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
|
||||
@@ -0,0 +1,321 @@
|
||||
@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); }
|
||||
}
|
||||
/* Custom progress bar animation */
|
||||
.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">Hilirisasi & Nilai Tambah</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Pengembangan Unit Pengolahan, Pasca Panen & Inklusi Perempuan/Pemuda</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="download" class="w-4 h-4"></i> Unduh Laporan
|
||||
</button>
|
||||
<button class="bg-amber-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-amber-700 flex items-center gap-2 shadow-sm">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i> Input Data Pengolahan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 KPI Cards (Berdasarkan ToC Output Indicators Hilirisasi) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<!-- KPI 1: Unit Pengolahan -->
|
||||
<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">Unit Pengolahan Desa</p>
|
||||
<div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="factory" 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">Unit</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Target ToC: 10 Unit Dibangun</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 2: Kelompok Perempuan/Pemuda -->
|
||||
<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">Kelompok Usaha Aktif</p>
|
||||
<div class="p-2 rounded-md bg-orange-50 text-orange-600"><i data-lucide="users" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">15 <span class="text-base font-normal text-gray-500">Kelompok</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Fokus: Perempuan & Pemuda</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-orange-500 progress-bar" style="width: 75%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 3: Sertifikasi Produk -->
|
||||
<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">Sertifikasi Produk</p>
|
||||
<div class="p-2 rounded-md bg-yellow-50 text-yellow-600"><i data-lucide="award" 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">Izin/Sertifikat</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">PIRT, Halal, & Organik</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-yellow-500 progress-bar" style="width: 48%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 4: Volume Pengolahan Lokal -->
|
||||
<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">Volume Diolah Lokal</p>
|
||||
<div class="p-2 rounded-md bg-green-50 text-green-600"><i data-lucide="package-check" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">450 <span class="text-base font-normal text-gray-500">Ton</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Target ToC: 500 Ton per Tahun</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-green-500 progress-bar" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Charts Row: Dampak Harga & Tren Volume -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Chart 1: Perbandingan Harga Jual (Inti Hilirisasi) -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-bold text-gray-800">Perbandingan Harga Jual (Outcome)</h3>
|
||||
<div class="p-1.5 bg-amber-50 text-amber-600 rounded"><i data-lucide="coins" class="w-4 h-4"></i></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mb-6">Selisih nilai komoditas mentah (gelondong/basah) vs produk olahan (roasted/kering)</p>
|
||||
<div class="h-72 w-full relative">
|
||||
<canvas id="chart-price-comparison"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart 2: Tren Peningkatan Kapasitas Olahan -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-bold text-gray-800">Tren Volume Pengolahan (Ton)</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">Akumulasi produk turunan yang dihasilkan oleh Unit Pengolahan Desa per Kuartal</p>
|
||||
<div class="h-72 w-full relative">
|
||||
<canvas id="chart-processing-volume"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tabel Profil Unit Pengolahan -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-800">Profil Unit Pengolahan Desa (UPD)</h3>
|
||||
<p class="text-sm text-gray-500">Daftar kelompok usaha pengolahan dan status sertifikasi produk unggulan.</p>
|
||||
</div>
|
||||
<button class="text-sm text-amber-600 font-medium hover:text-amber-700">Manajemen UPD →</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">Nama Kelompok / UPD</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Lokasi Desa</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Fokus Komoditas</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Status Sertifikasi</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-right">Kapasitas/Bulan</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Inklusi</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-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-amber-100 text-amber-700 flex items-center justify-center"><i data-lucide="coffee" class="w-3 h-3"></i></div>
|
||||
KWT Kopi Radabata
|
||||
</td>
|
||||
<td class="p-4">Radabata</td>
|
||||
<td class="p-4">Kopi Bubuk & Roasted Bean</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">PIRT</span>
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">HALAL</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4 text-right font-medium">1.5 Ton</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 border border-pink-200 text-pink-700 bg-pink-50 rounded text-xs">Perempuan (100%)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
||||
<td class="p-4 font-medium text-gray-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-yellow-100 text-yellow-700 flex items-center justify-center"><i data-lucide="sun" class="w-3 h-3"></i></div>
|
||||
Pemuda Tani Vanili
|
||||
</td>
|
||||
<td class="p-4">Ubedolumolo</td>
|
||||
<td class="p-4">Vanili Kering (Curing)</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-[10px] font-bold">Proses</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4 text-right font-medium">0.2 Ton</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 border border-blue-200 text-blue-700 bg-blue-50 rounded text-xs">Pemuda (80%)</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
||||
<td class="p-4 font-medium text-gray-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-orange-100 text-orange-700 flex items-center justify-center"><i data-lucide="cookie" class="w-3 h-3"></i></div>
|
||||
UPD Kakao Beja
|
||||
</td>
|
||||
<td class="p-4">Beja</td>
|
||||
<td class="p-4">Biji Kakao Fermentasi</td>
|
||||
<td class="p-4 text-center">
|
||||
<div class="flex justify-center gap-1">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-[10px] font-bold">PIRT</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="p-4 text-right font-medium">2.0 Ton</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 border border-purple-200 text-purple-700 bg-purple-50 rounded text-xs">Campuran</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 1. Inisialisasi Icons
|
||||
if(typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 2. Chart 1: Perbandingan Harga Mentah vs Olahan (Bar Chart)
|
||||
const ctxPrice = document.getElementById('chart-price-comparison');
|
||||
if (ctxPrice) {
|
||||
new Chart(ctxPrice, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Kopi (kg)', 'Vanili (kg)', 'Kakao (kg)', 'Kemiri (kg)'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Mentah/Gelondong (Rp)',
|
||||
data: [35000, 200000, 25000, 15000],
|
||||
backgroundColor: '#9ca3af', // Gray
|
||||
borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 },
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.8
|
||||
},
|
||||
{
|
||||
label: 'Produk Olahan (Rp)',
|
||||
data: [120000, 1500000, 80000, 45000],
|
||||
backgroundColor: '#d97706', // Amber-600
|
||||
borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 },
|
||||
barPercentage: 0.6,
|
||||
categoryPercentage: 0.8
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true,
|
||||
grid: { color: '#f3f4f6' },
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
if (value >= 1000000) return 'Rp ' + (value/1000000) + ' Jt';
|
||||
if (value >= 1000) return 'Rp ' + (value/1000) + ' Rb';
|
||||
return 'Rp ' + value;
|
||||
}
|
||||
}
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'top', labels: { usePointStyle: true, boxWidth: 8 } },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(ctx) {
|
||||
return ctx.dataset.label + ': Rp ' + ctx.raw.toLocaleString('id-ID');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Chart 2: Tren Volume Pengolahan (Line/Area Chart)
|
||||
const ctxVolume = document.getElementById('chart-processing-volume');
|
||||
if (ctxVolume) {
|
||||
new Chart(ctxVolume, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024', 'Q2 2024'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Kopi Bubuk/Roasted',
|
||||
data: [12, 15, 18, 25, 30, 45],
|
||||
borderColor: '#6F4E37',
|
||||
backgroundColor: 'rgba(111, 78, 55, 0.1)',
|
||||
fill: true,
|
||||
tension: 0.4,
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'Kakao Fermentasi',
|
||||
data: [5, 8, 12, 15, 22, 28],
|
||||
borderColor: '#D2691E',
|
||||
backgroundColor: 'transparent',
|
||||
tension: 0.4,
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
y: {
|
||||
title: { display: true, text: 'Volume (Ton)' },
|
||||
grid: { color: '#f3f4f6' }
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,344 @@
|
||||
@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">Koneksi Pasar & Kelembagaan</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Penguatan Koperasi, BUMDes, Kemitraan Offtaker & Akses Pembiayaan</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="printer" class="w-4 h-4"></i> Cetak Ringkasan
|
||||
</button>
|
||||
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg text-sm font-medium hover:bg-blue-700 flex items-center gap-2 shadow-sm">
|
||||
<i data-lucide="handshake" class="w-4 h-4"></i> Tambah Mitra
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 KPI Cards (Berdasarkan ToC Output Indicators Koneksi) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<!-- KPI 1: Kelembagaan -->
|
||||
<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">Koperasi/BUMDes Aktif</p>
|
||||
<div class="p-2 rounded-md bg-blue-50 text-blue-600"><i data-lucide="building-2" 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">Lembaga</span></h3>
|
||||
<p class="text-xs text-green-600 font-medium mt-1 flex items-center gap-1">
|
||||
<i data-lucide="trending-up" class="w-3 h-3"></i> +3 Lembaga Baru
|
||||
</p>
|
||||
<div class="mt-3 pt-3 border-t border-gray-50 flex justify-between text-xs text-gray-400">
|
||||
<span>Target: 15</span>
|
||||
<span>80% Tercapai</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 2: Kemitraan Offtaker -->
|
||||
<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">Kontrak Offtaker (MoU)</p>
|
||||
<div class="p-2 rounded-md bg-emerald-50 text-emerald-600"><i data-lucide="file-signature" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">5 <span class="text-base font-normal text-gray-500">Perusahaan</span></h3>
|
||||
<p class="text-xs text-gray-500 mt-1">Pembeli skala besar & industri</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-emerald-500 progress-bar" style="width: 50%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 3: Transaksi Kolektif -->
|
||||
<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">Nilai Transaksi Kolektif</p>
|
||||
<div class="p-2 rounded-md bg-indigo-50 text-indigo-600"><i data-lucide="wallet" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">Rp 4.2 <span class="text-base font-normal text-gray-500">Miliar</span></h3>
|
||||
<p class="text-xs text-gray-500 mt-1">Akumulasi penjualan via lembaga</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-indigo-500 progress-bar" style="width: 85%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 4: Akses Pembiayaan -->
|
||||
<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">Akses Pembiayaan (KUR)</p>
|
||||
<div class="p-2 rounded-md bg-purple-50 text-purple-600"><i data-lucide="landmark" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">45% <span class="text-base font-normal text-gray-500">Petani</span></h3>
|
||||
<p class="text-xs text-green-600 font-medium mt-1 flex items-center gap-1">
|
||||
<i data-lucide="trending-up" class="w-3 h-3"></i> +15% vs Tahun Lalu
|
||||
</p>
|
||||
<div class="mt-3 pt-3 border-t border-gray-50 flex justify-between text-xs text-gray-400">
|
||||
<span>Mendapat kucuran dana</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Charts Row: Transisi Pasar & Tren Keuangan -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Chart 1: Transisi Pasar (Tengkulak vs Koperasi) -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-bold text-gray-800">Volume Penjualan: Tengkulak vs Kelembagaan</h3>
|
||||
<div class="p-1.5 bg-blue-50 text-blue-600 rounded"><i data-lucide="bar-chart-3" class="w-4 h-4"></i></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mb-6">Indikator keberhasilan memutus rantai pasok panjang dan peralihan ke Koperasi/Kemitraan (Ton)</p>
|
||||
<div class="h-72 w-full relative">
|
||||
<canvas id="chart-market-transition"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart 2: Pertumbuhan Nilai Transaksi per Komoditas -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<div class="flex justify-between items-center mb-1">
|
||||
<h3 class="text-lg font-bold text-gray-800">Nilai Transaksi Kolektif (Juta Rupiah)</h3>
|
||||
<div class="p-1.5 bg-indigo-50 text-indigo-600 rounded"><i data-lucide="line-chart" class="w-4 h-4"></i></div>
|
||||
</div>
|
||||
<p class="text-xs text-gray-500 mb-6">Pertumbuhan nilai ekonomi yang difasilitasi oleh BUMDes dan Koperasi per Kuartal</p>
|
||||
<div class="h-72 w-full relative">
|
||||
<canvas id="chart-transaction-value"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tabel Profil Kelembagaan & Kemitraan -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-800">Daftar Kelembagaan & Kemitraan Offtaker</h3>
|
||||
<p class="text-sm text-gray-500">Status kontrak dan performa BUMDes/Koperasi di setiap desa percontohan.</p>
|
||||
</div>
|
||||
<button class="text-sm text-blue-600 font-medium hover:text-blue-700">Manajemen Lembaga →</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">Nama Lembaga</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Desa</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Mitra Offtaker</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Anggota Aktif</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-right">Nilai Kontrak (Rp)</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Status MoU</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-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-blue-100 text-blue-700 flex items-center justify-center"><i data-lucide="building" class="w-3 h-3"></i></div>
|
||||
Koperasi Tani Mulus
|
||||
</td>
|
||||
<td class="p-4">Radabata</td>
|
||||
<td class="p-4">PT Indo Coffee Roasters</td>
|
||||
<td class="p-4 text-center">125 Petani</td>
|
||||
<td class="p-4 text-right font-medium text-gray-900">1.2 M</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-bold">Aktif</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
||||
<td class="p-4 font-medium text-gray-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-emerald-100 text-emerald-700 flex items-center justify-center"><i data-lucide="store" class="w-3 h-3"></i></div>
|
||||
BUMDes Maju Bersama
|
||||
</td>
|
||||
<td class="p-4">Ubedolumolo</td>
|
||||
<td class="p-4">Vanilla Ekspor Jabar</td>
|
||||
<td class="p-4 text-center">80 Petani</td>
|
||||
<td class="p-4 text-right font-medium text-gray-900">850 Jt</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-bold">Aktif</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
||||
<td class="p-4 font-medium text-gray-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-blue-100 text-blue-700 flex items-center justify-center"><i data-lucide="building" class="w-3 h-3"></i></div>
|
||||
Koperasi Kakao Beja
|
||||
</td>
|
||||
<td class="p-4">Beja</td>
|
||||
<td class="p-4">PT Cokelat Nusantara</td>
|
||||
<td class="p-4 text-center">150 Petani</td>
|
||||
<td class="p-4 text-right font-medium text-gray-900">2.1 M</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-bold">Negosiasi</span>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50 transition-colors">
|
||||
<td class="p-4 font-medium text-gray-900 flex items-center gap-2">
|
||||
<div class="w-6 h-6 rounded bg-emerald-100 text-emerald-700 flex items-center justify-center"><i data-lucide="store" class="w-3 h-3"></i></div>
|
||||
BUMDes Kemiri Jaya
|
||||
</td>
|
||||
<td class="p-4">Naru</td>
|
||||
<td class="p-4">CV Rempah Global</td>
|
||||
<td class="p-4 text-center">65 Petani</td>
|
||||
<td class="p-4 text-right font-medium text-gray-900">450 Jt</td>
|
||||
<td class="p-4 text-center">
|
||||
<span class="px-2 py-1 bg-gray-100 text-gray-600 rounded text-xs font-bold">Kadaluarsa</span>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 1. Inisialisasi Icons
|
||||
if(typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 2. Chart 1: Transisi Pasar (Stacked Bar Chart + Line)
|
||||
const ctxMarket = document.getElementById('chart-market-transition');
|
||||
if (ctxMarket) {
|
||||
new Chart(ctxMarket, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['2021', '2022', '2023', '2024'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Produksi Lahan (Ton)',
|
||||
type: 'line',
|
||||
data: [100, 110, 125, 145],
|
||||
borderColor: '#10b981', // Emerald-500
|
||||
backgroundColor: '#10b981',
|
||||
borderWidth: 3,
|
||||
tension: 0.3,
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: 'Tengkulak / Pasar Bebas',
|
||||
data: [80, 65, 40, 25],
|
||||
backgroundColor: '#ef4444', // Red-500
|
||||
stack: 'Stack 0',
|
||||
borderRadius: { topLeft: 0, topRight: 0, bottomLeft: 4, bottomRight: 4 }
|
||||
},
|
||||
{
|
||||
label: 'Kelembagaan (Koperasi/BUMDes)',
|
||||
data: [20, 45, 85, 120],
|
||||
backgroundColor: '#3b82f6', // Blue-500
|
||||
stack: 'Stack 0',
|
||||
borderRadius: { topLeft: 4, topRight: 4, bottomLeft: 0, bottomRight: 0 }
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
y: {
|
||||
stacked: true,
|
||||
beginAtZero: true,
|
||||
grid: { color: '#f3f4f6' }
|
||||
},
|
||||
x: {
|
||||
stacked: true,
|
||||
grid: { display: false }
|
||||
}
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(ctx) {
|
||||
return ctx.dataset.label + ': ' + ctx.raw + ' Ton';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 3. Chart 2: Nilai Transaksi Kolektif (Line/Area Chart)
|
||||
const ctxTransaction = document.getElementById('chart-transaction-value');
|
||||
if (ctxTransaction) {
|
||||
new Chart(ctxTransaction, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['Q1 2023', 'Q2 2023', 'Q3 2023', 'Q4 2023', 'Q1 2024', 'Q2 2024'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Kopi & Kakao',
|
||||
data: [150, 280, 320, 500, 650, 850],
|
||||
borderColor: '#6F4E37',
|
||||
backgroundColor: 'transparent',
|
||||
tension: 0.4,
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#6F4E37'
|
||||
},
|
||||
{
|
||||
label: 'Vanili & Kemiri',
|
||||
data: [50, 120, 210, 350, 420, 600],
|
||||
borderColor: '#eab308',
|
||||
backgroundColor: 'transparent',
|
||||
tension: 0.4,
|
||||
borderWidth: 2,
|
||||
pointBackgroundColor: '#eab308'
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
y: {
|
||||
title: { display: false },
|
||||
grid: { color: '#f3f4f6' },
|
||||
ticks: {
|
||||
callback: function(value) {
|
||||
return 'Rp ' + value + ' Jt';
|
||||
}
|
||||
}
|
||||
},
|
||||
x: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } },
|
||||
tooltip: {
|
||||
callbacks: {
|
||||
label: function(ctx) {
|
||||
return ctx.dataset.label + ': Rp ' + ctx.raw + ' Juta';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,513 @@
|
||||
@extends('layout.main')
|
||||
@section('styles')
|
||||
<style>
|
||||
/* Animasi sederhana yang Anda pilih */
|
||||
.fade-in { animation: fadeIn 0.4s ease-in-out; }
|
||||
@keyframes fadeIn {
|
||||
from { opacity: 0; transform: translateY(10px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
}
|
||||
|
||||
/* Tambahan styling untuk peta interaktif */
|
||||
.map-polygon {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.map-polygon:hover {
|
||||
fill-opacity: 0.5;
|
||||
stroke-width: 2;
|
||||
}
|
||||
.map-point {
|
||||
transition: all 0.3s ease;
|
||||
cursor: pointer;
|
||||
}
|
||||
.map-point:hover {
|
||||
r: 4;
|
||||
stroke: #1f2937;
|
||||
stroke-width: 1.5;
|
||||
}
|
||||
</style>
|
||||
@endsection
|
||||
|
||||
@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">Resiliensi & Produksi Pertanian</h2>
|
||||
<p class="text-gray-500 text-sm mt-1">Pengembangan Agroforestry Polikultur Adaptif Iklim & Praktik GAP</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="map" class="w-4 h-4"></i> Mode Pemetaan
|
||||
</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 shadow-sm">
|
||||
<i data-lucide="plus" class="w-4 h-4"></i> Tambah Data Lahan
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 4 KPI Cards (Berdasarkan ToC Outcome & Output Indicators) -->
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
||||
|
||||
<!-- KPI 1: Adopsi Praktik -->
|
||||
<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">Adopsi Iklim Cerdas</p>
|
||||
<div class="p-2 rounded-md bg-green-50 text-green-600"><i data-lucide="sprout" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">78%</h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Target ToC: 85% Petani Menerapkan GAP</p>
|
||||
<div class="mt-4 flex items-center gap-2 text-sm text-green-600 font-medium">
|
||||
<i data-lucide="trending-up" class="w-4 h-4"></i> +12% dari tahun lalu
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 2: Petani Dilatih -->
|
||||
<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">Petani Dilatih GAP</p>
|
||||
<div class="p-2 rounded-md bg-blue-50 text-blue-600"><i data-lucide="users" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">1,245 <span class="text-base font-normal text-gray-500">Orang</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Output Indicator: Target 1,500 Petani</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-blue-500" style="width: 83%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 3: Bibit Ditanam -->
|
||||
<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">Bibit & Pohon Pelindung</p>
|
||||
<div class="p-2 rounded-md bg-amber-50 text-amber-600"><i data-lucide="trees" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">45.2K <span class="text-base font-normal text-gray-500">Pohon</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Output Indicator: Didistribusikan & Ditanam</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" style="width: 90%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- KPI 4: Infrastruktur Konservasi -->
|
||||
<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">Unit Infrastruktur Air</p>
|
||||
<div class="p-2 rounded-md bg-cyan-50 text-cyan-600"><i data-lucide="droplet" class="w-5 h-5"></i></div>
|
||||
</div>
|
||||
<h3 class="text-2xl font-bold text-gray-800">34 <span class="text-base font-normal text-gray-500">Unit</span></h3>
|
||||
<p class="text-xs text-gray-400 mt-1">Output: Irigasi mikro & panen air</p>
|
||||
<div class="w-full bg-gray-100 rounded-full h-1.5 mt-4">
|
||||
<div class="h-1.5 rounded-full bg-cyan-500" style="width: 68%"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Pemetaan Spasial Section (Fitur Utama M&E Lapangan) -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
||||
|
||||
<!-- Peta -->
|
||||
<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-4">
|
||||
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
<i data-lucide="map" class="w-5 h-5 text-blue-600"></i> Peta Interaktif Sebaran Lahan & Tanaman
|
||||
</h3>
|
||||
<span class="bg-blue-50 text-blue-600 text-xs px-2 py-1 rounded font-medium">Live M&E</span>
|
||||
</div>
|
||||
<p class="text-sm text-gray-500 mb-4">Peta spasial tingkat lahan. Klik pada poligon hijau/biru untuk melihat data KK, atau klik titik tanaman untuk melihat riwayat intervensi.</p>
|
||||
|
||||
<div class="flex-1 bg-[#f8fafc] rounded-lg border border-gray-200 relative overflow-hidden flex items-center justify-center min-h-[400px]">
|
||||
<!-- Canvas SVG Mockup untuk Poligon & Titik -->
|
||||
<svg viewBox="0 0 200 120" class="w-full h-full max-h-[400px]" id="map-svg-resiliensi">
|
||||
<pattern id="grid-pattern" width="10" height="10" patternUnits="userSpaceOnUse">
|
||||
<path d="M 10 0 L 0 0 0 10" fill="none" stroke="#e2e8f0" stroke-width="0.5" />
|
||||
</pattern>
|
||||
<rect width="100%" height="100%" fill="url(#grid-pattern)" />
|
||||
<!-- Area akan di-generate via JavaScript -->
|
||||
</svg>
|
||||
|
||||
<!-- Legenda Peta -->
|
||||
<div class="absolute bottom-3 left-3 bg-white/95 p-3 rounded-lg text-xs border border-gray-200 shadow-sm backdrop-blur-sm">
|
||||
<div class="font-bold text-gray-700 mb-2">Legenda Tanaman:</div>
|
||||
<div class="grid grid-cols-2 gap-x-4 gap-y-2">
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#6F4E37] rounded-full shadow-sm"></div> Kopi</div>
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#eab308] rounded-full shadow-sm"></div> Vanili</div>
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#D2691E] rounded-full shadow-sm"></div> Kakao</div>
|
||||
<div class="flex items-center gap-2"><div class="w-3 h-3 bg-[#9ca3af] rounded-full shadow-sm"></div> Kemiri</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Detail Panel -->
|
||||
<div class="bg-gray-50 p-0 rounded-xl shadow-sm border border-gray-200 flex flex-col overflow-hidden">
|
||||
<div class="bg-white p-5 border-b border-gray-200">
|
||||
<h3 class="text-lg font-bold text-gray-800 flex items-center gap-2">
|
||||
<i data-lucide="file-search" class="w-5 h-5 text-gray-600"></i> Detail Inspeksi Lahan
|
||||
</h3>
|
||||
</div>
|
||||
<div class="flex-1 p-5 overflow-y-auto" id="map-detail-panel">
|
||||
<!-- Default Empty State -->
|
||||
<div class="h-full flex flex-col items-center justify-center text-gray-400 text-center space-y-3 mt-10">
|
||||
<div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-2">
|
||||
<i data-lucide="mouse-pointer-click" class="w-8 h-8 text-gray-300"></i>
|
||||
</div>
|
||||
<p class="text-sm">Pilih poligon lahan atau titik tanaman pada peta untuk memuat data evaluasi kesejahteraan & intervensi.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Charts Row: Produktivitas & Distribusi Bibit -->
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
|
||||
<!-- Chart 1: Produktivitas Lahan -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-1">Tingkat Produktivitas per Ha (Outcome)</h3>
|
||||
<p class="text-xs text-gray-500 mb-6">Peningkatan tonase pasca adopsi Agroforestri Iklim Cerdas</p>
|
||||
<div class="h-64 w-full relative">
|
||||
<canvas id="chart-productivity"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Chart 2: Capaian Distribusi Bibit -->
|
||||
<div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100">
|
||||
<h3 class="text-lg font-bold text-gray-800 mb-1">Distribusi Bibit & Pohon Pelindung (Output)</h3>
|
||||
<p class="text-xs text-gray-500 mb-6">Akumulasi tanaman yang didistribusikan per komoditas utama</p>
|
||||
<div class="h-64 w-full relative">
|
||||
<canvas id="chart-seedlings"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Tabel Logbook Desa -->
|
||||
<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
|
||||
<div class="p-6 border-b border-gray-100 flex justify-between items-center">
|
||||
<div>
|
||||
<h3 class="text-lg font-bold text-gray-800">Capaian Intervensi per Desa</h3>
|
||||
<p class="text-sm text-gray-500">Rincian agregat tingkat desa untuk komponen resiliensi (MoA/FAO framework).</p>
|
||||
</div>
|
||||
<button class="text-sm text-green-600 font-medium hover:text-green-700">Lihat Semua Data →</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">Nama Desa</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Total Petani GAP</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Luas Agroforestri (Ha)</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Infrastruktur Air</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100 text-center">Indeks Tanah</th>
|
||||
<th class="p-4 font-semibold border-b border-gray-100">Status Hama</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody class="text-sm text-gray-700">
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
||||
<td class="p-4 font-medium text-gray-900">Radabata</td>
|
||||
<td class="p-4">450 Orang</td>
|
||||
<td class="p-4">320 Ha</td>
|
||||
<td class="p-4 text-center">12 Unit</td>
|
||||
<td class="p-4 text-center"><span class="text-green-600 font-bold">Baik (+0.8)</span></td>
|
||||
<td class="p-4"><span class="px-2 py-1 bg-green-100 text-green-700 rounded text-xs font-semibold">Menurun</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
||||
<td class="p-4 font-medium text-gray-900">Ubedolumolo</td>
|
||||
<td class="p-4">385 Orang</td>
|
||||
<td class="p-4">215 Ha</td>
|
||||
<td class="p-4 text-center">8 Unit</td>
|
||||
<td class="p-4 text-center"><span class="text-green-600 font-bold">Cukup (+0.4)</span></td>
|
||||
<td class="p-4"><span class="px-2 py-1 bg-amber-100 text-amber-700 rounded text-xs font-semibold">Terkendali</span></td>
|
||||
</tr>
|
||||
<tr class="hover:bg-gray-50 border-b border-gray-50">
|
||||
<td class="p-4 font-medium text-gray-900">Beja</td>
|
||||
<td class="p-4">210 Orang</td>
|
||||
<td class="p-4">150 Ha</td>
|
||||
<td class="p-4 text-center">14 Unit</td>
|
||||
<td class="p-4 text-center"><span class="text-amber-600 font-bold">Sedang (0.0)</span></td>
|
||||
<td class="p-4"><span class="px-2 py-1 bg-red-100 text-red-700 rounded text-xs font-semibold">Waspada</span></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
|
||||
@push('scripts')
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
|
||||
// 1. Inisialisasi Icons
|
||||
if(typeof lucide !== 'undefined') {
|
||||
lucide.createIcons();
|
||||
}
|
||||
|
||||
// 2. Data Spasial Lahan (Mockup JSON untuk Peta)
|
||||
const spatialData = [
|
||||
{
|
||||
id: 'L-001', owner: 'Yosef Neta', familySize: 5, area: '1.2 Ha', village: 'Radabata',
|
||||
polygon: "15,25 75,15 90,85 20,70", fill: "rgba(34, 197, 94, 0.15)", stroke: "#16a34a",
|
||||
plants: [
|
||||
{ id: 'P-01', type: 'Kopi', cx: 35, cy: 35, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemupukan Organik (Okt 2023)', panen: '45 kg/musim', color: '#6F4E37' },
|
||||
{ id: 'P-02', type: 'Vanili', cx: 65, cy: 45, planted: 'Jan 2022', status: 'Berbunga', intervensi: 'Pelatihan Polinasi (Feb 2024)', panen: 'Belum panen', color: '#eab308' },
|
||||
{ id: 'P-03', type: 'Kopi', cx: 50, cy: 65, planted: 'Mei 2021', status: 'Produktif', intervensi: 'Pemangkasan (Nov 2023)', panen: '40 kg/musim', color: '#6F4E37' },
|
||||
]
|
||||
},
|
||||
{
|
||||
id: 'L-002', owner: 'Maria Goreti', familySize: 3, area: '0.8 Ha', village: 'Ubedolumolo',
|
||||
polygon: "110,40 170,15 190,65 125,85", fill: "rgba(59, 130, 246, 0.15)", stroke: "#2563eb",
|
||||
plants: [
|
||||
{ id: 'P-04', type: 'Kemiri', cx: 140, cy: 45, planted: 'Agu 2018', status: 'Produktif', intervensi: 'Pembersihan Gulma', panen: '120 kg/musim', color: '#9ca3af' },
|
||||
{ id: 'P-05', type: 'Kakao', cx: 165, cy: 55, planted: 'Okt 2020', status: 'Terserang Hama', intervensi: 'Penyemprotan Bio-pestisida (Jan 2024)', panen: '20 kg/musim', color: '#D2691E' },
|
||||
]
|
||||
}
|
||||
];
|
||||
|
||||
// 3. Render Peta Interaktif
|
||||
function renderMap() {
|
||||
const svg = document.getElementById('map-svg-resiliensi');
|
||||
let htmlContent = svg.innerHTML; // Keep grid pattern
|
||||
|
||||
spatialData.forEach((lahan, lIdx) => {
|
||||
let groupHtml = `<g class="group">`;
|
||||
|
||||
// Render Polygon
|
||||
groupHtml += `
|
||||
<polygon
|
||||
points="${lahan.polygon}"
|
||||
fill="${lahan.fill}"
|
||||
stroke="${lahan.stroke}"
|
||||
stroke-width="1.5"
|
||||
class="map-polygon"
|
||||
onclick="handleMapClick('lahan', ${lIdx}, null, event)">
|
||||
</polygon>`;
|
||||
|
||||
// Render Label Pemilik
|
||||
const firstCoord = lahan.polygon.split(' ')[0].split(',');
|
||||
groupHtml += `<text x="${firstCoord[0]}" y="${firstCoord[1] - 4}" font-size="5" font-weight="bold" fill="#374151" class="pointer-events-none drop-shadow-sm">${lahan.owner}</text>`;
|
||||
|
||||
// Render Titik Tanaman
|
||||
lahan.plants.forEach((plant, pIdx) => {
|
||||
groupHtml += `
|
||||
<circle
|
||||
cx="${plant.cx}" cy="${plant.cy}" r="2.5"
|
||||
fill="${plant.color}" stroke="#ffffff" stroke-width="0.8"
|
||||
class="map-point"
|
||||
onclick="handleMapClick('plant', ${lIdx}, ${pIdx}, event)">
|
||||
<title>${plant.type} - ${plant.status}</title>
|
||||
</circle>`;
|
||||
});
|
||||
|
||||
groupHtml += `</g>`;
|
||||
htmlContent += groupHtml;
|
||||
});
|
||||
svg.innerHTML = htmlContent;
|
||||
}
|
||||
|
||||
// Expose function to global scope for onclick handler
|
||||
window.handleMapClick = function(type, lahanIdx, plantIdx, event) {
|
||||
event.stopPropagation();
|
||||
const panel = document.getElementById('map-detail-panel');
|
||||
const lahan = spatialData[lahanIdx];
|
||||
|
||||
if (type === 'lahan') {
|
||||
// Tampilan Data Lahan (Keluarga & Daftar Komoditas)
|
||||
let komoditasHtml = '';
|
||||
lahan.plants.forEach(p => {
|
||||
const statusBadge = p.status === 'Produktif' ? 'bg-green-100 text-green-700' : (p.status === 'Berbunga' ? 'bg-blue-100 text-blue-700' : 'bg-red-100 text-red-700');
|
||||
komoditasHtml += `
|
||||
<div class="flex justify-between items-center py-2 border-b border-gray-50 last:border-0">
|
||||
<div class="flex items-center gap-2">
|
||||
<div class="w-2.5 h-2.5 rounded-full" style="background-color: ${p.color}"></div>
|
||||
<span class="text-sm font-medium text-gray-700">${p.type}</span>
|
||||
</div>
|
||||
<span class="text-xs px-2 py-1 rounded-full ${statusBadge}">${p.status}</span>
|
||||
</div>`;
|
||||
});
|
||||
|
||||
panel.innerHTML = `
|
||||
<div class="fade-in">
|
||||
<div class="flex items-center gap-3 mb-4">
|
||||
<div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center text-blue-700">
|
||||
<i data-lucide="user" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-bold text-gray-900">${lahan.owner}</h4>
|
||||
<p class="text-xs text-gray-500 flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> Desa ${lahan.village}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-3 mb-5">
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
||||
<span class="text-xs text-gray-500 block mb-1">Luas Poligon Lahan</span>
|
||||
<span class="font-bold text-gray-800">${lahan.area}</span>
|
||||
</div>
|
||||
<div class="bg-gray-50 p-3 rounded-lg border border-gray-100">
|
||||
<span class="text-xs text-gray-500 block mb-1">Tanggungan Anggota KK</span>
|
||||
<span class="font-bold text-gray-800">${lahan.familySize} Jiwa</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h5 class="text-sm font-bold text-gray-800 mb-2 border-b border-gray-100 pb-2">Diversifikasi Tanaman (Polikultur)</h5>
|
||||
<div class="bg-white rounded-lg border border-gray-100 p-2">
|
||||
${komoditasHtml}
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
} else if (type === 'plant') {
|
||||
// Tampilan Detail Tanaman (Riwayat Intervensi)
|
||||
const plant = lahan.plants[plantIdx];
|
||||
const statusBg = plant.status === 'Produktif' ? 'bg-green-50' : (plant.status === 'Berbunga' ? 'bg-blue-50' : 'bg-red-50');
|
||||
const statusText = plant.status === 'Produktif' ? 'text-green-700' : (plant.status === 'Berbunga' ? 'text-blue-700' : 'text-red-700');
|
||||
|
||||
panel.innerHTML = `
|
||||
<div class="fade-in">
|
||||
<div class="p-4 rounded-lg mb-4 flex justify-between items-start border border-gray-100 ${statusBg}">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-1">
|
||||
<div class="w-3 h-3 rounded-full" style="background-color: ${plant.color}"></div>
|
||||
<h4 class="font-bold text-gray-900">Tanaman ${plant.type}</h4>
|
||||
</div>
|
||||
<p class="text-xs text-gray-600">Pemilik Lahan: ${lahan.owner}</p>
|
||||
</div>
|
||||
<span class="text-xs font-bold px-2 py-1 bg-white rounded-md shadow-sm ${statusText}">${plant.status}</span>
|
||||
</div>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Profil Tanaman</p>
|
||||
<div class="bg-white p-3 rounded-lg border border-gray-100 flex justify-between items-center">
|
||||
<span class="text-sm text-gray-600">Bulan/Tahun Tanam</span>
|
||||
<span class="text-sm font-bold text-gray-900">${plant.planted}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Riwayat Intervensi M&E</p>
|
||||
<div class="bg-white p-3 rounded-lg border border-gray-100 border-l-4 border-l-green-500">
|
||||
<p class="text-sm font-medium text-gray-800">${plant.intervensi}</p>
|
||||
<p class="text-xs text-gray-400 mt-1">Sesuai standar Good Agricultural Practices</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p class="text-xs text-gray-500 mb-1 uppercase tracking-wider font-semibold">Kinerja Panen Terakhir</p>
|
||||
<div class="bg-white p-3 rounded-lg border border-gray-100 flex items-center gap-3">
|
||||
<div class="w-10 h-10 rounded-full bg-amber-100 flex items-center justify-center text-amber-600">
|
||||
<i data-lucide="scale" class="w-5 h-5"></i>
|
||||
</div>
|
||||
<div>
|
||||
<span class="block text-xl font-bold text-gray-900">${plant.panen}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}
|
||||
lucide.createIcons(); // re-init ikon untuk konten baru
|
||||
};
|
||||
|
||||
renderMap(); // Jalankan render awal
|
||||
|
||||
// 4. Inisialisasi Chart.js
|
||||
|
||||
// Chart 1: Tren Produktivitas Lahan (Line Chart)
|
||||
const ctxProd = document.getElementById('chart-productivity');
|
||||
if (ctxProd) {
|
||||
new Chart(ctxProd, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: ['2021 (Baseline)', '2022', '2023', '2024 (Target)'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Kopi',
|
||||
data: [0.5, 0.7, 1.1, 1.5],
|
||||
borderColor: '#6F4E37',
|
||||
backgroundColor: '#6F4E37',
|
||||
tension: 0.3,
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'Vanili',
|
||||
data: [0.1, 0.15, 0.3, 0.5],
|
||||
borderColor: '#eab308',
|
||||
backgroundColor: '#eab308',
|
||||
tension: 0.3,
|
||||
borderWidth: 2
|
||||
},
|
||||
{
|
||||
label: 'Kakao',
|
||||
data: [0.4, 0.5, 0.8, 1.2],
|
||||
borderColor: '#D2691E',
|
||||
backgroundColor: '#D2691E',
|
||||
tension: 0.3,
|
||||
borderWidth: 2
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
interaction: { mode: 'index', intersect: false },
|
||||
scales: {
|
||||
y: { title: { display: true, text: 'Ton per Hektar (Ton/Ha)' }, grid: { color: '#f3f4f6' } },
|
||||
x: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { position: 'bottom', labels: { usePointStyle: true, boxWidth: 8 } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Chart 2: Distribusi Bibit & Pohon (Bar Chart)
|
||||
const ctxSeed = document.getElementById('chart-seedlings');
|
||||
if (ctxSeed) {
|
||||
new Chart(ctxSeed, {
|
||||
type: 'bar',
|
||||
data: {
|
||||
labels: ['Kopi Arabika', 'Vanili Alor', 'Kakao Klon', 'Kemiri Sunan', 'Pohon Pelindung (Lamtoro/Sengon)'],
|
||||
datasets: [
|
||||
{
|
||||
label: 'Jumlah Bibit Didistribusikan',
|
||||
data: [15000, 5200, 8000, 7000, 10000],
|
||||
backgroundColor: [
|
||||
'rgba(111, 78, 55, 0.8)', // Kopi
|
||||
'rgba(234, 179, 8, 0.8)', // Vanili
|
||||
'rgba(210, 105, 30, 0.8)', // Kakao
|
||||
'rgba(156, 163, 175, 0.8)', // Kemiri
|
||||
'rgba(34, 197, 94, 0.8)' // Pelindung (Hijau)
|
||||
],
|
||||
borderRadius: 4
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true, maintainAspectRatio: false,
|
||||
scales: {
|
||||
y: { beginAtZero: true, grid: { color: '#f3f4f6' } },
|
||||
x: { grid: { display: false } }
|
||||
},
|
||||
plugins: {
|
||||
legend: { display: false }, // Disembunyikan karena label sudah jelas di X axis
|
||||
tooltip: { callbacks: { label: function(ctx) { return ctx.raw.toLocaleString('id-ID') + ' Bibit'; } } }
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
});
|
||||
</script>
|
||||
@endpush
|
||||
@@ -0,0 +1,312 @@
|
||||
@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
|
||||
@@ -7,26 +7,7 @@
|
||||
<script>
|
||||
document.write(new Date().getFullYear());
|
||||
</script>
|
||||
, made with ❤️ by <a href="https://pixinvent.com" target="_blank" class="footer-link">Pixinvent</a>
|
||||
</div>
|
||||
<div class="d-none d-lg-inline-block">
|
||||
<a href="https://themeforest.net/licenses/standard" class="footer-link me-4" target="_blank"
|
||||
>License</a
|
||||
>
|
||||
<a href="https://themeforest.net/user/pixinvent/portfolio" target="_blank" class="footer-link me-4"
|
||||
>More Themes</a
|
||||
>
|
||||
|
||||
<a
|
||||
href="https://demos.pixinvent.com/vuexy-html-admin-template/documentation/"
|
||||
target="_blank"
|
||||
class="footer-link me-4"
|
||||
>Documentation</a
|
||||
>
|
||||
|
||||
<a href="https://pixinvent.ticksy.com/" target="_blank" class="footer-link d-none d-sm-inline-block"
|
||||
>Support</a
|
||||
>
|
||||
, by <a href="#" target="_blank" class="footer-link">Yayasan Bhumi Loka Lestari</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -14,7 +14,7 @@
|
||||
name="viewport"
|
||||
content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
|
||||
<meta name="robots" content="noindex, nofollow" />
|
||||
<title>Demo: Dashboard - Analytics | Vuexy - Bootstrap Dashboard PRO</title>
|
||||
<title>Admin | Database Petani</title>
|
||||
|
||||
<meta name="description" content="" />
|
||||
|
||||
@@ -51,11 +51,11 @@
|
||||
<link rel="stylesheet" href="{{ asset('assets/vendor/fonts/flag-icons.css') }}" />
|
||||
|
||||
<link rel="stylesheet" href="{{ asset('assets/vendor/css/pages/cards-advance.css') }}" />
|
||||
|
||||
@stack('style')
|
||||
<script src="{{ asset('assets/vendor/js/helpers.js') }}"></script>
|
||||
|
||||
<script src="{{ asset('assets/vendor/js/template-customizer.js') }}"></script>
|
||||
|
||||
<script src="{{ asset('assets/js/config.js') }}"></script>
|
||||
@stack('style')
|
||||
@stack('scripts-head')
|
||||
</head>
|
||||
@@ -1,35 +1,21 @@
|
||||
<aside id="layout-menu" class="layout-menu menu-vertical menu">
|
||||
<div class="app-brand demo ">
|
||||
<a href="index.html" class="app-brand-link">
|
||||
<a href="{{ route('dashboard.summary') }}" class="app-brand-link">
|
||||
<span class="app-brand-logo demo">
|
||||
<span class="text-primary">
|
||||
<svg width="32" height="22" viewBox="0 0 32 22" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M0.00172773 0V6.85398C0.00172773 6.85398 -0.133178 9.01207 1.98092 10.8388L13.6912 21.9964L19.7809 21.9181L18.8042 9.88248L16.4951 7.17289L9.23799 0H0.00172773Z"
|
||||
fill="currentColor" />
|
||||
<path
|
||||
opacity="0.06"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7.69824 16.4364L12.5199 3.23696L16.5541 7.25596L7.69824 16.4364Z"
|
||||
fill="#161616" />
|
||||
<path
|
||||
opacity="0.06"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M8.07751 15.9175L13.9419 4.63989L16.5849 7.28475L8.07751 15.9175Z"
|
||||
fill="#161616" />
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
d="M7.77295 16.3566L23.6563 0H32V6.88383C32 6.88383 31.8262 9.17836 30.6591 10.4057L19.7824 22H13.6938L7.77295 16.3566Z"
|
||||
fill="currentColor" />
|
||||
<svg width="32" height="24" viewBox="0 0 32 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<!-- Daun Bagian Kiri -->
|
||||
<path opacity="0.3" d="M16 2.5C16 2.5 5 6.5 5 15.5C5 20.5 11 23.5 16 23.5V2.5Z" fill="currentColor" />
|
||||
<!-- Daun Bagian Kanan -->
|
||||
<path opacity="0.6" d="M16 2.5C16 2.5 27 6.5 27 15.5C27 20.5 21 23.5 16 23.5V2.5Z" fill="currentColor" />
|
||||
<!-- Grafik Pertumbuhan (Monev) -->
|
||||
<path d="M2 19L10 11L15 15L27 4" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" />
|
||||
<!-- Titik Target/Pencapaian -->
|
||||
<circle cx="27" cy="4" r="2.5" fill="currentColor" />
|
||||
</svg>
|
||||
</span>
|
||||
</span>
|
||||
<span class="app-brand-text demo menu-text fw-bold ms-3">Vuexy</span>
|
||||
<span class="app-brand-text demo menu-text fw-bold ms-3" style="text-transform: capitalize;">AgroMonev</span>
|
||||
</a>
|
||||
|
||||
<a href="javascript:void(0);" class="layout-menu-toggle menu-link text-large ms-auto">
|
||||
@@ -50,28 +36,28 @@
|
||||
</a>
|
||||
<ul class="menu-sub">
|
||||
<li class="menu-item active">
|
||||
<a href="{{ route('home.index') }}" class="menu-link">
|
||||
<div data-i18n="Welcome">Welcome</div>
|
||||
<a href="{{ route('dashboard.summary') }}" class="menu-link">
|
||||
<div data-i18n="Summary">Summary</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="dashboards-crm.html" class="menu-link">
|
||||
<div data-i18n="CRM">CRM</div>
|
||||
<a href="{{ route('dashboard.resiliensi') }}" class="menu-link">
|
||||
<div data-i18n="Reseliensi">Reseliensi</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="app-ecommerce-dashboard.html" class="menu-link">
|
||||
<div data-i18n="eCommerce">eCommerce</div>
|
||||
<a href="{{ route('dashboard.hilirisasi') }}" class="menu-link">
|
||||
<div data-i18n="Hilirisasi">Hilirisasi</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="app-logistics-dashboard.html" class="menu-link">
|
||||
<div data-i18n="Logistics">Logistics</div>
|
||||
<a href="{{ route('dashboard.konektivitas') }}" class="menu-link">
|
||||
<div data-i18n="Konektivitas">Konektivitas</div>
|
||||
</a>
|
||||
</li>
|
||||
<li class="menu-item">
|
||||
<a href="app-academy-dashboard.html" class="menu-link">
|
||||
<div data-i18n="Academy">Academy</div>
|
||||
<a href="{{ route('dashboard.akselerasi') }}" class="menu-link">
|
||||
<div data-i18n="Akselerasi">Akselerasi</div>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
+5
-1
@@ -15,7 +15,11 @@ Route::delete('/roles/{role}', [App\Http\Controllers\UserRoleController::class,
|
||||
|
||||
// Route::middleware('auth')->group(function () {
|
||||
// Home
|
||||
Route::get('/', [App\Http\Controllers\HomeController::class, 'index'])->name('home.index');
|
||||
Route::get('/', [App\Http\Controllers\Web\SummaryDashboardController::class, 'index'])->name('dashboard.summary');
|
||||
Route::get('/resiliensi', [App\Http\Controllers\Web\ResiliensiDashboardController::class, 'index'])->name('dashboard.resiliensi');
|
||||
Route::get('/hilirisasi', [App\Http\Controllers\Web\HilirisasiDashboardController::class, 'index'])->name('dashboard.hilirisasi');
|
||||
Route::get('/konektivitas', [App\Http\Controllers\Web\KonektivitasDashboardController::class, 'index'])->name('dashboard.konektivitas');
|
||||
Route::get('/akselerasi', [App\Http\Controllers\Web\AkselerasiDashboardController::class, 'index'])->name('dashboard.akselerasi');
|
||||
|
||||
// User
|
||||
Route::get('/users', [App\Http\Controllers\UserController::class, 'index'])->name('users.index');
|
||||
|
||||
Reference in New Issue
Block a user