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.

.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`

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) => (

worklenz-frontend/src/components/admin-center/billing/current-bill.tsx

@@ -1,5 +1,5 @@
-import { Card, Col, Row, Tooltip, Typography } from 'antd';
+import { Card, Col, Row, Tooltip } from '@/shared/antd-imports';
-import React, { useEffect } from 'react';
+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 = {
+  const titleStyle = useMemo(
-    color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
+    () => ({
-    fontWeight: 500,
+      color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
-    fontSize: '16px',
+      fontWeight: 500,
-    display: 'flex',
+      fontSize: '16px',
-    gap: '4px',
+      display: 'flex',
-  };
+      gap: '4px',
-
+    }),
-  const renderMobileView = () => (
+    [themeMode]
-    <div>
-      <Col span={24}>
-        <CurrentPlanDetails />
-      </Col>
-
-      <Col span={24} style={{ marginTop: '1.5rem' }}>
-        <AccountStorage themeMode={themeMode} />
-      </Col>
-    </div>
   );
 
-  const renderChargesAndInvoices = () => (
+  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
-    <>
+  const colStyle = useMemo(() => ({ marginTop: '1.5rem' }), []);
-      <div style={{ marginTop: '1.5rem' }}>
+  const tabletColStyle = useMemo(() => ({ paddingRight: '10px' }), []);
-        <Card
+  const tabletColStyleRight = useMemo(() => ({ paddingLeft: '10px' }), []);
-          title={
-            <span style={titleStyle}>
-              <span>{t('charges')}</span>
-              <Tooltip title={t('tooltip')}>
-                <InfoCircleTwoTone />
-              </Tooltip>
-            </span>
-          }
-          style={{ marginTop: '16px' }}
-        >
-          <ChargesTable />
-        </Card>
-      </div>
 
-      <div style={{ marginTop: '1.5rem' }}>
+  const renderMobileView = useCallback(
-        <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
+    () => (
-          <InvoicesTable />
+      <div>
-        </Card>
+        <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 &&
+      {shouldShowChargesAndInvoices && renderChargesAndInvoices()}
-        renderChargesAndInvoices()}
     </div>
   );
-};
+});
+
+CurrentBill.displayName = 'CurrentBill';
 
 export default CurrentBill;

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(
@@ -55,14 +69,16 @@ const CurrentPlanDetails = () => {
   );
 
   const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  
+  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;
+  }, []);
 
-  type SeatOption = { label: string; value: number | string };
+  const handleSubscriptionAction = useCallback(async (action: SubscriptionAction) => {
-  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 handleSubscriptionAction = async (action: 'pause' | 'resume') => {
     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);
+        }, BILLING_DELAY_MS);
-        return; // Exit function to prevent finally block from executing
+        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 () => {
+  const handlePurchaseMoreSeats = useCallback(async () => {
-    if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
+    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 = useCallback(() => {
-    const checkIfTrialExpired = () => {
+    if (!billingInfo?.trial_expire_date) return false;
-      if (!billingInfo?.trial_expire_date) return false;
+    const today = new Date();
-      const today = new Date();
+    today.setHours(0, 0, 0, 0);
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    const trialExpireDate = new Date(billingInfo.trial_expire_date);
-      const trialExpireDate = new Date(billingInfo.trial_expire_date);
+    trialExpireDate.setHours(0, 0, 0, 0);
-      trialExpireDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    return today > trialExpireDate;
-      return today > trialExpireDate;
+  }, [billingInfo?.trial_expire_date]);
-    };
 
-    const getExpirationMessage = (expireDate: string) => {
+  const getExpirationMessage = useCallback((expireDate: string) => {
-      const today = new Date();
+    const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    today.setHours(0, 0, 0, 0);
 
-      const tomorrow = new Date(today);
+    const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
+    tomorrow.setDate(tomorrow.getDate() + 1);
 
-      const expDate = new Date(expireDate);
+    const expDate = new Date(expireDate);
-      expDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    expDate.setHours(0, 0, 0, 0);
 
-      if (expDate.getTime() === today.getTime()) {
+    if (expDate.getTime() === today.getTime()) {
-        return t('expirestoday', 'today');
+      return t('expirestoday', 'today');
-      } else if (expDate.getTime() === tomorrow.getTime()) {
+    } else if (expDate.getTime() === tomorrow.getTime()) {
-        return t('expirestomorrow', 'tomorrow');
+      return t('expirestomorrow', 'tomorrow');
-      } else if (expDate < today) {
+    } else if (expDate < today) {
-        const diffTime = Math.abs(today.getTime() - expDate.getTime());
+      const diffTime = Math.abs(today.getTime() - expDate.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-        return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
+      return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
-      } else {
+    } else {
-        return calculateTimeGap(expireDate);
+      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')}
+                  title={t('availableSeats') as string}
-                  value={calculateRemainingSeats()}
+                  value={calculateRemainingSeats}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  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 &&
+          {renderSubscriptionContent()}
-            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()}
         </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',
+                    ...BUTTON_STYLE,
-                    borderColor: '#1890ff',
                     borderRadius: '2px',
                   }}
                 >

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
+    // Always include 1 as the first option
-      ? [...Array.from({ length: rangeStart - minValue }, (_, i) => minValue + i), ...range]
+    const options = [1];
-      : range;
+    
+    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('selectPlan', 'Select Plan')
-            : t('changeSubscriptionPlan')}
+            : 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.free_tier_storage} ${t('storage', 'Storage')}`)}
-                {renderFeature(`${plans.projects_limit} ${t('projects')}`)}
+                {renderFeature(`${plans.projects_limit} ${t('projects', 'Projects')}`)}
-                {renderFeature(`${plans.team_member_limit} ${t('teamMembers')}`)}
+                {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('startupText01', 'Unlimited Projects'))}
-                {renderFeature(t('startupText02'))}
+                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
-                {renderFeature(t('startupText03'))}
+                {renderFeature(t('startupText03', 'Unlimited Storage'))}
-                {renderFeature(t('startupText04'))}
+                {renderFeature(t('startupText04', 'Priority Support'))}
-                {renderFeature(t('startupText05'))}
+                {renderFeature(t('startupText05', 'Advanced Analytics'))}
               </div>
             </Card>
           </Col>

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 { Button, Card, Col, Divider, Form, Input, Row, Select } from '@/shared/antd-imports';
-import React, { useEffect, useState } from 'react';
+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) => {
+  const handleSave = useCallback(
-    try {
+    async (values: any) => {
-      setLoading(true);
+      try {
-      const res = await adminCenterApiService.updateBillingConfiguration(values);
+        setLoading(true);
-      if (res.done) {
+        const res = await adminCenterApiService.updateBillingConfiguration(values);
-        fetchConfiguration();
+        if (res.done) {
+          fetchConfiguration();
+        }
+      } catch (error) {
+        logger.error('Error updating configuration:', error);
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
+    },
-      logger.error('Error updating configuration:', error);
+    [fetchConfiguration]
-    } finally {
+  );
-      setLoading(false);
-    }
-  };
 
-  const countryOptions = countries.map(country => ({
+  const countryOptions = useMemo(
-    label: country.name,
+    () =>
-    value: country.id,
+      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
+      <Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
-        title={
-          <span
-            style={{
-              color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-              fontWeight: 500,
-              fontSize: '16px',
-              display: 'flex',
-              gap: '4px',
-            }}
-          >
-            Billing Details
-          </span>
-        }
-        style={{ marginTop: '16px' }}
-      >
         <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
+                <Input placeholder="Phone Number" maxLength={10} onInput={handlePhoneInput} />
-                  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
-                  }}
-                />
               </Form.Item>
             </Col>
           </Row>
 
-          <Divider orientation="left" style={{ margin: '16px 0' }}>
+          <Divider orientation="left" style={dividerStyle}>
-            <span
+            <span style={dividerTitleStyle}>Company Details</span>
-              style={{
-                color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-                fontWeight: 600,
-                fontSize: '16px',
-                display: 'flex',
-                gap: '4px',
-              }}
-            >
-              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
+            <Col span={8} style={colStyle}>
-              span={8}
-              style={{
-                padding: '0 12px',
-                height: '86px',
-                scrollbarColor: 'red',
-              }}
-            >
               <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;

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 { Tabs, TabsProps } from '@/shared/antd-imports';
-import React from 'react';
+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'] = [
+  const items: TabsProps['items'] = useMemo(
-    {
+    () => [
-      key: '1',
+      {
-      label: t('currentBill'),
+        key: '1',
-      children: <CurrentBill />,
+        label: t('currentBill'),
-    },
+        children: <CurrentBill />,
-    {
+      },
-      key: '2',
+      {
-      label: t('configuration'),
+        key: '2',
-      children: <Configuration />,
+        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' }} />
+      <PageHeader title={<span>{t('title')}</span>} style={pageHeaderStyle} />
-      <Tabs defaultActiveKey="1" items={items} destroyInactiveTabPane />
+      <Tabs defaultActiveKey="1" items={items} destroyOnHidden />
     </div>
   );
-};
+});
+
+Billing.displayName = 'Billing';
 
 export default Billing;

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