zetaloop
118 lines
4.3 KiB
TypeScript
118 lines
4.3 KiB
TypeScript
import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table"
|
|
import { statusLabels } from "@/lib/constants"
|
|
import { mockOrders } from "@/lib/mock"
|
|
|
|
export default function ShopOrdersPage() {
|
|
const totalOrders = mockOrders.length
|
|
const activeOrders = mockOrders.filter((o) =>
|
|
[
|
|
"pending_payment",
|
|
"pending_accept",
|
|
"in_progress",
|
|
"pending_close",
|
|
"pending_review",
|
|
].includes(o.status),
|
|
).length
|
|
const completedOrders = mockOrders.filter((o) => o.status === "completed").length
|
|
const disputedOrders = mockOrders.filter((o) => o.status === "disputed").length
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<div className="flex items-center justify-between">
|
|
<h1 className="text-2xl font-bold">订单总览</h1>
|
|
</div>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">总订单</CardTitle>
|
|
<ListOrdered className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{totalOrders}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">进行中</CardTitle>
|
|
<Clock className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{activeOrders}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">已完成</CardTitle>
|
|
<CheckCircle className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{completedOrders}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card>
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">争议订单</CardTitle>
|
|
<AlertCircle className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{disputedOrders}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>订单列表</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>服务名称</TableHead>
|
|
<TableHead>客户</TableHead>
|
|
<TableHead>打手</TableHead>
|
|
<TableHead>状态</TableHead>
|
|
<TableHead>金额</TableHead>
|
|
<TableHead>创建时间</TableHead>
|
|
<TableHead className="text-right">操作</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{mockOrders.map((order) => (
|
|
<TableRow key={order.id}>
|
|
<TableCell className="font-medium">{order.service.title}</TableCell>
|
|
<TableCell>{order.consumerName}</TableCell>
|
|
<TableCell>{order.playerName}</TableCell>
|
|
<TableCell>
|
|
<Badge variant="outline">{statusLabels[order.status]}</Badge>
|
|
</TableCell>
|
|
<TableCell>¥{order.totalPrice}</TableCell>
|
|
<TableCell>{new Date(order.createdAt).toLocaleDateString()}</TableCell>
|
|
<TableCell className="text-right">
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href={`/order/${order.id}`}>查看</Link>
|
|
</Button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
)
|
|
}
|