fix: sync notification and shop dashboard state

app/(dashboard)/dashboard/shop/orders/page.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import { AlertCircle, CheckCircle, Clock, ListOrdered } from "lucide-react"
 import Link from "next/link"
 import { Badge } from "@/components/ui/badge"
@@ -12,11 +14,19 @@ import {
   TableRow,
 } from "@/components/ui/table"
 import { statusLabels } from "@/lib/constants"
-import { mockOrders } from "@/lib/mock"
+import { useAuthStore } from "@/store/auth"
+import { useOrderStore } from "@/store/orders"
+import { useShopStore } from "@/store/shops"
 
 export default function ShopOrdersPage() {
-  const totalOrders = mockOrders.length
-  const activeOrders = mockOrders.filter((o) =>
+  const userId = useAuthStore((state) => state.user?.id)
+  const shops = useShopStore((state) => state.shops)
+  const orders = useOrderStore((state) => state.orders)
+  const shop = shops.find((item) => item.owner.id === userId) ?? shops[0]
+  const shopOrders = orders.filter((order) => order.shopId === shop?.id)
+
+  const totalOrders = shopOrders.length
+  const activeOrders = shopOrders.filter((o) =>
     [
       "pending_payment",
       "pending_accept",
@@ -25,8 +35,8 @@ export default function ShopOrdersPage() {
       "pending_review",
     ].includes(o.status),
   ).length
-  const completedOrders = mockOrders.filter((o) => o.status === "completed").length
-  const disputedOrders = mockOrders.filter((o) => o.status === "disputed").length
+  const completedOrders = shopOrders.filter((o) => o.status === "completed").length
+  const disputedOrders = shopOrders.filter((o) => o.status === "disputed").length
 
   return (
     <div className="space-y-6">
@@ -91,7 +101,7 @@ export default function ShopOrdersPage() {
               </TableRow>
             </TableHeader>
             <TableBody>
-              {mockOrders.map((order) => (
+              {shopOrders.map((order) => (
                 <TableRow key={order.id}>
                   <TableCell className="font-medium">{order.service.title}</TableCell>
                   <TableCell>{order.consumerName}</TableCell>