40 lines
2.7 KiB
Vue
40 lines
2.7 KiB
Vue
<template>
|
|
<div>
|
|
<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">
|
|
<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, computed } from 'vue';
|
|
import { CuadreService } from '@toldo/services';
|
|
|
|
const cuadreService = new CuadreService();
|
|
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);
|
|
}
|
|
|
|
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');
|
|
}
|
|
</script>
|