Oleada UX 4: Pagos/Adeudos (cobro en 1 click con recibo, plan de pagos), Monedero (movimientos narrados, ajustes auditados, MXN+USD), Inventario (alta rapida, conteo fisico con ajuste e historial, alertas accionables) + fix de folios de pago y cantidades de movimientos

This commit is contained in:
2026-09-17 20:31:52 +00:00
parent ac5896b1fc
commit 9ee3343e22
20 changed files with 2173 additions and 165 deletions

View File

@@ -1,8 +1,9 @@
import type { FC } from 'react';
import { useCallback, useEffect, useState } from 'react';
import { CalendarX, ShoppingCart } from 'lucide-react';
import { Card, Badge, EmptyState, Skeleton, toast } from '../ui';
import { CalendarX, ShoppingCart, ArrowUpFromLine } from 'lucide-react';
import { Card, Button, Badge, EmptyState, Skeleton, toast } from '../ui';
import { ExportButton } from '../ui/ExportButton';
import MovimientoModal from './MovimientoModal';
import { exportToExcel } from '../../lib/exporter';
import { odooApi, type CaducidadRow, type SugerenciaRow } from '../../services/odoo';
import type { BadgeVariant } from '../ui/Badge';
@@ -22,6 +23,8 @@ const AlertasPanel: FC = () => {
const [totalSugerencia, setTotalSugerencia] = useState({ items: 0, costo_total: 0 });
const [loading, setLoading] = useState(true);
const [exporting, setExporting] = useState(false);
// Acción directa de compra/baja desde la alerta (item precargado)
const [movModal, setMovModal] = useState<{ tipo: 'compra' | 'baja'; itemId: number; qty: number } | null>(null);
const load = useCallback(async () => {
try {
@@ -95,6 +98,7 @@ const AlertasPanel: FC = () => {
<th className="text-right px-4 py-3">Existencia</th>
<th className="text-left px-4 py-3">Caduca</th>
<th className="text-left px-4 py-3">Estado</th>
<th className="text-right px-4 py-3">Acción</th>
</tr>
</thead>
<tbody className="divide-y divide-theme-border">
@@ -107,6 +111,21 @@ const AlertasPanel: FC = () => {
<td className="px-4 py-3 text-right text-theme-muted">{c.qty} {c.unit}</td>
<td className="px-4 py-3 text-theme-heading">{c.expiry_date}</td>
<td className="px-4 py-3"><Badge variant={b.variant}>{b.label}</Badge></td>
<td className="px-4 py-3 text-right">
{c.vencido && c.qty > 0 ? (
<Button
size="sm"
variant="outline"
onClick={() => setMovModal({ tipo: 'baja', itemId: c.id, qty: c.qty })}
title="Dar de baja el artículo caducado"
>
<ArrowUpFromLine size={13} className="mr-1.5" />
Dar de baja
</Button>
) : (
<span className="text-xs text-theme-muted">—</span>
)}
</td>
</tr>
);
})}
@@ -144,7 +163,8 @@ const AlertasPanel: FC = () => {
<th className="text-right px-4 py-3 hidden sm:table-cell">Mínimo</th>
<th className="text-right px-4 py-3 hidden md:table-cell">Óptimo</th>
<th className="text-right px-4 py-3">Sugerido</th>
<th className="text-right px-4 py-3">Costo est.</th>
<th className="text-right px-4 py-3 hidden md:table-cell">Costo est.</th>
<th className="text-right px-4 py-3">Acción</th>
</tr>
</thead>
<tbody className="divide-y divide-theme-border">
@@ -155,7 +175,18 @@ const AlertasPanel: FC = () => {
<td className="px-4 py-3 text-right text-theme-muted hidden sm:table-cell">{s.qty_min || '-'}</td>
<td className="px-4 py-3 text-right text-theme-muted hidden md:table-cell">{s.qty_optimal || '-'}</td>
<td className="px-4 py-3 text-right font-medium text-theme-heading">+{s.sugerido} {s.unit}</td>
<td className="px-4 py-3 text-right text-theme-heading">{fmtMoney(s.costo_estimado)}</td>
<td className="px-4 py-3 text-right text-theme-heading hidden md:table-cell">{fmtMoney(s.costo_estimado)}</td>
<td className="px-4 py-3 text-right">
<Button
size="sm"
variant="outline"
onClick={() => setMovModal({ tipo: 'compra', itemId: s.id, qty: s.sugerido })}
title="Registrar la compra sugerida de este artículo"
>
<ShoppingCart size={13} className="mr-1.5" />
Registrar compra
</Button>
</td>
</tr>
))}
</tbody>
@@ -171,6 +202,14 @@ const AlertasPanel: FC = () => {
)}
</Card.Body>
</Card>
<MovimientoModal
isOpen={!!movModal}
tipo={movModal?.tipo || 'compra'}
initialItemId={movModal?.itemId ?? null}
initialQty={movModal?.qty ?? null}
onClose={() => setMovModal(null)}
onSaved={() => { load(); }}
/>
</div>
);
};