feat(catalog): fetch players, services, shops

app/(dashboard)/dashboard/page.tsx

@@ -6,18 +6,49 @@ import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
 import { Progress } from "@/components/ui/progress"
 import { 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"
 
 export default function DashboardPage() {
   const { currentRole } = useAuthStore()
   const isOwner = currentRole === "owner"
 
-  const player = listPlayers()[0]
-  const shop = listShops()[0]
+  const [player, setPlayer] = useState<Player | null>(null)
+  const [shop, setShop] = useState<Shop | null>(null)
+  const [services, setServices] = useState<PlayerService[]>([])
   const recentOrders = listOrders().slice(0, 3)
 
+  useEffect(() => {
+    let cancelled = false
+
+    Promise.all([listPlayers(), listShops(), listServices()])
+      .then(([players, shops, services]) => {
+        if (cancelled) return
+        setPlayer(players[0] ?? null)
+        setShop(shops[0] ?? null)
+        setServices(services)
+      })
+      .catch(() => {
+        if (cancelled) return
+        setPlayer(null)
+        setShop(null)
+        setServices([])
+      })
+
+    return () => {
+      cancelled = true
+    }
+  }, [])
+
+  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((s) => s.playerId === 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>
@@ -29,9 +60,7 @@ export default function DashboardPage() {
             <ListOrdered className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">
-              {isOwner ? shop.totalOrders : player.totalOrders}
-            </div>
+            <div className="text-2xl font-bold">{totalOrders}</div>
           </CardContent>
         </Card>
         <Card className="hover:shadow-card-hover">
@@ -40,7 +69,7 @@ export default function DashboardPage() {
             <Star className="h-4 w-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">{isOwner ? shop.rating : player.rating}</div>
+            <div className="text-2xl font-bold">{rating}</div>
           </CardContent>
         </Card>
         <Card className="hover:shadow-card-hover">
@@ -54,13 +83,11 @@ export default function DashboardPage() {
           </CardHeader>
           <CardContent>
             {isOwner ? (
-              <div className="text-2xl font-bold">{shop.playerCount}</div>
+              <div className="text-2xl font-bold">{playerCount}</div>
             ) : (
               <div className="space-y-2">
-                <div className="text-2xl font-bold">
-                  {(player.completionRate * 100).toFixed(0)}%
-                </div>
-                <Progress value={player.completionRate * 100} className="h-1.5" />
+                <div className="text-2xl font-bold">{(completionRate * 100).toFixed(0)}%</div>
+                <Progress value={completionRate * 100} className="h-1.5" />
               </div>
             )}
           </CardContent>
@@ -75,9 +102,7 @@ export default function DashboardPage() {
             )}
           </CardHeader>
           <CardContent>
-            <div className="text-2xl font-bold">
-              {isOwner ? "¥12,800" : listServices().filter((s) => s.playerId === player.id).length}
-            </div>
+            <div className="text-2xl font-bold">{isOwner ? "¥12,800" : serviceCount}</div>
           </CardContent>
         </Card>
       </div>