| {t("c.site")} | OUT.1.1 | OUT.1.2 | OUT.5.2 | {t("c.status")} |
|---|---|---|---|---|
| {r.s} | {r.v1} | {r.v2} | {r.v3} | {r.st === "ok" && {lang === "fr" ? "Validé" : "Validated"}} {r.st === "warn" && {lang === "fr" ? "À revoir" : "Review"}} {r.st === "pending" && {lang === "fr" ? "Attendu" : "Pending"}} {r.st === "partial" && {lang === "fr" ? "Partiel" : "Partial"}} |
"}) — the parent EnterValueModal
// later persists each non-empty row into indicator_value_disaggregations
// using that axis_values object verbatim.
function PefaComponentsGrid({ lang, components, cells, setCells, pefaLabels }) {
// Stable cell key for a given component
const keyFor = (code) => JSON.stringify({ pefa_component: code });
const onChangeGrade = (compCode, val) => {
const k = keyFor(compCode);
setCells((prev) => ({
...prev,
[k]: { ...(prev[k] || {}), value_text: val, axis_values: { pefa_component: compCode } },
}));
};
// Count of components that have a grade assigned, for the status footer
const filled = components.reduce((acc, c) => {
const cell = cells[keyFor(c.code)];
const vt = cell && typeof cell.value_text === "string" && cell.value_text.trim();
return acc + (vt ? 1 : 0);
}, 0);
return (
{lang === "fr"
? <>Composantes PEFA · {components.length} sous-composante{components.length > 1 ? "s" : ""}. Saisir la note (A · B+ · B · C+ · C · D+ · D · NR) pour chacune. Aucun calcul automatique — la note finale est saisie au-dessus.
: <>PEFA components · {components.length} sub-component{components.length > 1 ? "s" : ""}. Pick a grade (A · B+ · B · C+ · C · D+ · D · NR) for each. No auto-computation — the final grade is entered above.}
{lang === "fr" ? "Code" : "Code"}
{lang === "fr" ? "Nom de la composante" : "Component name"}
{lang === "fr" ? "Note PEFA" : "PEFA grade"}
{components.map((comp) => {
const k = keyFor(comp.code);
const cell = cells[k] || {};
const name = lang === "fr"
? (comp.name_fr || comp.name_en || comp.code)
: (comp.name_en || comp.name_fr || comp.code);
return (
{comp.code}
{name}
);
})}
{lang === "fr"
? `${filled} / ${components.length} composante${components.length > 1 ? "s" : ""} notée${filled > 1 ? "s" : ""} · pas de calcul automatique`
: `${filled} / ${components.length} component${components.length > 1 ? "s" : ""} graded · no auto-computation`}
);
}
function DisaggregationGrid({ lang, assignedAxes, cells, setCells, isPefa, pefaLabels, pefaComponents }) {
// Special PEFA-components mode: when the definition declares structured
// components (PI-X.1 … PI-X.N), bypass the generic axis machinery and
// render one row per component with a name + alphabetic dropdown. The
// assignedAxes are ignored in this mode — components are the only
// disaggregation dimension that matters for a PEFA indicator's score.
const isPefaComponentsMode = isPefa && Array.isArray(pefaComponents) && pefaComponents.length > 0;
if (isPefaComponentsMode) {
return (
{assignedAxes.map((a, i) => (
{lang === "fr" ? (a.axis.name_fr || a.axis.code) : (a.axis.name_en || a.axis.name_fr || a.axis.code)}
))}
{isPefa ? (
{lang === "fr" ? "Note PEFA" : "PEFA grade"}
) : (
<>
N
D
{lang === "fr" ? "Calculé" : "Computed"}
)}
{combinations.map((combo) => {
const c = cells[combo.key] || {};
const n = c.numerator === "" || c.numerator == null ? null : Number(c.numerator);
const d = c.denominator === "" || c.denominator == null ? null : Number(c.denominator);
let computed = null;
if (n != null && d != null && d > 0) computed = n / d; // ratio
else if (n != null && (d == null || d === 0)) computed = n; // raw count
return (
{combo.labelParts.map((p, i) => (
{p.label}{p.isOrgLocal && ★}
))}
{isPefa ? (
) : (
<>
onChangeCell(combo.key, "numerator", e.target.value)}
style={{
width: 80, padding: "4px 6px", textAlign: "right",
border: "1px solid var(--line)", borderRadius: 4, fontSize: 12,
background: "var(--bg, white)", color: "var(--text)",
fontFamily: "monospace",
}} />
onChangeCell(combo.key, "denominator", e.target.value)}
style={{
width: 80, padding: "4px 6px", textAlign: "right",
border: "1px solid var(--line)", borderRadius: 4, fontSize: 12,
background: "var(--bg, white)", color: "var(--text)",
fontFamily: "monospace",
}} />
{computed == null ? "—" : (d != null && d > 0 ? (computed * 100).toFixed(1) + " %" : computed.toFixed(2))}
)}
);
})}
{isPefa ? (
// PEFA mode: just a status line, no aggregation. The final
// grade lives in the dropdown ABOVE the grid — see the
// explanatory caption on that dropdown.
{lang === "fr"
? `${totals.filledCount} / ${totals.totalCount} sous-composantes notées · pas de calcul automatique`
: `${totals.filledCount} / ${totals.totalCount} sub-components graded · no auto-computation`}
) : (
{lang === "fr" ? "TOTAL" : "TOTAL"} · {totals.filledCount} / {totals.totalCount} {lang === "fr" ? "cellules remplies" : "cells filled"}
{totals.numerator || "—"}
{totals.denominator || "—"}
{totals.ratio != null ? (totals.ratio * 100).toFixed(1) + " %" : (totals.numerator ? totals.numerator : "—")}
)}
);
}
// ── Disaggregation context banner (E4) ────────────────────────────────────
// Shown at the top of EnterValueModal to make the disaggregation rules
// fully visible BEFORE the user starts typing.
// - linked to catalogue + axes/components configured → list them as chips
// - linked to catalogue but nothing configured → neutral notice
// - not linked to catalogue (manual indicator) → explanatory notice
// so the user understands why there is no grid (and how to fix it).
function DisaggregationContextBanner({ lang, indicator, definition, assignedAxes, pefaComponents, isPefa }) {
const linked = !!(indicator && indicator.definition_code);
const axes = Array.isArray(assignedAxes) ? assignedAxes : [];
const comps = Array.isArray(pefaComponents) ? pefaComponents : [];
const hasSomething = axes.length > 0 || comps.length > 0;
// Case 3 : manual indicator, no link to catalogue → explanatory chip
if (!linked) {
return (
{lang === "fr"
? <>Cet indicateur n'est pas lié au catalogue. Aucune désagrégation héritée. Pour activer la désagrégation, ouvrir « Définition des indicateurs » et lier cet indicateur à une définition (code importé).
: <>This indicator isn't linked to the catalogue. No inherited disaggregation. To enable disaggregation, open "Indicator definitions" and link this indicator to a definition (imported code).}
);
}
// Case 2 : linked but nothing configured
if (!hasSomething) {
return (
{lang === "fr"
? <>Indicateur lié au catalogue ({indicator.definition_code}) mais aucune désagrégation configurée. Pour en ajouter, ouvrir « Définition des indicateurs » → modifier cette définition.
: <>Indicator linked to catalogue ({indicator.definition_code}) but no disaggregation configured. To add some, open "Indicator definitions" → edit this definition.}
);
}
// Case 1 : list axes/components as chips
return (
{lang === "fr" ? "Désagrégation à saisir" : "Disaggregation to enter"}
{/* PEFA components first if any */}
{isPefa && comps.length > 0 && comps.map((c) => {
const name = lang === "fr"
? (c.name_fr || c.name_en || c.code)
: (c.name_en || c.name_fr || c.code);
return (
{c.code}
{name && name !== c.code && · {name}}
);
})}
{/* Generic axes */}
{axes.map((row, i) => {
const label = lang === "fr" ? (row.axis && (row.axis.name_fr || row.axis.code)) : (row.axis && (row.axis.name_en || row.axis.name_fr || row.axis.code));
return (
{label}
{row.is_required && *}
);
})}
);
}
function EnterValueModal({ lang, indicator, onClose, onCreated }) {
// Default period: current quarter
const today = new Date();
const q = Math.floor(today.getMonth() / 3);
const periodStartDefault = new Date(today.getFullYear(), q * 3, 1).toISOString().slice(0, 10);
const periodEndDefault = new Date(today.getFullYear(), q * 3 + 3, 0).toISOString().slice(0, 10);
const valueKind = (indicator && indicator.value_kind) || "numeric";
const isPefa = valueKind === "score_pefa";
const pefaLabels = (window.melr.scoreLabels && window.melr.scoreLabels("score_pefa")) || [];
// ── Disaggregation lookup (Phase D) ───────────────────────────────────
// Resolve definition_code → definition_id, then load the axes configured
// for that definition. If 1+ axes configured, switch to the pivot grid
// mode (PEFA included — sub-components scored alphabetically without
// auto-summation, see PEFA branch in DisaggregationGrid).
const { data: definition } = window.melr.useDefinitionByCode(indicator && indicator.definition_code);
const { data: assignedAxes, loading: axesLoading } = window.melr.useDefinitionDisaggregations(definition && definition.id);
// E1: PEFA structured components live on the definition itself (jsonb
// array). When present AND the indicator is PEFA, they REPLACE the
// generic axis-based grid with a 1-row-per-component layout.
const pefaComponents = (isPefa && definition && Array.isArray(definition.components)) ? definition.components : [];
const hasPefaComponents = pefaComponents.length > 0;
// Grid mode triggers if the indicator either has axes assigned OR (PEFA)
// has structured components declared on its definition.
const useGrid = (assignedAxes && assignedAxes.length > 0) || hasPefaComponents;
// ── Simple-mode state (no disaggregation) ─────────────────────────────
const [value, setValue] = useStateI("");
const [valueText, setValueText] = useStateI("");
const [periodStart, setPeriodStart] = useStateI(periodStartDefault);
const [periodEnd, setPeriodEnd] = useStateI(periodEndDefault);
const [comment, setComment] = useStateI("");
const [submitting, setSubmitting] = useStateI(false);
const [err, setErr] = useStateI(null);
// ── Grid-mode state (disaggregated) ───────────────────────────────────
// gridCells is keyed by JSON.stringify(axis_values). Each entry holds the
// user-entered N/D for one combination.
const [gridCells, setGridCells] = useStateI({});
const submit = async (e) => {
e.preventDefault();
setErr(null); setSubmitting(true);
try {
let numeric;
let payloadValue = null;
let payloadValueText = null;
let payloadNumerator = null;
let payloadDenominator = null;
// Cells to upsert AFTER the parent indicator_value is created (only
// populated in grid mode).
let gridRowsToSave = null;
if (useGrid && isPefa) {
// PEFA + grid : the final score comes from the dropdown above the
// grid (valueText). The grid cells carry the alphabetic grades of
// each sub-component — NO auto-summation, NO numeric computation
// of the parent from the cells (PEFA framework decision-making is
// qualitative, not a simple average).
if (!valueText) throw new Error(lang === "fr" ? "Veuillez saisir la note finale PEFA." : "Please pick the final PEFA grade.");
numeric = window.melr.scoreToNumeric("score_pefa", valueText);
payloadValueText = valueText;
// Collect non-empty grid cells with their alphabetic grade
const rows = [];
Object.entries(gridCells).forEach(([key, c]) => {
const vt = (c.value_text || "").trim();
if (!vt) return;
const v = window.melr.scoreToNumeric("score_pefa", vt);
rows.push({
axis_values: JSON.parse(key),
value: Number.isFinite(v) ? v : null,
value_text: vt,
});
});
gridRowsToSave = rows;
} else if (useGrid) {
// Aggregate the grid: sum all numerators and denominators across
// every filled cell. The parent indicator_value gets the totals
// (so charts + progress bars still work), each cell goes into
// indicator_value_disaggregations.
let totN = 0, totD = 0, anyFilled = false, allCellsHaveDenom = true;
const rows = [];
Object.entries(gridCells).forEach(([key, c]) => {
const n = c.numerator === "" || c.numerator == null ? null : Number(c.numerator);
const d = c.denominator === "" || c.denominator == null ? null : Number(c.denominator);
if (n == null && d == null) return; // empty cell, skip
anyFilled = true;
if (Number.isFinite(n)) totN += n;
if (Number.isFinite(d)) { totD += d; } else { allCellsHaveDenom = false; }
rows.push({
axis_values: JSON.parse(key),
numerator: n,
denominator: d,
});
});
if (!anyFilled) throw new Error(lang === "fr" ? "Au moins une cellule doit être remplie." : "At least one cell must be filled.");
gridRowsToSave = rows;
// Parent value: ratio if all rows have a denominator > 0, else
// just the total count (numerator sum).
if (allCellsHaveDenom && totD > 0) {
numeric = totN / totD;
payloadValue = numeric;
payloadNumerator = totN;
payloadDenominator = totD;
} else {
numeric = totN;
payloadValue = totN;
payloadNumerator = totN; // also store as numerator for traceability
}
} else if (isPefa) {
numeric = window.melr.scoreToNumeric("score_pefa", valueText);
payloadValueText = valueText || null;
} else {
numeric = value === "" ? null : parseFloat(value);
payloadValue = value;
}
// Auto-derive status from numeric vs baseline/target.
let status = "pending";
const b = Number(indicator.baseline) || 0;
const t = Number(indicator.target) || 0;
if (numeric != null && !isNaN(numeric) && b !== t) {
const progress = (t > b) ? (numeric - b) / (t - b) : (b - numeric) / (b - t);
if (progress >= 0.9) status = "ok";
else if (progress >= 0.6) status = "warn";
else status = "risk";
}
const saved = await window.melr.createIndicatorValue(indicator.uuid, {
period_start: periodStart,
period_end: periodEnd,
value_kind: valueKind,
value: payloadValue,
value_text: payloadValueText,
numerator: payloadNumerator,
denominator: payloadDenominator,
status,
comment,
});
// If we used the grid, persist the per-cell breakdown
if (gridRowsToSave && gridRowsToSave.length > 0 && saved && saved.id) {
await window.melr.disaggregatedValuesCrud.upsertGrid(saved.id, gridRowsToSave);
}
if (onCreated) await onCreated();
onClose();
} catch (e2) {
setErr(e2.message);
} finally {
setSubmitting(false);
}
};
const inp = { padding: "8px 10px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 13 };
const lbl = { fontSize: 11, opacity: 0.75 };
return (