From 0ebd8048d05d27ad3e7a17c31c3297e309691db4 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 01:54:30 +0530 Subject: [PATCH 01/12] feat(api): add updatedAt field to ApiTableRow and display in ApiKeysTable --- src/api/apiToken.api.ts | 1 + .../apiKeys/apiKeysTable/ApiKeysTable.tsx | 12 ++++++++++-- .../paymentPricing/PaymentPricing.tsx | 19 ++++++++++++++++++- src/locales/de/translation.json | 3 ++- src/locales/en/translation.json | 3 ++- 5 files changed, 33 insertions(+), 5 deletions(-) diff --git a/src/api/apiToken.api.ts b/src/api/apiToken.api.ts index 6d62a550..b7bc885c 100644 --- a/src/api/apiToken.api.ts +++ b/src/api/apiToken.api.ts @@ -11,6 +11,7 @@ export interface ApiTableRow { key: string; isActive: boolean; createdAt: Date; + updatedAt: Date; } export interface Pagination { diff --git a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx index 435ab7d0..8f7d8f53 100644 --- a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx +++ b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx @@ -6,8 +6,6 @@ import { getApiTableData, toggleApiToken, } from '@app/api/apiToken.api'; -import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace'; import { BaseTable } from '@app/components/common/BaseTable/BaseTable'; import { useFeedback } from '@app/hooks/useFeedback'; import { useMounted } from '@app/hooks/useMounted'; @@ -77,6 +75,10 @@ export const ApiKeyTable: React.FC = () => { }; const handleToggleRow = (rowId: number) => { + if (rowId === -1) { + handleCreateRow(); + return; + } toggleApiToken(rowId) .then((resp) => { setTableData((prev) => ({ @@ -132,6 +134,12 @@ export const ApiKeyTable: React.FC = () => { return !record.isActive ?{text} : {text}; }, }, + { + title: t('apiTable.lastUsed'), + dataIndex: 'updatedAt', + render: (text: string, record: ApiTableRow) => + !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ), + }, { title: t('apiTable.createdAt'), dataIndex: 'createdAt', diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx index b759c4f1..482c5339 100644 --- a/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx +++ b/src/components/profile/profileCard/profileFormNav/nav/payments/paymentPricing/PaymentPricing.tsx @@ -11,10 +11,13 @@ import { BaseSwitch } from '@app/components/common/BaseSwitch/BaseSwitch'; import { BaseCard } from '@app/components/common/BaseCard/BaseCard'; import { BaseDropdown } from '@app/components/common/BaseDropdown/BaseDropdown'; import { BaseButton } from '@app/components/common/BaseButton/BaseButton'; -import { DownOutlined } from '@ant-design/icons'; +import { DownOutlined, ManOutlined, WomanOutlined } from '@ant-design/icons'; import { Flex } from 'antd'; import pricingData from './payment.json'; import { PaymentPricingContent } from './paymentPricingContent/PaymentPricingContent'; +import { BaseSpace } from '@app/components/common/BaseSpace/BaseSpace'; +import { BaseSelect, Option } from '@app/components/common/selects/BaseSelect/BaseSelect'; + export const PaymentPricing = () => { const location = useLocation(); @@ -77,6 +80,20 @@ export const PaymentPricing = () => { setSwithState(!switchState)} /> {t('time.annually')}(10% discount) + {/* + + + */} Date: Thu, 20 Feb 2025 10:52:57 +0530 Subject: [PATCH 02/12] feat(api): add updatedAt field to API table rows and adjust date formatting in ApiKeysTable --- src/api/apiToken.api.ts | 9 ++++++--- src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx | 4 ++-- 2 files changed, 8 insertions(+), 5 deletions(-) diff --git a/src/api/apiToken.api.ts b/src/api/apiToken.api.ts index b7bc885c..1fa56b00 100644 --- a/src/api/apiToken.api.ts +++ b/src/api/apiToken.api.ts @@ -51,18 +51,20 @@ export const toggleApiToken = (id: number): Promise> => export const getApiTableData = (pagination: Pagination): Promise => { return new Promise((res) => { - const noPrevData = { + const noPrevData: ApiTableRow = { id: -1, key: "No API key found, please click an 'Create' button to generate one.", createdAt: new Date(), isActive: false, + updatedAt: new Date(), }; - const addLastEntry = { + const addFirstEntry: ApiTableRow = { id: -1, key: "Please click an 'Create' button to generate one.", createdAt: new Date(), isActive: false, + updatedAt: new Date(), }; getAllApiToken() @@ -70,7 +72,8 @@ export const getApiTableData = (pagination: Pagination): Promise = if (resp.length === 0) { resp.push(noPrevData); } else { - resp.push(addLastEntry); + /// + resp.unshift(addFirstEntry); } res({ diff --git a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx index 8f7d8f53..a34727ba 100644 --- a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx +++ b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx @@ -138,13 +138,13 @@ export const ApiKeyTable: React.FC = () => { title: t('apiTable.lastUsed'), dataIndex: 'updatedAt', render: (text: string, record: ApiTableRow) => - !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ), + !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), }, { title: t('apiTable.createdAt'), dataIndex: 'createdAt', render: (text: string, record: ApiTableRow) => - !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm:ss')} : ), + !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), }, { title: t('apiTable.actions'), From c9439c7e90c09bc467d8bed250f31227b4c75a96 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 10:58:35 +0530 Subject: [PATCH 03/12] feat(api): add rowKey prop to ApiKeyTable for unique record identification --- src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx index a34727ba..cac12298 100644 --- a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx +++ b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx @@ -166,6 +166,7 @@ export const ApiKeyTable: React.FC = () => { return ( record.id} columns={columns} dataSource={tableData.data} pagination={tableData.pagination} From 0f6ff2059763a30fb82063c311eadc8c9c140135 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 11:00:46 +0530 Subject: [PATCH 04/12] fix(App): ensure user profile reload only occurs when user is present --- src/App.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/App.tsx b/src/App.tsx index babdcd59..d121ee19 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -27,13 +27,12 @@ const App: React.FC = () => { const dispatch = useAppDispatch(); useEffect(() => { - if (!user) return; - + if (!user) { reloadUserProfile() .then((data) => dispatch(setUser(data))) .catch((err) => console.error(err)); - }, [dispatch]); - + } + }, [user, dispatch]); useEffect(() => { document.addEventListener('click', event => trackClicks(event, user)); From b7157f85760a1ebe1596a828c89c0dd205b609c0 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 11:07:03 +0530 Subject: [PATCH 05/12] fix(api): correct wording in API key prompts for clarity --- src/api/apiToken.api.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/api/apiToken.api.ts b/src/api/apiToken.api.ts index 1fa56b00..074bf9ba 100644 --- a/src/api/apiToken.api.ts +++ b/src/api/apiToken.api.ts @@ -53,7 +53,7 @@ export const getApiTableData = (pagination: Pagination): Promise = return new Promise((res) => { const noPrevData: ApiTableRow = { id: -1, - key: "No API key found, please click an 'Create' button to generate one.", + key: "No API key found, please click on 'Create' button to generate one.", createdAt: new Date(), isActive: false, updatedAt: new Date(), @@ -61,7 +61,7 @@ export const getApiTableData = (pagination: Pagination): Promise = const addFirstEntry: ApiTableRow = { id: -1, - key: "Please click an 'Create' button to generate one.", + key: "Please click on 'Create' button to generate one.", createdAt: new Date(), isActive: false, updatedAt: new Date(), From a75b207560d40b3833236327fe8a13c0b393e811 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 11:15:39 +0530 Subject: [PATCH 06/12] refactor(ApiKeyTable): simplify pagination handling and improve loading state management --- .../apiKeys/apiKeysTable/ApiKeysTable.tsx | 54 ++++++------------- .../common/BaseTable/BaseTable.styles.ts | 12 ++--- 2 files changed, 19 insertions(+), 47 deletions(-) diff --git a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx index cac12298..f7725dcb 100644 --- a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx +++ b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx @@ -1,6 +1,5 @@ import { ApiTableRow, - Pagination, createApiToken, deleteApiToken, getApiTableData, @@ -15,42 +14,29 @@ import { useCallback, useEffect, useState } from 'react'; import { useTranslation } from 'react-i18next'; import { ActionRow } from './ActionRow'; -const initialPagination: Pagination = { - current: 1, - pageSize: 5, -}; - export const ApiKeyTable: React.FC = () => { - const [tableData, setTableData] = useState<{ data: ApiTableRow[]; pagination: Pagination; loading: boolean }>({ + const [tableData, setTableData] = useState<{ data: ApiTableRow[]; loading: boolean }>({ data: [], - pagination: initialPagination, loading: false, }); const { t } = useTranslation(); const { isMounted } = useMounted(); const { notification } = useFeedback(); - const fetchData = useCallback( - (pagination: Pagination) => { - setTableData((prev) => ({ ...prev, loading: true })); + const fetchData = useCallback(() => { + setTableData((prev) => ({ ...prev, loading: true })); - getApiTableData(pagination).then((res) => { - if (isMounted.current) { - setTableData({ data: res.data, pagination: res.pagination, loading: false }); - } - }); - }, - [isMounted], - ); + getApiTableData().then((res) => { + if (isMounted.current) { + setTableData({ data: res.data, loading: false }); + } + }); + }, [isMounted]); useEffect(() => { - fetchData(initialPagination); + fetchData(); }, [fetch]); - const handleTableChange = (pagination: Pagination) => { - fetchData(pagination); - }; - const handleCreateRow = () => { createApiToken() .then((resp) => { @@ -60,10 +46,6 @@ export const ApiKeyTable: React.FC = () => { return { ...prev, data: updatedData, - pagination: { - ...prev.pagination, - total: prev.pagination.total ? prev.pagination.total + 1 : prev.pagination.total, - }, }; }); @@ -99,10 +81,6 @@ export const ApiKeyTable: React.FC = () => { setTableData((prev) => ({ ...prev, data: prev.data.filter((token) => token.id !== rowId), - pagination: { - ...prev.pagination, - total: prev.pagination.total ? prev.pagination.total - 1 : prev.pagination.total, - }, })); notification.success({ message: t('apiTable.deleteMessage', { key: resp.key }) }); @@ -116,10 +94,6 @@ export const ApiKeyTable: React.FC = () => { setTableData((prev) => ({ ...prev, data: prev.data.filter((token) => token.id !== rowId), - pagination: { - ...prev.pagination, - total: prev.pagination.total ? prev.pagination.total - 1 : prev.pagination.total, - }, })); notification.success({ message: t('apiTable.deleteTempMessage') }); @@ -164,16 +138,18 @@ export const ApiKeyTable: React.FC = () => { } ]; + if (!tableData.loading && !tableData.data.length) { + return
Please click on 'Create' button to generate one.
; + } + return ( record.id} columns={columns} dataSource={tableData.data} - pagination={tableData.pagination} loading={tableData.loading} - onChange={handleTableChange} + pagination={false} scroll={{ x: 800 }} - bordered style={{ padding: '2rem' }} /> ); diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index ec766959..e078296e 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -11,12 +11,12 @@ export const Table = styled(AntTable)` /* Rounded corners + dark gradient background for a subtle effect */ border-radius: 16px; - background: linear-gradient(145deg, #2a2a2a, #303030); + background: linear-gradient(145deg, #343434, #3a3a3a); /* Soft outward shadows for a lightly raised feel on a dark background */ box-shadow: - 8px 8px 15px rgba(0, 0, 0, 0.5), - -8px -8px 15px rgba(255, 255, 255, 0.03); + 6px 6px 12px rgba(0, 0, 0, 0.3), + -6px -6px 12px rgba(255, 255, 255, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; @@ -75,11 +75,7 @@ export const Table = styled(AntTable)` ------------------------------------------------------ */ .ant-table-tbody > tr > td:last-child { - background: linear-gradient(135deg, #7e7e81, #595b5d); - &:hover { - background: unset; - - } + /* Remove special background styling */ } /* From 8f6e28d6ff9e98191e80ecee094d095999f03205 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 12:20:20 +0530 Subject: [PATCH 07/12] fix(ActionRow): correct button label logic for activation state --- src/components/apiKeys/apiKeysTable/ActionRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/apiKeys/apiKeysTable/ActionRow.tsx b/src/components/apiKeys/apiKeysTable/ActionRow.tsx index 2444a707..ef33a4cb 100644 --- a/src/components/apiKeys/apiKeysTable/ActionRow.tsx +++ b/src/components/apiKeys/apiKeysTable/ActionRow.tsx @@ -39,7 +39,7 @@ export const ActionRow: React.FC = ({ onClick={() => handleToggleRow(record.id)} icon={record.isActive ? : } > - {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')} + {!record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
From 4a9ef37a965e453db2bcd40d04386934da17c045 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 12:41:28 +0530 Subject: [PATCH 08/12] refactor(MainLayout): remove fixed height from layout styles for better responsiveness --- src/components/layouts/main/MainLayout/MainLayout.styles.ts | 1 - src/components/layouts/main/sider/MainSider/MainSider.styles.ts | 2 -- 2 files changed, 3 deletions(-) diff --git a/src/components/layouts/main/MainLayout/MainLayout.styles.ts b/src/components/layouts/main/MainLayout/MainLayout.styles.ts index 0695b303..f7468ae4 100644 --- a/src/components/layouts/main/MainLayout/MainLayout.styles.ts +++ b/src/components/layouts/main/MainLayout/MainLayout.styles.ts @@ -4,7 +4,6 @@ import { media } from '@app/utils/utils'; import { BaseLayout } from '@app/components/common/BaseLayout/BaseLayout'; export const LayoutMaster = styled(BaseLayout)` - height: 100vh; background: #1a1a1a; position: relative; display: flex; diff --git a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts index 2e552174..4af6f53d 100644 --- a/src/components/layouts/main/sider/MainSider/MainSider.styles.ts +++ b/src/components/layouts/main/sider/MainSider/MainSider.styles.ts @@ -9,8 +9,6 @@ export const Sider = styled(BaseLayout.Sider)` overflow: visible; right: 0; z-index: 5; - min-height: 100vh; - max-height: 100vh; background: #2a2a2a !important; border-right: none !important; box-shadow: 10px 10px 20px #1f1f1f, From b218f995f58ea557ba76980434ed9c473ede1b7d Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 13:06:03 +0530 Subject: [PATCH 09/12] fix(ActionRow): correct button label and style logic for activation state --- src/components/apiKeys/apiKeysTable/ActionRow.tsx | 3 ++- src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx | 6 +++--- 2 files changed, 5 insertions(+), 4 deletions(-) diff --git a/src/components/apiKeys/apiKeysTable/ActionRow.tsx b/src/components/apiKeys/apiKeysTable/ActionRow.tsx index ef33a4cb..04f2190b 100644 --- a/src/components/apiKeys/apiKeysTable/ActionRow.tsx +++ b/src/components/apiKeys/apiKeysTable/ActionRow.tsx @@ -38,8 +38,9 @@ export const ActionRow: React.FC = ({ ghost onClick={() => handleToggleRow(record.id)} icon={record.isActive ? : } + style={{color: !record.isActive ? '' : '#777777'}} > - {!record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')} + {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
diff --git a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx index f7725dcb..a343f522 100644 --- a/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx +++ b/src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx @@ -105,20 +105,20 @@ export const ApiKeyTable: React.FC = () => { title: t('apiTable.key'), dataIndex: 'key', render: (text: string, record) => { - return !record.isActive ?{text} : {text}; + return record.isActive ?{text} : {text}; }, }, { title: t('apiTable.lastUsed'), dataIndex: 'updatedAt', render: (text: string, record: ApiTableRow) => - !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), + record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), }, { title: t('apiTable.createdAt'), dataIndex: 'createdAt', render: (text: string, record: ApiTableRow) => - !record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), + record.isActive ?(record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ): (record.id !== -1 ? {dayjs(text).format('DD-MM-YYYY HH:mm')} : ), }, { title: t('apiTable.actions'), From 1db28c8e77b4aa497cfe8297b2665ea1c6db152c Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 13:22:14 +0530 Subject: [PATCH 10/12] fix(BaseTable): update header background color for improved visibility --- src/components/common/BaseTable/BaseTable.styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/BaseTable/BaseTable.styles.ts b/src/components/common/BaseTable/BaseTable.styles.ts index e078296e..5dcf0051 100644 --- a/src/components/common/BaseTable/BaseTable.styles.ts +++ b/src/components/common/BaseTable/BaseTable.styles.ts @@ -52,7 +52,7 @@ export const Table = styled(AntTable)` ------------------------------------------------------ */ .ant-table-thead > tr > th { - background-color: #2e2e2e; /* distinct dark shade for header cells */ + background-color: #232322; /* distinct dark shade for header cells */ color: #ccc; /* lighter text color for contrast */ text-transform: uppercase; font-weight: 600; From 068837d58e4c5d77cedd1b46d6ebf6b6705c4e82 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 13:30:47 +0530 Subject: [PATCH 11/12] refactor(ApiKeys): remove unused import of BaseCard for cleaner code --- src/components/apiKeys/ApiKeys.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/apiKeys/ApiKeys.tsx b/src/components/apiKeys/ApiKeys.tsx index a0470a7e..77c70bc2 100644 --- a/src/components/apiKeys/ApiKeys.tsx +++ b/src/components/apiKeys/ApiKeys.tsx @@ -1,6 +1,5 @@ import { useAppSelector } from '@app/hooks/reduxHooks'; import { useResponsive } from '@app/hooks/useResponsive'; -import { BaseCard } from '../common/BaseCard/BaseCard'; import { ApiKeyTable } from './apiKeysTable/ApiKeysTable'; import { BaseRow } from '../common/BaseRow/BaseRow'; import { BaseCol } from '../common/BaseCol/BaseCol'; From 164582ff270f1978f4a6d41702bf39bf52849657 Mon Sep 17 00:00:00 2001 From: sumansaurabh Date: Thu, 20 Feb 2025 13:47:16 +0530 Subject: [PATCH 12/12] feat(ProfileNav): add Payments History navigation and page component --- .../profileFormNav/ProfileFormNav.tsx | 6 ++++++ .../profileFormNav/nav/payments/Payments.tsx | 4 ++-- src/components/router/AppRouter.tsx | 3 +++ src/constants/profileNavData.tsx | 9 ++++++++- src/locales/de/translation.json | 5 +++-- src/locales/en/translation.json | 5 +++-- .../PaymentHistoryPage/PaymentsHistoryPage.tsx | 17 +++++++++++++++++ 7 files changed, 42 insertions(+), 7 deletions(-) create mode 100644 src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx diff --git a/src/components/profile/profileCard/profileFormNav/ProfileFormNav.tsx b/src/components/profile/profileCard/profileFormNav/ProfileFormNav.tsx index 54419e1c..fc12b4f0 100644 --- a/src/components/profile/profileCard/profileFormNav/ProfileFormNav.tsx +++ b/src/components/profile/profileCard/profileFormNav/ProfileFormNav.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { Payments } from './nav/payments/Payments'; import { PersonalInfo } from './nav/PersonalInfo/PersonalInfo'; import { SecuritySettings } from './nav/SecuritySettings/SecuritySettings'; +import { PaymentHistory } from './nav/payments/paymentHistory/PaymentHistory/PaymentHistory'; interface ProfileFormNavProps { menu: string; @@ -26,6 +27,11 @@ export const ProfileFormNav: React.FC = ({ menu }) => { break; } + case 'paymentsHistory': { + currentMenu = ; + break; + } + default: { currentMenu = null; } diff --git a/src/components/profile/profileCard/profileFormNav/nav/payments/Payments.tsx b/src/components/profile/profileCard/profileFormNav/nav/payments/Payments.tsx index bb855cf2..ecfe08b9 100644 --- a/src/components/profile/profileCard/profileFormNav/nav/payments/Payments.tsx +++ b/src/components/profile/profileCard/profileFormNav/nav/payments/Payments.tsx @@ -15,9 +15,9 @@ export const Payments: React.FC = () => { - + {/* - + */} ), [], diff --git a/src/components/router/AppRouter.tsx b/src/components/router/AppRouter.tsx index 6ce0d4f5..788e0073 100644 --- a/src/components/router/AppRouter.tsx +++ b/src/components/router/AppRouter.tsx @@ -36,6 +36,7 @@ const SecuritySettingsPage = React.lazy( () => import('@app/pages/AuthPages/SecuritySettingsPage/SecuritySettingsPage') ); const PaymentsPage = React.lazy(() => import('@app/pages/DashboardPages/PaymentPage/PaymentsPage')); +const PaymentsHistoryPage = React.lazy(() => import('@app/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage')); const Logout = React.lazy(() => import('./Logout')); export const DASHBOARD_PATH = '/'; @@ -53,6 +54,7 @@ const Error404 = withLoading(Error404Page); const PersonalInfo = withLoading(PersonalInfoPage); const SecuritySettings = withLoading(SecuritySettingsPage); const Payments = withLoading(PaymentsPage); +const PaymentsHistory = withLoading(PaymentsHistoryPage); // Dashboard const DocGenDashboard = withLoading(DocGenDashboardPage); @@ -155,6 +157,7 @@ export const AppRouter: React.FC = () => { } /> } /> } /> + } /> }> diff --git a/src/constants/profileNavData.tsx b/src/constants/profileNavData.tsx index 07dc4456..acd566ba 100644 --- a/src/constants/profileNavData.tsx +++ b/src/constants/profileNavData.tsx @@ -1,4 +1,4 @@ -import { DollarOutlined, SecurityScanOutlined, UserOutlined } from '@ant-design/icons'; +import { DollarOutlined, TransactionOutlined, UserOutlined } from '@ant-design/icons'; import React from 'react'; interface ProfileNavItem { @@ -24,4 +24,11 @@ export const profileNavData: ProfileNavItem[] = [ color: 'warning', href: 'payments', }, + { + id: 3, + name: 'profilePage.nav.paymentsHistory', + icon: , + color: 'warning', + href: 'paymentsHistory', + }, ]; diff --git a/src/locales/de/translation.json b/src/locales/de/translation.json index 8ca641ab..3fac4834 100644 --- a/src/locales/de/translation.json +++ b/src/locales/de/translation.json @@ -340,7 +340,7 @@ "gender": "Gender", "lang": "Language", "paymentDate": "Date", - "paymentHistory": "Payment History", + "paymentHistory": "Transactions History", "paymentHistoryErr": "No data available", "paymentStatus": "Status", "personalInfo": "Personal Info", @@ -354,7 +354,8 @@ "nav": { "payment": "Payments", "personalInfo": "Personal Info", - "security": "Security Settings" + "security": "Security Settings", + "paymentsHistory": "Transactions History" }, "success": "Success", "title": "Profile" diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f0e172f8..a3dbd814 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -340,7 +340,7 @@ "gender": "Gender", "lang": "Language", "paymentDate": "Date", - "paymentHistory": "Payment History", + "paymentHistory": "Transactions History", "paymentHistoryErr": "No data available", "paymentStatus": "Status", "personalInfo": "Personal Info", @@ -354,7 +354,8 @@ "nav": { "payment": "Payments", "personalInfo": "Personal Info", - "security": "Security Settings" + "security": "Security Settings", + "paymentsHistory": "Transactions History" }, "success": "Success", "title": "Profile" diff --git a/src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx b/src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx new file mode 100644 index 00000000..c0cf98ce --- /dev/null +++ b/src/pages/DashboardPages/PaymentHistoryPage/PaymentsHistoryPage.tsx @@ -0,0 +1,17 @@ +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { PageTitle } from '@app/components/common/PageTitle/PageTitle'; +import { PaymentHistory } from '@app/components/profile/profileCard/profileFormNav/nav/payments/paymentHistory/PaymentHistory/PaymentHistory'; + +const PaymentsPage: React.FC = () => { + const { t } = useTranslation(); + + return ( + <> + {t('profilePage.nav.paymentHistory')} + + + ); +}; + +export default PaymentsPage;