From a84393590eb5f56c04dae07673f745264406cc91 Mon Sep 17 00:00:00 2001 From: Timothy Yin Date: Wed, 11 Mar 2026 00:29:04 +0800 Subject: [PATCH] feat: add refresh button to various dashboard pages for improved data fetching --- .../app/dashboard/charge-points/[id]/page.tsx | 19 +++++++----- apps/web/app/dashboard/charge-points/page.tsx | 19 +++++++----- apps/web/app/dashboard/page.tsx | 31 +++++++++++++------ apps/web/app/dashboard/transactions/page.tsx | 12 ++++--- apps/web/app/dashboard/users/page.tsx | 21 +++++++++++-- 5 files changed, 72 insertions(+), 30 deletions(-) diff --git a/apps/web/app/dashboard/charge-points/[id]/page.tsx b/apps/web/app/dashboard/charge-points/[id]/page.tsx index ca66225..058fca5 100644 --- a/apps/web/app/dashboard/charge-points/[id]/page.tsx +++ b/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

)} - {isAdmin && ( - - )} + {isAdmin && ( + + )} + {/* Info grid */} diff --git a/apps/web/app/dashboard/charge-points/page.tsx b/apps/web/app/dashboard/charge-points/page.tsx index 22db7f2..71c974e 100644 --- a/apps/web/app/dashboard/charge-points/page.tsx +++ b/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(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() {

充电桩管理

共 {chargePoints.length} 台设备

- {isAdmin && ( - - )} + {isAdmin && ( + + )} + {/* Create / Edit modal — admin only */} diff --git a/apps/web/app/dashboard/page.tsx b/apps/web/app/dashboard/page.tsx index c1bb2a5..03371ae 100644 --- a/apps/web/app/dashboard/page.tsx +++ b/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 (
-
-

概览

-

实时运营状态

+
+
+

概览

+

实时运营状态

+
+
{/* Today's live metrics */} @@ -326,11 +332,16 @@ export default function DashboardPage() { return (
-
-

概览

-

- {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览 -

+
+
+

概览

+

+ {sessionData?.user?.name ?? sessionData?.user?.email} 的账户概览 +

+
+
diff --git a/apps/web/app/dashboard/transactions/page.tsx b/apps/web/app/dashboard/transactions/page.tsx index f6bbd58..b9e82fe 100644 --- a/apps/web/app/dashboard/transactions/page.tsx +++ b/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() {

充电记录

共 {data?.total ?? "—"} 条

-
+
+ +
{(["all", "active", "completed"] as const).map((s) => ( - ))} -
+ ))}
diff --git a/apps/web/app/dashboard/users/page.tsx b/apps/web/app/dashboard/users/page.tsx index 39257a9..68c8211 100644 --- a/apps/web/app/dashboard/users/page.tsx +++ b/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([]); const [loading, setLoading] = useState(true); + const [refreshing, setRefreshing] = useState(false); const [updating, setUpdating] = useState(null); const [createForm, setCreateForm] = useState(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() {

用户管理

共 {users.length} 位用户（仅管理员可见）

- +
+ + @@ -386,6 +402,7 @@ export default function UsersPage() { +