// screen-products.jsx — Product Pool (Stage-1 approval). CRITICAL, dense, fast.
const { useState: useStateP, useEffect: useEffectP, useMemo, useRef: useRefP } = React;
const SORTS = [
{ value: 'score', label: 'Điểm cao' },
{ value: 'created', label: 'Mới nhất' },
{ value: 'price', label: 'Giá thấp' },
];
function ProductsScreen({ layout }) {
const app = useApp();
const [q, setQ] = useStateP('');
const [statusFilter, setStatusFilter] = useStateP('active'); // 'active' (pending+eligible) | 'all' | 'pending' | 'eligible' | 'invalid' | 'skipped' | 'archived' | 'has-posts' | 'never-posted'
const [brands, setBrands] = useStateP([]); // empty = all
const [minScore, setMinScore] = useStateP(0);
const [minCoupon, setMinCoupon] = useStateP(0);
const [watchOnly, setWatchOnly] = useStateP(false);
const [confidence, setConfidence] = useStateP('all');
const [maxVnd, setMaxVnd] = useStateP(0); // 0 = no cap
const [sort, setSort] = useStateP('score');
const [sel, setSel] = useStateP(new Set());
const [open, setOpen] = useStateP(null); // product in drawer
const [cursor, setCursor] = useStateP(0); // keyboard cursor
const data = app.products;
const setData = app.setProducts;
const [advancedOpen, setAdvancedOpen] = useStateP(false);
const [activePreset, setActivePreset] = useStateP(null);
const activeFilterCount = (brands.length > 0 ? 1 : 0) + (minScore > 0 ? 1 : 0) + (minCoupon > 0 ? 1 : 0) + (confidence !== 'all' ? 1 : 0) + (watchOnly ? 1 : 0);
const containerRef = useRefP(null);
const justAddedRef = useRefP(null);
useEffectP(() => {
if (app.newProductId && justAddedRef.current) {
justAddedRef.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
}, [app.newProductId]);
const filtered = useMemo(() => {
let r = data.filter(p => {
if (statusFilter === 'has-posts') { if (postCountFor(p.id) === 0) return false; }
else if (statusFilter === 'never-posted') { if (postedCountFor(p.id) > 0) return false; }
else if (statusFilter === 'active') { if (!['pending', 'eligible'].includes(p.status)) return false; }
else if (statusFilter !== 'all') { if (p.status !== statusFilter) return false; }
if (brands.length && !brands.includes(p.brand)) return false;
if (p.score < minScore) return false;
if (minCoupon > 0 && (p.couponPercent || 0) < minCoupon) return false;
if (watchOnly && !p.watchlistMatch) return false;
if (confidence !== 'all' && (p.confidence || 'medium') !== confidence) return false;
if (maxVnd > 0 && (p.priceVnd || p.vnd) > maxVnd) return false;
if (q) {
const hay = (p.titleVn + ' ' + p.titleJp + ' ' + p.sku + ' ' + p.url).toLowerCase();
if (!hay.includes(q.toLowerCase())) return false;
}
return true;
});
r = [...r].sort((a, b) => {
if (sort === 'score') return (b.score ?? -1) - (a.score ?? -1);
if (sort === 'price') return (a.priceVnd || a.vnd) - (b.priceVnd || b.vnd);
return 0;
});
return r;
}, [data, statusFilter, brands, minScore, minCoupon, watchOnly, confidence, maxVnd, q, sort]);
// Counts per status — for badge in dropdown
const statusCounts = useMemo(() => {
const c = { all: data.length, active: 0, pending: 0, eligible: 0, invalid: 0, skipped: 0, archived: 0, 'has-posts': 0, 'never-posted': 0 };
data.forEach(p => {
c[p.status] = (c[p.status] || 0) + 1;
if (['pending', 'eligible'].includes(p.status)) c.active++;
if (postCountFor(p.id) > 0) c['has-posts']++;
if (postedCountFor(p.id) === 0) c['never-posted']++;
});
return c;
}, [data]);
const applyPreset = (preset) => {
setActivePreset(preset.id);
const Q = preset.query;
setQ(''); setStatusFilter('active'); setBrands([]);
setMinScore(Q.minScore || 0);
setMinCoupon(Q.minCouponPercent || 0);
setWatchOnly(!!Q.watchlistOnly);
setConfidence(Q.confidence || 'all');
setMaxVnd(Q.maxPriceVnd || 0);
app.toast && app.toast('Đã áp dụng preset "' + preset.name + '"', preset.icon, preset.color);
};
// keyboard nav
useEffectP(() => {
const h = (e) => {
if (open || app.modalOpen) return;
if (e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA') return;
const max = filtered.length - 1;
if (e.key === 'j') { e.preventDefault(); setCursor(c => Math.min(max, c + 1)); }
else if (e.key === 'k') { e.preventDefault(); setCursor(c => Math.max(0, c - 1)); }
else if (e.key === 'a' && filtered[cursor]) { approve(filtered[cursor]); }
else if (e.key === 's' && filtered[cursor]) { skip(filtered[cursor]); }
else if (e.key === 'Enter' && filtered[cursor]) { setOpen(filtered[cursor]); }
};
window.addEventListener('keydown', h);
return () => window.removeEventListener('keydown', h);
}, [filtered, cursor, open, app.modalOpen]);
// Product becomes eligible. Post creation happens in Content hub (WF03).
const approve = (p) => {
setData(d => d.map(x => x.id === p.id ? { ...x, status: 'eligible' } : x));
app.toast(`Đã duyệt "${p.titleVn.slice(0, 24)}…", sẵn sàng tạo bài`, 'check', 'var(--green)');
};
const skip = (p) => {
setData(d => d.map(x => x.id === p.id ? { ...x, status: 'skipped' } : x));
app.toast('Đã bỏ qua sản phẩm', 'skip', 'var(--text-3)');
};
// Approve (if still pending) then jump into Compose wizard with this/these products pre-selected.
const goCompose = (ids) => {
const idList = Array.isArray(ids) ? ids : [ids];
setData(d => d.map(x => idList.includes(x.id) && x.status === 'pending' ? { ...x, status: 'eligible' } : x));
app.go('compose', idList);
};
const bulkApprove = () => { sel.forEach(id => { const p = data.find(x => x.id === id); if (p) approve(p); }); setSel(new Set()); };
const toggleSel = (id) => setSel(s => { const n = new Set(s); n.has(id) ? n.delete(id) : n.add(id); return n; });
const toggleBrand = (b) => setBrands(a => a.includes(b) ? a.filter(x => x !== b) : [...a, b]);
const reset = () => {
setQ(''); setStatusFilter('all'); setBrands([]); setMinScore(0);
setMinCoupon(0); setWatchOnly(false); setConfidence('all'); setMaxVnd(0);
setActivePreset(null);
};
const FilterBar = (
{/* Compact default row: Preset · Search · Status · Sort · Filter */}
{/* Expandable advanced panel */}
{advancedOpen && (
BRAND
{BRANDS.filter(b => b.enabled !== false && !b.disabledReason).map(b => (
))}
CONFIDENCE
)}
Product Pool
{filtered.length} sản phẩm · Stage-1: quyết định có đáng đăng không
Phím tắt:JK di chuyểnA duyệtS bỏ qua
{FilterBar}
{/* bulk bar */}
{sel.size > 0 && (
Đã chọn {sel.size}
)}
{filtered.length === 0 ? (
(statusFilter !== 'all' || brands.length || q || minScore) ?
:
) : isCards ? (
) : (
| 0} onChange={(v) => setSel(v ? new Set(filtered.map(p => p.id)) : new Set())} /> |
Sản phẩm |
Giá VND |
Điểm |
Trạng thái |
Bài đăng |
Nguồn |
Tác vụ |
{filtered.map((p, i) => (
toggleSel(p.id)} onOpen={() => { setCursor(i); setOpen(p); }}
approve={approve} skip={skip} setCursor={() => setCursor(i)}
isNew={app.newProductId === p.id} newRef={app.newProductId === p.id ? justAddedRef : null} />
))}
)}
{/* mobile cards (always) */}
{!isCards && filtered.length > 0 && (
)}
{open &&
setOpen(null)} approve={(p) => { approve(p); setOpen(null); }} skip={(p) => { skip(p); setOpen(null); }} goCompose={() => { setOpen(null); goCompose(open.id); }} />}
);
}
function ProductRow({ p, i, active, selected, onSel, onOpen, approve, skip, setCursor, isNew, newRef }) {
const b = brandOf(p.brand);
const confTone = p.confidence === 'high' ? 'var(--green)' : p.confidence === 'low' ? 'var(--red)' : 'var(--yellow)';
return (
| e.stopPropagation()}> |
{b.name}
{p.kind === 'manual' && Nhập tay}
{p.sku}
{p.watchlistMatch && }
{p.titleVn}
{p.titleJp}
|
{fmtVND(p.priceVnd || p.vnd)}
{p.disc > 0 && -{p.disc}%}
{p.couponPercent > 0 && coupon {p.couponPercent}%}
{p.vndOld && {fmtVND(p.vndOld)}}
|
{p.score == null
? —
: } |
|
|
{p.created}
|
e.stopPropagation()}>
{p.status === 'pending' ? (
<>
|
);
}
function PostCountCell({ pid }) {
const posted = postedCountFor(pid);
const total = postCountFor(pid);
if (total === 0) return —;
return (
0 ? 'var(--green)' : 'var(--text-2)' }}>{posted}
/ {total}
);
}
function CardGrid({ items, cursor, sel, onSel, onOpen, approve, skip, mobile, newProductId, justAddedRef }) {
return (
{items.map((p, i) => {
const b = brandOf(p.brand);
return (
onOpen(p)}>
{p.watchlistMatch && (
)}
{b.name}
{p.kind === 'manual' && Nhập tay}
{p.score == null
?
—
:
}
{p.titleVn}
{fmtVND(p.priceVnd || p.vnd)}
{p.disc > 0 && -{p.disc}%}
{p.couponPercent > 0 && {p.couponPercent}% coupon}
{postCountFor(p.id) > 0 && (
{postedCountFor(p.id)}/{postCountFor(p.id)}
)}
{p.status === 'pending' ? (
) :
}
);
})}
{[0, 1, 2].map(n =>
setImg(n)} />)}
{fmtVND(p.priceVnd || p.vnd)}
{p.disc > 0 &&
-{p.disc}%}
{p.couponPercent > 0 &&
coupon {p.couponPercent}%}
{p.watchlistMatch &&
watchlist}
{p.kind === 'manual' &&
Nhập tay}
{p.score == null
?
—
:
}
{p.validityReason && (
Sản phẩm chưa đạt điều kiện đăng: {p.validityReason}
)}
{/* ============ VND breakdown ============ */}
CƠ CẤU GIÁ VND
0 ? 'Sau coupon (¥)' : 'Giá Nhật (¥)'} value={fmtJPY(p.effectivePrice || p.jpy)} />
{p.couponPercent > 0 && }
{vbd.ship > 0 && }
{vbd.margin > 0 && }
{/* ============ Score breakdown ============ */}
DEAL SCORE BREAKDOWN
{p.score == null
?
—
:
}
{/* ============ Data confidence ============ */}
ĐỘ TIN CẬY DỮ LIỆU
{(p.confidence || 'medium').toUpperCase()}
{p.missingFields && p.missingFields.length > 0 ? (
Thiếu field:
{p.missingFields.map(f => {f})}
Caption AI có thể generic vì thiếu thông tin. Admin nên re-scrape hoặc nhập thủ công.
) : (
Đầy đủ field bắt buộc + nice-to-have.
)}
{p.url}} />
Mô tả (đã dịch)
{p.desc}
);
}
function ProductPostHistory({ pid }) {
const app = useApp();
const posts = postsForProduct(pid);
if (!posts.length) return null;
return (
BÀI VIẾT TỪ SẢN PHẨM NÀY · {posts.length}
{postedCountFor(pid)} đã đăng
{posts.map(post => {
const s = POST_STATUS[post.status] || { label: post.status, cls: 'badge-neutral' };
return (
);
})}
);
}
function PriceLine({ label, value, tone, small, strong }) {
return (
{label}
{value}
);
}
function ScoreBar({ label, value, max, color, note }) {
const pct = max > 0 ? Math.min(100, Math.round((value / max) * 100)) : 0;
return (
{label}{note && · {note}}
+{value}/{max}
);
}
function InfoRow({ label, value, mono }) {
return (
{label}
{value}
);
}
Object.assign(window, { ProductsScreen });