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/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("充电桩当前不在线，请稍后再试");
-      else if (msg.includes("not accepted")) setStartError("充电桩未启用，请联系管理员");
-      else if (msg.includes("idTag")) setStartError("储值卡无效或无权使用");
-      else setStartError("启动失败：" + msg);
+      const lowerMsg = msg.toLowerCase();
+
+      if (lowerMsg.includes("offline")) setStartError("充电桩当前不在线，请稍后再试");
+      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">
-          <Button size="lg" className="w-full">
-            <ThunderboltFill className="size-4" />
-            充电记录
-          </Button>
-        </Link>
+        {startedTransactionId ? (
+          <Link
+            href={`/dashboard/transactions/${startedTransactionId}`}
+            className="w-full max-w-xs"
+          >
+            <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) => (
-                <IdTagCard
-                  key={tag.idTag}
-                  idTag={tag.idTag}
-                  balance={tag.balance}
-                  layout={tag.cardLayout ?? undefined}
-                  skin={tag.cardSkin ?? undefined}
-                  isSelected={selectedIdTag === tag.idTag}
-                  onClick={() => setSelectedIdTag(tag.idTag)}
-                />
-              ))}
-            </div>
-          )}
-
-          {startResult === "error" && (
-            <div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
-              {startError ?? "启动失败，请重试"}
+              {myTags.map((tag) => {
+                const locked = activeIdTagSet.has(tag.idTag);
+                return (
+                  <div key={tag.idTag} className="space-y-2">
+                    <IdTagCard
+                      idTag={tag.idTag}
+                      balance={tag.balance}
+                      layout={tag.cardLayout ?? undefined}
+                      skin={tag.cardSkin ?? undefined}
+                      isSelected={selectedIdTag === tag.idTag}
+                      isDisabled={locked}
+                      onClick={() => {
+                        if (!locked) setSelectedIdTag(tag.idTag);
+                      }}
+                    />
+                    {locked && (
+                      <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);
               }}
             >
               上一步