reporte concentrado estilo legacy: tabla detalle ventas x metodo x moneda + legacy_id en cita/venta + metodo saldo_favor + fix moneda USD en pagos del POS

frontend/src/components/reportes/ConcentradoReport.tsx

@@ -1,94 +1,225 @@
-import type { FC } from 'react';
-import { useEffect, useState, useCallback } from 'react';
-import { LayoutGrid } from 'lucide-react';
-import { Card, Input, Badge, Skeleton, toast } from '../ui';
+import type { FC, ReactNode } from 'react';
+import { useEffect, useMemo, useRef, useState, useCallback } from 'react';
+import { Printer, Search, Stethoscope, Tag, ClipboardList } from 'lucide-react';
+import { Card, Button, EmptyState, Skeleton, toast } from '../ui';
 import { ExportButton } from '../ui/ExportButton';
 import { exportToExcel } from '../../lib/exporter';
-import { odooApi, type ConcentradoReport as ConcentradoData } from '../../services/odoo';
-import type { BadgeVariant } from '../ui/Badge';
+import { odooApi, type ConcentradoDetalleReport, type Doctor, type Service } from '../../services/odoo';
 import { useReportRange } from '../../lib/reportRange';
+import { cn } from '../../lib/utils';
 
 const formatCurrency = (value: number) =>
-  new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 0 }).format(value);
+  new Intl.NumberFormat('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 2 }).format(value);
 
-const citaStateLabels: Record<string, string> = {
-  pending: 'Pendiente', confirmed: 'Confirmada', arrived: 'Llegó',
-  in_progress: 'En curso', done: 'Completada', cancelled: 'Cancelada', no_show: 'No show',
-};
-const visitaStateLabels: Record<string, string> = {
-  en_curso: 'En curso', completada: 'Completada', cancelada: 'Cancelada',
-};
-const metodoLabels: Record<string, string> = {
-  cash: 'Efectivo', card: 'Tarjeta', transfer: 'Transferencia',
-  stripe: 'Stripe', mercadopago: 'MercadoPago',
-};
-const stateBadge = (state: string): BadgeVariant =>
-  state === 'done' || state === 'completada' ? 'success'
-    : state === 'cancelled' || state === 'no_show' || state === 'cancelada' ? 'danger'
-    : state === 'pending' || state === 'en_curso' ? 'warning' : 'info';
+const fmtMoney = (v: number) =>
+  `$${(v || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })}`;
 
+// Desglose legacy: 5 métodos de pago x 2 monedas
+const METODOS = [
+  { key: 'efectivo', label: 'Efectivo' },
+  { key: 'tarjeta', label: 'Tarjeta' },
+  { key: 'transferencia', label: 'Transferencia' },
+  { key: 'saldo_favor', label: 'Saldo a favor' },
+  { key: 'monedero', label: 'Monedero' },
+] as const;
 
-const Kpi: FC<{ label: string; value: React.ReactNode; rose?: boolean }> = ({ label, value, rose }) => (
-  <Card className="p-4 bg-theme-bg border-0">
-    <p className="text-xs text-theme-muted">{label}</p>
-    <p className={`text-xl font-heading font-semibold ${rose ? 'text-rose-600' : 'text-theme-heading'}`}>{value}</p>
-  </Card>
-);
+const MONEY_COLUMNS = METODOS.flatMap((m) => [
+  { key: `${m.key}_usd`, header: `${m.label} USD` },
+  { key: `${m.key}_mxn`, header: `${m.label} M.N.` },
+]);
+
+const CATEGORIAS = [
+  { value: 'consulta', label: 'Consulta' },
+  { value: 'tratamiento', label: 'Tratamiento' },
+  { value: 'procedimiento', label: 'Procedimiento' },
+  { value: 'paquete', label: 'Paquete' },
+];
+
+// ---------------------------------------------------------------
+// Multiselect compacto (mismo lenguaje visual que los Select):
+// botón con el conteo + panel con buscador y checkboxes.
+// ---------------------------------------------------------------
+interface MultiSelectProps {
+  label: string;
+  icon?: ReactNode;
+  options: { value: string; label: string }[];
+  selected: string[];
+  onChange: (values: string[]) => void;
+  searchable?: boolean;
+}
+
+const MultiSelect: FC<MultiSelectProps> = ({ label, icon, options, selected, onChange, searchable }) => {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState('');
+  const ref = useRef<HTMLDivElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    const onClick = (e: MouseEvent) => {
+      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
+    };
+    document.addEventListener('mousedown', onClick);
+    return () => document.removeEventListener('mousedown', onClick);
+  }, [open]);
+
+  const visibles = query
+    ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase()))
+    : options;
+
+  const toggle = (value: string) => {
+    onChange(selected.includes(value) ? selected.filter((v) => v !== value) : [...selected, value]);
+  };
+
+  return (
+    <div ref={ref} className="relative">
+      <button
+        type="button"
+        onClick={() => setOpen((o) => !o)}
+        className={cn(
+          'w-full rounded-xl border bg-theme-surface px-3 py-2 text-left text-sm transition appearance-none',
+          'focus:outline-none focus:ring-2 focus:ring-theme-accent/30 focus:border-theme-accent',
+          selected.length > 0 ? 'border-theme-accent text-theme-heading' : 'border-theme-border-strong text-theme-heading'
+        )}
+      >
+        <span className="flex items-center gap-1.5">
+          {icon}
+          <span className="truncate">
+            {label}
+            {selected.length > 0 && <span className="text-theme-muted"> ({selected.length})</span>}
+          </span>
+        </span>
+      </button>
+      {open && (
+        <div className="absolute z-30 mt-1 w-64 max-w-[80vw] rounded-xl border border-theme-border bg-theme-surface shadow-lg p-2">
+          {searchable && (
+            <div className="relative mb-1.5">
+              <Search size={13} className="absolute left-2.5 top-1/2 -translate-y-1/2 text-theme-muted" />
+              <input
+                autoFocus
+                value={query}
+                onChange={(e) => setQuery(e.target.value)}
+                placeholder="Buscar..."
+                className="w-full rounded-lg border border-theme-border-strong bg-theme-bg pl-7 pr-2 py-1.5 text-xs text-theme-heading focus:outline-none focus:border-theme-accent"
+              />
+            </div>
+          )}
+          <div className="max-h-56 overflow-auto">
+            {visibles.length === 0 && <p className="px-2 py-1.5 text-xs text-theme-muted">Sin opciones</p>}
+            {visibles.map((o) => (
+              <label key={o.value} className="flex items-center gap-2 px-2 py-1.5 rounded-lg hover:bg-theme-bg cursor-pointer text-sm text-theme-heading">
+                <input
+                  type="checkbox"
+                  checked={selected.includes(o.value)}
+                  onChange={() => toggle(o.value)}
+                  className="rounded border-theme-border-strong accent-[var(--accent)]"
+                />
+                <span className="truncate">{o.label}</span>
+              </label>
+            ))}
+          </div>
+          {selected.length > 0 && (
+            <button
+              type="button"
+              onClick={() => onChange([])}
+              className="mt-1 w-full text-center text-xs text-theme-muted hover:text-theme-heading py-1"
+            >
+              Limpiar selección
+            </button>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};
 
 const ConcentradoReport: FC = () => {
-  // Rango global de Reportes; los campos Inicio/Fin fijan uno propio
-  const { start, end, setStart, setEnd } = useReportRange('concentrado');
-  const [data, setData] = useState<ConcentradoData | null>(null);
+  // Rango global de Reportes (sin selector propio de fechas)
+  const { start, end } = useReportRange('concentrado');
+  const [data, setData] = useState<ConcentradoDetalleReport | null>(null);
   const [loading, setLoading] = useState(true);
 
+  // Catálogos para los filtros
+  const [doctors, setDoctors] = useState<Doctor[]>([]);
+  const [services, setServices] = useState<Service[]>([]);
+
+  // Filtros
+  const [selDoctores, setSelDoctores] = useState<string[]>([]);
+  const [selCategorias, setSelCategorias] = useState<string[]>([]);
+  const [selServicios, setSelServicios] = useState<string[]>([]);
+  const [vip, setVip] = useState(false);
+
+  useEffect(() => {
+    let alive = true;
+    Promise.all([odooApi.getDoctors(), odooApi.getServices({ page_size: 200 })])
+      .then(([d, s]) => {
+        if (!alive) return;
+        setDoctors(d.doctors || []);
+        setServices(s.services || []);
+      })
+      .catch((err) => console.error('Error al cargar filtros', err));
+    return () => { alive = false; };
+  }, []);
+
+  // Al cambiar las categorías, los servicios seleccionados que ya no aplican se sueltan
+  const serviciosFiltrados = useMemo(
+    () => (selCategorias.length ? services.filter((s) => selCategorias.includes(s.category)) : services),
+    [services, selCategorias]
+  );
+  useEffect(() => {
+    setSelServicios((prev) => prev.filter((id) => serviciosFiltrados.some((s) => String(s.id) === id)));
+  }, [serviciosFiltrados]);
+
   const load = useCallback(async () => {
     try {
       setLoading(true);
-      const res = await odooApi.getConcentrado(start, end);
-      if (res.status === 'success') {
-        const { citas, ventas, pagos, devoluciones, pacientes_nuevos, visitas, start: s, end: e } = res;
-        setData({ citas, ventas, pagos, devoluciones, pacientes_nuevos, visitas, start: s, end: e });
-      }
+      const res = await odooApi.getConcentradoDetalle({
+        start,
+        end,
+        doctor_ids: selDoctores.join(',') || undefined,
+        categoria_ids: selCategorias.join(',') || undefined,
+        servicio_ids: selServicios.join(',') || undefined,
+        vip: vip || undefined,
+      });
+      if (res.status === 'success') setData(res);
     } catch (err) {
       toast.error('Error al cargar concentrado');
       console.error(err);
     } finally {
       setLoading(false);
     }
-  }, [start, end]);
+  }, [start, end, selDoctores, selCategorias, selServicios, vip]);
 
   useEffect(() => { load(); }, [load]);
 
+  const rows = data?.rows ?? [];
+  const totals = data?.totals ?? {};
+
   const [exporting, setExporting] = useState(false);
   const exportar = async () => {
     if (!data) return;
     try {
       setExporting(true);
-      const rows: Record<string, unknown>[] = [
-        { seccion: 'Citas', concepto: 'Total', cantidad: data.citas.total, monto: null },
-        ...Object.entries(data.citas.by_state).map(([k, v]) => ({ seccion: 'Citas', concepto: citaStateLabels[k] || k, cantidad: v, monto: null })),
-        { seccion: 'Visitas', concepto: 'Total', cantidad: data.visitas.total, monto: null },
-        ...Object.entries(data.visitas.by_state).map(([k, v]) => ({ seccion: 'Visitas', concepto: visitaStateLabels[k] || k, cantidad: v, monto: null })),
-        { seccion: 'Ventas', concepto: 'Cantidad', cantidad: data.ventas.count, monto: null },
-        { seccion: 'Ventas', concepto: 'Total vendido', cantidad: null, monto: data.ventas.total },
-        { seccion: 'Ventas', concepto: 'Por cobrar', cantidad: null, monto: data.ventas.total_due },
-        { seccion: 'Cobros', concepto: 'Total cobrado', cantidad: data.pagos.count, monto: data.pagos.total },
-        ...Object.entries(data.pagos.by_method).map(([k, v]) => ({ seccion: 'Cobros', concepto: metodoLabels[k] || k, cantidad: null, monto: v })),
-        { seccion: 'Devoluciones', concepto: 'Devuelto', cantidad: data.devoluciones.count, monto: data.devoluciones.total },
-        { seccion: 'Pacientes', concepto: 'Nuevos en el periodo', cantidad: data.pacientes_nuevos, monto: null },
-      ];
+      const money = { format: 'currency' as const };
       await exportToExcel({
         filename: `concentrado-${start}_${end}`,
         sheetName: 'Concentrado',
-        title: 'Concentrado del periodo',
-        subtitle: `Del ${start} al ${end}`,
+        title: 'Concentrado de ventas',
+        subtitle: `Del ${start} al ${end} · Pacientes atendidos: ${data.pacientes_atendidos} · Ticket promedio: ${formatCurrency(data.ticket_promedio)}`,
         columns: [
-          { header: 'Sección', key: 'seccion' },
+          { header: 'Folio', key: 'folio' },
+          { header: 'Fecha', key: 'fecha' },
+          { header: 'Paciente', key: 'paciente' },
+          { header: 'Folio Dr', key: 'folio_dr' },
+          { header: 'Atendido por', key: 'medico' },
+          { header: 'Vendedor', key: 'vendedor' },
           { header: 'Concepto', key: 'concepto' },
-          { header: 'Cantidad', key: 'cantidad', format: 'number' },
-          { header: 'Monto', key: 'monto', format: 'currency' },
+          ...MONEY_COLUMNS.map((c) => ({ header: c.header, key: c.key, ...money })),
         ],
-        rows,
+        rows: rows as unknown as Record<string, unknown>[],
+        totals: {
+          folio: 'Totales', fecha: '', paciente: '', folio_dr: '', medico: '', vendedor: '', concepto: '',
+          ...totals,
+        },
       });
       toast.success('Excel descargado');
     } catch (err) {
@@ -99,87 +230,136 @@ const ConcentradoReport: FC = () => {
     }
   };
 
+  const thBase = 'text-left px-3 py-2 font-medium';
+  const tdBase = 'px-3 py-2';
+  const moneyCell = (v: number | undefined) => (v ? fmtMoney(v) : '');
+
   return (
     <div className="space-y-4 sm:space-y-6">
       <Card>
         <Card.Body>
-          <div className="flex flex-col sm:flex-row gap-3 items-end">
-            <Input label="Inicio" type="date" value={start} onChange={(e) => setStart(e.target.value)} className="sm:max-w-[160px]" />
-            <Input label="Fin" type="date" value={end} onChange={(e) => setEnd(e.target.value)} className="sm:max-w-[160px]" />
-            
-            <div className="sm:ml-auto">
+          <div className="flex flex-wrap items-end gap-3">
+            <div className="w-full sm:w-56">
+              <MultiSelect
+                label="Doctores"
+                icon={<Stethoscope size={14} className="text-theme-muted shrink-0" />}
+                options={doctors.map((d) => ({
+                  value: String(d.id),
+                  label: (d.staff_type ?? 'doctor') === 'cosmetologa' ? `${d.name} (Cosmetóloga)` : d.name,
+                }))}
+                selected={selDoctores}
+                onChange={setSelDoctores}
+                searchable
+              />
+            </div>
+            <div className="w-full sm:w-52">
+              <MultiSelect
+                label="Categorías"
+                icon={<Tag size={14} className="text-theme-muted shrink-0" />}
+                options={CATEGORIAS}
+                selected={selCategorias}
+                onChange={setSelCategorias}
+              />
+            </div>
+            <div className="w-full sm:w-64">
+              <MultiSelect
+                label="Servicios"
+                icon={<ClipboardList size={14} className="text-theme-muted shrink-0" />}
+                options={serviciosFiltrados.map((s) => ({ value: String(s.id), label: s.name }))}
+                selected={selServicios}
+                onChange={setSelServicios}
+                searchable
+              />
+            </div>
+            <Button variant={vip ? 'primary' : 'outline'} size="sm" onClick={() => setVip((v) => !v)}>
+              VIP{vip ? ' ✓' : ''}
+            </Button>
+            <span className="text-xs text-theme-muted ml-auto">
+              {start} — {end} · {rows.length} venta{rows.length === 1 ? '' : 's'}
+            </span>
+            <div className="flex items-center gap-2">
+              <Button variant="outline" size="sm" onClick={() => window.print()}>
+                <Printer size={14} className="mr-1.5" />
+                Imprimir
+              </Button>
               <ExportButton onClick={exportar} loading={exporting} />
             </div>
           </div>
         </Card.Body>
       </Card>
 
-      {loading ? (
-        <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-          {Array.from({ length: 8 }).map((_, i) => <Skeleton key={i} className="h-24 w-full" />)}
-        </div>
-      ) : data ? (
-        <>
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <Kpi label="Citas" value={data.citas.total} />
-            <Kpi label="Visitas clínicas" value={data.visitas.total} />
-            <Kpi label="Pacientes nuevos" value={data.pacientes_nuevos} />
-            <Kpi label="Ventas" value={data.ventas.count} />
-            <Kpi label="Total vendido" value={formatCurrency(data.ventas.total)} />
-            <Kpi label="Cobrado" value={formatCurrency(data.pagos.total)} />
-            <Kpi label="Por cobrar" value={formatCurrency(data.ventas.total_due)} rose={data.ventas.total_due > 0} />
-            <Kpi label="Devoluciones" value={`${data.devoluciones.count} · ${formatCurrency(data.devoluciones.total)}`} rose={data.devoluciones.total > 0} />
-          </div>
-
-          <div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
-            <Card>
-              <Card.Body>
-                <h3 className="font-heading text-lg text-theme-heading mb-3 flex items-center">
-                  <LayoutGrid size={18} className="mr-2" /> Citas por estado
-                </h3>
-                <div className="flex flex-wrap gap-2">
-                  {Object.entries(data.citas.by_state).map(([state, count]) => (
-                    <Badge key={state} variant={stateBadge(state)}>
-                      {citaStateLabels[state] || state}: {count}
-                    </Badge>
-                  ))}
-                  {data.citas.total === 0 && <p className="text-sm text-theme-muted">Sin citas.</p>}
-                </div>
-              </Card.Body>
-            </Card>
-            <Card>
-              <Card.Body>
-                <h3 className="font-heading text-lg text-theme-heading mb-3">Cobros por método</h3>
-                {Object.keys(data.pagos.by_method).length === 0 ? (
-                  <p className="text-sm text-theme-muted">Sin cobros.</p>
-                ) : (
-                  <div className="space-y-2">
-                    {Object.entries(data.pagos.by_method).map(([method, amount]) => (
-                      <div key={method} className="flex items-center justify-between p-2.5 bg-theme-bg rounded-lg text-sm">
-                        <span className="text-theme-heading">{metodoLabels[method] || method}</span>
-                        <span className="font-medium text-theme-heading">{formatCurrency(amount)}</span>
-                      </div>
+      <Card className="print-concentrado">
+        <Card.Body>
+          {loading ? (
+            <Skeleton count={8} className="h-10 w-full" />
+          ) : rows.length === 0 ? (
+            <EmptyState
+              title="Sin ventas en el periodo"
+              subtitle="No hay ventas que coincidan con los filtros seleccionados."
+            />
+          ) : (
+            <div className="overflow-auto max-h-[62vh] rounded-xl border border-theme-border">
+              <table className="w-full text-xs whitespace-nowrap">
+                <thead className="sticky top-0 z-10">
+                  <tr className="bg-theme-bg text-theme-muted uppercase">
+                    <th rowSpan={2} className={cn(thBase, 'sticky left-0 bg-theme-bg z-20')}>Folio</th>
+                    <th rowSpan={2} className={thBase}>Fecha</th>
+                    <th rowSpan={2} className={thBase}>Paciente</th>
+                    <th rowSpan={2} className={thBase}>Folio Dr</th>
+                    <th rowSpan={2} className={thBase}>Atendido por</th>
+                    <th rowSpan={2} className={thBase}>Vendedor</th>
+                    <th rowSpan={2} className={thBase}>Concepto</th>
+                    {METODOS.map((m) => (
+                      <th key={m.key} colSpan={2} className="text-center px-3 py-2 border-l border-theme-border font-medium">
+                        {m.label}
+                      </th>
                     ))}
-                  </div>
-                )}
-              </Card.Body>
-            </Card>
-            <Card>
-              <Card.Body>
-                <h3 className="font-heading text-lg text-theme-heading mb-3">Visitas por estado</h3>
-                <div className="flex flex-wrap gap-2">
-                  {Object.entries(data.visitas.by_state).map(([state, count]) => (
-                    <Badge key={state} variant={stateBadge(state)}>
-                      {visitaStateLabels[state] || state}: {count}
-                    </Badge>
+                  </tr>
+                  <tr className="bg-theme-bg text-theme-muted uppercase">
+                    {METODOS.flatMap((m) => [
+                      <th key={`${m.key}_usd`} className="text-right px-3 py-1.5 border-l border-theme-border font-medium">USD</th>,
+                      <th key={`${m.key}_mxn`} className="text-right px-3 py-1.5 font-medium">M.N.</th>,
+                    ])}
+                  </tr>
+                </thead>
+                <tbody className="divide-y divide-theme-border bg-theme-surface">
+                  {rows.map((r) => (
+                    <tr key={r.folio} className="hover:bg-theme-bg">
+                      <td className={cn(tdBase, 'sticky left-0 bg-theme-surface hover:bg-theme-bg z-10 font-medium text-theme-heading')}>{r.folio}</td>
+                      <td className={cn(tdBase, 'text-theme-muted')}>{r.fecha}</td>
+                      <td className={cn(tdBase, 'text-theme-heading')}>{r.paciente}</td>
+                      <td className={cn(tdBase, 'text-theme-muted')}>{r.folio_dr || '-'}</td>
+                      <td className={cn(tdBase, 'text-theme-muted')}>{r.medico || '-'}</td>
+                      <td className={cn(tdBase, 'text-theme-muted')}>{r.vendedor || '-'}</td>
+                      <td className={cn(tdBase, 'text-theme-muted max-w-[280px] truncate')} title={r.concepto}>{r.concepto}</td>
+                      {MONEY_COLUMNS.map((c, i) => (
+                        <td key={c.key} className={cn(tdBase, 'text-right', i % 2 === 0 && 'border-l border-theme-border', r[c.key as keyof typeof r] ? 'text-theme-heading' : 'text-theme-muted/50')}>
+                          {moneyCell(r[c.key as keyof typeof r] as number | undefined)}
+                        </td>
+                      ))}
+                    </tr>
                   ))}
-                  {data.visitas.total === 0 && <p className="text-sm text-theme-muted">Sin visitas.</p>}
-                </div>
-              </Card.Body>
-            </Card>
-          </div>
-        </>
-      ) : null}
+                </tbody>
+                <tfoot className="sticky bottom-0 bg-theme-bg font-semibold text-theme-heading">
+                  <tr>
+                    <td colSpan={7} className={cn(tdBase, 'uppercase text-xs tracking-wide')}>Totales</td>
+                    {MONEY_COLUMNS.map((c, i) => (
+                      <td key={c.key} className={cn(tdBase, 'text-right', i % 2 === 0 && 'border-l border-theme-border')}>
+                        {fmtMoney(totals[c.key])}
+                      </td>
+                    ))}
+                  </tr>
+                  <tr className="font-normal">
+                    <td colSpan={17} className={cn(tdBase, 'text-theme-muted')}>
+                      Pacientes atendidos: {data?.pacientes_atendidos ?? 0} · Ticket promedio: {formatCurrency(data?.ticket_promedio ?? 0)}
+                    </td>
+                  </tr>
+                </tfoot>
+              </table>
+            </div>
+          )}
+        </Card.Body>
+      </Card>
     </div>
   );
 };

frontend/src/index.css

@@ -261,13 +261,16 @@ p {
   .print-agenda,
   .print-agenda *,
   .print-recibo,
-  .print-recibo * {
+  .print-recibo *,
+  .print-concentrado,
+  .print-concentrado * {
     visibility: visible;
   }
   .print-ticket,
   .print-receta,
   .print-agenda,
-  .print-recibo {
+  .print-recibo,
+  .print-concentrado {
     position: absolute;
     top: 0;
     left: 0;
@@ -321,4 +324,30 @@ p {
   .print-recibo {
     position: static;
   }
+  /* Concentrado de ventas: tabla ancha en hoja horizontal. Página con nombre
+     propia para no afectar la orientación de los demás documentos. */
+  .print-concentrado {
+    page: concentrado-landscape;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+  .print-concentrado .overflow-auto {
+    max-height: none !important;
+    overflow: visible !important;
+  }
+  .print-concentrado table {
+    font-size: 7.5pt;
+    white-space: normal;
+  }
+  .print-concentrado thead,
+  .print-concentrado tfoot,
+  .print-concentrado th,
+  .print-concentrado td {
+    position: static !important;
+  }
+}
+@page concentrado-landscape {
+  size: A4 landscape;
+  margin: 8mm;
 }

frontend/src/pages/Pos.tsx

@@ -33,6 +33,7 @@ const METODO_OPTIONS = [
   { value: 'transfer', label: 'Transferencia' },
   { value: 'stripe', label: 'Stripe' },
   { value: 'mercadopago', label: 'MercadoPago' },
+  { value: 'saldo_favor', label: 'Saldo a favor' },
 ];
 const metodoLabel = (m: string) => METODO_OPTIONS.find((o) => o.value === m)?.label || m;
 

frontend/src/services/odoo.ts

@@ -1205,6 +1205,38 @@ export interface ConcentradoReport {
   visitas: { total: number; by_state: Record<string, number> };
 }
 
+export interface ConcentradoDetalleRow {
+  folio: string;
+  fecha: string;
+  paciente: string;
+  folio_dr: string | null;
+  medico: string;
+  vendedor: string;
+  concepto: string;
+  efectivo_usd: number;
+  efectivo_mxn: number;
+  tarjeta_usd: number;
+  tarjeta_mxn: number;
+  transferencia_usd: number;
+  transferencia_mxn: number;
+  saldo_favor_usd: number;
+  saldo_favor_mxn: number;
+  monedero_usd: number;
+  monedero_mxn: number;
+}
+
+export type ConcentradoDetalleTotals = Record<string, number>;
+
+export interface ConcentradoDetalleReport {
+  status: string;
+  start: string;
+  end: string;
+  rows: ConcentradoDetalleRow[];
+  totals: ConcentradoDetalleTotals;
+  pacientes_atendidos: number;
+  ticket_promedio: number;
+}
+
 export interface RecomendacionRow {
   recomendador: string;
   pacientes: number;
@@ -2139,6 +2171,11 @@ export const odooApi = {
     return data;
   },
 
+  async getConcentradoDetalle(params: { start?: string; end?: string; doctor_ids?: string; categoria_ids?: string; servicio_ids?: string; vip?: boolean }): Promise<ConcentradoDetalleReport> {
+    const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/reports/concentrado/detalle`, { params });
+    return data;
+  },
+
   async getRecomendaciones(): Promise<{ status: string; recomendaciones: RecomendacionRow[]; total: number }> {
     const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/reports/recomendaciones`);
     return data;