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.

src/modules/agents/agent-line-detail-panel.tsx

@@ -4,6 +4,7 @@ import type { ComponentType } from "react";
 import { ChevronRight, Network, Pencil, Plus, Trash2, Users } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
+import { AdminSubnav, AdminSubnavButton } from "@/components/admin/admin-subnav";
 import { AdminNoResourceState } from "@/components/admin/admin-no-resource-state";
 import { AdminStatusBadge } from "@/components/admin/admin-status-badge";
 import { AdminRowActionsMenu } from "@/components/admin/admin-row-actions-menu";
@@ -218,19 +219,23 @@ export function AgentLineDetailPanel({
         </div>
       </header>
 
-      <div className="flex items-center gap-0 overflow-x-auto border-b border-border/60 bg-card px-5 sm:px-6">
+      <AdminSubnav
+        aria-label={t("detailTabs", { defaultValue: "代理详情" })}
+        className="overflow-x-auto bg-card px-4 sm:px-5"
+      >
         {tabs
           .filter((tab) => tab.visible)
           .map((tab) => (
-            <TabButton
+            <AdminSubnavButton
               key={tab.key}
               active={detailTab === tab.key}
               onClick={() => onDetailTabChange(tab.key)}
-              label={tab.label}
               count={tab.count}
-            />
+            >
+              {tab.label}
+            </AdminSubnavButton>
           ))}
-      </div>
+      </AdminSubnav>
 
       <div className="min-h-0 flex-1 overflow-y-auto bg-muted/15 px-5 py-5 sm:px-6 sm:py-6">
         {detailTab === "overview" ? (
@@ -569,7 +574,7 @@ function DownlineTable({
                     {child.email ?? "—"}
                   </TableCell>
                   <TableCell className="text-right tabular-nums text-xs">
-                    {summary ? `${ratioToPercentUi(summary.total_share_rate)}%` : "—"}
+                    {summary ? `${summary.total_share_rate ?? 0}%` : "—"}
                   </TableCell>
                   <TableCell className="text-right tabular-nums text-xs">
                     {summary ? formatCredit(summary.credit_limit) : "—"}
@@ -660,40 +665,3 @@ function MetricCard({
     </div>
   );
 }
-
-function TabButton({
-  active,
-  onClick,
-  label,
-  count,
-}: {
-  active: boolean;
-  onClick: () => void;
-  label: string;
-  count?: number;
-}): React.ReactElement {
-  return (
-    <button
-      type="button"
-      onClick={onClick}
-      className={cn(
-        "relative -mb-px shrink-0 border-b-2 px-4 py-3 text-sm font-medium transition-colors",
-        active
-          ? "border-primary text-primary"
-          : "border-transparent text-muted-foreground hover:border-border hover:text-foreground",
-      )}
-    >
-      {label}
-      {count !== undefined && count > 0 ? (
-        <span
-          className={cn(
-            "ml-1.5 inline-flex min-w-[1.25rem] items-center justify-center rounded-full px-1.5 py-0.5 text-[10px] font-medium tabular-nums",
-            active ? "bg-primary/10 text-primary" : "bg-muted text-muted-foreground",
-          )}
-        >
-          {count}
-        </span>
-      ) : null}
-    </button>
-  );
-}