javier/Nexora
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

añadir nuevas funcionalidades
Some checks failed
linter / quality (push) Has been cancelled
Details
tests / ci (push) Has been cancelled
Details

Browse Source
This commit is contained in:
Javier Braña
2025-04-30 20:56:28 +02:00
parent 883daf32ed
commit f97a7a8498
27 changed files with 2359 additions and 875 deletions
Download Patch File Download Diff File Expand all files Collapse all files

342
resources/views/users/create.blade.php Normal file
View File

@@ -0,0 +1,342 @@
<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>
</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')
@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">
@livewire('image-uploader', [
'fieldName' => 'profile_photo_path',
'currentImage' => $user->profile_photo_path ?? null,
'placeholder' => asset('images/default-user.png')
])
</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>
</div>
<script>
function generatePassword() {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789!@#$%^&*()';
let password = '';
for (let i = 0; i < 12; i++) {
password += chars.charAt(Math.floor(Math.random() * chars.length));
}
document.getElementById('password').value = password;
}
/*
<div class="mt-2 flex items-center gap-2">
<input type="checkbox" onclick="togglePasswordVisibility()">
<span class="text-sm text-gray-500">Mostrar contraseña</span>
</div>
function togglePasswordVisibility() {
const passwordField = document.getElementById('password');
passwordField.type = passwordField.type === 'password' ? 'text' : 'password';
}
*/
</script>
</x-layouts.app>

17
resources/views/users/index.blade.php Normal file
View File

@@ -0,0 +1,17 @@
<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>
</div>
@livewire('user-table')
</div>
</x-layouts.app>

259
resources/views/users/show.blade.php Normal file
View File

@@ -0,0 +1,259 @@
<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 -->
<img src="{{ $user->photo_url ?? 'https://via.placeholder.com/150' }}"
class="w-24 h-24 rounded-full object-cover border-4 border-blue-100">
<!-- 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">
<div class="flex items-center text-gray-600">
<p class="text-sm text-gray-700">
{{ $user->first_name }}
</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>
@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
@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>
<!-- 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>
<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 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">
<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="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">
<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?')"
class="px-4 py-2 w-[150px] bg-red-600 hover:bg-red-700 text-white 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="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 -->
<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>
</label>
</div>
@endforeach
</div>
</div>
@endforeach
</div>
</div>
<!-- Nueva 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>
</div>
</div>
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
transition: .4s;
border-radius: 34px;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
transition: .4s;
border-radius: 50%;
}
input:checked + .slider {
background-color: #3B82F6;
}
input:checked + .slider:before {
transform: translateX(26px);
}
</style>
</x-layouts.app>