Merge branches 'feature/guest-user' and 'main' of https://github.com/Worklenz/worklenz into feature/guest-user

Development

.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 `@/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 `@/shared/antd-imports`
+2. Replace direct '@ant-design/icons' imports with `@/shared/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`

.cursor/rules/general-coding-guidelines.md

@@ -0,0 +1,131 @@
+# General Coding Guidelines
+
+## Rule Summary
+Follow these rules when you write code:
+
+1. **Use Early Returns**
+   - Prefer early returns and guard clauses to reduce nesting and improve readability, especially for error handling.
+
+2. **Tailwind for Styling**
+   - Always use Tailwind CSS utility classes for styling HTML elements.
+   - Avoid writing custom CSS or using inline `style` tags.
+
+3. **Class Tag Syntax**
+   - Use `class:` directive (e.g., `class:active={isActive}`) instead of the ternary operator in class tags whenever possible.
+
+4. **Descriptive Naming**
+   - Use clear, descriptive names for variables, functions, and constants.
+   - Use auxiliary verbs for booleans and state (e.g., `isLoaded`, `hasError`, `shouldRender`).
+   - Event handler functions should be prefixed with `handle`, e.g., `handleClick` for `onClick`, `handleKeyDown` for `onKeyDown`.
+
+5. **Naming Conventions**
+   - **Directories:** Use lowercase with dashes (e.g., `components/auth-wizard`).
+   - **Variables & Functions:** Use `camelCase` (e.g., `userList`, `fetchData`).
+   - **Types & Interfaces:** Use `PascalCase` (e.g., `User`, `ButtonProps`).
+   - **Exports:** Favor named exports for components.
+   - **No Unused Variables:** Remove unused variables and imports.
+
+6. **File Layout**
+   - Order: exported component → subcomponents → hooks/helpers → static content.
+
+7. **Props & Types**
+   - Define props with TypeScript `interface` or `type`, not `prop-types`.
+   - Example:
+     ```ts
+     interface ButtonProps {
+       label: string;
+       onClick?: () => void;
+     }
+
+     export function Button({ label, onClick }: ButtonProps) {
+       return <button onClick={onClick}>{label}</button>;
+     }
+     ```
+
+8. **Component Declaration**
+   - Use the `function` keyword for components, not arrow functions.
+
+9. **Hooks Usage**
+   - Call hooks (e.g., `useState`, `useEffect`) only at the top level of components.
+   - Extract reusable logic into custom hooks (e.g., `useAuth`, `useFormValidation`).
+
+10. **Memoization & Performance**
+    - Use `React.memo`, `useCallback`, and `useMemo` where appropriate.
+    - Avoid inline functions in JSX—pull handlers out or wrap in `useCallback`.
+
+11. **Composition**
+    - Favor composition (render props, `children`) over inheritance.
+
+12. **Code Splitting**
+    - Use `React.lazy` + `Suspense` for code splitting.
+
+13. **Refs**
+    - Use refs only for direct DOM access.
+
+14. **Forms**
+    - Prefer controlled components for forms.
+
+15. **Error Boundaries**
+    - Implement an error boundary component for catching render errors.
+
+16. **Effect Cleanup**
+    - Clean up effects in `useEffect` to prevent memory leaks.
+
+17. **Accessibility**
+    - Apply appropriate ARIA attributes to interactive elements.
+    - For example, an `<a>` tag should have `tabindex="0"`, `aria-label`, `onClick`, and `onKeyDown` attributes as appropriate.
+
+## Examples
+
+### ✅ Correct
+```tsx
+// File: components/user-profile.tsx
+
+interface UserProfileProps {
+  user: User;
+  isLoaded: boolean;
+  hasError: boolean;
+}
+
+export function UserProfile({ user, isLoaded, hasError }: UserProfileProps) {
+  if (!isLoaded) return <div>Loading...</div>;
+  if (hasError) return <div role="alert">Error loading user.</div>;
+
+  const handleClick = useCallback(() => {
+    // ...
+  }, [user]);
+
+  return (
+    <button
+      className="bg-blue-500 text-white"
+      aria-label="View user profile"
+      tabIndex={0}
+      onClick={handleClick}
+      onKeyDown={handleKeyDown}
+    >
+      {user.name}
+    </button>
+  );
+}
+```
+
+### ❌ Incorrect
+```tsx
+// File: components/UserProfile.jsx
+function userprofile(props) {
+  if (props.isLoaded) {
+    // ...
+  }
+}
+
+return (
+  <button style={{ color: 'white' }} onClick={() => doSomething()}>
+    View
+  </button>
+);
+```
+
+## Enforcement
+- All new code must follow these guidelines.
+- Code reviews should reject code that does not comply with these rules.
+- Refactor existing code to follow these guidelines when making changes. 

.cursor/rules/localization.md

@@ -0,0 +1,38 @@
+# Localization Rule: No Hard-Coded User-Facing Text
+
+## Rule
+- All user-facing text **must** be added to the localization system at `@/locales`.
+- **Never** hard-code user-facing strings directly in components, pages, or business logic.
+- Use the appropriate i18n or localization utility to fetch and display all text.
+- **Always** provide a `defaultValue` when using the `t()` function for translations, e.g., `{t('emailPlaceholder', {defaultValue: 'Enter your email'})}`.
+
+## Rationale
+- Ensures the application is fully translatable and accessible to all supported languages.
+- Prevents missed strings during translation updates.
+- Promotes consistency and maintainability.
+- Providing a `defaultValue` ensures a fallback is shown if the translation key is missing.
+
+## Examples
+
+### ✅ Correct
+```tsx
+import { useTranslation } from 'react-i18next';
+
+const { t } = useTranslation();
+
+return <input placeholder={t('emailPlaceholder', { defaultValue: 'Enter your email' })} />;
+```
+
+### ❌ Incorrect
+```tsx
+return <input placeholder={t('emailPlaceholder')} />;
+
+// or
+return <input placeholder="Enter your email" />;
+```
+
+## Enforcement
+- All new user-facing text **must** be added to the appropriate file in `@/locales`.
+- Every use of `t()` **must** include a `defaultValue` for fallback.
+- Code reviews should reject any hard-coded user-facing strings or missing `defaultValue` in translations.
+- Refactor existing hard-coded text to use the localization system and add `defaultValue` when modifying related code. 

.cursor/rules/react-component-naming.md

@@ -0,0 +1,39 @@
+# React Component Naming Rule: PascalCase
+
+## Rule
+- All React component names **must** use PascalCase.
+- This applies to:
+  - Component file names (e.g., `MyComponent.tsx`, `UserProfile.jsx`)
+  - Exported component identifiers (e.g., `export const MyComponent = ...` or `function UserProfile() { ... }`)
+
+## Rationale
+- PascalCase is the community standard for React components.
+- Ensures consistency and readability across the codebase.
+- Prevents confusion between components and regular functions/variables.
+
+## Examples
+
+### ✅ Correct
+```tsx
+// File: UserProfile.tsx
+export function UserProfile() { ... }
+
+// File: TaskList.tsx
+const TaskList = () => { ... }
+export default TaskList;
+```
+
+### ❌ Incorrect
+```tsx
+// File: userprofile.tsx
+export function userprofile() { ... }
+
+// File: task-list.jsx
+const task_list = () => { ... }
+export default task_list;
+```
+
+## Enforcement
+- All new React components **must** follow this rule.
+- Refactor existing components to PascalCase when modifying or moving them.
+- Code reviews should reject non-PascalCase component names. 

worklenz-backend/.pgmrc.json

@@ -1,3 +0,0 @@
-{
-  "config-file": "migrate.json"
-}

worklenz-backend/database/pg-migrations/20250115000000_performance-indexes.js

@@ -1,149 +0,0 @@
-/* eslint-disable camelcase */
-
-exports.shorthands = undefined;
-
-exports.up = pgm => {
-  // Composite index for main task filtering
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_archived_parent 
-    ON tasks(project_id, archived, parent_task_id) 
-    WHERE archived = FALSE
-  `);
-
-  // Index for status joins
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_status_project 
-    ON tasks(status_id, project_id) 
-    WHERE archived = FALSE
-  `);
-
-  // Index for assignees lookup
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_assignees_task_member 
-    ON tasks_assignees(task_id, team_member_id)
-  `);
-
-  // Index for phase lookup
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_phase_task_phase 
-    ON task_phase(task_id, phase_id)
-  `);
-
-  // Index for subtask counting
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_parent_archived 
-    ON tasks(parent_task_id, archived) 
-    WHERE parent_task_id IS NOT NULL AND archived = FALSE
-  `);
-
-  // Index for labels
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_labels_task_label 
-    ON task_labels(task_id, label_id)
-  `);
-
-  // Index for comments count
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_comments_task 
-    ON task_comments(task_id)
-  `);
-
-  // Index for attachments count
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_attachments_task 
-    ON task_attachments(task_id)
-  `);
-
-  // Index for work log aggregation
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_work_log_task 
-    ON task_work_log(task_id)
-  `);
-
-  // Index for subscribers check
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_subscribers_task 
-    ON task_subscribers(task_id)
-  `);
-
-  // Index for dependencies check
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_dependencies_task 
-    ON task_dependencies(task_id)
-  `);
-
-  // Additional performance indexes
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_dependencies_related 
-    ON task_dependencies(related_task_id)
-  `);
-
-  // Index for custom column values
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_cc_column_values_task 
-    ON cc_column_values(task_id)
-  `);
-
-  // Index for project members lookup
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_project_members_team_project 
-    ON project_members(team_member_id, project_id)
-  `);
-
-  // Index for sorting
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_sort 
-    ON tasks(project_id, sort_order) 
-    WHERE archived = FALSE
-  `);
-
-  // Index for roadmap sorting
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_roadmap_sort 
-    ON tasks(project_id, roadmap_sort_order) 
-    WHERE archived = FALSE
-  `);
-
-  // Index for user lookup in team members
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_members_user_team 
-    ON team_members(user_id, team_id) 
-    WHERE active = TRUE
-  `);
-
-  // Index for task statuses lookup
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_statuses_project_category 
-    ON task_statuses(project_id, category_id)
-  `);
-
-  // Index for task priorities lookup
-  pgm.sql(`
-    CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_priority 
-    ON tasks(priority_id) 
-    WHERE archived = FALSE
-  `);
-};
-
-exports.down = pgm => {
-  // Drop indexes in reverse order
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_priority');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_statuses_project_category');
-  pgm.sql('DROP INDEX IF EXISTS idx_team_members_user_team');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_project_roadmap_sort');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_project_sort');
-  pgm.sql('DROP INDEX IF EXISTS idx_project_members_team_project');
-  pgm.sql('DROP INDEX IF EXISTS idx_cc_column_values_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_dependencies_related');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_dependencies_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_subscribers_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_work_log_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_attachments_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_comments_task');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_labels_task_label');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_parent_archived');
-  pgm.sql('DROP INDEX IF EXISTS idx_task_phase_task_phase');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_assignees_task_member');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_status_project');
-  pgm.sql('DROP INDEX IF EXISTS idx_tasks_project_archived_parent');
-};

worklenz-backend/database/pg-migrations/20250128000000_fix-window-function-error.js

@@ -1,183 +0,0 @@
-/* eslint-disable camelcase */
-
-exports.shorthands = undefined;
-
-exports.up = pgm => {
-  // Replace the optimized sort functions to avoid CTE usage in UPDATE statements
-  pgm.createFunction(
-    'handle_task_list_sort_between_groups_optimized',
-    [
-      { name: '_from_index', type: 'integer' },
-      { name: '_to_index', type: 'integer' },
-      { name: '_task_id', type: 'uuid' },
-      { name: '_project_id', type: 'uuid' },
-      { name: '_batch_size', type: 'integer', default: 100 }
-    ],
-    { returns: 'void', language: 'plpgsql', replace: true },
-    `
-DECLARE
-    _offset INT := 0;
-    _affected_rows INT;
-BEGIN
-    -- PERFORMANCE OPTIMIZATION: Use direct updates without CTE in UPDATE
-    IF (_to_index = -1)
-    THEN
-        _to_index = COALESCE((SELECT MAX(sort_order) + 1 FROM tasks WHERE project_id = _project_id), 0);
-    END IF;
-
-    -- PERFORMANCE OPTIMIZATION: Batch updates for large datasets
-    IF _to_index > _from_index
-    THEN
-        LOOP
-            UPDATE tasks
-            SET sort_order = sort_order - 1
-            WHERE project_id = _project_id
-              AND sort_order > _from_index
-              AND sort_order < _to_index
-              AND sort_order > _offset
-              AND sort_order <= _offset + _batch_size;
-            
-            GET DIAGNOSTICS _affected_rows = ROW_COUNT;
-            EXIT WHEN _affected_rows = 0;
-            _offset := _offset + _batch_size;
-        END LOOP;
-
-        UPDATE tasks SET sort_order = _to_index - 1 WHERE id = _task_id AND project_id = _project_id;
-    END IF;
-
-    IF _to_index < _from_index
-    THEN
-        _offset := 0;
-        LOOP
-            UPDATE tasks
-            SET sort_order = sort_order + 1
-            WHERE project_id = _project_id
-              AND sort_order > _to_index
-              AND sort_order < _from_index
-              AND sort_order > _offset
-              AND sort_order <= _offset + _batch_size;
-            
-            GET DIAGNOSTICS _affected_rows = ROW_COUNT;
-            EXIT WHEN _affected_rows = 0;
-            _offset := _offset + _batch_size;
-        END LOOP;
-
-        UPDATE tasks SET sort_order = _to_index + 1 WHERE id = _task_id AND project_id = _project_id;
-    END IF;
-END
-    `
-  );
-
-  // Replace the second optimized sort function
-  pgm.createFunction(
-    'handle_task_list_sort_inside_group_optimized',
-    [
-      { name: '_from_index', type: 'integer' },
-      { name: '_to_index', type: 'integer' },
-      { name: '_task_id', type: 'uuid' },
-      { name: '_project_id', type: 'uuid' },
-      { name: '_batch_size', type: 'integer', default: 100 }
-    ],
-    { returns: 'void', language: 'plpgsql', replace: true },
-    `
-DECLARE
-    _offset INT := 0;
-    _affected_rows INT;
-BEGIN
-    -- PERFORMANCE OPTIMIZATION: Batch updates for large datasets without CTE in UPDATE
-    IF _to_index > _from_index
-    THEN
-        LOOP
-            UPDATE tasks
-            SET sort_order = sort_order - 1
-            WHERE project_id = _project_id
-              AND sort_order > _from_index
-              AND sort_order <= _to_index
-              AND sort_order > _offset
-              AND sort_order <= _offset + _batch_size;
-            
-            GET DIAGNOSTICS _affected_rows = ROW_COUNT;
-            EXIT WHEN _affected_rows = 0;
-            _offset := _offset + _batch_size;
-        END LOOP;
-    END IF;
-
-    IF _to_index < _from_index
-    THEN
-        _offset := 0;
-        LOOP
-            UPDATE tasks
-            SET sort_order = sort_order + 1
-            WHERE project_id = _project_id
-              AND sort_order >= _to_index
-              AND sort_order < _from_index
-              AND sort_order > _offset
-              AND sort_order <= _offset + _batch_size;
-            
-            GET DIAGNOSTICS _affected_rows = ROW_COUNT;
-            EXIT WHEN _affected_rows = 0;
-            _offset := _offset + _batch_size;
-        END LOOP;
-    END IF;
-
-    UPDATE tasks SET sort_order = _to_index WHERE id = _task_id AND project_id = _project_id;
-END
-    `
-  );
-
-  // Add simple bulk update function as alternative
-  pgm.createFunction(
-    'update_task_sort_orders_bulk',
-    [{ name: '_updates', type: 'json' }],
-    { returns: 'void', language: 'plpgsql', replace: true },
-    `
-DECLARE
-    _update_record RECORD;
-BEGIN
-    -- Simple approach: update each task's sort_order from the provided array
-    FOR _update_record IN 
-        SELECT 
-            (item->>'task_id')::uuid as task_id,
-            (item->>'sort_order')::int as sort_order,
-            (item->>'status_id')::uuid as status_id,
-            (item->>'priority_id')::uuid as priority_id,
-            (item->>'phase_id')::uuid as phase_id
-        FROM json_array_elements(_updates) as item
-    LOOP
-        UPDATE tasks 
-        SET 
-            sort_order = _update_record.sort_order,
-            status_id = COALESCE(_update_record.status_id, status_id),
-            priority_id = COALESCE(_update_record.priority_id, priority_id)
-        WHERE id = _update_record.task_id;
-        
-        -- Handle phase updates separately since it's in a different table
-        IF _update_record.phase_id IS NOT NULL THEN
-            INSERT INTO task_phase (task_id, phase_id)
-            VALUES (_update_record.task_id, _update_record.phase_id)
-            ON CONFLICT (task_id) DO UPDATE SET phase_id = _update_record.phase_id;
-        END IF;
-    END LOOP;
-END
-    `
-  );
-};
-
-exports.down = pgm => {
-  // Drop the functions if needed to rollback
-  pgm.dropFunction('update_task_sort_orders_bulk', [{ name: '_updates', type: 'json' }], { ifExists: true });
-  pgm.dropFunction('handle_task_list_sort_inside_group_optimized', [
-    { name: '_from_index', type: 'integer' },
-    { name: '_to_index', type: 'integer' },
-    { name: '_task_id', type: 'uuid' },
-    { name: '_project_id', type: 'uuid' },
-    { name: '_batch_size', type: 'integer' }
-  ], { ifExists: true });
-  pgm.dropFunction('handle_task_list_sort_between_groups_optimized', [
-    { name: '_from_index', type: 'integer' },
-    { name: '_to_index', type: 'integer' },
-    { name: '_task_id', type: 'uuid' },
-    { name: '_project_id', type: 'uuid' },
-    { name: '_batch_size', type: 'integer' }
-  ], { ifExists: true });
-};

worklenz-backend/database/pg-migrations/20250422132400_manual-task-progress.js

@@ -1,99 +0,0 @@
-/* eslint-disable camelcase */
-
-exports.shorthands = undefined;
-
-exports.up = pgm => {
-  // Add manual progress fields to tasks table
-  pgm.addColumns('tasks', {
-    manual_progress: {
-      type: 'boolean',
-      default: false,
-      notNull: false
-    },
-    progress_value: {
-      type: 'integer',
-      default: null,
-      notNull: false
-    },
-    weight: {
-      type: 'integer',
-      default: null,
-      notNull: false
-    }
-  }, { ifNotExists: true });
-
-  // Update function to consider manual progress
-  pgm.createFunction(
-    'get_task_complete_ratio',
-    [{ name: '_task_id', type: 'uuid' }],
-    { returns: 'json', language: 'plpgsql', replace: true },
-    `
-DECLARE
-    _parent_task_done FLOAT = 0;
-    _sub_tasks_done   FLOAT = 0;
-    _sub_tasks_count  FLOAT = 0;
-    _total_completed  FLOAT = 0;
-    _total_tasks      FLOAT = 0;
-    _ratio            FLOAT = 0;
-    _is_manual        BOOLEAN = FALSE;
-    _manual_value     INTEGER = NULL;
-BEGIN
-    -- Check if manual progress is set
-    SELECT manual_progress, progress_value 
-    FROM tasks 
-    WHERE id = _task_id
-    INTO _is_manual, _manual_value;
-    
-    -- If manual progress is enabled and has a value, use it directly
-    IF _is_manual IS TRUE AND _manual_value IS NOT NULL THEN
-        RETURN JSON_BUILD_OBJECT(
-            'ratio', _manual_value,
-            'total_completed', 0,
-            'total_tasks', 0,
-            'is_manual', TRUE
-        );
-    END IF;
-    
-    -- Otherwise calculate automatically as before
-    SELECT (CASE
-                WHEN EXISTS(SELECT 1
-                            FROM tasks_with_status_view
-                            WHERE tasks_with_status_view.task_id = _task_id
-                              AND is_done IS TRUE) THEN 1
-                ELSE 0 END)
-    INTO _parent_task_done;
-    SELECT COUNT(*) FROM tasks WHERE parent_task_id = _task_id AND archived IS FALSE INTO _sub_tasks_count;
-
-    SELECT COUNT(*)
-    FROM tasks_with_status_view
-    WHERE parent_task_id = _task_id
-      AND is_done IS TRUE
-    INTO _sub_tasks_done;
-
-    _total_completed = _parent_task_done + _sub_tasks_done;
-    _total_tasks = _sub_tasks_count; -- +1 for the parent task
-    
-    IF _total_tasks > 0 THEN
-        _ratio = (_total_completed / _total_tasks) * 100;
-    ELSE
-        _ratio = _parent_task_done * 100;
-    END IF;
-
-    RETURN JSON_BUILD_OBJECT(
-        'ratio', _ratio,
-        'total_completed', _total_completed,
-        'total_tasks', _total_tasks,
-        'is_manual', FALSE
-    );
-END
-    `
-  );
-};
-
-exports.down = pgm => {
-  // Drop the function first (it depends on the columns)
-  pgm.dropFunction('get_task_complete_ratio', [{ name: '_task_id', type: 'uuid' }], { ifExists: true });
-  
-  // Remove the added columns
-  pgm.dropColumns('tasks', ['manual_progress', 'progress_value', 'weight'], { ifExists: true });
-};

worklenz-backend/database/pg-migrations/20250715000000_add-grouping-sort-orders.js

@@ -1,103 +0,0 @@
-/* eslint-disable camelcase */
-
-exports.shorthands = undefined;
-
-exports.up = pgm => {
-  // Add new sort order columns for different grouping types
-  pgm.addColumns('tasks', {
-    status_sort_order: {
-      type: 'integer',
-      default: 0,
-      notNull: false
-    },
-    priority_sort_order: {
-      type: 'integer',
-      default: 0,
-      notNull: false
-    },
-    phase_sort_order: {
-      type: 'integer',
-      default: 0,
-      notNull: false
-    },
-    member_sort_order: {
-      type: 'integer',
-      default: 0,
-      notNull: false
-    }
-  }, { ifNotExists: true });
-
-  // Initialize new columns with current sort_order values
-  pgm.sql(`
-    UPDATE tasks SET 
-      status_sort_order = sort_order,
-      priority_sort_order = sort_order,
-      phase_sort_order = sort_order,
-      member_sort_order = sort_order
-    WHERE status_sort_order = 0 
-       OR priority_sort_order = 0 
-       OR phase_sort_order = 0 
-       OR member_sort_order = 0
-  `);
-
-  // Add constraints to ensure non-negative values
-  pgm.addConstraint('tasks', 'tasks_status_sort_order_check', {
-    check: 'status_sort_order >= 0'
-  }, { ifNotExists: true });
-  
-  pgm.addConstraint('tasks', 'tasks_priority_sort_order_check', {
-    check: 'priority_sort_order >= 0'
-  }, { ifNotExists: true });
-  
-  pgm.addConstraint('tasks', 'tasks_phase_sort_order_check', {
-    check: 'phase_sort_order >= 0'
-  }, { ifNotExists: true });
-  
-  pgm.addConstraint('tasks', 'tasks_member_sort_order_check', {
-    check: 'member_sort_order >= 0'
-  }, { ifNotExists: true });
-
-  // Add indexes for performance
-  pgm.createIndex('tasks', ['project_id', 'status_sort_order'], {
-    name: 'idx_tasks_status_sort_order',
-    ifNotExists: true
-  });
-  
-  pgm.createIndex('tasks', ['project_id', 'priority_sort_order'], {
-    name: 'idx_tasks_priority_sort_order',
-    ifNotExists: true
-  });
-  
-  pgm.createIndex('tasks', ['project_id', 'phase_sort_order'], {
-    name: 'idx_tasks_phase_sort_order',
-    ifNotExists: true
-  });
-  
-  pgm.createIndex('tasks', ['project_id', 'member_sort_order'], {
-    name: 'idx_tasks_member_sort_order',
-    ifNotExists: true
-  });
-
-  // Add column comments for documentation
-  pgm.sql("COMMENT ON COLUMN tasks.status_sort_order IS 'Sort order when grouped by status'");
-  pgm.sql("COMMENT ON COLUMN tasks.priority_sort_order IS 'Sort order when grouped by priority'");
-  pgm.sql("COMMENT ON COLUMN tasks.phase_sort_order IS 'Sort order when grouped by phase'");
-  pgm.sql("COMMENT ON COLUMN tasks.member_sort_order IS 'Sort order when grouped by members/assignees'");
-};
-
-exports.down = pgm => {
-  // Drop indexes
-  pgm.dropIndex('tasks', ['project_id', 'member_sort_order'], { name: 'idx_tasks_member_sort_order', ifExists: true });
-  pgm.dropIndex('tasks', ['project_id', 'phase_sort_order'], { name: 'idx_tasks_phase_sort_order', ifExists: true });
-  pgm.dropIndex('tasks', ['project_id', 'priority_sort_order'], { name: 'idx_tasks_priority_sort_order', ifExists: true });
-  pgm.dropIndex('tasks', ['project_id', 'status_sort_order'], { name: 'idx_tasks_status_sort_order', ifExists: true });
-
-  // Drop constraints
-  pgm.dropConstraint('tasks', 'tasks_member_sort_order_check', { ifExists: true });
-  pgm.dropConstraint('tasks', 'tasks_phase_sort_order_check', { ifExists: true });
-  pgm.dropConstraint('tasks', 'tasks_priority_sort_order_check', { ifExists: true });
-  pgm.dropConstraint('tasks', 'tasks_status_sort_order_check', { ifExists: true });
-
-  // Drop columns
-  pgm.dropColumns('tasks', ['status_sort_order', 'priority_sort_order', 'phase_sort_order', 'member_sort_order'], { ifExists: true });
-};

worklenz-backend/database/pg-migrations/README.md

@@ -0,0 +1,72 @@
+# Node-pg-migrate Migrations
+
+This directory contains database migrations managed by node-pg-migrate.
+
+## Migration Commands
+
+- `npm run migrate:create -- migration-name` - Create a new migration file
+- `npm run migrate:up` - Run all pending migrations
+- `npm run migrate:down` - Rollback the last migration
+- `npm run migrate:redo` - Rollback and re-run the last migration
+
+## Migration File Format
+
+Migrations are JavaScript files with timestamp prefixes (e.g., `20250115000000_performance-indexes.js`).
+
+Each migration file exports two functions:
+- `exports.up` - Contains the forward migration logic
+- `exports.down` - Contains the rollback logic
+
+## Best Practices
+
+1. **Always use IF EXISTS/IF NOT EXISTS checks** to make migrations idempotent
+2. **Test migrations locally** before deploying to production
+3. **Include rollback logic** in the `down` function for all changes
+4. **Use descriptive names** for migration files
+5. **Keep migrations focused** - one logical change per migration
+
+## Example Migration
+
+```javascript
+exports.up = pgm => {
+  // Create table with IF NOT EXISTS
+  pgm.createTable('users', {
+    id: 'id',
+    name: { type: 'varchar(100)', notNull: true },
+    created_at: {
+      type: 'timestamp',
+      notNull: true,
+      default: pgm.func('current_timestamp')
+    }
+  }, { ifNotExists: true });
+
+  // Add index with IF NOT EXISTS
+  pgm.createIndex('users', 'name', {
+    name: 'idx_users_name',
+    ifNotExists: true
+  });
+};
+
+exports.down = pgm => {
+  // Drop in reverse order
+  pgm.dropIndex('users', 'name', { 
+    name: 'idx_users_name', 
+    ifExists: true 
+  });
+  
+  pgm.dropTable('users', { ifExists: true });
+};
+```
+
+## Migration History
+
+The `pgmigrations` table tracks which migrations have been run. Do not modify this table manually.
+
+## Converting from SQL Migrations
+
+When converting SQL migrations to node-pg-migrate format:
+
+1. Wrap SQL statements in `pgm.sql()` calls
+2. Use node-pg-migrate helper methods where possible (createTable, addColumns, etc.)
+3. Always include `IF EXISTS/IF NOT EXISTS` checks
+4. Ensure proper rollback logic in the `down` function

worklenz-backend/database/sql/1_tables.sql

@@ -25,13 +25,6 @@ CREATE TABLE IF NOT EXISTS pg_sessions (
     expire TIMESTAMP(6) NOT NULL
 );
 
--- Create pgmigrations table for node-pg-migrate
-CREATE TABLE IF NOT EXISTS pgmigrations (
-    id      SERIAL                              PRIMARY KEY,
-    name    VARCHAR(255)                        NOT NULL,
-    run_on  TIMESTAMP WITH TIME ZONE            NOT NULL
-);
-
 CREATE TABLE IF NOT EXISTS project_access_levels (
     id   UUID DEFAULT uuid_generate_v4() NOT NULL,
     name TEXT                            NOT NULL,

worklenz-backend/database/sql/indexes.sql

@@ -132,3 +132,139 @@ CREATE INDEX IF NOT EXISTS projects_team_id_index
 CREATE INDEX IF NOT EXISTS projects_team_id_name_index
     ON projects (team_id, name);
 
+-- Performance indexes for optimized tasks queries
+-- From migration: 20250115000000-performance-indexes.sql
+
+-- Composite index for main task filtering
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_archived_parent 
+ON tasks(project_id, archived, parent_task_id) 
+WHERE archived = FALSE;
+
+-- Index for status joins
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_status_project 
+ON tasks(status_id, project_id) 
+WHERE archived = FALSE;
+
+-- Index for assignees lookup
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_assignees_task_member 
+ON tasks_assignees(task_id, team_member_id);
+
+-- Index for phase lookup
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_phase_task_phase 
+ON task_phase(task_id, phase_id);
+
+-- Index for subtask counting
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_parent_archived 
+ON tasks(parent_task_id, archived) 
+WHERE parent_task_id IS NOT NULL AND archived = FALSE;
+
+-- Index for labels
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_labels_task_label 
+ON task_labels(task_id, label_id);
+
+-- Index for comments count
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_comments_task 
+ON task_comments(task_id);
+
+-- Index for attachments count
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_attachments_task 
+ON task_attachments(task_id);
+
+-- Index for work log aggregation
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_work_log_task 
+ON task_work_log(task_id);
+
+-- Index for subscribers check
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_subscribers_task 
+ON task_subscribers(task_id);
+
+-- Index for dependencies check
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_dependencies_task 
+ON task_dependencies(task_id);
+
+-- Index for timers lookup
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_timers_task_user 
+ON task_timers(task_id, user_id);
+
+-- Index for custom columns
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_cc_column_values_task 
+ON cc_column_values(task_id);
+
+-- Index for team member info view optimization
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_members_team_user 
+ON team_members(team_id, user_id) 
+WHERE active = TRUE;
+
+-- Index for notification settings
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_notification_settings_user_team 
+ON notification_settings(user_id, team_id);
+
+-- Index for task status categories
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_statuses_category 
+ON task_statuses(category_id, project_id);
+
+-- Index for project phases
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_project_phases_project_sort 
+ON project_phases(project_id, sort_index);
+
+-- Index for task priorities
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_priorities_value 
+ON task_priorities(value);
+
+-- Index for team labels
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_labels_team 
+ON team_labels(team_id);
+
+-- Advanced performance indexes for task optimization
+
+-- Composite index for task main query optimization (covers most WHERE conditions)
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_performance_main
+ON tasks(project_id, archived, parent_task_id, status_id, priority_id)
+WHERE archived = FALSE;
+
+-- Index for sorting by sort_order with project filter
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_project_sort_order
+ON tasks(project_id, sort_order)
+WHERE archived = FALSE;
+
+-- Index for email_invitations to optimize team_member_info_view
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_email_invitations_team_member
+ON email_invitations(team_member_id);
+
+-- Covering index for task status with category information
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_statuses_covering
+ON task_statuses(id, category_id, project_id);
+
+-- Index for task aggregation queries (parent task progress calculation)
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_parent_status_archived
+ON tasks(parent_task_id, status_id, archived)
+WHERE archived = FALSE;
+
+-- Index for project team member filtering
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_team_members_project_lookup
+ON team_members(team_id, active, user_id)
+WHERE active = TRUE;
+
+-- Covering index for tasks with frequently accessed columns
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_covering_main
+ON tasks(id, project_id, archived, parent_task_id, status_id, priority_id, sort_order, name)
+WHERE archived = FALSE;
+
+-- Index for task search functionality
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_name_search
+ON tasks USING gin(to_tsvector('english', name))
+WHERE archived = FALSE;
+
+-- Index for date-based filtering (if used)
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_tasks_dates
+ON tasks(project_id, start_date, end_date)
+WHERE archived = FALSE;
+
+-- Index for task timers with user filtering
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_task_timers_user_task
+ON task_timers(user_id, task_id);
+
+-- Index for sys_task_status_categories lookups
+CREATE INDEX CONCURRENTLY IF NOT EXISTS idx_sys_task_status_categories_covering
+ON sys_task_status_categories(id, color_code, color_code_dark, is_done, is_doing, is_todo);
+

worklenz-backend/migrate.json

@@ -1,22 +0,0 @@
-{
-  "migrations-dir": "database/pg-migrations",
-  "migrations-schema": "public",
-  "migrations-table": "pgmigrations",
-  "db": {
-    "user": {
-      "ENV": "DB_USER"
-    },
-    "password": {
-      "ENV": "DB_PASSWORD"
-    },
-    "host": {
-      "ENV": "DB_HOST"
-    },
-    "port": {
-      "ENV": "DB_PORT"
-    },
-    "database": {
-      "ENV": "DB_NAME"
-    }
-  }
-}

worklenz-backend/package-lock.json

@@ -33,6 +33,7 @@
         "express-rate-limit": "^6.8.0",
         "express-session": "^1.17.3",
         "express-validator": "^6.15.0",
+        "grunt-cli": "^1.5.0",
         "helmet": "^6.2.0",
         "hpp": "^0.2.3",
         "http-errors": "^2.0.0",
@@ -115,7 +116,6 @@
         "jest": "^28.1.3",
         "jest-sonar-reporter": "^2.0.0",
         "ncp": "^2.0.0",
-        "node-pg-migrate": "^8.0.3",
         "nodeman": "^1.1.2",
         "rimraf": "^6.0.1",
         "swagger-jsdoc": "^6.2.8",
@@ -126,7 +126,7 @@
         "typescript": "^4.9.5"
       },
       "engines": {
-        "node": ">=20.0.0",
+        "node": ">=16.13.0",
         "npm": ">=8.11.0",
         "yarn": "WARNING: Please use npm package manager instead of yarn"
       }
@@ -6455,12 +6455,30 @@
       "dev": true,
       "license": "Python-2.0"
     },
+    "node_modules/array-each": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/array-each/-/array-each-1.0.1.tgz",
+      "integrity": "sha512-zHjL5SZa68hkKHBFBK6DJCTtr9sfTCPCaph/L7tMSLcTFgy+zX7E+6q5UArbtOtMBCtxdICpfTCspRse+ywyXA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-flatten": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz",
       "integrity": "sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==",
       "license": "MIT"
     },
+    "node_modules/array-slice": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/array-slice/-/array-slice-1.1.0.tgz",
+      "integrity": "sha512-B1qMD3RBP7O8o0H2KbrXDyB0IccejMF15+87Lvlor12ONPRHP6gTjXMNkt/d3ZuOGbAe66hFmaCfECI24Ufp6w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -6933,7 +6951,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/braces/-/braces-3.0.3.tgz",
       "integrity": "sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "fill-range": "^7.1.1"
@@ -8039,6 +8056,15 @@
         "npm": "1.2.8000 || >= 1.4.16"
       }
     },
+    "node_modules/detect-file": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
+      "integrity": "sha512-DtCOLG98P007x7wiiOmfI0fi3eIKyWiLTGJ2MDnVi/E04lWGbf+JzrRHMm0rgIIZJGtHpKpbVgLWHrv8xXpc3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/detect-libc": {
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.0.4.tgz",
@@ -8898,6 +8924,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/expand-tilde": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/expand-tilde/-/expand-tilde-2.0.2.tgz",
+      "integrity": "sha512-A5EmesHW6rfnZ9ysHQjPdJRni0SRar0tjtG5MNtm9n5TUvsYU8oozprtRD4AqHxcZWWlVuAmQo2nWKfN9oyjTw==",
+      "license": "MIT",
+      "dependencies": {
+        "homedir-polyfill": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/expect": {
       "version": "28.1.3",
       "resolved": "https://registry.npmjs.org/expect/-/expect-28.1.3.tgz",
@@ -9050,6 +9088,12 @@
       "integrity": "sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==",
       "license": "MIT"
     },
+    "node_modules/extend": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
+      "integrity": "sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==",
+      "license": "MIT"
+    },
     "node_modules/fast-csv": {
       "version": "4.3.6",
       "resolved": "https://registry.npmjs.org/fast-csv/-/fast-csv-4.3.6.tgz",
@@ -9178,7 +9222,6 @@
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
       "integrity": "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "to-regex-range": "^5.0.1"
@@ -9244,6 +9287,46 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/findup-sync": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/findup-sync/-/findup-sync-4.0.0.tgz",
+      "integrity": "sha512-6jvvn/12IC4quLBL1KNokxC7wWTvYncaVUYSoxWw7YykPLuRrnv4qdHcSOywOI5RpkOVGeQRtWM8/q+G6W6qfQ==",
+      "license": "MIT",
+      "dependencies": {
+        "detect-file": "^1.0.0",
+        "is-glob": "^4.0.0",
+        "micromatch": "^4.0.2",
+        "resolve-dir": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/fined": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/fined/-/fined-1.2.0.tgz",
+      "integrity": "sha512-ZYDqPLGxDkDhDZBjZBb+oD1+j0rA4E0pXY50eplAAOPg2N/gUBSSk5IM1/QhPfyVo19lJ+CvXpqfvk+b2p/8Ng==",
+      "license": "MIT",
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "is-plain-object": "^2.0.3",
+        "object.defaults": "^1.1.0",
+        "object.pick": "^1.2.0",
+        "parse-filepath": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
+    "node_modules/flagged-respawn": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/flagged-respawn/-/flagged-respawn-1.0.1.tgz",
+      "integrity": "sha512-lNaHNVymajmk0OJMBn8fVUAU1BtDeKIqKoVhk4xAALB57aALg6b4W0MfJ/cUE0g9YBXy5XhSlPIpYIJ7HaY/3Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -9344,6 +9427,27 @@
         }
       }
     },
+    "node_modules/for-in": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/for-in/-/for-in-1.0.2.tgz",
+      "integrity": "sha512-7EwmXrOjyL+ChxMhmG5lnW9MPt1aIeZEwKhQzoBUdTV0N3zuwWDZYVJatDvZ2OyzPUvdIAZDsCetk3coyMfcnQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/for-own": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/for-own/-/for-own-1.0.0.tgz",
+      "integrity": "sha512-0OABksIGrxKK8K4kynWkQ7y1zounQxP+CWnyclVwj81KW3vlLlGUx57DKGcP/LH216GzqnstnPocF16Nxs0Ycg==",
+      "license": "MIT",
+      "dependencies": {
+        "for-in": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/foreground-child": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/foreground-child/-/foreground-child-3.3.1.tgz",
@@ -9741,6 +9845,48 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/global-modules": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-1.0.0.tgz",
+      "integrity": "sha512-sKzpEkf11GpOFuw0Zzjzmt4B4UZwjOcG757PPvrfhxcLFbq0wpsgpOqxpxtxFiCG4DtG93M6XRVbF2oGdev7bg==",
+      "license": "MIT",
+      "dependencies": {
+        "global-prefix": "^1.0.1",
+        "is-windows": "^1.0.1",
+        "resolve-dir": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-1.0.2.tgz",
+      "integrity": "sha512-5lsx1NUDHtSjfg0eHlmYvZKv8/nVqX4ckFbM+FrGcQ+04KWcWFo9P5MxPZYSzUvyzmdTbI7Eix8Q4IbELDqzKg==",
+      "license": "MIT",
+      "dependencies": {
+        "expand-tilde": "^2.0.2",
+        "homedir-polyfill": "^1.0.1",
+        "ini": "^1.3.4",
+        "is-windows": "^1.0.1",
+        "which": "^1.2.14"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "license": "ISC",
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -9797,6 +9943,34 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/grunt-cli": {
+      "version": "1.5.0",
+      "resolved": "https://registry.npmjs.org/grunt-cli/-/grunt-cli-1.5.0.tgz",
+      "integrity": "sha512-rILKAFoU0dzlf22SUfDtq2R1fosChXXlJM5j7wI6uoW8gwmXDXzbUvirlKZSYCdXl3LXFbR+8xyS+WFo+b6vlA==",
+      "license": "MIT",
+      "dependencies": {
+        "grunt-known-options": "~2.0.0",
+        "interpret": "~1.1.0",
+        "liftup": "~3.0.1",
+        "nopt": "~5.0.0",
+        "v8flags": "^4.0.1"
+      },
+      "bin": {
+        "grunt": "bin/grunt"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/grunt-known-options": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/grunt-known-options/-/grunt-known-options-2.0.0.tgz",
+      "integrity": "sha512-GD7cTz0I4SAede1/+pAbmJRG44zFLPipVtdL9o3vqx9IEyb7b4/Y3s7r6ofI3CchR5GvYJ+8buCSioDv5dQLiA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -9868,6 +10042,18 @@
       "dev": true,
       "license": "https://www.highcharts.com/license"
     },
+    "node_modules/homedir-polyfill": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz",
+      "integrity": "sha512-eSmmWE5bZTK2Nou4g0AI3zZ9rswp7GRKoKXS1BLUkvPviOqs4YTN1djQIqrXy9k5gEtdLPy86JjRwsNM9tnDcA==",
+      "license": "MIT",
+      "dependencies": {
+        "parse-passwd": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/hpp": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/hpp/-/hpp-0.2.3.tgz",
@@ -10077,6 +10263,12 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "license": "ISC"
     },
+    "node_modules/interpret": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/interpret/-/interpret-1.1.0.tgz",
+      "integrity": "sha512-CLM8SNMDu7C5psFCn6Wg/tgpj/bKAg7hc2gWqcuR9OD5Ft9PhBpIu8PLicPeis+xDd6YX2ncI8MCA64I9tftIA==",
+      "license": "MIT"
+    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -10086,6 +10278,19 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/is-absolute": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz",
+      "integrity": "sha512-dOWoqflvcydARa360Gvv18DZ/gRuHKi2NU/wU5X1ZFzdYfH29nkiNZsF3mp4OJ3H4yo9Mx8A/uAGNzpzPN3yBA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-relative": "^1.0.0",
+        "is-windows": "^1.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
@@ -10147,7 +10352,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
       "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.10.0"
@@ -10176,7 +10380,6 @@
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
       "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -10189,7 +10392,6 @@
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=0.12.0"
@@ -10205,6 +10407,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-promise": {
       "version": "2.2.2",
       "resolved": "https://registry.npmjs.org/is-promise/-/is-promise-2.2.2.tgz",
@@ -10229,6 +10443,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-relative": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-relative/-/is-relative-1.0.0.tgz",
+      "integrity": "sha512-Kw/ReK0iqwKeu0MITLFuj0jbPAmEiOsIwyIXvvbfa6QfmN9pkD1M+8pdk7Rl/dTKbH34/XBFMbgD4iMJhLQbGA==",
+      "license": "MIT",
+      "dependencies": {
+        "is-unc-path": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz",
@@ -10241,6 +10467,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-unc-path": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-unc-path/-/is-unc-path-1.0.0.tgz",
+      "integrity": "sha512-mrGpVd0fs7WWLfVsStvgF6iEJnbjDFZh9/emhRDcGWTduTfNHd9CHeUwH3gYIjdbwo4On6hunkztwOaAw0yllQ==",
+      "license": "MIT",
+      "dependencies": {
+        "unc-path-regex": "^0.1.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-windows": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-windows/-/is-windows-1.0.2.tgz",
+      "integrity": "sha512-eXK1UInq2bPmjyX6e3VHIzMLobc4J94i4AWn+Hpq3OU5KkrRC96OAcR3PRJ/pGu6m8TRnBHP9dkXQVsT/COVIA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/isarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz",
@@ -10251,9 +10498,17 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==",
-      "dev": true,
       "license": "ISC"
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -11271,6 +11526,15 @@
         "json-buffer": "3.0.1"
       }
     },
+    "node_modules/kind-of": {
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-6.0.3.tgz",
+      "integrity": "sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/kleur": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz",
@@ -11362,6 +11626,25 @@
         "immediate": "~3.0.5"
       }
     },
+    "node_modules/liftup": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/liftup/-/liftup-3.0.1.tgz",
+      "integrity": "sha512-yRHaiQDizWSzoXk3APcA71eOI/UuhEkNN9DiW2Tt44mhYzX4joFoCZlxsSOF7RyeLlfqzFLQI1ngFq3ggMPhOw==",
+      "license": "MIT",
+      "dependencies": {
+        "extend": "^3.0.2",
+        "findup-sync": "^4.0.0",
+        "fined": "^1.2.0",
+        "flagged-respawn": "^1.0.1",
+        "is-plain-object": "^2.0.4",
+        "object.map": "^1.0.1",
+        "rechoir": "^0.7.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/lines-and-columns": {
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
@@ -11600,6 +11883,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/make-iterator": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/make-iterator/-/make-iterator-1.0.1.tgz",
+      "integrity": "sha512-pxiuXh0iVEq7VM7KMIhs5gxsfxCux2URptUQaXo4iZZJxBAzTPOLE2BumO5dbfVYq/hBJFBR/a1mFDmOx5AGmw==",
+      "license": "MIT",
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/makeerror": {
       "version": "1.0.12",
       "resolved": "https://registry.npmjs.org/makeerror/-/makeerror-1.0.12.tgz",
@@ -11610,6 +11905,15 @@
         "tmpl": "1.0.5"
       }
     },
+    "node_modules/map-cache": {
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/map-cache/-/map-cache-0.2.2.tgz",
+      "integrity": "sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -11667,7 +11971,6 @@
       "version": "4.0.8",
       "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.8.tgz",
       "integrity": "sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "braces": "^3.0.3",
@@ -12015,32 +12318,6 @@
       "dev": true,
       "license": "MIT"
     },
-    "node_modules/node-pg-migrate": {
-      "version": "8.0.3",
-      "resolved": "https://registry.npmjs.org/node-pg-migrate/-/node-pg-migrate-8.0.3.tgz",
-      "integrity": "sha512-oKzZyzTULTryO1jehX19VnyPCGf3G/3oWZg3gODphvID56T0WjPOShTVPVnxGdlcueaIW3uAVrr7M8xLZq5TcA==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "glob": "~11.0.0",
-        "yargs": "~17.7.0"
-      },
-      "bin": {
-        "node-pg-migrate": "bin/node-pg-migrate.js"
-      },
-      "engines": {
-        "node": ">=20.11.0"
-      },
-      "peerDependencies": {
-        "@types/pg": ">=6.0.0 <9.0.0",
-        "pg": ">=4.3.0 <9.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/pg": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/node-releases": {
       "version": "2.0.19",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.19.tgz",
@@ -12141,6 +12418,46 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.defaults": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/object.defaults/-/object.defaults-1.1.0.tgz",
+      "integrity": "sha512-c/K0mw/F11k4dEUBMW8naXUuBuhxRCfG7W+yFy8EcijU/rSmazOUd1XAEEe6bC0OuXY4HUKjTJv7xbxIMqdxrA==",
+      "license": "MIT",
+      "dependencies": {
+        "array-each": "^1.0.1",
+        "array-slice": "^1.0.0",
+        "for-own": "^1.0.0",
+        "isobject": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.map": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/object.map/-/object.map-1.0.1.tgz",
+      "integrity": "sha512-3+mAJu2PLfnSVGHwIWubpOFLscJANBKuB/6A4CxBstc4aqwQY0FWcsppuy4jU5GSB95yES5JHSI+33AWuS4k6w==",
+      "license": "MIT",
+      "dependencies": {
+        "for-own": "^1.0.0",
+        "make-iterator": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/object.pick": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/object.pick/-/object.pick-1.3.0.tgz",
+      "integrity": "sha512-tqa/UMy/CCoYmj+H5qc07qvSL9dqcs/WZENZ1JbtWBlATP+iVOe778gE6MSijnyCnORzDuX6hU+LA4SZ09YjFQ==",
+      "license": "MIT",
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -12303,6 +12620,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-filepath": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-filepath/-/parse-filepath-1.0.2.tgz",
+      "integrity": "sha512-FwdRXKCohSVeXqwtYonZTXtbGJKrn+HNyWDYVcp5yuJlesTwNH4rsmRZ+GrKAPJ5bLpRxESMeS+Rl0VCHRvB2Q==",
+      "license": "MIT",
+      "dependencies": {
+        "is-absolute": "^1.0.0",
+        "map-cache": "^0.2.0",
+        "path-root": "^0.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/parse-json": {
       "version": "5.2.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
@@ -12322,6 +12653,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parse-passwd": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-passwd/-/parse-passwd-1.0.0.tgz",
+      "integrity": "sha512-1Y1A//QUXEZK7YKz+rD9WydcE1+EuPr6ZBgKecAB8tmoW6UFv0NREVJe1p+jRxtThkcbbKkfwIbWJe/IeE6m2Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/parse-srcset": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
@@ -12460,6 +12800,27 @@
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
       "license": "MIT"
     },
+    "node_modules/path-root": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/path-root/-/path-root-0.1.1.tgz",
+      "integrity": "sha512-QLcPegTHF11axjfojBIoDygmS2E3Lf+8+jI6wOVmNVenrKSo3mFdSGiIgdSHenczw3wPtlVMQaFVwGmM7BJdtg==",
+      "license": "MIT",
+      "dependencies": {
+        "path-root-regex": "^0.1.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/path-root-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/path-root-regex/-/path-root-regex-0.1.2.tgz",
+      "integrity": "sha512-4GlJ6rZDhQZFE0DPVKh0e9jmZ5egZfxTkp7bcRDuPlJXbAwhxcl2dINPUAsjLdejqaLsCeg8axcLjIbvBjN4pQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/path-scurry": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-2.0.0.tgz",
@@ -12607,7 +12968,6 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=8.6"
@@ -13203,6 +13563,18 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.7.1",
+      "resolved": "https://registry.npmjs.org/rechoir/-/rechoir-0.7.1.tgz",
+      "integrity": "sha512-/njmZ8s1wVeR6pjTZ+0nCnv8SpZNRMT2D1RLOJQESlYFDBvwpTA4KWJpZ+sBJ4+vhjILRcK7JIFdGCdxEAAitg==",
+      "license": "MIT",
+      "dependencies": {
+        "resolve": "^1.9.0"
+      },
+      "engines": {
+        "node": ">= 0.10"
+      }
+    },
     "node_modules/redis": {
       "version": "4.7.1",
       "resolved": "https://registry.npmjs.org/redis/-/redis-4.7.1.tgz",
@@ -13354,6 +13726,19 @@
         "node": ">=8"
       }
     },
+    "node_modules/resolve-dir": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/resolve-dir/-/resolve-dir-1.0.1.tgz",
+      "integrity": "sha512-R7uiTjECzvOsWSfdM0QKFNBVFcK27aHOUwdvK53BcW8zqnGdYp0Fbj82cy54+2A4P2tFM22J5kRfe1R+lM/1yg==",
+      "license": "MIT",
+      "dependencies": {
+        "expand-tilde": "^2.0.0",
+        "global-modules": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
@@ -14589,7 +14974,6 @@
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
       "integrity": "sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-number": "^7.0.0"
@@ -15110,6 +15494,15 @@
       "integrity": "sha512-IevTus0SbGwQzYh3+fRsAMTVVPOoIVufzacXcHPmdlle1jUpq7BRL+mw3dgeLanvGZdwwbWhRV6XrcFNdBmjWA==",
       "license": "MIT"
     },
+    "node_modules/unc-path-regex": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
+      "integrity": "sha512-eXL4nmJT7oCpkZsHZUOJo8hcX3GbsiDOa0Qu9F646fi8dT3XuSVopVqAcEiVzSKKH7UoDti23wNX3qGFxcW5Qg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/undici-types": {
       "version": "5.26.5",
       "resolved": "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz",
@@ -15339,6 +15732,15 @@
         "node": ">=10.12.0"
       }
     },
+    "node_modules/v8flags": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/v8flags/-/v8flags-4.0.1.tgz",
+      "integrity": "sha512-fcRLaS4H/hrZk9hYwbdRM35D0U8IYMfEClhXxCivOojl+yTRAZH3Zy2sSy6qVCiGbV9YAtPssP6jaChqC9vPCg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/validator": {
       "version": "13.15.15",
       "resolved": "https://registry.npmjs.org/validator/-/validator-13.15.15.tgz",

worklenz-backend/package.json

@@ -35,12 +35,7 @@
     "inline-queries": "node ./cli/inline-queries",
     "sonar": "sonar-scanner -Dproject.settings=sonar-project-dev.properties",
     "tsc": "tsc",
-    "test:watch": "jest --watch --setupFiles dotenv/config",
+    "test:watch": "jest --watch --setupFiles dotenv/config"
-    "migrate": "node-pg-migrate",
-    "migrate:up": "npm run migrate up",
-    "migrate:down": "npm run migrate down",
-    "migrate:create": "npm run migrate create",
-    "migrate:redo": "npm run migrate redo"
   },
   "jestSonar": {
     "reportPath": "coverage",
@@ -155,7 +150,6 @@
     "jest": "^28.1.3",
     "jest-sonar-reporter": "^2.0.0",
     "ncp": "^2.0.0",
-    "node-pg-migrate": "^8.0.3",
     "nodeman": "^1.1.2",
     "rimraf": "^6.0.1",
     "swagger-jsdoc": "^6.2.8",

worklenz-frontend/index.html

@@ -57,116 +57,15 @@
     <!-- Environment configuration -->
     <script src="/env-config.js"></script>
     
-    <!-- Optimized Google Analytics with reduced blocking -->
+    <!-- Analytics Module -->
-    <script>
+    <script src="/js/analytics.js"></script>
-      // Function to initialize Google Analytics asynchronously
-      function initGoogleAnalytics() {
-        // Use requestIdleCallback to defer analytics loading
-        const loadAnalytics = () => {
-          // Determine which tracking ID to use based on the environment
-          const isProduction = window.location.hostname === 'app.worklenz.com';
-
-          const trackingId = isProduction ? 'G-7KSRKQ1397' : 'G-3LM2HGWEXG'; // Open source tracking ID
-
-          // Load the Google Analytics script
-          const script = document.createElement('script');
-          script.async = true;
-          script.src = `https://www.googletagmanager.com/gtag/js?id=${trackingId}`;
-          document.head.appendChild(script);
-
-          // Initialize Google Analytics
-          window.dataLayer = window.dataLayer || [];
-          function gtag() {
-            dataLayer.push(arguments);
-          }
-          gtag('js', new Date());
-          gtag('config', trackingId);
-        };
-
-        // Use requestIdleCallback if available, otherwise setTimeout
-        if ('requestIdleCallback' in window) {
-          requestIdleCallback(loadAnalytics, { timeout: 2000 });
-        } else {
-          setTimeout(loadAnalytics, 1000);
-        }
-      }
-
-      // Initialize analytics after a delay to not block initial render
-      initGoogleAnalytics();
-
-      // Function to show privacy notice
-      function showPrivacyNotice() {
-        const notice = document.createElement('div');
-        notice.style.cssText = `
-          position: fixed;
-          bottom: 16px;
-          right: 16px;
-          background: #222;
-          color: #f5f5f5;
-          padding: 12px 16px 10px 16px;
-          border-radius: 7px;
-          box-shadow: 0 2px 8px rgba(0,0,0,0.18);
-          z-index: 1000;
-          max-width: 320px;
-          font-family: Inter, sans-serif;
-          border: 1px solid #333;
-          font-size: 0.95rem;
-        `;
-        notice.innerHTML = `
-          <div style="margin-bottom: 6px; font-weight: 600; color: #fff; font-size: 1rem;">Analytics Notice</div>
-          <div style="margin-bottom: 8px; color: #f5f5f5;">This app uses Google Analytics for anonymous usage stats. No personal data is tracked.</div>
-          <button id="analytics-notice-btn" style="padding: 5px 14px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.95rem;">Got it</button>
-        `;
-        document.body.appendChild(notice);
-        // Add event listener to button
-        const btn = notice.querySelector('#analytics-notice-btn');
-        btn.addEventListener('click', function (e) {
-          e.preventDefault();
-          localStorage.setItem('privacyNoticeShown', 'true');
-          notice.remove();
-        });
-      }
-
-      // Wait for DOM to be ready
-      document.addEventListener('DOMContentLoaded', function () {
-        // Check if we should show the notice
-        const isProduction =
-          window.location.hostname === 'worklenz.com' ||
-          window.location.hostname === 'app.worklenz.com';
-        const noticeShown = localStorage.getItem('privacyNoticeShown') === 'true';
-
-        // Show notice if not in production and not shown before
-        if (!isProduction && !noticeShown) {
-          showPrivacyNotice();
-        }
-      });
-    </script>
   </head>
 
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <script type="module" src="./src/index.tsx"></script>
-    <script type="text/javascript">
+    <!-- HubSpot Integration Module -->
-      // Load HubSpot script asynchronously and only for production
+    <script src="/js/hubspot.js"></script>
-      if (window.location.hostname === 'app.worklenz.com') {
-        // Use requestIdleCallback to defer HubSpot loading
-        const loadHubSpot = () => {
-          var hs = document.createElement('script');
-          hs.type = 'text/javascript';
-          hs.id = 'hs-script-loader';
-          hs.async = true;
-          hs.defer = true;
-          hs.src = '//js.hs-scripts.com/22348300.js';
-          document.body.appendChild(hs);
-        };
-
-        if ('requestIdleCallback' in window) {
-          requestIdleCallback(loadHubSpot, { timeout: 3000 });
-        } else {
-          setTimeout(loadHubSpot, 2000);
-        }
-      }
-    </script>
   </body>
 </html>

worklenz-frontend/public/js/analytics.js

@@ -0,0 +1,97 @@
+/**
+ * Google Analytics initialization module
+ * Handles analytics loading and privacy notices
+ */
+
+class AnalyticsManager {
+  constructor() {
+    this.isProduction = window.location.hostname === 'app.worklenz.com';
+    this.trackingId = this.isProduction ? 'G-7KSRKQ1397' : 'G-3LM2HGWEXG';
+  }
+
+  /**
+   * Initialize Google Analytics asynchronously
+   */
+  init() {
+    const loadAnalytics = () => {
+      // Load the Google Analytics script
+      const script = document.createElement('script');
+      script.async = true;
+      script.src = `https://www.googletagmanager.com/gtag/js?id=${this.trackingId}`;
+      document.head.appendChild(script);
+
+      // Initialize Google Analytics
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag('js', new Date());
+      gtag('config', this.trackingId);
+    };
+
+    // Use requestIdleCallback if available, otherwise setTimeout
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(loadAnalytics, { timeout: 2000 });
+    } else {
+      setTimeout(loadAnalytics, 1000);
+    }
+  }
+
+  /**
+   * Show privacy notice for non-production environments
+   */
+  showPrivacyNotice() {
+    const notice = document.createElement('div');
+    notice.style.cssText = `
+      position: fixed;
+      bottom: 16px;
+      right: 16px;
+      background: #222;
+      color: #f5f5f5;
+      padding: 12px 16px 10px 16px;
+      border-radius: 7px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.18);
+      z-index: 1000;
+      max-width: 320px;
+      font-family: Inter, sans-serif;
+      border: 1px solid #333;
+      font-size: 0.95rem;
+    `;
+    notice.innerHTML = `
+      <div style="margin-bottom: 6px; font-weight: 600; color: #fff; font-size: 1rem;">Analytics Notice</div>
+      <div style="margin-bottom: 8px; color: #f5f5f5;">This app uses Google Analytics for anonymous usage stats. No personal data is tracked.</div>
+      <button id="analytics-notice-btn" style="padding: 5px 14px; background: #1890ff; color: white; border: none; border-radius: 3px; cursor: pointer; font-size: 0.95rem;">Got it</button>
+    `;
+    document.body.appendChild(notice);
+
+    // Add event listener to button
+    const btn = notice.querySelector('#analytics-notice-btn');
+    btn.addEventListener('click', (e) => {
+      e.preventDefault();
+      localStorage.setItem('privacyNoticeShown', 'true');
+      notice.remove();
+    });
+  }
+
+  /**
+   * Check if privacy notice should be shown
+   */
+  checkPrivacyNotice() {
+    const isProduction = 
+      window.location.hostname === 'worklenz.com' ||
+      window.location.hostname === 'app.worklenz.com';
+    const noticeShown = localStorage.getItem('privacyNoticeShown') === 'true';
+
+    // Show notice if not in production and not shown before
+    if (!isProduction && !noticeShown) {
+      this.showPrivacyNotice();
+    }
+  }
+}
+
+// Initialize analytics when DOM is ready
+document.addEventListener('DOMContentLoaded', () => {
+  const analytics = new AnalyticsManager();
+  analytics.init();
+  analytics.checkPrivacyNotice();
+});

worklenz-frontend/public/js/hubspot.js

@@ -0,0 +1,137 @@
+/**
+ * HubSpot Chat Widget integration module
+ * Handles widget loading and dark mode theming
+ */
+
+class HubSpotManager {
+  constructor() {
+    this.isProduction = window.location.hostname === 'app.worklenz.com';
+    this.scriptId = 'hs-script-loader';
+    this.scriptSrc = '//js.hs-scripts.com/22348300.js';
+    this.styleId = 'hubspot-dark-mode-override';
+  }
+
+  /**
+   * Load HubSpot script with dark mode support
+   */
+  init() {
+    if (!this.isProduction) return;
+
+    const loadHubSpot = () => {
+      const script = document.createElement('script');
+      script.type = 'text/javascript';
+      script.id = this.scriptId;
+      script.async = true;
+      script.defer = true;
+      script.src = this.scriptSrc;
+      
+      // Configure dark mode after script loads
+      script.onload = () => this.setupDarkModeSupport();
+      
+      document.body.appendChild(script);
+    };
+
+    // Use requestIdleCallback for better performance
+    if ('requestIdleCallback' in window) {
+      requestIdleCallback(loadHubSpot, { timeout: 3000 });
+    } else {
+      setTimeout(loadHubSpot, 2000);
+    }
+  }
+
+  /**
+   * Setup dark mode theme switching for HubSpot widget
+   */
+  setupDarkModeSupport() {
+    const applyTheme = () => {
+      const isDark = document.documentElement.classList.contains('dark');
+      
+      // Remove existing theme styles
+      const existingStyle = document.getElementById(this.styleId);
+      if (existingStyle) {
+        existingStyle.remove();
+      }
+      
+      if (isDark) {
+        this.injectDarkModeCSS();
+      }
+    };
+    
+    // Apply initial theme after delay to ensure widget is loaded
+    setTimeout(applyTheme, 1000);
+    
+    // Watch for theme changes
+    const observer = new MutationObserver(applyTheme);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ['class']
+    });
+  }
+
+  /**
+   * Inject CSS for dark mode styling
+   */
+  injectDarkModeCSS() {
+    const style = document.createElement('style');
+    style.id = this.styleId;
+    style.textContent = `
+      /* HubSpot Chat Widget Dark Mode Override */
+      #hubspot-conversations-inline-parent,
+      #hubspot-conversations-iframe-container,
+      .shadow-2xl.widget-align-right.widget-align-bottom,
+      [data-test-id="chat-widget"],
+      [class*="VizExCollapsedChat"],
+      [class*="VizExExpandedChat"],
+      iframe[src*="hubspot"] {
+        filter: invert(1) hue-rotate(180deg) !important;
+        background: transparent !important;
+      }
+      
+      /* Target HubSpot widget container backgrounds */
+      #hubspot-conversations-inline-parent div,
+      #hubspot-conversations-iframe-container div,
+      [data-test-id="chat-widget"] div {
+        background-color: transparent !important;
+      }
+      
+      /* Prevent double inversion of images, avatars, and icons */
+      #hubspot-conversations-iframe-container img,
+      #hubspot-conversations-iframe-container [style*="background-image"],
+      #hubspot-conversations-iframe-container svg,
+      iframe[src*="hubspot"] img,
+      iframe[src*="hubspot"] svg,
+      [data-test-id="chat-widget"] img,
+      [data-test-id="chat-widget"] svg {
+        filter: invert(1) hue-rotate(180deg) !important;
+      }
+      
+      /* Additional targeting for widget launcher and chat bubble */
+      div[class*="shadow-2xl"],
+      div[class*="widget-align"],
+      div[style*="position: fixed"] {
+        filter: invert(1) hue-rotate(180deg) !important;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Remove HubSpot widget and associated styles
+   */
+  cleanup() {
+    const script = document.getElementById(this.scriptId);
+    const style = document.getElementById(this.styleId);
+    
+    if (script) script.remove();
+    if (style) style.remove();
+  }
+}
+
+// Initialize HubSpot integration
+document.addEventListener('DOMContentLoaded', () => {
+  const hubspot = new HubSpotManager();
+  hubspot.init();
+  
+  // Make available globally for potential cleanup
+  window.HubSpotManager = hubspot;
+});

worklenz-frontend/public/locales/de/settings/team-members.json

@@ -38,10 +38,16 @@
   "updateMemberErrorMessage": "Aktualisierung des Teammitglieds fehlgeschlagen. Bitte versuchen Sie es erneut.",
   "memberText": "Mitglied",
   "adminText": "Administrator",
+  "guestText": "Gast (Nur Lesen)",
   "ownerText": "Team-Besitzer",
   "addedText": "Hinzugefügt",
   "updatedText": "Aktualisiert",
   "noResultFound": "Geben Sie eine E-Mail-Adresse ein und drücken Sie Enter...",
   "jobTitlesFetchError": "Fehler beim Abrufen der Jobtitel",
-  "invitationResent": "Einladung erfolgreich erneut gesendet!"
+  "invitationResent": "Einladung erfolgreich erneut gesendet!",
+  "emailsStepDescription": "Geben Sie E-Mail-Adressen für Teammitglieder ein, die Sie einladen möchten",
+  "personalMessageLabel": "Persönliche Nachricht",
+  "personalMessagePlaceholder": "Fügen Sie eine persönliche Nachricht zu Ihrer Einladung hinzu (optional)",
+  "optionalFieldLabel": "(Optional)",
+  "inviteTeamMembersModalTitle": "Teammitglieder einladen"
 }

worklenz-frontend/public/locales/en/settings/team-members.json

@@ -38,10 +38,16 @@
   "updateMemberErrorMessage": "Failed to update team member. Please try again.",
   "memberText": "Member",
   "adminText": "Admin",
+  "guestText": "Guest (Read-only)",
   "ownerText": "Team Owner",
   "addedText": "Added",
   "updatedText": "Updated",
   "noResultFound": "Type an email address and hit enter...",
   "jobTitlesFetchError": "Failed to fetch job titles",
-  "invitationResent": "Invitation resent successfully!"
+  "invitationResent": "Invitation resent successfully!",
+  "emailsStepDescription": "Enter email addresses for team members you'd like to invite",
+  "personalMessageLabel": "Personal Message",
+  "personalMessagePlaceholder": "Add a personal message to your invitation (optional)",
+  "optionalFieldLabel": "(Optional)",
+  "inviteTeamMembersModalTitle": "Invite team members"
 }

worklenz-frontend/public/locales/es/settings/team-members.json

@@ -38,10 +38,16 @@
   "updateMemberErrorMessage": "Error al actualizar miembro del equipo. Por favor, intente nuevamente.",
   "memberText": "Miembro del equipo",
   "adminText": "Administrador",
+  "guestText": "Invitado (Solo lectura)",
   "ownerText": "Propietario del equipo",
   "addedText": "Agregado",
   "updatedText": "Actualizado",
   "noResultFound": "Escriba una dirección de correo electrónico y presione enter...",
   "jobTitlesFetchError": "Error al obtener los cargos",
-  "invitationResent": "¡Invitación reenviada exitosamente!"
+  "invitationResent": "¡Invitación reenviada exitosamente!",
+  "emailsStepDescription": "Ingrese las direcciones de correo de los miembros del equipo que desea invitar",
+  "personalMessageLabel": "Mensaje Personal",
+  "personalMessagePlaceholder": "Agregue un mensaje personal a su invitación (opcional)",
+  "optionalFieldLabel": "(Opcional)",
+  "inviteTeamMembersModalTitle": "Invitar miembros del equipo"
 }

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
-import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
+import { PlusOutlined, UserAddOutlined } from '@/shared/antd-imports';
 import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';

worklenz-frontend/src/components/AuthPageHeader.tsx

@@ -1,4 +1,4 @@
-import { Flex, Typography } from 'antd';
+import { Flex, Typography } from '@/shared/antd-imports';
 import logo from '@/assets/images/worklenz-light-mode.png';
 import logoDark from '@/assets/images/worklenz-dark-mode.png';
 import { useAppSelector } from '@/hooks/useAppSelector';

worklenz-frontend/src/components/CustomAvatar.tsx

@@ -1,8 +1,6 @@
 import React from 'react';
-import Tooltip from 'antd/es/tooltip';
-import Avatar from 'antd/es/avatar';
-
 import { AvatarNamesMap } from '../shared/constants';
+import { Avatar, Tooltip } from '@/shared/antd-imports';
 
 interface CustomAvatarProps {
   avatarName: string;

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'antd';
+import { Tooltip } from '@/shared/antd-imports';
 import { Label } from '@/types/task-management.types';
 import { ITaskLabel } from '@/types/tasks/taskLabel.types';
 

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip } from 'antd';
+import { Tooltip } from '@/shared/antd-imports';
 import { NumbersColorMap } from '@/shared/constants';
 
 interface CustomNumberLabelProps {

worklenz-frontend/src/components/CustomSearchbar.tsx

@@ -1,5 +1,5 @@
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@/shared/antd-imports';
-import { Input } from 'antd';
+import { Input } from '@/shared/antd-imports';
 
 type CustomSearchbarProps = {
   placeholderText: string;

worklenz-frontend/src/components/CustomTableTitle.tsx

@@ -1,6 +1,6 @@
-import { Flex, Tooltip, Typography } from 'antd';
+import { Flex, Tooltip, Typography } from '@/shared/antd-imports';
 import { colors } from '../styles/colors';
-import { ExclamationCircleOutlined } from '@ant-design/icons';
+import { ExclamationCircleOutlined } from '@/shared/antd-imports';
 
 // this custom table title used when the typography font weigh 500 needed
 const CustomTableTitle = ({ title, tooltip }: { title: string; tooltip?: string | null }) => {

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

@@ -1,4 +1,4 @@
-import { Empty, Typography } from 'antd';
+import { Empty, Typography } from '@/shared/antd-imports';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 

worklenz-frontend/src/components/ErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Result } from 'antd';
+import { Button, Result } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import logger from '@/utils/errorLogger';

worklenz-frontend/src/components/LabelsSelector.tsx

@@ -1,7 +1,7 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useSelector } from 'react-redux';
-import { PlusOutlined, TagOutlined } from '@ant-design/icons';
+import { PlusOutlined, TagOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';

worklenz-frontend/src/components/ModuleErrorBoundary.tsx

@@ -1,5 +1,5 @@
 import React, { Component, ErrorInfo, ReactNode } from 'react';
-import { Button, Result } from 'antd';
+import { Button, Result } from '@/shared/antd-imports';
 import CacheCleanup from '@/utils/cache-cleanup';
 
 interface Props {

worklenz-frontend/src/components/PinRouteToNavbarButton.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import { getJSONFromLocalStorage, saveJSONToLocalStorage } from '../utils/localStorageFunctions';
-import { Button, ConfigProvider, Tooltip } from 'antd';
+import { Button, ConfigProvider, Tooltip } from '@/shared/antd-imports';
-import { PushpinFilled, PushpinOutlined } from '@ant-design/icons';
+import { PushpinFilled, PushpinOutlined } from '@/shared/antd-imports';
 import { colors } from '../styles/colors';
 import { navRoutes, NavRoutesType } from '../features/navbar/navRoutes';
 

worklenz-frontend/src/components/PreferenceSelector.tsx

@@ -1,5 +1,5 @@
-import { FloatButton, Space, Tooltip } from 'antd';
+import { FloatButton, Space, Tooltip } from '@/shared/antd-imports';
-import { FormatPainterOutlined } from '@ant-design/icons';
+import { FormatPainterOutlined } from '@/shared/antd-imports';
 // import LanguageSelector from '../features/i18n/language-selector';
 // import ThemeSelector from '../features/theme/ThemeSelector';
 

worklenz-frontend/src/components/TawkTo.tsx

@@ -1,50 +0,0 @@
-import { useEffect } from 'react';
-
-// Add TypeScript declarations for Tawk_API
-declare global {
-  interface Window {
-    Tawk_API?: any;
-    Tawk_LoadStart?: Date;
-  }
-}
-
-interface TawkToProps {
-  propertyId: string;
-  widgetId: string;
-}
-
-const TawkTo: React.FC<TawkToProps> = ({ propertyId, widgetId }) => {
-  useEffect(() => {
-    // Initialize tawk.to chat
-    const s1 = document.createElement('script');
-    s1.async = true;
-    s1.src = `https://embed.tawk.to/${propertyId}/${widgetId}`;
-    s1.setAttribute('crossorigin', '*');
-
-    const s0 = document.getElementsByTagName('script')[0];
-    s0.parentNode?.insertBefore(s1, s0);
-
-    return () => {
-      // Clean up when the component unmounts
-      // Remove the script tag
-      const tawkScript = document.querySelector(`script[src*="tawk.to/${propertyId}"]`);
-      if (tawkScript && tawkScript.parentNode) {
-        tawkScript.parentNode.removeChild(tawkScript);
-      }
-
-      // Remove the tawk.to iframe
-      const tawkIframe = document.getElementById('tawk-iframe');
-      if (tawkIframe) {
-        tawkIframe.remove();
-      }
-
-      // Reset Tawk globals
-      delete window.Tawk_API;
-      delete window.Tawk_LoadStart;
-    };
-  }, [propertyId, widgetId]);
-
-  return null;
-};
-
-export default TawkTo;

worklenz-frontend/src/components/account-setup/members-step.tsx

@@ -1,8 +1,8 @@
 import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, List, Alert, message, InputRef } from 'antd';
+import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
-import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@ant-design/icons';
+import { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
-import { Typography } from 'antd';
+import { Typography } from '@/shared/antd-imports';
 import { setTeamMembers, setTasks } from '@/features/account-setup/account-setup.slice';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from '@/app/store';

worklenz-frontend/src/components/account-setup/organization-step.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import { Form, Input, InputRef, Typography } from 'antd';
+import { Form, Input, InputRef, Typography } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { setOrganizationName } from '@/features/account-setup/account-setup.slice';

worklenz-frontend/src/components/account-setup/project-step.tsx

@@ -3,7 +3,7 @@ import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
-import { Button, Drawer, Form, Input, InputRef, Select, Typography } from 'antd';
+import { Button, Drawer, Form, Input, InputRef, Select, Typography } from '@/shared/antd-imports';
 import TemplateDrawer from '../common/template-drawer/template-drawer';
 
 import { RootState } from '@/app/store';

worklenz-frontend/src/components/account-setup/tasks-step.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef } from 'react';
-import { Form, Input, Button, Typography, List, InputRef } from 'antd';
+import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
-import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@/shared/antd-imports';
 import { useDispatch, useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { RootState } from '@/app/store';

worklenz-frontend/src/components/add-members-dropdown-v2/add-members-dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from 'antd';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
-import { UserAddOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import { UserAddOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
 import './add-members-dropdown.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { AvatarNamesMap } from '@/shared/constants';

worklenz-frontend/src/components/add-members-dropdown/add-members-dropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from 'antd';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
-import { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import { PlusOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
 import './add-members-dropdown.css';
 import { AvatarNamesMap } from '../../shared/constants';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/admin-center/billing/account-storage/account-storage.tsx

@@ -1,11 +1,8 @@
-import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import { fetchStorageInfo } from '@/features/admin-center/admin-center.slice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { SUBSCRIPTION_STATUS } from '@/shared/constants';
-import { IBillingAccountStorage } from '@/types/admin-center/admin-center.types';
+import { Card, Progress, Typography } from '@/shared/antd-imports';
-import logger from '@/utils/errorLogger';
-import { Card, Progress, Typography } from 'antd/es';
 import { useEffect, useState, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 

worklenz-frontend/src/components/admin-center/billing/billing-tables/charges-table.tsx

@@ -2,7 +2,7 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingCharge, IBillingChargesResponse } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 import { formatDate } from '@/utils/timeUtils';
-import { Table, TableProps, Tag } from 'antd';
+import { Table, TableProps, Tag } from '@/shared/antd-imports';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
@@ -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/billing-tables/invoices-table.tsx

@@ -2,8 +2,8 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingTransaction } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 import { formatDate } from '@/utils/timeUtils';
-import { ContainerOutlined } from '@ant-design/icons';
+import { ContainerOutlined } from '@/shared/antd-imports';
-import { Button, Table, TableProps, Tag, Tooltip } from 'antd';
+import { Button, Table, TableProps, Tag, Tooltip } from '@/shared/antd-imports';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

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

@@ -1,7 +1,7 @@
-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 { InfoCircleTwoTone } from '@/shared/antd-imports';
 import ChargesTable from './billing-tables/charges-table';
 import InvoicesTable from './billing-tables/invoices-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,
@@ -30,7 +29,7 @@ import {
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';
-import { WarningTwoTone, PlusOutlined } from '@ant-design/icons';
+import { WarningTwoTone, PlusOutlined } from '@/shared/antd-imports';
 import { calculateTimeGap } from '@/utils/calculate-time-gap';
 import { formatDate } from '@/utils/timeUtils';
 import UpgradePlansLKR from '../drawers/upgrade-plans-lkr/upgrade-plans-lkr';
@@ -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[] = useMemo(() => {
-  const seatCountOptions: SeatOption[] = [
+    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,
+      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 }));
+    ].map(value => ({ label: value.toString(), value }));
-  seatCountOptions.push({ label: '100+', value: '100+' });
+    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);
+        }, 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/redeem-code-drawer/redeem-code-drawer.tsx

@@ -1,4 +1,4 @@
-import { Button, Drawer, Form, Input, notification, Typography } from 'antd';
+import { Button, Drawer, Form, Input, notification, Typography } from '@/shared/antd-imports';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '@/hooks/useAppSelector';

worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans-lkr/upgrade-plans-lkr.tsx

@@ -1,7 +1,7 @@
-import { Button, Card, Col, Form, Input, notification, Row, Tag, Typography } from 'antd';
+import { Button, Card, Col, Form, Input, notification, Row, Tag, Typography } from '@/shared/antd-imports';
 import React, { useState } from 'react';
 import './upgrade-plans-lkr.css';
-import { CheckCircleFilled } from '@ant-design/icons';
+import { CheckCircleFilled } from '@/shared/antd-imports';
 import { RootState } from '@/app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/admin-center/billing/drawers/upgrade-plans/upgrade-plans.css

@@ -0,0 +1,44 @@
+.upgrade-plans-responsive {
+  padding: 24px;
+}
+
+.upgrade-plans-row-responsive {
+  width: 100%;
+  flex-wrap: wrap;
+}
+
+@media (max-width: 900px) {
+  .upgrade-plans-row-responsive .ant-col {
+    flex: 0 0 100%;
+    max-width: 100%;
+    margin-bottom: 16px;
+  }
+  .upgrade-plans-row-responsive .ant-card {
+    width: 100%;
+    min-width: 0;
+  }
+}
+
+@media (max-width: 600px) {
+  .upgrade-plans-responsive {
+    padding: 8px;
+  }
+  .upgrade-plans-row-responsive .ant-col {
+    padding: 0 !important;
+    margin-bottom: 12px;
+  }
+  .upgrade-plans-row-responsive .ant-card {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+  .upgrade-plans-responsive .ant-typography,
+  .upgrade-plans-responsive .ant-btn,
+  .upgrade-plans-responsive .ant-form-item {
+    width: 100%;
+    text-align: center;
+  }
+  .upgrade-plans-responsive .ant-btn {
+    margin-top: 12px;
+  }
+} 

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';
@@ -22,7 +22,7 @@ import {
 import logger from '@/utils/errorLogger';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { IPaddlePlans, SUBSCRIPTION_STATUS } from '@/shared/constants';
-import { CheckCircleFilled, InfoCircleOutlined } from '@ant-design/icons';
+import { CheckCircleFilled, InfoCircleOutlined } from '@/shared/antd-imports';
 import { useAuthService } from '@/hooks/useAuth';
 import { fetchBillingInfo, toggleUpgradeModal } from '@/features/admin-center/admin-center.slice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -30,6 +30,7 @@ import { billingApiService } from '@/api/admin-center/billing.api.service';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { setUser } from '@/features/user/userSlice';
 import { setSession } from '@/utils/session-helper';
+import './upgrade-plans.css';
 
 // Extend Window interface to include Paddle
 declare global {
@@ -65,20 +66,24 @@ const UpgradePlans = () => {
   const [paddleError, setPaddleError] = useState<string | null>(null);
 
   const populateSeatCountOptions = (currentSeats: number) => {
-    if (!currentSeats) return [];
+    if (typeof currentSeats !== 'number') return [];
 
     const step = 5;
     const maxSeats = 90;
-    const minValue = Math.min(currentSeats + 1);
+    const minValue = currentSeats;
-    const rangeStart = Math.ceil(minValue / step) * step;
+    const options: { value: number; disabled: boolean }[] = [];
-    const range = Array.from(
-      { length: Math.floor((maxSeats - rangeStart) / step) + 1 },
-      (_, i) => rangeStart + i * step
-    );
 
-    return currentSeats < step
+    // Always show 1-5, but disable if less than minValue
-      ? [...Array.from({ length: rangeStart - minValue }, (_, i) => minValue + i), ...range]
+    for (let i = 1; i <= 5; i++) {
-      : range;
+      options.push({ value: i, disabled: i < minValue });
+    }
+
+    // Show all multiples of 5 from 10 to maxSeats
+    for (let i = 10; i <= maxSeats; i += step) {
+      options.push({ value: i, disabled: i < minValue });
+    }
+
+    return options;
   };
 
   const fetchPricingPlans = async () => {
@@ -339,24 +344,25 @@ const UpgradePlans = () => {
   }, []);
 
   return (
-    <div>
+    <div className="upgrade-plans-responsive">
       <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}
               options={seatCountOptions.map(option => ({
-                value: option,
+                value: option.value,
-                text: option.toString(),
+                label: option.value.toString(),
+                disabled: option.disabled,
               }))}
               onChange={setSelectedSeatCount}
             />
@@ -365,31 +371,31 @@ const UpgradePlans = () => {
       </Flex>
 
       <Flex>
-        <Row className="w-full">
+        <Row className="w-full upgrade-plans-row-responsive">
           {/* Free Plan */}
           <Col span={8} style={{ padding: '0 4px' }}>
             <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 +407,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 +435,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>
@@ -448,7 +454,7 @@ const UpgradePlans = () => {
             <Card
               style={{ ...isSelected(paddlePlans.MONTHLY), height: '100%' }}
               hoverable
-              title={<span style={cardStyles.title}>{t('monthlyPlan')}</span>}
+              title={<span style={cardStyles.title}>{t('monthlyPlan', 'Monthly Plan')}</span>}
               onClick={() => setSelectedCard(paddlePlans.MONTHLY)}
             >
               <div style={cardStyles.priceContainer}>
@@ -469,16 +475,16 @@ const UpgradePlans = () => {
                   </Typography.Text>
                 </Flex>
                 <Flex justify="center" align="center">
-                  <Typography.Text>{t('billedMonthly')}</Typography.Text>
+                  <Typography.Text>{t('billedMonthly', 'Billed Monthly')}</Typography.Text>
                 </Flex>
               </div>
 
               <div style={cardStyles.featureList}>
-                {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>
@@ -509,8 +515,8 @@ const UpgradePlans = () => {
             disabled={billingInfo?.plan_id === plans.annual_plan_id}
           >
             {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
-              ? t('changeToPlan', { plan: t('annualPlan') })
+              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('annualPlan', 'Annual Plan') })
-              : t('continueWith', { plan: t('annualPlan') })}
+              : t('continueWith', 'Continue with {{plan}}', { plan: t('annualPlan', 'Annual Plan') })}
           </Button>
         )}
         {selectedPlan === paddlePlans.MONTHLY && (
@@ -522,8 +528,8 @@ const UpgradePlans = () => {
             disabled={billingInfo?.plan_id === plans.monthly_plan_id}
           >
             {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
-              ? t('changeToPlan', { plan: t('monthlyPlan') })
+              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('monthlyPlan', 'Monthly Plan') })
-              : t('continueWith', { plan: t('monthlyPlan') })}
+              : t('continueWith', 'Continue with {{plan}}', { plan: t('monthlyPlan', 'Monthly Plan') })}
           </Button>
         )}
       </Row>

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>
+          <Row gutter={[0, 0]}>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={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, fontSize: '14px' }}>
-            <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>
+          <Row gutter={[0, 0]}>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={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>
+          <Row gutter={[0, 0]}>
-            <Col
+            <Col xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="state" label="State" layout="vertical">
                 <Input placeholder="State" />
               </Form.Item>
             </Col>
           </Row>
-          <Row>
+          <Row gutter={[0, 0]}>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={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 xs={24} sm={24} md={8} lg={8} xl={8} style={{ ...buttonColStyle, marginTop: 8 }}>
               <Form.Item>
-                <Button type="primary" htmlType="submit">
+                <Button type="primary" htmlType="submit" loading={loading} block>
                   Save
                 </Button>
               </Form.Item>
@@ -212,6 +213,8 @@ const Configuration: React.FC = () => {
       </Card>
     </div>
   );
-};
+});
+
+Configuration.displayName = 'Configuration';
 
 export default Configuration;

worklenz-frontend/src/components/admin-center/overview/organization-admins-table/organization-admins-table.tsx

@@ -1,4 +1,4 @@
-import { Table, TableProps, Typography } from 'antd';
+import { Table, TableProps, Typography } from '@/shared/antd-imports';
 import React, { useMemo } from 'react';
 import { IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
 

worklenz-frontend/src/components/admin-center/overview/organization-name/organization-name.tsx

@@ -1,9 +1,7 @@
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import logger from '@/utils/errorLogger';
-import { EnterOutlined, EditOutlined } from '@ant-design/icons';
+import { EnterOutlined, EditOutlined } from '@/shared/antd-imports';
-import { Card, Button, Tooltip, Typography } from 'antd';
+import { Card, Button, Tooltip, Typography, TextArea } from '@/shared/antd-imports';
-import TextArea from 'antd/es/input/TextArea';
-import Paragraph from 'antd/es/typography/Paragraph';
 import { TFunction } from 'i18next';
 import { useState, useEffect } from 'react';
 

worklenz-frontend/src/components/admin-center/overview/organization-owner/organization-owner.tsx

@@ -1,8 +1,8 @@
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import { IOrganization } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
-import { MailOutlined, PhoneOutlined, EditOutlined } from '@ant-design/icons';
+import { MailOutlined, PhoneOutlined, EditOutlined } from '@/shared/antd-imports';
-import { Card, Tooltip, Input, Button, Typography, InputRef } from 'antd';
+import { Card, Tooltip, Input, Button, Typography, InputRef } from '@/shared/antd-imports';
 import { TFunction } from 'i18next';
 import { useEffect, useRef, useState } from 'react';
 

worklenz-frontend/src/components/admin-center/teams/add-team-drawer/add-team-drawer.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Button, Drawer, Form, Input, InputRef, Typography } from 'antd';
+import { Button, Drawer, Form, Input, InputRef, Typography } from '@/shared/antd-imports';
 import { fetchTeams } from '@features/teams/teamSlice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/admin-center/teams/settings-drawer/settings-drawer.tsx

@@ -11,7 +11,7 @@ import {
   TableProps,
   Typography,
   Tooltip,
-} from 'antd';
+} from '@/shared/antd-imports';
 import React, { useState } from 'react';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import './settings-drawer.css';

worklenz-frontend/src/components/admin-center/teams/teams-table/teams-table.tsx

@@ -5,8 +5,8 @@ import { toggleSettingDrawer, deleteTeam, fetchTeams } from '@/features/teams/te
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { IOrganizationTeam } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
-import { SettingOutlined, DeleteOutlined } from '@ant-design/icons';
+import { SettingOutlined, DeleteOutlined } from '@/shared/antd-imports';
-import { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from 'antd';
+import { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from '@/shared/antd-imports';
 import { TFunction } from 'i18next';
 import { useState } from 'react';
 import { useMediaQuery } from 'react-responsive';

worklenz-frontend/src/components/avatars/avatars.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Tooltip } from 'antd';
+import { Avatar, Tooltip } from '@/shared/antd-imports';
 import React, { useCallback, useMemo } from 'react';
 import { InlineMember } from '@/types/teamMembers/inlineMember.types';
 

worklenz-frontend/src/components/board/board-assignee-selector/board-assignee-selector.tsx

@@ -1,31 +1,32 @@
-import { InputRef } from 'antd/es/input';
-import Card from 'antd/es/card';
-import Checkbox from 'antd/es/checkbox';
-import Divider from 'antd/es/divider';
-import Dropdown from 'antd/es/dropdown';
-import Empty from 'antd/es/empty';
-import Flex from 'antd/es/flex';
-import Input from 'antd/es/input';
-import List from 'antd/es/list';
-import Typography from 'antd/es/typography';
-import Button from 'antd/es/button';
-
 import { useMemo, useRef, useState } from 'react';
+import {
+  InputRef,
+  PlusOutlined,
+  UsergroupAddOutlined,
+  Card,
+  Flex,
+  Input,
+  List,
+  Typography,
+  Checkbox,
+  Divider,
+  Button,
+  Empty,
+  Dropdown,
+  CheckboxChangeEvent,
+} from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleProjectMemberDrawer } from '../../../features/projects/singleProject/members/projectMembersSlice';
+import { toggleProjectMemberDrawer } from '@features/projects/singleProject/members/projectMembersSlice';
-import { colors } from '../../../styles/colors';
+import { colors } from '@/styles/colors';
-import { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
-import { CheckboxChangeEvent } from 'antd/es/checkbox';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITeamMembersViewModel } from '@/types/teamMembers/teamMembersViewModel.types';
-import { sortByBooleanField, sortBySelection, sortTeamMembers } from '@/utils/sort-team-members';
+import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAuthService } from '@/hooks/useAuth';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
-import { getTeamMembers } from '@/features/team-members/team-members.slice';
 
 interface BoardAssigneeSelectorProps {
   task: IProjectTask;

worklenz-frontend/src/components/board/changeCategoryDropdown/ChangeCategoryDropdown.tsx

@@ -1,9 +1,9 @@
-import { Badge, Card, Dropdown, Flex, Menu, MenuProps } from 'antd';
+import { Badge, Card, Dropdown, Flex, Menu, MenuProps } from '@/shared/antd-imports';
 import React from 'react';
 import { TaskStatusType } from '../../../types/task.types';
 import { colors } from '../../../styles/colors';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { RetweetOutlined, RightOutlined } from '@ant-design/icons';
+import { RetweetOutlined, RightOutlined } from '@/shared/antd-imports';
 import './ChangeCategoryDropdown.css';
 import { updateStatusCategory } from '../../../features/projects/status/StatusSlice';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/board/common-members-section/common-members-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/common-phase-section/common-phase-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/common-priority-section/common-priority-section.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/commonStatusSection/CommonStatusSection.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { setTaskCardDisabled, initializeStatus } from '../../../features/board/create-card.slice';
 import { TaskType } from '../../../types/task.types';
 import TaskCreateCard from '../taskCreateCard/TaskCreateCard';

worklenz-frontend/src/components/board/custom-avatar-group.tsx

@@ -1,4 +1,4 @@
-import { Button, Flex } from 'antd';
+import { Button, Flex } from '@/shared/antd-imports';
 import AddMembersDropdown from '@/components/add-members-dropdown/add-members-dropdown';
 import Avatars from '../avatars/avatars';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';

worklenz-frontend/src/components/board/custom-due-date-picker.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef } from 'react';
-import { DatePicker, Button, Flex } from 'antd';
+import { DatePicker, Button, Flex } from '@/shared/antd-imports';
-import { CalendarOutlined } from '@ant-design/icons';
+import { CalendarOutlined } from '@/shared/antd-imports';
 import dayjs, { Dayjs } from 'dayjs';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';

worklenz-frontend/src/components/board/kanban-group/kanban-group.tsx

@@ -1,12 +1,12 @@
 import React, { useEffect, useRef, useState } from 'react';
-import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from 'antd';
+import { Button, Dropdown, Input, InputRef, MenuProps, Typography } from '@/shared/antd-imports';
 import {
   DeleteOutlined,
   EditOutlined,
   LoadingOutlined,
   MoreOutlined,
   PlusOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';

worklenz-frontend/src/components/board/subTaskCard/SubTaskCard.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Avatar, Col, DatePicker, Divider, Flex, Row, Tooltip, Typography } from 'antd';
+import { Avatar, Col, DatePicker, Divider, Flex, Row, Tooltip, Typography } from '@/shared/antd-imports';
 import StatusDropdown from '../../taskListCommon/statusDropdown/StatusDropdown';
 import dayjs, { Dayjs } from 'dayjs';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/board/taskCard/TaskCard.tsx

@@ -9,7 +9,7 @@ import {
   Dropdown,
   MenuProps,
   Button,
-} from 'antd';
+} from '@/shared/antd-imports';
 import {
   DoubleRightOutlined,
   PauseOutlined,
@@ -20,7 +20,7 @@ import {
   ForkOutlined,
   CaretRightFilled,
   CaretDownFilled,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import './TaskCard.css';
 import dayjs, { Dayjs } from 'dayjs';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';

worklenz-frontend/src/components/board/taskCard/priority-section/priority-section.tsx

@@ -1,10 +1,10 @@
-import { Flex, Typography } from 'antd';
+import { Flex, Typography } from '@/shared/antd-imports';
 import './priority-section.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useState, useEffect, useMemo } from 'react';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { ITaskPriority } from '@/types/tasks/taskPriority.types';
-import { DoubleLeftOutlined, MinusOutlined, PauseOutlined } from '@ant-design/icons';
+import { DoubleLeftOutlined, MinusOutlined, PauseOutlined } from '@/shared/antd-imports';
 
 type PrioritySectionProps = {
   task: IProjectTask;

worklenz-frontend/src/components/board/taskCreateCard/TaskCreateCard.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, DatePicker, Input, InputRef } from 'antd';
+import { Avatar, Button, DatePicker, Input, InputRef } from '@/shared/antd-imports';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';
 import dayjs, { Dayjs } from 'dayjs';

worklenz-frontend/src/components/board/taskCreateCard/priority-task-create-card.tsx

@@ -1,4 +1,4 @@
-import { Avatar, Button, DatePicker, Input, InputRef } from 'antd';
+import { Avatar, Button, DatePicker, Input, InputRef } from '@/shared/antd-imports';
 import React, { forwardRef, useEffect, useRef, useState } from 'react';
 import AddMembersDropdown from '../../add-members-dropdown/add-members-dropdown';
 import dayjs, { Dayjs } from 'dayjs';

worklenz-frontend/src/components/calendars/homeCalendar/HomeCalendar.tsx

@@ -1,4 +1,4 @@
-import { Calendar } from 'antd';
+import { Calendar } from '@/shared/antd-imports';
 import React, { useEffect } from 'react';
 import type { Dayjs } from 'dayjs';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/charts/LazyChartComponents.tsx

@@ -1,5 +1,5 @@
 import { lazy, Suspense } from 'react';
-import { Spin } from 'antd';
+import { Spin } from '@/shared/antd-imports';
 
 // Lazy load Chart.js components
 const LazyBarChart = lazy(() => 

worklenz-frontend/src/components/charts/chart-loader.tsx

@@ -1,5 +1,5 @@
 import React, { Suspense } from 'react';
-import { Spin } from 'antd';
+import { Spin } from '@/shared/antd-imports';
 
 // Lazy load chart components to reduce initial bundle size
 const LazyBar = React.lazy(() =>

worklenz-frontend/src/components/common/invite-team-members-modal/InviteTeamMembersModal.tsx

@@ -0,0 +1,280 @@
+import { Button, Flex, Input, message, Modal, Select, Space, Typography, List, Avatar } from '@/shared/antd-imports';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import {
+  toggleInviteMemberDrawer,
+  triggerTeamMembersRefresh,
+} from '../../../features/settings/member/memberSlice';
+import { useTranslation } from 'react-i18next';
+import { useState, useEffect, useCallback, useMemo, memo } from 'react';
+import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
+import { DeleteOutlined, UserOutlined } from '@ant-design/icons';
+
+interface MemberEntry {
+  email: string;
+  access: 'member' | 'admin' | 'guest';
+}
+
+
+const InviteTeamMembersModal = () => {
+  const [newMembers, setNewMembers] = useState<MemberEntry[]>([]);
+  const [emailInput, setEmailInput] = useState('');
+  const [loading, setLoading] = useState(false);
+
+  const { t } = useTranslation('settings/team-members');
+  const isModalOpen = useAppSelector(state => state.memberReducer.isInviteMemberDrawerOpen);
+  const dispatch = useAppDispatch();
+
+
+  useEffect(() => {
+    if (isModalOpen) {
+      // Reset state when modal opens
+      setNewMembers([]);
+      setEmailInput('');
+      // Focus on email input when modal opens
+      setTimeout(() => {
+        const emailInput = document.querySelector('input[type="text"]');
+        if (emailInput) {
+          (emailInput as HTMLElement).focus();
+        }
+      }, 100);
+    }
+  }, [isModalOpen]);
+
+  const handleFormSubmit = async () => {
+    try {
+      setLoading(true);
+      
+      if (newMembers.length === 0) {
+        message.error('Please add at least one member');
+        return;
+      }
+
+      // Send invitations for each member
+      const promises = newMembers.map(member => {
+        const body: ITeamMemberCreateRequest = {
+          emails: [member.email],
+          is_admin: member.access === 'admin',
+          is_guest: member.access === 'guest',
+        };
+        return teamMembersApiService.createTeamMember(body);
+      });
+
+      const results = await Promise.allSettled(promises);
+      const successful = results.filter(r => r.status === 'fulfilled').length;
+      
+      if (successful > 0) {
+        message.success(`${successful} invitation(s) sent successfully`);
+        setNewMembers([]);
+        setEmailInput('');
+        dispatch(triggerTeamMembersRefresh());
+        dispatch(toggleInviteMemberDrawer());
+      }
+      
+      const failed = results.length - successful;
+      if (failed > 0) {
+        message.error(`${failed} invitation(s) failed`);
+      }
+    } catch (error) {
+      message.error(t('createMemberErrorMessage'));
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleClose = () => {
+    setNewMembers([]);
+    setEmailInput('');
+    dispatch(toggleInviteMemberDrawer());
+  };
+
+  const handleEmailKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      
+      const trimmedEmail = emailInput.trim();
+      
+      // Don't show error for empty input, just ignore
+      if (!trimmedEmail) {
+        return;
+      }
+      
+      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+      
+      if (!emailPattern.test(trimmedEmail)) {
+        message.error('Please enter a valid email address');
+        return;
+      }
+
+      // Check if email already exists
+      if (newMembers.find(m => m.email === trimmedEmail)) {
+        message.warning('Email already added');
+        return;
+      }
+
+      // Add new member
+      setNewMembers([...newMembers, { email: trimmedEmail, access: 'member' }]);
+      setEmailInput('');
+    }
+  };
+
+  const updateMemberAccess = (index: number, access: 'member' | 'admin' | 'guest') => {
+    const updated = [...newMembers];
+    updated[index].access = access;
+    setNewMembers(updated);
+  };
+
+  const removeMember = (index: number) => {
+    setNewMembers(newMembers.filter((_, i) => i !== index));
+  };
+
+
+
+
+  const accessOptions = useMemo(() => [
+    { value: 'member', label: t('memberText') },
+    { value: 'admin', label: t('adminText') },
+    { value: 'guest', label: t('guestText') },
+  ], [t]);
+
+  const renderContent = () => (
+    <div>
+      <div style={{ marginBottom: 16 }}>
+        <Input
+          placeholder="Enter email address and press Enter to add"
+          value={emailInput}
+          onChange={(e) => setEmailInput(e.target.value)}
+          onKeyPress={handleEmailKeyPress}
+          size="middle"
+          autoFocus
+          style={{
+            borderRadius: 8,
+            fontSize: 14
+          }}
+        />
+        <Typography.Text type="secondary" style={{ fontSize: 12, marginTop: 6, display: 'block', fontStyle: 'italic' }}>
+          Press Enter to add • Multiple emails can be added
+        </Typography.Text>
+      </div>
+
+      {newMembers.length > 0 && (
+        <div style={{ marginBottom: 20 }}>
+          <Typography.Text type="secondary" style={{ fontSize: 13, marginBottom: 12, display: 'block', fontWeight: 500 }}>
+            Members to invite ({newMembers.length})
+          </Typography.Text>
+          <div style={{
+            background: 'rgba(0, 0, 0, 0.02)',
+            borderRadius: 8,
+            padding: '8px 12px',
+            border: '1px solid rgba(0, 0, 0, 0.06)'
+          }}>
+            <List
+              size="small"
+              dataSource={newMembers}
+              split={false}
+              renderItem={(member, index) => (
+                <List.Item
+                  style={{ 
+                    padding: '8px 0',
+                    borderRadius: 6,
+                    marginBottom: index < newMembers.length - 1 ? 4 : 0
+                  }}
+                  actions={[
+                    <Select
+                      size="small"
+                      value={member.access}
+                      onChange={(value) => updateMemberAccess(index, value)}
+                      options={accessOptions}
+                      style={{ width: 90 }}
+                      variant="outlined"
+                    />,
+                    <Button
+                      type="text"
+                      icon={<DeleteOutlined />}
+                      onClick={() => removeMember(index)}
+                      size="small"
+                      danger
+                      style={{ 
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                      }}
+                    />
+                  ]}
+                >
+                  <List.Item.Meta
+                    avatar={
+                      <Avatar size={32} style={{ 
+                        backgroundColor: '#1677ff',
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'center'
+                      }}>
+                        <UserOutlined style={{ fontSize: 14 }} />
+                      </Avatar>
+                    }
+                    title={
+                      <span style={{ 
+                        fontSize: 14, 
+                        fontWeight: 500,
+                        color: 'rgba(0, 0, 0, 0.88)'
+                      }}>
+                        {member.email}
+                      </span>
+                    }
+                    description={
+                      <span style={{ 
+                        fontSize: 12, 
+                        color: '#52c41a',
+                        fontWeight: 500
+                      }}>
+                        Ready to invite
+                      </span>
+                    }
+                  />
+                </List.Item>
+              )}
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+
+
+  return (
+    <Modal
+      title={
+        <Typography.Text strong style={{ fontSize: 18 }}>
+          {t('inviteTeamMembersModalTitle')}
+        </Typography.Text>
+      }
+      open={isModalOpen}
+      onCancel={handleClose}
+      width={520}
+      destroyOnClose
+      bodyStyle={{ padding: '16px 20px' }}
+      footer={
+        <Flex justify="end">
+          <Space>
+            <Button onClick={handleClose}>
+              Cancel
+            </Button>
+            <Button 
+              type="primary" 
+              onClick={handleFormSubmit}
+              loading={loading}
+              disabled={newMembers.length === 0}
+            >
+              Send
+            </Button>
+          </Space>
+        </Flex>
+      }
+    >
+      {renderContent()}
+    </Modal>
+  );
+};
+
+export default memo(InviteTeamMembersModal);

worklenz-frontend/src/components/common/invite-team-members-modal/index.ts

@@ -0,0 +1 @@
+export { default } from './InviteTeamMembersModal';

worklenz-frontend/src/components/common/invite-team-members/invite-team-members.tsx

@@ -1,4 +1,4 @@
-import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from 'antd';
+import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import {

worklenz-frontend/src/components/common/people-dropdown/PeopleDropdown.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useRef, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
-import { PlusOutlined, UserAddOutlined } from '@ant-design/icons';
+import { PlusOutlined, UserAddOutlined } from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';

worklenz-frontend/src/components/common/project-status-icon/project-status-icon.tsx

@@ -4,7 +4,7 @@ import Icon, {
   ClockCircleOutlined,
   CloseCircleOutlined,
   StopOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 
 const iconMap = {
   'clock-circle': ClockCircleOutlined,

worklenz-frontend/src/components/common/single-avatar/single-avatar.tsx

@@ -1,5 +1,5 @@
 import { AvatarNamesMap } from '@/shared/constants';
-import { Avatar, Flex, Space } from 'antd';
+import { Avatar, Flex, Space } from '@/shared/antd-imports';
 
 interface SingleAvatarProps {
   avatarUrl?: string;

worklenz-frontend/src/components/common/template-drawer/template-drawer.tsx

@@ -1,4 +1,4 @@
-import type { MenuProps } from 'antd';
+import type { MenuProps } from '@/shared/antd-imports';
 import {
   Empty,
   List,
@@ -10,8 +10,7 @@ import {
   Image,
   Input,
   Flex,
-  Button,
+} from '@/shared/antd-imports';
-} from 'antd';
 import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
@@ -23,7 +22,7 @@ import {
   IWorklenzTemplate,
 } from '@/types/project-templates/project-templates.types';
 import './template-drawer.css';
-import { SearchOutlined } from '@ant-design/icons';
+import { SearchOutlined } from '@/shared/antd-imports';
 import logger from '@/utils/errorLogger';
 
 const { Title, Text } = Typography;

worklenz-frontend/src/components/common/tooltip-wrapper/tooltip-wrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Tooltip, TooltipProps } from 'antd';
+import { Tooltip, TooltipProps } from '@/shared/antd-imports';
 
 interface TooltipWrapperProps extends Omit<TooltipProps, 'children'> {
   children: React.ReactElement;

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoard.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useState, useMemo } from 'react';
 import { useSelector, useDispatch } from 'react-redux';
-import { Card, Spin, Empty } from 'antd';
+import { Card, Spin, Empty } from '@/shared/antd-imports';
 import {
   DndContext,
   DragOverlay,

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanBoardNativeDnD/EnhancedKanbanBoardNativeDnD.tsx

@@ -1,26 +1,32 @@
-import React, { useState, useEffect } from 'react';
+import React, { useEffect, useState } from 'react';
+import { Card, Empty } from '@/shared/antd-imports';
 import { useSelector, useDispatch } from 'react-redux';
 import { RootState } from '@/app/store';
-import '../EnhancedKanbanBoard.css';
-import '../EnhancedKanbanGroup.css';
-import '../EnhancedKanbanTaskCard.css';
-import ImprovedTaskFilters from '../../task-management/improved-task-filters';
-import Card from 'antd/es/card';
-import Spin from 'antd/es/spin';
-import Empty from 'antd/es/empty';
-import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
-import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
-import KanbanGroup from './KanbanGroup';
-import EnhancedKanbanCreateSection from '../EnhancedKanbanCreateSection';
-import { useSocket } from '@/socket/socketContext';
-import { SocketEvents } from '@/shared/socket-events';
 import { useAuthService } from '@/hooks/useAuth';
+import { useSocket } from '@/socket/socketContext';
+import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
 import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
+import {
+  reorderGroups,
+  reorderEnhancedKanbanGroups,
+  reorderTasks,
+  reorderEnhancedKanbanTasks,
+  fetchEnhancedKanbanLabels,
+  fetchEnhancedKanbanGroups,
+  fetchEnhancedKanbanTaskAssignees,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
-import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
+import KanbanGroup from './KanbanGroup';
+import EnhancedKanbanCreateSection from '../EnhancedKanbanCreateSection';
+import ImprovedTaskFilters from '../../task-management/improved-task-filters';
+import { SocketEvents } from '@/shared/socket-events';
+import '../EnhancedKanbanBoard.css';
+import '../EnhancedKanbanGroup.css';
+import '../EnhancedKanbanTaskCard.css';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
   const dispatch = useDispatch();

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSection.tsx

@@ -1,9 +1,9 @@
 import React, { useState, useRef, useEffect, useMemo } from 'react';
-import { Button, Flex } from 'antd';
+import { Button, Flex } from '@/shared/antd-imports';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import { nanoid } from '@reduxjs/toolkit';
-import { DownOutlined } from '@ant-design/icons';
+import { DownOutlined } from '@/shared/antd-imports';
 
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { themeWiseColor } from '@/utils/themeWiseColor';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateSubtaskCard.tsx

@@ -1,4 +1,4 @@
-import { Flex, Input, InputRef } from 'antd';
+import { Flex, Input, InputRef } from '@/shared/antd-imports';
 import React, { useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanCreateTaskCard.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState, useEffect } from 'react';
-import { Button, Flex, Input, InputRef } from 'antd';
+import { Button, Flex, Input, InputRef } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import { nanoid } from '@reduxjs/toolkit';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanGroup.tsx

@@ -12,7 +12,7 @@ import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
 import VirtualizedTaskList from './VirtualizedTaskList';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import './EnhancedKanbanGroup.css';
-import { Badge, Flex, InputRef, MenuProps, Popconfirm } from 'antd';
+import { Badge, Flex, InputRef, MenuProps, Popconfirm } from '@/shared/antd-imports';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import useIsProjectManager from '@/hooks/useIsProjectManager';
 import { useAuthService } from '@/hooks/useAuth';
@@ -25,11 +25,11 @@ import {
   MoreOutlined,
 } from '@ant-design/icons/lib/icons';
 import { colors } from '@/styles/colors';
-import { Input } from 'antd';
+import { Input } from '@/shared/antd-imports';
-import { Tooltip } from 'antd';
+import { Tooltip } from '@/shared/antd-imports';
-import { Typography } from 'antd';
+import { Typography } from '@/shared/antd-imports';
-import { Dropdown } from 'antd';
+import { Dropdown } from '@/shared/antd-imports';
-import { Button } from 'antd';
+import { Button } from '@/shared/antd-imports';
 import { PlusOutlined } from '@ant-design/icons/lib/icons';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/enhanced-kanban/EnhancedKanbanTaskCard.tsx

@@ -1,37 +1,38 @@
 import React, { useCallback, useMemo, useState } from 'react';
+import {
+  ForkOutlined,
+  CaretDownFilled,
+  CaretRightFilled,
+  Tag,
+  Flex,
+  Tooltip,
+  Progress,
+  Typography,
+  Button,
+  Divider,
+  List,
+  Skeleton,
+  PlusOutlined,
+  Dayjs,
+  dayjs,
+} from '@/shared/antd-imports';
 import { useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import { useTranslation } from 'react-i18next';
 import { useAppSelector } from '@/hooks/useAppSelector';
-import './EnhancedKanbanTaskCard.css';
-import Flex from 'antd/es/flex';
-import Tag from 'antd/es/tag';
-import Tooltip from 'antd/es/tooltip';
-import Progress from 'antd/es/progress';
-import Button from 'antd/es/button';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { setShowTaskDrawer, setSelectedTaskId } from '@/features/task-drawer/task-drawer.slice';
-import PrioritySection from '../board/taskCard/priority-section/priority-section';
-import Typography from 'antd/es/typography';
-import CustomDueDatePicker from '../board/custom-due-date-picker';
-import { themeWiseColor } from '@/utils/themeWiseColor';
-import { ForkOutlined } from '@ant-design/icons';
-import { Dayjs } from 'dayjs';
-import dayjs from 'dayjs';
-import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
 import {
   fetchBoardSubTasks,
   toggleTaskExpansion,
 } from '@/features/enhanced-kanban/enhanced-kanban.slice';
-import { Divider } from 'antd';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import { List } from 'antd';
+import { themeWiseColor } from '@/utils/themeWiseColor';
-import { Skeleton } from 'antd';
+import './EnhancedKanbanTaskCard.css';
-import { PlusOutlined } from '@ant-design/icons';
+import LazyAssigneeSelectorWrapper from '../task-management/lazy-assignee-selector';
+import CustomDueDatePicker from '../board/custom-due-date-picker';
 import BoardSubTaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-sub-task-card';
-import BoardCreateSubtaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card';
-import { useTranslation } from 'react-i18next';
 import EnhancedKanbanCreateSubtaskCard from './EnhancedKanbanCreateSubtaskCard';
-import LazyAssigneeSelectorWrapper from '@/components/task-management/lazy-assignee-selector';
 import AvatarGroup from '@/components/AvatarGroup';
 
 interface EnhancedKanbanTaskCardProps {

worklenz-frontend/src/components/home-tasks/statusDropdown/home-tasks-status-dropdown.tsx

@@ -1,4 +1,4 @@
-import { Badge, Flex, Select } from 'antd';
+import { Badge, Flex, Select } from '@/shared/antd-imports';
 import './home-tasks-status-dropdown.css';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/home-tasks/taskDatePicker/home-tasks-date-picker.tsx

@@ -1,6 +1,6 @@
 import { useSocket } from '@/socket/socketContext';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import { DatePicker } from 'antd';
+import { DatePicker } from '@/shared/antd-imports';
 import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import { SocketEvents } from '@/shared/socket-events';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanGroup.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
-import { Button, Typography } from 'antd';
+import { Button, Typography } from '@/shared/antd-imports';
-import { PlusOutlined, MenuOutlined } from '@ant-design/icons';
+import { PlusOutlined, MenuOutlined } from '@/shared/antd-imports';
 import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
 import KanbanTaskCard from './kanbanTaskCard';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskCard.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import { useSortable } from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
-import { Avatar, Tag, Progress, Typography, Button, Tooltip, Space } from 'antd';
+import { Avatar, Tag, Progress, Typography, Button, Tooltip, Space } from '@/shared/antd-imports';
 import {
   HolderOutlined,
   MessageOutlined,
   PaperClipOutlined,
   ClockCircleOutlined,
-} from '@ant-design/icons';
+} from '@/shared/antd-imports';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { IGroupBy } from '@/features/tasks/tasks.slice';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/kanban-board-management-v2/kanbanTaskListBoard.tsx

@@ -17,18 +17,13 @@ import {
   SortableContext,
   sortableKeyboardCoordinates,
 } from '@dnd-kit/sortable';
-import { Card, Spin, Empty, Flex } from 'antd';
+import { Card, Spin, Empty } from '@/shared/antd-imports';
 import { RootState } from '@/app/store';
-import { IGroupBy, setGroup, fetchTaskGroups, reorderTasks } from '@/features/tasks/tasks.slice';
+import { fetchTaskGroups, reorderTasks } from '@/features/tasks/tasks.slice';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { AppDispatch } from '@/app/store';
-import BoardSectionCard from '@/pages/projects/projectView/board/board-section/board-section-card/board-section-card';
-import BoardCreateSectionCard from '@/pages/projects/projectView/board/board-section/board-section-card/board-create-section-card';
 import { useAuthService } from '@/hooks/useAuth'; 
 import useIsProjectManager from '@/hooks/useIsProjectManager';
-import BoardViewTaskCard from '@/pages/projects/projectView/board/board-section/board-task-card/board-view-task-card';
-import TaskGroup from '../task-management/TaskGroup';
-import TaskRow from '../task-management/TaskRow';
 import KanbanGroup from './kanbanGroup';
 import KanbanTaskCard from './kanbanTaskCard';
 import SortableKanbanGroup from './SortableKanbanGroup';

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notfication-drawer.tsx

@@ -1,4 +1,4 @@
-import { Drawer, Empty, Segmented, Typography, Spin, Button, Flex } from 'antd';
+import { Drawer, Empty, Segmented, Typography, Spin, Button, Flex } from '@/shared/antd-imports';
 import { useEffect, useState } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notification-button.tsx

@@ -1,5 +1,5 @@
-import { BellOutlined } from '@ant-design/icons';
+import { BellOutlined } from '@/shared/antd-imports';
-import { Badge, Button, Tooltip } from 'antd';
+import { Badge, Button, Tooltip } from '@/shared/antd-imports';
 import { toggleDrawer } from '@features/navbar/notificationSlice';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useTranslation } from 'react-i18next';

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notification-item.tsx

@@ -1,6 +1,6 @@
 import { IWorklenzNotification } from '@/types/notifications/notifications.types';
-import { BankOutlined } from '@ant-design/icons';
+import { BankOutlined } from '@/shared/antd-imports';
-import { Button, Tag, Typography, theme } from 'antd';
+import { Button, Tag, Typography, theme } from '@/shared/antd-imports';
 import DOMPurify from 'dompurify';
 import React, { useState } from 'react';
 import { fromNow } from '@/utils/dateUtils';

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/notification-template.tsx

@@ -1,5 +1,5 @@
-import { Button, Typography, Tag } from 'antd';
+import { Button, Typography, Tag } from '@/shared/antd-imports';
-import { BankOutlined } from '@ant-design/icons';
+import { BankOutlined } from '@/shared/antd-imports';
 import { IWorklenzNotification } from '@/types/notifications/notifications.types';
 import { useNavigate } from 'react-router-dom';
 import { useAppDispatch } from '@/hooks/useAppDispatch';

worklenz-frontend/src/components/navbar/notifications/notifications-drawer/notification/push-notification-template.tsx

@@ -1,8 +1,8 @@
-import { notification } from 'antd';
+import { notification } from '@/shared/antd-imports';
 import { IWorklenzNotification } from '@/types/notifications/notifications.types';
 import { teamsApiService } from '@/api/teams/teams.api.service';
 import { toQueryString } from '@/utils/toQueryString';
-import { BankOutlined } from '@ant-design/icons';
+import { BankOutlined } from '@/shared/antd-imports';
 import './push-notification-template.css';
 
 const PushNotificationTemplate = ({