594 lines
24 KiB
TypeScript
594 lines
24 KiB
TypeScript
import type { FC } from 'react';
|
|
import { useEffect, useState } from 'react';
|
|
import { Plus, Lock, Receipt, Printer, ChevronLeft, ChevronRight, Download } from 'lucide-react';
|
|
import Layout from '../components/Layout';
|
|
import {
|
|
Card,
|
|
Button,
|
|
Input,
|
|
Modal,
|
|
Badge,
|
|
EmptyState,
|
|
PageHeader,
|
|
Skeleton,
|
|
MobileCard,
|
|
TextArea,
|
|
toast,
|
|
badgeForCashClosingState,
|
|
} from '../components/ui';
|
|
import { CortePrint } from '../components/CortePrint';
|
|
import { odooApi, type CashClosing } from '../services/odoo';
|
|
import { useAuth } from '../lib/auth';
|
|
import { exportToExcel } from '../lib/exporter';
|
|
|
|
const money = (v: number) =>
|
|
'$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
|
|
|
|
const MES_ACTUAL = new Date().toISOString().slice(0, 7);
|
|
|
|
const PASOS = [
|
|
{ key: 'cash', titulo: 'Efectivo' },
|
|
{ key: 'card', titulo: 'Tarjeta' },
|
|
{ key: 'transfer', titulo: 'Transferencia' },
|
|
{ key: 'other', titulo: 'Otros' },
|
|
] as const;
|
|
|
|
const Cortes: FC = () => {
|
|
const { brand, can } = useAuth();
|
|
const [closings, setClosings] = useState<CashClosing[]>([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState<string | null>(null);
|
|
const [createOpen, setCreateOpen] = useState(false);
|
|
const [wizard, setWizard] = useState<CashClosing | null>(null);
|
|
const [step, setStep] = useState(0); // 0..3 métodos, 4 = resumen
|
|
const [countedCash, setCountedCash] = useState('');
|
|
const [countedCard, setCountedCard] = useState('');
|
|
const [countedTransfer, setCountedTransfer] = useState('');
|
|
const [countedOther, setCountedOther] = useState('');
|
|
const [notes, setNotes] = useState('');
|
|
const [printCorte, setPrintCorte] = useState<CashClosing | null>(null);
|
|
const [date, setDate] = useState(() => new Date().toISOString().split('T')[0]);
|
|
const [openingCash, setOpeningCash] = useState('');
|
|
const [submitting, setSubmitting] = useState(false);
|
|
// Mes para el resumen exportable
|
|
const [mes, setMes] = useState(MES_ACTUAL);
|
|
|
|
// --- Historial comparativo: últimos cortes CERRADOS y diferencias por usuario ---
|
|
const HISTORIAL_N = 14;
|
|
const cerrados = closings.filter((c) => c.state === 'closed');
|
|
const ultimosCerrados = cerrados.slice(0, HISTORIAL_N);
|
|
const porUsuario = (() => {
|
|
const map = new Map<string, { usuario: string; cortes: number; faltantes: number; sobrantes: number; neto: number; ultima: string }>();
|
|
for (const c of ultimosCerrados) {
|
|
const usuario = c.user || 'Usuario no disponible';
|
|
const row = map.get(usuario) || { usuario, cortes: 0, faltantes: 0, sobrantes: 0, neto: 0, ultima: c.date };
|
|
row.cortes += 1;
|
|
row.neto += c.difference || 0;
|
|
if ((c.difference || 0) < 0) row.faltantes += c.difference || 0;
|
|
else row.sobrantes += c.difference || 0;
|
|
if (c.date > row.ultima) row.ultima = c.date;
|
|
map.set(usuario, row);
|
|
}
|
|
return [...map.values()].sort((a, b) => a.neto - b.neto);
|
|
})();
|
|
|
|
const cortesDelMes = closings.filter((c) => (c.date || '').startsWith(mes));
|
|
|
|
const exportarMes = async () => {
|
|
if (cortesDelMes.length === 0) {
|
|
toast.error('No hay cortes en el mes seleccionado');
|
|
return;
|
|
}
|
|
try {
|
|
await exportToExcel({
|
|
filename: `cortes-${mes}`,
|
|
sheetName: 'Cortes',
|
|
title: `Cortes de caja ${brand.nombre}`,
|
|
subtitle: `Mes ${mes} · ${cortesDelMes.length} cortes`,
|
|
columns: [
|
|
{ header: 'Referencia', key: 'name' },
|
|
{ header: 'Fecha', key: 'date', format: 'date' },
|
|
{ header: 'Usuario', key: 'user' },
|
|
{ header: 'Estado', key: 'estado' },
|
|
{ header: 'Apertura', key: 'opening_cash', format: 'currency' },
|
|
{ header: 'Efectivo', key: 'total_cash', format: 'currency' },
|
|
{ header: 'Tarjeta', key: 'total_card', format: 'currency' },
|
|
{ header: 'Transferencia', key: 'total_transfer', format: 'currency' },
|
|
{ header: 'Otros', key: 'total_other', format: 'currency' },
|
|
{ header: 'Total ventas', key: 'total_sales', format: 'currency' },
|
|
{ header: 'Efectivo contado', key: 'counted_cash', format: 'currency' },
|
|
{ header: 'Diferencia', key: 'difference', format: 'currency' },
|
|
{ header: 'Notas', key: 'notes' },
|
|
],
|
|
rows: cortesDelMes.map((c) => ({
|
|
...c,
|
|
user: c.user || 'Usuario no disponible',
|
|
estado: c.state === 'closed' ? 'Cerrado' : 'Abierto',
|
|
})),
|
|
totals: {
|
|
name: '',
|
|
total_cash: cortesDelMes.reduce((a, c) => a + (c.total_cash || 0), 0),
|
|
total_card: cortesDelMes.reduce((a, c) => a + (c.total_card || 0), 0),
|
|
total_transfer: cortesDelMes.reduce((a, c) => a + (c.total_transfer || 0), 0),
|
|
total_other: cortesDelMes.reduce((a, c) => a + (c.total_other || 0), 0),
|
|
total_sales: cortesDelMes.reduce((a, c) => a + (c.total_sales || 0), 0),
|
|
difference: cortesDelMes.reduce((a, c) => a + (c.difference || 0), 0),
|
|
},
|
|
});
|
|
toast.success(`Resumen de ${mes} descargado (${cortesDelMes.length} cortes)`);
|
|
} catch (err) {
|
|
toast.error('Error al exportar');
|
|
console.error(err);
|
|
}
|
|
};
|
|
|
|
const load = async () => {
|
|
try {
|
|
setLoading(true);
|
|
setError(null);
|
|
const res = await odooApi.getCashClosings();
|
|
if (res.status === 'success') setClosings(res.cash_closings);
|
|
} catch (err) {
|
|
setError('Error al cargar cortes');
|
|
toast.error('Error al cargar cortes');
|
|
console.error(err);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
load();
|
|
}, []);
|
|
|
|
const abrirWizard = (c: CashClosing) => {
|
|
setWizard(c);
|
|
setStep(0);
|
|
setCountedCash('');
|
|
setCountedCard('');
|
|
setCountedTransfer('');
|
|
setCountedOther('');
|
|
setNotes('');
|
|
};
|
|
|
|
const esperado = (c: CashClosing, key: string) => {
|
|
if (key === 'cash') return c.opening_cash + c.total_cash;
|
|
if (key === 'card') return c.total_card;
|
|
if (key === 'transfer') return c.total_transfer;
|
|
return c.total_other;
|
|
};
|
|
|
|
const valorContado = (key: string) => {
|
|
if (key === 'cash') return parseFloat(countedCash || '0') || 0;
|
|
if (key === 'card') return parseFloat(countedCard || '0') || 0;
|
|
if (key === 'transfer') return parseFloat(countedTransfer || '0') || 0;
|
|
return parseFloat(countedOther || '0') || 0;
|
|
};
|
|
|
|
const diffColor = (diff: number) =>
|
|
diff < 0 ? 'text-rose-600' : diff > 0 ? 'text-emerald-600' : 'text-theme-muted';
|
|
|
|
const create = async () => {
|
|
const value = parseFloat(openingCash);
|
|
if (Number.isNaN(value) || value < 0) {
|
|
toast.error('Ingresa un efectivo inicial válido');
|
|
return;
|
|
}
|
|
try {
|
|
setSubmitting(true);
|
|
await odooApi.createCashClosing({ date, opening_cash: value });
|
|
toast.success('Caja abierta');
|
|
setCreateOpen(false);
|
|
setOpeningCash('');
|
|
await load();
|
|
} catch (err) {
|
|
toast.error('Error al crear corte');
|
|
console.error(err);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const cerrarCaja = async () => {
|
|
if (!wizard) return;
|
|
try {
|
|
setSubmitting(true);
|
|
await odooApi.closeCashClosing(wizard.id, {
|
|
counted_cash: valorContado('cash'),
|
|
counted_card: valorContado('card'),
|
|
counted_transfer: valorContado('transfer'),
|
|
counted_other: valorContado('other'),
|
|
notes,
|
|
});
|
|
toast.success('Caja cerrada');
|
|
setWizard(null);
|
|
await load();
|
|
} catch (err) {
|
|
toast.error('Error al cerrar caja');
|
|
console.error(err);
|
|
} finally {
|
|
setSubmitting(false);
|
|
}
|
|
};
|
|
|
|
const renderUser = (user: string | false) => {
|
|
if (!user) return 'Usuario no disponible';
|
|
return user;
|
|
};
|
|
|
|
const differenceColor = (diff: number) => {
|
|
if (diff > 0) return 'text-emerald-600';
|
|
if (diff < 0) return 'text-rose-600';
|
|
return 'text-theme-muted';
|
|
};
|
|
|
|
// --- Contenido de un paso del asistente ---
|
|
const renderPaso = () => {
|
|
if (!wizard) return null;
|
|
if (step < PASOS.length) {
|
|
const { key, titulo } = PASOS[step];
|
|
const esp = esperado(wizard, key);
|
|
const cont = valorContado(key);
|
|
const diff = cont - esp;
|
|
const setters: Record<string, (v: string) => void> = {
|
|
cash: setCountedCash, card: setCountedCard,
|
|
transfer: setCountedTransfer, other: setCountedOther,
|
|
};
|
|
const values: Record<string, string> = {
|
|
cash: countedCash, card: countedCard,
|
|
transfer: countedTransfer, other: countedOther,
|
|
};
|
|
const informativo = key !== 'cash';
|
|
return (
|
|
<div className="space-y-4">
|
|
<div className="grid grid-cols-2 gap-3 text-sm">
|
|
<div className="p-3 rounded-lg bg-theme-bg">
|
|
<p className="text-xs text-theme-muted">
|
|
{key === 'cash' ? 'Efectivo esperado (apertura + cobros)' : `${titulo} registrado en el sistema`}
|
|
</p>
|
|
<p className="text-lg font-semibold text-theme-heading">{money(esp)}</p>
|
|
</div>
|
|
<div className="p-3 rounded-lg bg-theme-bg">
|
|
<p className="text-xs text-theme-muted">{cont > 0 || values[key] ? 'Diferencia' : 'Aún sin contar'}</p>
|
|
<p className={`text-lg font-semibold ${diffColor(diff)}`}>
|
|
{values[key] ? `${diff > 0 ? 'Sobrante +' : diff < 0 ? 'Faltante ' : ''}${money(diff)}` : '—'}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<Input
|
|
label={key === 'cash' ? 'Efectivo contado físicamente' : informativo ? `${titulo} contado (opcional, igual al registrado)` : 'Contado'}
|
|
type="number"
|
|
min={0}
|
|
step={0.01}
|
|
value={values[key]}
|
|
placeholder={key === 'cash' ? undefined : money(esp)}
|
|
onChange={(e) => setters[key](e.target.value)}
|
|
autoFocus
|
|
/>
|
|
{key === 'cash' && countedCash && (
|
|
<p className={`text-sm font-medium ${diffColor(diff)}`}>
|
|
{diff === 0 && 'El efectivo cuadra.'}
|
|
{diff < 0 && `Faltan ${money(-diff)} en la caja.`}
|
|
{diff > 0 && `Sobran ${money(diff)} en la caja.`}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
// Resumen
|
|
return (
|
|
<div className="space-y-3 text-sm">
|
|
<table className="w-full">
|
|
<thead>
|
|
<tr className="text-xs uppercase text-theme-muted border-b border-theme-border">
|
|
<th className="text-left py-1.5">Método</th>
|
|
<th className="text-right py-1.5">Esperado</th>
|
|
<th className="text-right py-1.5">Contado</th>
|
|
<th className="text-right py-1.5">Diferencia</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-theme-border">
|
|
{PASOS.map(({ key, titulo }) => {
|
|
const esp = esperado(wizard, key);
|
|
const cont = valorContado(key);
|
|
const diff = cont - esp;
|
|
return (
|
|
<tr key={key}>
|
|
<td className="py-1.5">{titulo}</td>
|
|
<td className="py-1.5 text-right">{money(esp)}</td>
|
|
<td className="py-1.5 text-right">{money(cont)}</td>
|
|
<td className={`py-1.5 text-right font-semibold ${diffColor(diff)}`}>
|
|
{diff > 0 ? '+' : ''}{money(diff)}
|
|
</td>
|
|
</tr>
|
|
);
|
|
})}
|
|
</tbody>
|
|
</table>
|
|
<TextArea
|
|
label="Notas del corte"
|
|
rows={2}
|
|
value={notes}
|
|
onChange={(e) => setNotes(e.target.value)}
|
|
/>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<Layout title="Cortes de Caja" subtitle="Arqueos y cierres">
|
|
<PageHeader title="Cortes de Caja" subtitle="Abre y cierra turnos">
|
|
<Input
|
|
type="month"
|
|
value={mes}
|
|
onChange={(e) => setMes(e.target.value || MES_ACTUAL)}
|
|
aria-label="Mes a exportar"
|
|
className="sm:max-w-[160px]"
|
|
/>
|
|
<Button variant="outline" onClick={exportarMes} disabled={cortesDelMes.length === 0}>
|
|
<Download size={16} className="mr-2" />
|
|
Exportar resumen
|
|
</Button>
|
|
<Button onClick={() => setCreateOpen(true)}>
|
|
<Plus size={16} className="mr-2" />
|
|
Abrir caja
|
|
</Button>
|
|
</PageHeader>
|
|
|
|
<Card>
|
|
<Card.Body>
|
|
{error && <p className="text-rose-600 text-sm mb-4">{error}</p>}
|
|
|
|
{loading ? (
|
|
<Skeleton count={5} className="h-14 w-full" />
|
|
) : closings.length === 0 ? (
|
|
<EmptyState
|
|
title="Sin cortes"
|
|
subtitle="No hay cortes de caja registrados."
|
|
actionLabel="Abrir caja"
|
|
onAction={() => setCreateOpen(true)}
|
|
icon={<Receipt size={28} />}
|
|
/>
|
|
) : (
|
|
<>
|
|
<div className="hidden sm:block overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-theme-bg">
|
|
<tr>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Referencia</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Fecha</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase hidden md:table-cell">Usuario</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Apertura</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase hidden lg:table-cell">Ventas</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Diferencia</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Estado</th>
|
|
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Acciones</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{closings.map((c) => (
|
|
<tr key={c.id} className="hover:bg-theme-bg">
|
|
<td className="p-3 text-sm text-theme-muted">{c.name}</td>
|
|
<td className="p-3 text-sm text-theme-muted">{c.date}</td>
|
|
<td className="p-3 text-sm text-theme-muted hidden md:table-cell">{renderUser(c.user)}</td>
|
|
<td className="p-3 text-sm text-theme-heading">${c.opening_cash}</td>
|
|
<td className="p-3 text-sm text-theme-heading hidden lg:table-cell">${c.total_sales}</td>
|
|
<td className={`p-3 text-sm font-semibold ${differenceColor(c.difference)}`}>
|
|
{c.difference > 0 ? '+' : ''}${c.difference}
|
|
</td>
|
|
<td className="p-3">
|
|
<Badge variant={badgeForCashClosingState(c.state)}>{c.state}</Badge>
|
|
</td>
|
|
<td className="p-3 whitespace-nowrap">
|
|
{c.state !== 'closed' && (
|
|
<Button variant="ghost" size="sm" onClick={() => abrirWizard(c)} title="Cierre guiado">
|
|
<Lock size={16} className="text-theme-heading" />
|
|
</Button>
|
|
)}
|
|
<Button variant="ghost" size="sm" onClick={() => setPrintCorte(c)} title="Imprimir corte">
|
|
<Printer size={16} className="text-theme-heading" />
|
|
</Button>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div className="sm:hidden space-y-3">
|
|
{closings.map((c) => (
|
|
<MobileCard
|
|
key={c.id}
|
|
title={c.name}
|
|
subtitle={<Badge variant={badgeForCashClosingState(c.state)}>{c.state}</Badge>}
|
|
rows={[
|
|
{ label: 'Fecha', value: c.date },
|
|
{ label: 'Usuario', value: renderUser(c.user) },
|
|
{ label: 'Apertura', value: `$${c.opening_cash}` },
|
|
{ label: 'Diferencia', value: `${c.difference > 0 ? '+' : ''}$${c.difference}` },
|
|
]}
|
|
actions={
|
|
<>
|
|
{c.state !== 'closed' && (
|
|
<Button variant="ghost" size="sm" onClick={() => abrirWizard(c)}>
|
|
<Lock size={16} />
|
|
</Button>
|
|
)}
|
|
<Button variant="ghost" size="sm" onClick={() => setPrintCorte(c)}>
|
|
<Printer size={16} />
|
|
</Button>
|
|
</>
|
|
}
|
|
/>
|
|
))}
|
|
</div>
|
|
</>
|
|
)}
|
|
</Card.Body>
|
|
</Card>
|
|
|
|
<Modal
|
|
isOpen={createOpen}
|
|
onClose={() => setCreateOpen(false)}
|
|
title="Abrir caja"
|
|
maxWidth="sm"
|
|
footer={
|
|
<>
|
|
<Button variant="outline" onClick={() => setCreateOpen(false)}>Cancelar</Button>
|
|
<Button onClick={create} loading={submitting}>Abrir caja</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4">
|
|
<Input
|
|
label="Fecha"
|
|
type="date"
|
|
value={date}
|
|
onChange={(e) => setDate(e.target.value)}
|
|
/>
|
|
<Input
|
|
label="Efectivo inicial (fondo de caja)"
|
|
type="number"
|
|
min={0}
|
|
step={0.01}
|
|
value={openingCash}
|
|
onChange={(e) => setOpeningCash(e.target.value)}
|
|
/>
|
|
</div>
|
|
</Modal>
|
|
|
|
{/* Asistente de cierre guiado */}
|
|
<Modal
|
|
isOpen={!!wizard}
|
|
onClose={() => setWizard(null)}
|
|
title={`Cierre guiado · ${wizard?.name || ''}`}
|
|
maxWidth="md"
|
|
footer={
|
|
<div className="flex items-center justify-between w-full">
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setStep((s) => Math.max(0, s - 1))}
|
|
disabled={step === 0}
|
|
>
|
|
<ChevronLeft size={16} className="mr-1" />
|
|
Anterior
|
|
</Button>
|
|
{step < PASOS.length ? (
|
|
<Button onClick={() => setStep((s) => Math.min(PASOS.length, s + 1))}>
|
|
{step === PASOS.length - 1 ? 'Ver resumen' : 'Siguiente'}
|
|
<ChevronRight size={16} className="ml-1" />
|
|
</Button>
|
|
) : (
|
|
<Button onClick={cerrarCaja} loading={submitting} disabled={!can('caja.cerrar')}
|
|
title={can('caja.cerrar') ? undefined : 'Sin permiso para cerrar caja'}>
|
|
<Lock size={16} className="mr-1.5" />
|
|
Cerrar caja
|
|
</Button>
|
|
)}
|
|
</div>
|
|
}
|
|
>
|
|
{wizard && (
|
|
<div className="space-y-4">
|
|
{/* Indicador de pasos */}
|
|
<div className="flex items-center gap-1.5 flex-wrap">
|
|
{[...PASOS.map((p) => p.titulo), 'Resumen'].map((t, i) => (
|
|
<span
|
|
key={t}
|
|
className={`px-2 py-0.5 rounded-full text-xs font-medium ${
|
|
i === step ? 'bg-theme-accent text-theme-inverse'
|
|
: i < step ? 'bg-theme-accent-bg text-theme-heading'
|
|
: 'bg-theme-bg text-theme-muted'
|
|
}`}
|
|
>
|
|
{i + 1}. {t}
|
|
</span>
|
|
))}
|
|
</div>
|
|
<p className="text-sm text-theme-muted">
|
|
Ventas del día: <span className="font-medium text-theme-heading">{money(wizard.total_sales)}</span>
|
|
{' · '}Fondo inicial: <span className="font-medium text-theme-heading">{money(wizard.opening_cash)}</span>
|
|
</p>
|
|
{renderPaso()}
|
|
</div>
|
|
)}
|
|
</Modal>
|
|
|
|
{/* Historial comparativo de diferencias (para detectar patrones por usuario) */}
|
|
<Card className="mt-4">
|
|
<Card.Body>
|
|
<div className="flex flex-wrap items-center justify-between gap-2 mb-3">
|
|
<div>
|
|
<h3 className="font-heading text-lg text-theme-heading">Historial comparativo de diferencias</h3>
|
|
<p className="text-xs text-theme-muted">Últimos {HISTORIAL_N} cortes cerrados. Negativo = faltante, positivo = sobrante.</p>
|
|
</div>
|
|
{ultimosCerrados.length > 0 && (
|
|
<span className="text-xs text-theme-muted">
|
|
Diferencia acumulada: <span className={`font-semibold ${differenceColor(ultimosCerrados.reduce((a, c) => a + (c.difference || 0), 0))}`}>
|
|
{money(ultimosCerrados.reduce((a, c) => a + (c.difference || 0), 0))}
|
|
</span>
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{ultimosCerrados.length === 0 ? (
|
|
<p className="text-sm text-theme-muted">Aún no hay cortes cerrados.</p>
|
|
) : (
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
|
|
<div className="lg:col-span-2 overflow-x-auto">
|
|
<table className="w-full">
|
|
<thead className="bg-theme-bg">
|
|
<tr>
|
|
<th className="text-left p-2 text-xs font-medium text-theme-muted uppercase">Fecha</th>
|
|
<th className="text-left p-2 text-xs font-medium text-theme-muted uppercase">Usuario</th>
|
|
<th className="text-right p-2 text-xs font-medium text-theme-muted uppercase">Contado</th>
|
|
<th className="text-right p-2 text-xs font-medium text-theme-muted uppercase">Diferencia</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y">
|
|
{ultimosCerrados.map((c) => (
|
|
<tr key={c.id} className="hover:bg-theme-bg">
|
|
<td className="p-2 text-sm text-theme-muted">{c.date}</td>
|
|
<td className="p-2 text-sm text-theme-muted">{c.user || 'Usuario no disponible'}</td>
|
|
<td className="p-2 text-sm text-right text-theme-heading">{money(c.counted_cash ?? 0)}</td>
|
|
<td className={`p-2 text-sm text-right font-semibold ${differenceColor(c.difference)}`}>
|
|
{c.difference > 0 ? '+' : ''}{money(c.difference)}
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<div>
|
|
<p className="text-xs font-medium text-theme-muted uppercase mb-2">Resumen por usuario</p>
|
|
<div className="space-y-2">
|
|
{porUsuario.map((u) => (
|
|
<div key={u.usuario} className="rounded-xl border border-theme-border bg-theme-bg p-2.5">
|
|
<div className="flex items-center justify-between gap-2">
|
|
<span className="text-sm font-medium text-theme-heading truncate">{u.usuario}</span>
|
|
<span className={`text-sm font-semibold ${differenceColor(u.neto)}`}>
|
|
{u.neto > 0 ? '+' : ''}{money(u.neto)}
|
|
</span>
|
|
</div>
|
|
<p className="text-[11px] text-theme-muted">
|
|
{u.cortes} {u.cortes === 1 ? 'corte' : 'cortes'}
|
|
{u.faltantes !== 0 ? ` · faltantes ${money(u.faltantes)}` : ''}
|
|
{u.sobrantes !== 0 ? ` · sobrantes ${money(u.sobrantes)}` : ''}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</Card.Body>
|
|
</Card>
|
|
|
|
<CortePrint corte={printCorte} onClose={() => setPrintCorte(null)} />
|
|
</Layout>
|
|
);
|
|
};
|
|
|
|
export default Cortes;
|