forked from labring/sealos
-
Notifications
You must be signed in to change notification settings - Fork 0
/
billingTable.tsx
104 lines (104 loc) · 4.17 KB
/
billingTable.tsx
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
import { TableHeaders } from '@/constants/billing';
import { BillingItem } from '@/types/billing';
import lineDown from '@/assert/lineDown.svg';
import lineUp from '@/assert/lineUp.svg';
import { Flex, Img, Table, TableContainer, Tbody, Td, Text, Th, Thead, Tr } from '@chakra-ui/react';
import { format, parseISO } from 'date-fns';
import { formatMoney } from '@/utils/format';
import { useTranslation } from 'next-i18next';
import useEnvStore from '@/stores/env';
import CurrencySymbol from '../CurrencySymbol';
export function BillingTable({ data }: { data: BillingItem[] }) {
const { t } = useTranslation();
const gpuEnabled = useEnvStore((state) => state.gpuEnabled);
const currency = useEnvStore((s) => s.currency);
return (
<TableContainer w="100%" mt="0px">
<Table variant="simple">
<Thead>
<Tr>
{[...TableHeaders, ...(gpuEnabled ? ['Gpu'] : []), 'Total Amount'].map((item) => (
<Th
key={item}
bg={'#F1F4F6'}
_before={{
content: `""`,
display: 'block',
borderTopLeftRadius: '10px',
borderTopRightRadius: '10px',
background: '#F1F4F6'
}}
>
<Flex display={'flex'} alignItems={'center'}>
<Text mr="4px">{t(item)}</Text>
{['CPU', 'Gpu', 'Memory', 'Storage', 'Network', 'Total Amount'].includes(
item
) && <CurrencySymbol type={currency} />}
</Flex>
</Th>
))}
</Tr>
</Thead>
<Tbody>
{data
?.filter((item) => [0, 1, 2, 3].includes(item.type))
.map((item) => {
return (
<Tr key={item.order_id} fontSize={'12px'}>
<Td>{item.order_id}</Td>
<Td>{format(parseISO(item.time), 'MM-dd HH:mm')}</Td>
<Td>
{
// 0:扣费 1:充值 2:收款 3:转账
}
<Flex align={'center'} width={'full'} height={'full'}>
<Flex
px={'12px'}
py={'4px'}
minW={'max-content'}
{...([1, 2].includes(item.type)
? {
bg: '#E6F6F6',
color: '#00A9A6'
}
: {
bg: '#EBF7FD',
color: '#0884DD'
})}
borderRadius="24px"
align={'center'}
justify={'space-evenly'}
>
<Img
src={[0, 3].includes(item.type) ? lineDown.src : lineUp.src}
w="13.14px"
mr={'6px'}
></Img>
<Text>
{item.type === 0
? t('Deduction')
: item.type === 1
? t('Charge')
: item.type === 2
? t('Recipient')
: t('Transfer')}
</Text>
</Flex>
</Flex>
</Td>
<Td>{!item.type ? <span>{formatMoney(item.costs?.cpu || 0)}</span> : '-'}</Td>
<Td>{!item.type ? <span>{formatMoney(item.costs?.memory || 0)}</span> : '-'}</Td>
<Td>{!item.type ? <span>{formatMoney(item.costs?.storage || 0)}</span> : '-'}</Td>
<Td>{!item.type ? <span>{formatMoney(item.costs?.network || 0)}</span> : '-'}</Td>
{gpuEnabled && (
<Td>{!item.type ? <span>{formatMoney(item.costs?.gpu || 0)}</span> : '-'}</Td>
)}
<Td>{<span>{formatMoney(item.amount)}</span>}</Td>
</Tr>
);
})}
</Tbody>
</Table>
</TableContainer>
);
}