274 lines
15 KiB
PHP
274 lines
15 KiB
PHP
@extends('layouts.app')
|
|
@section('title', 'Kelola User')
|
|
@section('page-title', 'Kelola User')
|
|
|
|
@section('content')
|
|
|
|
@if(session('status'))
|
|
<div class="mb-4 px-4 py-3 rounded-xl text-sm font-medium flex items-center gap-2"
|
|
style="background:#f0fdf4;color:#16a34a;border:1px solid #86efac;">
|
|
<i class="fas fa-check-circle"></i> {{ session('status') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if($errors->any())
|
|
<div class="mb-4 px-4 py-3 rounded-xl text-sm font-medium"
|
|
style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;">
|
|
<i class="fas fa-exclamation-circle mr-1"></i> {{ $errors->first() }}
|
|
</div>
|
|
@endif
|
|
|
|
{{-- Kartu Statistik --}}
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
|
|
<div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Total User</p>
|
|
<h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#1a3a2a;">
|
|
{{ $totalAdmin + $totalUser }}
|
|
</h3>
|
|
</div>
|
|
<div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Ahli Tanaman</p>
|
|
<h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#2d6a4f;">
|
|
{{ $totalAdmin }}
|
|
</h3>
|
|
</div>
|
|
<div class="bg-white p-5 rounded-2xl border border-[#ede8df]" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<p class="text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Petani</p>
|
|
<h3 class="text-3xl font-bold" style="font-family:'Playfair Display',serif;color:#2563eb;">
|
|
{{ $totalUser }}
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Filter & Search --}}
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] p-5 mb-5" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
<form method="GET" action="{{ route('users.index') }}" class="flex flex-wrap gap-3 items-end">
|
|
<div class="flex-1 min-w-[200px]">
|
|
<label class="block text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Cari</label>
|
|
<input type="text" name="search" value="{{ request('search') }}"
|
|
placeholder="Nama atau email..."
|
|
class="w-full px-4 py-2.5 rounded-xl border text-sm"
|
|
style="border-color:#ede8df;color:#1a3a2a;outline:none;" />
|
|
</div>
|
|
<div>
|
|
<label class="block text-xs font-semibold uppercase tracking-wider mb-1" style="color:#5a7a67;">Role</label>
|
|
<select name="role" class="px-4 py-2.5 rounded-xl border text-sm" style="border-color:#ede8df;color:#1a3a2a;outline:none;">
|
|
<option value="">Semua</option>
|
|
<option value="admin" {{ request('role') === 'admin' ? 'selected' : '' }}>Ahli Tanaman</option>
|
|
<option value="user" {{ request('role') === 'user' ? 'selected' : '' }}>Petani</option>
|
|
</select>
|
|
</div>
|
|
<button type="submit" class="px-5 py-2.5 rounded-xl text-sm font-semibold text-white" style="background:#2d6a4f;">
|
|
<i class="fas fa-search mr-1"></i> Cari
|
|
</button>
|
|
@if(request('search') || request('role'))
|
|
<a href="{{ route('users.index') }}" class="px-5 py-2.5 rounded-xl text-sm font-semibold"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
<i class="fas fa-times mr-1"></i> Reset
|
|
</a>
|
|
@endif
|
|
</form>
|
|
</div>
|
|
|
|
{{-- Tabel User --}}
|
|
<div class="bg-white rounded-2xl border border-[#ede8df] overflow-hidden" style="box-shadow:0 2px 12px rgba(26,58,42,.06);">
|
|
|
|
{{-- Mobile: card --}}
|
|
<div class="mobile-cards" style="display:none;">
|
|
@forelse($users as $user)
|
|
<div style="padding:16px;border-bottom:1px solid #ede8df;">
|
|
<div style="display:flex;align-items:center;gap:12px;margin-bottom:10px;">
|
|
<div style="width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:14px;flex-shrink:0;background:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
<div style="flex:1;min-width:0;">
|
|
<p style="font-weight:600;font-size:14px;color:#1a3a2a;margin:0;">
|
|
{{ $user->name }}
|
|
@if($user->id === auth()->id())
|
|
<span style="font-size:12px;font-weight:400;color:#8fa89a;">(Kamu)</span>
|
|
@endif
|
|
</p>
|
|
<p style="font-size:12px;color:#5a7a67;margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">{{ $user->email }}</p>
|
|
</div>
|
|
<span style="padding:4px 10px;border-radius:999px;font-size:11px;font-weight:600;flex-shrink:0;background:{{ $user->role === 'admin' ? '#d8f3dc' : '#e0f0ff' }};color:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
|
|
{{ $user->role === 'admin' ? 'Ahli' : 'Petani' }}
|
|
</span>
|
|
</div>
|
|
@if($user->id !== auth()->id())
|
|
<div style="display:flex;gap:8px;">
|
|
<form method="POST" action="{{ route('users.updateRole', $user) }}" style="flex:1;">
|
|
@csrf
|
|
@method('PATCH')
|
|
<input type="hidden" name="role" value="{{ $user->role === 'admin' ? 'user' : 'admin' }}">
|
|
<button type="submit"
|
|
style="width:100%;padding:8px;border-radius:8px;font-size:12px;font-weight:600;background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;cursor:pointer;"
|
|
onclick="return confirm('Ubah role {{ addslashes($user->name) }}?')">
|
|
<i class="fas fa-exchange-alt" style="margin-right:4px;"></i>
|
|
Jadikan {{ $user->role === 'admin' ? 'Petani' : 'Ahli' }}
|
|
</button>
|
|
</form>
|
|
<button onclick="confirmDeleteUser({{ $user->id }}, '{{ addslashes($user->name) }}')"
|
|
style="padding:8px 12px;border-radius:8px;font-size:12px;font-weight:600;background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;cursor:pointer;">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
@endif
|
|
</div>
|
|
@empty
|
|
<div style="text-align:center;padding:48px;color:#8fa89a;">
|
|
<i class="fas fa-users" style="font-size:32px;color:#c8d8cc;display:block;margin-bottom:12px;"></i>
|
|
Tidak ada user ditemukan
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
{{-- Desktop: tabel --}}
|
|
<div class="desktop-table overflow-x-auto">
|
|
<table class="w-full">
|
|
<thead>
|
|
<tr style="background:#f8f4ee;border-bottom:2px solid #ede8df;">
|
|
<th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">User</th>
|
|
<th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Email</th>
|
|
<th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Role</th>
|
|
<th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Bergabung</th>
|
|
<th class="text-left py-3 px-5" style="color:#5a7a67;font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;font-weight:600;">Aksi</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($users as $user)
|
|
<tr style="border-bottom:1px solid rgba(237,232,223,.6);"
|
|
class="transition" onmouseover="this.style.background='rgba(216,243,220,.2)'" onmouseout="this.style.background=''">
|
|
<td class="py-3 px-5">
|
|
<div class="flex items-center gap-3">
|
|
<div class="w-9 h-9 rounded-full flex items-center justify-center text-white font-bold text-sm flex-shrink-0"
|
|
style="background:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
<div>
|
|
<p class="text-sm font-semibold" style="color:#1a3a2a;">
|
|
{{ $user->name }}
|
|
@if($user->id === auth()->id())
|
|
<span class="text-xs font-normal ml-1" style="color:#8fa89a;">(Kamu)</span>
|
|
@endif
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</td>
|
|
<td class="py-3 px-5 text-sm" style="color:#5a7a67;">{{ $user->email }}</td>
|
|
<td class="py-3 px-5">
|
|
<span class="px-3 py-1 rounded-full text-xs font-semibold"
|
|
style="background:{{ $user->role === 'admin' ? '#d8f3dc' : '#e0f0ff' }};
|
|
color:{{ $user->role === 'admin' ? '#2d6a4f' : '#2563eb' }};">
|
|
<i class="fas {{ $user->role === 'admin' ? 'fa-user-tie' : 'fa-seedling' }} mr-1"></i>
|
|
{{ $user->role === 'admin' ? 'Ahli Tanaman' : 'Petani' }}
|
|
</span>
|
|
</td>
|
|
<td class="py-3 px-5 text-sm" style="color:#8fa89a;">{{ $user->created_at->format('d M Y') }}</td>
|
|
<td class="py-3 px-5">
|
|
@if($user->id !== auth()->id())
|
|
<div class="flex items-center gap-2">
|
|
<form method="POST" action="{{ route('users.updateRole', $user) }}">
|
|
@csrf
|
|
@method('PATCH')
|
|
<input type="hidden" name="role" value="{{ $user->role === 'admin' ? 'user' : 'admin' }}">
|
|
<button type="submit"
|
|
class="px-3 py-1.5 rounded-lg text-xs font-semibold transition"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1px solid #b7ddc4;"
|
|
onmouseover="this.style.background='#d8f3dc'" onmouseout="this.style.background='#f0fdf4'"
|
|
onclick="return confirm('Ubah role {{ addslashes($user->name) }} menjadi {{ $user->role === 'admin' ? 'Petani' : 'Ahli Tanaman' }}?')">
|
|
<i class="fas fa-exchange-alt mr-1"></i>
|
|
Jadikan {{ $user->role === 'admin' ? 'Petani' : 'Ahli Tanaman' }}
|
|
</button>
|
|
</form>
|
|
<button onclick="confirmDeleteUser({{ $user->id }}, '{{ addslashes($user->name) }}')"
|
|
class="px-3 py-1.5 rounded-lg text-xs font-semibold transition"
|
|
style="background:#fff0f0;color:#dc2626;border:1px solid #fca5a5;"
|
|
onmouseover="this.style.background='#fee2e2'" onmouseout="this.style.background='#fff0f0'">
|
|
<i class="fas fa-trash"></i>
|
|
</button>
|
|
</div>
|
|
@else
|
|
<span class="text-xs" style="color:#c8d8cc;">—</span>
|
|
@endif
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td colspan="5" class="text-center py-12" style="color:#8fa89a;">
|
|
<i class="fas fa-users text-3xl mb-3 block" style="color:#c8d8cc;"></i>
|
|
Tidak ada user ditemukan
|
|
</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
@if($users->hasPages())
|
|
<div class="px-5 py-4" style="border-top:1px solid #ede8df;">
|
|
{{ $users->links() }}
|
|
</div>
|
|
@endif
|
|
</div>
|
|
|
|
{{-- Modal Konfirmasi Hapus User --}}
|
|
<div id="deleteUserModal" class="fixed inset-0 z-50 hidden flex items-center justify-center"
|
|
style="background:rgba(0,0,0,0.4);">
|
|
<div class="bg-white rounded-2xl p-6 w-full max-w-sm mx-4 shadow-2xl"
|
|
style="animation: popIn .25s cubic-bezier(0.22,1,0.36,1);">
|
|
<div class="text-center mb-4">
|
|
<div class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-3"
|
|
style="background:#fff0f0;">
|
|
<i class="fas fa-user-times text-2xl" style="color:#dc2626;"></i>
|
|
</div>
|
|
<h3 class="text-lg font-bold mb-1" style="font-family:'Playfair Display',serif;color:#1a3a2a;">Hapus User?</h3>
|
|
<p class="text-sm" style="color:#5a7a67;">
|
|
Kamu akan menghapus akun<br>
|
|
<strong id="deleteUserName" style="color:#1a3a2a;"></strong>
|
|
</p>
|
|
<p class="text-xs mt-2" style="color:#dc2626;">⚠️ Semua data diagnosa user ikut terhapus.</p>
|
|
</div>
|
|
<div class="flex gap-3 mt-4">
|
|
<button onclick="closeUserModal()"
|
|
class="flex-1 py-2.5 rounded-xl text-sm font-semibold"
|
|
style="background:#f0fdf4;color:#2d6a4f;border:1.5px solid #b7ddc4;">
|
|
Batal
|
|
</button>
|
|
<form id="deleteUserForm" method="POST" class="flex-1">
|
|
@csrf
|
|
@method('DELETE')
|
|
<button type="submit" class="w-full py-2.5 rounded-xl text-sm font-semibold text-white" style="background:#dc2626;">
|
|
Ya, Hapus
|
|
</button>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
@endsection
|
|
|
|
@push('scripts')
|
|
<script>
|
|
function confirmDeleteUser(id, name) {
|
|
document.getElementById('deleteUserName').textContent = name;
|
|
document.getElementById('deleteUserForm').action = '{{ route("users.destroy", ":id") }}'.replace(':id', id);
|
|
document.getElementById('deleteUserModal').classList.remove('hidden');
|
|
}
|
|
function closeUserModal() {
|
|
document.getElementById('deleteUserModal').classList.add('hidden');
|
|
}
|
|
document.getElementById('deleteUserModal').addEventListener('click', function(e) {
|
|
if (e.target === this) closeUserModal();
|
|
});
|
|
</script>
|
|
<style>
|
|
@media (max-width: 640px) {
|
|
.mobile-cards { display: block !important; }
|
|
.desktop-table { display: none !important; }
|
|
}
|
|
@keyframes popIn {
|
|
from { transform: scale(0.85); opacity: 0; }
|
|
to { transform: scale(1); opacity: 1; }
|
|
}
|
|
</style>
|
|
@endpush |