// Calendar — month view & day-detail (split from calendar.jsx).
// MonthGridView, MonthChip, DayDetailModal, ActivityLog, TypeStatTile,
// FollowUpCard, TypeDetailModal. Also owns the window.* exports for cases.jsx.
// ============== Month grid view ==============
// Apple-Calendar-style 6-row month overview. Each cell = one calendar day
// with the date number + colored chips for that day's appts. Tapping a
// chip opens EditApptModal; tapping an empty area opens the new-appt
// quick picker positioned on that date.
function MonthGridView({ monthAppts, monthRef, apptTypes, onOpenAppt, onPickCell, onPrevMonth, onNextMonth, onThisMonth }) {
const TH_DOW = ['จ.', 'อ.', 'พ.', 'พฤ.', 'ศ.', 'ส.', 'อา.'];
const TH_MO = ['ม.ค.','ก.พ.','มี.ค.','เม.ย.','พ.ค.','มิ.ย.','ก.ค.','ส.ค.','ก.ย.','ต.ค.','พ.ย.','ธ.ค.'];
// Build a 6×7 grid that fully covers the target month. Start the grid
// on the Monday of the week containing the 1st, then run 42 cells.
const grid = useMemo(() => {
const y = monthRef.getFullYear();
const m = monthRef.getMonth();
const first = new Date(y, m, 1);
// Mon=1..Sun=7 (treat Sun as 7 so the week starts on Monday)
const dow = first.getDay() === 0 ? 7 : first.getDay();
const start = new Date(y, m, 1 - (dow - 1));
return Array.from({ length: 42 }, (_, i) => {
const d = new Date(start.getFullYear(), start.getMonth(), start.getDate() + i);
return d;
});
}, [monthRef]);
// Bucket appts by YYYY-MM-DD in Bangkok TZ.
const byDate = useMemo(() => {
const map = new Map();
for (const a of monthAppts) {
if (!a.scheduled_at) continue;
const bkk = new Date(new Date(a.scheduled_at).getTime() + 7 * 3600 * 1000);
const key = `${bkk.getUTCFullYear()}-${bkk.getUTCMonth()}-${bkk.getUTCDate()}`;
if (!map.has(key)) map.set(key, []);
map.get(key).push(a);
}
// Sort each bucket by time ascending.
for (const list of map.values()) {
list.sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
}
return map;
}, [monthAppts]);
const todayKey = (() => {
const bkk = new Date(Date.now() + 7 * 3600 * 1000);
return `${bkk.getUTCFullYear()}-${bkk.getUTCMonth()}-${bkk.getUTCDate()}`;
})();
const targetMonth = monthRef.getMonth();
const monthLabel = `${TH_MO[targetMonth]} ${monthRef.getFullYear() + 543}`;
return (
{/* Header — month label + nav arrows. The hint moves below the
row on mobile so the arrows stay reachable on small screens. */}
{/* Chip list — mobile and desktop have different caps AND
different tap targets. Mobile chips bubble up to the
cell-level "open this day" handler (so the user always
sees the full day list, since the chips on a phone are
too small to make a confident pick). Desktop chips
remain individually clickable — they open EditApptModal
directly because the chips are larger and the user
knows what they're tapping. */}
);
}
// Single appt chip on the month grid — colored band on the left, time +
// truncated prospect name.
function MonthChip({ appt, apptTypes, onClick }) {
const t = apptTypes.find(x => x.id === appt.type) || { label: '?', color: '#94A3B8', tint: '#F1F5F9' };
const effStatus = _effectiveStatus(appt);
const cancelled = effStatus === 'cancelled';
const completed = effStatus === 'completed';
const time = formatTime(appt.start);
// DL-case detection mirrors ApptCard: a dl_prospect_id is the modern
// path; the legacy users.dl_id path still works for older rows. We
// surface the DL's name in parens so the user sees whose case it is
// without opening the modal.
const me = window.__currentUser?.id;
const isDlCase = !!appt.dlProspectId || (!!appt.dlId && !!me && appt.dlId !== me);
const dlLabel = isDlCase && appt.dlName ? appt.dlName : null;
// Monthly running index of this appt's type — "1 ครีม, 2 พี่กัน, 3 ..."
// Same scoping as ApptCard: personal cases only, FU excluded.
let progressBadge = null;
if (!isDlCase && appt.type !== 'FU') {
const idx = window.__emphasisCaseIndex?.get(appt.id);
if (idx) {
progressBadge = (
{idx}
);
}
}
return (
);
}
// Day-detail modal — opens when the user taps a cell on the month grid.
// Lists every appt scheduled for that Bangkok date (sorted by time) with
// the type chip, prospect/topic, owner pill, and quick "เปิด" affordance.
// A footer button still lets the user spin up a new appt for that day.
function DayDetailModal({ open, date, monthAppts, apptTypes, leadSources, onClose, onOpenAppt, onCreateNew }) {
if (!date) return null;
// Bucket appts whose Bangkok date matches the picked cell.
const dayKey = (() => {
const d = new Date(date);
return `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
})();
const list = (monthAppts || [])
.filter(a => {
if (!a.scheduled_at) return false;
const bkk = new Date(new Date(a.scheduled_at).getTime() + 7 * 3600 * 1000);
return `${bkk.getUTCFullYear()}-${bkk.getUTCMonth()}-${bkk.getUTCDate()}` === dayKey;
})
.sort((a, b) => a.scheduled_at.localeCompare(b.scheduled_at));
const TH_DOW_FULL = ['อาทิตย์','จันทร์','อังคาร','พุธ','พฤหัสบดี','ศุกร์','เสาร์'];
const TH_MO_FULL = ['มกราคม','กุมภาพันธ์','มีนาคม','เมษายน','พฤษภาคม','มิถุนายน','กรกฎาคม','สิงหาคม','กันยายน','ตุลาคม','พฤศจิกายน','ธันวาคม'];
// Bangkok midnight of `date` — used to decide if "+ สร้างนัด" should be
// shown (past days are read-only).
const isPastDay = (() => {
const d = new Date(date);
const todayBkk = new Date(Date.now() + 7 * 3600 * 1000);
const dateStart = new Date(d.getFullYear(), d.getMonth(), d.getDate()).getTime();
const todayStart = Date.UTC(todayBkk.getUTCFullYear(), todayBkk.getUTCMonth(), todayBkk.getUTCDate()) - 7 * 3600 * 1000;
return dateStart < todayStart;
})();
const tally = list.reduce((acc, a) => {
const es = _effectiveStatus(a);
if (es === 'completed') acc.done++;
else if (es === 'cancelled') acc.cancelled++;
else if (es === 'followup') acc.followup++;
else acc.pending++;
return acc;
}, { done: 0, pending: 0, followup: 0, cancelled: 0 });
return (
);
}
window.CalendarView = CalendarView;
// ============== Type summary tile (clickable) ==============
// Splits the case counts into:
// - primary's own cases (default — isPartner=false, not DL)
// - partner's own cases (isPartner=true) — only when a partner exists
// - DL-owned (dl_id / dl_prospect_id set)
// so the user can see at a glance how many of each type belong to whom.
function TypeStatTile({ type, appts, onClick }) {
const me = window.__currentUser?.id;
const meName = (window.__currentUser?.name || '').split(' ')[0] || 'ฉัน';
const partnerName = window.__currentUser?.partner_name || null;
const isDlAppt = (a) => !!a.dlProspectId || (!!a.dlId && !!me && a.dlId !== me);
const ownAppts = appts.filter(a => !isDlAppt(a) && !a.isPartner);
const partnerAppts = appts.filter(a => !isDlAppt(a) && a.isPartner);
const dlAppts = appts.filter(a => isDlAppt(a));
const tally = (list) => {
const completed = list.filter(a => a.status === 'completed').length;
const pending = list.filter(a => a.status === 'pending').length;
const followup = list.filter(a => a.status === 'followup').length;
const total = list.length;
return { total, completed, pending, followup, closeRate: total > 0 ? Math.round(completed / total * 100) : 0 };
};
const totalT = tally(appts);
const ownT = tally(ownAppts);
const partnerT = tally(partnerAppts);
const dlT = tally(dlAppts);
const isFU = type.id === 'FU';
return (
);
}
// ============== Follow-up watchlist card ==============
function FollowUpCard({ appts, onOpenAppt }) {
const { apptTypes } = useConfig();
// Default to "today" so the user sees their immediate workload first.
const [tab, setTab] = useState('today');
// appts now includes the whole month (not just the viewed week), so
// a.day relative to viewWeekStart isn't reliable for comparing dates.
// Use scheduled_at to detect "today in Bangkok" and to sort.
const todayRange = useMemo(() => {
const now = new Date();
const bkk = new Date(now.getTime() + 7 * 3600 * 1000);
const y = bkk.getUTCFullYear(), m = bkk.getUTCMonth(), d = bkk.getUTCDate();
const start = new Date(Date.UTC(y, m, d) - 7 * 3600 * 1000);
const end = new Date(start.getTime() + 24 * 3600 * 1000);
return { startMs: start.getTime(), endMs: end.getTime() };
}, []);
const isToday = (a) => {
if (!a.scheduled_at) return false;
const t = new Date(a.scheduled_at).getTime();
return t >= todayRange.startMs && t < todayRange.endMs;
};
const sortByTime = (a, b) => {
if (a.scheduled_at && b.scheduled_at) return a.scheduled_at.localeCompare(b.scheduled_at);
return (a.day - b.day) || (a.start - b.start);
};
const pending = appts.filter(a => a.status === 'pending').sort(sortByTime);
const followup = appts.filter(a => a.status === 'followup').sort(sortByTime);
const today = appts.filter(a =>
(a.status === 'pending' || a.status === 'followup') && isToday(a)
).sort(sortByTime);
const list = tab === 'today' ? today : tab === 'pending' ? pending : followup;
return (
// Use a raw flex column instead of so the inner list can shrink to
// match the height of the left column (the 4 type-stat tiles). Without
// this the card's natural content height is taller than the tiles, and
// the row looks lopsided.
ต้องตามต่อ
รายชื่อที่ต้องติดตาม
{pending.length + followup.length} เคส
{/* Tabs */}
{/* List — flex-1 + min-h-0 lets it shrink to whatever space remains
after the header/tabs, instead of stretching the card beyond the
left column's height. */}
{list.map(a => {
const t = apptTypes.find(x => x.id === a.type) || { label: '?', color: '#94A3B8' };
// Overdue when the appt's end time is in the past — works
// for any week now that the list spans the whole month.
const apptEndMs = a.scheduled_at
? new Date(a.scheduled_at).getTime() + Math.round((a.dur || 1) * 3600 * 1000)
: Infinity;
const overdue = apptEndMs < Date.now();
return (
);
})}
)}
);
}
// ============== Type detail modal ==============
function TypeDetailModal({ open, onClose, typeId, appts, onOpenAppt }) {
const { apptTypes, leadSources } = useConfig();
// Owner-split tab — "all" | "own" | "partner" | "dl". Reset whenever the
// modal opens or switches type so the user always lands on "all" first.
const [ownerTab, setOwnerTab] = useState('all');
useEffect(() => { if (open) setOwnerTab('all'); }, [open, typeId]);
if (!typeId) return null;
const type = apptTypes.find(t => t.id === typeId);
if (!type) return null;
const me = window.__currentUser?.id;
const meName = (window.__currentUser?.name || '').split(' ')[0] || 'ฉัน';
const partnerName = window.__currentUser?.partner_name || null;
const isDlAppt = (a) => !!a.dlProspectId || (!!a.dlId && !!me && a.dlId !== me);
const allForType = appts
.filter(a => a.type === typeId)
.sort((a, b) => (a.day - b.day) || (a.start - b.start));
// Counts per owner bucket so the tab pills show numbers.
const own = allForType.filter(a => !isDlAppt(a) && !a.isPartner);
const partner = allForType.filter(a => !isDlAppt(a) && a.isPartner);
const dl = allForType.filter(a => isDlAppt(a));
const list = ownerTab === 'own' ? own
: ownerTab === 'partner' ? partner
: ownerTab === 'dl' ? dl
: allForType;
const grouped = {
pending: list.filter(a => a.status === 'pending'),
completed: list.filter(a => a.status === 'completed'),
followup: list.filter(a => a.status === 'followup'),
cancelled: list.filter(a => a.status === 'cancelled'),
};
return (
}>
{/* Owner-split tabs — separates own / partner / DL cases. Tab counts
are over ALL cases of this type, regardless of which tab is active,
so the user can switch contexts without losing the totals. */}
);
}
// Expose the summary widgets so the standalone "สรุปเคส" view (views/cases.jsx)
// can reuse them without duplicating the markup. Calendar.jsx loads before
// cases.jsx in index.html, so window globals are wired up by the time
// cases.jsx runs.
window.TypeStatTile = TypeStatTile;
window.FollowUpCard = FollowUpCard;
window.MobilePendingList = MobilePendingList;
window.TypeDetailModal = TypeDetailModal;