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

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 */}
-      <Modal
+      {/* Ticket de éxito: se ofrece automáticamente tras el cobro (imprimible ~80mm) */}
+      <TicketPrint
         isOpen={!!resultado}
         onClose={nuevaVenta}
-        title="Venta cobrada"
-        maxWidth="md"
-        footer={
-          <>
-            <Button variant="outline" onClick={() => window.print()}>
-              <Printer size={16} className="mr-2" /> Imprimir
-            </Button>
-            <Button onClick={nuevaVenta}>Nueva venta</Button>
-          </>
-        }
-      >
-        {resultado && (
-          <div className="print-ticket text-sm">
-            <div className="text-center border-b border-dashed border-theme-border pb-3 mb-3">
-              <p className="font-heading font-bold text-theme-heading">SKEEN Derma Experts</p>
-              <p className="text-xs text-theme-muted">Playas de Rosarito, B.C.</p>
-            </div>
-            <div className="flex justify-between text-xs text-theme-muted mb-2">
-              <span>{resultado.sale.name}</span>
-              <span>{resultado.sale.date}</span>
-            </div>
-            <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>
-            <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>
+        footerExtra={<Button variant="outline" onClick={nuevaVenta}>Nueva venta</Button>}
+        ticket={resultado && {
+          folio: resultado.sale.name,
+          fecha: `${resultado.sale.date} ${new Date().toLocaleTimeString('es-MX', { hour: '2-digit', minute: '2-digit' })}`,
+          paciente: resultado.sale.patient,
+          lines: resultado.sale.lines.map((l) => ({
+            name: l.service || l.item || l.description,
+            qty: l.quantity,
+            price: l.price_unit,
+            subtotal: l.subtotal,
+          })),
+          subtotal: resultado.sale.subtotal,
+          discount: resultado.sale.discount,
+          total: resultado.sale.total,
+          metodo: resultado.payment ? metodoLabel(resultado.payment.payment_method) : 'Puntos',
+          puntos_usados: resultado.puntos_usados,
+          puntos_ganados: resultado.puntos_ganados,
+          wallet_points: resultado.wallet_points,
+          cambio: resultado.cambio,
+          cambio_usd: resultado.cambio_usd,
+          recibido_usd: resultado.recibido_usd,
+          rate_used: resultado.rate_used,
+        }}
+      />
     </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>
   );
 };