199 lines
No EOL
10 KiB
PHP
199 lines
No EOL
10 KiB
PHP
<div>
|
|
<div class="flex justify-between items-center mb-6">
|
|
<h1 class="text-2xl font-syncopate text-accent-blue">MANAGE USERS</h1>
|
|
<button wire:click="create"
|
|
class="py-2 px-4 bg-primary text-white text-xl rounded hover:bg-secondary transition-colors duration-200">
|
|
Add User
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Flash Messages -->
|
|
@if (session()->has('success'))
|
|
<div class="border-2 border-success text-success rounded p-4 mb-6">
|
|
{{ session('success') }}
|
|
</div>
|
|
@endif
|
|
|
|
@if (session()->has('error'))
|
|
<div class="border-2 border-danger text-danger rounded p-4 mb-6">
|
|
{{ session('error') }}
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Users List -->
|
|
<div class="space-y-4">
|
|
@forelse ($users as $user)
|
|
<div class="w-full border-2 border-secondary p-4 rounded flex justify-between items-center">
|
|
<div class="flex items-center space-x-4">
|
|
<div class="w-12 h-12 bg-primary rounded-full flex items-center justify-center text-white font-bold text-lg">
|
|
{{ strtoupper(substr($user->name, 0, 1)) }}
|
|
</div>
|
|
<div>
|
|
<h3 class="text-lg font-bold text-gray-100">{{ $user->name }}</h3>
|
|
<p class="text-gray-300">{{ $user->email }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex space-x-2">
|
|
<button wire:click="edit({{ $user->id }})"
|
|
class="px-3 py-1 bg-accent-blue text-gray-900 rounded hover:bg-secondary transition-colors duration-200">
|
|
Edit
|
|
</button>
|
|
@if($user->id !== auth()->id())
|
|
<button wire:click="confirmDelete({{ $user->id }})"
|
|
class="px-3 py-1 bg-danger text-white rounded hover:bg-red-700 transition-colors duration-200">
|
|
Delete
|
|
</button>
|
|
@endif
|
|
</div>
|
|
</div>
|
|
@empty
|
|
<div class="text-center text-gray-300 py-8">
|
|
<p>No users found.</p>
|
|
</div>
|
|
@endforelse
|
|
</div>
|
|
|
|
<!-- Pagination -->
|
|
<div class="mt-6">
|
|
{{ $users->links() }}
|
|
</div>
|
|
|
|
<!-- Create User Modal -->
|
|
@if($showCreateModal)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-accent-blue mb-4">Add New User</h2>
|
|
|
|
<form wire:submit="store">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Name</label>
|
|
<input wire:model="name"
|
|
type="text"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Enter name">
|
|
@error('name') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Email</label>
|
|
<input wire:model="email"
|
|
type="email"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Enter email">
|
|
@error('email') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Password</label>
|
|
<input wire:model="password"
|
|
type="password"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Enter password">
|
|
@error('password') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2">Confirm Password</label>
|
|
<input wire:model="password_confirmation"
|
|
type="password"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Confirm password">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-colors duration-200">
|
|
Create User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Edit User Modal -->
|
|
@if($showEditModal && $editingUser)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-accent-blue mb-4">Edit User</h2>
|
|
|
|
<form wire:submit="update">
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Name</label>
|
|
<input wire:model="name"
|
|
type="text"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue">
|
|
@error('name') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">Email</label>
|
|
<input wire:model="email"
|
|
type="email"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue">
|
|
@error('email') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-4">
|
|
<label class="block text-sm font-medium mb-2">New Password (leave blank to keep current)</label>
|
|
<input wire:model="password"
|
|
type="password"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="New password (optional)">
|
|
@error('password') <span class="text-danger text-xs">{{ $message }}</span> @enderror
|
|
</div>
|
|
|
|
<div class="mb-6">
|
|
<label class="block text-sm font-medium mb-2">Confirm New Password</label>
|
|
<input wire:model="password_confirmation"
|
|
type="password"
|
|
class="w-full p-2 border rounded bg-gray-600 border-secondary text-gray-100 focus:bg-gray-900 focus:outline-none focus:border-accent-blue"
|
|
placeholder="Confirm new password">
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button type="submit"
|
|
class="px-4 py-2 bg-primary text-white rounded hover:bg-secondary transition-colors duration-200">
|
|
Update User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
<!-- Delete User Modal -->
|
|
@if($showDeleteModal && $deletingUser)
|
|
<div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
|
|
<div class="bg-gray-600 border-2 border-secondary rounded-lg p-6 w-full max-w-md mx-4">
|
|
<h2 class="text-xl text-danger mb-4">Delete User</h2>
|
|
<p class="text-gray-100 mb-6">
|
|
Are you sure you want to delete <strong>{{ $deletingUser->name }}</strong>? This action cannot be undone.
|
|
</p>
|
|
|
|
<div class="flex justify-end space-x-3">
|
|
<button type="button"
|
|
wire:click="cancel"
|
|
class="px-4 py-2 border-2 border-secondary text-gray-100 rounded hover:bg-gray-700 transition-colors duration-200">
|
|
Cancel
|
|
</button>
|
|
<button wire:click="delete"
|
|
class="px-4 py-2 bg-danger text-white rounded hover:bg-red-700 transition-colors duration-200">
|
|
Delete User
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
@endif
|
|
</div> |