SerinaNya
c33857ffac
- Add transactions_dirty table and zero-tolerance cleansing action - Implement bookkeeping workbench (/bookkeeping) with searchable Combobox channel selector and card suffix / account identifier - Implement transaction ledger (/transactions) with date groupings, multi-currency metrics, and filters - Update AGENTS.md guidelines for Base UI Select and Combobox bindings
1123 lines
44 KiB
TypeScript
1123 lines
44 KiB
TypeScript
"use client"
|
|
|
|
import * as React from "react"
|
|
import Image from "next/image"
|
|
import { useRouter } from "next/navigation"
|
|
import {
|
|
AlertCircleIcon,
|
|
ArrowDownLeftIcon,
|
|
ArrowRightLeftIcon,
|
|
ArrowUpRightIcon,
|
|
BanknoteIcon,
|
|
CreditCardIcon,
|
|
InboxIcon,
|
|
Loader2Icon,
|
|
PenLineIcon,
|
|
PlusCircleIcon,
|
|
RotateCcwIcon,
|
|
SparklesIcon,
|
|
Trash2Icon,
|
|
WalletCardsIcon,
|
|
} from "lucide-react"
|
|
|
|
import {
|
|
createDirtyTransactionAction,
|
|
updateDirtyTransactionAction,
|
|
deleteDirtyTransactionAction,
|
|
cleanseTransactionsAction,
|
|
type DirtyTransactionInput,
|
|
} from "@/lib/actions/bookkeeping"
|
|
import type { ChannelWithAccountNames } from "@/lib/actions/channel"
|
|
import type { TransactionDirty } from "@/lib/db/schema"
|
|
import {
|
|
CARD_BRAND_LABELS,
|
|
getCardBrandLogoUrl,
|
|
normalizeCardBrand,
|
|
} from "@/lib/payment/card-brand"
|
|
|
|
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Card, CardContent } from "@/components/ui/card"
|
|
import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
|
|
import { Input } from "@/components/ui/input"
|
|
import {
|
|
Combobox,
|
|
ComboboxContent,
|
|
ComboboxEmpty,
|
|
ComboboxInput,
|
|
ComboboxItem,
|
|
ComboboxList,
|
|
} from "@/components/ui/combobox"
|
|
import { Textarea } from "@/components/ui/textarea"
|
|
import {
|
|
Tooltip,
|
|
TooltipContent,
|
|
TooltipProvider,
|
|
TooltipTrigger,
|
|
} from "@/components/ui/tooltip"
|
|
|
|
interface BookkeepingViewProps {
|
|
initialDirtyTransactions: TransactionDirty[]
|
|
initialChannels: ChannelWithAccountNames[]
|
|
}
|
|
|
|
const TXN_SCENES = [
|
|
{ value: "PAYMENT", label: "消费支出" },
|
|
{ value: "MISC_IN", label: "日常收入" },
|
|
{ value: "TRANSFER", label: "转账" },
|
|
{ value: "ATM", label: "取现" },
|
|
] as const
|
|
|
|
function getChannelIdentifier(channel: ChannelWithAccountNames): string {
|
|
if (channel.channelType === "PAYMENT_CARD") {
|
|
let suffix = channel.cardNumberSuffix?.trim()
|
|
if (
|
|
!suffix &&
|
|
channel.cardNumberFull &&
|
|
channel.cardNumberFull.length >= 4
|
|
) {
|
|
suffix = channel.cardNumberFull.slice(-4)
|
|
}
|
|
return suffix ? `•••• ${suffix}` : ""
|
|
}
|
|
if (channel.channelType === "E_WALLET") {
|
|
return channel.platformAccountId?.trim() || ""
|
|
}
|
|
return channel.subChannel?.trim() || ""
|
|
}
|
|
|
|
function channelName(channel: ChannelWithAccountNames) {
|
|
if (channel.channelType === "PAYMENT_CARD") {
|
|
const brand = normalizeCardBrand(channel.cardBrand)
|
|
const brandName = brand
|
|
? ` ${CARD_BRAND_LABELS[brand]}`
|
|
: channel.cardBrand
|
|
? ` ${channel.cardBrand}`
|
|
: ""
|
|
return `${channel.issuerName || "支付卡"}${brandName}`
|
|
}
|
|
if (channel.channelType === "E_WALLET") return channel.platform || "电子钱包"
|
|
return channel.channelType === "CASH" ? "现金渠道" : "转账渠道"
|
|
}
|
|
|
|
function channelPrimaryTitle(channel: ChannelWithAccountNames) {
|
|
return (
|
|
channel.desc ||
|
|
channel.platformAccountId ||
|
|
channel.subChannel ||
|
|
channelName(channel)
|
|
)
|
|
}
|
|
|
|
function channelDisplayLabel(channel: ChannelWithAccountNames) {
|
|
const primary = channelPrimaryTitle(channel)
|
|
const secondary = channelName(channel)
|
|
const identifier = getChannelIdentifier(channel)
|
|
|
|
// 拼接回显标签，确保卡号末四位或账号标识清晰可见
|
|
let label = primary
|
|
if (secondary && secondary !== primary) {
|
|
label = `${primary} · ${secondary}`
|
|
}
|
|
if (identifier && !label.includes(identifier)) {
|
|
label = `${label} ${identifier}`
|
|
}
|
|
return label
|
|
}
|
|
|
|
function formatChannelName(channel: ChannelWithAccountNames) {
|
|
if (channel.channelType === "PAYMENT_CARD") {
|
|
const brand = channel.cardBrand ? ` ${channel.cardBrand}` : ""
|
|
const suffix = channel.cardNumberSuffix
|
|
? ` (${channel.cardNumberSuffix})`
|
|
: ""
|
|
return `${channel.issuerName || "支付卡"}${brand}${suffix}`
|
|
}
|
|
if (channel.channelType === "E_WALLET") {
|
|
return channel.platform
|
|
? `${channel.platform}${channel.platformAccountId ? ` - ${channel.platformAccountId}` : ""}`
|
|
: "电子钱包"
|
|
}
|
|
if (channel.channelType === "CASH") {
|
|
return channel.desc || "现金渠道"
|
|
}
|
|
return channel.desc || "转账渠道"
|
|
}
|
|
|
|
function renderChannelIcon(channel: ChannelWithAccountNames) {
|
|
if (channel.channelType === "PAYMENT_CARD") {
|
|
const brand = normalizeCardBrand(channel.cardBrand)
|
|
const logoUrl = getCardBrandLogoUrl(channel.cardBrand)
|
|
if (logoUrl && brand) {
|
|
return (
|
|
<Image
|
|
src={logoUrl}
|
|
alt={CARD_BRAND_LABELS[brand]}
|
|
width={18}
|
|
height={18}
|
|
className="size-4 shrink-0 object-contain"
|
|
/>
|
|
)
|
|
}
|
|
return <CreditCardIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
}
|
|
if (channel.channelType === "E_WALLET") {
|
|
return <WalletCardsIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
}
|
|
if (channel.channelType === "CASH") {
|
|
return <BanknoteIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
}
|
|
return (
|
|
<ArrowRightLeftIcon className="size-4 shrink-0 text-muted-foreground" />
|
|
)
|
|
}
|
|
|
|
function getSceneBadge(scene: string) {
|
|
switch (scene) {
|
|
case "PAYMENT":
|
|
return <Badge variant="secondary">消费支出</Badge>
|
|
case "MISC_IN":
|
|
return (
|
|
<Badge
|
|
variant="outline"
|
|
className="border-emerald-500/30 text-emerald-600 dark:text-emerald-400"
|
|
>
|
|
日常收入
|
|
</Badge>
|
|
)
|
|
case "TRANSFER":
|
|
return <Badge variant="outline">转账</Badge>
|
|
case "ATM":
|
|
return <Badge variant="outline">取现</Badge>
|
|
default:
|
|
return <Badge variant="secondary">{scene}</Badge>
|
|
}
|
|
}
|
|
|
|
function formatDateForInput(dateVal?: Date | string | null): string {
|
|
if (!dateVal) {
|
|
const now = new Date()
|
|
const offset = now.getTimezoneOffset() * 60000
|
|
const localISODate = new Date(now.getTime() - offset).toISOString()
|
|
return localISODate.slice(0, 16)
|
|
}
|
|
const d = new Date(dateVal)
|
|
if (isNaN(d.getTime())) {
|
|
const now = new Date()
|
|
const offset = now.getTimezoneOffset() * 60000
|
|
return new Date(now.getTime() - offset).toISOString().slice(0, 16)
|
|
}
|
|
const offset = d.getTimezoneOffset() * 60000
|
|
const localISODate = new Date(d.getTime() - offset).toISOString()
|
|
return localISODate.slice(0, 16)
|
|
}
|
|
|
|
function formatDisplayDate(dateVal?: Date | string | null): string {
|
|
if (!dateVal) return "--"
|
|
const d = new Date(dateVal)
|
|
if (isNaN(d.getTime())) return "--"
|
|
const y = d.getFullYear()
|
|
const m = String(d.getMonth() + 1).padStart(2, "0")
|
|
const day = String(d.getDate()).padStart(2, "0")
|
|
const hh = String(d.getHours()).padStart(2, "0")
|
|
const mm = String(d.getMinutes()).padStart(2, "0")
|
|
return `${y}-${m}-${day} ${hh}:${mm}`
|
|
}
|
|
|
|
export function BookkeepingView({
|
|
initialDirtyTransactions,
|
|
initialChannels,
|
|
}: BookkeepingViewProps) {
|
|
const router = useRouter()
|
|
|
|
const [dirtyList, setDirtyList] = React.useState<TransactionDirty[]>(
|
|
initialDirtyTransactions
|
|
)
|
|
const [channels] = React.useState<ChannelWithAccountNames[]>(initialChannels)
|
|
|
|
// 移动端 Tab: "form" | "list"
|
|
const [mobileTab, setMobileTab] = React.useState<"form" | "list">("form")
|
|
|
|
// 编辑态，选中的待清洗记录
|
|
const [selectedTxnId, setSelectedTxnId] = React.useState<string | null>(null)
|
|
|
|
// 表单状态
|
|
const [txnScene, setTxnScene] = React.useState<string>("PAYMENT")
|
|
const [dcFlag, setDcFlag] = React.useState<"DEBIT" | "CREDIT">("DEBIT")
|
|
const [txnAmt, setTxnAmt] = React.useState<string>("")
|
|
const [txnCcy, setTxnCcy] = React.useState<string>("CNY")
|
|
const [channelId, setChannelId] = React.useState<string>(
|
|
initialChannels[0]?.id || ""
|
|
)
|
|
const [txnDate, setTxnDate] = React.useState<string>(() =>
|
|
formatDateForInput()
|
|
)
|
|
const [merchantName, setMerchantName] = React.useState<string>("")
|
|
const [description, setDescription] = React.useState<string>("")
|
|
const [memo, setMemo] = React.useState<string>("")
|
|
|
|
// 折算与入账扩展字段
|
|
const [postingAmt, setPostingAmt] = React.useState<string>("")
|
|
const [postingCcy, setPostingCcy] = React.useState<string>("")
|
|
const [commAmt, setCommAmt] = React.useState<string>("")
|
|
const [commCcy, setCommCcy] = React.useState<string>("")
|
|
|
|
// 交互与执行状态
|
|
const [isSubmitting, setIsSubmitting] = React.useState<boolean>(false)
|
|
const [isCleansing, setIsCleansing] = React.useState<boolean>(false)
|
|
const [formError, setFormError] = React.useState<string | null>(null)
|
|
|
|
// 清洗阻断错误清单与全局提示
|
|
const [cleanseErrors, setCleanseErrors] = React.useState<
|
|
{ id: string; name: string; error: string }[]
|
|
>([])
|
|
const [cleanseGlobalError, setCleanseGlobalError] = React.useState<
|
|
string | null
|
|
>(null)
|
|
|
|
// 单条删除执行状态
|
|
const [deletingId, setDeletingId] = React.useState<string | null>(null)
|
|
|
|
// 渠道映射 Map 方便快速索引
|
|
const channelMap = React.useMemo(() => {
|
|
return new Map(channels.map((c) => [c.id, c]))
|
|
}, [channels])
|
|
|
|
// 阻断错误 ID 映射 Map
|
|
const errorMap = React.useMemo(() => {
|
|
const map = new Map<string, string>()
|
|
cleanseErrors.forEach((e) => {
|
|
map.set(e.id, e.error)
|
|
})
|
|
return map
|
|
}, [cleanseErrors])
|
|
|
|
// 重置表单为默认新建态
|
|
const resetForm = React.useCallback(() => {
|
|
setSelectedTxnId(null)
|
|
setTxnScene("PAYMENT")
|
|
setDcFlag("DEBIT")
|
|
setTxnAmt("")
|
|
setTxnCcy("CNY")
|
|
setChannelId(channels[0]?.id || "")
|
|
setTxnDate(formatDateForInput())
|
|
setMerchantName("")
|
|
setDescription("")
|
|
setMemo("")
|
|
setPostingAmt("")
|
|
setPostingCcy("")
|
|
setCommAmt("")
|
|
setCommCcy("")
|
|
setFormError(null)
|
|
}, [channels])
|
|
|
|
// 点击待清洗记录载入编辑
|
|
const handleSelectTxn = React.useCallback((item: TransactionDirty) => {
|
|
setSelectedTxnId(item.id)
|
|
setTxnScene(item.txnScene || "PAYMENT")
|
|
setDcFlag(item.dcFlag === "CREDIT" ? "CREDIT" : "DEBIT")
|
|
setTxnAmt(item.txnAmt || "")
|
|
setTxnCcy(item.txnCcy || "CNY")
|
|
const ch = Array.isArray(item.refChannels) && item.refChannels[0]
|
|
setChannelId(ch || "")
|
|
setTxnDate(formatDateForInput(item.txnDate))
|
|
setMerchantName(item.merchantName || "")
|
|
setDescription(item.description || "")
|
|
setMemo(item.memo || "")
|
|
setPostingAmt(item.postingAmt || "")
|
|
setPostingCcy(item.postingCcy || "")
|
|
setCommAmt(item.commAmt || "")
|
|
setCommCcy(item.commCcy || "")
|
|
setFormError(null)
|
|
|
|
// 移动端切换到表单视口
|
|
setMobileTab("form")
|
|
}, [])
|
|
|
|
// 场景与借贷方向联动快捷设值
|
|
const handleSceneChange = (scene: string) => {
|
|
setTxnScene(scene)
|
|
if (scene === "MISC_IN") {
|
|
setDcFlag("CREDIT")
|
|
} else if (scene === "PAYMENT" || scene === "ATM") {
|
|
setDcFlag("DEBIT")
|
|
}
|
|
}
|
|
|
|
// 提交暂存或修改
|
|
const handleSubmitForm = async (e: React.FormEvent) => {
|
|
e.preventDefault()
|
|
setFormError(null)
|
|
|
|
const amtNum = parseFloat(txnAmt)
|
|
if (!txnAmt || isNaN(amtNum) || amtNum <= 0) {
|
|
setFormError("请输入有效的交易金额（大于0的数值）")
|
|
return
|
|
}
|
|
|
|
if (!txnCcy.trim()) {
|
|
setFormError("请输入交易币种（如 CNY, USD, HKD 等）")
|
|
return
|
|
}
|
|
|
|
if (!channelId) {
|
|
setFormError("请选择渠道")
|
|
return
|
|
}
|
|
|
|
setIsSubmitting(true)
|
|
try {
|
|
const payload: DirtyTransactionInput = {
|
|
txnDate: new Date(txnDate).toISOString(),
|
|
txnAmt: txnAmt.trim(),
|
|
txnCcy: txnCcy.trim().toUpperCase(),
|
|
postingAmt: postingAmt.trim() ? postingAmt.trim() : null,
|
|
postingCcy: postingCcy.trim() ? postingCcy.trim().toUpperCase() : null,
|
|
commAmt: commAmt.trim() ? commAmt.trim() : null,
|
|
commCcy: commCcy.trim() ? commCcy.trim().toUpperCase() : null,
|
|
dcFlag,
|
|
refChannels: [channelId],
|
|
txnScene,
|
|
merchantName: merchantName.trim() || null,
|
|
description: description.trim() || null,
|
|
memo: memo.trim() || null,
|
|
}
|
|
|
|
if (selectedTxnId) {
|
|
// 编辑模式
|
|
const res = await updateDirtyTransactionAction(selectedTxnId, payload)
|
|
if (!res.success || !res.data) {
|
|
setFormError(res.error || "更新暂存交易失败")
|
|
return
|
|
}
|
|
|
|
// 更新本地列表
|
|
setDirtyList((prev) =>
|
|
prev.map((item) => (item.id === selectedTxnId ? res.data! : item))
|
|
)
|
|
// 清理当前项可能存在的阻断错误提示
|
|
setCleanseErrors((prev) =>
|
|
prev.filter((err) => err.id !== selectedTxnId)
|
|
)
|
|
resetForm()
|
|
router.refresh()
|
|
} else {
|
|
// 新建模式
|
|
const res = await createDirtyTransactionAction(payload)
|
|
if (!res.success || !res.data) {
|
|
setFormError(res.error || "暂存交易失败")
|
|
return
|
|
}
|
|
|
|
// 插入到列表首位
|
|
setDirtyList((prev) => [res.data!, ...prev])
|
|
resetForm()
|
|
router.refresh()
|
|
}
|
|
} catch (err) {
|
|
setFormError(err instanceof Error ? err.message : "提交异常，请重试")
|
|
} finally {
|
|
setIsSubmitting(false)
|
|
}
|
|
}
|
|
|
|
// 删除单笔流水（无需二次确认，直接删除）
|
|
const handleDeleteTxn = async (id: string) => {
|
|
if (deletingId) return
|
|
setDeletingId(id)
|
|
try {
|
|
const res = await deleteDirtyTransactionAction(id)
|
|
if (res.success) {
|
|
setDirtyList((prev) => prev.filter((item) => item.id !== id))
|
|
setCleanseErrors((prev) => prev.filter((err) => err.id !== id))
|
|
if (selectedTxnId === id) {
|
|
resetForm()
|
|
}
|
|
router.refresh()
|
|
} else {
|
|
setCleanseGlobalError(res.error || "删除暂存流水失败")
|
|
}
|
|
} finally {
|
|
setDeletingId(null)
|
|
}
|
|
}
|
|
|
|
// 执行全量原子阻断清洗入账
|
|
const handleCleanseAll = async () => {
|
|
if (dirtyList.length === 0) return
|
|
setIsCleansing(true)
|
|
setCleanseGlobalError(null)
|
|
setCleanseErrors([])
|
|
|
|
try {
|
|
const res = await cleanseTransactionsAction()
|
|
if (res.success) {
|
|
setDirtyList([])
|
|
resetForm()
|
|
router.refresh()
|
|
} else {
|
|
setCleanseGlobalError(
|
|
res.error || "存在未平衡或不合规的交易记录，全量阻断合并！"
|
|
)
|
|
if (res.errors && res.errors.length > 0) {
|
|
setCleanseErrors(res.errors)
|
|
}
|
|
}
|
|
} catch (err) {
|
|
setCleanseGlobalError(
|
|
err instanceof Error ? err.message : "清洗请求异常，合并已阻断"
|
|
)
|
|
} finally {
|
|
setIsCleansing(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<TooltipProvider>
|
|
<main className="flex min-w-0 flex-1 flex-col gap-6 p-4 md:p-6 lg:p-8">
|
|
{/* 全局阻断错误报告 (标准 Alert variant="destructive") */}
|
|
{cleanseGlobalError && (
|
|
<Alert
|
|
variant="destructive"
|
|
className="animate-in duration-200 fade-in-50"
|
|
>
|
|
<AlertCircleIcon />
|
|
<AlertTitle>
|
|
清洗阻断报告：数据未满足入账标准，原子合并已完全中止
|
|
</AlertTitle>
|
|
<AlertDescription>
|
|
<p className="font-medium">{cleanseGlobalError}</p>
|
|
{cleanseErrors.length > 0 && (
|
|
<div className="mt-3 flex flex-col gap-1.5 border-t border-destructive/20 pt-2 text-xs">
|
|
<span className="font-semibold">
|
|
阻断交易明细（已在列表中标红高亮，请修正）：
|
|
</span>
|
|
<ul className="list-inside list-disc space-y-1">
|
|
{cleanseErrors.map((err) => (
|
|
<li key={err.id}>
|
|
<span className="font-medium">「{err.name}」:</span>{" "}
|
|
{err.error}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* 页头控制区 */}
|
|
<div className="flex flex-col gap-4 border-b border-border/70 pb-5 sm:flex-row sm:items-end sm:justify-between">
|
|
<div>
|
|
<div className="flex items-center gap-2.5">
|
|
<h1 className="font-heading text-2xl font-semibold tracking-tight">
|
|
流水记账
|
|
</h1>
|
|
<Badge
|
|
variant="secondary"
|
|
className="px-2 py-0.5 text-xs font-normal"
|
|
>
|
|
待清洗 {dirtyList.length} 笔
|
|
</Badge>
|
|
</div>
|
|
<p className="mt-1 text-sm text-muted-foreground">
|
|
录入与核对暂存流水，确认无误后完成清洗入账
|
|
</p>
|
|
</div>
|
|
|
|
<div className="flex items-center gap-3">
|
|
<Button
|
|
onClick={handleCleanseAll}
|
|
disabled={dirtyList.length === 0 || isCleansing}
|
|
size="default"
|
|
className="w-full shadow-sm sm:w-auto"
|
|
>
|
|
{isCleansing ? (
|
|
<Loader2Icon
|
|
data-icon="inline-start"
|
|
className="animate-spin"
|
|
/>
|
|
) : (
|
|
<SparklesIcon data-icon="inline-start" />
|
|
)}
|
|
完成清洗 ({dirtyList.length})
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 移动端视图切换分段器 (md: 及以下) */}
|
|
<div className="flex gap-2 rounded-lg bg-muted/60 p-1 lg:hidden">
|
|
<Button
|
|
variant={mobileTab === "form" ? "default" : "ghost"}
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
onClick={() => setMobileTab("form")}
|
|
>
|
|
{selectedTxnId ? "编辑暂存流水" : "录入表单"}
|
|
</Button>
|
|
<Button
|
|
variant={mobileTab === "list" ? "default" : "ghost"}
|
|
size="sm"
|
|
className="flex-1 text-xs"
|
|
onClick={() => setMobileTab("list")}
|
|
>
|
|
待清洗列表 ({dirtyList.length})
|
|
{cleanseErrors.length > 0 && (
|
|
<span className="ml-1.5 size-2 rounded-full bg-destructive" />
|
|
)}
|
|
</Button>
|
|
</div>
|
|
|
|
{/* PC 端左右分栏工作台 (lg: 5:7 黄金比例双栏工作台) */}
|
|
<div className="grid grid-cols-1 items-start gap-6 lg:grid-cols-12">
|
|
{/* 左栏：录入 / 联动编辑工作区 (5/12) */}
|
|
<section
|
|
className={`min-w-0 lg:col-span-5 ${
|
|
mobileTab === "form" ? "block" : "hidden lg:block"
|
|
}`}
|
|
>
|
|
<Card className="border-border/70 shadow-xs">
|
|
<div className="flex items-center justify-between border-b px-5 py-3.5">
|
|
<div className="flex items-center gap-2">
|
|
{selectedTxnId ? (
|
|
<>
|
|
<PenLineIcon className="size-4 text-primary" />
|
|
<h2 className="text-sm font-semibold">编辑暂存流水</h2>
|
|
</>
|
|
) : (
|
|
<>
|
|
<PlusCircleIcon className="size-4 text-muted-foreground" />
|
|
<h2 className="text-sm font-semibold">新建暂存流水</h2>
|
|
</>
|
|
)}
|
|
</div>
|
|
{selectedTxnId && (
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={resetForm}
|
|
className="h-7 text-xs text-muted-foreground hover:text-foreground"
|
|
>
|
|
<RotateCcwIcon data-icon="inline-start" />
|
|
返回新建
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
<CardContent className="p-5">
|
|
<form onSubmit={handleSubmitForm}>
|
|
<FieldGroup>
|
|
{/* 表单内行内错误提示 */}
|
|
{formError && (
|
|
<Alert variant="destructive" className="py-2 text-xs">
|
|
<AlertCircleIcon className="size-3.5" />
|
|
<AlertDescription>{formError}</AlertDescription>
|
|
</Alert>
|
|
)}
|
|
|
|
{/* 1. 交易场景快捷选择 */}
|
|
<Field>
|
|
<FieldLabel>交易场景</FieldLabel>
|
|
<div className="grid grid-cols-4 gap-1.5 rounded-lg border bg-muted/20 p-1">
|
|
{TXN_SCENES.map((scene) => (
|
|
<button
|
|
key={scene.value}
|
|
type="button"
|
|
onClick={() => handleSceneChange(scene.value)}
|
|
className={`rounded-md py-1.5 text-xs font-medium transition-all ${
|
|
txnScene === scene.value
|
|
? "bg-background text-foreground shadow-xs"
|
|
: "text-muted-foreground hover:text-foreground"
|
|
}`}
|
|
>
|
|
{scene.label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</Field>
|
|
|
|
{/* 2. 借贷方向选择 */}
|
|
<Field>
|
|
<FieldLabel>资金流向</FieldLabel>
|
|
<div className="grid grid-cols-2 gap-2">
|
|
<button
|
|
type="button"
|
|
onClick={() => setDcFlag("DEBIT")}
|
|
className={`flex items-center justify-center gap-1.5 rounded-md border p-2 text-xs font-medium transition-colors ${
|
|
dcFlag === "DEBIT"
|
|
? "border-destructive/40 bg-destructive/10 font-semibold text-destructive"
|
|
: "border-input bg-card text-muted-foreground hover:bg-muted/40"
|
|
}`}
|
|
>
|
|
<ArrowUpRightIcon className="size-3.5" />
|
|
支出
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setDcFlag("CREDIT")}
|
|
className={`flex items-center justify-center gap-1.5 rounded-md border p-2 text-xs font-medium transition-colors ${
|
|
dcFlag === "CREDIT"
|
|
? "border-emerald-500/40 bg-emerald-500/10 font-semibold text-emerald-600 dark:text-emerald-400"
|
|
: "border-input bg-card text-muted-foreground hover:bg-muted/40"
|
|
}`}
|
|
>
|
|
<ArrowDownLeftIcon className="size-3.5" />
|
|
收入
|
|
</button>
|
|
</div>
|
|
</Field>
|
|
|
|
{/* 3. 发生金额与币种 */}
|
|
<div className="grid grid-cols-3 gap-3">
|
|
<Field className="col-span-2">
|
|
<FieldLabel>发生金额</FieldLabel>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
value={txnAmt}
|
|
onChange={(e) => setTxnAmt(e.target.value)}
|
|
className="font-mono text-lg font-semibold tracking-tight"
|
|
required
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel>交易币种</FieldLabel>
|
|
<Input
|
|
type="text"
|
|
placeholder="CNY"
|
|
value={txnCcy}
|
|
onChange={(e) =>
|
|
setTxnCcy(e.target.value.toUpperCase())
|
|
}
|
|
className="font-mono uppercase"
|
|
maxLength={6}
|
|
required
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
{/* 4. 渠道 */}
|
|
<Field>
|
|
<FieldLabel>渠道</FieldLabel>
|
|
{channels.length === 0 ? (
|
|
<div className="rounded-md border border-dashed p-2.5 text-center text-xs text-muted-foreground">
|
|
暂无启用渠道，请先在渠道管理中新增
|
|
</div>
|
|
) : (
|
|
<Combobox
|
|
items={channels}
|
|
value={
|
|
channels.find((c) => c.id === channelId) || null
|
|
}
|
|
onValueChange={(
|
|
val: ChannelWithAccountNames | null
|
|
) => {
|
|
setChannelId(val?.id || "")
|
|
}}
|
|
itemToStringValue={(ch: ChannelWithAccountNames) =>
|
|
ch
|
|
? `${channelPrimaryTitle(ch)} ${channelName(ch)} ${getChannelIdentifier(ch)} ${ch.cardNumberSuffix || ""}`
|
|
: ""
|
|
}
|
|
itemToStringLabel={(ch: ChannelWithAccountNames) =>
|
|
ch ? channelDisplayLabel(ch) : ""
|
|
}
|
|
autoHighlight
|
|
>
|
|
<ComboboxInput
|
|
placeholder="请选择或搜索渠道"
|
|
className="w-full"
|
|
/>
|
|
<ComboboxContent>
|
|
<ComboboxEmpty>没有匹配的渠道</ComboboxEmpty>
|
|
<ComboboxList>
|
|
{(ch: ChannelWithAccountNames) => {
|
|
const identifier = getChannelIdentifier(ch)
|
|
return (
|
|
<ComboboxItem key={ch.id} value={ch}>
|
|
<div className="flex min-w-0 flex-1 items-center justify-between gap-2 py-1">
|
|
<div className="flex min-w-0 items-center gap-2.5">
|
|
<span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
|
{renderChannelIcon(ch)}
|
|
</span>
|
|
<div className="flex min-w-0 flex-col">
|
|
<span className="truncate text-xs font-medium text-foreground">
|
|
{ch.desc ||
|
|
ch.platformAccountId ||
|
|
ch.subChannel ||
|
|
channelName(ch)}
|
|
</span>
|
|
<span className="truncate text-[11px] text-muted-foreground">
|
|
{channelName(ch)}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
{identifier && (
|
|
<span className="shrink-0 font-mono text-xs text-muted-foreground">
|
|
{identifier}
|
|
</span>
|
|
)}
|
|
</div>
|
|
</ComboboxItem>
|
|
)
|
|
}}
|
|
</ComboboxList>
|
|
</ComboboxContent>
|
|
</Combobox>
|
|
)}
|
|
</Field>
|
|
|
|
{/* 5. 交易时间 */}
|
|
<Field>
|
|
<FieldLabel>交易时间</FieldLabel>
|
|
<Input
|
|
type="datetime-local"
|
|
value={txnDate}
|
|
onChange={(e) => setTxnDate(e.target.value)}
|
|
className="font-mono text-xs"
|
|
required
|
|
/>
|
|
</Field>
|
|
|
|
{/* 6. 商户与描述 */}
|
|
<Field>
|
|
<FieldLabel>商户名称</FieldLabel>
|
|
<Input
|
|
type="text"
|
|
placeholder="如：Apple Store、星巴克、工资发放"
|
|
value={merchantName}
|
|
onChange={(e) => setMerchantName(e.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel>消费描述与说明</FieldLabel>
|
|
<Input
|
|
type="text"
|
|
placeholder="选填，如：数码配件、日常聚餐"
|
|
value={description}
|
|
onChange={(e) => setDescription(e.target.value)}
|
|
/>
|
|
</Field>
|
|
|
|
{/* 7. 折算与入账信息 (可选折叠面板概念) */}
|
|
<div className="space-y-3 rounded-lg border bg-muted/20 p-3">
|
|
<div className="flex items-center justify-between text-xs">
|
|
<span className="font-medium text-muted-foreground">
|
|
折算与入账 (跨币种或手续费选填)
|
|
</span>
|
|
</div>
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field>
|
|
<FieldLabel className="text-xs">入账金额</FieldLabel>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="留空则等额入账"
|
|
value={postingAmt}
|
|
onChange={(e) => setPostingAmt(e.target.value)}
|
|
className="font-mono text-xs"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel className="text-xs">入账币种</FieldLabel>
|
|
<Input
|
|
type="text"
|
|
placeholder="同原币"
|
|
value={postingCcy}
|
|
onChange={(e) =>
|
|
setPostingCcy(e.target.value.toUpperCase())
|
|
}
|
|
className="font-mono text-xs uppercase"
|
|
maxLength={6}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-3">
|
|
<Field>
|
|
<FieldLabel className="text-xs">
|
|
手续费金额
|
|
</FieldLabel>
|
|
<Input
|
|
type="number"
|
|
step="0.01"
|
|
placeholder="0.00"
|
|
value={commAmt}
|
|
onChange={(e) => setCommAmt(e.target.value)}
|
|
className="font-mono text-xs"
|
|
/>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel className="text-xs">
|
|
手续费币种
|
|
</FieldLabel>
|
|
<Input
|
|
type="text"
|
|
placeholder={txnCcy}
|
|
value={commCcy}
|
|
onChange={(e) =>
|
|
setCommCcy(e.target.value.toUpperCase())
|
|
}
|
|
className="font-mono text-xs uppercase"
|
|
maxLength={6}
|
|
/>
|
|
</Field>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 8. 备注 */}
|
|
<Field>
|
|
<FieldLabel>内部备注</FieldLabel>
|
|
<Textarea
|
|
placeholder="选填，辅助核账记录"
|
|
value={memo}
|
|
onChange={(e) => setMemo(e.target.value)}
|
|
rows={2}
|
|
className="resize-none text-xs"
|
|
/>
|
|
</Field>
|
|
|
|
{/* 提交动作栏 */}
|
|
<div className="flex items-center gap-2 pt-2">
|
|
{selectedTxnId ? (
|
|
<>
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="flex-1"
|
|
>
|
|
{isSubmitting && (
|
|
<Loader2Icon
|
|
data-icon="inline-start"
|
|
className="animate-spin"
|
|
/>
|
|
)}
|
|
保存修改
|
|
</Button>
|
|
<Button
|
|
type="button"
|
|
variant="outline"
|
|
onClick={resetForm}
|
|
disabled={isSubmitting}
|
|
>
|
|
取消编辑
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<Button
|
|
type="submit"
|
|
disabled={isSubmitting}
|
|
className="w-full"
|
|
>
|
|
{isSubmitting && (
|
|
<Loader2Icon
|
|
data-icon="inline-start"
|
|
className="animate-spin"
|
|
/>
|
|
)}
|
|
暂存到列表
|
|
</Button>
|
|
)}
|
|
</div>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</section>
|
|
|
|
{/* 右栏：待清洗流水密集列表 (7/12) */}
|
|
<section
|
|
className={`min-w-0 lg:col-span-7 ${
|
|
mobileTab === "list" ? "block" : "hidden lg:block"
|
|
}`}
|
|
>
|
|
<div className="flex flex-col gap-3">
|
|
<div className="flex items-center justify-between">
|
|
<div className="flex items-center gap-2">
|
|
<h2 className="text-sm font-semibold">待清洗流水列表</h2>
|
|
<span className="text-xs text-muted-foreground">
|
|
共 {dirtyList.length} 笔待处理
|
|
</span>
|
|
</div>
|
|
{dirtyList.length > 0 && (
|
|
<span className="text-[11px] text-muted-foreground">
|
|
点击任意条目即可在左栏编辑
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
{dirtyList.length > 0 ? (
|
|
<div className="overflow-hidden rounded-lg border border-border/70 bg-card shadow-xs">
|
|
{/* PC 列表表头 */}
|
|
<div className="hidden grid-cols-[1fr_auto_80px_40px] items-center gap-3 border-b bg-muted/30 px-4 py-2.5 text-[11px] font-medium text-muted-foreground md:grid">
|
|
<span>交易要素 / 渠道</span>
|
|
<span className="text-right">发生金额</span>
|
|
<span className="text-center">场景</span>
|
|
<span />
|
|
</div>
|
|
|
|
<div className="divide-y divide-border/60">
|
|
{dirtyList.map((item) => {
|
|
const isSelected = selectedTxnId === item.id
|
|
const hasError = errorMap.has(item.id)
|
|
const errorMsg = errorMap.get(item.id)
|
|
const primaryChannelId =
|
|
Array.isArray(item.refChannels) && item.refChannels[0]
|
|
const ch = primaryChannelId
|
|
? channelMap.get(primaryChannelId)
|
|
: null
|
|
|
|
return (
|
|
<div
|
|
key={item.id}
|
|
onClick={() => handleSelectTxn(item)}
|
|
className={`group relative flex cursor-pointer flex-col gap-2 p-3 transition-colors md:grid md:grid-cols-[1fr_auto_80px_40px] md:items-center md:gap-3 md:px-4 md:py-3 ${
|
|
isSelected
|
|
? "border-l-4 border-l-primary bg-primary/5"
|
|
: "hover:bg-muted/40"
|
|
} ${
|
|
hasError
|
|
? "border-destructive/40 bg-destructive/5"
|
|
: ""
|
|
}`}
|
|
>
|
|
{/* 交易主体信息 */}
|
|
<div className="flex min-w-0 items-start gap-2.5">
|
|
<div className="mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground">
|
|
{ch ? (
|
|
renderChannelIcon(ch)
|
|
) : (
|
|
<CreditCardIcon className="size-3.5" />
|
|
)}
|
|
</div>
|
|
<div className="min-w-0 flex-1">
|
|
<div className="flex items-center gap-2">
|
|
<span className="truncate text-sm font-medium text-foreground">
|
|
{item.merchantName ||
|
|
item.description ||
|
|
"未命名交易"}
|
|
</span>
|
|
{hasError && (
|
|
<Badge
|
|
variant="destructive"
|
|
className="h-4 px-1.5 text-[10px]"
|
|
>
|
|
待修正
|
|
</Badge>
|
|
)}
|
|
</div>
|
|
<div className="mt-0.5 flex flex-wrap items-center gap-1.5 text-xs text-muted-foreground">
|
|
<span className="font-mono text-[11px]">
|
|
{formatDisplayDate(item.txnDate)}
|
|
</span>
|
|
<span>•</span>
|
|
<span className="max-w-[140px] truncate">
|
|
{ch
|
|
? formatChannelName(ch)
|
|
: "未关联有效渠道"}
|
|
</span>
|
|
{item.description && item.merchantName && (
|
|
<>
|
|
<span>•</span>
|
|
<span className="max-w-[140px] truncate">
|
|
{item.description}
|
|
</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
{/* 行内错误提示 */}
|
|
{hasError && (
|
|
<p className="mt-1 text-[11px] text-destructive">
|
|
{errorMsg}
|
|
</p>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* 金额 */}
|
|
<div className="flex items-baseline justify-between md:block md:text-right">
|
|
<span className="text-xs text-muted-foreground md:hidden">
|
|
发生金额
|
|
</span>
|
|
<div className="flex items-baseline gap-1 md:justify-end">
|
|
<span
|
|
className={`font-mono text-base font-bold tracking-tight ${
|
|
item.dcFlag === "CREDIT"
|
|
? "text-emerald-600 dark:text-emerald-400"
|
|
: "text-foreground"
|
|
}`}
|
|
>
|
|
{item.dcFlag === "CREDIT" ? "+" : "-"}
|
|
{item.txnAmt}
|
|
</span>
|
|
<span className="font-mono text-[11px] text-muted-foreground uppercase">
|
|
{item.txnCcy}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 场景徽标 */}
|
|
<div className="flex items-center justify-between md:justify-center">
|
|
<span className="text-xs text-muted-foreground md:hidden">
|
|
场景
|
|
</span>
|
|
{getSceneBadge(item.txnScene)}
|
|
</div>
|
|
|
|
{/* 操作：删除 */}
|
|
<div
|
|
className="flex items-center justify-end"
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
<Tooltip>
|
|
<TooltipTrigger
|
|
render={
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-xs"
|
|
aria-label="删除此笔流水"
|
|
className="text-muted-foreground opacity-60 hover:text-destructive hover:opacity-100"
|
|
disabled={deletingId === item.id}
|
|
onClick={() => handleDeleteTxn(item.id)}
|
|
/>
|
|
}
|
|
>
|
|
{deletingId === item.id ? (
|
|
<Loader2Icon className="animate-spin" />
|
|
) : (
|
|
<Trash2Icon />
|
|
)}
|
|
</TooltipTrigger>
|
|
<TooltipContent>删除暂存流水</TooltipContent>
|
|
</Tooltip>
|
|
</div>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
</div>
|
|
) : (
|
|
/* 空状态 */
|
|
<div className="flex min-h-[380px] flex-col items-center justify-center rounded-lg border border-dashed border-border/80 bg-muted/10 p-8 text-center">
|
|
<div className="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground">
|
|
<InboxIcon className="size-6" />
|
|
</div>
|
|
<h3 className="mt-4 text-sm font-semibold">
|
|
暂无待清洗的暂存流水
|
|
</h3>
|
|
<p className="mt-1.5 max-w-sm text-xs text-muted-foreground">
|
|
当前没有待清洗的暂存流水，可通过左侧表单开始录入。全部暂存数据校验合格后，可一键完成清洗入账。
|
|
</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</section>
|
|
</div>
|
|
</main>
|
|
</TooltipProvider>
|
|
)
|
|
}
|