449 lines
16 KiB
TypeScript
449 lines
16 KiB
TypeScript
"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>
|
|
);
|
|
}
|