kang
24fd7c10bd
Added new types for downline share breakdown and settlement period open hints to enhance the agent settlement API. Updated the admin console components to support these new features, improving the user experience with better data presentation and interaction. Additionally, refined the date range field to accommodate new calendar markers and hints, ensuring a more intuitive interface for managing settlement periods.
94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useTranslation } from "react-i18next";
|
|
|
|
import type { SettlementAdjustmentRow } 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 { settlementAdjustmentTypeLabel } from "@/modules/settlement/settlement-status-label";
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from "@/components/ui/table";
|
|
|
|
type SettlementAdjustmentsTableProps = {
|
|
rows: SettlementAdjustmentRow[];
|
|
loading: boolean;
|
|
currencyCode: string;
|
|
onOpenBill: (billId: number) => void;
|
|
};
|
|
|
|
export function SettlementAdjustmentsTable({
|
|
rows,
|
|
loading,
|
|
currencyCode,
|
|
onOpenBill,
|
|
}: SettlementAdjustmentsTableProps): React.ReactElement {
|
|
const { t } = useTranslation(["settlementCenter", "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.adjustmentType", { defaultValue: "调账类型" })}</TableHead>
|
|
<TableHead>{t("columns.originalBill", { defaultValue: "原账单" })}</TableHead>
|
|
<TableHead className="text-right">{t("columns.amount", { defaultValue: "调整金额" })}</TableHead>
|
|
<TableHead>{t("columns.reason", { 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>
|
|
{settlementAdjustmentTypeLabel(row.adjustment_type, t)}
|
|
</TableCell>
|
|
<TableCell className="tabular-nums">
|
|
{row.original_bill_id != null ? `#${row.original_bill_id}` : "—"}
|
|
</TableCell>
|
|
<TableCell className="text-right tabular-nums">
|
|
{formatDashboardMoneyMinor(row.amount, currencyCode)}
|
|
</TableCell>
|
|
<TableCell className="max-w-[200px] truncate text-sm">{row.reason ?? "—"}</TableCell>
|
|
<TableCell className="text-xs text-muted-foreground">{formatTs(row.created_at)}</TableCell>
|
|
<TableCell>
|
|
{row.original_bill_id != null ? (
|
|
<button
|
|
type="button"
|
|
className="text-sm text-primary underline"
|
|
onClick={() => onOpenBill(row.original_bill_id!)}
|
|
>
|
|
{t("actions.viewBill", { defaultValue: "查看原账单" })}
|
|
</button>
|
|
) : null}
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
);
|
|
}
|