Timothy Yin
f7ee298060
feat(pricing): implement tariff management with peak, valley, and flat pricing feat(api): add tariff API for fetching and updating pricing configurations feat(tariff-schema): create database schema for tariff configuration feat(pricing-page): create UI for displaying and managing pricing tiers fix(sidebar): update sidebar to include pricing settings link
234 lines
9.4 KiB
TypeScript
234 lines
9.4 KiB
TypeScript
"use client";
|
||
|
||
import { useQuery } from "@tanstack/react-query";
|
||
import { Spinner } from "@heroui/react";
|
||
import { TagDollar, ChartLine } from "@gravity-ui/icons";
|
||
import { api, type PriceTier, type TariffConfig, type TariffSlot } from "@/lib/api";
|
||
|
||
// ── Tier meta (matches admin pricing editor colors) ───────────────────────────
|
||
|
||
const TIER_META: Record<
|
||
PriceTier,
|
||
{ label: string; sublabel: string; cellBg: string; text: string; border: string; dot: string }
|
||
> = {
|
||
peak: {
|
||
label: "峰时",
|
||
sublabel: "高峰时段",
|
||
cellBg: "bg-orange-500/70",
|
||
text: "text-orange-500",
|
||
border: "border-orange-500/40",
|
||
dot: "bg-orange-500",
|
||
},
|
||
flat: {
|
||
label: "平时",
|
||
sublabel: "肩峰时段",
|
||
cellBg: "bg-neutral-400/45",
|
||
text: "text-neutral-400",
|
||
border: "border-neutral-400/40",
|
||
dot: "bg-neutral-400",
|
||
},
|
||
valley: {
|
||
label: "谷时",
|
||
sublabel: "低谷时段",
|
||
cellBg: "bg-blue-500/65",
|
||
text: "text-blue-500",
|
||
border: "border-blue-500/40",
|
||
dot: "bg-blue-500",
|
||
},
|
||
};
|
||
|
||
// ── Slot cards ────────────────────────────────────────────────────────────────
|
||
|
||
function SlotCards({ tariff }: { tariff: TariffConfig }) {
|
||
const sorted = [...tariff.slots].sort((a, b) => a.start - b.start);
|
||
return (
|
||
<div className="grid gap-3 sm:grid-cols-2 lg:grid-cols-3">
|
||
{sorted.map((slot: TariffSlot, i) => {
|
||
const meta = TIER_META[slot.tier];
|
||
const p = tariff.prices[slot.tier];
|
||
const total = p.electricityPrice + p.serviceFee;
|
||
return (
|
||
<div key={i} className={`rounded-xl border bg-surface p-4 space-y-3 ${meta.border}`}>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-2">
|
||
<span className={`size-2.5 rounded-sm ${meta.cellBg}`} />
|
||
<span className={`text-sm font-semibold ${meta.text}`}>{meta.label}</span>
|
||
<span className="text-xs text-muted">{meta.sublabel}</span>
|
||
</div>
|
||
<span className="tabular-nums text-xs font-medium text-muted">
|
||
{String(slot.start).padStart(2, "0")}:00 – {String(slot.end).padStart(2, "0")}:00
|
||
</span>
|
||
</div>
|
||
{/* Prices */}
|
||
<div className="divide-y divide-border rounded-lg border border-border overflow-hidden text-sm">
|
||
<div className="flex divide-x divide-border">
|
||
<div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
|
||
<span className="text-muted">电费</span>
|
||
<span className="tabular-nums font-medium text-foreground">
|
||
¥{p.electricityPrice.toFixed(4)}
|
||
<span className="text-xs text-muted font-normal">/kWh</span>
|
||
</span>
|
||
</div>
|
||
<div className="flex-1 flex items-center justify-between bg-surface-secondary px-3 py-2">
|
||
<span className="text-muted">服务费</span>
|
||
<span className="tabular-nums font-medium text-foreground">
|
||
¥{p.serviceFee.toFixed(4)}
|
||
<span className="text-xs text-muted font-normal">/kWh</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center justify-between bg-surface px-3 py-2">
|
||
<span className="font-semibold text-foreground">单价</span>
|
||
<span className={`tabular-nums font-bold ${meta.text}`}>
|
||
¥{total.toFixed(4)}
|
||
<span className="text-xs font-normal">/kWh</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
);
|
||
}
|
||
|
||
// ── Page ─────────────────────────────────────────────────────────────────────
|
||
|
||
export default function PricingPage() {
|
||
const {
|
||
data: tariff,
|
||
isLoading,
|
||
isError,
|
||
} = useQuery({
|
||
queryKey: ["tariff"],
|
||
queryFn: () => api.tariff.get(),
|
||
});
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Header */}
|
||
<div className="flex items-center gap-3">
|
||
<div className="flex size-9 items-center justify-center rounded-xl bg-accent/10">
|
||
<TagDollar className="size-5 text-accent" />
|
||
</div>
|
||
<div>
|
||
<h1 className="text-xl font-bold text-foreground">电价标准</h1>
|
||
<p className="text-sm text-muted">今日实行的电价标准</p>
|
||
</div>
|
||
</div>
|
||
|
||
{isLoading && (
|
||
<div className="flex justify-center py-20">
|
||
<Spinner />
|
||
</div>
|
||
)}
|
||
|
||
{isError && (
|
||
<div className="rounded-xl border border-danger/30 bg-danger/5 px-4 py-3 text-sm text-danger">
|
||
电价信息加载失败，请刷新页面重试。
|
||
</div>
|
||
)}
|
||
|
||
{!isLoading && !isError && !tariff && (
|
||
<div className="rounded-2xl border border-border bg-surface px-6 py-12 text-center">
|
||
<TagDollar className="mx-auto mb-3 size-10 text-muted" />
|
||
<p className="font-medium text-foreground">尚未配置峰谷电价</p>
|
||
<p className="mt-1 text-sm text-muted">
|
||
各充电桩使用独立固定电价，请查看充电桩详情页了解具体费率。
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{tariff && (
|
||
<>
|
||
{/* Timeline + legend */}
|
||
<div className="rounded-xl border border-border bg-surface-secondary">
|
||
<div className="flex items-center gap-3 border-b border-border px-5 py-4">
|
||
<div className="flex size-9 items-center justify-center rounded-lg bg-accent/10">
|
||
<ChartLine className="size-5 text-accent" />
|
||
</div>
|
||
<div>
|
||
<p className="text-sm font-semibold text-foreground">24 小时时段分布</p>
|
||
<p className="text-xs text-muted">实际扣费以交易完成时系统计算为准</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-3 px-5 py-5">
|
||
{/* Tick labels */}
|
||
<div className="relative h-4">
|
||
{[0, 6, 12, 18, 24].map((h) => (
|
||
<span
|
||
key={h}
|
||
className="absolute text-[10px] tabular-nums text-muted"
|
||
style={{
|
||
left: `${(h / 24) * 100}%`,
|
||
transform:
|
||
h === 24 ? "translateX(-100%)" : h > 0 ? "translateX(-50%)" : undefined,
|
||
}}
|
||
>
|
||
{String(h).padStart(2, "0")}:00
|
||
</span>
|
||
))}
|
||
</div>
|
||
|
||
{/* Colored bar */}
|
||
<div className="flex h-12 overflow-hidden rounded-lg">
|
||
{(() => {
|
||
const hourTier: PriceTier[] = Array(24).fill("flat" as PriceTier);
|
||
for (const slot of tariff.slots) {
|
||
for (let h = slot.start; h < slot.end; h++) hourTier[h] = slot.tier;
|
||
}
|
||
return hourTier.map((tier, h) => (
|
||
<div
|
||
key={h}
|
||
className={`flex-1 ${TIER_META[tier].cellBg} transition-opacity hover:opacity-100 opacity-90 flex items-center justify-center`}
|
||
title={`${String(h).padStart(2, "0")}:00 — ${TIER_META[tier].label}`}
|
||
>
|
||
<span className="hidden text-[10px] font-semibold text-white drop-shadow lg:block">
|
||
{String(h).padStart(2, "0")}
|
||
</span>
|
||
</div>
|
||
));
|
||
})()}
|
||
</div>
|
||
|
||
{/* Legend */}
|
||
<div className="flex flex-wrap items-center gap-3 gap-y-1 pt-0.5">
|
||
{(["peak", "flat", "valley"] as PriceTier[]).map((tier) => {
|
||
const meta = TIER_META[tier];
|
||
const hours = tariff.slots
|
||
.filter((s) => s.tier === tier)
|
||
.reduce((acc, s) => acc + (s.end - s.start), 0);
|
||
const total =
|
||
tariff.prices[tier].electricityPrice + tariff.prices[tier].serviceFee;
|
||
return (
|
||
<div key={tier} className="flex items-center gap-1.5">
|
||
<span className={`size-3 rounded-sm ${meta.cellBg}`} />
|
||
<span className="text-xs text-muted">
|
||
<span className={`font-semibold ${meta.text}`}>{meta.label}</span>
|
||
<span className="ml-1 text-muted/70">
|
||
{hours}h · ¥{total.toFixed(4)}/kWh
|
||
</span>
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Slot cards */}
|
||
<div className="space-y-3">
|
||
<h2 className="text-sm font-semibold text-foreground">各时段费率</h2>
|
||
<SlotCards tariff={tariff} />
|
||
<p className="text-xs text-muted">
|
||
合计费率 = 电费 + 服务费。实际扣费以交易完成时系统计算为准。
|
||
</p>
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
);
|
||
}
|