Merge branch 'giane' of https://github.com/BryamE/ProyectoLauck into nLucas

This commit is contained in:
2026-04-05 22:14:51 -03:00
13 changed files with 430 additions and 101 deletions
+8
View File
@@ -1,4 +1,12 @@
<x-layout title="Agenda">
<style>
:root {
--fc-border-color: #979393a4 !important;
}
html.dark {
--fc-border-color: #5c5a5b !important;
}
</style>
<div class="flex w-full justify-between items-end mb-6">
+128 -17
View File
@@ -1,14 +1,105 @@
<x-layout title="Catalogo - Lauck">
<!-- Header -->
<x-section-header subtitle="Inicio" title="Catalogo de " highlight="Productos"/>
@push('styles')
<link href="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/css/select2.min.css" rel="stylesheet" />
<style>
/* Adaptación de Select2 para Dark Mode y tema Lime */
html.dark .select2-container--default .select2-selection--single {
background-color: #171717; /* bg-neutral-900 */
border: 1px solid #262626; /* border-neutral-800 */
height: 42px;
display: flex;
align-items: center;
border-radius: 0.5rem;
}
html.dark .select2-container--default .select2-selection--single .select2-selection__rendered {
color: #d4d4d4; /* text-gray-300 */
}
html.dark .select2-dropdown {
background-color: #171717;
border: 1px solid #262626;
color: #d4d4d4;
}
html.dark .select2-search__field {
background-color: #262626;
color: #fff;
border: 1px solid #404040;
}
html.dark .select2-container--default .select2-results__option--highlighted[aria-selected] {
background-color: #84cc16; /* bg-lime-500 */
color: #000;
}
html.dark .select2-results__option[aria-selected=true] {
background-color: #262626;
}
</style>
@endpush
<div class="w-full max-w-5xl">
<x-section-header subtitle="Inicio" title="Catálogo de " highlight="Productos"/>
<div class="w-full max-w-5xl mx-auto px-4">
<!-- BLOQUE 1: Búsqueda rápida con Select2 (Te lleva directo al producto) -->
<div class="mb-4 bg-stone-200/30 dark:bg-neutral-950/30 p-5 rounded-xl border border-neutral-200 dark:border-neutral-800">
<label for="buscador-catalogo" class="block text-sm font-semibold text-gray-800 dark:text-gray-300 mb-2">
Salto rápido a producto específico
</label>
<select id="buscador-catalogo" class="w-full">
<option value="">Escribe para buscar un producto...</option>
@foreach ($allProducts as $p)
<option value="{{ route('catalogo.show', $p->id) }}">
{{ $p->name }} - ${{ number_format($p->price, 2, ',', '.') }}
</option>
@endforeach
</select>
</div>
<!-- BLOQUE 2: Filtros de la Grilla -->
<form action="{{ route('catalogo.index') }}" method="GET" class="mb-8 flex flex-col md:flex-row gap-3 bg-stone-200/30 dark:bg-neutral-950/30 p-4 rounded-xl border border-neutral-200 dark:border-neutral-800">
<div class="relative w-full md:w-1/2">
<input type="text" name="search" value="{{ request('search') }}"
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-900 placeholder-gray-600 dark:placeholder-gray-500 focus:ring-neon-lime focus:border-neon-lime"
placeholder="Buscar en el catálogo...">
</div>
<div class="w-full md:w-1/3">
<select name="type" onchange="this.form.submit()"
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-white dark:bg-neutral-900 focus:ring-neon-lime focus:border-neon-lime cursor-pointer">
<option value="">Todas las Categorías</option>
<option value="bike" {{ request('type') == 'bike' ? 'selected' : '' }}>Bicicletas</option>
<option value="clothing" {{ request('type') == 'clothing' ? 'selected' : '' }}>Indumentaria</option>
<option value="accessory" {{ request('type') == 'accessory' ? 'selected' : '' }}>Accesorios</option>
<option value="spare" {{ request('type') == 'spare' ? 'selected' : '' }}>Repuestos</option>
<option value="children" {{ request('type') == 'children' ? 'selected' : '' }}>Infantil</option>
<option value="rollers" {{ request('type') == 'rollers' ? 'selected' : '' }}>Rollers</option>
<option value="skate" {{ request('type') == 'skate' ? 'selected' : '' }}>Skate</option>
<option value="other" {{ request('type') == 'other' ? 'selected' : '' }}>Otros</option>
</select>
</div>
<div class="flex gap-2">
<button type="submit" class="px-5 py-3 text-sm font-bold text-neutral-900 bg-neon-lime rounded-lg hover:bg-[#b3e600] transition-colors">
Filtrar
</button>
@if(request('search') || request('type'))
<a href="{{ route('catalogo.index') }}" title="Limpiar Filtros" class="flex items-center justify-center p-3 text-sm font-bold text-red-600 bg-red-100 dark:bg-red-900/30 rounded-lg hover:bg-red-200 transition-colors">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
</svg>
</a>
@endif
</div>
</form>
<!-- GRILLA DE PRODUCTOS -->
<!-- GRILLA DE PRODUCTOS -->
@if ($products->count() > 0)
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
@foreach ($products as $product)
<div class="group p-4 border bg-stone-200/30 dark:bg-neutral-950/30 border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-lime-500 hover:dark:border-neon-lime hover:-translate-y-1 transition-all duration-300">
<!-- ACÁ ESTÁ EL PRIMER CAMBIO: Agregamos "flex flex-col h-full" -->
<div class="group flex flex-col h-full p-4 border bg-stone-200/30 dark:bg-neutral-950/30 border-neutral-200 dark:border-neutral-800 rounded-xl hover:border-lime-500 hover:dark:border-neon-lime hover:-translate-y-1 transition-all duration-300">
{{-- Imagen si existe --}}
@if (!empty($product->image_path))
<img src="{{ asset('storage/' . $product->image_path) }}" alt="{{ $product->name }}"
@@ -19,15 +110,8 @@
</div>
@endif
{{-- Nombre --}}
<h2 class="text-lg font-semibold text-black dark:text-white">{{ $product->name }}</h2>
{{-- Descripción corta --}}
<div class="h-10 overflow-y-auto [scrollbar-width:none]">
@if (!empty($product->description))
<p class="text-sm text-gray-700 dark:text-gray-400 mt-2">{{ $product->description }}</p>
@endif
</div>
<!-- ACÁ ESTÁ EL SEGUNDO CAMBIO: Agregamos "flex-1" al título -->
<h2 class="text-lg font-semibold text-black dark:text-white flex-1">{{ $product->name }}</h2>
{{-- Precio --}}
@if (!empty($product->price))
@@ -35,20 +119,47 @@
@endif
{{-- Botón --}}
<a href="{{ route('catalogo.show', $product) }}"
<a href="{{ route('catalogo.show', $product->id) }}"
class="mt-4 block w-full bg-neutral-900 dark:bg-neon-lime/80 uppercase text-neon-lime dark:text-black font-semibold py-2 rounded-lg text-center shadow-md shadow-gray-900/10 dark:shadow-neon-lime/10 hover:bg-neon-lime hover:dark:bg-neutral-900/70 border border-transparent hover:text-black hover:dark:text-neon-lime hover:border-black hover:dark:border-neon-lime transition-all">
Ver +
Ver Detalle
</a>
</div>
@endforeach
</div>
@else
<p class="text-center text-gray-400 dark:text-gray-600 mt-10">No hay productos disponibles.</p>
<p class="text-center text-gray-600 dark:text-gray-400 mt-10 font-medium">No se encontraron productos con esos filtros.</p>
@endif
<div class="mt-3">
<div class="mt-8">
{{ $products->links() }}
</div>
</div>
@push('scripts')
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/select2@4.1.0-rc.0/dist/js/select2.min.js"></script>
<script>
$(document).ready(function() {
// 1. Inicializamos Select2
$('#buscador-catalogo').select2({
placeholder: "🔍 Ej: Bici R12 o Guantes...",
allowClear: true,
width: '100%'
});
// 2. Evento: Cuando el usuario hace clic en una opción de la lista Select2
$('#buscador-catalogo').on('select2:select', function (e) {
let urlDestino = $(this).val();
if (urlDestino) {
// Redirigimos a la página del detalle del producto
window.location.href = urlDestino;
}
});
});
</script>
@endpush
</x-layout>
+55 -18
View File
@@ -5,44 +5,77 @@
<!-- Mensajes de feedback -->
<x-ui.alert />
<!-- Barra de Herramientas (Buscador + Botón Crear) -->
<div class="w-full flex flex-col md:flex-row justify-between items-center gap-4 mb-6">
<!-- Buscador -->
<form action="{{ route('productos.index') }}" method="GET" class="w-full lg:w-2/3 flex flex-col sm:flex-row gap-3">
<div class="relative w-full sm:w-2/3">
<!-- Barra de Herramientas (Buscador + Botones) -->
<div class="w-full flex flex-col xl:flex-row justify-between items-start xl:items-center gap-4 mb-6">
<!-- Buscador y Filtros -->
<form action="{{ route('productos.index') }}" method="GET" class="w-full xl:w-4/5 flex flex-col md:flex-row gap-3">
<!-- 1. Buscador por Texto -->
<div class="relative w-full md:w-2/5">
<div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
<svg class="w-4 h-4 text-gray-600 dark:text-gray-500" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
</svg>
</div>
<input type="text" name="search" value="{{ request('search') }}"
class="block w-full p-3 ps-10 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-neutral-200 dark:bg-neutral-800 placeholder-gray-600 dark:placeholder-gray-500"
placeholder="Buscar por nombre, SKU o marca...">
class="block w-full p-3 ps-10 text-sm text-black dark:text-white border border-neutral-400 dark:border-neutral-700 rounded-lg bg-neutral-200 dark:bg-neutral-800 placeholder-gray-600 dark:placeholder-gray-500 focus:ring-neon-lime focus:border-neon-lime"
placeholder="Buscar por nombre">
</div>
<!-- Filtro de Estado de Stock -->
<div class="w-full sm:w-1/3">
<select name="stock_status" onchange="this.form.submit()"
<!-- 2. Filtro de Categoría (Tipo) -->
<div class="w-full md:w-1/4">
<select name="type" onchange="this.form.submit()"
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-300 dark:border-neutral-700 rounded-lg bg-neutral-200 dark:bg-neutral-800 focus:ring-neon-lime focus:border-neon-lime cursor-pointer">
<option value="">Todos</option>
<option value="low" {{ request('stock_status') == 'low' ? 'selected' : '' }} class="text-red-600 dark:text-red-300">Stock en Alerta</option>
<option value="medium" {{ request('stock_status') == 'medium' ? 'selected' : '' }} class="text-yellow-600 dark:text-yellow-300">Stock Bajo</option>
<option value="ok" {{ request('stock_status') == 'ok' ? 'selected' : '' }} class="text-green-600 dark:text-green-300">Stock Normal</option>
<option value="">Todas las Categorías</option>
<option value="bike" {{ request('type') == 'bike' ? 'selected' : '' }}>Bicicletas</option>
<option value="clothing" {{ request('type') == 'clothing' ? 'selected' : '' }}>Indumentaria</option>
<option value="accessory" {{ request('type') == 'accessory' ? 'selected' : '' }}>Accesorios</option>
<option value="spare" {{ request('type') == 'spare' ? 'selected' : '' }}>Repuestos</option>
<option value="children" {{ request('type') == 'children' ? 'selected' : '' }}>Infantil</option>
<option value="rollers" {{ request('type') == 'rollers' ? 'selected' : '' }}>Rollers</option>
<option value="skate" {{ request('type') == 'skate' ? 'selected' : '' }}>Skate</option>
<option value="other" {{ request('type') == 'other' ? 'selected' : '' }}>Otros</option>
<option value="service" {{ request('type') == 'service' ? 'selected' : '' }}>Servicios</option>
</select>
</div>
<!-- 3. Filtro de Estado de Stock -->
<div class="w-full md:w-1/4">
<select name="stock_status" onchange="this.form.submit()"
class="block w-full p-3 text-sm text-black dark:text-white border border-neutral-300 dark:border-neutral-700 rounded-lg bg-neutral-200 dark:bg-neutral-800 focus:ring-neon-lime focus:border-neon-lime cursor-pointer">
<option value="">Cualquier Stock</option>
<option value="low" {{ request('stock_status') == 'low' ? 'selected' : '' }} class="text-red-600 dark:text-red-300 font-semibold">Stock en Alerta</option>
<option value="medium" {{ request('stock_status') == 'medium' ? 'selected' : '' }} class="text-yellow-600 dark:text-yellow-300 font-semibold">Stock Bajo</option>
<option value="ok" {{ request('stock_status') == 'ok' ? 'selected' : '' }} class="text-green-600 dark:text-green-300 font-semibold">Stock Normal</option>
</select>
</div>
<!-- Botón Limpiar Filtros -->
@if(request('search') || request('type') || request('stock_status'))
<div class="w-full md:w-auto flex">
<a href="{{ route('productos.index') }}" title="Limpiar Filtros"
class="flex items-center justify-center p-3 text-sm font-bold text-red-600 dark:text-red-400 bg-red-100 dark:bg-red-900/30 rounded-lg hover:bg-red-200 dark:hover:bg-red-900/50 border border-red-200 dark:border-red-800 transition-colors">
<svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24">
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18 17.94 6M18 18 6.06 6"/>
</svg>
</a>
</div>
@endif
</form>
<!-- Botón Nuevo -->
<a href="{{ route('productos.create') }}" class="w-full md:w-auto text-center px-5 py-3 text-sm font-bold text-neon-lime dark:text-neutral-900 bg-neutral-950 dark:bg-neon-lime rounded-lg hover:bg-neutral-900/80 hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wide">
<a href="{{ route('productos.create') }}" class="w-full xl:w-auto text-center px-5 py-3 text-sm font-bold text-neon-lime dark:text-neutral-900 bg-neutral-950 dark:bg-neon-lime rounded-lg hover:bg-neutral-900/80 hover:dark:bg-[#b3e600] transition-colors uppercase tracking-wide">
+ Nuevo Producto
</a>
</div>
<!-- Tabla de Productos -->
<div class="relative overflow-x-auto shadow-md sm:rounded-lg border border-gray-400 dark:border-neutral-800 w-full">
<table class="w-full text-sm text-left rtl:text-right text-neutral-900 dark:text-white">
<thead class="text-xs text-neutral-800 dark:text-gray-300 uppercase bg-gray-400 dark:bg-neutral-800 border-b border-gray-300 dark:border-neutral-700">
<tr>
<th scope="col" class="px-6 py-3">Producto / SKU</th>
<th scope="col" class="px-6 py-3">Producto</th>
<th scope="col" class="px-6 py-3">Tipo</th>
<th scope="col" class="px-6 py-3">Precio</th>
<th scope="col" class="px-6 py-3 text-center">Stock</th>
@@ -54,13 +87,16 @@
<tr class="bg-gray-200/50 dark:bg-neutral-900/50 border-b border-gray-400 dark:border-neutral-800 hover:bg-gray-400 hover:dark:bg-neutral-800 transition-colors group">
<td class="px-6 py-4 font-medium whitespace-nowrap">
<div class="text-base font-bold">{{ $product->name }}</div>
<div class="text-xs text-gray-600 dark:text-gray-400 font-mono">{{ $product->sku }}</div>
<div class="text-xs text-gray-600 dark:text-gray-400 font-mono">{{ $product->sku ?? 'Sin SKU' }}</div>
</td>
<td class="px-6 py-4">
@if($product->type === 'bike') <x-ui.badge color="neon">Bicicleta</x-ui.badge>
@elseif($product->type === 'clothing') <x-ui.badge color="blue">Indumentaria</x-ui.badge>
@elseif($product->type === 'spare') <x-ui.badge color="gray">Repuesto</x-ui.badge>
@else <x-ui.badge color="yellow">Accesorio</x-ui.badge> @endif
@elseif($product->type === 'children') <x-ui.badge color="pink">Infantil</x-ui.badge>
@elseif($product->type === 'rollers') <x-ui.badge color="purple">Rollers</x-ui.badge>
@elseif($product->type === 'skate') <x-ui.badge color="orange">Skate</x-ui.badge>
@else <x-ui.badge color="yellow">Accesorio / Otro</x-ui.badge> @endif
</td>
<td class="px-6 py-4 font-mono">
${{ number_format($product->price, 2) }}
@@ -107,6 +143,7 @@
</tbody>
</table>
</div>
<!-- Paginación -->
<div class="mt-4 w-full">
{{ $products->links() }}
+7 -3
View File
@@ -27,19 +27,23 @@
<div>
<label class="block text-xs font-bold text-gray-400 uppercase mb-2">Propietario</label>
<select name="client_id" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
<option value="" disabled {{ !request('new_client_id') ? 'selected' : '' }}>-- Seleccione un propietario --</option>
@foreach($clients as $client)
<option value="{{ $client->id }}">{{ $client->name }}</option>
<option value="{{ $client->id }}" {{ request('new_client_id') == $client->id ? 'selected' : '' }}>
{{ $client->name }}
</option>
@endforeach
</select>
<a href="{{ route('clients.create', ['origin' => 'taller']) }}" class="text-xs text-neon-lime hover:underline mt-1 inline-block">+ Nuevo Cliente</a>
</div>
<div>
<label class="block text-xs font-bold text-gray-400 uppercase mb-2">Teléfono Aviso</label>
<input type="text" name="contact_phone" placeholder="Ingresar numero de telefono" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
<input type="text" name="contact_phone" value="{{ request('new_client_phone') }}" placeholder="Ingresar numero de telefono" class="w-full bg-neutral-900 border border-neutral-700 text-white rounded-lg p-2.5 focus:ring-neon-lime focus:border-neon-lime">
</div>
</div>
</div>
<!-- 2. Diagnóstico y Repuestos -->
<div class="border-b border-neutral-800 pb-6">
<h3 class="text-white font-bold uppercase tracking-wider text-sm mb-4 flex items-center gap-2">