// Orders page — list + detail drawer with chat / files / milestones + 3 admin actions const OrdersPage = () => { const [tab, setTab] = useState("all"); const [query, setQuery] = useState(""); const [dateRange, setDateRange] = useState("all"); const [orderType, setOrderType] = useState("all"); const [amountRange, setAmountRange] = useState("all"); const [detailOrder, setDetailOrder] = useState(null); const [actionDialog, setActionDialog] = useState(null); // { kind, order } const [orders, setOrders] = useState([]); const [loading, setLoading] = useState(false); const [flaggedIds, setFlaggedIds] = useState(new Set()); const [page, setPage] = useState(0); const toast = useToast(); const loadOrders = () => { setLoading(true); fetch("/api/admin/orders") .then(r => r.ok ? r.json() : null) .then(data => { if (Array.isArray(data)) { setOrders(data); window.MOCK.ORDERS = data; } }) .catch(() => {}) .finally(() => setLoading(false)); }; useEffect(() => { loadOrders(); }, []); const toggleFlag = (rawId) => { setFlaggedIds(prev => { const next = new Set(prev); if (next.has(rawId)) next.delete(rawId); else next.add(rawId); return next; }); }; const filtered = orders .filter(o => { if (tab === "in_progress" && !["in_progress","review"].includes(o.status)) return false; if (tab === "completed" && o.status !== "completed") return false; if (tab === "disputed" && !["disputed","refund_requested"].includes(o.status)) return false; if (tab === "refunded" && o.status !== "refunded") return false; if (query) { const q = query.toLowerCase(); if (!o.id.toLowerCase().includes(q) && !o.artistName.includes(query) && !o.clientName.includes(query)) return false; } if (dateRange !== "all" && o.createdAt) { const now = Date.now(); const created = new Date(o.createdAt.replace(" ", "T")).getTime(); const days = { "7d": 7, "30d": 30, "90d": 90 }[dateRange]; if (days && (now - created) > days * 86400000) return false; } if (orderType === "圖" && o.orderType !== "auction") return false; if (orderType === "文" && o.orderType !== "commission") return false; if (amountRange === "lt1000" && o.amount >= 1000) return false; if (amountRange === "1k-5k" && (o.amount < 1000 || o.amount >= 5000)) return false; if (amountRange === "5k-10k" && (o.amount < 5000 || o.amount >= 10000)) return false; if (amountRange === "gt10k" && o.amount < 10000) return false; return true; }) .sort((a, b) => { const af = flaggedIds.has(a._rawId) ? 1 : 0; const bf = flaggedIds.has(b._rawId) ? 1 : 0; return bf - af; }); useEffect(() => { setPage(0); }, [tab, query, orderType, amountRange, dateRange]); const handleAction = (kind, order) => { setDetailOrder(null); setActionDialog({ kind, order }); }; return (
o.status === "disputed").length} 筆`} actions={<> } />
["in_progress","review"].includes(o.status)).length }, { value: "completed", label: "已完成", count: orders.filter(o => o.status === "completed").length }, { value: "disputed", label: "已中止", count: orders.filter(o => ["disputed","refund_requested","refunded"].includes(o.status)).length }, ]} />
setQuery(e.target.value)}/>