feat: mejorar UI con Vuetify 3, POS tipo venta real, dashboard
This commit is contained in:
@@ -1,50 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<h2>Inventario</h2>
|
||||
|
||||
<section>
|
||||
<h3>Productores</h3>
|
||||
<input v-model="nuevoProductor" placeholder="Nombre del productor" />
|
||||
<button @click="crearProductor">Agregar Productor</button>
|
||||
<ul>
|
||||
<li v-for="p in productores" :key="p.id">{{ p.nombre }}</li>
|
||||
</ul>
|
||||
</section>
|
||||
<h1 class="text-h4 mb-4">Inventario y Productos</h1>
|
||||
|
||||
<section>
|
||||
<h3>Productos (por productor)</h3>
|
||||
<select v-model="productorSel">
|
||||
<option value="">Seleccionar productor</option>
|
||||
<option v-for="p in productores" :key="p.id" :value="p.id">{{ p.nombre }}</option>
|
||||
</select>
|
||||
<input v-model="nombreProd" placeholder="Ej: Café molido 250gr" />
|
||||
<input v-model.number="precioProd" type="number" placeholder="Precio unitario" />
|
||||
<button @click="crearProducto">Agregar Producto</button>
|
||||
<ul>
|
||||
<li v-for="prod in productos" :key="prod.id">{{ prod.nombrePresentacion }} - ${{ prod.precioUnitario }}</li>
|
||||
</ul>
|
||||
</section>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Productores</v-card-title>
|
||||
<v-card-text>
|
||||
<v-row>
|
||||
<v-col cols="8">
|
||||
<v-text-field v-model="nuevoProductor" label="Nombre del productor" density="compact"></v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="4">
|
||||
<v-btn @click="crearProductor" color="primary" block>Agregar</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-list>
|
||||
<v-list-item v-for="p in productores" :key="p.id" :title="p.nombre"></v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<section>
|
||||
<h3>Ingreso Inicial</h3>
|
||||
<select v-model="prodInv">
|
||||
<option value="">Seleccionar producto</option>
|
||||
<option v-for="prod in productos" :key="prod.id" :value="prod.id">{{ prod.nombrePresentacion }}</option>
|
||||
</select>
|
||||
<input v-model.number="cantInv" type="number" placeholder="Cantidad" />
|
||||
<button @click="ingresoInicial">Registrar Ingreso Inicial</button>
|
||||
</section>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card class="mb-4">
|
||||
<v-card-title>Productos</v-card-title>
|
||||
<v-card-text>
|
||||
<v-select v-model="productorSel" :items="productores" item-title="nombre" item-value="id" label="Productor" density="compact" class="mb-2"></v-select>
|
||||
<v-text-field v-model="nombreProd" label="Nombre/Presentación (ej: Café molido 250gr)" density="compact" class="mb-2"></v-text-field>
|
||||
<v-text-field v-model.number="precioProd" label="Precio unitario" type="number" density="compact" class="mb-2"></v-text-field>
|
||||
<v-btn @click="crearProducto" color="primary" block>Agregar Producto</v-btn>
|
||||
<v-list class="mt-3">
|
||||
<v-list-item v-for="prod in productos" :key="prod.id" :title="prod.nombrePresentacion" :subtitle="'$' + prod.precioUnitario"></v-list-item>
|
||||
</v-list>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<section>
|
||||
<h3>Ingreso entre semana</h3>
|
||||
<select v-model="prodInv2">
|
||||
<option value="">Seleccionar producto</option>
|
||||
<option v-for="prod in productos" :key="prod.id" :value="prod.id">{{ prod.nombrePresentacion }}</option>
|
||||
</select>
|
||||
<input v-model.number="cantInv2" type="number" placeholder="Cantidad" />
|
||||
<input v-model="recibidoPor" placeholder="Recibido por" />
|
||||
<button @click="ingresoSemana">Registrar Ingreso</button>
|
||||
</section>
|
||||
<v-row>
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Ingreso Inicial del Día</v-card-title>
|
||||
<v-card-text>
|
||||
<v-select v-model="prodInv" :items="productos" item-title="nombrePresentacion" item-value="id" label="Producto" density="compact" class="mb-2"></v-select>
|
||||
<v-text-field v-model.number="cantInv" label="Cantidad" type="number" density="compact" class="mb-2"></v-text-field>
|
||||
<v-btn @click="ingresoInicial" color="success" block>Registrar Ingreso Inicial</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-card>
|
||||
<v-card-title>Ingreso entre Semana</v-card-title>
|
||||
<v-card-text>
|
||||
<v-select v-model="prodInv2" :items="productos" item-title="nombrePresentacion" item-value="id" label="Producto" density="compact" class="mb-2"></v-select>
|
||||
<v-text-field v-model.number="cantInv2" label="Cantidad" type="number" density="compact" class="mb-2"></v-text-field>
|
||||
<v-text-field v-model="recibidoPor" label="Recibido por" density="compact" class="mb-2"></v-text-field>
|
||||
<v-btn @click="ingresoSemana" color="info" block>Registrar Ingreso</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -73,14 +90,14 @@ async function cargar() {
|
||||
|
||||
async function crearProductor() {
|
||||
if (!nuevoProductor.value) return;
|
||||
await db.productores.add({ id: crypto.randomUUID(), nombre: nuevoProductor.value, activo: true, createdAt: new Date() });
|
||||
await db.productores.add({ id: crypto.randomUUID(), nombre: nuevoProductor.value, activo: true, createdAt: new Date() } as any);
|
||||
nuevoProductor.value = '';
|
||||
await cargar();
|
||||
}
|
||||
|
||||
async function crearProducto() {
|
||||
if (!productorSel.value || !nombreProd.value) return;
|
||||
await db.productos.add({ id: crypto.randomUUID(), productorId: productorSel.value, nombrePresentacion: nombreProd.value, precioUnitario: precioProd.value, activo: true, createdAt: new Date() });
|
||||
await db.productos.add({ id: crypto.randomUUID(), productorId: productorSel.value, nombrePresentacion: nombreProd.value, precioUnitario: Number(precioProd.value), activo: true, createdAt: new Date() } as any);
|
||||
nombreProd.value = '';
|
||||
precioProd.value = 0;
|
||||
await cargar();
|
||||
@@ -88,14 +105,14 @@ async function crearProducto() {
|
||||
|
||||
async function ingresoInicial() {
|
||||
if (!prodInv.value || cantInv.value <= 0) return;
|
||||
await invService.registrarIngresoInicial(prodInv.value, cantInv.value, new Date());
|
||||
await invService.registrarIngresoInicial(prodInv.value, Number(cantInv.value), new Date());
|
||||
cantInv.value = 0;
|
||||
alert('Ingreso inicial registrado');
|
||||
}
|
||||
|
||||
async function ingresoSemana() {
|
||||
if (!prodInv2.value || cantInv2.value <= 0 || !recibidoPor.value) return;
|
||||
await invService.registrarIngresoSemana(prodInv2.value, cantInv2.value, new Date(), recibidoPor.value);
|
||||
await invService.registrarIngresoSemana(prodInv2.value, Number(cantInv2.value), new Date(), recibidoPor.value);
|
||||
cantInv2.value = 0;
|
||||
recibidoPor.value = '';
|
||||
alert('Ingreso entre semana registrado');
|
||||
|
||||
Reference in New Issue
Block a user