mono/ToldoConjunto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 4 Wiki Activity

feat: mejorar ux y validaciones del toldo

Browse Source
This commit is contained in:
mono
2026-10-25 18:09:01 -05:00
parent 4ffce3e3cd
commit 8e286d6fec
24 changed files with 387 additions and 121 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
apps/toldo-app/src/views/Cuadre.vue
View File

@@ -1,29 +1,16 @@
<template>
<div>
<h2>Cuadre de Caja</h2>
<section>
<label>Base Inicial: </label>
<input v-model.number="baseInicial" type="number" />
<button @click="calcular">Calcular Cuadre</button>
</section>
<div class="mb-5"><div class="text-overline text-primary">CIERRE DEL DÍA</div><h1 class="text-h4 mb-1">Cuadre de caja</h1><div class="text-body-2 text-medium-emphasis">Compara lo registrado con el efectivo y el banco.</div></div>
<v-card class="mb-4"><v-card-text><v-row align="end"><v-col cols="12" sm="6"><v-text-field v-model.number="baseInicial" type="number" label="Base inicial" prefix="$" /></v-col><v-col cols="12" sm="6"><v-btn @click="calcular" color="primary" block size="large" prepend-icon="mdi-calculator">Calcular cuadre</v-btn></v-col></v-row></v-card-text></v-card>
<section v-if="cuadre">
<h3>Resultado</h3>
<p>Ventas Efectivo: ${{ cuadre.totalVentasEfectivo }}</p>
<p>Ventas QR: ${{ cuadre.totalVentasQR }}</p>
<p>Gastos Efectivo: ${{ cuadre.totalGastosEfectivo }}</p>
<p>Gastos QR: ${{ cuadre.totalGastosQR }}</p>
<p><strong>Saldo Esperado Efectivo: ${{ cuadre.saldoEsperadoEfectivo }}</strong></p>
<p>Total Ventas: ${{ cuadre.totalVentas }}</p>
<label>Saldo Real en Efectivo: </label>
<input v-model.number="saldoReal" type="number" />
<button @click="guardar">Guardar Cuadre</button>
<p v-if="descuadre !== null">Descuadre: ${{ descuadre }}</p>
<v-row><v-col v-for="item in resumen" :key="item.label" cols="6" md="3"><v-card variant="tonal"><v-card-text><div class="text-caption">{{ item.label }}</div><div class="text-h6 font-weight-bold">${{ item.value.toLocaleString() }}</div></v-card-text></v-card></v-col></v-row>
<v-card class="mt-4"><v-card-title>Verificación final</v-card-title><v-card-text><v-row><v-col cols="12" md="6"><v-text-field v-model.number="saldoReal" type="number" label="Efectivo contado" prefix="$" /></v-col><v-col cols="12" md="6"><v-text-field v-model.number="totalQRBanco" type="number" label="Total QR según banco" prefix="$" /></v-col></v-row><v-alert v-if="descuadre !== null" :type="descuadre === 0 ? 'success' : 'warning'" variant="tonal" class="mb-3">Diferencia de efectivo: ${{ descuadre.toLocaleString() }}</v-alert><v-btn @click="guardar" color="success" block size="large" prepend-icon="mdi-content-save">Guardar cuadre</v-btn></v-card-text></v-card>
</section>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { ref, computed } from 'vue';
import { CuadreService } from '@toldo/services';
const cuadreService = new CuadreService();
@@ -31,6 +18,11 @@ const baseInicial = ref(0);
const cuadre = ref<any>(null);
const saldoReal = ref(0);
const descuadre = ref<number | null>(null);
const totalQRBanco = ref(0);
const resumen = computed(() => cuadre.value ? [
{ label: 'Ventas efectivo', value: cuadre.value.totalVentasEfectivo }, { label: 'Ventas QR', value: cuadre.value.totalVentasQR },
{ label: 'Gastos efectivo', value: cuadre.value.totalGastosEfectivo }, { label: 'Saldo esperado', value: cuadre.value.saldoEsperadoEfectivo },
] : []);
async function calcular() {
cuadre.value = await cuadreService.calcularCuadreDelDia(new Date(), baseInicial.value);
@@ -39,6 +31,7 @@ async function calcular() {
async function guardar() {
if (!cuadre.value) return;
cuadre.value.saldoRealEfectivo = saldoReal.value;
cuadre.value.totalQRBanco = totalQRBanco.value;
await cuadreService.guardarCuadre({ ...cuadre.value, id: crypto.randomUUID(), createdAt: new Date() });
descuadre.value = saldoReal.value - cuadre.value.saldoEsperadoEfectivo;
alert('Cuadre guardado');