344 lines
18 KiB
PHP
344 lines
18 KiB
PHP
@extends('layout.main')
|
|
@push('style')
|
|
<style>
|
|
.fade-in { animation: fadeIn 0.4s ease-in-out; }
|
|
@keyframes fadeIn {
|
|
from { opacity: 0; transform: translateY(10px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.progress-bar { transition: width 1s ease-in-out; }
|
|
</style>
|
|
@endpush
|
|
|
|
@push('scripts-head')
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<script src="https://unpkg.com/lucide@latest"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
@endpush
|
|
|
|
@section('content')
|
|
<div class="container-xxl flex-grow-1 container-p-y">
|
|
<div class="content-body fade-in space-y-6">
|
|
|
|
<!-- Header Section -->
|
|
<div class="flex flex-col md:flex-row justify-between items-start md:items-center gap-4 mb-6">
|
|
<div>
|
|
<h2 class="text-2xl font-bold text-gray-800">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 |