// Memory Jogger — "คนรู้จัก" natural-market list (ported from the Memory Jogger // design). A table of acquaintances with name + social link, age/job/faculty, // four 0–10 scores (Active / Friendly / Money / Relation) and a note. // // Saved per month: a YYYY-MM period picker switches the whole list, and each // month is persisted independently to db.memoryJogger (Supabase, scoped to the // signed-in account) with a per-user localStorage mirror. Editing is NOT // auto-saved — the user presses บันทึก to persist. Each person also has a // "ทักแล้ว" checkbox to mark that they've been contacted. const MJ_THAI_MONTHS = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม']; const mjUid = () => 'p' + Math.random().toString(36).slice(2, 9); const mjBlankRow = () => ({ id: mjUid(), name: '', link: '', age: '', job: '', faculty: '', active: 0, friendly: 0, money: 0, relation: 0, note: '', contacted: false }); function mjPlatform(url) { const u = (url || '').toLowerCase(); if (!u.trim()) return null; if (u.includes('instagram') || u.includes('ig.me') || /(^|\W)ig(\W|$)/.test(u)) return 'ig'; if (u.includes('facebook') || u.includes('fb.com') || u.includes('fb.me') || u.includes('m.me')) return 'fb'; if (u.includes('tiktok')) return 'tt'; if (u.includes('line.me') || u.includes('lin.ee')) return 'line'; return 'web'; } function mjNormUrl(u) { u = (u || '').trim(); if (!u) return '#'; if (!/^https?:\/\//i.test(u)) return 'https://' + u; return u; } function mjRowTotal(p) { return (+p.active || 0) + (+p.friendly || 0) + (+p.money || 0) + (+p.relation || 0); } function mjScoreLevel(v) { v = +v || 0; if (v <= 0) return 'lv0'; if (v <= 3) return 'lv-lo'; if (v <= 6) return 'lv-mid'; return 'lv-hi'; } function mjTotalClass(t) { return t >= 32 ? 't-hi' : t >= 20 ? 't-mid' : 't-lo'; } function mjTotalLabel(t, any) { if (!any) return ''; return t >= 32 ? 'ตัวจริง' : t >= 20 ? 'น่าสน' : 'ทั่วไป'; } const MJ_PLAT_SVG = { ig: , fb: , tt: , line: , web: , }; const MJ_PLAT_BG = { ig: 'linear-gradient(135deg,var(--mj-ig1),var(--mj-ig2) 50%,var(--mj-ig3))', fb: 'var(--mj-fb)', tt: 'var(--mj-tiktok)', line: 'var(--mj-line-green)', web: '#64748B' }; function MemoryJoggerView({ currentUser }) { const now = new Date(); const [month, setMonth] = useState(now.getMonth()); const [year, setYear] = useState(now.getFullYear()); const [rows, setRows] = useState([]); const [loading, setLoading] = useState(true); const [search, setSearch] = useState(''); const [sort, setSort] = useState('manual'); const [dirty, setDirty] = useState(false); const [saving, setSaving] = useState(false); const [saveLabel, setSaveLabel] = useState(''); const period = `${year}-${String(month + 1).padStart(2, '0')}`; // localStorage is keyed per account so two users on the same browser never // share a list (Supabase is the source of truth; this is just the mirror). const uid = currentUser?.id || 'anon'; const lsKey = `emphasis.memoryJogger.${uid}.${period}`; // Load the selected month — Supabase first (scoped to this account), then LS. useEffect(() => { let cancelled = false; (async () => { setLoading(true); let loaded = null, when = null; try { if (window.SB_READY && window.db?.memoryJogger) { const { data } = await window.db.memoryJogger.get(period); if (data) { loaded = data.data; when = data.updated_at ? new Date(data.updated_at).getTime() : null; } } } catch (e) { /* fall through to LS */ } if (!Array.isArray(loaded)) { try { const raw = localStorage.getItem(lsKey); if (raw) { const j = JSON.parse(raw); if (Array.isArray(j)) loaded = j; } } catch {} } if (cancelled) return; setRows(Array.isArray(loaded) ? loaded.map(r => ({ ...mjBlankRow(), ...r, id: r.id || mjUid() })) : []); setDirty(false); setSaveLabel(when ? 'บันทึกล่าสุด · ' + new Date(when).toLocaleString('th-TH', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''); setLoading(false); })(); return () => { cancelled = true; }; }, [period, uid]); // eslint-disable-line // Explicit save — only runs when the user presses บันทึก. const saveNow = useCallback(async (override) => { const next = override || rows; setSaving(true); try { localStorage.setItem(lsKey, JSON.stringify(next)); } catch {} let ok = true; try { if (window.SB_READY && window.db?.memoryJogger) { const { error } = await window.db.memoryJogger.save(period, next); if (error) ok = false; } } catch (e) { ok = false; } setSaving(false); if (ok) { setDirty(false); setSaveLabel('บันทึกแล้ว · ' + new Date().toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' })); } else { setSaveLabel('บันทึกขึ้นคลาวด์ไม่สำเร็จ — เก็บไว้ในเครื่องชั่วคราว'); } return ok; }, [rows, period, lsKey]); // Edits only update local state + mark dirty (no auto-save). const commit = (next) => { setRows(next); setDirty(true); }; const updateRow = (id, patch) => commit(rows.map(r => r.id === id ? { ...r, ...patch } : r)); const toggleContacted = (id) => commit(rows.map(r => r.id === id ? { ...r, contacted: !r.contacted } : r)); const addRow = () => { setSort('manual'); commit([...rows, mjBlankRow()]); }; const removeRow = (id) => commit(rows.filter(r => r.id !== id)); const clearAll = () => { if (confirm('ลบรายชื่อทั้งหมดของเดือนนี้? อย่าลืมกดบันทึกเพื่อยืนยัน')) commit([]); }; // Guard month switches when there are unsaved edits. const guardSwitch = () => !dirty || confirm('มีการแก้ไขที่ยังไม่ได้บันทึก — เปลี่ยนเดือนเลยไหม? การแก้ไขจะหาย'); const prevMonth = () => { if (!guardSwitch()) return; let m = month - 1, y = year; if (m < 0) { m = 11; y--; } setMonth(m); setYear(y); }; const nextMonth = () => { if (!guardSwitch()) return; let m = month + 1, y = year; if (m > 11) { m = 0; y++; } setMonth(m); setYear(y); }; // Stats const total = rows.length; const scored = rows.filter(p => mjRowTotal(p) > 0); const avg = scored.length ? Math.round(scored.reduce((s, p) => s + mjRowTotal(p), 0) / scored.length) : 0; const contactedCount = rows.filter(p => p.contacted).length; // Sorted + filtered view const sortedRows = (() => { const arr = rows.slice(); if (sort === 'score') arr.sort((a, b) => mjRowTotal(b) - mjRowTotal(a)); else if (sort === 'name') arr.sort((a, b) => (a.name || '').localeCompare(b.name || '', 'th')); return arr; })(); const q = search.trim().toLowerCase(); const visibleRows = q ? sortedRows.filter(p => `${p.name} ${p.job} ${p.faculty} ${p.note}`.toLowerCase().includes(q)) : sortedRows; const SCORES = [ { f: 'active', label: 'Active' }, { f: 'friendly', label: 'Friendly' }, { f: 'money', label: 'Money' }, { f: 'relation', label: 'Relation' }, ]; return (
คะแนนเฉลี่ย
{avg}/ 40
ทักแล้ว
{contactedCount}/ {total} คน
{MJ_THAI_MONTHS[month]} {year + 543}
setSearch(e.target.value)} />
{dirty ? 'มีการแก้ไขที่ยังไม่ได้บันทึก' : saveLabel}
{loading ? (

กำลังโหลด…

) : rows.length === 0 ? (

ยังไม่มีรายชื่อในเดือนนี้

กด “เพิ่มคนรู้จัก” เพื่อเริ่มจดคนแรกในเครือข่ายของคุณ

) : (
{visibleRows.map((p, i) => { const pf = mjPlatform(p.link); const t = mjRowTotal(p); const any = t > 0; return ( {SCORES.map((s, si) => ( ))} ); })}
10 คะแนน (ให้คะแนนละ 0–10)
No. ทักแล้ว ชื่อ & ลิงก์โซเชียล Age อาชีพ คณะ / มหาลัย Active Friendly Money Relation รวม หมายเหตุ
{i + 1} updateRow(p.id, { name: e.target.value })} />
{MJ_PLAT_SVG[pf || 'web']} updateRow(p.id, { link: e.target.value })} /> {p.link ? ( ) : null}
updateRow(p.id, { age: e.target.value })} /> updateRow(p.id, { job: e.target.value })} /> updateRow(p.id, { faculty: e.target.value })} /> updateRow(p.id, { [s.f]: Math.max(0, Math.min(10, Math.round(+e.target.value || 0))) })} /> {any ? <>{t}/40 : –} {mjTotalLabel(t, any)} updateRow(p.id, { note: e.target.value })} />
)}
เก็บแยกตามเดือนและแยกตามบัญชีผู้ใช้ — แก้ไขแล้วอย่าลืมกด “บันทึก” · ติ๊ก “ทักแล้ว” เมื่อทักคนนั้นเรียบร้อย
); }