SHOPMMO ADMIN

Quản lý Bot Telegram

Quản lý bot, menu, tài khoản nhận tiền và sản phẩm được phép hiển thị.

{error &&

{error}

} {message &&

{message}

} {tab === 'overview' &&

{readiness?.status || 'Đang kiểm tra'}

{readiness?.failed?.join(', ') || 'Đã đạt điều kiện cơ bản.'}

{payment?.paymentAccountStatus || 'Chưa có'}

{payment?.paymentAccountMasked || 'Chưa chọn tài khoản nhận tiền'}

} {tab === 'config' &&

Cấu hình bot

Mã bot là tên người dùng trên Telegram. Địa chỉ máy chủ là URL API công khai; địa chỉ nội bộ là URL backend trong Docker. Khóa bảo mật là HMAC dùng để ký request giữa bot và backend, không phải mật khẩu hay token Telegram.

{config &&

updateConfig('displayName', value)} /> updateConfig('botUsername', value)} /> updateConfig('backendBaseUrl', value)} /> updateConfig('internalApiUrl', value)} /> updateConfig('pollingEnabled', value)} /> updateConfig('botEnabled', value)} />

}

Thay khóa bảo mật

Token Telegram lấy từ BotFather. Khóa HMAC phải giống nhau ở bot và backend. Không dán các giá trị này vào báo cáo hoặc chat.

Mã bot Telegram (token BotFather) setSecret({ ...secret, botToken: event.target.value })} />Khóa HMAC kết nối bot setSecret({ ...secret, hmacSecret: event.target.value })} />

} {tab === 'menu' &&

Chỉnh sửa chữ trên menu Telegram

Bạn có thể đổi biểu tượng và nội dung từng nút. Bot sẽ dùng nội dung mới từ lần mở menu tiếp theo.

{Object.entries(menu).map(([key, value]) => setMenu({ ...menu, [key]: next })} />)}

} {tab === 'payment' &&

Cấu hình QR nạp tiền

{payment &&

updatePayment('depositPrefix', value)} /> updatePayment('minDepositAmount', Number(value))} /> updatePayment('maxDepositAmount', Number(value))} /> updatePayment('depositExpiryMinutes', Number(value))} />Tài khoản nhận tiền updatePayment('enabled', value)} /> updatePayment('qrEnabled', value)} />

}

Mã QR cần tài khoản nhận tiền đang hoạt động, có mã ngân hàng VietQR và số tài khoản.

Thêm tài khoản ngân hàng

setNewAccount({ ...newAccount, accountName: value })} /> setNewAccount({ ...newAccount, accountNumber: value })} /> setNewAccount({ ...newAccount, bankCode: value.toUpperCase() })} /> setNewAccount({ ...newAccount, bankName: value })} />

Tài khoản nhận tiền hiện có

{accounts.map((account) => {account.status === 'ACTIVE' ? 'Đang dùng' : account.status}} />)}

} {tab === 'catalog' &&

Danh mục và kho riêng của Telegram

Các sản phẩm tại đây do Admin quản lý riêng, không lấy từ gian hàng người bán trên website.

{catalogSection === 'categories' &&

setCategoryForm({ ...categoryForm, name: value })} /> setCategoryForm({ ...categoryForm, icon: value })} /> setCategoryForm({ ...categoryForm, description: value })} />

{categories.map((category) => {category.enabled ? 'Đang hiện' : 'Đã ẩn'}} />)}

}{catalogSection === 'products' &&

Danh mục setProductForm({ ...productForm, name: value })} /> setProductForm({ ...productForm, price: value })} /> setProductForm({ ...productForm, description: value })} /> setProductForm({ ...productForm, minQuantity: value })} /> setProductForm({ ...productForm, maxQuantity: value })} /> setProductForm({ ...productForm, quantityStep: value })} /> setProductForm({ ...productForm, maxQuantityPerUserPerDay: value })} /> setProductForm({ ...productForm, allowCustomQuantity: event.target.checked })} /> Cho phép khách tự nhập số lượng

{products.map((product) => void toggleProduct(product)} className="rounded-lg bg-white/10 px-3 py-2 text-xs">{product.enabled ? 'Đang hiện' : 'Đã ẩn'}} />)}

}{catalogSection === 'inventory' &&

Chọn sản phẩm

setInventoryText(event.target.value)} /><button type="button" onClick={() => void importInventory()} className="rounded-lg bg-emerald-500 px-4 py-2 font-bold text-slate-950">Nhập kho từ văn bản</button><label className="space-y-1 text-sm"><span className="text-zinc-400">Hoặc nhập kho từ tệp ZIP (mỗi thư mục là một sản phẩm)</span><input type="file" accept=".zip,application/zip" onChange={(event) => setInventoryZip(event.target.files?.[0] || null)} /></label><button type="button" onClick={() => void importInventoryZip()} disabled={!inventoryZip} className="rounded-lg bg-cyan-500 px-4 py-2 font-bold text-slate-950 disabled:opacity-50">Nhập kho từ ZIP</button>{inventory.batches.map((batch) => <Row key={batch.id} title={batch.batchCode} detail={`${batch.status} · Tổng ${batch.totalItems} · Còn ${batch.availableItems} · Đã bán ${batch.soldItems}`} />)}{inventory.items.map((item) => <Row key={item.id} title={item.inventoryCode} detail={`Mã kiểm tra: ${item.checksum || 'Không có'}`} action={<span className="text-xs text-zinc-400">{item.status}</span>} />)}</div>}{catalogSection === 'orders' && <List title="Đơn hàng Telegram"><p className="text-sm text-zinc-400">Danh sách đơn hàng Telegram được hiển thị qua API quản trị. Không cho phép chỉnh sửa số dư trực tiếp từ màn hình này.</p></List>}</section>}
    {tab === 'users' && <div className="space-y-4"><List title="Người dùng Telegram">{users.map((user) => <Row key={user.telegramUserId || user.user.username} title={user.user.name || user.user.username || 'Người dùng'} detail={`${user.telegramUsername ? `@${user.telegramUsername} · ` : ''}${user.user.role.name}`} action={<div className="flex gap-2">{user.telegramUserId && <button type="button" onClick={() => void showUserDetail(user)} className="rounded-lg bg-cyan-500/20 px-3 py-2 text-xs text-cyan-200">Xem chi tiết</button>}{user.telegramUserId && <button type="button" onClick={() => void toggleUser(user)} className="rounded-lg bg-white/10 px-3 py-2 text-xs">{user.isActive ? 'Khóa' : 'Mở khóa'}</button>}</div>} />)}</List>{selectedUser && userDetail && <UserDetails detail={userDetail} />}</div>}
    {tab === 'audit' && <List title="Lịch sử thao tác">{audit.map((item) => <Row key={item.id} title={item.action} detail={`${item.entity} · ${new Date(item.createdAt).toLocaleString('vi-VN')}`} />)}</List>}
    {tab === 'catalog' && <CatalogDeletePanel />}
  </main>;
}

function CatalogDeletePanel() {
  const [categories, setCategories] = useState<CatalogCategory[]>([]);
  const [products, setProducts] = useState<Product[]>([]);
  const [productId, setProductId] = useState('');
  const [items, setItems] = useState<Array<{ id: string; inventoryCode: string; status: string }>>([]);
  const [notice, setNotice] = useState('');

const load = async () => {
    const [categoryResponse, productResponse] = await Promise.all([api.get('/admin/telegram/catalog/categories'), api.get('/admin/telegram/catalog/products')]);
    setCategories(categoryResponse.data || []);
    setProducts(productResponse.data || []);
  };
  useEffect(() => { void load(); }, []);

return <section className="space-y-4 rounded-2xl border border-red-400/20 bg-red-400/5 p-5"><div><h2 className="font-black">Xoá dữ liệu kho Telegram</h2><p className="mt-1 text-xs text-zinc-400">Chỉ xoá sau khi xác nhận. Danh mục có sản phẩm và sản phẩm đã phát sinh đơn hàng sẽ bị hệ thống chặn xoá.</p></div>{notice && <p className="rounded-lg bg-white/10 p-3 text-sm text-amber-200">{notice}</p>}<div className="space-y-2">{categories.map((category) => <Row key={category.id} title={category.name} detail={`${category.productCount} sản phẩm`} action={<button type="button" onClick={() => void removeCategory(category)} className="rounded-lg bg-red-500/15 px-3 py-2 text-xs text-red-300">Xoá danh mục</button>} />)}</div><div className="space-y-2">{products.map((product) => <Row key={product.id} title={product.name} detail={`${product.category.name} · Kho ${product.stock}`} action={<button type="button" onClick={() => void removeProduct(product)} className="rounded-lg bg-red-500/15 px-3 py-2 text-xs text-red-300">Xoá sản phẩm</button>} />)}</div><label className="block space-y-2 text-sm"><span className="text-zinc-400">Chọn sản phẩm để xoá từng hàng</span><select className="w-full rounded-lg border border-white/10 bg-black/30 p-3" value={productId} onChange={(event) => void loadItems(event.target.value)}><option value="">Chọn sản phẩm</option>{products.map((product) => <option key={product.id} value={product.id}>{product.name}</option>)}</select></label>{items.map((item) => <Row key={item.id} title={item.inventoryCode} detail={item.status} action={<button type="button" disabled={item.status === 'SOLD' || item.status === 'RESERVED'} onClick={() => void removeItem(item)} className="rounded-lg bg-red-500/15 px-3 py-2 text-xs text-red-300 disabled:opacity-40">Xoá hàng</button>} />)}</section>;
}