feat(ui): refine dashboard management pages
This commit is contained in:
zetaloop
@@ -1,9 +1,10 @@
|
||||
"use client"
|
||||
|
||||
import { Badge } from "@/components/ui/badge"
|
||||
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 { listOrders, listPlayers, listServices, listShops } from "@/lib/api"
|
||||
import { statusLabels } from "@/lib/constants"
|
||||
import type { Player, PlayerService, Shop } from "@/lib/types"
|
||||
@@ -12,6 +13,17 @@ import { CheckCircle, Clock, DollarSign, ListOrdered, Star, TrendingUp, Users }
|
||||
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
|
||||
@@ -87,7 +99,7 @@ export default function DashboardPage() {
|
||||
<h1 className="text-2xl font-bold">概览</h1>
|
||||
|
||||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<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" />
|
||||
@@ -96,7 +108,7 @@ export default function DashboardPage() {
|
||||
<div className="text-2xl font-bold">{totalOrders}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<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" />
|
||||
@@ -105,7 +117,7 @@ export default function DashboardPage() {
|
||||
<div className="text-2xl font-bold">{rating}</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<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 ? (
|
||||
@@ -125,7 +137,7 @@ export default function DashboardPage() {
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<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 ? (
|
||||
@@ -140,7 +152,7 @@ export default function DashboardPage() {
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<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>
|
||||
@@ -148,29 +160,33 @@ export default function DashboardPage() {
|
||||
</Button>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<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 p-3 hover:bg-muted/50 transition-colors">
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm font-medium truncate">{order.service.title}</p>
|
||||
<p className="text-xs text-muted-foreground">{order.service.title}</p>
|
||||
{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>
|
||||
<div className="flex items-center gap-3 shrink-0">
|
||||
<span className="text-sm font-medium">¥{order.totalPrice}</span>
|
||||
<Badge variant="outline" className="text-xs">
|
||||
{statusLabels[order.status]}
|
||||
</Badge>
|
||||
</div>
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
</Link>
|
||||
))}
|
||||
</div>
|
||||
) : (
|
||||
<EmptyState title="暂无最近订单" icon={ListOrdered} className="min-h-[180px]" />
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
{!isOwner && (
|
||||
<Card className="hover:shadow-card-hover">
|
||||
<Card className="border-border/80 shadow-sm">
|
||||
<CardHeader>
|
||||
<CardTitle className="text-base">快捷操作</CardTitle>
|
||||
</CardHeader>
|
||||
|
||||
Reference in New Issue
Block a user