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

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>
   );
 };