Tổng Accounts

{accounts.length}

đã đăng ký thành công

CSV Rows

{csvPreview?.total ?? \"—\"}

dòng dữ liệu đầu vào

Còn lại

\n {csvPreview ? Math.max(0, csvPreview.total - accounts.length) : \"—\"}\n

chưa đăng ký

Tỉ lệ

\n {csvPreview && csvPreview.total > 0\n ? Math.round((accounts.length / csvPreview.total) * 100) + \"%\"\n : \"—\"}\n

thành công

\n\n {/* Env Status */}\n

🔑 Trạng thái API Keys

KERNEL_API_KEY

Kernel.sh — browser automation

\n {envStatus\n ? \n \n {envStatus.kernel ? \"Đã cài\" : \"Chưa cài\"}\n \n : Đang kiểm tra...\n }\n

FIVESIM_API_KEY

5sim.net — mua số UK nhận OTP

\n {envStatus\n ? \n \n {envStatus.fivesim ? \"Đã cài\" : \"Chưa cài\"}\n \n : Đang kiểm tra...\n }\n

OPENAI_API_KEY

OpenAI — chuẩn hoá dữ liệu (tuỳ chọn)

\n {envStatus\n ? \n \n {envStatus.openai ? \"Đã cài\" : \"Không bắt buộc\"}\n \n : Đang kiểm tra...\n }\n

\n {envStatus && !envOk && (\n

\n ⚠️ Vào Settings → Environment Variables để thêm API keys còn thiếu trước khi chạy.\n

\n )}\n

\n\n {/* CSV Preview */}\n {csvPreview && (\n

📋 Dữ liệu CSV

✅ {csvPreview.total} dòng

\n {csvPreview.rows.length > 0 && (\n

\n \n \n \n {Object.keys(csvPreview.rows[0]).slice(0, 6).map(k => )}\n \n \n \n {csvPreview.rows.map((r, i) => (\n \n {Object.values(r).slice(0, 6).map((v: any, j) => (\n \n ))}\n \n ))}\n \n

{k}
{String(v).substring(0, 30)}

\n Hiển thị 5/{csvPreview.total} dòng đầu\n

\n )}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Run Automation\n// ══════════════════════════════════════════════════════════════════════════\nfunction RunPage({ envStatus, showToast }: { envStatus: EnvStatus | null; showToast: (m: string, t?: string) => void }) {\n const [running, setRunning] = useState(false);\n const [logs, setLogs] = useState([]);\n const logRef = useRef(null);\n\n const envOk = envStatus && envStatus.kernel && envStatus.fivesim;\n\n const addLog = (line: string) => setLogs(prev => [...prev.slice(-200), line]);\n\n const handleRun = async () => {\n setRunning(true);\n setLogs([]);\n addLog(\"⏳ Gửi lệnh khởi động automation...\");\n try {\n const res = await fetch(\"/api/run\", { method: \"POST\" });\n const data = await res.json();\n if (!res.ok) {\n addLog(`❌ Lỗi: ${data.error}`);\n showToast(data.error, \"error\");\n setRunning(false);\n return;\n }\n addLog(\"✅ \" + data.message);\n addLog(\"📋 Theo dõi tiến trình trong tab Logs của Val Town.\");\n addLog(\"👁️ Live View URL sẽ hiển thị trong logs — mở trên máy để xem trình duyệt.\");\n showToast(\"Automation đã khởi động!\", \"success\");\n } catch (e: any) {\n addLog(`❌ Lỗi kết nối: ${e.message}`);\n showToast(\"Lỗi kết nối server\", \"error\");\n }\n setRunning(false);\n };\n\n // Auto scroll logs\n useEffect(() => {\n if (logRef.current) logRef.current.scrollTop = logRef.current.scrollHeight;\n }, [logs]);\n\n return (\n

🚀 Khởi động Automation

Hệ thống sẽ tạo trình duyệt Kernel, đăng ký từng tài khoản eBay
theo dữ liệu CSV và lưu kết quả vào Blob Storage.

\n \n {!envOk && (\n

\n ⚠️ Cần cài đủ API Keys trước khi chạy\n

\n )}\n

\n\n

\n 📟 Output\n \n

\n {logs.length === 0\n ? // Output sẽ hiển thị ở đây sau khi nhấn chạy...\n : logs.map((line, i) => (\n {line}{\"\\n\"}\n ))\n }\n

\n\n

ℹ️ Luồng hoạt động

\n {[\n [\"1\", \"📥\", \"Tải dữ liệu từ Google Sheets CSV\"],\n [\"2\", \"🛡️\", \"Lọc email đã đăng ký (từ Blob Storage)\"],\n [\"3\", \"🧠\", \"AI Agent (OpenAI) chuẩn hoá dữ liệu (nếu có key)\"],\n [\"4\", \"👤\", \"Tạo Kernel Profile + ISP Proxy (US)\"],\n [\"5\", \"🖥️\", \"Khởi động Chrome qua CDP + Extension NopeCHA\"],\n [\"6\", \"📝\", \"Điền form đăng ký eBay + xử lý CAPTCHA tự động\"],\n [\"7\", \"📞\", \"Mua số UK từ 5SIM, nhận OTP\"],\n [\"8\", \"💾\", \"Lưu account thành công vào Blob Storage\"],\n [\"9\", \"🧹\", \"Dọn dẹp browser session\"],\n ].map(([num, icon, text]) => (\n

\n {num}\n {icon}\n {text}\n

\n ))}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Accounts\n// ══════════════════════════════════════════════════════════════════════════\nfunction AccountsPage({ accounts, onRefresh, onClear, loading, showToast }:\n { accounts: Account[]; onRefresh: () => void; onClear: () => void; loading: boolean; showToast: (m: string, t?: string) => void }) {\n\n const [confirmClear, setConfirmClear] = useState(false);\n\n const handleClear = async () => {\n if (!confirmClear) { setConfirmClear(true); return; }\n await onClear();\n setConfirmClear(false);\n showToast(\"Đã xoá toàn bộ lịch sử\", \"success\");\n };\n\n const exportCSV = () => {\n const header = \"email,name,phone,profile,sessionId,proxyId\";\n const rows = accounts.map(a =>\n `${a.email},${a.name},${a.phone},${a.profile},${a.sessionId},${a.proxyId}`\n );\n const blob = new Blob([[header, ...rows].join(\"\\n\")], { type: \"text/csv\" });\n const url = URL.createObjectURL(blob);\n const a = document.createElement(\"a\");\n a.href = url; a.download = \"ebay_accounts.csv\"; a.click();\n showToast(\"Đã xuất CSV!\", \"success\");\n };\n\n return (\n

\n \n ✅ {accounts.length} accounts\n \n

\n \n {accounts.length > 0 && (\n <>\n \n \n \n )}\n

\n\n {accounts.length === 0 ? (\n

🗃️

Chưa có account nào được đăng ký thành công

\n ) : (\n

\n \n \n \n \n \n \n \n \n \n \n \n {accounts.map((a, i) => (\n \n \n \n \n \n \n \n ))}\n \n

#	Email	Họ tên	Số ĐT	Kernel Profile
{i + 1}	{a.email}	{a.name \|\| —}	{a.phone \|\| \"—\"}	{a.profile \|\| \"—\"}

\n )}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// PAGE: Settings / Help\n// ══════════════════════════════════════════════════════════════════════════\nfunction SettingsPage() {\n return (\n

📖 Hướng dẫn thiết lập

\n {[\n {\n title: \"1. Kernel API Key\",\n color: \"#60a5fa\",\n content: \"Truy cập kernel.sh → Đăng ký → Settings → API Keys → Tạo key mới → Copy → Dán vào Environment Variables với tên KERNEL_API_KEY\",\n },\n {\n title: \"2. 5SIM API Key\",\n color: \"#a78bfa\",\n content: \"Truy cập 5sim.net → Đăng ký → Nạp tiền → Profile → API → Copy API key → Dán vào Environment Variables với tên FIVESIM_API_KEY\",\n },\n {\n title: \"3. OpenAI API Key (tuỳ chọn)\",\n color: \"#34d399\",\n content: \"Truy cập platform.openai.com → API Keys → Create new → Dán vào OPENAI_API_KEY. Nếu không có, dữ liệu CSV sẽ được dùng trực tiếp.\",\n },\n {\n title: \"4. Cách thêm Environment Variables\",\n color: \"#fbbf24\",\n content: \"Trong Val Town: Vào val ebay-auto-register → Sidebar trái → Environment Variables → Add → Nhập key và value → Save\",\n },\n ].map((s, i) => (\n

{s.title}

{s.content}

\n ))}\n

\n\n

⚙️ Cấu hình hệ thống

\n {[\n [\"Extension NopeCHA ID\", \"bvzghdhbf3xml4koj0ryih1c\"],\n [\"Proxy\", \"ISP — Mỹ (US)\"],\n [\"Viewport\", \"414 × 896 (mobile)\"],\n [\"Số ĐT\", \"England (+44)\"],\n [\"Blob Key\", \"ebay_success_accounts\"],\n [\"Timeout browser\", \"3600 giây / session\"],\n ].map(([k, v]) => (\n

\n {k}\n {v}\n

\n ))}\n

\n );\n}\n\n// ══════════════════════════════════════════════════════════════════════════\n// APP ROOT\n// ══════════════════════════════════════════════════════════════════════════\nfunction App() {\n const [page, setPage] = useState(\"dashboard\");\n const [envStatus, setEnvStatus] = useState(null);\n const [accounts, setAccounts] = useState([]);\n const [csvPreview, setCsvPreview] = useState(null);\n const [loading, setLoading] = useState(false);\n const { toasts, show: showToast } = useToast();\n\n const fetchAll = useCallback(async () => {\n setLoading(true);\n try {\n const [envRes, accRes, csvRes] = await Promise.all([\n fetch(\"/api/status\").then(r => r.json()),\n fetch(\"/api/accounts\").then(r => r.json()),\n fetch(\"/api/csv-preview\").then(r => r.json()),\n ]);\n setEnvStatus(envRes);\n setAccounts(accRes.accounts ?? []);\n if (!csvRes.error) setCsvPreview(csvRes);\n } catch (_) {}\n setLoading(false);\n }, []);\n\n useEffect(() => { fetchAll(); }, []);\n\n const clearAccounts = async () => {\n await fetch(\"/api/accounts\", { method: \"DELETE\" });\n setAccounts([]);\n };\n\n const navItems = [\n { id: \"dashboard\", icon: \"📊\", label: \"Dashboard\" },\n { id: \"run\", icon: \"▶️\", label: \"Chạy Automation\" },\n { id: \"accounts\", icon: \"🗂️\", label: \"Accounts\" },\n { id: \"settings\", icon: \"⚙️\", label: \"Thiết lập\" },\n ];\n\n return (\n

\n {/* Header */}\n

🛒

eBay Auto Register

Kernel × Playwright × 5SIM × AI

\n {loading && }\n \n \n {!envStatus ? \"Đang kiểm tra...\" : (envStatus.kernel && envStatus.fivesim ? \"Sẵn sàng\" : \"Thiếu API Key\")}\n \n \n

\n\n {/* Main */}\n

\n {/* Sidebar */}\n

\n ))}\n\n {/* Sidebar bottom */}\n

Accounts: {accounts.length}

CSV rows: {csvPreview?.total ?? \"—\"}

\n \n\n {/* Content */}\n

\n {page === \"dashboard\" && (\n \n )}\n {page === \"run\" && (\n \n )}\n {page === \"accounts\" && (\n \n )}\n {page === \"settings\" && }\n

\n\n {/* Toasts */}\n

\n {toasts.map(t => (\n

\n {t.type === \"success\" ? \"✅\" : t.type === \"error\" ? \"❌\" : \"ℹ️\"}\n {t.msg}\n

\n ))}\n

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")!).render();\n","deleted","label",[178,161],"frontend","permalink","https://www.val.town/x/saidsmoldercold/ebay-auto-register/code/frontend/app.tsx","extension","tsx","actionData","errors"]