// Dispute Resolution / 調解中心 const DISPUTE_REASONS = { quality: { label: "交付品質不符", desc: "成品與討論內容差異過大" }, deadline: { label: "延遲交付", desc: "創作者未按期限交付" }, no_show: { label: "業主失聯", desc: "業主長期未驗收或回應" }, change_request: { label: "需求變更爭議", desc: "業主臨時更改需求範圍" }, copyright: { label: "版權疑慮", desc: "疑似抄襲或版權爭議" }, payment: { label: "款項爭議", desc: "託管金額計算分歧" }, other: { label: "其他", desc: "未分類爭議" }, }; // ============== Data ============== function deriveCurrentAdmin(adminEmail) { const email = adminEmail || ""; return { id: email || "admin", email, name: email ? email.split("@")[0] : "客服", role: "ops_admin", }; } // 將 API 回傳的 dispute 轉為既有 UI 使用的 shape；某些欄位（severity / assignee / responseDue // / reason 分類）目前沒有資料來源，先用啟發式預設值 function transformDispute(d) { const isCommissionerInitiator = !!d.commissionerReason; const initiatorName = isCommissionerInitiator ? d.commissionerName : d.artistName; const initiatorId = isCommissionerInitiator ? d.commissionerId : d.artistUserId; const description = isCommissionerInitiator ? d.commissionerReason : d.artistResponse; const counterpartyResponse = isCommissionerInitiator ? d.artistResponse : d.commissionerReason; const initiatorImages = isCommissionerInitiator ? d.commissionerImages : d.artistResponseImages; const counterpartyImages = isCommissionerInitiator ? d.artistResponseImages : d.commissionerImages; // 嚴重度與分類直接用 DB 真實值，缺值才用 fallback const severity = d.disputeSeverity || (d.price >= 5000 ? "high" : d.price >= 1500 ? "medium" : "low"); const status = d.isActive ? "investigating" : "closed"; const fmtDate = (s) => s ? s.slice(0, 16).replace("T", " ") : null; let outcome = null; let outcomeAmount = null; if (!d.isActive) { if (d.status === "refunded") { outcome = d.refundAmount >= d.price ? "full_refund_client" : "partial_refund"; outcomeAmount = d.refundAmount ?? 0; } else if (d.status === "closed") { outcome = "pay_artist"; outcomeAmount = d.price; } else { outcome = "reopen"; } } const fallbackHue = (s) => { let h = 0; for (let i = 0; i < (s || "").length; i++) h = (h * 31 + s.charCodeAt(i)) % 360; return h; }; const clientUser = { id: d.commissionerId, name: d.commissionerName || "委託人", avatarUrl: d.commissionerAvatar || null, level: "—", disputeCount: d.commissionerDisputeCount ?? 0, avatar: { hue: fallbackHue(d.commissionerId), glyph: (d.commissionerName || "委")[0] }, }; const artistUser = { id: d.artistUserId, name: d.artistName || "創作者", avatarUrl: d.artistAvatar || null, level: "—", disputeCount: d.artistDisputeCount ?? 0, avatar: { hue: fallbackHue(d.artistUserId), glyph: (d.artistName || "創")[0] }, }; return { id: "#" + d.id.slice(0, 8).toUpperCase(), _rawId: d.id, orderId: "#" + d.id.slice(0, 8).toUpperCase(), initiator: isCommissionerInitiator ? "client" : "artist", initiatorName, initiatorId, description: description || "（未填寫事由）", counterpartyResponse: counterpartyResponse || "", initiatorImages: Array.isArray(initiatorImages) ? initiatorImages : [], counterpartyImages: Array.isArray(counterpartyImages) ? counterpartyImages : [], reason: d.disputeReason || "other", severity, status, openedAt: fmtDate(d.disputeOpenedAt) ?? "", closedAt: fmtDate(d.disputeClosedAt), responseDue: "—", amount: d.price, noteCount: d.noteCount ?? 0, assignee: d.assigneeEmail ? { id: d.assigneeEmail, email: d.assigneeEmail, name: d.assigneeName || d.assigneeEmail.split("@")[0] } : null, outcome, outcomeAmount, _clientUser: clientUser, _artistUser: artistUser, order: { _rawId: d.id, // 給 ChatTab / FilesTab fetch /api/admin/orders/[id]* 使用 type: d.type || "委託訂單", clientId: d.commissionerId, artistId: d.artistUserId, artistName: d.artistName, amount: d.price, platformFee: d.platformFee ?? Math.round(d.price * 0.10), artistPayout: d.artistPayout ?? (d.price - Math.round(d.price * 0.10)), milestones: d.milestonesCompleted ?? 0, totalMilestones: d.milestonesTotal ?? 0, milestonesData: Array.isArray(d.milestones) ? d.milestones : [], files: Array.isArray(d.files) ? d.files : [], progress: d.progress ?? 0, createdAt: d.createdAt ? d.createdAt.slice(0, 10) : "", deadline: d.deadline || "", acceptedAt: fmtDate(d.acceptedAt), paidAt: fmtDate(d.paidAt), deliveredAt: fmtDate(d.deliveredAt), completedAt: fmtDate(d.completedAt), }, }; } // ============== Main page ============== const DisputesPage = ({ adminEmail }) => { const CURRENT_ADMIN = deriveCurrentAdmin(adminEmail); const [tab, setTab] = useState("active"); const [query, setQuery] = useState(""); const [severity, setSeverity] = useState("all"); const [assignee, setAssignee] = useState("all"); const [detail, setDetail] = useState(null); const [disputes, setDisputes] = useState([]); const [loading, setLoading] = useState(true); const [reports, setReports] = useState([]); const [reportsLoading, setReportsLoading] = useState(false); function fetchDisputes() { setLoading(true); fetch("/api/admin/disputes", { credentials: "include" }) .then(r => r.ok ? r.json() : { disputes: [] }) .then(data => { setDisputes((data.disputes ?? []).map(transformDispute)); setLoading(false); }) .catch(() => setLoading(false)); } function fetchReports() { setReportsLoading(true); fetch("/api/admin/reports", { credentials: "include" }) .then(r => r.ok ? r.json() : { reports: [] }) .then(data => { setReports(data.reports ?? []); setReportsLoading(false); }) .catch(() => setReportsLoading(false)); } useEffect(() => { fetchDisputes(); fetchReports(); }, []); const today = new Date().toISOString().slice(0, 10); const counts = { pending: 0, // 目前沒有「待認領」概念 investigating: disputes.filter(d => d.status === "investigating").length, mediating: 0, closed: disputes.filter(d => d.status === "closed").length, mine: 0, }; const todayNew = { pending: 0, active: disputes.filter(d => d.status === "investigating" && (d.openedAt ?? "").startsWith(today)).length, mine: 0, closed: disputes.filter(d => d.status === "closed" && (d.closedAt ?? "").startsWith(today)).length, }; const filtered = disputes.filter(d => { if (tab === "active" && d.status !== "investigating") return false; if (tab === "closed" && d.status !== "closed") return false; // tab === "all" 不過濾 if (query) { const q = query.toLowerCase(); if (!d.id.toLowerCase().includes(q) && !d.orderId.toLowerCase().includes(q) && !(d.initiatorName || "").includes(query)) return false; } if (severity !== "all" && d.severity !== severity) return false; return true; }); if (detail) return { setDetail(null); fetchDisputes(); }}/>; const overdue = 0; // 目前 responseDue 概念尚未實作 return (
{counts.pending + counts.investigating + counts.mediating} 件進行中 {overdue > 0 && <> · {overdue} 件已逾期} {" · "}本月結案 {counts.closed} 件 · 平均結案時間 3.8 天 } actions={<> } /> {/* Summary row */}
0 ? `${overdue} 件逾期` : "本日新增"}/>
r.status === "pending").length || undefined }, ]}/>
{tab === "reports" ? ( ) : ( <>
setQuery(e.target.value)}/>
{filtered.map(d => setDetail(d)}/>)} {filtered.length === 0 && (
沒有符合條件的調解案
更換篩選條件或等待新的申訴
 )}
)}
); }; const DisputeSummaryCard = ({ tone, icon, label, todayNew, total, hint }) => (
{label}
+{todayNew}
/ {total} 累計
{hint}
 ); const DisputeListCard = ({ dispute: d, onClick }) => { const statusMap = { pending: { label: "待認領", tone: "warn" }, investigating: { label: "調查中", tone: "info" }, mediating: { label: "調解中", tone: "accent" }, closed: { label: "已結案", tone: "success" }, }; const sevColor = d.severity === "high" ? "var(--danger)" : d.severity === "medium" ? "var(--warn)" : "var(--ink-4)"; const order = d.order; const client = d._clientUser ?? MOCK.USERS.find(u => u.id === order.clientId); const artist = d._artistUser ?? MOCK.USERS.find(u => u.id === order.artistId); return (
{statusMap[d.status].label} {DISPUTE_REASONS[d.reason].label} {d.id} · {d.orderId}
{d.responseDue && d.responseDue !== "—" && ( {d.responseDue === "已逾期" ? "回應逾期" : `回應 ${d.responseDue}`} )}
{d.initiator === "client" ? "委託人" : "創作者"} · {d.initiatorName} {" 發起:"} {d.description}
{artist && } {client && }
{d.initiator === "artist" ? `${artist?.name} vs ${client?.name}` : `${client?.name} vs ${artist?.name}`}
· 爭議金額 NT$ {fmtNum(d.amount)} · 開立於 {d.openedAt} · {d.assignee ? ( 承辦 {d.assignee.name} ) : ( 未認領 )}
); }; // ============== Detail page ============== const DisputeDetailPage = ({ dispute, onBack, currentAdmin }) => { const CURRENT_ADMIN = currentAdmin || { id: "admin", email: "", name: "客服", role: "ops_admin" }; const [tab, setTab] = useState("overview"); const [assignDialog, setAssignDialog] = useState(false); const [noteDialog, setNoteDialog] = useState(false); const [contactDialog, setContactDialog] = useState(null); // "client" | "artist" | "both" const [resolveDialog, setResolveDialog] = useState(null); // kind const [state, setState] = useState({ assignee: dispute.assignee, status: dispute.status, notes: [], resolution: dispute.outcome ? { kind: dispute.outcome, amount: dispute.outcomeAmount, reason: "（系統未保留客服說明文字，請至「調解時間軸」查看裁決時間）", decidedBy: dispute.assignee?.name || "客服", decidedAt: dispute.closedAt, } : null, }); const toast = useToast(); // 載入內部備註 useEffect(() => { fetch(`/api/admin/commissions/${dispute._rawId}/dispute/notes`, { credentials: "include" }) .then(r => r.ok ? r.json() : { notes: [] }) .then(data => { const formatted = (data.notes ?? []).map(n => ({ author: n.authorName, role: n.authorRole, text: n.content, time: n.createdAt ? n.createdAt.slice(0, 16).replace("T", " ") : "", })); setState(s => ({ ...s, notes: formatted })); }) .catch(() => {}); }, [dispute._rawId]); const order = dispute.order; const client = dispute._clientUser ?? MOCK.USERS.find(u => u.id === order.clientId); const artist = dispute._artistUser ?? MOCK.USERS.find(u => u.id === order.artistId); const isAssignedToMe = state.assignee?.id === CURRENT_ADMIN.id; const isClosed = state.status === "closed"; const handleAssign = async () => { const res = await fetch(`/api/admin/commissions/${dispute._rawId}/dispute/assign`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ name: CURRENT_ADMIN.name }), }); if (!res.ok) { const j = await res.json().catch(() => ({})); toast({ title: "認領失敗", message: j.error ?? "請稍後再試", icon: "alert" }); return; } const j = await res.json(); setState(s => ({ ...s, assignee: { id: j.assigneeEmail, email: j.assigneeEmail, name: j.assigneeName }, status: s.status === "pending" ? "investigating" : s.status, })); setAssignDialog(false); toast({ title: "已認領此案件", message: "已寫入後台紀錄", icon: "check" }); }; const handleAddNote = async (text) => { const res = await fetch(`/api/admin/commissions/${dispute._rawId}/dispute/notes`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ content: text, name: CURRENT_ADMIN.name, role: "客服" }), }); if (!res.ok) { const j = await res.json().catch(() => ({})); toast({ title: "新增備註失敗", message: j.error ?? "請稍後再試", icon: "alert" }); return; } const j = await res.json(); const note = j.note; setState(s => ({ ...s, notes: [{ author: note.authorName, role: note.authorRole, text: note.content, time: note.createdAt ? note.createdAt.slice(0, 16).replace("T", " ") : "剛剛", }, ...s.notes], })); setNoteDialog(false); toast({ title: "內部備註已新增", message: "僅管理員可見 · 已關聯至此案件", icon: "check" }); }; const handleContact = (target) => { setContactDialog(null); toast({ title: "訊息已寄出", message: target === "both" ? "委託人 + 創作者" : target === "client" ? client.name : artist.name, icon: "mail" }); }; const handleResolve = async (kind, amount, reason) => { // 映射 UI kind → 後端 action let action = "dismiss"; let refundRatio; if (kind === "full_refund_client") { action = "force_refund"; refundRatio = 100; } else if (kind === "partial_refund") { action = "force_refund"; const n = Number(amount); refundRatio = dispute.amount > 0 ? Math.round(n / dispute.amount * 100) : 100; } else if (kind === "pay_artist") { action = "force_close"; } else if (kind === "reopen") { action = "dismiss"; } const res = await fetch(`/api/admin/commissions/${dispute._rawId}/dispute/resolve`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ action, refundRatio, note: reason ?? "" }), }); if (!res.ok) { const j = await res.json().catch(() => ({})); toast({ title: "裁定失敗", message: j.error ?? "請稍後再試", icon: "alert" }); return; } setState(s => ({ ...s, status: "closed", resolution: { kind, amount, reason, decidedBy: CURRENT_ADMIN.name, decidedAt: new Date().toLocaleString("zh-TW"), }, })); setResolveDialog(null); const labels = { full_refund_client: "全額退款給委託人", pay_artist: "撥款給創作者", partial_refund: "部分退款", reopen: "重啟協商" }; toast({ title: `調解結果已生效 · ${labels[kind]}`, message: "決議已永久記錄,無法修改", icon: "check" }); }; return (
{/* Breadcrumb / back */}
/ {dispute.id}
{/* Header banner */}
{dispute.severity === "high" ? "高嚴重度" : dispute.severity === "medium" ? "中嚴重度" : "低嚴重度"} {dispute.id} · 開立於 {dispute.openedAt}

{DISPUTE_REASONS[dispute.reason].label} · 訂單 {dispute.orderId}

{dispute.initiator === "client" ? "委託人" : "創作者"} {dispute.initiatorName} {" 發起申訴:"}{dispute.description}
爭議金額
NT$ {fmtNum(dispute.amount)}
託管中 · 等待裁決
{/* Parties bar */}
vs
承辦人
{state.assignee ? (
{state.assignee.name} {isAssignedToMe && 我}
) : (
尚未認領
)}
{dispute.responseDue && dispute.responseDue !== "—" ? `回應時限 · ${dispute.responseDue}` : "已結案"}
{/* Final decision banner — immutable */} {state.resolution && } {/* Admin action toolbar */} {!isClosed && (
{!state.assignee && ( )} {state.assignee && !isAssignedToMe && (
此案由 {state.assignee.name} 承辦中
)}