188 lines
12 KiB
PHP
188 lines
12 KiB
PHP
<x-app-layout>
|
|
<x-slot name="header">
|
|
<div class="flex justify-between items-center">
|
|
<div>
|
|
<h2 class="font-semibold text-xl text-gray-800 leading-tight">Data Calon Penerima</h2>
|
|
<p class="text-sm text-gray-500 mt-0.5">Daftar seluruh warga yang telah didaftarkan.</p>
|
|
</div>
|
|
<a href="{{ route('rt.calon-penerima.create') }}"
|
|
class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white text-sm font-semibold rounded-xl hover:bg-blue-700 transition shadow-md shadow-blue-200">
|
|
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
|
</svg>
|
|
Tambah Data
|
|
</a>
|
|
</div>
|
|
</x-slot>
|
|
|
|
{{-- NOTIFIKASI --}}
|
|
@if (session('success'))
|
|
<div class="mb-4 flex items-center gap-3 rounded-xl border border-green-200 bg-green-50 px-4 py-3 text-sm text-green-700">
|
|
<svg class="w-4 h-4 shrink-0 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session('error'))
|
|
<div class="mb-4 flex items-center gap-3 rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
|
|
<svg class="w-4 h-4 shrink-0 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M12 3a9 9 0 100 18A9 9 0 0012 3z"/>
|
|
</svg>
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<div class="bg-white shadow-sm rounded-2xl border border-gray-100 overflow-hidden">
|
|
|
|
{{-- TABLE HEADER INFO --}}
|
|
<div class="px-5 py-3 border-b border-gray-100 bg-gray-50 flex items-center justify-between">
|
|
<div class="flex items-center gap-2">
|
|
<div class="w-1 h-4 bg-blue-600 rounded-full"></div>
|
|
<span class="text-sm font-semibold text-gray-700">
|
|
Total: {{ $calonPenerimas->total() }} data
|
|
</span>
|
|
</div>
|
|
<span class="text-xs text-gray-400">
|
|
Halaman {{ $calonPenerimas->currentPage() }} dari {{ $calonPenerimas->lastPage() }}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full text-sm text-gray-700">
|
|
<thead>
|
|
<tr class="bg-gray-50 border-b border-gray-100">
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">No</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Nama</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">NIK</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">RT</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Dusun</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Status</th>
|
|
<th class="px-4 py-3 text-left text-xs font-semibold text-gray-500 uppercase tracking-wide">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
|
|
<tbody class="divide-y divide-gray-50">
|
|
@forelse ($calonPenerimas as $index => $item)
|
|
<tr class="hover:bg-blue-50/30 transition-colors duration-150">
|
|
|
|
{{-- NO --}}
|
|
<td class="px-4 py-3 text-gray-400 text-xs">
|
|
{{ $calonPenerimas->firstItem() + $index }}
|
|
</td>
|
|
|
|
{{-- NAMA --}}
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-2.5">
|
|
<div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center shrink-0">
|
|
<span class="text-xs font-bold text-white">
|
|
{{ strtoupper(substr($item->nama_lengkap, 0, 1)) }}
|
|
</span>
|
|
</div>
|
|
<span class="font-medium text-gray-800">{{ $item->nama_lengkap }}</span>
|
|
</div>
|
|
</td>
|
|
|
|
{{-- NIK --}}
|
|
<td class="px-4 py-3 text-gray-500 font-mono text-xs">
|
|
{{ $item->nik }}
|
|
</td>
|
|
|
|
{{-- RT --}}
|
|
<td class="px-4 py-3">
|
|
<span class="inline-flex items-center px-2.5 py-0.5 rounded-lg bg-blue-50 text-blue-700 text-xs font-semibold border border-blue-100">
|
|
RT {{ str_pad($item->rt->nomor_rt ?? '-', 3, '0', STR_PAD_LEFT) }}
|
|
</span>
|
|
</td>
|
|
|
|
{{-- DUSUN --}}
|
|
<td class="px-4 py-3 text-gray-600 text-xs">
|
|
{{ $item->rt->dusun->nama_dusun ?? '-' }}
|
|
</td>
|
|
|
|
{{-- STATUS --}}
|
|
<td class="px-4 py-3">
|
|
@if ($item->status_verifikasi === 'pending')
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-full bg-amber-100 text-amber-700">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-amber-500"></span>
|
|
Pending
|
|
</span>
|
|
@elseif ($item->status_verifikasi === 'disetujui')
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-full bg-emerald-100 text-emerald-700">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-emerald-500"></span>
|
|
Disetujui
|
|
</span>
|
|
@else
|
|
<span class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-semibold rounded-full bg-rose-100 text-rose-700">
|
|
<span class="w-1.5 h-1.5 rounded-full bg-rose-500"></span>
|
|
Ditolak
|
|
</span>
|
|
@endif
|
|
</td>
|
|
|
|
{{-- AKSI --}}
|
|
<td class="px-4 py-3">
|
|
<div class="flex items-center gap-1.5">
|
|
<a href="{{ route('rt.calon-penerima.show', $item->id) }}"
|
|
class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-gray-100 text-gray-600 rounded-lg hover:bg-gray-200 transition">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
|
</svg>
|
|
Detail
|
|
</a>
|
|
|
|
@if ($item->status_verifikasi === 'pending')
|
|
<a href="{{ route('rt.calon-penerima.edit', $item->id) }}"
|
|
class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-blue-100 text-blue-700 rounded-lg hover:bg-blue-200 transition">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
|
</svg>
|
|
Edit
|
|
</a>
|
|
|
|
<form action="{{ route('rt.calon-penerima.destroy', $item->id) }}"
|
|
method="POST"
|
|
onsubmit="return confirm('Yakin ingin menghapus data {{ $item->nama_lengkap }}?')">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit"
|
|
class="inline-flex items-center gap-1 px-2.5 py-1 text-xs font-medium bg-rose-100 text-rose-700 rounded-lg hover:bg-rose-200 transition">
|
|
<svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
|
</svg>
|
|
Hapus
|
|
</button>
|
|
</form>
|
|
@endif
|
|
</div>
|
|
</td>
|
|
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="7" class="px-4 py-14 text-center">
|
|
<div class="flex flex-col items-center gap-2">
|
|
<div class="w-12 h-12 bg-gray-100 rounded-full flex items-center justify-center">
|
|
<svg class="w-6 h-6 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0z"/>
|
|
</svg>
|
|
</div>
|
|
<p class="text-sm font-medium text-gray-500">Belum ada data calon penerima</p>
|
|
<a href="{{ route('rt.calon-penerima.create') }}" class="text-xs text-blue-600 hover:underline">+ Tambah sekarang</a>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
{{-- PAGINATION --}}
|
|
<div class="px-5 py-3 border-t border-gray-100 bg-gray-50">
|
|
{{ $calonPenerimas->links() }}
|
|
</div>
|
|
|
|
</div>
|
|
</x-app-layout> |