/* Humanitarian Organization — Console theme. */
const LEVEL_MAP_COLOR = { calm: '#16A37B', watch: '#E5A019', warning: '#E2742B', severe: '#DC4A4F' };
function VillageMap({ villages, synthesisByVillage, onSelect, focusVillageId }) {
const ref = React.useRef(null);
const mapRef = React.useRef(null);
const markersRef = React.useRef({});
React.useEffect(function () {
if (!ref.current || mapRef.current || !window.L) return;
const map = window.L.map(ref.current, { scrollWheelZoom: false }).setView([20.9, 95.5], 7);
window.L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors', maxZoom: 12,
}).addTo(map);
mapRef.current = map;
villages.forEach(function (v) {
const level = synthesisByVillage[v.id].level;
const marker = window.L.circleMarker([v.lat, v.lng], {
radius: 7, color: LEVEL_MAP_COLOR[level], fillColor: LEVEL_MAP_COLOR[level], fillOpacity: 0.85, weight: 2,
}).addTo(map);
marker.bindPopup('' + v.name + '
{['calm', 'watch', 'warning', 'severe'].map(function (l) {
return
;
})}
);
}
function AutoTriggerCountdown({ deadline }) {
const [now, setNow] = React.useState(Date.now());
React.useEffect(function () {
const t = setInterval(function () { setNow(Date.now()); }, 250);
return function () { clearInterval(t); };
}, []);
const total = window.AsterStore.AUTO_TRIGGER_WINDOW_MS;
const remaining = Math.max(0, deadline - now);
const s = Math.ceil(remaining / 1000);
return (
Review window — auto-triggers unless declined
{s}s
demo-accelerated window
);
}
function LevelSummaryStrip({ villages, synthesis, activeLevel, onLevelClick }) {
const counts = { calm: 0, watch: 0, warning: 0, severe: 0 };
villages.forEach(function (v) { counts[synthesis[v.id].level] += 1; });
return (
{['severe', 'warning', 'watch', 'calm'].map(function (l) {
const active = activeLevel === l;
return (
{counts[l]}
{LEVEL_LABEL[l]}
);
})}
);
}
function HumanitarianApp() {
const store = useAsterStore();
const [tab, setTab] = React.useState('villages');
const [callFilter, setCallFilter] = React.useState('all');
const [levelFilter, setLevelFilter] = React.useState('all');
const [search, setSearch] = React.useState('');
const [expandedVillage, setExpandedVillage] = React.useState(null);
const [toast, setToast, toastNode] = useToast();
const [protocolModal, setProtocolModal] = React.useState(null); // { template } | { blank } | null
const [matchModal, setMatchModal] = React.useState(null); // callId
const [approveCall, setApproveCall] = React.useState(null); // callId
const [declineCall, setDeclineCall] = React.useState(null); // callId
const [retractTarget, setRetractTarget] = React.useState(null); // protocolId
const org = window.AsterStore.ORG;
const focusVillages = store.villages.filter(function (v) { return org.focusRegions.indexOf(v.region) !== -1; });
const openCalls = store.calls.filter(function (c) { return c.status !== 'triggered' && c.status !== 'declined'; });
const activeProtocols = store.protocols.filter(function (p) { return p.active; });
const visibleVillages = focusVillages.filter(function (v) {
if (levelFilter !== 'all' && store.synthesis[v.id].level !== levelFilter) return false;
if (search.trim()) {
const q = search.trim().toLowerCase();
if ((v.name + ' ' + v.township + ' ' + v.region).toLowerCase().indexOf(q) === -1) return false;
}
return true;
}).sort(function (a, b) {
return window.AsterStore.levelRank(store.synthesis[b.id].level) - window.AsterStore.levelRank(store.synthesis[a.id].level);
});
const callCounts = { all: store.calls.length };
['submitted', 'reviewed', 'auto_pending', 'triggered', 'declined'].forEach(function (s) {
callCounts[s] = store.calls.filter(function (c) { return c.status === s; }).length;
});
const CALL_FILTERS = [
{ id: 'all', label: 'All', count: callCounts.all },
{ id: 'submitted', label: 'Submitted', count: callCounts.submitted },
{ id: 'reviewed', label: 'Under review', count: callCounts.reviewed },
{ id: 'auto_pending', label: 'Auto-trigger pending', count: callCounts.auto_pending },
{ id: 'triggered', label: 'Triggered', count: callCounts.triggered },
{ id: 'declined', label: 'Declined', count: callCounts.declined },
];
const visibleCalls = store.calls.filter(function (c) { return callFilter === 'all' || c.status === callFilter; });
const approveTarget = approveCall ? window.AsterStore.findCall(approveCall) : null;
const approveProtocol = approveTarget && approveTarget.protocolId ? window.AsterStore.findProtocol(approveTarget.protocolId) : null;
return (
Humanitarian Organization
{org.name}
{org.focusRegions.map(function (r) { return {r} ; })}
{/* ================= VILLAGES ================= */}
{tab === 'villages' && (
{visibleVillages.length === 0 &&
}
{visibleVillages.map(function (v) {
const syn = store.synthesis[v.id];
const trend = store.trends[v.id];
const expanded = expandedVillage === v.id;
return (
{v.name}
{v.township}, {v.region}
{LEVEL_LABEL[syn.level]}
{Ic(expanded ? 'chevron-up' : 'chevron-down', { width: 15, height: 15 })}
{expanded && (
{['climate', 'economic', 'conflict'].map(function (d) {
const sc = store.signals[v.id][d].score;
return (
{Ic(DOMAIN_ICON[d], { width: 13, height: 13 })}{DOMAIN_LABEL[d]}
= 50 ? 'var(--warning-strong)' : 'var(--text-strong)' }}>{sc}
);
})}
{syn.keyDrivers.map(function (d, i) { return {d} ; })}
)}
);
})}
)}
{/* ================= CALLS ================= */}
{tab === 'calls' && (
{visibleCalls.length === 0 &&
}
{visibleCalls.map(function (c) {
const v = window.AsterStore.findVillage(c.villageId);
const p = c.protocolId ? window.AsterStore.findProtocol(c.protocolId) : null;
const syn = store.synthesis[c.villageId];
const matching = window.AsterStore.protocolsMatchingVillage(c.villageId);
const canDecide = (c.status === 'submitted' || c.status === 'reviewed') && p;
return (
{v.name}
{v.township}, {v.region}
{LEVEL_LABEL[syn.level]}
{p ? p.name + ' · ' + fmtUSD(p.amount) + (p.unrestricted ? ' · unrestricted' : '') : 'General distress signal'}
{CALL_STATUS_LABEL[c.status]}
{c.message && {c.message}
}
{c.orgNote && Risk desk note: {c.orgNote}
}
Submitted {fmtDateTime(c.submittedAt)}{c.reviewedAt ? ' · reviewed ' + fmtDateTime(c.reviewedAt) : ''}
{c.status === 'auto_pending' && (
)}
{!p && (c.status === 'submitted' || c.status === 'reviewed') && (
{matching.length === 0 ? 'No matching protocol yet' : 'Match to a protocol'}
)}
{canDecide && (
Approve…
Decline…
)}
);
})}
)}
{/* ================= PROTOCOLS ================= */}
{tab === 'protocols' && (
Build custom protocol} />
{window.AsterStore.PROTOCOL_TEMPLATES.map(function (t) {
return (
{Ic(DOMAIN_ICON[t.domain], { width: 14, height: 14, style: { color: 'var(--text-subtle)' } })}
{t.name}
{t.purpose}
{fmtUSD(t.amount)} · min {LEVEL_LABEL[t.minLevel]}
Use template
);
})}
{p.name} · {fmtUSD(p.amount)}
{p.purpose}
Min level {LEVEL_LABEL[p.minLevel]} · domain {DOMAIN_LABEL[p.domain]}{p.unrestricted ? ' · unrestricted funding' : ''} · currently matches {matchCount} villages
Retract…
);
})}
{store.protocols.filter(function (p) { return !p.active; }).length > 0 && (
Retracted
{store.protocols.filter(function (p) { return !p.active; }).map(function (p) {
return
{p.name}
;
})}
)}
)}
{/* ================= DIALOGS ================= */}
{approveTarget && approveProtocol && (function () {
const v = window.AsterStore.findVillage(approveTarget.villageId);
return (
{approveProtocol.name}
{fmtUSD(approveProtocol.amount)}
{v.name} · {v.township}, {v.region}
{approveProtocol.unrestricted
? 'This protocol is unrestricted: approving starts a short review window, after which funds move automatically unless someone declines.'
: 'Approving triggers the protocol immediately — ' + fmtUSD(approveProtocol.amount) + ' moves to the village Community Fund.'}
);
})()}
{toastNode}
);
}
function DeclineDialog({ callId, onClose, onDecline }) {
const [reason, setReason] = React.useState('');
React.useEffect(function () { if (callId) setReason(''); }, [callId]);
const call = callId ? window.AsterStore.findCall(callId) : null;
const v = call ? window.AsterStore.findVillage(call.villageId) : null;
return (
Cancel
Decline call
}>
);
}
function ProtocolFormModal({ open, onClose, seed, onSubmit, focusVillages, synthesis }) {
const t = seed && seed.template;
const [name, setName] = React.useState('');
const [domain, setDomain] = React.useState('climate');
const [minLevel, setMinLevel] = React.useState('warning');
const [amount, setAmount] = React.useState('');
const [purpose, setPurpose] = React.useState('');
const [unrestricted, setUnrestricted] = React.useState(false);
React.useEffect(function () {
if (!open) return;
setName(t ? t.name : '');
setDomain(t ? t.domain : 'climate');
setMinLevel(t ? t.minLevel : 'warning');
setAmount(t ? String(t.amount) : '');
setPurpose(t ? t.purpose : '');
setUnrestricted(t ? t.unrestricted : false);
}, [open, seed]);
// Live preview: how many villages this protocol would match right now.
const matchCount = (focusVillages || []).filter(function (v) {
return window.AsterStore.levelRank(synthesis[v.id].level) >= window.AsterStore.levelRank(minLevel);
}).length;
const valid = name.trim() && Number(amount) > 0 && purpose.trim();
return (
{Ic('map-pin', { width: 13, height: 13 })} Would currently match {matchCount} villages
Cancel
Publish protocol
}>
);
}
function MatchProtocolModal({ callId, onClose, onSubmit }) {
const call = callId ? window.AsterStore.findCall(callId) : null;
const [protocolId, setProtocolId] = React.useState('');
const matching = call ? window.AsterStore.protocolsMatchingVillage(call.villageId) : [];
React.useEffect(function () { setProtocolId(matching[0] ? matching[0].id : ''); }, [callId]);
return (
0 && (
Cancel
Match
)}>
{matching.length === 0 ?
{matching.map(function (p) {
const selected = protocolId === p.id;
return (
{p.name}
{fmtUSD(p.amount)}
{p.unrestricted &&
Unrestricted funding }
);
})}
);
}