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
538 lines
22 KiB
TypeScript
538 lines
22 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useCallback, useEffect, useRef } from "react";
|
||
import { useQuery, useQueryClient } from "@tanstack/react-query";
|
||
import { Button, Input, Label, Spinner, TextField, toast } from "@heroui/react";
|
||
import { TagDollar, Lock, ArrowRotateRight, ChartLine } from "@gravity-ui/icons";
|
||
// TagDollar is used in the page header badge
|
||
import { useSession } from "@/lib/auth-client";
|
||
import { api } from "@/lib/api";
|
||
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
// Types (designed for future backend API integration)
|
||
// Backend API: PUT /api/tariff
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
|
||
export type PriceTier = "peak" | "valley" | "flat";
|
||
|
||
/**
|
||
* Compact time slot for the backend API.
|
||
* `start`: inclusive hour (0–23), `end`: exclusive hour (1–24).
|
||
* Example: { start: 8, end: 12, tier: "peak" } → 08:00–12:00 峰时
|
||
*/
|
||
export type TimeSlot = {
|
||
start: number;
|
||
end: number;
|
||
tier: PriceTier;
|
||
};
|
||
|
||
export type TierPricing = {
|
||
/** Grid electricity tariff in CNY/kWh */
|
||
electricityPrice: number;
|
||
/** Charging service fee in CNY/kWh */
|
||
serviceFee: number;
|
||
};
|
||
|
||
/**
|
||
* Full tariff configuration payload.
|
||
* Intended for: PUT /api/tariff
|
||
*/
|
||
export type TariffConfig = {
|
||
/** Compact slot representation — what gets stored in the DB */
|
||
slots: TimeSlot[];
|
||
/** Electricity price + service fee breakdown per tier, in CNY/kWh */
|
||
prices: Record<PriceTier, TierPricing>;
|
||
};
|
||
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
// Helpers
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
|
||
/** Compress a 24-element hourly schedule into minimal time slots */
|
||
function scheduleToSlots(schedule: PriceTier[]): TimeSlot[] {
|
||
const slots: TimeSlot[] = [];
|
||
let i = 0;
|
||
while (i < 24) {
|
||
const tier = schedule[i];
|
||
let j = i + 1;
|
||
while (j < 24 && schedule[j] === tier) j++;
|
||
slots.push({ start: i, end: j, tier });
|
||
i = j;
|
||
}
|
||
return slots;
|
||
}
|
||
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
// Constants
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
|
||
const TIERS: PriceTier[] = ["peak", "valley", "flat"];
|
||
|
||
const TIER_META: Record<
|
||
PriceTier,
|
||
{
|
||
label: string;
|
||
sublabel: string;
|
||
cellBg: string;
|
||
activeBorder: string;
|
||
activeBg: string;
|
||
activeText: string;
|
||
dotClass: string;
|
||
}
|
||
> = {
|
||
peak: {
|
||
label: "峰时",
|
||
sublabel: "高峰时段",
|
||
cellBg: "bg-orange-500/70",
|
||
activeBorder: "border-orange-500/60",
|
||
activeBg: "bg-orange-500/10",
|
||
activeText: "text-orange-500",
|
||
dotClass: "bg-orange-500",
|
||
},
|
||
valley: {
|
||
label: "谷时",
|
||
sublabel: "低谷时段",
|
||
cellBg: "bg-blue-500/65",
|
||
activeBorder: "border-blue-500/60",
|
||
activeBg: "bg-blue-500/10",
|
||
activeText: "text-blue-500",
|
||
dotClass: "bg-blue-500",
|
||
},
|
||
flat: {
|
||
label: "平时",
|
||
sublabel: "肩峰时段",
|
||
cellBg: "bg-neutral-400/45",
|
||
activeBorder: "border-neutral-400/60",
|
||
activeBg: "bg-neutral-400/10",
|
||
activeText: "text-neutral-400",
|
||
dotClass: "bg-neutral-400",
|
||
},
|
||
};
|
||
|
||
/**
|
||
* A typical residential TOU schedule for the Shanghai area (illustrative).
|
||
* 00–07 谷, 08–11 峰, 12 平, 13–16 峰, 17–21 峰, 22–23 谷
|
||
*/
|
||
const DEFAULT_SCHEDULE: PriceTier[] = [
|
||
// 0-5
|
||
"valley",
|
||
"valley",
|
||
"valley",
|
||
"valley",
|
||
"valley",
|
||
"valley",
|
||
// 6-11
|
||
"flat",
|
||
"flat",
|
||
"peak",
|
||
"peak",
|
||
"peak",
|
||
"flat",
|
||
// 12-17
|
||
"peak",
|
||
"peak",
|
||
"flat",
|
||
"flat",
|
||
"flat",
|
||
"peak",
|
||
// 18-23
|
||
"peak",
|
||
"peak",
|
||
"flat",
|
||
"flat",
|
||
"valley",
|
||
"valley",
|
||
];
|
||
|
||
const DEFAULT_PRICES: Record<PriceTier, TierPricing> = {
|
||
peak: { electricityPrice: 1.0, serviceFee: 0.2 },
|
||
valley: { electricityPrice: 0.3, serviceFee: 0.1 },
|
||
flat: { electricityPrice: 0.65, serviceFee: 0.15 },
|
||
};
|
||
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
// Component
|
||
// ─────────────────────────────────────────────────────────────────────────────
|
||
|
||
export default function PricingPage() {
|
||
const { data: session } = useSession();
|
||
const isAdmin = session?.user?.role === "admin";
|
||
const queryClient = useQueryClient();
|
||
|
||
// Load current tariff from API
|
||
const { data: remoteTariff, isLoading: loadingTariff } = useQuery({
|
||
queryKey: ["tariff"],
|
||
queryFn: () => api.tariff.get(),
|
||
enabled: isAdmin,
|
||
});
|
||
|
||
const [schedule, setSchedule] = useState<PriceTier[]>([...DEFAULT_SCHEDULE]);
|
||
|
||
// ── Price inputs: keep as strings to avoid controlled input jitter ──────
|
||
type TierPricingStrings = { electricityPrice: string; serviceFee: string };
|
||
const toStrings = (p: TierPricing): TierPricingStrings => ({
|
||
electricityPrice: String(p.electricityPrice),
|
||
serviceFee: String(p.serviceFee),
|
||
});
|
||
const [priceStrings, setPriceStrings] = useState<Record<PriceTier, TierPricingStrings>>({
|
||
peak: toStrings(DEFAULT_PRICES.peak),
|
||
valley: toStrings(DEFAULT_PRICES.valley),
|
||
flat: toStrings(DEFAULT_PRICES.flat),
|
||
});
|
||
const [prices, setPrices] = useState<Record<PriceTier, TierPricing>>({ ...DEFAULT_PRICES });
|
||
|
||
const [activeTier, setActiveTier] = useState<PriceTier>("peak");
|
||
const [isDirty, setIsDirty] = useState(false);
|
||
const [saving, setSaving] = useState(false);
|
||
const [showPayload, setShowPayload] = useState(false);
|
||
|
||
// Populate state once remote tariff loads
|
||
useEffect(() => {
|
||
if (!remoteTariff) return;
|
||
// Reconstruct 24-element schedule from slots
|
||
const s: PriceTier[] = [];
|
||
for (let i = 0; i < 24; i++) s.push("flat");
|
||
for (const slot of remoteTariff.slots) {
|
||
for (let h = slot.start; h < slot.end; h++) s[h] = slot.tier as PriceTier;
|
||
}
|
||
setSchedule(s);
|
||
const p = remoteTariff.prices as Record<PriceTier, TierPricing>;
|
||
setPrices(p);
|
||
setPriceStrings({
|
||
peak: toStrings(p.peak),
|
||
valley: toStrings(p.valley),
|
||
flat: toStrings(p.flat),
|
||
});
|
||
setIsDirty(false);
|
||
}, [remoteTariff]);
|
||
|
||
// ── Drag state via ref (avoids stale closures in global handler) ─────────
|
||
const dragRef = useRef({
|
||
active: false,
|
||
startHour: 0,
|
||
endHour: 0,
|
||
tier: "peak" as PriceTier,
|
||
});
|
||
const [dragHighlight, setDragHighlight] = useState<[number, number] | null>(null);
|
||
|
||
const commitDrag = useCallback(() => {
|
||
if (!dragRef.current.active) return;
|
||
const { startHour, endHour, tier } = dragRef.current;
|
||
const lo = Math.min(startHour, endHour);
|
||
const hi = Math.max(startHour, endHour);
|
||
dragRef.current.active = false;
|
||
setDragHighlight(null);
|
||
setSchedule((prev) => {
|
||
const next = [...prev];
|
||
for (let i = lo; i <= hi; i++) next[i] = tier;
|
||
return next;
|
||
});
|
||
setIsDirty(true);
|
||
}, []); // reads from ref, no stale closure
|
||
|
||
useEffect(() => {
|
||
window.addEventListener("mouseup", commitDrag);
|
||
return () => window.removeEventListener("mouseup", commitDrag);
|
||
}, [commitDrag]);
|
||
|
||
const handleCellMouseDown = (hour: number, e: React.MouseEvent) => {
|
||
e.preventDefault();
|
||
dragRef.current = { active: true, startHour: hour, endHour: hour, tier: activeTier };
|
||
setDragHighlight([hour, hour]);
|
||
};
|
||
|
||
const handleCellMouseEnter = (hour: number) => {
|
||
if (!dragRef.current.active) return;
|
||
dragRef.current.endHour = hour;
|
||
setDragHighlight([dragRef.current.startHour, hour]);
|
||
};
|
||
|
||
// ── Price input handlers ─────────────────────────────────────────────────
|
||
const handlePriceChange = (tier: PriceTier, field: keyof TierPricing, value: string) => {
|
||
setPriceStrings((prev) => ({ ...prev, [tier]: { ...prev[tier], [field]: value } }));
|
||
const num = parseFloat(value);
|
||
if (!isNaN(num) && num >= 0) {
|
||
setPrices((prev) => ({ ...prev, [tier]: { ...prev[tier], [field]: num } }));
|
||
setIsDirty(true);
|
||
}
|
||
};
|
||
|
||
// ── Reset ────────────────────────────────────────────────────────────────
|
||
const handleReset = () => {
|
||
setSchedule([...DEFAULT_SCHEDULE]);
|
||
setPrices({ ...DEFAULT_PRICES });
|
||
setPriceStrings({
|
||
peak: toStrings(DEFAULT_PRICES.peak),
|
||
valley: toStrings(DEFAULT_PRICES.valley),
|
||
flat: toStrings(DEFAULT_PRICES.flat),
|
||
});
|
||
setIsDirty(false);
|
||
};
|
||
|
||
// ── Save ──────────────────────────────────────────────────────────────────────
|
||
const handleSave = async () => {
|
||
setSaving(true);
|
||
try {
|
||
await api.tariff.put({ slots, prices });
|
||
setIsDirty(false);
|
||
queryClient.invalidateQueries({ queryKey: ["tariff"] });
|
||
toast.success("电价配置已保存");
|
||
} catch {
|
||
toast.warning("保存失败，请稍候重试");
|
||
} finally {
|
||
setSaving(false);
|
||
}
|
||
};
|
||
|
||
// ── Derived values ───────────────────────────────────────────────────────
|
||
const slots = scheduleToSlots(schedule);
|
||
const apiPayload: TariffConfig = { slots, prices };
|
||
|
||
// ── Admin gate ───────────────────────────────────────────────────────────
|
||
if (!isAdmin) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-24 text-center">
|
||
<div className="mb-4 flex size-12 items-center justify-center rounded-full bg-warning/10">
|
||
<Lock className="size-6 text-warning" />
|
||
</div>
|
||
<p className="text-sm font-semibold text-foreground">需要管理员权限</p>
|
||
<p className="mt-1 text-sm text-muted">峰谷电价配置仅对管理员开放</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
if (loadingTariff) {
|
||
return (
|
||
<div className="flex items-center justify-center py-24">
|
||
<Spinner size="lg" />
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className="mx-auto max-w-3xl space-y-6">
|
||
{/* ── Page header ───────────────────────────────────────────────────── */}
|
||
<div className="flex items-start gap-2">
|
||
<div className="flex-1">
|
||
<div className="flex items-center gap-2">
|
||
<TagDollar className="size-5 text-foreground" />
|
||
<h1 className="text-xl font-semibold text-foreground">峰谷电价配置</h1>
|
||
</div>
|
||
<p className="mt-0.5 text-sm text-muted">
|
||
配置各时段电价类型与单价，系统将据此自动计算充电费用
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Timeline editor ───────────────────────────────────────────────── */}
|
||
<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">时段编辑器</p>
|
||
<p className="text-xs text-muted">选择电价类型，点击或拖动时间轴涂色分配时段</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-4 px-5 py-5">
|
||
{/* Tier palette */}
|
||
<div className="flex flex-wrap items-center gap-2">
|
||
<span className="text-xs text-muted">当前画笔：</span>
|
||
{TIERS.map((tier) => {
|
||
const meta = TIER_META[tier];
|
||
const isActive = activeTier === tier;
|
||
return (
|
||
<button
|
||
key={tier}
|
||
type="button"
|
||
onClick={() => setActiveTier(tier)}
|
||
className={[
|
||
"flex items-center gap-1.5 rounded-lg ring-2 px-3 py-1.5 text-sm font-medium transition-all select-none",
|
||
isActive
|
||
? `${meta.activeBorder} ${meta.activeBg} ${meta.activeText}`
|
||
: "ring-transparent text-muted hover:bg-surface-tertiary hover:text-foreground",
|
||
].join(" ")}
|
||
>
|
||
<span className={`size-2.5 shrink-0 rounded-sm ${meta.cellBg}`} />
|
||
{meta.label}
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* 24-hour grid */}
|
||
<div className="select-none">
|
||
{/* Hour tick labels at 0, 6, 12, 18, 24 */}
|
||
<div className="relative mb-1 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>
|
||
|
||
{/* Hour cells */}
|
||
<div className="flex h-12 overflow-hidden rounded-lg">
|
||
{schedule.map((tier, hour) => {
|
||
const inDrag = dragHighlight
|
||
? hour >= Math.min(dragHighlight[0], dragHighlight[1]) &&
|
||
hour <= Math.max(dragHighlight[0], dragHighlight[1])
|
||
: false;
|
||
const displayTier = inDrag ? activeTier : tier;
|
||
const meta = TIER_META[displayTier];
|
||
return (
|
||
<div
|
||
key={hour}
|
||
className={[
|
||
"group relative flex h-full flex-1 cursor-crosshair flex-col items-center justify-center transition-colors",
|
||
meta.cellBg,
|
||
].join(" ")}
|
||
onMouseDown={(e) => handleCellMouseDown(hour, e)}
|
||
onMouseEnter={() => handleCellMouseEnter(hour)}
|
||
>
|
||
<span className="hidden text-[10px] font-semibold text-white drop-shadow lg:block">
|
||
{String(hour).padStart(2, "0")}
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
|
||
{/* Legend */}
|
||
<div className="mt-2.5 flex flex-wrap items-center gap-2 gap-y-1">
|
||
{TIERS.map((tier) => {
|
||
const meta = TIER_META[tier];
|
||
const hours = schedule.filter((t) => t === tier).length;
|
||
return (
|
||
<div key={tier} className="flex items-center gap-1">
|
||
<span className={`size-3 rounded-sm ${meta.cellBg}`} />
|
||
<span className="text-xs text-muted">
|
||
{meta.label}
|
||
<span className="ml-1 text-muted/60">
|
||
({meta.sublabel} · {hours}h)
|
||
</span>
|
||
</span>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Price configuration ───────────────────────────────────────────── */}
|
||
<div className="rounded-xl border border-border bg-surface-secondary">
|
||
<div className="border-b border-border px-5 py-4">
|
||
<p className="text-sm font-semibold text-foreground">单价设置</p>
|
||
<p className="text-xs text-muted">各电价类型对应的每千瓦时单价（元 / kWh）</p>
|
||
</div>
|
||
<div className="grid grid-cols-3 divide-x divide-border">
|
||
{TIERS.map((tier) => {
|
||
const meta = TIER_META[tier];
|
||
const hours = schedule.filter((t) => t === tier).length;
|
||
const pct = Math.round((hours / 24) * 100);
|
||
const effective = prices[tier].electricityPrice + prices[tier].serviceFee;
|
||
return (
|
||
<div key={tier} className="space-y-3 p-5">
|
||
<div className="flex items-center gap-2">
|
||
<span className={`size-2.5 shrink-0 rounded-full ${meta.dotClass}`} />
|
||
<span className={`text-sm font-semibold ${meta.activeText}`}>{meta.label}</span>
|
||
<span className="ml-auto text-xs tabular-nums text-muted">
|
||
{hours}h · {pct}%
|
||
</span>
|
||
</div>
|
||
<TextField fullWidth>
|
||
<Label className="text-xs text-muted">电价（¥ / kWh）</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="0.01"
|
||
placeholder="0.00"
|
||
value={priceStrings[tier].electricityPrice}
|
||
onChange={(e) => handlePriceChange(tier, "electricityPrice", e.target.value)}
|
||
/>
|
||
</TextField>
|
||
<TextField fullWidth>
|
||
<Label className="text-xs text-muted">服务费（¥ / kWh）</Label>
|
||
<Input
|
||
type="number"
|
||
min="0"
|
||
step="0.01"
|
||
placeholder="0.00"
|
||
value={priceStrings[tier].serviceFee}
|
||
onChange={(e) => handlePriceChange(tier, "serviceFee", e.target.value)}
|
||
/>
|
||
</TextField>
|
||
<div className="rounded-lg bg-surface-tertiary px-3 py-2">
|
||
<div className="flex items-center justify-between">
|
||
<span className="text-xs text-muted">合计单价</span>
|
||
<span className={`text-sm font-semibold tabular-nums ${meta.activeText}`}>
|
||
¥{effective.toFixed(2)} /kWh
|
||
</span>
|
||
</div>
|
||
<p className="mt-0.5 text-xs text-muted">
|
||
按 1 kW · {hours}h ≈ ¥{(effective * hours).toFixed(2)} / 天
|
||
</p>
|
||
</div>
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
|
||
{/* ── Time slots summary ────────────────────────────────────────────── */}
|
||
<div className="rounded-xl border border-border bg-surface-secondary">
|
||
<div className="border-b border-border px-5 py-4">
|
||
<p className="text-sm font-semibold text-foreground">时段汇总</p>
|
||
<p className="text-xs text-muted">当前配置共 {slots.length} 个连续时段</p>
|
||
</div>
|
||
<ul className="divide-y divide-border">
|
||
{slots.map((slot, i) => {
|
||
const meta = TIER_META[slot.tier];
|
||
return (
|
||
<li key={i} className="flex items-center gap-3 px-5 py-3">
|
||
<span className={`size-2.5 shrink-0 rounded-sm ${meta.cellBg}`} />
|
||
<span className={`w-9 text-sm font-semibold ${meta.activeText}`}>{meta.label}</span>
|
||
<span className="text-sm tabular-nums text-foreground">
|
||
{String(slot.start).padStart(2, "0")}:00
|
||
<span className="mx-1 text-muted">–</span>
|
||
{String(slot.end).padStart(2, "0")}:00
|
||
</span>
|
||
<span className="text-xs text-muted">（{slot.end - slot.start}h）</span>
|
||
<span className="ml-auto text-sm tabular-nums text-foreground">
|
||
¥{(prices[slot.tier].electricityPrice + prices[slot.tier].serviceFee).toFixed(2)}
|
||
<span className="text-xs text-muted"> /kWh</span>
|
||
</span>
|
||
</li>
|
||
);
|
||
})}
|
||
</ul>
|
||
</div>
|
||
|
||
{/* ── Actions ───────────────────────────────────────────────────────── */}
|
||
<div className="flex items-center justify-between pb-2">
|
||
<Button variant="danger-soft" size="sm" onPress={handleReset} isDisabled={saving}>
|
||
<ArrowRotateRight className="size-4" />
|
||
重置为默认
|
||
</Button>
|
||
<div className="flex items-center gap-3">
|
||
{isDirty && <span className="text-xs text-warning">有未保存的更改</span>}
|
||
<Button size="sm" onPress={handleSave} isDisabled={saving || !isDirty}>
|
||
{saving ? <Spinner size="sm" color="current" /> : "保存配置"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|