Corte de caja asistido (esperado vs contado, diferencias, PDF) y fotos antes/despues con comparacion en expediente

frontend/src/components/CortePrint.tsx

@@ -0,0 +1,115 @@
+import type { FC } from 'react';
+import { Printer } from 'lucide-react';
+import { Button, Modal } from './ui';
+import type { CashClosing } from '../services/odoo';
+
+// 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 fila = (label: string, valor: number) => (
+    <tr>
+      <td className="py-1 pr-2">{label}</td>
+      <td className="py-1 text-right">{money(valor)}</td>
+    </tr>
+  );
+
+  const filaDiff = (label: string, esperado: number, contado: number, diff: number) => (
+    <tr>
+      <td className="py-1 pr-2">{label}</td>
+      <td className="py-1 text-right">{money(esperado)}</td>
+      <td className="py-1 text-right">{money(contado)}</td>
+      <td className={'py-1 text-right font-semibold ' + (diff < 0 ? 'text-rose-700' : diff > 0 ? 'text-emerald-700' : '')}>
+        {diff > 0 ? '+' : ''}{money(diff)}
+      </td>
+    </tr>
+  );
+
+  return (
+    <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-semibold mt-1">CORTE DE CAJA {corte.name}</p>
+          <p className="text-[11px] text-[#555]">Fecha: {corte.date} · Cerró: {corte.user || '—'}</p>
+        </div>
+
+        <table className="w-full text-[12px]">
+          <thead>
+            <tr className="border-b border-[#ccc] text-[10px] uppercase text-[#666]">
+              <th className="text-left py-1">Método</th>
+              <th className="text-right py-1">Esperado</th>
+              <th className="text-right py-1">Contado</th>
+              <th className="text-right py-1">Diferencia</th>
+            </tr>
+          </thead>
+          <tbody className="border-b border-[#ccc]">
+            {filaDiff('Efectivo', corte.opening_cash + corte.total_cash, corte.counted_cash, corte.diff_cash)}
+            {filaDiff('Tarjeta', corte.total_card, corte.counted_card, corte.diff_card)}
+            {filaDiff('Transferencia', corte.total_transfer, corte.counted_transfer, corte.diff_transfer)}
+            {filaDiff('Otros', corte.total_other, corte.counted_other, corte.diff_other)}
+          </tbody>
+          <tbody>
+            {fila('Ventas totales del día', corte.total_sales)}
+            {fila('Efectivo esperado (apertura + cobros)', corte.opening_cash + corte.total_cash)}
+            {fila('Efectivo de cierre registrado', corte.closing_cash)}
+          </tbody>
+          <tbody className="border-t border-[#ccc]">
+            <tr className="font-bold">
+              <td className="py-1.5 pr-2">Diferencia total del corte</td>
+              <td className={'py-1.5 text-right ' + (corte.difference < 0 ? 'text-rose-700' : corte.difference > 0 ? 'text-emerald-700' : '')}>
+                {corte.difference > 0 ? '+' : ''}{money(corte.difference)}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+
+        {corte.notes && (
+          <div className="mt-3 text-[12px]">
+            <p className="font-semibold">Notas:</p>
+            <p className="whitespace-pre-wrap">{corte.notes}</p>
+          </div>
+        )}
+
+        <div className="mt-6 flex justify-between text-[11px] text-[#555]">
+          <span>_____________________<br />Entregó (cajero)</span>
+          <span>_____________________<br />Recibió (administración)</span>
+        </div>
+        <p className="mt-4 text-center text-[10px] text-[#888]">Impreso el {new Date().toLocaleString('es-MX')}</p>
+      </div>
+
+      <div className="flex justify-end mt-3">
+        <Button onClick={() => window.print()}>
+          <Printer size={14} className="mr-1.5" />
+          Imprimir
+        </Button>
+      </div>
+    </Modal>
+  );
+};

frontend/src/components/PatientAdjuntos.tsx

@@ -1,7 +1,7 @@
 import type { FC } from 'react';
-import { useEffect, useState, useCallback, useRef } from 'react';
-import { FileText, X, Upload } from 'lucide-react';
-import { Button, Modal, Skeleton, toast } from './ui';
+import { useEffect, useState, useCallback, useRef, useMemo } from 'react';
+import { FileText, X, Upload, GitCompare, Tag } from 'lucide-react';
+import { Button, Modal, Select, Skeleton, toast } from './ui';
 import { odooApi, type PatientAdjunto } from '../services/odoo';
 
 interface PatientAdjuntosProps {
@@ -13,12 +13,25 @@ interface PatientAdjuntosProps {
 
 const MAX_BYTES = 10 * 1024 * 1024;
 
+const CLASIF_LABEL: Record<string, string> = {
+  antes: 'Antes',
+  despues: 'Después',
+  sin_clasificar: '',
+};
+
 export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, editable = true, onChange }) => {
   const [adjuntos, setAdjuntos] = useState<PatientAdjunto[]>([]);
   const [loading, setLoading] = useState(true);
   const [uploading, setUploading] = useState(false);
   const [visor, setVisor] = useState<PatientAdjunto | null>(null);
+  const [nuevaClasif, setNuevaClasif] = useState('sin_clasificar');
+  const [clasificando, setClasificando] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
+  // Comparación antes/después
+  const [compAbierta, setCompAbierta] = useState(false);
+  const [compServicio, setCompServicio] = useState('');
+  const [compAntes, setCompAntes] = useState('');
+  const [compDespues, setCompDespues] = useState('');
 
   const load = useCallback(async () => {
     try {
@@ -55,9 +68,11 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
           name: file.name,
           file_b64,
           mimetype: file.type || 'application/octet-stream',
+          antes_despues: kind === 'imagen' ? nuevaClasif : undefined,
         });
         if (res.status === 'success') {
           toast.success('Archivo subido');
+          if (kind === 'imagen') setNuevaClasif('sin_clasificar');
           await load();
           onChange?.();
         }
@@ -84,13 +99,47 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
     }
   };
 
+  const clasificar = async (adjId: number, antes_despues: string) => {
+    try {
+      setClasificando(true);
+      await odooApi.updatePatientAdjunto(adjId, { antes_despues });
+      if (visor) setVisor({ ...visor, antes_despues: antes_despues as PatientAdjunto['antes_despues'] });
+      toast.success(
+        antes_despues === 'sin_clasificar' ? 'Clasificación quitada'
+          : antes_despues === 'antes' ? 'Marcada como Antes' : 'Marcada como Después',
+      );
+      await load();
+    } catch (err) {
+      toast.error('Error al clasificar la foto');
+      console.error(err);
+    } finally {
+      setClasificando(false);
+    }
+  };
+
   const imagenes = adjuntos.filter((a) => a.mimetype.startsWith('image/'));
   const docs = adjuntos.filter((a) => !a.mimetype.startsWith('image/'));
 
+  // Comparación: opciones por servicio y fotos antes/después
+  const servicios = useMemo(() => {
+    const map = new Map<number, string>();
+    imagenes.forEach((a) => { if (a.servicio_id) map.set(a.servicio_id, a.servicio); });
+    return Array.from(map.entries());
+  }, [imagenes]);
+
+  const fotosFiltradas = useMemo(
+    () => (compServicio ? imagenes.filter((a) => String(a.servicio_id) === compServicio) : imagenes),
+    [imagenes, compServicio],
+  );
+  const fotosAntes = fotosFiltradas.filter((a) => a.antes_despues === 'antes');
+  const fotosDespues = fotosFiltradas.filter((a) => a.antes_despues === 'despues');
+  const fotoAntes = fotosAntes.find((a) => String(a.id) === compAntes) || fotosAntes[0];
+  const fotoDespues = fotosDespues.find((a) => String(a.id) === compDespues) || fotosDespues[0];
+
   return (
     <div>
       {editable && (
-        <div className="mb-3">
+        <div className="mb-3 flex items-center gap-2 flex-wrap">
           <input
             ref={fileRef}
             type="file"
@@ -102,6 +151,25 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
             <Upload size={14} className="mr-1.5" />
             {kind === 'imagen' ? 'Subir foto' : 'Escanear / Subir expediente'}
           </Button>
+          {kind === 'imagen' && (
+            <Select
+              value={nuevaClasif}
+              onChange={(e) => setNuevaClasif(e.target.value)}
+              className="!w-auto text-sm"
+              title="Clasificación de la próxima foto"
+              options={[
+                { value: 'sin_clasificar', label: 'Clasificar como: Sin clasificar' },
+                { value: 'antes', label: 'Clasificar como: Antes' },
+                { value: 'despues', label: 'Clasificar como: Después' },
+              ]}
+            />
+          )}
+          {kind === 'imagen' && fotosAntes.length > 0 && fotosDespues.length > 0 && (
+            <Button variant="outline" size="sm" onClick={() => setCompAbierta(true)}>
+              <GitCompare size={14} className="mr-1.5" />
+              Comparación
+            </Button>
+          )}
         </div>
       )}
 
@@ -124,6 +192,15 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
                       className="w-full h-24 object-cover rounded-xl border border-theme-border"
                     />
                   </button>
+                  {a.antes_despues !== 'sin_clasificar' && (
+                    <span
+                      className={`absolute top-1 left-1 px-1.5 py-0.5 rounded-full text-[10px] font-semibold text-white ${
+                        a.antes_despues === 'antes' ? 'bg-blue-600' : 'bg-emerald-600'
+                      }`}
+                    >
+                      {CLASIF_LABEL[a.antes_despues]}
+                    </span>
+                  )}
                   {editable && (
                     <button
                       type="button"
@@ -163,7 +240,7 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
         </>
       )}
 
-      {/* Visor de imagen */}
+      {/* Visor de imagen con clasificación */}
       <Modal
         isOpen={!!visor}
         onClose={() => setVisor(null)}
@@ -171,13 +248,126 @@ export const PatientAdjuntos: FC<PatientAdjuntosProps> = ({ patientId, kind, edi
         maxWidth="2xl"
       >
         {visor && (
-          <img
-            src={odooApi.patientAdjuntoUrl(visor.url)}
-            alt={visor.name}
-            className="w-full rounded-xl"
-          />
+          <div className="space-y-3">
+            <img
+              src={odooApi.patientAdjuntoUrl(visor.url)}
+              alt={visor.name}
+              className="w-full rounded-xl"
+            />
+            {visor.servicio && (
+              <p className="text-xs text-theme-muted flex items-center">
+                <Tag size={12} className="mr-1" />
+                Servicio: {visor.servicio}
+              </p>
+            )}
+            {editable && (
+              <div className="flex items-center gap-2 flex-wrap border-t border-theme-border pt-3">
+                <span className="text-xs text-theme-muted mr-1">Clasificar:</span>
+                <Button
+                  size="sm"
+                  variant={visor.antes_despues === 'antes' ? undefined : 'outline'}
+                  onClick={() => clasificar(visor.id, 'antes')}
+                  loading={clasificando && visor.antes_despues !== 'antes'}
+                >
+                  Antes
+                </Button>
+                <Button
+                  size="sm"
+                  variant={visor.antes_despues === 'despues' ? undefined : 'outline'}
+                  onClick={() => clasificar(visor.id, 'despues')}
+                  loading={clasificando && visor.antes_despues !== 'despues'}
+                >
+                  Después
+                </Button>
+                {visor.antes_despues !== 'sin_clasificar' && (
+                  <Button
+                    size="sm"
+                    variant="ghost"
+                    onClick={() => clasificar(visor.id, 'sin_clasificar')}
+                    loading={clasificando}
+                  >
+                    Quitar marca
+                  </Button>
+                )}
+              </div>
+            )}
+          </div>
         )}
       </Modal>
+
+      {/* Comparación antes / después */}
+      <Modal
+        isOpen={compAbierta}
+        onClose={() => setCompAbierta(false)}
+        title="Comparación antes / después"
+        maxWidth="2xl"
+      >
+        <div className="space-y-4">
+          {servicios.length > 1 && (
+            <Select
+              label="Servicio"
+              value={compServicio}
+              onChange={(e) => { setCompServicio(e.target.value); setCompAntes(''); setCompDespues(''); }}
+              options={[
+                { value: '', label: 'Todos los servicios' },
+                ...servicios.map(([id, nombre]) => ({ value: String(id), label: nombre })),
+              ]}
+            />
+          )}
+          <div className="grid grid-cols-2 gap-3">
+            <Select
+              label={`Foto Antes (${fotosAntes.length})`}
+              value={fotoAntes ? String(fotoAntes.id) : ''}
+              onChange={(e) => setCompAntes(e.target.value)}
+              options={
+                fotosAntes.length === 0
+                  ? [{ value: '', label: 'Sin fotos marcadas como Antes' }]
+                  : fotosAntes.map((a) => ({ value: String(a.id), label: a.name || `Foto #${a.id}` }))
+              }
+            />
+            <Select
+              label={`Foto Después (${fotosDespues.length})`}
+              value={fotoDespues ? String(fotoDespues.id) : ''}
+              onChange={(e) => setCompDespues(e.target.value)}
+              options={
+                fotosDespues.length === 0
+                  ? [{ value: '', label: 'Sin fotos marcadas como Después' }]
+                  : fotosDespues.map((a) => ({ value: String(a.id), label: a.name || `Foto #${a.id}` }))
+              }
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div>
+              <p className="text-xs font-semibold text-blue-600 uppercase mb-1">Antes</p>
+              {fotoAntes ? (
+                <img
+                  src={odooApi.patientAdjuntoUrl(fotoAntes.url)}
+                  alt={fotoAntes.name}
+                  className="w-full rounded-xl border border-theme-border"
+                />
+              ) : (
+                <div className="h-40 rounded-xl bg-theme-bg flex items-center justify-center text-sm text-theme-muted">
+                  Sin foto Antes
+                </div>
+              )}
+            </div>
+            <div>
+              <p className="text-xs font-semibold text-emerald-600 uppercase mb-1">Después</p>
+              {fotoDespues ? (
+                <img
+                  src={odooApi.patientAdjuntoUrl(fotoDespues.url)}
+                  alt={fotoDespues.name}
+                  className="w-full rounded-xl border border-theme-border"
+                />
+              ) : (
+                <div className="h-40 rounded-xl bg-theme-bg flex items-center justify-center text-sm text-theme-muted">
+                  Sin foto Después
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      </Modal>
     </div>
   );
 };