feat(antd-imports): establish centralized import rules for Ant Design components

- Introduced a new rules file for Ant Design component imports, enforcing the use of centralized imports from `@antd-imports` to enhance tree-shaking, maintainability, and performance. - Updated various components to replace direct imports from 'antd' and '@ant-design/icons' with the centralized import path. - Refactored existing components to utilize memoization and callbacks for improved performance and readability. - Enhanced the billing and configuration components with updated styles and improved user experience.
2025-07-23 10:33:55 +05:30
parent a6286eb2b8
commit 80f5febb51
8 changed files with 639 additions and 278 deletions
--- a/.cursor/rules/antd-components.mdc
+++ b/.cursor/rules/antd-components.mdc
@@ -0,0 +1,237 @@
+---
+alwaysApply: true
+---
+# Ant Design Import Rules for Worklenz
+
+## 🚨 CRITICAL: Always Use Centralized Imports
+
+**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
+
+### ✅ Correct Import Pattern
+```typescript
+import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
+// or
+import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
+```
+
+### ❌ Forbidden Import Patterns
+```typescript
+// NEVER do this:
+import { Button, Input, Select } from 'antd';
+import { EditOutlined, PlusOutlined } from '@ant-design/icons';
+```
+
+## Why This Rule Exists
+
+### Benefits of Centralized Imports:
+- **Better Tree-Shaking**: Optimized bundle size through centralized management
+- **Consistent React Context**: Proper context sharing across components
+- **Type Safety**: Centralized TypeScript definitions
+- **Maintainability**: Single source of truth for all Ant Design imports
+- **Performance**: Reduced bundle size and improved loading times
+
+## What's Available in `@antd-imports`
+
+### Core Components
+- **Layout**: Layout, Row, Col, Flex, Divider, Space
+- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
+- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
+- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
+- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
+- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
+
+### Icons
+Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
+
+### Utilities
+- **appMessage**: Centralized message utility
+- **appNotification**: Centralized notification utility
+- **antdConfig**: Default Ant Design configuration
+- **taskManagementAntdConfig**: Task-specific configuration
+
+## Implementation Guidelines
+
+### When Creating New Components:
+1. **Always** import from `@antd-imports` or `@/shared/antd-imports`
+2. Use `appMessage` and `appNotification` for user feedback
+3. Apply `antdConfig` for consistent styling
+4. Use `taskManagementAntdConfig` for task-related components
+
+### When Refactoring Existing Code:
+1. Replace direct 'antd' imports with `@antd-imports`
+2. Replace direct '@ant-design/icons' imports with `@antd-imports`
+3. Update any custom message/notification calls to use the utilities
+
+### File Location
+The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
+
+## Examples
+
+### Component Creation
+```typescript
+import React from 'react';
+import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
+
+const MyComponent = () => {
+  const handleClick = () => {
+    appMessage.success('Operation completed!');
+  };
+
+  return (
+    <Button icon={<EditOutlined />} onClick={handleClick}>
+      Edit Item
+    </Button>
+  );
+};
+```
+
+### Form Implementation
+```typescript
+import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
+
+const MyForm = () => {
+  return (
+    <Form layout="vertical">
+      <Form.Item label="Name" name="name">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Type" name="type">
+        <Select options={options} />
+      </Form.Item>
+      <Form.Item label="Date" name="date">
+        <DatePicker />
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+## Enforcement
+
+This rule is **MANDATORY** and applies to:
+- All new component development
+- All code refactoring
+- All bug fixes
+- All feature implementations
+
+**Violations will result in code review rejection.**
+
+### File Path:
+The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
+# Ant Design Import Rules for Worklenz
+
+## 🚨 CRITICAL: Always Use Centralized Imports
+
+**NEVER import Ant Design components directly from 'antd' or '@ant-design/icons'**
+
+### ✅ Correct Import Pattern
+```typescript
+import { Button, Input, Select, EditOutlined, PlusOutlined } from '@antd-imports';
+// or
+import { Button, Input, Select, EditOutlined, PlusOutlined } from '@/shared/antd-imports';
+```
+
+### ❌ Forbidden Import Patterns
+```typescript
+// NEVER do this:
+import { Button, Input, Select } from 'antd';
+import { EditOutlined, PlusOutlined } from '@ant-design/icons';
+```
+
+## Why This Rule Exists
+
+### Benefits of Centralized Imports:
+- **Better Tree-Shaking**: Optimized bundle size through centralized management
+- **Consistent React Context**: Proper context sharing across components
+- **Type Safety**: Centralized TypeScript definitions
+- **Maintainability**: Single source of truth for all Ant Design imports
+- **Performance**: Reduced bundle size and improved loading times
+
+## What's Available in `@antd-imports`
+
+### Core Components
+- **Layout**: Layout, Row, Col, Flex, Divider, Space
+- **Navigation**: Menu, Tabs, Breadcrumb, Pagination
+- **Data Entry**: Input, Select, DatePicker, TimePicker, Form, Checkbox, InputNumber
+- **Data Display**: Table, List, Card, Tag, Avatar, Badge, Progress, Statistic
+- **Feedback**: Modal, Drawer, Alert, Message, Notification, Spin, Skeleton, Result
+- **Other**: Button, Typography, Tooltip, Popconfirm, Dropdown, ConfigProvider
+
+### Icons
+Common icons including: EditOutlined, DeleteOutlined, PlusOutlined, MoreOutlined, CheckOutlined, CloseOutlined, CalendarOutlined, UserOutlined, TeamOutlined, and many more.
+
+### Utilities
+- **appMessage**: Centralized message utility
+- **appNotification**: Centralized notification utility
+- **antdConfig**: Default Ant Design configuration
+- **taskManagementAntdConfig**: Task-specific configuration
+
+## Implementation Guidelines
+
+### When Creating New Components:
+1. **Always** import from `@antd-imports` or `@/shared/antd-imports`
+2. Use `appMessage` and `appNotification` for user feedback
+3. Apply `antdConfig` for consistent styling
+4. Use `taskManagementAntdConfig` for task-related components
+
+### When Refactoring Existing Code:
+1. Replace direct 'antd' imports with `@antd-imports`
+2. Replace direct '@ant-design/icons' imports with `@antd-imports`
+3. Update any custom message/notification calls to use the utilities
+
+### File Location
+The centralized import file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
+
+## Examples
+
+### Component Creation
+```typescript
+import React from 'react';
+import { Button, Input, Modal, EditOutlined, appMessage } from '@antd-imports';
+
+const MyComponent = () => {
+  const handleClick = () => {
+    appMessage.success('Operation completed!');
+  };
+
+  return (
+    <Button icon={<EditOutlined />} onClick={handleClick}>
+      Edit Item
+    </Button>
+  );
+};
+```
+
+### Form Implementation
+```typescript
+import { Form, Input, Select, Button, DatePicker } from '@antd-imports';
+
+const MyForm = () => {
+  return (
+    <Form layout="vertical">
+      <Form.Item label="Name" name="name">
+        <Input />
+      </Form.Item>
+      <Form.Item label="Type" name="type">
+        <Select options={options} />
+      </Form.Item>
+      <Form.Item label="Date" name="date">
+        <DatePicker />
+      </Form.Item>
+    </Form>
+  );
+};
+```
+
+## Enforcement
+
+This rule is **MANDATORY** and applies to:
+- All new component development
+- All code refactoring
+- All bug fixes
+- All feature implementations
+
+**Violations will result in code review rejection.**
+
+### File Path:
+The centralized file is located at: `worklenz-frontend/src/shared/antd-imports.ts`
--- a/worklenz-frontend/src/components/admin-center/billing/billing-tables/charges-table.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/billing-tables/charges-table.tsx
@@ -27,19 +27,19 @@ const ChargesTable: React.FC = () => {

  const columns: TableProps<IBillingCharge>['columns'] = [
    {
-      title: t('description'),
+      title: t('description') as string,
      key: 'name',
      dataIndex: 'name',
    },
    {
-      title: t('billingPeriod'),
+      title: t('billingPeriod') as string,
      key: 'billingPeriod',
      render: record => {
        return `${formatDate(new Date(record.start_date))} - ${formatDate(new Date(record.end_date))}`;
      },
    },
    {
-      title: t('billStatus'),
+      title: t('billStatus') as string,
      key: 'status',
      dataIndex: 'status',
      render: (_, record) => {
@@ -55,7 +55,7 @@ const ChargesTable: React.FC = () => {
      },
    },
    {
-      title: t('perUserValue'),
+      title: t('perUserValue') as string,
      key: 'perUserValue',
      dataIndex: 'perUserValue',
      render: (_, record) => (
@@ -65,12 +65,12 @@ const ChargesTable: React.FC = () => {
      ),
    },
    {
-      title: t('users'),
+      title: t('users') as string,
      key: 'quantity',
      dataIndex: 'quantity',
    },
    {
-      title: t('amount'),
+      title: t('amount') as string,
      key: 'amount',
      dataIndex: 'amount',
      render: (_, record) => (
--- a/worklenz-frontend/src/components/admin-center/billing/current-bill.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/current-bill.tsx
@@ -1,5 +1,5 @@
-import { Card, Col, Row, Tooltip, Typography } from 'antd';
-import React, { useEffect } from 'react';
+import { Card, Col, Row, Tooltip } from '@/shared/antd-imports';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import './current-bill.css';
 import { InfoCircleTwoTone } from '@ant-design/icons';
 import ChargesTable from './billing-tables/charges-table';
@@ -20,7 +20,7 @@ import AccountStorage from './account-storage/account-storage';
 import { useAuthService } from '@/hooks/useAuth';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';

-const CurrentBill: React.FC = () => {
+const CurrentBill: React.FC = React.memo(() => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation('admin-center/current-bill');
  const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -32,70 +32,90 @@ const CurrentBill: React.FC = () => {
    dispatch(fetchFreePlanSettings());
  }, [dispatch]);

-  const titleStyle = {
-    color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
-    fontWeight: 500,
-    fontSize: '16px',
-    display: 'flex',
-    gap: '4px',
-  };
-
-  const renderMobileView = () => (
-    <div>
-      <Col span={24}>
-        <CurrentPlanDetails />
-      </Col>
-
-      <Col span={24} style={{ marginTop: '1.5rem' }}>
-        <AccountStorage themeMode={themeMode} />
-      </Col>
-    </div>
+  const titleStyle = useMemo(
+    () => ({
+      color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
+      fontWeight: 500,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
  );

-  const renderChargesAndInvoices = () => (
-    <>
-      <div style={{ marginTop: '1.5rem' }}>
-        <Card
-          title={
-            <span style={titleStyle}>
-              <span>{t('charges')}</span>
-              <Tooltip title={t('tooltip')}>
-                <InfoCircleTwoTone />
-              </Tooltip>
-            </span>
-          }
-          style={{ marginTop: '16px' }}
-        >
-          <ChargesTable />
-        </Card>
-      </div>
+  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
+  const colStyle = useMemo(() => ({ marginTop: '1.5rem' }), []);
+  const tabletColStyle = useMemo(() => ({ paddingRight: '10px' }), []);
+  const tabletColStyleRight = useMemo(() => ({ paddingLeft: '10px' }), []);

-      <div style={{ marginTop: '1.5rem' }}>
-        <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
-          <InvoicesTable />
-        </Card>
+  const renderMobileView = useCallback(
+    () => (
+      <div>
+        <Col span={24}>
+          <CurrentPlanDetails />
+        </Col>
+
+        <Col span={24} style={colStyle}>
+          <AccountStorage themeMode={themeMode} />
+        </Col>
      </div>
-    </>
+    ),
+    [colStyle, themeMode]
+  );
+
+  const renderChargesAndInvoices = useCallback(
+    () => (
+      <>
+        <div style={colStyle}>
+          <Card
+            title={
+              <span style={titleStyle}>
+                <span>{t('charges')}</span>
+                <Tooltip title={t('tooltip')}>
+                  <InfoCircleTwoTone />
+                </Tooltip>
+              </span>
+            }
+            style={cardStyle}
+          >
+            <ChargesTable />
+          </Card>
+        </div>
+
+        <div style={colStyle}>
+          <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={cardStyle}>
+            <InvoicesTable />
+          </Card>
+        </div>
+      </>
+    ),
+    [colStyle, titleStyle, cardStyle, t]
+  );
+
+  const shouldShowChargesAndInvoices = useMemo(
+    () => currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE,
+    [currentSession?.subscription_type]
  );

  return (
    <div style={{ width: '100%' }} className="current-billing">
      {isTablet ? (
        <Row>
-          <Col span={16} style={{ paddingRight: '10px' }}>
+          <Col span={16} style={tabletColStyle}>
            <CurrentPlanDetails />
          </Col>
-          <Col span={8} style={{ paddingLeft: '10px' }}>
+          <Col span={8} style={tabletColStyleRight}>
            <AccountStorage themeMode={themeMode} />
          </Col>
        </Row>
      ) : (
        renderMobileView()
      )}
-      {currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
-        renderChargesAndInvoices()}
+      {shouldShowChargesAndInvoices && renderChargesAndInvoices()}
    </div>
  );
-};
+});
+
+CurrentBill.displayName = 'CurrentBill';

 export default CurrentBill;
--- a/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/current-plan-details/current-plan-details.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useMemo, useCallback, useEffect } from 'react';
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import {
  evt_billing_pause_plan,
@@ -17,10 +17,9 @@ import {
  Typography,
  Statistic,
  Select,
-  Form,
  Row,
  Col,
-} from 'antd/es';
+} from '@/shared/antd-imports';
 import RedeemCodeDrawer from '../drawers/redeem-code-drawer/redeem-code-drawer';
 import {
  fetchBillingInfo,
@@ -38,6 +37,21 @@ import UpgradePlans from '../drawers/upgrade-plans/upgrade-plans';
 import { ISUBSCRIPTION_TYPE, SUBSCRIPTION_STATUS } from '@/shared/constants';
 import { billingApiService } from '@/api/admin-center/billing.api.service';

+type SubscriptionAction = 'pause' | 'resume';
+type SeatOption = { label: string; value: number | string };
+
+const SEAT_COUNT_LIMIT = '100+';
+const BILLING_DELAY_MS = 8000;
+const LTD_USER_LIMIT = 50;
+const BUTTON_STYLE = {
+  backgroundColor: '#1890ff',
+  borderColor: '#1890ff',
+};
+const STATISTIC_VALUE_STYLE = {
+  fontSize: '24px',
+  fontWeight: 'bold' as const,
+};
+
 const CurrentPlanDetails = () => {
  const dispatch = useAppDispatch();
  const { t } = useTranslation('admin-center/current-bill');
@@ -47,7 +61,7 @@ const CurrentPlanDetails = () => {
  const [cancellingPlan, setCancellingPlan] = useState(false);
  const [addingSeats, setAddingSeats] = useState(false);
  const [isMoreSeatsModalVisible, setIsMoreSeatsModalVisible] = useState(false);
-  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(5);
+  const [selectedSeatCount, setSelectedSeatCount] = useState<number | string>(1);

  const themeMode = useAppSelector(state => state.themeReducer.mode);
  const { loadingBillingInfo, billingInfo, freePlanSettings, isUpgradeModalOpen } = useAppSelector(
@@ -56,13 +70,15 @@ const CurrentPlanDetails = () => {

  const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
  
-  type SeatOption = { label: string; value: number | string };
-  const seatCountOptions: SeatOption[] = [
-    1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
-  ].map(value => ({ label: value.toString(), value }));
-  seatCountOptions.push({ label: '100+', value: '100+' });
+  const seatCountOptions: SeatOption[] = useMemo(() => {
+    const options: SeatOption[] = [
+      1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
+    ].map(value => ({ label: value.toString(), value }));
+    options.push({ label: SEAT_COUNT_LIMIT, value: SEAT_COUNT_LIMIT });
+    return options;
+  }, []);

-  const handleSubscriptionAction = async (action: 'pause' | 'resume') => {
+  const handleSubscriptionAction = useCallback(async (action: SubscriptionAction) => {
    const isResume = action === 'resume';
    const setLoadingState = isResume ? setCancellingPlan : setPausingPlan;
    const apiMethod = isResume
@@ -78,21 +94,21 @@ const CurrentPlanDetails = () => {
          setLoadingState(false);
          dispatch(fetchBillingInfo());
          trackMixpanelEvent(eventType);
-        }, 8000);
-        return; // Exit function to prevent finally block from executing
+        }, BILLING_DELAY_MS);
+        return;
      }
    } catch (error) {
      logger.error(`Error ${action}ing subscription`, error);
-      setLoadingState(false); // Only set to false on error
+      setLoadingState(false);
    }
-  };
+  }, [dispatch, trackMixpanelEvent]);

-  const handleAddMoreSeats = () => {
+  const handleAddMoreSeats = useCallback(() => {
    setIsMoreSeatsModalVisible(true);
-  };
+  }, []);

-  const handlePurchaseMoreSeats = async () => {
-    if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
+  const handlePurchaseMoreSeats = useCallback(async () => {
+    if (selectedSeatCount.toString() === SEAT_COUNT_LIMIT || !billingInfo?.total_seats) return;

    try {
      setAddingSeats(true);
@@ -108,51 +124,75 @@ const CurrentPlanDetails = () => {
    } finally {
      setAddingSeats(false);
    }
-  };
+  }, [selectedSeatCount, billingInfo?.total_seats, dispatch, trackMixpanelEvent]);

-  const calculateRemainingSeats = () => {
+  const calculateRemainingSeats = useMemo(() => {
    if (billingInfo?.total_seats && billingInfo?.total_used) {
      return billingInfo.total_seats - billingInfo.total_used;
    }
    return 0;
-  };
+  }, [billingInfo?.total_seats, billingInfo?.total_used]);

-  const checkSubscriptionStatus = (allowedStatuses: any[]) => {
+  // Calculate intelligent default for seat selection based on current usage
+  const getDefaultSeatCount = useMemo(() => {
+    const currentUsed = billingInfo?.total_used || 0;
+    const availableSeats = calculateRemainingSeats;
+    
+    // If only 1 user and no available seats, suggest 1 additional seat
+    if (currentUsed === 1 && availableSeats === 0) {
+      return 1;
+    }
+    
+    // If they have some users but running low on seats, suggest enough for current users
+    if (availableSeats < currentUsed && currentUsed > 0) {
+      return Math.max(1, currentUsed - availableSeats);
+    }
+    
+    // Default fallback
+    return Math.max(1, Math.min(5, currentUsed || 1));
+  }, [billingInfo?.total_used, calculateRemainingSeats]);
+
+  // Update selected seat count when billing info changes
+  useEffect(() => {
+    setSelectedSeatCount(getDefaultSeatCount);
+  }, [getDefaultSeatCount]);
+
+  const checkSubscriptionStatus = useCallback((allowedStatuses: string[]) => {
    if (!billingInfo?.status || billingInfo.is_ltd_user) return false;
    return allowedStatuses.includes(billingInfo.status);
-  };
+  }, [billingInfo?.status, billingInfo?.is_ltd_user]);

-  const shouldShowRedeemButton = () => {
+  const shouldShowRedeemButton = useMemo(() => {
    if (billingInfo?.trial_in_progress) return true;
-    return billingInfo?.ltd_users ? billingInfo.ltd_users < 50 : false;
-  };
+    return billingInfo?.ltd_users ? billingInfo.ltd_users < LTD_USER_LIMIT : false;
+  }, [billingInfo?.trial_in_progress, billingInfo?.ltd_users]);

-  const showChangeButton = () => {
+  const showChangeButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);

-  const showPausePlanButton = () => {
+  const showPausePlanButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);

-  const showResumePlanButton = () => {
+  const showResumePlanButton = useMemo(() => {
    return checkSubscriptionStatus([SUBSCRIPTION_STATUS.PAUSED]);
-  };
+  }, [checkSubscriptionStatus]);

-  const shouldShowAddSeats = () => {
+  const shouldShowAddSeats = useMemo(() => {
    if (!billingInfo) return false;
    return (
      billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
      billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
    );
-  };
+  }, [billingInfo]);

-  const renderExtra = () => {
+  const renderExtra = useCallback(() => {
    if (!billingInfo || billingInfo.is_custom) return null;

    return (
      <Space>
-        {showPausePlanButton() && (
+        {showPausePlanButton && (
          <Button
            type="link"
            danger
@@ -163,7 +203,7 @@ const CurrentPlanDetails = () => {
          </Button>
        )}

-        {showResumePlanButton() && (
+        {showResumePlanButton && (
          <Button
            type="primary"
            loading={cancellingPlan}
@@ -179,7 +219,7 @@ const CurrentPlanDetails = () => {
          </Button>
        )}

-        {showChangeButton() && (
+        {showChangeButton && (
          <Button
            type="primary"
            loading={pausingPlan || cancellingPlan}
@@ -190,9 +230,19 @@ const CurrentPlanDetails = () => {
        )}
      </Space>
    );
-  };
+  }, [
+    billingInfo,
+    showPausePlanButton,
+    showResumePlanButton,
+    showChangeButton,
+    pausingPlan,
+    cancellingPlan,
+    handleSubscriptionAction,
+    dispatch,
+    t,
+  ]);

-  const renderLtdDetails = () => {
+  const renderLtdDetails = useCallback(() => {
    if (!billingInfo || billingInfo.is_custom) return null;
    return (
      <Flex vertical>
@@ -200,41 +250,41 @@ const CurrentPlanDetails = () => {
        <Typography.Text>{t('ltdUsers', { ltd_users: billingInfo.ltd_users })}</Typography.Text>
      </Flex>
    );
-  };
+  }, [billingInfo, t]);

-  const renderTrialDetails = () => {
-    const checkIfTrialExpired = () => {
-      if (!billingInfo?.trial_expire_date) return false;
-      const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
-      const trialExpireDate = new Date(billingInfo.trial_expire_date);
-      trialExpireDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
-      return today > trialExpireDate;
-    };
+  const checkIfTrialExpired = useCallback(() => {
+    if (!billingInfo?.trial_expire_date) return false;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const trialExpireDate = new Date(billingInfo.trial_expire_date);
+    trialExpireDate.setHours(0, 0, 0, 0);
+    return today > trialExpireDate;
+  }, [billingInfo?.trial_expire_date]);

-    const getExpirationMessage = (expireDate: string) => {
-      const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+  const getExpirationMessage = useCallback((expireDate: string) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);

-      const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);

-      const expDate = new Date(expireDate);
-      expDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    const expDate = new Date(expireDate);
+    expDate.setHours(0, 0, 0, 0);

-      if (expDate.getTime() === today.getTime()) {
-        return t('expirestoday', 'today');
-      } else if (expDate.getTime() === tomorrow.getTime()) {
-        return t('expirestomorrow', 'tomorrow');
-      } else if (expDate < today) {
-        const diffTime = Math.abs(today.getTime() - expDate.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-        return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
-      } else {
-        return calculateTimeGap(expireDate);
-      }
-    };
+    if (expDate.getTime() === today.getTime()) {
+      return t('expirestoday', 'today');
+    } else if (expDate.getTime() === tomorrow.getTime()) {
+      return t('expirestomorrow', 'tomorrow');
+    } else if (expDate < today) {
+      const diffTime = Math.abs(today.getTime() - expDate.getTime());
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
+    } else {
+      return calculateTimeGap(expireDate);
+    }
+  }, [t]);

+  const renderTrialDetails = useCallback(() => {
    const isExpired = checkIfTrialExpired();
    const trialExpireDate = billingInfo?.trial_expire_date || '';

@@ -257,9 +307,9 @@ const CurrentPlanDetails = () => {
        </Tooltip>
      </Flex>
    );
-  };
+  }, [billingInfo?.trial_expire_date, checkIfTrialExpired, getExpirationMessage, t]);

-  const renderFreePlan = () => (
+  const renderFreePlan = useCallback(() => (
    <Flex vertical>
      <Typography.Text strong>{t('freePlan')}</Typography.Text>
      <Typography.Text>
@@ -271,9 +321,9 @@ const CurrentPlanDetails = () => {
        <br />- {freePlanSettings?.free_tier_storage} MB {t('storage')}
      </Typography.Text>
    </Flex>
-  );
+  ), [freePlanSettings, t]);

-  const renderPaddleSubscriptionInfo = () => {
+  const renderPaddleSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{billingInfo?.plan_name}</Typography.Text>
@@ -287,14 +337,14 @@ const CurrentPlanDetails = () => {
          </Typography.Text>
        </Flex>

-        {shouldShowAddSeats() && billingInfo?.total_seats && (
+        {shouldShowAddSeats && billingInfo?.total_seats && (
          <div style={{ marginTop: '16px' }}>
            <Row gutter={16} align="middle">
              <Col span={6}>
                <Statistic
-                  title={t('totalSeats')}
+                  title={t('totalSeats') as string}
                  value={billingInfo.total_seats}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                />
              </Col>
              <Col span={8}>
@@ -302,16 +352,16 @@ const CurrentPlanDetails = () => {
                  type="primary"
                  icon={<PlusOutlined />}
                  onClick={handleAddMoreSeats}
-                  style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
+                  style={BUTTON_STYLE}
                >
                  {t('addMoreSeats')}
                </Button>
              </Col>
              <Col span={6}>
                <Statistic
-                  title={t('availableSeats')}
-                  value={calculateRemainingSeats()}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  title={t('availableSeats') as string}
+                  value={calculateRemainingSeats}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                />
              </Col>
            </Row>
@@ -319,17 +369,17 @@ const CurrentPlanDetails = () => {
        )}
      </Flex>
    );
-  };
+  }, [billingInfo, shouldShowAddSeats, handleAddMoreSeats, calculateRemainingSeats, t]);

-  const renderCreditSubscriptionInfo = () => {
+  const renderCreditSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
      </Flex>
    );
-  };
+  }, [t]);

-  const renderCustomSubscriptionInfo = () => {
+  const renderCustomSubscriptionInfo = useCallback(() => {
    return (
      <Flex vertical>
        <Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
@@ -340,7 +390,36 @@ const CurrentPlanDetails = () => {
        </Typography.Text>
      </Flex>
    );
-  };
+  }, [billingInfo?.valid_till_date, t]);
+
+  const renderSubscriptionContent = useCallback(() => {
+    if (!billingInfo) return null;
+
+    switch (billingInfo.subscription_type) {
+      case ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL:
+        return renderLtdDetails();
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return renderTrialDetails();
+      case ISUBSCRIPTION_TYPE.FREE:
+        return renderFreePlan();
+      case ISUBSCRIPTION_TYPE.PADDLE:
+        return renderPaddleSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CREDIT:
+        return renderCreditSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return renderCustomSubscriptionInfo();
+      default:
+        return null;
+    }
+  }, [
+    billingInfo,
+    renderLtdDetails,
+    renderTrialDetails,
+    renderFreePlan,
+    renderPaddleSubscriptionInfo,
+    renderCreditSubscriptionInfo,
+    renderCustomSubscriptionInfo,
+  ]);

  return (
    <Card
@@ -361,19 +440,10 @@ const CurrentPlanDetails = () => {
    >
      <Flex vertical>
        <div style={{ marginBottom: '14px' }}>
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL &&
-            renderLtdDetails()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.TRIAL && renderTrialDetails()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.FREE && renderFreePlan()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
-            renderPaddleSubscriptionInfo()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
-            renderCreditSubscriptionInfo()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
-            renderCustomSubscriptionInfo()}
+          {renderSubscriptionContent()}
        </div>

-        {shouldShowRedeemButton() && (
+        {shouldShowRedeemButton && (
          <>
            <Button
              type="link"
@@ -408,17 +478,28 @@ const CurrentPlanDetails = () => {
            <Typography.Paragraph
              style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
            >
-              {t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")}
+              {billingInfo?.total_used === 1 
+                ? t('purchaseSeatsTextSingle', "Add more seats to invite team members to your workspace.")
+                : t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")
+              }
            </Typography.Paragraph>

            <Typography.Paragraph style={{ margin: '0 0 16px 0' }}>
              {t('currentSeatsText', 'You currently have {{seats}} seats available.', {
                seats: billingInfo?.total_seats,
              })}
+              {billingInfo?.total_used === 1 && (
+                <span style={{ color: '#666', marginLeft: '8px' }}>
+                  ({t('singleUserNote', 'Currently used by 1 team member')})
+                </span>
+              )}
            </Typography.Paragraph>

            <Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
-              {t('selectSeatsText', 'Please select the number of additional seats to purchase.')}
+              {billingInfo?.total_used === 1
+                ? t('selectSeatsTextSingle', 'Select how many additional seats you need for new team members.')
+                : t('selectSeatsText', 'Please select the number of additional seats to purchase.')
+              }
            </Typography.Paragraph>

            <div style={{ marginBottom: '24px' }}>
@@ -430,18 +511,18 @@ const CurrentPlanDetails = () => {
                options={seatCountOptions}
                style={{ width: '300px' }}
              />
+
            </div>

            <Flex justify="end">
-              {selectedSeatCount.toString() !== '100+' ? (
+              {selectedSeatCount.toString() !== SEAT_COUNT_LIMIT ? (
                <Button
                  type="primary"
                  loading={addingSeats}
                  onClick={handlePurchaseMoreSeats}
                  style={{
                    minWidth: '100px',
-                    backgroundColor: '#1890ff',
-                    borderColor: '#1890ff',
+                    ...BUTTON_STYLE,
                    borderRadius: '2px',
                  }}
                >
--- a/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
+++ b/worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.tsx
@@ -11,7 +11,7 @@ import {
  Tooltip,
  Typography,
  message,
-} from 'antd/es';
+} from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';

 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
@@ -69,16 +69,27 @@ const UpgradePlans = () => {

    const step = 5;
    const maxSeats = 90;
-    const minValue = Math.min(currentSeats + 1);
+    const minValue = Math.max(1, currentSeats + 1); // Start from 1 or currentSeats + 1, whichever is higher
    const rangeStart = Math.ceil(minValue / step) * step;
    const range = Array.from(
      { length: Math.floor((maxSeats - rangeStart) / step) + 1 },
      (_, i) => rangeStart + i * step
    );

-    return currentSeats < step
-      ? [...Array.from({ length: rangeStart - minValue }, (_, i) => minValue + i), ...range]
-      : range;
+    // Always include 1 as the first option
+    const options = [1];
+    
+    if (currentSeats < step) {
+      // Add individual numbers from minValue to rangeStart
+      for (let i = Math.max(2, minValue); i < rangeStart; i++) {
+        options.push(i);
+      }
+    }
+    
+    // Add the range of step-based numbers
+    options.push(...range);
+    
+    return options;
  };

  const fetchPricingPlans = async () => {
@@ -343,14 +354,14 @@ const UpgradePlans = () => {
      <Flex justify="center" align="center">
        <Typography.Title level={2}>
          {billingInfo?.status === SUBSCRIPTION_STATUS.TRIALING
-            ? t('selectPlan')
-            : t('changeSubscriptionPlan')}
+            ? t('selectPlan', 'Select Plan')
+            : t('changeSubscriptionPlan', 'Change Subscription Plan')}
        </Typography.Title>
      </Flex>

      <Flex justify="center" align="center">
        <Form form={form}>
-          <Form.Item name="seatCount" label={t('noOfSeats')}>
+          <Form.Item name="seatCount" label={t('noOfSeats', 'Number of Seats')}>
            <Select
              style={{ width: 100 }}
              value={selectedSeatCount}
@@ -371,25 +382,25 @@ const UpgradePlans = () => {
            <Card
              style={{ ...isSelected(paddlePlans.FREE), height: '100%' }}
              hoverable
-              title={<span style={cardStyles.title}>{t('freePlan')}</span>}
+              title={<span style={cardStyles.title}>{t('freePlan', 'Free Plan')}</span>}
              onClick={() => setSelectedCard(paddlePlans.FREE)}
            >
              <div style={cardStyles.priceContainer}>
                <Flex justify="space-between" align="center">
                  <Typography.Title level={1}>$ 0.00</Typography.Title>
-                  <Typography.Text>{t('freeForever')}</Typography.Text>
+                  <Typography.Text>{t('freeForever', 'Free Forever')}</Typography.Text>
                </Flex>
                <Flex justify="center" align="center">
                  <Typography.Text strong style={{ fontSize: '16px' }}>
-                    {t('bestForPersonalUse')}
+                    {t('bestForPersonalUse', 'Best for Personal Use')}
                  </Typography.Text>
                </Flex>
              </div>

              <div style={cardStyles.featureList}>
-                {renderFeature(`${plans.free_tier_storage} ${t('storage')}`)}
-                {renderFeature(`${plans.projects_limit} ${t('projects')}`)}
-                {renderFeature(`${plans.team_member_limit} ${t('teamMembers')}`)}
+                {renderFeature(`${plans.free_tier_storage} ${t('storage', 'Storage')}`)}
+                {renderFeature(`${plans.projects_limit} ${t('projects', 'Projects')}`)}
+                {renderFeature(`${plans.team_member_limit} ${t('teamMembers', 'Team Members')}`)}
              </div>
            </Card>
          </Col>
@@ -401,9 +412,9 @@ const UpgradePlans = () => {
              hoverable
              title={
                <span style={cardStyles.title}>
-                  {t('annualPlan')}{' '}
+                  {t('annualPlan', 'Annual Plan')}{' '}
                  <Tag color="volcano" style={{ lineHeight: '21px' }}>
-                    {t('tag')}
+                    {t('tag', 'Popular')}
                  </Tag>
                </span>
              }
@@ -429,16 +440,16 @@ const UpgradePlans = () => {
                  </Typography.Text>
                </Flex>
                <Flex justify="center" align="center">
-                  <Typography.Text>{t('billedAnnually')}</Typography.Text>
+                  <Typography.Text>{t('billedAnnually', 'Billed Annually')}</Typography.Text>
                </Flex>
              </div>

              <div style={cardStyles.featureList} className="mt-4">
-                {renderFeature(t('startupText01'))}
-                {renderFeature(t('startupText02'))}
-                {renderFeature(t('startupText03'))}
-                {renderFeature(t('startupText04'))}
-                {renderFeature(t('startupText05'))}
+                {renderFeature(t('startupText01', 'Unlimited Projects'))}
+                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
+                {renderFeature(t('startupText03', 'Unlimited Storage'))}
+                {renderFeature(t('startupText04', 'Priority Support'))}
+                {renderFeature(t('startupText05', 'Advanced Analytics'))}
              </div>
            </Card>
          </Col>
--- a/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
+++ b/worklenz-frontend/src/components/admin-center/configuration/configuration.tsx
@@ -1,5 +1,5 @@
-import { Button, Card, Col, Divider, Form, Input, notification, Row, Select } from 'antd';
-import React, { useEffect, useState } from 'react';
+import { Button, Card, Col, Divider, Form, Input, Row, Select } from '@/shared/antd-imports';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { RootState } from '../../../app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { IBillingConfigurationCountry } from '@/types/admin-center/country.types';
@@ -7,14 +7,15 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingConfiguration } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';

-const Configuration: React.FC = () => {
+const Configuration: React.FC = React.memo(() => {
  const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);

  const [countries, setCountries] = useState<IBillingConfigurationCountry[]>([]);
  const [configuration, setConfiguration] = useState<IBillingConfiguration>();
  const [loading, setLoading] = useState(false);
  const [form] = Form.useForm();
-  const fetchCountries = async () => {
+
+  const fetchCountries = useCallback(async () => {
    try {
      const res = await adminCenterApiService.getCountries();
      if (res.done) {
@@ -23,61 +24,85 @@ const Configuration: React.FC = () => {
    } catch (error) {
      logger.error('Error fetching countries:', error);
    }
-  };
+  }, []);

-  const fetchConfiguration = async () => {
+  const fetchConfiguration = useCallback(async () => {
    const res = await adminCenterApiService.getBillingConfiguration();
    if (res.done) {
      setConfiguration(res.body);
      form.setFieldsValue(res.body);
    }
-  };
+  }, [form]);

  useEffect(() => {
    fetchCountries();
    fetchConfiguration();
-  }, []);
+  }, [fetchCountries, fetchConfiguration]);

-  const handleSave = async (values: any) => {
-    try {
-      setLoading(true);
-      const res = await adminCenterApiService.updateBillingConfiguration(values);
-      if (res.done) {
-        fetchConfiguration();
+  const handleSave = useCallback(
+    async (values: any) => {
+      try {
+        setLoading(true);
+        const res = await adminCenterApiService.updateBillingConfiguration(values);
+        if (res.done) {
+          fetchConfiguration();
+        }
+      } catch (error) {
+        logger.error('Error updating configuration:', error);
+      } finally {
+        setLoading(false);
      }
-    } catch (error) {
-      logger.error('Error updating configuration:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+    [fetchConfiguration]
+  );

-  const countryOptions = countries.map(country => ({
-    label: country.name,
-    value: country.id,
-  }));
+  const countryOptions = useMemo(
+    () =>
+      countries.map(country => ({
+        label: country.name,
+        value: country.id,
+      })),
+    [countries]
+  );
+
+  const titleStyle = useMemo(
+    () => ({
+      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+      fontWeight: 500,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
+  );
+
+  const dividerTitleStyle = useMemo(
+    () => ({
+      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+      fontWeight: 600,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
+  );
+
+  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
+  const colStyle = useMemo(() => ({ padding: '0 12px', height: '86px' }), []);
+  const dividerStyle = useMemo(() => ({ margin: '16px 0' }), []);
+  const buttonColStyle = useMemo(() => ({ paddingLeft: '12px' }), []);
+
+  const handlePhoneInput = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    input.value = input.value.replace(/[^0-9]/g, '');
+  }, []);

  return (
    <div>
-      <Card
-        title={
-          <span
-            style={{
-              color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-              fontWeight: 500,
-              fontSize: '16px',
-              display: 'flex',
-              gap: '4px',
-            }}
-          >
-            Billing Details
-          </span>
-        }
-        style={{ marginTop: '16px' }}
-      >
+      <Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
        <Form form={form} initialValues={configuration} onFinish={handleSave}>
          <Row>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item
                name="name"
                label="Name"
@@ -88,10 +113,10 @@ const Configuration: React.FC = () => {
                  },
                ]}
              >
-                <Input placeholder="Name" />
+                <Input placeholder="Name" disabled />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item
                name="email"
                label="Email Address"
@@ -102,10 +127,10 @@ const Configuration: React.FC = () => {
                  },
                ]}
              >
-                <Input placeholder="Name" disabled />
+                <Input placeholder="Email Address" disabled />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item
                name="phone"
                label="Contact Number"
@@ -117,58 +142,34 @@ const Configuration: React.FC = () => {
                  },
                ]}
              >
-                <Input
-                  placeholder="Phone Number"
-                  maxLength={10}
-                  onInput={e => {
-                    const input = e.target as HTMLInputElement; // Type assertion to access 'value'
-                    input.value = input.value.replace(/[^0-9]/g, ''); // Restrict non-numeric input
-                  }}
-                />
+                <Input placeholder="Phone Number" maxLength={10} onInput={handlePhoneInput} />
              </Form.Item>
            </Col>
          </Row>

-          <Divider orientation="left" style={{ margin: '16px 0' }}>
-            <span
-              style={{
-                color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-                fontWeight: 600,
-                fontSize: '16px',
-                display: 'flex',
-                gap: '4px',
-              }}
-            >
-              Company Details
-            </span>
+          <Divider orientation="left" style={dividerStyle}>
+            <span style={dividerTitleStyle}>Company Details</span>
          </Divider>

          <Row>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="company_name" label="Company Name" layout="vertical">
                <Input placeholder="Company Name" />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="address_line_1" label="Address Line 01" layout="vertical">
                <Input placeholder="Address Line 01" />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="address_line_2" label="Address Line 02" layout="vertical">
                <Input placeholder="Address Line 02" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
-            <Col
-              span={8}
-              style={{
-                padding: '0 12px',
-                height: '86px',
-                scrollbarColor: 'red',
-              }}
-            >
+            <Col span={8} style={colStyle}>
              <Form.Item name="country" label="Country" layout="vertical">
                <Select
                  dropdownStyle={{ maxHeight: 256, overflow: 'auto' }}
@@ -181,28 +182,28 @@ const Configuration: React.FC = () => {
                />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="city" label="City" layout="vertical">
                <Input placeholder="City" />
              </Form.Item>
            </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="state" label="State" layout="vertical">
                <Input placeholder="State" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col span={8} style={colStyle}>
              <Form.Item name="postal_code" label="Postal Code" layout="vertical">
                <Input placeholder="Postal Code" />
              </Form.Item>
            </Col>
          </Row>
          <Row>
-            <Col style={{ paddingLeft: '12px' }}>
+            <Col style={buttonColStyle}>
              <Form.Item>
-                <Button type="primary" htmlType="submit">
+                <Button type="primary" htmlType="submit" loading={loading}>
                  Save
                </Button>
              </Form.Item>
@@ -212,6 +213,8 @@ const Configuration: React.FC = () => {
      </Card>
    </div>
  );
-};
+});
+
+Configuration.displayName = 'Configuration';

 export default Configuration;
--- a/worklenz-frontend/src/pages/admin-center/billing/billing.tsx
+++ b/worklenz-frontend/src/pages/admin-center/billing/billing.tsx
@@ -1,32 +1,39 @@
 import { PageHeader } from '@ant-design/pro-components';
-import { Tabs, TabsProps } from 'antd';
-import React from 'react';
+import { Tabs, TabsProps } from '@/shared/antd-imports';
+import React, { useMemo } from 'react';
 import CurrentBill from '@/components/admin-center/billing/current-bill';
 import Configuration from '@/components/admin-center/configuration/configuration';
 import { useTranslation } from 'react-i18next';

-const Billing: React.FC = () => {
+const Billing: React.FC = React.memo(() => {
  const { t } = useTranslation('admin-center/current-bill');

-  const items: TabsProps['items'] = [
-    {
-      key: '1',
-      label: t('currentBill'),
-      children: <CurrentBill />,
-    },
-    {
-      key: '2',
-      label: t('configuration'),
-      children: <Configuration />,
-    },
-  ];
+  const items: TabsProps['items'] = useMemo(
+    () => [
+      {
+        key: '1',
+        label: t('currentBill'),
+        children: <CurrentBill />,
+      },
+      {
+        key: '2',
+        label: t('configuration'),
+        children: <Configuration />,
+      },
+    ],
+    [t]
+  );
+
+  const pageHeaderStyle = useMemo(() => ({ padding: '16px 0' }), []);

  return (
    <div style={{ width: '100%' }}>
-      <PageHeader title={<span>{t('title')}</span>} style={{ padding: '16px 0' }} />
-      <Tabs defaultActiveKey="1" items={items} destroyInactiveTabPane />
+      <PageHeader title={<span>{t('title')}</span>} style={pageHeaderStyle} />
+      <Tabs defaultActiveKey="1" items={items} destroyOnHidden />
    </div>
  );
-};
+});
+
+Billing.displayName = 'Billing';

 export default Billing;
--- a/worklenz-frontend/src/shared/antd-imports.ts
+++ b/worklenz-frontend/src/shared/antd-imports.ts
@@ -50,6 +50,7 @@ import {
  message,
  notification,
  theme,
+  Statistic,
 } from 'antd';

 // Icons - Import commonly used ones
@@ -145,6 +146,7 @@ export {
  message,
  notification,
  theme,
+  Statistic,
 };

 // TypeScript Types - Import commonly used ones