adjust: bug styling in verification petani

This commit is contained in:
sayasilvi 2025-12-25 16:51:54 +07:00
parent b20dd54a6c
commit c04507dfb4
1 changed files with 190 additions and 178 deletions

View File

@ -14,11 +14,11 @@
<a href="{{ url('admin/verifikasi') }}" class="text-decoration-none text-muted"> <a href="{{ url('admin/verifikasi') }}" class="text-decoration-none text-muted">
<i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Antrian <i class="bi bi-arrow-left me-1"></i> Kembali ke Daftar Antrian
</a> </a>
</div> </div>
<div class="row g-4"> <div class="row g-4">
{{-- 1. KOLOM KIRI: DATA LENGKAP (Desain Clean List - Pilihan Kamu) --}} {{-- KOLOM DATA LENGKAP --}}
<div class="col-12 col-lg-8"> <div class="col-12 col-lg-8">
<div class="card border-0 shadow-sm h-100"> <div class="card border-0 shadow-sm h-100">
<div class="card-header bg-white py-4 border-bottom-0"> <div class="card-header bg-white py-4 border-bottom-0">
@ -28,7 +28,8 @@
</h5> </h5>
{{-- Badge Status di Header Kiri --}} {{-- Badge Status di Header Kiri --}}
@if($petani->status_akun == 'menunggu') @if($petani->status_akun == 'menunggu')
<span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i> Menunggu Verifikasi</span> <span class="badge bg-warning text-dark"><i class="bi bi-hourglass-split me-1"></i> Menunggu
Verifikasi</span>
@elseif($petani->status_akun == 'aktif') @elseif($petani->status_akun == 'aktif')
<span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Terverifikasi</span> <span class="badge bg-success"><i class="bi bi-check-circle me-1"></i> Terverifikasi</span>
@else @else
@ -49,8 +50,10 @@
<tr> <tr>
<td class="text-muted small text-uppercase fw-bold">Nomor WhatsApp</td> <td class="text-muted small text-uppercase fw-bold">Nomor WhatsApp</td>
<td> <td>
<span class="bg-light px-2 py-1 rounded fw-bold text-dark font-monospace">{{ $petani->no_hp }}</span> <span
<a href="https://wa.me/{{ $petani->no_hp }}" target="_blank" class="ms-2 text-decoration-none small text-success fw-bold"> 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 <i class="bi bi-whatsapp"></i> Chat
</a> </a>
</td> </td>
@ -72,7 +75,7 @@
</div> </div>
</div> </div>
{{-- 2. KOLOM KANAN: TIMELINE & AKSI (Log Style) --}} {{-- KOLOM TIMELINE & AKSI --}}
<div class="col-12 col-lg-4"> <div class="col-12 col-lg-4">
<div class="card border-0 shadow-sm h-100"> <div class="card border-0 shadow-sm h-100">
<div class="card-header bg-white py-3"> <div class="card-header bg-white py-3">
@ -83,35 +86,38 @@
{{-- TIMELINE LOG --}} {{-- TIMELINE LOG --}}
<div class="timeline-wrapper mb-4"> <div class="timeline-wrapper mb-4">
{{-- STEP 1: REGISTRASI (Pasti Ada) --}} {{-- REGISTRASI --}}
<div class="d-flex align-items-start mb-4"> <div class="d-flex align-items-start mb-2">
<div class="d-flex flex-column align-items-center me-3"> <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;"> <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm"
<i class="bi bi-file-earmark-text"></i> style="width: 35px; height: 35px;">
<i class="bi bi-file-earmark-text mb-2"></i>
</div> </div>
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div> <div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
</div> </div>
<div> <div>
<h6 class="fw-bold text-dark mb-0">Registrasi Masuk</h6> <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> <small
<span class="badge bg-light text-secondary border">Data Diterima</span> 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>
</div> </div>
{{-- STEP 2: MENUNGGU VERIFIKASI (Step Tengah) --}} {{-- MENUNGGU VERIFIKASI --}}
<div class="d-flex align-items-start mb-4"> <div class="d-flex align-items-start mb-2">
<div class="d-flex flex-column align-items-center me-3"> <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') @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;"> <div class="rounded-circle bg-warning text-dark d-flex align-items-center justify-content-center shadow-sm"
<i class="bi bi-hourglass-split"></i> style="width: 35px; height: 35px;">
<i class="bi bi-hourglass-split mb-2"></i>
</div> </div>
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div> <div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
@else @else
<div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm" style="width: 32px; height: 32px;"> <div class="rounded-circle bg-primary text-white d-flex align-items-center justify-content-center shadow-sm"
<i class="bi bi-check-lg"></i> style="width: 35px; height: 35px;">
<i class="bi bi-check-lg mb-2"></i>
</div> </div>
<div class="bg-light" style="width: 2px; height: 35px; margin-top: 5px;"></div> <div class="bg-light" style="width: 2px; height: 50px; margin-top: 10px;"></div>
@endif @endif
</div> </div>
<div> <div>
@ -120,28 +126,30 @@
<small class="text-muted d-block mb-1">Sedang ditinjau...</small> <small class="text-muted d-block mb-1">Sedang ditinjau...</small>
<span class="badge bg-warning text-dark bg-opacity-25">Pending</span> <span class="badge bg-warning text-dark bg-opacity-25">Pending</span>
@else @else
{{-- Jika sudah diproses, ambil waktunya --}} <small
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</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> <span class="badge bg-light text-secondary border">Selesai Ditinjau</span>
@endif @endif
</div> </div>
</div> </div>
{{-- STEP 3: HASIL AKHIR --}} {{-- HASIL AKHIR --}}
<div class="d-flex align-items-start"> <div class="d-flex align-items-start">
<div class="d-flex flex-column align-items-center me-3"> <div class="d-flex flex-column align-items-center me-3">
@if($petani->status_akun == 'aktif') @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;"> <div class="rounded-circle bg-success text-white d-flex align-items-center justify-content-center shadow-sm"
<i class="bi bi-shield-check"></i> style="width: 35px; height: 35px;">
<i class="bi bi-shield-check mb-2"></i>
</div> </div>
@elseif($petani->status_akun == 'ditolak') @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;"> <div class="rounded-circle bg-danger text-white d-flex align-items-center justify-content-center shadow-sm"
<i class="bi bi-shield-x"></i> style="width: 35px; height: 35px;">
<i class="bi bi-shield-x mb-2"></i>
</div> </div>
@else @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"
<div class="rounded-circle bg-light text-secondary border d-flex align-items-center justify-content-center" style="width: 32px; height: 32px;"> style="width: 35px; height: 35px;">
<i class="bi bi-question-lg"></i> <i class="bi bi-question-lg mb-2"></i>
</div> </div>
@endif @endif
</div> </div>
@ -150,10 +158,12 @@
@if($petani->status_akun == 'menunggu') @if($petani->status_akun == 'menunggu')
<small class="text-muted">Menunggu tindakan Anda...</small> <small class="text-muted">Menunggu tindakan Anda...</small>
@elseif($petani->status_akun == 'aktif') @elseif($petani->status_akun == 'aktif')
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small> <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> <span class="badge bg-success bg-opacity-10 text-success">Disetujui</span>
@else @else
<small class="text-muted d-block mb-1">{{ $petani->updated_at->format('d M Y, H:i') }}</small> <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> <span class="badge bg-danger bg-opacity-10 text-danger">Ditolak</span>
@endif @endif
</div> </div>
@ -161,9 +171,9 @@
</div> </div>
<hr class="border-light my-3"> <hr class="border-light my-1">
{{-- PANEL TOMBOL AKSI (Hanya muncul jika MENUNGGU) --}} {{-- PANEL TOMBOL AKSI --}}
@if($petani->status_akun == 'menunggu') @if($petani->status_akun == 'menunggu')
<div class="mt-auto"> <div class="mt-auto">
<div class="alert alert-warning border-0 d-flex align-items-center p-3 mb-3"> <div class="alert alert-warning border-0 d-flex align-items-center p-3 mb-3">
@ -172,16 +182,18 @@
</div> </div>
<div class="d-grid gap-2"> <div class="d-grid gap-2">
<form action="{{ url('admin/verifikasi/'.$petani->id.'/approve') }}" method="POST"> <form action="{{ url('admin/verifikasi/' . $petani->id . '/approve') }}" method="POST">
@csrf @csrf
<button type="submit" class="btn btn-primary w-100 py-2 shadow-sm fw-bold" onclick="return confirm('Terima pendaftaran ini?')"> <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 <i class="bi bi-check-circle-fill me-2"></i>Terima Pendaftaran
</button> </button>
</form> </form>
<form action="{{ url('admin/verifikasi/'.$petani->id.'/reject') }}" method="POST"> <form action="{{ url('admin/verifikasi/' . $petani->id . '/reject') }}" method="POST">
@csrf @csrf
<button type="submit" class="btn btn-outline-danger w-100 py-2 border-2 fw-bold" onclick="return confirm('Tolak pendaftaran ini?')"> <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 <i class="bi bi-x-circle me-2"></i>Tolak Pendaftaran
</button> </button>
</form> </form>
@ -199,5 +211,5 @@
</div> </div>
</div> </div>
</div> </div>
</div> </div>
@endsection @endsection