Add admin dashboard filtering and sorting

Provide stable server-side list queries and focused chart controls so operators can inspect large datasets without misleading partial-page ordering.

admin-web/src/features/credits/credits-page.tsx

@@ -1,8 +1,11 @@
 import { ArrowDownUp, Coins, Search } from "lucide-react";
 import { useCallback, useEffect, useMemo, useState, type FormEvent } from "react";
-import { adminApi, ApiError } from "../../api/client";
-import type { LedgerEntry } from "../../api/types";
+import { useSearchParams } from "react-router-dom";
+import { adminApi } from "../../api/client";
+import type { LedgerEntry, LedgerEntryType, LedgerQuery, SortOrder } from "../../api/types";
 import { DataTable, type DataColumn } from "../../components/data-table";
+import { DateRangeControl } from "../../components/date-range-control";
+import { FilterControl } from "../../components/filter-control";
 import {
   Badge,
   Button,
@@ -12,6 +15,8 @@ import {
   LoadingState,
   PageHeader,
 } from "../../components/primitives";
+import { TableToolbar } from "../../components/table-toolbar";
+import { useCursorPage } from "../../hooks/use-cursor-page";
 import {
   formatDateTime,
   formatNumber,
@@ -19,58 +24,63 @@ import {
   statusLabel,
   usageTypeLabel,
 } from "../../lib/format";
-import { toast } from "sonner";
 
 export function CreditsPage() {
-  const [query, setQuery] = useState("");
-  const [activeUserId, setActiveUserId] = useState<string>();
-  const [items, setItems] = useState<LedgerEntry[]>([]);
-  const [nextCursor, setNextCursor] = useState<string>();
-  const [loading, setLoading] = useState(true);
-  const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState<unknown>();
-
-  const load = useCallback(async (userId?: string) => {
-    setLoading(true);
-    setError(undefined);
-    try {
-      const page = userId
-        ? await adminApi.ledger(userId)
-        : await adminApi.latestLedger();
-      setItems(page.items);
-      setNextCursor(page.nextCursor);
-    } catch (requestError) {
-      setError(requestError);
-    } finally {
-      setLoading(false);
-    }
-  }, []);
+  const [searchParams, setSearchParams] = useSearchParams();
+  const initialUserId = searchParams.get("userId") ?? "";
+  const [query, setQuery] = useState(initialUserId);
+  const [activeUserId, setActiveUserId] = useState(initialUserId);
+  const [from, setFrom] = useState(searchParams.get("from") ?? "");
+  const [until, setUntil] = useState(searchParams.get("until") ?? "");
+  const [type, setType] = useState<"" | LedgerEntryType>(
+    (searchParams.get("type") as LedgerEntryType | null) ?? "",
+  );
+  const [order, setOrder] = useState<SortOrder>(
+    searchParams.get("order") === "asc" ? "asc" : "desc",
+  );
+  const ledgerQuery = useMemo<LedgerQuery>(
+    () => ({
+      from: from || undefined,
+      until: until || undefined,
+      type: type || undefined,
+      sort: "createdAt",
+      order,
+      limit: 50,
+    }),
+    [from, order, type, until],
+  );
+  const fetchLedger = useCallback(
+    (value: LedgerQuery) =>
+      activeUserId
+        ? adminApi.ledger(activeUserId, value)
+        : adminApi.latestLedger(value),
+    [activeUserId],
+  );
+  const {
+    items,
+    nextCursor,
+    loading,
+    loadingMore,
+    error,
+    loadMore,
+    reload,
+  } = useCursorPage(ledgerQuery, fetchLedger);
 
   useEffect(() => {
-    void load();
-  }, [load]);
-
-  async function loadMore() {
-    if (!nextCursor) return;
-    setLoadingMore(true);
-    try {
-      const page = activeUserId
-        ? await adminApi.ledger(activeUserId, nextCursor)
-        : await adminApi.latestLedger(nextCursor);
-      setItems((current) => [...current, ...page.items]);
-      setNextCursor(page.nextCursor);
-    } catch (requestError) {
-      toast.error(requestError instanceof ApiError ? requestError.message : "加载流水失败");
-    } finally {
-      setLoadingMore(false);
-    }
-  }
+    const params = new URLSearchParams();
+    if (activeUserId) params.set("userId", activeUserId);
+    if (from) params.set("from", from);
+    if (until) params.set("until", until);
+    if (type) params.set("type", type);
+    params.set("sort", "createdAt");
+    params.set("order", order);
+    setSearchParams(params, { replace: true });
+  }, [activeUserId, from, order, setSearchParams, type, until]);
 
   function submit(event: FormEvent<HTMLFormElement>) {
     event.preventDefault();
     const userId = query.trim() || undefined;
-    setActiveUserId(userId);
-    void load(userId);
+    setActiveUserId(userId ?? "");
   }
 
   const columns = useMemo<DataColumn<LedgerEntry>[]>(
@@ -171,6 +181,38 @@ export function CreditsPage() {
             </Button>
           </form>
         </div>
+        <TableToolbar
+          active={Boolean(activeUserId || from || until || type || order !== "desc")}
+          onClear={() => {
+            setQuery("");
+            setActiveUserId("");
+            setFrom("");
+            setUntil("");
+            setType("");
+            setOrder("desc");
+          }}
+        >
+          <DateRangeControl
+            value={{ from: from || undefined, until: until || undefined }}
+            onChange={(value) => {
+              setFrom(value.from ?? "");
+              setUntil(value.until ?? "");
+            }}
+          />
+          <FilterControl
+            label="流水类型"
+            value={type}
+            options={[
+              { value: "", label: "全部类型" },
+              { value: "grant", label: "赠送" },
+              { value: "reserve", label: "预留" },
+              { value: "settle", label: "结算" },
+              { value: "refund", label: "退款" },
+              { value: "adjustment", label: "调整" },
+            ]}
+            onChange={setType}
+          />
+        </TableToolbar>
 
         <div className="flex items-center gap-3 border-b border-border bg-surface-muted/35 px-5 py-3 text-xs text-muted sm:px-6">
           <Coins className="size-4 text-primary" aria-hidden />
@@ -186,7 +228,7 @@ export function CreditsPage() {
 
         {error ? (
           <div className="p-6">
-            <ErrorState error={error} retry={() => void load(activeUserId)} />
+            <ErrorState error={error} retry={reload} />
           </div>
         ) : loading ? (
           <LoadingState label="加载积分流水" />
@@ -195,7 +237,14 @@ export function CreditsPage() {
             data={items}
             columns={columns}
             caption={activeUserId ? `用户 ${activeUserId} 的积分流水` : "最新积分流水"}
-            emptyTitle={activeUserId ? "该用户暂无积分流水" : "暂无积分流水"}
+            emptyTitle={
+              activeUserId || from || until || type
+                ? "没有符合当前筛选条件的流水"
+                : "暂无积分流水"
+            }
+            sort={{ key: "createdAt", order }}
+            sortableColumns={{ createdAt: "createdAt" }}
+            onSortChange={(_, nextOrder) => setOrder(nextOrder)}
             footer={
               nextCursor ? (
                 <div className="flex justify-center border-t border-border p-5">