Files
database-pertani-web/resources/views/dashboard/survey-petani.blade.php
T

835 lines
32 KiB
PHP

@extends('layout.main')
@push('style')
<style>
.tk-stat {
border-left: 4px solid transparent;
transition: transform .2s ease, box-shadow .2s ease;
}
.tk-stat:hover {
transform: translateY(-2px);
box-shadow: 0 .25rem 1rem rgba(34, 48, 62, .08);
}
.tk-stat.green { border-left-color: #6FD68F; }
.tk-stat.blue { border-left-color: #5FC7D6; }
.tk-stat.amber { border-left-color: #FFB46F; }
.tk-stat-lbl {
font-size: 10px;
text-transform: uppercase;
letter-spacing: .7px;
font-weight: 600;
}
.tk-stat-val {
font-size: 20px;
font-weight: 800;
line-height: 1;
}
.tk-stat-top {
display: flex;
justify-content: space-between;
align-items: flex-start;
margin-bottom: 10px;
}
.tk-pb {
display: flex;
align-items: center;
gap: 6px;
}
.tk-pbt {
flex: 1;
height: 6px;
background: rgba(128, 128, 128, .15);
border-radius: 3px;
overflow: hidden;
}
.tk-pbf {
height: 100%;
border-radius: 3px;
}
.tk-bar {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 12px;
}
.tk-bar:last-child {
margin-bottom: 0;
}
.tk-bar-lbl {
width: 105px;
font-size: 11px;
flex-shrink: 0;
}
.tk-bar-trk {
flex: 1;
height: 7px;
background: rgba(128, 128, 128, .15);
border-radius: 4px;
overflow: hidden;
}
.tk-bar-fil {
height: 100%;
border-radius: 4px;
}
.tk-bar-val {
font-size: 11px;
min-width: 58px;
}
.tk-erow {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 0;
border-bottom: 1px solid rgba(128, 128, 128, .1);
}
.tk-erow:last-child {
border-bottom: none;
}
.tk-av {
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 700;
flex-shrink: 0;
}
.tk-leg {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 7px;
font-size: 12px;
}
.tk-leg:last-child {
margin-bottom: 0;
}
.tk-leg-dot {
width: 9px;
height: 9px;
border-radius: 50%;
flex-shrink: 0;
}
.tk-leg-val {
margin-left: auto;
font-weight: 700;
font-size: 12px;
}
.tk-divider {
height: 1px;
background: rgba(128, 128, 128, .1);
margin: 12px 0;
}
.tk-donut-num {
fill: var(--bs-body-color);
font-size: 15px;
font-weight: 800;
}
.tk-donut-sub {
fill: var(--bs-secondary-color, #6c757d);
font-size: 9px;
}
.enumerator-scroll {
max-height: 244px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.progress-petani-scroll {
max-height: 575px;
overflow-y: auto;
overflow-x: auto;
}
.progress-petani-scroll thead th {
position: sticky;
top: 0;
z-index: 3;
background: var(--bs-table-bg, #f8f9fa);
white-space: nowrap;
}
.tk-training-scroll {
max-height: 330px;
overflow-y: auto;
overflow-x: hidden;
padding-right: 5px;
}
.enumerator-scroll::-webkit-scrollbar,
.progress-petani-scroll::-webkit-scrollbar,
.tk-training-scroll::-webkit-scrollbar {
width: 6px;
height: 6px;
}
.enumerator-scroll::-webkit-scrollbar-thumb,
.progress-petani-scroll::-webkit-scrollbar-thumb,
.tk-training-scroll::-webkit-scrollbar-thumb {
background: rgba(128, 128, 128, .28);
border-radius: 10px;
}
.enumerator-scroll::-webkit-scrollbar-track,
.progress-petani-scroll::-webkit-scrollbar-track,
.tk-training-scroll::-webkit-scrollbar-track {
background: transparent;
}
</style>
@endpush
@section('content')
<div class="container-xxl flex-grow-1 container-p-y">
{{-- Ringkasan utama --}}
<div class="row g-3 mb-3">
<div class="col-md-4">
<div class="card tk-stat green h-100">
<div class="card-body">
<div class="tk-stat-top">
<div>
<div class="tk-stat-lbl text-muted mb-2">
Total Petani
</div>
<div class="tk-stat-val">
{{ number_format($totalPetani, 0, ',', '.') }}
<span class="text-muted fw-normal" style="font-size: 12px">
petani
</span>
</div>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-success">
<i class="ti tabler-users"></i>
</span>
</div>
</div>
<small class="text-muted">
Seluruh petani yang sudah masuk ke sistem
</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card tk-stat blue h-100">
<div class="card-body">
<div class="tk-stat-top">
<div>
<div class="tk-stat-lbl text-muted mb-2">
Total Luas Lahan
</div>
<div class="tk-stat-val">
{{ number_format($totalLuasLahan, 2, ',', '.') }}
<span class="text-muted fw-normal" style="font-size: 12px">
ha
</span>
</div>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-primary">
<i class="ti tabler-map-2"></i>
</span>
</div>
</div>
<small class="text-muted">
Akumulasi luas seluruh lahan petani
</small>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card tk-stat amber h-100">
<div class="card-body">
<div class="tk-stat-top">
<div>
<div class="tk-stat-lbl text-muted mb-2">
Total Tanaman
</div>
<div class="tk-stat-val">
{{ number_format($totalJumlahTanaman, 0, ',', '.') }}
<span class="text-muted fw-normal" style="font-size: 12px">
tanaman
</span>
</div>
</div>
<div class="avatar">
<span class="avatar-initial rounded bg-label-warning">
<i class="ti tabler-trees"></i>
</span>
</div>
</div>
<small class="text-muted">
Akumulasi jumlah tanaman seluruh lahan
</small>
</div>
</div>
</div>
</div>
<div class="row g-3">
{{-- Kolom utama --}}
<div class="col-xl-8">
{{-- Progres enumerator --}}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">
<i class="ti tabler-chart-bar me-2 text-success"></i>
Progres per Enumerator
</h6>
<span class="badge bg-label-secondary text-secondary">
{{ now()->format('M Y') }}
</span>
</div>
<div class="card-body">
@php
$maxDone = $enumerators->max('done') ?: 1;
@endphp
@if ($enumerators->isNotEmpty())
<div class="enumerator-scroll">
@foreach ($enumerators as $e)
@php
$pct = round(($e['done'] / $maxDone) * 100);
@endphp
<div class="tk-erow">
<div
class="tk-av rounded"
style="
width: 36px;
height: 36px;
background: {{ $e['bg'] }};
color: {{ $e['tx'] }};
"
>
{{ strtoupper(substr($e['name'], 0, 2)) }}
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between mb-1">
<span class="fw-semibold" style="font-size: 13px">
{{ $e['name'] }}
</span>
<small class="text-muted">
{{ number_format($e['done'], 0, ',', '.') }} survei
</small>
</div>
<div class="tk-pb">
<div class="tk-pbt">
<div
class="tk-pbf"
style="
width: {{ $pct }}%;
background: {{ $e['color'] }};
"
></div>
</div>
</div>
</div>
</div>
@endforeach
</div>
@else
<div class="text-center text-muted py-3">
Belum ada data enumerator.
</div>
@endif
</div>
</div>
{{-- Progres data petani --}}
<div class="card">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">
<i class="ti tabler-list-check me-2 text-success"></i>
Progres Data Petani
</h6>
<span class="badge bg-label-secondary text-secondary">
{{ $progressPetani->count() }} petani
</span>
</div>
<div class="table-responsive progress-petani-scroll">
<table class="table table-hover mb-0" style="font-size: 12.5px">
<thead class="table-light">
<tr>
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Petani
</th>
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Komoditas
</th>
<th class="text-center"
style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Lahan
</th>
<th class="text-center"
style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Praktik Budidaya
</th>
<th class="text-center"
style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Sosial Ekonomi
</th>
<th class="text-center"
style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Akses Pasar
</th>
<th style="
min-width: 140px;
font-size: 10px;
letter-spacing: .7px;
text-transform: uppercase;
">
Progres
</th>
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">
Status
</th>
</tr>
</thead>
<tbody>
@forelse ($progressPetani as $petani)
@php
$barColor = match (true) {
$petani['percent'] === 100 => '#6FD68F',
$petani['percent'] >= 50 => '#5FC7D6',
$petani['percent'] >= 20 => '#FFB46F',
default => '#F47C86',
};
$initial = collect(explode(' ', trim($petani['name'])))
->filter()
->take(2)
->map(fn ($word) => strtoupper(substr($word, 0, 1)))
->implode('');
@endphp
<tr>
<td>
<div class="d-flex align-items-center gap-2">
<div
class="tk-av rounded"
style="
width: 28px;
height: 28px;
background: rgba(111,214,143,.24);
color: #6FD68F;
"
>
{{ $initial ?: 'PT' }}
</div>
<span class="fw-semibold">
{{ $petani['name'] }}
</span>
</div>
</td>
<td>
<span
class="badge bg-label-secondary text-secondary"
title="{{ $petani['komoditas'] }}"
>
{{ $petani['komoditas'] }}
</span>
</td>
@foreach ($petani['status'] as $status)
<td class="text-center">
@if ($status['done'])
<span
class="badge rounded-pill bg-label-success text-success"
title="{{ $status['label'] }} lengkap"
>
<i class="ti tabler-check"></i>
</span>
@else
<span
class="badge rounded-pill bg-label-secondary text-secondary"
title="{{ $status['label'] }} belum lengkap"
>
<i class="ti tabler-minus"></i>
</span>
@endif
</td>
@endforeach
<td style="min-width: 140px">
<div class="tk-pb">
<div class="tk-pbt">
<div
class="tk-pbf"
style="
width: {{ $petani['percent'] }}%;
background: {{ $barColor }};
"
></div>
</div>
<small
class="text-muted"
style="min-width: 30px; text-align: right"
>
{{ $petani['percent'] }}%
</small>
</div>
</td>
<td>
@if ($petani['percent'] === 100)
<span class="badge bg-label-success text-success">
Selesai
</span>
@elseif ($petani['percent'] > 0)
<span class="badge bg-label-primary text-primary">
Sedang diisi
</span>
@else
<span class="badge bg-label-warning text-warning">
Draft
</span>
@endif
</td>
</tr>
@empty
<tr>
<td colspan="8" class="text-center text-muted py-4">
Belum ada data petani.
</td>
</tr>
@endforelse
</tbody>
</table>
</div>
</div>
</div>
{{-- Kolom samping --}}
<div class="col-xl-4">
{{-- Distribusi komoditas petani --}}
<div class="card mb-3">
<div class="card-header">
<h6 class="mb-0 fw-bold">
<i class="ti tabler-plant me-2 text-success"></i>
Distribusi Komoditas
</h6>
</div>
<div class="card-body">
@if ($komoditas->isNotEmpty())
@php
$donutOff = 0;
@endphp
<div class="d-flex justify-content-center py-2">
<svg
width="120"
height="120"
viewBox="0 0 120 120"
role="img"
aria-label="Distribusi komoditas petani"
>
<circle
cx="60"
cy="60"
r="46"
fill="none"
stroke="rgba(128,128,128,.15)"
stroke-width="16"
/>
@foreach ($komoditas as $k)
<circle
cx="60"
cy="60"
r="46"
fill="none"
stroke="{{ $k['color'] }}"
stroke-width="16"
stroke-dasharray="
{{ $k['arc'] }}
{{ $circumference - $k['arc'] }}
"
stroke-dashoffset="{{ -$donutOff }}"
transform="rotate(-90 60 60)"
/>
@php
$donutOff += $k['arc'];
@endphp
@endforeach
<text
x="60"
y="56"
text-anchor="middle"
class="tk-donut-num"
>
{{ $totalPetani }}
</text>
<text
x="60"
y="70"
text-anchor="middle"
class="tk-donut-sub"
>
petani
</text>
</svg>
</div>
@foreach ($komoditas as $k)
<div class="tk-leg">
<div
class="tk-leg-dot"
style="background: {{ $k['color'] }}"
></div>
<span class="text-muted">
{{ $k['label'] }}
</span>
<span class="tk-leg-val">
{{ number_format($k['total'], 0, ',', '.') }}
<span
class="text-muted fw-normal"
style="font-size: 10px"
>
{{ $k['pct'] }}%
</span>
</span>
</div>
@endforeach
@else
<div class="text-center text-muted py-4">
Belum ada data distribusi komoditas.
</div>
@endif
</div>
</div>
{{-- Jumlah tanaman per komoditas --}}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">
<i class="ti tabler-trees me-2 text-primary"></i>
Tanaman per Komoditas
</h6>
<span class="badge bg-label-primary text-primary">
{{ number_format($totalJumlahTanaman, 0, ',', '.') }}
</span>
</div>
<div class="card-body">
@if ($tanamanPerKomoditas->isNotEmpty())
@foreach ($tanamanPerKomoditas as $tanaman)
<div class="tk-bar">
<span
class="tk-bar-lbl text-muted text-truncate"
title="{{ $tanaman['label'] }}"
>
{{ $tanaman['label'] }}
</span>
<div class="tk-bar-trk">
<div
class="tk-bar-fil"
style="
width: {{ $tanaman['pct'] }}%;
background: {{ $tanaman['color'] }};
"
></div>
</div>
<span class="tk-bar-val fw-semibold text-end">
{{ number_format($tanaman['total'], 0, ',', '.') }}
</span>
</div>
@endforeach
@else
<div class="text-center text-muted py-4">
Belum ada data jumlah tanaman.
</div>
@endif
</div>
</div>
{{-- Pelatihan GAP --}}
<div class="card mb-3">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0 fw-bold">
<i class="ti tabler-school me-2 text-warning"></i>
Pelatihan GAP
</h6>
<span class="badge bg-label-warning text-warning">
{{ number_format($totalPetaniPelatihan, 0, ',', '.') }} petani
</span>
</div>
<div class="card-body">
@if ($pelatihanGap->isNotEmpty())
<div class="tk-training-scroll">
@foreach ($pelatihanGap as $pelatihan)
<div class="tk-erow">
<div
class="tk-av rounded"
style="
width: 34px;
height: 34px;
background: {{ $pelatihan['bg'] }};
color: {{ $pelatihan['tx'] }};
"
>
<i class="ti tabler-certificate"></i>
</div>
<div class="flex-grow-1">
<div class="d-flex justify-content-between align-items-center gap-2">
<span
class="fw-semibold"
style="font-size: 12px"
>
{{ $pelatihan['label'] }}
</span>
<span
class="badge flex-shrink-0"
style="
background: {{ $pelatihan['bg'] }};
color: {{ $pelatihan['tx'] }};
"
>
{{ $pelatihan['total'] }}
</span>
</div>
</div>
</div>
@endforeach
</div>
<div class="tk-divider"></div>
<small class="text-muted">
Satu petani dapat tercatat pada lebih dari satu jenis pelatihan.
</small>
@else
<div class="text-center text-muted py-4">
Belum ada data pelatihan.
</div>
@endif
</div>
</div>
{{-- Sertifikasi --}}
<div class="card">
<div class="card-body">
<div class="d-flex align-items-center justify-content-between gap-3">
<div class="d-flex align-items-center gap-3">
<div class="avatar">
<span class="avatar-initial rounded bg-label-success">
<i class="ti tabler-rosette-discount-check"></i>
</span>
</div>
<div>
<div class="tk-stat-lbl text-muted mb-1">
Petani Bersertifikasi
</div>
<div class="d-flex align-items-baseline gap-1">
<span class="tk-stat-val">
{{ number_format(
$totalPetaniBersertifikat,
0,
',',
'.'
) }}
</span>
<span class="text-muted" style="font-size: 12px">
petani
</span>
</div>
</div>
</div>
<span class="badge bg-label-success text-success">
{{ number_format(
$totalPetaniSertifikatAktif,
0,
',',
'.'
) }}
aktif
</span>
</div>
<div class="tk-divider"></div>
<small class="text-muted">
Petani unik yang memiliki minimal satu riwayat sertifikasi.
</small>
</div>
</div>
</div>
</div>
</div>
@endsection