Table fixes

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));

src/api/apiToken.api.ts

@@ -11,6 +11,7 @@ export interface ApiTableRow {
   key: string;
   isActive: boolean;
   createdAt: Date;
+  updatedAt: Date;
 }
 
 export interface Pagination {
@@ -50,26 +51,29 @@ export const toggleApiToken = (id: number): Promise<Record<string, string>> =>
 
 export const getApiTableData = (pagination: Pagination): Promise<ApiTableData> => {
   return new Promise((res) => {
-    const noPrevData = {
+    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(),
     };
 
-    const addLastEntry = {
+    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(),
     };
 
     getAllApiToken()
       .then((resp) => {
         if (resp.length === 0) {
           resp.push(noPrevData);
         } else {
-          resp.push(addLastEntry);
+          ///
+          resp.unshift(addFirstEntry);
         }
 
         res({

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';

src/components/apiKeys/apiKeysTable/ActionRow.tsx

@@ -38,6 +38,7 @@ export const ActionRow: React.FC<ActionRowProps> = ({
         ghost
         onClick={() => handleToggleRow(record.id)}
         icon={record.isActive ? <StopOutlined /> : <CheckCircleOutlined />}
+        style={{color: !record.isActive ? '' : '#777777'}}
       >
         {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
       </BaseButton>

src/components/apiKeys/apiKeysTable/ApiKeysTable.tsx

@@ -1,13 +1,10 @@
 import {
   ApiTableRow,
-  Pagination,
   createApiToken,
   deleteApiToken,
   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';
@@ -17,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) => {
@@ -62,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,
-            },
           };
         });
 
@@ -77,6 +57,10 @@ export const ApiKeyTable: React.FC = () => {
   };
 
   const handleToggleRow = (rowId: number) => {
+    if (rowId === -1) {
+      handleCreateRow();
+      return;
+    }
     toggleApiToken(rowId)
       .then((resp) => {
         setTableData((prev) => ({
@@ -97,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 }) });
@@ -114,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') });
@@ -129,14 +105,20 @@ export const ApiKeyTable: React.FC = () => {
       title: t('apiTable.key'),
       dataIndex: 'key',
       render: (text: string, record) => {
-      return !record.isActive ?<span>{text}</span> : <span style={{ color: '#cccccc82' }}>{text}</span>;
+      return record.isActive ?<span>{text}</span> : <span style={{ color: '#cccccc82' }}>{text}</span>;
       },
     },
+    {
+      title: t('apiTable.lastUsed'),
+      dataIndex: 'updatedAt',
+      render: (text: string, record: ApiTableRow) =>
+        record.isActive ?(record.id !== -1 ? <span>{dayjs(text).format('DD-MM-YYYY HH:mm')}</span> : <span></span>): (record.id !== -1 ? <span style={{ color: '#cccccc82' }}>{dayjs(text).format('DD-MM-YYYY HH:mm')}</span> : <span></span>),
+    },
     {
       title: t('apiTable.createdAt'),
       dataIndex: 'createdAt',
       render: (text: string, record: ApiTableRow) =>
-        !record.isActive ?(record.id !== -1 ? <span>{dayjs(text).format('DD-MM-YYYY HH:mm:ss')}</span> : <span></span>): (record.id !== -1 ? <span style={{ color: '#cccccc82' }}>{dayjs(text).format('DD-MM-YYYY HH:mm:ss')}</span> : <span></span>),
+        record.isActive ?(record.id !== -1 ? <span>{dayjs(text).format('DD-MM-YYYY HH:mm')}</span> : <span></span>): (record.id !== -1 ? <span style={{ color: '#cccccc82' }}>{dayjs(text).format('DD-MM-YYYY HH:mm')}</span> : <span></span>),
     },
     {
       title: t('apiTable.actions'),
@@ -156,15 +138,18 @@ export const ApiKeyTable: React.FC = () => {
     }
   ];
 
+  if (!tableData.loading && !tableData.data.length) {
+    return <div style={{ padding: '2rem' }}>Please click on 'Create' button to generate one.</div>;
+  }
+
   return (
     <BaseTable
+      rowKey={(record) => record.id}
       columns={columns}
       dataSource={tableData.data}
-      pagination={tableData.pagination}
       loading={tableData.loading}
-      onChange={handleTableChange}
+      pagination={false}
       scroll={{ x: 800 }}
-      bordered
       style={{ padding: '2rem' }}
     />
   );

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;
 
@@ -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;
@@ -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 */
   }
 
   /* 

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;

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, 

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<ProfileFormNavProps> = ({ menu }) => {
       break;
     }
 
+    case 'paymentsHistory': {
+      currentMenu = <PaymentHistory />;
+      break;
+    }
+
     default: {
       currentMenu = null;
     }

src/components/profile/profileCard/profileFormNav/nav/payments/Payments.tsx

@@ -15,9 +15,9 @@ export const Payments: React.FC = () => {
         <BaseCol span={24}>
           <PaymentPricing />
         </BaseCol>
-        <BaseCol span={24}>
+        {/* <BaseCol span={24}>
           <PaymentHistory />
-        </BaseCol>
+        </BaseCol> */}
       </BaseRow>
     ),
     [],

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 = () => {
             <BaseSwitch checked={switchState} onChange={() => setSwithState(!switchState)} />
             <span className={switchState ? 'active' : ''}>{t('time.annually')}(10% discount)</span>
           </PaymentSwitcher>
+          {/* <BaseSelect placeholder="Choose your gender">
+            <Option value="male">
+              <BaseSpace align="center">
+                <ManOutlined />
+                {t('forms.stepFormLabels.male')}
+              </BaseSpace>
+            </Option>
+            <Option value="female">
+              <BaseSpace align="center">
+                <WomanOutlined />
+                {t('forms.stepFormLabels.female')}
+              </BaseSpace>
+            </Option>
+          </BaseSelect> */}
 
           <BaseDropdown
             menu={{ items: currencySetterItems, onClick: handleMenuClick }}

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 = () => {
               <Route path="personal-info" element={<PersonalInfo />} />
               <Route path="security-settings" element={<SecuritySettings />} />
               <Route path="payments" element={<Payments />} />
+              <Route path="paymentsHistory" element={<PaymentsHistory />} />
             </Route>
           </Route>
           <Route path="/auth" element={<AuthLayoutFallback />}>

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: <TransactionOutlined />,
+    color: 'warning',
+    href: 'paymentsHistory',
+  },
 ];