ชื่อ Group
Group ID (ใช้ภายใน ไม่สามารถเปลี่ยนภายหลัง)
Brand color
{PRESET_COLORS.map(c => (
setNewGroup(g => ({ ...g, color: c }))} title={c}
style={{ width: 24, height: 24, background: c, border: c === newGroup.color ? '3px solid var(--ink)' : '2px solid transparent', borderRadius: 3, cursor: 'pointer' }} />
))}
{/* Delete confirm */}
setConfirmDelete(null)}
title={`ลบ Group "${confirmDelete?.name}"?`}
subtitle={confirmDelete?.products?.length ? `Products ทั้ง ${confirmDelete.products.length} รายการใน group นี้จะถูก unassign` : 'Group นี้ยังไม่มี product'}
width={420}
footer={<>
setConfirmDelete(null)} style={{ padding: '7px 14px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, background: 'var(--panel)', cursor: 'pointer' }}>ยกเลิก
deleteGroup(confirmDelete)}
style={{ padding: '7px 14px', background: '#c0392b', color: '#fff', border: 'none', borderRadius: 3, fontSize: 12, fontWeight: 500, cursor: 'pointer' }}>
ลบ Group
}>
การกระทำนี้ไม่สามารถยกเลิกได้
);
};
// ============================================================
// Product Setting View — display name per product_sub_cat
// ============================================================
const EMPTY_NEW_PRODUCT = { product_cat: '', product_sub_cat: '', display_name: '', group_id: '' };
const ProductSettingView = () => {
const [products, setProducts] = useState([]);
const [groups, setGroups] = useState([]);
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState({});
// edits: { [productId]: { display_name?, group_id? } }
const [edits, setEdits] = useState({});
const [filterGroup, setFilterGroup] = useState('all');
const [search, setSearch] = useState('');
// Create
const [showAdd, setShowAdd] = useState(false);
const [newProd, setNewProd] = useState(EMPTY_NEW_PRODUCT);
const [creating, setCreating] = useState(false);
// Delete confirm: productId waiting confirmation
const [confirmDelete, setConfirmDelete] = useState(null);
const [deleting, setDeleting] = useState({});
useEffect(() => {
Promise.all([
authFetch('/api/products').then(r => r.json()),
authFetch('/api/groups/config').then(r => r.json()),
]).then(([pd, gd]) => {
setProducts(pd.products || []);
setGroups(gd.groups || []);
}).catch(() => showToast('ไม่สามารถโหลดข้อมูลได้', { variant: 'error' }))
.finally(() => setLoading(false));
}, []);
const getField = (id, field, fallback) =>
(id in edits && field in edits[id]) ? edits[id][field] : fallback;
const setField = (id, field, value) =>
setEdits(ed => ({ ...ed, [id]: { ...ed[id], [field]: value } }));
const isRowDirty = (p) => {
if (!(p.id in edits)) return false;
const e = edits[p.id];
return ('display_name' in e && e.display_name !== p.display_name) ||
('group_id' in e && e.group_id !== (p.group_id ?? ''));
};
const dirtyProducts = products.filter(isRowDirty);
const saveProduct = async (p) => {
setSaving(s => ({ ...s, [p.id]: true }));
try {
const newName = getField(p.id, 'display_name', p.display_name);
const newGroup = getField(p.id, 'group_id', p.group_id ?? '');
const r = await authFetch(`/api/products/${p.id}`, {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
display_name: newName,
group_id: newGroup || null,
}),
});
if (!r.ok) throw new Error((await r.json()).error);
const grp = groups.find(g => g.group_id === newGroup);
setProducts(ps => ps.map(x => x.id === p.id ? {
...x,
display_name: newName,
has_custom_name: newName !== x.product_sub_cat,
group_id: newGroup || null,
group_name: grp?.group_name || null,
group_color: grp?.group_color || null,
} : x));
setEdits(e => { const n = { ...e }; delete n[p.id]; return n; });
showToast('บันทึกแล้ว', { variant: 'success', detail: newName });
} catch (e) {
showToast('บันทึกไม่สำเร็จ', { variant: 'error', detail: e.message });
} finally {
setSaving(s => { const n = { ...s }; delete n[p.id]; return n; });
}
};
const resetProduct = (p) =>
setEdits(e => { const n = { ...e }; delete n[p.id]; return n; });
const saveAll = async () => {
for (const p of dirtyProducts) await saveProduct(p);
};
const createProduct = async () => {
if (!newProd.product_cat.trim() || !newProd.product_sub_cat.trim()) {
showToast('กรุณากรอก Category และ Product name', { variant: 'error' }); return;
}
setCreating(true);
try {
const r = await authFetch('/api/products', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(newProd),
});
const data = await r.json();
if (!r.ok) throw new Error(data.error);
const grp = groups.find(g => g.group_id === newProd.group_id);
setProducts(ps => [{
id: data.id,
product_cat: newProd.product_cat.trim(),
product_sub_cat: newProd.product_sub_cat.trim(),
display_name: newProd.display_name.trim() || newProd.product_sub_cat.trim(),
has_custom_name: !!newProd.display_name.trim(),
group_id: newProd.group_id || null,
group_name: grp?.group_name || null,
group_color: grp?.group_color || null,
}, ...ps]);
setNewProd(EMPTY_NEW_PRODUCT);
setShowAdd(false);
showToast('เพิ่ม product แล้ว', { variant: 'success', detail: newProd.product_sub_cat.trim() });
} catch (e) {
showToast('เพิ่มไม่สำเร็จ', { variant: 'error', detail: e.message });
} finally {
setCreating(false);
}
};
const deleteProduct = async (p) => {
setDeleting(d => ({ ...d, [p.id]: true }));
try {
const r = await authFetch(`/api/products/${p.id}`, { method: 'DELETE' });
if (!r.ok) throw new Error((await r.json()).error);
setProducts(ps => ps.filter(x => x.id !== p.id));
setConfirmDelete(null);
showToast('ลบ product แล้ว', { variant: 'success', detail: p.display_name || p.product_sub_cat });
} catch (e) {
showToast('ลบไม่สำเร็จ', { variant: 'error', detail: e.message });
} finally {
setDeleting(d => { const n = { ...d }; delete n[p.id]; return n; });
}
};
const filtered = products.filter(p => {
if (filterGroup === 'none' && p.group_id) return false;
if (filterGroup !== 'all' && filterGroup !== 'none' && p.group_id !== filterGroup) return false;
if (search) {
const q = search.toLowerCase();
return p.product_sub_cat.toLowerCase().includes(q) ||
(p.display_name || '').toLowerCase().includes(q) ||
(p.product_cat || '').toLowerCase().includes(q);
}
return true;
});
return (
{dirtyProducts.length > 0 && (
บันทึก {dirtyProducts.length} รายการ
)}
{ setShowAdd(s => !s); setNewProd(EMPTY_NEW_PRODUCT); }}
style={{ padding: '6px 14px', background: showAdd ? 'var(--line)' : 'var(--accent)', color: showAdd ? 'var(--ink)' : '#fff', borderRadius: 3, fontSize: 12, fontWeight: 500, cursor: 'pointer', border: 'none' }}>
{showAdd ? '✕ ยกเลิก' : '+ เพิ่ม Product'}
}>
{/* Filters */}
setFilterGroup('all')} style={{ padding: '5px 12px', fontSize: 12, background: filterGroup === 'all' ? 'var(--ink)' : 'var(--panel)', color: filterGroup === 'all' ? '#fff' : 'var(--ink-2)', border: 'none', cursor: 'pointer' }}>
ทั้งหมด ({products.length})
{groups.map(g => (
setFilterGroup(g.group_id)}
style={{ padding: '5px 12px', fontSize: 12, background: filterGroup === g.group_id ? g.group_color : 'var(--panel)', color: filterGroup === g.group_id ? '#fff' : 'var(--ink-2)', border: 'none', borderLeft: '1px solid var(--line)', cursor: 'pointer' }}>
{g.group_name} ({products.filter(p => p.group_id === g.group_id).length})
))}
setFilterGroup('none')}
style={{ padding: '5px 12px', fontSize: 12, background: filterGroup === 'none' ? '#666' : 'var(--panel)', color: filterGroup === 'none' ? '#fff' : 'var(--ink-2)', border: 'none', borderLeft: '1px solid var(--line)', cursor: 'pointer' }}>
ไม่มี group ({products.filter(p => !p.group_id).length})
setSearch(e.target.value)}
style={{ padding: '5px 10px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, width: 200 }}
/>
{filtered.length} รายการ
{/* Table */}
{loading ? (
กำลังโหลด…
) : (
{/* Column headers */}
Product (product_sub_cat)
ชื่อแสดงผล
Group
{/* Inline create form */}
{showAdd && (
{/* product_cat + product_sub_cat */}
{/* display_name */}
{/* group */}
setNewProd(n => ({ ...n, group_id: e.target.value }))}
style={{ width: '100%', padding: '4px 6px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, outline: 'none', cursor: 'pointer' }}>
— ไม่ระบุ group —
{groups.map(g => {g.group_name} )}
{/* confirm/cancel */}
{creating ? '…' : 'เพิ่ม'}
setShowAdd(false)}
style={{ padding: '4px 8px', fontSize: 12, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)', borderRadius: 3, cursor: 'pointer' }}>✕
)}
{filtered.length === 0 && !showAdd && (
ไม่พบข้อมูล
)}
{filtered.map((p, i) => {
const curName = getField(p.id, 'display_name', p.display_name);
const curGroup = getField(p.id, 'group_id', p.group_id ?? '');
const dirty = isRowDirty(p);
const grpInfo = groups.find(g => g.group_id === curGroup);
const isConfirming = confirmDelete === p.id;
return (
{/* product_sub_cat — read-only */}
{p.product_sub_cat}
{p.product_cat}
{/* display_name — editable */}
{/* Group — editable dropdown */}
setField(p.id, 'group_id', e.target.value)}
style={{ width: '100%', padding: '4px 6px', border: `1px solid ${'group_id' in (edits[p.id] || {}) && edits[p.id].group_id !== (p.group_id ?? '') ? 'var(--accent-2)' : 'var(--line)'}`, borderRadius: 3, fontSize: 12, background: grpInfo ? grpInfo.group_color + '18' : 'transparent', color: grpInfo?.group_color || 'var(--ink-3)', outline: 'none', cursor: 'pointer' }}>
— ไม่ระบุ group —
{groups.map(g => (
{g.group_name}
))}
{/* Actions: save/reset if dirty, delete button always */}
{dirty && (
<>
saveProduct(p)} disabled={saving[p.id]}
style={{ padding: '3px 8px', fontSize: 11, background: 'var(--ink)', color: '#fff', border: 'none', borderRadius: 3, cursor: 'pointer' }}>
{saving[p.id] ? '…' : 'Save'}
resetProduct(p)}
style={{ padding: '3px 6px', fontSize: 11, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)', borderRadius: 3, cursor: 'pointer' }}>✕
)}
{!dirty && !isConfirming && (
setConfirmDelete(p.id)} title="ลบ product นี้"
style={{ padding: '3px 7px', fontSize: 12, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)', borderRadius: 3, cursor: 'pointer', lineHeight: 1 }}>🗑
)}
{isConfirming && (
<>
ลบ?
deleteProduct(p)} disabled={deleting[p.id]}
style={{ padding: '3px 8px', fontSize: 11, background: '#c0392b', color: '#fff', border: 'none', borderRadius: 3, cursor: 'pointer', fontWeight: 600 }}>
{deleting[p.id] ? '…' : 'ยืนยัน'}
setConfirmDelete(null)}
style={{ padding: '3px 6px', fontSize: 11, background: 'transparent', color: 'var(--ink-3)', border: '1px solid var(--line)', borderRadius: 3, cursor: 'pointer' }}>✕
)}
);
})}
);
};
const TargetSettingView = () => {
const [year, setYear] = useState('2026');
const [groups, setGroups] = useState([]);
// targets: { "PRODUCT_CAT|product_sub_cat": { Q1, Q2, Q3, Q4 } }
const [targets, setTargets] = useState({});
const [locked, setLocked] = useState({ Q1: false, Q2: false, Q3: false, Q4: false });
const [loading, setLoading] = useState(true);
const [saving, setSaving] = useState(false);
const [showGrowth, setShowGrowth] = useState(false);
const [growthPct, setGrowthPct] = useState(12);
const [savedAt, setSavedAt] = useState(null);
const [importing, setImporting] = useState(false);
const importRef = React.useRef(null);
const reload = React.useCallback(async () => {
setLoading(true);
try {
const r = await authFetch(`/api/targets?year=${year}`);
const data = await r.json();
setGroups(data.groups || []);
setTargets(data.targets || {});
setLocked(data.locked || { Q1: false, Q2: false, Q3: false, Q4: false });
} catch (e) {
showToast('Failed to load targets', { variant: 'error' });
} finally {
setLoading(false);
}
}, [year]);
React.useEffect(() => { reload(); }, [reload]);
const productKey = (p) => `${p.product_cat}|${p.product_sub_cat}`;
const setCell = (key, q, val) => {
setTargets(t => ({ ...t, [key]: { ...t[key], [q]: val } }));
};
const annualOfKey = (key) =>
['Q1','Q2','Q3','Q4'].reduce((s, q) => s + Number(targets[key]?.[q] || 0), 0);
const allProducts = groups.flatMap(g => g.products.map(p => ({ ...p, group_id: g.group_id })));
const annualTotal = allProducts.reduce((s, p) => s + annualOfKey(productKey(p)), 0);
const handleSave = async () => {
setSaving(true);
try {
// Build payload: include group/cat/sub metadata per key
const payload = {};
groups.forEach(g => {
g.products.forEach(p => {
const key = productKey(p);
payload[key] = {
product_group: g.group_id,
product_cat: p.product_cat,
product_sub_cat: p.product_sub_cat,
...(targets[key] || {}),
};
});
});
const r = await authFetch('/api/targets', {
method: 'PUT',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ targets: payload, locked, year: parseInt(year) }),
});
if (!r.ok) throw new Error((await r.json()).error);
setSavedAt('Just now');
showToast('Targets saved & published', {
variant: 'success',
detail: `${allProducts.length} products · 4 quarters · ฿${(annualTotal / 1000)}B annual`,
});
} catch (e) {
showToast('Save failed: ' + e.message, { variant: 'error' });
} finally {
setSaving(false);
}
};
const handleImport = async (file) => {
if (!file) return;
setImporting(true);
try {
const fd = new FormData();
fd.append('file', file);
const r = await authFetch('/api/targets/import', { method: 'POST', body: fd });
const data = await r.json();
if (!r.ok) throw new Error(data.error || 'Import failed');
showToast('นำเข้าข้อมูลสำเร็จ', { variant: 'success', detail: `${data.upserted} rows updated · ${file.name}` });
reload();
} catch (e) {
showToast('Import failed: ' + e.message, { variant: 'error' });
} finally {
setImporting(false);
if (importRef.current) importRef.current.value = '';
}
};
const applyGrowth = () => {
const factor = 1 + growthPct / 100;
setTargets(t => {
const next = { ...t };
allProducts.forEach(p => {
const key = productKey(p);
const updated = { ...t[key] };
['Q1','Q2','Q3','Q4'].forEach(q => {
if (!locked[q]) updated[q] = (updated[q] || 0) * factor;
});
next[key] = updated;
});
return next;
});
setShowGrowth(false);
showToast(`Applied ${growthPct >= 0 ? '+' : ''}${growthPct}% to unlocked quarters`, { variant: 'success' });
};
const inputStyle = (isLocked) => ({
display: 'inline-block', textAlign: 'right',
padding: '5px 8px',
background: isLocked ? '#f1eee5' : 'var(--panel)',
border: `1px solid ${isLocked ? 'var(--line-2)' : 'var(--line)'}`,
borderRadius: 3, width: 100,
color: isLocked ? 'var(--ink-3)' : 'var(--ink)',
fontFamily: 'IBM Plex Mono', fontSize: 12,
cursor: isLocked ? 'not-allowed' : 'text',
outline: 'none',
});
return (
setYear(v)} />
importRef.current?.click()}
disabled={importing}
style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, color: 'var(--ink-2)', background: 'var(--panel)', opacity: importing ? 0.6 : 1 }}>
}>
{/* Summary cards */}
{[
{ l: 'Total annual target', v: loading ? '—' : `฿${(annualTotal / 1000)}B` },
{ l: 'Products with target', v: loading ? '—' : `${allProducts.filter(p => annualOfKey(productKey(p)) > 0).length} / ${allProducts.length}` },
{ l: 'Last saved', v: savedAt || '—', d: savedAt ? 'by Pim T.' : 'ยังไม่ได้บันทึก' },
].map((c, i) => (
{c.l}
{c.v}
{c.d &&
{c.d}
}
))}
Quarterly targets · {year} (THB millions)
คลิก cell เพื่อแก้ไข · คลิกหัวคอลัมน์เพื่อ lock/unlock
setShowGrowth(true)} style={{ padding: '5px 10px', border: '1px solid var(--line)', borderRadius: 3 }}>Apply % growth
{loading ? (
Loading…
) : (
Product
{['Q1', 'Q2', 'Q3', 'Q4'].map(q => (
{q} {year}
{ setLocked(l => ({ ...l, [q]: !l[q] })); showToast(`${q} ${locked[q] ? 'unlocked' : 'locked'}`, { variant: 'info' }); }}
style={{ fontWeight: 400, color: 'var(--ink-3)', marginTop: 2, textTransform: 'none', letterSpacing: 0, fontSize: 9, cursor: 'pointer', background: 'transparent', padding: '1px 4px', display: 'inline-flex', alignItems: 'center', gap: 3 }}>
{locked[q] ? '🔒 locked' : '○ unlocked'}
))}
Annual
{groups.map(g => {
if (g.products.length === 0) return null;
const groupAnnual = g.products.reduce((s, p) => s + annualOfKey(productKey(p)), 0);
return (
{/* Group header row */}
{g.group_name}
{g.products.length} products
Annual: ฿{numFmt(groupAnnual,0)}M
{/* Product rows */}
{g.products.map(p => {
const key = productKey(p);
const annual = annualOfKey(key);
return (
e.currentTarget.style.background = '#fafaf8'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{p.display_name}
{p.product_cat} · {p.product_sub_cat}
{['Q1','Q2','Q3','Q4'].map(q => {
const val = targets[key]?.[q] || 0;
const isLocked = locked[q];
return (
);
})}
{annual > 0 ? numFmt(annual,0) : — }
);
})}
);
})}
Grand Total
{['Q1','Q2','Q3','Q4'].map(q => (
฿{allProducts.reduce((s, p) => s + Number(targets[productKey(p)]?.[q] || 0), 0, 0)}M
))}
฿{numFmt(annualTotal,0)}M
)}
Note: เป้าหมายตั้งได้รายผลิตภัณฑ์ตาม Group setting · คลิกหัวคอลัมน์เพื่อ lock/unlock · ตัวเลข Annual ใช้ในการคำนวณ Pacing บนหน้า Overview
{/* Apply growth modal */}
setShowGrowth(false)}
title="Apply percentage growth"
subtitle="ปรับเป้าหมายของทุก quarter ที่ unlock โดยอัตรา % ที่กำหนด"
width={420}
footer={<>
setShowGrowth(false)} style={{ padding: '8px 14px', border: '1px solid var(--line)', fontSize: 12, borderRadius: 3 }}>Cancel
Apply {growthPct >= 0 ? '+' : ''}{growthPct}%
}>
Growth rate
ใช้กับ {Object.values(locked).filter(v => !v).length} quarters ที่ unlock
);
};
// ============================================================
// Root App
// ============================================================
// ============================================================
// Login Page
// ============================================================
const LoginPage = ({ onLogin }) => {
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [showPw, setShowPw] = useState(false);
const handleSubmit = async (e) => {
e.preventDefault();
if (!username || !password) { setError('กรุณากรอก Username และ Password'); return; }
setLoading(true); setError('');
try {
const user = await window.API.login(username.trim(), password);
onLogin(user);
} catch (err) {
setError(err.message || 'เข้าสู่ระบบไม่สำเร็จ');
} finally {
setLoading(false);
}
};
return (
{/* Logo */}
B2B Product
Revenue Dashboard
{/* Card */}
ติดต่อผู้ดูแลระบบหากลืม Password
);
};
// ============================================================
// User Settings View
// ============================================================
const ROLES = { admin: 'Admin', editor: 'Editor', viewer: 'Viewer' };
const ROLE_DESC = { admin: 'จัดการได้ทุกอย่างรวมถึง User', editor: 'แก้ไขข้อมูลและ Upload ได้', viewer: 'ดูข้อมูลได้อย่างเดียว' };
const UserModal = ({ user, onSave, onClose }) => {
const isNew = !user;
const [form, setForm] = useState({
username: user?.username || '',
display_name: user?.display_name || '',
email: user?.email || '',
role: user?.role || 'viewer',
password: '',
is_active: user?.is_active !== false,
});
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const handleSave = async () => {
if (!form.display_name.trim()) { setError('กรุณากรอก Display Name'); return; }
if (isNew && !form.username.trim()) { setError('กรุณากรอก Username'); return; }
if (isNew && form.password.length < 6) { setError('Password ต้องมีอย่างน้อย 6 ตัวอักษร'); return; }
setLoading(true); setError('');
try {
if (isNew) {
await window.API.createUser(form);
} else {
await window.API.updateUser(user.id, { display_name: form.display_name, email: form.email, role: form.role, is_active: form.is_active });
}
onSave();
} catch (e) { setError(e.message); }
finally { setLoading(false); }
};
const inputStyle = { width: '100%', padding: '8px 10px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 13, color: 'var(--ink)', background: 'var(--bg)', boxSizing: 'border-box' };
const labelStyle = { display: 'block', fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', marginBottom: 5 };
return (
ยกเลิก
{loading ? 'กำลังบันทึก…' : 'บันทึก'}
}>
);
};
const ResetPasswordModal = ({ user, onClose }) => {
const [pw, setPw] = useState('');
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [done, setDone] = useState(false);
const handleReset = async () => {
if (pw.length < 6) { setError('Password ต้องมีอย่างน้อย 6 ตัวอักษร'); return; }
setLoading(true); setError('');
try {
await window.API.resetPassword(user.id, pw);
setDone(true);
} catch (e) { setError(e.message); }
finally { setLoading(false); }
};
return (
ปิด
: <>
ยกเลิก
{loading ? 'กำลังบันทึก…' : 'Reset Password'}
}>
{done
? ✓ Reset Password เรียบร้อยแล้ว
:
{error &&
{error}
}
New Password
setPw(e.target.value)} autoFocus
style={{ width: '100%', padding: '8px 10px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 13, color: 'var(--ink)', background: 'var(--bg)', boxSizing: 'border-box' }}
placeholder="อย่างน้อย 6 ตัวอักษร" />
);
};
const UserSettingView = ({ currentUser }) => {
const [users, setUsers] = useState([]);
const [loading, setLoading] = useState(true);
const [editUser, setEditUser] = useState(null); // null=closed, false=new, obj=edit
const [resetUser, setResetUser] = useState(null);
const [deleteConfirm, setDeleteConfirm] = useState(null);
const [reactivateConfirm, setReactivateConfirm] = useState(null);
const load = () => {
setLoading(true);
window.API.getUsers().then(u => { setUsers(u); setLoading(false); }).catch(() => setLoading(false));
};
useEffect(() => { load(); }, []);
const handleDelete = async (u) => {
try {
await window.API.deleteUser(u.id);
showToast(`Deactivated ${u.display_name}`, { variant: 'warn' });
load();
} catch (e) { showToast(e.message, { variant: 'error' }); }
setDeleteConfirm(null);
};
const handleReactivate = async (u) => {
try {
await window.API.reactivateUser(u.id, { display_name: u.display_name, email: u.email, role: u.role });
showToast(`Reactivated ${u.display_name}`, { variant: 'success' });
load();
} catch (e) { showToast(e.message, { variant: 'error' }); }
setReactivateConfirm(null);
};
return (
User Management
จัดการบัญชีผู้ใช้งานระบบ · เฉพาะ Admin เท่านั้น
setEditUser(false)} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '8px 14px', background: '#2d3a8c', color: '#fff', border: 'none', borderRadius: 3, fontSize: 12.5, fontWeight: 500, cursor: 'pointer' }}>
+ เพิ่ม User ใหม่
User
Username
Email
Role
Status
Last Login
Actions
{loading ? (
กำลังโหลด… e.currentTarget.style.background = '#fbfaf6'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{u.display_name[0].toUpperCase()}
{u.display_name}{isMe && คุณ }
{u.username}
{u.email || '—'}
{ROLES[u.role]}
{u.is_active ? '● Active' : '○ Inactive'}
{u.last_login ? new Date(u.last_login).toLocaleString('th-TH', { dateStyle: 'short', timeStyle: 'short' }) : '—'}
{u.is_active ? (
<>
setEditUser(u)} style={{ fontSize: 11.5, padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 3, background: 'var(--panel)', cursor: 'pointer', color: 'var(--ink-2)' }}>แก้ไข
setResetUser(u)} style={{ fontSize: 11.5, padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 3, background: 'var(--panel)', cursor: 'pointer', color: 'var(--ink-2)' }}>Reset PW
{!isMe && (
setDeleteConfirm(u)} style={{ fontSize: 11.5, padding: '4px 10px', border: '1px solid #fcc', borderRadius: 3, background: '#fff8f8', cursor: 'pointer', color: '#c00' }}>Deactivate
)}
) : (
setReactivateConfirm(u)} style={{ fontSize: 11.5, padding: '4px 10px', border: '1px solid #b4d9b4', borderRadius: 3, background: '#f0faf0', cursor: 'pointer', color: '#1a7a3a', fontWeight: 500 }}>↺ Reactivate
)}
);
})}
{editUser !== null && (
setEditUser(null)} onSave={() => { setEditUser(null); load(); showToast('บันทึกเรียบร้อย', { variant: 'success' }); }} />
)}
{resetUser && setResetUser(null)} />}
{deleteConfirm && (
setDeleteConfirm(null)} title="ยืนยันการ Deactivate" width={360}
footer={<>
setDeleteConfirm(null)} style={{ padding: '7px 14px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12 }}>ยกเลิก
handleDelete(deleteConfirm)} style={{ padding: '7px 16px', background: '#c00', color: '#fff', borderRadius: 3, fontSize: 12, fontWeight: 500, border: 'none', cursor: 'pointer' }}>Deactivate
}>
คุณแน่ใจหรือไม่ที่จะ Deactivate {deleteConfirm.display_name} ?User จะไม่สามารถเข้าสู่ระบบได้จนกว่าจะ Activate ใหม่
)}
{reactivateConfirm && (
setReactivateConfirm(null)} title="Reactivate User" width={360}
footer={<>
setReactivateConfirm(null)} style={{ padding: '7px 14px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12 }}>ยกเลิก
handleReactivate(reactivateConfirm)} style={{ padding: '7px 16px', background: '#1a7a3a', color: '#fff', borderRadius: 3, fontSize: 12, fontWeight: 500, border: 'none', cursor: 'pointer' }}>↺ Reactivate
}>
Reactivate {reactivateConfirm.display_name} (@{reactivateConfirm.username})?User จะสามารถ login ได้ด้วย password เดิม
)}
);
};
// ============================================================
// Change Password Modal
// ============================================================
const ChangePasswordModal = ({ onClose }) => {
const [form, setForm] = useState({ current: '', next: '', confirm: '' });
const [loading, setLoading] = useState(false);
const [error, setError] = useState('');
const [done, setDone] = useState(false);
const set = (k, v) => setForm(f => ({ ...f, [k]: v }));
const handleSave = async () => {
if (form.next.length < 6) { setError('Password ใหม่ต้องมีอย่างน้อย 6 ตัวอักษร'); return; }
if (form.next !== form.confirm) { setError('Password ใหม่ไม่ตรงกัน'); return; }
setLoading(true); setError('');
try {
await window.API.changePassword(form.current, form.next);
setDone(true);
} catch (e) { setError(e.message); }
finally { setLoading(false); }
};
const iStyle = { width: '100%', padding: '8px 10px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 13, boxSizing: 'border-box', background: 'var(--bg)' };
const lStyle = { display: 'block', fontSize: 11, fontWeight: 500, textTransform: 'uppercase', letterSpacing: '0.06em', color: 'var(--ink-3)', marginBottom: 5 };
return (
ปิด
: <>
ยกเลิก
{loading ? 'กำลังบันทึก…' : 'เปลี่ยน Password'}
}>
{done
? ✓ เปลี่ยน Password เรียบร้อยแล้ว
: }
);
};
// ============================================================
// Pipeline Dashboard View
// ============================================================
const DEFAULT_PIPELINE_SECTIONS = [
{ id: 'kpi', label: 'KPI summary', visible: true },
{ id: 'funnel', label: 'Stage Funnel & Forecast', visible: true },
{ id: 'heatmap', label: 'Pipeline by Product Group × Vertical', visible: true },
{ id: 'groups', label: 'Pipeline by Product Group (drill-down)', visible: true },
{ id: 'trend_opps', label: 'Trend by Segment & Top Opportunities', visible: true },
];
const PIPELINE_STAGE_ORDER = ['Prospecting', 'Qualification', 'Proposal', 'POC / Demo', 'Negotiation', 'Closed Won'];
const PIPELINE_STAGE_COLORS = {
'Prospecting': '#3b4ba0',
'Qualification':'#4a5cb8',
'Proposal': '#5e72c6',
'POC / Demo': '#d97b2e',
'Negotiation': '#c06010',
'Closed Won': '#1f7a4d',
};
const STAGE_PILLS = {
'Prospecting': { bg: '#eaf0fd', color: '#2d3a8c' },
'Qualification':{ bg: '#eaf0fd', color: '#2d3a8c' },
'Proposal': { bg: '#e8f0fb', color: '#2d3a8c' },
'POC / Demo': { bg: '#f0fdf4', color: '#1f7a4d' },
'Negotiation': { bg: '#fff3e3', color: '#c06010' },
'Closed Won': { bg: '#e8f5ed', color: '#1f7a4d' },
'Closed Lost': { bg: '#fdecea', color: '#b8492f' },
};
// fmtMillion – input in raw baht (pipeline deal_value = actual THB)
const fmtMillion = (v) => {
const n = parseFloat(v) || 0;
const abs = Math.abs(n);
if (abs >= 1e9) return `฿${numFmt(n / 1e9)}B`;
if (abs >= 1e6) return `฿${numFmt(n / 1e6)}M`;
if (abs >= 1e3) return `฿${numFmt(n / 1e3)}K`;
return `฿${numFmt(n)}`;
};
const PIPELINE_GROUP_PALETTE = ['#2d3a8c','#d97b2e','#1f7a4d','#7c3aed','#0891b2','#c06010','#b8492f','#64748b'];
// ============================================================
// Lost Analysis View
// ============================================================
const LOST_CARDS_DEFAULT = [
{ id: 'total_lost', label: 'Total Lost Deals', visible: true },
{ id: 'lost_value', label: 'Lost Value', visible: true },
{ id: 'loss_rate', label: 'Loss Rate', visible: true },
{ id: 'avg_size', label: 'Avg Deal Size (Lost)', visible: true },
{ id: 'avg_days', label: 'Avg Days to Loss', visible: true },
{ id: 'won_value', label: 'Won Value', visible: false },
];
const LOST_SECTIONS_DEFAULT = [
{ id: 'dept_product', label: 'Lost by Department & Product', visible: true },
{ id: 'trend', label: 'Loss Trend (12 เดือน)', visible: true },
{ id: 'heatmap', label: 'Loss Heatmap', visible: true },
{ id: 'loss_pattern', label: 'Lost Reason Analysis', visible: true },
{ id: 'recent', label: 'Top 20 Recent Lost Deals', visible: true },
];
const LostAnalysisView = ({ userId }) => {
const lostCardsKey = `lost_cards_${userId || 'default'}`;
const lostSectionsKey = `lost_sections_${userId || 'default'}`;
const [data, setData] = useState(null);
const [loading, setLoading] = useState(true);
const [error, setError] = useState(null);
const [metric, setMetric] = useState('value');
const [hmMetric, setHmMetric] = useState('count');
const [hmSort, setHmSort] = useState({ col: null, dir: 'desc' }); // col: null=dept-alpha | segment string
const [showAddKPI, setShowAddKPI] = useState(false);
const [showCustomize, setShowCustomize] = useState(false);
const [recentFilter, setRecentFilter] = useState('all'); // 'all' | 'close_lost' | 'close_cancel'
// Expose to global so the top-level Export handler can read the current filter
React.useEffect(() => { window.__lostFilter = recentFilter; }, [recentFilter]);
React.useEffect(() => { window.__lostFilter = 'all'; return () => { window.__lostFilter = null; }; }, []);
// ── Card visibility state (persisted per user) ──
const [cards, setCards] = useState(() => {
try {
const saved = JSON.parse(localStorage.getItem(`lost_cards_${userId || 'default'}`) || 'null');
if (saved) {
const savedIds = new Set(saved.map(c => c.id));
const newCards = LOST_CARDS_DEFAULT.filter(c => !savedIds.has(c.id));
return [...saved, ...newCards];
}
} catch {}
return LOST_CARDS_DEFAULT;
});
const [pendingCards, setPendingCards] = useState(LOST_CARDS_DEFAULT);
const cardDragIdx = useRef(null);
const cardDragOverIdx = useRef(null);
// ── Section order/visibility (persisted per user) ──
const [lostSections, setLostSections] = useState(() => {
try {
const saved = JSON.parse(localStorage.getItem(`lost_sections_${userId || 'default'}`) || 'null');
if (saved) {
const savedIds = new Set(saved.map(s => s.id));
const newSects = LOST_SECTIONS_DEFAULT.filter(s => !savedIds.has(s.id));
return [...saved, ...newSects];
}
} catch {}
return LOST_SECTIONS_DEFAULT;
});
const [pendingSections, setPendingSections] = useState(LOST_SECTIONS_DEFAULT);
const sectDragIdx = useRef(null);
const sectDragOverIdx = useRef(null);
const sectVisible = (id) => lostSections.find(s => s.id === id)?.visible !== false;
useEffect(() => {
setLoading(true);
authFetch('/api/pipeline/lost')
.then(r => r.json())
.then(d => { setData(d); setLoading(false); })
.catch(e => { setError(e.message); setLoading(false); });
}, []);
if (loading) return (
กำลังโหลดข้อมูล…
);
if (error) return (
Error: {error}
);
if (!data) return null;
const { kpis, trend, byDept, byProduct, heatmap, recentDeals,
winLossBySegment = [], cycleTimeBuckets = [], dealSizeBuckets = [] } = data;
const fmtM = (v) => {
const n = parseFloat(v) || 0;
if (n >= 1e9) return `฿${numFmt(n/1e9)}B`;
if (n >= 1e6) return `฿${numFmt(n/1e6)}M`;
if (n >= 1e3) return `฿${numFmt(n/1e3)}K`;
return `฿${numFmt(n)}`;
};
// Map card id → rendered card
const cardDefs = {
total_lost: { label: 'Total Lost Deals', value: kpis.lost_count.toLocaleString(), sub: 'Close Lost + Close Cancel', accent: '#b8492f' },
lost_value: { label: 'Lost Value', value: fmtM(kpis.lost_value), sub: 'มูลค่า deal รวม' },
loss_rate: { label: 'Loss Rate', value: `${kpis.lost_rate}%`, sub: 'ต่อ closed deals ทั้งหมด' },
avg_size: { label: 'Avg Deal Size (Lost)', value: fmtM(kpis.avg_lost_value), sub: 'เฉลี่ยต่อ deal' },
avg_days: { label: 'Avg Days to Loss', value: `${kpis.avg_days} วัน`, sub: 'นับจาก created date' },
won_value: { label: 'Won Value', value: fmtM(kpis.won_value), sub: 'มูลค่า deal ที่ชนะ', accent: '#1f7a4d' },
};
const KPICard = ({ id }) => {
const d = cardDefs[id];
if (!d) return null;
return (
{d.label}
{d.value}
{d.sub &&
{d.sub}
}
);
};
const visibleCards = cards.filter(c => c.visible);
// ── Bar charts ──
const maxDeptVal = Math.max(...byDept.map(d => metric === 'value' ? d.total.value : d.total.count), 1);
const maxProdVal = Math.max(...byProduct.map(d => metric === 'value' ? d.total.value : d.total.count), 1);
// Stacked bar: Close Lost (dark red) + Close Cancel (peach)
const CL_COLOR = '#b8492f';
const CC_COLOR = '#e8a87c';
const StackedBarRow = ({ label, closeLost, closeCancel, total, maxVal, metricKey, suffix }) => {
const clVal = closeLost[metricKey];
const ccVal = closeCancel[metricKey];
const totVal = total[metricKey];
const clPct = totVal > 0 ? (clVal / maxVal) * 100 : 0;
const ccPct = totVal > 0 ? (ccVal / maxVal) * 100 : 0;
return (
{label}
{clPct > 0 &&
}
{ccPct > 0 &&
}
{suffix}
);
};
const StackLegend = () => (
{[[CL_COLOR,'Close Lost'],[CC_COLOR,'Close Cancel']].map(([c,l]) => (
))}
);
// ── Heatmap ──
const hmMax = Math.max(...(heatmap.data || []).flat().map(c => hmMetric === 'value' ? c.value : c.count), 1);
const hmColor = (val) => {
const pct = val / hmMax;
const r = Math.round(184 + (60 - 184) * pct);
const g = Math.round(73 + (30 - 73) * pct);
const b = Math.round(47 + (20 - 47) * pct);
return `rgba(${r},${g},${b},${0.12 + pct * 0.82})`;
};
// ── Trend bars ──
const trendVals = trend[metric === 'value' ? 'lostValue' : 'lost'] || [];
const trendMax = Math.max(...trendVals, 1);
// ── Section renderers (keyed by id) ──
const SectionDeptProduct = () => {
const mk = metric === 'value' ? 'value' : 'count';
return (
Lost by Department
แยกตาม department / sector
{byDept.map((d, i) => (
))}
Lost by Product
Top 10 product ที่แพ้บ่อย
{byProduct.map((d, i) => (
))}
);
};
const SectionTrend = () => (
Loss Trend (12 เดือนล่าสุด)
แนวโน้ม deals ที่แพ้ · เรียงตาม close date
{trend.labels.map((label, i) => {
const v = trendVals[i] || 0;
const h = trendMax > 0 ? Math.max((v / trendMax) * 90, v > 0 ? 4 : 0) : 0;
const rate = trend.lostRate[i] || 0;
return (
{rate > 0 ? `${rate}%` : ''}
);
})}
);
const SectionHeatmap = () => {
// Build sorted dept indices
const sortedDeptIndices = heatmap.depts.map((_, i) => i).sort((a, b) => {
const { col, dir } = hmSort;
const mult = dir === 'asc' ? 1 : -1;
if (col === null) {
// Sort alphabetically by dept name
return mult * heatmap.depts[a].localeCompare(heatmap.depts[b]);
}
const si = heatmap.segments.indexOf(col);
if (si === -1) return 0;
const cellA = heatmap.data[a]?.[si] || { count: 0, value: 0 };
const cellB = heatmap.data[b]?.[si] || { count: 0, value: 0 };
const vA = hmMetric === 'value' ? parseFloat(cellA.value) : parseInt(cellA.count);
const vB = hmMetric === 'value' ? parseFloat(cellB.value) : parseInt(cellB.count);
return mult * (vB - vA);
});
const handleSort = (col) => {
setHmSort(prev => ({
col,
dir: prev.col === col && prev.dir === 'desc' ? 'asc' : 'desc',
}));
};
const SortArrow = ({ col }) => {
const active = hmSort.col === col;
return (
{active && hmSort.dir === 'asc' ? '▲' : '▼'}
);
};
const thStyle = (col) => ({
padding: '8px 10px', textAlign: col === null ? 'left' : 'center',
color: hmSort.col === col ? 'var(--ink)' : 'var(--ink-3)',
fontWeight: hmSort.col === col ? 600 : 500,
fontSize: 10, textTransform: 'uppercase', letterSpacing: '0.06em',
minWidth: col === null ? 200 : 120,
cursor: 'pointer', userSelect: 'none',
borderBottom: `2px solid ${hmSort.col === col ? '#b8492f' : 'var(--line)'}`,
whiteSpace: 'nowrap',
});
return (
Loss Heatmap · Department × Segment
คลิก header เพื่อ sort · เซลล์สีเข้ม = สูญเสียมาก
{[['count','จำนวน'],['value','มูลค่า']].map(([v,l]) => (
setHmMetric(v)}
style={{ padding: '4px 10px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 11,
background: hmMetric === v ? '#b8492f' : '#fff', color: hmMetric === v ? '#fff' : 'var(--ink-2)',
cursor: 'pointer', fontFamily: 'inherit' }}>{l}
))}
{heatmap.depts.length === 0 ?
ไม่มีข้อมูล
: (
handleSort(null)} style={thStyle(null)}>
Department
{heatmap.segments.map(seg => (
handleSort(seg)} style={thStyle(seg)}>
{seg}
))}
Total
{sortedDeptIndices.map(di => {
const dept = heatmap.depts[di];
const rowTotal = heatmap.segments.reduce((sum, _, si) => {
const cell = heatmap.data[di]?.[si] || { count: 0, value: 0 };
return sum + (hmMetric === 'value' ? parseFloat(cell.value) : parseInt(cell.count));
}, 0);
return (
e.currentTarget.style.background = '#fbfaf6'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{dept}
{heatmap.segments.map((seg, si) => {
const cell = heatmap.data[di]?.[si] || { count: 0, value: 0 };
const cellVal = hmMetric === 'value' ? cell.value : cell.count;
return (
0 ? hmColor(cellVal) : 'transparent', borderRadius: 2, transition: 'background 120ms' }}
title={`${dept} × ${seg}: ${cell.count} deals · ${fmtM(cell.value)}`}>
{cellVal > 0 ? (hmMetric === 'value' ? fmtM(cell.value) : cell.count) : — }
);
})}
{hmMetric === 'value' ? fmtM(rowTotal) : rowTotal || — }
);
})}
)}
);
};
const SectionRecent = () => {
const filterOpts = [
{ key: 'all', label: 'ทั้งหมด', count: recentDeals.length },
{ key: 'close_lost', label: 'Close Lost', count: recentDeals.filter(d => !d.opportunity_status?.toLowerCase().includes('cancel')).length },
{ key: 'close_cancel', label: 'Close Cancel', count: recentDeals.filter(d => d.opportunity_status?.toLowerCase().includes('cancel')).length },
];
const filtered = recentDeals.filter(d => {
if (recentFilter === 'all') return true;
const isCancel = d.opportunity_status?.toLowerCase().includes('cancel');
return recentFilter === 'close_cancel' ? isCancel : !isCancel;
});
const isCancel = s => s?.toLowerCase().includes('cancel');
return (
Top 20 Recent Lost Deals
เรียงตาม close date
{recentFilter !== 'all' && · แสดง {filtered.length} รายการ }
{/* Status filter tabs */}
{filterOpts.map(opt => {
const active = recentFilter === opt.key;
return (
setRecentFilter(opt.key)}
style={{ padding: '4px 12px', borderRadius: 3, border: 'none', cursor: 'pointer', fontSize: 11.5, fontFamily: 'inherit', fontWeight: active ? 600 : 400,
background: active ? '#fff' : 'transparent',
color: active ? (opt.key === 'close_lost' ? '#b8492f' : opt.key === 'close_cancel' ? '#a06000' : 'var(--ink-1)') : 'var(--ink-3)',
boxShadow: active ? '0 1px 3px rgba(0,0,0,0.1)' : 'none',
transition: 'all 0.15s',
}}>
{opt.label}
({opt.count})
);
})}
{['Account','Product','Segment','Department','Deal Value','Status','Close Date','Cycle (วัน)','Owner'].map(h => (
{h}
))}
{filtered.length === 0 && ไม่มีข้อมูลสำหรับ filter นี้ e.currentTarget.style.background = '#fbfaf6'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{d.account_name || '—'}
{d.product || '—'}
{d.segment || '—'}
{d.department || '—'}
{fmtM(d.deal_value)}
{d.opportunity_status || 'Lost'}
{d.close_date ? new Date(d.close_date).toLocaleDateString('th-TH', { year: '2-digit', month: 'short', day: 'numeric' }) : '—'}
{d.cycle_days != null ? d.cycle_days : '—'}
{d.owner || '—'}
))}
);
};
// ── Lost Reason Analysis section ───────────────────────────────────────
const SectionLossPattern = () => {
const totalLostDeals = kpis.lost_count || 1;
// ── Derive reason categories from existing data ──
const clCount = byDept.reduce((s, d) => s + (d.closeLost?.count || 0), 0);
const ccCount = byDept.reduce((s, d) => s + (d.closeCancel?.count || 0), 0);
const clValue = byDept.reduce((s, d) => s + (d.closeLost?.value || 0), 0);
const ccValue = byDept.reduce((s, d) => s + (d.closeCancel?.value || 0), 0);
const fastB = cycleTimeBuckets.find(b => b.key === 'fast') || { count: 0, value: 0 };
const midB = cycleTimeBuckets.find(b => b.key === 'medium') || { count: 0, value: 0 };
const longB = cycleTimeBuckets.find(b => b.key === 'long') || { count: 0, value: 0 };
const vLongB = cycleTimeBuckets.find(b => b.key === 'very_long') || { count: 0, value: 0 };
const reasonCards = [
{
key: 'close_lost',
icon: '🏆',
title: 'แพ้คู่แข่ง',
subtitle: 'Close Lost',
desc: 'Deal ที่แพ้ให้คู่แข่งหรือลูกค้าเลือก solution อื่น',
count: clCount,
value: clValue,
pct: Math.round(clCount / totalLostDeals * 100),
color: '#b8492f',
bg: '#fdf0ec',
},
{
key: 'close_cancel',
icon: '🚫',
title: 'ลูกค้ายกเลิก',
subtitle: 'Close Cancel',
desc: 'Deal ที่ถูกยกเลิก — อาจเกิดจาก budget freeze, priority เปลี่ยน',
count: ccCount,
value: ccValue,
pct: Math.round(ccCount / totalLostDeals * 100),
color: '#a06000',
bg: '#fef8ec',
},
{
key: 'budget_fit',
icon: '⚡',
title: 'Budget / Fit ไม่ตรง',
subtitle: 'ปฏิเสธเร็ว < 30 วัน',
desc: 'Deal ที่แพ้ภายใน 30 วัน — มักเป็นปัญหา budget หรือ product ไม่ตรงความต้องการ',
count: fastB.count,
value: fastB.value,
pct: Math.round(fastB.count / totalLostDeals * 100),
color: '#1565c0',
bg: '#eef4fd',
},
{
key: 'competitive',
icon: '⚔️',
title: 'สูญเสียเชิงแข่งขัน',
subtitle: 'Cycle 30–90 วัน',
desc: 'Deal ที่ผ่านการพิจารณาแต่แพ้ขั้นตัดสินใจ — มักเป็น competitive situation',
count: midB.count,
value: midB.value,
pct: Math.round(midB.count / totalLostDeals * 100),
color: '#6a1a6a',
bg: '#f9eef9',
},
{
key: 'complex_decision',
icon: '🏛️',
title: 'Decision Process ซับซ้อน',
subtitle: 'Cycle > 90 วัน',
desc: 'Deal ที่ใช้เวลานาน — มักติด committee, procurement หรือ multi-stakeholder',
count: longB.count + vLongB.count,
value: longB.value + vLongB.value,
pct: Math.round((longB.count + vLongB.count) / totalLostDeals * 100),
color: '#2e6b4f',
bg: '#edf7f2',
},
];
// Win/Loss bar component
const WinLossBar = ({ row }) => {
const wonW = row.total > 0 ? Math.round((row.wonCount / row.total) * 100) : 0;
const lostW = row.total > 0 ? Math.round((row.lostCount / row.total) * 100) : 0;
return (
{row.seg}
{wonW}% won
·
{lostW}% lost
);
};
// Cycle time bar
const maxCycle = Math.max(...cycleTimeBuckets.map(b => b.count), 1);
const CycleBar = ({ b }) => {
const pct = Math.round((b.count / maxCycle) * 100);
const sharePct = Math.round(b.count / totalLostDeals * 100);
return (
{b.label}
{b.count.toLocaleString()} deals
({sharePct}%)
{b.hint}
);
};
// Deal size tiles
const totalSizeDeals = dealSizeBuckets.reduce((s, b) => s + b.count, 0) || 1;
const totalSizeValue = dealSizeBuckets.reduce((s, b) => s + b.value, 0) || 1;
const sizeColors = { zero: '#aaa', small: '#e8a87c', medium: '#b8492f', large: '#8c3520', enterprise: '#5c1a0a' };
const visibleBuckets = dealSizeBuckets.filter(b => b.key !== 'zero' || b.count > 0);
return (
{/* Header */}
Lost Reason Analysis
วิเคราะห์สาเหตุที่แพ้ deal — จำแนกตามประเภทและ pattern
{/* ── Reason Category Cards ── */}
สาเหตุที่แพ้ (Reason Categories)
{reasonCards.map(r => (
{r.icon}
{r.title}
{r.subtitle}
{r.count.toLocaleString()}
{r.pct}% ของ loss ทั้งหมด
{fmtM(r.value)}
{r.desc}
))}
{/* ── Win Rate + Cycle Time ── */}
Win Rate by Segment
{[['#2e7d52','Won'],['#b8492f','Lost']].map(([c,l]) => (
))}
{winLossBySegment.map((row, i) =>
)}
* เปรียบเทียบเฉพาะ Closed Won vs Closed Lost (ไม่รวม Open deals)
Cycle Time to Loss
ตั้งแต่ Create ถึง Close Lost
{cycleTimeBuckets.map((b, i) =>
)}
{/* ── Deal Size ── */}
Deal Size Distribution
Deal ขนาดไหนที่แพ้บ่อย — volume vs value
{visibleBuckets.map(b => (
{b.label}
{b.range}
{b.count.toLocaleString()}
{Math.round(b.count / totalSizeDeals * 100)}% deals
{fmtM(b.value)}
{Math.round(b.value / totalSizeValue * 100)}% of value
))}
);
};
const SECTION_MAP = { dept_product: SectionDeptProduct, trend: SectionTrend, heatmap: SectionHeatmap, loss_pattern: SectionLossPattern, recent: SectionRecent };
const btnStyle = { display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, color: 'var(--ink-2)', background: 'var(--panel)', cursor: 'pointer', fontFamily: 'inherit' };
return (
{/* Page header */}
Lost Analysis
วิเคราะห์ deal ที่แพ้ (Close Lost + Close Cancel) · ข้อมูลจาก Pipeline
{data?.data_as_of && (() => {
const d = new Date(data.data_as_of);
const label = d.toLocaleString('en', { day: 'numeric', month: 'short', year: 'numeric' });
return (
);
})()}
{ setPendingCards([...cards]); setShowAddKPI(true); }} style={btnStyle}>
{ setPendingSections([...lostSections]); setShowCustomize(true); }} style={btnStyle}>
{/* KPI strip — only visible cards */}
{visibleCards.length > 0 && (
{visibleCards.map(c =>
)}
{/* Metric toggle */}
แสดงผลโดย:
{[['value','มูลค่า (฿)'],['count','จำนวน deals']].map(([v,l]) => (
setMetric(v)}
style={{ padding: '5px 12px', border: '1px solid var(--line)', borderRadius: 4, fontSize: 11.5,
background: metric === v ? 'var(--ink)' : '#fff', color: metric === v ? '#fff' : 'var(--ink-2)',
cursor: 'pointer', fontWeight: metric === v ? 500 : 400, fontFamily: 'inherit' }}>
{l}
))}
{/* Sections — rendered in user-defined order.
Call render fn directly (not
) so React doesn't treat new
function references as different component types → no unmount/scroll. */}
{lostSections.filter(s => s.visible).map(s => {
const renderFn = SECTION_MAP[s.id];
return renderFn ?
{renderFn()} : null;
})}
{/* ── Add KPI Modal ── */}
setShowAddKPI(false)}
title="Add KPI"
subtitle="ลาก ⠿ เพื่อเรียงลำดับ · toggle เพื่อแสดง/ซ่อน card"
width={440}
footer={<>
setShowAddKPI(false)} style={{ padding: '8px 14px', border: '1px solid var(--line)', fontSize: 12, borderRadius: 3, fontFamily: 'inherit', cursor: 'pointer' }}>Cancel
{
setCards([...pendingCards]);
try { localStorage.setItem(lostCardsKey, JSON.stringify(pendingCards)); } catch {}
setShowAddKPI(false);
}} style={{ padding: '8px 14px', background: 'var(--ink)', color: '#fff', fontSize: 12, fontWeight: 500, borderRadius: 3, fontFamily: 'inherit', cursor: 'pointer' }}>Apply
}>
{pendingCards.map((c, idx) => (
{ cardDragIdx.current = idx; }}
onDragOver={e => {
e.preventDefault();
if (cardDragOverIdx.current !== idx) {
cardDragOverIdx.current = idx;
const arr = [...pendingCards];
const [moved] = arr.splice(cardDragIdx.current, 1);
arr.splice(idx, 0, moved);
cardDragIdx.current = idx;
setPendingCards(arr);
}
}}
onDragEnd={() => { cardDragIdx.current = null; cardDragOverIdx.current = null; }}
style={{
display: 'flex', alignItems: 'center', gap: 12,
padding: '11px 12px',
border: '1px solid var(--line)', borderRadius: 3,
background: c.visible ? 'var(--panel)' : '#f7f5f0',
cursor: 'grab', userSelect: 'none',
opacity: c.visible ? 1 : 0.55,
transition: 'opacity 120ms, background 120ms',
}}>
⠿
{c.visible ? pendingCards.filter((x, xi) => x.visible && xi <= idx).length : '—'}
{c.label}
setPendingCards(prev => prev.map((x, xi) => xi === idx ? { ...x, visible: !x.visible } : x))}
style={{ position: 'relative', width: 32, height: 18, borderRadius: 9, cursor: 'pointer',
background: c.visible ? 'var(--accent)' : '#c8c5bc', transition: 'background 150ms', flexShrink: 0 }}>
))}
{pendingCards.filter(c => c.visible).length} cards จะแสดงบน Lost Analysis · บันทึกแยกตาม user
{/* ── Customize Sections Modal ── */}
setShowCustomize(false)}
title="Customize layout"
subtitle="ลาก ⠿ เพื่อเรียงลำดับ · toggle เพื่อแสดง/ซ่อน section"
width={480}
footer={<>
setShowCustomize(false)} style={{ padding: '8px 14px', border: '1px solid var(--line)', fontSize: 12, borderRadius: 3, fontFamily: 'inherit', cursor: 'pointer' }}>Cancel
{
setLostSections([...pendingSections]);
try { localStorage.setItem(lostSectionsKey, JSON.stringify(pendingSections)); } catch {}
setShowCustomize(false);
}} style={{ padding: '8px 14px', background: 'var(--ink)', color: '#fff', fontSize: 12, fontWeight: 500, borderRadius: 3, fontFamily: 'inherit', cursor: 'pointer' }}>Apply
}>
{pendingSections.map((s, idx) => (
{ sectDragIdx.current = idx; }}
onDragOver={e => {
e.preventDefault();
if (sectDragOverIdx.current !== idx) {
sectDragOverIdx.current = idx;
const arr = [...pendingSections];
const [moved] = arr.splice(sectDragIdx.current, 1);
arr.splice(idx, 0, moved);
sectDragIdx.current = idx;
setPendingSections(arr);
}
}}
onDragEnd={() => { sectDragIdx.current = null; sectDragOverIdx.current = null; }}
style={{
display: 'flex', alignItems: 'center', gap: 12,
padding: '11px 12px',
border: '1px solid var(--line)', borderRadius: 3,
background: s.visible ? 'var(--panel)' : '#f7f5f0',
cursor: 'grab', userSelect: 'none',
opacity: s.visible ? 1 : 0.55,
transition: 'opacity 120ms, background 120ms',
}}>
⠿
{s.visible ? pendingSections.filter((x, xi) => x.visible && xi <= idx).length : '—'}
{s.label}
setPendingSections(prev => prev.map((x, xi) => xi === idx ? { ...x, visible: !x.visible } : x))}
style={{ position: 'relative', width: 32, height: 18, borderRadius: 9, cursor: 'pointer',
background: s.visible ? 'var(--accent)' : '#c8c5bc', transition: 'background 150ms', flexShrink: 0 }}>
))}
{pendingSections.filter(s => s.visible).length} sections จะแสดงบน Lost Analysis · บันทึกแยกตาม user
);
};
const PipelineDashboardView = ({ userId, stageFilter }) => {
const [summary, setSummary] = useState(null);
const [opportunities, setOpps] = useState([]);
const [loading, setLoading] = useState(true);
const [oppsTotal, setOppsTotal] = useState(0);
const [uploading, setUploading] = useState(false);
const [uploadMsg, setUploadMsg] = useState(null);
const [showAllOpps, setShowAllOpps] = useState(false);
const fileRef = useRef(null);
// Group drill-down state
const [groupData, setGroupData] = useState([]);
const [selectedGroup, setSelectedGroup] = useState(null); // group_name string
const [selectedProduct, setSelectedProduct] = useState(null); // product_name string
const [groupDeals, setGroupDeals] = useState([]);
const [groupDealsTotal, setGroupDealsTotal] = useState(0);
const [loadingDeals, setLoadingDeals] = useState(false);
const [groupMetric, setGroupMetric] = useState('pipeline'); // 'pipeline'|'weighted'|'deals'
const [dealsStageFilter, setDealsStageFilter] = useState(null); // null = all stages
const [dealsSort, setDealsSort] = useState({ col: 'deal_value', dir: 'desc' });
// Customize layout
const plLayoutKey = `pipeline_layout_${userId || 'default'}`;
const [plSections, setPlSections] = useState(() => {
try {
const saved = localStorage.getItem(`pipeline_layout_${userId || 'default'}`);
if (saved) {
let parsed = JSON.parse(saved);
// Migrate: collapse old 'trend' + 'opps' into 'trend_opps'
const hasTrend = parsed.some(s => s.id === 'trend');
const hasOpps = parsed.some(s => s.id === 'opps');
if (hasTrend || hasOpps) {
const trendVisible = parsed.find(s => s.id === 'trend')?.visible !== false;
const oppsVisible = parsed.find(s => s.id === 'opps')?.visible !== false;
// Insert trend_opps where 'trend' was (or at end), remove both old entries
const idx = parsed.findIndex(s => s.id === 'trend');
const merged = { id: 'trend_opps', label: 'Trend by Segment & Top Opportunities', visible: trendVisible || oppsVisible };
parsed = parsed.filter(s => s.id !== 'trend' && s.id !== 'opps');
if (idx >= 0) parsed.splice(idx, 0, merged);
else parsed.push(merged);
}
const savedIds = new Set(parsed.map(s => s.id));
const newSects = DEFAULT_PIPELINE_SECTIONS.filter(s => !savedIds.has(s.id));
return [...parsed, ...newSects];
}
} catch {}
return DEFAULT_PIPELINE_SECTIONS;
});
const [pendingPlSections, setPendingPlSections] = useState(DEFAULT_PIPELINE_SECTIONS);
const [showPlCustomize, setShowPlCustomize] = useState(false);
const plDragIdx = useRef(null);
const plDragOverIdx = useRef(null);
const plVisible = (id) => plSections.find(s => s.id === id)?.visible !== false;
// Created trend data
const [createdTrend, setCreatedTrend] = useState(null);
useEffect(() => {
const sp = stageFilter ? `?stage=${encodeURIComponent(stageFilter)}` : '';
authFetch(`/api/pipeline/created-trend${sp}`)
.then(r => r.json())
.then(d => setCreatedTrend(d))
.catch(() => {});
}, [stageFilter]);
// Use group_color from API (Settings groups), fall back to palette if missing
const groupColorMap = useMemo(() => {
const m = {};
groupData.forEach((g, i) => {
m[g.group_name] = g.group_color || PIPELINE_GROUP_PALETTE[i % PIPELINE_GROUP_PALETTE.length];
});
return m;
}, [groupData]);
const loadData = async () => {
setLoading(true);
const sp = stageFilter ? `stage=${encodeURIComponent(stageFilter)}` : '';
const sep = sp ? '&' : '';
try {
const [summRes, oppsRes, groupsRes] = await Promise.all([
authFetch(`/api/pipeline${sp ? '?' + sp : ''}`).then(r => r.json()),
authFetch(`/api/pipeline/opportunities?limit=8${sp ? sep + sp : ''}`).then(r => r.json()),
authFetch(`/api/pipeline/groups${sp ? '?' + sp : ''}`).then(r => r.json()),
]);
setSummary(summRes);
setOpps(oppsRes.deals || []);
setOppsTotal(oppsRes.total || 0);
setGroupData(Array.isArray(groupsRes) ? groupsRes : []);
} catch (e) {
console.error('Pipeline load error:', e);
} finally {
setLoading(false);
}
};
useEffect(() => { loadData(); }, [stageFilter]);
// Fetch deals when product selected (or stage filter changes)
useEffect(() => {
if (!selectedProduct || !selectedGroup) { setGroupDeals([]); setGroupDealsTotal(0); return; }
setDealsStageFilter(null);
setDealsSort({ col: 'deal_value', dir: 'desc' });
setLoadingDeals(true);
const params = new URLSearchParams({ group: selectedGroup, product: selectedProduct, limit: 50, sort: 'deal_value' });
if (stageFilter) params.set('stage', stageFilter);
authFetch(`/api/pipeline/opportunities?${params}`)
.then(r => r.json())
.then(d => { setGroupDeals(d.deals || []); setGroupDealsTotal(d.total || 0); })
.catch(() => { setGroupDeals([]); setGroupDealsTotal(0); })
.finally(() => setLoadingDeals(false));
}, [selectedGroup, selectedProduct, stageFilter]);
const handleUpload = async (file) => {
if (!file) return;
setUploading(true);
setUploadMsg(null);
const fd = new FormData();
fd.append('file', file);
try {
const r = await authFetch('/api/pipeline/upload', { method: 'POST', body: fd });
const data = await r.json();
if (!r.ok) throw new Error(data.error || 'Upload failed');
setUploadMsg({ ok: true, text: `นำเข้า ${data.inserted} deals สำเร็จ (ข้าม ${data.skipped} แถว)` });
await loadData();
} catch (e) {
setUploadMsg({ ok: false, text: e.message });
} finally {
setUploading(false);
if (fileRef.current) fileRef.current.value = '';
}
};
const kpi = summary?.kpi || {};
const stages = summary?.stages || [];
const heatmap = summary?.heatmap || { rows: [], departments: [], groups: [], divisions: [] };
const forecast = summary?.forecast || [];
// Compute max deal_value for funnel scaling
const maxFunnelVal = Math.max(...stages.map(s => parseFloat(s.total_value) || 0), 1);
const maxStageCount = Math.max(...stages.map(s => parseInt(s.deal_count) || 0), 1);
// Heatmap division filter + sort state
const [heatmapDivision, setHeatmapDivision] = React.useState(null);
const [heatSort, setHeatSort] = React.useState({ col: null, dir: 'desc' }); // col: null=default, 'vertical', 'total', or group name
const toggleHeatSort = (col) => setHeatSort(prev =>
prev.col === col ? { col, dir: prev.dir === 'desc' ? 'asc' : 'desc' } : { col, dir: 'desc' }
);
// Heat intensity: filtered rows, max weighted value across all cells
const heatFilteredRows = heatmapDivision
? heatmap.rows.filter(r => r.division === heatmapDivision)
: heatmap.rows;
const heatValues = heatFilteredRows.map(r => parseFloat(r.value) || 0);
const maxHeat = Math.max(...heatValues, 1);
// Forecast chart
const maxForecast = Math.max(...forecast.map(f => Math.max(f.forecast, f.closed_won)), 1);
const CHART_H = 110;
const StagePill = ({ stage }) => {
const style = STAGE_PILLS[stage] || { bg: '#f0eeea', color: '#4a4f5a' };
return (
{stage}
);
};
const cardStyle = { background:'var(--panel)', border:'1px solid var(--line)', borderRadius:10, padding:'18px 20px' };
if (loading) return (
กำลังโหลดข้อมูล pipeline…
);
const hasData = parseFloat(kpi.total_pipeline || 0) > 0 || stages.length > 0;
return (
{/* Page header */}
Pipeline Dashboard
Sales pipeline analysis · Active opportunities
{summary?.data_as_of && (() => {
const d = new Date(summary.data_as_of);
const label = d.toLocaleString('en', { day: 'numeric', month: 'short', year: 'numeric' });
return (
);
})()}
{uploadMsg && (
{uploadMsg.text}
)}
handleUpload(e.target.files[0])} />
{ setPendingPlSections([...plSections]); setShowPlCustomize(true); }}
style={{ display:'flex', alignItems:'center', gap:6, padding:'6px 12px', border:'1px solid var(--line)', borderRadius:6, fontSize:12, color:'var(--ink-2)', background:'var(--panel)', cursor:'pointer', fontFamily:'inherit' }}>
{/* Empty state */}
{!hasData && (
📋
ยังไม่มีข้อมูล Pipeline
กด "Load Excel" เพื่อนำเข้าไฟล์ pipeline deals
คอลัมน์ที่รองรับ (ชื่อยืดหยุ่น):
Deal Name · Account · Segment · Vertical · Product
Stage · Value (THB) · Probability % · Close Date · Owner
)}
{hasData && (() => {
const plBlocks = {
kpi: () => (
<>
{/* KPI Cards */}
{[
{ label:'Total Pipeline', value: fmtMillion(kpi.total_pipeline), sub:'active deals', badge: null },
{ label:'Weighted Forecast', value: fmtMillion(kpi.weighted_forecast), sub:'probability-weighted', badge: null },
{ label:'Win Rate', value: `${parseFloat(kpi.win_rate||0).toLocaleString('en-US',{minimumFractionDigits:1,maximumFractionDigits:1})}%`, sub:'Closed Won / total closed', badge: null },
{ label:'Avg Deal Size', value: fmtMillion(kpi.avg_deal_size), sub:'per opportunity', badge: null },
{ label:'Total Deals', value: parseInt(kpi.total_deals||0).toLocaleString('en-US'), sub:'active opportunities', badge: null },
].map(c => (
{c.label}
{c.value}
{c.sub}
))}
),
funnel: () => (
<>
{/* Stage Funnel + Forecast vs Target */}
{/* Stage Funnel */}
Stage Funnel
Pipeline by sales stage
{PIPELINE_STAGE_ORDER.map(stageName => {
const row = stages.find(s => {
const n = (s.stage || '').toLowerCase();
const sn = stageName.toLowerCase();
return n === sn || (sn === 'poc / demo' && (n === 'poc' || n === 'demo' || n === 'poc / demo'));
});
if (!row && stages.length > 0) return null;
const val = parseFloat(row?.total_value || 0);
const cnt = parseInt(row?.deal_count || 0);
const pct = maxFunnelVal > 0 ? (val / maxFunnelVal) * 100 : 0;
const color = PIPELINE_STAGE_COLORS[stageName] || '#888';
return (
{stageName}
0 ? 60 : 0 }}>
{val > 0 && {fmtMillion(val)} }
{cnt}
);
})}
{/* Any unlisted stages */}
{stages.filter(s => !PIPELINE_STAGE_ORDER.some(o => o.toLowerCase() === (s.stage||'').toLowerCase() || (s.stage||'').toLowerCase().startsWith('poc'))).map(row => (
{row.stage}
{fmtMillion(row.total_value)}
{row.deal_count}
))}
{/* Monthly Forecast */}
Monthly Forecast
Weighted forecast vs Closed Won (฿M)
{/* Legend */}
{[['#2d3a8c','Weighted Forecast'],['#1f7a4d','Closed Won']].map(([c,l]) => (
))}
{forecast.length === 0 ? (
ไม่มีข้อมูล close date
) : (
{[0, 0.33, 0.66, 1].map(t => (
{f.month.slice(5)}
{isNow && NOW }
);
})}
)}
{forecast.length > 0 && (() => {
const totalForecast = forecast.reduce((s, f) => s + f.forecast, 0);
const totalWon = forecast.reduce((s, f) => s + f.closed_won, 0);
return (
{[['Total Forecast', fmtMillion(totalForecast)], ['Closed Won', fmtMillion(totalWon)]].map(([label, val]) => (
))}
);
})()}
),
heatmap: () => (
<>
{/* Heatmap: Product Group × Department – full width */}
{/* Heatmap: Product Group × Department */}
Pipeline by Product Group × Vertical
Weighted (฿M)
{/* Division filter chips */}
{heatmap.divisions.length > 0 && (
setHeatmapDivision(null)}
style={{ padding:'3px 10px', borderRadius:12, fontSize:11, fontWeight:500, border:'1px solid', cursor:'pointer', fontFamily:'inherit',
background: heatmapDivision === null ? 'var(--accent)' : 'transparent',
color: heatmapDivision === null ? '#fff' : 'var(--ink-3)',
borderColor:heatmapDivision === null ? 'var(--accent)' : 'var(--line)' }}>
All
{heatmap.divisions.map(div => (
setHeatmapDivision(div === heatmapDivision ? null : div)}
style={{ padding:'3px 10px', borderRadius:12, fontSize:11, fontWeight:500, border:'1px solid', cursor:'pointer', fontFamily:'inherit',
background: heatmapDivision === div ? 'var(--accent)' : 'transparent',
color: heatmapDivision === div ? '#fff' : 'var(--ink-3)',
borderColor:heatmapDivision === div ? 'var(--accent)' : 'var(--line)' }}>
{div}
))}
)}
{heatmap.departments.length === 0 ? (
ไม่มีข้อมูล department
) : (() => {
// Build row data with totals for sorting
const heatRows = heatmap.departments
.map(dept => {
const deptRows = heatFilteredRows.filter(r => r.department === dept);
const rowTotal = deptRows.reduce((s, r) => s + parseFloat(r.value || 0), 0);
const groupVals = {};
heatmap.groups.forEach(grp => {
const cell = deptRows.find(r => r.group_name === grp);
groupVals[grp] = parseFloat(cell?.value || 0);
});
return { dept, rowTotal, groupVals };
})
.filter(r => r.rowTotal > 0);
// Sort rows
const sortedHeatRows = [...heatRows].sort((a, b) => {
let av, bv;
if (!heatSort.col || heatSort.col === 'total') {
av = a.rowTotal; bv = b.rowTotal;
} else if (heatSort.col === 'vertical') {
av = a.dept.toLowerCase(); bv = b.dept.toLowerCase();
return heatSort.dir === 'asc' ? av.localeCompare(bv) : bv.localeCompare(av);
} else {
av = a.groupVals[heatSort.col] || 0;
bv = b.groupVals[heatSort.col] || 0;
}
return heatSort.dir === 'desc' ? bv - av : av - bv;
});
const sortIcon = (col) => {
if (heatSort.col !== col) return
↕ ;
return
{heatSort.dir === 'desc' ? '▼' : '▲'} ;
};
const thBase = { padding:'6px 8px', fontSize:10.5, color:'var(--ink-3)', fontWeight:500, borderBottom:'1px solid var(--line)', background:'var(--bg)', whiteSpace:'nowrap', cursor:'pointer', userSelect:'none' };
return (
toggleHeatSort('vertical')}
style={{ ...thBase, textAlign:'left', minWidth:160 }}>
Vertical (Department){sortIcon('vertical')}
{heatmap.groups.map(g => (
toggleHeatSort(g)}
style={{ ...thBase, textAlign:'right' }}>
{g}{sortIcon(g)}
))}
toggleHeatSort('total')}
style={{ ...thBase, textAlign:'right', borderLeft:'1px solid var(--line-2)', color: heatSort.col === 'total' ? 'var(--accent)' : 'var(--ink-3)' }}>
Total{sortIcon('total')}
{sortedHeatRows.map(({ dept, rowTotal, groupVals }) => (
{dept}
{heatmap.groups.map(grp => {
const val = groupVals[grp] || 0;
const intensity = maxHeat > 0 ? val / maxHeat : 0;
const bg = `rgba(45,58,140,${(intensity * 0.5 + 0.05).toFixed(2)})`;
const textColor = intensity > 0.45 ? '#fff' : 'var(--ink)';
return (
{val > 0 ? (
{numFmt(val/1e6,0)}M
) : (
—
)}
);
})}
{numFmt(rowTotal/1e6,0)}M
))}
);
})()}
),
groups: () => (
<>
{/* ── Pipeline by Product Group ─────────────────────────── */}
{groupData.length > 0 && (() => {
const totalMetric = groupData.reduce((s, g) => s + (groupMetric === 'deals' ? g.deals : g[groupMetric]), 0) || 1;
const maxMetric = Math.max(...groupData.map(g => groupMetric === 'deals' ? g.deals : g[groupMetric]), 1);
const activeGroup = groupData.find(g => g.group_name === selectedGroup);
const activeProducts = activeGroup?.products || [];
const maxProductMetric = activeProducts.length
? Math.max(...activeProducts.map(p => groupMetric === 'deals' ? p.deals : p[groupMetric]), 1) : 1;
// Display name for selected product (look up from products list via product_key)
const selectedProductDisplay = activeProducts.find(p => p.product_key === selectedProduct)?.product_name || selectedProduct;
// Stage filter helpers
const stageCounts = groupDeals.reduce((acc, d) => { acc[d.stage] = (acc[d.stage]||0)+1; return acc; }, {});
const availableStages = PIPELINE_STAGE_ORDER.filter(s => stageCounts[s]);
const filteredDeals = (() => {
const base = dealsStageFilter ? groupDeals.filter(d => d.stage === dealsStageFilter) : groupDeals;
const { col, dir } = dealsSort;
return [...base].sort((a, b) => {
let av = a[col], bv = b[col];
if (col === 'deal_value' || col === 'probability') { av = parseFloat(av)||0; bv = parseFloat(bv)||0; }
else if (col === 'close_date') { av = av||''; bv = bv||''; }
else { av = (av||'').toString().toLowerCase(); bv = (bv||'').toString().toLowerCase(); }
if (av < bv) return dir === 'asc' ? -1 : 1;
if (av > bv) return dir === 'asc' ? 1 : -1;
return 0;
});
})();
const toggleSort = (col) => setDealsSort(prev =>
prev.col === col ? { col, dir: prev.dir === 'asc' ? 'desc' : 'asc' } : { col, dir: col === 'deal_value' || col === 'probability' ? 'desc' : 'asc' }
);
const sortIcon = (col) => {
if (dealsSort.col !== col) return
↕ ;
return
{dealsSort.dir === 'asc' ? '↑' : '↓'} ;
};
const MetricBtn = ({ id, label }) => (
setGroupMetric(id)}
style={{ padding:'4px 11px', fontSize:11.5, border:'1px solid var(--line)', borderRadius:5, background: groupMetric === id ? 'var(--ink)' : 'var(--panel)', color: groupMetric === id ? '#fff' : 'var(--ink-2)', cursor:'pointer', fontFamily:'inherit' }}>
{label}
);
const fmtMetric = (g) => {
if (groupMetric === 'deals') return `${g.deals} deals`;
if (groupMetric === 'weighted') return fmtMillion(g.weighted);
return fmtMillion(g.pipeline);
};
const metricVal = (g) => groupMetric === 'deals' ? g.deals : g[groupMetric];
const pillStyle = (stage) => {
const m = { Negotiation:{bg:'#fff3e3',c:'#c06010'}, Proposal:{bg:'#e8f0fb',c:'#2d3a8c'}, 'POC / Demo':{bg:'#f0fdf4',c:'#1f7a4d'}, Qualification:{bg:'#eaf0fd',c:'#3a5cb8'}, Prospecting:{bg:'#f4f4f8',c:'#6b6f78'}, 'Closed Won':{bg:'#e8f5ed',c:'#1f7a4d'}, 'Closed Lost':{bg:'#fdecea',c:'#b8492f'} };
return m[stage] || { bg:'#f0eeea', c:'var(--ink-3)' };
};
return (
{/* Header */}
Pipeline by Product Group
คลิก Group → Product เพื่อดูรายการ deals
{/* 3-column drill-down */}
{/* Col 1: Groups */}
Product Groups
{groupData.map(g => {
const pct = (metricVal(g) / maxMetric * 100).toFixed(0);
const share = (metricVal(g) / totalMetric * 100).toFixed(1);
const color = groupColorMap[g.group_name] || '#888';
const isSel = g.group_name === selectedGroup;
return (
{ if (isSel) { setSelectedGroup(null); setSelectedProduct(null); } else { setSelectedGroup(g.group_name); setSelectedProduct(null); } }}
style={{ display:'flex', alignItems:'center', gap:9, padding:'9px 12px', cursor:'pointer', background: isSel ? '#f0f2fa' : 'transparent', borderLeft: isSel ? `3px solid ${color}` : '3px solid transparent', marginLeft:0, transition:'background 120ms' }}
onMouseEnter={e => !isSel && (e.currentTarget.style.background='var(--bg)')}
onMouseLeave={e => !isSel && (e.currentTarget.style.background='transparent')}>
{g.group_name}
{fmtMetric(g)}
{share}% of total
{isSel &&
› }
);
})}
{/* Col 2: Products */}
{activeGroup ? (
<>
{activeGroup.group_name}
· {activeGroup.products.length} products
) : (
← เลือก Group
)}
{activeProducts.map(p => {
const pct = (metricVal(p) / maxProductMetric * 100).toFixed(0);
const color = groupColorMap[selectedGroup] || '#888';
const isSel = (p.product_key || p.product_name) === selectedProduct;
const fmtP = groupMetric === 'deals' ? `${p.deals}` : fmtMillion(groupMetric === 'weighted' ? p.weighted : p.pipeline);
return (
{ if (isSel) setSelectedProduct(null); else setSelectedProduct(p.product_key || p.product_name); }}
style={{ display:'flex', alignItems:'center', gap:9, padding:'9px 16px', cursor:'pointer', background: isSel ? '#f0f2fa' : 'transparent', borderLeft: isSel ? `3px solid ${color}` : '3px solid transparent', transition:'background 120ms' }}
onMouseEnter={e => !isSel && (e.currentTarget.style.background='var(--bg)')}
onMouseLeave={e => !isSel && (e.currentTarget.style.background='transparent')}>
{p.product_name}
{fmtP}
{p.deals} deals
{isSel &&
› }
);
})}
{!activeGroup && (
เลือก Group ด้านซ้ายเพื่อดู Products
)}
{/* Col 3: Deals */}
{/* Title row */}
{selectedProduct ? (
<>
{selectedProductDisplay}
· {dealsStageFilter ? `${filteredDeals.length} / ${groupDealsTotal}` : groupDealsTotal} deals
{loadingDeals &&
กำลังโหลด… }
) : (
← เลือก Product
)}
{/* Stage filter chips */}
{availableStages.length > 0 && (
setDealsStageFilter(null)}
style={{ padding:'2px 8px', fontSize:10.5, borderRadius:10, border:'1px solid var(--line)', cursor:'pointer',
background: !dealsStageFilter ? 'var(--accent)' : 'transparent',
color: !dealsStageFilter ? '#fff' : 'var(--ink-3)', fontWeight: !dealsStageFilter ? 600 : 400 }}>
All
{availableStages.map(s => {
const ps = pillStyle(s);
const cnt = stageCounts[s] || 0;
const sel = dealsStageFilter === s;
return (
setDealsStageFilter(sel ? null : s)}
style={{ padding:'2px 8px', fontSize:10.5, borderRadius:10, cursor:'pointer',
border: `1px solid ${sel ? ps.c : 'var(--line)'}`,
background: sel ? ps.bg : 'transparent',
color: sel ? ps.c : 'var(--ink-3)',
fontWeight: sel ? 600 : 400 }}>
{s} {cnt}
);
})}
)}
{filteredDeals.length > 0 ? (
{[
{ label:'Account', col:'account_name', align:'left' },
{ label:'Stage', col:'stage', align:'left' },
{ label:'Value', col:'deal_value', align:'right' },
{ label:'Prob.', col:'probability', align:'right' },
{ label:'Close', col:'close_date', align:'right' },
].map(({ label, col, align }) => (
toggleSort(col)}
style={{ fontSize:10.5, color: dealsSort.col===col ? 'var(--accent)' : 'var(--ink-3)', fontWeight:500, textTransform:'uppercase', letterSpacing:'.05em', padding:'7px 10px', textAlign:align, cursor:'pointer', userSelect:'none', whiteSpace:'nowrap' }}>
{label}{sortIcon(col)}
))}
{filteredDeals.map((deal, idx) => {
const ps = pillStyle(deal.stage);
return (
e.currentTarget.style.background='var(--bg)'}
onMouseLeave={e => e.currentTarget.style.background='transparent'}>
{deal.account_name || deal.deal_name || '—'}
{deal.segment && {deal.segment}
}
{deal.product && {deal.product}
}
{deal.stage || '—'}
{fmtMillion(deal.deal_value)}
= 70 ? 'var(--positive)' : 'var(--ink-2)' }}>{deal.probability}%
{deal.close_date ? deal.close_date.slice(0,7) : '—'}
);
})}
{dealsStageFilter ? `${dealsStageFilter} · ` : ''}{filteredDeals.length} deals
{fmtMillion(filteredDeals.reduce((s, d) => s + parseFloat(d.deal_value || 0), 0))}
{filteredDeals.length ? Math.round(filteredDeals.reduce((s, d) => s + (d.probability || 0), 0) / filteredDeals.length) : 0}%
) : selectedProduct && !loadingDeals ? (
ไม่มีข้อมูล deals{dealsStageFilter ? ` ใน ${dealsStageFilter}` : ''}
) : !selectedProduct ? (
เลือก Product ด้านซ้ายเพื่อดู Deals
) : null}
{/* Share bar */}
Group share:
{groupData.map(g => (
setSelectedGroup(g.group_name === selectedGroup ? null : g.group_name)}
title={`${g.group_name}: ${numFmt(metricVal(g)/totalMetric*100)}%`}
style={{ flex: metricVal(g), background: groupColorMap[g.group_name], transition:'flex .4s', cursor:'pointer', opacity: selectedGroup && g.group_name !== selectedGroup ? 0.4 : 1 }} />
))}
{groupData.map(g => (
{g.group_name}
{numFmt(metricVal(g)/totalMetric*100)}%
))}
);
})()}
),
trend_opps: () => {
const TREND_COLORS = [
'#2d3a8c','#d97b2e','#1f7a4d','#9b59b6','#e74c3c',
'#16a085','#f39c12','#2980b9','#8e44ad','#c0392b',
'#27ae60','#d35400',
];
const { labels, series: trendSeries } = createdTrend || {};
const chartSeries = (trendSeries || []).map(s => ({
label: `${s.segment} (${numFmt(s.total, 0)})`,
data: s.data,
}));
const rangeLabel = labels && labels.length >= 2 ? `${labels[0]} – ${labels[labels.length - 1]}` : 'Last 12 months';
return (
{/* Left: Created Trend */}
{!createdTrend ? (
กำลังโหลด…
) : (
v >= 1000 ? `${numFmt(v/1000)}K` : String(Math.round(v))}
/>
)}
{/* Right: Top Opportunities */}
Top Opportunities
Ranked by weighted deal value
{opportunities.length === 0 ? (
ไม่มีข้อมูล opportunities
) : (
<>
{['Account','Stage','Value','Prob.'].map(h => (
{h}
))}
{opportunities.slice(0, showAllOpps ? undefined : 8).map((deal, idx) => (
e.currentTarget.style.background = 'var(--bg)'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{deal.account_name || deal.deal_name || '—'}
{deal.product && {deal.product}
}
{deal.segment && {deal.segment}
}
{fmtMillion(deal.deal_value)}
= 70 ? 'var(--positive)' : 'var(--ink-2)' }}>{deal.probability}%
))}
แสดง {Math.min(showAllOpps ? opportunities.length : 8, opportunities.length)} จาก {oppsTotal}
{opportunities.length > 8 && (
setShowAllOpps(s => !s)} style={{ fontSize:12, color:'var(--accent)', background:'none', border:'none', cursor:'pointer', fontWeight:500, fontFamily:'inherit' }}>
{showAllOpps ? 'ย่อลง' : `ดูทั้งหมด →`}
)}
)}
);
},
};
return (
<>
{plSections.filter(s => s.visible).map(s =>
plBlocks[s.id] ?
{plBlocks[s.id]()} : null
)}
);
})()}
{/* ── Pipeline Customize Modal ─────────────────────────── */}
setShowPlCustomize(false)}
title="Customize Pipeline layout"
subtitle="ลาก ⠿ เพื่อเรียงลำดับ · toggle เพื่อแสดง/ซ่อน section"
width={480}
footer={<>
setShowPlCustomize(false)} style={{ padding:'8px 14px', border:'1px solid var(--line)', fontSize:12, borderRadius:3, fontFamily:'inherit', cursor:'pointer' }}>Cancel
{
const next = [...pendingPlSections];
setPlSections(next);
try { localStorage.setItem(plLayoutKey, JSON.stringify(next)); } catch {}
setShowPlCustomize(false);
}} style={{ padding:'8px 14px', background:'var(--ink)', color:'#fff', fontSize:12, fontWeight:500, borderRadius:3, fontFamily:'inherit', cursor:'pointer' }}>Apply
}>
{pendingPlSections.map((s, idx) => (
{ plDragIdx.current = idx; }}
onDragOver={e => {
e.preventDefault();
if (plDragOverIdx.current !== idx) {
plDragOverIdx.current = idx;
const arr = [...pendingPlSections];
const [moved] = arr.splice(plDragIdx.current, 1);
arr.splice(idx, 0, moved);
plDragIdx.current = idx;
setPendingPlSections(arr);
}
}}
onDragEnd={() => { plDragIdx.current = null; plDragOverIdx.current = null; }}
style={{
display:'flex', alignItems:'center', gap:12,
padding:'11px 12px',
border:'1px solid var(--line)', borderRadius:3,
background: s.visible ? 'var(--panel)' : '#f7f5f0',
cursor:'grab', userSelect:'none',
opacity: s.visible ? 1 : 0.55,
transition:'opacity 120ms, background 120ms',
}}>
⠿
{s.visible ? pendingPlSections.filter((x, xi) => x.visible && xi <= idx).length : '—'}
{s.label}
setPendingPlSections(prev => prev.map((x, xi) => xi === idx ? { ...x, visible: !x.visible } : x))}
style={{ position:'relative', width:32, height:18, borderRadius:9, cursor:'pointer',
background: s.visible ? 'var(--accent)' : '#c8c5bc', transition:'background 150ms', flexShrink:0 }}>
))}
{pendingPlSections.filter(s => s.visible).length} sections จะแสดงบน Pipeline Dashboard
);
};
const App = () => {
const [authUser, setAuthUser] = useState(null); // null = not checked yet
const [authReady, setAuthReady] = useState(false); // whether auth check is done
const [showChangePw, setShowChangePw] = useState(false);
// Check existing token on mount
useEffect(() => {
window.API?.me().then(user => {
setAuthUser(user);
setAuthReady(true);
}).catch(() => setAuthReady(true));
const onLogout = () => setAuthUser(null);
window.addEventListener('auth:logout', onLogout);
return () => window.removeEventListener('auth:logout', onLogout);
}, []);
if (!authReady) {
return (
);
}
if (!authUser) return
setAuthUser(user)} />;
return { window.API.logout(); setAuthUser(null); }} onChangePw={() => setShowChangePw(true)}
showChangePw={showChangePw} onCloseChangePw={() => setShowChangePw(false)} />;
};
const AppShell = ({ authUser, onLogout, onChangePw, showChangePw, onCloseChangePw }) => {
const [view, setView] = useState('overview');
const [drill, setDrill] = useState(null); // group id or null
const [productSel, setProductSel] = useState(null);
const [period, setPeriod] = useState('YTD');
const [compare, setCompare] = useState(true);
const [sidebarMode, setSidebarMode] = useState(() => localStorage.getItem('sidebarMode') || 'expanded');
// Persist sidebar mode
useEffect(() => { localStorage.setItem('sidebarMode', sidebarMode); }, [sidebarMode]);
// Live data from API
const [liveGroups, setLiveGroups] = useState(GROUPS);
const [liveAccounts, setLiveAccounts] = useState([]);
const [liveAlerts, setLiveAlerts] = useState(ALERTS);
const [drillProducts, setDrillProducts] = useState([]);
const [dataLoading, setDataLoading] = useState(false);
const [lastRefresh, setLastRefresh] = useState(null);
const loadLiveData = async (p = period) => {
if (!window.API) return;
setDataLoading(true);
try {
const [groupsRes, accountsRes, alertsRes] = await Promise.allSettled([
window.API.getGroups(p),
window.API.getAccounts(p),
window.API.getAlerts(),
]);
const groups = groupsRes.status === 'fulfilled' ? groupsRes.value : [];
const accounts = accountsRes.status === 'fulfilled' ? accountsRes.value : [];
const alerts = alertsRes.status === 'fulfilled' ? alertsRes.value : [];
if (accountsRes.status === 'rejected') console.warn('getAccounts failed:', accountsRes.reason);
const resolvedGroups = groups.length > 0 ? groups : GROUPS;
resolvedGroups.forEach(g => {
if (g.color) GROUP_COLORS[g.id] = g.color;
if (g.name) GROUP_NAMES[g.id] = g.name;
});
setLiveGroups(resolvedGroups);
setLiveAccounts(accounts);
setLiveAlerts(alerts.length > 0 ? alerts : ALERTS);
setLastRefresh(new Date());
} catch (e) {
console.error('loadLiveData failed:', e);
} finally {
setDataLoading(false);
}
};
useEffect(() => { loadLiveData(); }, []);
useEffect(() => { loadLiveData(period); }, [period]);
// Load real products from DB when drilling into a group
useEffect(() => {
if (!drill) { setDrillProducts([]); return; }
window.API?.getGroupDetail(drill, period).then(products => {
setDrillProducts(products || []);
}).catch(() => setDrillProducts([]));
}, [drill, period]);
const currentGroup = drill ? liveGroups.find(g => g.id === drill) : null;
const currentGroupWithProducts = currentGroup
? { ...currentGroup, products: drillProducts.length > 0 ? drillProducts : (currentGroup.products || []) }
: null;
const currentProduct = currentGroupWithProducts && productSel
? currentGroupWithProducts.products.find(p => p.id === productSel)
: null;
const isPipelineView = ['pipeline', 'lost-analysis'].includes(view);
const isSettings = !['overview', 'pipeline', 'lost-analysis'].includes(view);
const crumbs = view === 'pipeline'
? ['Pipeline', 'Dashboard']
: view === 'lost-analysis'
? ['Pipeline', 'Lost Analysis']
: isSettings
? ['Settings', view === 'upload' ? 'Upload file' : view === 'group-setting' ? 'Group setting' : view === 'product-setting' ? 'Product setting' : view === 'target-setting' ? 'Target setting' : 'User setting']
: drill
? ['Revenue', 'Product Groups', currentGroup?.name ?? '…']
: ['Revenue', 'Product Groups'];
const SETTINGS_VIEWS = ['upload', 'group-setting', 'product-setting', 'target-setting', 'user-setting'];
const handleNavigate = (v) => {
if (SETTINGS_VIEWS.includes(v) && authUser?.role === 'viewer') return;
if (v === 'pipeline') { setDrill(null); setProductSel(null); setView('pipeline'); return; }
if (v === 'lost-analysis') { setDrill(null); setProductSel(null); setView('lost-analysis'); return; }
setView(v);
setDrill(null);
setProductSel(null);
};
const [pipelineStage, setPipelineStage] = useState(null);
const [showAllAccounts, setShowAllAccounts] = useState(false);
const [showAddKPI, setShowAddKPI] = useState(false);
const [showCustomize, setShowCustomize] = useState(false);
const kpiStorageKey = `kpi_items_${authUser?.id || 'default'}`;
const [kpiItems, setKpiItems] = useState(() => {
try {
const saved = localStorage.getItem(`kpi_items_${authUser?.id || 'default'}`);
if (saved) {
const parsed = JSON.parse(saved);
// Merge: append any new KPI ids added since last save
const savedIds = new Set(parsed.map(k => k.id));
const newItems = KPI_ITEMS_DEFAULT.filter(k => !savedIds.has(k.id));
return [...parsed, ...newItems];
}
} catch {}
return KPI_ITEMS_DEFAULT;
});
const [pendingKPIItems, setPendingKPIItems] = useState(kpiItems);
const kpiDragIdx = useRef(null);
const kpiDragOverIdx = useRef(null);
const layoutStorageKey = `layout_sections_${authUser?.id || 'default'}`;
const [sections, setSections] = useState(() => {
try {
const saved = localStorage.getItem(`layout_sections_${authUser?.id || 'default'}`);
if (saved) {
const parsed = JSON.parse(saved);
// Merge with DEFAULT_SECTIONS to pick up any new sections added in future updates
const savedIds = new Set(parsed.map(s => s.id));
const newSections = DEFAULT_SECTIONS.filter(s => !savedIds.has(s.id));
return [...parsed, ...newSections];
}
} catch {}
return DEFAULT_SECTIONS;
});
const [pendingSections, setPendingSections] = useState(DEFAULT_SECTIONS);
const dragIdx = useRef(null);
const dragOverIdx = useRef(null);
const handleSearchSelect = (r) => {
if (r.kind === 'Group' && r.groupId) {
setView('overview');
setDrill(r.groupId);
showToast(`Opened group: ${r.label}`, { variant: 'info' });
} else if (r.kind === 'Product' && r.groupId) {
setView('overview');
setDrill(r.groupId);
showToast(`Opened product: ${r.label}`, { variant: 'info' });
} else if (r.kind === 'Account') {
setShowAllAccounts(true);
showToast(`Showing account: ${r.label}`, { variant: 'info' });
}
};
const handleExport = (kind) => {
// ── PDF via browser print dialog ──────────────────────────────
if (kind === 'pdf') {
const styleId = '__print_style';
let el = document.getElementById(styleId);
if (!el) {
el = document.createElement('style');
el.id = styleId;
document.head.appendChild(el);
}
el.textContent = `
@media print {
aside { display: none !important; }
body { overflow: visible !important; background: #fff !important; }
* { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
}
`;
const cleanup = () => { el.textContent = ''; window.removeEventListener('afterprint', cleanup); };
window.addEventListener('afterprint', cleanup);
showToast('กำลังเปิดหน้าต่าง Print', { variant: 'info', detail: 'เลือก "Save as PDF" ใน print dialog เพื่อบันทึก PDF' });
setTimeout(() => window.print(), 200);
return;
}
// ── CSV / XLSX download ────────────────────────────────────────
const downloadCSV = (headers, rows, filename) => {
const csv = '' + [headers, ...rows]
.map(r => r.map(c => `"${String(c ?? '').replace(/"/g, '""')}"`).join(','))
.join('\n');
const blob = new Blob([csv], { type: 'text/csv;charset=utf-8' });
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.style.display = 'none';
a.href = url;
a.download = `${filename}.csv`;
document.body.appendChild(a);
a.click();
setTimeout(() => { document.body.removeChild(a); URL.revokeObjectURL(url); }, 300);
showToast(`Exported ${filename}.csv`, { variant: 'success', detail: `${rows.length} rows` });
};
// Pipeline CSV export
if (view === 'lost-analysis') {
showToast('กำลังดึงข้อมูล…', { variant: 'info' });
// recentFilter is set inside LostAnalysisView; read from a shared ref or
// simply pass no status filter and export everything (all lost deals).
// We expose the current filter via window.__lostFilter set by LostAnalysisView.
const statusParam = window.__lostFilter && window.__lostFilter !== 'all'
? `?status=${window.__lostFilter}` : '';
authFetch(`/api/pipeline/lost/export${statusParam}`)
.then(r => r.json())
.then(data => {
const deals = data.deals || [];
if (!deals.length) { showToast('ไม่มีข้อมูลที่จะ export', { variant: 'info' }); return; }
const headers = ['Account','Deal Name','Product','Segment','Department',
'Deal Value (THB)','Status','Close Date','Created Date','Cycle (Days)','Owner'];
const rows = deals.map(d => [
d.account_name || '',
d.deal_name || '',
d.product || '',
d.segment || '',
d.department || '',
d.deal_value || 0,
d.opportunity_status || '',
d.close_date ? d.close_date.slice(0,10) : '',
d.created_date ? d.created_date.slice(0,10) : '',
d.cycle_days != null ? d.cycle_days : '',
d.owner || '',
]);
const suffix = window.__lostFilter && window.__lostFilter !== 'all'
? `_${window.__lostFilter}` : '';
downloadCSV(headers, rows, `lost_deals${suffix}_${new Date().toISOString().slice(0,10)}`);
showToast(`Exported ${rows.length} lost deals`, { variant: 'success' });
})
.catch(() => showToast('Export ไม่สำเร็จ', { variant: 'error' }));
return;
}
if (view === 'pipeline') {
showToast('กำลังดึงข้อมูล…', { variant: 'info' });
const sp = pipelineStage ? `&stage=${encodeURIComponent(pipelineStage)}` : '';
authFetch(`/api/pipeline/opportunities?limit=9999${sp}`)
.then(r => r.json())
.then(data => {
const deals = data.deals || [];
if (!deals.length) { showToast('ไม่มีข้อมูลที่จะ export', { variant: 'info' }); return; }
const headers = ['Deal Name','Account','Segment','Vertical','Product','Product Group','Stage','Deal Value (THB)','Probability %','Weighted Value (THB)','Close Date','Owner'];
const rows = deals.map(d => [
d.deal_name || '',
d.account_name || '',
d.segment || '',
d.vertical || '',
d.product || '',
d.settings_group || d.product_group || '',
d.stage || '',
d.deal_value || 0,
d.probability || 0,
d.weighted_value || 0,
d.close_date || '',
d.owner || '',
]);
const stageSuffix = pipelineStage ? `_${pipelineStage.replace(/[^a-z0-9]/gi,'_')}` : '';
downloadCSV(headers, rows, `pipeline_deals${stageSuffix}_${new Date().toISOString().slice(0,10)}`);
})
.catch(() => showToast('Export ไม่สำเร็จ', { variant: 'error' }));
return;
}
// Settings views — no tabular data
if (!['overview'].includes(view)) {
showToast('No data to export', { variant: 'info', detail: 'Export is available from the Overview page' });
return;
}
// Product detail drill-down
if (drill && productSel && currentProduct) {
const headers = ['Product', 'Group', 'Revenue', 'MoM %', 'YoY %', 'Customers', 'ARPU'];
const rows = [[
currentProduct.name || currentProduct.id,
currentGroup?.name || drill,
currentProduct.revenue ?? '',
currentProduct.growth ?? '',
currentProduct.yoy ?? '',
currentProduct.customers ?? '',
currentProduct.arpu ?? '',
]];
downloadCSV(headers, rows, `product_${(currentProduct.name || productSel).replace(/\s+/g,'_').toLowerCase()}`);
return;
}
// Group drill-down — products of this group
if (drill && currentGroupWithProducts) {
const products = currentGroupWithProducts.products || [];
const headers = ['Product', 'SKU', 'Revenue', 'MoM %', 'YoY %', 'Customers', 'ARPU', 'Margin %'];
const rows = products.length > 0
? products.map(p => [
p.name || p.id,
p.sku || '',
p.revenue ?? '',
p.growth ?? '',
p.yoy ?? '',
p.customers ?? '',
p.arpu ?? '',
p.margin ?? '',
])
: [['No product data available', '', '', '', '', '', '', '']];
const gName = (currentGroup?.name || drill).replace(/\s+/g,'_').toLowerCase();
downloadCSV(headers, rows, `products_${gName}_${period.toLowerCase()}`);
return;
}
// Overview — all groups summary
const headers = ['Product Group', 'Revenue', 'MoM %', 'YoY %', 'Target', 'Pacing %', 'Customers', 'ARPU'];
const rows = liveGroups.map(g => [
g.name,
g.revenue ?? '',
g.growth ?? '',
g.yoy ?? '',
g.target ?? '',
(g.target > 0 && g.revenue != null) ? ((g.revenue / g.target) * 100).toFixed(1) : '',
g.customers ?? '',
g.arpu ?? '',
]);
downloadCSV(headers, rows, `revenue_overview_${period.toLowerCase()}`);
};
useEffect(() => {
const onKey = (e) => {
if (e.key === 'Escape') {
if (productSel) setProductSel(null);
else if (drill) setDrill(null);
}
};
window.addEventListener('keydown', onKey);
return () => window.removeEventListener('keydown', onKey);
}, [drill, productSel]);
const isMobile = useIsMobile();
const [mobileNavOpen, setMobileNavOpen] = useState(false);
return (
{showChangePw &&
}
{ handleNavigate(v); setMobileNavOpen(false); }} sidebarMode={sidebarMode} setSidebarMode={setSidebarMode} authUser={authUser} onLogout={onLogout} onChangePw={onChangePw} mobileOpen={mobileNavOpen} onMobileClose={() => setMobileNavOpen(false)} />
{
if (isSettings && i === 0) return;
if (i === 0 || i === 1) { setDrill(null); setProductSel(null); }
}}
period={period} setPeriod={setPeriod}
compare={compare} setCompare={setCompare}
onSearchSelect={handleSearchSelect}
onExport={handleExport}
isPipeline={isPipelineView}
pipelineStage={pipelineStage}
setPipelineStage={setPipelineStage}
onHamburger={() => setMobileNavOpen(true)}
/>
{view === 'pipeline' &&
Revenue overview
{period === 'MTD' ? 'May 2026 month-to-date' : period === 'QTD' ? 'Q2 2026 quarter-to-date' : period === 'YTD' ? 'Year 2026, Jan–May' : 'Trailing 12 months'} · {dataLoading ? 'กำลังโหลด…' : lastRefresh ? `refreshed ${lastRefresh.toLocaleTimeString('th-TH', {hour:'2-digit',minute:'2-digit'})}` : 'synthetic data'}
{(() => {
const iso = (window.__trendMonths || []).slice(-1)[0];
if (!iso) return null;
const label = new Date(iso + '-02').toLocaleString('en', { month: 'short', year: 'numeric' });
return (
);
})()}
{!isMobile &&
{ setPendingKPIItems([...kpiItems]); setShowAddKPI(true); }} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, color: 'var(--ink-2)', background: 'var(--panel)' }}>
{ setPendingSections([...sections]); setShowCustomize(true); }} style={{ display: 'flex', alignItems: 'center', gap: 6, padding: '6px 12px', border: '1px solid var(--line)', borderRadius: 3, fontSize: 12, color: 'var(--ink-2)', background: 'var(--panel)' }}>
}
setDrill(id)} period={period} compare={compare} onViewAllAccounts={() => setShowAllAccounts(true)} accounts={liveAccounts} alerts={liveAlerts} sections={sections} kpiItems={kpiItems} />
)}
{view === 'overview' && drill && (
<>
{ setDrill(null); setProductSel(null); }} style={{ display: 'flex', alignItems: 'center', gap: 6, fontSize: 12, color: 'var(--ink-2)' }}>
{liveGroups.map(g => (
{ setDrill(g.id); setProductSel(null); }}
style={{
padding: '5px 10px',
fontSize: 11.5,
borderRadius: 3,
background: drill === g.id ? GROUP_COLORS[g.id] : 'transparent',
color: drill === g.id ? '#fff' : 'var(--ink-2)',
border: '1px solid ' + (drill === g.id ? GROUP_COLORS[g.id] : 'var(--line)'),
fontWeight: drill === g.id ? 500 : 400,
}}>
{g.name}
))}
setDrill(null)}
onProductClick={(id) => setProductSel(id === productSel ? null : id)}
selectedProduct={productSel}
/>
)}
{currentProduct && setProductSel(null)} period={period} />}
{/* Add KPI modal */}
setShowAddKPI(false)}
title="Add KPI to dashboard"
subtitle="ลาก ⠿ เพื่อเรียงลำดับ · toggle เพื่อแสดง/ซ่อน · สูงสุด 4 ตัว"
width={480}
footer={<>
setShowAddKPI(false)} style={{ padding: '8px 14px', border: '1px solid var(--line)', fontSize: 12, borderRadius: 3 }}>Cancel
{
const next = [...pendingKPIItems];
setKpiItems(next);
try { localStorage.setItem(kpiStorageKey, JSON.stringify(next)); } catch {}
setShowAddKPI(false);
showToast('KPI saved', { variant: 'success' });
}}
disabled={pendingKPIItems.filter(k => k.visible).length === 0}
style={{ padding: '8px 14px', background: 'var(--ink)', color: '#fff', fontSize: 12, fontWeight: 500, borderRadius: 3, opacity: pendingKPIItems.filter(k => k.visible).length === 0 ? 0.4 : 1 }}>
Save
}>
{pendingKPIItems.map((k, idx) => {
const selectedCount = pendingKPIItems.filter(x => x.visible).length;
const atMax = selectedCount >= 4;
const disableToggle = !k.visible && atMax;
return (
{ kpiDragIdx.current = idx; }}
onDragOver={e => {
e.preventDefault();
if (kpiDragOverIdx.current !== idx) {
kpiDragOverIdx.current = idx;
const arr = [...pendingKPIItems];
const [moved] = arr.splice(kpiDragIdx.current, 1);
arr.splice(idx, 0, moved);
kpiDragIdx.current = idx;
setPendingKPIItems(arr);
}
}}
onDragEnd={() => { kpiDragIdx.current = null; kpiDragOverIdx.current = null; }}
style={{
display: 'flex', alignItems: 'center', gap: 12,
padding: '10px 12px',
border: '1px solid var(--line)', borderRadius: 3,
background: k.visible ? 'var(--panel)' : '#f7f5f0',
cursor: 'grab', userSelect: 'none',
opacity: k.visible ? 1 : 0.55,
transition: 'opacity 120ms, background 120ms',
}}>
⠿
{k.visible ? pendingKPIItems.filter((x, xi) => x.visible && xi <= idx).length : '—'}
{disableToggle && (
max 4
)}
{ if (disableToggle) return; setPendingKPIItems(prev => prev.map((x, xi) => xi === idx ? { ...x, visible: !x.visible } : x)); }}
style={{
position: 'relative', width: 32, height: 18, borderRadius: 9,
cursor: disableToggle ? 'not-allowed' : 'pointer',
background: k.visible ? 'var(--accent)' : '#c8c5bc',
transition: 'background 150ms', flexShrink: 0,
opacity: disableToggle ? 0.4 : 1,
}}>
);
})}
k.visible).length >= 4 ? 'var(--accent-2)' : 'var(--ink-3)', display: 'flex', alignItems: 'center', gap: 6 }}>
{pendingKPIItems.filter(k => k.visible).length >= 4 && ⚠ }
{pendingKPIItems.filter(k => k.visible).length} of 8 selected · max 4
{pendingKPIItems.filter(k => k.visible).length >= 4 ? ' — ถึงจำนวนสูงสุดแล้ว' : ''}
{/* Customize modal — real drag-and-drop */}
setShowCustomize(false)}
title="Customize layout"
subtitle="ลาก ⠿ เพื่อเรียงลำดับ · toggle เพื่อแสดง/ซ่อน section"
width={480}
footer={<>
setShowCustomize(false)} style={{ padding: '8px 14px', border: '1px solid var(--line)', fontSize: 12, borderRadius: 3 }}>Cancel
{
const next = [...pendingSections];
setSections(next);
try { localStorage.setItem(layoutStorageKey, JSON.stringify(next)); } catch {}
setShowCustomize(false);
showToast('Layout saved', { variant: 'success' });
}} style={{ padding: '8px 14px', background: 'var(--ink)', color: '#fff', fontSize: 12, fontWeight: 500, borderRadius: 3 }}>Apply
}>
{pendingSections.map((s, idx) => (
{ dragIdx.current = idx; }}
onDragOver={e => {
e.preventDefault();
if (dragOverIdx.current !== idx) {
dragOverIdx.current = idx;
const arr = [...pendingSections];
const [moved] = arr.splice(dragIdx.current, 1);
arr.splice(idx, 0, moved);
dragIdx.current = idx;
setPendingSections(arr);
}
}}
onDragEnd={() => { dragIdx.current = null; dragOverIdx.current = null; }}
style={{
display: 'flex', alignItems: 'center', gap: 12,
padding: '11px 12px',
border: '1px solid var(--line)', borderRadius: 3,
background: s.visible ? 'var(--panel)' : '#f7f5f0',
cursor: 'grab', userSelect: 'none',
opacity: s.visible ? 1 : 0.55,
transition: 'opacity 120ms, background 120ms',
}}>
{/* drag handle */}
⠿
{/* order badge */}
{s.visible ? pendingSections.filter((x, xi) => x.visible && xi <= idx).length : '—'}
{s.label}
{/* toggle switch */}
setPendingSections(prev => prev.map((x, xi) => xi === idx ? { ...x, visible: !x.visible } : x))}
style={{
position: 'relative', width: 32, height: 18, borderRadius: 9, cursor: 'pointer',
background: s.visible ? 'var(--accent)' : '#c8c5bc',
transition: 'background 150ms', flexShrink: 0,
}}>
))}
{pendingSections.filter(s => s.visible).length} sections จะแสดงบน overview
{/* All accounts modal */}
setShowAllAccounts(false)}
title="All accounts"
subtitle={`${liveAccounts.length} active accounts · sortable by any column`}
width={760}>
{['Account', 'Sector', 'Products', 'Revenue', 'YoY'].map(h => (
{h}
))}
{[...liveAccounts].sort((a, b) => b.revenue - a.revenue).map(a => (
{ setShowAllAccounts(false); showToast(`Opening ${a.name}`, { variant: 'info', detail: `${a.sector} · ฿${a.revenue}M YTD` }); }}
onMouseEnter={e => e.currentTarget.style.background = '#fbfaf6'}
onMouseLeave={e => e.currentTarget.style.background = 'transparent'}>
{a.name}
{a.sector}
{a.groups.map(g =>
฿{numFmt(a.revenue)}M
))}
{/* footer / data freshness */}
revenue_dashboard · PostgreSQL
{lastRefresh ? lastRefresh.toLocaleTimeString('th-TH') : 'synthetic'}
