Invoice (#2435)

* feat: invoice (#2293)

* feat: default voice header

* add i18n

* refactor: 优化代码

* feat: 用户开票

* refactor: 代码优化&&样式联调 (#2384)

* Feat: invoice upload (#2424)

* refactor: 验收问题&&样式调整

* feat: 文件上传

* 小调整

* perf: invoice ui

---------

Co-authored-by: papapatrick <109422393+Patrickill@users.noreply.github.com>

projects/app/src/pages/account/components/bill/BillAndInvoice.tsx

@@ -0,0 +1,58 @@
+import { Box, Button, Flex } from '@chakra-ui/react';
+import FillRowTabs from '@fastgpt/web/components/common/Tabs/FillRowTabs';
+import dynamic from 'next/dynamic';
+import { useState } from 'react';
+import { useTranslation } from 'next-i18next';
+import ApplyInvoiceModal from './ApplyInvoiceModal';
+
+const TabEnum = {
+  bill: 'bill',
+  invoice: 'invoice',
+  invoiceHeader: 'voiceHeader'
+};
+const BillTable = dynamic(() => import('./BillTable'));
+const InvoiceHeaderForm = dynamic(() => import('./InvoiceHeaderForm'));
+const InvoiceTable = dynamic(() => import('./InvoiceTable'));
+const BillAndInvoice = () => {
+  const [currentTab, setCurrentTab] = useState(TabEnum.bill);
+  const [isOpenInvoiceModal, setIsOpenInvoiceModal] = useState(false);
+
+  const { t } = useTranslation();
+  return (
+    <>
+      <Box p={['1rem', '2rem']}>
+        <Flex justifyContent={'space-between'} alignItems={'center'} pb={'0.75rem'}>
+          <FillRowTabs
+            list={[
+              { label: t('common:support.wallet.bill_tag.bill'), value: TabEnum.bill },
+              { label: t('common:support.wallet.bill_tag.invoice'), value: TabEnum.invoice },
+              {
+                label: t('common:support.wallet.bill_tag.default_header'),
+                value: TabEnum.invoiceHeader
+              }
+            ]}
+            value={currentTab}
+            onChange={setCurrentTab}
+          ></FillRowTabs>
+          {currentTab !== TabEnum.invoiceHeader && (
+            <Button variant={'primary'} px="0" onClick={() => setIsOpenInvoiceModal(true)}>
+              <Flex alignItems={'center'} px={'20px'}>
+                <Box px={'1.25rem'} py={'0.5rem'}>
+                  {t('common:support.wallet.invoicing')}
+                </Box>
+              </Flex>
+            </Button>
+          )}
+        </Flex>
+        <Box h={'100%'}>
+          {currentTab === TabEnum.bill && <BillTable />}
+          {currentTab === TabEnum.invoice && <InvoiceTable />}
+          {currentTab === TabEnum.invoiceHeader && <InvoiceHeaderForm />}
+        </Box>
+        {isOpenInvoiceModal && <ApplyInvoiceModal onClose={() => setIsOpenInvoiceModal(false)} />}
+      </Box>
+    </>
+  );
+};
+
+export default BillAndInvoice;