adjust: bug styling in verification petani
This commit is contained in:
parent
b20dd54a6c
commit
c04507dfb4
|
|
@ -2,202 +2,214 @@
|
|||
|
||||
@section('title', 'Detail Petani')
|
||||
@section('page-title')
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-1 mb-1">
|
||||
<a href="{{ route('admin.verifikasi.index') }}">Daftar Verifikasi </a>
|
||||
<p class="mb-0">/ Detail Verifikasi Akun Petani</p>
|
||||
</div>
|
||||
<div>
|
||||
<div class="d-flex align-items-center gap-1 mb-1">
|
||||
<a href="{{ route('admin.verifikasi.index') }}">Daftar Verifikasi </a>
|
||||
<p class="mb-0">/ Detail Verifikasi Akun Petani</p>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
@section('content')
|
||||
<div class="mb-4">
|
||||
<a href="{{ url('admin/verifikasi') }}" class="text-decoration-none text-muted">
|
||||
<i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Antrian
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="row g-4">
|
||||
|
||||
{{-- 1. KOLOM KIRI: DATA LENGKAP (Desain Clean List - Pilihan Kamu) --}}
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white py-4 border-bottom-0">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="fw-bold m-0 text-dark">
|
||||
<i class="bi bi-person-lines-fill me-2 text-primary"></i>Data Calon Petani
|
||||
</h5>
|
||||
{{-- Badge Status di Header Kiri --}}
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i> Menunggu Verifikasi</span>
|
||||
@elseif($petani->status_akun == 'aktif')
|
||||
<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Terverifikasi</span>
|
||||
@else
|
||||
<span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i> Ditolak</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-0">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold pt-3" width="30%">Nama Lengkap</td>
|
||||
<td class="pt-3 fw-bold text-dark fs-5">{{ $petani->nama_lengkap }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Username</td>
|
||||
<td class="fw-medium">{{ $petani->username }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Nomor WhatsApp</td>
|
||||
<td>
|
||||
<span class="bg-light px-2 py-1 rounded fw-bold text-dark font-monospace">{{ $petani->no_hp }}</span>
|
||||
<a href="https://wa.me/{{ $petani->no_hp }}" target="_blank" class="ms-2 text-decoration-none small text-success fw-bold">
|
||||
<i class="bi bi-whatsapp"></i> Chat
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Nama Usaha Tani</td>
|
||||
<td class="fw-medium">{{ $petani->nama_usaha }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Alamat Lengkap</td>
|
||||
<td class="text-secondary" style="line-height: 1.6;">{{ $petani->alamat }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Terdaftar Sejak</td>
|
||||
<td class="text-secondary">{{ $petani->created_at->format('d F Y, H:i') }} WIB</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<a href="{{ url('admin/verifikasi') }}" class="text-decoration-none text-muted">
|
||||
<i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Antrian
|
||||
</a>
|
||||
</div>
|
||||
|
||||
{{-- 2. KOLOM KANAN: TIMELINE & AKSI (Log Style) --}}
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white py-3">
|
||||
<h6 class="fw-bold m-0 text-secondary"><i class="bi bi-clock-history me-2"></i>Riwayat Status</h6>
|
||||
<div class="row g-4">
|
||||
|
||||
{{-- KOLOM DATA LENGKAP --}}
|
||||
<div class="col-12 col-lg-8">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white py-4 border-bottom-0">
|
||||
<div class="d-flex justify-content-between align-items-center">
|
||||
<h5 class="fw-bold m-0 text-dark">
|
||||
<i class="bi bi-person-lines-fill me-2 text-primary"></i>Data Calon Petani
|
||||
</h5>
|
||||
{{-- Badge Status di Header Kiri --}}
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i> Menunggu
|
||||
Verifikasi</span>
|
||||
@elseif($petani->status_akun == 'aktif')
|
||||
<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Terverifikasi</span>
|
||||
@else
|
||||
<span class="badge bg-danger"><i class="bi bi-x-circle me-1"></i> Ditolak</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body px-4 pb-4 pt-0">
|
||||
<table class="table table-borderless align-middle mb-0">
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold pt-3" width="30%">Nama Lengkap</td>
|
||||
<td class="pt-3 fw-bold text-dark fs-5">{{ $petani->nama_lengkap }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Username</td>
|
||||
<td class="fw-medium">{{ $petani->username }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Nomor WhatsApp</td>
|
||||
<td>
|
||||
<span
|
||||
class="bg-light px-2 py-1 rounded fw-bold text-dark font-monospace">{{ $petani->no_hp }}</span>
|
||||
<a href="https://wa.me/{{ $petani->no_hp }}" target="_blank"
|
||||
class="ms-2 text-decoration-none small text-success fw-bold">
|
||||
<i class="bi bi-whatsapp"></i> Chat
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Nama Usaha Tani</td>
|
||||
<td class="fw-medium">{{ $petani->nama_usaha }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Alamat Lengkap</td>
|
||||
<td class="text-secondary" style="line-height: 1.6;">{{ $petani->alamat }}</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-muted small text-uppercase fw-bold">Terdaftar Sejak</td>
|
||||
<td class="text-secondary">{{ $petani->created_at->format('d F Y, H:i') }} WIB</td>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body p-4 d-flex flex-column">
|
||||
|
||||
{{-- TIMELINE LOG --}}
|
||||
<div class="timeline-wrapper mb-4">
|
||||
|
||||
{{-- STEP 1: REGISTRASI (Pasti Ada) --}}
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-file-earmark-text"></i>
|
||||
</div>
|
||||
|
||||
{{-- KOLOM TIMELINE & AKSI --}}
|
||||
<div class="col-12 col-lg-4">
|
||||
<div class="card border-0 shadow-sm h-100">
|
||||
<div class="card-header bg-white py-3">
|
||||
<h6 class="fw-bold m-0 text-secondary"><i class="bi bi-clock-history me-2"></i>Riwayat Status</h6>
|
||||
</div>
|
||||
<div class="card-body p-4 d-flex flex-column">
|
||||
|
||||
{{-- TIMELINE LOG --}}
|
||||
<div class="timeline-wrapper mb-4">
|
||||
|
||||
{{-- REGISTRASI --}}
|
||||
<div class="d-flex align-items-start mb-2">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-file-earmark-text mb-2"></i>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Registrasi Masuk</h6>
|
||||
<small
|
||||
class="text-muted d-block mb-1">{{ $petani->created_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-light text-black border">Data Diterima</span>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Registrasi Masuk</h6>
|
||||
<small class="text-muted d-block mb-1">{{ $petani->created_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-light text-secondary border">Data Diterima</span>
|
||||
|
||||
{{-- MENUNGGU VERIFIKASI --}}
|
||||
<div class="d-flex align-items-start mb-2">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<div class="rounded-circle bg-warning text-dark d-flex align-items-center justify-content-center shadow-sm"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-hourglass-split mb-2"></i>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
|
||||
@else
|
||||
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-check-lg mb-2"></i>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Proses Verifikasi</h6>
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<small class="text-muted d-block mb-1">Sedang ditinjau...</small>
|
||||
<span class="badge bg-warning text-dark bg-opacity-25">Pending</span>
|
||||
@else
|
||||
<small
|
||||
class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-light text-secondary border">Selesai Ditinjau</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{-- HASIL AKHIR --}}
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
@if($petani->status_akun == 'aktif')
|
||||
<div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center shadow-sm"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-shield-check mb-2"></i>
|
||||
</div>
|
||||
@elseif($petani->status_akun == 'ditolak')
|
||||
<div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center shadow-sm"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-shield-x mb-2"></i>
|
||||
</div>
|
||||
@else
|
||||
<div class="rounded-circle bg-light text-secondary border d-flex align-items-center justify-content-center"
|
||||
style="width: 35px; height: 35px;">
|
||||
<i class="bi bi-question-lg mb-2"></i>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Keputusan Admin</h6>
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<small class="text-muted">Menunggu tindakan Anda...</small>
|
||||
@elseif($petani->status_akun == 'aktif')
|
||||
<small
|
||||
class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-success bg-opacity-10 text-success">Disetujui</span>
|
||||
@else
|
||||
<small
|
||||
class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-danger bg-opacity-10 text-danger">Ditolak</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
{{-- STEP 2: MENUNGGU VERIFIKASI (Step Tengah) --}}
|
||||
<div class="d-flex align-items-start mb-4">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
{{-- Jika status menunggu, icon kuning. Jika sudah lewat (aktif/tolak), icon biru (selesai) --}}
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<div class="rounded-circle bg-warning text-dark d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-hourglass-split"></i>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div>
|
||||
@else
|
||||
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-check-lg"></i>
|
||||
</div>
|
||||
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div>
|
||||
@endif
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Proses Verifikasi</h6>
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<small class="text-muted d-block mb-1">Sedang ditinjau...</small>
|
||||
<span class="badge bg-warning text-dark bg-opacity-25">Pending</span>
|
||||
@else
|
||||
{{-- Jika sudah diproses, ambil waktunya --}}
|
||||
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-light text-secondary border">Selesai Ditinjau</span>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
<hr class="border-light my-1">
|
||||
|
||||
{{-- STEP 3: HASIL AKHIR --}}
|
||||
<div class="d-flex align-items-start">
|
||||
<div class="d-flex flex-column align-items-center me-3">
|
||||
@if($petani->status_akun == 'aktif')
|
||||
<div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-shield-check"></i>
|
||||
</div>
|
||||
@elseif($petani->status_akun == 'ditolak')
|
||||
<div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-shield-x"></i>
|
||||
</div>
|
||||
@else
|
||||
{{-- Icon abu-abu jika belum sampai tahap ini --}}
|
||||
<div class="rounded-circle bg-light text-secondary border d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;">
|
||||
<i class="bi bi-question-lg"></i>
|
||||
</div>
|
||||
@endif
|
||||
{{-- PANEL TOMBOL AKSI --}}
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<div class="mt-auto">
|
||||
<div class="alert alert-warning border-0 d-flex align-items-center p-3 mb-3">
|
||||
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
||||
<div class="small lh-sm">Pastikan data di samping valid sebelum memproses.</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<form action="{{ url('admin/verifikasi/' . $petani->id . '/approve') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-primary w-100 py-2 shadow-sm fw-bold"
|
||||
onclick="return confirm('Terima pendaftaran ini?')">
|
||||
<i class="bi bi-check-circle-fill me-2"></i>Terima Pendaftaran
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action="{{ url('admin/verifikasi/' . $petani->id . '/reject') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-outline-danger w-100 py-2 border-2 fw-bold"
|
||||
onclick="return confirm('Tolak pendaftaran ini?')">
|
||||
<i class="bi bi-x-circle me-2"></i>Tolak Pendaftaran
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<h6 class="fw-bold text-dark mb-0">Keputusan Admin</h6>
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<small class="text-muted">Menunggu tindakan Anda...</small>
|
||||
@elseif($petani->status_akun == 'aktif')
|
||||
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-success bg-opacity-10 text-success">Disetujui</span>
|
||||
@else
|
||||
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small>
|
||||
<span class="badge bg-danger bg-opacity-10 text-danger">Ditolak</span>
|
||||
@endif
|
||||
@else
|
||||
{{-- Pesan Status Akhir --}}
|
||||
<div class="mt-auto text-center p-3 bg-light rounded border border-light">
|
||||
<div class="fw-bold {{ $petani->status_akun == 'aktif' ? 'text-success' : 'text-danger' }}">
|
||||
STATUS AKHIR: {{ strtoupper($petani->status_akun) }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
|
||||
<hr class="border-light my-3">
|
||||
|
||||
{{-- PANEL TOMBOL AKSI (Hanya muncul jika MENUNGGU) --}}
|
||||
@if($petani->status_akun == 'menunggu')
|
||||
<div class="mt-auto">
|
||||
<div class="alert alert-warning border-0 d-flex align-items-center p-3 mb-3">
|
||||
<i class="bi bi-info-circle-fill me-2 fs-5"></i>
|
||||
<div class="small lh-sm">Pastikan data di samping valid sebelum memproses.</div>
|
||||
</div>
|
||||
|
||||
<div class="d-grid gap-2">
|
||||
<form action="{{ url('admin/verifikasi/'.$petani->id.'/approve') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-primary w-100 py-2 shadow-sm fw-bold" onclick="return confirm('Terima pendaftaran ini?')">
|
||||
<i class="bi bi-check-circle-fill me-2"></i>Terima Pendaftaran
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<form action="{{ url('admin/verifikasi/'.$petani->id.'/reject') }}" method="POST">
|
||||
@csrf
|
||||
<button type="submit" class="btn btn-outline-danger w-100 py-2 border-2 fw-bold" onclick="return confirm('Tolak pendaftaran ini?')">
|
||||
<i class="bi bi-x-circle me-2"></i>Tolak Pendaftaran
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
@else
|
||||
{{-- Pesan Status Akhir --}}
|
||||
<div class="mt-auto text-center p-3 bg-light rounded border border-light">
|
||||
<div class="fw-bold {{ $petani->status_akun == 'aktif' ? 'text-success' : 'text-danger' }}">
|
||||
STATUS AKHIR: {{ strtoupper($petani->status_akun) }}
|
||||
</div>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@endsection
|
||||
Loading…
Reference in New Issue