[REFACTORING]: deleting the duplicated code

v6y-apps/front-bo/src/commons/components/VitalityBaseTable.tsx

@@ -0,0 +1,13 @@
+import { Table } from 'antd';
+import { AnyObject } from 'antd/es/_util/type';
+import React from 'react';
+
+const VitalityTable = ({
+    dataSource,
+    columns,
+}: {
+    dataSource: AnyObject[];
+    columns: AnyObject[];
+}) => <Table dataSource={dataSource} columns={columns} rowKey="key" />;
+
+export default VitalityTable;

v6y-apps/front-bo/src/commons/components/VitalityDetailsView.tsx

@@ -1,5 +1,6 @@
 import { HttpError } from '@refinedev/core';
-import { Descriptions, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Descriptions } from 'antd';
 import * as React from 'react';
 import { ReactNode } from 'react';
 
@@ -20,7 +21,7 @@ const VitalityDetailsView = ({
         <Descriptions bordered size="middle" column={1}>
             {Object.keys(details).map((itemKey, index) => (
                 <Descriptions.Item key={`${itemKey}-${index}`} label={itemKey}>
-                    <Typography.Text>{details[itemKey]}</Typography.Text>
+                    <VitalityText text={details[itemKey] as string} />
                 </Descriptions.Item>
             ))}
         </Descriptions>

v6y-apps/front-bo/src/commons/components/VitalityEmptyView.tsx

@@ -1,4 +1,6 @@
-import { Empty, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Empty } from 'antd';
+import * as React from 'react';
 
 import { useTranslation } from '../../infrastructure/adapters/translation/TranslationAdapter';
 
@@ -7,7 +9,7 @@ const VitalityEmptyView = ({ message }: { message?: string }) => {
     return (
         <Empty
             description={
-                <Typography.Text>{message || translate('pages.error.empty-data')}</Typography.Text>
+                <VitalityText text={message || translate('pages.error.empty-data') || ''} />
             }
         />
     );

v6y-apps/front-bo/src/commons/components/VitalityLinks.tsx

@@ -1,6 +1,8 @@
 import { LinkType } from '@v6y/core-logic';
-import { Col, Row, Typography } from 'antd';
+import { VitalityText } from '@v6y/shared-ui';
+import { Col, Row } from 'antd';
 import Link from 'next/link';
+import * as React from 'react';
 
 type ContentJustify =
     | 'end'
@@ -34,7 +36,7 @@ const VitalityLinks = ({ links, align }: { links: LinkType[]; align: ContentJust
                             rel="noopener noreferrer"
                             style={{ textDecoration: 'underline' }}
                         >
-                            <Typography.Text>{link.label}</Typography.Text>
+                            <VitalityText text={link.label} />
                         </Link>
                     </Col>
                 );

v6y-apps/front-bo/src/commons/components/VitalityTable.tsx

@@ -1,12 +1,29 @@
-import { Table } from 'antd';
-import { AnyObject } from 'antd/es/_util/type';
-
-const VitalityTable = ({
-    dataSource,
-    columns,
-}: {
-    dataSource: AnyObject[];
-    columns: AnyObject[];
-}) => <Table dataSource={dataSource} columns={columns} rowKey="key" />;
+import React from 'react';
+
+import { buildCommonTableColumns, buildCommonTableDataSource } from '../config/VitalityTableConfig';
+import VitalityBaseTable from './VitalityBaseTable';
+
+interface VitalityTableProps {
+    dataSource: unknown[];
+    columnKeys: string[];
+    columnOptions: {
+        enableEdit: boolean;
+        enableShow: boolean;
+        enableDelete: boolean;
+        deleteMetaQuery?: {
+            gqlMutation: string;
+            operation: string;
+        };
+    };
+}
+
+const VitalityTable: React.FC<VitalityTableProps> = ({ dataSource, columnKeys, columnOptions }) => {
+    return (
+        <VitalityBaseTable
+            dataSource={buildCommonTableDataSource(dataSource)}
+            columns={buildCommonTableColumns(dataSource, columnKeys, columnOptions)}
+        />
+    );
+};
 
 export default VitalityTable;

v6y-apps/front-bo/src/commons/components/layout/VitalityPageHeader.tsx

@@ -2,18 +2,8 @@
 
 import { DownOutlined } from '@ant-design/icons';
 import { useGetIdentity } from '@refinedev/core';
-import {
-    Layout as AntdLayout,
-    Avatar,
-    Button,
-    Dropdown,
-    Space,
-    Switch,
-    Typography,
-    theme,
-} from 'antd';
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-expect-error
+import { VitalityText } from '@v6y/shared-ui';
+import { Layout as AntdLayout, Avatar, Button, Dropdown, Space, Switch, theme } from 'antd';
 import Cookie from 'js-cookie';
 import * as React from 'react';
 import { useContext } from 'react';
@@ -77,9 +67,7 @@ export const VitalityPageHeader = () => {
                 <Button type="text">
                     <Space>
                         <Avatar size={16} src={`/images/flags/${currentLocale}.svg`} />
-                        <Typography.Text>
-                            {currentLocale === 'en' ? 'English' : 'French'}
-                        </Typography.Text>
+                        <VitalityText text={currentLocale === 'en' ? 'English' : 'French'} />
                         <DownOutlined />
                     </Space>
                 </Button>
@@ -96,7 +84,7 @@ export const VitalityPageHeader = () => {
                 />
                 {(user?.name || user?.avatar) && (
                     <Space style={{ marginLeft: '8px' }} size="middle">
-                        {user?.name && <Typography.Text strong>{user.name}</Typography.Text>}
+                        {user?.name && <VitalityText strong text={user.name} />}
                         {user?.avatar && <Avatar src={user?.avatar} alt={user?.name} />}
                     </Space>
                 )}

v6y-apps/front-bo/src/commons/components/layout/VitalityPageLayout.tsx

@@ -1,7 +1,7 @@
 'use client';
 
 import { ThemedLayoutV2 } from '@refinedev/antd';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 import { ReactNode } from 'react';
 
@@ -12,14 +12,13 @@ const VitalityPageLayout = ({ children }: { children: ReactNode }) => {
     return (
         <ThemedLayoutV2
             Title={() => (
-                <Typography.Title
+                <VitalityTitle
                     level={1}
                     style={{
                         marginTop: '1rem',
                     }}
-                >
-                    V6Y
-                </Typography.Title>
+                    title="V6Y"
+                />
             )}
             Header={() => <VitalityPageHeader />}
             Footer={() => <VitalityPageFooter />}

v6y-apps/front-bo/src/features/v6y-accounts/components/VitalityAccountCreateView.tsx

@@ -1,7 +1,8 @@
 'use client';
 
 import { ApplicationType } from '@v6y/core-logic/src/types/ApplicationType';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
+import * as React from 'react';
 import { useEffect, useState } from 'react';
 
 import GetApplicationListByPageAndParams from '../../../commons/apis/getApplicationListByPageAndParams';
@@ -30,11 +31,7 @@ export default function VitalityAccountCreateView() {
 
     return (
         <RefineSelectWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-accounts.titles.create')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-accounts.titles.create" />}
             createOptions={{
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
                 // @ts-expect-error

v6y-apps/front-bo/src/features/v6y-accounts/components/VitalityAccountDetailsView.tsx

@@ -1,7 +1,7 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { AccountType } from '@v6y/core-logic';
 import Matcher from '@v6y/core-logic/src/core/Matcher';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
@@ -42,11 +42,7 @@ export default function VitalityAccountDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-account.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-account.titles.show" />}
             queryOptions={{
                 resource: 'getAccountDetailsByParams',
                 query: GetAccountDetailsByParams,

v6y-apps/front-bo/src/features/v6y-accounts/components/VitalityAccountEditView.tsx

@@ -2,7 +2,7 @@
 
 import { useParsed } from '@refinedev/core';
 import { ApplicationType } from '@v6y/core-logic/src/types/ApplicationType';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import { useEffect, useState } from 'react';
 import React from 'react';
 
@@ -35,11 +35,7 @@ export default function VitalityAccountEditView() {
 
     return (
         <RefineSelectWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-accounts.titles.edit')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-accounts.titles.edit" />}
             queryOptions={{
                 queryFormAdapter: accountCreateOrEditFormInAdapter,
                 query: GetAccountDetailsByParams,

v6y-apps/front-bo/src/features/v6y-accounts/components/VitalityAccountListView.tsx

@@ -1,8 +1,4 @@
-import VitalityTable from '../../../commons/components/VitalityTable';
-import {
-    buildCommonTableColumns,
-    buildCommonTableDataSource,
-} from '../../../commons/config/VitalityTableConfig';
+import RenderVitalityTable from '../../../commons/components/VitalityTable';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineTableWrapper from '../../../infrastructure/components/RefineTableWrapper';
 import DeleteAccount from '../apis/deleteAccount';
@@ -26,17 +22,18 @@ export default function VitalityAccountListView() {
                 query: GetAccountListByPageAndParams,
             }}
             renderTable={(dataSource) => (
-                <VitalityTable
-                    dataSource={buildCommonTableDataSource(dataSource)}
-                    columns={buildCommonTableColumns(dataSource, [], {
+                <RenderVitalityTable
+                    dataSource={dataSource}
+                    columnKeys={[]}
+                    columnOptions={{
                         enableEdit: true,
                         enableShow: true,
                         enableDelete: true,
                         deleteMetaQuery: {
                             gqlMutation: DeleteAccount,
                             operation: 'deleteAccount',
                         },
-                    })}
+                    }}
                 />
             )}
         />

v6y-apps/front-bo/src/features/v6y-applications/components/VitalityApplicationCreateView.tsx

@@ -1,4 +1,4 @@
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 
 import {
@@ -13,11 +13,7 @@ export default function VitalityApplicationCreateView() {
     const { translate } = useTranslation();
     return (
         <RefineCreateWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.create')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.create" />}
             createOptions={{
                 createFormAdapter: applicationCreateOrEditFormOutputAdapter,
                 createQuery: CreateOrEditApplication,

v6y-apps/front-bo/src/features/v6y-applications/components/VitalityApplicationDetailsView.tsx

@@ -1,7 +1,7 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { ApplicationType } from '@v6y/core-logic';
 import Matcher from '@v6y/core-logic/src/core/Matcher';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
@@ -42,11 +42,7 @@ export default function VitalityApplicationDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.show" />}
             queryOptions={{
                 resource: 'getApplicationDetailsInfoByParams',
                 query: GetApplicationDetails,

v6y-apps/front-bo/src/features/v6y-applications/components/VitalityApplicationEditView.tsx

@@ -1,5 +1,5 @@
 import { useParsed } from '@refinedev/core';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 
 import {
@@ -18,11 +18,7 @@ export default function VitalityApplicationEditView() {
 
     return (
         <RefineEditWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-applications.titles.edit')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-applications.titles.edit" />}
             queryOptions={{
                 queryFormAdapter: applicationCreateOrEditFormInAdapter as (
                     data: unknown,

v6y-apps/front-bo/src/features/v6y-applications/components/VitalityApplicationListView.tsx

@@ -1,11 +1,7 @@
 import { ApplicationType } from '@v6y/core-logic';
 
 import GetApplicationListByPageAndParams from '../../../commons/apis/getApplicationListByPageAndParams';
-import VitalityTable from '../../../commons/components/VitalityTable';
-import {
-    buildCommonTableColumns,
-    buildCommonTableDataSource,
-} from '../../../commons/config/VitalityTableConfig';
+import RenderVitalityTable from '../../../commons/components/VitalityTable';
 import { useTranslation } from '../../../infrastructure/adapters/translation/TranslationAdapter';
 import RefineTableWrapper from '../../../infrastructure/components/RefineTableWrapper';
 import DeleteApplication from '../apis/deleteApplication';
@@ -28,17 +24,18 @@ export default function VitalityApplicationListView() {
                 query: GetApplicationListByPageAndParams,
             }}
             renderTable={(dataSource: ApplicationType[]) => (
-                <VitalityTable
-                    dataSource={buildCommonTableDataSource(dataSource)}
-                    columns={buildCommonTableColumns(dataSource, [], {
+                <RenderVitalityTable
+                    dataSource={dataSource}
+                    columnKeys={[]}
+                    columnOptions={{
                         enableEdit: true,
                         enableShow: true,
                         enableDelete: true,
                         deleteMetaQuery: {
                             gqlMutation: DeleteApplication,
                             operation: 'deleteApplication',
                         },
-                    })}
+                    }}
                 />
             )}
         />

v6y-apps/front-bo/src/features/v6y-audit-help/components/VitalityAuditHelpDetailsView.tsx

@@ -1,6 +1,6 @@
 import { HttpError, useParsed } from '@refinedev/core';
 import { AuditHelpType } from '@v6y/core-logic';
-import { Typography } from 'antd';
+import { VitalityTitle } from '@v6y/shared-ui';
 import * as React from 'react';
 
 import VitalityDetailsView from '../../../commons/components/VitalityDetailsView';
@@ -16,11 +16,7 @@ export default function VitalityAuditHelpDetailsView() {
 
     return (
         <RefineShowWrapper
-            title={
-                <Typography.Title level={2}>
-                    {translate('v6y-audit-helps.titles.show')}
-                </Typography.Title>
-            }
+            title={<VitalityTitle title="v6y-audit-helps.titles.show" />}
             queryOptions={{
                 resource: 'getAuditHelpDetailsByParams',
                 query: GetAuditHelpDetailsByParams,