Merge pull request #288 from shancds/test/invitation-process

feat(assignee-selector): enhance member invitation functionality and …

.claude/settings.local.json

@@ -4,7 +4,9 @@
       "Bash(find:*)",
       "Bash(npm run build:*)",
       "Bash(npm run type-check:*)",
-      "Bash(npm run:*)"
+      "Bash(npm run:*)",
+      "Bash(grep:*)",
+      "Bash(rm:*)"
     ],
     "deny": []
   }

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

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/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/src/controllers/projects-controller.ts

@@ -71,7 +71,7 @@ export default class ProjectsController extends WorklenzControllerBase {
         return res.status(200).send(new ServerResponse(false, [], `Sorry, the free plan cannot have more than ${projectsLimit} projects.`));
       }
     }
-    
+
     const q = `SELECT create_project($1) AS project`;
 
     req.body.team_id = req.user?.team_id || null;
@@ -317,65 +317,58 @@ export default class ProjectsController extends WorklenzControllerBase {
   @HandleExceptions()
   public static async getMembersByProjectId(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const {sortField, sortOrder, size, offset} = this.toPaginationOptions(req.query, "name");
+    const search = (req.query.search || "").toString().trim();
+
+    let searchFilter = "";
+    const params = [req.params.id, req.user?.team_id ?? null, size, offset];
+    if (search) {
+      searchFilter = `
+        AND (
+          (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+          OR (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) ILIKE '%' || $5 || '%'
+        )
+      `;
+      params.push(search);
+    }
 
     const q = `
-      SELECT ROW_TO_JSON(rec) AS members
-      FROM (SELECT COUNT(*) AS total,
-                   (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
-                    FROM (SELECT project_members.id,
-                                 team_member_id,
-                                 (SELECT name
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id),
-                                 (SELECT email
-                                  FROM team_member_info_view
-                                  WHERE team_member_info_view.team_member_id = tm.id) AS email,
-                                 u.avatar_url,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
-                                 (SELECT COUNT(*)
-                                  FROM tasks
-                                  WHERE archived IS FALSE
-                                    AND project_id = project_members.project_id
-                                    AND id IN (SELECT task_id
-                                               FROM tasks_assignees
-                                               WHERE tasks_assignees.project_member_id = project_members.id)
-                                    AND status_id IN (SELECT id
-                                                      FROM task_statuses
-                                                      WHERE category_id = (SELECT id
-                                                                           FROM sys_task_status_categories
-                                                                           WHERE is_done IS TRUE))) AS completed_tasks_count,
-                                 EXISTS(SELECT email
-                                        FROM email_invitations
-                                        WHERE team_member_id = project_members.team_member_id
-                                          AND email_invitations.team_id = $2) AS pending_invitation,
-                                 (SELECT project_access_levels.name
-                                  FROM project_access_levels
-                                  WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
-                                 (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
-                          FROM project_members
-                                 INNER JOIN team_members tm ON project_members.team_member_id = tm.id
-                                 LEFT JOIN users u ON tm.user_id = u.id
-                          WHERE project_id = $1
-                          ORDER BY ${sortField} ${sortOrder}
-                          LIMIT $3 OFFSET $4) t) AS data
-            FROM project_members
-            WHERE project_id = $1) rec;
+      WITH filtered_members AS (
+        SELECT project_members.id,
+               team_member_id,
+               (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS name,
+               (SELECT email FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id) AS email,
+               u.avatar_url,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id)) AS all_tasks_count,
+               (SELECT COUNT(*) FROM tasks WHERE archived IS FALSE AND project_id = project_members.project_id AND id IN (SELECT task_id FROM tasks_assignees WHERE tasks_assignees.project_member_id = project_members.id) AND status_id IN (SELECT id FROM task_statuses WHERE category_id = (SELECT id FROM sys_task_status_categories WHERE is_done IS TRUE))) AS completed_tasks_count,
+               EXISTS(SELECT email FROM email_invitations WHERE team_member_id = project_members.team_member_id AND email_invitations.team_id = $2) AS pending_invitation,
+               (SELECT project_access_levels.name FROM project_access_levels WHERE project_access_levels.id = project_members.project_access_level_id) AS access,
+               (SELECT name FROM job_titles WHERE id = tm.job_title_id) AS job_title
+        FROM project_members
+        INNER JOIN team_members tm ON project_members.team_member_id = tm.id
+        LEFT JOIN users u ON tm.user_id = u.id
+        WHERE project_id = $1
+        ${search ? searchFilter : ""}
+      )
+      SELECT
+        (SELECT COUNT(*) FROM filtered_members) AS total,
+        (SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(t))), '[]'::JSON)
+           FROM (
+             SELECT * FROM filtered_members
+             ORDER BY ${sortField} ${sortOrder}
+             LIMIT $3 OFFSET $4
+           ) t
+        ) AS data
     `;
-    const result = await db.query(q, [req.params.id, req.user?.team_id ?? null, size, offset]);
+
+    const result = await db.query(q, params);
     const [data] = result.rows;
 
-    for (const member of data?.members.data || []) {
+    for (const member of data?.data || []) {
       member.progress = member.all_tasks_count > 0
         ? ((member.completed_tasks_count / member.all_tasks_count) * 100).toFixed(0) : 0;
     }
 
-    return res.status(200).send(new ServerResponse(true, data?.members || this.paginatedDatasetDefaultStruct));
+    return res.status(200).send(new ServerResponse(true, data || this.paginatedDatasetDefaultStruct));
   }
 
   @HandleExceptions()
@@ -779,7 +772,7 @@ export default class ProjectsController extends WorklenzControllerBase {
     let groupJoin = "";
     let groupByFields = "";
     let groupOrderBy = "";
-    
+
     switch (groupBy) {
       case "client":
         groupField = "COALESCE(projects.client_id::text, 'no-client')";
@@ -888,13 +881,13 @@ export default class ProjectsController extends WorklenzControllerBase {
                                              ELSE p2.updated_at END) AS updated_at
                             FROM projects p2
                             ${groupJoin.replace("projects.", "p2.")}
-                            WHERE p2.team_id = $1 
+                            WHERE p2.team_id = $1
                               AND ${groupField.replace("projects.", "p2.")} = ${groupField}
-                              ${categories.replace("projects.", "p2.")} 
-                              ${statuses.replace("projects.", "p2.")} 
-                              ${isArchived.replace("projects.", "p2.")} 
-                              ${isFavorites.replace("projects.", "p2.")} 
-                              ${filterByMember.replace("projects.", "p2.")} 
+                              ${categories.replace("projects.", "p2.")}
+                              ${statuses.replace("projects.", "p2.")}
+                              ${isArchived.replace("projects.", "p2.")}
+                              ${isFavorites.replace("projects.", "p2.")}
+                              ${filterByMember.replace("projects.", "p2.")}
                               ${searchQuery.replace("projects.", "p2.")}
                             ORDER BY ${innerSortField} ${sortOrder}
                           ) project_data

worklenz-backend/src/controllers/reporting/reporting-allocation-controller-updated.ts

@@ -0,0 +1,179 @@
+// Example of updated getMemberTimeSheets method with timezone support
+// This shows the key changes needed to handle timezones properly
+
+import moment from "moment-timezone";
+import db from "../../config/db";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
+import { ServerResponse } from "../../models/server-response";
+import { DATE_RANGES } from "../../shared/constants";
+
+export async function getMemberTimeSheets(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
+  const archived = req.query.archived === "true";
+  const teams = (req.body.teams || []) as string[];
+  const teamIds = teams.map(id => `'${id}'`).join(",");
+  const projects = (req.body.projects || []) as string[];
+  const projectIds = projects.map(p => `'${p}'`).join(",");
+  const {billable} = req.body;
+  
+  // Get user timezone from request or database
+  const userTimezone = req.body.timezone || await getUserTimezone(req.user?.id || "");
+  
+  if (!teamIds || !projectIds.length)
+    return res.status(200).send(new ServerResponse(true, { users: [], projects: [] }));
+    
+  const { duration, date_range } = req.body;
+  
+  // Calculate date range with timezone support
+  let startDate: moment.Moment;
+  let endDate: moment.Moment;
+  
+  if (date_range && date_range.length === 2) {
+    // Convert user's local dates to their timezone's start/end of day
+    startDate = moment.tz(date_range[0], userTimezone).startOf("day");
+    endDate = moment.tz(date_range[1], userTimezone).endOf("day");
+  } else if (duration === DATE_RANGES.ALL_TIME) {
+    const minDateQuery = `SELECT MIN(COALESCE(start_date, created_at)) as min_date FROM projects WHERE id IN (${projectIds})`;
+    const minDateResult = await db.query(minDateQuery, []);
+    const minDate = minDateResult.rows[0]?.min_date;
+    startDate = minDate ? moment.tz(minDate, userTimezone) : moment.tz("2000-01-01", userTimezone);
+    endDate = moment.tz(userTimezone);
+  } else {
+    // Calculate ranges based on user's timezone
+    const now = moment.tz(userTimezone);
+    
+    switch (duration) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, "day").startOf("day");
+        endDate = now.clone().subtract(1, "day").endOf("day");
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, "week").startOf("isoWeek");
+        endDate = now.clone().subtract(1, "week").endOf("isoWeek");
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, "month").startOf("month");
+        endDate = now.clone().subtract(1, "month").endOf("month");
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, "months").startOf("day");
+        endDate = now.clone().endOf("day");
+        break;
+      default:
+        startDate = now.clone().startOf("day");
+        endDate = now.clone().endOf("day");
+    }
+  }
+  
+  // Convert to UTC for database queries
+  const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
+  
+  // Calculate working days in user's timezone
+  const totalDays = endDate.diff(startDate, "days") + 1;
+  let workingDays = 0;
+  
+  const current = startDate.clone();
+  while (current.isSameOrBefore(endDate, "day")) {
+    if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+      workingDays++;
+    }
+    current.add(1, "day");
+  }
+  
+  // Updated SQL query with proper timezone handling
+  const billableQuery = buildBillableQuery(billable);
+  const archivedClause = archived ? "" : `AND projects.id NOT IN (SELECT project_id FROM archived_projects WHERE project_id = projects.id AND user_id = '${req.user?.id}')`;
+  
+  const q = `
+    WITH project_hours AS (
+      SELECT 
+        id,
+        COALESCE(hours_per_day, 8) as hours_per_day
+      FROM projects
+      WHERE id IN (${projectIds})
+    ),
+    total_working_hours AS (
+      SELECT 
+        SUM(hours_per_day) * ${workingDays} as total_hours
+      FROM project_hours
+    )
+    SELECT 
+      u.id,
+      u.email,
+      tm.name,
+      tm.color_code,
+      COALESCE(SUM(twl.time_spent), 0) as logged_time,
+      COALESCE(SUM(twl.time_spent), 0) / 3600.0 as value,
+      (SELECT total_hours FROM total_working_hours) as total_working_hours,
+      CASE 
+        WHEN (SELECT total_hours FROM total_working_hours) > 0 
+        THEN ROUND((COALESCE(SUM(twl.time_spent), 0) / 3600.0) / (SELECT total_hours FROM total_working_hours) * 100, 2)
+        ELSE 0 
+      END as utilization_percent,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0, 2) as utilized_hours,
+      ROUND(COALESCE(SUM(twl.time_spent), 0) / 3600.0 - (SELECT total_hours FROM total_working_hours), 2) as over_under_utilized_hours,
+      '${userTimezone}' as user_timezone,
+      '${startDate.format("YYYY-MM-DD")}' as report_start_date,
+      '${endDate.format("YYYY-MM-DD")}' as report_end_date
+    FROM team_members tm
+      LEFT JOIN users u ON tm.user_id = u.id
+      LEFT JOIN task_work_log twl ON twl.user_id = u.id
+      LEFT JOIN tasks t ON twl.task_id = t.id ${billableQuery}
+      LEFT JOIN projects p ON t.project_id = p.id
+    WHERE tm.team_id IN (${teamIds})
+      AND (
+        twl.id IS NULL 
+        OR (
+          p.id IN (${projectIds})
+          AND twl.created_at >= '${startUtc}'::TIMESTAMP 
+          AND twl.created_at <= '${endUtc}'::TIMESTAMP
+          ${archivedClause}
+        )
+      )
+    GROUP BY u.id, u.email, tm.name, tm.color_code
+    ORDER BY logged_time DESC`;
+    
+  const result = await db.query(q, []);
+  
+  // Add timezone context to response
+  const response = {
+    data: result.rows,
+    timezone_info: {
+      user_timezone: userTimezone,
+      report_period: {
+        start: startDate.format("YYYY-MM-DD HH:mm:ss z"),
+        end: endDate.format("YYYY-MM-DD HH:mm:ss z"),
+        working_days: workingDays,
+        total_days: totalDays
+      }
+    }
+  };
+  
+  return res.status(200).send(new ServerResponse(true, response));
+}
+
+async function getUserTimezone(userId: string): Promise<string> {
+  const q = `SELECT tz.name as timezone 
+             FROM users u 
+             JOIN timezones tz ON u.timezone_id = tz.id 
+             WHERE u.id = $1`;
+  const result = await db.query(q, [userId]);
+  return result.rows[0]?.timezone || "UTC";
+}
+
+function buildBillableQuery(billable: { billable: boolean; nonBillable: boolean }): string {
+  if (!billable) return "";
+  
+  const { billable: isBillable, nonBillable } = billable;
+  
+  if (isBillable && nonBillable) {
+    return "";
+  } else if (isBillable) {
+    return " AND tasks.billable IS TRUE";
+  } else if (nonBillable) {
+    return " AND tasks.billable IS FALSE";
+  }
+  
+  return "";
+}

worklenz-backend/src/controllers/reporting/reporting-controller-base-with-timezone.ts

@@ -0,0 +1,117 @@
+import WorklenzControllerBase from "../worklenz-controller-base";
+import { IWorkLenzRequest } from "../../interfaces/worklenz-request";
+import db from "../../config/db";
+import moment from "moment-timezone";
+import { DATE_RANGES } from "../../shared/constants";
+
+export default abstract class ReportingControllerBaseWithTimezone extends WorklenzControllerBase {
+  
+  /**
+   * Get the user's timezone from the database or request
+   * @param userId - The user ID
+   * @returns The user's timezone or 'UTC' as default
+   */
+  protected static async getUserTimezone(userId: string): Promise<string> {
+    const q = `SELECT tz.name as timezone 
+               FROM users u 
+               JOIN timezones tz ON u.timezone_id = tz.id 
+               WHERE u.id = $1`;
+    const result = await db.query(q, [userId]);
+    return result.rows[0]?.timezone || 'UTC';
+  }
+
+  /**
+   * Generate date range clause with timezone support
+   * @param key - Date range key (e.g., YESTERDAY, LAST_WEEK)
+   * @param dateRange - Array of date strings
+   * @param userTimezone - User's timezone (e.g., 'America/New_York')
+   * @returns SQL clause for date filtering
+   */
+  protected static getDateRangeClauseWithTimezone(key: string, dateRange: string[], userTimezone: string) {
+    // For custom date ranges
+    if (dateRange.length === 2) {
+      // Convert dates to user's timezone start/end of day
+      const start = moment.tz(dateRange[0], userTimezone).startOf('day');
+      const end = moment.tz(dateRange[1], userTimezone).endOf('day');
+      
+      // Convert to UTC for database comparison
+      const startUtc = start.utc().format("YYYY-MM-DD HH:mm:ss");
+      const endUtc = end.utc().format("YYYY-MM-DD HH:mm:ss");
+      
+      if (start.isSame(end, 'day')) {
+        // Single day selection
+        return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+      }
+      
+      return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+    }
+
+    // For predefined ranges, calculate based on user's timezone
+    const now = moment.tz(userTimezone);
+    let startDate, endDate;
+
+    switch (key) {
+      case DATE_RANGES.YESTERDAY:
+        startDate = now.clone().subtract(1, 'day').startOf('day');
+        endDate = now.clone().subtract(1, 'day').endOf('day');
+        break;
+      case DATE_RANGES.LAST_WEEK:
+        startDate = now.clone().subtract(1, 'week').startOf('week');
+        endDate = now.clone().subtract(1, 'week').endOf('week');
+        break;
+      case DATE_RANGES.LAST_MONTH:
+        startDate = now.clone().subtract(1, 'month').startOf('month');
+        endDate = now.clone().subtract(1, 'month').endOf('month');
+        break;
+      case DATE_RANGES.LAST_QUARTER:
+        startDate = now.clone().subtract(3, 'months').startOf('day');
+        endDate = now.clone().endOf('day');
+        break;
+      default:
+        return "";
+    }
+
+    if (startDate && endDate) {
+      const startUtc = startDate.utc().format("YYYY-MM-DD HH:mm:ss");
+      const endUtc = endDate.utc().format("YYYY-MM-DD HH:mm:ss");
+      return `AND task_work_log.created_at >= '${startUtc}'::TIMESTAMP AND task_work_log.created_at <= '${endUtc}'::TIMESTAMP`;
+    }
+
+    return "";
+  }
+
+  /**
+   * Format dates for display in user's timezone
+   * @param date - Date to format
+   * @param userTimezone - User's timezone
+   * @param format - Moment format string
+   * @returns Formatted date string
+   */
+  protected static formatDateInTimezone(date: string | Date, userTimezone: string, format: string = "YYYY-MM-DD HH:mm:ss") {
+    return moment.tz(date, userTimezone).format(format);
+  }
+
+  /**
+   * Get working days count between two dates in user's timezone
+   * @param startDate - Start date
+   * @param endDate - End date
+   * @param userTimezone - User's timezone
+   * @returns Number of working days
+   */
+  protected static getWorkingDaysInTimezone(startDate: string, endDate: string, userTimezone: string): number {
+    const start = moment.tz(startDate, userTimezone);
+    const end = moment.tz(endDate, userTimezone);
+    let workingDays = 0;
+    
+    const current = start.clone();
+    while (current.isSameOrBefore(end, 'day')) {
+      // Monday = 1, Friday = 5
+      if (current.isoWeekday() >= 1 && current.isoWeekday() <= 5) {
+        workingDays++;
+      }
+      current.add(1, 'day');
+    }
+    
+    return workingDays;
+  }
+}

worklenz-backend/src/controllers/reporting/reporting-members-controller.ts

@@ -6,10 +6,69 @@ import { IWorkLenzResponse } from "../../interfaces/worklenz-response";
 import { ServerResponse } from "../../models/server-response";
 import { DATE_RANGES, TASK_PRIORITY_COLOR_ALPHA } from "../../shared/constants";
 import { formatDuration, getColor, int } from "../../shared/utils";
-import ReportingControllerBase from "./reporting-controller-base";
+import ReportingControllerBaseWithTimezone from "./reporting-controller-base-with-timezone";
 import Excel from "exceljs";
 
-export default class ReportingMembersController extends ReportingControllerBase {
+export default class ReportingMembersController extends ReportingControllerBaseWithTimezone {
+
+  protected static getPercentage(n: number, total: number) {
+    return +(n ? (n / total) * 100 : 0).toFixed();
+  }
+
+  protected static getCurrentTeamId(req: IWorkLenzRequest): string | null {
+    return req.user?.team_id ?? null;
+  }
+
+  public static convertMinutesToHoursAndMinutes(totalMinutes: number) {
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours}h ${minutes}m`;
+  }
+
+  public static convertSecondsToHoursAndMinutes(seconds: number) {
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor((seconds % 3600) / 60);
+    return `${hours}h ${minutes}m`;
+  }
+
+  protected static formatEndDate(endDate: string) {
+    const end = moment(endDate).format("YYYY-MM-DD");
+    const fEndDate = moment(end);
+    return fEndDate;
+  }
+
+  protected static formatCurrentDate() {
+    const current = moment().format("YYYY-MM-DD");
+    const fCurrentDate = moment(current);
+    return fCurrentDate;
+  }
+
+  protected static getDaysLeft(endDate: string): number | null {
+    if (!endDate) return null;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.diff(fCurrentDate, "days");
+  }
+
+  protected static isOverdue(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isBefore(fCurrentDate);
+  }
+
+  protected static isToday(endDate: string): boolean {
+    if (!endDate) return false;
+
+    const fCurrentDate = this.formatCurrentDate();
+    const fEndDate = this.formatEndDate(endDate);
+
+    return fEndDate.isSame(fCurrentDate);
+  }
 
   private static async getMembers(
     teamId: string, searchQuery = "",
@@ -487,7 +546,9 @@ export default class ReportingMembersController extends ReportingControllerBase
       dateRange = date_range.split(",");
     }
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "twl");
+    // Get user timezone for proper date filtering
+    const userTimezone = await this.getUserTimezone(req.user?.id as string);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration as string || DATE_RANGES.LAST_WEEK, dateRange, userTimezone);
     const minMaxDateClause = this.getMinMaxDates(duration as string || DATE_RANGES.LAST_WEEK, dateRange, "task_work_log");
     const memberName = (req.query.member_name as string)?.trim() || null;
 
@@ -1038,7 +1099,9 @@ export default class ReportingMembersController extends ReportingControllerBase
   public static async getMemberTimelogs(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
     const { team_member_id, team_id, duration, date_range, archived, billable } = req.body;
 
-    const durationClause = ReportingMembersController.getDateRangeClauseMembers(duration || DATE_RANGES.LAST_WEEK, date_range, "twl");
+    // Get user timezone for proper date filtering
+    const userTimezone = await this.getUserTimezone(req.user?.id as string);
+    const durationClause = this.getDateRangeClauseWithTimezone(duration || DATE_RANGES.LAST_WEEK, date_range, userTimezone);
     const minMaxDateClause = this.getMinMaxDates(duration || DATE_RANGES.LAST_WEEK, date_range, "task_work_log");
 
     const billableQuery = this.buildBillableQuery(billable);
@@ -1230,8 +1293,8 @@ public static async getSingleMemberProjects(req: IWorkLenzRequest, res: IWorkLen
     row.actual_time = int(row.actual_time);
     row.estimated_time_string = this.convertMinutesToHoursAndMinutes(int(row.estimated_time));
     row.actual_time_string = this.convertSecondsToHoursAndMinutes(int(row.actual_time));
-    row.days_left = ReportingControllerBase.getDaysLeft(row.end_date);
-    row.is_overdue = ReportingControllerBase.isOverdue(row.end_date);
+    row.days_left = this.getDaysLeft(row.end_date);
+    row.is_overdue = this.isOverdue(row.end_date);
     if (row.days_left && row.is_overdue) {
       row.days_left = row.days_left.toString().replace(/-/g, "");
     }

worklenz-backend/src/controllers/tasks-controller-base.ts

@@ -16,6 +16,7 @@ export interface ITaskGroup {
   start_date?: string;
   end_date?: string;
   color_code: string;
+  color_code_dark: string;
   category_id: string | null;
   old_category_id?: string;
   todo_progress?: number;

worklenz-backend/src/shared/constants.ts

@@ -89,24 +89,24 @@ export const NumbersColorMap: { [x: string]: string } = {
 };
 
 export const PriorityColorCodes: { [x: number]: string; } = {
-  0: "#75c997",
-  1: "#fbc84c",
-  2: "#f37070"
+  0: "#2E8B57",
+  1: "#DAA520",
+  2: "#CD5C5C"
 };
 
 export const PriorityColorCodesDark: { [x: number]: string; } = {
-  0: "#46D980",
-  1: "#FFC227",
-  2: "#FF4141"
+  0: "#3CB371",
+  1: "#B8860B",
+  2: "#F08080"
 };
 
 export const TASK_STATUS_TODO_COLOR = "#a9a9a9";
 export const TASK_STATUS_DOING_COLOR = "#70a6f3";
 export const TASK_STATUS_DONE_COLOR = "#75c997";
 
-export const TASK_PRIORITY_LOW_COLOR = "#75c997";
-export const TASK_PRIORITY_MEDIUM_COLOR = "#fbc84c";
-export const TASK_PRIORITY_HIGH_COLOR = "#f37070";
+export const TASK_PRIORITY_LOW_COLOR = "#2E8B57";
+export const TASK_PRIORITY_MEDIUM_COLOR = "#DAA520";
+export const TASK_PRIORITY_HIGH_COLOR = "#CD5C5C";
 
 export const TASK_DUE_COMPLETED_COLOR = "#75c997";
 export const TASK_DUE_UPCOMING_COLOR = "#70a6f3";

worklenz-frontend/index.html

@@ -57,116 +57,15 @@
     <!-- Environment configuration -->
     <script src="/env-config.js"></script>
     
-    <!-- Optimized Google Analytics with reduced blocking -->
-    <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>
+    <!-- Analytics Module -->
+    <script src="/js/analytics.js"></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">
-      // Load HubSpot script asynchronously and only for production
-      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>
+    <!-- HubSpot Integration Module -->
+    <script src="/js/hubspot.js"></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/alb/auth/signup.json

@@ -7,11 +7,13 @@
   "emailLabel": "Email",
   "emailPlaceholder": "Shkruani email-in tuaj",
   "emailRequired": "Ju lutemi shkruani Email-in tuaj!",
-  "passwordLabel": "Fjalëkalimi",
-  "passwordPlaceholder": "Krijoni një fjalëkalim",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
   "passwordRequired": "Ju lutemi krijoni një Fjalëkalim!",
   "passwordMinCharacterRequired": "Fjalëkalimi duhet të jetë së paku 8 karaktere!",
-  "passwordPatternRequired": "Fjalëkalimi nuk plotëson kërkesat!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "Fjalëkalimi nuk i plotëson kërkesat!",
   "strongPasswordPlaceholder": "Vendosni një fjalëkalim më të fortë",
   "passwordValidationAltText": "Fjalëkalimi duhet të përmbajë së paku 8 karaktere me shkronja të mëdha dhe të vogla, një numër dhe një simbol.",
   "signupSuccessMessage": "Jeni regjistruar me sukses!",

worklenz-frontend/public/locales/alb/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Po",
   "deleteConfirmationCancel": "Anulo",
 
+  "deleteTaskTitle": "Fshi Detyrën",
+  "deleteTaskContent": "Jeni i sigurt që doni të fshini këtë detyrë? Kjo veprim nuk mund të zhbëhet.",
+  "deleteTaskConfirm": "Fshi",
+  "deleteTaskCancel": "Anulo",
+
+  "deleteStatusTitle": "Fshi Statusin",
+  "deleteStatusContent": "Jeni i sigurt që doni të fshini këtë status? Kjo veprim nuk mund të zhbëhet.",
+
+  "deletePhaseTitle": "Fshi Fazen",
+  "deletePhaseContent": "Jeni i sigurt që doni të fshini këtë fazë? Kjo veprim nuk mund të zhbëhet.",
+
   "dueDate": "Data e përfundimit",
   "cancel": "Anulo",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Pa datë përfundimi",
   "save": "Ruaj",
   "clear": "Pastro",
-  "nextWeek": "Javën e ardhshme"
+  "nextWeek": "Javën e ardhshme",
+  "noSubtasks": "Pa nëndetyra",
+  "showSubtasks": "Shfaq nëndetyrat",
+  "hideSubtasks": "Fshih nëndetyrat",
+  
+  "errorLoadingTasks": "Gabim gjatë ngarkimit të detyrave",
+  "noTasksFound": "Nuk u gjetën detyra",
+  "loadingFilters": "Duke ngarkuar filtra...",
+  "failedToUpdateColumnOrder": "Dështoi përditësimi i rendit të kolonave",
+  "failedToUpdatePhaseOrder": "Dështoi përditësimi i rendit të fazave",
+  "pleaseTryAgain": "Ju lutemi provoni përsëri",
+  "taskNotCompleted": "Detyra nuk është përfunduar",
+  "completeTaskDependencies": "Ju lutemi përfundoni varësitë e detyrës para se të vazhdoni"
 }

worklenz-frontend/public/locales/alb/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Hiq nga projekti",
   "memberCount": "Anëtar",
   "membersCountPlural": "Anëtarë",
-  "emptyText": "Nuk ka bashkëngjitje në projekt."
+  "emptyText": "Nuk ka bashkëngjitje në projekt.",
+  "searchPlaceholder": "Kërko anëtarë"
 }

worklenz-frontend/public/locales/alb/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Shtoni anëtarë duke shkruar emrin ose email-in e tyre",
   "searchPlaceholder": "Shkruani emrin ose email-in",
   "inviteAsAMember": "Fto si anëtar",
-  "inviteNewMemberByEmail": "Fto anëtar të ri me email"
+  "inviteNewMemberByEmail": "Fto anëtar të ri me email",
+  "members": "Anëtarë",
+  "copyProjectLink": "Kopjo lidhjen e projektit",
+  "inviteMember": "Fto anëtar",
+  "alsoInviteToProject": "Fto edhe në projekt"
 }

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

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Titulli i Punës",
   "jobTitlePlaceholder": "Zgjidh ose kërko titull pune (Opsionale)",
   "memberAccessLabel": "Niveli i Qasjes",
-  "addToTeamButton": "Shto Anëtar në Ekip",
+  "addToTeamButton": "Dërgo ftesën",
   "updateButton": "Ruaj Ndryshimet",
   "resendInvitationButton": "Dërgo Përsëri Email-in e Ftesës",
   "invitationSentSuccessMessage": "Ftesa për ekip u dërgua me sukses!",
@@ -43,5 +43,6 @@
   "updatedText": "Përditësuar",
   "noResultFound": "Shkruani një adresë email dhe shtypni Enter...",
   "jobTitlesFetchError": "Dështoi marrja e titujve të punës",
-  "invitationResent": "Ftesa u dërgua sërish me sukses!"
+  "invitationResent": "Ftesa u dërgua sërish me sukses!",
+  "copyTeamLink": "Kopjo lidhjen e ekipit"
 }

worklenz-frontend/public/locales/de/auth/signup.json

@@ -7,11 +7,13 @@
   "emailLabel": "E-Mail",
   "emailPlaceholder": "Ihre E-Mail-Adresse eingeben",
   "emailRequired": "Bitte geben Sie Ihre E-Mail-Adresse ein!",
-  "passwordLabel": "Passwort",
-  "passwordPlaceholder": "Ihr Passwort eingeben",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
   "passwordRequired": "Bitte geben Sie Ihr Passwort ein!",
   "passwordMinCharacterRequired": "Das Passwort muss mindestens 8 Zeichen lang sein!",
-  "passwordPatternRequired": "Das Passwort erfüllt nicht die Anforderungen!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "Das Passwort entspricht nicht den Anforderungen!",
   "strongPasswordPlaceholder": "Ein stärkeres Passwort eingeben",
   "passwordValidationAltText": "Das Passwort muss mindestens 8 Zeichen enthalten, mit Groß- und Kleinbuchstaben, einer Zahl und einem Sonderzeichen.",
   "signupSuccessMessage": "Sie haben sich erfolgreich registriert!",

worklenz-frontend/public/locales/de/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Ja",
   "deleteConfirmationCancel": "Abbrechen",
 
+  "deleteTaskTitle": "Aufgabe löschen",
+  "deleteTaskContent": "Sind Sie sicher, dass Sie diese Aufgabe löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+  "deleteTaskConfirm": "Löschen",
+  "deleteTaskCancel": "Abbrechen",
+
+  "deleteStatusTitle": "Status löschen",
+  "deleteStatusContent": "Sind Sie sicher, dass Sie diesen Status löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
+  "deletePhaseTitle": "Phase löschen",
+  "deletePhaseContent": "Sind Sie sicher, dass Sie diese Phase löschen möchten? Diese Aktion kann nicht rückgängig gemacht werden.",
+
   "dueDate": "Fälligkeitsdatum",
   "cancel": "Abbrechen",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Kein Fälligkeitsdatum",
   "save": "Speichern",
   "clear": "Löschen",
-  "nextWeek": "Nächste Woche"
+  "nextWeek": "Nächste Woche",
+  "noSubtasks": "Keine Unteraufgaben",
+  "showSubtasks": "Unteraufgaben anzeigen",
+  "hideSubtasks": "Unteraufgaben ausblenden",
+  
+  "errorLoadingTasks": "Fehler beim Laden der Aufgaben",
+  "noTasksFound": "Keine Aufgaben gefunden",
+  "loadingFilters": "Filter werden geladen...",
+  "failedToUpdateColumnOrder": "Fehler beim Aktualisieren der Spaltenreihenfolge",
+  "failedToUpdatePhaseOrder": "Fehler beim Aktualisieren der Phasenreihenfolge",
+  "pleaseTryAgain": "Bitte versuchen Sie es erneut",
+  "taskNotCompleted": "Aufgabe ist nicht abgeschlossen",
+  "completeTaskDependencies": "Bitte schließen Sie die Aufgabenabhängigkeiten ab, bevor Sie fortfahren"
 }

worklenz-frontend/public/locales/de/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Aus Projekt entfernen",
   "memberCount": "Mitglied",
   "membersCountPlural": "Mitglieder",
-  "emptyText": "Es gibt keine Anhänge in diesem Projekt."
+  "emptyText": "Es gibt keine Anhänge in diesem Projekt.",
+  "searchPlaceholder": "Mitglieder suchen"
 }

worklenz-frontend/public/locales/de/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Mitglieder hinzufügen durch Eingabe von Name oder E-Mail",
   "searchPlaceholder": "Name oder E-Mail eingeben",
   "inviteAsAMember": "Als Mitglied einladen",
-  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen"
+  "inviteNewMemberByEmail": "Neues Mitglied per E-Mail einladen",
+  "members": "Mitglieder",
+  "copyProjectLink": "Projektlink kopieren",
+  "inviteMember": "Mitglied einladen",
+  "alsoInviteToProject": "Auch zum Projekt einladen"
 }

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

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Jobtitel",
   "jobTitlePlaceholder": "Jobtitel auswählen oder suchen (optional)",
   "memberAccessLabel": "Zugriffslevel",
-  "addToTeamButton": "Mitglied zum Team hinzufügen",
+  "addToTeamButton": "Einladung senden",
   "updateButton": "Änderungen speichern",
   "resendInvitationButton": "Einladungs-E-Mail erneut senden",
   "invitationSentSuccessMessage": "Team-Einladung erfolgreich versendet!",
@@ -43,5 +43,6 @@
   "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!",
+  "copyTeamLink": "Team-Link kopieren"
 }

worklenz-frontend/public/locales/en/auth/signup.json

@@ -8,9 +8,11 @@
   "emailPlaceholder": "Enter your email",
   "emailRequired": "Please enter your Email!",
   "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
   "passwordPlaceholder": "Enter your password",
   "passwordRequired": "Please enter your Password!",
   "passwordMinCharacterRequired": "Password must be at least 8 characters!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
   "passwordPatternRequired": "Password does not meet the requirements!",
   "strongPasswordPlaceholder": "Enter a stronger password",
   "passwordValidationAltText": "Password must include at least 8 characters with upper and lower case letters, a number, and a symbol.",

worklenz-frontend/public/locales/en/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Yes",
   "deleteConfirmationCancel": "Cancel",
 
+  "deleteTaskTitle": "Delete Task",
+  "deleteTaskContent": "Are you sure you want to delete this task? This action cannot be undone.",
+  "deleteTaskConfirm": "Delete",
+  "deleteTaskCancel": "Cancel",
+
+  "deleteStatusTitle": "Delete Status",
+  "deleteStatusContent": "Are you sure you want to delete this status? This action cannot be undone.",
+
+  "deletePhaseTitle": "Delete Phase",
+  "deletePhaseContent": "Are you sure you want to delete this phase? This action cannot be undone.",
+
   "dueDate": "Due date",
   "cancel": "Cancel",
 
@@ -29,5 +40,14 @@
   "nextWeek": "Next week",
   "noSubtasks": "No subtasks",
   "showSubtasks": "Show subtasks",
-  "hideSubtasks": "Hide subtasks"
+  "hideSubtasks": "Hide subtasks",
+  
+  "errorLoadingTasks": "Error loading tasks",
+  "noTasksFound": "No tasks found",
+  "loadingFilters": "Loading filters...",
+  "failedToUpdateColumnOrder": "Failed to update column order",
+  "failedToUpdatePhaseOrder": "Failed to update phase order",
+  "pleaseTryAgain": "Please try again",
+  "taskNotCompleted": "Task is not completed",
+  "completeTaskDependencies": "Please complete the task dependencies before proceeding"
 }

worklenz-frontend/public/locales/en/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remove from project",
   "memberCount": "Member",
   "membersCountPlural": "Members",
-  "emptyText": "There are no attachments in the project."
+  "emptyText": "There are no attachments in the project.",
+  "searchPlaceholder": "Search members"
 }

worklenz-frontend/public/locales/en/project-view/project-member-drawer.json

@@ -1,7 +1,11 @@
 {
-  "title": "Project Members",
+  "title": "Share Project",
   "searchLabel": "Add members by adding their name or email",
   "searchPlaceholder": "Type name or email",
   "inviteAsAMember": "Invite as a member",
-  "inviteNewMemberByEmail": "Invite new member by email"
+  "inviteNewMemberByEmail": "Invite new member by email",
+  "members": "Members",
+  "copyProjectLink": "Copy project link",
+  "inviteMember": "Invite Member",
+  "alsoInviteToProject": "Also invite to project"
 }

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

@@ -19,7 +19,7 @@
   "cancelText": "No, cancel",
   "deactivatedText": "(Currently deactivated)",
   "pendingInvitationText": "(Invitation pending)",
-  "addMemberDrawerTitle": "Add New Team Member",
+  "addMemberDrawerTitle": "Invite Team Members",
   "updateMemberDrawerTitle": "Update Team Member",
   "addMemberEmailHint": "Members will be added to the team regardless of invitation acceptance status",
   "memberEmailLabel": "Email(s)",
@@ -28,7 +28,7 @@
   "jobTitleLabel": "Job Title",
   "jobTitlePlaceholder": "Select or search job title (Optional)",
   "memberAccessLabel": "Access Level",
-  "addToTeamButton": "Add Member to Team",
+  "addToTeamButton": "Send Invitation",
   "updateButton": "Save Changes",
   "resendInvitationButton": "Resend Invitation Email",
   "invitationSentSuccessMessage": "Team invitation sent successfully!",
@@ -43,5 +43,6 @@
   "updatedText": "Updated",
   "noResultFound": "Type an email address and hit enter...",
   "jobTitlesFetchError": "Failed to fetch job titles",
-  "invitationResent": "Invitation resent successfully!"
+  "invitationResent": "Invitation resent successfully!",
+  "copyTeamLink": "Copy team link"
 }

worklenz-frontend/public/locales/es/auth/signup.json

@@ -7,10 +7,12 @@
   "emailLabel": "Correo electrónico",
   "emailPlaceholder": "Ingresa tu correo electrónico",
   "emailRequired": "¡Por favor ingresa tu correo electrónico!",
-  "passwordLabel": "Contraseña",
-  "passwordPlaceholder": "Ingresa tu contraseña",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
   "passwordRequired": "¡Por favor ingresa tu contraseña!",
   "passwordMinCharacterRequired": "¡La contraseña debe tener al menos 8 caracteres!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
   "passwordPatternRequired": "¡La contraseña no cumple con los requisitos!",
   "strongPasswordPlaceholder": "Ingresa una contraseña más segura",
   "passwordValidationAltText": "La contraseña debe incluir al menos 8 caracteres con letras mayúsculas y minúsculas, un número y un símbolo.",

worklenz-frontend/public/locales/es/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sí",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Eliminar tarea",
+  "deleteTaskContent": "¿Estás seguro de que deseas eliminar esta tarea? Esta acción no se puede deshacer.",
+  "deleteTaskConfirm": "Eliminar",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Eliminar estado",
+  "deleteStatusContent": "¿Estás seguro de que deseas eliminar este estado? Esta acción no se puede deshacer.",
+
+  "deletePhaseTitle": "Eliminar fase",
+  "deletePhaseContent": "¿Estás seguro de que deseas eliminar esta fase? Esta acción no se puede deshacer.",
+
   "dueDate": "Fecha de vencimiento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sin fecha de vencimiento",
   "save": "Guardar",
   "clear": "Limpiar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sin subtareas",
+  "showSubtasks": "Mostrar subtareas",
+  "hideSubtasks": "Ocultar subtareas",
+  
+  "errorLoadingTasks": "Error al cargar tareas",
+  "noTasksFound": "No se encontraron tareas",
+  "loadingFilters": "Cargando filtros...",
+  "failedToUpdateColumnOrder": "Error al actualizar el orden de las columnas",
+  "failedToUpdatePhaseOrder": "Error al actualizar el orden de las fases",
+  "pleaseTryAgain": "Por favor, inténtalo de nuevo",
+  "taskNotCompleted": "La tarea no está completada",
+  "completeTaskDependencies": "Por favor, completa las dependencias de la tarea antes de continuar"
 }

worklenz-frontend/public/locales/es/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Eliminar del proyecto",
   "memberCount": "Miembro",
   "membersCountPlural": "Miembros",
-  "emptyText": "No hay archivos adjuntos en el proyecto."
+  "emptyText": "No hay archivos adjuntos en el proyecto.",
+  "searchPlaceholder": "Buscar miembros"
 }

worklenz-frontend/public/locales/es/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Agregar miembros ingresando su nombre o correo electrónico",
   "searchPlaceholder": "Escriba nombre o correo electrónico",
   "inviteAsAMember": "Invitar como miembro",
-  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico"
+  "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico",
+  "members": "Miembros",
+  "copyProjectLink": "Copiar enlace del proyecto",
+  "inviteMember": "Invitar miembro",
+  "alsoInviteToProject": "También invitar al proyecto"
 }

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

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Cargo",
   "jobTitlePlaceholder": "Seleccione o busque cargo (Opcional)",
   "memberAccessLabel": "Nivel de acceso",
-  "addToTeamButton": "Agregar miembro al equipo",
+  "addToTeamButton": "Enviar invitación",
   "updateButton": "Guardar cambios",
   "resendInvitationButton": "Reenviar correo de invitación",
   "invitationSentSuccessMessage": "¡Invitación al equipo enviada exitosamente!",
@@ -43,5 +43,6 @@
   "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!",
+  "copyTeamLink": "Copiar enlace del equipo"
 }

worklenz-frontend/public/locales/pt/auth/signup.json

@@ -7,11 +7,13 @@
   "emailLabel": "Email",
   "emailPlaceholder": "Insira seu email",
   "emailRequired": "Por favor, insira seu Email!",
-  "passwordLabel": "Senha",
-  "passwordPlaceholder": "Insira sua senha",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
   "passwordRequired": "Por favor, insira sua Senha!",
   "passwordMinCharacterRequired": "Senha deve ter pelo menos 8 caracteres!",
-  "passwordPatternRequired": "Senha não atende aos requisitos!",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
+  "passwordPatternRequired": "A senha não atende aos requisitos!",
   "strongPasswordPlaceholder": "Insira uma senha mais forte",
   "passwordValidationAltText": "Senha deve incluir pelo menos 8 caracteres com letras maiúsculas e minúsculas, um número e um símbolo.",
   "signupSuccessMessage": "Você se inscreveu com sucesso!",

worklenz-frontend/public/locales/pt/kanban-board.json

@@ -10,6 +10,17 @@
   "deleteConfirmationOk": "Sim",
   "deleteConfirmationCancel": "Cancelar",
 
+  "deleteTaskTitle": "Excluir Tarefa",
+  "deleteTaskContent": "Tem certeza de que deseja excluir esta tarefa? Esta ação não pode ser desfeita.",
+  "deleteTaskConfirm": "Excluir",
+  "deleteTaskCancel": "Cancelar",
+
+  "deleteStatusTitle": "Excluir Status",
+  "deleteStatusContent": "Tem certeza de que deseja excluir este status? Esta ação não pode ser desfeita.",
+
+  "deletePhaseTitle": "Excluir Fase",
+  "deletePhaseContent": "Tem certeza de que deseja excluir esta fase? Esta ação não pode ser desfeita.",
+
   "dueDate": "Data de vencimento",
   "cancel": "Cancelar",
 
@@ -26,5 +37,17 @@
   "noDueDate": "Sem data de vencimento",
   "save": "Salvar",
   "clear": "Limpar",
-  "nextWeek": "Próxima semana"
+  "nextWeek": "Próxima semana",
+  "noSubtasks": "Sem subtarefas",
+  "showSubtasks": "Mostrar subtarefas",
+  "hideSubtasks": "Ocultar subtarefas",
+  
+  "errorLoadingTasks": "Erro ao carregar tarefas",
+  "noTasksFound": "Nenhuma tarefa encontrada",
+  "loadingFilters": "Carregando filtros...",
+  "failedToUpdateColumnOrder": "Falha ao atualizar a ordem das colunas",
+  "failedToUpdatePhaseOrder": "Falha ao atualizar a ordem das fases",
+  "pleaseTryAgain": "Por favor, tente novamente",
+  "taskNotCompleted": "Tarefa não está concluída",
+  "completeTaskDependencies": "Por favor, complete as dependências da tarefa antes de prosseguir"
 }

worklenz-frontend/public/locales/pt/project-view-members.json

@@ -13,5 +13,6 @@
   "deleteButtonTooltip": "Remover do projeto",
   "memberCount": "Membro",
   "membersCountPlural": "Membros",
-  "emptyText": "Não há anexos no projeto."
+  "emptyText": "Não há anexos no projeto.",
+  "searchPlaceholder": "Pesquisar membros"
 }

worklenz-frontend/public/locales/pt/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
   "searchLabel": "Adicionar membros inserindo nome ou e-mail",
   "searchPlaceholder": "Digite nome ou e-mail",
   "inviteAsAMember": "Convidar como membro",
-  "inviteNewMemberByEmail": "Convidar novo membro por e-mail"
+  "inviteNewMemberByEmail": "Convidar novo membro por e-mail",
+  "members": "Membros",
+  "copyProjectLink": "Copiar link do projeto",
+  "inviteMember": "Convidar membro",
+  "alsoInviteToProject": "Convidar também para o projeto"
 }

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

@@ -28,7 +28,7 @@
   "jobTitleLabel": "Título do Emprego",
   "jobTitlePlaceholder": "Selecione ou pesquise o título do emprego (Opcional)",
   "memberAccessLabel": "Nível de Acesso",
-  "addToTeamButton": "Adicionar Membro à Equipe",
+  "addToTeamButton": "Enviar convite",
   "updateButton": "Salvar Alterações",
   "resendInvitationButton": "Redirecionar Email de Convite",
   "invitationSentSuccessMessage": "Convite para a equipe enviado com sucesso!",
@@ -43,5 +43,6 @@
   "updatedText": "Atualizado",
   "noResultFound": "Digite um endereço de email e pressione enter...",
   "jobTitlesFetchError": "Falha ao buscar cargos",
-  "invitationResent": "Convite reenviado com sucesso!"
+  "invitationResent": "Convite reenviado com sucesso!",
+  "copyTeamLink": "Copiar link da equipe"
 }

worklenz-frontend/public/locales/zh/auth/signup.json

@@ -7,10 +7,12 @@
   "emailLabel": "电子邮件",
   "emailPlaceholder": "输入您的电子邮件",
   "emailRequired": "请输入您的电子邮件！",
-  "passwordLabel": "密码",
-  "passwordPlaceholder": "输入您的密码",
+  "passwordLabel": "Password",
+  "passwordGuideline": "Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.",
+  "passwordPlaceholder": "Enter your password",
   "passwordRequired": "请输入您的密码！",
   "passwordMinCharacterRequired": "密码必须至少包含8个字符！",
+  "passwordMaxCharacterRequired": "Password must be at most 32 characters!",
   "passwordPatternRequired": "密码不符合要求！",
   "strongPasswordPlaceholder": "输入更强的密码",
   "passwordValidationAltText": "密码必须至少包含8个字符，包括大小写字母、一个数字和一个符号。",

worklenz-frontend/public/locales/zh/kanban-board.json

@@ -15,5 +15,32 @@
   "assignToMe": "分配给我",
   "archive": "归档",
   "newTaskNamePlaceholder": "写一个任务名称",
-  "newSubtaskNamePlaceholder": "写一个子任务名称"
+  "newSubtaskNamePlaceholder": "写一个子任务名称",
+  "deleteTaskTitle": "删除任务",
+  "deleteTaskContent": "您确定要删除此任务吗？此操作无法撤销。",
+  "deleteTaskConfirm": "删除",
+  "deleteTaskCancel": "取消",
+  "deleteStatusTitle": "删除状态",
+  "deleteStatusContent": "您确定要删除此状态吗？此操作无法撤销。",
+  "deletePhaseTitle": "删除阶段",
+  "deletePhaseContent": "您确定要删除此阶段吗？此操作无法撤销。",
+  "untitledSection": "未命名部分",
+  "unmapped": "未映射",
+  "clickToChangeDate": "点击更改日期",
+  "noDueDate": "无截止日期",
+  "save": "保存",
+  "clear": "清除",
+  "nextWeek": "下周",
+  "noSubtasks": "无子任务",
+  "showSubtasks": "显示子任务",
+  "hideSubtasks": "隐藏子任务",
+  
+  "errorLoadingTasks": "加载任务时出错",
+  "noTasksFound": "未找到任务",
+  "loadingFilters": "正在加载过滤器...",
+  "failedToUpdateColumnOrder": "更新列顺序失败",
+  "failedToUpdatePhaseOrder": "更新阶段顺序失败",
+  "pleaseTryAgain": "请重试",
+  "taskNotCompleted": "任务未完成",
+  "completeTaskDependencies": "请先完成任务依赖项，然后再继续"
 }

worklenz-frontend/public/locales/zh/project-view/project-member-drawer.json

@@ -3,5 +3,9 @@
     "searchLabel": "通过添加名称或电子邮件添加成员",
     "searchPlaceholder": "输入名称或电子邮件",
     "inviteAsAMember": "邀请为成员",
-    "inviteNewMemberByEmail": "通过电子邮件邀请新成员"
+    "inviteNewMemberByEmail": "通过电子邮件邀请新成员",
+    "members": "成员",
+    "copyProjectLink": "复制项目链接",
+    "inviteMember": "邀请成员",
+    "alsoInviteToProject": "也邀请到项目"
 }

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

@@ -28,7 +28,7 @@
   "jobTitleLabel": "职位",
   "jobTitlePlaceholder": "选择或搜索职位（可选）",
   "memberAccessLabel": "访问级别",
-  "addToTeamButton": "将成员添加到团队",
+  "addToTeamButton": "发送邀请",
   "updateButton": "保存更改",
   "resendInvitationButton": "重新发送邀请邮件",
   "invitationSentSuccessMessage": "团队邀请已成功发送！",
@@ -43,5 +43,6 @@
   "updatedText": "已更新",
   "noResultFound": "输入电子邮件地址并按回车键...",
   "jobTitlesFetchError": "获取职位失败",
-  "invitationResent": "邀请重新发送成功！"
+  "invitationResent": "邀请重新发送成功！",
+  "copyTeamLink": "复制团队链接"
 }

worklenz-frontend/src/api/reporting/reporting.timesheet.api.service.updated.ts

@@ -0,0 +1,92 @@
+import { API_BASE_URL } from '@/shared/constants';
+import { toQueryString } from '@/utils/toQueryString';
+import apiClient from '../api-client';
+import { IServerResponse } from '@/types/common.types';
+import { IAllocationViewModel } from '@/types/reporting/reporting-allocation.types';
+import {
+  IProjectLogsBreakdown,
+  IRPTTimeMember,
+  IRPTTimeProject,
+  ITimeLogBreakdownReq,
+} from '@/types/reporting/reporting.types';
+
+const rootUrl = `${API_BASE_URL}/reporting`;
+
+// Helper function to get user's timezone
+const getUserTimezone = () => {
+  return Intl.DateTimeFormat().resolvedOptions().timeZone;
+};
+
+export const reportingTimesheetApiService = {
+  getTimeSheetData: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IAllocationViewModel>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getAllocationProjects: async (body = {}) => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/allocation/allocation-projects`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/projects/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getMemberTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeMember[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/members/${q}`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectTimeLogs: async (
+    body: ITimeLogBreakdownReq
+  ): Promise<IServerResponse<IProjectLogsBreakdown[]>> => {
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/project-timelogs`, bodyWithTimezone);
+    return response.data;
+  },
+
+  getProjectEstimatedVsActual: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
+    const q = toQueryString({ archived });
+    const bodyWithTimezone = {
+      ...body,
+      timezone: getUserTimezone()
+    };
+    const response = await apiClient.post(`${rootUrl}/time-reports/estimated-vs-actual${q}`, bodyWithTimezone);
+    return response.data;
+  },
+};

worklenz-frontend/src/app/routes/auth-routes.tsx

@@ -4,12 +4,12 @@ import { Navigate } from 'react-router-dom';
 import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 
 // Lazy load auth page components for better code splitting
-const LoginPage = lazy(() => import('@/pages/auth/login-page'));
-const SignupPage = lazy(() => import('@/pages/auth/signup-page'));
-const ForgotPasswordPage = lazy(() => import('@/pages/auth/forgot-password-page'));
-const LoggingOutPage = lazy(() => import('@/pages/auth/logging-out'));
-const AuthenticatingPage = lazy(() => import('@/pages/auth/authenticating'));
-const VerifyResetEmailPage = lazy(() => import('@/pages/auth/verify-reset-email'));
+const LoginPage = lazy(() => import('@/pages/auth/LoginPage'));
+const SignupPage = lazy(() => import('@/pages/auth/SignupPage'));
+const ForgotPasswordPage = lazy(() => import('@/pages/auth/ForgotPasswordPage'));
+const LoggingOutPage = lazy(() => import('@/pages/auth/LoggingOutPage'));
+const AuthenticatingPage = lazy(() => import('@/pages/auth/AuthenticatingPage'));
+const VerifyResetEmailPage = lazy(() => import('@/pages/auth/VerifyResetEmailPage'));
 
 const authRoutes = [
   {

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';
@@ -11,8 +11,10 @@ import { useAuthService } from '@/hooks/useAuth';
 import { Avatar, Button, Checkbox } from '@/components';
 import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
+import { setIsFromAssigner, toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import useIsProjectManager from '@/hooks/useIsProjectManager';
+import { useAuthStatus } from '@/hooks/useAuthStatus';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -21,9 +23,9 @@ interface AssigneeSelectorProps {
   kanbanMode?: boolean;
 }
 
-const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({ 
-  task, 
-  groupId = null, 
+const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
+  task,
+  groupId = null,
   isDarkMode = false,
   kanbanMode = false
 }) => {
@@ -42,6 +44,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const currentSession = useAuthService().getCurrentSession();
   const { socket } = useSocket();
   const dispatch = useAppDispatch();
+  const { isAdmin } = useAuthStatus();
+  const isProjectManager = useIsProjectManager();
 
   const filteredMembers = useMemo(() => {
     return teamMembers?.data?.filter(member =>
@@ -64,7 +68,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
       if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
         setIsOpen(false);
       }
     };
@@ -74,10 +78,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         // Check if the button is still visible in the viewport
         if (buttonRef.current) {
           const rect = buttonRef.current.getBoundingClientRect();
-          const isVisible = rect.top >= 0 && rect.left >= 0 && 
-                           rect.bottom <= window.innerHeight && 
-                           rect.right <= window.innerWidth;
-          
+          const isVisible = rect.top >= 0 && rect.left >= 0 &&
+            rect.bottom <= window.innerHeight &&
+            rect.right <= window.innerWidth;
+
           if (isVisible) {
             updateDropdownPosition();
           } else {
@@ -98,7 +102,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       document.addEventListener('mousedown', handleClickOutside);
       window.addEventListener('scroll', handleScroll, true);
       window.addEventListener('resize', handleResize);
-      
+
       return () => {
         document.removeEventListener('mousedown', handleClickOutside);
         window.removeEventListener('scroll', handleScroll, true);
@@ -113,10 +117,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const handleDropdownToggle = (e: React.MouseEvent) => {
     e.preventDefault();
     e.stopPropagation();
-    
+
     if (!isOpen) {
       updateDropdownPosition();
-      
+
       // Prepare team members data when opening
       const assignees = task?.assignees?.map(assignee => assignee.team_member_id);
       const membersData = (members?.data || []).map(member => ({
@@ -125,7 +129,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       }));
       const sortedMembers = sortTeamMembers(membersData);
       setTeamMembers({ data: sortedMembers });
-      
+
       setIsOpen(true);
       // Focus search input after opening
       setTimeout(() => {
@@ -160,8 +164,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     // Update local team members state for dropdown UI
     setTeamMembers(prev => ({
       ...prev,
-      data: (prev.data || []).map(member => 
-        member.id === memberId 
+      data: (prev.data || []).map(member =>
+        member.id === memberId
           ? { ...member, selected: checked }
           : member
       )
@@ -198,14 +202,15 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   const checkMemberSelected = (memberId: string) => {
     if (!memberId) return false;
     // Use optimistic assignees if available, otherwise fall back to task assignees
-    const assignees = optimisticAssignees.length > 0 
-      ? optimisticAssignees 
+    const assignees = optimisticAssignees.length > 0
+      ? optimisticAssignees
       : task?.assignees?.map(assignee => assignee.team_member_id) || [];
     return assignees.includes(memberId);
   };
 
   const handleInviteProjectMemberDrawer = () => {
     setIsOpen(false); // Close the assignee dropdown first
+    dispatch(setIsFromAssigner(true));
     dispatch(toggleProjectMemberDrawer()); // Then open the invite drawer
   };
 
@@ -217,12 +222,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         className={`
           w-5 h-5 rounded-full border border-dashed flex items-center justify-center
           transition-colors duration-200
-          ${isOpen 
-            ? isDarkMode 
-              ? 'border-blue-500 bg-blue-900/20 text-blue-400' 
+          ${isOpen
+            ? isDarkMode
+              ? 'border-blue-500 bg-blue-900/20 text-blue-400'
               : 'border-blue-500 bg-blue-50 text-blue-600'
-            : isDarkMode 
-              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400' 
+            : isDarkMode
+              ? 'border-gray-600 hover:border-gray-500 hover:bg-gray-800 text-gray-400'
               : 'border-gray-300 hover:border-gray-400 hover:bg-gray-100 text-gray-600'
           }
         `}
@@ -236,8 +241,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           onClick={e => e.stopPropagation()}
           className={`
             fixed z-[99999] w-72 rounded-md shadow-lg border
-            ${isDarkMode 
-              ? 'bg-gray-800 border-gray-600' 
+            ${isDarkMode
+              ? 'bg-gray-800 border-gray-600'
               : 'bg-white border-gray-200'
             }
           `}
@@ -273,10 +278,10 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   key={member.id}
                   className={`
                     flex items-center gap-2 p-2 cursor-pointer transition-colors
-                    ${member.pending_invitation 
-                      ? 'opacity-50 cursor-not-allowed' 
-                      : isDarkMode 
-                        ? 'hover:bg-gray-700' 
+                    ${member.pending_invitation
+                      ? 'opacity-50 cursor-not-allowed'
+                      : isDarkMode
+                        ? 'hover:bg-gray-700'
                         : 'hover:bg-gray-50'
                     }
                   `}
@@ -301,23 +306,21 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                       />
                     </span>
                     {pendingChanges.has(member.id || '') && (
-                      <div className={`absolute inset-0 flex items-center justify-center ${
-                        isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
-                      }`}>
-                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
-                          isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                        }`} />
+                      <div className={`absolute inset-0 flex items-center justify-center ${isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'
+                        }`}>
+                        <div className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${isDarkMode ? 'border-blue-400' : 'border-blue-600'
+                          }`} />
                       </div>
                     )}
                   </div>
-                  
+
                   <Avatar
                     src={member.avatar_url}
                     name={member.name || ''}
                     size={24}
                     isDarkMode={isDarkMode}
                   />
-                  
+
                   <div className="flex-1 min-w-0">
                     <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
                       {member.name}
@@ -339,22 +342,26 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
           </div>
 
           {/* Footer */}
-          <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
-            <button
-              className={`
-                w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
-                transition-colors
-                ${isDarkMode
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
-              `}
-              onClick={handleInviteProjectMemberDrawer}
-            >
-              <UserAddOutlined />
-              Invite member
-            </button>
-          </div>
+
+          {(isAdmin || isProjectManager) && (
+            <div className={`p-2 border-t ${isDarkMode ? 'border-gray-600' : 'border-gray-200'}`}>
+              <button
+                className={`
+                  w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
+                  transition-colors
+                  ${isDarkMode
+                    ? 'text-blue-400 hover:bg-gray-700'
+                    : 'text-blue-600 hover:bg-blue-50'
+                  }
+                `}
+                onClick={handleInviteProjectMemberDrawer}
+              >
+                <UserAddOutlined />
+                Invite member
+              </button>
+            </div>
+          )}
+
         </div>,
         document.body
       )}

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/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 { Input } from 'antd';
+import { SearchOutlined } from '@/shared/antd-imports';
+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,17 +1,24 @@
-import { Empty, Typography } from 'antd';
+import { Empty, Typography } from '@/shared/antd-imports';
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 type EmptyListPlaceholderProps = {
   imageSrc?: string;
   imageHeight?: number;
-  text: string;
+  text?: string;
+  textKey?: string;
+  i18nNs?: string;
 };
 
 const EmptyListPlaceholder = ({
   imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
   imageHeight = 60,
   text,
+  textKey,
+  i18nNs = 'task-list-table',
 }: EmptyListPlaceholderProps) => {
+  const { t } = useTranslation(i18nNs);
+  const description = textKey ? t(textKey) : text;
   return (
     <Empty
       image={imageSrc}
@@ -22,7 +29,7 @@ const EmptyListPlaceholder = ({
         alignItems: 'center',
         marginBlockStart: 24,
       }}
-      description={<Typography.Text type="secondary">{text}</Typography.Text>}
+      description={<Typography.Text type="secondary">{description}</Typography.Text>}
     />
   );
 };

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 { PushpinFilled, PushpinOutlined } from '@ant-design/icons';
+import { Button, ConfigProvider, Tooltip } from '@/shared/antd-imports';
+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 { FormatPainterOutlined } from '@ant-design/icons';
+import { FloatButton, Space, Tooltip } from '@/shared/antd-imports';
+import { FormatPainterOutlined } from '@/shared/antd-imports';
 // import LanguageSelector from '../features/i18n/language-selector';
 // import ThemeSelector from '../features/theme/ThemeSelector';
 

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 { CloseCircleOutlined, MailOutlined, PlusOutlined } from '@ant-design/icons';
+import { Form, Input, Button, List, Alert, message, InputRef } from '@/shared/antd-imports';
+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 { PlusOutlined, DeleteOutlined, CloseCircleOutlined } from '@ant-design/icons';
+import { Form, Input, Button, Typography, List, InputRef } from '@/shared/antd-imports';
+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 { UserAddOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
+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 { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import { Avatar, Button, Checkbox, Dropdown, Input, Menu, Typography } from '@/shared/antd-imports';
+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/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 { Button, Table, TableProps, Tag, Tooltip } from 'antd';
+import { ContainerOutlined } from '@/shared/antd-imports';
+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 React, { useEffect } from 'react';
+import { Card, Col, Row, Tooltip } from '@/shared/antd-imports';
+import React, { useEffect, useMemo, useCallback } from 'react';
 import './current-bill.css';
-import { InfoCircleTwoTone } from '@ant-design/icons';
+import { 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 = {
-    color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
-    fontWeight: 500,
-    fontSize: '16px',
-    display: 'flex',
-    gap: '4px',
-  };
-
-  const renderMobileView = () => (
-    <div>
-      <Col span={24}>
-        <CurrentPlanDetails />
-      </Col>
-
-      <Col span={24} style={{ marginTop: '1.5rem' }}>
-        <AccountStorage themeMode={themeMode} />
-      </Col>
-    </div>
+  const titleStyle = useMemo(
+    () => ({
+      color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
+      fontWeight: 500,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
   );
 
-  const renderChargesAndInvoices = () => (
-    <>
-      <div style={{ marginTop: '1.5rem' }}>
-        <Card
-          title={
-            <span style={titleStyle}>
-              <span>{t('charges')}</span>
-              <Tooltip title={t('tooltip')}>
-                <InfoCircleTwoTone />
-              </Tooltip>
-            </span>
-          }
-          style={{ marginTop: '16px' }}
-        >
-          <ChargesTable />
-        </Card>
-      </div>
+  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
+  const colStyle = useMemo(() => ({ marginTop: '1.5rem' }), []);
+  const tabletColStyle = useMemo(() => ({ paddingRight: '10px' }), []);
+  const tabletColStyleRight = useMemo(() => ({ paddingLeft: '10px' }), []);
 
-      <div style={{ marginTop: '1.5rem' }}>
-        <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
-          <InvoicesTable />
-        </Card>
+  const renderMobileView = useCallback(
+    () => (
+      <div>
+        <Col span={24}>
+          <CurrentPlanDetails />
+        </Col>
+
+        <Col span={24} style={colStyle}>
+          <AccountStorage themeMode={themeMode} />
+        </Col>
       </div>
-    </>
+    ),
+    [colStyle, themeMode]
+  );
+
+  const renderChargesAndInvoices = useCallback(
+    () => (
+      <>
+        <div style={colStyle}>
+          <Card
+            title={
+              <span style={titleStyle}>
+                <span>{t('charges')}</span>
+                <Tooltip title={t('tooltip')}>
+                  <InfoCircleTwoTone />
+                </Tooltip>
+              </span>
+            }
+            style={cardStyle}
+          >
+            <ChargesTable />
+          </Card>
+        </div>
+
+        <div style={colStyle}>
+          <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={cardStyle}>
+            <InvoicesTable />
+          </Card>
+        </div>
+      </>
+    ),
+    [colStyle, titleStyle, cardStyle, t]
+  );
+
+  const shouldShowChargesAndInvoices = useMemo(
+    () => currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE,
+    [currentSession?.subscription_type]
   );
 
   return (
     <div style={{ width: '100%' }} className="current-billing">
       {isTablet ? (
         <Row>
-          <Col span={16} style={{ paddingRight: '10px' }}>
+          <Col span={16} style={tabletColStyle}>
             <CurrentPlanDetails />
           </Col>
-          <Col span={8} style={{ paddingLeft: '10px' }}>
+          <Col span={8} style={tabletColStyleRight}>
             <AccountStorage themeMode={themeMode} />
           </Col>
         </Row>
       ) : (
         renderMobileView()
       )}
-      {currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
-        renderChargesAndInvoices()}
+      {shouldShowChargesAndInvoices && renderChargesAndInvoices()}
     </div>
   );
-};
+});
+
+CurrentBill.displayName = 'CurrentBill';
 
 export default CurrentBill;

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(
@@ -55,14 +69,16 @@ const CurrentPlanDetails = () => {
   );
 
   const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+  
+  const seatCountOptions: SeatOption[] = useMemo(() => {
+    const options: SeatOption[] = [
+      1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
+    ].map(value => ({ label: value.toString(), value }));
+    options.push({ label: SEAT_COUNT_LIMIT, value: SEAT_COUNT_LIMIT });
+    return options;
+  }, []);
 
-  type SeatOption = { label: string; value: number | string };
-  const seatCountOptions: SeatOption[] = [
-    1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90,
-  ].map(value => ({ label: value.toString(), value }));
-  seatCountOptions.push({ label: '100+', value: '100+' });
-
-  const handleSubscriptionAction = async (action: 'pause' | 'resume') => {
+  const handleSubscriptionAction = useCallback(async (action: SubscriptionAction) => {
     const isResume = action === 'resume';
     const setLoadingState = isResume ? setCancellingPlan : setPausingPlan;
     const apiMethod = isResume
@@ -78,21 +94,21 @@ const CurrentPlanDetails = () => {
           setLoadingState(false);
           dispatch(fetchBillingInfo());
           trackMixpanelEvent(eventType);
-        }, 8000);
-        return; // Exit function to prevent finally block from executing
+        }, BILLING_DELAY_MS);
+        return;
       }
     } catch (error) {
       logger.error(`Error ${action}ing subscription`, error);
-      setLoadingState(false); // Only set to false on error
+      setLoadingState(false);
     }
-  };
+  }, [dispatch, trackMixpanelEvent]);
 
-  const handleAddMoreSeats = () => {
+  const handleAddMoreSeats = useCallback(() => {
     setIsMoreSeatsModalVisible(true);
-  };
+  }, []);
 
-  const handlePurchaseMoreSeats = async () => {
-    if (selectedSeatCount.toString() === '100+' || !billingInfo?.total_seats) return;
+  const handlePurchaseMoreSeats = useCallback(async () => {
+    if (selectedSeatCount.toString() === SEAT_COUNT_LIMIT || !billingInfo?.total_seats) return;
 
     try {
       setAddingSeats(true);
@@ -108,51 +124,75 @@ const CurrentPlanDetails = () => {
     } finally {
       setAddingSeats(false);
     }
-  };
+  }, [selectedSeatCount, billingInfo?.total_seats, dispatch, trackMixpanelEvent]);
 
-  const calculateRemainingSeats = () => {
+  const calculateRemainingSeats = useMemo(() => {
     if (billingInfo?.total_seats && billingInfo?.total_used) {
       return billingInfo.total_seats - billingInfo.total_used;
     }
     return 0;
-  };
+  }, [billingInfo?.total_seats, billingInfo?.total_used]);
 
-  const checkSubscriptionStatus = (allowedStatuses: any[]) => {
+  // Calculate intelligent default for seat selection based on current usage
+  const getDefaultSeatCount = useMemo(() => {
+    const currentUsed = billingInfo?.total_used || 0;
+    const availableSeats = calculateRemainingSeats;
+    
+    // If only 1 user and no available seats, suggest 1 additional seat
+    if (currentUsed === 1 && availableSeats === 0) {
+      return 1;
+    }
+    
+    // If they have some users but running low on seats, suggest enough for current users
+    if (availableSeats < currentUsed && currentUsed > 0) {
+      return Math.max(1, currentUsed - availableSeats);
+    }
+    
+    // Default fallback
+    return Math.max(1, Math.min(5, currentUsed || 1));
+  }, [billingInfo?.total_used, calculateRemainingSeats]);
+
+  // Update selected seat count when billing info changes
+  useEffect(() => {
+    setSelectedSeatCount(getDefaultSeatCount);
+  }, [getDefaultSeatCount]);
+
+  const checkSubscriptionStatus = useCallback((allowedStatuses: string[]) => {
     if (!billingInfo?.status || billingInfo.is_ltd_user) return false;
     return allowedStatuses.includes(billingInfo.status);
-  };
+  }, [billingInfo?.status, billingInfo?.is_ltd_user]);
 
-  const shouldShowRedeemButton = () => {
+  const shouldShowRedeemButton = useMemo(() => {
     if (billingInfo?.trial_in_progress) return true;
-    return billingInfo?.ltd_users ? billingInfo.ltd_users < 50 : false;
-  };
+    return billingInfo?.ltd_users ? billingInfo.ltd_users < LTD_USER_LIMIT : false;
+  }, [billingInfo?.trial_in_progress, billingInfo?.ltd_users]);
 
-  const showChangeButton = () => {
+  const showChangeButton = useMemo(() => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);
 
-  const showPausePlanButton = () => {
+  const showPausePlanButton = useMemo(() => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.ACTIVE, SUBSCRIPTION_STATUS.PASTDUE]);
-  };
+  }, [checkSubscriptionStatus]);
 
-  const showResumePlanButton = () => {
+  const showResumePlanButton = useMemo(() => {
     return checkSubscriptionStatus([SUBSCRIPTION_STATUS.PAUSED]);
-  };
+  }, [checkSubscriptionStatus]);
 
-  const shouldShowAddSeats = () => {
+  const shouldShowAddSeats = useMemo(() => {
     if (!billingInfo) return false;
     return (
       billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
       billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
     );
-  };
+  }, [billingInfo]);
 
-  const renderExtra = () => {
+  const renderExtra = useCallback(() => {
     if (!billingInfo || billingInfo.is_custom) return null;
 
     return (
       <Space>
-        {showPausePlanButton() && (
+        {showPausePlanButton && (
           <Button
             type="link"
             danger
@@ -163,7 +203,7 @@ const CurrentPlanDetails = () => {
           </Button>
         )}
 
-        {showResumePlanButton() && (
+        {showResumePlanButton && (
           <Button
             type="primary"
             loading={cancellingPlan}
@@ -179,7 +219,7 @@ const CurrentPlanDetails = () => {
           </Button>
         )}
 
-        {showChangeButton() && (
+        {showChangeButton && (
           <Button
             type="primary"
             loading={pausingPlan || cancellingPlan}
@@ -190,9 +230,19 @@ const CurrentPlanDetails = () => {
         )}
       </Space>
     );
-  };
+  }, [
+    billingInfo,
+    showPausePlanButton,
+    showResumePlanButton,
+    showChangeButton,
+    pausingPlan,
+    cancellingPlan,
+    handleSubscriptionAction,
+    dispatch,
+    t,
+  ]);
 
-  const renderLtdDetails = () => {
+  const renderLtdDetails = useCallback(() => {
     if (!billingInfo || billingInfo.is_custom) return null;
     return (
       <Flex vertical>
@@ -200,41 +250,41 @@ const CurrentPlanDetails = () => {
         <Typography.Text>{t('ltdUsers', { ltd_users: billingInfo.ltd_users })}</Typography.Text>
       </Flex>
     );
-  };
+  }, [billingInfo, t]);
 
-  const renderTrialDetails = () => {
-    const checkIfTrialExpired = () => {
-      if (!billingInfo?.trial_expire_date) return false;
-      const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
-      const trialExpireDate = new Date(billingInfo.trial_expire_date);
-      trialExpireDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
-      return today > trialExpireDate;
-    };
+  const checkIfTrialExpired = useCallback(() => {
+    if (!billingInfo?.trial_expire_date) return false;
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
+    const trialExpireDate = new Date(billingInfo.trial_expire_date);
+    trialExpireDate.setHours(0, 0, 0, 0);
+    return today > trialExpireDate;
+  }, [billingInfo?.trial_expire_date]);
 
-    const getExpirationMessage = (expireDate: string) => {
-      const today = new Date();
-      today.setHours(0, 0, 0, 0); // Set to start of day for comparison
+  const getExpirationMessage = useCallback((expireDate: string) => {
+    const today = new Date();
+    today.setHours(0, 0, 0, 0);
 
-      const tomorrow = new Date(today);
-      tomorrow.setDate(tomorrow.getDate() + 1);
+    const tomorrow = new Date(today);
+    tomorrow.setDate(tomorrow.getDate() + 1);
 
-      const expDate = new Date(expireDate);
-      expDate.setHours(0, 0, 0, 0); // Set to start of day for comparison
+    const expDate = new Date(expireDate);
+    expDate.setHours(0, 0, 0, 0);
 
-      if (expDate.getTime() === today.getTime()) {
-        return t('expirestoday', 'today');
-      } else if (expDate.getTime() === tomorrow.getTime()) {
-        return t('expirestomorrow', 'tomorrow');
-      } else if (expDate < today) {
-        const diffTime = Math.abs(today.getTime() - expDate.getTime());
-        const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
-        return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
-      } else {
-        return calculateTimeGap(expireDate);
-      }
-    };
+    if (expDate.getTime() === today.getTime()) {
+      return t('expirestoday', 'today');
+    } else if (expDate.getTime() === tomorrow.getTime()) {
+      return t('expirestomorrow', 'tomorrow');
+    } else if (expDate < today) {
+      const diffTime = Math.abs(today.getTime() - expDate.getTime());
+      const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));
+      return t('expiredDaysAgo', '{{days}} days ago', { days: diffDays });
+    } else {
+      return calculateTimeGap(expireDate);
+    }
+  }, [t]);
 
+  const renderTrialDetails = useCallback(() => {
     const isExpired = checkIfTrialExpired();
     const trialExpireDate = billingInfo?.trial_expire_date || '';
 
@@ -257,9 +307,9 @@ const CurrentPlanDetails = () => {
         </Tooltip>
       </Flex>
     );
-  };
+  }, [billingInfo?.trial_expire_date, checkIfTrialExpired, getExpirationMessage, t]);
 
-  const renderFreePlan = () => (
+  const renderFreePlan = useCallback(() => (
     <Flex vertical>
       <Typography.Text strong>{t('freePlan')}</Typography.Text>
       <Typography.Text>
@@ -271,9 +321,9 @@ const CurrentPlanDetails = () => {
         <br />- {freePlanSettings?.free_tier_storage} MB {t('storage')}
       </Typography.Text>
     </Flex>
-  );
+  ), [freePlanSettings, t]);
 
-  const renderPaddleSubscriptionInfo = () => {
+  const renderPaddleSubscriptionInfo = useCallback(() => {
     return (
       <Flex vertical>
         <Typography.Text strong>{billingInfo?.plan_name}</Typography.Text>
@@ -287,14 +337,14 @@ const CurrentPlanDetails = () => {
           </Typography.Text>
         </Flex>
 
-        {shouldShowAddSeats() && billingInfo?.total_seats && (
+        {shouldShowAddSeats && billingInfo?.total_seats && (
           <div style={{ marginTop: '16px' }}>
             <Row gutter={16} align="middle">
               <Col span={6}>
                 <Statistic
-                  title={t('totalSeats')}
+                  title={t('totalSeats') as string}
                   value={billingInfo.total_seats}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                 />
               </Col>
               <Col span={8}>
@@ -302,16 +352,16 @@ const CurrentPlanDetails = () => {
                   type="primary"
                   icon={<PlusOutlined />}
                   onClick={handleAddMoreSeats}
-                  style={{ backgroundColor: '#1890ff', borderColor: '#1890ff' }}
+                  style={BUTTON_STYLE}
                 >
                   {t('addMoreSeats')}
                 </Button>
               </Col>
               <Col span={6}>
                 <Statistic
-                  title={t('availableSeats')}
-                  value={calculateRemainingSeats()}
-                  valueStyle={{ fontSize: '24px', fontWeight: 'bold' }}
+                  title={t('availableSeats') as string}
+                  value={calculateRemainingSeats}
+                  valueStyle={STATISTIC_VALUE_STYLE}
                 />
               </Col>
             </Row>
@@ -319,17 +369,17 @@ const CurrentPlanDetails = () => {
         )}
       </Flex>
     );
-  };
+  }, [billingInfo, shouldShowAddSeats, handleAddMoreSeats, calculateRemainingSeats, t]);
 
-  const renderCreditSubscriptionInfo = () => {
+  const renderCreditSubscriptionInfo = useCallback(() => {
     return (
       <Flex vertical>
         <Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
       </Flex>
     );
-  };
+  }, [t]);
 
-  const renderCustomSubscriptionInfo = () => {
+  const renderCustomSubscriptionInfo = useCallback(() => {
     return (
       <Flex vertical>
         <Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
@@ -340,7 +390,36 @@ const CurrentPlanDetails = () => {
         </Typography.Text>
       </Flex>
     );
-  };
+  }, [billingInfo?.valid_till_date, t]);
+
+  const renderSubscriptionContent = useCallback(() => {
+    if (!billingInfo) return null;
+
+    switch (billingInfo.subscription_type) {
+      case ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL:
+        return renderLtdDetails();
+      case ISUBSCRIPTION_TYPE.TRIAL:
+        return renderTrialDetails();
+      case ISUBSCRIPTION_TYPE.FREE:
+        return renderFreePlan();
+      case ISUBSCRIPTION_TYPE.PADDLE:
+        return renderPaddleSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CREDIT:
+        return renderCreditSubscriptionInfo();
+      case ISUBSCRIPTION_TYPE.CUSTOM:
+        return renderCustomSubscriptionInfo();
+      default:
+        return null;
+    }
+  }, [
+    billingInfo,
+    renderLtdDetails,
+    renderTrialDetails,
+    renderFreePlan,
+    renderPaddleSubscriptionInfo,
+    renderCreditSubscriptionInfo,
+    renderCustomSubscriptionInfo,
+  ]);
 
   return (
     <Card
@@ -361,19 +440,10 @@ const CurrentPlanDetails = () => {
     >
       <Flex vertical>
         <div style={{ marginBottom: '14px' }}>
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL &&
-            renderLtdDetails()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.TRIAL && renderTrialDetails()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.FREE && renderFreePlan()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
-            renderPaddleSubscriptionInfo()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
-            renderCreditSubscriptionInfo()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
-            renderCustomSubscriptionInfo()}
+          {renderSubscriptionContent()}
         </div>
 
-        {shouldShowRedeemButton() && (
+        {shouldShowRedeemButton && (
           <>
             <Button
               type="link"
@@ -408,17 +478,28 @@ const CurrentPlanDetails = () => {
             <Typography.Paragraph
               style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
             >
-              {t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")}
+              {billingInfo?.total_used === 1 
+                ? t('purchaseSeatsTextSingle', "Add more seats to invite team members to your workspace.")
+                : t('purchaseSeatsText', "To continue, you'll need to purchase additional seats.")
+              }
             </Typography.Paragraph>
 
             <Typography.Paragraph style={{ margin: '0 0 16px 0' }}>
               {t('currentSeatsText', 'You currently have {{seats}} seats available.', {
                 seats: billingInfo?.total_seats,
               })}
+              {billingInfo?.total_used === 1 && (
+                <span style={{ color: '#666', marginLeft: '8px' }}>
+                  ({t('singleUserNote', 'Currently used by 1 team member')})
+                </span>
+              )}
             </Typography.Paragraph>
 
             <Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
-              {t('selectSeatsText', 'Please select the number of additional seats to purchase.')}
+              {billingInfo?.total_used === 1
+                ? t('selectSeatsTextSingle', 'Select how many additional seats you need for new team members.')
+                : t('selectSeatsText', 'Please select the number of additional seats to purchase.')
+              }
             </Typography.Paragraph>
 
             <div style={{ marginBottom: '24px' }}>
@@ -430,18 +511,18 @@ const CurrentPlanDetails = () => {
                 options={seatCountOptions}
                 style={{ width: '300px' }}
               />
+
             </div>
 
             <Flex justify="end">
-              {selectedSeatCount.toString() !== '100+' ? (
+              {selectedSeatCount.toString() !== SEAT_COUNT_LIMIT ? (
                 <Button
                   type="primary"
                   loading={addingSeats}
                   onClick={handlePurchaseMoreSeats}
                   style={{
                     minWidth: '100px',
-                    backgroundColor: '#1890ff',
-                    borderColor: '#1890ff',
+                    ...BUTTON_STYLE,
                     borderRadius: '2px',
                   }}
                 >

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 rangeStart = Math.ceil(minValue / step) * step;
-    const range = Array.from(
-      { length: Math.floor((maxSeats - rangeStart) / step) + 1 },
-      (_, i) => rangeStart + i * step
-    );
+    const minValue = currentSeats;
+    const options: { value: number; disabled: boolean }[] = [];
 
-    return currentSeats < step
-      ? [...Array.from({ length: rangeStart - minValue }, (_, i) => minValue + i), ...range]
-      : range;
+    // Always show 1-5, but disable if less than minValue
+    for (let i = 1; i <= 5; i++) {
+      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('changeSubscriptionPlan')}
+            ? t('selectPlan', 'Select Plan')
+            : t('changeSubscriptionPlan', 'Change Subscription Plan')}
         </Typography.Title>
       </Flex>
 
       <Flex justify="center" align="center">
         <Form form={form}>
-          <Form.Item name="seatCount" label={t('noOfSeats')}>
+          <Form.Item name="seatCount" label={t('noOfSeats', 'Number of Seats')}>
             <Select
               style={{ width: 100 }}
               value={selectedSeatCount}
               options={seatCountOptions.map(option => ({
-                value: option,
-                text: option.toString(),
+                value: option.value,
+                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.projects_limit} ${t('projects')}`)}
-                {renderFeature(`${plans.team_member_limit} ${t('teamMembers')}`)}
+                {renderFeature(`${plans.free_tier_storage} ${t('storage', 'Storage')}`)}
+                {renderFeature(`${plans.projects_limit} ${t('projects', 'Projects')}`)}
+                {renderFeature(`${plans.team_member_limit} ${t('teamMembers', 'Team Members')}`)}
               </div>
             </Card>
           </Col>
@@ -401,9 +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('startupText02'))}
-                {renderFeature(t('startupText03'))}
-                {renderFeature(t('startupText04'))}
-                {renderFeature(t('startupText05'))}
+                {renderFeature(t('startupText01', 'Unlimited Projects'))}
+                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
+                {renderFeature(t('startupText03', 'Unlimited Storage'))}
+                {renderFeature(t('startupText04', 'Priority Support'))}
+                {renderFeature(t('startupText05', 'Advanced Analytics'))}
               </div>
             </Card>
           </Col>
@@ -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('startupText02'))}
-                {renderFeature(t('startupText03'))}
-                {renderFeature(t('startupText04'))}
-                {renderFeature(t('startupText05'))}
+                {renderFeature(t('startupText01', 'Unlimited Projects'))}
+                {renderFeature(t('startupText02', 'Unlimited Team Members'))}
+                {renderFeature(t('startupText03', 'Unlimited Storage'))}
+                {renderFeature(t('startupText04', 'Priority Support'))}
+                {renderFeature(t('startupText05', 'Advanced Analytics'))}
               </div>
             </Card>
           </Col>
@@ -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('continueWith', { plan: t('annualPlan') })}
+              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('annualPlan', 'Annual Plan') })
+              : 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('continueWith', { plan: t('monthlyPlan') })}
+              ? t('changeToPlan', 'Change to {{plan}}', { plan: t('monthlyPlan', 'Monthly Plan') })
+              : 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 React, { useEffect, useState } from 'react';
+import { Button, Card, Col, Divider, Form, Input, Row, Select } from '@/shared/antd-imports';
+import React, { useEffect, useState, useMemo, useCallback } from 'react';
 import { RootState } from '../../../app/store';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { IBillingConfigurationCountry } from '@/types/admin-center/country.types';
@@ -7,14 +7,15 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IBillingConfiguration } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 
-const Configuration: React.FC = () => {
+const Configuration: React.FC = React.memo(() => {
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
 
   const [countries, setCountries] = useState<IBillingConfigurationCountry[]>([]);
   const [configuration, setConfiguration] = useState<IBillingConfiguration>();
   const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
-  const fetchCountries = async () => {
+
+  const fetchCountries = useCallback(async () => {
     try {
       const res = await adminCenterApiService.getCountries();
       if (res.done) {
@@ -23,61 +24,85 @@ const Configuration: React.FC = () => {
     } catch (error) {
       logger.error('Error fetching countries:', error);
     }
-  };
+  }, []);
 
-  const fetchConfiguration = async () => {
+  const fetchConfiguration = useCallback(async () => {
     const res = await adminCenterApiService.getBillingConfiguration();
     if (res.done) {
       setConfiguration(res.body);
       form.setFieldsValue(res.body);
     }
-  };
+  }, [form]);
 
   useEffect(() => {
     fetchCountries();
     fetchConfiguration();
-  }, []);
+  }, [fetchCountries, fetchConfiguration]);
 
-  const handleSave = async (values: any) => {
-    try {
-      setLoading(true);
-      const res = await adminCenterApiService.updateBillingConfiguration(values);
-      if (res.done) {
-        fetchConfiguration();
+  const handleSave = useCallback(
+    async (values: any) => {
+      try {
+        setLoading(true);
+        const res = await adminCenterApiService.updateBillingConfiguration(values);
+        if (res.done) {
+          fetchConfiguration();
+        }
+      } catch (error) {
+        logger.error('Error updating configuration:', error);
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
-      logger.error('Error updating configuration:', error);
-    } finally {
-      setLoading(false);
-    }
-  };
+    },
+    [fetchConfiguration]
+  );
 
-  const countryOptions = countries.map(country => ({
-    label: country.name,
-    value: country.id,
-  }));
+  const countryOptions = useMemo(
+    () =>
+      countries.map(country => ({
+        label: country.name,
+        value: country.id,
+      })),
+    [countries]
+  );
+
+  const titleStyle = useMemo(
+    () => ({
+      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+      fontWeight: 500,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
+  );
+
+  const dividerTitleStyle = useMemo(
+    () => ({
+      color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
+      fontWeight: 600,
+      fontSize: '16px',
+      display: 'flex',
+      gap: '4px',
+    }),
+    [themeMode]
+  );
+
+  const cardStyle = useMemo(() => ({ marginTop: '16px' }), []);
+  const colStyle = useMemo(() => ({ padding: '0 12px', height: '86px' }), []);
+  const dividerStyle = useMemo(() => ({ margin: '16px 0' }), []);
+  const buttonColStyle = useMemo(() => ({ paddingLeft: '12px' }), []);
+
+  const handlePhoneInput = useCallback((e: React.FormEvent<HTMLInputElement>) => {
+    const input = e.target as HTMLInputElement;
+    input.value = input.value.replace(/[^0-9]/g, '');
+  }, []);
 
   return (
     <div>
-      <Card
-        title={
-          <span
-            style={{
-              color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-              fontWeight: 500,
-              fontSize: '16px',
-              display: 'flex',
-              gap: '4px',
-            }}
-          >
-            Billing Details
-          </span>
-        }
-        style={{ marginTop: '16px' }}
-      >
+      <Card title={<span style={titleStyle}>Billing Details</span>} style={cardStyle}>
         <Form form={form} initialValues={configuration} onFinish={handleSave}>
-          <Row>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+          <Row gutter={[0, 0]}>
+            <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
-                  placeholder="Phone Number"
-                  maxLength={10}
-                  onInput={e => {
-                    const input = e.target as HTMLInputElement; // Type assertion to access 'value'
-                    input.value = input.value.replace(/[^0-9]/g, ''); // Restrict non-numeric input
-                  }}
-                />
+                <Input placeholder="Phone Number" maxLength={10} onInput={handlePhoneInput} />
               </Form.Item>
             </Col>
           </Row>
 
-          <Divider orientation="left" style={{ margin: '16px 0' }}>
-            <span
-              style={{
-                color: `${themeMode === 'dark' ? '#ffffffd9' : '#000000d9'}`,
-                fontWeight: 600,
-                fontSize: '16px',
-                display: 'flex',
-                gap: '4px',
-              }}
-            >
-              Company Details
-            </span>
+          <Divider orientation="left" style={{ ...dividerStyle, fontSize: '14px' }}>
+            <span style={dividerTitleStyle}>Company Details</span>
           </Divider>
 
-          <Row>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+          <Row gutter={[0, 0]}>
+            <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>
-            <Col
-              span={8}
-              style={{
-                padding: '0 12px',
-                height: '86px',
-                scrollbarColor: 'red',
-              }}
-            >
+          <Row gutter={[0, 0]}>
+            <Col xs={24} sm={24} md={8} lg={8} xl={8} style={colStyle}>
               <Form.Item name="country" label="Country" layout="vertical">
                 <Select
                   dropdownStyle={{ maxHeight: 256, overflow: 'auto' }}
@@ -181,28 +182,28 @@ const Configuration: React.FC = () => {
                 />
               </Form.Item>
             </Col>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+            <Col 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>
-            <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
+          <Row gutter={[0, 0]}>
+            <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,8 @@
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
 import logger from '@/utils/errorLogger';
-import { EnterOutlined, EditOutlined } from '@ant-design/icons';
-import { Card, Button, Tooltip, Typography } from 'antd';
+import { EnterOutlined, EditOutlined } from '@/shared/antd-imports';
+import { Card, Button, Tooltip, Typography } 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 { Card, Tooltip, Input, Button, Typography, InputRef } from 'antd';
+import { MailOutlined, PhoneOutlined, EditOutlined } from '@/shared/antd-imports';
+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 { Badge, Button, Card, Popconfirm, Table, TableProps, Tooltip, Typography } from 'antd';
+import { SettingOutlined, DeleteOutlined } from '@/shared/antd-imports';
+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

@@ -15,7 +15,7 @@ import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '../../../features/projects/singleProject/members/projectMembersSlice';
 import { colors } from '../../../styles/colors';
-import { PlusOutlined, UsergroupAddOutlined } from '@ant-design/icons';
+import { PlusOutlined, UsergroupAddOutlined } from '@/shared/antd-imports';
 import { useTranslation } from 'react-i18next';
 import SingleAvatar from '@/components/common/single-avatar/single-avatar';
 import { CheckboxChangeEvent } from 'antd/es/checkbox';

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 { CalendarOutlined } from '@ant-design/icons';
+import { DatePicker, Button, Flex } from '@/shared/antd-imports';
+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/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, Modal, Select, Spin, Typography } from '@/shared/antd-imports';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import {
@@ -11,6 +11,7 @@ import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.se
 import { IJobTitle } from '@/types/job.types';
 import { teamMembersApiService } from '@/api/team-members/teamMembers.api.service';
 import { ITeamMemberCreateRequest } from '@/types/teamMembers/team-member-create-request';
+import { LinkOutlined } from '@ant-design/icons';
 
 interface FormValues {
   email: string[];
@@ -87,23 +88,33 @@ const InviteTeamMembers = () => {
   };
 
   return (
-    <Drawer
+    <Modal
       title={
         <Typography.Text strong style={{ fontSize: 16 }}>
           {t('addMemberDrawerTitle')}
         </Typography.Text>
       }
       open={isDrawerOpen}
-      onClose={handleClose}
+      onCancel={handleClose}
       destroyOnClose
       afterOpenChange={visible => visible && handleSearch('')}
       width={400}
       loading={loading}
       footer={
-        <Flex justify="end">
-          <Button type="primary" onClick={form.submit}>
-            {t('addToTeamButton')}
-          </Button>
+        <Flex justify="space-between">
+          {/* <Button
+            style={{ width: 140, fontSize: 12 }}
+            block
+            icon={<LinkOutlined />}
+            disabled
+          >
+            {t('copyTeamLink')}
+          </Button> */}
+          <Flex justify="end">
+            <Button onClick={form.submit} style={{ fontSize: 12 }}>
+              {t('addToTeamButton')}
+            </Button>
+          </Flex>
         </Flex>
       }
     >
@@ -176,7 +187,7 @@ const InviteTeamMembers = () => {
           />
         </Form.Item>
       </Form>
-    </Drawer>
+    </Modal>
   );
 };
 

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;