Feat: Cambios Varios 2
This commit is contained in:
200
frontend/counter-panel/src/components/CashClosingModal.tsx
Normal file
200
frontend/counter-panel/src/components/CashClosingModal.tsx
Normal file
@@ -0,0 +1,200 @@
|
||||
import { useState, useEffect } from 'react';
|
||||
import { Banknote, CreditCard, ArrowRightLeft, CheckCircle2, X, AlertCircle, RefreshCw, Printer } from 'lucide-react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import clsx from 'clsx';
|
||||
import api from '../services/api';
|
||||
|
||||
interface CashClosingModalProps {
|
||||
onClose: () => void;
|
||||
onComplete: () => void;
|
||||
}
|
||||
|
||||
export default function CashClosingModal({ onClose, onComplete }: CashClosingModalProps) {
|
||||
const [summary, setSummary] = useState<any>(null);
|
||||
const [loadingSummary, setLoadingSummary] = useState(true);
|
||||
const [notes, setNotes] = useState('');
|
||||
const [isClosing, setIsClosing] = useState(false);
|
||||
const [done, setDone] = useState(false);
|
||||
const [closedSessionId, setClosedSessionId] = useState<number | null>(null);
|
||||
|
||||
// 1. Al abrir el modal, traemos lo que el sistema dice que debería haber
|
||||
useEffect(() => {
|
||||
const fetchSummary = async () => {
|
||||
try {
|
||||
const res = await api.get('/cashsessions/summary');
|
||||
setSummary(res.data);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoadingSummary(false);
|
||||
}
|
||||
};
|
||||
fetchSummary();
|
||||
}, []);
|
||||
|
||||
const handleFinalClose = async () => {
|
||||
setIsClosing(true);
|
||||
try {
|
||||
const res = await api.post('/cashsessions/close', {
|
||||
declaredCash: summary.cashSales + summary.openingBalance,
|
||||
declaredDebit: summary.cardSales,
|
||||
declaredCredit: 0,
|
||||
declaredTransfer: summary.transferSales,
|
||||
notes: notes || "Cierre confirmado por cajero"
|
||||
});
|
||||
|
||||
setClosedSessionId(res.data.sessionId);
|
||||
setDone(true);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
alert('Error al cerrar caja');
|
||||
} finally {
|
||||
setIsClosing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleDownloadPdf = async () => {
|
||||
if (!closedSessionId) return;
|
||||
try {
|
||||
const res = await api.get(`/cashsessions/${closedSessionId}/pdf`, { responseType: 'blob' });
|
||||
const url = window.URL.createObjectURL(new Blob([res.data], { type: 'application/pdf' }));
|
||||
const link = document.createElement('a');
|
||||
link.href = url;
|
||||
link.setAttribute('download', `Acta_Cierre_${closedSessionId}.pdf`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
link.remove();
|
||||
} catch (error) {
|
||||
alert("Error al descargar el comprobante");
|
||||
}
|
||||
};
|
||||
|
||||
if (loadingSummary) return (
|
||||
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-sm z-[200] flex items-center justify-center">
|
||||
<RefreshCw className="animate-spin text-white" size={40} />
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 bg-slate-900/60 backdrop-blur-md flex items-center justify-center z-[200] p-4 overflow-hidden">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9, y: 20 }}
|
||||
animate={{ opacity: 1, scale: 1, y: 0 }}
|
||||
className="bg-white rounded-[2.5rem] shadow-2xl max-w-lg w-full overflow-hidden border border-white/20"
|
||||
>
|
||||
{/* Header */}
|
||||
<div className="bg-slate-900 p-8 text-white relative">
|
||||
<div className="flex justify-between items-center relative z-10">
|
||||
<div>
|
||||
<span className="text-[10px] font-black uppercase tracking-[0.3em] text-blue-400">Finalización de Turno</span>
|
||||
<h2 className="text-3xl font-black tracking-tight">Cierre de Caja</h2>
|
||||
</div>
|
||||
{!done && (
|
||||
<button onClick={onClose} className="p-2 hover:bg-white/10 rounded-xl transition-colors">
|
||||
<X size={24} />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="p-8">
|
||||
<AnimatePresence mode="wait">
|
||||
{!done ? (
|
||||
<motion.div key="summary" initial={{ opacity: 0 }} animate={{ opacity: 1 }} className="space-y-6">
|
||||
|
||||
{/* Visualización de Totales del Sistema */}
|
||||
<div className="space-y-3">
|
||||
<h4 className="text-[10px] font-black text-slate-400 uppercase tracking-widest ml-1">Resumen de Valores en Caja</h4>
|
||||
<div className="grid grid-cols-1 gap-2">
|
||||
<SummaryRow label="Fondo de Apertura" value={summary.openingBalance} icon={<Banknote size={16} />} />
|
||||
<SummaryRow label="Ventas Efectivo" value={summary.cashSales} icon={<Banknote size={16} />} isSale />
|
||||
<SummaryRow label="Ventas Tarjetas" value={summary.cardSales} icon={<CreditCard size={16} />} isSale />
|
||||
<SummaryRow label="Ventas Transferencia" value={summary.transferSales} icon={<ArrowRightLeft size={16} />} isSale />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Total a Entregar */}
|
||||
<div className="bg-slate-900 p-6 rounded-[2rem] flex justify-between items-center text-white shadow-xl">
|
||||
<div>
|
||||
<span className="text-[10px] font-black uppercase text-slate-500 block mb-1">Total Final a Entregar</span>
|
||||
<span className="text-4xl font-mono font-black text-green-400">
|
||||
$ {summary.totalExpected.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
<CheckCircle2 size={40} className="text-green-500 opacity-20" />
|
||||
</div>
|
||||
|
||||
{/* Notas opcionales */}
|
||||
<div className="space-y-2">
|
||||
<label className="text-[10px] font-black text-slate-400 uppercase ml-1">Notas u Observaciones</label>
|
||||
<textarea
|
||||
value={notes}
|
||||
onChange={(e) => setNotes(e.target.value)}
|
||||
placeholder="Opcional: aclaraciones sobre el turno..."
|
||||
className="w-full p-4 bg-slate-50 border-2 border-slate-100 rounded-2xl text-sm font-bold outline-none focus:border-blue-500 transition-all resize-none h-24"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="bg-amber-50 p-4 rounded-2xl border border-amber-100 flex gap-3">
|
||||
<AlertCircle className="text-amber-500 shrink-0" size={18} />
|
||||
<p className="text-[10px] text-amber-800 font-bold leading-tight uppercase opacity-80">
|
||||
Al confirmar, declaras que el dinero físico coincide con este resumen.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleFinalClose}
|
||||
disabled={isClosing}
|
||||
className="w-full py-5 bg-blue-600 text-white font-black uppercase text-xs tracking-widest rounded-2xl shadow-xl hover:bg-blue-700 transition-all flex items-center justify-center gap-2 active:scale-95"
|
||||
>
|
||||
{isClosing ? 'Procesando...' : 'Confirmar y Cerrar Caja'}
|
||||
</button>
|
||||
</motion.div>
|
||||
) : (
|
||||
<motion.div key="done" initial={{ scale: 0.9, opacity: 0 }} animate={{ scale: 1, opacity: 1 }} className="text-center py-10">
|
||||
<div className="w-20 h-20 bg-emerald-100 text-emerald-600 rounded-full flex items-center justify-center mx-auto mb-6">
|
||||
<CheckCircle2 size={48} />
|
||||
</div>
|
||||
<h3 className="text-2xl font-black text-slate-900 uppercase mb-2">¡Caja Cerrada!</h3>
|
||||
<p className="text-slate-500 font-bold text-sm mb-8">El turno ha finalizado correctamente. Los reportes han sido enviados a tesorería.</p>
|
||||
<button
|
||||
onClick={handleDownloadPdf}
|
||||
className="w-full py-4 bg-blue-600 text-white font-black uppercase text-xs rounded-2xl hover:bg-blue-700 transition-all mb-3 flex items-center justify-center gap-2"
|
||||
>
|
||||
<Printer size={16} /> Descargar Acta de Cierre
|
||||
</button>
|
||||
<button
|
||||
onClick={() => { onComplete(); onClose(); }}
|
||||
className="w-full py-5 bg-slate-900 text-white font-black uppercase text-xs rounded-2xl hover:bg-black transition-all"
|
||||
>
|
||||
Volver al Inicio
|
||||
</button>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
interface SummaryRowProps {
|
||||
label: string;
|
||||
value: number;
|
||||
icon: React.ReactNode;
|
||||
isSale?: boolean;
|
||||
}
|
||||
|
||||
function SummaryRow({ label, value, icon, isSale }: SummaryRowProps) {
|
||||
return (
|
||||
<div className="flex justify-between items-center p-3.5 bg-slate-50 rounded-xl border border-slate-100 group hover:bg-white hover:border-blue-100 transition-all">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-slate-400 group-hover:text-blue-500 transition-colors">{icon}</div>
|
||||
<span className="text-[10px] font-black text-slate-500 uppercase tracking-tight">{label}</span>
|
||||
</div>
|
||||
<span className={clsx("font-mono font-black text-sm", isSale ? "text-slate-800" : "text-slate-400")}>
|
||||
$ {value.toLocaleString('es-AR', { minimumFractionDigits: 2 })}
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user