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

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>
-          <h1 className="text-xl font-semibold text-foreground">概览</h1>
-          <p className="mt-0.5 text-sm text-muted">实时运营状态</p>
+        <div className="flex items-start justify-between gap-3">
+          <div>
+            <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>
-        <h1 className="text-xl font-semibold text-foreground">概览</h1>
-        <p className="mt-0.5 text-sm text-muted">
-          {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览
-        </p>
+      <div className="flex items-start justify-between gap-3">
+        <div>
+          <h1 className="text-xl font-semibold text-foreground">概览</h1>
+          <p className="mt-0.5 text-sm text-muted">
+            {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">