POS vista lista, modulo Tickets para gerencia con cancelacion auditada, y saldo a favor (recargas de anticipo desde expediente y agenda, canje en POS)

frontend/src/pages/Tickets.tsx

@@ -0,0 +1,467 @@
+import type { FC } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { Link } from 'react-router-dom';
+import { Search, Ticket, XCircle, RefreshCw, AlertTriangle, Printer, Receipt, User } from 'lucide-react';
+import Layout from '../components/Layout';
+import { Card, Button, Input, Select, Modal, TextArea, Badge, EmptyState, Skeleton, PageHeader, toast } from '../components/ui';
+import TicketPrint from '../components/TicketPrint';
+import { odooApi, type Sale } from '../services/odoo';
+import { readDateFilterPrefs, writeDateFilterPrefs, DATE_PRESETS, rangeForPreset, type DatePreset } from '../lib/dateRange';
+
+const PREF_KEY = 'skeen_tickets_filtros';
+
+const METODO_LABELS: Record<string, string> = {
+  cash: 'Efectivo', card: 'Tarjeta', transfer: 'Transferencia',
+  stripe: 'Stripe', mercadopago: 'MercadoPago', points: 'Saldo a favor',
+  mixed: 'Mixto', '': '—',
+};
+
+const money = (v: number) =>
+  '$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+const ESTADOS = [
+  { value: '', label: 'Todos los estados' },
+  { value: 'paid', label: 'Pagados' },
+  { value: 'partial', label: 'Parciales' },
+  { value: 'confirmed', label: 'Confirmados' },
+  { value: 'cancelled', label: 'Cancelados' },
+];
+
+const METODOS_FILTRO = [
+  { value: '', label: 'Todos los métodos' },
+  { value: 'cash', label: 'Efectivo' },
+  { value: 'card', label: 'Tarjeta' },
+  { value: 'transfer', label: 'Transferencia' },
+  { value: 'points', label: 'Saldo a favor' },
+  { value: 'mixed', label: 'Mixto' },
+  { value: 'stripe', label: 'Stripe' },
+  { value: 'mercadopago', label: 'MercadoPago' },
+];
+
+const PAGE_SIZE = 50;
+
+/**
+ * Tickets: encontrar un cobro del POS y cancelarlo sin navegar el módulo de
+ * Ventas. Permiso de cancelación: admin y gerencia (el API lo valida).
+ */
+const Tickets: FC = () => {
+  const prefs = readDateFilterPrefs(PREF_KEY);
+  const [preset, setPreset] = useState<DatePreset>(prefs?.preset || 'hoy');
+  const [desde, setDesde] = useState(prefs?.start || rangeForPreset('hoy').start);
+  const [hasta, setHasta] = useState(prefs?.end || rangeForPreset('hoy').end);
+  const [estado, setEstado] = useState('');
+  const [metodo, setMetodo] = useState('');
+  const [usuario, setUsuario] = useState('');
+  const [busqueda, setBusqueda] = useState('');
+  const [page, setPage] = useState(1);
+
+  const [sales, setSales] = useState<Sale[]>([]);
+  const [total, setTotal] = useState(0);
+  const [totalPages, setTotalPages] = useState(1);
+  const [loading, setLoading] = useState(true);
+  const [detalle, setDetalle] = useState<Sale | null>(null);
+  const [cancelando, setCancelando] = useState<Sale | null>(null);
+  const [motivo, setMotivo] = useState('');
+  const [enviando, setEnviando] = useState(false);
+  const [reimprimir, setReimprimir] = useState<Sale | null>(null);
+
+  const aplicarPreset = (p: DatePreset) => {
+    setPreset(p);
+    if (p !== 'custom') {
+      const r = rangeForPreset(p);
+      setDesde(r.start);
+      setHasta(r.end);
+      writeDateFilterPrefs(PREF_KEY, { preset: p, start: r.start, end: r.end });
+    }
+  };
+
+  const load = useCallback(async () => {
+    try {
+      setLoading(true);
+      const res = await odooApi.getSales({
+        date_from: desde,
+        date_to: hasta,
+        ...(estado ? { state: estado } : {}),
+        ...(metodo ? { payment_method: metodo } : {}),
+        ...(usuario ? { user: usuario } : {}),
+        ...(busqueda ? { search: busqueda } : {}),
+        page,
+        page_size: PAGE_SIZE,
+      });
+      if (res.status === 'success') {
+        setSales(res.sales || []);
+        setTotal(res.total ?? 0);
+        setTotalPages(res.total_pages ?? 1);
+      }
+    } catch {
+      toast.error('No se pudieron cargar los tickets');
+    } finally {
+      setLoading(false);
+    }
+  }, [desde, hasta, estado, metodo, usuario, busqueda, page]);
+
+  useEffect(() => {
+    const t = setTimeout(load, 250);
+    return () => clearTimeout(t);
+  }, [load]);
+
+  useEffect(() => {
+    setPage(1);
+  }, [desde, hasta, estado, metodo, usuario, busqueda]);
+
+  const totalPeriodo = useMemo(
+    () => sales.filter((s) => s.state !== 'cancelled').reduce((a, s) => a + s.total, 0),
+    [sales],
+  );
+  const canceladosPeriodo = useMemo(
+    () => sales.filter((s) => s.state === 'cancelled').length,
+    [sales],
+  );
+
+  const abrirCancelar = (s: Sale) => {
+    setCancelando(s);
+    setMotivo('');
+  };
+
+  const submitCancelar = async () => {
+    if (!cancelando) return;
+    if (!motivo.trim()) {
+      toast.error('El motivo de cancelación es obligatorio');
+      return;
+    }
+    try {
+      setEnviando(true);
+      const res = await odooApi.cancelSale(cancelando.id, { reason: motivo.trim() });
+      const r = res.result;
+      const partes = [
+        r?.points_reversed ? `${r.points_reversed} pts revertidos` : '',
+        r?.points_restored ? `${r.points_restored} pts devueltos al saldo` : '',
+        r?.stock_moves ? `${r.stock_moves} artículos devueltos a inventario` : '',
+      ].filter(Boolean);
+      toast.success(`Ticket ${cancelando.name} cancelado${partes.length ? ` · ${partes.join(' · ')}` : ''}`);
+      setCancelando(null);
+      setDetalle(res.sale);
+      await load();
+    } catch (err) {
+      const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
+      toast.error(msg || 'No se pudo cancelar el ticket');
+    } finally {
+      setEnviando(false);
+    }
+  };
+
+  return (
+    <Layout title="Tickets" subtitle="Cobros del día y cancelaciones">
+      <PageHeader title="Tickets" subtitle="Busca un cobro, revísalo y cancélalo con nota de crédito">
+        <Button variant="outline" onClick={load} loading={loading}>
+          <RefreshCw size={15} className="mr-2" /> Actualizar
+        </Button>
+      </PageHeader>
+
+      <Card className="mb-4">
+        <Card.Body className="space-y-3">
+          <div className="flex flex-wrap gap-1.5">
+            {DATE_PRESETS.map((p) => (
+              <button
+                key={p.value}
+                type="button"
+                onClick={() => aplicarPreset(p.value)}
+                className={`px-3 py-1.5 rounded-full text-xs font-medium border transition ${
+                  preset === p.value ? 'bg-theme-accent text-theme-inverse border-theme-accent' : 'bg-theme-bg text-theme-muted border-theme-border'
+                }`}
+              >
+                {p.label}
+              </button>
+            ))}
+          </div>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-5 gap-3">
+            <Input label="Desde" type="date" value={desde} onChange={(e) => { setDesde(e.target.value); setPreset('custom'); }} />
+            <Input label="Hasta" type="date" value={hasta} onChange={(e) => { setHasta(e.target.value); setPreset('custom'); }} />
+            <Select label="Estado" options={ESTADOS} value={estado} onChange={(e) => setEstado(e.target.value)} />
+            <Select label="Método de pago" options={METODOS_FILTRO} value={metodo} onChange={(e) => setMetodo(e.target.value)} />
+            <Input label="Cobró (usuario)" placeholder="ej. recepcion" value={usuario} onChange={(e) => setUsuario(e.target.value)} />
+          </div>
+          <div className="relative">
+            <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
+            <Input
+              placeholder="Buscar por folio (VENTA-…) o paciente..."
+              value={busqueda}
+              onChange={(e) => setBusqueda(e.target.value)}
+              className="pl-10"
+            />
+          </div>
+        </Card.Body>
+      </Card>
+
+      <div className="grid grid-cols-2 lg:grid-cols-4 gap-3 mb-4">
+        <Card className="p-4 bg-theme-bg border-0">
+          <p className="text-xs text-theme-muted">Tickets en el filtro</p>
+          <p className="text-xl font-heading font-semibold text-theme-heading">{total}</p>
+        </Card>
+        <Card className="p-4 bg-theme-bg border-0">
+          <p className="text-xs text-theme-muted">Importe (página)</p>
+          <p className="text-xl font-heading font-semibold text-theme-heading">{money(totalPeriodo)}</p>
+        </Card>
+        <Card className="p-4 bg-theme-bg border-0">
+          <p className="text-xs text-theme-muted">Cancelados (página)</p>
+          <p className={`text-xl font-heading font-semibold ${canceladosPeriodo > 0 ? 'text-rose-600' : 'text-theme-heading'}`}>
+            {canceladosPeriodo}
+          </p>
+        </Card>
+        <Card className="p-4 bg-theme-bg border-0">
+          <p className="text-xs text-theme-muted">Página</p>
+          <p className="text-xl font-heading font-semibold text-theme-heading">{page} / {totalPages || 1}</p>
+        </Card>
+      </div>
+
+      <Card>
+        <Card.Body>
+          {loading ? (
+            <Skeleton count={8} className="h-12 w-full" />
+          ) : sales.length === 0 ? (
+            <EmptyState
+              title="Sin tickets"
+              subtitle="No hay cobros con estos filtros. Prueba otro rango de fechas."
+              icon={<Ticket size={28} />}
+            />
+          ) : (
+            <div className="overflow-x-auto">
+              <table className="w-full text-sm">
+                <thead className="bg-theme-bg text-theme-muted text-xs uppercase">
+                  <tr>
+                    <th className="text-left px-3 py-2">Folio</th>
+                    <th className="text-left px-3 py-2">Fecha</th>
+                    <th className="text-left px-3 py-2">Paciente</th>
+                    <th className="text-right px-3 py-2">Total</th>
+                    <th className="text-left px-3 py-2 hidden md:table-cell">Método</th>
+                    <th className="text-left px-3 py-2 hidden lg:table-cell">Cobró</th>
+                    <th className="text-left px-3 py-2">Estado</th>
+                    <th className="text-right px-3 py-2">Acciones</th>
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-theme-border">
+                  {sales.map((s) => (
+                    <tr key={s.id} className="hover:bg-theme-bg">
+                      <td className="px-3 py-2 font-mono text-[12px] text-theme-heading">{s.name}</td>
+                      <td className="px-3 py-2 text-theme-muted whitespace-nowrap">{(s.date || '').slice(0, 10)}</td>
+                      <td className="px-3 py-2">
+                        <Link to={`/pacientes?q=${encodeURIComponent(s.patient || '')}`} className="text-theme-heading hover:underline">
+                          {s.patient}
+                        </Link>
+                      </td>
+                      <td className="px-3 py-2 text-right font-semibold text-theme-heading">{money(s.total)}</td>
+                      <td className="px-3 py-2 text-theme-muted hidden md:table-cell">
+                        {METODO_LABELS[s.payment_method || ''] || s.payment_method || '—'}
+                      </td>
+                      <td className="px-3 py-2 text-theme-muted hidden lg:table-cell">{s.user_login || '—'}</td>
+                      <td className="px-3 py-2">
+                        <Badge variant={s.state === 'cancelled' ? 'danger' : s.state === 'paid' ? 'success' : 'pending'}>
+                          {s.state === 'cancelled' ? 'Cancelado' : s.state === 'paid' ? 'Pagado' : s.state === 'partial' ? 'Parcial' : 'Confirmado'}
+                        </Badge>
+                      </td>
+                      <td className="px-3 py-2">
+                        <div className="flex items-center justify-end gap-1">
+                          <Button size="sm" variant="ghost" onClick={() => setDetalle(s)} title="Ver detalle del ticket">
+                            <Receipt size={14} />
+                          </Button>
+                          {s.state !== 'cancelled' && (
+                            <Button size="sm" variant="ghost" onClick={() => abrirCancelar(s)} title="Cancelar ticket (nota de crédito)">
+                              <XCircle size={14} className="text-rose-600" />
+                            </Button>
+                          )}
+                        </div>
+                      </td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+          )}
+
+          {totalPages > 1 && (
+            <div className="flex items-center justify-end gap-2 mt-4 pt-3 border-t border-theme-border">
+              <Button variant="outline" size="sm" disabled={page <= 1} onClick={() => setPage((p) => Math.max(1, p - 1))}>
+                Anterior
+              </Button>
+              <Button variant="outline" size="sm" disabled={page >= totalPages} onClick={() => setPage((p) => p + 1)}>
+                Siguiente
+              </Button>
+            </div>
+          )}
+        </Card.Body>
+      </Card>
+
+      {/* Detalle del ticket */}
+      <Modal
+        isOpen={!!detalle}
+        onClose={() => setDetalle(null)}
+        title={detalle ? `Ticket ${detalle.name}` : 'Ticket'}
+        maxWidth="lg"
+        footer={
+          <>
+            {detalle && detalle.state === 'cancelled' && (
+              <Button variant="outline" onClick={() => setReimprimir(detalle)}>
+                <Printer size={14} className="mr-1.5" /> Imprimir
+              </Button>
+            )}
+            <Button variant="outline" onClick={() => setDetalle(null)}>Cerrar</Button>
+            {detalle && detalle.state !== 'cancelled' && (
+              <Button variant="danger" onClick={() => { const d = detalle; setDetalle(null); abrirCancelar(d); }}>
+                <XCircle size={14} className="mr-1.5" /> Cancelar ticket
+              </Button>
+            )}
+          </>
+        }
+      >
+        {detalle && (
+          <div className="space-y-4">
+            <div className="grid grid-cols-2 sm:grid-cols-4 gap-3">
+              <div className="p-3 bg-theme-bg rounded-xl">
+                <p className="text-xs text-theme-muted">Paciente</p>
+                <p className="text-sm font-medium text-theme-heading">{detalle.patient}</p>
+              </div>
+              <div className="p-3 bg-theme-bg rounded-xl">
+                <p className="text-xs text-theme-muted">Total</p>
+                <p className="text-sm font-semibold text-theme-heading">{money(detalle.total)}</p>
+              </div>
+              <div className="p-3 bg-theme-bg rounded-xl">
+                <p className="text-xs text-theme-muted">Método</p>
+                <p className="text-sm text-theme-heading">{METODO_LABELS[detalle.payment_method || ''] || '—'}</p>
+              </div>
+              <div className="p-3 bg-theme-bg rounded-xl">
+                <p className="text-xs text-theme-muted">Cobró</p>
+                <p className="text-sm text-theme-heading inline-flex items-center gap-1">
+                  <User size={12} /> {detalle.user_login || '—'}
+                </p>
+              </div>
+            </div>
+
+            <div>
+              <p className="text-xs font-medium text-theme-muted uppercase mb-2">Conceptos</p>
+              <table className="w-full text-sm">
+                <tbody className="divide-y divide-theme-border">
+                  {detalle.lines.map((l) => (
+                    <tr key={l.id}>
+                      <td className="py-1.5 text-theme-heading">{l.description || l.service || l.item || '—'}</td>
+                      <td className="py-1.5 text-right text-theme-muted">{l.quantity} × {money(l.price_unit)}</td>
+                      <td className="py-1.5 text-right font-medium text-theme-heading">{money(l.subtotal)}</td>
+                    </tr>
+                  ))}
+                </tbody>
+              </table>
+            </div>
+
+            <div>
+              <p className="text-xs font-medium text-theme-muted uppercase mb-2">Pagos registrados</p>
+              {(detalle.pagos || []).length === 0 ? (
+                <p className="text-sm text-theme-muted">
+                  Sin pagos ligados a este ticket (los cobros anteriores al vínculo de pagos no se pueden asociar).
+                </p>
+              ) : (
+                <table className="w-full text-sm">
+                  <tbody className="divide-y divide-theme-border">
+                    {(detalle.pagos || []).map((p) => (
+                      <tr key={p.id}>
+                        <td className="py-1.5 font-mono text-[12px] text-theme-heading">{p.name}</td>
+                        <td className="py-1.5 text-theme-muted">{METODO_LABELS[p.payment_method] || p.payment_method}</td>
+                        <td className="py-1.5 text-theme-muted">{p.create_date || '—'}</td>
+                        <td className="py-1.5 text-right font-medium text-theme-heading">{money(p.amount)}</td>
+                      </tr>
+                    ))}
+                  </tbody>
+                </table>
+              )}
+            </div>
+
+            {detalle.state === 'cancelled' && (
+              <div className="rounded-lg bg-rose-50 border border-rose-200 px-3 py-2 text-xs text-rose-800 space-y-1">
+                <p className="font-medium">Ticket cancelado</p>
+                <p>Motivo: {detalle.cancel_reason || '—'}</p>
+                <p>Canceló: {detalle.cancelled_by || '—'} · {detalle.cancelled_at || '—'}</p>
+                <p>
+                  Puntos revertidos: {detalle.cancel_points_reversed || 0} ·
+                  Saldo devuelto al paciente: {detalle.cancel_points_restored || 0}
+                </p>
+              </div>
+            )}
+          </div>
+        )}
+      </Modal>
+
+      {/* Diálogo de cancelación (nota de crédito) */}
+      <Modal
+        isOpen={!!cancelando}
+        onClose={() => setCancelando(null)}
+        title={`Cancelar ticket ${cancelando?.name || ''}`}
+        maxWidth="sm"
+        footer={
+          <>
+            <Button variant="outline" onClick={() => setCancelando(null)}>Volver</Button>
+            <Button variant="danger" onClick={submitCancelar} loading={enviando}>Cancelar ticket</Button>
+          </>
+        }
+      >
+        {cancelando && (
+          <div className="space-y-4">
+            <div className="flex items-start gap-2">
+              <AlertTriangle size={16} className="text-amber-600 shrink-0 mt-0.5" />
+              <p className="text-sm text-theme-muted">
+                Paciente: <span className="font-medium text-theme-heading">{cancelando.patient}</span>
+                {' · '}Total: <span className="font-medium text-theme-heading">{money(cancelando.total)}</span>
+                {cancelando.user_login ? ` · Cobró: ${cancelando.user_login}` : ''}
+              </p>
+            </div>
+
+            <div className="rounded-lg bg-rose-50 border border-rose-200 px-3 py-2 text-xs text-rose-800 space-y-1.5">
+              <p className="font-medium">Se emitirá la nota de crédito:</p>
+              <p>La venta queda cancelada y deja de contar en ingresos, comisiones y reportes.</p>
+              <p>Se revierten los puntos otorgados y se devuelve al saldo a favor lo que el paciente canjeó.</p>
+              <p>Los artículos vendidos vuelven al inventario.</p>
+            </div>
+
+            <div className="rounded-lg bg-amber-50 border border-amber-200 px-3 py-2 text-xs text-amber-900 space-y-1.5">
+              <p className="font-medium">Importante: el pago NO se revierte automáticamente</p>
+              <p>
+                El cobro queda registrado en caja y en el historial de pagos del paciente
+                ({(cancelando.pagos || []).length > 0
+                  ? `${(cancelando.pagos || []).length} pago(s) por ${money((cancelando.pagos || []).reduce((a, p) => a + p.amount, 0))}`
+                  : 'sin pagos ligados a este ticket'}).
+              </p>
+              <p>Si corresponde devolver el dinero, hay que ajustar la caja por separado.</p>
+            </div>
+
+            <TextArea
+              label="Motivo de cancelación *"
+              placeholder="Ej. recepción cobró el servicio equivocado, cobro duplicado..."
+              value={motivo}
+              onChange={(e) => setMotivo(e.target.value)}
+            />
+          </div>
+        )}
+      </Modal>
+
+      <TicketPrint
+        isOpen={!!reimprimir}
+        onClose={() => setReimprimir(null)}
+        ticket={reimprimir && {
+          folio: reimprimir.name,
+          fecha: reimprimir.date,
+          paciente: reimprimir.patient,
+          lines: reimprimir.lines.map((l) => ({
+            name: l.service || l.item || l.description,
+            qty: l.quantity,
+            price: l.price_unit,
+            subtotal: l.subtotal,
+          })),
+          subtotal: reimprimir.subtotal,
+          discount: reimprimir.discount,
+          total: reimprimir.total,
+          amount_paid: reimprimir.amount_paid,
+          amount_due: reimprimir.amount_due,
+        }}
+      />
+    </Layout>
+  );
+};
+
+export default Tickets;