// =========================================================== // Customers screen — list + filters, opens Customer 360 drawer // Role-aware: telesale role sees "Khách của tôi" + follow-up calendar // =========================================================== // Người phụ trách: đọc từ trường owner của khách (backend gán); chưa gán → 'Chưa gán' const OWNERS = []; const OWNER_MAP = {}; function ownerOf(c) { // Chấp nhận cả object khách hàng hoặc id if (c && typeof c === 'object') { if (c.owner) return c.owner; // chủ sở hữu được gán tường minh return ownerOf(c.id); } const custId = c; if (OWNER_MAP[custId]) return OWNER_MAP[custId]; return 'Chưa gán'; } // Simple session store for notes & follow-ups — persisted to localStorage // so demo data survives page refresh. In production this is a real backend. // v2: đổi key vì "hôm nay" chuyển từ ngày pin cứng sang ngày thật — dữ liệu cũ đã sai ngữ nghĩa const __TVS_STORE_KEY = 'tvs_crm_session_v2'; function __loadSession() { try { const raw = localStorage.getItem(__TVS_STORE_KEY); if (raw) { const s = JSON.parse(raw); // Lọc lịch quá hạn phi lý (>14 ngày trước) — tàn dư của phiên demo cũ const floor = Date.now() - 14*86400000; Object.keys(s.followupsByCustomer || {}).forEach(k => { s.followupsByCustomer[k] = (s.followupsByCustomer[k] || []).filter(f => !f.date || new Date(f.date).getTime() >= floor); if (!s.followupsByCustomer[k].length) delete s.followupsByCustomer[k]; }); return { notesByCustomer: s.notesByCustomer || {}, followupsByCustomer: s.followupsByCustomer || {}, ordersByCustomer: s.ordersByCustomer || {}, users: s.users || [], userEdits: s.userEdits || {}, doneFollowups: s.doneFollowups || {}, customers: s.customers || [], partners: s.partners || [], products: s.products || [], removedSkus: s.removedSkus || [], permissions: s.permissions || {} }; } } catch (e) {} return { notesByCustomer: {}, followupsByCustomer: {}, ordersByCustomer: {}, users: [], userEdits: {}, doneFollowups: {}, customers: [], partners: [], products: [], removedSkus: [], permissions: {} }; } window.TVS_SESSION = window.TVS_SESSION || Object.assign(__loadSession(), { _listeners: new Set(), __ver: 0 }); window.TVS_SESSION._persist = function() { try { localStorage.setItem(__TVS_STORE_KEY, JSON.stringify({ notesByCustomer: this.notesByCustomer, followupsByCustomer: this.followupsByCustomer, ordersByCustomer: this.ordersByCustomer || {}, users: this.users || [], userEdits: this.userEdits || {}, doneFollowups: this.doneFollowups || {}, customers: this.customers || [], partners: this.partners || [], products: this.products || [], removedSkus: this.removedSkus || [], permissions: this.permissions || {}, })); } catch (e) {} }; window.TVS_SESSION.subscribe = function(fn) { this._listeners.add(fn); return () => this._listeners.delete(fn); }; window.TVS_SESSION.emit = function() { this.__ver = (this.__ver || 0) + 1; this._persist(); this._listeners.forEach(fn => fn()); }; // Nhãn thời gian tương đối, tính lúc render (không lưu cứng "Vừa xong") function __agoLabel(ts) { if (!ts) return 'Vừa xong'; const m = Math.round((Date.now() - ts) / 60000); if (m < 1) return 'Vừa xong'; if (m < 60) return `${m} phút trước`; const h = Math.round(m/60); if (h < 24) return `${h} giờ trước`; return `${Math.round(h/24)} ngày trước`; } window.__agoLabel = __agoLabel; window.TVS_SESSION.addNote = function(custId, payload) { if (!this.notesByCustomer[custId]) this.notesByCustomer[custId] = []; this.notesByCustomer[custId].unshift({ id: 'N-' + Date.now(), ...payload, ts: Date.now() }); this.emit(); }; window.TVS_SESSION.addFollowUp = function(custId, payload) { if (!this.followupsByCustomer[custId]) this.followupsByCustomer[custId] = []; this.followupsByCustomer[custId].unshift({ id: 'F-' + Date.now(), ...payload, ts: Date.now() }); this.emit(); }; window.TVS_SESSION.addUser = function(payload) { if (!this.users) this.users = []; this.users.unshift({ id: 'S-' + Date.now(), ...payload, ts: Date.now() }); this.emit(); }; // Admin SỬA tài khoản: tài khoản tạo trong app → sửa thẳng; tài khoản cài sẵn (accounts.js) → lưu phần chỉnh vào userEdits[id] window.TVS_SESSION.updateUser = function(id, patch) { const u = (this.users || []).find(x => (x.id || ('S-' + (x.phone || x.email || x.name))) === id); if (u) Object.assign(u, patch); else { if (!this.userEdits) this.userEdits = {}; this.userEdits[id] = { ...(this.userEdits[id] || {}), ...patch }; } this.emit(); }; window.TVS_SESSION.addOrder = function(custId, payload) { if (!this.ordersByCustomer) this.ordersByCustomer = {}; if (!this.ordersByCustomer[custId]) this.ordersByCustomer[custId] = []; const idDate = (payload.date || D.iso(0)).replace(/-/g, '').slice(0, 8); this.ordersByCustomer[custId].unshift({ id: 'DH-' + idDate + '-' + String(Date.now()).slice(-4), ...payload, ts: Date.now() }); this.emit(); }; // Khách hàng / đối tác tạo trong app — lưu lại để sống qua reload (data.js reset mỗi lần tải) window.TVS_SESSION.addCustomer = function(record) { if (!this.customers) this.customers = []; this.customers.unshift(record); this.emit(); }; window.TVS_SESSION.addPartner = function(record) { if (!this.partners) this.partners = []; this.partners.unshift(record); this.emit(); }; // Import nhiều khách một lần (từ file CSV/Excel) — 1 lần persist + 1 lần render window.TVS_SESSION.addCustomers = function(records) { if (!this.customers) this.customers = []; this.customers.unshift(...records); this.emit(); }; // Sản phẩm thêm/xoá trong app — data.js reset mỗi lần tải nên lưu lại đây. // Xoá sản phẩm mẫu: ghi tombstone SKU; xoá sản phẩm tự thêm: bỏ khỏi danh sách. window.TVS_SESSION.addProduct = function(p) { if (!this.products) this.products = []; this.products.unshift(p); this.emit(); }; // Quản lý lưu ma trận phân quyền — map { roleId: [permId, ...] }; {} = dùng mặc định window.TVS_SESSION.setPermissions = function(map) { this.permissions = map || {}; this.emit(); }; window.TVS_SESSION.removeProduct = function(sku) { const wasAdded = (this.products || []).some(x => x.sku === sku); if (wasAdded) { this.products = this.products.filter(x => x.sku !== sku); } else { if (!this.removedSkus) this.removedSkus = []; if (!this.removedSkus.includes(sku)) this.removedSkus.push(sku); } this.emit(); }; // Đánh dấu follow-up hiện tại của khách là ĐÃ XONG (tombstone theo ngày hẹn) window.TVS_SESSION.completeFollowUp = function(custId, due) { if (!this.doneFollowups) this.doneFollowups = {}; this.doneFollowups[custId + '|' + due] = true; this.emit(); }; // HOÃN follow-up hiện tại: đánh dấu bản cũ đã xử lý + tạo lịch mới window.TVS_SESSION.postponeFollowUp = function(custId, oldDue, newFollowUp) { if (!this.doneFollowups) this.doneFollowups = {}; this.doneFollowups[custId + '|' + oldDue] = true; this.addFollowUp(custId, newFollowUp); // addFollowUp tự emit + persist }; // Replay đơn đã ghi trong các phiên trước vào chỉ số khách/đối tác trong bộ nhớ — // data.js reset về số liệu mẫu mỗi lần tải, còn đơn ghi nhận thì nằm lại localStorage (function __replaySessionOrders() { const S = window.TVS_SESSION; if (S.__replayed) return; S.__replayed = true; // 0) Sản phẩm: gỡ SKU đã xoá + khôi phục sản phẩm đã thêm ở phiên trước (S.removedSkus || []).forEach(sku => { const i = D.products.findIndex(p => p.sku === sku); if (i >= 0) D.products.splice(i, 1); }); (S.products || []).slice().reverse().forEach(p => { if (!D.products.find(x => x.sku === p.sku)) D.products.unshift({ ...p }); }); // 1) Khôi phục khách/đối tác đã tạo ở phiên trước (trước khi cộng dồn đơn) (S.customers || []).slice().reverse().forEach(c => { // Hạng lưu từ phiên cũ có thể là tên tiếng Anh (Bronze/Gold…) → quy về tên tiếng Việt thống nhất const VI_TIER = { bronze: 'Đồng', silver: 'Bạc', gold: 'Vàng', platinum: 'Kim cương', 'bạch kim': 'Kim cương' }; const tier = VI_TIER[String(c.tier || '').toLowerCase()] || c.tier || 'Đồng'; if (!D.customers.find(x => x.id === c.id)) D.customers.unshift({ ...c, tier, ltv: 0, orders: 0, avgOrder: 0 }); }); (S.partners || []).slice().reverse().forEach(p => { if (!D.partners.find(x => x.id === p.id)) D.partners.unshift({ ...p, gmv30d: 0, gmvYTD: 0, commissionEarned: 0 }); }); // 2) Cộng dồn đơn đã ghi vào chỉ số Object.keys(S.ordersByCustomer || {}).forEach(id => { const list = S.ordersByCustomer[id] || []; if (!list.length) return; const sum = list.reduce((a, o) => a + (o.total || 0), 0); const c = D.customers.find(x => x.id === id); if (c) { c.orders = (c.orders || 0) + list.length; c.ltv = (c.ltv || 0) + sum; c.avgOrder = c.orders ? Math.round(c.ltv / c.orders) : 0; const newest = list.map(o => o.date).filter(Boolean).sort().pop(); if (newest && (!c.lastOrder || newest > c.lastOrder)) c.lastOrder = newest; return; } const p = D.partners.find(x => x.id === id); if (p) { p.gmvYTD = (p.gmvYTD || 0) + sum; const cutoff = D.iso(-30); const sum30 = list.filter(o => (o.date || '') >= cutoff).reduce((a, o) => a + (o.total || 0), 0); p.gmv30d = (p.gmv30d || 0) + sum30; p.commissionEarned = Math.round((p.commissionEarned || 0) + sum * (p.commission || 0) / 100); } }); })(); function useTvsSession() { const [, setN] = useState(0); useEffect(() => window.TVS_SESSION.subscribe(() => setN(n => n+1)), []); return window.TVS_SESSION; } // Lịch follow-up hiệu lực: lịch vừa đặt trong phiên đè lên lịch mẫu. // Lịch đã bấm "Đã xong"/"Hoãn" (tombstone trong doneFollowups) không hiện lại. function effFollowUp(c) { const done = window.TVS_SESSION.doneFollowups || {}; const s = (window.TVS_SESSION.followupsByCustomer[c.id] || []).find(f => !done[c.id + '|' + f.date]); if (s) return { due: s.date, reason: s.reason, time: s.time, fresh: true }; if (c.followUp && done[c.id + '|' + c.followUp.due]) return null; return c.followUp; } window.effFollowUp = effFollowUp; window.ownerOf = ownerOf; // Mốc "Liên hệ cuối" mẫu của khách demo — dùng chung cho cột trong bảng const CONTACT_MOCK = {}; // Lần liên hệ cuối — backend cung cấp // Tag hiển thị Loại khách hàng — 1 khách có thể thuộc nhiều loại const TYPE_META = { retail: ['Khách lẻ', 'outline'], doctor: ['Bác sĩ', 'success'], pharmacist: ['Dược sĩ', 'success'], affiliate_tiktok: ['TikTok Aff.', 'info'], affiliate_shopee: ['Shopee Aff.', 'warning'], koc: ['KOC', 'danger'], investor: ['Chủ đầu tư', 'gold'], pharmacy: ['Nhà thuốc', 'success'], gym: ['Phòng gym / PT', 'info'], spa: ['Spa / PK', 'danger'], dealer: ['Đại lý / Mua sỉ', 'platinum'], business: ['Doanh nghiệp', 'platinum'], partner: ['Đối tác B2B', 'info'], }; window.TYPE_META = TYPE_META; // Nhãn ĐẦY ĐỦ của loại khách (không viết tắt) — ưu tiên danh mục typeOptions trong data.js function typeFull(id) { const o = (D.typeOptions || []).find(t => t.id === id); return o ? o.label : (TYPE_META[id] ? TYPE_META[id][0] : id); } // Danh sách loại của 1 khách: loại chính (segment) đứng đầu + các loại phụ (roles) function customerTypes(c) { const all = [c.segment, ...(c.roles || [])].filter(t => t && (TYPE_META[t] || (D.typeOptions || []).some(o => o.id === t))); return all.length ? all : ['retail']; } // Tag loại khách nhãn đầy đủ — dùng trong hồ sơ 360° (lg = cỡ to cho dải nhận diện) function TypeTagsFull({ customer, lg }) { const style = lg ? {fontSize:12, padding:'4px 12px'} : undefined; return ( {customerTypes(customer).map(t => ( {typeFull(t)} ))} ); } window.typeFull = typeFull; window.customerTypes = customerTypes; window.TypeTagsFull = TypeTagsFull; function SegmentTag({ segment, roles }) { const all = [segment, ...(roles || [])].filter(t => TYPE_META[t]); if (!all.length) return Khách lẻ; return ( {all.map(t => {TYPE_META[t][0]})} ); } window.SegmentTag = SegmentTag; function CustomersScreen({ role, onOpenCustomer, onGoToTelesale, onLogOrder, onAddCustomer }) { const session = useTvsSession(); // re-render khi có ghi chú / lịch follow-up mới const sessVer = session.__ver || 0; // đổi mỗi lần session ghi — dùng làm dependency cho memo const isTelesale = role.id === 'telesale'; const isInstore = role.id === 'instore'; const isManager = role.id === 'manager'; // Giao diện thống nhất "Khách của tôi" cho nhân viên; quản lý xem toàn bộ const isOperator = !isManager; const myName = role.person; // Quick-action popups (note / follow-up) const [quickAction, setQuickAction] = useState(null); // { type: 'note'|'followup'|'outcome', customer } const [selectedPartner, setSelectedPartner] = useState(null); // đối tác B2B trong bảng gộp const [showImport, setShowImport] = useState(false); // modal nhập khách từ file CSV/Excel // Sheets-style: sắp xếp cột, chọn nhiều dòng, sửa trực tiếp trên ô const [sort, setSort] = useState({ key: null, dir: 'asc' }); const [sel, setSel] = useState([]); const [editCell, setEditCell] = useState(null); // { id, field } const [edits, setEdits] = useState({}); // { [id]: { owner, note } } const [moreOpen, setMoreOpen] = useState(false); // Đối tác B2B hiển thị chung trong bảng khách hàng (1 danh sách duy nhất) const partnerRows = useMemo(() => D.partners.map(p => ({ _partner: p, id: p.id, name: p.name, phone: p.phone, tier: p.tier, segment: 'partner', source: p.type, city: p.city, owner: p.owner, ltv: p.gmvYTD, orders: 0, lastOrder: null, tags: [p.stage], followUp: p.nextAction ? { due: p.nextAction.due, reason: p.nextAction.type } : null, preferredContact: 'Gọi điện', })), [D.partners.length]); const [search, setSearch] = useState(''); const [tierFilter, setTierFilter] = useState('all'); const [segment, setSegment] = useState(isManager ? 'all' : 'mine'); // Admin: xem khách của TỪNG nhân viên ('' = tất cả). Nhân viên/Giám đốc không dùng. const [ownerFilter, setOwnerFilter] = useState(''); const [custType, setCustType] = useState('all'); // loại khách (segment 2 trục) const [view, setView] = useState('list'); // list | followups | pipeline // Tab "Cần follow-up" mặc định sắp theo lịch gần nhất lên đầu (quá hạn → hôm nay → ngày mai…) // cho tới khi người dùng tự bấm sắp xếp cột khác. const effSort = (!sort.key && segment === 'followup') ? { key: 'follow', dir: 'asc' } : sort; // Danh sách nhân viên đang phụ trách khách — cho bộ lọc "Theo nhân viên" của Admin const ownerOptions = useMemo(() => [...new Set([...D.customers, ...partnerRows].map(c => ownerOf(c)).filter(Boolean))].sort((a, b) => a.localeCompare(b, 'vi')), [partnerRows, D.customers.length, sessVer]); const data = useMemo(() => { let r = [...D.customers, ...partnerRows]; if (segment === 'mine' && myName) r = r.filter(c => ownerOf(c) === myName); // "Chưa có lịch hẹn": khách KHÔNG có lịch follow-up nào để nhắc liên hệ — dễ bị bỏ quên. // Nhân viên xem trong phạm vi khách của mình, quản lý xem toàn hệ thống. if (segment === 'nofollowup') r = r.filter(c => (isManager || ownerOf(c) === myName) && !effFollowUp(c)); if (segment === 'atrisk') r = r.filter(c => c.tags.includes('At-risk')); if (segment === 'new') r = r.filter(c => c.tags.includes('New')); if (segment === 'vip') r = r.filter(c => ['platinum','gold'].includes(tierVariant(c.tier))); if (segment === 'followup')r = r.filter(c => effFollowUp(c)); if (isManager && ownerFilter) r = r.filter(c => ownerOf(c) === ownerFilter); if (custType !== 'all') { if (custType === 'partner') r = r.filter(c => c._partner); else if (custType === 'affiliate') r = r.filter(c => [c.segment, ...(c.roles||[])].some(x => (x||'').startsWith('affiliate') || x === 'koc')); else if (custType === 'medical') r = r.filter(c => [c.segment, ...(c.roles||[])].some(x => x === 'doctor' || x === 'pharmacist' || x === 'pharmacy')); else if (custType === 'business') r = r.filter(c => [c.segment, ...(c.roles||[])].some(x => x === 'business' || x === 'gym' || x === 'spa' || x === 'dealer')); else r = r.filter(c => c.segment === custType || (c.roles||[]).includes(custType)); } // tierVariant quy cả hai hệ tên hạng (Gold/Vàng, Platinum/Bạch kim…) về 1 chuẩn if (tierFilter !== 'all') r = r.filter(c => tierVariant(c.tier) === tierFilter); if (search) { const s = searchNorm(search); const digits = phoneDigits(search); r = r.filter(c => searchNorm(c.name).includes(s) || c.id.toLowerCase().includes(search.toLowerCase()) || (digits.length >= 3 && phoneDigits(c.phone).includes(digits)) || searchNorm(c.email).includes(s)); } if (effSort.key) { const dir = effSort.dir === 'asc' ? 1 : -1; const val = (c) => { if (effSort.key === 'name') return c.name.toLowerCase(); if (effSort.key === 'ltv') return c.ltv || 0; if (effSort.key === 'orders')return c.orders || 0; if (effSort.key === 'last') return c.lastOrder || ''; // Ngày + giờ hẹn — 'YYYY-MM-DD HH:MM' so sánh chuỗi là đúng thứ tự thời gian if (effSort.key === 'follow'){ const f = effFollowUp(c); return f ? f.due + ' ' + (f.time || '00:00') : '9999'; } if (effSort.key === 'owner') return (edits[c.id]?.owner || ownerOf(c)).toLowerCase(); if (effSort.key === 'tier') return ['Bronze','Đồng','Silver','Bạc','Gold','Vàng','Platinum','Bạch kim','Kim cương'].indexOf(c.tier); return ''; }; r = [...r].sort((a,b) => { const x = val(a), y = val(b); return x < y ? -dir : x > y ? dir : 0; }); } return r; // D.customers.length + sessVer: khách mới thêm / follow-up mới lưu phải hiện ra ngay }, [search, tierFilter, segment, custType, ownerFilter, partnerRows, sort, edits, D.customers.length, sessVer]); const toggleSort = (key) => setSort(s => s.key === key ? { key, dir: s.dir === 'asc' ? 'desc' : 'asc' } : { key, dir: 'asc' }); const SortTh = ({ k, children, align }) => ( toggleSort(k)} className={`sheet-th-sort ${align === 'num' ? 'num' : ''}`}> {children} ); const setEdit = (id, field, value) => { setEdits(e => ({ ...e, [id]: { ...(e[id]||{}), [field]: value } })); // Ghi thẳng vào bản ghi để mọi màn hình (360°, tìm kiếm, "Của tôi") thấy cùng dữ liệu const cust = D.customers.find(x => x.id === id); const part = cust ? null : D.partners.find(x => x.id === id); if (cust) cust[field] = value; else if (part) part[field] = value; }; const allIds = data.map(c => c.id); const allSelected = sel.length > 0 && sel.length === allIds.length; const toggleAll = () => setSel(allSelected ? [] : allIds); const toggleOne = (id) => setSel(s => s.includes(id) ? s.filter(x => x !== id) : [...s, id]); // Bỏ chọn khi đổi bộ lọc — tránh thao tác hàng loạt lên dòng không còn hiển thị useEffect(() => { setSel([]); }, [search, segment, custType, tierFilter, ownerFilter]); // Operator KPIs computed from data const myScope = isManager ? [...D.customers, ...D.partners.map(p => ({...p, followUp: p.nextAction ? {due:p.nextAction.due, reason:p.nextAction.type} : null}))].filter(c => !ownerFilter || ownerOf(c) === ownerFilter) : [...D.customers, ...partnerRows].filter(c => ownerOf(c) === myName); const myCustomers = myScope; const myFollowUpsToday = myCustomers.filter(c => { const f = effFollowUp(c); return f && D.parseISO(f.due) <= D.today; }); return ( <>
{isOperator &&
{role.team}
} {/* Admin: ghi RÕ phạm vi đang xem — toàn hệ thống hay khách của 1 nhân viên */} {isManager &&
Admin · {ownerFilter ? 'Khách của 1 nhân viên' : 'Toàn hệ thống'}
}

{isOperator ? 'Khách của tôi' : ownerFilter ? `Khách của ${ownerFilter}` : 'Khách hàng — Toàn hệ thống'}

{isOperator ? <>Bạn đang phụ trách {myCustomers.length} khách hàng · {myFollowUpsToday.length} cần follow-up hôm nay : ownerFilter ? <>Đang xem {myCustomers.length} khách do {ownerFilter} phụ trách · {myFollowUpsToday.length} cần follow-up hôm nay : <>Khách của tất cả nhân viên · {D.customers.length} khách hàng + {D.partners.length} đối tác · {myFollowUpsToday.length} cần follow-up hôm nay}
{tvsCan(role, 'customers.import') && ( )} {tvsCan(role, 'customers.edit') && ( )}
{/* KPI — cùng bố cục cho mọi vai trò, chỉ khác phạm vi dữ liệu (RBAC) */}
0 ? `${myFollowUpsToday.length} đến hạn` : 'Không có'} deltaDir={myFollowUpsToday.length > 0 ? 'up' : 'flat'}/>
{/* ===== VIEW: LIST — bảng kiểu Google Sheets ===== */} {view === 'list' && ( {/* Hàng lọc 1: tìm kiếm + phạm vi + lọc thêm */}
setSearch(e.target.value)}/>
!(isManager && o.value === 'mine'))} onChange={setSegment}/> {/* Admin: xem khách của từng tài khoản nhân viên */} {isManager && ( )}
{moreOpen && ( <>
setMoreOpen(false)}/>
Hạng thành viên
)}
{/* Hàng lọc 2: Loại khách */}
Loại khách: {[ {value:'all', label:'Tất cả'}, {value:'retail', label:'🛒 Khách lẻ'}, {value:'investor', label:'🏗 Chủ đầu tư'}, {value:'medical', label:'🩺 Bác sĩ / Dược sĩ'}, {value:'affiliate', label:'📱 Affiliate'}, {value:'business', label:'🏢 Doanh nghiệp'}, {value:'partner', label:'🤝 Đối tác B2B'}, ].map(o => ( ))}
{/* Thanh thao tác hàng loạt — hiện khi chọn dòng */} {sel.length > 0 && (
Đã chọn {sel.length} khách
)}
Khách hàngHạngLTVMua cuốiFollow-upPhụ trách {data.map(c => { const owner = edits[c.id]?.owner || ownerOf(c); const isMine = owner === myName; const note = edits[c.id]?.note ?? (c.note || ''); const checked = sel.includes(c.id); return ( c._partner ? setSelectedPartner(c._partner) : onOpenCustomer(c)}> {/* Sửa trực tiếp: người phụ trách */} {/* Sửa trực tiếp: ghi chú */} );})}
Loại SĐT Liên hệ cuối Ghi chú
e.stopPropagation()}> toggleOne(c.id)} aria-label={'Chọn ' + c.name}/>
{c.name}
{c._partner ? c._partner.contact : `${c.id} · ${c.city}`}
 {c._partner ? 🤝 {c._partner.type} : } {c.tier} {c.phone} {fmt.vndFull(c.ltv)} {fmt.rel(c.lastOrder)} {(() => { // Liên hệ cuối = ghi chú kết quả liên hệ mới nhất trong phiên; nếu chưa có, dùng mốc mẫu const contact = (session.notesByCustomer[c.id] || []).find(n => n.tag === 'contact'); if (contact) return __agoLabel(contact.ts); return CONTACT_MOCK[c.id] || '—'; })()} {(() => { const f = effFollowUp(c); if (!f) return —; const overdue = D.parseISO(f.due) <= D.today; return ( {f.fresh && } {fmt.rel(f.due)}{f.time ? ` ${f.time}` : ''} ); })()} { e.stopPropagation(); if (!tvsCan(role, 'customers.assign')) return window.tvsToast('Chỉ Admin / Marketing mới được đổi người phụ trách', 'demo'); setEditCell({id:c.id, field:'owner'}); }}> {editCell && editCell.id === c.id && editCell.field === 'owner' ? ( ) : isMine ? Bạn : {owner.split(' ').slice(-2).join(' ')}} { e.stopPropagation(); if (!tvsCan(role, 'customers.edit')) return window.tvsDenied(); setEditCell({id:c.id, field:'note'}); }}> {editCell && editCell.id === c.id && editCell.field === 'note' ? ( { setEdit(c.id, 'note', e.target.value); setEditCell(null); }} onKeyDown={(e) => { if (e.key === 'Enter') e.currentTarget.blur(); if (e.key === 'Escape') setEditCell(null); }}/> ) : ( {note || 'Nhấp để ghi…'} )} e.stopPropagation()} style={{textAlign:'right'}}>
{data.length === 0 && ( { setSearch(''); setSegment('all'); setCustType('all'); setTierFilter('all'); }}>Xoá tất cả bộ lọc}/> )}
Hiển thị {data.length} dòng · nhấp tiêu đề cột để sắp xếp · nhấp ô Phụ trách / Ghi chú để sửa tại chỗ
)} {/* ===== VIEW: FOLLOW-UPS CALENDAR (operator) ===== */} {/* Admin cũng xem được lịch toàn hệ thống — FollowUpView tự scope theo vai trò */} {view === 'followups' && ( setQuickAction({type:'outcome', customer: c})} onLogOrder={onLogOrder}/> )} {/* ===== VIEW: PIPELINE — đã bỏ (20/07/2026): nhân viên bán lẻ không dùng kanban ===== */} {/* ===== Quick-action modal ===== */} {quickAction && ( setQuickAction(null)} /> )} {/* ===== Partner drawer (đối tác trong bảng gộp) ===== */} {selectedPartner && window.PartnerDrawer && ( setSelectedPartner(null)} onLogOrder={onLogOrder}/> )} {/* ===== Import khách hàng từ file CSV / Excel ===== */} {showImport && window.ImportCustomersModal && ( setShowImport(false)}/> )} ); } // ===== Follow-up calendar / timeline view ===== function FollowUpView({ myName, role, onOpenCustomer, onLogOutcome, onLogOrder }) { const session = useTvsSession(); // re-render khi đặt lịch mới / hoãn / hoàn thành const isManager = role && role.id === 'manager'; // Quản lý xem lịch của cả team; nhân viên xem lịch của mình const myCustomers = D.customers.filter(c => (isManager || ownerOf(c) === myName) && effFollowUp(c)) .map(c => ({ ...c, followUp: effFollowUp(c) })) // Gần nhất lên đầu trong từng nhóm (ngày + giờ) .sort((a, b) => (a.followUp.due + ' ' + (a.followUp.time || '00:00')).localeCompare(b.followUp.due + ' ' + (b.followUp.time || '00:00'))); const groups = { overdue: [], today: [], tomorrow: [], week: [], later: [], }; myCustomers.forEach(c => { const d = D.parseISO(c.followUp.due); const diff = Math.round((d - D.today) / 86400000); if (diff < 0) groups.overdue.push(c); else if (diff === 0) groups.today.push(c); else if (diff === 1) groups.tomorrow.push(c); else if (diff <= 7) groups.week.push(c); else groups.later.push(c); }); const postpone = (c) => { window.TVS_SESSION.postponeFollowUp(c.id, c.followUp.due, { reason: c.followUp.reason, date: D.iso(1), time: c.followUp.time || '10:00', channel: c.preferredContact || 'Gọi điện', who: role ? role.person : myName, role: role ? role.team : '', }); window.tvsToast(`Đã hoãn follow-up của ${c.name} sang ngày mai`); }; const complete = (c) => { window.TVS_SESSION.completeFollowUp(c.id, c.followUp.due); window.tvsToast(`Đã hoàn thành follow-up của ${c.name} ✓`); }; const sections = [ {key:'overdue', label: 'Quá hạn', variant: 'danger', icon: 'flame'}, {key:'today', label: 'Hôm nay', variant: 'danger', icon: 'flag'}, {key:'tomorrow',label: 'Ngày mai',variant: 'warning', icon: 'clock'}, {key:'week', label: '7 ngày tới', variant: 'info', icon: 'calendar'}, {key:'later', label: 'Sau đó', variant: 'outline', icon: 'calendar'}, ]; return ( window.tvsDemo('Nhắc tất cả follow-up quá hạn')}>Nhắc tôi }/>
{myCustomers.length === 0 && ( )} {sections.map(s => { if (groups[s.key].length === 0) return null; return (
{s.label} {groups[s.key].length} khách
{groups[s.key].map(c => (
onOpenCustomer(c)} style={{margin:0}}>
{c.name}
{c.tier}
{c.phone} · LTV {fmt.vndFull(c.ltv)}
{c.followUp.reason}
Hẹn {fmt.date(c.followUp.due)}{c.followUp.time ? ` · ${c.followUp.time}` : ''} · {fmt.rel(c.followUp.due)}
e.stopPropagation()}> {c.preferredContact}
))}
); })}
); } // =========================================================== // Customer 360 — drawer // =========================================================== function Customer360({ customer, onClose, onCall, onLogOrder, onSchedule, role }) { const [tab, setTab] = useState('overview'); const isInstore = role && role.id === 'instore'; const isTelesale = role && role.id === 'telesale'; const session = useTvsSession(); const sessionOrders = (session.ordersByCustomer && session.ordersByCustomer[customer.id]) || []; const orders = [...sessionOrders, ...(D.ordersByCustomer[customer.id] || [])]; const sessionNotes = session.notesByCustomer[customer.id] || []; const sessionFollowUps = session.followupsByCustomer[customer.id] || []; const latestNote = sessionNotes[0]; // 12 months of monthly spend (mock) const monthly = useMemo(() => { const seed = customer.id.charCodeAt(2); return Array.from({length: 12}, (_, i) => { const v = ((seed * (i+1) * 37) % 9) / 10 + 0.3; return Math.round(v * (customer.avgOrder/1000) * (1 + i/12)); }); }, [customer.id]); return (
e.stopPropagation()}>

{customer.name}

{customer.tier}
📞 {customer.phone} {customer.email && ✉ {customer.email}} 📍 {customer.city} {customer.age ? 🎂 {customer.gender}, {customer.age} tuổi : (customer.gender && customer.gender !== '—') ? 👤 {customer.gender} : null} {customer.affiliateId && 🔗 Mã aff: {customer.affiliateId}}
{/* Mọi vai trò có cùng bộ hành động */}
{/* Mobile: thanh hành động thay cho các nút header bị ẩn trên phone */}
{onSchedule && }
{/* Dải nhận diện & chỉ số chính — Loại khách hàng đứng đầu, có nhãn rõ ràng */}
Loại khách hàng
{[ {l:'LTV', v:fmt.vndFull(customer.ltv), dim:'tích luỹ'}, {l:'Tổng đơn', v:customer.orders, dim: customer.lastOrder ? `gần nhất ${fmt.rel(customer.lastOrder)}` : 'chưa có đơn'}, {l:'Khách từ', v: customer.joined ? fmt.date(customer.joined).slice(3) : '—', dim: 'nguồn ' + D.channelLabel(customer.source || customer.channel)}, ].map((s,i) => (
{s.l}
{s.v}
{s.dim &&
{s.dim}
}
))}
{/* Tabs */}
{[ ['overview','Tổng quan'], ['orders','Đơn hàng'], ['activity','Hoạt động'], ['notes','Ghi chú & Follow-up'], ].map(([k,l]) => ( ))}
{tab === 'overview' && ( <> {(() => { // MỘT banner duy nhất: lịch hiệu lực (lịch vừa đặt trong phiên đè lên lịch mẫu). // Ngày giờ hẹn hiện RÕ: thứ + ngày đầy đủ + giờ, chữ đậm — khoảng cách tương đối chỉ là phụ chú. const f = effFollowUp(customer); if (!f) return null; const d = D.parseISO(f.due); const WEEKDAYS = ['Chủ nhật', 'Thứ 2', 'Thứ 3', 'Thứ 4', 'Thứ 5', 'Thứ 6', 'Thứ 7']; return (
Follow-up: {f.reason}
📅 {WEEKDAYS[d.getDay()]}, {fmt.date(f.due)}{f.time ? ` · ${f.time}` : ''} — {fmt.rel(f.due)} · Kênh ưa thích: {customer.preferredContact}
{f.fresh && Mới}
); })()} {/* Hàng 1 — Hồ sơ khách hàng (loại khách rõ ràng) + biểu đồ doanh số */}

Hồ sơ khách hàng

Phụ trách {ownerOf(customer)}
Liên hệ {[['Gọi điện','call'],['SMS','sms'],['Email','email'],['Zalo','zalo']].map(([l,k]) => ( {customer.preferredContact === l && '★ '}{l}{(customer.consent || {})[k] ? '' : ' ✕'} ))}
{customer.contactName && (
Người liên hệ {customer.contactName}{customer.contactRole ? ` — ${customer.contactRole}` : ''}
)} {customer.taxId && (
Mã số thuế {customer.taxId}
)} {customer.address && (
Địa chỉ {customer.address}
)}
Tags {(customer.tags || []).map(t => ( {t} ))}
Ghi chú mới nhất {(latestNote || customer.note) ? ( <> {latestNote ? latestNote.text : customer.note}
{latestNote ? `${latestNote.who} · ${latestNote.when || __agoLabel(latestNote.ts)}` : ownerOf(customer)} {' · '}
) : Chưa có}

Doanh số 12 tháng qua

Tổng: {customer.orders > 0 ? fmt.vndFull(monthly.reduce((a,b)=>a+b*1000,0)) : '0đ'}
{customer.orders > 0 ? ( <>
{Array.from({length: 12}, (_, i) => { const m = new Date(D.today.getFullYear(), D.today.getMonth() - 11 + i, 1).getMonth() + 1; return T{m}; })}
) : ( )}
)} {tab === 'orders' && ( orders.length ? ` gần nhất (tổng ${customer.orders} đơn)` : ''}`} sub={sessionOrders.length > 0 ? `${sessionOrders.length} đơn vừa ghi nhận trong phiên` : 'Sắp xếp theo thời gian mới nhất'}/> {orders.length > 0 ? (
{orders.map(o => ( ))}
Mã đơnNgàyKênhSPTổngTrạng thái
{o.id}{o._new && Mới} {fmt.date(o.date)} {o.channel} {o.items} {fmt.vndFull(o.total)} {o.status || 'Đã ghi nhận'}
) : ( 0 ? `Khách có ${customer.orders} đơn theo hệ thống POS/Sapo — chi tiết chưa đồng bộ về CRM. Dùng "Ghi nhận đơn" để lưu đơn mới.` : 'Dùng nút "Ghi nhận đơn" để lưu đơn đầu tiên của khách.'} action={}/> )} )} {tab === 'activity' && (

Dòng thời gian

{(() => { // Dựng dòng thời gian từ dữ liệu thật: đơn hàng + ghi chú/kết quả liên hệ trong phiên const events = []; orders.slice(0, 4).forEach(o => events.push({ ico:'cart', title:`Đặt đơn ${o.id}`, meta:`${fmt.rel(o.date)} · ${o.channel} · ${fmt.vndFull(o.total)}`, sort: o.date || '', })); sessionNotes.slice(0, 3).forEach(n => events.push({ ico: n.tag === 'contact' ? 'phone' : 'note', title: n.tag === 'contact' ? `Liên hệ khách — ${n.who}` : `Ghi chú — ${n.who}`, meta: `${__agoLabel(n.ts)} · ${n.text.slice(0, 60)}${n.text.length > 60 ? '…' : ''}`, sort: '9999-99', // ghi chú phiên luôn mới nhất })); if (customer.nps >= 9) events.push({ ico:'star', title:`Khảo sát NPS — chấm ${customer.nps}/10`, meta:'Khách hài lòng (Promoter)', sort: customer.joined || '' }); events.sort((a, b) => b.sort < a.sort ? -1 : 1); if (!events.length) return ; return events.map((a, i) => (
{a.title}
{a.meta}
)); })()} )} {tab === 'notes' && ( <> {/* Session follow-ups (newest first) */} {sessionFollowUps.length > 0 && (
{sessionFollowUps.map(f => (
{f.reason}
Hẹn: {fmt.date(f.date)} {f.time} · Kênh {f.channel} · {f.who} · {f.createdAt || __agoLabel(f.ts)}
Đã đặt
))}
)}

Thêm ghi chú mới