alumnos_ti/LauckCycles
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

STYLE:

Browse Source 
- Terminada seccion de ventas para el modo claro.
This commit is contained in:
BryamE
2026-04-03 19:00:13 -03:00
parent 12f98c0410
commit c8ad029950
2 changed files with 83 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/views/sales/create.blade.php
+82 -38
View File
@@ -1,36 +1,85 @@
<x-layout title="Lauck - Nueva Venta">
@push('styles')
<style>
/* Select2 adaptado al Tema 'Lauck' (Neutral + Neon Lime) */
/* === MODO CLARO === */
/* Contenedor principal del input */
.select2-container--default .select2-selection--single {
background-color: #262626 !important; /* neutral-800 */
border-color: #404040 !important; /* neutral-700 */
color: white !important;
height: 42px;
background-color: #d1d5dc !important; /* Fondo blanco */
border: 1px solid #a1a1a1 !important; /* Borde gray-300 */
color: #111827 !important; /* Texto casi negro (gray-900) */
height: 32px !important;
padding: 0 0.5rem;
display: flex;
align-items: center;
border-radius: 0.5rem; /* rounded-lg */
transition: all 0.3s ease;
}
/* Texto seleccionado */
.select2-container--default .select2-selection--single .select2-selection__rendered {
color: white !important;
line-height: 42px;
color: #111827 !important;
line-height: 32px !important;
padding-left: 12px;
}
/* La caja desplegable (Dropdown) */
.select2-dropdown {
background-color: #262626 !important; /* neutral-800 */
border-color: #404040 !important; /* neutral-700 */
color: white !important;
background-color: #d1d5dc !important;
border: 1px solid #d1d5db !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); /* Sombra suave para modo claro */
}
/* Color de resalto al pasar el mouse u opción seleccionada */
/* Opciones de la lista (texto normal) */
.select2-results__option {
color: #374151 !important; /* gray-700 */
}
/* Placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #6b7280 !important; /* gray-500 */
}
/* Input de búsqueda interno */
.select2-search--dropdown .select2-search__field {
background-color: #f3f4f6 !important; /* gray-100 */
color: #111827 !important;
border: 1px solid #d1d5db !important;
border-radius: 0.375rem !important;
padding: 6px 12px !important;
outline: none;
}
/* Color de resalto (Hover o Navegación con teclado). Mantenemos tu color de marca */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
background-color: #ccff00 !important; /* neon-lime */
color: #171717 !important; /* neutral-900 */
font-weight: bold;
}
/* Ajuste del placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
/* === MODO OSCURO === */
/* Contenedor principal */
:is(.dark) .select2-container--default .select2-selection--single {
background-color: #262626 !important; /* neutral-800 */
border-color: #404040 !important; /* neutral-700 */
}
/* Texto seleccionado oscuro */
:is(.dark) .select2-container--default .select2-selection--single .select2-selection__rendered {
color: white !important;
}
/* Caja desplegable oscura */
:is(.dark) .select2-dropdown {
background-color: #262626 !important;
border-color: #404040 !important;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5); /* Sombra más fuerte */
}
/* Opciones de la lista oscura */
:is(.dark) .select2-results__option {
color: #d4d4d4 !important; /* gray-300 */
}
/* Placeholder oscuro */
:is(.dark) .select2-container--default .select2-selection--single .select2-selection__placeholder {
color: #9ca3af !important; /* gray-400 */
}
/* Input de búsqueda interno oscuro */
:is(.dark) .select2-search--dropdown .select2-search__field {
background-color: #171717 !important; /* neutral-900 */
color: white !important;
border-color: #404040 !important;
}
</style>
@endpush
@@ -48,11 +97,11 @@
</div>
@endif
<div class="w-full max-w-5xl mx-auto bg-panel-bg border border-neutral-800 rounded-xl p-8 shadow-lg">
<div class="w-full max-w-5xl mx-auto bg-gray-200 dark:bg-panel-bg border border-neutral-400 dark:border-neutral-800 rounded-xl p-8 shadow-lg">
<form action="{{ route('sales.store') }}" method="POST">
@csrf
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-4 border-b border-neutral-700 pb-8">
<div class="grid grid-cols-1 md:grid-cols-12 gap-6 mb-4 border-b border-neutral-400 dark:border-neutral-700 pb-8">
<div class="md:col-span-10">
<x-forms.label for="client_id" value="Cliente" />
<div class="relative">
@@ -65,26 +114,24 @@
</div>
</div>
<div class="md:col-span-2 flex items-end mb-1">
<a href="{{ route('clients.create', ['origin' => 'sales']) }}" target="_blank"
class="inline-flex items-center text-neon-lime hover:text-[#b3e600] font-bold text-sm transition-colors"
title="Crear nuevo cliente">+ Nuevo Cliente</a>
<a href="{{ route('clients.create', ['origin' => 'sales']) }}" target="_blank" class="inline-flex items-center dark:text-neon-lime text-lime-700/80 hover:text-lime-500 dark:hover:text-[#b3e600] font-bold text-sm transition-colors" title="Crear nuevo cliente">+ Nuevo Cliente</a>
</div>
</div>
<div class="mb-4">
<div class="flex justify-between items-end mb-4">
<x-forms.label value="Detalle de Productos" />
<div class="text-sm text-gray-400">
Total Items: <span class="text-white font-mono" id="item-count">1</span>
<div class="text-sm dark:text-gray-400 text-neutral-800">
Total Items: <span class="dark:text-white font-mono font-bold" id="item-count">1</span>
</div>
</div>
<div id="items-container" class="space-y-3">
<div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 items-start bg-neutral-800/50 p-4 rounded-xl border border-neutral-800">
<div class="item-row grid grid-cols-1 md:grid-cols-12 gap-4 items-start bg-neutral-300/50 dark:bg-neutral-700/50 p-4 rounded-xl border dark:border-neutral-800 border-gray-400">
<div class="md:col-span-6">
<label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Producto</label>
<x-forms.label value="Producto" />
<select name="items[0][product_id]" class="w-full select2-product product-select">
<option value="" data-price="0" selected disabled>Buscar producto...</option>
@foreach($products as $product)
@@ -96,18 +143,17 @@
</div>
<div class="md:col-span-2">
<label class="block text-gray-400 text-xs mb-1.5 uppercase tracking-wider font-semibold">Cant.</label>
<input type="number" name="items[0][quantity]" value="1" min="1"
class="quantity-input bg-neutral-800 border-neutral-700 border rounded-lg text-white text-sm focus:ring-neon-lime focus:border-neon-lime block w-full p-1 px-2 h-7">
<x-forms.label value="Cant."/>
<x-forms.input type="number" name="items[0][quantity]" value="1" min="1" class="quantity-input border rounded-lg block w-full py-1! px-2"/>
</div>
<div class="md:col-span-3 text-right flex flex-col justify-center h-[42px] mt-6">
<span class="text-xs text-gray-500">Subtotal</span>
<span class="row-total text-lg font-bold text-neon-lime">$0.00</span>
<span class="text-xs dark:text-gray-400 text-gray-700">Subtotal</span>
<span class="row-total text-lg font-bold text-lime-700 dark:text-neon-lime">$0.00</span>
</div>
<div class="md:col-span-1 flex items-end justify-end h-[42px] mt-6">
<button type="button" class="btn-remove text-neutral-500 hover:text-red-500 transition-colors p-2" title="Quitar item">
<button type="button" class="btn-remove dark:text-neutral-400 text-neutral-600 hover:text-red-500 hover:dark:text-red-400 transition-colors p-2" title="Quitar item">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<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>
@@ -117,7 +163,7 @@
</div>
<div class="mt-4">
<button type="button" id="btn-add-row" class="inline-flex items-center text-neon-lime hover:text-[#b3e600] font-bold text-sm transition-colors">
<button type="button" id="btn-add-row" class="inline-flex items-center dark:text-neon-lime text-lime-600 dark:hover:text-[#b3e600] hover:text-lime-500 font-bold text-sm transition-colors">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 mr-1" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z" clip-rule="evenodd" />
</svg>
@@ -125,19 +171,19 @@
</button>
</div>
<div class="mt-5 flex justify-end items-center border-t border-neutral-700 pt-6">
<div class="mt-5 flex justify-end items-center border-t border-neutral-400 dark:border-neutral-700 pt-6">
<div class="text-right">
<span class="block text-gray-400 text-sm mb-1">Monto Total a Pagar</span>
<span id="grand-total" class="text-3xl font-bold text-white">$0.00</span>
<span class="block text-gray-600 dark:text-gray-400 text-sm mb-1">Monto Total a Pagar</span>
<span id="grand-total" class="text-3xl font-bold">$0.00</span>
</div>
</div>
</div>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end border-t border-neutral-800 pt-6">
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 items-end border-t border-neutral-400 dark:border-neutral-700 pt-6">
<div>
<x-forms.label for="payment_method" value="Método de Pago" />
<select name="payment_method" class="bg-neutral-800 border-neutral-700 text-white text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
<select name="payment_method" class="bg-gray-300 dark:bg-neutral-800 border border-neutral-400 dark:border-neutral-700 text-sm rounded-lg focus:ring-neon-lime focus:border-neon-lime block w-full p-2.5">
<option value="Efectivo">Efectivo</option>
<option value="Tarjeta de Débito">Tarjeta de Débito</option>
<option value="Tarjeta de Crédito">Tarjeta de Crédito</option>
@@ -146,10 +192,8 @@
</div>
<div class="flex justify-end gap-4">
<a href="{{ route('sales.index') }}" class="px-6 py-2.5 text-gray-400 hover:text-white font-medium text-sm transition-colors flex items-center">
Cancelar
</a>
<button type="submit" class="px-8 py-2.5 bg-neon-lime text-neutral-900 font-bold rounded-lg hover:bg-[#b3e600] transition-colors shadow-lg shadow-neon-lime/20 transform hover:scale-105">
<a href="{{ route('sales.index') }}" class="px-4 py-2.5 text-red-500 border border-red-500 hover:bg-red-500 hover:text-white rounded-lg font-semibold text-sm transition-colors flex items-center">Cancelar</a>
<button type="submit" class="px-8 py-2.5 bg-neutral-900 dark:bg-neon-lime text-neon-lime dark:text-neutral-900 font-bold rounded-lg hover:bg-neutral-800 hover:dark:bg-[#b3e600] transition-colors shadow-lg dark:shadow-neon-lime/20">
Confirmar Venta
</button>
</div>