/* global React, Icon */ const { useState: useStateW, useMemo: useMemoW, useEffect: useEffectW } = React; // ==================== WORKFLOW / VALIDATION ==================== function Workflow({ t, lang, isSuperAdmin, actingOrgId, activeOrgId, myOrgId }) { const { data: liveItemsRaw, realtime, refresh: refreshQueue } = window.melr.useValidationQueue(); const LiveBadge = window.melr.LiveBadge; // Multi-org: narrow the validation queue to the effective org so the // counts/lists reflect the current context (super-admin acting > active // multi-org > home). validation_items rows expose organization_id // directly; falls back to no filter when effOrg is undefined. const effOrg = (isSuperAdmin && actingOrgId) ? actingOrgId : (activeOrgId || myOrgId); const liveItems = (effOrg && liveItemsRaw) ? liveItemsRaw.filter((it) => !it.organization_id || it.organization_id === effOrg) : (liveItemsRaw || []); // Current user id — used by the "À mon action / Que j'ai soumis" filters const [currentUserId, setCurrentUserId] = useStateW(null); useEffectW(() => { let cancelled = false; window.melr.currentProfile().then((p) => { if (!cancelled && p) setCurrentUserId(p.id); }); return () => { cancelled = true; }; }, []); // Show fixture items only when there is no live data, or when the user // explicitly toggles them on. Once at least one live item exists, the // demos hide automatically so the UI reflects real state. const [showDemo, setShowDemo] = useStateW(false); // Templates modal (Configurer flux) const [tplOpen, setTplOpen] = useStateW(false); // Bulk-action mode — when on, the queue shows checkboxes and the // toolbar offers Approve all / Send back all / Reject all on the // currently selected items. const [bulkMode, setBulkMode] = useStateW(false); const [bulkSelected, setBulkSelected] = useStateW({}); // { itemId: true } const [bulkBusy, setBulkBusy] = useStateW(false); const toggleBulkItem = (id) => setBulkSelected((s) => { const next = { ...s }; if (next[id]) delete next[id]; else next[id] = true; return next; }); // UUID regex — used to tell live (database) items from fixture items. const UUID_RE = /^[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}$/i; // Validation queue — cross-module items pending approval const FIXTURE_ITEMS = [ { id: "VAL-2026-117", type: "indicator", title: lang === "fr" ? "Mise à jour T1 — Taux de couverture vaccinale Penta-3" : "Q1 update — Penta-3 immunization coverage", project: "P-241", module: lang === "fr" ? "Indicateurs" : "Indicators", value: "78.4%", prev: "72.1%", who: "Aïssata Diallo", role: lang === "fr" ? "Chef de projet" : "Project lead", submitted: lang === "fr" ? "il y a 2 h" : "2 h ago", step: 1, sla: 2, prio: "high", evidence: 3, comments: 2 }, { id: "VAL-2026-116", type: "exante", title: lang === "fr" ? "Évaluation ex ante — P-415 Télémédecine CI" : "Ex-ante appraisal — P-415 Telemedicine CI", project: "P-415", module: lang === "fr" ? "Ex ante" : "Ex-ante", value: "VAN +1.84 M€", prev: "TRI 12.6%", who: "Yao Konan", role: lang === "fr" ? "Chef de projet" : "Project lead", submitted: lang === "fr" ? "il y a 6 h" : "6 h ago", step: 2, sla: 5, prio: "high", evidence: 12, comments: 7 }, { id: "VAL-2026-115", type: "dqa", title: lang === "fr" ? "Audit DQA — 4 sites avec écart > 10%" : "DQA audit — 4 sites with gap > 10%", project: "P-188", module: lang === "fr" ? "Audit données" : "Data audit", value: "9 / 18 " + (lang === "fr" ? "indicateurs" : "indicators"), prev: lang === "fr" ? "score 78%" : "score 78%", who: "Modou Sarr", role: lang === "fr" ? "Chef de projet" : "Project lead", submitted: lang === "fr" ? "hier, 17:42" : "yesterday, 5:42 pm", step: 1, sla: 3, prio: "med", evidence: 8, comments: 4 }, { id: "VAL-2026-114", type: "report", title: lang === "fr" ? "Rapport Q4 2025 — P-241 Sahel" : "Q4 2025 Report — P-241 Sahel", project: "P-241", module: "Reporting", value: "AFD-RP · 38 p.", prev: lang === "fr" ? "11 indicateurs" : "11 indicators", who: "Khadija Diabaté", role: lang === "fr" ? "Responsable S&E" : "M&E officer", submitted: lang === "fr" ? "hier, 09:18" : "yesterday, 9:18 am", step: 3, sla: 7, prio: "high", evidence: 24, comments: 11 }, { id: "VAL-2026-113", type: "indicator", title: lang === "fr" ? "Baseline — 12 indicateurs Tchad WASH" : "Baseline — 12 WASH indicators Chad", project: "P-377", module: "Baseline", value: "12 / 12", prev: lang === "fr" ? "19 sites" : "19 sites", who: "Mahamat Saleh", role: lang === "fr" ? "Chef de projet" : "Project lead", submitted: lang === "fr" ? "il y a 2 j" : "2 d ago", step: 1, sla: 4, prio: "med", evidence: 19, comments: 1 }, { id: "VAL-2026-112", type: "indicator", title: lang === "fr" ? "Correction — Mortalité maternelle Q3" : "Correction — Q3 maternal mortality", project: "P-302", module: lang === "fr" ? "Indicateurs" : "Indicators", value: "127 / 100k", prev: "142 / 100k", who: "Fatima Ould Cheikh", role: lang === "fr" ? "Chef de projet" : "Project lead", submitted: lang === "fr" ? "il y a 3 j" : "3 d ago", step: 2, sla: 1, prio: "high", evidence: 5, comments: 8 }, { id: "VAL-2026-111", type: "exante", title: lang === "fr" ? "Révision matrice MPR — P-462" : "MPR matrix revision — P-462", project: "P-462", module: lang === "fr" ? "Ex ante" : "Ex-ante", value: "32 " + (lang === "fr" ? "indicateurs" : "indicators"), prev: lang === "fr" ? "6 résultats" : "6 outcomes", who: "Karim Bensaad", role: lang === "fr" ? "Responsable S&E" : "M&E officer", submitted: lang === "fr" ? "il y a 4 j" : "4 d ago", step: 1, sla: 0, prio: "high", evidence: 14, comments: 5 }, { id: "VAL-2026-110", type: "report", title: lang === "fr" ? "Rapport annuel 2025 — Portefeuille AFD" : "Annual 2025 report — AFD portfolio", project: "—", module: "Reporting", value: lang === "fr" ? "9 projets · 247 sites" : "9 projects · 247 sites", prev: "—", who: "Khadija Diabaté", role: lang === "fr" ? "Responsable S&E" : "M&E officer", submitted: lang === "fr" ? "il y a 5 j" : "5 d ago", step: 4, sla: 12, prio: "high", evidence: 47, comments: 23 }, ]; // Map object_type → UI bucket (drives icon + chain definition). Default // chain lengths kept here so liveMapped doesn't reach forward into CHAIN // (which is declared further down in this function). const typeBucket = (ot) => { const o = String(ot || "").toLowerCase(); if (o.includes("sat") || o.includes("dvt") || o.includes("dqa") || o.includes("audit")) return "dqa"; if (o.includes("exante")) return "exante"; if (o.includes("report")) return "report"; return "indicator"; }; const DEFAULT_CHAIN_LEN = { indicator: 4, exante: 4, dqa: 3, report: 5 }; const liveMapped = (liveItems || []).map((it) => { const bucket = typeBucket(it.object_type); return { id: it.id, isLive: true, state: it.state, type: bucket, object_type: it.object_type, title: it.title || "", project: "—", module: it.object_type || "—", value: "—", prev: "—", who: "—", role: "—", submitted: new Date(it.submitted_at).toLocaleString(lang === "fr" ? "fr-FR" : "en-US"), submitted_at: it.submitted_at, due_at: it.due_at, submitted_by: it.submitted_by, assignee_id: it.current_assignee_id, assignee: it.assignee || null, step: it.current_step || 0, total_steps: it.total_steps || DEFAULT_CHAIN_LEN[bucket] || 1, sla: it.due_at ? Math.max(0, Math.ceil((new Date(it.due_at) - new Date()) / 86400000)) : 0, prio: it.priority || "med", evidence: 0, comments: 0, }; }); const fixtureMarked = FIXTURE_ITEMS.map((it) => ({ ...it, isLive: false })); // Only show fixtures when there are no live items (or the user opted in). const ITEMS = (liveMapped.length > 0 && !showDemo) ? liveMapped : (liveMapped.length === 0 ? fixtureMarked : [...liveMapped, ...fixtureMarked]); // Live counts — computed from real rows only (excludes fixtures) const sevenDaysAgo = new Date(Date.now() - 7 * 86400000); const liveOpen = liveMapped.filter((it) => ["submitted", "in_review", "sent_back"].includes(it.state)); // "Awaiting me" — precise when the item is assigned to me, falls back to // open items where I am not the submitter (broad bucket) when nothing is // assigned yet. const liveAwaiting = liveOpen.filter((it) => currentUserId != null && it.assignee_id === currentUserId ); const liveAwaitingFallback = liveOpen.filter((it) => currentUserId != null && !it.assignee_id && it.submitted_by !== currentUserId ); const liveAwaitingCount = liveAwaiting.length + liveAwaitingFallback.length; const liveMine = liveMapped.filter((it) => currentUserId != null && it.submitted_by === currentUserId); const liveOverdue = liveOpen.filter((it) => it.due_at && new Date(it.due_at) < new Date()); const liveApproved7 = liveMapped.filter((it) => it.state === "approved" && new Date(it.submitted_at) >= sevenDaysAgo); const liveRejected7 = liveMapped.filter((it) => it.state === "rejected" && new Date(it.submitted_at) >= sevenDaysAgo); const FILTERS = [ { k: "all", l: lang === "fr" ? "Tous" : "All", c: ITEMS.length }, { k: "mine", l: lang === "fr" ? "À mon action" : "Awaiting me", c: liveAwaitingCount }, { k: "submitted", l: lang === "fr" ? "Que j'ai soumis" : "I submitted", c: liveMine.length }, { k: "overdue", l: lang === "fr" ? "En retard" : "Overdue", c: liveOverdue.length }, { k: "approved", l: lang === "fr" ? "Approuvés (7j)" : "Approved (7d)", c: liveApproved7.length }, { k: "rejected", l: lang === "fr" ? "Rejetés (7j)" : "Rejected (7d)", c: liveRejected7.length }, ]; const [f, setF] = useStateW("all"); const [sel, setSel] = useStateW(ITEMS[0] ? ITEMS[0].id : null); const selected = useMemoW(() => ITEMS.find((x) => x.id === sel) || ITEMS[0] || null, [sel, ITEMS]); // Filter the displayed queue const filteredItems = useMemoW(() => { if (f === "all") return ITEMS; if (f === "mine") return [...liveAwaiting, ...liveAwaitingFallback]; if (f === "submitted") return liveMine; if (f === "overdue") return liveOverdue; if (f === "approved") return liveApproved7; if (f === "rejected") return liveRejected7; return ITEMS; }, [f, ITEMS, liveAwaiting.length, liveMine.length, liveOverdue.length, liveApproved7.length, liveRejected7.length]); const TYPE_ICON = { indicator: "trending", exante: "scale", dqa: "database", report: "fileText" }; const TYPE_TONE = { indicator: "accent", exante: "violet", dqa: "amber", report: "teal" }; // Workflow chain — defined per item type const CHAIN = { indicator: [ { r: lang === "fr" ? "Saisie terrain" : "Field data", who: "submitter", t: lang === "fr" ? "Soumet" : "Submits" }, { r: lang === "fr" ? "S&E" : "M&E", who: "S. Touré", t: lang === "fr" ? "Vérifie cohérence" : "Coherence check" }, { r: lang === "fr" ? "Chef de projet" : "Project lead", who: "A. Diallo", t: lang === "fr" ? "Valide" : "Validates" }, { r: lang === "fr" ? "Audit" : "Audit", who: "—", t: lang === "fr" ? "Échantillonné DQA" : "DQA-sampled" }, ], exante: [ { r: lang === "fr" ? "Chef de projet" : "Project lead", who: "submitter", t: lang === "fr" ? "Rédige & soumet" : "Drafts & submits" }, { r: lang === "fr" ? "Comité technique" : "Technical committee", who: lang === "fr" ? "3 membres" : "3 members", t: lang === "fr" ? "Revue MPR + analyse fi." : "MPR + financial review" }, { r: lang === "fr" ? "Direction" : "Direction", who: "D. Ndiaye", t: lang === "fr" ? "Décision Go / No-Go" : "Go / No-Go decision" }, { r: lang === "fr" ? "Bailleur" : "Donor", who: lang === "fr" ? "AFD" : "AFD", t: lang === "fr" ? "Avis final" : "Final opinion" }, ], dqa: [ { r: lang === "fr" ? "S&E" : "M&E", who: "submitter", t: lang === "fr" ? "Lance audit" : "Launches audit" }, { r: lang === "fr" ? "Chef de projet" : "Project lead", who: "M. Sarr", t: lang === "fr" ? "Plan d'action" : "Action plan" }, { r: lang === "fr" ? "Audit interne" : "Internal audit", who: "B. Tall", t: lang === "fr" ? "Clôture" : "Closes" }, ], report: [ { r: lang === "fr" ? "S&E" : "M&E", who: "submitter", t: lang === "fr" ? "Compile & rédige" : "Compiles & drafts" }, { r: lang === "fr" ? "Chef de projet" : "Project lead", who: "A. Diallo", t: lang === "fr" ? "Revue contenu" : "Content review" }, { r: lang === "fr" ? "Comité qualité" : "Quality committee", who: lang === "fr" ? "4 membres" : "4 members", t: lang === "fr" ? "Validation" : "Validation" }, { r: lang === "fr" ? "Direction" : "Direction", who: "D. Ndiaye", t: lang === "fr" ? "Approbation" : "Approval" }, { r: lang === "fr" ? "Bailleur" : "Donor", who: lang === "fr" ? "AFD" : "AFD", t: lang === "fr" ? "Diffusion" : "Distribution" }, ], }; // Activity log — for selected item const ACTIVITY = [ { who: "Aïssata Diallo", role: lang === "fr" ? "Chef de projet" : "Project lead", action: lang === "fr" ? "a soumis pour validation" : "submitted for validation", when: lang === "fr" ? "il y a 2 h" : "2 h ago", icon: "send", tone: "accent" }, { who: "Souleymane Touré", role: "S&E", action: lang === "fr" ? "a vérifié la cohérence avec la baseline" : "checked coherence with baseline", when: lang === "fr" ? "il y a 1 h 28" : "1 h 28 ago", icon: "check", tone: "green", note: lang === "fr" ? "+6.3 pts vs baseline T0 — cohérent avec la campagne de rattrapage février." : "+6.3 pts vs baseline — coherent with February catch-up." }, { who: "Karim Bensaad", role: lang === "fr" ? "Audit qualité" : "Quality audit", action: lang === "fr" ? "a demandé une pièce justificative" : "requested supporting evidence", when: lang === "fr" ? "il y a 47 min" : "47 min ago", icon: "alert", tone: "amber", note: lang === "fr" ? "Joindre la fiche de stock vaccin des 11 sites — l'écart de +6.3 pts mérite une vérification." : "Attach vaccine stock sheet from 11 sites — +6.3 pts gap warrants verification." }, { who: "Aïssata Diallo", role: lang === "fr" ? "Chef de projet" : "Project lead", action: lang === "fr" ? "a joint 3 pièces" : "attached 3 evidence", when: lang === "fr" ? "il y a 22 min" : "22 min ago", icon: "upload", tone: "accent", note: "stock-vaccin-fev2026.xlsx · scan-PV-CSCom.pdf · photos-vaccination-Tombouctou.zip" }, { who: lang === "fr" ? "En attente de vous" : "Waiting on you", role: lang === "fr" ? "Responsable S&E" : "M&E officer", action: lang === "fr" ? "doit valider" : "must validate", when: lang === "fr" ? "depuis 22 min" : "22 min", icon: "clock", tone: "amber", pending: true }, ]; // Live KPI cards — derive everything from liveMapped (not fixtures) const KPIS = [ { l: lang === "fr" ? "En attente de vous" : "Awaiting you", v: String(liveAwaitingCount), s: liveAwaiting.length > 0 ? (liveAwaiting.length + " " + (lang === "fr" ? "assigné(s)" : "assigned")) : (liveOverdue.length > 0 ? (liveOverdue.length + " " + (lang === "fr" ? "en retard" : "overdue")) : (lang === "fr" ? "à instruire" : "to act on")), tone: liveOverdue.length > 0 ? "amber" : (liveAwaitingCount > 0 ? "accent" : "green"), }, { l: lang === "fr" ? "Que j'ai soumis (en cours)" : "Mine in flight", v: String(liveMine.filter((it) => ["submitted", "in_review", "sent_back"].includes(it.state)).length), s: liveMine.length + " " + (lang === "fr" ? "au total" : "total"), tone: "accent", }, { l: lang === "fr" ? "Approuvés / 7 j" : "Approved / 7 d", v: String(liveApproved7.length), s: liveRejected7.length + " " + (lang === "fr" ? "rejetés" : "rejected"), tone: liveApproved7.length > 0 ? "green" : undefined, }, { l: lang === "fr" ? "Validations ouvertes" : "Open validations", v: String(liveOpen.length), s: liveMapped.length + " " + (lang === "fr" ? "au total" : "total"), tone: liveOverdue.length > 0 ? "amber" : "accent", }, ]; return (
{lang === "fr" ? "WORKFLOW" : "WORKFLOW"}

{lang === "fr" ? "Validation & approbation" : "Validation & approval"}

{lang === "fr" ? "Chaînes d'approbation multi-rôles · SLA & journal d'audit" : "Multi-role approval chains · SLA & audit log"}
{KPIS.map((k, i) => (
{k.l}
{k.v}
{k.s}
))}
{FILTERS.map((s) => ( ))}
{liveMapped.length > 0 && ( )}
{/* Bulk action toolbar — visible when bulk mode active */} {bulkMode && (
{Object.keys(bulkSelected).length} {lang === "fr" ? "item(s) sélectionné(s)" : "item(s) selected"}
)}
{/* Queue list */}
{lang === "fr" ? "File d'attente" : "Queue"} · {filteredItems.length}
{bulkMode ? (lang === "fr" ? "Mode sélection multiple actif" : "Bulk selection mode active") : (liveMapped.length === 0 ? (lang === "fr" ? "Démo · aucune validation live" : "Demo · no live validations") : (lang === "fr" ? "Trié par priorité" : "Sorted by priority"))}
{filteredItems.length === 0 && (
{lang === "fr" ? "Aucun item dans ce filtre." : "No item in this filter."}
)} {filteredItems.map((it) => { const Ic = Icon[TYPE_ICON[it.type]]; const tone = TYPE_TONE[it.type]; const overdue = it.sla === 0; const bulkEligible = it.isLive && ["submitted", "in_review", "sent_back"].includes(it.state); const bulkChecked = !!bulkSelected[it.id]; return ( ); })}
{/* Detail panel */}
{!selected ? (
{lang === "fr" ? "Sélectionnez un item dans la file pour voir le détail." : "Pick an item from the queue to see the detail."}
) : ( { if (!selected.isLive) { window.alert(lang === "fr" ? "Cet item est de démonstration (pas dans la base de données). Action ignorée." : "This is a demo item (not in the database). Action ignored."); return; } try { const currStep = selected.step || 0; const total = selected.total_steps || (CHAIN[selected.type] ? CHAIN[selected.type].length : 1); if (kind === "approve") { // Advance one step unless this is the final approval. // Clear current_assignee_id on advance so the next-step // user can self-assign or be assigned. const nextStep = currStep + 1; const isFinal = nextStep >= total; await window.melr.updateValidationItem(selected.id, { current_step: isFinal ? currStep : nextStep, state: isFinal ? "approved" : "in_review", current_assignee_id: null, }); await window.melr.createValidationAction(selected.id, { action: "approve", step_index: currStep, note: extra && extra.note, }); } else if (kind === "send_back") { // Reset to first step, owner must re-submit await window.melr.updateValidationItem(selected.id, { current_step: 0, state: "sent_back", }); await window.melr.createValidationAction(selected.id, { action: "send_back", step_index: currStep, note: extra && extra.note, }); } else if (kind === "comment") { await window.melr.createValidationAction(selected.id, { action: "comment", step_index: currStep, note: extra && extra.note, }); } else if (kind === "delegate") { // Delegation also re-assigns the item to the chosen user await window.melr.assignValidationItem(selected.id, extra && extra.delegated_to); await window.melr.createValidationAction(selected.id, { action: "delegate", step_index: currStep, note: extra && extra.note, attachments: { delegated_to: extra && extra.delegated_to }, }); } else if (kind === "self_assign") { await window.melr.assignValidationItem(selected.id, currentUserId); } await refreshQueue(); } catch (e) { window.alert((lang === "fr" ? "Erreur : " : "Error: ") + e.message); } }} /> )}
{/* Workflow templates / configuration */}
{lang === "fr" ? "Modèles de flux configurés" : "Configured workflow templates"}
{[ { t: lang === "fr" ? "Mise à jour indicateur" : "Indicator update", steps: 4, chain: CHAIN.indicator, sla: "3 j", remind: "48 h", deleg: lang === "fr" ? "Activée" : "Enabled", active: true }, { t: lang === "fr" ? "Évaluation ex ante" : "Ex-ante appraisal", steps: 4, chain: CHAIN.exante, sla: "10 j", remind: "72 h", deleg: lang === "fr" ? "Activée" : "Enabled", active: true }, { t: lang === "fr" ? "Audit DQA" : "DQA audit", steps: 3, chain: CHAIN.dqa, sla: "5 j", remind: "48 h", deleg: lang === "fr" ? "Désactivée" : "Disabled", active: true }, { t: lang === "fr" ? "Rapport périodique" : "Periodic report", steps: 5, chain: CHAIN.report, sla: "14 j", remind: "72 h", deleg: lang === "fr" ? "Activée" : "Enabled", active: true }, { t: lang === "fr" ? "Modification baseline" : "Baseline modification", steps: 3, chain: CHAIN.dqa, sla: "7 j", remind: "48 h", deleg: lang === "fr" ? "Activée" : "Enabled", active: false }, ].map((tpl, i) => ( ))}
{lang === "fr" ? "Type d'objet" : "Object type"} {lang === "fr" ? "Étapes" : "Steps"} {lang === "fr" ? "Chaîne d'approbation" : "Approval chain"} SLA {lang === "fr" ? "Auto-rappel" : "Auto-remind"} {lang === "fr" ? "Délégation" : "Delegation"} {lang === "fr" ? "Statut" : "Status"}
{tpl.t} {tpl.steps} {tpl.sla} {tpl.remind} {tpl.deleg} {tpl.active ? {lang === "fr" ? "Actif" : "Active"} : {lang === "fr" ? "Brouillon" : "Draft"}}
{tplOpen && setTplOpen(false)} />}
); } // ============================================================================ // Configurer flux — CRUD over validation_templates // ============================================================================ function WFTemplatesModal({ lang, onClose }) { const { data: rows, loading, refresh } = window.melr.useValidationTemplates(); const [editingId, setEditingId] = useStateW(null); const [draft, setDraft] = useStateW(null); const [busy, setBusy] = useStateW(false); const [err, setErr] = useStateW(null); // Object types the validation system currently knows about. Sourced from // grep across the codebase: screens-audit.jsx (sat_evaluation, dvt_audit), // screens-reporting.jsx (report), plus a placeholder for indicator_value // for future use. The list maps each technical slug to a user-friendly // bilingual label. const OBJECT_TYPES = [ { value: "sat_evaluation", fr: "SAT — Évaluation système d'audit", en: "SAT — System audit evaluation" }, { value: "dvt_audit", fr: "DVT — Vérification de données", en: "DVT — Data verification" }, { value: "report", fr: "Rapport bailleur / projet", en: "Donor / project report" }, { value: "indicator_value", fr: "Valeur d'indicateur", en: "Indicator value" }, { value: "exante", fr: "Dossier ex-ante", en: "Ex-ante dossier" }, { value: "baseline", fr: "Baseline / état initial", en: "Baseline" }, ]; // Default catalogue of step labels — the most common roles in an M&E // validation chain. The user picks the ones that apply via checkboxes; // the order in the array determines the order in the chain. const STEP_CATALOG = [ { id: "submission", fr: "Saisie", en: "Submission" }, { id: "me_review", fr: "Vérification S&E", en: "M&E review" }, { id: "data_check", fr: "Contrôle DQA", en: "DQA check" }, { id: "project_lead",fr: "Chef de projet", en: "Project lead" }, { id: "me_lead", fr: "Responsable S&E", en: "M&E lead" }, { id: "direction", fr: "Direction", en: "Direction" }, { id: "donor", fr: "Bailleur", en: "Donor" }, ]; const newDraft = () => ({ object_type: "", steps_picked: [], // array of step ids from STEP_CATALOG (in chain order) steps_text: "", // legacy free-text mode — only used when an existing // template has a custom step label not in STEP_CATALOG sla_days: 5, reminder_hours: 48, active: true, }); const onAdd = () => { setEditingId("new"); setDraft(newDraft()); }; // Try to match an existing template's step list back onto our catalogue. // Strategy: for each saved step, look for a STEP_CATALOG entry whose // FR or EN label matches case-insensitively. Anything we can't match // we leave as free-text in steps_text so the user can still edit it. const reverseStepsToPicked = (steps) => { if (!Array.isArray(steps)) return { picked: [], extra: "" }; const picked = []; const extra = []; for (const s of steps) { const label = typeof s === "string" ? s : (s.label || s.role || ""); if (!label) continue; const lc = label.toLowerCase().trim(); const match = STEP_CATALOG.find( (c) => c.fr.toLowerCase() === lc || c.en.toLowerCase() === lc || c.id === lc ); if (match && !picked.includes(match.id)) picked.push(match.id); else if (!match) extra.push(label); } return { picked, extra: extra.join(", ") }; }; const onEdit = (r) => { setEditingId(r.id); const { picked, extra } = reverseStepsToPicked(r.steps); setDraft({ object_type: r.object_type || "", steps_picked: picked, steps_text: extra, sla_days: r.sla_days || 5, reminder_hours: r.reminder_hours || 48, active: r.active !== false, }); }; const onSave = async () => { if (!draft || !draft.object_type.trim()) { setErr(lang === "fr" ? "Type d'objet requis." : "Object type required."); return; } // Build the steps list: picked checkboxes first (in catalogue order), // then any free-text additions appended at the end. const pickedLabels = (draft.steps_picked || []).map((id) => { const c = STEP_CATALOG.find((x) => x.id === id); return c ? (lang === "fr" ? c.fr : c.en) : null; }).filter(Boolean); const extraLabels = (draft.steps_text || "").split(",").map((s) => s.trim()).filter(Boolean); const labels = [...pickedLabels, ...extraLabels]; if (labels.length === 0) { setErr(lang === "fr" ? "Au moins une étape." : "At least one step."); return; } setBusy(true); setErr(null); try { const payload = { object_type: draft.object_type.trim(), steps: labels.map((label) => ({ label })), sla_days: parseInt(draft.sla_days, 10) || null, reminder_hours: parseInt(draft.reminder_hours, 10) || null, active: !!draft.active, }; if (editingId === "new") { await window.melr.validationTemplatesCrud.create(payload); } else { await window.melr.validationTemplatesCrud.update(editingId, payload); } await refresh(); setEditingId(null); setDraft(null); } catch (e) { setErr(e.message); } finally { setBusy(false); } }; const toggleStep = (id) => { if (!draft) return; const cur = draft.steps_picked || []; if (cur.includes(id)) { setDraft({ ...draft, steps_picked: cur.filter((x) => x !== id) }); } else { // Add in catalogue order rather than click order so the chain // displays consistently regardless of which boxes the user ticks first. const order = STEP_CATALOG.map((c) => c.id); const next = [...cur, id].sort((a, b) => order.indexOf(a) - order.indexOf(b)); setDraft({ ...draft, steps_picked: next }); } }; const onDelete = async (id) => { if (!confirm(lang === "fr" ? "Supprimer ce modèle ?" : "Delete this template?")) return; setBusy(true); setErr(null); try { await window.melr.validationTemplatesCrud.remove(id); await refresh(); } catch (e) { setErr(e.message); } finally { setBusy(false); } }; const stepsAsText = (r) => Array.isArray(r.steps) ? r.steps.map((s) => (typeof s === "string" ? s : (s.label || s.role || ""))).filter(Boolean).join(" → ") : "—"; 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 lbl = { display: "block", fontSize: 10.5, color: "var(--text-faint)", marginBottom: 3, textTransform: "uppercase", letterSpacing: "0.04em", marginTop: 8 }; return (
!busy && onClose()} style={{ position: "fixed", inset: 0, background: "rgba(0,0,0,.55)", zIndex: 9999, display: "flex", alignItems: "center", justifyContent: "center", }}>
e.stopPropagation()} style={{ background: "var(--bg, white)", color: "var(--text, #111)", padding: 0, borderRadius: 10, width: 800, maxWidth: "95vw", maxHeight: "90vh", boxShadow: "0 12px 36px rgba(0,0,0,.30)", display: "flex", flexDirection: "column", }}>
{lang === "fr" ? "Configurer les flux d'approbation" : "Configure approval flows"}
{(rows || []).length}
{loading &&
{lang === "fr" ? "Chargement…" : "Loading…"}
} {/* Editor row */} {editingId !== null && draft && (
{editingId === "new" ? (lang === "fr" ? "Nouveau modèle" : "New template") : (lang === "fr" ? "Modifier le modèle" : "Edit template")}
setDraft({ ...draft, sla_days: e.target.value })} />
setDraft({ ...draft, reminder_hours: e.target.value })} />
{STEP_CATALOG.map((c) => { const checked = (draft.steps_picked || []).includes(c.id); return ( ); })}
setDraft({ ...draft, steps_text: e.target.value })} /> {err &&
{err}
}
)} {/* List */} {(rows || []).length === 0 && !loading && ( )} {(rows || []).map((r) => { const ot = OBJECT_TYPES.find((o) => o.value === r.object_type); const otLabel = ot ? (lang === "fr" ? ot.fr : ot.en) : null; return ( ); })}
{lang === "fr" ? "Type d'objet" : "Object type"} {lang === "fr" ? "Chaîne d'étapes" : "Steps chain"} SLA {lang === "fr" ? "Rappel" : "Remind"} {lang === "fr" ? "Statut" : "Status"}
{lang === "fr" ? "Aucun modèle pour votre organisation. Cliquez « Nouveau modèle » pour commencer." : "No template for your organization. Click 'New template' to start."}
{otLabel || r.object_type}
{otLabel &&
{r.object_type}
} 		{stepsAsText(r)} {r.sla_days != null ? r.sla_days + " j" : "—"} {r.reminder_hours != null ? r.reminder_hours + " h" : "—"} {r.active ? {lang === "fr" ? "Actif" : "Active"} : {lang === "fr" ? "Inactif" : "Inactive"}}
{lang === "fr" ? "Note : les flux configurés ici sont stockés au niveau de votre organisation. Le système de soumission s'y référera (object_type = SAT, DVT, report…)." : "Note: flows configured here are stored at organization level. The submission system will reference them by object_type."}
); } function WFChainMini({ step, total }) { return (
{Array.from({ length: total }).map((_, i) => (
))}
); } function WFChainHorz({ chain }) { return (
{chain.map((c, i) => ( {c.r} {i < chain.length - 1 && } ))}
); } function WFDetail({ item, chain, activity, lang, typeTone, typeIcon, onAction, currentUserId }) { const Ic = Icon[typeIcon]; const [openModal, setOpenModal] = useStateW(null); // null | 'comment' | 'delegate' | 'approve' | 'send_back' // Live timeline of actions on this item (only for live database items) const { data: liveActions } = window.melr.useValidationActions(item.isLive ? item.id : null); // ---- Inline discussion composer state ---- const [commentText, setCommentText] = useStateW(""); const [commentMentions, setCommentMentions] = useStateW([]); // [{id, name}] const [commentFiles, setCommentFiles] = useStateW([]); // [{name, size, type}] const [orgUsers, setOrgUsers] = useStateW([]); const [mentionOpen, setMentionOpen] = useStateW(false); const [mentionPos, setMentionPos] = useStateW(null); // { left, top, width } const [commentBusy, setCommentBusy] = useStateW(false); const fileInputRef = React.useRef(null); const mentionBtnRef = React.useRef(null); // Close the mention dropdown on Escape or when clicking outside React.useEffect(() => { if (!mentionOpen) return; const onKey = (e) => { if (e.key === "Escape") setMentionOpen(false); }; const onScroll = () => setMentionOpen(false); window.addEventListener("keydown", onKey); window.addEventListener("scroll", onScroll, true); return () => { window.removeEventListener("keydown", onKey); window.removeEventListener("scroll", onScroll, true); }; }, [mentionOpen]); // Lazy-load org users when @mention is first opened const ensureOrgUsers = async () => { if (orgUsers.length > 0) return orgUsers; try { const rows = await window.melr.fetchOrgProfiles(); setOrgUsers(rows || []); return rows || []; } catch (e) { console.error(e); return []; } }; const onMentionClick = async () => { // Compute fixed-position anchor from the button rect so the dropdown // floats above any parent overflow:hidden / overflow:auto container. const rect = mentionBtnRef.current && mentionBtnRef.current.getBoundingClientRect(); if (rect) { const width = 300; const maxH = 280; // Default: open downward below the button. If there isn't enough room, // open upward above the button instead. const spaceBelow = window.innerHeight - rect.bottom; const openUp = spaceBelow < maxH + 20 && rect.top > maxH + 20; setMentionPos({ left: Math.max(8, Math.min(rect.left, window.innerWidth - width - 8)), top: openUp ? Math.max(8, rect.top - maxH - 4) : rect.bottom + 4, width, maxHeight: maxH, }); } await ensureOrgUsers(); setMentionOpen((v) => !v); }; const onMentionPick = (user) => { const name = user.full_name || user.email || "user"; setCommentText((t) => (t ? t + " " : "") + "@" + name + " "); setCommentMentions((m) => (m.some((x) => x.id === user.id) ? m : [...m, { id: user.id, name }])); setMentionOpen(false); }; const onAttachClick = () => { fileInputRef.current && fileInputRef.current.click(); }; const onFilesPicked = (e) => { const files = Array.from(e.target.files || []); if (files.length === 0) return; // Keep raw File objects so we can upload them on send. setCommentFiles((arr) => [...arr, ...files]); e.target.value = ""; }; const removeFile = (idx) => setCommentFiles((arr) => arr.filter((_, i) => i !== idx)); const removeMention = (idx) => setCommentMentions((arr) => arr.filter((_, i) => i !== idx)); const onSendComment = async () => { if (!item.isLive) { alert(lang === "fr" ? "Cet item est de démonstration. Comment ignoré." : "Demo item. Comment ignored."); return; } const text = commentText.trim(); if (!text && commentFiles.length === 0) return; setCommentBusy(true); try { // 1) Upload any files to Storage; collect their paths const uploadedFiles = []; for (const f of commentFiles) { try { const meta = await window.melr.uploadValidationAttachment(item.id, f); uploadedFiles.push(meta); // { path, name, size, type } } catch (e) { console.error("[upload] " + f.name, e); // Fall back to metadata-only if storage rejects (e.g. bucket missing) uploadedFiles.push({ name: f.name, size: f.size, type: f.type || "", uploadError: e.message }); } } // 2) Persist the comment with mentions + uploaded file paths in attachments await window.melr.createValidationAction(item.id, { action: "comment", step_index: item.step || 0, note: text, attachments: { mentions: commentMentions.map((m) => ({ id: m.id, name: m.name })), files: uploadedFiles, }, }); // Notify each @mentioned user (skip if they're the current user) if (commentMentions.length > 0) { const rows = commentMentions .filter((m) => !currentUserId || m.id !== currentUserId) .map((m) => ({ user_id: m.id, title: lang === "fr" ? "Vous avez été mentionné" : "You were mentioned", body: (lang === "fr" ? "Sur « " : "On '") + (item.title || "—") + (lang === "fr" ? " »" : "'") + (text ? " — " + text.slice(0, 200) : ""), kind: "mention", severity: "info", link_url: "/workflow", })); if (rows.length > 0) await window.melr.createBulkNotifications(rows); } setCommentText(""); setCommentMentions([]); setCommentFiles([]); } catch (e) { alert((lang === "fr" ? "Erreur : " : "Error: ") + e.message); } finally { setCommentBusy(false); } }; return (
{item.id} {item.module} · {item.project}
{item.title}
{lang === "fr" ? "Valeur" : "Value"}
{item.value}
{lang === "fr" ? "Assigné à" : "Assigned to"}
{item.assignee ? <>{initialsW(item.assignee.full_name || item.assignee.email)}{item.assignee.full_name || item.assignee.email} : {lang === "fr" ? "(non assigné)" : "(unassigned)"}}
{lang === "fr" ? "Soumis par" : "Submitted by"}
{initialsW(item.who)}{item.who}
SLA
{item.sla === 0 ? (lang === "fr" ? "En retard" : "Overdue") : (item.sla + " j")}
{/* Approval chain visualization */}
{chain.map((c, i) => { const state = i < item.step ? "done" : i === item.step ? "cur" : "todo"; return (
{state === "done" ? : state === "cur" ? {i + 1} : {i + 1}}
{c.r}
{c.who === "submitter" ? item.who : c.who}
{c.t}
{i < chain.length - 1 &&
} ); })}
{/* Action bar — for "your turn" */}
{lang === "fr" ? "Votre action requise" : "Your action required"} · {lang === "fr" ? "Étape" : "Step"} {item.step + 1} / {chain.length} — {chain[item.step] ? chain[item.step].t : "—"}
{/* Self-assign only when item is live, unassigned, and user is not the submitter */} {item.isLive && !item.assignee_id && currentUserId && item.submitted_by !== currentUserId && ( )}
{/* Activity timeline */}
{lang === "fr" ? "Activité" : "Activity"} {activity.length} {lang === "fr" ? "événements" : "events"}
{/* Live actions from validation_actions (database) */} {liveActions && liveActions.map((a) => { const labels = { approve: lang === "fr" ? "a approuvé" : "approved", send_back: lang === "fr" ? "a renvoyé" : "sent back", reject: lang === "fr" ? "a rejeté" : "rejected", comment: lang === "fr" ? "a commenté" : "commented", delegate: lang === "fr" ? "a délégué" : "delegated", }; const tones = { approve: "green", send_back: "amber", reject: "red", comment: "accent", delegate: "violet" }; const icons = { approve: "check", send_back: "x", reject: "x", comment: "message", delegate: "users" }; const AIc = Icon[icons[a.action]] || Icon.info; const who = (a.actor && a.actor.full_name) || (a.actor && a.actor.email) || "—"; return (
{who} · {labels[a.action] || a.action} {new Date(a.created_at).toLocaleString(lang === "fr" ? "fr-FR" : "en-US")}
{a.note &&
{a.note}
} {a.attachments && (a.attachments.files || []).length > 0 && (
{(a.attachments.files || []).map((f, idx) => ( ))}
)} {a.attachments && (a.attachments.mentions || []).length > 0 && (
{(a.attachments.mentions || []).map((m, idx) => ( @{m.name || m.id} ))}
)}
); })} {/* Demo activity fixture (always shown below the live trail) */} {activity.map((a, i) => { const AIc = Icon[a.icon] || Icon.info; return (
{a.who} · {a.role} · {a.action} {a.when}
{a.note &&
{a.note}
}
); })}
{lang === "fr" ? "Discussion" : "Discussion"}
AD