63 lines
2.9 KiB
PHP
63 lines
2.9 KiB
PHP
<div>
|
|
{{-- Top Nav --}}
|
|
@include('livewire.user-management.top-nav.user-management')
|
|
|
|
<div class="p-4 bg-white rounded shadow">
|
|
<div class="flex justify-between items-center mb-4">
|
|
<input
|
|
type="text"
|
|
placeholder="Search"
|
|
class="border p-2 rounded w-1/3"
|
|
wire:model.debounce.300ms="search"
|
|
wire:keydown.enter="searchEnter"
|
|
>
|
|
<button class="bg-orange-500 text-white px-4 py-2 rounded hover:bg-orange-600">Add User</button>
|
|
</div>
|
|
|
|
<table class="min-w-full text-sm text-left border border-gray-200">
|
|
<thead class="bg-gray-100">
|
|
<tr>
|
|
<th class="p-2"><input type="checkbox" /></th>
|
|
@foreach(['username', 'first_name', 'last_name', 'role', 'email', 'status'] as $field)
|
|
<th class="p-2 cursor-pointer select-none" wire:click="sortBy('{{ $field }}')">
|
|
<div class="flex items-center space-x-1">
|
|
<span>{{ ucfirst(str_replace('_', ' ', $field)) }}</span>
|
|
{{-- Use one consistent icon for all headers --}}
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-4 text-gray-400" viewBox="0 0 20 20" fill="currentColor">
|
|
<path d="M10 3l3 4H7l3-4zm0 14l-3-4h6l-3 4z" />
|
|
</svg>
|
|
</div>
|
|
</th>
|
|
@endforeach
|
|
<th class="p-2">Action</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
@forelse($users as $user)
|
|
<tr class="hover:bg-gray-50">
|
|
<td class="p-2"><input type="checkbox" /></td>
|
|
<td class="p-2">{{ $user['username'] }}</td>
|
|
<td class="p-2">{{ $user['first_name'] }}</td>
|
|
<td class="p-2">{{ $user['last_name'] }}</td>
|
|
<td class="p-2">{{ $user['role'] }}</td>
|
|
<td class="p-2">{{ $user['email'] }}</td>
|
|
<td class="p-2 text-blue-500">{{ $user['status'] }}</td>
|
|
<td class="p-2 flex space-x-2 text-orange-500">
|
|
<button>✏️</button>
|
|
<button>🗑️</button>
|
|
<button>⏱️</button>
|
|
</td>
|
|
</tr>
|
|
@empty
|
|
<tr>
|
|
<td class="p-2 text-center" colspan="8">No users found.</td>
|
|
</tr>
|
|
@endforelse
|
|
</tbody>
|
|
</table>
|
|
|
|
{{-- Pagination using component --}}
|
|
<x-pagination :currentPage="$currentPage" :totalPages="$totalPages" />
|
|
</div>
|
|
</div>
|