API Gateway

●

\n \n

5sim Balance

\n {health && health.fivesim && health.fivesim.balance != null\n ? \"$\" + Number(health.fivesim.balance).toFixed(2)\n : \"—\"}\n

\n \n {health && health.fivesim && health.fivesim.email &&\n

{health.fivesim.email}

}\n

2Captcha Balance

\n {health && health.twocaptcha && health.twocaptcha.balance != null\n ? \"$\" + Number(health.twocaptcha.balance).toFixed(2)\n : \"—\"}\n

\n \n

Accounts

{health ? (health.accounts || \"0\") : \"—\"}

Tổng số tài khoản

\n\n {health && health.fivesim && !health.fivesim.ok &&\n

⚠️ 5sim: {health.fivesim.error} — Kiểm tra API key tại tab Cấu hình

}\n {health && health.twocaptcha && !health.twocaptcha.ok &&\n

⚠️ 2Captcha: {health.twocaptcha.error} — Cập nhật key tại tab Cấu hình

}\n\n

\n 🌐 Test Browserbase\n

\n Tạo session Chrome trên Browserbase, mở Google và trả về title. Dùng để xác nhận kết nối hoạt động.\n

\n {testResult && (\n

\n {testResult.success ? (\n <>\n ✓ Thành công — Title: {testResult.title}
\n {testResult.replayUrl &&\n ▶ Xem replay session}\n \n ) : \"✗ \" + testResult.error}\n

\n )}\n \n

\n\n

\n 📊 Thông tin hệ thống\n \n

\n {[\n [\"Browserbase\", \"Startup Plan\"],\n [\"SMS\", \"5sim.net (JWT)\"],\n [\"Captcha\", \"2Captcha\"],\n [\"AI Model\", \"GPT-5 via proxy\"],\n [\"Database\", \"SQLite (scoped)\"],\n [\"Runtime\", \"Deno / Val Town\"],\n ].map(([k, v]) => (\n

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

\n ))}\n {health && health.timestamp &&\n

\n Cập nhật: {new Date(health.timestamp).toLocaleTimeString(\"vi-VN\")}\n

}\n

\n );\n}\n\n// ─── ACCOUNTS ────────────────────────────────────────────────────────────────\n\nfunction AccountsTab() {\n const [accounts, setAccounts] = useState([]);\n const [loading, setLoading] = useState(true);\n const [platform, setPlatform] = useState(\"\");\n const [status, setStatus] = useState(\"\");\n\n const load = useCallback(async () => {\n setLoading(true);\n try {\n const params = new URLSearchParams();\n if (platform) params.set(\"platform\", platform);\n if (status) params.set(\"status\", status);\n const r = await api(\"/accounts?\" + params);\n setAccounts(r.accounts || []);\n } catch (e) { console.error(e); }\n setLoading(false);\n }, [platform, status]);\n\n useEffect(() => { load(); }, [load]);\n\n return (\n

\n 👤 Danh sách tài khoản\n

\n \n \n \n

\n {loading ? (\n

⏳

Đang tải...

\n ) : accounts.length === 0 ? (\n

👤

Chưa có tài khoản nào

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

ID	Platform	Username	Email	Phone	Status	Created
{a.id}	{a.platform}	{a.username \|\| \"—\"}	{a.email \|\| \"—\"}	{a.phone \|\| \"—\"}	● {a.status}	\n {new Date(a.created_at).toLocaleString(\"vi-VN\")}\n

\n )}\n

\n );\n}\n\n// ─── TASKS ────────────────────────────────────────────────────────────────────\n\nfunction TasksTab() {\n const [logs, setLogs] = useState([]);\n const [loading, setLoading] = useState(true);\n const [showModal, setShowModal] = useState(false);\n const [form, setForm] = useState({ platform: \"google\", country: \"any\", operator: \"any\" });\n const [running, setRunning] = useState(false);\n const [result, setResult] = useState(null);\n\n const loadLogs = useCallback(async () => {\n try {\n const r = await api(\"/logs?limit=50\");\n setLogs(r.logs || []);\n } catch (e) { console.error(e); }\n setLoading(false);\n }, []);\n\n useEffect(() => {\n loadLogs();\n const iv = setInterval(loadLogs, 8000);\n return () => clearInterval(iv);\n }, [loadLogs]);\n\n const runRegister = async () => {\n setRunning(true);\n setResult(null);\n try {\n const r = await api(\"/task/register\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(form),\n });\n setResult(JSON.stringify(r, null, 2));\n loadLogs();\n } catch (e) {\n setResult(\"Lỗi: \" + e.message);\n }\n setRunning(false);\n };\n\n const statusColor = (s) => s === \"success\" ? \"var(--green)\" : s === \"failed\" ? \"var(--red)\" : \"var(--yellow)\";\n\n return (\n

\n \n \n

\n\n

\n 📋 Task Logs\n Tự động refresh 8s\n

\n {loading ? (\n

⏳

\n ) : logs.length === 0 ? (\n

📭

Chưa có task nào. Bấm \"+ Tạo Task\".

\n ) : (\n \n \n \n \n \n {logs.map(l => (\n \n \n \n \n \n \n \n \n \n ))}\n \n

ID	Type	Platform	Status	Bắt đầu	Kết thúc	Replay
{l.id}	{l.task_type}	{l.platform ? {l.platform} : \"—\"}	● {l.status}	{new Date(l.started_at).toLocaleString(\"vi-VN\")}	{l.finished_at ? new Date(l.finished_at).toLocaleString(\"vi-VN\") : \"—\"}	\n {l.bb_session\n ? ▶ Replay\n : \"—\"}\n

\n )}\n

\n\n {showModal && (\n

e.target === e.currentTarget && setShowModal(false)}>\n

\n ➕ Tạo Task Đăng Ký\n \n

\n ℹ️ Flow: mua số 5sim → mở trình duyệt → điền form → nhập OTP → lưu tài khoản\n

\n Platform *\n \n

⚠️ Chỉ Google có flow đầy đủ. Platform khác cần thêm code.

\n 5sim Country\n setForm(f => ({ ...f, country: e.target.value }))}\n placeholder=\"any, vietnam, russia...\" />\n

\n 5sim Operator\n setForm(f => ({ ...f, operator: e.target.value }))}\n placeholder=\"any, viettel, beeline...\" />\n

\n {result && (\n

Kết quả:

{result}

\n )}\n

\n \n \n

\n )}\n

\n );\n}\n\n// ─── CSV ──────────────────────────────────────────────────────────────────────\n\nfunction CsvTab() {\n const [files, setFiles] = useState([]);\n const [loading, setLoading] = useState(true);\n const [uploading, setUploading] = useState(false);\n const [msg, setMsg] = useState(null);\n const [csvName, setCsvName] = useState(\"\");\n const fileRef = useRef(null);\n\n const load = async () => {\n try {\n const r = await api(\"/csv/list\");\n setFiles(r.files || []);\n } catch (e) { console.error(e); }\n setLoading(false);\n };\n\n useEffect(() => { load(); }, []);\n\n const upload = async () => {\n const file = fileRef.current && fileRef.current.files && fileRef.current.files[0];\n if (!file) { setMsg({ type: \"error\", text: \"Chọn file CSV trước\" }); return; }\n setUploading(true);\n setMsg(null);\n try {\n const fd = new FormData();\n fd.append(\"file\", file);\n fd.append(\"name\", csvName || file.name.replace(\".csv\", \"\"));\n const res = await fetch(\"/csv/upload\", { method: \"POST\", body: fd });\n const r = await res.json();\n if (r.success) {\n setMsg({ type: \"success\", text: \"✓ Upload thành công: \" + r.rowCount + \" hàng\" });\n load();\n if (fileRef.current) fileRef.current.value = \"\";\n setCsvName(\"\");\n } else {\n setMsg({ type: \"error\", text: r.error || \"Lỗi upload\" });\n }\n } catch (e) {\n setMsg({ type: \"error\", text: e.message });\n }\n setUploading(false);\n };\n\n return (\n

\n 📤 Upload CSV\n

\n {msg &&

{msg.text}

}\n

\n File CSV *\n \n

\n Tên file (tuỳ chọn)\n setCsvName(e.target.value)} />\n

\n \n

\n\n

\n 📁 CSV Files\n \n

\n {loading ? (\n

⏳

\n ) : files.length === 0 ? (\n

📂

Chưa có file CSV nào

\n ) : (\n \n \n \n {files.map(f => (\n \n \n \n \n \n \n ))}\n \n

Tên	Số hàng	Cập nhật	Tải về
{f.name}	{f.row_count} rows	{new Date(f.updated_at).toLocaleString(\"vi-VN\")}	\n \n ⬇ Download\n \n

\n )}\n

\n );\n}\n\n// ─── CONFIG ───────────────────────────────────────────────────────────────────\n\nfunction ConfigTab({ onSaved }) {\n const [options, setOptions] = useState({ proxies: false, keepAlive: false, stealth: false });\n const [envSet, setEnvSet] = useState({});\n const [loading, setLoading] = useState(true);\n const [saving, setSaving] = useState(false);\n const [testing, setTesting] = useState(false);\n const [msg, setMsg] = useState(null);\n const [testResult, setTestResult] = useState(null);\n\n useEffect(() => {\n api(\"/config/browserbase\")\n .then(r => {\n if (r.config) setOptions({ proxies: r.config.proxies, keepAlive: r.config.keepAlive, stealth: r.config.stealth });\n if (r.envSet) setEnvSet(r.envSet);\n setLoading(false);\n })\n .catch(() => setLoading(false));\n }, []);\n\n const save = async () => {\n setSaving(true);\n setMsg(null);\n try {\n await api(\"/config/browserbase\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(options),\n });\n setMsg({ type: \"success\", text: \"✓ Đã lưu tuỳ chọn session\" });\n onSaved();\n } catch (e) {\n setMsg({ type: \"error\", text: e.message });\n }\n setSaving(false);\n };\n\n const testConn = async () => {\n setTesting(true);\n setTestResult(null);\n try {\n const r = await api(\"/task/browser-test\", { method: \"POST\" });\n setTestResult({ ok: r.success, msg: r.success ? '✓ Kết nối OK — title: \"' + r.title + '\"' : \"✗ \" + r.error });\n } catch (e) {\n setTestResult({ ok: false, msg: \"✗ \" + e.message });\n }\n setTesting(false);\n };\n\n if (loading) return

⏳

;\n\n const keys = [\n { key: \"BROWSERBASE_API_KEY\", desc: \"Browserbase API Key\", link: \"https://browserbase.com/settings\" },\n { key: \"BROWSERBASE_PROJECT_ID\", desc: \"Browserbase Project ID\", link: \"https://browserbase.com/overview\" },\n { key: \"FIVESIM_API_KEY\", desc: \"5sim JWT Token\", link: \"https://5sim.net/settings/profile\" },\n { key: \"TWOCAPTCHA_API_KEY\", desc: \"2Captcha API Key (32 ký tự)\", link: \"https://2captcha.com/setting\" },\n { key: \"OPENAI_API_KEY\", desc: \"OpenAI Proxy Key\", link: \"https://proxy.simpleverse.io.vn\" },\n ];\n\n const toggles = [\n { key: \"proxies\", label: \"Sử dụng Proxy\", desc: \"Dùng residential proxy của Browserbase\" },\n { key: \"keepAlive\", label: \"Keep Alive\", desc: \"Giữ session mở sau khi disconnect\" },\n { key: \"stealth\", label: \"Stealth Mode\", desc: \"Chống phát hiện bot (Startup plan+)\" },\n ];\n\n return (\n

\n 🌐 Browserbase Session Options\n Docs ↗\n

\n {msg &&

{msg.text}

}\n

\n ℹ️ API Keys được lưu qua Val Town → bb_agent → Settings → Environment Variables (mã hóa, không thể đọc lại).\n

\n\n {toggles.map(({ key, label, desc }) => (\n

{label}

{desc}

\n \n setOptions(o => ({ ...o, [key]: e.target.checked }))} />\n \n \n

\n ))}\n\n

\n \n \n

\n {testResult && (\n

\n {testResult.msg}\n

\n )}\n

\n\n

\n 🔑 Trạng thái API Keys\n

\n ⚠️ Để cập nhật key: val.town → x/minhnguyen00/bb_agent → Settings → Env Vars\n

\n {keys.map(({ key, desc, link }) => (\n

{key}

\n {desc} — {envSet[key]\n ? ✓ Đã set\n : ✗ Chưa set}\n

\n \n Lấy key ↗\n \n

\n ))}\n

\n );\n}\n\n// ─── ROOT APP ─────────────────────────────────────────────────────────────────\n\nconst TABS = [\n { id: \"dashboard\", icon: \"📊\", label: \"Dashboard\" },\n { id: \"accounts\", icon: \"👤\", label: \"Accounts\" },\n { id: \"tasks\", icon: \"⚡\", label: \"Tasks\" },\n { id: \"csv\", icon: \"📁\", label: \"CSV\" },\n { id: \"config\", icon: \"⚙️\", label: \"Cấu hình\" },\n];\n\nconst TAB_TITLES = {\n dashboard: \"Dashboard\",\n accounts: \"Quản lý Accounts\",\n tasks: \"Task Manager\",\n csv: \"CSV Manager\",\n config: \"Cấu hình hệ thống\",\n};\n\nfunction App() {\n const [tab, setTab] = useState(\"dashboard\");\n const [health, setHealth] = useState(null);\n const [loadingHealth, setLoadingHealth] = useState(true);\n\n const loadHealth = useCallback(async () => {\n setLoadingHealth(true);\n try {\n const r = await api(\"/health\");\n setHealth(r);\n } catch (e) { console.error(e); }\n setLoadingHealth(false);\n }, []);\n\n useEffect(() => {\n const splash = document.getElementById(\"splash\");\n if (splash) splash.classList.add(\"hidden\");\n loadHealth();\n const iv = setInterval(loadHealth, 30000);\n return () => clearInterval(iv);\n }, [loadHealth]);\n\n return (\n <>\n \n

\n \n\n

{TAB_TITLES[tab]}

\n \n {loadingHealth ? \"⟳ Đang tải...\" : health ? \"● Online\" : \"● Offline\"}\n \n

\n {tab === \"dashboard\" && }\n {tab === \"accounts\" && }\n {tab === \"tasks\" && }\n {tab === \"csv\" && }\n {tab === \"config\" && }\n

\n \n );\n}\n\ncreateRoot(document.getElementById(\"root\")).render();\n","deleted","label",[178,160],"frontend","permalink","https://www.val.town/x/minhnguyen00/bb_agent/code/frontend/App.tsx","extension","tsx","actionData","errors"]