feat(api, agents, i18n): enhance settlement features and multi-language support

Added new types and API functions for settlement period summaries and credit ledgers, improving the management of agent settlements. Updated the admin console to reflect these changes, enhancing user experience with better navigation and data presentation. Additionally, expanded multi-language support by incorporating new translations in English, Nepali, and Chinese for settlement-related terms, ensuring consistency across the platform.
2026-06-05 18:00:59 +08:00
parent 65eaeecf8c
commit af982bb9f7
73 changed files with 4307 additions and 2494 deletions
--- a/src/modules/settlement/settlement-center-period-detail.tsx
+++ b/src/modules/settlement/settlement-center-period-detail.tsx
@@ -0,0 +1,111 @@
+"use client";
+
+import Link from "next/link";
+import { ArrowLeft } from "lucide-react";
+import { useTranslation } from "react-i18next";
+
+import type { SettlementPeriodRow } from "@/api/admin-agent-settlement";
+import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
+import { SettlementCreditLedgerPanel } from "@/modules/settlement/settlement-credit-ledger-panel";
+import { SettlementMainPanel } from "@/modules/settlement/settlement-main-panel";
+import {
+  settlementCenterListHref,
+  settlementPeriodViewHref,
+  type SettlementPeriodView,
+} from "@/modules/settlement/settlement-center-nav";
+import { formatSettlementPeriodSpan } from "@/lib/agent-settlement-period-range";
+import { settlementPeriodStatusLabel } from "@/modules/settlement/settlement-status-label";
+import { AdminSubnav, AdminSubnavLink } from "@/components/admin/admin-subnav";
+import { buttonVariants } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type SettlementCenterPeriodDetailProps = {
+  period: SettlementPeriodRow;
+  view: SettlementPeriodView;
+  adminSiteId: number;
+  currencyCode: string;
+  canOperateBills: boolean;
+  refreshKey: number;
+  onOpenBillDetail: (billId: number) => void;
+};
+
+export function SettlementCenterPeriodDetail({
+  period,
+  view,
+  adminSiteId,
+  currencyCode,
+  canOperateBills,
+  refreshKey,
+  onOpenBillDetail,
+}: SettlementCenterPeriodDetailProps): React.ReactElement {
+  const { t } = useTranslation("settlementCenter");
+
+  const subViews: { key: SettlementPeriodView; label: string }[] = [
+    { key: "bills", label: t("nav.bills", { defaultValue: "账单" }) },
+    { key: "ledger", label: t("nav.ledger", { defaultValue: "账务流水" }) },
+  ];
+
+  const pendingConfirm = period.summary?.pending_confirm ?? 0;
+  const awaitingPayment = period.summary?.awaiting_payment ?? 0;
+
+  return (
+    <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+        <div className="flex min-w-0 flex-col gap-2">
+          <Link
+            href={settlementCenterListHref()}
+            className={cn(buttonVariants({ variant: "ghost", size: "sm" }), "h-8 w-fit px-2")}
+          >
+            <ArrowLeft className="size-4" aria-hidden />
+            {t("periodDetail.back", { defaultValue: "返回账期列表" })}
+          </Link>
+          <div className="flex flex-wrap items-center gap-2">
+            <h2 className="text-base font-semibold tracking-tight">
+              {formatSettlementPeriodSpan(period.period_start, period.period_end)}
+            </h2>
+            <AdminStatusBadge status={period.status}>
+              {settlementPeriodStatusLabel(period.status, t)}
+            </AdminStatusBadge>
+          </div>
+        </div>
+      </div>
+
+      <AdminSubnav aria-label={t("nav.aria", { defaultValue: "账期视图" })}>
+        {subViews.map((item) => (
+          <AdminSubnavLink
+            key={item.key}
+            href={settlementPeriodViewHref(period.id, item.key)}
+            active={view === item.key}
+          >
+            {item.label}
+          </AdminSubnavLink>
+        ))}
+      </AdminSubnav>
+
+      {view === "bills" ? (
+        <SettlementMainPanel
+          key={`${adminSiteId}-${period.id}-${refreshKey}`}
+          adminSiteId={adminSiteId}
+          currencyCode={currencyCode}
+          periodFilter={period.id}
+          onOpenBillDetail={onOpenBillDetail}
+          refreshKey={refreshKey}
+          pendingConfirm={pendingConfirm}
+          awaitingPayment={awaitingPayment}
+          selectedPeriodStatus={period.status}
+        />
+      ) : null}
+
+      {view === "ledger" ? (
+        <SettlementCreditLedgerPanel
+          key={`${adminSiteId}-${period.id}-${refreshKey}`}
+          adminSiteId={adminSiteId}
+          settlementPeriodId={period.id}
+          currencyCode={currencyCode}
+          refreshKey={refreshKey}
+        />
+      ) : null}
+
+    </div>
+  );
+}