feat: add shop dashboard order overview, income stats, and rule settings pages

2026-02-20 23:04:38 +08:00
parent 1362a29755
commit 7e632ce092
4 changed files with 386 additions and 1 deletions
@@ -0,0 +1,112 @@
+import { ArrowDownLeft, ArrowUpRight, CreditCard, DollarSign } from "lucide-react"
+import { Badge } from "@/components/ui/badge"
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { mockOrders, mockTransactions } from "@/lib/mock-data"
+
+export default function ShopIncomePage() {
+  const completedOrders = mockOrders.filter((o) => o.status === "completed")
+  const totalIncome = completedOrders.reduce((acc, order) => acc + order.totalPrice, 0)
+
+  const currentMonth = new Date().getMonth()
+  const thisMonthIncome = completedOrders
+    .filter((o) => new Date(o.completedAt || "").getMonth() === currentMonth)
+    .reduce((acc, order) => acc + order.totalPrice, 0)
+
+  const pendingSettlement = mockOrders
+    .filter((o) => ["in_progress", "pending_close", "pending_review"].includes(o.status))
+    .reduce((acc, order) => acc + order.totalPrice, 0)
+
+  return (
+    <div className="space-y-6">
+      <h1 className="text-2xl font-bold">收入统计</h1>
+
+      <div className="grid gap-4 sm:grid-cols-3">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">总收入</CardTitle>
+            <DollarSign className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">¥{totalIncome.toFixed(2)}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">本月收入</CardTitle>
+            <CreditCard className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">¥{thisMonthIncome.toFixed(2)}</div>
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between pb-2">
+            <CardTitle className="text-sm font-medium">待结算</CardTitle>
+            <ArrowUpRight className="h-4 w-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <div className="text-2xl font-bold">¥{pendingSettlement.toFixed(2)}</div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <Card>
+        <CardHeader>
+          <CardTitle>交易明细</CardTitle>
+        </CardHeader>
+        <CardContent>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>类型</TableHead>
+                <TableHead>描述</TableHead>
+                <TableHead>金额</TableHead>
+                <TableHead>时间</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {mockTransactions.map((transaction) => (
+                <TableRow key={transaction.id}>
+                  <TableCell>
+                    <div className="flex items-center gap-2">
+                      {transaction.amount > 0 ? (
+                        <ArrowDownLeft className="h-4 w-4 text-green-500" />
+                      ) : (
+                        <ArrowUpRight className="h-4 w-4 text-red-500" />
+                      )}
+                      <Badge variant={transaction.amount > 0 ? "default" : "secondary"}>
+                        {transaction.type === "topup"
+                          ? "充值"
+                          : transaction.type === "payment"
+                            ? "支付"
+                            : transaction.type === "income"
+                              ? "收入"
+                              : transaction.type === "withdrawal"
+                                ? "提现"
+                                : "退款"}
+                      </Badge>
+                    </div>
+                  </TableCell>
+                  <TableCell>{transaction.description}</TableCell>
+                  <TableCell className={transaction.amount > 0 ? "text-green-600" : "text-red-600"}>
+                    {transaction.amount > 0 ? "+" : ""}
+                    {transaction.amount}
+                  </TableCell>
+                  <TableCell>{new Date(transaction.createdAt).toLocaleString()}</TableCell>
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </CardContent>
+      </Card>
+    </div>
+  )
+}