{/* "Suivre" / "Discussion" removed — placeholders with no
backing feature confused beginners. "Exporter" now
produces a CSV with the project's headline data so the
button does something concrete. "Modifier" deep-links
to the Projects screen where the existing edit flow
lives (transfer org, set lead, rename, etc.). */}
{/* Document projet complet (Phase exports · 2026-05) :
Word ou PDF avec toutes les sections de cadrage
(Objectifs, ToC, Parties prenantes, Hypotheses). */}
{supaProject && supaProject.uuid && (
)}
{supaProject && supaProject.uuid && (
)}
{supaProject && supaProject.uuid && (
)}
{supaProject && supaProject.uuid && (
)}
{/* Phase progress */}
{[
{ k: "appraisal", l: lang === "fr" ? "Évaluation ex ante" : "Ex-ante appraisal" },
{ k: "inception", l: lang === "fr" ? "Démarrage" : "Inception" },
{ k: "implementation", l: lang === "fr" ? "Mise en œuvre" : "Implementation" },
{ k: "closing", l: lang === "fr" ? "Clôture" : "Closing" },
{ k: "evaluation", l: lang === "fr" ? "Évaluation finale" : "Final evaluation" },
].map((p, i) => (
{p.l}
))}
{/* Tabs · chaque tab porte un --tab-hue OKLCH pour la coloration */}
{lang === "fr"
? "Les montants sont saisis en millions de la devise indiquée et convertis en valeur brute pour le stockage."
: "Amounts are entered in millions of the currency shown and stored as raw values."}
{/* Champs non éditables ici (rappel) */}
{lang === "fr"
? "ℹ️ Pour transférer le projet vers une autre organisation/programme ou changer le responsable, utilisez l'écran « Projets »."
: "ℹ️ To transfer the project to another organization/programme or change its lead, use the 'Projects' screen."}
{/* Inline filter dropdown — replaces the previous placeholder
. Compact + accessible without a
modal layer. */}
{/* Render the Ajouter button only when the user has the
indicators.edit permission. For non-editors we hide it
entirely rather than show a disabled stub — they're not
expected to create indicators at all, and a greyed-out
button on every page would just be visual noise. */}
{mayEdit && (
)}
)}
{siteView === "map" && (() => {
// Group sites by region (since real coords aren't on the schema).
// Each region renders as a "bubble" sized by site count, coloured
// by the worst-state site in the group. Gives a quick visual scan
// of where the project's footprint is + where attention is needed.
const regions = {};
SITES.forEach((s) => {
const key = (isPort ? s.t : countryName(s.c)) + " · " + s.reg;
if (!regions[key]) regions[key] = { country: isPort ? s.t : countryName(s.c), reg: s.reg, sites: [], worst: "ok" };
regions[key].sites.push(s);
if (s.s === "bad" || (s.s === "warn" && regions[key].worst === "ok")) regions[key].worst = s.s;
});
const groups = Object.values(regions);
return (
{lang === "fr"
? "Vue carte simplifiée — regroupement par région (coordonnées GPS non disponibles pour les sites de ce projet)."
: "Simplified map view — grouped by region (GPS coordinates not available on this project's sites)."}
{editing && (
setEditing(null)}
onSaved={async () => { await live.refresh(); setEditing(null); }}
/>
)}
);
}
// =====================================================================
// Budget category catalog — francophone NGO / development-bank
// accounting buckets. Two top-level groups (CAPEX = investment / OPEX
// = recurring) with French-first sub-categories. Stored as a flat
// "CAPEX › Immobilisations corporelles › Équipements" string in
// project_team.role_label-style, so we keep the existing single text
// column and can recover the breadcrumb client-side.
//
// Tweak / extend without breaking existing rows: any value not in the
// catalogue is treated as a free-text custom category.
// =====================================================================
const BUDGET_CATEGORY_CATALOG = [
{
group: "CAPEX",
fr: "CAPEX — Investissements",
en: "CAPEX — Investments",
items: [
{ id: "capex_intangible_studies", fr: "Immo. incorporelles · frais d'études", en: "Intangibles · study fees" },
{ id: "capex_intangible_notary", fr: "Immo. incorporelles · frais de notaire", en: "Intangibles · notary fees" },
{ id: "capex_intangible_licenses", fr: "Immo. incorporelles · licences / logiciels", en: "Intangibles · licenses / software" },
{ id: "capex_intangible_other", fr: "Immo. incorporelles · autres", en: "Intangibles · other" },
{ id: "capex_construction", fr: "Immo. corporelles · construction / BTP", en: "Tangibles · construction / civil works" },
{ id: "capex_rehabilitation", fr: "Immo. corporelles · réhabilitation", en: "Tangibles · rehabilitation" },
{ id: "capex_equipment", fr: "Immo. corporelles · équipements", en: "Tangibles · equipment" },
{ id: "capex_furniture", fr: "Immo. corporelles · mobilier / aménagement", en: "Tangibles · furniture / fit-out" },
{ id: "capex_vehicles", fr: "Immo. corporelles · matériel roulant", en: "Tangibles · vehicles / rolling stock" },
{ id: "capex_it", fr: "Immo. corporelles · informatique / IT", en: "Tangibles · IT hardware" },
{ id: "capex_financial", fr: "Immo. financières · titres / cautions", en: "Financial · securities / deposits" },
],
},
{
group: "OPEX",
fr: "OPEX — Charges d'exploitation",
en: "OPEX — Operating expenses",
items: [
{ id: "opex_staff", fr: "Personnel projet · salaires & charges", en: "Project staff · salaries & charges" },
{ id: "opex_consultants", fr: "Consultants / expertise externe", en: "Consultants / external expertise" },
{ id: "opex_training", fr: "Formation & coaching", en: "Training & coaching" },
{ id: "opex_supplies", fr: "Fournitures & consommables", en: "Supplies & consumables" },
{ id: "opex_medical_supplies", fr: "Médicaments & intrants médicaux", en: "Medicines & medical inputs" },
{ id: "opex_rent", fr: "Loyers & charges immobilières", en: "Rent & property charges" },
{ id: "opex_utilities", fr: "Eau, électricité, télécoms", en: "Utilities (water/elec/telecom)" },
{ id: "opex_transport", fr: "Transport, déplacements, missions", en: "Transport, travel, missions" },
{ id: "opex_per_diem", fr: "Per diems & frais de séjour", en: "Per diems & subsistence" },
{ id: "opex_services", fr: "Services externes (audit, légal, banque)", en: "External services (audit, legal, banking)" },
{ id: "opex_maintenance", fr: "Entretien & maintenance", en: "Maintenance & upkeep" },
{ id: "opex_communication", fr: "Communication & reporting", en: "Communication & reporting" },
{ id: "opex_me", fr: "Suivi & évaluation (S&E)", en: "M&E activities" },
{ id: "opex_overhead", fr: "Frais de gestion / overhead", en: "Management overhead" },
{ id: "opex_contingency", fr: "Provisions / imprévus", en: "Contingency / provisions" },
{ id: "opex_other", fr: "Autres charges", en: "Other expenses" },
],
},
];
// Resolve a stored category string to a catalogue entry (when it
// matches one of our ids or labels). Returns null for free-text values.
function resolveBudgetCategory(stored) {
if (!stored) return null;
const s = String(stored).trim();
for (const g of BUDGET_CATEGORY_CATALOG) {
for (const it of g.items) {
if (it.id === s || it.fr === s || it.en === s) return { group: g, item: it };
}
}
return null;
}
// =====================================================================
// PDBudgetLineModal — create / edit a row in public.budget_lines.
// Amounts are entered in the project's native currency (NOT millions),
// matching how the DB stores them. The PDBudget table displays them in
// millions via fmtM(). Category is a 2-level dropdown sourced from
// BUDGET_CATEGORY_CATALOG with a free-text fallback for legacy /
// custom entries.
// =====================================================================
function PDBudgetLineModal({ lang, projectUuid, row, currency, onClose, onSaved }) {
const { useState, useMemo } = React;
const isEdit = !!row;
// Decompose the stored category: if it matches a catalogue entry,
// pre-fill both the group + sub-category. Otherwise drop into
// free-text mode so the user can still edit legacy / one-off rows.
const initialResolved = useMemo(() => resolveBudgetCategory(row && row.category), [row]);
const initialMode = initialResolved ? "catalog" : (row && row.category ? "custom" : "catalog");
const [mode, setMode] = useState(initialMode);
const [groupCode, setGroupCode] = useState(initialResolved ? initialResolved.group.group : "");
const [itemId, setItemId] = useState(initialResolved ? initialResolved.item.id : "");
const [customCategory, setCustomCategory] = useState(
!initialResolved && row && row.category ? row.category : ""
);
const [label, setLabel] = useState(row ? (row.label || "") : "");
const [budget, setBudget] = useState(row ? (row.budget != null ? String(row.budget) : "") : "");
const [disbursed, setDisbursed] = useState(row ? (row.disbursed != null ? String(row.disbursed) : "") : "");
const [committed, setCommitted] = useState(row ? (row.committed != null ? String(row.committed) : "") : "");
const [position, setPosition] = useState(row ? (row.position != null ? String(row.position) : "0") : "0");
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
// Build the category string we'll persist. Catalog mode stores the
// localised label (e.g. "Immo. corporelles · équipements") which is
// what we want to display in tables and exports. Free-text mode
// stores whatever the user typed.
const resolvedCategory = useMemo(() => {
if (mode === "custom") return customCategory.trim();
const g = BUDGET_CATEGORY_CATALOG.find((x) => x.group === groupCode);
if (!g) return "";
const it = g.items.find((x) => x.id === itemId);
if (!it) return "";
return lang === "fr" ? it.fr : it.en;
}, [mode, groupCode, itemId, customCategory, lang]);
// Sub-items list for the picked group.
const groupItems = useMemo(() => {
const g = BUDGET_CATEGORY_CATALOG.find((x) => x.group === groupCode);
return g ? g.items : [];
}, [groupCode]);
const onSubmit = async () => {
setErr(null);
if (!resolvedCategory) { setErr(lang === "fr" ? "Catégorie requise." : "Category required."); return; }
const b = budget === "" ? 0 : Number(budget);
const d = disbursed === "" ? 0 : Number(disbursed);
const c = committed === "" ? 0 : Number(committed);
if (!isFinite(b) || !isFinite(d) || !isFinite(c)) { setErr(lang === "fr" ? "Montants invalides." : "Invalid amounts."); return; }
if (d > c && c > 0) { setErr(lang === "fr" ? "Décaissé ne peut dépasser l'engagé." : "Disbursed cannot exceed committed."); return; }
setBusy(true);
try {
const payload = {
category: resolvedCategory,
label: label.trim() || resolvedCategory,
budget: b,
disbursed: d,
committed: c || d,
currency: (currency || "EUR").slice(0, 3),
position: parseInt(position, 10) || 0,
};
if (isEdit) await window.melr.budgetLinesCrud.update(row.id, payload);
else await window.melr.budgetLinesCrud.create(projectUuid, payload);
await onSaved();
} catch (e) { setErr(e.message); }
finally { setBusy(false); }
};
const lbl = { display: "block", fontSize: 10.5, color: "var(--text-faint)", marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em", marginTop: 10 };
const inp = { width: "100%", padding: "6px 8px", borderRadius: 6, border: "1px solid var(--line)", fontSize: 12.5, background: "var(--bg, white)", color: "var(--text)", boxSizing: "border-box", fontFamily: "inherit" };
const Modal = window.Modal;
return (
}
>
{mode === "catalog" ? (
) : (
setCustomCategory(e.target.value)}
placeholder={lang === "fr" ? "Saisissez une catégorie sur mesure" : "Enter a custom category"} />
)}
setLabel(e.target.value)}
placeholder={lang === "fr"
? "Détail (ex : « Antibiotiques de 1re ligne »)"
: "Detail (e.g. 'First-line antibiotics')"} />
{lang === "fr"
? `Tous les montants sont en ${currency || "EUR"} brut (pas en millions). La conversion en M${(currency || "EUR")} est faite à l'affichage.`
: `All amounts are in raw ${currency || "EUR"} (not millions). Display values are converted to M${(currency || "EUR")} automatically.`}
setBudget(e.target.value)} placeholder="0" />
setCommitted(e.target.value)} placeholder="0" />
setDisbursed(e.target.value)} placeholder="0" />
setPosition(e.target.value)} />
{err &&
{err}
}
);
}
function PDTeam({ lang, TEAM: TEAM_OVERRIDE, projectUuid, projectOrgId }) {
const { useState } = React;
const DEFAULT_TEAM = [
{ n: "Aïssata Diallo", r: lang === "fr" ? "Chef de projet" : "Project lead", l: "Bamako", c: "ML" },
{ n: "Souleymane Touré", r: lang === "fr" ? "Responsable S&E" : "M&E officer", l: "Bamako", c: "ML" },
{ n: "Bintou Tall", r: lang === "fr" ? "Coordinatrice terrain" : "Field coordinator", l: "Tombouctou", c: "ML" },
{ n: "Yacouba Ouédraogo", r: lang === "fr" ? "Chef pays BF" : "Country lead BF", l: "Ouagadougou", c: "BF" },
{ n: "Halima Issoufou", r: lang === "fr" ? "Chef pays NE" : "Country lead NE", l: "Niamey", c: "NE" },
{ n: "Karim Bensaad", r: lang === "fr" ? "Référent qualité" : "Quality officer", l: "Bamako", c: "ML" },
{ n: "Aminata Coulibaly", r: lang === "fr" ? "Formation & coaching" : "Training & coaching", l: "Bamako", c: "ML" },
{ n: "Modou Sarr", r: lang === "fr" ? "Logistique régionale" : "Regional logistics", l: "Dakar", c: "SN" },
{ n: "Khadija Diabaté", r: lang === "fr" ? "Communication & reporting" : "Communication & reporting", l: "Bamako", c: "ML" },
{ n: "Fatima Ould Cheikh", r: lang === "fr" ? "Référente santé maternelle" : "Maternal health lead", l: "Nouakchott", c: "MR" },
];
// When we have a real project, prefer live data from project_team
// joined to profiles. Otherwise fall back to the demo team passed
// in by PORT or the hardcoded DEFAULT_TEAM.
const live = window.melr && window.melr.useProjectTeam
? window.melr.useProjectTeam(projectUuid || null)
: { data: [], loading: false, refresh: () => {} };
const useLive = !!projectUuid;
const [picking, setPicking] = useState(false);
const [busyUser, setBusyUser] = useState(null);
const liveCards = (live.data || []).map((m) => {
const name = (m.profile && m.profile.full_name) || (m.profile && m.profile.email) || "—";
return {
n: name,
r: m.role_label || (lang === "fr" ? "Membre" : "Member"),
l: m.profile && m.profile.email || "",
c: "",
_userId: m.user_id,
};
});
const TEAM = useLive ? liveCards : (TEAM_OVERRIDE || DEFAULT_TEAM);
const onRemove = async (userId, name) => {
if (!useLive || !userId) return;
if (!confirm(lang === "fr" ? `Retirer ${name} de l'équipe ?` : `Remove ${name} from the team?`)) return;
setBusyUser(userId);
try {
await window.melr.projectTeamCrud.remove(projectUuid, userId);
await live.refresh();
} catch (e) {
alert((lang === "fr" ? "Échec : " : "Failed: ") + e.message);
} finally { setBusyUser(null); }
};
return (
<>
{useLive && (
{
if (!useLive) {
alert(lang === "fr"
? "Cette page est en démo. Ouvrez un vrai projet pour gérer l'équipe."
: "This page is a demo. Open a real project to manage the team.");
return;
}
setPicking(true);
}}
title={useLive ? "" : (lang === "fr" ? "Démo" : "Demo")}
>
{lang === "fr" ? "Ajouter membre" : "Add member"}
{picking && (
m.user_id))}
onClose={() => setPicking(false)}
onAdded={async () => { await live.refresh(); setPicking(false); }}
/>
)}
);
}
// Catalogue of functional project roles. Different from the org-level
// roles table (admin / super_admin / member …): those gate tenant
// access, these describe what someone DOES on a specific project.
// The user picks 1+ via checkboxes — we persist as a comma-joined
// string in project_team.role_label (single text column).
const PROJECT_ROLE_CATALOG = [
{ id: "project_lead", fr: "Chef de projet", en: "Project lead" },
{ id: "me_lead", fr: "Responsable S&E", en: "M&E lead" },
{ id: "me_officer", fr: "Chargé S&E", en: "M&E officer" },
{ id: "field_coordinator", fr: "Coordinateur terrain", en: "Field coordinator" },
{ id: "country_lead", fr: "Chef pays", en: "Country lead" },
{ id: "quality_officer", fr: "Référent qualité", en: "Quality officer" },
{ id: "training", fr: "Formation & coaching", en: "Training & coaching" },
{ id: "logistics", fr: "Logistique", en: "Logistics" },
{ id: "communication", fr: "Communication & reporting", en: "Communication & reporting" },
{ id: "finance", fr: "Finance", en: "Finance" },
{ id: "technical_expert", fr: "Expert technique", en: "Technical expert" },
{ id: "data_analyst", fr: "Analyste de données", en: "Data analyst" },
];
// Member picker: lists every member of the project's organization
// (via organization_memberships, so users with a "home" elsewhere
// who joined this org also appear) and lets the user pick one to
// add to project_team. Role is a multi-select from
// PROJECT_ROLE_CATALOG, persisted as a comma-joined string.
// Filters out anyone already on the team so we don't violate the
// (project_id, user_id) primary key.
function PDTeamPickerModal({ lang, projectUuid, projectOrgId, existingUserIds, onClose, onAdded }) {
const { useState } = React;
// useOrgMembershipsList queries organization_memberships joined to
// profiles for the given org. Catches multi-org members that
// useOrgMembers (which filters on profiles.organization_id, i.e.
// the user's "home" org only) would miss — that was the reason
// super-admins acting in a different org saw an empty list.
const memListHook = window.melr && window.melr.useOrgMembershipsList;
const { data: memberships, loading } = memListHook
? memListHook(projectOrgId || null)
: { data: [], loading: false };
const [q, setQ] = useState("");
const [selected, setSelected] = useState(null); // profile id
const [rolesPicked, setRolesPicked] = useState([]); // array of catalog ids
const [extraRole, setExtraRole] = useState(""); // free text fallback
const [busy, setBusy] = useState(false);
const [err, setErr] = useState(null);
// De-dupe by user_id and keep the joined profile fields.
const rosterByUser = new Map();
for (const m of (memberships || [])) {
if (!m.user_id || rosterByUser.has(m.user_id)) continue;
rosterByUser.set(m.user_id, {
id: m.user_id,
full_name: m.fullName || (m.profiles && m.profiles.full_name) || null,
email: m.email || (m.profiles && m.profiles.email) || null,
});
}
const available = Array.from(rosterByUser.values()).filter((p) => !existingUserIds.has(p.id));
const ql = q.trim().toLowerCase();
const visible = ql
? available.filter((p) =>
(p.full_name || "").toLowerCase().includes(ql) ||
(p.email || "").toLowerCase().includes(ql))
: available;
const toggleRole = (id) => {
setRolesPicked((cur) => {
if (cur.includes(id)) return cur.filter((x) => x !== id);
// Keep the saved order matching the catalog order rather than
// click order so badges always render the same.
const order = PROJECT_ROLE_CATALOG.map((c) => c.id);
return [...cur, id].sort((a, b) => order.indexOf(a) - order.indexOf(b));
});
};
const onSave = async () => {
if (!selected) { setErr(lang === "fr" ? "Sélectionnez un membre." : "Pick a member."); return; }
// Build the role_label string: catalog labels (in catalog order),
// then any free-text extras the user typed.
const catLabels = rolesPicked.map((id) => {
const c = PROJECT_ROLE_CATALOG.find((x) => x.id === id);
return c ? (lang === "fr" ? c.fr : c.en) : null;
}).filter(Boolean);
const extras = (extraRole || "").split(",").map((s) => s.trim()).filter(Boolean);
const merged = [...catLabels, ...extras].join(", ");
setBusy(true); setErr(null);
try {
await window.melr.projectTeamCrud.add(projectUuid, selected, merged || null);
await onAdded();
} catch (e) { setErr(e.message); }
finally { setBusy(false); }
};
const Modal = window.Modal;
return (
}
>
{!projectOrgId && (
{lang === "fr"
? "Organisation du projet inconnue — la liste peut être incomplète."
: "Project organization unknown — list may be incomplete."}
)}
setQ(e.target.value)}
autoFocus
/>
{loading &&
{lang === "fr" ? "Chargement…" : "Loading…"}
}
{!loading && visible.length === 0 && (
{available.length === 0
? (lang === "fr" ? "Tous les membres de l'organisation sont déjà dans l'équipe." : "All organization members are already on the team.")
: (lang === "fr" ? "Aucun résultat." : "No results.")}
{lang === "fr"
? "Aucun document pour ce projet. Cliquez « Téléverser » pour ajouter une pièce jointe."
: "No document for this project. Click 'Upload' to attach a file."}