Update Dasboard utama dan Survey
This commit is contained in:
@@ -0,0 +1,408 @@
|
||||
@extends('layout.main')
|
||||
|
||||
@push('style')
|
||||
<style>
|
||||
.tk-stat {
|
||||
border-left: 4px solid transparent;
|
||||
transition: transform .2s ease;
|
||||
}
|
||||
.tk-stat:hover { transform: translateX(4px); }
|
||||
.tk-stat.green { border-left-color: #28a745; }
|
||||
.tk-stat.blue { border-left-color: #007bff; }
|
||||
.tk-stat.amber { border-left-color: #fd7e14; }
|
||||
|
||||
.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; }
|
||||
|
||||
/* Progress bar */
|
||||
.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: 10px; }
|
||||
.tk-bar-lbl { width: 72px; font-size: 11px; text-align: right; 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: 54px; }
|
||||
|
||||
.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-code {
|
||||
font-size: 10px; padding: 2px 7px; border-radius: 5px;
|
||||
font-family: monospace;
|
||||
background: rgba(128,128,128,.12);
|
||||
border: 1px solid rgba(128,128,128,.2);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Donut legend */
|
||||
.tk-leg { display: flex; align-items: center; gap: 7px; margin-bottom: 7px; font-size: 12px; }
|
||||
.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; }
|
||||
|
||||
/* Pending row */
|
||||
.tk-pend { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; font-size: 12px; }
|
||||
.tk-pend:last-child { margin-bottom: 0; }
|
||||
.tk-chip { border-radius: 6px; padding: 2px 7px; font-size: 10px; font-weight: 700; }
|
||||
|
||||
.tk-divider { height: 1px; background: rgba(128,128,128,.1); margin: 10px 0; }
|
||||
|
||||
/* SVG donut text ikut warna teks tema */
|
||||
.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; }
|
||||
</style>
|
||||
@endpush
|
||||
|
||||
@section('content')
|
||||
<div class="container-xxl flex-grow-1 container-p-y">
|
||||
|
||||
@php
|
||||
$d = [
|
||||
'total_petani' => 247,
|
||||
'total_survey' => 214,
|
||||
'survey_selesai' => 178,
|
||||
'survey_draft' => 36,
|
||||
'total_desa' => 8,
|
||||
'total_kecamatan' => 3,
|
||||
'new_month' => 12,
|
||||
|
||||
'enumerators' => [
|
||||
['name'=>'Enumerator Ngada 1','done'=>72,'target'=>80,'color'=>'#28a745','bg'=>'rgba(40,167,69,.15)','tx'=>'#28a745'],
|
||||
['name'=>'Enumerator Ngada 2','done'=>58,'target'=>80,'color'=>'#007bff','bg'=>'rgba(0,123,255,.15)','tx'=>'#007bff'],
|
||||
['name'=>'Enumerator Ngada 3','done'=>48,'target'=>80,'color'=>'#fd7e14','bg'=>'rgba(253,126,20,.15)','tx'=>'#fd7e14'],
|
||||
['name'=>'Enumerator Ngada 4','done'=>36,'target'=>80,'color'=>'#dc3545','bg'=>'rgba(220,53,69,.15)','tx'=>'#dc3545'],
|
||||
],
|
||||
|
||||
'recent' => [
|
||||
['code'=>'TKD-2026-0178','name'=>'Markus Bela', 'init'=>'MB','desa'=>'Wangka', 'date'=>'24 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(40,167,69,.15)','tx'=>'#28a745'],
|
||||
['code'=>'TKD-2026-0177','name'=>'Theresia Nuka','init'=>'TN','desa'=>'Langa', 'date'=>'23 Jun 2026','pct'=>67, 'status'=>'in_progress','bg'=>'rgba(0,123,255,.15)','tx'=>'#007bff'],
|
||||
['code'=>'TKD-2026-0176','name'=>'Yosef Meo', 'init'=>'YM','desa'=>'Bobo', 'date'=>'22 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(40,167,69,.15)','tx'=>'#28a745'],
|
||||
['code'=>'TKD-2026-0175','name'=>'Maria Seda', 'init'=>'MS','desa'=>'Tana Wolo','date'=>'21 Jun 2026','pct'=>22, 'status'=>'draft', 'bg'=>'rgba(253,126,20,.15)','tx'=>'#fd7e14'],
|
||||
['code'=>'TKD-2026-0174','name'=>'Rafael Bolo', 'init'=>'RB','desa'=>'Wangka', 'date'=>'20 Jun 2026','pct'=>11, 'status'=>'draft', 'bg'=>'rgba(220,53,69,.15)','tx'=>'#dc3545'],
|
||||
],
|
||||
|
||||
'komoditas' => [
|
||||
['label'=>'Kopi', 'total'=>148,'pct'=>60,'color'=>'#28a745','arc'=>174],
|
||||
['label'=>'Kakao', 'total'=>82, 'pct'=>33,'color'=>'#007bff','arc'=>96],
|
||||
['label'=>'Vanili','total'=>33, 'pct'=>13,'color'=>'#fd7e14','arc'=>38],
|
||||
['label'=>'Kemiri','total'=>22, 'pct'=>9, 'color'=>'#6f42c1','arc'=>26],
|
||||
],
|
||||
|
||||
'kecamatan' => [
|
||||
['name'=>'Bajawa','total'=>89,'pct'=>78,'color'=>'#28a745'],
|
||||
['name'=>'Soa', 'total'=>68,'pct'=>59,'color'=>'#007bff'],
|
||||
['name'=>'Golewa','total'=>57,'pct'=>50,'color'=>'#fd7e14'],
|
||||
],
|
||||
|
||||
'pending' => [
|
||||
['name'=>'Theresia Nuka','section'=>'D4-K3','pct'=>67,'bg'=>'rgba(0,123,255,.15)','tx'=>'#007bff'],
|
||||
['name'=>'Maria Seda', 'section'=>'D2-K2','pct'=>22,'bg'=>'rgba(253,126,20,.15)','tx'=>'#fd7e14'],
|
||||
['name'=>'Rafael Bolo', 'section'=>'D2-K1','pct'=>11,'bg'=>'rgba(220,53,69,.15)', 'tx'=>'#dc3545'],
|
||||
['name'=>'Antonius Wea', 'section'=>'D2-K1','pct'=>0, 'bg'=>'rgba(220,53,69,.15)', 'tx'=>'#dc3545'],
|
||||
],
|
||||
'pending_more' => 32,
|
||||
];
|
||||
$C = 289; // circumference SVG r=46
|
||||
$donutOff = 0;
|
||||
@endphp
|
||||
|
||||
|
||||
<div class="row g-3 mb-4">
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card tk-stat green h-100">
|
||||
<div class="card-body">
|
||||
<div class="tk-stat-top">
|
||||
<div class="avatar bg-label-success rounded p-2">
|
||||
<i class="ti tabler-users fs-3"></i>
|
||||
</div>
|
||||
<span class="badge bg-label-success text-success">+{{ $d['new_month'] }} bulan ini</span>
|
||||
</div>
|
||||
<p class="tk-stat-lbl text-muted mb-1">Total Petani</p>
|
||||
<h3 class="tk-stat-val mb-1">{{ number_format($d['total_petani']) }}</h3>
|
||||
<small class="text-muted">{{ $d['total_desa'] }} desa · {{ $d['total_kecamatan'] }} kecamatan</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card tk-stat blue h-100">
|
||||
<div class="card-body">
|
||||
<div class="tk-stat-top">
|
||||
<div class="avatar bg-label-primary rounded p-2">
|
||||
<i class="ti tabler-clipboard-list fs-3"></i>
|
||||
</div>
|
||||
<span class="badge bg-label-primary text-primary">{{ $d['total_survey'] }} terdaftar</span>
|
||||
</div>
|
||||
<p class="tk-stat-lbl text-muted mb-1">Total Survey</p>
|
||||
<h3 class="tk-stat-val mb-1">{{ number_format($d['total_survey']) }}</h3>
|
||||
<small class="text-muted">dari {{ $d['total_petani'] }} petani</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card tk-stat green h-100">
|
||||
<div class="card-body">
|
||||
<div class="tk-stat-top">
|
||||
<div class="avatar bg-label-success rounded p-2">
|
||||
<i class="ti tabler-circle-check fs-3"></i>
|
||||
</div>
|
||||
<span class="badge bg-label-success text-success">
|
||||
{{ round($d['survey_selesai'] / $d['total_survey'] * 100) }}%
|
||||
</span>
|
||||
</div>
|
||||
<p class="tk-stat-lbl text-muted mb-1">Survey Selesai</p>
|
||||
<h3 class="tk-stat-val mb-1">{{ number_format($d['survey_selesai']) }}</h3>
|
||||
<small class="text-muted">siap untuk analisis</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-sm-6 col-xl-3">
|
||||
<div class="card tk-stat amber h-100">
|
||||
<div class="card-body">
|
||||
<div class="tk-stat-top">
|
||||
<div class="avatar bg-label-warning rounded p-2">
|
||||
<i class="ti tabler-pencil fs-3"></i>
|
||||
</div>
|
||||
<span class="badge bg-label-warning text-warning">
|
||||
{{ round($d['survey_draft'] / $d['total_survey'] * 100) }}%
|
||||
</span>
|
||||
</div>
|
||||
<p class="tk-stat-lbl text-muted mb-1">Survey Draft</p>
|
||||
<h3 class="tk-stat-val mb-1">{{ number_format($d['survey_draft']) }}</h3>
|
||||
<small class="text-muted">belum selesai diisi</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row g-3">
|
||||
<div class="col-xl-8">
|
||||
<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">
|
||||
@foreach($d['enumerators'] as $e)
|
||||
@php $pct = round($e['done'] / $e['target'] * 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">{{ $e['done'] }} / {{ $e['target'] }} survey</small>
|
||||
</div>
|
||||
<div class="tk-pb">
|
||||
<div class="tk-pbt">
|
||||
<div class="tk-pbf" style="width:{{ $pct }}%;background:{{ $e['color'] }}"></div>
|
||||
</div>
|
||||
<small class="text-muted" style="min-width:30px;text-align:right">{{ $pct }}%</small>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- Survey Terbaru --}}
|
||||
<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-clock me-2 text-primary"></i>Survey terbaru
|
||||
</h6>
|
||||
<a href="{{ route('survey.petani.index') }}" class="btn btn-sm btn-outline-success">
|
||||
Lihat semua
|
||||
</a>
|
||||
</div>
|
||||
<div class="table-responsive">
|
||||
<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">Kode</th>
|
||||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Petani</th>
|
||||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Desa</th>
|
||||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase">Tanggal</th>
|
||||
<th style="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>
|
||||
@foreach($d['recent'] as $s)
|
||||
@php
|
||||
$bc = match(true) {
|
||||
$s['pct'] === 100 => '#28a745',
|
||||
$s['pct'] >= 50 => '#007bff',
|
||||
$s['pct'] >= 20 => '#fd7e14',
|
||||
default => '#dc3545',
|
||||
};
|
||||
@endphp
|
||||
<tr>
|
||||
<td>
|
||||
<span class="tk-code">{{ $s['code'] }}</span>
|
||||
</td>
|
||||
<td>
|
||||
<div class="d-flex align-items-center gap-2">
|
||||
<div class="tk-av rounded"
|
||||
style="width:28px;height:28px;background:{{ $s['bg'] }};color:{{ $s['tx'] }}">
|
||||
{{ $s['init'] }}
|
||||
</div>
|
||||
<span class="fw-semibold">{{ $s['name'] }}</span>
|
||||
</div>
|
||||
</td>
|
||||
<td class="text-muted" style="font-size:12px">{{ $s['desa'] }}</td>
|
||||
<td class="text-muted" style="font-size:11px">{{ $s['date'] }}</td>
|
||||
<td style="min-width:110px">
|
||||
<div class="tk-pb">
|
||||
<div class="tk-pbt">
|
||||
<div class="tk-pbf" style="width:{{ $s['pct'] }}%;background:{{ $bc }}"></div>
|
||||
</div>
|
||||
<small class="text-muted" style="min-width:28px;text-align:right">
|
||||
{{ $s['pct'] }}%
|
||||
</small>
|
||||
</div>
|
||||
</td>
|
||||
<td>
|
||||
@if($s['status'] === 'completed')
|
||||
<span class="badge bg-label-success text-success">Selesai</span>
|
||||
@elseif($s['status'] === 'in_progress')
|
||||
<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>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="col-xl-4">
|
||||
<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">
|
||||
<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($d['komoditas'] as $k)
|
||||
<circle cx="60" cy="60" r="46" fill="none"
|
||||
stroke="{{ $k['color'] }}" stroke-width="16"
|
||||
stroke-dasharray="{{ $k['arc'] }} {{ $C - $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" font-size="15" font-weight="800" fill="currentColor">
|
||||
{{ $d['total_petani'] }}
|
||||
</text>
|
||||
<text x="60" y="70" text-anchor="middle"
|
||||
font-size="9" fill="currentColor" opacity=".5">petani</text>
|
||||
</svg>
|
||||
</div>
|
||||
@foreach($d['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">
|
||||
{{ $k['total'] }}
|
||||
<span class="text-muted fw-normal" style="font-size:10px">{{ $k['pct'] }}%</span>
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h6 class="mb-0 fw-bold">
|
||||
<i class="ti tabler-map-pin me-2 text-primary"></i>Per kecamatan
|
||||
</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@foreach($d['kecamatan'] as $kec)
|
||||
<div class="tk-bar">
|
||||
<div class="tk-bar-lbl text-muted">{{ $kec['name'] }}</div>
|
||||
<div class="tk-bar-trk">
|
||||
<div class="tk-bar-fil" style="width:{{ $kec['pct'] }}%;background:{{ $kec['color'] }}"></div>
|
||||
</div>
|
||||
<div class="tk-bar-val text-muted">{{ $kec['total'] }} survey</div>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="tk-divider"></div>
|
||||
<p class="text-center text-muted mb-0" style="font-size:10px">
|
||||
Ngada, Nusa Tenggara Timur · {{ now()->year }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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-clock-pause me-2 text-warning"></i>Draft tertunda
|
||||
</h6>
|
||||
<a href="{{ route('survey.petani.index', ['status' => 'draft']) }}"
|
||||
class="text-success fw-semibold" style="font-size:12px;text-decoration:none">
|
||||
Lihat semua
|
||||
</a>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
@foreach($d['pending'] as $p)
|
||||
<div class="tk-pend">
|
||||
<span class="text-muted">{{ $p['name'] }}</span>
|
||||
<span class="tk-chip" style="background:{{ $p['bg'] }};color:{{ $p['tx'] }}">
|
||||
{{ $p['section'] }} · {{ $p['pct'] }}%
|
||||
</span>
|
||||
</div>
|
||||
@endforeach
|
||||
<div class="tk-divider"></div>
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<small class="text-muted">+ {{ $d['pending_more'] }} lainnya</small>
|
||||
<a href="{{ route('survey.petani.index', ['status' => 'draft']) }}"
|
||||
class="text-success fw-semibold" style="font-size:11px;text-decoration:none">
|
||||
Lihat semua →
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Reference in New Issue
Block a user