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

Punto 11: editor de diseno de tickets en Configuracion > Tickets

Browse Source 
- Nuevo modelo skeen.ticket.config (AbstractModel) con layout, datos de clinica
  y logo en ir.config_parameter; _mezclar() hace que layouts viejos hereden las
  secciones nuevas; _validar() rechaza valores imposibles y textos largos.
- Endpoints GET/PUT /ticket_config, PUT /ticket_config/clinica,
  POST /ticket_config/reset (reset solo admin) con auditoria en skeen_config_audit.
- Los datos de la clinica pasan de localStorage (cada caja imprimia distinto)
  a configuracion compartida en el servidor.
- TicketDoc.tsx renderiza segun el diseno: ancho 58/80mm, fuente, tamano de letra,
  separador, mayusculas, orden de bloques y 29 secciones activables.
- TicketDesigner.tsx: editor completo con vista previa en vivo, reorden de bloques,
  textos personalizables y carga de logo.
- TicketPrint.tsx ahora es un wrapper de TicketDoc; ReciboPrint, EstadoCuentaPrint,
  RecetaPrint, CortePrint y ConteoPrint usan useClinicaPrint().
- _sale_to_dict expone telefono del paciente, medico que atendio y datos de paquete;
  pos_checkout devuelve recibido/cambio en MXN y USD para imprimirlos.
This commit is contained in:
Consultoría Alcaraz Salazar
2026-09-24 18:19:51 +00:00
parent e89bcdca3a
commit 72f12946c3
18 changed files with 1433 additions and 228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
frontend/src/components/CortePrint.tsx
View File

@@ -2,34 +2,20 @@ import type { FC } from 'react';
import { Printer } from 'lucide-react';
import { Button, Modal } from './ui';
import type { CashClosing } from '../services/odoo';
import { useClinicaPrint } from '../lib/ticketConfig';
// Corte de caja imprimible. Sigue el patrón de impresión existente
// (RecetaPrint / EstadoCuentaPrint / TicketPrint): contenido en un
// div.print-ticket + window.print(); el CSS de @media print en index.css
// oculta el resto de la página.
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: '' };
};
const money = (v: number) =>
'$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
export const CortePrint: FC<{ corte: CashClosing | null; onClose: () => void }> = ({ corte, onClose }) => {
if (!corte) return null;
const clinic = clinicSettings();
const clinic = useClinicaPrint();
const fila = (label: string, valor: number) => (
<tr>
@@ -53,9 +39,9 @@ export const CortePrint: FC<{ corte: CashClosing | null; onClose: () => void }>
<Modal isOpen={!!corte} onClose={onClose} title={`Corte de caja ${corte.name}`} maxWidth="lg">
<div className="print-ticket bg-white text-[#222] p-5 rounded-xl border border-theme-border text-[13px] leading-snug">
<div className="text-center mb-3">
<p className="font-bold text-[15px]">{clinic.name}</p>
{clinic.address && <p className="text-[11px] text-[#555]">{clinic.address}</p>}
{clinic.phone && <p className="text-[11px] text-[#555]">{clinic.phone}</p>}
<p className="font-bold text-[15px]">{clinic.nombre}</p>
{clinic.direccion && <p className="text-[11px] text-[#555]">{clinic.direccion}</p>}
{clinic.telefono && <p className="text-[11px] text-[#555]">{clinic.telefono}</p>}
<p className="font-semibold mt-1">CORTE DE CAJA {corte.name}</p>
<p className="text-[11px] text-[#555]">Fecha: {corte.date} · Cerró: {corte.user || '—'}</p>
</div>

26
frontend/src/components/EstadoCuentaPrint.tsx
View File

@@ -3,22 +3,8 @@ import { useEffect, useState } from 'react';
import { Printer, Wallet, AlertTriangle } from 'lucide-react';
import { Button, Modal, Skeleton, toast } from './ui';
import { odooApi, type Patient, type Appointment, type Sale, type Visita, type EstadoCuenta } from '../services/odoo';
import { useClinicaPrint } from '../lib/ticketConfig';
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: '' };
};
const fmtMoney = (n: number) =>
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 2 });
@@ -92,7 +78,7 @@ export const EstadoCuentaPrint: FC<EstadoCuentaPrintProps> = ({ isOpen, onClose,
if (!paciente) return null;
const clinic = clinicSettings();
const clinic = useClinicaPrint();
const fechaEmision = new Date().toLocaleDateString('es-MX', { day: '2-digit', month: 'long', year: 'numeric' });
const totalVentas = ventas.reduce((a, v) => a + v.total, 0);
const totalPagado = ventas.reduce((a, v) => a + v.amount_paid, 0);
@@ -131,9 +117,9 @@ export const EstadoCuentaPrint: FC<EstadoCuentaPrintProps> = ({ isOpen, onClose,
{/* Encabezado */}
<div className="flex items-start justify-between border-b-2 border-[#1abc9c] pb-3 mb-4">
<div>
<p className="text-xl font-bold">{clinic.name}</p>
{clinic.address && <p className="text-xs text-[#555]">{clinic.address}</p>}
{clinic.phone && <p className="text-xs text-[#555]">Tel: {clinic.phone}</p>}
<p className="text-xl font-bold">{clinic.nombre}</p>
{clinic.direccion && <p className="text-xs text-[#555]">{clinic.direccion}</p>}
{clinic.telefono && <p className="text-xs text-[#555]">Tel: {clinic.telefono}</p>}
</div>
<div className="text-right">
<p className="text-lg font-bold">Estado de Cuenta</p>
@@ -272,7 +258,7 @@ export const EstadoCuentaPrint: FC<EstadoCuentaPrintProps> = ({ isOpen, onClose,
{wallet && (
<p className="text-xs text-[#555] mt-1">Monedero: {wallet.points} puntos disponibles ({fmtMoney(wallet.equivalent_mxn)}).</p>
)}
<p className="text-[10px] text-[#777] mt-3 text-center">Documento informativo generado por {clinic.name}.</p>
<p className="text-[10px] text-[#777] mt-3 text-center">Documento informativo generado por {clinic.nombre}.</p>
</div>
</div>
)}

26
frontend/src/components/RecetaPrint.tsx
View File

@@ -3,22 +3,8 @@ import { useEffect, useState } from 'react';
import { Printer } from 'lucide-react';
import { Button, Modal, Select, TextArea } from './ui';
import { odooApi, type Receta } from '../services/odoo';
import { useClinicaPrint } from '../lib/ticketConfig';
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: '' };
};
interface RecetaSectionProps {
value: string;
@@ -82,7 +68,7 @@ interface RecetaPrintProps {
/** Vista de impresión de la receta médica (formato imprimible) */
export const RecetaPrint: FC<RecetaPrintProps> = ({ isOpen, onClose, paciente, doctor, contenido }) => {
const clinic = clinicSettings();
const clinic = useClinicaPrint();
const fecha = new Date().toLocaleDateString('es-MX', { day: '2-digit', month: 'long', year: 'numeric' });
return (
@@ -105,9 +91,9 @@ export const RecetaPrint: FC<RecetaPrintProps> = ({ isOpen, onClose, paciente, d
{/* Encabezado clínica */}
<div className="flex items-start justify-between border-b-2 border-[#1abc9c] pb-3 mb-4">
<div>
<p className="text-xl font-bold">{clinic.name}</p>
{clinic.address && <p className="text-xs text-[#555]">{clinic.address}</p>}
{clinic.phone && <p className="text-xs text-[#555]">Tel: {clinic.phone}</p>}
<p className="text-xl font-bold">{clinic.nombre}</p>
{clinic.direccion && <p className="text-xs text-[#555]">{clinic.direccion}</p>}
{clinic.telefono && <p className="text-xs text-[#555]">Tel: {clinic.telefono}</p>}
</div>
<p className="text-sm text-[#555]">{fecha}</p>
</div>
@@ -128,7 +114,7 @@ export const RecetaPrint: FC<RecetaPrintProps> = ({ isOpen, onClose, paciente, d
<div className="mt-10 text-center">
<div className="inline-block border-t border-[#333] pt-1.5 px-8">
<p className="text-sm font-semibold">{doctor || 'Médico tratante'}</p>
<p className="text-xs text-[#555]">{clinic.name}</p>
<p className="text-xs text-[#555]">{clinic.nombre}</p>
</div>
</div>
</div>

24
frontend/src/components/ReciboPrint.tsx
View File

@@ -2,6 +2,7 @@ import type { FC } from 'react';
import { Printer } from 'lucide-react';
import { Button, Modal } from './ui';
import type { ReceiptData } from '../services/odoo';
import { useClinicaPrint } from '../lib/ticketConfig';
// Recibo de pago imprimible. Sigue el patrón de impresión existente
// (TicketPrint / CortePrint / EstadoCuentaPrint): contenido en un
@@ -16,25 +17,10 @@ const METODO_LABELS: Record<string, string> = {
const money = (v: number) =>
'$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: '' };
};
export const ReciboPrint: FC<{ receipt: ReceiptData | null; onClose: () => void }> = ({ receipt, onClose }) => {
if (!receipt) return null;
const clinic = clinicSettings();
const clinic = useClinicaPrint();
// Recibo de recarga de saldo a favor (anticipo): mismo formato, sin el
// desglose de adeudo y mostrando el saldo a favor resultante.
const esDeposito = receipt.tipo === 'deposito';
@@ -43,9 +29,9 @@ export const ReciboPrint: FC<{ receipt: ReceiptData | null; onClose: () => void
<Modal isOpen={!!receipt} onClose={onClose} title={`Recibo de pago ${receipt.folio}`} maxWidth="md">
<div className="print-recibo bg-white text-[#222] p-6 rounded-xl border border-theme-border text-[13px] leading-snug">
<div className="text-center mb-4 border-b border-[#ccc] pb-3">
<p className="font-bold text-[15px]">{clinic.name}</p>
{clinic.address && <p className="text-[11px] text-[#555]">{clinic.address}</p>}
{clinic.phone && <p className="text-[11px] text-[#555]">{clinic.phone}</p>}
<p className="font-bold text-[15px]">{clinic.nombre}</p>
{clinic.direccion && <p className="text-[11px] text-[#555]">{clinic.direccion}</p>}
{clinic.telefono && <p className="text-[11px] text-[#555]">{clinic.telefono}</p>}
<p className="font-semibold mt-2 tracking-wide">{esDeposito ? 'RECIBO DE SALDO A FAVOR' : 'RECIBO DE PAGO'}</p>
<p className="text-[11px] text-[#555]">Folio {receipt.folio} · {receipt.date}</p>
</div>

518
frontend/src/components/TicketDesigner.tsx Normal file
View File

@@ -0,0 +1,518 @@
import type { FC } from 'react';
import { useEffect, useMemo, useRef, useState } from 'react';
import { ArrowDown, ArrowUp, Image as ImageIcon, RotateCcw, Save, GripVertical } from 'lucide-react';
import { Button, Card, Input, Select, TextArea, toast } from './ui';
import TicketDoc, { type TicketData } from './TicketDoc';
import {
cargarTicketConfig,
recargarTicketConfig,
useTicketConfig,
type TicketConfig,
type TicketLayout,
} from '../lib/ticketConfig';
import { odooApi } from '../services/odoo';
import { useAuth } from '../lib/auth';
// Editor del diseño del ticket (Configuración › Tickets).
//
// Todo se ve reflejado en la vista previa en vivo: es un papel térmico, así que
// la forma más segura de editar es ver el resultado mientras se mueve cada
// opción. Al guardar se escribe en el servidor (ir.config_parameter) y las
// demás cajas lo toman con la siguiente impresión.
const SECCIONES: { bloque: string; label: string; claves: { key: string; label: string }[] }[] = [
{
bloque: 'encabezado',
label: 'Encabezado',
claves: [
{ key: 'nombre_clinica', label: 'Nombre de la clínica' },
{ key: 'direccion', label: 'Dirección' },
{ key: 'telefono_clinica', label: 'Teléfono' },
{ key: 'sucursal', label: 'Sucursal' },
{ key: 'rfc', label: 'RFC' },
{ key: 'mensaje_encabezado', label: 'Mensaje de encabezado' },
],
},
{
bloque: 'cliente',
label: 'Datos del paciente',
claves: [
{ key: 'folio', label: 'Folio' },
{ key: 'fecha', label: 'Fecha' },
{ key: 'paciente', label: 'Paciente' },
{ key: 'telefono_paciente', label: 'Teléfono del paciente' },
{ key: 'doctor', label: 'Doctor que atendió' },
{ key: 'cajero', label: 'Quién cobró' },
],
},
{
bloque: 'conceptos',
label: 'Conceptos',
claves: [
{ key: 'conceptos', label: 'Lista de conceptos' },
{ key: 'detalle_conceptos', label: 'Cantidad × precio en cada línea' },
],
},
{
bloque: 'totales',
label: 'Totales',
claves: [
{ key: 'subtotal', label: 'Subtotal' },
{ key: 'descuento', label: 'Descuento' },
{ key: 'puntos_canjeados', label: 'Puntos canjeados' },
{ key: 'total', label: 'Total' },
{ key: 'total_usd', label: 'Equivalente en dólares' },
],
},
{
bloque: 'pago',
label: 'Pago',
claves: [
{ key: 'metodo_pago', label: 'Método de pago' },
{ key: 'recibido', label: 'Recibido' },
{ key: 'cambio', label: 'Cambio' },
{ key: 'pagado', label: 'Pagado' },
{ key: 'saldo_pendiente', label: 'Saldo pendiente' },
],
},
{
bloque: 'monedero',
label: 'Monedero',
claves: [
{ key: 'puntos_ganados', label: 'Puntos ganados' },
{ key: 'monedero', label: 'Saldo del monedero' },
],
},
{
bloque: 'pie',
label: 'Pie',
claves: [
{ key: 'notas', label: 'Notas del ticket' },
{ key: 'politica', label: 'Aviso de validez fiscal' },
{ key: 'mensaje_pie', label: 'Mensaje de despedida' },
],
},
];
const MUESTRA: TicketData = {
folio: 'VENTA-00123',
fecha: '24/09/2026 12:35',
paciente: 'María Fernanda Ruiz',
telefono_paciente: '661 112 3456',
doctor: 'Dra. Aranza Beltrán',
cajero: 'recepcion',
lines: [
{ name: 'Limpieza facial profunda', qty: 1, price: 1250, subtotal: 1250 },
{ name: 'Peel químico', qty: 1, price: 1500, subtotal: 1500 },
{ name: 'Pantalla mineral SPF 50', qty: 2, price: 385, subtotal: 770 },
],
subtotal: 3520,
discount: 320,
total: 3200,
metodo: 'Mixto',
recibido: 3500,
cambio: 300,
amount_paid: 3200,
amount_due: 0,
puntos_usados: 200,
puntos_ganados: 320,
wallet_points: 1480,
rate_used: 17.25,
notas: 'Segunda sesión de peel en 4 semanas.',
sucursal: 'Rosarito Centro',
};
const CLINICA_CAMPOS: { key: string; label: string; placeholder?: string }[] = [
{ key: 'nombre', label: 'Nombre de la clínica' },
{ key: 'direccion', label: 'Dirección' },
{ key: 'telefono', label: 'Teléfono' },
{ key: 'email', label: 'Correo' },
{ key: 'sitio', label: 'Sitio web' },
{ key: 'rfc', label: 'RFC (opcional)' },
{ key: 'sucursal', label: 'Sucursal (opcional)' },
];
export const TicketDesigner: FC = () => {
const config = useTicketConfig();
const { user } = useAuth();
// Restaurar el formato original queda solo para administración del sistema;
// gerencia puede editar y guardar su propio diseño.
const esAdmin = user?.role === 'admin';
const [draft, setDraft] = useState<TicketConfig>(config);
const [guardando, setGuardando] = useState(false);
const [nota, setNota] = useState('');
const [logoError, setLogoError] = useState('');
const archivoRef = useRef<HTMLInputElement>(null);
// Al terminar de cargar del servidor, sincroniza el borrador (la primera
// renderización puede venir del cache local).
useEffect(() => {
cargarTicketConfig().then((c) => setDraft(c));
}, []);
const sucio = useMemo(
() => JSON.stringify(draft) !== JSON.stringify(config),
[draft, config],
);
const setLayout = (parche: Partial<TicketLayout>) =>
setDraft((d) => ({ ...d, layout: { ...d.layout, ...parche } }));
const toggleSeccion = (key: string) =>
setDraft((d) => ({
...d,
layout: {
...d.layout,
secciones: { ...d.layout.secciones, [key]: d.layout.secciones[key] === false },
},
}));
const setTexto = (key: keyof TicketLayout['textos'], valor: string) =>
setDraft((d) => ({
...d,
layout: { ...d.layout, textos: { ...d.layout.textos, [key]: valor } },
}));
const setClinica = (key: string, valor: string) =>
setDraft((d) => ({ ...d, clinica: { ...d.clinica, [key]: valor } }));
const moverBloque = (i: number, dir: -1 | 1) =>
setDraft((d) => {
const orden = [...d.layout.bloques];
const j = i + dir;
if (j < 0 || j >= orden.length) return d;
[orden[i], orden[j]] = [orden[j], orden[i]];
return { ...d, layout: { ...d.layout, bloques: orden } };
});
const elegirLogo = (file?: File) => {
setLogoError('');
if (!file) return;
if (file.size > 250 * 1024) {
setLogoError('La imagen pesa más de 250 KB. Use una versión pequeña.');
return;
}
const lector = new FileReader();
lector.onload = () => {
const url = String(lector.result || '');
if (!url.startsWith('data:image/')) {
setLogoError('Solo se admiten imágenes (PNG, JPG o SVG).');
return;
}
setDraft((d) => ({
...d,
logo: url,
clinica: { ...d.clinica, tiene_logo: true },
}));
};
lector.readAsDataURL(file);
};
const guardar = async () => {
try {
setGuardando(true);
const motivo = nota.trim() || 'actualizado desde Configuración';
const resLay = await odooApi.putTicketConfig(draft.layout, motivo);
if (resLay.status !== 'success') {
toast.error(resLay.message || 'No se pudo guardar el diseño');
return;
}
const clinica: Record<string, string> = {};
CLINICA_CAMPOS.forEach((c) => {
clinica[c.key] = String(draft.clinica[c.key as keyof typeof draft.clinica] ?? '');
});
const resCli = await odooApi.putTicketClinica({
clinica,
logo: draft.clinica.tiene_logo ? draft.logo : '',
motivo,
});
if (resCli.status !== 'success') {
toast.error(resCli.message || 'No se pudieron guardar los datos de la clínica');
return;
}
await recargarTicketConfig();
setNota('');
toast.success('Diseño del ticket guardado. Las cajas lo toman al imprimir.');
} catch (err) {
const msg = (err as { response?: { data?: { message?: string } } })?.response?.data?.message;
toast.error(msg || 'No se pudo guardar el diseño');
} finally {
setGuardando(false);
}
};
const restaurar = async () => {
if (!window.confirm('¿Restaurar el diseño original del ticket? Se pierden los cambios guardados.')) {
return;
}
try {
setGuardando(true);
const res = await odooApi.resetTicketConfig();
if (res.status !== 'success') {
toast.error(res.message || 'No se pudo restaurar');
return;
}
const nuevo = await recargarTicketConfig();
setDraft(nuevo);
toast.success('Diseño restaurado al formato original');
} catch {
toast.error('No se pudo restaurar el diseño');
} finally {
setGuardando(false);
}
};
const previewConfig: TicketConfig = draft;
return (
<div className="grid grid-cols-1 xl:grid-cols-[1fr_340px] gap-4 items-start">
<div className="space-y-4">
<Card>
<Card.Body className="space-y-4">
<div>
<h3 className="font-heading font-semibold text-theme-heading">Formato del papel</h3>
<p className="text-xs text-theme-muted mt-0.5">
Ancho de la térmica, tipografía y densidad del texto.
</p>
</div>
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3">
<Select
label="Ancho"
value={draft.layout.ancho}
onChange={(e) => setLayout({ ancho: e.target.value as TicketLayout['ancho'] })}
options={[
{ value: '80mm', label: '80 mm (estándar)' },
{ value: '58mm', label: '58 mm (estrecha)' },
]}
/>
<Select
label="Fuente"
value={draft.layout.fuente}
onChange={(e) => setLayout({ fuente: e.target.value as TicketLayout['fuente'] })}
options={[
{ value: 'monoespaciada', label: 'Monoespaciada' },
{ value: 'sans', label: 'Ariel / sans' },
]}
/>
<Select
label="Tamaño de letra"
value={draft.layout.letra}
onChange={(e) => setLayout({ letra: e.target.value as TicketLayout['letra'] })}
options={[
{ value: 'compacta', label: 'Compacta (cabe más)' },
{ value: 'normal', label: 'Normal' },
{ value: 'grande', label: 'Grande (más legible)' },
]}
/>
<Select
label="Separadores"
value={draft.layout.separador}
onChange={(e) => setLayout({ separador: e.target.value as TicketLayout['separador'] })}
options={[
{ value: 'guiones', label: 'Guiones (---)' },
{ value: 'solida', label: 'Línea sólida' },
{ value: 'ninguna', label: 'Sin línea' },
]}
/>
</div>
<label className="flex items-center gap-2 text-sm text-theme-heading cursor-pointer">
<input
type="checkbox"
className="rounded border-theme-border-strong"
checked={draft.layout.mayusculas}
onChange={(e) => setLayout({ mayusculas: e.target.checked })}
/>
Escribir todo en MAYÚSCULAS
</label>
</Card.Body>
</Card>
<Card>
<Card.Body className="space-y-4">
<div>
<h3 className="font-heading font-semibold text-theme-heading">Rubros del ticket</h3>
<p className="text-xs text-theme-muted mt-0.5">
Marque lo que debe salir impreso. Use las flechas para cambiar el orden de las secciones.
</p>
</div>
<div className="space-y-3">
{[...SECCIONES].sort(
(a, b) => draft.layout.bloques.indexOf(a.bloque) - draft.layout.bloques.indexOf(b.bloque),
).map((grupo) => {
const i = draft.layout.bloques.indexOf(grupo.bloque);
return (
<div key={grupo.bloque} className="rounded-xl border border-theme-border p-3">
<div className="flex items-center justify-between mb-2">
<p className="text-sm font-medium text-theme-heading flex items-center gap-1.5">
<GripVertical size={13} className="text-theme-muted" />
{grupo.label}
</p>
<div className="flex items-center gap-1">
<Button
size="sm"
variant="ghost"
title="Subir sección"
disabled={i <= 0}
onClick={() => moverBloque(i, -1)}
>
<ArrowUp size={14} />
</Button>
<Button
size="sm"
variant="ghost"
title="Bajar sección"
disabled={i >= draft.layout.bloques.length - 1}
onClick={() => moverBloque(i, 1)}
>
<ArrowDown size={14} />
</Button>
</div>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-x-4 gap-y-1.5">
{grupo.claves.map((c) => (
<label
key={c.key}
className="flex items-center gap-2 text-[13px] text-theme-muted cursor-pointer"
>
<input
type="checkbox"
className="rounded border-theme-border-strong"
checked={draft.layout.secciones[c.key] !== false}
onChange={() => toggleSeccion(c.key)}
/>
{c.label}
</label>
))}
</div>
</div>
);
})}
</div>
</Card.Body>
</Card>
<Card>
<Card.Body className="space-y-3">
<div>
<h3 className="font-heading font-semibold text-theme-heading">Textos impresos</h3>
<p className="text-xs text-theme-muted mt-0.5">
Mensajes que salen en el ticket además de los datos de la venta.
</p>
</div>
<TextArea
label="Mensaje de encabezado"
rows={2}
maxLength={240}
placeholder="Ej. Consulta dermatológica y estética"
value={draft.layout.textos.encabezado}
onChange={(e) => setTexto('encabezado', e.target.value)}
/>
<TextArea
label="Mensaje de despedida (pie)"
rows={2}
maxLength={240}
value={draft.layout.textos.pie}
onChange={(e) => setTexto('pie', e.target.value)}
/>
<TextArea
label="Aviso de validez / política"
rows={2}
maxLength={240}
value={draft.layout.textos.politica}
onChange={(e) => setTexto('politica', e.target.value)}
/>
</Card.Body>
</Card>
<Card>
<Card.Body className="space-y-3">
<div>
<h3 className="font-heading font-semibold text-theme-heading">Datos de la clínica</h3>
<p className="text-xs text-theme-muted mt-0.5">
Antes se guardaban en cada computadora; ahora son compartidos para todas las cajas.
</p>
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{CLINICA_CAMPOS.map((c) => (
<Input
key={c.key}
label={c.label}
value={String(draft.clinica[c.key as keyof typeof draft.clinica] ?? '')}
maxLength={160}
onChange={(e) => setClinica(c.key, e.target.value)}
/>
))}
</div>
<div className="flex flex-wrap items-center gap-3 pt-1">
<input
ref={archivoRef}
type="file"
accept="image/png,image/jpeg,image/svg+xml"
className="hidden"
onChange={(e) => elegirLogo(e.target.files?.[0])}
/>
<Button variant="outline" size="sm" onClick={() => archivoRef.current?.click()}>
<ImageIcon size={14} className="mr-1.5" /> Cambiar logo
</Button>
{draft.clinica.tiene_logo && (
<Button
variant="ghost"
size="sm"
onClick={() => setDraft((d) => ({
...d,
logo: '',
clinica: { ...d.clinica, tiene_logo: false },
}))}
>
Quitar logo
</Button>
)}
<span className="text-xs text-theme-muted">PNG o JPG, máximo 250 KB</span>
</div>
{logoError && <p className="text-xs text-rose-600">{logoError}</p>}
</Card.Body>
</Card>
<Card>
<Card.Body className="space-y-3">
<Input
label="Nota del cambio (para la bitácora)"
placeholder="Ej. se quitó el RFC porque las cajas de 58 mm lo cortaban"
value={nota}
onChange={(e) => setNota(e.target.value)}
/>
<div className="flex flex-wrap items-center gap-2">
<Button onClick={guardar} loading={guardando} disabled={!sucio}>
<Save size={15} className="mr-2" /> Guardar diseño
</Button>
{esAdmin && (
<Button variant="outline" onClick={restaurar} disabled={guardando}>
<RotateCcw size={15} className="mr-2" /> Restaurar original
</Button>
)}
{sucio && (
<span className="text-xs text-amber-700">
Hay cambios sin guardar.
</span>
)}
</div>
</Card.Body>
</Card>
</div>
<div className="xl:sticky xl:top-4">
<p className="text-xs font-medium text-theme-muted uppercase mb-2">Vista previa</p>
<div className="rounded-2xl bg-theme-bg border border-theme-border p-4 overflow-auto max-h-[calc(100vh-8rem)]">
<TicketDoc data={MUESTRA} config={previewConfig} preview />
</div>
<p className="text-[11px] text-theme-muted mt-2">
La vista previa usa una venta de ejemplo con todos los rubros. Los datos reales se toman
de la venta al imprimir.
</p>
</div>
</div>
);
};
export default TicketDesigner;

277
frontend/src/components/TicketDoc.tsx Normal file
View File

@@ -0,0 +1,277 @@
import type { FC, ReactElement } from 'react';
import type { TicketConfig } from '../lib/ticketConfig';
// Documento ticket según el diseño guardado en Configuración › Tickets.
// Se renderiza igual en la vista previa del editor, en el modal del POS y en
// la impresión (la clase print-ticket es la que el CSS de @media print aísla).
export interface TicketLinea {
name: string;
qty: number;
price: number;
subtotal: number;
}
export interface TicketData {
folio: string;
fecha: string;
paciente: string;
lines: TicketLinea[];
subtotal: number;
discount: number;
total: number;
metodo?: string | null;
puntos_usados?: number;
puntos_ganados?: number;
wallet_points?: number | null;
cambio?: number;
cambio_usd?: number;
recibido?: number;
recibido_usd?: number;
rate_used?: number | null;
amount_paid?: number;
amount_due?: number;
// Rubros opcionales que el diseño puede mostrar
cajero?: string;
doctor?: string;
telefono_paciente?: string;
notas?: string;
sucursal?: string;
}
const ANCHO_PANTALLA: Record<string, number> = { '58mm': 210, '80mm': 300 };
const PX_LETRA: Record<string, number> = { compacta: 10, normal: 12, grande: 14 };
const FUENTE: Record<string, string> = {
monoespaciada: 'ui-monospace, SFMono-Regular, Menlo, monospace',
sans: 'ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, sans-serif',
};
const fmtMXN = (n: number) =>
(n || 0).toLocaleString('es-MX', {
style: 'currency', currency: 'MXN', minimumFractionDigits: 2,
});
const fmtUSD = (n: number) =>
`$${(n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} USD`;
interface FilaProps {
izquierda: string;
derecha: string;
fuerte?: boolean;
pequena?: boolean;
}
const Fila: FC<FilaProps> = ({ izquierda, derecha, fuerte, pequena }) => (
<div
className={`flex justify-between gap-2 ${fuerte ? 'font-bold' : ''} ${
pequena ? 'text-[0.82em] opacity-90' : ''
}`}
>
<span>{izquierda}</span>
<span className="whitespace-nowrap">{derecha}</span>
</div>
);
interface TicketDocProps {
data: TicketData;
config: TicketConfig;
/** true cuando se dibuja dentro del modal del editor (sin clase de impresión) */
preview?: boolean;
}
export const TicketDoc: FC<TicketDocProps> = ({ data, config, preview }) => {
const lay = config.layout;
const on = (clave: string) => lay.secciones[clave] !== false;
const px = PX_LETRA[lay.letra] || 12;
const ancho = ANCHO_PANTALLA[lay.ancho] || 300;
const Sep: FC<{ className?: string }> = ({ className = '' }) => {
if (lay.separador === 'ninguna') return <div className={`my-1 ${className}`} />;
if (lay.separador === 'solida') {
return <div className={`border-t border-[#999] my-1 ${className}`} />;
}
return (
<div className={`overflow-hidden whitespace-nowrap my-1 ${className}`} aria-hidden>
{'-'.repeat(46)}
</div>
);
};
const encabezado = (
<div key="encabezado" className="text-center">
{config.logo && (
<img
src={config.logo}
alt=""
className="mx-auto mb-1 max-h-[54px] w-auto object-contain"
/>
)}
{on('nombre_clinica') && <p className="font-bold text-[1.15em]">{config.clinica.nombre}</p>}
{on('direccion') && config.clinica.direccion && (
<p className="text-[0.92em]">{config.clinica.direccion}</p>
)}
{on('telefono_clinica') && config.clinica.telefono && (
<p className="text-[0.92em]">Tel. {config.clinica.telefono}</p>
)}
{on('rfc') && config.clinica.rfc && <p className="text-[0.92em]">RFC {config.clinica.rfc}</p>}
{on('sucursal') && config.clinica.sucursal && (
<p className="text-[0.92em]">Sucursal {config.clinica.sucursal}</p>
)}
{on('mensaje_encabezado') && lay.textos.encabezado && (
<p className="text-[0.92em] mt-1">{lay.textos.encabezado}</p>
)}
<Sep />
</div>
);
const cliente = (
<div key="cliente" className="mb-1">
{(on('folio') || on('fecha')) && (
<div className="flex justify-between gap-2 text-[0.92em]">
<span>{on('folio') ? data.folio : ''}</span>
<span>{on('fecha') ? data.fecha : ''}</span>
</div>
)}
{on('paciente') && <p>Paciente: {data.paciente}</p>}
{on('telefono_paciente') && data.telefono_paciente && (
<p className="text-[0.92em]">Tel. {data.telefono_paciente}</p>
)}
{on('doctor') && data.doctor && <p className="text-[0.92em]">Doctor: {data.doctor}</p>}
{on('cajero') && data.cajero && <p className="text-[0.92em]">Atendió: {data.cajero}</p>}
</div>
);
const conceptos = (
<div key="conceptos">
{on('conceptos') && (
<table className="w-full mb-1">
<tbody>
{data.lines.map((l, i) => (
<tr key={i}>
<td className="py-0.5 align-top pr-1">
{on('detalle_conceptos') ? `${l.qty} × ${fmtMXN(l.price)} ` : ''}
{l.name}
</td>
<td className="py-0.5 text-right align-top whitespace-nowrap">
{fmtMXN(l.subtotal)}
</td>
</tr>
))}
</tbody>
</table>
)}
<Sep />
</div>
);
const totales = (
<div key="totales" className="space-y-0.5">
{on('subtotal') && <Fila izquierda="Subtotal" derecha={fmtMXN(data.subtotal)} />}
{on('descuento') && data.discount > 0 && (
<Fila izquierda="Descuento" derecha={`-${fmtMXN(data.discount)}`} />
)}
{on('puntos_canjeados') && (data.puntos_usados ?? 0) > 0 && (
<Fila izquierda="Puntos canjeados" derecha={`-${data.puntos_usados} pts`} />
)}
{on('total') && <Fila izquierda="Total" derecha={fmtMXN(data.total)} fuerte />}
{on('total_usd') && data.rate_used ? (
<Fila
izquierda={`Equiv. USD (TC ${data.rate_used.toFixed(2)})`}
derecha={fmtUSD(data.total / data.rate_used)}
pequena
/>
) : null}
<Sep />
</div>
);
const pago = (
<div key="pago" className="space-y-0.5">
{on('metodo_pago') && data.metodo && <Fila izquierda="Método" derecha={data.metodo} />}
{on('recibido') && (data.recibido ?? 0) > 0 && (
<Fila
izquierda="Recibido"
derecha={
(data.recibido_usd ?? 0) > 0 && data.rate_used
? `${fmtMXN(data.recibido!)} · ${fmtUSD(data.recibido_usd!)}`
: fmtMXN(data.recibido!)
}
/>
)}
{on('cambio') && (data.cambio ?? 0) > 0 && (
<Fila
izquierda="Cambio"
derecha={
(data.cambio_usd ?? 0) > 0
? `${fmtMXN(data.cambio!)} · ${fmtUSD(data.cambio_usd!)}`
: fmtMXN(data.cambio!)
}
/>
)}
{on('pagado') && (data.amount_paid ?? 0) > 0 && (
<Fila izquierda="Pagado" derecha={fmtMXN(data.amount_paid!)} />
)}
{on('saldo_pendiente') && (data.amount_due ?? 0) > 0 && (
<Fila izquierda="Saldo pendiente" derecha={fmtMXN(data.amount_due!)} fuerte />
)}
{(on('metodo_pago') || on('recibido') || on('cambio') || on('pagado') || on('saldo_pendiente')) && <Sep />}
</div>
);
const monedero = (
<div key="monedero" className="space-y-0.5">
{on('puntos_ganados') && (data.puntos_ganados ?? 0) > 0 && (
<Fila izquierda="Puntos ganados" derecha={`+${data.puntos_ganados} pts`} />
)}
{on('monedero') && data.wallet_points !== null && data.wallet_points !== undefined && (
<Fila izquierda="Saldo monedero" derecha={`${data.wallet_points} pts`} />
)}
{((on('puntos_ganados') && (data.puntos_ganados ?? 0) > 0)
|| (on('monedero') && data.wallet_points !== null && data.wallet_points !== undefined)) && <Sep />}
</div>
);
const pie = (
<div key="pie">
{on('notas') && data.notas && (
<p className="text-[0.92em] mt-1 whitespace-pre-wrap">Nota: {data.notas}</p>
)}
{on('politica') && lay.textos.politica && (
<p className="text-[0.85em] mt-1 opacity-80">{lay.textos.politica}</p>
)}
{on('mensaje_pie') && lay.textos.pie && (
<p className="text-center text-[0.95em] mt-2">{lay.textos.pie}</p>
)}
</div>
);
const partes: Record<string, ReactElement> = {
encabezado, cliente, conceptos, totales, pago, monedero, pie,
};
// Cualquier bloque nuevo en el backend se renderiza igual aunque el config
// guardado aún no lo mencione.
const orden = [...lay.bloques];
Object.keys(partes).forEach((b) => {
if (!orden.includes(b)) orden.push(b);
});
return (
<div
className={[
preview ? 'rounded-xl border border-theme-border' : 'print-ticket mx-auto rounded-xl border border-theme-border',
'bg-white text-[#222] p-4 leading-snug',
lay.mayusculas ? 'uppercase' : '',
].join(' ')}
style={{
width: '100%',
maxWidth: `${ancho}px`,
fontFamily: FUENTE[lay.fuente] || FUENTE.monoespaciada,
fontSize: `${px}px`,
}}
>
{orden.map((b) => partes[b])}
</div>
);
};
export default TicketDoc;

140
frontend/src/components/TicketPrint.tsx
View File

@@ -1,64 +1,19 @@
import type { FC, ReactNode } from 'react';
import { Printer } from 'lucide-react';
import { Button, Modal } from './ui';
import TicketDoc, { type TicketData } from './TicketDoc';
import { useTicketConfig } from '../lib/ticketConfig';
// Ticket térmico (~80mm) imprimible, reutilizado por:
// Ticket térmico imprimible, reutilizado por:
// - POS: se ofrece automáticamente tras un cobro exitoso (modal de éxito)
// - Ventas: botón "Reimprimir ticket" por venta
// Sigue el patrón de impresión existente (RecetaPrint / EstadoCuentaPrint):
// contenido en un div.print-ticket + window.print(); el CSS de @media print
// en index.css oculta el resto de la página.
// - Ventas / Tickets: botón "Reimprimir ticket"
// El diseño (ancho, letra, rubros visibles, textos y datos de la clínica) viene
// de Configuración › Tickets; ver TicketDoc.
// Patrón de impresión existente: div.print-ticket + window.print(); el CSS de
// @media print en index.css oculta el resto de la página.
export interface TicketLinePrint {
name: string;
qty: number;
price: number;
subtotal: number;
}
export interface TicketPrintData {
folio: string;
fecha: string;
paciente: string;
lines: TicketLinePrint[];
subtotal: number;
discount: number;
total: number;
metodo?: string | null;
puntos_usados?: number;
puntos_ganados?: number;
wallet_points?: number | null;
cambio?: number;
cambio_usd?: number;
recibido_usd?: number;
rate_used?: number | null;
// Reimpresión desde Ventas (no hay método/puntos en el detalle de venta)
amount_paid?: number;
amount_due?: number;
}
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
// Misma fuente de config que EstadoCuentaPrint (ajustes guardados en el navegador)
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: 'Playas de Rosarito, B.C.' };
};
const fmtMoney = (n: number) =>
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', minimumFractionDigits: 2 });
const fmtUsd = (n: number) =>
`$${(n || 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 })} USD`;
export type TicketPrintData = TicketData;
export type { TicketLinea as TicketLinePrint } from './TicketDoc';
interface TicketPrintProps {
isOpen: boolean;
@@ -69,8 +24,8 @@ interface TicketPrintProps {
}
export const TicketPrint: FC<TicketPrintProps> = ({ isOpen, onClose, ticket, footerExtra }) => {
if (!ticket) return null;
const clinic = clinicSettings();
const config = useTicketConfig();
if (!ticket || !isOpen) return null;
return (
<Modal
isOpen={isOpen}
@@ -87,76 +42,7 @@ export const TicketPrint: FC<TicketPrintProps> = ({ isOpen, onClose, ticket, foo
</>
}
>
<div
className="print-ticket mx-auto bg-white text-[#222] p-4 rounded-xl border border-theme-border font-mono text-[12px] leading-snug"
style={{ maxWidth: '300px' }}
>
{/* Encabezado de la clínica */}
<div className="text-center border-b border-dashed border-neutral-300 pb-2 mb-2">
<p className="font-bold text-sm">{clinic.name}</p>
{clinic.address && <p className="text-[11px]">{clinic.address}</p>}
{clinic.phone && <p className="text-[11px]">Tel. {clinic.phone}</p>}
</div>
<div className="flex justify-between text-[11px] mb-1">
<span>{ticket.folio}</span>
<span>{ticket.fecha}</span>
</div>
<p className="mb-2">Paciente: {ticket.paciente}</p>
{/* Líneas del ticket */}
<table className="w-full mb-2">
<tbody>
{ticket.lines.map((l, i) => (
<tr key={i}>
<td className="py-0.5 align-top">{l.qty} × {l.name}</td>
<td className="py-0.5 text-right align-top whitespace-nowrap">{fmtMoney(l.subtotal)}</td>
</tr>
))}
</tbody>
</table>
<div className="border-t border-dashed border-neutral-300 pt-1.5 space-y-0.5">
<div className="flex justify-between"><span>Subtotal</span><span>{fmtMoney(ticket.subtotal)}</span></div>
{ticket.discount > 0 && (
<div className="flex justify-between"><span>Descuento</span><span>-{fmtMoney(ticket.discount)}</span></div>
)}
{(ticket.puntos_usados ?? 0) > 0 && (
<div className="flex justify-between"><span>Puntos canjeados</span><span>-{ticket.puntos_usados} pts</span></div>
)}
<div className="flex justify-between font-bold text-sm"><span>Total</span><span>{fmtMoney(ticket.total)}</span></div>
{ticket.rate_used ? (
<div className="flex justify-between text-[11px]"><span>Equiv. USD (TC {ticket.rate_used.toFixed(2)})</span><span>{fmtUsd(ticket.total / ticket.rate_used)}</span></div>
) : null}
{ticket.metodo && (
<div className="flex justify-between"><span>Método</span><span>{ticket.metodo}</span></div>
)}
{(ticket.recibido_usd ?? 0) > 0 && ticket.rate_used ? (
<div className="flex justify-between"><span>Recibido USD</span><span>{fmtUsd(ticket.recibido_usd!)}</span></div>
) : null}
{(ticket.cambio ?? 0) > 0 && (
<div className="flex justify-between">
<span>Cambio</span>
<span>
{fmtMoney(ticket.cambio!)}
{(ticket.cambio_usd ?? 0) > 0 && ` · ${fmtUsd(ticket.cambio_usd!)}`}
</span>
</div>
)}
{(ticket.amount_paid ?? 0) > 0 && (
<div className="flex justify-between"><span>Pagado</span><span>{fmtMoney(ticket.amount_paid!)}</span></div>
)}
{(ticket.amount_due ?? 0) > 0 && (
<div className="flex justify-between font-bold"><span>Saldo pendiente</span><span>{fmtMoney(ticket.amount_due!)}</span></div>
)}
{(ticket.puntos_ganados ?? 0) > 0 && (
<div className="flex justify-between"><span>Puntos ganados</span><span>+{ticket.puntos_ganados} pts</span></div>
)}
{ticket.wallet_points !== null && ticket.wallet_points !== undefined && (
<div className="flex justify-between"><span>Saldo monedero</span><span>{ticket.wallet_points} pts</span></div>
)}
</div>
<p className="text-center text-[11px] mt-3">¡Gracias por su visita!</p>
</div>
<TicketDoc data={ticket} config={config} />
</Modal>
);
};

20
frontend/src/components/inventario/ConteoPrint.tsx
View File

@@ -2,6 +2,7 @@ import type { FC } from 'react';
import { Printer } from 'lucide-react';
import { Button, Modal } from '../ui';
import type { InventoryConteo } from '../../services/odoo';
import { useClinicaPrint } from '../../lib/ticketConfig';
// Resumen imprimible del conteo físico. Sigue el patrón print-* existente
// (TicketPrint / CortePrint): div.print-recibo + window.print().
@@ -9,32 +10,17 @@ import type { InventoryConteo } from '../../services/odoo';
const money = (v: number) =>
'$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
interface ClinicSettings {
name: string;
phone: string;
address: string;
}
const clinicSettings = (): ClinicSettings => {
try {
const saved = localStorage.getItem('skeen_clinic_settings');
if (saved) return JSON.parse(saved);
} catch {
// ignore
}
return { name: 'SKEEN Derma Experts', phone: '', address: '' };
};
export const ConteoPrint: FC<{ conteo: InventoryConteo | null; onClose: () => void }> = ({ conteo, onClose }) => {
if (!conteo) return null;
const clinic = clinicSettings();
const clinic = useClinicaPrint();
const lineas = conteo.lines || [];
return (
<Modal isOpen={!!conteo} onClose={onClose} title={`Conteo físico ${conteo.name}`} maxWidth="lg">
<div className="print-recibo bg-white text-[#222] p-6 rounded-xl border border-theme-border text-[13px] leading-snug">
<div className="text-center mb-4 border-b border-[#ccc] pb-3">
<p className="font-bold text-[15px]">{clinic.name}</p>
<p className="font-bold text-[15px]">{clinic.nombre}</p>
<p className="font-semibold mt-2 tracking-wide">CONTEO FÍSICO DE INVENTARIO</p>
<p className="text-[11px] text-[#555]">
{conteo.name} · {conteo.date || '—'} · Realizó: {conteo.user_name || '—'}

9
frontend/src/index.css
View File

@@ -273,12 +273,11 @@ p {
left: 0;
width: 100%;
}
/* Ticket térmico ~80mm, monoespaciado */
/* Ticket térmico: el ancho, la fuente y el tamaño los decide el diseño
guardado en Configuración › Tickets, que viajan como style en línea del
documento. Aquí solo se quitan adornos para el papel. */
.print-ticket {
width: 76mm;
max-width: 76mm;
font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 11px;
width: auto;
border: none;
border-radius: 0;
padding: 0;

197
frontend/src/lib/ticketConfig.ts Normal file
View File

@@ -0,0 +1,197 @@
import { useEffect, useState } from 'react';
import { odooApi } from '../services/odoo';
// Configuración del ticket (diseño + datos de la clínica + logo).
//
// Vive en el servidor (ir.config_parameter) para que todas las cajas impriman
// igual. Antes los datos de la clínica se guardaban en el localStorage de cada
// navegador (clave skeen_clinic_settings), así que cada equipo imprimía una
// dirección distinta. Este módulo cachea la configuración en memoria, la
// comparte con quien la pida y deja el localStorage como respaldo de arranque.
export interface TicketClinica {
nombre: string;
direccion: string;
telefono: string;
email: string;
sitio: string;
rfc: string;
sucursal: string;
tiene_logo: boolean;
}
export interface TicketLayout {
ancho: '58mm' | '80mm';
fuente: 'monoespaciada' | 'sans';
letra: 'compacta' | 'normal' | 'grande';
separador: 'guiones' | 'solida' | 'ninguna';
mayusculas: boolean;
bloques: string[];
secciones: Record<string, boolean>;
textos: { encabezado: string; pie: string; politica: string };
}
export interface TicketConfig {
layout: TicketLayout;
clinica: TicketClinica;
logo: string;
}
const CACHE_KEY = 'skeen_ticket_config';
// Respaldo por si el API no responde (sin sesión, red caída): el último config
// leído, o el formato histórico del ticket si nunca se leyó nada.
export const FALLBACK_CONFIG: TicketConfig = {
layout: {
ancho: '80mm',
fuente: 'monoespaciada',
letra: 'normal',
separador: 'guiones',
mayusculas: true,
bloques: ['encabezado', 'cliente', 'conceptos', 'totales', 'pago', 'monedero', 'pie'],
secciones: {
nombre_clinica: true,
direccion: true,
telefono_clinica: true,
sucursal: true,
rfc: false,
mensaje_encabezado: true,
folio: true,
fecha: true,
cajero: true,
paciente: true,
telefono_paciente: false,
doctor: true,
conceptos: true,
detalle_conceptos: true,
subtotal: true,
descuento: true,
puntos_canjeados: true,
total: true,
total_usd: true,
metodo_pago: true,
recibido: true,
cambio: true,
pagado: true,
saldo_pendiente: true,
puntos_ganados: true,
monedero: true,
notas: true,
politica: false,
mensaje_pie: true,
},
textos: {
encabezado: '',
pie: '¡Gracias por su visita!',
politica: 'Conserve este ticket. No tiene validez fiscal.',
},
},
clinica: {
nombre: 'SKEEN Derma Experts',
direccion: 'Playas de Rosarito, Baja California',
telefono: '+52 (661) 100-2172',
email: 'hola@skeen.mx',
sitio: 'https://skeen.mx',
rfc: '',
sucursal: '',
tiene_logo: false,
},
logo: '',
};
const clonar = <T,>(v: T): T => JSON.parse(JSON.stringify(v)) as T;
const leerLocal = (): TicketConfig | null => {
try {
const raw = localStorage.getItem(CACHE_KEY);
if (!raw) return null;
const parsed = JSON.parse(raw) as TicketConfig;
if (!parsed?.layout?.secciones || !parsed?.clinica) return null;
return parsed;
} catch {
return null;
}
};
let actual: TicketConfig = leerLocal() || clonar(FALLBACK_CONFIG);
const oyentes = new Set<(c: TicketConfig) => void>();
let peticion: Promise<TicketConfig> | null = null;
let yaCargo = false;
const publicar = (c: TicketConfig) => {
actual = c;
try {
localStorage.setItem(CACHE_KEY, JSON.stringify(c));
} catch {
// localStorage lleno o bloqueado: seguimos en memoria
}
oyentes.forEach((f) => f(c));
};
/** Fuerza la recarga (tras guardar en Configuración). */
export const recargarTicketConfig = async (): Promise<TicketConfig> => {
peticion = null;
yaCargo = false;
return cargarTicketConfig();
};
export const cargarTicketConfig = (): Promise<TicketConfig> => {
if (peticion) return peticion;
if (yaCargo) return Promise.resolve(actual);
peticion = odooApi.getTicketConfig()
.then((res) => {
if (res.status === 'success' && res.layout && res.clinica) {
publicar({
layout: res.layout as TicketConfig['layout'],
clinica: res.clinica as TicketConfig['clinica'],
logo: res.logo || '',
});
}
return actual;
})
.catch(() => actual)
.finally(() => {
peticion = null;
yaCargo = true;
});
return peticion;
};
/** Config actual dentro de React; se refresca sola cuando cambia. */
export const useTicketConfig = (): TicketConfig => {
const [cfg, setCfg] = useState<TicketConfig>(actual);
useEffect(() => {
const f = (c: TicketConfig) => setCfg(clonar(c));
oyentes.add(f);
cargarTicketConfig().then((c) => setCfg(clonar(c)));
return () => {
oyentes.delete(f);
};
}, []);
return cfg;
};
/** Versión no-React para componentes que solo leen (impresión puntual). */
export const ticketConfigActual = (): TicketConfig => actual;
/**
* Datos de la clínica para los documentos impresos (ticket, recibo, estado de
* cuenta, receta, corte, conteo). Sale de la configuración del servidor; si
* nunca se configuró, cae al skeen_clinic_settings de este navegador y de ahí
* a los valores históricos de SKEEN.
*/
export const useClinicaPrint = () => {
const c = useTicketConfig().clinica;
const local = leerLocal()?.clinica;
const mix = (campo: keyof TicketClinica, porDefecto = '') =>
String(c[campo] || local?.[campo] || porDefecto || '');
return {
nombre: mix('nombre', 'SKEEN Derma Experts'),
direccion: mix('direccion', 'Playas de Rosarito, Baja California'),
telefono: mix('telefono'),
email: mix('email'),
sitio: mix('sitio'),
rfc: mix('rfc'),
sucursal: mix('sucursal'),
};
};

8
frontend/src/pages/Configuracion.tsx
View File

@@ -8,6 +8,7 @@ import RolesPanel from '../components/RolesPanel';
import RecetasPanel from '../components/RecetasPanel';
import CatalogoPanel from '../components/CatalogoPanel';
import AuditoriaPanel from '../components/AuditoriaPanel';
import TicketDesigner from '../components/TicketDesigner';
import ImpactoModal from '../components/ImpactoModal';
import { Card, Button, Input, PageHeader, toast } from '../components/ui';
import { odooApi, type Doctor } from '../services/odoo';
@@ -19,6 +20,7 @@ const TABS = [
{ key: 'roles', label: 'Roles' },
{ key: 'recetas', label: 'Recetas' },
{ key: 'catalogos', label: 'Catálogos' },
{ key: 'tickets', label: 'Tickets' },
{ key: 'auditoria', label: 'Auditoría' },
] as const;
@@ -51,7 +53,9 @@ const Configuracion: FC = () => {
// comisiones) queda para administración del sistema.
const esAdmin = user?.role === 'admin';
const tabsVisibles = useMemo(
() => (esAdmin ? TABS : TABS.filter((t) => t.key === 'usuarios' || t.key === 'roles')),
() => (esAdmin
? TABS
: TABS.filter((t) => t.key === 'usuarios' || t.key === 'roles' || t.key === 'tickets')),
[esAdmin],
);
const [searchParams, setSearchParams] = useSearchParams();
@@ -228,6 +232,8 @@ const Configuracion: FC = () => {
<RecetasPanel />
</Card.Body>
</Card>
) : tab === 'tickets' ? (
<TicketDesigner />
) : tab === 'auditoria' ? (
<AuditoriaPanel />
) : tab === 'catalogos' ? (

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

@@ -1408,9 +1408,14 @@ const Pos: FC = () => {
puntos_ganados: resultado.puntos_ganados,
wallet_points: resultado.wallet_points,
cambio: resultado.cambio,
recibido: resultado.recibido,
cambio_usd: resultado.cambio_usd,
recibido_usd: resultado.recibido_usd,
rate_used: resultado.rate_used,
cajero: resultado.sale.user_login,
doctor: resultado.sale.doctor,
telefono_paciente: resultado.sale.patient_phone,
notas: resultado.sale.notes,
}}
/>
</Layout>

5
frontend/src/pages/Tickets.tsx
View File

@@ -513,6 +513,11 @@ const Tickets: FC = () => {
total: reimprimir.total,
amount_paid: reimprimir.amount_paid,
amount_due: reimprimir.amount_due,
metodo: METODO_LABELS[reimprimir.payment_method || ''] || null,
cajero: reimprimir.user_login,
doctor: reimprimir.doctor,
telefono_paciente: reimprimir.patient_phone,
notas: reimprimir.notes,
}}
/>
</Layout>

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

@@ -906,6 +906,10 @@ const Ventas: FC = () => {
total: printSale.total,
amount_paid: printSale.amount_paid,
amount_due: printSale.amount_due,
cajero: printSale.user_login,
doctor: printSale.doctor,
telefono_paciente: printSale.patient_phone,
notas: printSale.notes,
}}
/>
</Layout>

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

@@ -521,6 +521,9 @@ export interface Sale {
name: string;
patient_id: number;
patient: string;
/** Teléfono y médico del ticket: los muestra el diseño impreso si están activos */
patient_phone?: string;
doctor?: string;
date: string;
subtotal: number;
discount: number;
@@ -1227,6 +1230,8 @@ export interface PosCheckoutResult {
sale: Sale;
payment: Payment | null;
cambio: number;
/** Efectivo recibido en caja (MXN), para imprimir "Recibido" en el ticket */
recibido?: number;
cambio_usd?: number;
rate_used?: number | null;
recibido_usd?: number;
@@ -1814,6 +1819,34 @@ export const odooApi = {
return data;
},
// ---- Diseño del ticket impreso (Configuración › Tickets) ----
async getTicketConfig(): Promise<{
status: string; layout?: unknown; clinica?: unknown; logo?: string; message?: string;
}> {
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/ticket_config`);
return data;
},
async putTicketConfig(layout: unknown, motivo?: string): Promise<{
status: string; layout?: unknown; message?: string;
}> {
const { data } = await axios.put(`${ODOO_BASE}/skeen/frontend/v1/ticket_config`,
{ layout, motivo });
return data;
},
async putTicketClinica(payload: {
clinica?: Record<string, string>; logo?: string; motivo?: string;
}): Promise<{ status: string; layout?: unknown; clinica?: unknown; logo?: string; message?: string }> {
const { data } = await axios.put(`${ODOO_BASE}/skeen/frontend/v1/ticket_config/clinica`, payload);
return data;
},
async resetTicketConfig(): Promise<{ status: string; layout?: unknown; message?: string }> {
const { data } = await axios.post(`${ODOO_BASE}/skeen/frontend/v1/ticket_config/reset`, {});
return data;
},
async getDoctorHistory(id: number): Promise<DoctorHistory> {
const { data } = await axios.get(`${ODOO_BASE}/skeen/frontend/v1/doctors/${id}/history`);
return data;