feat: add refresh button to various dashboard pages for improved data fetching

apps/web/app/dashboard/charge-points/[id]/page.tsx

@@ -16,7 +16,7 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { ArrowLeft, Pencil, PlugConnection } from "@gravity-ui/icons";
+import { ArrowLeft, Pencil, PlugConnection, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 
@@ -107,7 +107,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
     feePerKwh: "0",
   });
 
-  const cpQuery = useQuery({
+  const { isFetching: refreshing, ...cpQuery } = useQuery({
     queryKey: ["chargePoint", id],
     queryFn: () => api.chargePoints.get(id),
     refetchInterval: 3_000,
@@ -227,12 +227,17 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
             </p>
           )}
         </div>
-        {isAdmin && (
+        <div className="flex items-center gap-2">
-          <Button size="sm" variant="secondary" onPress={openEdit}>
+          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => cpQuery.refetch()} aria-label="刷新">
-            <Pencil className="size-4" />
+            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
-            编辑
           </Button>
-        )}
+          {isAdmin && (
+            <Button size="sm" variant="secondary" onPress={openEdit}>
+              <Pencil className="size-4" />
+              编辑
+            </Button>
+          )}
+        </div>
       </div>
 
       {/* Info grid */}

apps/web/app/dashboard/charge-points/page.tsx

@@ -14,7 +14,7 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { Plus, Pencil, PlugConnection, TrashBin } from "@gravity-ui/icons";
+import { Plus, Pencil, PlugConnection, TrashBin, ArrowRotateRight } from "@gravity-ui/icons";
 import Link from "next/link";
 import { api, type ChargePoint } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
@@ -74,7 +74,7 @@ export default function ChargePointsPage() {
   const [formBusy, setFormBusy] = useState(false);
   const [deleteTarget, setDeleteTarget] = useState<ChargePoint | null>(null);
   const [deleting, setDeleting] = useState(false);
-  const { data: chargePoints = [], refetch: refetchList } = useQuery({
+  const { data: chargePoints = [], refetch: refetchList, isFetching: refreshing } = useQuery({
     queryKey: ["chargePoints"],
     queryFn: () => api.chargePoints.list().catch(() => []),
     refetchInterval: 3_000,
@@ -152,12 +152,17 @@ export default function ChargePointsPage() {
           <h1 className="text-xl font-semibold text-foreground">充电桩管理</h1>
           <p className="mt-0.5 text-sm text-muted">共 {chargePoints.length} 台设备</p>
         </div>
-        {isAdmin && (
+        <div className="flex items-center gap-2">
-          <Button size="sm" variant="secondary" onPress={openCreate}>
+          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => refetchList()} aria-label="刷新">
-            <Plus className="size-4" />
+            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
-            新建充电桩
           </Button>
-        )}
+          {isAdmin && (
+            <Button size="sm" variant="secondary" onPress={openCreate}>
+              <Plus className="size-4" />
+              新建充电桩
+            </Button>
+          )}
+        </div>
       </div>
 
       {/* Create / Edit modal — admin only */}

apps/web/app/dashboard/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useQuery } from "@tanstack/react-query";
-import { Card, Spinner } from "@heroui/react";
+import { Button, Card, Spinner } from "@heroui/react";
 import {
   Thunderbolt,
   PlugConnection,
@@ -9,6 +9,7 @@ import {
   ChartColumn,
   TagDollar,
   Person,
+  ArrowRotateRight,
 } from "@gravity-ui/icons";
 import { useSession } from "@/lib/auth-client";
 import { api, type Stats, type UserStats, type Transaction, type ChargePoint } from "@/lib/api";
@@ -187,7 +188,7 @@ export default function DashboardPage() {
   const { data: sessionData, isPending } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
 
-  const { data, isPending: queryPending } = useQuery({
+  const { data, isPending: queryPending, isFetching: refreshing, refetch } = useQuery({
     queryKey: ["dashboard", isAdmin],
     queryFn: async () => {
       const [statsRes, txRes, cpsData] = await Promise.all([
@@ -225,9 +226,14 @@ export default function DashboardPage() {
 
     return (
       <div className="space-y-6">
-        <div>
+        <div className="flex items-start justify-between gap-3">
-          <h1 className="text-xl font-semibold text-foreground">概览</h1>
+          <div>
-          <p className="mt-0.5 text-sm text-muted">实时运营状态</p>
+            <h1 className="text-xl font-semibold text-foreground">概览</h1>
+            <p className="mt-0.5 text-sm text-muted">实时运营状态</p>
+          </div>
+          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => refetch()} aria-label="刷新">
+            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+          </Button>
         </div>
 
         {/* Today's live metrics */}
@@ -326,11 +332,16 @@ export default function DashboardPage() {
 
   return (
     <div className="space-y-6">
-      <div>
+      <div className="flex items-start justify-between gap-3">
-        <h1 className="text-xl font-semibold text-foreground">概览</h1>
+        <div>
-        <p className="mt-0.5 text-sm text-muted">
+          <h1 className="text-xl font-semibold text-foreground">概览</h1>
-          {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览
+          <p className="mt-0.5 text-sm text-muted">
-        </p>
+            {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览
+          </p>
+        </div>
+        <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => refetch()} aria-label="刷新">
+          <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+        </Button>
       </div>
 
       <div className="grid grid-cols-2 gap-4 lg:grid-cols-4">

apps/web/app/dashboard/transactions/page.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
-import { TrashBin } from "@gravity-ui/icons";
+import { TrashBin, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 
@@ -30,6 +30,7 @@ export default function TransactionsPage() {
   const {
     data,
     isPending: loading,
+    isFetching: refreshing,
     refetch,
   } = useQuery({
     queryKey: ["transactions", page, status],
@@ -76,7 +77,11 @@ export default function TransactionsPage() {
           <h1 className="text-xl font-semibold text-foreground">充电记录</h1>
           <p className="mt-0.5 text-sm text-muted">共 {data?.total ?? "—"} 条</p>
         </div>
-        <div className="flex gap-1.5 rounded-xl bg-surface-secondary p-1">
+        <div className="flex items-center gap-2">
+          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={() => refetch()} aria-label="刷新">
+            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+          </Button>
+          <div className="flex gap-1.5 rounded-xl bg-surface-secondary p-1">
           {(["all", "active", "completed"] as const).map((s) => (
             <button
               key={s}
@@ -89,8 +94,7 @@ export default function TransactionsPage() {
             >
               {s === "all" ? "全部" : s === "active" ? "进行中" : "已完成"}
             </button>
-          ))}
+          ))}          </div>        </div>
-        </div>
       </div>
 
       <Table>

apps/web/app/dashboard/users/page.tsx

@@ -17,7 +17,7 @@ import {
   TextField,
   useFilter,
 } from "@heroui/react";
-import { CreditCard, Pencil } from "@gravity-ui/icons";
+import { CreditCard, Pencil, ArrowRotateRight } from "@gravity-ui/icons";
 import { api, type IdTag, type UserRow } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 
@@ -140,6 +140,7 @@ export default function UsersPage() {
 
   const [users, setUsers] = useState<UserRow[]>([]);
   const [loading, setLoading] = useState(true);
+  const [refreshing, setRefreshing] = useState(false);
   const [updating, setUpdating] = useState<string | null>(null);
 
   const [createForm, setCreateForm] = useState<CreateForm>(emptyCreate);
@@ -168,6 +169,17 @@ export default function UsersPage() {
     }
   };
 
+  const handleRefresh = async () => {
+    setRefreshing(true);
+    try {
+      setUsers(await api.users.list());
+    } catch {
+      // ignore
+    } finally {
+      setRefreshing(false);
+    }
+  };
+
   useEffect(() => {
     load();
   }, []);
@@ -296,7 +308,11 @@ export default function UsersPage() {
           <h1 className="text-xl font-semibold text-foreground">用户管理</h1>
           <p className="mt-0.5 text-sm text-muted">共 {users.length} 位用户（仅管理员可见）</p>
         </div>
-        <Modal>
+        <div className="flex items-center gap-2">
+          <Button isIconOnly size="sm" variant="ghost" isDisabled={refreshing} onPress={handleRefresh} aria-label="刷新">
+            <ArrowRotateRight className={`size-4 ${refreshing ? "animate-spin" : ""}`} />
+          </Button>
+          <Modal>
           <Button variant="secondary" onPress={() => setCreateForm(emptyCreate)}>
             新增用户
           </Button>
@@ -386,6 +402,7 @@ export default function UsersPage() {
             </Modal.Container>
           </Modal.Backdrop>
         </Modal>
+        </div>
       </div>
 
       <Table>