// Timeline & Calendar — per-campaign task tracker, dengan list view + month // calendar grid. Workflow standar: setup → launch → promote → collect → // analyze → present. Auto-template di-seed lewat tombol 'Load template'. const { useState: useState_tl, useEffect: useEffect_tl } = React; const CATEGORY_META = { setup: { label: 'Setup', color: 'oklch(0.55 0.18 265)', bg: 'oklch(0.95 0.05 265)', emoji: '⚙️' }, launch: { label: 'Launch', color: 'oklch(0.55 0.18 305)', bg: 'oklch(0.95 0.05 305)', emoji: '🚀' }, // Promote dipisah jadi online (digital channels — biru) vs offline // (physical channels — oranye). Keep `promote` legacy dengan warna // amber netral untuk task-task lama. promote_online: { label: 'Promote Online', color: 'oklch(0.50 0.18 230)', bg: 'oklch(0.95 0.06 230)', emoji: '🌐' }, promote_offline: { label: 'Promote Offline', color: 'oklch(0.55 0.16 35)', bg: 'oklch(0.96 0.05 35)', emoji: '📍' }, promote: { label: 'Promote', color: 'oklch(0.55 0.16 75)', bg: 'oklch(0.96 0.05 75)', emoji: '📢' }, collect: { label: 'Collect', color: 'oklch(0.55 0.16 25)', bg: 'oklch(0.96 0.05 25)', emoji: '📥' }, analyze: { label: 'Analyze', color: 'oklch(0.50 0.18 200)', bg: 'oklch(0.95 0.06 200)', emoji: '📊' }, present: { label: 'Present', color: 'oklch(0.55 0.18 145)', bg: 'oklch(0.95 0.06 145)', emoji: '🎤' }, other: { label: 'Other', color: 'var(--ink-2)', bg: 'var(--bg-2)', emoji: '📝' }, }; function dateKey(d) { if (!d) return null; const x = new Date(d); return `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, '0')}-${String(x.getDate()).padStart(2, '0')}`; } function fmtDate(d) { if (!d) return null; return new Date(d).toLocaleDateString('id-ID', { day: '2-digit', month: 'short', year: 'numeric' }); } function inputDate(d) { if (!d) return ''; const x = new Date(d); return `${x.getFullYear()}-${String(x.getMonth() + 1).padStart(2, '0')}-${String(x.getDate()).padStart(2, '0')}`; } // Generate every YYYY-MM-DD key in [start, end] inclusive. Untuk index task // di calendar grid yang span beberapa hari. function dateRangeKeys(start, end) { if (!start && !end) return []; // Effective single-day kalau hanya satu sisi terisi. const a = start ? new Date(start) : new Date(end); const b = end ? new Date(end) : new Date(start); a.setHours(0, 0, 0, 0); b.setHours(0, 0, 0, 0); const keys = []; const cur = new Date(a); while (cur <= b) { keys.push(dateKey(cur)); cur.setDate(cur.getDate() + 1); if (keys.length > 90) break; // safety cap } return keys; } // Apakah task aktif di tanggal d? (start≤d≤end). Single-day kalau hanya satu sisi. function taskCoversDate(task, d) { if (!task.startDate && !task.dueDate) return false; const k = dateKey(d); return dateRangeKeys(task.startDate, task.dueDate).includes(k); } function TimelineView() { const [campaigns, setCampaigns] = useState_tl([]); const [campaignId, setCampaignId] = useState_tl(''); const [tasks, setTasks] = useState_tl([]); const [loading, setLoading] = useState_tl(true); const [editing, setEditing] = useState_tl(null); // task object | 'new' | null const [error, setError] = useState_tl(null); const [busy, setBusy] = useState_tl(false); // Calendar anchor month (1st of month) const [calAnchor, setCalAnchor] = useState_tl(() => { const d = new Date(); d.setDate(1); d.setHours(0, 0, 0, 0); return d; }); useEffect_tl(() => { window.api.listCampaigns() .then((r) => { const list = r.campaigns || []; setCampaigns(list); const pick = list.find((c) => c.status === 'active') || list[0]; if (pick) setCampaignId(pick.id); else setLoading(false); }) .catch(() => setLoading(false)); }, []); const refresh = React.useCallback(() => { if (!campaignId) return; setLoading(true); window.api.listTimeline(campaignId) .then((r) => setTasks(r.tasks || [])) .catch((e) => setError(e.message)) .finally(() => setLoading(false)); }, [campaignId]); useEffect_tl(() => { refresh(); }, [refresh]); const camp = campaigns.find((c) => c.id === campaignId); const toggleStatus = async (task) => { const nextStatus = task.status === 'done' ? 'pending' : task.status === 'pending' ? 'in_progress' : 'done'; setBusy(true); try { const r = await window.api.updateTask(campaignId, task.id, { status: nextStatus }); setTasks((prev) => prev.map((t) => (t.id === task.id ? r.task : t))); } catch (e) { setError(e.message); } finally { setBusy(false); } }; const seedTemplate = async (force = false) => { if (!campaignId) return; setBusy(true); setError(null); try { const r = await window.api.seedTimelineTemplate(campaignId, force); setTasks(r.tasks || []); } catch (e) { if (e.status === 409 && window.confirm('Sudah ada tasks. Overwrite dengan template default?')) { return seedTemplate(true); } setError(e.message); } finally { setBusy(false); } }; const removeTask = async (task) => { if (!window.confirm(`Hapus task "${task.title}"?`)) return; setBusy(true); try { await window.api.deleteTask(campaignId, task.id); setTasks((prev) => prev.filter((t) => t.id !== task.id)); } catch (e) { setError(e.message); } finally { setBusy(false); } }; const stats = { total: tasks.length, done: tasks.filter((t) => t.status === 'done').length, inProgress: tasks.filter((t) => t.status === 'in_progress').length, overdue: tasks.filter((t) => { if (t.status === 'done' || !t.dueDate) return false; return new Date(t.dueDate) < new Date(); }).length, }; return (
{campaigns.length > 0 && ( )} {campaignId && tasks.length > 0 && ( Export PDF )} {campaignId && ( )} {campaignId && ( )}
} />
{error && (
{error}
)} {/* Empty state */} {!loading && campaigns.length === 0 && (
📅
Belum ada campaign
Buat campaign pertamamu — timeline workflow akan tersedia di sini.
)} {!loading && campaignId && tasks.length === 0 && (
🚀
Timeline kosong
Klik Load template untuk auto-generate workflow standar (9 tasks: setup → launch → promote → collect → analyze → present), atau Tambah task untuk bikin manual.
)} {tasks.length > 0 && ( <> {/* Stats */}
{[ { label: 'Total task', val: stats.total, color: 'var(--ink)' }, { label: 'Done', val: stats.done, color: 'oklch(0.55 0.16 145)' }, { label: 'In progress', val: stats.inProgress, color: 'oklch(0.55 0.16 75)' }, { label: 'Overdue', val: stats.overdue, color: 'var(--danger)' }, ].map((s) => (
{s.label}
{s.val}
))}
{/* Task list */}
Daftar Task
Klik checkbox untuk siklus status: pending → in_progress → done
{tasks.map((task) => { const cat = CATEGORY_META[task.category] || CATEGORY_META.other; const overdue = task.dueDate && task.status !== 'done' && new Date(task.dueDate) < new Date(); return (
{task.title}
{task.description && (
{task.description}
)}
{cat.emoji} {cat.label} {task.startDate && task.dueDate && dateKey(task.startDate) !== dateKey(task.dueDate) ? ( <>{fmtDate(task.startDate)}
s/d {fmtDate(task.dueDate)} ) : ( task.dueDate || task.startDate ? fmtDate(task.dueDate || task.startDate) : '—' )} {overdue && overdue}
); })}
{/* Calendar */} { const d = new Date(calAnchor); d.setMonth(d.getMonth() - 1); setCalAnchor(d); }} onNext={() => { const d = new Date(calAnchor); d.setMonth(d.getMonth() + 1); setCalAnchor(d); }} onToday={() => { const d = new Date(); d.setDate(1); d.setHours(0,0,0,0); setCalAnchor(d); }} tasks={tasks} onTaskClick={(t) => setEditing(t)} onDateClick={(d) => setEditing({ __new: true, prefillDate: d })} /> )} {/* Edit/Create modal */} {editing && (() => { const isNew = editing === 'new' || editing.__new; const initialTask = isNew ? (editing.__new ? { startDate: editing.prefillDate, dueDate: editing.prefillDate } : null) : editing; return ( setEditing(null)} onSave={async (payload) => { setBusy(true); try { if (isNew) { const r = await window.api.createTask(campaignId, payload); setTasks((prev) => [...prev, r.task].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))); } else { const r = await window.api.updateTask(campaignId, editing.id, payload); setTasks((prev) => prev.map((t) => (t.id === editing.id ? r.task : t))); } setEditing(null); } catch (e) { setError(e.message); } finally { setBusy(false); } }} /> ); })()}
); } // ─── Month calendar grid ───────────────────────────────────────────── function CalendarMonth({ anchor, onPrev, onNext, onToday, tasks, onTaskClick, onDateClick }) { const year = anchor.getFullYear(); const month = anchor.getMonth(); // Day of week header (Indonesian short, Senin first) const dows = ['Sen', 'Sel', 'Rab', 'Kam', 'Jum', 'Sab', 'Min']; // Build 6-row grid (42 cells) starting from Monday before month-1. const firstOfMonth = new Date(year, month, 1); const offset = (firstOfMonth.getDay() + 6) % 7; const start = new Date(firstOfMonth); start.setDate(start.getDate() - offset); const cells = []; for (let i = 0; i < 42; i++) { const d = new Date(start); d.setDate(start.getDate() + i); cells.push(d); } // Index tasks by EVERY date di range [startDate, dueDate]. Single-day task // di-treat sebagai range 1 hari (start=due). Task tanpa kedua-nya di-skip. const byDate = {}; for (const t of tasks) { const keys = dateRangeKeys(t.startDate, t.dueDate); for (const k of keys) { (byDate[k] = byDate[k] || []).push(t); } } const monthLabel = anchor.toLocaleDateString('id-ID', { month: 'long', year: 'numeric' }); const todayKey = dateKey(new Date()); return (
📅 {monthLabel}
{dows.map((d) => (
{d}
))} {cells.map((d, i) => { const k = dateKey(d); const inMonth = d.getMonth() === month; const isToday = k === todayKey; const dayTasks = byDate[k] || []; return (
{ // Klik area kosong cell → buka form dengan tanggal pre-filled. // Klik di task pill ditangani oleh button di dalamnya (stop propagation). if (onDateClick && inMonth) onDateClick(d); }} title={inMonth ? 'Klik untuk tambah task di tanggal ini' : ''} style={{ minHeight: 96, padding: 6, borderRight: '1px solid var(--line)', borderTop: '1px solid var(--line)', background: inMonth ? 'var(--surface)' : 'var(--bg-2)', opacity: inMonth ? 1 : 0.5, position: 'relative', cursor: inMonth ? 'pointer' : 'default', transition: 'background 120ms', }} onMouseEnter={(e) => { if (inMonth) e.currentTarget.style.background = 'var(--bg-2)'; }} onMouseLeave={(e) => { if (inMonth) e.currentTarget.style.background = 'var(--surface)'; }} >
{d.getDate()}
{dayTasks.slice(0, 3).map((t) => { const cat = CATEGORY_META[t.category] || CATEGORY_META.other; const done = t.status === 'done'; // Multi-day task: tiap cell tampil pill terpisah dengan // label yang sama (bukan satu bar panjang). Konsisten, // gampang di-scan saat cell dilihat individual. const isMultiDay = t.startDate && t.dueDate && dateKey(t.startDate) !== dateKey(t.dueDate); return ( ); })} {dayTasks.length > 3 && ( +{dayTasks.length - 3} lagi )}
); })}
); } // ─── Task form modal ───────────────────────────────────────────────── function TaskFormModal({ initial, isNew, onClose, onSave }) { const [title, setTitle] = useState_tl(initial?.title ?? ''); const [description, setDescription] = useState_tl(initial?.description ?? ''); const [category, setCategory] = useState_tl(initial?.category ?? 'other'); const [status, setStatus] = useState_tl(initial?.status ?? 'pending'); const [start, setStart] = useState_tl(inputDate(initial?.startDate)); const [due, setDue] = useState_tl(inputDate(initial?.dueDate)); const [busy, setBusy] = useState_tl(false); const isMultiDay = start && due && start !== due; const dateRangeText = (() => { if (!start && !due) return ''; if (start && due && start === due) return `1 hari · ${fmtDate(start)}`; if (isMultiDay) { const a = new Date(start), b = new Date(due); const days = Math.round((b - a) / 86400000) + 1; return `${days} hari · ${fmtDate(start)} – ${fmtDate(due)}`; } return start ? `Mulai ${fmtDate(start)}` : `Deadline ${fmtDate(due)}`; })(); const submit = async () => { if (!title.trim()) return; setBusy(true); await onSave({ title: title.trim(), description: description.trim() || null, category, status, startDate: start ? new Date(start + 'T09:00:00').toISOString() : null, dueDate: due ? new Date(due + 'T17:00:00').toISOString() : null, }); setBusy(false); }; return (
e.stopPropagation()} className="card" style={{ width: '100%', maxWidth: 520, padding: 22 }}>
{isNew ? 'Tambah task baru' : 'Edit task'}
setTitle(e.target.value)} placeholder="cth. Sebar via WhatsApp Broadcast" autoFocus />