{lang === "fr"
? "Créer, modifier, désactiver les formulaires utilisés par la collecte de données mobile."
: "Create, edit, disable the forms used by mobile data collection."}
{lang === "fr"
? "Génère un fichier Excel avec une colonne par champ du schéma. Une feuille « Pièces jointes » contient les URLs signées (1h) pour les photos et signatures."
: "Produces an Excel file with one column per schema field. The 'Attachments' sheet has signed URLs (1h) for photos and signatures."}
setStartDate(e.target.value)} />
setEndDate(e.target.value)} />
{lang === "fr"
? "Laisser vide pour exporter toutes les saisies."
: "Leave blank to export all submissions."}
{lang === "fr" ? "Champs du formulaire" : "Form fields"}
{fields.length}
{/* "Modèle activité" shortcut — adds the standard 5-field activity
header (Projet + Activité + Date + GPS + Description) if none
of those keys are present yet. Idempotent: existing keys are
kept, missing ones are appended in the canonical order. */}
{fields.length === 0 && (
{lang === "fr"
? "Aucun champ. Cliquer « 🚀 Modèle activité » pour un en-tête standard, ou « Ajouter un champ » pour partir de zéro."
: "No field yet. Click '🚀 Activity template' for a standard header, or 'Add field' to start from scratch."}
{lang === "fr" ? "Restriction par agent (optionnel)" : "Restrict to specific agents (optional)"}
{restrictedAgentIds.length}
{restrictedAgentIds.length === 0 ? (
lang === "fr"
? "⚠ Aucune restriction active. Tous les agents affectés au projet de ce formulaire pourront le voir et le remplir sur mobile."
: "⚠ No restriction active. Every agent assigned to this form's project will see and submit it on mobile."
) : (
lang === "fr"
? "🔒 Restriction active : seuls les " + restrictedAgentIds.length + " agent(s) sélectionné(s) ci-dessous (et les admins) verront ce formulaire sur mobile."
: "🔒 Restriction active: only the " + restrictedAgentIds.length + " selected agent(s) below (and admins) will see this form on mobile."
)}
{lang === "fr"
? "Cliquez sur un agent pour l'ajouter / le retirer de la liste, puis « Enregistrer »."
: "Click an agent to toggle them in / out of the list, then 'Save'."}
{lang === "fr" ? "Aucun membre dans l'org." : "No member in the org."}
)}
)}
{isNew && (
{lang === "fr"
? "💡 La restriction par agent sera disponible après la création du formulaire."
: "💡 Per-agent restriction becomes available after the form is created."}
)}
{err && (
{err}
)}
);
}
// One row in the field-editor list
function FieldRow({ idx, field, lang, onPatch, onRemove, onUp, onDown, first, last }) {
const inp = { width: "100%", padding: "5px 8px", borderRadius: 5, border: "1px solid var(--line)", fontSize: 12, background: "var(--bg, white)", color: "var(--text)", boxSizing: "border-box", fontFamily: "inherit" };
// Type metadata for the help line (and any future type-specific hints)
const typeMeta = FIELD_TYPES.find((tt) => tt.v === (field.type || "text"));
const help = typeMeta && (lang === "fr" ? typeMeta.helpFr : typeMeta.helpEn);
return (
{/* One-liner describing what this field type becomes at saisie time —
documentation for the form designer, not the agent. */}
{help && (
{help}
)}
{field.type === "select" && (
onPatch({ options: opts })}
/>
)}
{field.type === "indicator" && (
onPatch({ indicator_id: id })}
/>
)}
{/* The new E2 field types (project, activity, gps, partners_multi,
indicators_multi, attachments, activity_status) don't need any
extra per-field config — they're rendered with sensible defaults
at saisie time. Just the help line above is enough. */}
);
}
// ── Indicator picker for the 'indicator' field type ────────────────────────
// Lets the form designer choose ONE indicator from the catalogue. Below the
// picker we preview the disaggregation axes that will apply at saisie time
// so the designer can confirm the form will generate the right grid.
function IndicatorFieldEditor({ lang, indicatorId, onChange }) {
// Live indicators across all projects the caller can see.
const { data: indicators } = window.melr.useIndicators ? window.melr.useIndicators() : { data: [] };
// Once an indicator is picked, fetch its definition + disaggregation
// assignments so we can show the preview chips.
const picked = (indicators || []).find((i) => i.id === indicatorId);
const defCode = picked && (picked.definition_code || picked.defCode);
const { data: definition } = window.melr.useDefinitionByCode(defCode);
const { data: assigned, loading: axesLoading } = window.melr.useDefinitionDisaggregations(definition && definition.id);
const sel = {
width: "100%", padding: "5px 8px", borderRadius: 5,
border: "1px solid var(--line)", fontSize: 12,
background: "var(--input-bg, var(--bg, white))", color: "var(--text)",
boxSizing: "border-box", fontFamily: "inherit",
};
return (
{lang === "fr" ? "Indicateur lie a ce champ" : "Indicator linked to this field"}
{/* Disaggregation preview */}
{indicatorId && (
{axesLoading ? (
{lang === "fr" ? "Chargement de la desagregation..." : "Loading disaggregation..."}
) : !assigned || assigned.length === 0 ? (
{lang === "fr"
? "Aucune desagregation configuree pour cet indicateur. Le champ collectera une seule valeur."
: "No disaggregation configured for this indicator. The field will collect a single value."}
{lang === "fr"
? "Lors de la saisie du formulaire, l'agent verra une grille N/D croisant ces axes."
: "When the form is filled, the agent will see an N/D grid crossing these axes."}
)}
)}
);
}
// ─── Visual options editor for select fields ────────────────────────────
// Row-based: each option has its own value + label inputs, reorder arrows
// and delete. "Auto" mode: if the user only fills the label, the value is
// auto-slugified from it so the saved JSON is clean.
function OptionsEditor({ lang, options, onChange }) {
const slug = (s) => (s || "").toString().toLowerCase()
.normalize("NFD").replace(/[̀-ͯ]/g, "")
.replace(/[^a-z0-9_]+/g, "_")
.replace(/^_+|_+$/g, "").slice(0, 32);
const setAt = (idx, patch) => {
const next = options.map((o, i) => i === idx ? { ...o, ...patch } : o);
onChange(next);
};
const onLabelChange = (idx, label) => {
const cur = options[idx] || {};
// If the value was empty OR was the auto-slug of the previous label,
// keep it in sync with the new label. Otherwise leave the value alone.
const prevAuto = slug(cur.label);
const valueIsAuto = !cur.value || cur.value === prevAuto;
setAt(idx, { label, value: valueIsAuto ? slug(label) : cur.value });
};
const onValueChange = (idx, value) => setAt(idx, { value });
const onAdd = () => onChange([...options, { value: "", label: "" }]);
const onRemove = (idx) => onChange(options.filter((_, i) => i !== idx));
const onMove = (idx, delta) => {
const next = options.slice();
const newIdx = idx + delta;
if (newIdx < 0 || newIdx >= next.length) return;
const [item] = next.splice(idx, 1);
next.splice(newIdx, 0, item);
onChange(next);
};
const inp = { width: "100%", padding: "4px 7px", borderRadius: 4, border: "1px solid var(--line)", fontSize: 11.5, background: "var(--bg, white)", color: "var(--text)", boxSizing: "border-box", fontFamily: "inherit" };
return (
{lang === "fr" ? "Options du menu déroulant" : "Dropdown options"}
{options.length}
{options.length === 0 ? (
{lang === "fr"
? "Aucune option. Cliquez « + Option » pour en ajouter une."
: "No option yet. Click '+ Option' to add one."}
onLabelChange(idx, e.target.value)}
placeholder={lang === "fr" ? "Oui, Non, Partiellement…" : "Yes, No, Partial…"} />
onValueChange(idx, e.target.value)}
placeholder="auto" />
))}
)}
{lang === "fr"
? "💡 La valeur stockée est générée automatiquement depuis le libellé. Modifiez-la manuellement uniquement si vous avez besoin d'un code précis (ex. clé d'export Excel)."
: "💡 The stored value is auto-derived from the label. Override it only when you need a specific code (e.g. Excel export key)."}