| {nombre} |
{moMant > 0 ? fmtMoney(moMant) : —} |
{moRep > 0 ? fmtMoney(moRep) : —} |
{fmtMoney(moMant + moRep)} |
setDraft(e.target.value)}
onWheel={e => e.target.blur()}
onBlur={handleBlur}
placeholder="—"
className="mono"
style={{
width: "100%", textAlign: "right",
background: isConfirmado ? "rgba(255,255,255,0.02)" : "rgba(255,255,255,0.04)",
border: `1px solid ${isConfirmado ? "var(--border)" : hasDraft ? "rgba(245,212,22,0.3)" : "var(--border)"}`,
borderRadius: "var(--radius-sm)", padding: "6px 10px",
color: isConfirmado ? "var(--text-mute)" : "var(--text)",
fontSize: 13, fontWeight: 600, outline: "none",
}}
/>
|
{chip}
{isConfirmado ? (
) : hasDraft ? (
) : null}
|
);
}
// ─── Vista principal ──────────────────────────────────────────────────────────
function ContabilidadView({ data, setData, mes }) {
const mesKey = mes;
const r = resultadoMes(data, mesKey);
const porTec = porTecnicoMes(data, mesKey);
const deuda = deudaProveedoresTotal(data);
const costosTotal = r.costoRepuestos + r.costosFijos + r.costosVariables + r.bonos;
const setBono = (tecnicoId, v) => {
setData(d => {
const bc = { ...(d.bonosContables || {}) };
const delMes = { ...(bc[mesKey] || {}) };
if (v > 0) delMes[tecnicoId] = v;
else delete delMes[tecnicoId];
bc[mesKey] = delMes;
return { ...d, bonosContables: bc };
});
};
const bonoConfirmado = (tecnicoId) => !!(data.bonosConfirmados || {})[mesKey]?.[tecnicoId];
const setBonoConfirmado = (tecnicoId, confirmado) => {
setData(d => {
const bc = { ...(d.bonosConfirmados || {}) };
const delMes = { ...(bc[mesKey] || {}) };
if (confirmado) delMes[tecnicoId] = true;
else delete delMes[tecnicoId];
bc[mesKey] = delMes;
return { ...d, bonosConfirmados: bc };
});
};
// Resumen de bonos para el chip del header
const mesBonosContables = (data.bonosContables || {})[mesKey] || {};
const mesBonosConfirmados = (data.bonosConfirmados || {})[mesKey] || {};
const withBonoCount = Object.values(mesBonosContables).filter(v => Number(v) > 0).length;
const confirmedCount = Object.entries(mesBonosContables)
.filter(([id, v]) => Number(v) > 0 && mesBonosConfirmados[id]).length;
// Ring SVG: circunferencia 2π×66 ≈ 414.69
const CIRC = 414.69;
const ringPct = Math.max(0, Math.min(100, r.margenPct));
const ringFill = (ringPct / 100) * CIRC;
const ringColor = r.margenNeto >= 0 ? "#f5d416" : "#e63946";
// Anchos de barras proporcionales (evitar /0)
const iT = r.ingresos.total || 1;
const cT = costosTotal || 1;
const pMant = +(r.ingresos.mantenimiento / iT * 100).toFixed(1);
const pRep = +(r.ingresos.reparacion / iT * 100).toFixed(1);
const pParts = +(r.ingresos.repuestos / iT * 100).toFixed(1);
const pCRep = +(r.costoRepuestos / cT * 100).toFixed(1);
const pCFij = +(r.costosFijos / cT * 100).toFixed(1);
const pCVar = +(r.costosVariables / cT * 100).toFixed(1);
const pCBon = +(r.bonos / cT * 100).toFixed(1);
const StackedBar = ({ segments }) => (
{segments.map(([color, pct], i) => (
0 ? 2 : 0 }} />
))}
);
const BkdItem = ({ color, label, pct, val, valColor }) => (
{label}
{pct}%
{fmtMoney(val)}
);
return (
<>
{/* ── HERO: ring + KPI stack ── */}
{/* Ring */}
Margen neto
= 0 ? "var(--ok)" : "var(--accent)" }}>
{fmtMoney(r.margenNeto)}
sobre {fmtMoney(r.ingresos.total)} ingresados
{/* KPI stack */}
{/* Ingresos */}
Ingresos del mes
{fmtMoney(r.ingresos.total)}
{r.ingresos.ordenes.length} órdenes cobradas
M.O. + REP.
{/* Costos */}
Costos totales
{fmtMoney(costosTotal)}
repuestos · fijos · variables · bonos
{r.ingresos.total > 0 ? Math.round(costosTotal / r.ingresos.total * 100) : 0}%
{/* Ganancia repuestos */}
Ganancia en repuestos
{fmtMoney(r.gananciaRepuestos)}
venta {fmtMoneyShort(r.ingresos.repuestos)} − costo {fmtMoneyShort(r.costoRepuestos)}
{r.ingresos.repuestos > 0 && (
+{Math.round(r.gananciaRepuestos / r.ingresos.repuestos * 100)}%
)}
{/* Proveedores */}
Deuda con proveedores
0 ? "var(--accent)" : "var(--ok)", marginTop: 1 }}>
{deuda > 0 ? fmtMoney(deuda) : "Al día"}
cuentas corrientes pendientes
0 ? "rgba(230,57,70,0.08)" : "rgba(63,178,127,0.08)",
color: deuda > 0 ? "rgba(230,57,70,0.6)" : "rgba(63,178,127,0.7)",
}}>
{deuda > 0 ? "PENDIENTE" : "OK"}
{/* ── BREAKDOWN ── */}
{/* Ingresos */}
Composición de ingresos
{fmtMoney(r.ingresos.total)}
{r.ingresos.total > 0 ? (
<>
) : (
Sin ingresos registrados este mes
)}
{/* Costos */}
Composición de costos
{fmtMoney(costosTotal)}
{costosTotal > 0 ? (
<>
) : (
Sin costos registrados este mes
)}
{/* ── TÉCNICOS + BONOS ── */}
{porTec.length > 0 && (
<>
Técnicos — {labelDeMes(mesKey)}
{withBonoCount > 0 && (
{porTec.filter(({ bono }) => bono > 0).map(({ t }) => (
))}
{confirmedCount} de {withBonoCount} bonos confirmados
)}
| Técnico |
M.O. mantenimiento |
M.O. reparación |
Total M.O. |
Bono del mes |
Estado |
{porTec.map(({ t, moMant, moRep, bono }) => (
setBono(t.id, v)}
onSetConfirmado={(c) => setBonoConfirmado(t.id, c)}
/>
))}
)}
);
}
window.ContabilidadView = ContabilidadView;