114 lines
4.6 KiB
PHP
114 lines
4.6 KiB
PHP
<div class="mx-auto">
|
|
<div class="flex justify-between items-center mb-8">
|
|
<div>
|
|
<flux:heading size="xl">Manajemen User</flux:heading>
|
|
<flux:subheading>Kelola pengguna dan hak akses mereka.</flux:subheading>
|
|
</div>
|
|
<flux:button wire:click="create" variant="primary" icon="user-plus">Tambah User</flux:button>
|
|
</div>
|
|
|
|
<div class="flex md:flex-row flex-col gap-4 mb-4">
|
|
{{-- Input Pencarian --}}
|
|
<div class="flex-1">
|
|
<flux:input wire:model.live.debounce.300ms="search" placeholder="Cari nama atau email..."
|
|
icon="magnifying-glass" />
|
|
</div>
|
|
|
|
{{-- Filter Role --}}
|
|
<div class="w-full md:w-64">
|
|
<flux:select wire:model.live="filterRole" icon="funnel">
|
|
<option value="">Semua Role</option>
|
|
@foreach ($roles as $role)
|
|
<option value="{{ $role->name }}">{{ ucfirst($role->name) }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
</div>
|
|
</div>
|
|
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>Nama</flux:table.column>
|
|
<flux:table.column>Email</flux:table.column>
|
|
<flux:table.column>Role</flux:table.column>
|
|
<flux:table.column>Bergabung Pada</flux:table.column>
|
|
<flux:table.column align="end">Aksi</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
<flux:table.rows>
|
|
@foreach ($users as $user)
|
|
<flux:table.row :key="$user->id">
|
|
<flux:table.cell>{{ $user->name }}</flux:table.cell>
|
|
<flux:table.cell>{{ $user->email }}</flux:table.cell>
|
|
<flux:table.cell>
|
|
<flux:badge color="zinc" size="sm">
|
|
{{ $user->getRoleNames()->implode(', ') ?: 'Tidak Ada Role' }}
|
|
</flux:badge>
|
|
</flux:table.cell>
|
|
<flux:table.cell>{{ $user->created_at->translatedFormat('d F Y') }}</flux:table.cell>
|
|
<flux:table.cell align="end">
|
|
<div class="flex justify-end gap-2">
|
|
<flux:button wire:click="edit({{ $user->id }})" variant="ghost" icon="pencil-square"
|
|
size="sm" />
|
|
@if ($user->id !== auth()->id())
|
|
<flux:button x-on:click="confirmDelete({{ $user->id }}, '{{ $user->name }}')"
|
|
variant="ghost" icon="trash" size="sm" class="text-red-500" />
|
|
@endif
|
|
</div>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforeach
|
|
</flux:table.rows>
|
|
</flux:table>
|
|
|
|
<div class="mt-4">
|
|
<flux:pagination :paginator="$users" />
|
|
</div>
|
|
|
|
{{-- Modal Form --}}
|
|
<flux:modal wire:model="isModalOpen" class="min-w-[500px]">
|
|
<form wire:submit.prevent="save" class="space-y-6">
|
|
<flux:heading size="lg">{{ $userId ? 'Edit User' : 'User Baru' }}</flux:heading>
|
|
|
|
<flux:input wire:model="name" label="Nama Lengkap" />
|
|
<flux:input wire:model="email" label="Alamat Email" type="email" />
|
|
|
|
<flux:select wire:model="selectedRole" label="Pilih Role">
|
|
<option value="">-- Pilih Role --</option>
|
|
@foreach ($roles as $role)
|
|
<option value="{{ $role->name }}">{{ strtoupper($role->name) }}</option>
|
|
@endforeach
|
|
</flux:select>
|
|
|
|
<flux:input wire:model="password" label="Password" type="password"
|
|
placeholder="{{ $userId ? 'Kosongkan jika tidak ingin ganti' : 'Minimal 8 karakter' }}" />
|
|
|
|
<div class="flex justify-end space-x-2">
|
|
<flux:modal.close>
|
|
<flux:button variant="ghost">Batal</flux:button>
|
|
</flux:modal.close>
|
|
<flux:button type="submit" variant="primary">Simpan User</flux:button>
|
|
</div>
|
|
</form>
|
|
</flux:modal>
|
|
</div>
|
|
|
|
@script
|
|
<script>
|
|
window.confirmDelete = function(id, name) {
|
|
Swal.fire({
|
|
title: 'Hapus User?',
|
|
text: `Hapus pengguna ${name}? Data tidak bisa dikembalikan.`,
|
|
icon: 'warning',
|
|
showCancelButton: true,
|
|
confirmButtonColor: '#ef4444',
|
|
confirmButtonText: 'Ya, Hapus',
|
|
reverseButtons: true
|
|
}).then((result) => {
|
|
if (result.isConfirmed) {
|
|
$wire.delete(id);
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
@endscript
|