POS: boton Cobrar desde cita (precarga paciente/servicio/doctor) y ticket termico imprimible con reimpresion en Ventas
This commit is contained in:
164
frontend/src/components/TicketPrint.tsx
Normal file
164
frontend/src/components/TicketPrint.tsx
Normal file
@@ -0,0 +1,164 @@
|
||||
import type { FC, ReactNode } from 'react';
|
||||
import { Printer } from 'lucide-react';
|
||||
import { Button, Modal } from './ui';
|
||||
|
||||
// Ticket térmico (~80mm) imprimible, reutilizado por:
|
||||
// - POS: se ofrece automáticamente tras un cobro exitoso (modal de éxito)
|
||||
// - Ventas: botón "Reimprimir ticket" por venta
|
||||
// Sigue el patrón de impresión existente (RecetaPrint / EstadoCuentaPrint):
|
||||
// contenido en un div.print-ticket + window.print(); el CSS de @media print
|
||||
// en index.css oculta el resto de la página.
|
||||
|
||||
export interface TicketLinePrint {
|
||||
name: string;
|
||||
qty: number;
|
||||
price: number;
|
||||
subtotal: number;
|
||||
}
|
||||
|
||||
export interface TicketPrintData {
|
||||
folio: string;
|
||||
fecha: string;
|
||||
paciente: string;
|
||||
lines: TicketLinePrint[];
|
||||
subtotal: number;
|
||||
discount: number;
|
||||
total: number;
|
||||
metodo?: string | null;
|
||||
puntos_usados?: number;
|
||||
puntos_ganados?: number;
|
||||
wallet_points?: number | null;
|
||||
cambio?: number;
|
||||
cambio_usd?: number;
|
||||
recibido_usd?: number;
|
||||
rate_used?: number | null;
|
||||
// Reimpresión desde Ventas (no hay método/puntos en el detalle de venta)
|
||||
amount_paid?: number;
|
||||
amount_due?: number;
|
||||
}
|
||||
|
||||
interface ClinicSettings {
|
||||
name: string;
|
||||
phone: string;
|
||||
address: string;
|
||||
}
|
||||
|
||||
// Misma fuente de config que EstadoCuentaPrint (ajustes guardados en el navegador)
|
||||
const clinicSettings = (): ClinicSettings => {
|
||||
try {
|
||||
const saved = localStorage.getItem('skeen_clinic_settings');
|
||||
if (saved) return JSON.parse(saved);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
return { name: 'SKEEN Derma Experts', phone: '', address: 'Playas de Rosarito, B.C.' };
|
||||
};
|
||||
|
||||
const fmtMoney = (n: number) =>
|
||||
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 2 });
|
||||
|
||||
const fmtUsd = (n: number) =>
|
||||
`$${(n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} USD`;
|
||||
|
||||
interface TicketPrintProps {
|
||||
isOpen: boolean;
|
||||
onClose: () => void;
|
||||
ticket: TicketPrintData | null;
|
||||
// Acciones extra en el pie (ej. "Nueva venta" en el POS)
|
||||
footerExtra?: ReactNode;
|
||||
}
|
||||
|
||||
export const TicketPrint: FC<TicketPrintProps> = ({ isOpen, onClose, ticket, footerExtra }) => {
|
||||
if (!ticket) return null;
|
||||
const clinic = clinicSettings();
|
||||
return (
|
||||
<Modal
|
||||
isOpen={isOpen}
|
||||
onClose={onClose}
|
||||
title={`Ticket ${ticket.folio}`}
|
||||
maxWidth="sm"
|
||||
footer={
|
||||
<>
|
||||
<Button variant="outline" onClick={onClose}>Cerrar</Button>
|
||||
{footerExtra}
|
||||
<Button onClick={() => window.print()}>
|
||||
<Printer size={16} className="mr-2" /> Imprimir ticket
|
||||
</Button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div
|
||||
className="print-ticket mx-auto bg-white text-[#222] p-4 rounded-xl border border-theme-border font-mono text-[12px] leading-snug"
|
||||
style={{ maxWidth: '300px' }}
|
||||
>
|
||||
{/* Encabezado de la clínica */}
|
||||
<div className="text-center border-b border-dashed border-neutral-300 pb-2 mb-2">
|
||||
<p className="font-bold text-sm">{clinic.name}</p>
|
||||
{clinic.address && <p className="text-[11px]">{clinic.address}</p>}
|
||||
{clinic.phone && <p className="text-[11px]">Tel. {clinic.phone}</p>}
|
||||
</div>
|
||||
<div className="flex justify-between text-[11px] mb-1">
|
||||
<span>{ticket.folio}</span>
|
||||
<span>{ticket.fecha}</span>
|
||||
</div>
|
||||
<p className="mb-2">Paciente: {ticket.paciente}</p>
|
||||
|
||||
{/* Líneas del ticket */}
|
||||
<table className="w-full mb-2">
|
||||
<tbody>
|
||||
{ticket.lines.map((l, i) => (
|
||||
<tr key={i}>
|
||||
<td className="py-0.5 align-top">{l.qty} × {l.name}</td>
|
||||
<td className="py-0.5 text-right align-top whitespace-nowrap">{fmtMoney(l.subtotal)}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div className="border-t border-dashed border-neutral-300 pt-1.5 space-y-0.5">
|
||||
<div className="flex justify-between"><span>Subtotal</span><span>{fmtMoney(ticket.subtotal)}</span></div>
|
||||
{ticket.discount > 0 && (
|
||||
<div className="flex justify-between"><span>Descuento</span><span>-{fmtMoney(ticket.discount)}</span></div>
|
||||
)}
|
||||
{(ticket.puntos_usados ?? 0) > 0 && (
|
||||
<div className="flex justify-between"><span>Puntos canjeados</span><span>-{ticket.puntos_usados} pts</span></div>
|
||||
)}
|
||||
<div className="flex justify-between font-bold text-sm"><span>Total</span><span>{fmtMoney(ticket.total)}</span></div>
|
||||
{ticket.rate_used ? (
|
||||
<div className="flex justify-between text-[11px]"><span>Equiv. USD (TC {ticket.rate_used.toFixed(2)})</span><span>{fmtUsd(ticket.total / ticket.rate_used)}</span></div>
|
||||
) : null}
|
||||
{ticket.metodo && (
|
||||
<div className="flex justify-between"><span>Método</span><span>{ticket.metodo}</span></div>
|
||||
)}
|
||||
{(ticket.recibido_usd ?? 0) > 0 && ticket.rate_used ? (
|
||||
<div className="flex justify-between"><span>Recibido USD</span><span>{fmtUsd(ticket.recibido_usd!)}</span></div>
|
||||
) : null}
|
||||
{(ticket.cambio ?? 0) > 0 && (
|
||||
<div className="flex justify-between">
|
||||
<span>Cambio</span>
|
||||
<span>
|
||||
{fmtMoney(ticket.cambio!)}
|
||||
{(ticket.cambio_usd ?? 0) > 0 && ` · ${fmtUsd(ticket.cambio_usd!)}`}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
{(ticket.amount_paid ?? 0) > 0 && (
|
||||
<div className="flex justify-between"><span>Pagado</span><span>{fmtMoney(ticket.amount_paid!)}</span></div>
|
||||
)}
|
||||
{(ticket.amount_due ?? 0) > 0 && (
|
||||
<div className="flex justify-between font-bold"><span>Saldo pendiente</span><span>{fmtMoney(ticket.amount_due!)}</span></div>
|
||||
)}
|
||||
{(ticket.puntos_ganados ?? 0) > 0 && (
|
||||
<div className="flex justify-between"><span>Puntos ganados</span><span>+{ticket.puntos_ganados} pts</span></div>
|
||||
)}
|
||||
{ticket.wallet_points !== null && ticket.wallet_points !== undefined && (
|
||||
<div className="flex justify-between"><span>Saldo monedero</span><span>{ticket.wallet_points} pts</span></div>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-center text-[11px] mt-3">¡Gracias por su visita!</p>
|
||||
</div>
|
||||
</Modal>
|
||||
);
|
||||
};
|
||||
|
||||
export default TicketPrint;
|
||||
Reference in New Issue
Block a user