202 lines
12 KiB
PHP
202 lines
12 KiB
PHP
@extends('layout.main')
|
||
|
||
@push('style')
|
||
<style>
|
||
.tk-code {
|
||
background: rgba(128,128,128,.12);
|
||
border: 1px solid rgba(128,128,128,.2);
|
||
white-space: nowrap;
|
||
}
|
||
.tk-av {
|
||
display: flex; align-items: center; justify-content: center;
|
||
/* font-size: 12px; font-weight: 700; flex-shrink: 0; */
|
||
border-radius: 8px;
|
||
}
|
||
.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; min-width: 60px;
|
||
}
|
||
.tk-pbf { height: 100%; border-radius: 3px; }
|
||
</style>
|
||
@endpush
|
||
|
||
@section('content')
|
||
<div class="container-xxl flex-grow-1 container-p-y">
|
||
|
||
@php
|
||
$surveys = [
|
||
['code'=>'TKD-2026-0178','name'=>'Markus Bela', 'init'=>'MB','gender'=>'L','age'=>48,'desa'=>'Wangka', 'kec'=>'Bajawa', 'enum'=>'Enum. Ngada 1','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','gender'=>'P','age'=>42,'desa'=>'Langa', 'kec'=>'Bajawa', 'enum'=>'Enum. Ngada 2','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','gender'=>'L','age'=>53,'desa'=>'Bobo', 'kec'=>'Soa', 'enum'=>'Enum. Ngada 1','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','gender'=>'P','age'=>55,'desa'=>'Tana Wolo', 'kec'=>'Golewa', 'enum'=>'Enum. Ngada 3','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','gender'=>'L','age'=>38,'desa'=>'Wangka', 'kec'=>'Bajawa', 'enum'=>'Enum. Ngada 4','date'=>'20 Jun 2026','pct'=>11, 'status'=>'draft', 'bg'=>'rgba(220,53,69,.15)', 'tx'=>'#dc3545'],
|
||
['code'=>'TKD-2026-0173','name'=>'Antonius Wea', 'init'=>'AW','gender'=>'L','age'=>61,'desa'=>'Bobo', 'kec'=>'Soa', 'enum'=>'Enum. Ngada 3','date'=>'19 Jun 2026','pct'=>0, 'status'=>'draft', 'bg'=>'rgba(111,66,193,.15)','tx'=>'#6f42c1'],
|
||
['code'=>'TKD-2026-0172','name'=>'Floriana Keu', 'init'=>'FK','gender'=>'P','age'=>44,'desa'=>'Langa', 'kec'=>'Bajawa', 'enum'=>'Enum. Ngada 2','date'=>'18 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(40,167,69,.15)', 'tx'=>'#28a745'],
|
||
['code'=>'TKD-2026-0171','name'=>'Dominikus Ngae','init'=>'DN','gender'=>'L','age'=>49,'desa'=>'Tana Wolo','kec'=>'Golewa', 'enum'=>'Enum. Ngada 1','date'=>'17 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(40,167,69,.15)', 'tx'=>'#28a745'],
|
||
['code'=>'TKD-2026-0170','name'=>'Agustina Meo', 'init'=>'AM','gender'=>'P','age'=>37,'desa'=>'Bobo', 'kec'=>'Soa', 'enum'=>'Enum. Ngada 2','date'=>'16 Jun 2026','pct'=>45, 'status'=>'in_progress','bg'=>'rgba(0,123,255,.15)','tx'=>'#007bff'],
|
||
['code'=>'TKD-2026-0169','name'=>'Yohanes Lewa', 'init'=>'YL','gender'=>'L','age'=>57,'desa'=>'Wangka', 'kec'=>'Bajawa', 'enum'=>'Enum. Ngada 4','date'=>'15 Jun 2026','pct'=>100,'status'=>'completed', 'bg'=>'rgba(40,167,69,.15)', 'tx'=>'#28a745'],
|
||
];
|
||
$total = 214; $selesai = 178; $sdraft = 36;
|
||
@endphp
|
||
|
||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||
<div>
|
||
<h4 class="fw-bold mb-1">Daftar Survey</h4>
|
||
<p class="text-muted mb-0" style="font-size:13px">
|
||
{{ $total }} survey ·
|
||
<span class="text-success fw-semibold">{{ $selesai }} selesai</span> ·
|
||
<span class="text-warning fw-semibold">{{ $sdraft }} draft</span>
|
||
</p>
|
||
</div>
|
||
<a href="{{ route('survey.petani.create') }}" class="btn btn-success">
|
||
<i class="ti tabler-plus me-1"></i> Survey Baru
|
||
</a>
|
||
</div>
|
||
<div class="card mb-3">
|
||
<div class="card-body py-3">
|
||
<div class="row g-2 align-items-center">
|
||
<div class="col-md-4">
|
||
<div class="input-group input-group-sm">
|
||
<span class="input-group-text bg-transparent">
|
||
<i class="ti tabler-search"></i>
|
||
</span>
|
||
<input type="text" class="form-control"
|
||
placeholder="Cari nama petani / kode survey...">
|
||
</div>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<select class="form-select form-select-sm">
|
||
<option>Semua Status</option>
|
||
<option>Selesai</option>
|
||
<option>Sedang diisi</option>
|
||
<option>Draft</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<select class="form-select form-select-sm">
|
||
<option>Semua Kecamatan</option>
|
||
<option>Bajawa</option>
|
||
<option>Soa</option>
|
||
<option>Golewa</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<select class="form-select form-select-sm">
|
||
<option>Semua Enumerator</option>
|
||
<option>Enumerator Ngada 1</option>
|
||
<option>Enumerator Ngada 2</option>
|
||
<option>Enumerator Ngada 3</option>
|
||
<option>Enumerator Ngada 4</option>
|
||
</select>
|
||
</div>
|
||
<div class="col-md-2">
|
||
<button class="btn btn-outline-secondary btn-sm w-100">
|
||
<i class="ti tabler-refresh me-1"></i> Reset
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<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;width:120px">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;width:80px">Desa</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:90px">Kecamatan</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:115px">Enumerator</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:92px">Tanggal</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:120px">Progres</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:98px">Status</th>
|
||
<th style="font-size:10px;letter-spacing:.7px;text-transform:uppercase;width:65px;text-align:center">Aksi</th>
|
||
</tr>
|
||
</thead>
|
||
<tbody>
|
||
@foreach($surveys 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"
|
||
style="width:28px;height:28px;background:{{ $s['bg'] }};color:{{ $s['tx'] }}">
|
||
{{ $s['init'] }}
|
||
</div>
|
||
<div>
|
||
<div class="fw-semibold" style="font-size:13px">{{ $s['name'] }}</div>
|
||
<div class="text-muted" style="font-size:10px">
|
||
{{ $s['gender'] }} · {{ $s['age'] }} th
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</td>
|
||
<td class="text-muted" style="font-size:12px">{{ $s['desa'] }}</td>
|
||
<td class="text-muted" style="font-size:12px">{{ $s['kec'] }}</td>
|
||
<td class="text-muted" style="font-size:11px">{{ $s['enum'] }}</td>
|
||
<td class="text-muted" style="font-size:11px">{{ $s['date'] }}</td>
|
||
<td>
|
||
<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>
|
||
<td class="text-center">
|
||
@if($s['status'] === 'completed')
|
||
<a href="#" class="btn btn-sm btn-icon btn-outline-secondary" title="Detail">
|
||
<i class="ti tabler-eye"></i>
|
||
</a>
|
||
@else
|
||
<a href="#" class="btn btn-sm btn-icon btn-outline-primary" title="Lanjutkan isi">
|
||
<i class="ti tabler-edit"></i>
|
||
</a>
|
||
@endif
|
||
</td>
|
||
</tr>
|
||
@endforeach
|
||
</tbody>
|
||
</table>
|
||
</div>
|
||
|
||
{{-- Pagination --}}
|
||
<div class="card-footer d-flex justify-content-between align-items-center py-2">
|
||
<small class="text-muted">Menampilkan 1–10 dari {{ $total }} survey</small>
|
||
<nav>
|
||
<ul class="pagination pagination-sm mb-0">
|
||
<li class="page-item disabled"><a class="page-link" href="#">‹</a></li>
|
||
<li class="page-item active"><a class="page-link" href="#">1</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">2</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">3</a></li>
|
||
<li class="page-item disabled"><a class="page-link" href="#">...</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">22</a></li>
|
||
<li class="page-item"><a class="page-link" href="#">›</a></li>
|
||
</ul>
|
||
</nav>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
@endsection |