// Users page — list + detail drawer // Matches spec: list filters by role/status, fields incl. join date & total spending; // detail page with KYC, account status, orders & disputes; actions: warn / temp ban / perm ban / unban / force logout const USER_STATUS = { active: { label: "正常", tone: "success" }, warning: { label: "警告", tone: "warn" }, suspended: { label: "封鎖中", tone: "danger" }, pending: { label: "待審核", tone: "warn" }, }; // Assume current admin is A001 (super_admin) — wired through so temp-ban / perm-ban can gate const CURRENT_ROLE = "super_admin"; const UsersPage = () => { const [tab, setTab] = useState("all"); const [query, setQuery] = useState(""); const [role, setRole] = useState("all"); const [status, setStatus] = useState("all"); const [selected, setSelected] = useState(new Set()); const [detailUser, setDetailUser] = useState(null); // action dialogs const [flaggedUserIds, setFlaggedUserIds] = useState(new Set()); const [page, setPage] = useState(0); const [msgUser, setMsgUser] = useState(null); const [tempBanUser, setTempBanUser] = useState(null); const [permBanUser, setPermBanUser] = useState(null); const [unbanUser, setUnbanUser] = useState(null); const [logoutUser, setLogoutUser] = useState(null); // violation flow state const [addPointUser, setAddPointUser] = useState(null); const [lockUser, setLockUser] = useState(null); const [violationEdits, setViolationEdits] = useState({}); // userId -> override data const toast = useToast(); const [users, setUsers] = useState(MOCK.USERS); const [usersLoading, setUsersLoading] = useState(false); const loadUsers = () => { setUsersLoading(true); fetch("/api/admin/users") .then(r => r.ok ? r.json() : null) .then(data => { if (Array.isArray(data) && data.length > 0) setUsers(data); }) .catch(() => {}) .finally(() => setUsersLoading(false)); }; useEffect(() => { loadUsers(); }, []); // Augment violations with local overrides; prefer real DB data over mock const getLiveViolation = (user) => { const base = user.violationPoints !== undefined ? { points: user.violationPoints, entries: user.violationEntries ?? [], locks: null } : getViolationData(user); const ov = violationEdits[user.id]; if (!ov) return base; return { points: ov.points ?? base.points, entries: ov.entries ?? base.entries, locks: ov.locks !== undefined ? ov.locks : base.locks, }; }; const filtered = users .filter(u => { if (tab === "artist" && u.role !== "illustrator" && u.role !== "author") return false; if (tab === "client" && u.role !== "commissioner") return false; if (tab === "pending" && u.status !== "pending") return false; if (tab === "flagged" && u.status !== "warning" && !flaggedUserIds.has(u.id)) return false; if (tab === "threshold" && !(u.status === "suspended" || getLiveViolation(u).points >= 3)) return false; if (role === "creator" && u.role !== "illustrator" && u.role !== "author") return false; else if (role !== "all" && role !== "creator" && u.role !== role) return false; if (status !== "all" && u.status !== status) return false; if (query) { const q = query.toLowerCase(); if (!u.name.toLowerCase().includes(q) && !u.id.toLowerCase().includes(q) && !u.email.toLowerCase().includes(q)) return false; } return true; }) .sort((a, b) => (flaggedUserIds.has(b.id) ? 1 : 0) - (flaggedUserIds.has(a.id) ? 1 : 0)); useEffect(() => { setPage(0); }, [tab, query, role, status]); const handleReveal = (type, userId, cb) => { cb(); toast({ title: "已記錄存取紀錄", message: `查看 ${userId} 的${type === "phone" ? "電話" : type === "bank" ? "銀行帳號" : "Email"} · 已寫入審計日誌`, icon: "scroll" }); }; const toggleFlagUser = (userId) => { setFlaggedUserIds(prev => { const next = new Set(prev); if (next.has(userId)) next.delete(userId); else next.add(userId); return next; }); }; const openAction = (action, user) => { setDetailUser(null); if (action === "flag") { toggleFlagUser(user.id); return; } else if (action === "msg") setMsgUser(user); else if (action === "tempBan") setTempBanUser(user); else if (action === "permBan") setPermBanUser(user); else if (action === "unban") setUnbanUser(user); else if (action === "logout") setLogoutUser(user); else if (action === "addPoint") setAddPointUser(user); else if (action === "lock") setLockUser(user); else if (action === "unlock") { setViolationEdits(prev => { const cur = getLiveViolation(user); return { ...prev, [user.id]: { points: cur.points, entries: cur.entries, locks: null } }; }); toast({ title: "已解除所有功能鎖定", message: `${user.name} 可恢復全部功能使用` }); } else if (action === "dismissPoint") { const { user: u, entry, currentViolation } = user; const filtered = currentViolation.entries.filter(e => e.id !== entry.id); const pointsToRemove = entry.points || entry.delta || 1; const newPoints = Math.max(0, currentViolation.points - pointsToRemove); setViolationEdits(prev => ({ ...prev, [u.id]: { points: newPoints, entries: filtered, locks: currentViolation.locks }, })); fetch(`/api/admin/users/${u.id}/violation`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ points: newPoints, entries: filtered, dismissedEntry: entry }), }).then(r => r.json()).then(d => console.log("[dismissPoint PATCH]", d)).catch(e => console.error("[dismissPoint PATCH error]", e)); logAudit("撤銷違規點數", u, { entryId: entry.id, pointsRemoved: pointsToRemove, reason: entry.reason || "" }); toast({ title: "違規已撤銷", message: `${u.name} · 點數已扣回 ${pointsToRemove} 點` }); } }; // Count how many users are at threshold const atThresholdCount = users.filter(u => getLiveViolation(u).points >= 3 && !getLiveViolation(u).locks).length; return (
u.role==="illustrator"||u.role==="author").length} 位創作者 · ${users.filter(u=>u.role==="commissioner").length} 位委託人`} actions={<> } /> {atThresholdCount > 0 && (
{atThresholdCount} 位用戶累計違規 3 點尚未處理 · 請儘速裁定鎖定範圍或封鎖帳號
)}
u.role==="illustrator"||u.role==="author").length }, { value: "client", label: "委託人", count: users.filter(u=>u.role==="commissioner").length }, { value: "pending", label: "待審核", count: users.filter(u=>u.status==="pending").length }, { value: "flagged", label: "已標記", count: users.filter(u=>u.status==="warning" || flaggedUserIds.has(u.id)).length }, { value: "threshold", label: "停權中", count: users.filter(u=>u.status==="suspended" || getLiveViolation(u).points >= 3).length }, ]} />
{/* Filter bar */}
setQuery(e.target.value)}/>
{filtered.length} 位用戶
{/* Bulk bar */} {selected.size > 0 && (
已選取 {selected.size} 位
)} setDetailUser(u)} columns={[ { title: "用戶", render: u => (
{flaggedUserIds.has(u.id) && ★}
{u.avatar.url ? : }
{u.name} {u.kycVerified && }
{u.uid ?? "—"}
) }, { title: "角色", render: u => ( u.role === "illustrator" || u.role === "author" ? 創作者 · {u.level} : 委託人 ) }, { title: "加入日期", render: u => (
{u.joinedAt}
{relativeJoinLabel(u.joinedAt)}
) }, { title: "總金額", align: "right", render: u => ( {fmtCurrency((u.role === "illustrator" || u.role === "author") ? u.revenue : (u.spent || 0))} ) }, { title: "訂單數", align: "right", render: u => {u.orders} }, { title: "違規", render: u => { const v = getLiveViolation(u); if (v.locks) return 鎖定中; if (v.points === 0) return —; const tone = v.points >= 3 ? "danger" : v.points >= 2 ? "warn" : "default"; return (
{v.points}/3 點 {v.points >= 3 && }
); } }, { title: "狀態", render: u => }, { title: "", width: 40, render: u => ( ) }, ]} rows={filtered.slice(page * 14, (page + 1) * 14)} /> setDetailUser(null)} onAction={openAction} onReveal={handleReveal} flaggedUserIds={flaggedUserIds} /> {/* === ACTION DIALOGS === */} setMsgUser(null)} onConfirm={async ({ reason }) => { await fetch(`/api/admin/users/${msgUser.id}/notify`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ type: "admin_message", content: reason }), }); toast({ title: "站內信已送出", message: `${msgUser.name} 已收到你的訊息`, icon: "mail" }); setMsgUser(null); }} title={`發送站內信 · ${msgUser?.name || ""}`} description="用戶將在通知中心收到這則訊息。" variant="info" icon="mail" confirmText="送出" requireReason reasonLabel="訊息內容" reasonPlaceholder="輸入要傳送給用戶的內容…" /> setTempBanUser(null)} onConfirm={({ reason, extraValue } = {}) => { const dur = extraValue || "7d"; const durLabel = { "3d": "3 天", "7d": "7 天", "14d": "14 天", "30d": "30 天" }[dur] || dur; fetch(`/api/admin/users/${tempBanUser.id}/ban`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "temp", duration: dur, reason }), }).then(r => r.json()).then(data => { if (data.ok) { const patch = { status: "suspended", bannedUntil: data.bannedUntil, bannedReason: reason }; setUsers(prev => prev.map(u => u.id === tempBanUser.id ? { ...u, ...patch } : u)); setDetailUser(prev => prev?.id === tempBanUser.id ? { ...prev, ...patch } : prev); } }).catch(() => {}); logAudit("暫時封鎖", tempBanUser, { reason, duration: dur }); toast({ title: "已暫時封鎖", message: `${tempBanUser.name} 已暫時封鎖 ${durLabel}` }); setTempBanUser(null); }} title={`暫時封鎖 · ${tempBanUser?.name || ""}`} description="暫時封鎖期間用戶無法登入、下訂單或發布內容。進行中的訂單會轉入糾紛處理流程。封鎖期滿自動解除。" variant="warn" icon="ban" confirmText="確認封鎖" requireReason reasonLabel="封鎖原因" reasonPlaceholder="例:連續 2 次逾期交稿且未回應客服" extraField={{ label: "封鎖期限", type: "select", options: [ { value: "3d", label: "3 天" }, { value: "7d", label: "7 天" }, { value: "14d", label: "14 天" }, { value: "30d", label: "30 天" }, ], defaultValue: "7d" }} /> setPermBanUser(null)} onConfirm={({ reason } = {}) => { fetch(`/api/admin/users/${permBanUser.id}/ban`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "permanent", reason }), }).then(r => r.json()).then(data => { if (data.ok) { const patch = { status: "suspended", bannedUntil: null, bannedReason: reason }; setUsers(prev => prev.map(u => u.id === permBanUser.id ? { ...u, ...patch } : u)); setDetailUser(prev => prev?.id === permBanUser.id ? { ...prev, ...patch } : prev); } }).catch(() => {}); logAudit("永久封鎖", permBanUser, { reason }); toast({ title: "用戶已永久封鎖", message: `${permBanUser.name} · 此操作無法還原，已寫入審計日誌`, tone: "danger" }); setPermBanUser(null); }} title={永久封鎖 · {permBanUser?.name || ""}} description={<>此操作將永久封鎖該用戶,包含作品下架、訂單強制轉糾紛、帳號 ID 列入黑名單。
此操作無法還原,且僅限 Super Admin 執行。} variant="danger" icon="shield" confirmText="永久封鎖" requireReason reasonLabel="封鎖原因 (必填 · 將永久記錄)" reasonPlaceholder="例:涉嫌詐欺多名業主,已有 3 起警方立案" requireText={permBanUser?.id} requireTextHint={`請輸入用戶 ID 確認:${permBanUser?.id || ""}`} /> setUnbanUser(null)} onConfirm={({ reason } = {}) => { fetch(`/api/admin/users/${unbanUser.id}/ban`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action: "unban", reason }), }).then(r => r.json()).then(data => { if (data.ok) { const patch = { status: "active", bannedUntil: null, bannedReason: null }; setUsers(prev => prev.map(u => u.id === unbanUser.id ? { ...u, ...patch } : u)); setDetailUser(prev => prev?.id === unbanUser.id ? { ...prev, ...patch } : prev); } }).catch(() => {}); logAudit("解除封鎖", unbanUser, { reason }); toast({ title: "已解除封鎖", message: `${unbanUser.name} 已恢復正常狀態` }); setUnbanUser(null); }} title={`解除封鎖 · ${unbanUser?.name || ""}`} description="解除封鎖後用戶將立即恢復所有權限,能再次登入、下單與發布作品。違規紀錄仍會保留。" variant="info" icon="shield" confirmText="解除封鎖" requireReason reasonLabel="解除原因" reasonPlaceholder="例:用戶已完成客訴處理與教育訓練" /> setLogoutUser(null)} onConfirm={() => { logAudit("強制登出", logoutUser); toast({ title: "已強制登出", message: `${logoutUser.name} 所有裝置的 Session 已撤銷` }); setLogoutUser(null); }} title={`強制登出 · ${logoutUser?.name || ""}`} description="用戶所有裝置的 Session 將立即失效,下次操作需重新登入並通過 OTP。帳號狀態不受影響。" variant="warn" icon="logout" confirmText="強制登出" /> {addPointUser && ( setAddPointUser(null)} onConfirm={({ category, points: delta, reason, relatedOrder }) => { const cur = getLiveViolation(addPointUser); let adminEmail = "unknown"; try { adminEmail = JSON.parse(localStorage.getItem("duidui_admin_state") || "{}").adminEmail || "unknown"; } catch {} const newEntry = { id: `V-${Date.now()}`, category, points: delta, reason, relatedOrder: relatedOrder || null, issuedBy: adminEmail, issuedAt: new Date().toLocaleString("zh-TW"), dismissed: false, }; const newPoints = Math.min(cur.points + delta, 3); const newEntries = [newEntry, ...cur.entries]; // Optimistic UI update setViolationEdits(prev => ({ ...prev, [addPointUser.id]: { points: newPoints, entries: newEntries, locks: cur.locks }, })); // Persist to server (server computes violationPoints from entries) fetch(`/api/admin/users/${addPointUser.id}/violation`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ entry: newEntry }), }).catch(() => {}); logAudit("累計違規點數", addPointUser, { category, points: delta, reason, relatedOrder, newPoints }); toast({ title: `已累計 ${delta} 點違規`, message: newPoints >= 3 ? `${addPointUser.name} 已達處置門檻，請裁定鎖定範圍` : `${addPointUser.name} 目前 ${newPoints}/3 點`, tone: newPoints >= 3 ? "danger" : "warn", }); setAddPointUser(null); }} /> )} {lockUser && ( setLockUser(null)} onConfirm={({ features, duration, reason }) => { const cur = getLiveViolation(lockUser); const durLabels = { "7d": "7 天後自動解除", "14d": "14 天後自動解除", "30d": "30 天後自動解除", "permanent": "永久 · 需人工解除" }; setViolationEdits(prev => ({ ...prev, [lockUser.id]: { points: cur.points, entries: cur.entries, locks: { features, lockedBy: "林佩芸", lockedAt: "剛剛", expiresAt: durLabels[duration] || duration, reason, }, } })); logAudit(cur.locks ? "更新功能鎖定" : "鎖定功能", lockUser, { features, duration, reason }); toast({ title: cur.locks ? "已更新鎖定範圍" : "功能已鎖定", message: `${lockUser.name} · 鎖定 ${features.length} 項功能 · ${durLabels[duration]}`, tone: "warn", }); setLockUser(null); }} /> )} ); }; // --- audit log helper --- const logAudit = (action, user, details = {}) => { let adminEmail = "unknown"; try { adminEmail = localStorage.getItem("adminEmail") || JSON.parse(localStorage.getItem("duidui_admin_state") || "{}").adminEmail || "unknown"; } catch {} fetch("/api/admin/audit", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ adminEmail, action, targetUserId: user?.id ?? null, targetUserName: user?.name ?? null, details, }), }).catch(() => {}); }; // --- helpers --- const relativeJoinLabel = (dateStr) => { const d = new Date(dateStr); const diff = (Date.now() - d.getTime()) / (1000*60*60*24); if (diff < 7) return "本週加入"; if (diff < 30) return `${Math.round(diff)} 天前`; const m = Math.round(diff / 30); return `${m} 個月前`; }; const StatusBadge = ({ status }) => { const s = USER_STATUS[status] || USER_STATUS.active; return {s.label}; }; const Pagination = ({ total, pageSize, page = 0, onPageChange }) => { const totalPages = Math.ceil(total / pageSize) || 1; const start = page * pageSize + 1; const end = Math.min((page + 1) * pageSize, total); // Build visible page range (up to 5 buttons centred on current page) let lo = Math.max(0, page - 2); let hi = Math.min(totalPages - 1, lo + 4); lo = Math.max(0, hi - 4); const pages = []; for (let i = lo; i <= hi; i++) pages.push(i); const btnStyle = (active) => ({ width: 30, height: 30, borderRadius: 6, fontSize: 13, cursor: "pointer", background: active ? "var(--ink)" : "transparent", color: active ? "#fff" : "var(--ink-2)", border: "1px solid " + (active ? "var(--ink)" : "var(--border)"), }); return (
顯示 {total === 0 ? 0 : start} - {end} 共 {total} 筆
{lo > 1 && …} } {pages.map(p => ( ))} {hi < totalPages - 1 && <> {hi < totalPages - 2 && …} }
); }; // ============== USER DETAIL DRAWER ============== const UserDetailDrawer = ({ user, violation, onClose, onAction, onReveal, flaggedUserIds }) => { const [tab, setTab] = useState("overview"); const [auditLogs, setAuditLogs] = useState([]); const [auditLoading, setAuditLoading] = useState(false); const [apiViolation, setApiViolation] = useState(null); React.useEffect(() => { if (!user || tab !== "logs") return; setAuditLoading(true); fetch(`/api/admin/audit?userId=${user.id}&limit=30`) .then(r => r.ok ? r.json() : []) .then(d => { setAuditLogs(Array.isArray(d) ? d : []); setAuditLoading(false); }) .catch(() => setAuditLoading(false)); }, [user?.id, tab]); React.useEffect(() => { if (!user || tab !== "violations") return; fetch(`/api/admin/users/${user.id}/violation`) .then(r => r.ok ? r.json() : null) .then(d => { if (d) setApiViolation(d); }) .catch(() => {}); }, [user?.id, tab]); // Reset API violation when user changes React.useEffect(() => { setApiViolation(null); }, [user?.id]); if (!user) return null; const v = apiViolation || violation || { points: 0, entries: [], locks: null }; const isArtist = user.role === "illustrator" || user.role === "author"; const isBanned = user.status === "suspended"; const isSuperAdmin = CURRENT_ROLE === "super_admin"; // Synthesized per-user data const userOrders = MOCK.ORDERS.slice((user.id.charCodeAt(1) || 2) % 10, ((user.id.charCodeAt(1) || 2) % 10) + 6); const disputes = userOrders.filter(o => o.status === "disputed" || o.status === "refund_requested" || o.status === "refunded").slice(0, 3); // For suspended user show at least 2 disputes const shownDisputes = isBanned && disputes.length < 2 ? [...disputes, ...MOCK.ORDERS.filter(o => o.status === "disputed").slice(0, 2 - disputes.length)] : disputes; const warningsCount = user.status === "warning" ? 1 : isBanned ? 3 : 0; return (
用戶詳情
{user.avatar.url ? : }

{user.name}

{user.kycVerified ? 成年已驗證 : 未驗證成年 } {warningsCount > 0 && 違規 {warningsCount}} {v.points > 0 && !v.locks && ( = 3 ? "danger" : v.points >= 2 ? "warn" : "default"} size="sm"> 違規 {v.points}/3 點 )} {v.locks && 功能鎖定中}
{user.uid ?? "—"} · {isArtist ? `創作者 · ${user.level}` : "委託人"} · 加入於 {user.joinedAt} ({relativeJoinLabel(user.joinedAt)})
{isArtist && user.tags?.length > 0 && (
{user.tags.map(t => {t})}
)}
{/* Banned banner */} {isBanned && (
{user.bannedUntil ? "暫時封鎖" : "永久封鎖"} {user.bannedUntil && ( · 至 {new Date(user.bannedUntil).toLocaleDateString("zh-TW", { year: "numeric", month: "2-digit", day: "2-digit" })} )} {user.bannedReason && ( · 原因：{user.bannedReason} )}
)} {/* Quick stats */}
{[ { label: "訂單總數", value: user.orders, mono: true }, { label: isArtist ? "總營收" : "總消費", value: fmtCurrency(isArtist ? user.revenue : user.spent || 0, false), prefix: "NT$" }, { label: "評分", value: user.rating || "—", icon: "star" }, { label: "違規紀錄", value: warningsCount, tone: warningsCount > 0 ? "warn" : "ink" }, ].map((s, i) => (
{s.label}
{s.prefix && {s.prefix}}
{s.value}
{s.icon && s.value !== "—" && }
))}
= 3 ? "danger" : undefined }, { value: "logs", label: "操作日誌" }, ]}/>
{tab === "overview" && (
onReveal("email", user.id, cb)}/>}/> onReveal("phone", user.id, cb)}/>}/> {user.joinedAt}}/> {isArtist && onReveal("bank", user.id, cb)}/>}/>} 已通過驗證 : 尚未驗證 }/> {user.kycVerified && ( {user.joinedAt}}/> )} }/> 0 ? "var(--warn)" : "var(--ink-2)" }}>{warningsCount} 次 }/> {user.status === "warning" && } {isBanned && {user.bannedUntil ? `至 ${new Date(user.bannedUntil).toLocaleDateString("zh-TW", { year: "numeric", month: "2-digit", day: "2-digit" })}` : "永久封鎖"} }/>} {isBanned && user.bannedReason && {user.bannedReason}}/>} {user.lastLoginAt ? new Date(user.lastLoginAt).toLocaleString("zh-TW", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit" }) : "—"}}/> {user.role === "illustrator" && 繪師} {user.role === "author" && 作者}
: 尚未成為創作者 }/> {user.inviteCode ?? "—"} }/> {isArtist && (
{[0,1,2].map(i => (
))}
已邀請 {user.inviteUsesCount ?? 0} / 3 人
}/> )} {!isArtist && }
)} {tab === "orders" && (
全部 {user.orders}· 進行中 4· 已完成 {user.orders - 4}
{userOrders.map(o => )}
)} {tab === "disputes" && (
{shownDisputes.length === 0 && (
無糾紛紀錄
這是一位乖巧的用戶 ✓
)} {shownDisputes.map(o => )}
)} {tab === "violations" && ( onAction("addPoint", user)} onLockFeatures={() => onAction("lock", user)} onUnlock={() => onAction("unlock", user)} onDismissPoint={(entry) => onAction("dismissPoint", { user, entry, currentViolation: v })} /> )} {tab === "logs" && (
{auditLoading ? (
載入中…
) : auditLogs.length === 0 ? (
尚無操作紀錄
) : auditLogs.map((l, i) => { const time = new Date(l.createdAt).toLocaleString("zh-TW", { year: "numeric", month: "2-digit", day: "2-digit", hour: "2-digit", minute: "2-digit", }); const actionTone = { "永久封鎖": "danger", "暫時封鎖": "warn", "累計違規點數": "warn", "鎖定功能": "warn", "更新功能鎖定": "warn", "解除封鎖": "success", "強制登出": "default", }[l.action] || "default"; const dotColor = { danger: "var(--danger)", warn: "var(--warn)", success: "var(--success)", default: "var(--ink-4)" }[actionTone]; return (
0 ? "1px solid var(--border)" : "none", display: "flex", gap: 10 }}>
{l.action} {l.details?.reason && · {l.details.reason}} {l.details?.duration && ({l.details.duration})}
{l.adminEmail} · {time}
); })}
)}
{/* Footer — 5 required actions */}
{isBanned ? ( ) : ( <> )}
); }; // ============== Send Creator Invite ============== const SendCreatorInvitePanel = ({ user }) => { const { useState: uS } = React; const [role, setRole] = uS("illustrator"); const [loading, setLoading] = uS(false); const [sent, setSent] = uS(false); const [error, setError] = uS(""); const send = async () => { setLoading(true); setError(""); const adminEmail = localStorage.getItem("adminEmail") || ""; const res = await fetch("/api/admin/users/send-invite", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ userId: user.id, role, adminEmail }), }); setLoading(false); if (!res.ok) { const d = await res.json().catch(() => ({})); setError(d.error || "發送失敗"); } else { setSent(true); } }; if (sent) { return (
邀請碼已寄至 {user.email}
); } return (
寄送創作者審核邀請碼
{[["illustrator","繪師"],["author","作者"]].map(([val, label]) => ( ))}
{error &&
{error}
}
); }; // ============== Shared row components ============== const InfoSection = ({ title, children }) => (
{title}
{children}
); // backward-compat alias const Section = InfoSection; const InfoRow = ({ label, value }) => (
{label}
{value}
); const MiniOrderRow = ({ order }) => (
{order.type} {order.id}
{order.createdAt}
{fmtCurrency(order.amount)}
); const DisputeRow = ({ order }) => (
糾紛 · {order.type} {order.id}
爭議理由:交付內容與需求不符,要求全額退款
提交於 {order.createdAt} · 處理中 · 金額 {fmtCurrency(order.amount)}
); const OrderStatusBadge = ({ status }) => { const map = { draft: { label: "草稿", tone: "default" }, in_progress: { label: "進行中", tone: "info" }, review: { label: "審核中", tone: "warn" }, completed: { label: "已完成", tone: "success" }, refund_requested: { label: "退款中", tone: "warn" }, refunded: { label: "已退款", tone: "default" }, disputed: { label: "糾紛中", tone: "danger" }, }; const s = map[status] || map.draft; return {s.label}; }; Object.assign(window, { UsersPage, UserDetailDrawer, OrderStatusBadge, MiniOrderRow, Section, InfoSection, InfoRow, Pagination, StatusBadge });