feat: 添加信息和指标组件以增强充电订单和计量信息的展示

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-points/[id]/page.tsx

@@ -16,10 +16,11 @@ import {
   Table,
   TextField,
 } from "@heroui/react";
-import { ArrowLeft, Pencil, PlugConnection, ArrowRotateRight } from "@gravity-ui/icons";
+import { ArrowLeft, Pencil, ArrowRotateRight } from "@gravity-ui/icons";
 import { api } from "@/lib/api";
 import { useSession } from "@/lib/auth-client";
 import dayjs from "@/lib/dayjs";
+import InfoSection from "@/components/info-section";
 import { Plug } from "lucide-react";
 
 // ── Status maps ────────────────────────────────────────────────────────────
@@ -270,8 +271,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
       <div className="grid gap-4 md:grid-cols-2">
         {/* Device info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">设备信息</h2>
+          <InfoSection title="设备信息">
             <dl className="divide-y divide-border">
               {[
                 { label: "品牌", value: cp.chargePointVendor },
@@ -291,13 +291,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </div>
               ))}
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Operation info — admin only */}
         {isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">运行配置</h2>
+          <InfoSection title="运行配置">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">注册状态</dt>
@@ -369,13 +368,12 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
 
         {/* Fee info — user only */}
         {!isAdmin && (
-          <div className="rounded-xl border border-border bg-surface p-4">
-            <h2 className="mb-3 text-sm font-semibold text-foreground">电价信息</h2>
+          <InfoSection title="电价信息">
             <dl className="divide-y divide-border">
               <div className="flex items-center justify-between gap-4 py-2">
                 <dt className="shrink-0 text-sm text-muted">单位电价</dt>
@@ -404,7 +402,7 @@ export default function ChargePointDetailPage({ params }: { params: Promise<{ id
                 </dd>
               </div>
             </dl>
-          </div>
+          </InfoSection>
         )}
       </div>
 

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);
               }}
             >
               上一步

apps/web/app/dashboard/page.tsx

@@ -2,15 +2,13 @@
 
 import { useState } from "react";
 import { useQuery } from "@tanstack/react-query";
-import { Button, Card, Spinner } from "@heroui/react";
+import { Button, Spinner } from "@heroui/react";
 import Link from "next/link";
 import {
   Thunderbolt,
-  PlugConnection,
   CreditCard,
   ChartColumn,
   TagDollar,
-  Person,
   ArrowRotateRight,
   TriangleExclamation,
 } from "@gravity-ui/icons";
@@ -27,6 +25,7 @@ import {
   type ChartDataPoint,
 } from "@/lib/api";
 import { BanknoteArrowDown, EvCharger, Plug, Users } from "lucide-react";
+import MetricIndicator from "@/components/metric-indicator";
 
 // ── Helpers ────────────────────────────────────────────────────────────────
 
@@ -72,24 +71,20 @@ function StatCard({
 }) {
   const s = colorStyles[color];
   return (
-    <Card className={`border-t-2 ${s.border}`}>
-      <Card.Content className="flex flex-col gap-3">
-        <div className="flex items-start justify-between gap-2">
-          <p className="text-sm text-muted">{title}</p>
-          {Icon && (
-            <div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}>
-              <Icon className={`size-4.5 ${s.icon}`} />
-            </div>
-          )}
-        </div>
-        <p className="text-3xl font-bold tabular-nums leading-none text-foreground">{value}</p>
-        {footer && (
-          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
-            {footer}
+    <MetricIndicator
+      title={title}
+      value={value}
+      color={s.border}
+      valueClassName="text-3xl font-bold tabular-nums leading-none text-foreground"
+      icon={
+        Icon ? (
+          <div className={`flex size-9 shrink-0 items-center justify-center rounded-xl ${s.bg}`}>
+            <Icon className={`size-4.5 ${s.icon}`} />
           </div>
-        )}
-      </Card.Content>
-    </Card>
+        ) : undefined
+      }
+      footer={footer}
+    />
   );
 }
 

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

@@ -0,0 +1,448 @@
+"use client";
+
+import { use, useState } from "react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useQuery } from "@tanstack/react-query";
+import { Alert, 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";
+import InfoSection from "@/components/info-section";
+import MetricIndicator from "@/components/metric-indicator";
+import { BanknoteArrowUp, Clock, EvCharger } from "lucide-react";
+
+const stopReasonLabelMap: Record<string, string> = {
+  EmergencyStop: "紧急停止",
+  EVDisconnected: "车辆断开",
+  HardReset: "硬重启",
+  Local: "本地结束",
+  Other: "其他原因",
+  PowerLoss: "断电结束",
+  Reboot: "重启结束",
+  Remote: "远程结束",
+  SoftReset: "软重启",
+  UnlockCommand: "解锁结束",
+  DeAuthorized: "鉴权拒绝",
+};
+
+const idTagRejectLabelMap: Record<string, string> = {
+  Blocked: "卡片不可用或余额不足",
+  Expired: "卡片已过期",
+  Invalid: "卡片无效",
+  ConcurrentTx: "该卡已有进行中的订单",
+};
+
+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;
+  const isRejected = tx.stopReason === "DeAuthorized";
+  const stopReasonLabel = tx.stopReason
+    ? (stopReasonLabelMap[tx.stopReason] ?? tx.stopReason)
+    : "—";
+  const rejectReason =
+    tx.idTagStatus && tx.idTagStatus !== "Accepted"
+      ? (idTagRejectLabelMap[tx.idTagStatus] ?? tx.idTagStatus)
+      : "鉴权失败";
+
+  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>
+            {isRejected ? (
+              <Chip color="danger" size="sm" variant="soft">
+                已拒绝
+              </Chip>
+            ) : 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>
+            )}
+            {tx.stopReason && !isRejected && (
+              <Chip color="default" size="sm" variant="soft">
+                {stopReasonLabel}
+              </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>
+
+      <Alert status={isRejected ? "danger" : tx.stopTimestamp ? "success" : "accent"}>
+        <Alert.Indicator />
+        <Alert.Content>
+          <Alert.Title>
+            {isRejected ? "交易已被系统拒绝" : tx.stopTimestamp ? "本次交易已结束" : "充电进行中"}
+          </Alert.Title>
+          <Alert.Description>
+            {isRejected
+              ? rejectReason
+              : tx.stopTimestamp
+                ? `结束原因：${stopReasonLabel}`
+                : "充电进行中，实际充电量和费用以结束时系统计算为准。"}
+          </Alert.Description>
+        </Alert.Content>
+      </Alert>
+
+      <div className="grid gap-4 md:grid-cols-4">
+        <MetricIndicator
+          title="充电量"
+          color="border-success"
+          icon={<EvCharger className="size-5 text-success" />}
+          value={
+            <span className="inline-flex items-center gap-1.5">
+              {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>
+          }
+        />
+        <MetricIndicator
+          title="总费用"
+          color="border-accent"
+          icon={<BanknoteArrowUp className="size-5 text-accent" />}
+          value={
+            <span className="inline-flex items-center gap-1.5">
+              {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>
+          }
+        />
+        <MetricIndicator
+          title="订单状态"
+          icon={<Clock className="size-5 text-foreground" />}
+          color={
+            isRejected ? "border-danger" : tx.stopTimestamp ? "border-success" : "border-warning"
+          }
+          value={isRejected ? "已拒绝" : tx.stopTimestamp ? "已完成" : "进行中"}
+        />
+        <MetricIndicator title="停止原因" value={isRejected ? rejectReason : stopReasonLabel} />
+      </div>
+
+      <div className="grid gap-4 lg:grid-cols-2">
+        <InfoSection title="交易信息">
+          <dl className="divide-y divide-border">
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">交易编号</dt>
+              <dd className="font-mono text-sm text-foreground">#{tx.id}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">储值卡</dt>
+              <dd className="font-mono text-sm text-foreground">{tx.idTag}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">桩编号</dt>
+              <dd className="font-mono text-sm text-foreground">
+                {tx.chargePointIdentifier ?? "—"}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">连接器</dt>
+              <dd className="text-sm text-foreground">{tx.connectorNumber ?? "—"}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">开始时间</dt>
+              <dd className="text-right text-sm text-foreground">
+                {formatDateTime(tx.startTimestamp)}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">结束时间</dt>
+              <dd className="text-right text-sm text-foreground">
+                {formatDateTime(tx.stopTimestamp)}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">持续时长</dt>
+              <dd className="text-sm text-foreground">
+                {formatDuration(tx.startTimestamp, tx.stopTimestamp)}
+              </dd>
+            </div>
+          </dl>
+        </InfoSection>
+
+        <InfoSection title="计量与费用">
+          <dl className="divide-y divide-border">
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">起始表计</dt>
+              <dd className="text-sm text-foreground">
+                {tx.startMeterValue != null ? `${tx.startMeterValue} Wh` : "—"}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">结束表计</dt>
+              <dd className="text-sm text-foreground">
+                {tx.stopMeterValue != null ? `${tx.stopMeterValue} Wh` : "—"}
+              </dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">消耗电量</dt>
+              <dd className="text-sm 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>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">电费</dt>
+              <dd className="text-sm text-foreground">{formatAmount(tx.electricityFee)}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">服务费</dt>
+              <dd className="text-sm text-foreground">{formatAmount(tx.serviceFee)}</dd>
+            </div>
+            <div className="flex items-center justify-between gap-4 py-2">
+              <dt className="shrink-0 text-sm text-muted">总费用</dt>
+              <dd className="text-sm 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>
+            </div>
+          </dl>
+        </InfoSection>
+      </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 ? (
-                      <Chip color="default" size="sm" variant="soft">
-                        {tx.stopReason}
+                    {tx.stopReason === "DeAuthorized" ? (
+                      <p className="text-xs font-medium text-muted text-nowrap">
+                        {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",

apps/web/components/info-section.tsx

@@ -0,0 +1,15 @@
+import type { ReactNode } from "react";
+
+type InfoSectionProps = {
+  title: string;
+  children: ReactNode;
+};
+
+export default function InfoSection({ title, children }: InfoSectionProps) {
+  return (
+    <div className="rounded-xl border border-border bg-surface p-4">
+      <h2 className="mb-3 text-sm font-semibold text-foreground">{title}</h2>
+      {children}
+    </div>
+  );
+}

apps/web/components/metric-indicator.tsx

@@ -0,0 +1,41 @@
+import type { ReactNode } from "react";
+import { Card } from "@heroui/react";
+
+type MetricIndicatorProps = {
+  title: string;
+  value: ReactNode;
+  hint?: ReactNode;
+  footer?: ReactNode;
+  icon?: ReactNode;
+  color?: string;
+  valueClassName?: string;
+};
+
+export default function MetricIndicator({
+  title,
+  value,
+  hint,
+  footer,
+  icon,
+  color = "border-border",
+  valueClassName = "text-xl font-semibold text-foreground tabular-nums",
+}: MetricIndicatorProps) {
+  return (
+    <Card className={`border-t-2 ${color}`}>
+      <Card.Content className="flex flex-col gap-3">
+        <div className="flex items-start justify-between gap-2">
+          <p className="text-xs text-muted">{title}</p>
+          {icon}
+        </div>
+        <p className={valueClassName}>{value}</p>
+        {footer ? (
+          <div className="flex flex-wrap items-center gap-x-1.5 gap-y-1 text-xs text-muted">
+            {footer}
+          </div>
+        ) : (
+          hint && <div className="text-xs text-muted">{hint}</div>
+        )}
+      </Card.Content>
+    </Card>
+  );
+}