POS: boton Cobrar desde cita (precarga paciente/servicio/doctor) y ticket termico imprimible con reimpresion en Ventas

frontend/src/components/TicketPrint.tsx

@@ -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;

frontend/src/index.css

@@ -267,4 +267,14 @@ p {
     left: 0;
     width: 100%;
   }
+  /* Ticket térmico ~80mm, monoespaciado */
+  .print-ticket {
+    width: 76mm;
+    max-width: 76mm;
+    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
+    font-size: 11px;
+    border: none;
+    border-radius: 0;
+    padding: 0;
+  }
 }

frontend/src/pages/Agenda.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useEffect, useState, useCallback, useRef } from 'react';
-import { Clock, CheckCircle, XCircle, CheckCheck, UserCheck, UserX, Plus, PackageCheck, Sparkles, RotateCcw, LayoutGrid, List, Rows3, CalendarRange, CalendarClock, ChevronLeft, ChevronRight, Ban, Trash2, Phone, Cake } from 'lucide-react';
+import { Clock, CheckCircle, XCircle, CheckCheck, UserCheck, UserX, Plus, PackageCheck, Sparkles, RotateCcw, LayoutGrid, List, Rows3, CalendarRange, CalendarClock, ChevronLeft, ChevronRight, Ban, Trash2, Phone, Cake, CreditCard } from 'lucide-react';
 import Layout from '../components/Layout';
 import { usePatientDrawer } from '../components/PatientDrawer';
 import {
@@ -18,7 +18,7 @@ import {
   toast,
   badgeForAppointmentState,
 } from '../components/ui';
-import { useSearchParams } from 'react-router-dom';
+import { useSearchParams, useNavigate } from 'react-router-dom';
 import { odooApi, type Appointment, type Patient, type Service, type Doctor, type Bloqueo } from '../services/odoo';
 import { useAuth } from '../lib/auth';
 
@@ -44,6 +44,7 @@ const QUARTER_TIME_OPTIONS = (() => {
 
 const Agenda: FC = () => {
   const [searchParams] = useSearchParams();
+  const navigate = useNavigate();
   const { user } = useAuth();
   const { openPatient } = usePatientDrawer();
   // Rol médico: agenda restringida a su propio hr.employee (filtro también en servidor)
@@ -2032,6 +2033,25 @@ const Agenda: FC = () => {
               <Button size="sm" variant="outline" onClick={() => setEditMode(true)}>
                 <CalendarClock size={16} className="mr-1.5" /> Reagendar
               </Button>
+              {/* Cobrar a la cita: abre el POS con paciente/servicio/médico precargados.
+                  Solo en estados cobrables (oculto en cancelada/no show). */}
+              {!['cancelled', 'no_show'].includes(detailApt.state) && (
+                <Button
+                  size="sm"
+                  variant="outline"
+                  onClick={() => {
+                    const params = new URLSearchParams({
+                      patient_id: String(detailApt.patient_id),
+                      service_id: String(detailApt.service_id),
+                      appointment_id: String(detailApt.id),
+                    });
+                    if (detailApt.doctor_id) params.set('doctor_id', String(detailApt.doctor_id));
+                    navigate(`/pos?${params.toString()}`);
+                  }}
+                >
+                  <CreditCard size={16} className="mr-1.5" /> Cobrar
+                </Button>
+              )}
             </div>
           </div>
         )}

frontend/src/pages/Pos.tsx

@@ -1,11 +1,12 @@
 import type { FC } from 'react';
 import { useEffect, useState, useCallback, useMemo } from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useSearchParams } from 'react-router-dom';
 import {
-  Search, Plus, Minus, X, Store, AlertTriangle, ShoppingBag, Star, Printer, Wallet, Trash2, Package,
+  Search, Plus, Minus, X, Store, AlertTriangle, ShoppingBag, Star, Wallet, Trash2, Package,
 } from 'lucide-react';
 import Layout from '../components/Layout';
 import { usePatientDrawer } from '../components/PatientDrawer';
+import TicketPrint from '../components/TicketPrint';
 import {
   Card,
   Button,
@@ -46,6 +47,7 @@ interface TicketLine {
 
 const Pos: FC = () => {
   const { openPatient } = usePatientDrawer();
+  const [searchParams] = useSearchParams();
   // Catálogo
   const [catMode, setCatMode] = useState<'servicios' | 'articulos'>('servicios');
   const [services, setServices] = useState<Service[]>([]);
@@ -138,6 +140,44 @@ const Pos: FC = () => {
       .catch(() => {});
   }, []);
 
+  // Pre-carga "Cobrar a la cita" desde Agenda:
+  // /pos?patient_id=X&service_id=Y&doctor_id=Z&appointment_id=N
+  useEffect(() => {
+    const pid = searchParams.get('patient_id');
+    if (!pid) return;
+    const sid = searchParams.get('service_id');
+    const did = searchParams.get('doctor_id');
+    (async () => {
+      try {
+        const res = await odooApi.getPatient(parseInt(pid, 10));
+        if (res.status === 'success') selectPaciente(res.patient);
+      } catch {
+        toast.error('No se pudo cargar el paciente de la cita');
+      }
+      if (did) setDoctorId(did);
+      if (sid) {
+        try {
+          const sRes = await odooApi.getServices({ page_size: 200 });
+          const svc = (sRes.services || []).find((s) => s.id === parseInt(sid, 10));
+          if (svc) {
+            setLines((prev) => {
+              const key = `s-${svc.id}`;
+              if (prev.some((l) => l.key === key)) return prev;
+              return [...prev, { key, name: svc.name, qty: 1, price: svc.price, service_id: svc.id }];
+            });
+          } else {
+            toast.error('El servicio de la cita no está activo en el catálogo');
+          }
+        } catch {
+          toast.error('No se pudo cargar el servicio de la cita');
+        }
+      }
+      toast.success('Cita precargada en el ticket');
+    })();
+    // Solo al montar: los query params son la fuente inicial
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   // Tipo de cambio USD/MXN: al montar y refresco cada 5 min
   useEffect(() => {
     const fetchTc = () => {
@@ -797,75 +837,34 @@ const Pos: FC = () => {
         </div>
       </Modal>
 
-      {/* Ticket de éxito */}
+      {/* Ticket de éxito: se ofrece automáticamente tras el cobro (imprimible ~80mm) */}
-      <Modal
+      <TicketPrint
         isOpen={!!resultado}
         onClose={nuevaVenta}
-        title="Venta cobrada"
+        footerExtra={<Button variant="outline" onClick={nuevaVenta}>Nueva venta</Button>}
-        maxWidth="md"
+        ticket={resultado && {
-        footer={
+          folio: resultado.sale.name,
-          <>
+          fecha: `${resultado.sale.date} ${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}`,
-            <Button variant="outline" onClick={() => window.print()}>
+          paciente: resultado.sale.patient,
-              <Printer size={16} className="mr-2" /> Imprimir
+          lines: resultado.sale.lines.map((l) => ({
-            </Button>
+            name: l.service || l.item || l.description,
-            <Button onClick={nuevaVenta}>Nueva venta</Button>
+            qty: l.quantity,
-          </>
+            price: l.price_unit,
-        }
+            subtotal: l.subtotal,
-      >
+          })),
-        {resultado && (
+          subtotal: resultado.sale.subtotal,
-          <div className="print-ticket text-sm">
+          discount: resultado.sale.discount,
-            <div className="text-center border-b border-dashed border-theme-border pb-3 mb-3">
+          total: resultado.sale.total,
-              <p className="font-heading font-bold text-theme-heading">SKEEN Derma Experts</p>
+          metodo: resultado.payment ? metodoLabel(resultado.payment.payment_method) : 'Puntos',
-              <p className="text-xs text-theme-muted">Playas de Rosarito, B.C.</p>
+          puntos_usados: resultado.puntos_usados,
-            </div>
+          puntos_ganados: resultado.puntos_ganados,
-            <div className="flex justify-between text-xs text-theme-muted mb-2">
+          wallet_points: resultado.wallet_points,
-              <span>{resultado.sale.name}</span>
+          cambio: resultado.cambio,
-              <span>{resultado.sale.date}</span>
+          cambio_usd: resultado.cambio_usd,
-            </div>
+          recibido_usd: resultado.recibido_usd,
-            <p className="text-sm mb-3"><span className="text-theme-muted">Paciente: </span><span className="font-medium text-theme-heading">{resultado.sale.patient}</span></p>
+          rate_used: resultado.rate_used,
-            <table className="w-full text-sm mb-3">
+        }}
-              <tbody>
+      />
-                {resultado.sale.lines.map((l) => (
-                  <tr key={l.id}>
-                    <td className="py-1 text-theme-heading">{l.quantity} × {l.service || l.item || l.description}</td>
-                    <td className="py-1 text-right text-theme-heading">{fmtMoney(l.subtotal)}</td>
-                  </tr>
-                ))}
-              </tbody>
-            </table>
-            <div className="border-t border-dashed border-theme-border pt-2 space-y-1 text-sm">
-              <div className="flex justify-between"><span className="text-theme-muted">Subtotal</span><span>{fmtMoney(resultado.sale.subtotal)}</span></div>
-              {resultado.sale.discount > 0 && (
-                <div className="flex justify-between"><span className="text-theme-muted">Descuento</span><span>-{fmtMoney(resultado.sale.discount)}</span></div>
-              )}
-              {resultado.puntos_usados > 0 && (
-                <div className="flex justify-between"><span className="text-theme-muted">Puntos canjeados</span><span>-{resultado.puntos_usados} pts</span></div>
-              )}
-              <div className="flex justify-between font-bold text-theme-heading"><span>Total</span><span>{fmtMoney(resultado.sale.total)}</span></div>
-              <div className="flex justify-between"><span className="text-theme-muted">Método</span><span>{resultado.payment ? metodoLabel(resultado.payment.payment_method) : 'Puntos'}</span></div>
-              {resultado.recibido_usd && resultado.recibido_usd > 0 && resultado.rate_used && (
-                <div className="flex justify-between"><span className="text-theme-muted">Recibido USD</span><span>{fmtUsd(resultado.recibido_usd)} (TC {resultado.rate_used.toFixed(2)})</span></div>
-              )}
-              {resultado.cambio > 0 && (
-                <div className="flex justify-between">
-                  <span className="text-theme-muted">Cambio</span>
-                  <span>
-                    {fmtMoney(resultado.cambio)}
-                    {resultado.cambio_usd && resultado.cambio_usd > 0 && (
-                      <span className="text-theme-muted"> · {fmtUsd(resultado.cambio_usd)}</span>
-                    )}
-                  </span>
-                </div>
-              )}
-              {resultado.puntos_ganados > 0 && (
-                <div className="flex justify-between"><span className="text-theme-muted">Puntos ganados</span><span>+{resultado.puntos_ganados} pts</span></div>
-              )}
-              <div className="flex justify-between"><span className="text-theme-muted">Saldo monedero</span><span>{resultado.wallet_points} pts</span></div>
-            </div>
-            <p className="text-center text-xs text-theme-muted mt-4">¡Gracias por su visita!</p>
-          </div>
-        )}
-      </Modal>
     </Layout>
   );
 };

frontend/src/pages/Ventas.tsx

@@ -1,8 +1,9 @@
 import type { FC } from 'react';
 import { useEffect, useState, useCallback } from 'react';
-import { Plus, Trash2, CreditCard, ShoppingCart, Search, Undo2, Download } from 'lucide-react';
+import { Plus, Trash2, CreditCard, ShoppingCart, Search, Undo2, Download, Printer } from 'lucide-react';
 import Layout from '../components/Layout';
 import { usePatientDrawer } from '../components/PatientDrawer';
+import TicketPrint from '../components/TicketPrint';
 import {
   Card,
   Button,
@@ -59,6 +60,8 @@ const Ventas: FC = () => {
   const [refunding, setRefunding] = useState(false);
   const [refundAmount, setRefundAmount] = useState('');
   const [refundReason, setRefundReason] = useState('');
+  // Reimprimir ticket de una venta ya registrada
+  const [printSale, setPrintSale] = useState<Sale | null>(null);
   const [search, setSearch] = useState('');
   const [page, setPage] = useState(1);
   const [pageSize, setPageSize] = useState(50);
@@ -378,6 +381,9 @@ const Ventas: FC = () => {
                         </td>
                         <td className="p-3">
                           <div className="flex items-center gap-1">
+                            <Button variant="ghost" size="sm" onClick={() => setPrintSale(s)} title="Reimprimir ticket">
+                              <Printer size={16} className="text-theme-heading" />
+                            </Button>
                             {s.amount_due > 0 && (
                               <Button variant="ghost" size="sm" onClick={() => openPay(s)} title="Pagar">
                                 <CreditCard size={16} className="text-theme-heading mr-1.5" />
@@ -428,6 +434,9 @@ const Ventas: FC = () => {
                     ]}
                     actions={
                       <div className="flex items-center gap-1">
+                        <Button variant="ghost" size="sm" onClick={() => setPrintSale(s)} title="Reimprimir ticket">
+                          <Printer size={16} className="text-theme-heading" />
+                        </Button>
                         {s.amount_due > 0 && (
                           <Button variant="ghost" size="sm" onClick={() => openPay(s)}>
                             <CreditCard size={16} className="text-theme-heading" />
@@ -665,6 +674,28 @@ const Ventas: FC = () => {
           </div>
         )}
       </Modal>
+
+      {/* Reimprimir ticket de la venta (formato térmico ~80mm) */}
+      <TicketPrint
+        isOpen={!!printSale}
+        onClose={() => setPrintSale(null)}
+        ticket={printSale && {
+          folio: printSale.name,
+          fecha: printSale.date,
+          paciente: printSale.patient,
+          lines: printSale.lines.map((l) => ({
+            name: l.service || l.item || l.description,
+            qty: l.quantity,
+            price: l.price_unit,
+            subtotal: l.subtotal,
+          })),
+          subtotal: printSale.subtotal,
+          discount: printSale.discount,
+          total: printSale.total,
+          amount_paid: printSale.amount_paid,
+          amount_due: printSale.amount_due,
+        }}
+      />
     </Layout>
   );
 };