);
}
// ─────────────────────────────────────────────────────────────
// GROCERY PAGE — checkable list + smart suggestions
// ─────────────────────────────────────────────────────────────
function GroceryPage({ palette, lang, inventory, grocery, setGrocery, onToggleLang, onOpenProfile, onBuyConfirm, onAddDetailed, onBack, web, authUser }) {
const [input, setInput] = useStateP('');
const [grouped, setGrouped] = useStateP(true);
const [focused, setFocused] = useStateP(false);
// Region drives the price-estimate multiplier; persisted across sessions.
const REGIONS = (typeof window !== 'undefined' && window.PRICE_REGIONS) || [];
const [region, setRegion] = useStateP(() => {
try { return localStorage.getItem('pw_region') || 'mtl'; } catch (e) { return 'mtl'; }
});
const setRegionPersist = (id) => { setRegion(id); try { localStorage.setItem('pw_region', id); } catch (e) {} };
const priceOf = (g) => (typeof window !== 'undefined' && window.estimatePrice)
? window.estimatePrice(g.name, g.qty, region, lang) : null;
const estTotal = (typeof window !== 'undefined' && window.estimateListTotal)
? window.estimateListTotal(grocery, region, lang, true) : null;
// build autocomplete suggestions from inventory + ITEM_SUGGESTIONS
const knownNames = useMemoP(() => {
const map = new Map();
inventory.forEach(i => {
const n = localized(lang, i.name);
map.set(n.toLowerCase(), { name: n, emoji: i.emoji });
});
ITEM_SUGGESTIONS.forEach(s => {
const n = localized(lang, s.name);
map.set(n.toLowerCase(), { name: n, emoji: s.emoji });
});
return [...map.values()];
}, [inventory, lang]);
const autocomplete = input.trim()
? knownNames.filter(k => k.name.toLowerCase().includes(input.toLowerCase())).slice(0, 4)
: [];
const expiringSoon = inventory.filter(i => i.daysLeft <= 5 && i.daysLeft >= 0).slice(0, 3);
const checkedCount = grocery.filter(g => g.checked).length;
const aisleLabels = {
fresh: t(lang, 'aisleFresh'),
dry: t(lang, 'aisleDry'),
frozen: t(lang, 'aisleFrozen'),
other: t(lang, 'aisleOther'),
};
const guessAisle = (name) => {
const n = (name || '').toLowerCase();
if (/(lait|fromage|yogourt|oeuf|poulet|saumon|viande|salade|tomate|avocat|fruit|legume|fresh|cheese|milk|egg|meat|chicken|fish)/.test(n)) return 'fresh';
if (/(pates|pasta|riz|rice|huile|oil|sel|sucre|farine|cereale|cereal|sauce|conserve|can|pain|bread|biscuit|cookie)/.test(n)) return 'dry';
if (/(surgele|frozen|glace|ice)/.test(n)) return 'frozen';
return 'other';
};
const addItem = () => {
const v = input.trim();
if (!v) return;
setGrocery(prev => [...prev, {
id: 'gn_' + Date.now(),
name: v,
emoji: '🛒',
aisle: guessAisle(v),
qty: '',
checked: false,
source: 'manual',
}]);
setInput('');
};
const toggle = (g) => {
// When checking off (going from unchecked → checked), offer to add to inventory
if (!g.checked && onBuyConfirm) {
onBuyConfirm(g);
return;
}
setGrocery(prev => prev.map(x => x.id === g.id ? { ...x, checked: !x.checked } : x));
};
const remove = (id) => setGrocery(prev => prev.filter(g => g.id !== id));
// 1-tap restock: add the everyday staples you're NOT currently stocking.
const restockBasics = () => {
const staples = ((typeof window !== 'undefined' && window.FOODS) || []).filter(f => f.staple);
const haveInv = new Set(inventory.map(i => localized(lang, i.name).toLowerCase()));
const onList = new Set(grocery.map(g => (typeof g.name === 'string' ? g.name : localized(lang, g.name)).toLowerCase()));
const toAdd = staples
.filter(s => { const n = localized(lang, s.name).toLowerCase(); return !haveInv.has(n) && !onList.has(n); })
.map((s, i) => ({ id: 'gs_' + Date.now() + '_' + i, name: s.name, emoji: s.emoji, aisle: guessAisle(localized(lang, s.name)), qty: '', checked: false, source: 'restock' }));
if (toAdd.length) setGrocery(prev => [...prev, ...toAdd]);
else alert(lang === 'fr' ? 'Tu as déjà tous les essentiels !' : 'You already have all the basics!');
};
const clearChecked = () => setGrocery(prev => prev.filter(g => !g.checked));
const clearAll = () => {
if (!grocery.length) return;
const msg = lang === 'fr' ? 'Vider toute la liste d\'épicerie ?' : 'Clear the entire grocery list?';
if (typeof window !== 'undefined' && !window.confirm(msg)) return;
setGrocery([]);
};
const shareList = () => {
const lines = grocery.filter(g => !g.checked)
.map(g => `• ${typeof g.name === 'string' ? g.name : localized(lang, g.name)}${g.qty ? ' (' + g.qty + ')' : ''}`);
const text = (lang === 'fr' ? 'Liste d\'épicerie — PantryWise\n' : 'Grocery list — PantryWise\n') + lines.join('\n');
if (navigator.share) { navigator.share({ title: 'PantryWise', text }).catch(() => {}); }
else if (navigator.clipboard) { navigator.clipboard.writeText(text).then(() => alert(lang === 'fr' ? 'Liste copiée !' : 'List copied!')).catch(() => {}); }
else { alert(text); }
};
const renderItem = (g) => (
{/* Estimated cost of what's left to buy (regional estimate) */}
{estTotal != null && grocery.length - checkedCount > 0 && (
{t(lang, 'priceEstimate')} · {grocery.length - checkedCount} {t(lang, 'priceRemaining')}
{estTotal.toFixed(2)} $
{/* Region selector */}
setRegionPersist(e.target.value)}
onClick={e => e.stopPropagation()} style={{
border: `1px solid ${palette.line}`, background: palette.cardSub, color: palette.ink2,
borderRadius: 10, padding: '7px 8px', fontSize: 12, fontFamily: 'inherit', cursor: 'pointer', maxWidth: 130,
}}>
{REGIONS.map(r => {localized(lang, r.label)} )}
{/* Illustrative bar vs a ~150$ weekly reference */}
150 ? palette.amber : palette.primary,
}} />
)}
{/* Smart hint */}
{expiringSoon.length > 0 && (
{t(lang, 'smartHint')}
{t(lang, 'smartHintSub')}
{expiringSoon.map(item => {
const inList = grocery.some(g => {
const gn = typeof g.name === 'string' ? g.name : localized(lang, g.name);
return gn.toLowerCase().includes(localized(lang, item.name).toLowerCase());
});
return (
{
if (inList) return;
setGrocery(prev => [...prev, {
id: 'gh_' + item.id + '_' + Date.now(),
name: item.name,
emoji: item.emoji,
aisle: 'fresh',
qty: item.qty + ' ' + localized(lang, item.unit),
checked: false,
source: 'smart',
}]);
}} style={{
padding: '6px 10px', borderRadius: 999,
background: inList ? 'transparent' : palette.amber,
color: inList ? palette.amberSoftInk : '#fff',
border: inList ? `1px solid ${palette.amber}` : 'none',
fontSize: 12, fontWeight: 500, cursor: inList ? 'default' : 'pointer',
display: 'inline-flex', alignItems: 'center', gap: 6,
opacity: inList ? 0.6 : 1,
}}>
{item.emoji}
{localized(lang, item.name)}
{!inList &&
);
})}
)}
{/* Add bar */}
setInput(e.target.value)}
onFocus={() => setFocused(true)}
onBlur={() => setTimeout(() => setFocused(false), 200)}
onKeyDown={e => e.key === 'Enter' && addItem()}
placeholder={t(lang, 'grocPh')}
style={{
flex: 1, border: 'none', outline: 'none', background: 'transparent',
fontSize: 14.5, color: palette.ink, fontFamily: 'inherit',
}}
/>
{onAddDetailed && (
)}
{input && (
{t(lang, 'add')}
)}
{/* Autocomplete dropdown */}
{focused && autocomplete.length > 0 && (
{autocomplete.map((s, i) => (
{ setInput(s.name); }} style={{
display: 'flex', alignItems: 'center', gap: 10, padding: '9px 14px',
borderBottom: i < autocomplete.length - 1 ? `1px solid ${palette.line2}` : 'none',
cursor: 'pointer',
}}>
{s.emoji}
{s.name}
))}
)}
{/* Toggle grouped */}
setGrouped(!grouped)} style={{
display: 'inline-flex', alignItems: 'center', gap: 6,
fontSize: 12, color: palette.ink3, cursor: 'pointer',
fontFamily: 'Geist Mono, monospace', letterSpacing: 0.02,
}}>
{lang === 'fr' ? 'Grouper par rayon' : 'Group by aisle'}
{grocery.length > 0 && (
)}
{checkedCount > 0 && (
{t(lang, 'clearChecked')}
)}
{grocery.length > 0 && (
{lang === 'fr' ? 'Tout vider' : 'Clear all'}
)}
{/* List */}
{grocery.length === 0 ? (
🛒
{lang === 'fr' ? 'Liste vide' : 'Empty list'}
) : grouped ? (
['fresh', 'dry', 'frozen', 'other'].map(aisle => {
const items = grocery.filter(g => g.aisle === aisle);
if (items.length === 0) return null;
return (
{aisleLabels[aisle]} · {items.length}
{items.map(renderItem)}
);
})
) : (
{grocery.map(renderItem)}
)}
);
}
// ─────────────────────────────────────────────────────────────
// PROFILE PAGE
// ─────────────────────────────────────────────────────────────
function ProfilePage({ palette, lang, inventory, leftovers, cookLog, onOpenAdmin, household, setHousehold, privacyPrefs, setPrivacyPrefs, onInviteFamily, onToggleLang, setTweak, tweaks, onOpenSavedExplainer, onBack, web, authUser, onSignOut, onShowLogin, authStatus, syncStatus }) {
// Real household members from the server (so the count matches reality once a
// family is formed). Falls back to local `household` when not signed in.
const [liveMembers, setLiveMembers] = useStateP(null);
useEffectP(() => {
let alive = true;
if (!(window.PWAuth && window.PWAuth.api && authUser)) return;
window.PWAuth.api.members().then((res) => {
if (!alive) return;
const srv = (res.members || []).map((m, i) => ({
id: m.id, name: m.name, email: m.email,
tone: ['#4F8267', '#B85149', '#C68A2E', '#4A6FA5', '#7A5BB5', '#8B6B4A'][i % 6],
initial: (m.name || '?').charAt(0).toUpperCase(),
}));
if (srv.length) setLiveMembers(srv);
}).catch(() => {});
return () => { alive = false; };
}, [authUser?.id]);
const HH = liveMembers || household || HOUSEHOLD;
const [notifs, setNotifs] = useStateP(NOTIF_PREFS_DEFAULT);
const [diet, setDiet] = useStateP('none');
const [allergies, setAllergies] = useStateP([{ id: 'a1', label: lang === 'fr' ? 'Arachides' : 'Peanuts' }]);
const [allergyInput, setAllergyInput] = useStateP('');
const [expandNotif, setExpandNotif] = useStateP(false);
const [deductOnCook, setDeductOnCook] = useStateP(() => { try { return localStorage.getItem('pw_deductOnCook') === '1'; } catch (e) { return false; } });
const toggleDeduct = () => { const v = !deductOnCook; setDeductOnCook(v); try { localStorage.setItem('pw_deductOnCook', v ? '1' : '0'); } catch (e) {} };
// Admin dashboard appears only if the server says this account is the owner.
const [isAdmin, setIsAdmin] = useStateP(false);
useEffectP(() => {
if (!authUser || !(window.PWAuth && window.PWAuth.api && window.PWAuth.api.adminStats)) return;
window.PWAuth.api.adminStats().then(() => setIsAdmin(true)).catch(() => setIsAdmin(false));
}, [authUser && authUser.id]);
const [expandFood, setExpandFood] = useStateP(false);
const [expandFamily, setExpandFamily] = useStateP(false);
const [expandPrivacy, setExpandPrivacy] = useStateP(false);
// Profile photo (stored locally per user id; initial is the fallback)
const photoInputRef = useRefP(null);
const [photo, setPhoto] = useStateP(() => (window.getProfilePhoto ? window.getProfilePhoto(authUser?.id) : null));
const onPickPhoto = (e) => {
const file = e.target.files && e.target.files[0];
if (!file) return;
const reader = new FileReader();
reader.onload = () => {
// Downscale to keep localStorage small (~max 256px square jpeg)
const img = new Image();
img.onload = () => {
const size = 256;
const c = document.createElement('canvas');
c.width = size; c.height = size;
const ctx = c.getContext('2d');
const min = Math.min(img.width, img.height);
const sx = (img.width - min) / 2, sy = (img.height - min) / 2;
ctx.drawImage(img, sx, sy, min, min, 0, 0, size, size);
let out;
try { out = c.toDataURL('image/jpeg', 0.82); } catch (err) { out = reader.result; }
if (window.setProfilePhoto) window.setProfilePhoto(authUser?.id, out);
setPhoto(out);
};
img.onerror = () => {
if (window.setProfilePhoto) window.setProfilePhoto(authUser?.id, reader.result);
setPhoto(reader.result);
};
img.src = reader.result;
};
reader.readAsDataURL(file);
};
const onRemovePhoto = () => {
if (window.setProfilePhoto) window.setProfilePhoto(authUser?.id, null);
setPhoto(null);
};
// Real stats from the cooking log (no hardcoded numbers).
const _log = cookLog || [];
const _now = Date.now();
const weekLog = _log.filter(e => _now - e.ts < 7 * 86400000);
const monthLog = _log.filter(e => _now - e.ts < 30 * 86400000);
const savedThisMonth = Math.round(monthLog.reduce((s, e) => s + (e.savedCents || 0), 0) / 100);
const avoidedThisWeek = weekLog.reduce((s, e) => s + (e.rescued || 0), 0);
const cookedThisWeek = weekLog.length;
const stats = [
{ label: t(lang, 'statsSaved'), value: `${savedThisMonth}$`, sub: lang === 'fr' ? 'ce mois-ci' : 'this month', tone: palette.primary, onTap: onOpenSavedExplainer },
{ label: t(lang, 'statsAvoid'), value: `${avoidedThisWeek}`, sub: lang === 'fr' ? 'cette semaine' : 'this week', tone: palette.amber },
{ label: t(lang, 'statsCooked'), value: `${cookedThisWeek}`, sub: lang === 'fr' ? 'cette semaine' : 'this week', tone: palette.blue },
];
const Row = ({ icon, label, value, accent, last, onClick, right, danger }) => (
{label}
{right || (
<>
{value &&
{value}
}
{onClick &&
}
)}
);
const Section = ({ title, children }) => (
);
const ToggleSwitch = ({ on, onToggle }) => (
{ e.stopPropagation(); onToggle(); }} style={{
width: 36, height: 22, borderRadius: 12, padding: 2,
background: on ? palette.primary : palette.line, display: 'flex',
cursor: 'pointer', transition: 'background 180ms',
}}>
);
const Chipy = ({ active, label, onClick, accent }) => (
{label}
);
const addAllergy = () => {
const v = allergyInput.trim();
if (!v) return;
setAllergies(prev => [...prev, { id: 'a_' + Date.now(), label: v }]);
setAllergyInput('');
};
const removeAllergy = (id) => setAllergies(prev => prev.filter(a => a.id !== id));
return (
{/* Header w/ avatar */}
{onBack && (
)}
{authUser && (
<>
{authUser.name}
{authUser.email}
{photo && (
{t(lang, 'removePhoto')}
)}
)}
{lang.toUpperCase()}
{/* Stats */}
{t(lang, 'profStats')}
{stats.map((s, i) => (
{s.value}
{s.label}
{s.sub}
{s.onTap && (
)}
))}
{onOpenSavedExplainer && (
)}
{}} />
{authUser && (() => {
const st = syncStatus?.status;
const ok = st === 'ok';
const busy = st === 'pulling' || st === 'pushing';
const label = lang === 'fr' ? 'Sauvegarde' : 'Sync';
const value = busy
? (lang === 'fr' ? '… en cours' : '… working')
: ok
? (lang === 'fr' ? '● synchronisé' : '● synced')
: (lang === 'fr' ? '⚠ hors-ligne' : '⚠ offline');
return (
{ if (syncStatus?.error) alert((lang === 'fr' ? 'Détail sync : ' : 'Sync detail: ') + syncStatus.error); }} />
);
})()}
|
{/* Notif preferences — expandable */}
setExpandNotif(!expandNotif)}
right={
{Object.values(notifs).filter(Boolean).length}/{Object.keys(notifs).length}
} />
{expandNotif && (
{[
['expiry', t(lang, 'notifExpiry')],
['low', t(lang, 'notifLow')],
['specials', t(lang, 'notifSpecials')],
['noMeal', t(lang, 'notifNoMeal')],
['ready', t(lang, 'notifReady')],
].map(([k, label]) => (
{label}
setNotifs({ ...notifs, [k]: !notifs[k] })} />
))}
|
} last />
{/* Food / diet / allergies — expandable */}
setExpandFood(!expandFood)}
right={
{dietLabel(lang, diet)}
} />
{expandFood && (
{t(lang, 'dietsHeading')}
{DIETS_LIST.map(d => (
setDiet(d)} />
))}
{t(lang, 'allergies')} · {t(lang, 'avoid')}
{allergies.map(a => (
{a.label}
removeAllergy(a.id)} style={{ cursor: 'pointer', display: 'flex' }}>
))}
setAllergyInput(e.target.value)}
onKeyDown={e => e.key === 'Enter' && addAllergy()}
placeholder={t(lang, 'allergyTypeholder')}
style={{
border: 'none', outline: 'none', background: 'transparent',
fontSize: 12, color: palette.ink, fontFamily: 'inherit', width: 130,
}}
/>
{allergyInput && (
)}
)}
setExpandFamily(!expandFamily)}
right={
{HH.slice(0, 3).map((m, i) => (
{m.initial}
))}
} />
{expandFamily && (
{HH.map(m => (
{m.initial}
{m.name}
{m.email &&
{m.email}
}
{m.id !== 'u1' && setHousehold && (
setHousehold(prev => prev.filter(x => x.id !== m.id))} style={{
padding: 6, color: palette.ink3, cursor: 'pointer',
}}>
)}
{t(lang, 'shared')}
))}
onInviteFamily && onInviteFamily()} style={{
marginTop: 6, padding: '11px 12px', borderRadius: 10,
border: `1px dashed ${palette.line}`,
fontSize: 13, color: palette.primary, cursor: 'pointer',
display: 'flex', alignItems: 'center', gap: 8, fontWeight: 500,
}}>
setExpandPrivacy(!expandPrivacy)}
right={
{[privacyPrefs.shareBreakfast, privacyPrefs.shareLunch, privacyPrefs.shareDinner].filter(Boolean).length}/3
} last />
{expandPrivacy && (
{lang === 'fr'
? 'Choisis ce que les autres voient. Le souper est partagé par défaut. L\'inventaire reste toujours partagé.'
: 'Pick what others see. Dinner is shared by default. Inventory is always shared.'}
{[
['shareBreakfast', t(lang, 'planBreakfast')],
['shareLunch', t(lang, 'planLunch')],
['shareDinner', t(lang, 'planDinner')],
].map(([k, label]) => (
{label}
setPrivacyPrefs({ ...privacyPrefs, [k]: !privacyPrefs[k] })} />
))}
)}
)}
{isAdmin && (
)}
{/* Data: export everything as a JSON backup */}
{
try {
const dump = { exportedAt: new Date().toISOString(),
inventory, leftovers, household, privacyPrefs,
app: JSON.parse(localStorage.getItem('pantrywise.v1') || '{}') };
const blob = new Blob([JSON.stringify(dump, null, 2)], { type: 'application/json' });
const a = document.createElement('a');
a.href = URL.createObjectURL(blob);
a.download = 'pantrywise-export-' + new Date().toISOString().slice(0, 10) + '.json';
a.click(); URL.revokeObjectURL(a.href);
} catch (e) { alert(lang === 'fr' ? 'Export impossible' : 'Export failed'); }
}} />
{authUser && (
{
const msg = lang === 'fr'
? 'Supprimer définitivement ton compte et tes données ? Cette action est irréversible.'
: 'Permanently delete your account and data? This cannot be undone.';
if (!window.confirm(msg)) return;
const run = (typeof api !== 'undefined' && api.deleteAccount) ? api.deleteAccount() : Promise.reject();
run.then(() => { if (onSignOut) onSignOut(); })
.catch(() => alert(lang === 'fr' ? 'Suppression impossible (réessaie en ligne).' : 'Delete failed (try again online).'));
}} last />
)}
{ window.location.href = 'mailto:support@pantry-wise.com?subject=PantryWise'; }} />
window.open('/privacy.html', '_blank')} />
window.open('/terms.html', '_blank')} />
|
{
if (authUser) {
if (typeof window !== 'undefined' && !window.confirm(lang === 'fr' ? 'Te déconnecter ?' : 'Sign out?')) return;
if (onSignOut) onSignOut();
} else if (onShowLogin) {
onShowLogin();
}
}} style={{
marginTop: 8, padding: '13px 14px', textAlign: 'center',
fontSize: 14, color: authUser ? palette.red : palette.primary,
fontWeight: 600, cursor: 'pointer',
}}>
{authUser
? t(lang, 'logout')
: (lang === 'fr' ? 'Se connecter / Créer un compte' : 'Sign in / Create account')}
);
}
// ─────────────────────────────────────────────────────────────
// ONBOARDING
// ─────────────────────────────────────────────────────────────
function Onboarding({ palette, lang, onComplete, onToggleLang, web }) {
const [step, setStep] = useStateP(0); // 0,1,2 = slides, 3 = setup
const [selected, setSelected] = useStateP(new Set());
const slides = [
{
title: t(lang, 'onboardTitle1'),
desc: t(lang, 'onboardDesc1'),
hero: (
{['🥑', '🍅', '🥬'].map((e, i) => (
{e}
))}
),
accent: palette.primary,
},
{
title: t(lang, 'onboardTitle2'),
desc: t(lang, 'onboardDesc2'),
hero: (
🥑
{lang === 'fr' ? 'Avocat' : 'Avocado'}
{lang === 'fr' ? '3 recettes l\'utilisent' : '3 recipes use it'}
),
accent: palette.amber,
},
{
title: t(lang, 'onboardTitle3'),
desc: t(lang, 'onboardDesc3'),
hero: (
{[
{ e: '🥑', n: lang === 'fr' ? 'Avocats' : 'Avocados', q: '3', check: false },
{ e: '🍋', n: lang === 'fr' ? 'Citron' : 'Lemon', q: '2', check: false },
{ e: '🥛', n: lang === 'fr' ? 'Lait' : 'Milk', q: '1 L', check: true },
{ e: '🍝', n: lang === 'fr' ? 'Pâtes' : 'Pasta', q: '500g', check: false },
].map((it, i, arr) => (
{it.check &&
{it.e}
{it.n}
{it.q}
))}
),
accent: palette.blue,
},
];
// Slides screen
if (step < 3) {
const s = slides[step];
return (
{/* Top bar */}
{slides.map((_, i) => (
))}
{t(lang, 'onboardSkip')}
{/* Hero */}
{s.hero}
{`0${step + 1} · 03`}
{s.title}
{s.desc}
{/* Bottom CTA */}
{step > 0 && (
setStep(step - 1)} style={{
width: 50, height: 50, borderRadius: 14,
background: palette.card, border: `1px solid ${palette.line}`, color: palette.ink2,
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
}}>
)}
step < 2 ? setStep(step + 1) : setStep(3)} style={{
flex: 1, height: 50, borderRadius: 14,
background: palette.ink, color: palette.bg,
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
fontSize: 15, fontWeight: 500, cursor: 'pointer',
}}>
{step < 2 ? t(lang, 'onboardNext') : t(lang, 'onboardStart')}
);
}
// Setup screen — pick 5 items
return (
setStep(2)} style={{
width: 32, height: 32, borderRadius: 10, background: palette.cardSub,
display: 'flex', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', border: `1px solid ${palette.line}`, color: palette.ink2,
marginBottom: 18,
}}>
{lang === 'fr' ? 'Étape 4 · 4' : 'Step 4 · 4'}
{t(lang, 'onboardSetupTitle')}
{t(lang, 'onboardSetupSub')}
{ONBOARD_PICKS.map(item => {
const sel = selected.has(item.id);
return (
{
setSelected(prev => {
const next = new Set(prev);
if (next.has(item.id)) next.delete(item.id);
else next.add(item.id);
return next;
});
}} style={{
aspectRatio: '1 / 1', borderRadius: 16,
background: sel ? palette.primarySoft : palette.card,
border: `1.5px solid ${sel ? palette.primary : palette.line}`,
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center',
cursor: 'pointer', position: 'relative',
transition: 'background 140ms, border-color 140ms',
}}>
{sel && (
)}
{item.emoji}
{localized(lang, item.name)}
);
})}
{selected.size} {t(lang, 'selectedN')}
onComplete([])} style={{ fontSize: 12.5, color: palette.ink3, cursor: 'pointer', fontFamily: 'Geist Mono, monospace' }}>
{t(lang, 'onboardSkip')}
{
const picks = ONBOARD_PICKS.filter(p => selected.has(p.id)).map(p => ({
id: p.id + '_' + Date.now(),
name: p.name, emoji: p.emoji, mono: p.id[0].toUpperCase(),
qty: p.defaultQty, unit: p.defaultUnit,
location: p.defaultLoc, daysLeft: p.defaultDays,
}));
onComplete(picks);
}} style={{
height: 50, borderRadius: 14,
background: palette.primary,
color: palette.primaryInk,
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
fontSize: 15, fontWeight: 500, cursor: 'pointer',
transition: 'background 180ms',
}}>
{t(lang, 'onboardSetupCTA')}
);
}
// ─────────────────────────────────────────────────────────────
// FAMILY HUB — the shared "espace famille": members + invite,
// shortcuts to the meal plan and shared grocery list, sharing prefs.
// ─────────────────────────────────────────────────────────────
function FamilyHubPage({ palette, lang, household, setHousehold, authUser, onInviteFamily,
onOpenPlan, onOpenList, onToggleLang, onOpenProfile, onBack, mealPlan, grocery,
privacyPrefs, setPrivacyPrefs }) {
const tt = (fr, en) => (lang === 'fr' ? fr : en);
const [members, setMembers] = useStateP(household || []);
const [pending, setPending] = useStateP([]);
const isAuthed = !!(window.PWAuth && window.PWAuth.api && authUser);
// Pull the real members + pending invites from the server.
useEffectP(() => {
let alive = true;
if (!isAuthed) { setMembers(household || []); return; }
window.PWAuth.api.members().then((res) => {
if (!alive) return;
const srv = (res.members || []).map((m, i) => ({
id: m.id, name: m.name, email: m.email,
tone: ['#4F8267', '#B85149', '#C68A2E', '#4A6FA5', '#7A5BB5', '#8B6B4A'][i % 6],
initial: (m.name || '?').charAt(0).toUpperCase(),
self: m.id === authUser?.id,
}));
setMembers(srv);
setPending(res.pendingInvites || []);
}).catch(() => { setMembers(household || []); });
return () => { alive = false; };
}, [isAuthed, authUser?.id]);
const planCount = (mealPlan || []).length;
const listCount = (grocery || []).length;
const Tile = ({ icon, title, sub, onClick, tone }) => (
);
return (
{/* Shared shortcuts */}
{/* Members */}
{t(lang, 'familyMembers')}
{members.length === 0 && (
{t(lang, 'noMembersYet')}
)}
{members.map((m, i) => (
{m.name} {m.self && ({tt('toi', 'you')}) }
{m.email &&
{m.email}
}
{t(lang, 'shared')}
))}
{/* Pending invites */}
{pending.length > 0 && (
<>
{t(lang, 'pendingInvites')}
{pending.map((p, i) => (
{p.email}
{tt('en attente', 'pending')}
))}
)}
{/* Invite button */}
onInviteFamily && onInviteFamily()} style={{
marginTop: 16, padding: '15px', borderRadius: 14, background: palette.primary,
color: palette.primaryInk, textAlign: 'center', fontWeight: 500, fontSize: 15, cursor: 'pointer',
display: 'flex', alignItems: 'center', justifyContent: 'center', gap: 8,
}}>
{/* Meal sharing prefs */}
{setPrivacyPrefs && privacyPrefs && (
<>
{tt('Partage des repas', 'Meal sharing')}
{[
{ key: 'shareBreakfast', label: tt('Déjeuner', 'Breakfast') },
{ key: 'shareLunch', label: tt('Dîner', 'Lunch') },
{ key: 'shareDinner', label: tt('Souper', 'Dinner') },
].map((row, i) => (
{row.label}
setPrivacyPrefs({ ...privacyPrefs, [row.key]: !privacyPrefs[row.key] })} style={{
width: 44, height: 26, borderRadius: 13, padding: 3, cursor: 'pointer',
background: privacyPrefs[row.key] ? palette.primary : palette.line,
transition: 'background 160ms',
}}>
))}
)}
);
}
Object.assign(window, {
InventoryPage, RecipesPage, GroceryPage, ProfilePage, Onboarding, PageHeader, Chip,
MealPlanPage, FamilyHubPage,
});
// ─────────────────────────────────────────────────────────────
// MEAL PLAN PAGE — weekly calendar + shared assignees + votes
// ─────────────────────────────────────────────────────────────
function MealPlanPage({ palette, lang, inventory, mealPlan, setMealPlan, leftovers, openRecipe, onBack, onToggleLang, onOpenProfile, onAssignMeal, onAddWeekToList, household, privacyPrefs, web, authUser, initialDate }) {
const today = todayISO();
// Selected day defaults to today (or a passed-in date, e.g. from the Family hub).
const [selectedDate, setSelectedDate] = useStateP(initialDate || today);
const [view, setView] = useStateP('week'); // 'week' | 'month'
const dayLabels = ['planMon', 'planTue', 'planWed', 'planThu', 'planFri', 'planSat', 'planSun'];
const dayLabelsLong = ['planMonL', 'planTueL', 'planWedL', 'planThuL', 'planFriL', 'planSatL', 'planSunL'];
const slots = ['breakfast', 'lunch', 'dinner'];
const HH = household || HOUSEHOLD;
const weekStart = startOfWeekISO(selectedDate);
const weekDates = Array.from({ length: 7 }, (_, i) => addDays(weekStart, i));
const dayMeals = mealPlan.filter(m => m.date === selectedDate);
const memberById = (id) => HH.find(h => h.id === id);
const longDayLabel = (iso) => t(lang, dayLabelsLong[weekdayIndex(iso)]);
// Build a month grid (weeks × 7) for the month containing selectedDate.
const buildMonth = () => {
const d = parseISO(selectedDate);
const first = new Date(d.getFullYear(), d.getMonth(), 1);
const gridStart = parseISO(startOfWeekISO(isoDate(first)));
const weeks = [];
for (let w = 0; w < 6; w++) {
const row = [];
for (let i = 0; i < 7; i++) {
const cur = new Date(gridStart); cur.setDate(gridStart.getDate() + w * 7 + i);
row.push(isoDate(cur));
}
weeks.push(row);
// stop after we've passed the end of the month on a completed week
const last = parseISO(row[6]);
if (last.getMonth() !== d.getMonth() && w >= 4) break;
}
return weeks;
};
const Avatar = ({ user, size = 22 }) => (
{user.initial}
);
const togglePresence = (meal, userId) => {
setMealPlan(prev => prev.map(m => {
if (m.date !== meal.date || m.slot !== meal.slot) return m;
const att = { ...(m.attendees || HH.reduce((acc, h) => ({ ...acc, [h.id]: true }), {})) };
att[userId] = !(att[userId] === true);
return { ...m, attendees: att };
}));
};
// privacy: hide breakfast/lunch for other members if shareBreakfast / shareLunch off
const isVisibleSlot = (slot) => {
if (!privacyPrefs) return true;
if (slot === 'breakfast') return privacyPrefs.shareBreakfast;
if (slot === 'lunch') return privacyPrefs.shareLunch;
return true;
};
return (
) : null}
/>
{/* Shared household pill */}
{HH.map((m, i) => (
{m.initial}
))}
{t(lang, 'shared')} · {HH.length}
{/* Month/year + week/month toggle + nav */}
setSelectedDate(view === 'month' ? addDays(selectedDate, -28) : addDays(selectedDate, -7))} style={{
width: 30, height: 30, borderRadius: 9, background: palette.cardSub, border: `1px solid ${palette.line}`,
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
}}>
{monthYearLabel(selectedDate, lang)}
setSelectedDate(view === 'month' ? addDays(selectedDate, 28) : addDays(selectedDate, 7))} style={{
width: 30, height: 30, borderRadius: 9, background: palette.cardSub, border: `1px solid ${palette.line}`,
display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer',
}}>
{['week', 'month'].map(v => (
setView(v)} style={{
padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
fontSize: 12, fontWeight: 500,
background: view === v ? palette.ink : palette.card,
color: view === v ? palette.bg : palette.ink2,
border: `1px solid ${view === v ? palette.ink : palette.line}`,
}}>{v === 'week' ? (lang === 'fr' ? 'Semaine' : 'Week') : (lang === 'fr' ? 'Mois' : 'Month')}
))}
setSelectedDate(today)} style={{
padding: '6px 12px', borderRadius: 999, cursor: 'pointer',
fontSize: 12, fontWeight: 500, background: palette.primarySoft, color: palette.primarySoftInk,
}}>{lang === 'fr' ? "Aujourd'hui" : 'Today'}
{/* Week strip */}
{view === 'week' && (
{weekDates.map((iso, i) => {
const active = selectedDate === iso;
const isToday = iso === today;
const mealCount = mealPlan.filter(m => m.date === iso).length;
return (
setSelectedDate(iso)} style={{
padding: '10px 0', borderRadius: 12, textAlign: 'center', cursor: 'pointer',
background: active ? palette.ink : palette.card,
color: active ? palette.bg : palette.ink2,
border: `1px solid ${active ? palette.ink : (isToday ? palette.primary : palette.line)}`,
position: 'relative',
}}>
{t(lang, dayLabels[i])}
{dateNumber(iso)}
{mealCount > 0 && (
)}
);
})}
)}
{/* Month grid */}
{view === 'month' && (
{dayLabels.map((k) => (
{t(lang, k)}
))}
{buildMonth().map((week, wi) => (
{week.map((iso) => {
const active = selectedDate === iso;
const isToday = iso === today;
const inMonth = parseISO(iso).getMonth() === parseISO(selectedDate).getMonth();
const mealCount = mealPlan.filter(m => m.date === iso).length;
return (
{ setSelectedDate(iso); setView('week'); }} style={{
aspectRatio: '1', borderRadius: 9, cursor: 'pointer',
display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', gap: 2,
background: active ? palette.ink : palette.card,
color: active ? palette.bg : (inMonth ? palette.ink2 : palette.ink3),
border: `1px solid ${active ? palette.ink : (isToday ? palette.primary : palette.line)}`,
opacity: inMonth ? 1 : 0.4,
}}>
{dateNumber(iso)}
{mealCount > 0 &&
);
})}
))}
)}
{/* Day title */}
{longDayLabel(selectedDate)} {dateNumber(selectedDate)}
{selectedDate === today && \u00b7 {lang === 'fr' ? "aujourd'hui" : 'today'} }
{dayMeals.length} {lang === 'fr' ? `repas pr\u00e9vus` : 'meals planned'}
{/* Leftovers callout for tomorrow's lunch */}
{selectedDate === addDays(today, 1) && leftovers && leftovers.length > 0 && (
{leftovers[0].emoji}
{t(lang, 'lunchSuggest')}
{localized(lang, leftovers[0].name)} · {leftovers[0].portions} {t(lang, 'portionsLeft')}
{lang === 'fr' ? 'Planifier' : 'Plan'}
)}
{/* Slots */}
{slots.map(slot => {
const meal = dayMeals.find(m => m.slot === slot);
const _catalog = RECIPES.concat((typeof window !== 'undefined' && window.EXTRA_RECIPES) || []);
let recipe = meal && _catalog.find(r => r.id === meal.recipeId);
// Fall back to the meal snapshot (online / unknown recipes).
if (meal && !recipe && (meal.recipeName || meal.recipeHero)) {
recipe = {
id: meal.recipeId, name: meal.recipeName || { fr: 'Recette', en: 'Recipe' },
hero: meal.recipeHero || '🍽', image: meal.recipeImage || null,
minutes: 30, portions: 2, difficulty: { fr: '', en: '' },
bg1: palette.primary, bg2: palette.amber, ingredients: [], steps: [],
external: String(meal.recipeId || '').startsWith('mdb_'), lite: true,
};
}
const hidden = !isVisibleSlot(slot) && meal && meal.cook !== 'u1';
return (
{t(lang, 'plan' + slot.charAt(0).toUpperCase() + slot.slice(1))}
{meal && (
· {meal.time}
)}
{hidden && (
{lang === 'fr' ? 'privé' : 'private'}
)}
{meal && onAssignMeal && (
onAssignMeal({ date: selectedDate, slot, meal })} style={{
padding: '4px 8px', borderRadius: 8,
background: palette.cardSub, border: `1px solid ${palette.line}`,
color: palette.ink2, fontSize: 11, fontFamily: 'Geist Mono, monospace',
cursor: 'pointer', display: 'inline-flex', alignItems: 'center', gap: 4,
}}>
)}
{meal && recipe && !hidden ? (
openRecipe(recipe)} style={{
display: 'flex', alignItems: 'center', gap: 12, cursor: 'pointer',
}}>
{recipe.image ?
: recipe.hero}
{localized(lang, recipe.name)}
{recipe.minutes}m · {recipe.portions} {t(lang, 'portions')} · {localized(lang, recipe.difficulty)}
{/* assignment + presence row */}
{t(lang, 'planAssign')}
{meal.cook && memberById(meal.cook) && (
{memberById(meal.cook).name}
)}
{/* presence checks */}
{lang === 'fr' ? 'Présents' : 'Present'}
{HH.map(m => {
const att = meal.attendees || HH.reduce((acc, h) => ({ ...acc, [h.id]: true }), {});
const here = att[m.id] === true;
return (
{ e.stopPropagation(); togglePresence(meal, m.id); }} style={{
display: 'inline-flex', alignItems: 'center', gap: 4,
padding: '4px 8px 4px 4px', borderRadius: 999,
background: here ? palette.primarySoft : palette.cardSub,
border: `1px solid ${here ? palette.primary : palette.line}`,
cursor: 'pointer',
opacity: here ? 1 : 0.5,
}}>
{here ? '✓' : '×'} {m.name}
);
})}
) : (
onAssignMeal && onAssignMeal({ date: selectedDate, slot, meal: null })} style={{
padding: '16px 14px', display: 'flex', alignItems: 'center', gap: 10,
fontSize: 13, color: palette.ink2, cursor: 'pointer',
}}>
{hidden ? (lang === 'fr' ? 'Repas privé' : 'Private meal') : `${t(lang, 'planAdd')}`}
{hidden
? (lang === 'fr' ? 'Non partagé selon tes préférences' : 'Not shared by preference')
: (lang === 'fr' ? `Tape pour planifier le ${t(lang, 'plan' + slot.charAt(0).toUpperCase() + slot.slice(1)).toLowerCase()}` : `Tap to plan ${slot}`)}
{!hidden &&
}
)}
);
})}
: