// Moderis App — producten zoeken/scannen, met twee expliciete standen:
// log → "Eten loggen": wat je kiest wordt gelogd (met portie-vraag)
// pantry → "Naar voorraad": wat je kiest gaat je voorraad in (met
// hoeveelheid-vraag, voor het automatisch afboeken bij koken)
// De stand is bovenaan altijd zichtbaar én wisselbaar — geen verwarring meer
// over wáár iets heen gaat.
function SearchField({ query, setQuery, onScan, placeholder }) {
return (
);
}
// Frequentie-score van een voorraad-item op basis van je eetpatroon: hoe vaak
// komen woorden uit de productnaam voor in wat je de laatste 30 dagen logde?
function eetFrequentie(naam, favMap) {
const wrd = String(naam || '').toLowerCase().split(/[^a-zà-ü0-9]+/).filter((w) => w.length >= 4);
let score = 0;
favMap.forEach((aantal, favNaam) => {
if (wrd.some((w) => favNaam.includes(w))) score += aantal;
});
return score;
}
function AddScreen({ mode = 'log', onModeChange, onAdd, onScan, addedIds, voorraad = [], onAddCustom, favorieten = {}, restjes = [], onEetRestje }) {
const [query, setQuery] = React.useState('');
const [results, setResults] = React.useState([]);
const [searching, setSearching] = React.useState(false);
const [searchError, setSearchError] = React.useState(null);
// Zoeken via onze EIGEN database (basistabel + eigen voedingsmiddelen + OFF
// als fallback) — dus kip/gehakt/groente worden gevonden, en veel minder
// externe calls. Gedebounced (400ms) zodat er pas na even niet-typen gezocht wordt.
React.useEffect(() => {
const q = query.trim();
if (q.length < 2) { setResults([]); setSearchError(null); return; }
setSearching(true); setSearchError(null);
let cancelled = false;
const t = setTimeout(async () => {
try {
const data = await api.zoekVoeding(q);
if (cancelled) return;
const list = (data.resultaten || [])
.map((r, i) => adapt.foodFromVoeding(r, i))
.filter((f) => f && f.name)
.slice(0, 20);
setResults(list);
} catch (err) {
if (!cancelled) setSearchError(err.message);
} finally {
if (!cancelled) setSearching(false);
}
}, 400);
return () => { cancelled = true; clearTimeout(t); };
}, [query]);
// Eetpatroon (laatste 30 dagen) → naam→aantal map, voor sorteren + snel loggen.
const favMap = React.useMemo(() => {
const m = new Map();
Object.values(favorieten || {}).forEach((lijst) => (lijst || []).forEach((f) => {
const k = String(f.naam || '').toLowerCase().trim();
if (k) m.set(k, (m.get(k) || 0) + (Number(f.aantal) || 0));
}));
return m;
}, [favorieten]);
// Voorraad: wat je het vaakst eet bovenaan (vaak_gegeten-vlag telt ook mee).
const voorraadZichtbaar = React.useMemo(() => {
return (voorraad || [])
.filter((it) => !(it.hoeveelheid_g != null && Number(it.hoeveelheid_g) === 0)) // op = niet in huis
.map((it) => ({ it, score: eetFrequentie(it.naam, favMap) + (it.vaak_gegeten ? 3 : 0) }))
.sort((a, b) => b.score - a.score)
.map((x) => x.it);
}, [voorraad, favMap]);
// "Vaak gelogd": complete items die je regelmatig at (≥2×) — één tik logt
// de gemiddelde portie opnieuw. Voor je vaste ontbijt/snacks.
const vaakGelogd = React.useMemo(() => {
if (mode === 'pantry') return [];
const per = new Map();
Object.values(favorieten || {}).forEach((lijst) => (lijst || []).forEach((f) => {
const k = String(f.naam || '').trim();
if (!k) return;
const bestaand = per.get(k);
if (bestaand) bestaand.aantal += Number(f.aantal) || 0;
else per.set(k, { ...f, naam: k, aantal: Number(f.aantal) || 0 });
}));
return [...per.values()]
.filter((f) => f.aantal >= 2 && Number(f.gem_kcal) > 0)
.sort((a, b) => b.aantal - a.aantal)
.slice(0, 6)
.map((f) => ({
id: 'fav-' + f.naam, name: f.naam, brand: f.aantal + '× gegeten', portion: '1 portie',
kcal: Math.round(Number(f.gem_kcal) || 0), p: Math.round(Number(f.gem_eiwitten) || 0),
c: Math.round(Number(f.gem_koolhydraten) || 0), f: Math.round(Number(f.gem_vetten) || 0),
barcode: null, vastePortie: true,
}));
}, [favorieten, mode]);
// Zoeken in je voorraad is gratis en instant — matches tonen we bóven de
// databaseresultaten, want wat je in huis hebt is meestal wat je bedoelt.
const q = query.trim().toLowerCase();
const voorraadMatches = (mode !== 'pantry' && q.length >= 2)
? voorraadZichtbaar.filter((it) => String(it.naam || '').toLowerCase().includes(q)).slice(0, 5)
: [];
// In voorraad-modus: waarschuw als het product er al staat (ook als het op
// is) — dan pas je daar de hoeveelheid aan i.p.v. een duplicaat te maken.
const alInVoorraad = (mode === 'pantry' && q.length >= 2)
? (voorraad || []).filter((it) => String(it.naam || '').toLowerCase().includes(q)).slice(0, 3)
: [];
const isPantry = mode === 'pantry';
return (
{isPantry ? 'Naar voorraad' : 'Eten loggen'}
{isPantry
? 'Wat je hier kiest gaat je voorraad in — zodat Moderis weet wat je kunt maken.'
: 'Wat je hier kiest wordt gelogd als gegeten (je kiest eerst de portie).'}
{/* Stand-wissel: altijd zichtbaar wáár je keuze heen gaat */}
{onModeChange && (