feat(transactions): add transaction detail page with live energy and cost estimation

feat(transactions): implement active transaction checks and idTag validation
feat(id-tag): enhance idTag card with disabled state for active transactions
fix(transactions): improve error handling and user feedback for transaction actions

apps/csms/src/ocpp/actions/authorize.ts

@@ -1,7 +1,7 @@
-import { eq } from "drizzle-orm";
+import { and, eq, isNull } from "drizzle-orm";
 import dayjs from "dayjs";
 import { useDrizzle } from "@/lib/db.js";
-import { idTag } from "@/db/schema.js";
+import { idTag, transaction } from "@/db/schema.js";
 import type {
   AuthorizeRequest,
   AuthorizeResponse,
@@ -19,6 +19,7 @@ import type {
 export async function resolveIdTagInfo(
   idTagValue: string,
   checkBalance = true,
+  checkConcurrent = true,
 ): Promise<IdTagInfo> {
   const db = useDrizzle();
   const [tag] = await db.select().from(idTag).where(eq(idTag.idTag, idTagValue)).limit(1);
@@ -31,6 +32,17 @@ export async function resolveIdTagInfo(
   if (tag.status !== "Accepted") {
     return { status: tag.status as IdTagInfo["status"] };
   }
+
+  // Enforce single active transaction per idTag.
+  if (checkConcurrent) {
+    const [activeTx] = await db
+      .select({ id: transaction.id })
+      .from(transaction)
+      .where(and(eq(transaction.idTag, idTagValue), isNull(transaction.stopTimestamp)))
+      .limit(1);
+    if (activeTx) return { status: "ConcurrentTx" };
+  }
+
   // Reject if balance is zero or negative
   if (checkBalance && tag.balance <= 0) {
     return { status: "Blocked" };

apps/csms/src/ocpp/actions/stop-transaction.ts

@@ -183,7 +183,9 @@ export async function handleStopTransaction(
   );
 
   // Resolve idTagInfo for the stop tag if provided (no balance check — charging already occurred)
-  const idTagInfo = payload.idTag ? await resolveIdTagInfo(payload.idTag, false) : undefined;
+  const idTagInfo = payload.idTag
+    ? await resolveIdTagInfo(payload.idTag, false, false)
+    : undefined;
 
   return { idTagInfo };
 }

apps/csms/src/routes/transactions.ts

@@ -2,11 +2,12 @@ import { Hono } from "hono";
 import { and, desc, eq, isNull, isNotNull, sql } from "drizzle-orm";
 import dayjs from "dayjs";
 import { useDrizzle } from "@/lib/db.js";
-import { transaction, chargePoint, connector, idTag, meterValue } from "@/db/schema.js";
+import { transaction, chargePoint, connector, idTag } from "@/db/schema.js";
 import type { SampledValue } from "@/db/schema.js";
 import { user } from "@/db/auth-schema.js";
 import { ocppConnections } from "@/ocpp/handler.js";
 import { OCPP_MESSAGE_TYPE } from "@/ocpp/types.js";
+import { resolveIdTagInfo } from "@/ocpp/actions/authorize.js";
 import type { HonoEnv } from "@/types/hono.ts";
 
 const app = new Hono<HonoEnv>();
@@ -42,15 +43,33 @@ app.post("/remote-start", async (c) => {
     );
   }
 
-  // Non-admin: verify idTag belongs to current user and is Accepted
+  // Non-admin: verify idTag belongs to current user
   if (currentUser.role !== "admin") {
     const [tag] = await db
-      .select({ status: idTag.status })
+      .select({ idTag: idTag.idTag })
       .from(idTag)
       .where(and(eq(idTag.idTag, body.idTag.trim()), eq(idTag.userId, currentUser.id)))
       .limit(1);
     if (!tag) return c.json({ error: "idTag not found or not authorized" }, 403);
-    if (tag.status !== "Accepted") return c.json({ error: "idTag is not accepted" }, 400);
+  }
+
+  // Reuse the same authorization logic as Authorize/StartTransaction.
+  const tagInfo = await resolveIdTagInfo(body.idTag.trim());
+  if (tagInfo.status !== "Accepted") {
+    if (tagInfo.status === "ConcurrentTx") {
+      return c.json({ error: "ConcurrentTx: idTag already has an active transaction" }, 409);
+    }
+    return c.json({ error: `idTag rejected: ${tagInfo.status}` }, 400);
+  }
+
+  // One idTag can only have one active transaction at a time.
+  const [activeTx] = await db
+    .select({ id: transaction.id })
+    .from(transaction)
+    .where(and(eq(transaction.idTag, body.idTag.trim()), isNull(transaction.stopTimestamp)))
+    .limit(1);
+  if (activeTx) {
+    return c.json({ error: "ConcurrentTx: idTag already has an active transaction" }, 409);
   }
 
   // Verify charge point exists and is Accepted
@@ -224,21 +243,64 @@ app.get("/:id", async (c) => {
     .select({
       transaction,
       chargePointIdentifier: chargePoint.chargePointIdentifier,
+      connectorNumber: connector.connectorId,
+      feePerKwh: chargePoint.feePerKwh,
+      pricingMode: chargePoint.pricingMode,
     })
     .from(transaction)
     .leftJoin(chargePoint, eq(transaction.chargePointId, chargePoint.id))
+    .leftJoin(connector, eq(transaction.connectorId, connector.id))
     .where(eq(transaction.id, id))
     .limit(1);
 
   if (!row) return c.json({ error: "Not found" }, 404);
 
+  let liveEnergyWh: number | null = null;
+  let estimatedCost: number | null = null;
+
+  // For active transactions, return live estimated energy/cost like the list endpoint.
+  if (!row.transaction.stopTimestamp) {
+    const latestRows = await db.execute<{
+      sampled_values: SampledValue[];
+    }>(sql`
+      SELECT sampled_values
+      FROM meter_value
+      WHERE transaction_id = ${id}
+      ORDER BY timestamp DESC
+      LIMIT 1
+    `);
+
+    const latest = latestRows.rows[0];
+    if (latest) {
+      const svList = latest.sampled_values as SampledValue[];
+      const energySv = svList.find(
+        (sv) => (!sv.measurand || sv.measurand === "Energy.Active.Import.Register") && !sv.phase,
+      );
+
+      if (energySv != null) {
+        const raw = parseFloat(energySv.value);
+        if (!Number.isNaN(raw) && row.transaction.startMeterValue != null) {
+          const latestMeterWh = energySv.unit === "kWh" ? raw * 1000 : raw;
+          liveEnergyWh = latestMeterWh - row.transaction.startMeterValue;
+
+          if (liveEnergyWh > 0 && row.pricingMode === "fixed" && (row.feePerKwh ?? 0) > 0) {
+            estimatedCost = Math.ceil((liveEnergyWh * (row.feePerKwh ?? 0)) / 1000);
+          }
+        }
+      }
+    }
+  }
+
   return c.json({
     ...row.transaction,
     chargePointIdentifier: row.chargePointIdentifier,
+    connectorNumber: row.connectorNumber,
     energyWh:
       row.transaction.stopMeterValue != null
         ? row.transaction.stopMeterValue - row.transaction.startMeterValue
         : null,
+    liveEnergyWh,
+    estimatedCost,
   });
 });
 

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

@@ -1,17 +1,17 @@
 "use client";
 
-import { useState, useEffect, useRef, Fragment, Suspense } from "react";
+import { useState, useEffect, useRef, Fragment, Suspense, useMemo } from "react";
 import { useSearchParams } from "next/navigation";
 import { useQuery, useMutation } from "@tanstack/react-query";
-import { Button, Modal, Spinner } from "@heroui/react";
+import { Alert, AlertDialog, Button, Modal, Spinner } from "@heroui/react";
 import { ThunderboltFill, CreditCard, Check, QrCode, Xmark } from "@gravity-ui/icons";
 import jsQR from "jsqr";
 import { api } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
-import { EvCharger, Plug } from "lucide-react";
+import { BanknoteArrowUp, EvCharger, Plug } from "lucide-react";
 import Link from "next/link";
 import { IdTagCard } from "@/components/id-tag-card";
-import router from "next/router";
 
 // ── Status maps (same as charge-points page) ────────────────────────────────
 
@@ -221,6 +221,7 @@ function QrScanner({ onResult, onClose }: ScannerProps) {
 
 function ChargePageContent() {
   const searchParams = useSearchParams();
+  const { data: sessionData } = useSession();
 
   const [step, setStep] = useState(1);
   const [selectedCpId, setSelectedCpId] = useState<string | null>(null);
@@ -230,6 +231,12 @@ function ChargePageContent() {
   const [scanError, setScanError] = useState<string | null>(null);
   const [startResult, setStartResult] = useState<"success" | "error" | null>(null);
   const [startError, setStartError] = useState<string | null>(null);
+  const [startSnapshot, setStartSnapshot] = useState<{
+    cpId: string;
+    chargePointIdentifier: string;
+    connectorId: number;
+    idTag: string;
+  } | null>(null);
 
   // Detect mobile
   const [isMobile, setIsMobile] = useState(false);
@@ -263,8 +270,67 @@ function ChargePageContent() {
     queryFn: () => api.idTags.list().catch(() => []),
   });
 
+  const { data: activeTransactions = [] } = useQuery({
+    queryKey: ["transactions", "active", "idTagLock"],
+    queryFn: async () => {
+      const res = await api.transactions.list({ page: 1, limit: 200, status: "active" });
+      return res.data;
+    },
+    refetchInterval: 3_000,
+  });
+
   const selectedCp = chargePoints.find((cp) => cp.id === selectedCpId) ?? null;
   const myTags = idTags?.filter((t) => t.status === "Accepted") ?? [];
+  const activeTransactionsForCurrentUser = useMemo(() => {
+    const currentUserId = sessionData?.user?.id;
+    if (!currentUserId) return activeTransactions;
+    return activeTransactions.filter((tx) => tx.idTagUserId === currentUserId);
+  }, [activeTransactions, sessionData?.user?.id]);
+
+  const activeCount = activeTransactionsForCurrentUser.length;
+  const activeDetailHref =
+    activeCount === 1
+      ? `/dashboard/transactions/${activeTransactionsForCurrentUser[0].id}`
+      : "/dashboard/transactions?status=active";
+  const activeIdTagSet = useMemo(
+    () => new Set(activeTransactionsForCurrentUser.map((tx) => tx.idTag)),
+    [activeTransactionsForCurrentUser],
+  );
+
+  useEffect(() => {
+    if (startResult !== "success" && selectedIdTag && activeIdTagSet.has(selectedIdTag)) {
+      setSelectedIdTag(null);
+    }
+  }, [selectedIdTag, activeIdTagSet, startResult]);
+
+  const { data: startedTransactionId, isFetching: locatingTx } = useQuery({
+    queryKey: [
+      "latestStartedTx",
+      startSnapshot?.cpId,
+      startSnapshot?.connectorId,
+      startSnapshot?.idTag,
+      startResult,
+    ],
+    enabled: startResult === "success" && !!startSnapshot?.cpId && !!startSnapshot?.idTag,
+    queryFn: async () => {
+      if (!startSnapshot?.cpId || !startSnapshot?.idTag) return null;
+      const res = await api.transactions.list({
+        page: 1,
+        limit: 30,
+        status: "active",
+        chargePointId: startSnapshot.cpId,
+      });
+
+      const matched = res.data.find(
+        (tx) =>
+          tx.idTag === startSnapshot.idTag && tx.connectorNumber === startSnapshot.connectorId,
+      );
+
+      return matched?.id ?? null;
+    },
+    refetchInterval: (query) => (query.state.data ? false : 1_500),
+    retry: false,
+  });
 
   const startMutation = useMutation({
     mutationFn: async () => {
@@ -277,28 +343,45 @@ function ChargePageContent() {
         idTag: selectedIdTag,
       });
     },
+    onMutate: () => {
+      if (!selectedCp || selectedConnectorId === null || !selectedIdTag) return;
+      setStartSnapshot({
+        cpId: selectedCp.id,
+        chargePointIdentifier: selectedCp.chargePointIdentifier,
+        connectorId: selectedConnectorId,
+        idTag: selectedIdTag,
+      });
+    },
     onSuccess: () => {
       setStartResult("success");
     },
     onError: (err: Error) => {
       setStartResult("error");
       const msg = err.message ?? "";
-      if (msg.includes("offline")) setStartError("充电桩当前不在线，请稍后再试");
+      const lowerMsg = msg.toLowerCase();
-      else if (msg.includes("not accepted")) setStartError("充电桩未启用，请联系管理员");
+
-      else if (msg.includes("idTag")) setStartError("储值卡无效或无权使用");
+      if (lowerMsg.includes("offline")) setStartError("充电桩当前不在线，请稍后再试");
-      else setStartError("启动失败：" + msg);
+      else if (
+        lowerMsg.includes("chargepoint is not accepted") ||
+        lowerMsg.includes("not accepted")
+      ) {
+        setStartError("充电桩未启用，请联系管理员");
+      } else if (msg.includes("ConcurrentTx") || lowerMsg.includes("concurrent")) {
+        setStartError("该储值卡已有进行中的充电订单，请先结束后再发起");
+      } else if (lowerMsg.includes("rejected: blocked")) {
+        setStartError("储值卡不可用或余额不足，请更换储值卡或先充值");
+      } else if (lowerMsg.includes("rejected: expired")) {
+        setStartError("储值卡已过期，请联系管理员处理");
+      } else if (lowerMsg.includes("rejected: invalid")) {
+        setStartError("储值卡无效，请确认卡号后重试");
+      } else if (lowerMsg.includes("not found or not authorized")) {
+        setStartError("该储值卡无权使用或不存在");
+      } else if (msg.includes("idTag") || lowerMsg.includes("idtag")) {
+        setStartError("储值卡状态不可用，无法启动充电");
+      } else setStartError("启动失败：" + msg);
     },
   });
 
-  function resetAll() {
-    setStep(1);
-    setSelectedCpId(null);
-    setSelectedConnectorId(null);
-    setSelectedIdTag(null);
-    setStartResult(null);
-    setStartError(null);
-  }
-
   function handleScanResult(raw: string) {
     setShowScanner(false);
     setScanError(null);
@@ -334,29 +417,52 @@ function ChargePageContent() {
           </div>
         </div>
         <div className="space-y-2">
-          <h2 className="text-2xl font-bold text-foreground">正在启动中</h2>
+          <h2 className="text-2xl font-bold text-foreground">已发起充电</h2>
           <p className="text-sm text-muted leading-relaxed">充电桩正在响应，稍候将自动开始</p>
         </div>
         <div className="w-full max-w-xs rounded-2xl border border-border bg-surface p-4 text-left space-y-2">
           <div className="flex justify-between text-sm">
             <span className="text-muted">充电桩</span>
-            <span className="font-medium text-foreground">{selectedCp?.chargePointIdentifier}</span>
+            <span className="font-medium text-foreground">
+              {startSnapshot?.chargePointIdentifier ?? selectedCp?.chargePointIdentifier}
+            </span>
           </div>
           <div className="flex justify-between text-sm">
             <span className="text-muted">接口</span>
-            <span className="font-medium text-foreground">#{selectedConnectorId}</span>
+            <span className="font-medium text-foreground">
+              #{startSnapshot?.connectorId ?? selectedConnectorId}
+            </span>
           </div>
           <div className="flex justify-between text-sm">
             <span className="text-muted">储值卡</span>
-            <span className="font-mono font-medium text-foreground">{selectedIdTag}</span>
+            <span className="font-mono font-medium text-foreground">
+              {startSnapshot?.idTag ?? selectedIdTag}
+            </span>
           </div>
         </div>
-        <Link href="/dashboard/transactions" className="w-full max-w-xs">
+        {startedTransactionId ? (
-          <Button size="lg" className="w-full">
+          <Link
-            <ThunderboltFill className="size-4" />
+            href={`/dashboard/transactions/${startedTransactionId}`}
-            充电记录
+            className="w-full max-w-xs"
-          </Button>
+          >
-        </Link>
+            <Button size="lg" className="w-full">
+              <BanknoteArrowUp className="size-4" />
+              查看订单
+            </Button>
+          </Link>
+        ) : (
+          <div className="w-full max-w-xs space-y-2">
+            <Link href="/dashboard/transactions?status=active" className="block">
+              <Button size="lg" variant="secondary" className="w-full">
+                <BanknoteArrowUp className="size-4" />
+                查看进行中订单
+              </Button>
+            </Link>
+            <p className="text-xs text-muted text-center inline-flex w-full items-center justify-center gap-1.5">
+              正在生成订单，可先前往列表查看
+            </p>
+          </div>
+        )}
       </div>
     );
   }
@@ -404,12 +510,67 @@ function ChargePageContent() {
         </Modal.Backdrop>
       </Modal>
 
+      <AlertDialog
+        isOpen={startResult === "error" && !!startError}
+        onOpenChange={(open) => {
+          if (!open) {
+            setStartResult(null);
+            setStartError(null);
+            setStartSnapshot(null);
+          }
+        }}
+      >
+        <AlertDialog.Backdrop variant="blur">
+          <AlertDialog.Container size="sm">
+            <AlertDialog.Dialog>
+              <AlertDialog.Header>
+                <AlertDialog.CloseTrigger />
+                <AlertDialog.Icon status="danger" />
+                <AlertDialog.Heading>启动失败</AlertDialog.Heading>
+              </AlertDialog.Header>
+              <AlertDialog.Body className="overflow-hidden">
+                <p>{startError ?? "启动失败，请稍后重试"}</p>
+              </AlertDialog.Body>
+              <AlertDialog.Footer>
+                <Button
+                  slot="close"
+                  variant="secondary"
+                  onPress={() => {
+                    setStartResult(null);
+                    setStartError(null);
+                  }}
+                >
+                  我知道了
+                </Button>
+              </AlertDialog.Footer>
+            </AlertDialog.Dialog>
+          </AlertDialog.Container>
+        </AlertDialog.Backdrop>
+      </AlertDialog>
+
       {scanError && (
         <div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
           {scanError}
         </div>
       )}
 
+      {activeCount > 0 && (
+        <Alert status="accent">
+          <Alert.Indicator />
+          <Alert.Content>
+            <Alert.Title>当前有 {activeCount} 笔进行中的充电</Alert.Title>
+            <Alert.Description>
+              同一张储值卡无法发起多笔充电订单，若要结束进行中的订单，请{" "}
+              <Link href={activeDetailHref} className="underline">
+                <Button variant="secondary" size="sm" className="px-1.5 h-6 rounded-xl">
+                  点击查看
+                </Button>
+              </Link>
+            </Alert.Description>
+          </Alert.Content>
+        </Alert>
+      )}
+
       {/* Step bar */}
       <StepBar step={step} onGoBack={(t) => setStep(t)} />
 
@@ -645,23 +806,29 @@ function ChargePageContent() {
             </div>
           ) : (
             <div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3">
-              {myTags.map((tag) => (
+              {myTags.map((tag) => {
-                <IdTagCard
+                const locked = activeIdTagSet.has(tag.idTag);
-                  key={tag.idTag}
+                return (
-                  idTag={tag.idTag}
+                  <div key={tag.idTag} className="space-y-2">
-                  balance={tag.balance}
+                    <IdTagCard
-                  layout={tag.cardLayout ?? undefined}
+                      idTag={tag.idTag}
-                  skin={tag.cardSkin ?? undefined}
+                      balance={tag.balance}
-                  isSelected={selectedIdTag === tag.idTag}
+                      layout={tag.cardLayout ?? undefined}
-                  onClick={() => setSelectedIdTag(tag.idTag)}
+                      skin={tag.cardSkin ?? undefined}
-                />
+                      isSelected={selectedIdTag === tag.idTag}
-              ))}
+                      isDisabled={locked}
-            </div>
+                      onClick={() => {
-          )}
+                        if (!locked) setSelectedIdTag(tag.idTag);
-
+                      }}
-          {startResult === "error" && (
+                    />
-            <div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
+                    {locked && (
-              {startError ?? "启动失败，请重试"}
+                      <p className="px-1 text-xs font-medium text-warning">
+                        该卡有进行中的订单，暂不可再次启动
+                      </p>
+                    )}
+                  </div>
+                );
+              })}
             </div>
           )}
 
@@ -673,6 +840,7 @@ function ChargePageContent() {
                 setStep(2);
                 setStartResult(null);
                 setStartError(null);
+                setStartSnapshot(null);
               }}
             >
               上一步

apps/web/app/dashboard/transactions/[id]/page.tsx

@@ -0,0 +1,369 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Button, Chip, Modal, Spinner } from "@heroui/react";
+import { ArrowLeft, ArrowRotateRight, TrashBin } from "@gravity-ui/icons";
+import { APIError, api } from "@/lib/api";
+import { useSession } from "@/lib/auth-client";
+import dayjs from "@/lib/dayjs";
+
+function formatDuration(start: string, stop: string | null): string {
+  if (!stop) return "进行中";
+  const min = dayjs(stop).diff(dayjs(start), "minute");
+  if (min < 60) return `${min} 分钟`;
+  const h = Math.floor(min / 60);
+  const m = min % 60;
+  return `${h}h ${m}m`;
+}
+
+function formatDateTime(iso: string | null | undefined): string {
+  if (!iso) return "—";
+  return dayjs(iso).format("YYYY/M/D HH:mm:ss");
+}
+
+function formatEnergy(wh: number | null | undefined): string {
+  if (wh == null) return "—";
+  return `${(wh / 1000).toFixed(3)} kWh`;
+}
+
+function formatAmount(fen: number | null | undefined): string {
+  if (fen == null) return "—";
+  return `¥${(fen / 100).toFixed(2)}`;
+}
+
+export default function TransactionDetailPage({ params }: { params: Promise<{ id: string }> }) {
+  const { id } = use(params);
+  const router = useRouter();
+  const txId = Number(id);
+  const isValidId = Number.isInteger(txId) && txId > 0;
+
+  const [stopping, setStopping] = useState(false);
+  const [deleting, setDeleting] = useState(false);
+
+  const { data: sessionData } = useSession();
+  const isAdmin = sessionData?.user?.role === "admin";
+
+  const {
+    data: tx,
+    isPending,
+    isFetching,
+    isError,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ["transaction", txId],
+    queryFn: () => api.transactions.get(txId),
+    enabled: isValidId,
+    refetchInterval: 3_000,
+    retry: false,
+  });
+
+  const handleStop = async () => {
+    if (!tx) return;
+    setStopping(true);
+    try {
+      await api.transactions.stop(tx.id);
+      await refetch();
+    } finally {
+      setStopping(false);
+    }
+  };
+
+  const handleDelete = async () => {
+    if (!tx) return;
+    setDeleting(true);
+    try {
+      await api.transactions.delete(tx.id);
+      router.push("/dashboard/transactions");
+    } finally {
+      setDeleting(false);
+    }
+  };
+
+  if (!isValidId) {
+    return (
+      <div className="space-y-4">
+        <Link
+          href="/dashboard/transactions"
+          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          充电记录
+        </Link>
+        <p className="text-sm text-danger">无效的交易编号。</p>
+      </div>
+    );
+  }
+
+  if (isPending) {
+    return (
+      <div className="flex h-48 items-center justify-center">
+        <Spinner />
+      </div>
+    );
+  }
+
+  if (isError || !tx) {
+    const notFound = error instanceof APIError && error.status === 404;
+    return (
+      <div className="space-y-4">
+        <Link
+          href="/dashboard/transactions"
+          className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
+        >
+          <ArrowLeft className="size-4" />
+          充电记录
+        </Link>
+        <p className="text-sm text-danger">
+          {notFound ? "交易记录不存在。" : "加载交易记录失败。"}
+        </p>
+      </div>
+    );
+  }
+
+  const energyWh = tx.energyWh ?? tx.liveEnergyWh;
+  const amountFen = tx.chargeAmount ?? tx.estimatedCost;
+  const isEstimatedEnergy = tx.energyWh == null && tx.liveEnergyWh != null;
+  const isEstimatedAmount = tx.chargeAmount == null && tx.estimatedCost != null;
+
+  return (
+    <div className="space-y-6">
+      <Link
+        href="/dashboard/transactions"
+        className="inline-flex items-center gap-1.5 text-sm text-muted hover:text-foreground"
+      >
+        <ArrowLeft className="size-4" />
+        充电记录
+      </Link>
+
+      <div className="flex flex-wrap items-start justify-between gap-4">
+        <div className="space-y-1.5">
+          <div className="flex flex-wrap items-center gap-2">
+            <h1 className="font-mono text-2xl font-semibold text-foreground">充电订单#{tx.id}</h1>
+            {tx.stopTimestamp ? (
+              <Chip color="success" size="sm" variant="soft">
+                已完成
+              </Chip>
+            ) : (
+              <Chip color="warning" size="sm" variant="soft">
+                进行中
+              </Chip>
+            )}
+            {isEstimatedAmount && (
+              <Chip color="warning" size="sm" variant="soft">
+                费用预估
+              </Chip>
+            )}
+          </div>
+          <p className="text-sm text-muted">
+            开始于 {formatDateTime(tx.startTimestamp)} · {tx.stopTimestamp ? "时长 " : ""}
+            {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
+          </p>
+        </div>
+
+        <div className="flex items-center gap-2">
+          <Button
+            isIconOnly
+            size="sm"
+            variant="ghost"
+            isDisabled={isFetching}
+            onPress={() => refetch()}
+            aria-label="刷新"
+          >
+            <ArrowRotateRight className={`size-4 ${isFetching ? "animate-spin" : ""}`} />
+          </Button>
+
+          {!tx.stopTimestamp && (
+            <Modal>
+              <Button size="sm" variant="danger-soft" isDisabled={stopping}>
+                {stopping ? <Spinner size="sm" /> : "中止充电"}
+              </Button>
+              <Modal.Backdrop>
+                <Modal.Container scroll="outside">
+                  <Modal.Dialog className="sm:max-w-96">
+                    <Modal.CloseTrigger />
+                    <Modal.Header>
+                      <Modal.Heading>确认中止充电</Modal.Heading>
+                    </Modal.Header>
+                    <Modal.Body>
+                      <p className="text-sm text-muted">
+                        将远程中止充电交易{" "}
+                        <span className="font-mono text-foreground">#{tx.id}</span>。
+                      </p>
+                    </Modal.Body>
+                    <Modal.Footer className="flex justify-end gap-2">
+                      <Button slot="close" variant="ghost">
+                        取消
+                      </Button>
+                      <Button
+                        slot="close"
+                        variant="danger"
+                        isDisabled={stopping}
+                        onPress={handleStop}
+                      >
+                        {stopping ? <Spinner size="sm" /> : "确认中止"}
+                      </Button>
+                    </Modal.Footer>
+                  </Modal.Dialog>
+                </Modal.Container>
+              </Modal.Backdrop>
+            </Modal>
+          )}
+
+          {isAdmin && (
+            <Modal>
+              <Button isIconOnly size="sm" variant="tertiary" isDisabled={deleting}>
+                {deleting ? <Spinner size="sm" /> : <TrashBin className="size-4" />}
+              </Button>
+              <Modal.Backdrop>
+                <Modal.Container scroll="outside">
+                  <Modal.Dialog className="sm:max-w-96">
+                    <Modal.CloseTrigger />
+                    <Modal.Header>
+                      <Modal.Heading>确认删除记录</Modal.Heading>
+                    </Modal.Header>
+                    <Modal.Body>
+                      <p className="text-sm text-muted">
+                        将永久删除交易 <span className="font-mono text-foreground">#{tx.id}</span>。
+                      </p>
+                    </Modal.Body>
+                    <Modal.Footer className="flex justify-end gap-2">
+                      <Button slot="close" variant="ghost">
+                        取消
+                      </Button>
+                      <Button
+                        slot="close"
+                        variant="danger"
+                        isDisabled={deleting}
+                        onPress={handleDelete}
+                      >
+                        {deleting ? <Spinner size="sm" /> : "确认删除"}
+                      </Button>
+                    </Modal.Footer>
+                  </Modal.Dialog>
+                </Modal.Container>
+              </Modal.Backdrop>
+            </Modal>
+          )}
+        </div>
+      </div>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <div className="rounded-xl border border-border bg-surface-secondary p-4">
+          <p className="text-xs text-muted">充电量</p>
+          <div className="mt-1 inline-flex items-center gap-1.5">
+            <p className="text-xl font-semibold text-foreground">{formatEnergy(energyWh)}</p>
+            {isEstimatedEnergy && (
+              <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                预估
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="rounded-xl border border-border bg-surface-secondary p-4">
+          <p className="text-xs text-muted">总费用</p>
+          <div className="mt-1 inline-flex items-center gap-1.5">
+            <p className="text-xl font-semibold text-foreground">{formatAmount(amountFen)}</p>
+            {isEstimatedAmount && (
+              <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                预估
+              </span>
+            )}
+          </div>
+        </div>
+        <div className="rounded-xl border border-border bg-surface-secondary p-4">
+          <p className="text-xs text-muted">状态</p>
+          <p className="mt-1 text-xl font-semibold text-foreground">
+            {tx.stopTimestamp ? "已完成" : "进行中"}
+          </p>
+        </div>
+        <div className="rounded-xl border border-border bg-surface-secondary p-4">
+          <p className="text-xs text-muted">停止原因</p>
+          <p className="mt-1 text-xl font-semibold text-foreground">{tx.stopReason ?? "—"}</p>
+        </div>
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <div className="rounded-xl border border-border bg-surface-secondary">
+          <div className="border-b border-border px-5 py-3.5">
+            <p className="text-sm font-semibold text-foreground">交易信息</p>
+          </div>
+          <dl className="grid grid-cols-[120px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm">
+            <dt className="text-muted">交易编号</dt>
+            <dd className="font-mono text-foreground">#{tx.id}</dd>
+
+            <dt className="text-muted">储值卡</dt>
+            <dd className="font-mono text-foreground">{tx.idTag}</dd>
+
+            <dt className="text-muted">桩编号</dt>
+            <dd className="font-mono text-foreground">{tx.chargePointIdentifier ?? "—"}</dd>
+
+            <dt className="text-muted">连接器</dt>
+            <dd className="text-foreground">{tx.connectorNumber ?? "—"}</dd>
+
+            <dt className="text-muted">开始时间</dt>
+            <dd className="text-foreground">{formatDateTime(tx.startTimestamp)}</dd>
+
+            <dt className="text-muted">结束时间</dt>
+            <dd className="text-foreground">{formatDateTime(tx.stopTimestamp)}</dd>
+
+            <dt className="text-muted">持续时长</dt>
+            <dd className="text-foreground">
+              {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
+            </dd>
+          </dl>
+        </div>
+
+        <div className="rounded-xl border border-border bg-surface-secondary">
+          <div className="border-b border-border px-5 py-3.5">
+            <p className="text-sm font-semibold text-foreground">计量与费用</p>
+          </div>
+          <dl className="grid grid-cols-[140px_1fr] gap-x-4 gap-y-3 px-5 py-4 text-sm">
+            <dt className="text-muted">起始表计</dt>
+            <dd className="text-foreground">
+              {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
+            </dd>
+
+            <dt className="text-muted">结束表计</dt>
+            <dd className="text-foreground">
+              {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
+            </dd>
+
+            <dt className="text-muted">消耗电量</dt>
+            <dd className="text-foreground">
+              <span className="inline-flex items-center gap-1">
+                {formatEnergy(energyWh)}
+                {isEstimatedEnergy && (
+                  <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                    预估
+                  </span>
+                )}
+              </span>
+            </dd>
+
+            <dt className="text-muted">电费</dt>
+            <dd className="text-foreground">{formatAmount(tx.electricityFee)}</dd>
+
+            <dt className="text-muted">服务费</dt>
+            <dd className="text-foreground">{formatAmount(tx.serviceFee)}</dd>
+
+            <dt className="text-muted">总费用</dt>
+            <dd className="text-foreground">
+              <span className="inline-flex items-center gap-1">
+                {formatAmount(amountFen)}
+                {isEstimatedAmount && (
+                  <span className="rounded bg-warning-soft px-1 py-0.5 text-[10px] font-semibold text-warning leading-none text-nowrap">
+                    预估
+                  </span>
+                )}
+              </span>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,8 +1,10 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useQuery } from "@tanstack/react-query";
 import { Button, Chip, Modal, Pagination, Spinner, Table } from "@heroui/react";
+import Link from "next/link";
+import { useSearchParams } from "next/navigation";
 import { TrashBin, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
@@ -10,6 +12,39 @@ import dayjs from "@/lib/dayjs";
 
 const LIMIT = 15;
 
+const idTagRejectLabelMap: Record<string, string> = {
+  Blocked: "卡片不可用或余额不足",
+  Expired: "卡片已过期",
+  Invalid: "卡片无效",
+  ConcurrentTx: "该卡已有进行中的订单",
+};
+
+const stopReasonLabelMap: Record<string, string> = {
+  EmergencyStop: "紧急停止",
+  EVDisconnected: "车辆断开",
+  HardReset: "硬重启",
+  Local: "本地结束",
+  Other: "其他原因",
+  PowerLoss: "断电结束",
+  Reboot: "重启结束",
+  Remote: "远程结束",
+  SoftReset: "软重启",
+  UnlockCommand: "解锁结束",
+};
+
+const stopReasonColorMap: Record<string, "success" | "warning" | "danger" | "default"> = {
+  Local: "success",
+  EVDisconnected: "success",
+  Remote: "warning",
+  UnlockCommand: "warning",
+  EmergencyStop: "danger",
+  PowerLoss: "danger",
+  HardReset: "danger",
+  SoftReset: "warning",
+  Reboot: "warning",
+  Other: "default",
+};
+
 function formatDuration(start: string, stop: string | null): string {
   if (!stop) return "进行中";
   const min = dayjs(stop).diff(dayjs(start), "minute");
@@ -20,13 +55,27 @@ function formatDuration(start: string, stop: string | null): string {
 }
 
 export default function TransactionsPage() {
+  const searchParams = useSearchParams();
   const { data: sessionData } = useSession();
   const isAdmin = sessionData?.user?.role === "admin";
+  const statusFromQuery = searchParams.get("status");
+  const initialStatus: "all" | "active" | "completed" =
+    statusFromQuery === "active" || statusFromQuery === "completed" ? statusFromQuery : "all";
+
   const [page, setPage] = useState(1);
-  const [status, setStatus] = useState<"all" | "active" | "completed">("all");
+  const [status, setStatus] = useState<"all" | "active" | "completed">(initialStatus);
   const [stoppingId, setStoppingId] = useState<number | null>(null);
   const [deletingId, setDeletingId] = useState<number | null>(null);
 
+  useEffect(() => {
+    if (status !== initialStatus) {
+      setStatus(initialStatus);
+      setPage(1);
+    }
+    // We intentionally depend on searchParams-derived value only.
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [initialStatus]);
+
   const {
     data,
     isPending: loading,
@@ -131,12 +180,23 @@ export default function TransactionsPage() {
             >
               {(data?.data ?? []).map((tx) => (
                 <Table.Row key={tx.id} id={tx.id}>
-                  <Table.Cell className="font-mono text-sm">{tx.id}</Table.Cell>
+                  <Table.Cell className="font-mono text-sm">
+                    <Link
+                      href={`/dashboard/transactions/${tx.id}`}
+                      className="text-accent hover:text-accent/80"
+                    >
+                      {tx.id}
+                    </Link>
+                  </Table.Cell>
                   <Table.Cell className="font-mono">{tx.chargePointIdentifier ?? "—"}</Table.Cell>
                   <Table.Cell>{tx.connectorNumber ?? "—"}</Table.Cell>
                   <Table.Cell className="font-mono">{tx.idTag}</Table.Cell>
                   <Table.Cell>
-                    {tx.stopTimestamp ? (
+                    {tx.stopTimestamp && tx.stopReason === "DeAuthorized" ? (
+                      <Chip color="danger" size="sm" variant="soft">
+                        已拒绝
+                      </Chip>
+                    ) : tx.stopTimestamp ? (
                       <Chip color="success" size="sm" variant="soft">
                         已完成
                       </Chip>
@@ -181,13 +241,23 @@ export default function TransactionsPage() {
                     )}
                   </Table.Cell>
                   <Table.Cell>
-                    {tx.stopReason ? (
+                    {tx.stopReason === "DeAuthorized" ? (
-                      <Chip color="default" size="sm" variant="soft">
+                      <p className="text-xs font-medium text-muted text-nowrap">
-                        {tx.stopReason}
+                        {tx.idTagStatus && tx.idTagStatus !== "Accepted"
+                          ? `${idTagRejectLabelMap[tx.idTagStatus] ?? tx.idTagStatus}`
+                          : "鉴权失败"}
+                      </p>
+                    ) : tx.stopReason ? (
+                      <Chip
+                        color={stopReasonColorMap[tx.stopReason] ?? "default"}
+                        size="sm"
+                        variant="soft"
+                      >
+                        {stopReasonLabelMap[tx.stopReason] ?? tx.stopReason}
                       </Chip>
                     ) : tx.stopTimestamp ? (
                       <Chip color="default" size="sm" variant="soft">
-                        Local
+                        本地结束
                       </Chip>
                     ) : (
                       "—"

apps/web/components/id-tag-card.tsx

@@ -34,6 +34,7 @@ type IdTagCardProps = {
   idTag: string;
   balance: number;
   isSelected?: boolean;
+  isDisabled?: boolean;
   /** 内容排列方式：余额、logo、卡号等信息元素的布局 */
   layout?: CardLayoutName;
   /** 卡底装饰风格：纹理、光效、几何图形等视觉元素 */
@@ -45,6 +46,7 @@ export function IdTagCard({
   idTag,
   balance,
   isSelected = false,
+  isDisabled = false,
   layout = "around",
   skin = "circles",
   onClick,
@@ -55,10 +57,12 @@ export function IdTagCard({
   return (
     <button
       type="button"
+      disabled={isDisabled}
       onClick={onClick}
       className={[
-        "relative w-full overflow-hidden rounded-2xl cursor-pointer select-none",
+        "relative w-full overflow-hidden rounded-2xl select-none",
         "aspect-[1.586/1] transition-all duration-200 active:scale-[0.97]",
+        isDisabled ? "cursor-not-allowed opacity-45 grayscale-[0.25]" : "cursor-pointer",
         isSelected
           ? "ring-3 ring-offset-2 ring-offset-background ring-accent shadow-2xl shadow-accent/25"
           : "ring-1 ring-black/8 hover:ring-accent/40 shadow-md hover:shadow-xl",