From 844e9dd7a12cec1fa2cf381459e338163e03b65e Mon Sep 17 00:00:00 2001
From: xudaotutou <13435638964@163.com>
Date: Tue, 2 Jul 2024 17:15:34 +0800
Subject: [PATCH] fix:fix transfer billing

---
 .../costcenter/public/locales/en/applist.json | 10 +++
 .../costcenter/public/locales/en/common.json  |  6 +-
 .../costcenter/public/locales/zh/applist.json | 10 +++
 .../costcenter/public/locales/zh/common.json  |  6 +-
 .../src/components/billing/AppMenu.tsx        |  6 +-
 .../src/components/billing/SwitchPage.tsx     |  4 +-
 .../components/billing/TransferTabPnel.tsx    | 41 +++++------
 .../src/components/billing/TypeMenu.tsx       | 16 ++---
 .../src/components/billing/billingTable.tsx   | 72 +++++++++----------
 .../costcenter/src/constants/billing.ts       | 11 ++-
 .../providers/costcenter/src/layout/index.tsx |  3 +-
 .../src/pages/api/account/transfer.ts         | 11 +--
 .../costcenter/src/pages/api/billing/index.ts |  2 +-
 .../src/pages/api/billing/transfer.ts         | 66 +++++++++++++++++
 .../costcenter/src/pages/billing/index.tsx    |  2 +-
 .../providers/costcenter/src/types/billing.ts | 23 +++++-
 16 files changed, 195 insertions(+), 94 deletions(-)
 create mode 100644 frontend/providers/costcenter/public/locales/en/applist.json
 create mode 100644 frontend/providers/costcenter/public/locales/zh/applist.json
 create mode 100644 frontend/providers/costcenter/src/pages/api/billing/transfer.ts

diff --git a/frontend/providers/costcenter/public/locales/en/applist.json b/frontend/providers/costcenter/public/locales/en/applist.json
new file mode 100644
index 00000000000..0843945ad4f
--- /dev/null
+++ b/frontend/providers/costcenter/public/locales/en/applist.json
@@ -0,0 +1,10 @@
+{
+	"TERMINAL": "TERMINAL",
+	"JOB":"JOB",
+	"OTHER": "OTHER",
+	"OBJECT-STORAGE": "OBJECT-STORAGE",
+	"CLOUD-VM":"CLOUD-VM",
+	"DB": "DATABASE",
+	"APP": "APP",
+	"All APP": "ALL"
+}
\ No newline at end of file
diff --git a/frontend/providers/costcenter/public/locales/en/common.json b/frontend/providers/costcenter/public/locales/en/common.json
index fcccf28f1ff..e1ff1f8ab09 100644
--- a/frontend/providers/costcenter/public/locales/en/common.json
+++ b/frontend/providers/costcenter/public/locales/en/common.json
@@ -158,9 +158,11 @@
   "Remaining Quota": "remaining",
   "Receipts And Disbursements": "Receipts And Disbursements",
   "APP Name": "App name",
-  "All APP": "all",
   "APP Type": "App type",
   "Details": "Details",
+	"Transfer Type":"Transfer Type",
   "Handle": "Handle",
-  "currencyUnit": "Currency Unit"
+  "currencyUnit": "Currency Unit",
+	"Trader ID":"Trader"
+
 }
\ No newline at end of file
diff --git a/frontend/providers/costcenter/public/locales/zh/applist.json b/frontend/providers/costcenter/public/locales/zh/applist.json
new file mode 100644
index 00000000000..df42daf87e9
--- /dev/null
+++ b/frontend/providers/costcenter/public/locales/zh/applist.json
@@ -0,0 +1,10 @@
+{
+	"TERMINAL": "终端",
+	"JOB":"任务",
+	"OTHER": "其他",
+	"OBJECT-STORAGE": "对象存储",
+	"CLOUD-VM":"云主机",
+	"DB": "数据库",
+	"APP": "应用",
+	"All APP": "所有应用"
+}
\ No newline at end of file
diff --git a/frontend/providers/costcenter/public/locales/zh/common.json b/frontend/providers/costcenter/public/locales/zh/common.json
index a9a63a0c5b7..bfbf3249587 100644
--- a/frontend/providers/costcenter/public/locales/zh/common.json
+++ b/frontend/providers/costcenter/public/locales/zh/common.json
@@ -158,9 +158,11 @@
   "Remaining Quota": "剩余",
   "Receipts And Disbursements": "收支",
   "APP Name": "应用名称",
-  "All APP": "所有应用",
+
   "APP Type": "应用类型",
+	"Transfer Type": "转账类型",
   "Details": "详情",
   "Handle": "操作",
-  "currencyUnit": "金额单位"
+  "currencyUnit": "金额单位",
+	"Trader ID": "交易用户"
 }
\ No newline at end of file
diff --git a/frontend/providers/costcenter/src/components/billing/AppMenu.tsx b/frontend/providers/costcenter/src/components/billing/AppMenu.tsx
index 731fa097967..fab26906ec2 100644
--- a/frontend/providers/costcenter/src/components/billing/AppMenu.tsx
+++ b/frontend/providers/costcenter/src/components/billing/AppMenu.tsx
@@ -30,7 +30,8 @@ export default function AppMenu({
   const { setAppType } = useBillingStore();
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { t } = useTranslation();
-  const appList: string[] = [t('All APP'), ...(data?.data?.appList || [])];
+  const { t: appT } = useTranslation('applist');
+  const appList: string[] = ['All APP', ...(data?.data?.appList || [])].map((v) => appT(v));
   return (
     <Flex align={'center'} ml="28px" {...props}>
       <Popover onClose={onClose} onOpen={onOpen} isOpen={isOpen}>
@@ -91,9 +92,6 @@ export default function AppMenu({
                 setAppType(idx === 0 ? '' : appList[idx]);
                 onClose();
               }}
-              // _hover={{
-              //   bg: ''
-              // }}
             >
               {v}
             </Button>
diff --git a/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx b/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx
index 3cc7c188532..0c99d2dc3a9 100644
--- a/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx
+++ b/frontend/providers/costcenter/src/components/billing/SwitchPage.tsx
@@ -47,7 +47,9 @@ export default function SwitchPage({
   return (
     <Flex minW="370px" h="32px" align={'center'} mt={'20px'} {...props}>
       <Text>{t('Total')}:</Text>
-      <Flex w="40px">{totalItem}</Flex>
+      <Flex minW="40px" mr="5px">
+        {totalItem}
+      </Flex>
       <Flex gap={'8px'}>
         <Button
           {...switchStyle}
diff --git a/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx b/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx
index dabef1f5e6d..f41a2e6a48a 100644
--- a/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx
+++ b/frontend/providers/costcenter/src/components/billing/TransferTabPnel.tsx
@@ -1,6 +1,14 @@
 import useOverviewStore from '@/stores/overview';
 import { useContext, useEffect, useState } from 'react';
-import { BillingData, BillingSpec, BillingType } from '@/types';
+import {
+  ApiResp,
+  BillingData,
+  BillingSpec,
+  BillingType,
+  TransferBilling,
+  TransferBillingData,
+  TransferType
+} from '@/types';
 import { useQuery } from '@tanstack/react-query';
 import { formatISO } from 'date-fns';
 import request from '@/service/request';
@@ -17,7 +25,7 @@ import useBillingStore from '@/stores/billing';
 export default function TransferTabPanel() {
   const startTime = useOverviewStore((state) => state.startTime);
   const endTime = useOverviewStore((state) => state.endTime);
-  const [selectType, setType] = useState<BillingType>(BillingType.ALL);
+  const [selectType, setType] = useState<TransferType>(TransferType.ALL);
   const [orderID, setOrderID] = useState('');
   const [totalPage, setTotalPage] = useState(1);
   const [currentPage, setcurrentPage] = useState(1);
@@ -28,7 +36,7 @@ export default function TransferTabPanel() {
     setcurrentPage(1);
   }, [startTime, endTime, selectType, namespace]);
   const { data, isFetching, isSuccess } = useQuery(
-    ['billing', { currentPage, startTime, endTime, orderID, selectType, namespace }],
+    ['billing', { currentPage, startTime, endTime, orderID, selectType, namespace, pageSize }],
     () => {
       const spec = {
         page: currentPage,
@@ -38,25 +46,23 @@ export default function TransferTabPanel() {
         // startTime,
         endTime: formatISO(endTime, { representation: 'complete' }),
         // endTime,
-        namespace,
+        // orderID
         orderID
       };
-      return request<any, { data: BillingData }, { spec: BillingSpec }>('/api/billing', {
+      return request<any, ApiResp<TransferBillingData>>('/api/billing/transfer', {
         method: 'POST',
-        data: {
-          spec
-        }
+        data: spec
       });
     },
     {
       onSuccess(data) {
-        const totalPage = data.data.status.pageLength;
+        const totalPage = data.data?.totalPage || 0;
         if (totalPage === 0) {
           // 搜索时的bug
           setTotalPage(1);
           setTotalItem(1);
         } else {
-          setTotalItem(data.data.status.totalCount);
+          setTotalItem(data.data?.total || 0);
           setTotalPage(totalPage);
         }
         if (totalPage < currentPage) setcurrentPage(1);
@@ -65,7 +71,7 @@ export default function TransferTabPanel() {
     }
   );
   const { t } = useTranslation();
-  const tableResult = data?.data?.status?.item || [];
+  const tableResult = data?.data?.transfers || [];
   return (
     <TabPanel p="0" flex={1} display={'flex'} flexDirection={'column'}>
       <Flex alignItems={'center'} flexWrap={'wrap'}>
@@ -79,22 +85,13 @@ export default function TransferTabPanel() {
           <Text fontSize={'12px'} mr={'12px'} width={['60px', '60px', 'auto', 'auto']}>
             {t('Type')}
           </Text>
-          <TypeMenu
-            selectType={selectType}
-            setType={setType}
-            isDisabled={isFetching}
-            optional={[BillingType.ALL, BillingType.RECEIVE, BillingType.TRANSFER]}
-          />
+          <TypeMenu selectType={selectType} setType={setType} isDisabled={isFetching} />
         </Flex>
         <SearchBox isDisabled={isFetching} setOrderID={setOrderID} />
       </Flex>
       {isSuccess && tableResult.length > 0 ? (
         <>
-          <TransferBillingTable
-            data={tableResult.filter((x) =>
-              [BillingType.RECEIVE, BillingType.TRANSFER].includes(x.type)
-            )}
-          />
+          <TransferBillingTable data={tableResult} />
           <Flex justifyContent={'flex-end'}>
             <SwitchPage
               totalPage={totalPage}
diff --git a/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx b/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx
index 6034b4d7143..69a320cdd67 100644
--- a/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx
+++ b/frontend/providers/costcenter/src/components/billing/TypeMenu.tsx
@@ -1,5 +1,5 @@
-import { LIST_TYPE } from '@/constants/billing';
-import { BillingType } from '@/types';
+import { TRANSFER_LIST_TYPE } from '@/constants/billing';
+import { TransferType } from '@/types';
 import { Button, Popover, PopoverContent, PopoverTrigger, useDisclosure } from '@chakra-ui/react';
 import { useTranslation } from 'next-i18next';
 import { Dispatch, SetStateAction } from 'react';
@@ -7,13 +7,11 @@ import { Dispatch, SetStateAction } from 'react';
 export default function TypeMenu({
   isDisabled,
   selectType,
-  setType,
-  optional
+  setType
 }: {
-  optional: BillingType[];
   isDisabled: boolean;
-  selectType: BillingType;
-  setType: Dispatch<SetStateAction<BillingType>>;
+  selectType: TransferType;
+  setType: Dispatch<SetStateAction<TransferType>>;
 }) {
   const { isOpen, onClose, onOpen } = useDisclosure();
   const { t } = useTranslation();
@@ -41,7 +39,7 @@ export default function TypeMenu({
           }}
           borderRadius={'2px'}
         >
-          {t(LIST_TYPE[selectType + 1].title)}
+          {t(TRANSFER_LIST_TYPE[selectType].title)}
         </Button>
       </PopoverTrigger>
       <PopoverContent
@@ -51,7 +49,7 @@ export default function TypeMenu({
         shadow={'0px 0px 1px 0px #798D9F40, 0px 2px 4px 0px #A1A7B340'}
         border={'none'}
       >
-        {LIST_TYPE.filter((x) => optional.includes(x.value)).map((v) => (
+        {TRANSFER_LIST_TYPE.map((v) => (
           <Button
             variant={'white-bg-icon'}
             key={v.value}
diff --git a/frontend/providers/costcenter/src/components/billing/billingTable.tsx b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
index 3da35344428..d21cd72c361 100644
--- a/frontend/providers/costcenter/src/components/billing/billingTable.tsx
+++ b/frontend/providers/costcenter/src/components/billing/billingTable.tsx
@@ -1,7 +1,5 @@
 import { TableHeaderID } from '@/constants/billing';
-import { BillingItem, BillingType, RechargeBillingItem } from '@/types/billing';
-import lineDown from '@/assert/lineDown.svg';
-import lineUp from '@/assert/lineUp.svg';
+import { BillingItem, BillingType, RechargeBillingItem, TransferBilling } from '@/types/billing';
 import {
   Box,
   Flex,
@@ -32,7 +30,9 @@ import {
 } from '@tanstack/react-table';
 import { useMemo } from 'react';
 import Amount from '@/components/billing/AmountTableHeader';
-
+import useSessionStore from '@/stores/session';
+import lineUp from '@/assert/lineUp.svg';
+import lineDown from '@/assert/lineDown.svg';
 export function CommonBillingTable({
   data,
   isOverview = false,
@@ -172,13 +172,16 @@ export function CommonBillingTable({
   return <BaseTable table={table} {...styles} />;
 }
 
-export function TransferBillingTable({ data }: { data: BillingItem[] }) {
+export function TransferBillingTable({ data }: { data: TransferBilling[] }) {
   const { t } = useTranslation();
   const currency = useEnvStore((s) => s.currency);
+  const { session } = useSessionStore();
+  const user = session.user;
+
   const columns = useMemo(() => {
-    const columnHelper = createColumnHelper<BillingItem>();
+    const columnHelper = createColumnHelper<TransferBilling>();
     const customTh = (needCurrency?: boolean) =>
-      function CustomTh({ header }: HeaderContext<BillingItem, unknown>) {
+      function CustomTh({ header }: HeaderContext<TransferBilling, unknown>) {
         return (
           <Flex display={'flex'} alignItems={'center'}>
             <Text mr="4px">{t(header.id)}</Text>
@@ -191,25 +194,21 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
         );
       };
     return [
-      columnHelper.accessor((row) => row.order_id, {
+      columnHelper.accessor((row) => row.ID, {
         header: customTh(),
         id: TableHeaderID.OrderNumber,
-        enablePinning: true,
         cell(props) {
           const item = props.row.original;
           return (
             <Box>
               <Text color={'#24282C'} fontSize={'12px'}>
-                {item.order_id}
-              </Text>
-              <Text fontSize={'10px'} color={'#5A646E'}>
-                {item.namespace}
+                {item.ID}
               </Text>
             </Box>
           );
         }
       }),
-      columnHelper.accessor((row) => row.time, {
+      columnHelper.accessor((row) => row.CreatedAt, {
         header: customTh(),
         id: TableHeaderID.TransactionTime,
         enablePinning: true,
@@ -217,18 +216,29 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
           return format(parseISO(props.cell.getValue()), 'MM-dd HH:mm');
         }
       }),
-      columnHelper.accessor((row) => row.appType, {
-        id: TableHeaderID.APPType,
+      columnHelper.accessor((row) => [row.FromUserID, row.ToUserID], {
         header: customTh(),
+        id: TableHeaderID.TraderID,
         cell(props) {
           const item = props.row.original;
+          const traderId = item.ToUserID === user.id ? item.FromUserID : item.ToUserID;
+          return traderId;
+        }
+      }),
+      columnHelper.accessor((row) => [row.ToUserID, row.FromUserID], {
+        id: TableHeaderID.TransferType,
+        header: customTh(),
+        cell(props) {
+          const item = props.row.original;
+          const billingType =
+            item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
           return (
             <Flex align={'center'} width={'full'} height={'full'}>
               <Flex
                 px={'12px'}
                 py={'4px'}
                 minW={'max-content'}
-                {...(item.type === BillingType.RECEIVE
+                {...(billingType === BillingType.RECEIVE
                   ? {
                       bg: '#E6F6F6',
                       color: '#00A9A6'
@@ -242,43 +252,31 @@ export function TransferBillingTable({ data }: { data: BillingItem[] }) {
                 justify={'space-evenly'}
               >
                 <Img
-                  src={item.type === BillingType.TRANSFER ? lineDown.src : lineUp.src}
+                  src={billingType === BillingType.TRANSFER ? lineDown.src : lineUp.src}
                   w="13.14px"
                   mr={'6px'}
                 ></Img>
-                <Text>{item.type === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
+                <Text>{billingType === BillingType.RECEIVE ? t('Recipient') : t('Transfer')}</Text>
               </Flex>
             </Flex>
           );
         }
       }),
-      columnHelper.accessor((row) => row.amount, {
+      columnHelper.accessor((row) => row.Amount, {
         header: customTh(true),
         id: TableHeaderID.TotalAmount,
         cell(props) {
-          const original = props.row.original;
-          return <Amount total={true} type={original.type} amount={props.cell.getValue()} />;
-        }
-      }),
-      columnHelper.accessor((row) => row.namespace, {
-        id: TableHeaderID.Namespace,
-        header: customTh(),
-        cell(props) {
-          const item = props.cell.getValue();
-          return <span>{item}</span>;
+          const item = props.row.original;
+          const billingType =
+            item.ToUserID === user.id ? BillingType.RECEIVE : BillingType.TRANSFER;
+          return <Amount total={true} type={billingType} amount={props.cell.getValue()} />;
         }
       })
     ];
-  }, [useEnvStore.getState().gpuEnabled, t, currency]);
+  }, [useEnvStore.getState().gpuEnabled, t, currency, user]);
 
   const table = useReactTable({
     data,
-    state: {
-      columnPinning: {
-        left: [TableHeaderID.OrderNumber],
-        right: [TableHeaderID.Namespace]
-      }
-    },
     columns,
     getCoreRowModel: getCoreRowModel()
   });
diff --git a/frontend/providers/costcenter/src/constants/billing.ts b/frontend/providers/costcenter/src/constants/billing.ts
index 3d0b0245f39..b0508bc7a06 100644
--- a/frontend/providers/costcenter/src/constants/billing.ts
+++ b/frontend/providers/costcenter/src/constants/billing.ts
@@ -1,4 +1,4 @@
-import { BillingType } from '@/types';
+import { BillingType, TransferType } from '@/types';
 
 export const BasicTableHeaders = ['Order Number', 'Transaction Time', 'APP Type'] as const;
 export const InvoiceTableHeaders = ['Order Number', 'Transaction Time', 'True Amount'] as const;
@@ -19,6 +19,11 @@ export const LIST_TYPE: { title: string; value: BillingType }[] = [
   { title: 'Recipient', value: BillingType.RECEIVE },
   { title: 'Transfer', value: BillingType.TRANSFER }
 ];
+export const TRANSFER_LIST_TYPE: { title: string; value: TransferType }[] = [
+  { title: 'All', value: TransferType.ALL },
+  { title: 'Recipient', value: TransferType.RECEIVE },
+  { title: 'Transfer', value: TransferType.TRANSFER }
+];
 export enum TableHeaderID {
   'APPName' = 'APP Name',
   'OrderNumber' = 'Order Number',
@@ -33,5 +38,7 @@ export enum TableHeaderID {
   'Network' = 'Network',
   'TotalAmount' = 'Total Amount',
   'Handle' = 'Handle',
-  'Namespace' = 'Namespace'
+  'Namespace' = 'Namespace',
+  'TransferType' = 'Transfer Type',
+  'TraderID' = 'Trader ID'
 }
diff --git a/frontend/providers/costcenter/src/layout/index.tsx b/frontend/providers/costcenter/src/layout/index.tsx
index fa39d0c2a35..cd3a6a5bca6 100644
--- a/frontend/providers/costcenter/src/layout/index.tsx
+++ b/frontend/providers/costcenter/src/layout/index.tsx
@@ -35,10 +35,9 @@ export default function Layout({ children }: any) {
       w="100vw"
       h="100vh"
       position="relative"
-      background="frostyNightfall.200"
+      background="#EAEBF0"
       pt={'4px'}
       pb="10px"
-      backdropFilter="blur(150px)"
       alignItems={'center'}
       justifyContent={'center'}
     >
diff --git a/frontend/providers/costcenter/src/pages/api/account/transfer.ts b/frontend/providers/costcenter/src/pages/api/account/transfer.ts
index dd6479d495f..1e035d34ca9 100644
--- a/frontend/providers/costcenter/src/pages/api/account/transfer.ts
+++ b/frontend/providers/costcenter/src/pages/api/account/transfer.ts
@@ -1,13 +1,5 @@
-import { generateTransferCrd } from '@/constants/payment';
 import { authSession } from '@/service/backend/auth';
-import {
-  ApplyYaml,
-  GetUserDefaultNameSpace,
-  watchClusterObject
-} from '@/service/backend/kubernetes';
 import { jsonRes } from '@/service/backend/response';
-import { TransferState } from '@/types/Transfer';
-import { getTime } from 'date-fns';
 import type { NextApiRequest, NextApiResponse } from 'next';
 
 export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
@@ -15,7 +7,7 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
     if (!global.AppConfig.costCenter.transferEnabled) {
       throw new Error('transfer is not enabled');
     }
-
+    // console.log(global)
     const { amount, to: toUser } = req.body;
     const kc = await authSession(req.headers);
 
@@ -44,7 +36,6 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
         'Content-Type': 'application/json'
       }
     });
-
     if (!response.ok || response.status !== 200) {
       return jsonRes(resp, {
         code: 409,
diff --git a/frontend/providers/costcenter/src/pages/api/billing/index.ts b/frontend/providers/costcenter/src/pages/api/billing/index.ts
index 9f677dca83e..286cce25ad9 100644
--- a/frontend/providers/costcenter/src/pages/api/billing/index.ts
+++ b/frontend/providers/costcenter/src/pages/api/billing/index.ts
@@ -97,7 +97,7 @@ export default async function handler(req: NextApiRequest, resp: NextApiResponse
       });
     }
   } catch (error) {
-    console.log(error);
+    // console.log(error);
     jsonRes(resp, { code: 500, message: 'get billing error' });
   }
 }
diff --git a/frontend/providers/costcenter/src/pages/api/billing/transfer.ts b/frontend/providers/costcenter/src/pages/api/billing/transfer.ts
new file mode 100644
index 00000000000..2b5db90e26a
--- /dev/null
+++ b/frontend/providers/costcenter/src/pages/api/billing/transfer.ts
@@ -0,0 +1,66 @@
+import { authSession } from '@/service/backend/auth';
+import { NextApiRequest, NextApiResponse } from 'next';
+import { jsonRes } from '@/service/backend/response';
+import { GetUserDefaultNameSpace } from '@/service/backend/kubernetes';
+import { BillingData, BillingSpec, RechargeBillingData, TransferType } from '@/types';
+
+export default async function handler(req: NextApiRequest, resp: NextApiResponse) {
+  try {
+    const kc = await authSession(req.headers);
+    // get user account payment amount
+    const user = kc.getCurrentUser();
+    if (user === null) {
+      return jsonRes(resp, { code: 403, message: 'user null' });
+    }
+    const {
+      endTime,
+      startTime,
+      type = 0,
+      orderID
+    } = req.body as {
+      endTime?: Date;
+      orderID?: string;
+      startTime?: Date;
+      type?: TransferType;
+    };
+    if (!endTime)
+      return jsonRes(resp, {
+        code: 400,
+        message: 'endTime is invalid'
+      });
+    if (!startTime)
+      return jsonRes(resp, {
+        code: 400,
+        message: 'endTime is invalid'
+      });
+    const data = {
+      kubeConfig: kc.exportConfig(),
+      owner: user.name,
+      startTime,
+      transferID: orderID,
+      endTime,
+      type
+    };
+
+    const url =
+      global.AppConfig.costCenter.components.accountService.url + '/account/v1alpha1/get-transfer';
+    const response = await fetch(url, {
+      method: 'POST',
+      body: JSON.stringify(data)
+    });
+    if (!response.clone().ok)
+      return jsonRes(resp, {
+        data: {
+          transfer: [],
+          totalPage: 0,
+          pageSize: 0
+        }
+      });
+    const res = await response.clone().json();
+    return jsonRes(resp, {
+      data: res.data
+    });
+  } catch (error) {
+    jsonRes(resp, { code: 500, message: 'get billing error' });
+  }
+}
diff --git a/frontend/providers/costcenter/src/pages/billing/index.tsx b/frontend/providers/costcenter/src/pages/billing/index.tsx
index c7d14c4dcbe..adb38dfce97 100644
--- a/frontend/providers/costcenter/src/pages/billing/index.tsx
+++ b/frontend/providers/costcenter/src/pages/billing/index.tsx
@@ -60,7 +60,7 @@ export default Billing;
 export async function getServerSideProps({ locale }: { locale: string }) {
   return {
     props: {
-      ...(await serverSideTranslations(locale, undefined, null, ['zh', 'en']))
+      ...(await serverSideTranslations(locale, ['common', 'applist'], undefined, ['zh', 'en']))
     }
   };
 }
diff --git a/frontend/providers/costcenter/src/types/billing.ts b/frontend/providers/costcenter/src/types/billing.ts
index 876522970c1..73d75104446 100644
--- a/frontend/providers/costcenter/src/types/billing.ts
+++ b/frontend/providers/costcenter/src/types/billing.ts
@@ -5,7 +5,11 @@ export enum BillingType {
   RECEIVE,
   TRANSFER
 }
-
+export enum TransferType {
+  ALL,
+  RECEIVE,
+  TRANSFER
+}
 export type BillingSpec =
   | {
       page: number; //给定结果数据的page页
@@ -85,3 +89,20 @@ export type RechargeBillingItem = {
 export type RechargeBillingData = {
   payment: RechargeBillingItem[];
 };
+
+export type TransferBillingData = {
+  transfers: TransferBilling[];
+  totalPage: number;
+  total: number;
+};
+export type TransferBilling = {
+  UID: string;
+  FromUserUID: string;
+  ToUserUID: string;
+  Amount: number;
+  Remark: string;
+  CreatedAt: string;
+  ID: string;
+  FromUserID: string;
+  ToUserID: string;
+};