mejoras
This commit is contained in:
@@ -1,332 +1,312 @@
|
||||
<x-layouts.app title="{{ isset($user) ? __('Edit User') : __('Create User') }}">
|
||||
<div class="max-w-4xl mx-auto px-0 py-4">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<svg class="w-10 h-10 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
{{ isset($user) ? 'Editar Usuario' : 'Nuevo Usuario' }}
|
||||
</h1>
|
||||
</div>
|
||||
<p class="text-gray-600 text-sm">
|
||||
@isset($user)
|
||||
Modifique los campos necesarios para actualizar la información del usuario.
|
||||
@else
|
||||
Complete todos los campos obligatorios para registrar un nuevo usuario en el sistema.
|
||||
@endisset
|
||||
</p>
|
||||
|
||||
<x-layouts.app title="{{ (isset($user) && $user->id) ? __('Edit User') : __('Create User') }}" :showSidebar={{ $showSidebar }}>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<flux:icon.user class="size-10" variant="solid"/>
|
||||
<h1 class="text-3xl font-bold text-gray-800">
|
||||
{{ (isset($user) && $user->id) ? 'Editar Usuario' : 'Nuevo Usuario' }}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
|
||||
@if(session('error'))
|
||||
<div id="error-message" class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
<ul>
|
||||
@foreach($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ isset($user) ? route('users.update', $user) : route('users.store') }}">
|
||||
@csrf
|
||||
@isset($user)
|
||||
@method('PUT')
|
||||
<p class="text-gray-600 text-sm">
|
||||
@if(isset($user) && $user->id)
|
||||
Modifique los campos necesarios para actualizar la información del usuario.
|
||||
@else
|
||||
Complete todos los campos obligatorios para registrar un nuevo usuario en el sistema.
|
||||
@endisset
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos Personales</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos Personales -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody class="space-y-4">
|
||||
<!-- Título de cortesía -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Título de cortesía
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<select name="title" class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="">Seleccionar...</option>
|
||||
<option value="Sr.">Sr.</option>
|
||||
<option value="Sra.">Sra.</option>
|
||||
<option value="Dr.">Dr.</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="first_name" required
|
||||
value="{{ old('first_name', $user->first_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
autofocus>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Apellidos -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Apellidos
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="last_name" required
|
||||
value="{{ old('last_name', $user->last_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre de Login -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre de Login
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="username" required
|
||||
value="{{ old('username', $user->username ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Configuración de acceso</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuración de Acceso -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Intervalo de fechas -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Validez de acceso
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-4">
|
||||
de
|
||||
<input type="date" name="start_date"
|
||||
value="{{ old('start_date', isset($user->access_start) ? $user->access_start->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
a
|
||||
<input type="date" name="end_date"
|
||||
value="{{ old('end_date', isset($user->access_end) ? $user->access_end->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Contraseña -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Contraseña
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-2">
|
||||
<input type="text" name="password" id="password"
|
||||
{{ !isset($user) ? 'required' : '' }}
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<button type="button" onclick="generatePassword()"
|
||||
class="px-2 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos de contacto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<input type="email" name="email" required
|
||||
value="{{ old('email', $user->email ?? '') }}"
|
||||
class="w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Teléfono
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<svg class="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 5a2 2 0 012-2h3.28a1 1 0 01.948.684l1.498 4.493a1 1 0 01-.502 1.21l-2.257 1.13a11.042 11.042 0 005.516 5.516l1.13-2.257a1 1 0 011.21-.502l4.493 1.498a1 1 0 01.684.949V19a2 2 0 01-2 2h-1C9.716 21 3 14.284 3 6V5z"/>
|
||||
</svg>
|
||||
<input type="tel" name="phone"
|
||||
value="{{ old('phone', $user->phone ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4 align-top">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Dirección
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<svg class="w-5 h-5 text-gray-400 mt-1.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
</svg>
|
||||
<textarea name="address" rows="3"
|
||||
class="w-full border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">{{ old('address', $user->address ?? '') }}</textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Otros datos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Estado -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Estado
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<select name="is_active" class="w-[200px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="Activo">Activo</option>
|
||||
<option value="Inactivo">Inactivo</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Foto -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Foto
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="mb-6">
|
||||
<<<<<<< HEAD
|
||||
@livewire('image-uploader', [
|
||||
'fieldName' => 'image_path', // Nombre del campo en la BD
|
||||
'label' => 'Imagen principal' // Etiqueta personalizada
|
||||
])
|
||||
<!-- Campo oculto para la ruta de la imagen -->
|
||||
<input type="hidden" name="profile_photo_path" id="profilePhotoPathInput" value="{{ old('profile_photo_path', $user->profile_photo_path) }}">
|
||||
=======
|
||||
|
||||
@livewire('image-uploader', [
|
||||
'fieldName' => 'profile_photo_path',
|
||||
'currentImage' => $user->profile_photo_path ?? null,
|
||||
'placeholder' => asset('images/default-user.png')
|
||||
])
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
</div>
|
||||
</td>
|
||||
</tr>php
|
||||
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="text-right">
|
||||
<button type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||
{{ isset($user) ? 'Actualizar Usuario' : 'Crear Usuario' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
||||
@if(session('error'))
|
||||
<div id="error-message" class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
{{ session('error') }}
|
||||
</div>
|
||||
@endif
|
||||
|
||||
@if($errors->any())
|
||||
<div class="mb-4 p-4 bg-red-100 border border-red-400 text-red-700 rounded">
|
||||
<ul>
|
||||
@foreach($errors->all() as $error)
|
||||
<li>{{ $error }}</li>
|
||||
@endforeach
|
||||
</ul>
|
||||
</div>
|
||||
@endif
|
||||
|
||||
<form method="POST" action="{{ (isset($user) && $user->id) ? route('users.update', $user) : route('users.store') }}">
|
||||
@csrf
|
||||
@isset($user)
|
||||
@method('PUT')
|
||||
@endisset
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos Personales</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos Personales -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody class="space-y-4">
|
||||
<!-- Título de cortesía -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Título de cortesía
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<select name="title" class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="">Seleccionar...</option>
|
||||
<option value="Sr.">Sr.</option>
|
||||
<option value="Sra.">Sra.</option>
|
||||
<option value="Dr.">Dr.</option>
|
||||
</select>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="first_name" required
|
||||
value="{{ old('first_name', $user->first_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none"
|
||||
autofocus>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Apellidos -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Apellidos
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="last_name" required
|
||||
value="{{ old('last_name', $user->last_name ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Nombre de Login -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Nombre de Login
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<input type="text" name="username" required
|
||||
value="{{ old('username', $user->username ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Configuración de acceso</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Configuración de Acceso -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Intervalo de fechas -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Validez de acceso
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-4">
|
||||
de
|
||||
<input type="date" name="start_date"
|
||||
value="{{ old('start_date', isset($user->access_start) ? $user->access_start->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
a
|
||||
<input type="date" name="end_date"
|
||||
value="{{ old('end_date', isset($user->access_end) ? $user->access_end->format('Y-m-d') : '') }}"
|
||||
class="w-[150px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Contraseña -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Contraseña
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex gap-2">
|
||||
<input type="text" name="password" id="password"
|
||||
{{ !isset($user) ? 'required' : '' }}
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<button type="button" onclick="generatePassword()"
|
||||
class="px-2 py-1 bg-blue-100 text-blue-700 rounded-md hover:bg-blue-200 flex items-center gap-2">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
|
||||
<path fill-rule="evenodd" d="M18 8a6 6 0 01-7.743 5.743L10 14l-1 1-1 1H6v2H2v-4l4.257-4.257A6 6 0 1118 8zm-6-4a1 1 0 100 2 2 2 0 012 2 1 1 0 102 0 4 4 0 00-4-4z" clip-rule="evenodd" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Datos de contacto</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Email
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:icon.envelope class="w-5 h-5"/>
|
||||
<input type="email" name="email" required
|
||||
value="{{ old('email', $user->email ?? '') }}"
|
||||
class="w-[300px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Teléfono
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<flux:icon.phone class="w-5 h-5"/>
|
||||
<input type="tel" name="phone"
|
||||
value="{{ old('phone', $user->phone ?? '') }}"
|
||||
class="w-[250px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<tr>
|
||||
<td class="py-2 pr-4 align-top">
|
||||
<label class="block text-sm font-medium text-gray-700">
|
||||
Dirección
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-start gap-2">
|
||||
<flux:icon.map-pin class="w-5 h-5"/>
|
||||
<textarea name="address" rows="3"
|
||||
class="w-full border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">{{ old('address', $user->address ?? '') }}</textarea>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Separador -->
|
||||
<div class="relative">
|
||||
<div class="absolute inset-0 flex items-center">
|
||||
<div class="w-full border-t border-gray-300"></div>
|
||||
</div>
|
||||
<div class="relative flex justify-center">
|
||||
<span class="px-4 bg-white text-sm text-gray-500">Otros datos</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Datos de Contacto -->
|
||||
<div class="bg-white py-6">
|
||||
<table class="w-full">
|
||||
<tbody>
|
||||
<!-- Estado -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4 w-1/3">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Estado
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="flex items-center gap-2">
|
||||
<select name="is_active" class="w-[200px] border-b-1 border-gray-300 focus:border-blue-500 focus:outline-none">
|
||||
<option value="Activo">Activo</option>
|
||||
<option value="Inactivo">Inactivo</option>
|
||||
</select>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
<!-- Foto -->
|
||||
<tr>
|
||||
<td class="py-2 pr-4">
|
||||
<label class="block text-sm font-bold text-gray-700">
|
||||
Foto
|
||||
</label>
|
||||
</td>
|
||||
<td class="py-2">
|
||||
<div class="mb-6">
|
||||
@livewire('image-uploader', [
|
||||
'fieldName' => 'image_path', // Nombre del campo en la BD
|
||||
'label' => 'Imagen principal' // Etiqueta personalizada
|
||||
])
|
||||
<!-- Campo oculto para la ruta de la imagen -->
|
||||
<input type="hidden" name="profile_photo_path" id="profilePhotoPathInput" value="{{ old('profile_photo_path', optional($user)->profile_photo_path ?? '') }}">
|
||||
</div>
|
||||
</td>
|
||||
</tr>php
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Botón de envío -->
|
||||
<div class="text-right">
|
||||
<button type="submit"
|
||||
class="px-6 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors">
|
||||
{{ (isset($user) && $user->id) ? 'Actualizar Usuario' : 'Crear Usuario' }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
|
||||
<script>
|
||||
<<<<<<< HEAD
|
||||
// Escuchar el evento de Livewire y actualizar el campo oculto
|
||||
document.addEventListener('imageUploaded', (event) => {
|
||||
document.getElementById('profilePhotoPathInput').value = event.detail.path;
|
||||
@@ -336,8 +316,6 @@
|
||||
document.getElementById('profilePhotoPathInput').value = '';
|
||||
});
|
||||
|
||||
=======
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
function generatePassword() {
|
||||
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
|
||||
let password = '';
|
||||
@@ -360,4 +338,31 @@
|
||||
*/
|
||||
</script>
|
||||
|
||||
<!-- Sidebar menu -->
|
||||
@push('sidebar-menu')
|
||||
<flux:navlist variant="outline">
|
||||
<!-- Sección de Usuarios -->
|
||||
<flux:navlist.group :heading="__('User')">
|
||||
<flux:navlist.item
|
||||
icon="users"
|
||||
:href="route('users.index')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('List Users') }}
|
||||
</flux:navlist.item>
|
||||
|
||||
<flux:navlist.item
|
||||
icon="user-plus"
|
||||
:href="route('users.create')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('Create User') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:separator />
|
||||
</flux:navlist>
|
||||
|
||||
@endpush
|
||||
|
||||
</x-layouts.app>
|
||||
@@ -1,17 +1,42 @@
|
||||
<x-layouts.app :title="__('Users')">
|
||||
<div class="max-w-7xl mx-auto px-4 py-8">
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<svg class="w-8 h-8 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"/>
|
||||
</svg>
|
||||
<h1 class="text-3xl font-bold text-gray-800">Usuarios</h1>
|
||||
</div>
|
||||
<a href="{{ route('users.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
|
||||
Nuevo
|
||||
</a>
|
||||
<x-layouts.app :title="__('Users')" :showSidebar={{ $showSidebar }}>
|
||||
|
||||
<div class="flex justify-between items-center mb-6">
|
||||
<div class="flex items-center gap-4 mb-4">
|
||||
<flux:icon.user class="size-8" variant="solid" />
|
||||
<h1 class="text-3xl font-bold text-gray-800">Usuarios</h1>
|
||||
</div>
|
||||
|
||||
@livewire('user-table')
|
||||
<a href="{{ route('users.create') }}" class="bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700">
|
||||
Nuevo
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@livewire('user-table')
|
||||
|
||||
<!-- Sidebar menu -->
|
||||
@push('sidebar-menu')
|
||||
<flux:navlist variant="outline">
|
||||
<!-- Sección de Usuarios -->
|
||||
<flux:navlist.group :heading="__('User')">
|
||||
<flux:navlist.item
|
||||
icon="users"
|
||||
:href="route('users.index')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('List Users') }}
|
||||
</flux:navlist.item>
|
||||
|
||||
<flux:navlist.item
|
||||
icon="user-plus"
|
||||
:href="route('users.create')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('Create User') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:separator />
|
||||
</flux:navlist>
|
||||
|
||||
@endpush
|
||||
|
||||
</x-layouts.app>
|
||||
@@ -1,295 +1,249 @@
|
||||
<x-layouts.app :title="__('Show User')">
|
||||
|
||||
<div class="container mx-auto px-4 py-6">
|
||||
<!-- Header Section -->
|
||||
<div class="bg-white rounded-lg shadow-md p-6 mb-6 flex items-center justify-between">
|
||||
<!-- User Info Left -->
|
||||
<div class="flex items-center space-x-6">
|
||||
<!-- User Photo -->
|
||||
<<<<<<< HEAD
|
||||
<img src="{{ $user->profile_photo_path ? asset('storage/' . $user->profile_photo_path) : 'https://via.placeholder.com/150' }}"
|
||||
class="w-24 h-24 rounded-full object-cover border-2 border-blue-100">
|
||||
=======
|
||||
<img src="{{ $user->photo_url ?? 'https://via.placeholder.com/150' }}"
|
||||
class="w-24 h-24 rounded-full object-cover border-4 border-blue-100">
|
||||
<x-layouts.app :title="__('Show User')" :showSidebar={{ $showSidebar }}>
|
||||
|
||||
<!-- Header Section -->
|
||||
<div class="bg-white p-6 mb-6 flex items-center justify-between">
|
||||
<!-- User Info Left -->
|
||||
<div class="flex items-center space-x-6">
|
||||
<!-- User Photo -->
|
||||
<flux:avatar
|
||||
class="w-24 h-24 rounded-lg shadow-lg object-cover border-2 border-gray-600"
|
||||
namue="{{ $user->first_name }} {{ $user->last_name }}"
|
||||
src="{{ $user->profile_photo_path ? asset('storage/' . $user->profile_photo_path) : null }}" />
|
||||
|
||||
<!-- User Details -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-700">
|
||||
{{ $user->first_name }} {{ $user->last_name }}
|
||||
</h1>
|
||||
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
<!-- User Details -->
|
||||
<div>
|
||||
<h1 class="text-2xl font-bold text-gray-700">
|
||||
{{ $user->first_name }} {{ $user->last_name }}
|
||||
</h1>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div class="mt-2 space-y-1">
|
||||
<!-- Contact Info -->
|
||||
<div class="mt-2 space-y-1">
|
||||
@if($user->address )
|
||||
<div class="flex items-center text-gray-600">
|
||||
<flux:icon.map-pin />
|
||||
<p class="text-sm text-gray-700">
|
||||
{{ $user->first_name }}
|
||||
{{ $user->address }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
|
||||
</svg>
|
||||
<a href="mailto:{{ $user->email }}" class="hover:text-blue-600">
|
||||
{{ $user->email }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($user->phone)
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
||||
</svg>
|
||||
<a href="tel:{{ $user->phone }}" class="hover:text-blue-600">
|
||||
{{ $user->phone }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Section -->
|
||||
<div class="flex flex-col items-end space-y-4">
|
||||
<!-- Navigation Toolbar -->
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('users.index') }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if($previousUser)
|
||||
<a href="{{ route('users.show', $previousUser) }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M20 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H4V8l8 5 8-5v10zm-8-7L4 6h16l-8 5z"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
@if($nextUser)
|
||||
<a href="{{ route('users.show', $nextUser) }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
<a href="mailto:{{ $user->email }}" class="hover:text-blue-600">
|
||||
{{ $user->email }}
|
||||
</a>
|
||||
</div>
|
||||
|
||||
@if($user->phone)
|
||||
<div class="flex items-center text-gray-600">
|
||||
<svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
|
||||
<path d="M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="tel:{{ $user->phone }}" class="hover:text-blue-600">
|
||||
{{ $user->phone }}
|
||||
</a>
|
||||
</div>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Status Badge -->
|
||||
<span class="px-4 py-2 w-30 rounded-lg text-sm text-center font-semibold
|
||||
{{ $user->is_active ? 'bg-green-200 text-green-800' : 'bg-red-100 text-red-800' }}">
|
||||
{{ $user->is_active ? 'Activo' : 'Inactivo' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Tab Bar -->
|
||||
<div x-data="{ activeTab: 'info' }" class="bg-white rounded-lg shadow-md">
|
||||
<!-- Tab Headers -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex space-x-8 px-6">
|
||||
<button @click="activeTab = 'info'"
|
||||
:class="activeTab === 'info' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Información del Usuario
|
||||
</button>
|
||||
|
||||
<button @click="activeTab = 'permissions'"
|
||||
:class="activeTab === 'permissions' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Permisos
|
||||
</button>
|
||||
<!-- Right Section -->
|
||||
<div class="flex flex-col items-end space-y-4">
|
||||
<!-- Navigation Toolbar -->
|
||||
<div class="flex space-x-2">
|
||||
<a href="{{ route('users.index') }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"/>
|
||||
</svg>
|
||||
</a>
|
||||
|
||||
@if($previousUser)
|
||||
<a href="{{ route('users.show', $previousUser) }}" class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
|
||||
<button @click="activeTab = 'projects'"
|
||||
:class="activeTab === 'projects' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Proyectos
|
||||
</button>
|
||||
</nav>
|
||||
@if($nextUser)
|
||||
<a href="{{ route('users.show', $nextUser) }}"
|
||||
class="px-4 py-2 bg-gray-100 hover:bg-gray-200 rounded-lg flex items-center">
|
||||
<svg class="w-4 h-4 ml-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</a>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="p-6">
|
||||
<!-- Info Tab -->
|
||||
<div x-show="activeTab === 'info'">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@foreach(['name' => 'Nombre', 'last_name' => 'Apellido', 'email' => 'Email', 'phone' => 'Teléfono', 'created_at' => 'Fecha Registro'] as $field => $label)
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $label }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $user->$field ?? 'N/A' }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<!-- Status Badge -->
|
||||
<span class="px-4 py-2 w-30 rounded-lg text-sm text-center font-semibold
|
||||
{{ $user->is_active ? 'bg-green-600 text-white' : 'bg-red-100 text-red-800' }}">
|
||||
{{ $user->is_active ? 'Activo' : 'Inactivo' }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<<<<<<< HEAD
|
||||
<div class="mt-6 flex justify-end space-x-4">
|
||||
<a href="{{ route('users.edit', $user) }}"
|
||||
class="w-[150px] px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center">
|
||||
=======
|
||||
<div class="mt-6 flex space-x-4">
|
||||
<a href="{{ route('users.edit', $user) }}"
|
||||
class="px-4 py-2 w-[150px] bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center">
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
<!-- Contend: -->
|
||||
<div x-data="{ activeTab: 'info' }" class="bg-white rounded-lg shadow-md border-1">
|
||||
<!-- Tab Headers -->
|
||||
<div class="border-b border-gray-200">
|
||||
<nav class="flex space-x-8 px-6">
|
||||
<button @click="activeTab = 'info'"
|
||||
:class="activeTab === 'info' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Usuario
|
||||
</button>
|
||||
|
||||
<button @click="activeTab = 'permissions'"
|
||||
:class="activeTab === 'permissions' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Permisos
|
||||
</button>
|
||||
|
||||
<button @click="activeTab = 'projects'"
|
||||
:class="activeTab === 'projects' ? 'border-blue-500 text-blue-600' : 'border-transparent text-gray-500 hover:text-gray-700'"
|
||||
class="py-4 px-1 border-b-2 font-medium">
|
||||
Proyectos
|
||||
</button>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
<!-- Tab Content -->
|
||||
<div class="p-6">
|
||||
<!-- Info Tab -->
|
||||
<div x-show="activeTab === 'info'">
|
||||
<div class="overflow-x-auto">
|
||||
<table class="min-w-full divide-y divide-gray-200">
|
||||
<tbody class="bg-white divide-y divide-gray-200">
|
||||
@foreach(['name' => 'Nombre', 'last_name' => 'Apellido', 'email' => 'Email', 'phone' => 'Teléfono', 'created_at' => 'Fecha Registro'] as $field => $label)
|
||||
<tr>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">{{ $label }}</td>
|
||||
<td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
|
||||
{{ $user->$field ?? 'N/A' }}
|
||||
</td>
|
||||
</tr>
|
||||
@endforeach
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<!-- Action Buttons -->
|
||||
<div class="mt-6 flex justify-end space-x-4">
|
||||
<a href="{{ route('users.edit', $user) }}"
|
||||
class="w-[150px] px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
||||
</svg>
|
||||
Editar
|
||||
</a>
|
||||
|
||||
{{-- Formulario de Edición --}}
|
||||
<form method="POST" action="{{ route('users.update', $user) }}">
|
||||
@csrf
|
||||
@method('PUT') <!-- Important! -->
|
||||
<button type="submit"
|
||||
class="w-[150px] px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
||||
</svg>
|
||||
Editar
|
||||
</a>
|
||||
{{ $user->is_active ? 'Desactivar' : 'Activar' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{-- Formulario de Edición --}}
|
||||
<form method="POST" action="{{ route('users.update', $user) }}">
|
||||
@csrf
|
||||
@method('PUT') <!-- Important! -->
|
||||
<button type="submit"
|
||||
<<<<<<< HEAD
|
||||
class="w-[150px] px-4 py-2 bg-yellow-500 hover:bg-yellow-600 text-white rounded-lg flex items-center justify-center">
|
||||
=======
|
||||
class="px-4 py-2 w-[150px] {{ $user->is_active ? 'bg-red-600 hover:bg-red-700' : 'bg-green-600 hover:bg-green-700' }} text-white rounded-lg flex items-center">
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"/>
|
||||
</svg>
|
||||
{{ $user->is_active ? 'Desactivar' : 'Activar' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
{{-- Formulario de Eliminación --}}
|
||||
<form method="POST" action="{{ route('users.destroy', $user) }}">
|
||||
@csrf
|
||||
@method('DELETE') <!-- Important! -->
|
||||
<button type="submit"
|
||||
onclick="return confirm('¿Estás seguro de querer eliminar este usuario?')"
|
||||
<<<<<<< HEAD
|
||||
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-center">
|
||||
=======
|
||||
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center">
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
<svg class="w-4 h-4 mr-2" 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>
|
||||
Eliminar
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
{{-- Formulario de Eliminación --}}
|
||||
<form method="POST" action="{{ route('users.destroy', $user) }}">
|
||||
@csrf
|
||||
@method('DELETE') <!-- Important! -->
|
||||
<button type="submit"
|
||||
onclick="return confirm('¿Estás seguro de querer eliminar este usuario?')"
|
||||
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white rounded-lg flex items-center justify-center">
|
||||
<svg class="w-4 h-4 mr-2" 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>
|
||||
Eliminar
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permissions Tab -->
|
||||
<<<<<<< HEAD
|
||||
<div class="space-y-4">
|
||||
@foreach($permissionGroups as $groupName => $group)
|
||||
<div class="border rounded-lg overflow-hidden">
|
||||
<!-- Group Header -->
|
||||
<div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-b">
|
||||
<h3 class="font-semibold text-gray-700">
|
||||
{{ ucfirst($groupName) }} Permissions
|
||||
</h3>
|
||||
<!-- Permissions Tab -->
|
||||
<div x-show="activeTab === 'permissions'" x-cloak>
|
||||
<div class="space-y-4">
|
||||
@foreach($permissionGroups as $groupName => $group)
|
||||
<div class="border rounded-lg overflow-hidden">
|
||||
<!-- Group Header -->
|
||||
<div class="bg-gray-50 px-4 py-3 flex justify-between items-center border-b">
|
||||
<h3 class="font-semibold text-gray-700">
|
||||
{{ ucfirst($groupName) }}
|
||||
</h3>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<!-- Toggle All On -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', true)"
|
||||
class="px-3 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Activar Todos
|
||||
</button>
|
||||
|
||||
<div class="flex space-x-2">
|
||||
<!-- Toggle All On -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', true)"
|
||||
class="px-3 py-1 text-xs bg-green-100 text-green-800 rounded hover:bg-green-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
||||
</svg>
|
||||
Activar Todos
|
||||
</button>
|
||||
|
||||
<!-- Toggle All Off -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', false)"
|
||||
class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
Desactivar Todos
|
||||
</button>
|
||||
|
||||
<!-- Collapse Toggle -->
|
||||
<button wire:click="toggleGroupCollapse('{{ $groupName }}')"
|
||||
class="px-3 py-1 text-xs bg-gray-100 text-gray-800 rounded hover:bg-gray-200 flex items-center">
|
||||
<svg x-show="!collapsedGroups.includes('{{ $groupName }}')" 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 9l-7 7-7-7"/>
|
||||
</svg>
|
||||
<svg x-show="collapsedGroups.includes('{{ $groupName }}')" class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24" x-cloak>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Permissions List -->
|
||||
<div x-show="!collapsedGroups.includes('{{ $groupName }}')" class="divide-y divide-gray-200">
|
||||
@foreach($group['permissions'] as $permission)
|
||||
<div class="px-4 py-3 flex justify-between items-center hover:bg-gray-50">
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-700">{{ $permission['description'] ?? $permission['name'] }}</span>
|
||||
|
||||
@if($permission['description'])
|
||||
<span class="ml-2 text-xs text-gray-500">({{ $permission['name'] }})</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
@if(true || $user->hasPermissionTo($permission['name'])) checked @endif
|
||||
wire:change="togglePermission('{{ $permission['name'] }}')"
|
||||
class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
=======
|
||||
<div x-show="activeTab === 'permissions'" x-cloak>
|
||||
<div class="space-y-6">
|
||||
@foreach($permissionGroups as $group => $permissions)
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-4">{{ ucfirst($group) }}</h3>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
@foreach($permissions as $permission)
|
||||
<div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
|
||||
<span class="text-sm">{{ $permission->name }}</span>
|
||||
<label class="switch">
|
||||
<input type="checkbox"
|
||||
@if($user->hasPermissionTo($permission)) checked @endif
|
||||
wire:change="togglePermission('{{ $permission->name }}')">
|
||||
<span class="slider round"></span>
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
<!-- Toggle All Off -->
|
||||
<button wire:click="toggleAllGroupPermissions('{{ $groupName }}', false)"
|
||||
class="px-3 py-1 text-xs bg-red-100 text-red-800 rounded hover:bg-red-200 flex items-center">
|
||||
<svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
Desactivar Todos
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<<<<<<< HEAD
|
||||
<!-- Pestaña de Proyectos -->
|
||||
=======
|
||||
<!-- Nueva Pestaña de Proyectos -->
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
<div x-show="activeTab === 'projects'" x-cloak>
|
||||
<div class="space-y-6">
|
||||
<!-- Proyectos Actuales -->
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-4">Proyectos Asociados</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
falta implementar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Añadir Proyectos (Solo con permisos) -->
|
||||
|
||||
<!-- Permissions List -->
|
||||
<div class="divide-y divide-gray-200">
|
||||
@foreach($group['permissions'] as $permission)
|
||||
<div class="px-4 py-3 flex justify-between items-center hover:bg-gray-50">
|
||||
<div class="flex items-center">
|
||||
<span class="text-sm text-gray-700">{{ $permission['description'] ?? $permission['name'] }}</span>
|
||||
|
||||
@if($permission['description'])
|
||||
<span class="ml-2 text-xs text-gray-500">({{ $permission['name'] }})</span>
|
||||
@endif
|
||||
</div>
|
||||
|
||||
<label class="relative inline-flex items-center cursor-pointer">
|
||||
<input type="checkbox"
|
||||
@if(true || $user->hasPermissionTo($permission['name'])) checked @endif
|
||||
wire:change="togglePermission('{{ $permission['name'] }}')"
|
||||
class="sr-only peer">
|
||||
<div class="w-11 h-6 bg-gray-200 peer-focus:outline-none rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-blue-600"></div>
|
||||
</label>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
@endforeach
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Pestaña de Proyectos -->
|
||||
<div x-show="activeTab === 'projects'" x-cloak>
|
||||
<div class="space-y-6">
|
||||
<!-- Proyectos Actuales -->
|
||||
<div class="border rounded-lg p-4">
|
||||
<h3 class="text-lg font-semibold mb-4">Proyectos Asociados</h3>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
falta implementar
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Añadir Proyectos (Solo con permisos) -->
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -341,7 +295,6 @@
|
||||
transform: translateX(26px);
|
||||
}
|
||||
</style>
|
||||
<<<<<<< HEAD
|
||||
|
||||
<script>
|
||||
document.addEventListener('alpine:init', () => {
|
||||
@@ -359,7 +312,32 @@
|
||||
}));
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Sidebar menu -->
|
||||
@push('sidebar-menu')
|
||||
<flux:navlist variant="outline">
|
||||
<!-- Sección de Usuarios -->
|
||||
<flux:navlist.group :heading="__('User')">
|
||||
<flux:navlist.item
|
||||
icon="users"
|
||||
:href="route('users.index')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('List Users') }}
|
||||
</flux:navlist.item>
|
||||
|
||||
<flux:navlist.item
|
||||
icon="user-plus"
|
||||
:href="route('users.create')"
|
||||
wire:navigate
|
||||
>
|
||||
{{ __('Create User') }}
|
||||
</flux:navlist.item>
|
||||
</flux:navlist.group>
|
||||
|
||||
<flux:separator />
|
||||
</flux:navlist>
|
||||
|
||||
@endpush
|
||||
|
||||
=======
|
||||
>>>>>>> f97a7a84985ea300216ba3ea2ab4c31306e1659a
|
||||
</x-layouts.app>
|
||||
Reference in New Issue
Block a user