389 lines
18 KiB
Vue
389 lines
18 KiB
Vue
<script setup>
|
|
import { ref, onMounted, computed } from 'vue';
|
|
import { useRoute, useRouter } from 'vue-router';
|
|
import cashRegisterService from '@Services/cashRegisterService';
|
|
import salesService from '@Services/salesService';
|
|
import ticketService from '@Services/ticketService';
|
|
import GoogleIcon from '@Shared/GoogleIcon.vue';
|
|
import SaleDetailModal from '@Pages/POS/Sales/DetailModal.vue';
|
|
|
|
/** Router */
|
|
const route = useRoute();
|
|
const router = useRouter();
|
|
|
|
/** Estado */
|
|
const cashRegister = ref(null);
|
|
const sales = ref([]);
|
|
const loading = ref(true);
|
|
const showSaleModal = ref(false);
|
|
const selectedSale = ref(null);
|
|
|
|
/** Computed */
|
|
const getSalesByMethod = (method) => {
|
|
return sales.value
|
|
.filter(sale => sale.payment_method === method)
|
|
.reduce((sum, sale) => sum + parseFloat(sale.total || 0), 0);
|
|
};
|
|
|
|
const totalCashSales = computed(() => getSalesByMethod('cash'));
|
|
const totalCreditCard = computed(() => getSalesByMethod('credit_card'));
|
|
const totalDebitCard = computed(() => getSalesByMethod('debit_card'));
|
|
const totalCardSales = computed(() => totalCreditCard.value + totalDebitCard.value);
|
|
|
|
const difference = computed(() => {
|
|
if (!cashRegister.value) return 0;
|
|
const finalCash = parseFloat(cashRegister.value.final_cash || 0);
|
|
const initialCash = parseFloat(cashRegister.value.initial_cash || 0);
|
|
const expectedCash = initialCash + totalCashSales.value;
|
|
return finalCash - expectedCash;
|
|
});
|
|
|
|
/** Métodos */
|
|
const loadData = async () => {
|
|
loading.value = true;
|
|
try {
|
|
// Cargar datos del corte de caja
|
|
const registerData = await cashRegisterService.getCashRegisterDetail(route.params.id);
|
|
cashRegister.value = registerData;
|
|
|
|
// Cargar ventas del período
|
|
const salesData = await salesService.getSales({
|
|
cash_register_id: route.params.id
|
|
});
|
|
sales.value = salesData.data || [];
|
|
} catch (error) {
|
|
window.Notify.error('Error al cargar el detalle del corte');
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
const goBack = () => {
|
|
router.push({ name: 'pos.cashRegister.history' });
|
|
};
|
|
|
|
const openSaleDetail = async (sale) => {
|
|
try {
|
|
const saleData = await salesService.getSaleDetails(sale.id);
|
|
selectedSale.value = saleData;
|
|
showSaleModal.value = true;
|
|
} catch (error) {
|
|
window.Notify.error('Error al cargar el detalle de la venta');
|
|
}
|
|
};
|
|
|
|
const closeSaleModal = () => {
|
|
showSaleModal.value = false;
|
|
selectedSale.value = null;
|
|
};
|
|
|
|
const downloadTicket = () => {
|
|
try {
|
|
ticketService.generateCashRegisterTicket(cashRegister.value, {
|
|
businessName: 'HIKVISION DISTRIBUIDOR',
|
|
autoDownload: true
|
|
});
|
|
window.Notify.success('Ticket de corte descargado');
|
|
} catch (error) {
|
|
window.Notify.error('Error al generar el ticket');
|
|
}
|
|
};
|
|
|
|
const formatCurrency = (amount) => {
|
|
return new Intl.NumberFormat('es-MX', {
|
|
style: 'currency',
|
|
currency: 'MXN'
|
|
}).format(amount || 0);
|
|
};
|
|
|
|
const formatDate = (dateString) => {
|
|
if (!dateString) return '-';
|
|
return new Date(dateString).toLocaleString('es-MX', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric',
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
});
|
|
};
|
|
|
|
const getDifferenceColor = () => {
|
|
const diff = difference.value;
|
|
if (Math.abs(diff) < 0.01) return 'text-gray-600 dark:text-gray-400';
|
|
return diff > 0 ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400';
|
|
};
|
|
|
|
const getDifferenceIcon = () => {
|
|
const diff = difference.value;
|
|
if (Math.abs(diff) < 0.01) return 'check_circle';
|
|
return diff > 0 ? 'trending_up' : 'trending_down';
|
|
};
|
|
|
|
const getPaymentMethodLabel = (method) => {
|
|
const methods = {
|
|
cash: 'Efectivo',
|
|
credit_card: 'Tarjeta de Crédito',
|
|
debit_card: 'Tarjeta de Débito'
|
|
};
|
|
return methods[method] || method;
|
|
};
|
|
|
|
const getPaymentMethodIcon = (method) => {
|
|
const icons = {
|
|
cash: 'payments',
|
|
credit_card: 'credit_card',
|
|
debit_card: 'credit_card'
|
|
};
|
|
return icons[method] || 'payment';
|
|
};
|
|
|
|
/** Ciclo */
|
|
onMounted(() => {
|
|
loadData();
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-6">
|
|
<!-- Header -->
|
|
<div class="max-w-7xl mx-auto mb-6">
|
|
<div class="flex items-center justify-between flex-wrap gap-4">
|
|
<div>
|
|
<button
|
|
@click="goBack"
|
|
class="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-100 mb-2 transition-colors"
|
|
>
|
|
<GoogleIcon name="arrow_back" class="text-lg" />
|
|
Volver al historial
|
|
</button>
|
|
<h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-3">
|
|
<GoogleIcon name="receipt_long" class="text-4xl text-indigo-600" />
|
|
Detalle de Corte de Caja
|
|
</h1>
|
|
<p class="text-sm text-gray-600 dark:text-gray-400 mt-1">
|
|
Caja #{{ route.params.id }}
|
|
</p>
|
|
</div>
|
|
<button
|
|
v-if="!loading && cashRegister"
|
|
@click="downloadTicket"
|
|
class="flex items-center gap-2 px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white font-semibold rounded-lg shadow-md transition-colors"
|
|
>
|
|
<GoogleIcon name="download" class="text-xl" />
|
|
Descargar Ticket
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Loading -->
|
|
<div v-if="loading" class="max-w-7xl mx-auto">
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-12">
|
|
<div class="flex flex-col items-center justify-center">
|
|
<GoogleIcon name="sync" class="text-6xl text-gray-400 animate-spin mb-4" />
|
|
<p class="text-gray-600 dark:text-gray-400">Cargando información...</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div v-else-if="cashRegister" class="max-w-7xl mx-auto space-y-6">
|
|
<!-- Información del Corte -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 p-6">
|
|
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 mb-6 flex items-center gap-2">
|
|
<GoogleIcon name="info" class="text-2xl text-indigo-600" />
|
|
Información del Corte
|
|
</h2>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
<!-- Cajero -->
|
|
<div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Cajero</p>
|
|
<p class="text-lg font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ cashRegister.user?.name || 'N/A' }}
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{{ cashRegister.user?.email || '' }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Apertura -->
|
|
<div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Apertura</p>
|
|
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ formatDate(cashRegister.opened_at) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Cierre -->
|
|
<div>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mb-1">Cierre</p>
|
|
<p class="text-sm font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ formatDate(cashRegister.closed_at) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Notas -->
|
|
<div v-if="cashRegister.notes" class="mt-6 p-4 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-lg">
|
|
<p class="text-xs font-semibold text-yellow-800 dark:text-yellow-300 mb-1">Notas del Cierre</p>
|
|
<p class="text-sm text-yellow-700 dark:text-yellow-400">{{ cashRegister.notes }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Resumen Financiero -->
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
|
|
<!-- Efectivo Inicial -->
|
|
<div class="bg-gradient-to-br from-blue-50 to-blue-100 dark:from-blue-900/20 dark:to-blue-800/20 border border-blue-200 dark:border-blue-800 rounded-xl p-6">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-12 h-12 bg-blue-500 rounded-lg flex items-center justify-center text-white">
|
|
<GoogleIcon name="account_balance_wallet" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-blue-700 dark:text-blue-300 uppercase">Inicial</p>
|
|
<p class="text-2xl font-bold text-blue-900 dark:text-blue-100">
|
|
{{ formatCurrency(cashRegister.initial_cash) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Efectivo (Ventas) -->
|
|
<div class="bg-gradient-to-br from-green-50 to-green-100 dark:from-green-900/20 dark:to-green-800/20 border border-green-200 dark:border-green-800 rounded-xl p-6">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-12 h-12 bg-green-500 rounded-lg flex items-center justify-center text-white">
|
|
<GoogleIcon name="payments" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-green-700 dark:text-green-300 uppercase">Efectivo</p>
|
|
<p class="text-2xl font-bold text-green-900 dark:text-green-100">
|
|
{{ formatCurrency(totalCashSales) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-green-600 dark:text-green-400">Ventas en efectivo</p>
|
|
</div>
|
|
|
|
<!-- Tarjetas -->
|
|
<div class="bg-gradient-to-br from-purple-50 to-purple-100 dark:from-purple-900/20 dark:to-purple-800/20 border border-purple-200 dark:border-purple-800 rounded-xl p-6">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-12 h-12 bg-purple-500 rounded-lg flex items-center justify-center text-white">
|
|
<GoogleIcon name="credit_card" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-purple-700 dark:text-purple-300 uppercase">Tarjetas</p>
|
|
<p class="text-2xl font-bold text-purple-900 dark:text-purple-100">
|
|
{{ formatCurrency(totalCardSales) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-purple-600 dark:text-purple-400">
|
|
Crédito: {{ formatCurrency(totalCreditCard) }} | Débito: {{ formatCurrency(totalDebitCard) }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Diferencia -->
|
|
<div class="bg-gradient-to-br from-gray-50 to-gray-100 dark:from-gray-900/20 dark:to-gray-800/20 border border-gray-200 dark:border-gray-700 rounded-xl p-6">
|
|
<div class="flex items-center gap-3 mb-3">
|
|
<div class="w-12 h-12 bg-gray-500 rounded-lg flex items-center justify-center text-white">
|
|
<GoogleIcon :name="getDifferenceIcon()" class="text-2xl" />
|
|
</div>
|
|
<div>
|
|
<p class="text-xs font-semibold text-gray-700 dark:text-gray-300 uppercase">Diferencia</p>
|
|
<p class="text-2xl font-bold" :class="getDifferenceColor()">
|
|
{{ difference >= 0 ? '+' : '' }}{{ formatCurrency(difference) }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<p class="text-xs text-gray-600 dark:text-gray-400">
|
|
{{ Math.abs(difference) < 0.01 ? 'Cuadra exacto' : (difference > 0 ? 'Sobrante' : 'Faltante') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tabla de Ventas -->
|
|
<div class="bg-white dark:bg-gray-800 rounded-xl shadow-sm border border-gray-200 dark:border-gray-700 overflow-hidden">
|
|
<div class="p-6 border-b border-gray-200 dark:border-gray-700">
|
|
<h2 class="text-xl font-bold text-gray-900 dark:text-gray-100 flex items-center gap-2">
|
|
<GoogleIcon name="receipt" class="text-2xl text-indigo-600" />
|
|
Ventas Realizadas
|
|
<span class="text-sm font-normal text-gray-500 dark:text-gray-400">
|
|
({{ sales.length }} transacciones)
|
|
</span>
|
|
</h2>
|
|
</div>
|
|
|
|
<div v-if="sales.length === 0" class="p-12 text-center">
|
|
<GoogleIcon name="receipt_long" class="text-6xl text-gray-300 dark:text-gray-600 mx-auto mb-4" />
|
|
<p class="text-gray-500 dark:text-gray-400">No hay ventas registradas en este período</p>
|
|
</div>
|
|
|
|
<div v-else class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-200 dark:divide-gray-700">
|
|
<thead class="bg-gray-50 dark:bg-gray-900">
|
|
<tr>
|
|
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Folio</th>
|
|
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Hora</th>
|
|
<th class="px-6 py-3 text-left text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Método</th>
|
|
<th class="px-6 py-3 text-right text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Total</th>
|
|
<th class="px-6 py-3 text-center text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody class="bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
|
|
<tr
|
|
v-for="sale in sales"
|
|
:key="sale.id"
|
|
class="hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
|
|
>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="text-sm font-mono font-semibold text-gray-900 dark:text-gray-100">
|
|
{{ sale.invoice_number || `#${String(sale.id).padStart(6, '0')}` }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">
|
|
{{ new Date(sale.created_at).toLocaleTimeString('es-MX', {
|
|
hour: '2-digit',
|
|
minute: '2-digit'
|
|
}) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap">
|
|
<div class="flex items-center gap-2">
|
|
<GoogleIcon
|
|
:name="getPaymentMethodIcon(sale.payment_method)"
|
|
class="text-gray-500 dark:text-gray-400"
|
|
/>
|
|
<span class="text-sm text-gray-700 dark:text-gray-300">
|
|
{{ getPaymentMethodLabel(sale.payment_method) }}
|
|
</span>
|
|
</div>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-right">
|
|
<span class="text-sm font-bold text-gray-900 dark:text-gray-100">
|
|
{{ formatCurrency(sale.total) }}
|
|
</span>
|
|
</td>
|
|
<td class="px-6 py-4 whitespace-nowrap text-center">
|
|
<button
|
|
@click="openSaleDetail(sale)"
|
|
class="text-indigo-600 hover:text-indigo-900 dark:text-indigo-400 dark:hover:text-indigo-300 transition-colors"
|
|
title="Ver detalle"
|
|
>
|
|
<GoogleIcon name="visibility" class="text-xl" />
|
|
</button>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Modal de Detalle de Venta -->
|
|
<SaleDetailModal
|
|
:show="showSaleModal"
|
|
:sale="selectedSale"
|
|
@close="closeSaleModal"
|
|
/>
|
|
</div>
|
|
</template> |