feat: add role-based tabs and filtering to order list

app/(order)/orders/page.tsx

@@ -2,7 +2,7 @@
 
 import { Clock, MessageSquare, RefreshCw } from "lucide-react"
 import Link from "next/link"
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Badge } from "@/components/ui/badge"
 import { Button } from "@/components/ui/button"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
@@ -26,15 +26,52 @@ const statusColors: Record<OrderStatus, string> = {
 
 type TabFilter = "all" | "active" | "completed" | "disputed"
 
-export default function OrderListPage() {
-  const [tab, setTab] = useState<TabFilter>("all")
-  const { currentRole } = useAuthStore()
+const consumerTabs = [
+  { value: "all", label: "全部" },
+  { value: "active", label: "进行中" },
+  { value: "completed", label: "已完成" },
+  { value: "disputed", label: "争议" },
+]
 
-  const filtered = mockOrders.filter((order) => {
+const playerTabs = [
+  { value: "all", label: "全部" },
+  { value: "pending", label: "待接单" },
+  { value: "active", label: "进行中" },
+  { value: "completed", label: "已完成" },
+]
+
+const ownerTabs = [
+  { value: "all", label: "全部" },
+  { value: "pending", label: "待派单" },
+  { value: "active", label: "进行中" },
+  { value: "completed", label: "已完成" },
+  { value: "disputed", label: "争议" },
+]
+
+export default function OrderListPage() {
+  const [tab, setTab] = useState<TabFilter | "pending">("all")
+  const { currentRole, user } = useAuthStore()
+  const currentUserId = user?.id ?? "u1"
+  const ownerShopId = "shop1"
+
+  useEffect(() => {
+    if (!currentRole) return
+    setTab("all")
+  }, [currentRole])
+
+  const tabs =
+    currentRole === "consumer" ? consumerTabs : currentRole === "player" ? playerTabs : ownerTabs
+
+  const roleFiltered = mockOrders.filter((order) => {
+    if (currentRole === "consumer") return order.consumerId === currentUserId
+    if (currentRole === "player") return order.playerId === currentUserId
+    return order.shopId === ownerShopId
+  })
+
+  const filtered = roleFiltered.filter((order) => {
+    if (tab === "pending") return order.status === "pending_accept"
     if (tab === "active")
-      return ["pending_accept", "in_progress", "pending_close", "pending_review"].includes(
-        order.status,
-      )
+      return ["in_progress", "pending_close", "pending_review"].includes(order.status)
     if (tab === "completed") return order.status === "completed" || order.status === "cancelled"
     if (tab === "disputed") return order.status === "disputed"
     return true
@@ -53,12 +90,13 @@ export default function OrderListPage() {
         </Badge>
       </div>
 
-      <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter)}>
+      <Tabs value={tab} onValueChange={(v) => setTab(v as TabFilter | "pending")}>
         <TabsList>
-          <TabsTrigger value="all">全部</TabsTrigger>
-          <TabsTrigger value="active">进行中</TabsTrigger>
-          <TabsTrigger value="completed">已完成</TabsTrigger>
-          <TabsTrigger value="disputed">争议</TabsTrigger>
+          {tabs.map((item) => (
+            <TabsTrigger key={item.value} value={item.value}>
+              {item.label}
+            </TabsTrigger>
+          ))}
         </TabsList>
 
         <TabsContent value={tab} className="mt-4 space-y-3">
@@ -77,8 +115,9 @@ export default function OrderListPage() {
                   <p className="text-sm text-muted-foreground">
                     {currentRole === "consumer"
                       ? `打手: ${order.playerName}`
-                      : `消费者: ${order.consumerName}`}
-                    {order.shopName && ` · ${order.shopName}`}
+                      : currentRole === "player"
+                        ? `消费者: ${order.consumerName}`
+                        : `消费者: ${order.consumerName} · 打手: ${order.playerName}`}
                   </p>
                 </CardHeader>
                 <CardContent>