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
This commit is contained in:
@@ -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);
|
||||
}}
|
||||
>
|
||||
上一步
|
||||
|
||||
369
apps/web/app/dashboard/transactions/[id]/page.tsx
Normal file
369
apps/web/app/dashboard/transactions/[id]/page.tsx
Normal file
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
) : (
|
||||
"—"
|
||||
|
||||
Reference in New Issue
Block a user