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

frontend/src/pages/Cortes.tsx

@@ -1,6 +1,6 @@
 import type { FC } from 'react';
 import { useEffect, useState } from 'react';
-import { Plus, Lock, Receipt } from 'lucide-react';
+import { Plus, Lock, Receipt, Printer, ChevronLeft, ChevronRight } from 'lucide-react';
 import Layout from '../components/Layout';
 import {
   Card,
@@ -12,20 +12,38 @@ import {
   PageHeader,
   Skeleton,
   MobileCard,
+  TextArea,
   toast,
   badgeForCashClosingState,
 } from '../components/ui';
+import { CortePrint } from '../components/CortePrint';
 import { odooApi, type CashClosing } from '../services/odoo';
 
+const money = (v: number) =>
+  '$' + (v ?? 0).toLocaleString('es-MX', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+
+const PASOS = [
+  { key: 'cash', titulo: 'Efectivo' },
+  { key: 'card', titulo: 'Tarjeta' },
+  { key: 'transfer', titulo: 'Transferencia' },
+  { key: 'other', titulo: 'Otros' },
+] as const;
+
 const Cortes: FC = () => {
   const [closings, setClosings] = useState<CashClosing[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
   const [createOpen, setCreateOpen] = useState(false);
-  const [closeOpen, setCloseOpen] = useState<CashClosing | null>(null);
+  const [wizard, setWizard] = useState<CashClosing | null>(null);
+  const [step, setStep] = useState(0); // 0..3 métodos, 4 = resumen
+  const [countedCash, setCountedCash] = useState('');
+  const [countedCard, setCountedCard] = useState('');
+  const [countedTransfer, setCountedTransfer] = useState('');
+  const [countedOther, setCountedOther] = useState('');
+  const [notes, setNotes] = useState('');
+  const [printCorte, setPrintCorte] = useState<CashClosing | null>(null);
   const [date, setDate] = useState(() => new Date().toISOString().split('T')[0]);
   const [openingCash, setOpeningCash] = useState('');
-  const [closingCash, setClosingCash] = useState('');
   const [submitting, setSubmitting] = useState(false);
 
   const load = async () => {
@@ -47,6 +65,33 @@ const Cortes: FC = () => {
     load();
   }, []);
 
+  const abrirWizard = (c: CashClosing) => {
+    setWizard(c);
+    setStep(0);
+    setCountedCash('');
+    setCountedCard('');
+    setCountedTransfer('');
+    setCountedOther('');
+    setNotes('');
+  };
+
+  const esperado = (c: CashClosing, key: string) => {
+    if (key === 'cash') return c.opening_cash + c.total_cash;
+    if (key === 'card') return c.total_card;
+    if (key === 'transfer') return c.total_transfer;
+    return c.total_other;
+  };
+
+  const valorContado = (key: string) => {
+    if (key === 'cash') return parseFloat(countedCash || '0') || 0;
+    if (key === 'card') return parseFloat(countedCard || '0') || 0;
+    if (key === 'transfer') return parseFloat(countedTransfer || '0') || 0;
+    return parseFloat(countedOther || '0') || 0;
+  };
+
+  const diffColor = (diff: number) =>
+    diff < 0 ? 'text-rose-600' : diff > 0 ? 'text-emerald-600' : 'text-theme-muted';
+
   const create = async () => {
     const value = parseFloat(openingCash);
     if (Number.isNaN(value) || value < 0) {
@@ -68,19 +113,19 @@ const Cortes: FC = () => {
     }
   };
 
-  const close = async () => {
-    if (!closeOpen) return;
-    const value = parseFloat(closingCash);
-    if (Number.isNaN(value) || value < 0) {
-      toast.error('Ingresa un efectivo final válido');
-      return;
-    }
+  const cerrarCaja = async () => {
+    if (!wizard) return;
     try {
       setSubmitting(true);
-      await odooApi.closeCashClosing(closeOpen.id, value);
+      await odooApi.closeCashClosing(wizard.id, {
+        counted_cash: valorContado('cash'),
+        counted_card: valorContado('card'),
+        counted_transfer: valorContado('transfer'),
+        counted_other: valorContado('other'),
+        notes,
+      });
       toast.success('Caja cerrada');
-      setCloseOpen(null);
-      setClosingCash('');
+      setWizard(null);
       await load();
     } catch (err) {
       toast.error('Error al cerrar caja');
@@ -96,11 +141,104 @@ const Cortes: FC = () => {
   };
 
   const differenceColor = (diff: number) => {
-    if (diff > 0) return 'text-theme-heading';
+    if (diff > 0) return 'text-emerald-600';
     if (diff < 0) return 'text-rose-600';
     return 'text-theme-muted';
   };
 
+  // --- Contenido de un paso del asistente ---
+  const renderPaso = () => {
+    if (!wizard) return null;
+    if (step < PASOS.length) {
+      const { key, titulo } = PASOS[step];
+      const esp = esperado(wizard, key);
+      const cont = valorContado(key);
+      const diff = cont - esp;
+      const setters: Record<string, (v: string) => void> = {
+        cash: setCountedCash, card: setCountedCard,
+        transfer: setCountedTransfer, other: setCountedOther,
+      };
+      const values: Record<string, string> = {
+        cash: countedCash, card: countedCard,
+        transfer: countedTransfer, other: countedOther,
+      };
+      const informativo = key !== 'cash';
+      return (
+        <div className="space-y-4">
+          <div className="grid grid-cols-2 gap-3 text-sm">
+            <div className="p-3 rounded-lg bg-theme-bg">
+              <p className="text-xs text-theme-muted">
+                {key === 'cash' ? 'Efectivo esperado (apertura + cobros)' : `${titulo} registrado en el sistema`}
+              </p>
+              <p className="text-lg font-semibold text-theme-heading">{money(esp)}</p>
+            </div>
+            <div className="p-3 rounded-lg bg-theme-bg">
+              <p className="text-xs text-theme-muted">{cont > 0 || values[key] ? 'Diferencia' : 'Aún sin contar'}</p>
+              <p className={`text-lg font-semibold ${diffColor(diff)}`}>
+                {values[key] ? `${diff > 0 ? 'Sobrante +' : diff < 0 ? 'Faltante ' : ''}${money(diff)}` : '—'}
+              </p>
+            </div>
+          </div>
+          <Input
+            label={key === 'cash' ? 'Efectivo contado físicamente' : informativo ? `${titulo} contado (opcional, igual al registrado)` : 'Contado'}
+            type="number"
+            min={0}
+            step={0.01}
+            value={values[key]}
+            placeholder={key === 'cash' ? undefined : money(esp)}
+            onChange={(e) => setters[key](e.target.value)}
+            autoFocus
+          />
+          {key === 'cash' && countedCash && (
+            <p className={`text-sm font-medium ${diffColor(diff)}`}>
+              {diff === 0 && 'El efectivo cuadra.'}
+              {diff < 0 && `Faltan ${money(-diff)} en la caja.`}
+              {diff > 0 && `Sobran ${money(diff)} en la caja.`}
+            </p>
+          )}
+        </div>
+      );
+    }
+    // Resumen
+    return (
+      <div className="space-y-3 text-sm">
+        <table className="w-full">
+          <thead>
+            <tr className="text-xs uppercase text-theme-muted border-b border-theme-border">
+              <th className="text-left py-1.5">Método</th>
+              <th className="text-right py-1.5">Esperado</th>
+              <th className="text-right py-1.5">Contado</th>
+              <th className="text-right py-1.5">Diferencia</th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-theme-border">
+            {PASOS.map(({ key, titulo }) => {
+              const esp = esperado(wizard, key);
+              const cont = valorContado(key);
+              const diff = cont - esp;
+              return (
+                <tr key={key}>
+                  <td className="py-1.5">{titulo}</td>
+                  <td className="py-1.5 text-right">{money(esp)}</td>
+                  <td className="py-1.5 text-right">{money(cont)}</td>
+                  <td className={`py-1.5 text-right font-semibold ${diffColor(diff)}`}>
+                    {diff > 0 ? '+' : ''}{money(diff)}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+        <TextArea
+          label="Notas del corte"
+          rows={2}
+          value={notes}
+          onChange={(e) => setNotes(e.target.value)}
+        />
+      </div>
+    );
+  };
+
   return (
     <Layout title="Cortes de Caja" subtitle="Arqueos y cierres">
       <PageHeader title="Cortes de Caja" subtitle="Abre y cierra turnos">
@@ -154,12 +292,15 @@ const Cortes: FC = () => {
                         <td className="p-3">
                           <Badge variant={badgeForCashClosingState(c.state)}>{c.state}</Badge>
                         </td>
-                        <td className="p-3">
+                        <td className="p-3 whitespace-nowrap">
                           {c.state !== 'closed' && (
-                            <Button variant="ghost" size="sm" onClick={() => setCloseOpen(c)} title="Cerrar caja">
+                            <Button variant="ghost" size="sm" onClick={() => abrirWizard(c)} title="Cierre guiado">
                               <Lock size={16} className="text-theme-heading" />
                             </Button>
                           )}
+                          <Button variant="ghost" size="sm" onClick={() => setPrintCorte(c)} title="Imprimir corte">
+                            <Printer size={16} className="text-theme-heading" />
+                          </Button>
                         </td>
                       </tr>
                     ))}
@@ -180,11 +321,16 @@ const Cortes: FC = () => {
                       { label: 'Diferencia', value: `${c.difference > 0 ? '+' : ''}$${c.difference}` },
                     ]}
                     actions={
-                      c.state !== 'closed' && (
-                        <Button variant="ghost" size="sm" onClick={() => setCloseOpen(c)}>
-                          <Lock size={16} className="text-theme-heading" />
+                      <>
+                        {c.state !== 'closed' && (
+                          <Button variant="ghost" size="sm" onClick={() => abrirWizard(c)}>
+                            <Lock size={16} />
+                          </Button>
+                        )}
+                        <Button variant="ghost" size="sm" onClick={() => setPrintCorte(c)}>
+                          <Printer size={16} />
                         </Button>
-                      )
+                      </>
                     }
                   />
                 ))}
@@ -214,7 +360,7 @@ const Cortes: FC = () => {
             onChange={(e) => setDate(e.target.value)}
           />
           <Input
-            label="Efectivo inicial"
+            label="Efectivo inicial (fondo de caja)"
             type="number"
             min={0}
             step={0.01}
@@ -224,37 +370,63 @@ const Cortes: FC = () => {
         </div>
       </Modal>
 
+      {/* Asistente de cierre guiado */}
       <Modal
-        isOpen={!!closeOpen}
-        onClose={() => setCloseOpen(null)}
-        title="Cerrar caja"
-        maxWidth="sm"
+        isOpen={!!wizard}
+        onClose={() => setWizard(null)}
+        title={`Cierre guiado · ${wizard?.name || ''}`}
+        maxWidth="md"
         footer={
-          <>
-            <Button variant="outline" onClick={() => setCloseOpen(null)}>Cancelar</Button>
-            <Button onClick={close} loading={submitting}>Cerrar caja</Button>
-          </>
+          <div className="flex items-center justify-between w-full">
+            <Button
+              variant="outline"
+              onClick={() => setStep((s) => Math.max(0, s - 1))}
+              disabled={step === 0}
+            >
+              <ChevronLeft size={16} className="mr-1" />
+              Anterior
+            </Button>
+            {step < PASOS.length ? (
+              <Button onClick={() => setStep((s) => Math.min(PASOS.length, s + 1))}>
+                {step === PASOS.length - 1 ? 'Ver resumen' : 'Siguiente'}
+                <ChevronRight size={16} className="ml-1" />
+              </Button>
+            ) : (
+              <Button onClick={cerrarCaja} loading={submitting}>
+                <Lock size={16} className="mr-1.5" />
+                Cerrar caja
+              </Button>
+            )}
+          </div>
         }
       >
-        {closeOpen && (
+        {wizard && (
           <div className="space-y-4">
+            {/* Indicador de pasos */}
+            <div className="flex items-center gap-1.5 flex-wrap">
+              {[...PASOS.map((p) => p.titulo), 'Resumen'].map((t, i) => (
+                <span
+                  key={t}
+                  className={`px-2 py-0.5 rounded-full text-xs font-medium ${
+                    i === step ? 'bg-theme-accent text-theme-inverse'
+                      : i < step ? 'bg-theme-accent-bg text-theme-heading'
+                      : 'bg-theme-bg text-theme-muted'
+                  }`}
+                >
+                  {i + 1}. {t}
+                </span>
+              ))}
+            </div>
             <p className="text-sm text-theme-muted">
-              Corte: <span className="font-medium text-theme-heading">{closeOpen.name}</span>
+              Ventas del día: <span className="font-medium text-theme-heading">{money(wizard.total_sales)}</span>
+              {' · '}Fondo inicial: <span className="font-medium text-theme-heading">{money(wizard.opening_cash)}</span>
             </p>
-            <p className="text-sm text-theme-muted">
-              Ventas registradas: <span className="font-medium text-theme-heading">${closeOpen.total_sales}</span>
-            </p>
-            <Input
-              label="Efectivo final"
-              type="number"
-              min={0}
-              step={0.01}
-              value={closingCash}
-              onChange={(e) => setClosingCash(e.target.value)}
-            />
+            {renderPaso()}
           </div>
         )}
       </Modal>
+
+      <CortePrint corte={printCorte} onClose={() => setPrintCorte(null)} />
     </Layout>
   );
 };