import { Icon } from "@iconify/react";
import {
Box,
Button,
Card,
CardContent,
Chip,
Paper,
Skeleton,
Table,
TableBody,
TableCell,
TableContainer,
TableHead,
TableRow,
TextField,
Typography,
} from "@mui/material";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import { toast } from "sonner";
import * as XLSX from "xlsx";
import {
getPromesasDashboardCashflow,
getReporteCumplimientoPromesas,
} from "../../api/cobranzas.service";
import { AccesoRestringido } from "../../components/common/AccesoRestringido";
import { usePermission } from "../../hooks/usePermission";
import { fmtFechaCalendario, hoyISO } from "../../utils/fecha";
import { sanitizeRows } from "../../components/_standards";
// ==================== HELPERS ====================
const fmtGs = (n) =>
`Gs. ${Number(n || 0).toLocaleString("es-PY", { maximumFractionDigits: 0 })}`;
const fmtNum = (n) =>
Number(n || 0).toLocaleString("es-PY", { maximumFractionDigits: 0 });
const fmtPct = (n) => `${Number(n || 0).toFixed(1)}%`;
const getHoy = () => hoyISO();
const getInicioMes = () => {
const d = new Date();
d.setDate(1);
return d.toISOString().split("T")[0];
};
const tasaColor = (pct) => {
if (pct >= 80) return "success";
if (pct >= 50) return "warning";
return "error";
};
// ==================== EXPORT ====================
function exportarExcel(porCobrador, proyeccion, periodo) {
const wb = XLSX.utils.book_new();
const rowsCob = [
["Cobrador", "Total", "Cumplidas", "Parciales", "Incumplidas", "Pendientes", "Tasa cumpl. (%)", "Gs. cumplido"],
];
for (const r of porCobrador) {
rowsCob.push([
r.cobrador_nombre,
r.total,
r.cumplidas,
r.cumplidas_parciales,
r.incumplidas,
r.pendientes,
Number(r.tasa_cumplimiento || 0).toFixed(1),
r.monto_cumplido,
]);
}
XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(sanitizeRows(rowsCob)), "Cobradores");
const rowsProy = [["Fecha", "Monto Gs."]];
for (const p of proyeccion) rowsProy.push([p.fecha, p.monto]);
XLSX.utils.book_append_sheet(wb, XLSX.utils.aoa_to_sheet(sanitizeRows(rowsProy)), "Cashflow");
XLSX.writeFile(wb, `reporte-promesas-${periodo.desde}-${periodo.hasta}.xlsx`);
toast.success("Reporte exportado correctamente");
}
// ==================== COMPONENT ====================
export default function PromesasReportePage() {
const navigate = useNavigate();
const { can } = usePermission("COBRANZAS");
const canRead = can("COB_PRM_REPORTE_CUMPLIMIENTO");
const [fechaDesde, setFechaDesde] = useState(getInicioMes());
const [fechaHasta, setFechaHasta] = useState(getHoy());
const [reporte, setReporte] = useState(null);
const [cashflow, setCashflow] = useState(null);
const [loading, setLoading] = useState(false);
const cargar = async () => {
setLoading(true);
try {
const [rep, cf] = await Promise.all([
getReporteCumplimientoPromesas({
fecha_desde: fechaDesde || undefined,
fecha_hasta: fechaHasta || undefined,
}),
getPromesasDashboardCashflow(),
]);
setReporte(rep);
setCashflow(cf);
} catch (e) {
toast.error(e?.response?.data?.message || "Error cargando reporte");
} finally {
setLoading(false);
}
};
useEffect(() => {
if (canRead) cargar();
// eslint-disable-next-line react-hooks/exhaustive-deps
}, []);
if (!canRead) return ;
const porCobrador = reporte?.por_cobrador || [];
const totalPromesas = porCobrador.reduce((acc, r) => acc + (r.total || 0), 0);
const totalCumplidas = porCobrador.reduce(
(acc, r) => acc + (r.cumplidas || 0) + (r.cumplidas_parciales || 0),
0,
);
const totalIncumplidas = porCobrador.reduce((acc, r) => acc + (r.incumplidas || 0), 0);
const totalMontoCumplido = porCobrador.reduce(
(acc, r) => acc + Number(r.monto_cumplido || 0),
0,
);
const tasaGlobal = totalPromesas > 0 ? (totalCumplidas / totalPromesas) * 100 : 0;
const proyeccion = cashflow?.proyeccion || [];
return (
{/* ── Header ── */}
Cumplimiento de Promesas
Tasa de cumplimiento por cobrador y cashflow proyectado de promesas pendientes
}
onClick={() =>
reporte &&
exportarExcel(porCobrador, proyeccion, { desde: fechaDesde, hasta: fechaHasta })
}
disabled={!reporte || loading}
>
Exportar
navigate("/reportes")}>
Reportes
{" > "}Cumplimiento de Promesas
{/* ── Filtros ── */}
setFechaDesde(e.target.value)}
InputLabelProps={{ shrink: true }}
sx={{ minWidth: 145 }}
/>
setFechaHasta(e.target.value)}
InputLabelProps={{ shrink: true }}
sx={{ minWidth: 145 }}
/>
}
onClick={cargar}
disabled={loading}
>
Consultar
{/* ── KPIs ── */}
Total promesas
{fmtNum(totalPromesas)}
Cumplidas
{fmtNum(totalCumplidas)}
Incumplidas
{fmtNum(totalIncumplidas)}
Tasa global
{fmtPct(tasaGlobal)}
Monto cumplido
{fmtGs(totalMontoCumplido)}
{/* ── Cumplimiento por cobrador ── */}
Cumplimiento por cobrador
{loading ? (
{[...Array(5)].map((_, i) => (
))}
) : porCobrador.length === 0 ? (
Sin promesas en el rango seleccionado
) : (
Cobrador
Total
Cumpl.
Parc.
Incumpl.
Pend.
Tasa
Gs. cumplido
{porCobrador.map((r) => (
{r.cobrador_nombre || "— Sin cobrador"}
{fmtNum(r.total)}
{fmtNum(r.cumplidas)}
{fmtNum(r.cumplidas_parciales)}
{fmtNum(r.incumplidas)}
{fmtNum(r.pendientes)}
{fmtGs(r.monto_cumplido)}
))}
)}
{/* ── Cashflow proyectado ── */}
Cashflow proyectado de promesas pendientes
Total pendiente
{fmtGs(cashflow?.total_pendiente)}
{cashflow?.total_promesas ?? 0} promesa(s) pendiente(s)
{loading ? (
{[...Array(4)].map((_, i) => (
))}
) : proyeccion.length === 0 ? (
No hay promesas pendientes futuras
) : (
Fecha prometida
Monto Gs.
{proyeccion.map((r) => (
{fmtFechaCalendario(r.fecha)}
{fmtGs(r.monto)}
))}
)}
);
}