106 lines
4.0 KiB
TypeScript
106 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { SettlementPaymentRow } from "@/api/admin-agent-settlement";
|
|
import { AdminNoResourceState } from "@/components/admin/admin-no-resource-state";
|
|
import { AdminLoadingState } from "@/components/admin/admin-loading-state";
|
|
import { useAdminDateTimeFormatter } from "@/hooks/use-admin-datetime-formatter";
|
|
import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
|
|
import { formatDashboardMoneyMinor } from "@/modules/dashboard/use-dashboard-analytics";
|
|
import { settlementBillTypeLabel } from "@/modules/settlement/settlement-status-label";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
type SettlementPaymentsTableProps = {
|
|
rows: SettlementPaymentRow[];
|
|
loading: boolean;
|
|
currencyCode: string;
|
|
onOpenBill: (billId: number) => void;
|
|
};
|
|
|
|
export function SettlementPaymentsTable({
|
|
rows,
|
|
loading,
|
|
currencyCode,
|
|
onOpenBill,
|
|
}: SettlementPaymentsTableProps): React.ReactElement {
|
|
const { t } = useTranslation(["settlementCenter", "agents", "common"]);
|
|
const formatTs = useAdminDateTimeFormatter();
|
|
|
|
if (loading) {
|
|
return <AdminLoadingState />;
|
|
}
|
|
|
|
if (rows.length === 0) {
|
|
return <AdminNoResourceState />;
|
|
}
|
|
|
|
return (
|
|
<div className="admin-table-shell overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>{t("columns.period", { defaultValue: "账期" })}</TableHead>
|
|
<TableHead>{t("columns.billId", { defaultValue: "账单 ID" })}</TableHead>
|
|
<TableHead>{t("columns.type", { defaultValue: "类型" })}</TableHead>
|
|
<TableHead>{t("columns.payer", { defaultValue: "付款方" })}</TableHead>
|
|
<TableHead>{t("columns.payee", { defaultValue: "收款方" })}</TableHead>
|
|
<TableHead className="text-right">{t("columns.amount", { defaultValue: "金额" })}</TableHead>
|
|
<TableHead>{t("columns.method", { defaultValue: "方式" })}</TableHead>
|
|
<TableHead>{t("columns.status", { defaultValue: "状态" })}</TableHead>
|
|
<TableHead>{t("columns.time", { defaultValue: "时间" })}</TableHead>
|
|
<TableHead />
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{rows.map((row) => (
|
|
<TableRow key={row.id}>
|
|
<TableCell className="whitespace-nowrap text-xs text-muted-foreground">
|
|
{formatSettlementPeriodSpan(row.period_start, row.period_end)}
|
|
</TableCell>
|
|
<TableCell className="tabular-nums">#{row.settlement_bill_id}</TableCell>
|
|
<TableCell>{settlementBillTypeLabel(row.bill_type, t)}</TableCell>
|
|
<TableCell>
|
|
{row.payer_type}#{row.payer_id}
|
|
</TableCell>
|
|
<TableCell>
|
|
{row.payee_type === "platform"
|
|
? t("agents:settlementBills.platform", { defaultValue: "平台" })
|
|
: `${row.payee_type}#${row.payee_id}`}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums font-medium">
|
|
{formatDashboardMoneyMinor(row.amount, currencyCode)}
|
|
</TableCell>
|
|
<TableCell>{row.method ?? "—"}</TableCell>
|
|
<TableCell>
|
|
{t(`paymentStatus.${row.status}`, {
|
|
defaultValue: row.status === "confirmed" ? "已确认" : row.status,
|
|
})}
|
|
</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">
|
|
{formatTs(row.confirmed_at ?? row.created_at)}
|
|
</TableCell>
|
|
<TableCell>
|
|
<button
|
|
type="button"
|
|
className="text-sm text-primary underline"
|
|
onClick={() => onOpenBill(row.settlement_bill_id)}
|
|
>
|
|
{t("actions.viewBill", { defaultValue: "查看账单" })}
|
|
</button>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|