// Emphasis System — Daily Checklist tab (split out, registered in emphasis.jsx). // One saved row per (user, day). Saves to Supabase `daily_checklists` via // window.db.dailyChecklist (per-user through RLS), with a localStorage fallback // so it keeps working offline / before login. Built to mirror the shared // "DAILY CHECKLIST" design: motto banner, day navigator, progress ring + // per-section bars, PV field, "Copy ส่ง Upline", and a month heatmap calendar. // ---- date helpers (local time, not UTC) ---- const DC_TH_DOW = ['อา', 'จ', 'อ', 'พ', 'พฤ', 'ศ', 'ส']; // Sun..Sat const DC_TH_DOW_F = ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์']; const DC_TH_MONTH_F = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม']; const _dcMonthAbbr = (typeof TH_MONTH_ABBR !== 'undefined') ? TH_MONTH_ABBR : ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.']; const dcYmd = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`; const dcParse = (s) => { const [y, m, d] = s.split('-').map(Number); return new Date(y, m - 1, d); }; const dcAddDays = (s, n) => { const d = dcParse(s); d.setDate(d.getDate() + n); return dcYmd(d); }; // ---- checklist structure ---- // Daily sections are counted toward the day's "X/total". Weekly is a separate // once-a-week cadence and is tracked but not folded into the daily ring. const DC_DAILY = [ { id: 'myself', label: 'Myself', icon: 'user', color: '#8B5CF6', tint: '#F3EEFE', items: [ { id: 'use_product', label: 'ใช้สินค้า' }, { id: 'listen_link', label: 'ฟัง Link' }, { id: 'read_15', label: 'อ่านหนังสือ 15 หน้า' }, ], }, { id: 'social', label: 'My Social Media', icon: 'share-2', color: '#06B6D4', tint: '#E0F7FB', items: [ { id: 'post', label: 'Post', count: true }, { id: 'add_friend', label: 'เพิ่มเพื่อน', count: true }, { id: 'comment_story', label: 'Comment / Reply Story' }, { id: 'hbd_inbox', label: 'HBD ใน Inbox' }, ], }, { id: 'business', label: 'My Business', icon: 'target', color: '#2F5DE5', tint: '#EEF4FF', items: [ { id: 'open_talk', label: 'ทักเข้าเรื่อง', count: true, hint: 'เป้า: เข้าเรื่อง 8 · ปิดได้ 1 เคส' }, { id: 'em6w_model', label: 'EM6W / Model' }, { id: 'fu_sponsor', label: 'Follow up Sponsor' }, { id: 'analyze_sheet', label: 'วิเคราะห์งาน / Follow up Sheet' }, ], }, ]; const DC_WEEKLY = { id: 'weekly', label: 'Weekly', icon: 'list', color: '#F59E0B', tint: '#FEF3DD', items: [ { id: 'w_list', label: 'ทำ List รายชื่อ' }, { id: 'w_case_other', label: 'ทำ Case สินค้าอื่น' }, { id: 'w_repeat_cust', label: 'ดูแลลูกค้าซื้อซ้ำ' }, { id: 'w_call_system', label: 'โทรนัดหมาย / เข้าระบบ' }, { id: 'w_hm', label: 'ทำ HM ฝึก' }, { id: 'w_upline', label: 'คุยกับ Upline' }, { id: 'w_evaluate', label: 'ประเมินผล ยอด คน แผน' }, ], }; const DC_DAILY_ITEMS = DC_DAILY.flatMap(s => s.items); const DC_DAILY_TOTAL = DC_DAILY_ITEMS.length; const _dcBlank = () => ({ checks: {}, counts: {}, pv: '', note: '' }); const _dcSectionDone = (sec, checks) => sec.items.filter(it => checks[it.id]).length; function DailyChecklistTab({ currentUser }) { const [day, setDay] = useState(() => dcYmd(new Date())); const [doc, setDoc] = useState(_dcBlank()); const [loading, setLoading] = useState(true); const [saveLabel, setSaveLabel] = useState('บันทึกอัตโนมัติ'); const [monthMap, setMonthMap] = useState({}); // 'YYYY-MM-DD' -> done count (daily) const [copied, setCopied] = useState(false); const saveTimer = React.useRef(null); const todayStr = dcYmd(new Date()); const dObj = dcParse(day); // Namespace localStorage per-account so a previously-logged-in user's offline // fallback never leaks into another account on the same device. Falls back to // 'anon' before login. (Supabase rows are already isolated via RLS/user_id.) const lsUid = currentUser?.id || 'anon'; const lsKeyFor = (d) => `emphasis_daily_${lsUid}_${d}`; const lsKey = lsKeyFor(day); // ---- one-time cleanup of legacy device-global keys ---- // Old format was `emphasis_daily_YYYY-MM-DD` (no user id), which leaked one // account's data into another on a shared device. Purge any leftovers once. useEffect(() => { try { const legacy = /^emphasis_daily_\d{4}-\d{2}-\d{2}$/; for (let i = localStorage.length - 1; i >= 0; i--) { const k = localStorage.key(i); if (k && legacy.test(k)) localStorage.removeItem(k); } } catch {} }, []); // ---- load the selected day ---- useEffect(() => { let cancelled = false; (async () => { setLoading(true); let loaded = null; try { if (window.SB_READY && window.db?.dailyChecklist) { const { data } = await window.db.dailyChecklist.get(day); if (data) loaded = data.data; } } catch (e) { /* fall through */ } if (!loaded) { try { const raw = localStorage.getItem(lsKey); if (raw) loaded = JSON.parse(raw); } catch {} } if (cancelled) return; setDoc({ ..._dcBlank(), ...(loaded || {}) }); setSaveLabel(loaded ? 'บันทึกไว้แล้ว' : 'บันทึกอัตโนมัติ'); setLoading(false); })(); return () => { cancelled = true; }; }, [day, lsUid]); // eslint-disable-line // ---- load month heatmap (the month of the selected day) ---- const loadMonth = useCallback(async () => { const first = new Date(dObj.getFullYear(), dObj.getMonth(), 1); const last = new Date(dObj.getFullYear(), dObj.getMonth() + 1, 0); const map = {}; try { if (window.SB_READY && window.db?.dailyChecklist) { const { data } = await window.db.dailyChecklist.range(dcYmd(first), dcYmd(last)); (data || []).forEach(row => { const checks = (row.data && row.data.checks) || {}; map[row.day] = DC_DAILY_ITEMS.filter(it => checks[it.id]).length; }); } else { // localStorage scan for offline mode for (let d = 1; d <= last.getDate(); d++) { const key = dcYmd(new Date(dObj.getFullYear(), dObj.getMonth(), d)); try { const raw = localStorage.getItem(lsKeyFor(key)); if (raw) { const j = JSON.parse(raw); map[key] = DC_DAILY_ITEMS.filter(it => (j.checks || {})[it.id]).length; } } catch {} } } } catch {} setMonthMap(map); }, [dObj.getFullYear(), dObj.getMonth(), lsUid]); // eslint-disable-line useEffect(() => { loadMonth(); }, [loadMonth, loading]); // ---- persist (debounced) ---- const persist = useCallback(async (next) => { try { localStorage.setItem(lsKeyFor(day), JSON.stringify(next)); } catch {} try { if (window.SB_READY && window.db?.dailyChecklist) await window.db.dailyChecklist.save(day, next); } catch {} setSaveLabel('บันทึกแล้ว · ' + new Date().toLocaleTimeString('th-TH', { hour: '2-digit', minute: '2-digit' })); setMonthMap(m => ({ ...m, [day]: DC_DAILY_ITEMS.filter(it => (next.checks || {})[it.id]).length })); }, [day, lsUid]); const queueSave = (next) => { setSaveLabel('กำลังบันทึก…'); clearTimeout(saveTimer.current); saveTimer.current = setTimeout(() => persist(next), 500); }; const update = (mut) => { setDoc(prev => { const next = mut({ ...prev, checks: { ...prev.checks }, counts: { ...prev.counts } }); queueSave(next); return next; }); }; const toggle = (id) => update(d => { d.checks[id] = !d.checks[id]; return d; }); const bump = (id, delta) => update(d => { const n = Math.max(0, (Number(d.counts[id]) || 0) + delta); d.counts[id] = n; if (delta > 0 && n > 0) d.checks[id] = true; // first count auto-checks the item return d; }); const setPv = (v) => update(d => { d.pv = v.replace(/[^0-9]/g, ''); return d; }); const setNote = (v) => update(d => { d.note = v; return d; }); // ---- progress ---- const dailyDone = DC_DAILY_ITEMS.filter(it => doc.checks[it.id]).length; const pct = DC_DAILY_TOTAL ? Math.round((dailyDone / DC_DAILY_TOTAL) * 100) : 0; const weeklyDone = DC_WEEKLY.items.filter(it => doc.checks[it.id]).length; // ---- copy-to-upline text ---- const buildCopy = () => { const lbl = `${DC_TH_DOW_F[dObj.getDay()]} ${dObj.getDate()} ${_dcMonthAbbr[dObj.getMonth()]} ${dObj.getFullYear() + 543}`; const lines = [`📋 Daily Checklist — ${lbl}`, `✅ รวม ${dailyDone}/${DC_DAILY_TOTAL} (${pct}%)`, '']; DC_DAILY.forEach(sec => { lines.push(`■ ${sec.label} ${_dcSectionDone(sec, doc.checks)}/${sec.items.length}`); sec.items.forEach(it => { const cnt = it.count && (Number(doc.counts[it.id]) || 0) > 0 ? ` (${doc.counts[it.id]})` : ''; lines.push(`${doc.checks[it.id] ? '☑' : '☐'} ${it.label}${cnt}`); }); lines.push(''); }); lines.push(`■ ${DC_WEEKLY.label} ${weeklyDone}/${DC_WEEKLY.items.length}`); DC_WEEKLY.items.forEach(it => lines.push(`${doc.checks[it.id] ? '☑' : '☐'} ${it.label}`)); lines.push(''); lines.push(`💰 PV วันนี้: ${doc.pv ? Number(doc.pv).toLocaleString('th-TH') : 0}`); if ((doc.note || '').trim()) lines.push(`📝 หมายเหตุ: ${doc.note.trim()}`); return lines.join('\n'); }; const doCopy = () => { try { navigator.clipboard.writeText(buildCopy()); } catch {} setCopied(true); setTimeout(() => setCopied(false), 1600); }; // ---- month heatmap cells ---- const calCells = (() => { const first = new Date(dObj.getFullYear(), dObj.getMonth(), 1); const daysIn = new Date(dObj.getFullYear(), dObj.getMonth() + 1, 0).getDate(); const pad = first.getDay(); // 0=Sun → leading blanks const cells = []; for (let i = 0; i < pad; i++) cells.push(null); for (let d = 1; d <= daysIn; d++) cells.push(d); return cells; })(); const savedDaysCount = Object.values(monthMap).filter(v => v > 0).length; const heatTint = (done) => { if (!done) return '#F1F5F9'; if (done >= DC_DAILY_TOTAL) return '#2F5DE5'; if (done >= 8) return '#5B82EB'; if (done >= 5) return '#9DB6F4'; if (done >= 3) return '#C7D6F9'; return '#E3EAFB'; }; const goPrev = () => setDay(d => dcAddDays(d, -1)); const goNext = () => { if (day < todayStr) setDay(d => dcAddDays(d, 1)); }; const isToday = day === todayStr; return (
{/* Motto + banner */}

คนที่ประสบความสำเร็จในแบบที่โลกไม่มีวันลืม…
คือคนที่เริ่มต้นจากการทำสิ่งเล็ก ๆ ที่โลกไม่มีวันเห็น

DAILY CHECKLIST
{/* ============ Left: day nav + progress + PV + calendar ============ */}
{/* Day navigator */}
{DC_TH_DOW_F[dObj.getDay()]} {dObj.getDate()} {_dcMonthAbbr[dObj.getMonth()]}
ปี {dObj.getFullYear() + 543} · {isToday ? 'วันนี้' : }
{/* Progress ring + summary */}
{pct}%
วันนี้
ทำไปแล้ว {dailyDone} จาก {DC_DAILY_TOTAL} ข้อ
{dailyDone >= DC_DAILY_TOTAL ? 'ครบทุกข้อแล้ว เยี่ยมมาก! 🎉' : `เหลืออีก ${DC_DAILY_TOTAL - dailyDone} ข้อของวันนี้`}
{/* Per-section bars */}
{[...DC_DAILY, DC_WEEKLY].map(sec => { const done = _dcSectionDone(sec, doc.checks); const total = sec.items.length; return (
{sec.label}
{done}/{total}
); })}
{/* PV */}
setPv(e.target.value)} inputMode="numeric" placeholder="0" className="w-24 h-9 text-right px-2 rounded-lg border border-ink-200 bg-white text-sm font-semibold text-ink-900 num focus:border-brand-400 focus:ring-2 focus:ring-brand-100 outline-none" /> ฿ PV
{/* Copy to upline */} {/* Month heatmap */}
เดือนนี้
{DC_TH_MONTH_F[dObj.getMonth()]} {dObj.getFullYear() + 543} · บันทึก {savedDaysCount} วัน
{DC_TH_DOW.map((d, i) =>
{d}
)} {calCells.map((d, i) => { if (d === null) return
; const key = dcYmd(new Date(dObj.getFullYear(), dObj.getMonth(), d)); const done = monthMap[key] || 0; const sel = key === day; const isT = key === todayStr; const dark = done >= 8; return ( ); })}
น้อย {['#F1F5F9', '#C7D6F9', '#9DB6F4', '#5B82EB', '#2F5DE5'].map(c => )} มาก
{/* ============ Right: the checklist ============ */}
{loading ? (
กำลังโหลด…
 ) : ( <> {DC_DAILY.map(sec => )} ทำสัปดาห์ละครั้ง} /> {/* Note to upline */}