zetaloop
235 lines
8.2 KiB
TypeScript
235 lines
8.2 KiB
TypeScript
"use client"
|
|
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
|
|
import { EmptyState } from "@/components/ui/empty-state"
|
|
import { Progress } from "@/components/ui/progress"
|
|
import { StatusBadge, type StatusBadgeProps } from "@/components/ui/status-badge"
|
|
import { getShopIncomeStats, listOrders, listPlayers, listServices, listShops } from "@/lib/api"
|
|
import { statusLabels } from "@/lib/constants"
|
|
import type { Player, PlayerService, Shop } from "@/lib/types"
|
|
import { useAuthStore } from "@/store/auth"
|
|
import { CheckCircle, Clock, DollarSign, ListOrdered, Star, TrendingUp, Users } from "lucide-react"
|
|
import Link from "next/link"
|
|
import { useEffect, useState } from "react"
|
|
|
|
const orderStatusVariants: Record<string, StatusBadgeProps["status"]> = {
|
|
pending_payment: "warning",
|
|
pending_accept: "info",
|
|
in_progress: "success",
|
|
pending_close: "info",
|
|
pending_review: "info",
|
|
disputed: "destructive",
|
|
completed: "success",
|
|
cancelled: "neutral",
|
|
}
|
|
|
|
function getOrderRole(role: "consumer" | "player" | "owner" | "admin") {
|
|
if (role === "consumer" || role === "player" || role === "owner") {
|
|
return role
|
|
}
|
|
return undefined
|
|
}
|
|
|
|
export default function DashboardPage() {
|
|
const { currentRole, user } = useAuthStore()
|
|
const isOwner = currentRole === "owner"
|
|
const orderRole = getOrderRole(currentRole)
|
|
|
|
const [player, setPlayer] = useState<Player | null>(null)
|
|
const [shop, setShop] = useState<Shop | null>(null)
|
|
const [services, setServices] = useState<PlayerService[]>([])
|
|
const [orders, setOrders] = useState<Awaited<ReturnType<typeof listOrders>>>([])
|
|
const [monthlyIncome, setMonthlyIncome] = useState<string>("0")
|
|
const recentOrders = orders.slice(0, 3)
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
Promise.all([listPlayers(), listShops(), listServices()])
|
|
.then(([players, shops, services]) => {
|
|
if (cancelled) return
|
|
setPlayer(players.find((item) => item.user.id === user?.id) ?? null)
|
|
setShop(shops.find((item) => item.owner.id === user?.id) ?? null)
|
|
setServices(services)
|
|
})
|
|
.catch(() => {
|
|
if (cancelled) return
|
|
setPlayer(null)
|
|
setShop(null)
|
|
setServices([])
|
|
})
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [user?.id])
|
|
|
|
useEffect(() => {
|
|
let cancelled = false
|
|
|
|
void (async () => {
|
|
try {
|
|
if (!orderRole) {
|
|
setOrders([])
|
|
return
|
|
}
|
|
|
|
const orders = await Promise.resolve(listOrders({ role: orderRole }))
|
|
if (cancelled) return
|
|
setOrders(orders)
|
|
} catch {
|
|
if (cancelled) return
|
|
setOrders([])
|
|
}
|
|
})()
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [orderRole])
|
|
|
|
useEffect(() => {
|
|
if (!shop) {
|
|
setMonthlyIncome("0")
|
|
return
|
|
}
|
|
|
|
let cancelled = false
|
|
|
|
getShopIncomeStats(shop.id)
|
|
.then((stats) => {
|
|
if (cancelled) return
|
|
setMonthlyIncome(stats.monthlyIncome)
|
|
})
|
|
.catch(() => {
|
|
if (cancelled) return
|
|
setMonthlyIncome("0")
|
|
})
|
|
|
|
return () => {
|
|
cancelled = true
|
|
}
|
|
}, [shop])
|
|
|
|
const totalOrders = isOwner ? (shop?.totalOrders ?? 0) : (player?.totalOrders ?? 0)
|
|
const rating = isOwner ? (shop?.rating ?? 0) : (player?.rating ?? 0)
|
|
const playerCount = shop?.playerCount ?? 0
|
|
const completionRate = player?.completionRate ?? 0
|
|
const serviceCount = player
|
|
? services.filter((service) => String(service.playerId) === String(player.id)).length
|
|
: 0
|
|
|
|
return (
|
|
<div className="container mx-auto max-w-6xl px-4 py-8 space-y-8">
|
|
<h1 className="text-2xl font-bold">概览</h1>
|
|
|
|
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
|
<Card className="border-border/80 shadow-sm">
|
|
<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 className="border-border/80 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">评分</CardTitle>
|
|
<Star className="h-4 w-4 text-muted-foreground" />
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{rating}</div>
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/80 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">{isOwner ? "签约打手" : "完成率"}</CardTitle>
|
|
{isOwner ? (
|
|
<Users className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<CheckCircle className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
{isOwner ? (
|
|
<div className="text-2xl font-bold">{playerCount}</div>
|
|
) : (
|
|
<div className="space-y-2">
|
|
<div className="text-2xl font-bold">{(completionRate * 100).toFixed(0)}%</div>
|
|
<Progress value={completionRate * 100} className="h-1.5" />
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
<Card className="border-border/80 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between pb-2">
|
|
<CardTitle className="text-sm font-medium">{isOwner ? "本月收入" : "服务数"}</CardTitle>
|
|
{isOwner ? (
|
|
<DollarSign className="h-4 w-4 text-muted-foreground" />
|
|
) : (
|
|
<TrendingUp className="h-4 w-4 text-muted-foreground" />
|
|
)}
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="text-2xl font-bold">{isOwner ? `¥${monthlyIncome}` : serviceCount}</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
|
|
<Card className="border-border/80 shadow-sm">
|
|
<CardHeader className="flex flex-row items-center justify-between">
|
|
<CardTitle className="text-base">最近订单</CardTitle>
|
|
<Button variant="ghost" size="sm" asChild>
|
|
<Link href="/orders">查看全部</Link>
|
|
</Button>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{recentOrders.length > 0 ? (
|
|
<div className="space-y-3">
|
|
{recentOrders.map((order) => (
|
|
<Link key={order.id} href={`/order/${order.id}`}>
|
|
<div className="flex items-center justify-between rounded-md border border-border/60 p-3 transition-colors hover:bg-muted/50">
|
|
<div className="min-w-0 flex-1">
|
|
<p className="truncate text-sm font-medium">{order.service.title}</p>
|
|
<p className="text-xs text-muted-foreground">{order.service.title}</p>
|
|
</div>
|
|
<div className="flex shrink-0 items-center gap-3">
|
|
<span className="text-sm font-medium tabular-nums">¥{order.totalPrice}</span>
|
|
<StatusBadge status={orderStatusVariants[order.status] ?? "neutral"}>
|
|
{statusLabels[order.status]}
|
|
</StatusBadge>
|
|
</div>
|
|
</div>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<EmptyState title="暂无最近订单" icon={ListOrdered} className="min-h-[180px]" />
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{!isOwner && (
|
|
<Card className="border-border/80 shadow-sm">
|
|
<CardHeader>
|
|
<CardTitle className="text-base">快捷操作</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="flex gap-2 flex-wrap">
|
|
<Button asChild>
|
|
<Link href="/dashboard/services/new">发布新服务</Link>
|
|
</Button>
|
|
<Button variant="outline" asChild>
|
|
<Link href="/orders">
|
|
<Clock className="mr-1 h-4 w-4" />
|
|
待处理订单
|
|
</Link>
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|