Mejoras integrales: visitas, POS, WACRM, reportes, temas y módulos legacy
- Módulo Visitas completo (auto desde agenda, insumos con descargo de inventario, fotos antes/después y documentos, receta imprimible) - Punto de Venta (catálogo + ticket sticky, cobro con cambio, pago con puntos monedero, ticket imprimible) - WACRM: leads automáticos desde WhatsApp, asignación de conversaciones y leads a agentes, conversión lead→paciente, ficha del paciente en chat - Pacientes: completitud de expediente, alertas clínicas, historial unificado con detalle, foto, WhatsApp, estado de cuenta, filtros rápidos (VIP/recientes/médico), documentos (expediente escaneado + galería) - Agenda: vistas por médico y por hora, filtros rápidos (libres, primera vez, check-in, no-show), modal de acciones, bloqueos por médico, drag&drop para mover citas - Reportes: 18 pestañas (diario, cortes, ingresos, inventario, adeudos, comisiones, pagos, devoluciones, top clientes, horas, paquetes, vendedores, concentrado, recomendaciones, KPIs) con exportación Excel - Temas: nuevo tema Clásico (look legacy AdminLTE) con submenús tipo treeview, selector de tema; accesos rápidos personalizables con 3 presentaciones; búsqueda global; notificaciones reales - Configuración: secciones (clínica, usuarios con permisos por sección, recetas, catálogos de diagnósticos y procedimientos) - Inventario: alertas de caducidad y sugerencia de compra, cron diario que descuenta artículos caducados, compras/bajas - Consultas Médicas, página Expedientes, importadores delta (citas/visitas legacy idempotentes), depuración de duplicados - Infra: tema Tailwind conectado (@config), gzip en nginx, secuencias Odoo corregidas (noupdate, company_id), rollback en validaciones
This commit is contained in:
178
frontend/src/components/inventario/AlertasPanel.tsx
Normal file
178
frontend/src/components/inventario/AlertasPanel.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
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 { ExportButton } from '../ui/ExportButton';
|
||||
import { exportToExcel } from '../../lib/exporter';
|
||||
import { odooApi, type CaducidadRow, type SugerenciaRow } from '../../services/odoo';
|
||||
import type { BadgeVariant } from '../ui/Badge';
|
||||
|
||||
const fmtMoney = (n: number) =>
|
||||
(n || 0).toLocaleString('es-MX', { style: 'currency', currency: 'MXN', maximumFractionDigits: 2 });
|
||||
|
||||
const caducidadBadge = (row: CaducidadRow): { variant: BadgeVariant; label: string } => {
|
||||
if (row.vencido) return { variant: 'danger', label: `Vencido hace ${Math.abs(row.dias_restantes)} días` };
|
||||
if (row.dias_restantes <= 30) return { variant: 'warning', label: `${row.dias_restantes} días` };
|
||||
return { variant: 'info', label: `${row.dias_restantes} días` };
|
||||
};
|
||||
|
||||
const AlertasPanel: FC = () => {
|
||||
const [caducidades, setCaducidades] = useState<CaducidadRow[]>([]);
|
||||
const [sugerencia, setSugerencia] = useState<SugerenciaRow[]>([]);
|
||||
const [totalSugerencia, setTotalSugerencia] = useState({ items: 0, costo_total: 0 });
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [exporting, setExporting] = useState(false);
|
||||
|
||||
const load = useCallback(async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const res = await odooApi.getInventarioAlertas();
|
||||
if (res.status === 'success') {
|
||||
setCaducidades(res.caducidades);
|
||||
setSugerencia(res.sugerencia_compra);
|
||||
setTotalSugerencia(res.sugerencia_total);
|
||||
}
|
||||
} catch (err) {
|
||||
toast.error('Error al cargar alertas');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, []);
|
||||
|
||||
useEffect(() => { load(); }, [load]);
|
||||
|
||||
const exportar = async () => {
|
||||
try {
|
||||
setExporting(true);
|
||||
await exportToExcel({
|
||||
filename: `sugerencia-compra-${new Date().toISOString().split('T')[0]}`,
|
||||
sheetName: 'Sugerencia de compra',
|
||||
title: 'Sugerencia de compra — inventario SKEEN',
|
||||
subtitle: `${totalSugerencia.items} artículos bajo mínimo · costo estimado ${fmtMoney(totalSugerencia.costo_total)}`,
|
||||
columns: [
|
||||
{ header: 'Artículo', key: 'name' },
|
||||
{ header: 'Categoría', key: 'category' },
|
||||
{ header: 'Unidad', key: 'unit' },
|
||||
{ header: 'Existencia', key: 'qty', format: 'number' },
|
||||
{ header: 'Mínimo', key: 'qty_min', format: 'number' },
|
||||
{ header: 'Óptimo', key: 'qty_optimal', format: 'number' },
|
||||
{ header: 'Sugerido', key: 'sugerido', format: 'number' },
|
||||
{ header: 'Costo estimado', key: 'costo_estimado', format: 'currency' },
|
||||
],
|
||||
rows: sugerencia.map((s) => ({ ...s })),
|
||||
totals: { name: '', costo_estimado: totalSugerencia.costo_total },
|
||||
});
|
||||
toast.success('Excel descargado');
|
||||
} catch (err) {
|
||||
toast.error('Error al exportar');
|
||||
console.error(err);
|
||||
} finally {
|
||||
setExporting(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
{/* Caducidades */}
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<h3 className="font-heading text-xl text-theme-heading mb-1 flex items-center">
|
||||
<CalendarX size={20} className="mr-2" /> Caducidades
|
||||
</h3>
|
||||
<p className="text-xs text-theme-muted mb-4">Artículos con fecha de caducidad registrada, ordenados por urgencia.</p>
|
||||
{loading ? (
|
||||
<Skeleton count={4} className="h-10 w-full" />
|
||||
) : caducidades.length === 0 ? (
|
||||
<EmptyState title="Sin caducidades" subtitle="Ningún artículo tiene fecha de caducidad registrada." icon={<CalendarX size={28} />} />
|
||||
) : (
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-theme-bg text-theme-muted text-xs uppercase">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3">Artículo</th>
|
||||
<th className="text-left px-4 py-3 hidden sm:table-cell">Categoría</th>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-theme-border">
|
||||
{caducidades.map((c) => {
|
||||
const b = caducidadBadge(c);
|
||||
return (
|
||||
<tr key={c.id} className="hover:bg-theme-bg">
|
||||
<td className="px-4 py-3 font-medium text-theme-heading">{c.name}</td>
|
||||
<td className="px-4 py-3 text-theme-muted hidden sm:table-cell">{c.category || '-'}</td>
|
||||
<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>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
)}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
|
||||
{/* Sugerencia de compra */}
|
||||
<Card>
|
||||
<Card.Body>
|
||||
<div className="flex items-start justify-between gap-3 mb-1">
|
||||
<h3 className="font-heading text-xl text-theme-heading flex items-center">
|
||||
<ShoppingCart size={20} className="mr-2" /> Sugerencia de compra
|
||||
</h3>
|
||||
<ExportButton onClick={exportar} loading={exporting} />
|
||||
</div>
|
||||
<p className="text-xs text-theme-muted mb-4">
|
||||
Artículos bajo su stock mínimo (o sin existencia). Sugerido = óptimo − existencia (o 2× mínimo).
|
||||
</p>
|
||||
{loading ? (
|
||||
<Skeleton count={6} className="h-10 w-full" />
|
||||
) : sugerencia.length === 0 ? (
|
||||
<EmptyState title="Sin faltantes" subtitle="Todos los artículos están por encima de su mínimo." icon={<ShoppingCart size={28} />} />
|
||||
) : (
|
||||
<>
|
||||
<div className="overflow-x-auto">
|
||||
<table className="w-full text-sm">
|
||||
<thead className="bg-theme-bg text-theme-muted text-xs uppercase">
|
||||
<tr>
|
||||
<th className="text-left px-4 py-3">Artículo</th>
|
||||
<th className="text-right px-4 py-3">Existencia</th>
|
||||
<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>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody className="divide-y divide-theme-border">
|
||||
{sugerencia.map((s) => (
|
||||
<tr key={s.id} className="hover:bg-theme-bg">
|
||||
<td className="px-4 py-3 font-medium text-theme-heading">{s.name}</td>
|
||||
<td className="px-4 py-3 text-right text-theme-muted">{s.qty} {s.unit}</td>
|
||||
<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>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
<div className="flex justify-end mt-3 pt-3 border-t border-theme-border">
|
||||
<p className="text-sm text-theme-muted">
|
||||
Total estimado: <span className="font-semibold text-theme-heading">{fmtMoney(totalSugerencia.costo_total)}</span>
|
||||
{' '}({totalSugerencia.items} artículos)
|
||||
</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</Card.Body>
|
||||
</Card>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default AlertasPanel;
|
||||
Reference in New Issue
Block a user