consultoria-as/SKEEN-Proyecto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Oleada UX 3: POS (repetir ultima venta, aviso de paquetes, atajos, caja desde POS), Ventas (cancelacion auditada con reversion de monedero y stock, detalle inline, presets de fecha), Cortes (historial comparativo y export)

Browse Source
This commit is contained in:
Consultoría Alcaraz Salazar
2026-09-17 19:26:02 +00:00
parent b4f91527f1
commit ac5896b1fc
10 changed files with 1328 additions and 57 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
frontend/src/lib/badges.ts
View File

@@ -32,6 +32,7 @@ export const badgeForSaleState = (state: string): BadgeVariant => {
case 'paid':
return 'paid';
case 'cancel':
case 'cancelled':
return 'cancelled';
default:
return 'pending';

87
frontend/src/lib/dateRange.ts Normal file
View File

@@ -0,0 +1,87 @@
/**
* Presets de rango de fecha compartidos (Ventas, y reutilizables por otras
* vistas). El rango elegido se persiste en localStorage para que al volver a
* la pantalla se restaure, igual que los presets de la agenda.
*/
export type DatePreset = 'hoy' | 'ayer' | 'semana' | 'mes' | 'mes_pasado' | 'custom';
export interface DateRange {
start: string;
end: string;
}
export const DATE_PRESETS: { value: DatePreset; label: string }[] = [
{ value: 'hoy', label: 'Hoy' },
{ value: 'ayer', label: 'Ayer' },
{ value: 'semana', label: 'Esta semana' },
{ value: 'mes', label: 'Este mes' },
{ value: 'mes_pasado', label: 'Mes pasado' },
{ value: 'custom', label: 'Rango personalizado' },
];
export const isoDate = (d: Date): string => {
const y = d.getFullYear();
const m = String(d.getMonth() + 1).padStart(2, '0');
const day = String(d.getDate()).padStart(2, '0');
return `${y}-${m}-${day}`;
};
export const rangeForPreset = (preset: DatePreset, today = new Date()): DateRange => {
const t = new Date(today.getFullYear(), today.getMonth(), today.getDate());
switch (preset) {
case 'hoy':
return { start: isoDate(t), end: isoDate(t) };
case 'ayer': {
const y = new Date(t);
y.setDate(y.getDate() - 1);
return { start: isoDate(y), end: isoDate(y) };
}
case 'semana': {
// Semana en curso, de lunes a domingo
const dow = (t.getDay() + 6) % 7; // 0 = lunes
const monday = new Date(t);
monday.setDate(t.getDate() - dow);
const sunday = new Date(monday);
sunday.setDate(monday.getDate() + 6);
return { start: isoDate(monday), end: isoDate(sunday) };
}
case 'mes': {
const first = new Date(t.getFullYear(), t.getMonth(), 1);
const last = new Date(t.getFullYear(), t.getMonth() + 1, 0);
return { start: isoDate(first), end: isoDate(last) };
}
case 'mes_pasado': {
const first = new Date(t.getFullYear(), t.getMonth() - 1, 1);
const last = new Date(t.getFullYear(), t.getMonth(), 0);
return { start: isoDate(first), end: isoDate(last) };
}
default:
return { start: isoDate(t), end: isoDate(t) };
}
};
export interface DateFilterPrefs extends DateRange {
preset: DatePreset;
}
export const readDateFilterPrefs = (key: string): DateFilterPrefs | null => {
try {
const raw = localStorage.getItem(key);
if (!raw) return null;
const parsed = JSON.parse(raw) as Partial<DateFilterPrefs>;
if (!parsed || typeof parsed.start !== 'string' || typeof parsed.end !== 'string') return null;
const preset = (DATE_PRESETS.some((p) => p.value === parsed.preset) ? parsed.preset : 'custom') as DatePreset;
return { preset, start: parsed.start, end: parsed.end };
} catch {
return null;
}
};
export const writeDateFilterPrefs = (key: string, prefs: DateFilterPrefs): void => {
try {
localStorage.setItem(key, JSON.stringify(prefs));
} catch {
// localStorage no disponible: se mantiene solo en memoria
}
};

158
frontend/src/pages/Cortes.tsx
View File

@@ -1,6 +1,6 @@
import type { FC } from 'react';
import { useEffect, useState } from 'react';
import { Plus, Lock, Receipt, Printer, ChevronLeft, ChevronRight } from 'lucide-react';
import { Plus, Lock, Receipt, Printer, ChevronLeft, ChevronRight, Download } from 'lucide-react';
import Layout from '../components/Layout';
import {
Card,
@@ -18,10 +18,13 @@ import {
} from '../components/ui';
import { CortePrint } from '../components/CortePrint';
import { odooApi, type CashClosing } from '../services/odoo';
import { exportToExcel } from '../lib/exporter';
const money = (v: number) =>
'$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
const MES_ACTUAL = new Date().toISOString().slice(0, 7);
const PASOS = [
{ key: 'cash', titulo: 'Efectivo' },
{ key: 'card', titulo: 'Tarjeta' },
@@ -45,6 +48,77 @@ const Cortes: FC = () => {
const [date, setDate] = useState(() => new Date().toISOString().split('T')[0]);
const [openingCash, setOpeningCash] = useState('');
const [submitting, setSubmitting] = useState(false);
// Mes para el resumen exportable
const [mes, setMes] = useState(MES_ACTUAL);
// --- Historial comparativo: últimos cortes CERRADOS y diferencias por usuario ---
const HISTORIAL_N = 14;
const cerrados = closings.filter((c) => c.state === 'closed');
const ultimosCerrados = cerrados.slice(0, HISTORIAL_N);
const porUsuario = (() => {
const map = new Map<string, { usuario: string; cortes: number; faltantes: number; sobrantes: number; neto: number; ultima: string }>();
for (const c of ultimosCerrados) {
const usuario = c.user || 'Usuario no disponible';
const row = map.get(usuario) || { usuario, cortes: 0, faltantes: 0, sobrantes: 0, neto: 0, ultima: c.date };
row.cortes += 1;
row.neto += c.difference || 0;
if ((c.difference || 0) < 0) row.faltantes += c.difference || 0;
else row.sobrantes += c.difference || 0;
if (c.date > row.ultima) row.ultima = c.date;
map.set(usuario, row);
}
return [...map.values()].sort((a, b) => a.neto - b.neto);
})();
const cortesDelMes = closings.filter((c) => (c.date || '').startsWith(mes));
const exportarMes = async () => {
if (cortesDelMes.length === 0) {
toast.error('No hay cortes en el mes seleccionado');
return;
}
try {
await exportToExcel({
filename: `cortes-skeen-${mes}`,
sheetName: 'Cortes',
title: 'Cortes de caja SKEEN',
subtitle: `Mes ${mes} · ${cortesDelMes.length} cortes`,
columns: [
{ header: 'Referencia', key: 'name' },
{ header: 'Fecha', key: 'date', format: 'date' },
{ header: 'Usuario', key: 'user' },
{ header: 'Estado', key: 'estado' },
{ header: 'Apertura', key: 'opening_cash', format: 'currency' },
{ header: 'Efectivo', key: 'total_cash', format: 'currency' },
{ header: 'Tarjeta', key: 'total_card', format: 'currency' },
{ header: 'Transferencia', key: 'total_transfer', format: 'currency' },
{ header: 'Otros', key: 'total_other', format: 'currency' },
{ header: 'Total ventas', key: 'total_sales', format: 'currency' },
{ header: 'Efectivo contado', key: 'counted_cash', format: 'currency' },
{ header: 'Diferencia', key: 'difference', format: 'currency' },
{ header: 'Notas', key: 'notes' },
],
rows: cortesDelMes.map((c) => ({
...c,
user: c.user || 'Usuario no disponible',
estado: c.state === 'closed' ? 'Cerrado' : 'Abierto',
})),
totals: {
name: '',
total_cash: cortesDelMes.reduce((a, c) => a + (c.total_cash || 0), 0),
total_card: cortesDelMes.reduce((a, c) => a + (c.total_card || 0), 0),
total_transfer: cortesDelMes.reduce((a, c) => a + (c.total_transfer || 0), 0),
total_other: cortesDelMes.reduce((a, c) => a + (c.total_other || 0), 0),
total_sales: cortesDelMes.reduce((a, c) => a + (c.total_sales || 0), 0),
difference: cortesDelMes.reduce((a, c) => a + (c.difference || 0), 0),
},
});
toast.success(`Resumen de ${mes} descargado (${cortesDelMes.length} cortes)`);
} catch (err) {
toast.error('Error al exportar');
console.error(err);
}
};
const load = async () => {
try {
@@ -242,6 +316,17 @@ const Cortes: FC = () => {
return (
<Layout title="Cortes de Caja" subtitle="Arqueos y cierres">
<PageHeader title="Cortes de Caja" subtitle="Abre y cierra turnos">
<Input
type="month"
value={mes}
onChange={(e) => setMes(e.target.value || MES_ACTUAL)}
aria-label="Mes a exportar"
className="sm:max-w-[160px]"
/>
<Button variant="outline" onClick={exportarMes} disabled={cortesDelMes.length === 0}>
<Download size={16} className="mr-2" />
Exportar resumen
</Button>
<Button onClick={() => setCreateOpen(true)}>
<Plus size={16} className="mr-2" />
Abrir caja
@@ -426,6 +511,77 @@ const Cortes: FC = () => {
)}
</Modal>
{/* Historial comparativo de diferencias (para detectar patrones por usuario) */}
<Card className="mt-4">
<Card.Body>
<div className="flex flex-wrap items-center justify-between gap-2 mb-3">
<div>
<h3 className="font-heading text-lg text-theme-heading">Historial comparativo de diferencias</h3>
<p className="text-xs text-theme-muted">Últimos {HISTORIAL_N} cortes cerrados. Negativo = faltante, positivo = sobrante.</p>
</div>
{ultimosCerrados.length > 0 && (
<span className="text-xs text-theme-muted">
Diferencia acumulada: <span className={`font-semibold ${differenceColor(ultimosCerrados.reduce((a, c) => a + (c.difference || 0), 0))}`}>
{money(ultimosCerrados.reduce((a, c) => a + (c.difference || 0), 0))}
</span>
</span>
)}
</div>
{ultimosCerrados.length === 0 ? (
<p className="text-sm text-theme-muted">Aún no hay cortes cerrados.</p>
) : (
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div className="lg:col-span-2 overflow-x-auto">
<table className="w-full">
<thead className="bg-theme-bg">
<tr>
<th className="text-left p-2 text-xs font-medium text-theme-muted uppercase">Fecha</th>
<th className="text-left p-2 text-xs font-medium text-theme-muted uppercase">Usuario</th>
<th className="text-right p-2 text-xs font-medium text-theme-muted uppercase">Contado</th>
<th className="text-right p-2 text-xs font-medium text-theme-muted uppercase">Diferencia</th>
</tr>
</thead>
<tbody className="divide-y">
{ultimosCerrados.map((c) => (
<tr key={c.id} className="hover:bg-theme-bg">
<td className="p-2 text-sm text-theme-muted">{c.date}</td>
<td className="p-2 text-sm text-theme-muted">{c.user || 'Usuario no disponible'}</td>
<td className="p-2 text-sm text-right text-theme-heading">{money(c.counted_cash ?? 0)}</td>
<td className={`p-2 text-sm text-right font-semibold ${differenceColor(c.difference)}`}>
{c.difference > 0 ? '+' : ''}{money(c.difference)}
</td>
</tr>
))}
</tbody>
</table>
</div>
<div>
<p className="text-xs font-medium text-theme-muted uppercase mb-2">Resumen por usuario</p>
<div className="space-y-2">
{porUsuario.map((u) => (
<div key={u.usuario} className="rounded-xl border border-theme-border bg-theme-bg p-2.5">
<div className="flex items-center justify-between gap-2">
<span className="text-sm font-medium text-theme-heading truncate">{u.usuario}</span>
<span className={`text-sm font-semibold ${differenceColor(u.neto)}`}>
{u.neto > 0 ? '+' : ''}{money(u.neto)}
</span>
</div>
<p className="text-[11px] text-theme-muted">
{u.cortes} {u.cortes === 1 ? 'corte' : 'cortes'}
{u.faltantes !== 0 ? ` · faltantes ${money(u.faltantes)}` : ''}
{u.sobrantes !== 0 ? ` · sobrantes ${money(u.sobrantes)}` : ''}
</p>
</div>
))}
</div>
</div>
</div>
)}
</Card.Body>
</Card>
<CortePrint corte={printCorte} onClose={() => setPrintCorte(null)} />
</Layout>
);

3
frontend/src/pages/Inventario.tsx
View File

@@ -31,6 +31,7 @@ const MOVE_META: Record<InventoryMoveType, { label: string; sign: string; cls: s
venta: { label: 'Venta', sign: '−', cls: 'text-theme-muted' },
baja: { label: 'Baja', sign: '−', cls: 'text-rose-600' },
ajuste: { label: 'Ajuste', sign: '=', cls: 'text-sky-600' },
cancelacion: { label: 'Cancelación venta', sign: '+', cls: 'text-emerald-700' },
};
const KIND_OPTIONS = [
@@ -357,7 +358,7 @@ const Inventario: FC = () => {
{moves.map((m) => (
<div key={m.id} className="flex items-center justify-between p-3 bg-theme-bg rounded-xl text-sm">
<div className="flex items-center gap-2">
{m.type === 'compra' ? <ArrowDownToLine size={16} className="text-theme-heading" /> : <ArrowUpFromLine size={16} className="text-theme-muted" />}
{m.type === 'compra' || m.type === 'cancelacion' ? <ArrowDownToLine size={16} className="text-theme-heading" /> : <ArrowUpFromLine size={16} className="text-theme-muted" />}
<div>
<p className={`font-medium ${MOVE_META[m.type].cls}`}>{MOVE_META[m.type].label} {MOVE_META[m.type].sign}{m.qty}</p>
<p className="text-xs text-theme-muted">{m.date}{m.reference ? ` · ${m.reference}` : ''}</p>

304
frontend/src/pages/Pos.tsx
View File

@@ -1,8 +1,9 @@
import type { FC } from 'react';
import { useEffect, useState, useCallback, useMemo } from 'react';
import { useEffect, useState, useCallback, useMemo, useRef } from 'react';
import { Link, useSearchParams } from 'react-router-dom';
import {
Search, Plus, Minus, X, Store, AlertTriangle, ShoppingBag, Star, Wallet, Trash2, Package,
RotateCcw, Keyboard, Lock,
} from 'lucide-react';
import Layout from '../components/Layout';
import { usePatientDrawer } from '../components/PatientDrawer';
@@ -18,6 +19,7 @@ import {
toast,
} from '../components/ui';
import { odooApi, type Service, type Patient, type InventoryItem, type PosCheckoutResult, type Doctor } from '../services/odoo';
import type { PatientPackage } from '../services/odoo';
const fmtMoney = (n: number) =>
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 2 });
@@ -86,6 +88,19 @@ const Pos: FC = () => {
// Corte de caja
const [cajaAbierta, setCajaAbierta] = useState(true);
const [cajaModalOpen, setCajaModalOpen] = useState(false);
const [cajaFondo, setCajaFondo] = useState('');
const [cajaAbriendo, setCajaAbriendo] = useState(false);
// Repetir última venta
const [lastSaleLoading, setLastSaleLoading] = useState(false);
// Paquetes del paciente con sesiones pendientes
const [paquetes, setPaquetes] = useState<PatientPackage[]>([]);
// Atajos de teclado
const [shortcutsOpen, setShortcutsOpen] = useState(false);
const [ticketFocused, setTicketFocused] = useState(false);
const searchWrapRef = useRef<HTMLDivElement | null>(null);
// Mobile
const [ticketMovil, setTicketMovil] = useState(false);
@@ -358,16 +373,139 @@ const Pos: FC = () => {
/>
);
// Al seleccionar paciente: traer su adeudo para el badge de alerta en caja
// Al seleccionar paciente: traer su adeudo y sus paquetes con sesiones pendientes
const selectPaciente = (p: Patient) => {
setPaciente(p);
setPacienteResults([]);
setPacienteAdeudo(0);
setPaquetes([]);
odooApi.getPatientHistory(p.id)
.then((res) => { if (res.status === 'success') setPacienteAdeudo(res.estado_cuenta?.adeudo ?? 0); })
.catch(() => {});
odooApi.getPatientPackages(p.id)
.then((res) => { if (res.status === 'success') setPaquetes(res.packages.filter((k) => k.remaining > 0)); })
.catch(() => {});
};
// ---- Repetir última venta (caso típico: toxina cada 3 meses) ----
const repetirUltimaVenta = async () => {
if (!paciente) return;
if (lines.length > 0 && !window.confirm('El ticket ya tiene líneas. ¿Reemplazarlas por las de la última venta?')) {
return;
}
try {
setLastSaleLoading(true);
const res = await odooApi.getLastSale(paciente.id);
if (res.status !== 'success' || !res.sale) {
toast.error('Este paciente no tiene ventas previas');
return;
}
// Se rearma con el precio VIGENTE del catálogo y se omiten los artículos
// que ya no existen o están inactivos (se avisan).
const nuevas: TicketLine[] = [];
const omitidas: string[] = [];
for (const l of res.lines) {
if (l.missing) { omitidas.push(l.name); continue; }
const key = l.kind === 'service' ? `s-${l.service_id}` : `i-${l.item_id}`;
const found = nuevas.find((x) => x.key === key);
if (found) { found.qty += l.quantity; continue; }
nuevas.push({
key,
name: l.name,
qty: l.quantity,
price: l.price_current ?? l.price_last,
...(l.kind === 'service' ? { service_id: l.service_id ?? undefined } : {}),
...(l.kind === 'item' ? { item_id: l.item_id ?? undefined, stock: l.stock ?? undefined, unit: l.unit ?? undefined } : {}),
});
}
setLines(nuevas);
const cambiados = res.lines.filter((l) => l.price_changed && !l.missing).length;
toast.success(`Ticket cargado desde ${res.sale.name} (${res.sale.date})`);
res.warnings.forEach((w) => toast.warning(w));
if (omitidas.length > 0 && cambiados === 0) {
toast.warning(`No se agregaron: ${omitidas.join(', ')}`);
}
} catch (err) {
toast.error('No se pudo cargar la última venta');
console.error(err);
} finally {
setLastSaleLoading(false);
}
};
// ---- Caja: abrir desde el POS sin perder el ticket ----
const abrirCajaDesdePos = async () => {
const fondo = parseFloat(cajaFondo || '0');
if (Number.isNaN(fondo) || fondo < 0) {
toast.error('Ingresa un fondo de caja válido');
return;
}
try {
setCajaAbriendo(true);
await odooApi.createCashClosing({ date: new Date().toISOString().split('T')[0], opening_cash: fondo });
setCajaAbierta(true);
setCajaModalOpen(false);
setCajaFondo('');
toast.success('Caja abierta');
} catch (err) {
toast.error('No se pudo abrir la caja');
console.error(err);
} finally {
setCajaAbriendo(false);
}
};
// ---- Atajos de teclado ----
// F2 buscador de servicios · F9 cobrar · +/- cantidad de la última línea
// (con el ticket enfocado) · Esc cierra el modal abierto (lo maneja Modal).
const ajustarUltimaLinea = (delta: number) => {
setLines((prev) => {
if (prev.length === 0) return prev;
const last = prev[prev.length - 1];
const qty = Math.max(1, last.qty + delta);
return prev.map((l, i) => (i === prev.length - 1 ? { ...l, qty } : l));
});
};
const cobrarConAtajo = () => {
if (lines.length === 0 || !paciente) {
toast.error(lines.length === 0 ? 'El ticket está vacío' : 'Selecciona un paciente');
return;
}
abrirCobro();
};
const hotkeyRef = useRef<(e: KeyboardEvent) => void>(() => {});
hotkeyRef.current = (e: KeyboardEvent) => {
if (e.key === 'F2') {
e.preventDefault();
searchWrapRef.current?.querySelector('input')?.focus();
return;
}
if (e.key === 'F9') {
e.preventDefault();
cobrarConAtajo();
return;
}
const target = e.target as HTMLElement | null;
const tag = target?.tagName;
if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT' || target?.isContentEditable) return;
if (!ticketFocused) return;
if (e.key === '+' || e.key === '=') {
e.preventDefault();
ajustarUltimaLinea(1);
} else if (e.key === '-' || e.key === '_') {
e.preventDefault();
ajustarUltimaLinea(-1);
}
};
useEffect(() => {
const handler = (e: KeyboardEvent) => hotkeyRef.current(e);
window.addEventListener('keydown', handler);
return () => window.removeEventListener('keydown', handler);
}, []);
const nuevaVenta = () => {
setResultado(null);
setLines([]);
@@ -376,6 +514,7 @@ const Pos: FC = () => {
setPacienteAdeudo(0);
setPacienteQuery('');
setDoctorId('');
setPaquetes([]);
};
// ---- Bloques del ticket (desktop sticky y modal móvil) ----
@@ -423,6 +562,34 @@ const Pos: FC = () => {
)}
</div>
)}
{/* Paquetes con sesiones pendientes: aviso informativo para caja.
No hay consumo automático de sesión (el sistema no guarda contador):
las sesiones restantes se derivan de las citas del paquete. */}
{paquetes.length > 0 && (
<div className="rounded-lg border border-violet-300 bg-violet-50 px-2.5 py-1.5 space-y-0.5">
{paquetes.map((k) => (
<p key={k.service_id} className="text-[11px] text-violet-800 flex items-center gap-1.5">
<Package size={11} className="shrink-0" />
<span>
Paquete <span className="font-medium">{k.name}</span>: {k.remaining} de {k.total} sesiones restantes
{k.next_date ? ` · próxima ${k.next_date}` : ''}
</span>
</p>
))}
</div>
)}
{/* Repetir la última venta del paciente (toxina cada 3 meses, etc.) */}
<Button
variant="outline"
size="sm"
className="w-full"
onClick={repetirUltimaVenta}
loading={lastSaleLoading}
title="Carga las líneas de la última venta con los precios actuales del catálogo"
>
<RotateCcw size={13} className="mr-1.5" />
Repetir última venta
</Button>
</div>
) : altaRapida ? (
<div className="p-2.5 bg-theme-bg rounded-xl space-y-2">
@@ -564,22 +731,45 @@ const Pos: FC = () => {
className="w-full mt-1 !py-3 text-base"
onClick={abrirCobro}
disabled={lines.length === 0 || !paciente}
title="Cobrar (F9)"
>
<ShoppingBag size={18} className="mr-2" />
Cobrar {fmtMoney(total)}
</Button>
<p className="flex items-center justify-center gap-1.5 text-[11px] text-theme-muted">
<Keyboard size={11} aria-hidden="true" />
F2 buscar · F9 cobrar · +/− cantidad · Esc cerrar
<button
type="button"
onClick={() => setShortcutsOpen(true)}
className="underline hover:text-theme-heading"
>
Ver atajos
</button>
</p>
</>
);
return (
<Layout title="Punto de Venta" subtitle="Arma el ticket y cobra en un solo paso">
{!cajaAbierta && (
<div className="mb-3">
{!cajaAbierta ? (
<div className="mb-3 flex flex-wrap items-center gap-2">
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-theme-warning text-theme-warning-text text-xs">
<AlertTriangle size={13} className="shrink-0" />
Sin corte de caja abierto hoy
<Link to="/cortes" className="font-semibold underline">Abrir caja</Link>
</span>
<Button variant="outline" size="sm" onClick={() => setCajaModalOpen(true)}>
<Lock size={13} className="mr-1.5" />
Abrir caja aquí
</Button>
<Link to="/cortes" className="text-xs font-semibold underline text-theme-heading">Ir a Cortes de caja</Link>
</div>
) : (
<div className="mb-3 flex items-center gap-2 text-xs text-theme-muted">
<span className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full bg-theme-bg text-xs">
Caja abierta
</span>
<Link to="/cortes" className="underline hover:text-theme-heading">Cerrar caja</Link>
</div>
)}
@@ -587,10 +777,10 @@ const Pos: FC = () => {
{/* Catálogo */}
<Card className="flex-1 min-w-0 w-full">
<Card.Body>
<div className="relative mb-3">
<div className="relative mb-3" ref={searchWrapRef}>
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
<Input
placeholder={catMode === 'servicios' ? 'Buscar servicio...' : 'Buscar artículo...'}
placeholder={catMode === 'servicios' ? 'Buscar servicio... (F2)' : 'Buscar artículo... (F2)'}
value={search}
onChange={(e) => setSearch(e.target.value)}
className="pl-10"
@@ -702,24 +892,33 @@ const Pos: FC = () => {
</Card.Body>
</Card>
{/* Ticket desktop: panel sticky full-height */}
{/* Ticket desktop: panel sticky full-height. El foco en este panel
habilita +/− para la cantidad de la última línea. */}
<Card className="hidden lg:flex lg:flex-col w-[390px] shrink-0 sticky top-6 max-h-[calc(100vh-7rem)]">
<div className="p-4 pb-3 border-b border-theme-border shrink-0">
<div className="flex items-center justify-between mb-2.5">
<h3 className="font-heading text-lg text-theme-heading">Ticket</h3>
{lines.length > 0 && (
<Button variant="ghost" size="sm" onClick={limpiarTicket} title="Vaciar ticket">
<Trash2 size={15} className="text-theme-muted" />
</Button>
)}
<div
className="flex flex-col flex-1 min-h-0 outline-none"
tabIndex={0}
onFocusCapture={() => setTicketFocused(true)}
onBlurCapture={() => setTicketFocused(false)}
title="Atajos: + y − ajustan la cantidad de la última línea cuando el ticket tiene el foco"
>
<div className="p-4 pb-3 border-b border-theme-border shrink-0">
<div className="flex items-center justify-between mb-2.5">
<h3 className="font-heading text-lg text-theme-heading">Ticket</h3>
{lines.length > 0 && (
<Button variant="ghost" size="sm" onClick={limpiarTicket} title="Vaciar ticket">
<Trash2 size={15} className="text-theme-muted" />
</Button>
)}
</div>
{pacienteBlock}
</div>
<div className="flex-1 min-h-0 overflow-y-auto px-4 py-1">
{linesBlock}
</div>
<div className="p-4 pt-3 border-t border-theme-border shrink-0 space-y-2">
{totalsBlock}
</div>
{pacienteBlock}
</div>
<div className="flex-1 min-h-0 overflow-y-auto px-4 py-1">
{linesBlock}
</div>
<div className="p-4 pt-3 border-t border-theme-border shrink-0 space-y-2">
{totalsBlock}
</div>
</Card>
</div>
@@ -737,13 +936,70 @@ const Pos: FC = () => {
{/* Ticket móvil */}
<Modal isOpen={ticketMovil} onClose={() => setTicketMovil(false)} title="Ticket" maxWidth="md">
<div className="space-y-3">
<div
className="space-y-3"
tabIndex={-1}
onFocusCapture={() => setTicketFocused(true)}
onBlurCapture={() => setTicketFocused(false)}
>
{pacienteBlock}
<div className="max-h-[38vh] overflow-y-auto">{linesBlock}</div>
<div className="border-t border-theme-border pt-3 space-y-2">{totalsBlock}</div>
</div>
</Modal>
{/* Ayuda discreta de atajos de teclado */}
<Modal
isOpen={shortcutsOpen}
onClose={() => setShortcutsOpen(false)}
title="Atajos de teclado"
maxWidth="sm"
footer={<Button variant="outline" onClick={() => setShortcutsOpen(false)}>Cerrar</Button>}
>
<ul className="space-y-2 text-sm">
{[
{ k: 'F2', d: 'Ir al buscador de servicios/artículos' },
{ k: 'F9', d: 'Cobrar (abre el modal de cobro si hay líneas)' },
{ k: '+ / −', d: 'Cantidad de la última línea (con el ticket enfocado)' },
{ k: 'Esc', d: 'Cerrar el modal abierto' },
].map((s) => (
<li key={s.k} className="flex items-start gap-3">
<span className="shrink-0 rounded-md border border-theme-border-strong bg-theme-bg px-2 py-0.5 font-mono text-xs text-theme-heading">{s.k}</span>
<span className="text-theme-muted">{s.d}</span>
</li>
))}
</ul>
</Modal>
{/* Abrir caja sin salir del POS */}
<Modal
isOpen={cajaModalOpen}
onClose={() => setCajaModalOpen(false)}
title="Abrir caja"
maxWidth="sm"
footer={
<>
<Button variant="outline" onClick={() => setCajaModalOpen(false)}>Cancelar</Button>
<Button onClick={abrirCajaDesdePos} loading={cajaAbriendo}>Abrir caja</Button>
</>
}
>
<div className="space-y-4">
<p className="text-sm text-theme-muted">
Se abre el corte de caja de hoy sin perder el ticket. El cierre guiado (conteo por método)
se hace en <Link to="/cortes" className="underline font-medium text-theme-heading">Cortes de caja</Link>.
</p>
<Input
label="Efectivo inicial (fondo de caja)"
type="number"
min={0}
step={0.01}
value={cajaFondo}
onChange={(e) => setCajaFondo(e.target.value)}
/>
</div>
</Modal>
{/* Modal de cobro */}
<Modal
isOpen={cobroOpen}

277
frontend/src/pages/Ventas.tsx
View File

@@ -1,6 +1,6 @@
import type { FC } from 'react';
import { useEffect, useState, useCallback } from 'react';
import { Plus, Trash2, CreditCard, ShoppingCart, Search, Undo2, Download, Printer } from 'lucide-react';
import { Fragment, useEffect, useState, useCallback } from 'react';
import { Plus, Trash2, CreditCard, ShoppingCart, Search, Undo2, Download, Printer, ChevronDown, ChevronRight, Ban } from 'lucide-react';
import Layout from '../components/Layout';
import { usePatientDrawer } from '../components/PatientDrawer';
import TicketPrint from '../components/TicketPrint';
@@ -21,6 +21,12 @@ import {
} from '../components/ui';
import { odooApi, type Sale, type SaleLine, type Service, type Patient, type Doctor } from '../services/odoo';
import { exportToExcel } from '../lib/exporter';
import { useAuth } from '../lib/auth';
import { DATE_PRESETS, rangeForPreset, readDateFilterPrefs, writeDateFilterPrefs, type DatePreset } from '../lib/dateRange';
// Rango de fechas recordado entre visitas (igual que los presets de la agenda)
const FILTERS_KEY = 'skeen_ventas_filtros';
const ROLES_CANCELAN = ['admin', 'gerencia'];
interface LineForm {
service_id: string;
@@ -40,6 +46,8 @@ const paymentMethods = ['Efectivo', 'Tarjeta', 'Transferencia', 'MercadoPago'];
const Ventas: FC = () => {
const { openPatient } = usePatientDrawer();
const { user } = useAuth();
const puedeCancelar = ROLES_CANCELAN.includes(user?.role || '');
const [sales, setSales] = useState<Sale[]>([]);
const [services, setServices] = useState<Service[]>([]);
const [patients, setPatients] = useState<Patient[]>([]);
@@ -60,6 +68,12 @@ const Ventas: FC = () => {
const [refunding, setRefunding] = useState(false);
const [refundAmount, setRefundAmount] = useState('');
const [refundReason, setRefundReason] = useState('');
// Cancelación con nota de crédito (admin/gerencia)
const [cancelOpen, setCancelOpen] = useState<Sale | null>(null);
const [cancelReason, setCancelReason] = useState('');
const [cancelling, setCancelling] = useState(false);
// Detalle expandido en línea (varias ventas a la vez, sin modales)
const [expandedId, setExpandedId] = useState<number | null>(null);
// Reimprimir ticket de una venta ya registrada
const [printSale, setPrintSale] = useState<Sale | null>(null);
const [search, setSearch] = useState('');
@@ -69,11 +83,36 @@ const Ventas: FC = () => {
const [totalPages, setTotalPages] = useState(0);
const [patientSearch, setPatientSearch] = useState('');
// ---- Rango de fechas recordado (presets) ----
const saved = readDateFilterPrefs(FILTERS_KEY);
const [preset, setPreset] = useState<DatePreset>(saved?.preset || 'mes');
const [start, setStart] = useState(saved?.start || rangeForPreset('mes').start);
const [end, setEnd] = useState(saved?.end || rangeForPreset('mes').end);
const aplicarPreset = (p: DatePreset) => {
setPreset(p);
if (p !== 'custom') {
const r = rangeForPreset(p);
setStart(r.start);
setEnd(r.end);
writeDateFilterPrefs(FILTERS_KEY, { preset: p, ...r });
} else {
writeDateFilterPrefs(FILTERS_KEY, { preset: p, start, end });
}
};
useEffect(() => {
writeDateFilterPrefs(FILTERS_KEY, { preset, start, end });
}, [preset, start, end]);
const loadSales = useCallback(async () => {
try {
setLoading(true);
setError(null);
const res = await odooApi.getSales({ search, page, page_size: pageSize });
const res = await odooApi.getSales({
search, page, page_size: pageSize,
...(preset !== 'custom' || (start && end) ? { date_from: start, date_to: end } : {}),
});
if (res.status === 'success') {
setSales(res.sales);
setTotal(res.total ?? 0);
@@ -86,7 +125,7 @@ const Ventas: FC = () => {
} finally {
setLoading(false);
}
}, [search, page, pageSize]);
}, [search, page, pageSize, start, end, preset]);
const loadRefs = useCallback(async () => {
try {
@@ -251,6 +290,42 @@ const Ventas: FC = () => {
}
};
// ---- Cancelación con nota de crédito ----
const openCancel = (sale: Sale) => {
setCancelOpen(sale);
setCancelReason('');
};
const submitCancel = async () => {
if (!cancelOpen) return;
if (!cancelReason.trim()) {
toast.error('El motivo de cancelación es obligatorio');
return;
}
try {
setCancelling(true);
const res = await odooApi.cancelSale(cancelOpen.id, { reason: cancelReason.trim() });
const r = res.result;
const partes = [
r?.points_reversed ? `${r.points_reversed} pts revertidos` : '',
r?.points_restored ? `${r.points_restored} pts reintegrados` : '',
r?.stock_moves ? `${r.stock_moves} artículos devueltos a inventario` : '',
].filter(Boolean);
toast.success(`Venta ${cancelOpen.name} cancelada${partes.length ? ` · ${partes.join(' · ')}` : ''}`);
setCancelOpen(null);
setCancelReason('');
await loadSales();
} catch (err) {
const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
toast.error(msg || 'Error al cancelar la venta');
console.error(err);
} finally {
setCancelling(false);
}
};
const toggleExpand = (id: number) => setExpandedId((prev) => (prev === id ? null : id));
const exportSales = async () => {
try {
await exportToExcel({
@@ -319,7 +394,7 @@ const Ventas: FC = () => {
<Card>
<Card.Body>
<div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-4 sm:mb-6">
<div className="flex flex-col sm:flex-row sm:items-center gap-3 mb-3">
<div className="relative w-full sm:max-w-sm">
<Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-theme-muted" />
<Input
@@ -331,6 +406,40 @@ const Ventas: FC = () => {
</div>
</div>
{/* Presets de fecha (se recuerdan al volver) */}
<div className="flex flex-wrap items-center gap-1.5 mb-4">
{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-all ${
preset === p.value
? 'bg-theme-accent text-theme-inverse border-theme-accent'
: 'bg-theme-bg text-theme-muted border-theme-border hover:border-theme-border-strong'
}`}
>
{p.label}
</button>
))}
<div className="flex items-center gap-2 sm:ml-auto">
<Input
label="Desde"
type="date"
value={start}
onChange={(e) => { setStart(e.target.value); setPreset('custom'); }}
className="sm:max-w-[160px]"
/>
<Input
label="Hasta"
type="date"
value={end}
onChange={(e) => { setEnd(e.target.value); setPreset('custom'); }}
className="sm:max-w-[160px]"
/>
</div>
</div>
{error && <p className="text-rose-600 text-sm mb-4">{error}</p>}
{loading ? (
@@ -349,6 +458,7 @@ const Ventas: FC = () => {
<table className="w-full">
<thead className="bg-theme-bg">
<tr>
<th className="w-8 p-3" />
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Referencia</th>
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Paciente</th>
<th className="text-left p-3 text-xs font-medium text-theme-muted uppercase">Total</th>
@@ -358,48 +468,129 @@ const Ventas: FC = () => {
</tr>
</thead>
<tbody className="divide-y">
{sales.map((s) => (
<tr key={s.id} className="hover:bg-theme-bg">
<td className="p-3 text-sm text-theme-muted">{s.name}</td>
{sales.map((s) => {
const cancelada = s.state === 'cancelled';
const abierta = expandedId === s.id;
return (
<Fragment key={s.id}>
<tr
className={`hover:bg-theme-bg cursor-pointer ${abierta ? 'bg-theme-bg' : ''}`}
onClick={() => toggleExpand(s.id)}
title="Click para ver las líneas de la venta"
>
<td className="p-3 text-theme-muted">
{abierta ? <ChevronDown size={15} /> : <ChevronRight size={15} />}
</td>
<td className={`p-3 text-sm text-theme-muted ${cancelada ? 'line-through' : ''}`}>{s.name}</td>
<td className="p-3 text-sm font-medium text-theme-heading">
<button
type="button"
onClick={() => openPatient(s.patient_id)}
onClick={(e) => { e.stopPropagation(); openPatient(s.patient_id); }}
className="hover:underline hover:text-theme-accent text-left"
title="Abrir ficha del paciente"
>
{s.patient}
</button>
</td>
<td className="p-3 text-sm font-semibold text-theme-heading">${s.total}</td>
<td className={`p-3 text-sm font-semibold text-theme-heading ${cancelada ? 'line-through text-theme-muted' : ''}`}>${s.total}</td>
<td className="p-3 text-sm text-theme-muted hidden md:table-cell">${s.amount_paid}</td>
<td className="p-3">
<div className="flex items-center gap-2">
<Badge variant={badgeForSaleState(s.state)}>{s.state}</Badge>
<div className="flex items-center gap-2 flex-wrap">
<Badge variant={badgeForSaleState(s.state)}>{cancelada ? 'Cancelada' : s.state}</Badge>
{s.refunded && <Badge variant="warning">Devuelta</Badge>}
</div>
{cancelada && s.cancel_reason && (
<p className="text-[11px] text-rose-700 mt-1 max-w-[220px]" title={s.cancel_reason}>
Motivo: {s.cancel_reason}
{s.cancelled_by ? ` · ${s.cancelled_by}` : ''}
</p>
)}
</td>
<td className="p-3">
<div className="flex items-center gap-1">
<Button variant="ghost" size="sm" onClick={() => setPrintSale(s)} title="Reimprimir ticket">
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); 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">
{s.amount_due > 0 && !cancelada && (
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); openPay(s); }} title="Pagar">
<CreditCard size={16} className="text-theme-heading mr-1.5" />
Pagar
</Button>
)}
{s.amount_paid > 0 && s.state !== 'cancelled' && (
<Button variant="ghost" size="sm" onClick={() => openRefund(s)} title="Devolución">
{s.amount_paid > 0 && !cancelada && (
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); openRefund(s); }} title="Devolución">
<Undo2 size={16} className="text-amber-600 mr-1.5" />
Devolución
</Button>
)}
{puedeCancelar && !cancelada && (
<Button variant="ghost" size="sm" onClick={(e) => { e.stopPropagation(); openCancel(s); }} title="Cancelar venta (nota de crédito)">
<Ban size={16} className="text-rose-600 mr-1.5" />
Cancelar venta
</Button>
)}
</div>
</td>
</tr>
))}
{abierta && (
<tr className="bg-theme-bg">
<td />
<td colSpan={6} className="p-3 pt-0">
<div className="rounded-xl border border-theme-border bg-theme-surface p-3">
<p className="text-xs font-medium text-theme-muted uppercase mb-2">
Líneas de {s.name} · {s.date}
</p>
{s.lines.length === 0 ? (
<p className="text-sm text-theme-muted">Sin líneas registradas.</p>
) : (
<table className="w-full text-sm">
<thead>
<tr className="text-[11px] uppercase text-theme-muted">
<th className="text-left py-1">Concepto</th>
<th className="text-right py-1 w-16">Cant</th>
<th className="text-right py-1 w-24">Precio</th>
<th className="text-right py-1 w-24">Subtotal</th>
</tr>
</thead>
<tbody className="divide-y divide-theme-border">
{s.lines.map((l, i) => (
<tr key={l.id ?? i}>
<td className="py-1 text-theme-heading">
{l.service || l.item || l.description}
{l.is_prescribed && l.prescribed_by && (
<span className="text-[11px] text-theme-muted"> · recetado por {l.prescribed_by}</span>
)}
</td>
<td className="py-1 text-right text-theme-muted">{l.quantity}</td>
<td className="py-1 text-right text-theme-muted">${l.price_unit}</td>
<td className="py-1 text-right font-medium text-theme-heading">${l.subtotal}</td>
</tr>
))}
</tbody>
</table>
)}
<div className="flex flex-wrap gap-x-5 gap-y-1 mt-2 text-xs text-theme-muted">
<span>Subtotal ${s.subtotal}</span>
<span>Descuento ${s.discount}</span>
<span>Total ${s.total}</span>
<span>Pagado ${s.amount_paid}</span>
<span>Por cobrar ${s.amount_due}</span>
</div>
{cancelada && (
<p className="mt-2 text-xs text-rose-700">
Cancelada{s.cancelled_at ? ` el ${s.cancelled_at}` : ''}
{s.cancelled_by ? ` por ${s.cancelled_by}` : ''}
{s.cancel_reason ? ` · Motivo: ${s.cancel_reason}` : ''}
</p>
)}
{s.notes && <p className="mt-1 text-xs text-theme-muted">Notas: {s.notes}</p>}
</div>
</td>
</tr>
)}
</Fragment>
);
})}
</tbody>
</table>
</div>
@@ -426,18 +617,21 @@ const Ventas: FC = () => {
label: 'Estado',
value: (
<div className="flex items-center gap-2">
<Badge variant={badgeForSaleState(s.state)}>{s.state}</Badge>
<Badge variant={badgeForSaleState(s.state)}>{s.state === 'cancelled' ? 'Cancelada' : s.state}</Badge>
{s.refunded && <Badge variant="warning">Devuelta</Badge>}
</div>
),
},
...(s.state === 'cancelled' && s.cancel_reason
? [{ label: 'Motivo', value: s.cancel_reason }]
: []),
]}
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 && (
{s.amount_due > 0 && s.state !== 'cancelled' && (
<Button variant="ghost" size="sm" onClick={() => openPay(s)}>
<CreditCard size={16} className="text-theme-heading" />
</Button>
@@ -447,6 +641,11 @@ const Ventas: FC = () => {
<Undo2 size={16} className="text-amber-600" />
</Button>
)}
{puedeCancelar && s.state !== 'cancelled' && (
<Button variant="ghost" size="sm" onClick={() => openCancel(s)} title="Cancelar venta">
<Ban size={16} className="text-rose-600" />
</Button>
)}
</div>
}
/>
@@ -675,6 +874,44 @@ const Ventas: FC = () => {
)}
</Modal>
<Modal
isOpen={!!cancelOpen}
onClose={() => setCancelOpen(null)}
title={`Cancelar venta ${cancelOpen?.name || ''}`}
maxWidth="sm"
footer={
<>
<Button variant="outline" onClick={() => setCancelOpen(null)}>Volver</Button>
<Button variant="danger" onClick={submitCancel} loading={cancelling}>Cancelar venta</Button>
</>
}
>
{cancelOpen && (
<div className="space-y-4">
<p className="text-sm text-theme-muted">
Paciente: <span className="font-medium text-theme-heading">{cancelOpen.patient}</span>
</p>
<p className="text-sm text-theme-muted">
Total: <span className="font-medium text-theme-heading">${cancelOpen.total}</span>
{' · '}
Pagado: <span className="font-medium text-theme-heading">${cancelOpen.amount_paid}</span>
</p>
<div className="rounded-lg bg-rose-50 border border-rose-200 px-3 py-2 text-xs text-rose-800">
Se emite la nota de crédito: la venta se marca como cancelada y deja de contar en
ingresos, comisiones y reportes. Se revierten los puntos del monedero otorgados por
esta venta (y se reintegran los canjeados) y los artículos vuelven al inventario.
La venta no se borra: queda en el historial con su motivo.
</div>
<TextArea
label="Motivo de cancelación *"
placeholder="Ej. cobro duplicado, error de captura, servicio no realizado..."
value={cancelReason}
onChange={(e) => setCancelReason(e.target.value)}
/>
</div>
)}
</Modal>
{/* Reimprimir ticket de la venta (formato térmico ~80mm) */}
<TicketPrint
isOpen={!!printSale}

60
frontend/src/services/odoo.ts
View File

@@ -388,6 +388,46 @@ export interface Sale {
refund_amount?: number;
refund_reason?: string;
refunded_at?: string | null;
notes?: string;
cancel_reason?: string;
cancelled_by?: string;
cancelled_at?: string | null;
cancel_points_reversed?: number;
cancel_points_restored?: number;
}
// "Repetir última venta" (POS): línea de la última venta con el precio vigente
export interface LastSaleLine {
kind: 'service' | 'item';
service_id: number | null;
item_id: number | null;
name: string;
description: string;
quantity: number;
price_last: number;
price_current: number | null;
price_changed: boolean;
missing: boolean;
active: boolean;
stock: number | null;
unit: string | null;
}
export interface LastSaleResponse {
status: string;
sale: Sale | null;
lines: LastSaleLine[];
warnings: string[];
}
export interface PatientPackage {
service_id: number;
name: string;
package_sessions: number;
total: number;
used: number;
remaining: number;
next_date: string | null;
}
export interface MySaleItem {
@@ -464,7 +504,7 @@ export interface Birthday {
export type InventoryKind = 'producto' | 'consumible';
export type InventoryLevel = 'out' | 'critical' | 'low' | 'optimal';
export type InventoryMoveType = 'compra' | 'venta' | 'baja' | 'ajuste';
export type InventoryMoveType = 'compra' | 'venta' | 'baja' | 'ajuste' | 'cancelacion';
export interface InventoryItem {
id: number;
@@ -1350,6 +1390,24 @@ export const odooApi = {
return data;
},
// Cancelación con nota de crédito (permiso admin/gerencia)
async cancelSale(id: number, payload: { reason: string; restore_stock?: boolean }): Promise<{ status: string; sale: Sale; result: { points_reversed: number; points_restored: number; stock_moves: number } }> {
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/sales/${id}/cancel`, payload);
return data;
},
// Última venta del paciente con precios actuales del catálogo (POS: repetir venta)
async getLastSale(patientId: number): Promise<LastSaleResponse> {
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/sales/last`, { params: { patient_id: patientId } });
return data;
},
// Paquetes del paciente con sesiones restantes (POS: aviso en el ticket)
async getPatientPackages(patientId: number): Promise<{ status: string; packages: PatientPackage[] }> {
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/patients/${patientId}/packages`);
return data;
},
// Cortes de caja
async getCashClosings(date?: string): Promise<{ status: string; cash_closings: CashClosing[] }> {
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/cash_closings`, { params: date ? { date } : {} });