Merge pull request #225 from Worklenz/fix/WB-705-task-list-timer-cell

Fix/wb 705 task list timer cell

worklenz-frontend/README.md

@@ -3,6 +3,7 @@
 Worklenz is a project management application built with React, TypeScript, and Ant Design. The project is bundled using [Vite](https://vitejs.dev/).
 
 ## Table of Contents
+
 - [Getting Started](#getting-started)
 - [Available Scripts](#available-scripts)
 - [Project Structure](#project-structure)

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

@@ -4,5 +4,4 @@
   "searchPlaceholder": "Type name or email",
   "inviteAsAMember": "Invite as a member",
   "inviteNewMemberByEmail": "Invite new member by email"
-
 }

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

@@ -4,5 +4,4 @@
   "searchPlaceholder": "Escriba nombre o correo electrónico",
   "inviteAsAMember": "Invitar como miembro",
   "inviteNewMemberByEmail": "Invitar nuevo miembro por correo electrónico"
-
 }

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

@@ -4,5 +4,4 @@
   "searchPlaceholder": "Digite nome ou e-mail",
   "inviteAsAMember": "Convidar como membro",
   "inviteNewMemberByEmail": "Convidar novo membro por e-mail"
-
 }

worklenz-frontend/src/App.tsx

@@ -88,7 +88,7 @@ const App: React.FC = memo(() => {
         <RouterProvider
           router={router}
           future={{
-            v7_startTransition: true 
+            v7_startTransition: true,
           }}
         />
       </ThemeWrapper>

worklenz-frontend/src/api/admin-center/admin-center.api.service.ts

@@ -112,7 +112,7 @@ export const adminCenterApiService = {
 
   async updateTeam(
     team_id: string,
-    body: {name: string, teamMembers: IOrganizationUser[]}
+    body: { name: string; teamMembers: IOrganizationUser[] }
   ): Promise<IServerResponse<IOrganization>> {
     const response = await apiClient.put<IServerResponse<IOrganization>>(
       `${rootUrl}/organization/team/${team_id}`,
@@ -152,7 +152,6 @@ export const adminCenterApiService = {
     return response.data;
   },
 
-  
   // Billing - Configuration
   async getCountries(): Promise<IServerResponse<IBillingConfigurationCountry[]>> {
     const response = await apiClient.get<IServerResponse<IBillingConfigurationCountry[]>>(
@@ -168,7 +167,9 @@ export const adminCenterApiService = {
     return response.data;
   },
 
-  async updateBillingConfiguration(body: IBillingConfiguration): Promise<IServerResponse<IBillingConfiguration>> {
+  async updateBillingConfiguration(
+    body: IBillingConfiguration
+  ): Promise<IServerResponse<IBillingConfiguration>> {
     const response = await apiClient.put<IServerResponse<IBillingConfiguration>>(
       `${rootUrl}/billing/configuration`,
       body
@@ -178,42 +179,58 @@ export const adminCenterApiService = {
 
   // Billing - Current Bill
   async getCharges(): Promise<IServerResponse<IBillingChargesResponse>> {
-    const response = await apiClient.get<IServerResponse<IBillingChargesResponse>>(`${rootUrl}/billing/charges`);
+    const response = await apiClient.get<IServerResponse<IBillingChargesResponse>>(
+      `${rootUrl}/billing/charges`
+    );
     return response.data;
   },
 
   async getTransactions(): Promise<IServerResponse<IBillingTransaction[]>> {
-    const response = await apiClient.get<IServerResponse<IBillingTransaction[]>>(`${rootUrl}/billing/transactions`);
+    const response = await apiClient.get<IServerResponse<IBillingTransaction[]>>(
+      `${rootUrl}/billing/transactions`
+    );
     return response.data;
   },
 
   async getBillingAccountInfo(): Promise<IServerResponse<IBillingAccountInfo>> {
-    const response = await apiClient.get<IServerResponse<IBillingAccountInfo>>(`${rootUrl}/billing/info`);
+    const response = await apiClient.get<IServerResponse<IBillingAccountInfo>>(
+      `${rootUrl}/billing/info`
+    );
     return response.data;
   },
 
   async getFreePlanSettings(): Promise<IServerResponse<IFreePlanSettings>> {
-    const response = await apiClient.get<IServerResponse<IFreePlanSettings>>(`${rootUrl}/billing/free-plan`);
+    const response = await apiClient.get<IServerResponse<IFreePlanSettings>>(
+      `${rootUrl}/billing/free-plan`
+    );
     return response.data;
   },
 
   async upgradePlan(plan: string): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
-    const response = await apiClient.get<IServerResponse<IUpgradeSubscriptionPlanResponse>>(`${rootUrl}/billing/upgrade-plan${toQueryString({plan})}`);
+    const response = await apiClient.get<IServerResponse<IUpgradeSubscriptionPlanResponse>>(
+      `${rootUrl}/billing/upgrade-plan${toQueryString({ plan })}`
+    );
     return response.data;
   },
 
   async changePlan(plan: string): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
-    const response = await apiClient.get<IServerResponse<IUpgradeSubscriptionPlanResponse>>(`${rootUrl}/billing/change-plan${toQueryString({plan})}`);
+    const response = await apiClient.get<IServerResponse<IUpgradeSubscriptionPlanResponse>>(
+      `${rootUrl}/billing/change-plan${toQueryString({ plan })}`
+    );
     return response.data;
   },
 
   async getPlans(): Promise<IServerResponse<IPricingPlans>> {
-    const response = await apiClient.get<IServerResponse<IPricingPlans>>(`${rootUrl}/billing/plans`);
+    const response = await apiClient.get<IServerResponse<IPricingPlans>>(
+      `${rootUrl}/billing/plans`
+    );
     return response.data;
   },
 
   async getStorageInfo(): Promise<IServerResponse<IStorageInfo>> {
-    const response = await apiClient.get<IServerResponse<IStorageInfo>>(`${rootUrl}/billing/storage`);
+    const response = await apiClient.get<IServerResponse<IStorageInfo>>(
+      `${rootUrl}/billing/storage`
+    );
     return response.data;
   },
 
@@ -233,26 +250,34 @@ export const adminCenterApiService = {
   },
 
   async addMoreSeats(totalSeats: number): Promise<IServerResponse<any>> {
-    const response = await apiClient.post<IServerResponse<any>>(`${rootUrl}/billing/purchase-more-seats`, {seatCount: totalSeats});
+    const response = await apiClient.post<IServerResponse<any>>(
+      `${rootUrl}/billing/purchase-more-seats`,
+      { seatCount: totalSeats }
+    );
     return response.data;
   },
 
   async redeemCode(code: string): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
-    const response = await apiClient.post<IServerResponse<IUpgradeSubscriptionPlanResponse>>(`${rootUrl}/billing/redeem`, {
+    const response = await apiClient.post<IServerResponse<IUpgradeSubscriptionPlanResponse>>(
+      `${rootUrl}/billing/redeem`,
+      {
         code,
-    });
+      }
+    );
     return response.data;
   },
 
   async getAccountStorage(): Promise<IServerResponse<IBillingAccountStorage>> {
-    const response = await apiClient.get<IServerResponse<IBillingAccountStorage>>(`${rootUrl}/billing/account-storage`);
+    const response = await apiClient.get<IServerResponse<IBillingAccountStorage>>(
+      `${rootUrl}/billing/account-storage`
+    );
     return response.data;
   },
 
   async switchToFreePlan(teamId: string): Promise<IServerResponse<any>> {
-    const response = await apiClient.get<IServerResponse<any>>(`${rootUrl}/billing/switch-to-free-plan/${teamId}`);
+    const response = await apiClient.get<IServerResponse<any>>(
+      `${rootUrl}/billing/switch-to-free-plan/${teamId}`
+    );
     return response.data;
   },
-
 };
-

worklenz-frontend/src/api/admin-center/billing.api.service.ts

@@ -6,7 +6,10 @@ import { IUpgradeSubscriptionPlanResponse } from '@/types/admin-center/admin-cen
 
 const rootUrl = `${API_BASE_URL}/billing`;
 export const billingApiService = {
-  async upgradeToPaidPlan(plan: string, seatCount: number): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
+  async upgradeToPaidPlan(
+    plan: string,
+    seatCount: number
+  ): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
     const q = toQueryString({ plan, seatCount });
     const response = await apiClient.get<IServerResponse<any>>(
       `${rootUrl}/upgrade-to-paid-plan${q}`
@@ -14,7 +17,9 @@ export const billingApiService = {
     return response.data;
   },
 
-  async purchaseMoreSeats(seatCount: number): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
+  async purchaseMoreSeats(
+    seatCount: number
+  ): Promise<IServerResponse<IUpgradeSubscriptionPlanResponse>> {
     const response = await apiClient.post<IServerResponse<IUpgradeSubscriptionPlanResponse>>(
       `${rootUrl}/purchase-more-seats`,
       { seatCount }
@@ -27,9 +32,5 @@ export const billingApiService = {
       `${rootUrl}/contact-us${toQueryString({ contactNo })}`
     );
     return response.data;
-  }
+  },
-
-
-
-
 };

worklenz-frontend/src/api/api-client.ts

@@ -20,7 +20,7 @@ export const refreshCsrfToken = async (): Promise<string | null> => {
     // Make a GET request to the server to get a fresh CSRF token with timeout
     const response = await axios.get(`${config.apiUrl}/csrf-token`, {
       withCredentials: true,
-      timeout: 10000 // 10 second timeout for CSRF token requests
+      timeout: 10000, // 10 second timeout for CSRF token requests
     });
 
     const tokenEnd = performance.now();
@@ -114,12 +114,15 @@ apiClient.interceptors.response.use(
     const errorResponse = error.response;
 
     // Handle CSRF token errors
-    if (errorResponse?.status === 403 && 
+    if (
-        (typeof errorResponse.data === 'object' && 
+      errorResponse?.status === 403 &&
+      ((typeof errorResponse.data === 'object' &&
         errorResponse.data !== null &&
         'message' in errorResponse.data &&
-         (errorResponse.data.message === 'invalid csrf token' || errorResponse.data.message === 'Invalid CSRF token') || 
+        (errorResponse.data.message === 'invalid csrf token' ||
-         (error as any).code === 'EBADCSRFTOKEN')) {
+          errorResponse.data.message === 'Invalid CSRF token')) ||
+        (error as any).code === 'EBADCSRFTOKEN')
+    ) {
       alertService.error('Security Error', 'Invalid security token. Refreshing your session...');
 
       // Try to refresh the CSRF token and retry the request

worklenz-frontend/src/api/attachments/attachments.api.service.ts

@@ -1,25 +1,37 @@
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
-import { IProjectAttachmentsViewModel } from "@/types/tasks/task-attachment-view-model";
+import { IProjectAttachmentsViewModel } from '@/types/tasks/task-attachment-view-model';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
-import { API_BASE_URL } from "@/shared/constants";
+import { API_BASE_URL } from '@/shared/constants';
-import { toQueryString } from "@/utils/toQueryString";
+import { toQueryString } from '@/utils/toQueryString';
 
 const rootUrl = `${API_BASE_URL}/attachments`;
 
 export const attachmentsApiService = {
-  getTaskAttachments: async (taskId: string): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
+  getTaskAttachments: async (
-    const response = await apiClient.get<IServerResponse<IProjectAttachmentsViewModel>>(`${rootUrl}/tasks/${taskId}`);
+    taskId: string
+  ): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
+    const response = await apiClient.get<IServerResponse<IProjectAttachmentsViewModel>>(
+      `${rootUrl}/tasks/${taskId}`
+    );
     return response.data;
   },
 
-  getProjectAttachments: async (projectId: string, index: number, size: number): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
+  getProjectAttachments: async (
+    projectId: string,
+    index: number,
+    size: number
+  ): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
     const q = toQueryString({ index, size });
-    const response = await apiClient.get<IServerResponse<IProjectAttachmentsViewModel>>(`${rootUrl}/project/${projectId}${q}`);
+    const response = await apiClient.get<IServerResponse<IProjectAttachmentsViewModel>>(
+      `${rootUrl}/project/${projectId}${q}`
+    );
     return response.data;
   },
 
   downloadAttachment: async (id: string, filename: string): Promise<IServerResponse<string>> => {
-    const response = await apiClient.get<IServerResponse<string>>(`${rootUrl}/download?id=${id}&file=${filename}`);
+    const response = await apiClient.get<IServerResponse<string>>(
+      `${rootUrl}/download?id=${id}&file=${filename}`
+    );
     return response.data;
   },
 
@@ -27,7 +39,4 @@ export const attachmentsApiService = {
     const response = await apiClient.delete<IServerResponse<string>>(`${rootUrl}/tasks/${id}`);
     return response.data;
   },
-
 };
-
-

worklenz-frontend/src/api/project-templates/project-templates.api.service.ts

@@ -34,7 +34,9 @@ export const projectTemplatesApiService = {
     return response.data;
   },
 
-  createCustomTemplate: async (body: { template_id: string }): Promise<IServerResponse<IProjectTemplate>> => {
+  createCustomTemplate: async (body: {
+    template_id: string;
+  }): Promise<IServerResponse<IProjectTemplate>> => {
     const response = await apiClient.post(`${rootUrl}/custom-template`, body);
     return response.data;
   },
@@ -44,15 +46,17 @@ export const projectTemplatesApiService = {
     return response.data;
   },
 
-  createFromWorklenzTemplate: async (body: { template_id: string }): Promise<IServerResponse<IProjectTemplate>> => {
+  createFromWorklenzTemplate: async (body: {
+    template_id: string;
+  }): Promise<IServerResponse<IProjectTemplate>> => {
     const response = await apiClient.post(`${rootUrl}/import-template`, body);
     return response.data;
   },
 
-  createFromCustomTemplate: async (body: { template_id: string }): Promise<IServerResponse<IProjectTemplate>> => {
+  createFromCustomTemplate: async (body: {
+    template_id: string;
+  }): Promise<IServerResponse<IProjectTemplate>> => {
     const response = await apiClient.post(`${rootUrl}/import-custom-template`, body);
     return response.data;
   },
-
 };
-

worklenz-frontend/src/api/projects/projects.api.service.ts

@@ -101,7 +101,9 @@ export const projectsApiService = {
     return response.data;
   },
 
-  updateProject: async (payload: UpdateProjectPayload): Promise<IServerResponse<IProjectViewModel>> => {
+  updateProject: async (
+    payload: UpdateProjectPayload
+  ): Promise<IServerResponse<IProjectViewModel>> => {
     const { id, ...data } = payload;
     const q = toQueryString({ current_project_id: id });
     const url = `${API_BASE_URL}/projects/${id}${q}`;
@@ -127,7 +129,10 @@ export const projectsApiService = {
     return response.data;
   },
 
-  updateDefaultTab: async (body: { project_id: string; default_view: string }): Promise<IServerResponse<any>> => {
+  updateDefaultTab: async (body: {
+    project_id: string;
+    default_view: string;
+  }): Promise<IServerResponse<any>> => {
     const url = `${rootUrl}/update-pinned-view`;
     const response = await apiClient.put<IServerResponse<IProjectViewModel>>(`${url}`, body);
     return response.data;
@@ -139,4 +144,3 @@ export const projectsApiService = {
     return response.data;
   },
 };
-

worklenz-frontend/src/api/reporting/reporting-members.api.service.ts

@@ -1,5 +1,10 @@
 import { IServerResponse } from '@/types/common.types';
-import { IGetProjectsRequestBody, IRPTMembersViewModel, IRPTOverviewProjectMember, IRPTProjectsViewModel } from '@/types/reporting/reporting.types';
+import {
+  IGetProjectsRequestBody,
+  IRPTMembersViewModel,
+  IRPTOverviewProjectMember,
+  IRPTProjectsViewModel,
+} from '@/types/reporting/reporting.types';
 import apiClient from '../api-client';
 import { API_BASE_URL } from '@/shared/constants';
 import { toQueryString } from '@/utils/toQueryString';
@@ -7,9 +12,7 @@ import { toQueryString } from '@/utils/toQueryString';
 const rootUrl = `${API_BASE_URL}/reporting/members`;
 
 export const reportingMembersApiService = {
-  getMembers: async (
+  getMembers: async (body: any): Promise<IServerResponse<IRPTMembersViewModel>> => {
-    body: any
-  ): Promise<IServerResponse<IRPTMembersViewModel>> => {
     const q = toQueryString(body);
     const url = `${rootUrl}${q}`;
     const response = await apiClient.get<IServerResponse<IRPTMembersViewModel>>(url);

worklenz-frontend/src/api/reporting/reporting-projects.api.service.ts

@@ -1,5 +1,10 @@
 import { IServerResponse } from '@/types/common.types';
-import { IGetProjectsRequestBody, IRPTOverviewProjectInfo, IRPTOverviewProjectMember, IRPTProjectsViewModel } from '@/types/reporting/reporting.types';
+import {
+  IGetProjectsRequestBody,
+  IRPTOverviewProjectInfo,
+  IRPTOverviewProjectMember,
+  IRPTProjectsViewModel,
+} from '@/types/reporting/reporting.types';
 import apiClient from '../api-client';
 import { API_BASE_URL } from '@/shared/constants';
 import { toQueryString } from '@/utils/toQueryString';
@@ -33,8 +38,11 @@ export const reportingProjectsApiService = {
     return response.data;
   },
 
-  getTasks: async (projectId: string, groupBy: string): Promise<IServerResponse<ITaskListGroup[]>> => {
+  getTasks: async (
-    const q = toQueryString({group: groupBy})
+    projectId: string,
+    groupBy: string
+  ): Promise<IServerResponse<ITaskListGroup[]>> => {
+    const q = toQueryString({ group: groupBy });
 
     const url = `${API_BASE_URL}/reporting/overview/project/tasks/${projectId}${q}`;
     const response = await apiClient.get<IServerResponse<ITaskListGroup[]>>(url);

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

@@ -3,12 +3,20 @@ 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';
+import {
+  IProjectLogsBreakdown,
+  IRPTTimeMember,
+  IRPTTimeProject,
+  ITimeLogBreakdownReq,
+} from '@/types/reporting/reporting.types';
 
 const rootUrl = `${API_BASE_URL}/reporting`;
 
 export const reportingTimesheetApiService = {
-  getTimeSheetData: async (body = {}, archived = false): Promise<IServerResponse<IAllocationViewModel>> => {
+  getTimeSheetData: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IAllocationViewModel>> => {
     const q = toQueryString({ archived });
     const response = await apiClient.post(`${rootUrl}/allocation/${q}`, body);
     return response.data;
@@ -19,24 +27,35 @@ export const reportingTimesheetApiService = {
     return response.data;
   },
 
-  getProjectTimeSheets: async (body = {}, archived = false): Promise<IServerResponse<IRPTTimeProject[]>> => {
+  getProjectTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
     const q = toQueryString({ archived });
     const response = await apiClient.post(`${rootUrl}/time-reports/projects/${q}`, body);
     return response.data;
   },
 
-  getMemberTimeSheets: async (body = {}, archived = false): Promise<IServerResponse<IRPTTimeMember[]>> => {
+  getMemberTimeSheets: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeMember[]>> => {
     const q = toQueryString({ archived });
     const response = await apiClient.post(`${rootUrl}/time-reports/members/${q}`, body);
     return response.data;
   },
 
-  getProjectTimeLogs: async (body: ITimeLogBreakdownReq): Promise<IServerResponse<IProjectLogsBreakdown[]>> => {
+  getProjectTimeLogs: async (
+    body: ITimeLogBreakdownReq
+  ): Promise<IServerResponse<IProjectLogsBreakdown[]>> => {
     const response = await apiClient.post(`${rootUrl}/project-timelogs`, body);
     return response.data;
   },
 
-  getProjectEstimatedVsActual: async (body = {}, archived = false): Promise<IServerResponse<IRPTTimeProject[]>> => {
+  getProjectEstimatedVsActual: async (
+    body = {},
+    archived = false
+  ): Promise<IServerResponse<IRPTTimeProject[]>> => {
     const q = toQueryString({ archived });
     const response = await apiClient.post(`${rootUrl}/time-reports/estimated-vs-actual${q}`, body);
     return response.data;

worklenz-frontend/src/api/schedule/schedule.api.service.ts

@@ -2,7 +2,13 @@ import { API_BASE_URL } from '@/shared/constants';
 import apiClient from '../api-client';
 import { IServerResponse } from '@/types/common.types';
 import { ITeamMemberViewModel } from '@/types/teamMembers/teamMembersGetResponse.types';
-import { DateList, Member, Project, ScheduleData, Settings } from '@/types/schedule/schedule-v2.types';
+import {
+  DateList,
+  Member,
+  Project,
+  ScheduleData,
+  Settings,
+} from '@/types/schedule/schedule-v2.types';
 
 const rootUrl = `${API_BASE_URL}/schedule-gannt-v2`;
 
@@ -45,16 +51,18 @@ export const scheduleAPIService = {
   },
 
   fetchMemberProjects: async ({ id }: { id: string }): Promise<IServerResponse<Project>> => {
-    const response = await apiClient.get<IServerResponse<Project>>(`${rootUrl}/members/projects/${id}`);
+    const response = await apiClient.get<IServerResponse<Project>>(
+      `${rootUrl}/members/projects/${id}`
+    );
     return response.data;
   },
 
   submitScheduleData: async ({
-    schedule
+    schedule,
   }: {
-    schedule: ScheduleData
+    schedule: ScheduleData;
   }): Promise<IServerResponse<any>> => {
     const response = await apiClient.post<IServerResponse<any>>(`${rootUrl}/schedule`, schedule);
     return response.data;
-  }
+  },
 };

worklenz-frontend/src/api/settings/profile/profile-settings.api.service.ts

@@ -53,7 +53,10 @@ export const profileSettingsApiService = {
   },
 
   updateTeamName: async (id: string, body: ITeam): Promise<IServerResponse<ITeam>> => {
-    const response = await apiClient.put<IServerResponse<ITeam>>(`${rootUrl}/team-name/${id}`, body);
+    const response = await apiClient.put<IServerResponse<ITeam>>(
+      `${rootUrl}/team-name/${id}`,
+      body
+    );
     return response.data;
   },
 

worklenz-frontend/src/api/task-templates/task-templates.api.service.ts

@@ -21,12 +21,18 @@ export const taskTemplatesApiService = {
     const response = await apiClient.get<IServerResponse<ITaskTemplateGetResponse>>(`${url}`);
     return response.data;
   },
-  createTemplate: async (body: { name: string, tasks: IProjectTask[] }): Promise<IServerResponse<ITask>> => {
+  createTemplate: async (body: {
+    name: string;
+    tasks: IProjectTask[];
+  }): Promise<IServerResponse<ITask>> => {
     const url = `${rootUrl}`;
     const response = await apiClient.post<IServerResponse<ITask>>(`${url}`, body);
     return response.data;
   },
-  updateTemplate: async (id: string, body: { name: string, tasks: IProjectTask[] }): Promise<IServerResponse<ITask>> => {
+  updateTemplate: async (
+    id: string,
+    body: { name: string; tasks: IProjectTask[] }
+  ): Promise<IServerResponse<ITask>> => {
     const url = `${rootUrl}/${id}`;
     const response = await apiClient.put<IServerResponse<ITask>>(`${url}`, body);
     return response.data;

worklenz-frontend/src/api/taskAttributes/phases/phases.api.service.ts

@@ -43,7 +43,7 @@ export const phasesApiService = {
     return response.data;
   },
 
-  updateNameOfPhase: async (phaseId: string, body: ITaskPhase, projectId: string,) => {
+  updateNameOfPhase: async (phaseId: string, body: ITaskPhase, projectId: string) => {
     const q = toQueryString({ id: projectId, current_project_id: projectId });
     const response = await apiClient.put<IServerResponse<ITaskPhase>>(
       `${rootUrl}/${phaseId}${q}`,

worklenz-frontend/src/api/taskAttributes/status/status.api.service.ts

@@ -69,8 +69,16 @@ export const statusApiService = {
     return response.data;
   },
 
-  deleteStatus: async (statusId: string, projectId: string, replacingStatusId: string): Promise<IServerResponse<void>> => {
+  deleteStatus: async (
-    const q = toQueryString({ project: projectId, current_project_id: projectId, replace: replacingStatusId || null });
+    statusId: string,
+    projectId: string,
+    replacingStatusId: string
+  ): Promise<IServerResponse<void>> => {
+    const q = toQueryString({
+      project: projectId,
+      current_project_id: projectId,
+      replace: replacingStatusId || null,
+    });
     const response = await apiClient.delete<IServerResponse<void>>(`${rootUrl}/${statusId}${q}`);
     return response.data;
   },

worklenz-frontend/src/api/tasks/subtasks.api.service.ts

@@ -1,7 +1,7 @@
-import { API_BASE_URL } from "@/shared/constants";
+import { API_BASE_URL } from '@/shared/constants';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
-import { ISubTask } from "@/types/tasks/subTask.types";
+import { ISubTask } from '@/types/tasks/subTask.types';
 
 const root = `${API_BASE_URL}/sub-tasks`;
 
@@ -10,7 +10,4 @@ export const subTasksApiService = {
     const response = await apiClient.get(`${root}/${parentTaskId}`);
     return response.data;
   },
-
-
 };
-

worklenz-frontend/src/api/tasks/task-attachments.api.service.ts

@@ -1,5 +1,9 @@
 import { IServerResponse } from '@/types/common.types';
-import { IProjectAttachmentsViewModel, ITaskAttachment, ITaskAttachmentViewModel } from '@/types/tasks/task-attachment-view-model';
+import {
+  IProjectAttachmentsViewModel,
+  ITaskAttachment,
+  ITaskAttachmentViewModel,
+} from '@/types/tasks/task-attachment-view-model';
 import apiClient from '../api-client';
 import { API_BASE_URL } from '@/shared/constants';
 import { IAvatarAttachment } from '@/types/avatarAttachment.types';
@@ -8,7 +12,6 @@ import { toQueryString } from '@/utils/toQueryString';
 const rootUrl = `${API_BASE_URL}/attachments`;
 
 const taskAttachmentsApiService = {
-
   createTaskAttachment: async (
     body: ITaskAttachment
   ): Promise<IServerResponse<ITaskAttachmentViewModel>> => {
@@ -16,17 +19,25 @@ const taskAttachmentsApiService = {
     return response.data;
   },
 
-  createAvatarAttachment: async (body: IAvatarAttachment): Promise<IServerResponse<{ url: string; }>> => {
+  createAvatarAttachment: async (
+    body: IAvatarAttachment
+  ): Promise<IServerResponse<{ url: string }>> => {
     const response = await apiClient.post(`${rootUrl}/avatar`, body);
     return response.data;
   },
 
-  getTaskAttachments: async (taskId: string): Promise<IServerResponse<ITaskAttachmentViewModel[]>> => {
+  getTaskAttachments: async (
+    taskId: string
+  ): Promise<IServerResponse<ITaskAttachmentViewModel[]>> => {
     const response = await apiClient.get(`${rootUrl}/tasks/${taskId}`);
     return response.data;
   },
 
-  getProjectAttachments: async (projectId: string, index: number, size: number ): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
+  getProjectAttachments: async (
+    projectId: string,
+    index: number,
+    size: number
+  ): Promise<IServerResponse<IProjectAttachmentsViewModel>> => {
     const q = toQueryString({ index, size });
     const response = await apiClient.get(`${rootUrl}/project/${projectId}${q}`);
     return response.data;

worklenz-frontend/src/api/tasks/task-comments.api.service.ts

@@ -2,10 +2,16 @@ import apiClient from '@api/api-client';
 import { API_BASE_URL } from '@/shared/constants';
 import { IServerResponse } from '@/types/common.types';
 import { toQueryString } from '@/utils/toQueryString';
-import { ITaskComment, ITaskCommentsCreateRequest, ITaskCommentViewModel } from '@/types/tasks/task-comments.types';
+import {
+  ITaskComment,
+  ITaskCommentsCreateRequest,
+  ITaskCommentViewModel,
+} from '@/types/tasks/task-comments.types';
 
 const taskCommentsApiService = {
-  create: async (data: ITaskCommentsCreateRequest): Promise<IServerResponse<ITaskCommentsCreateRequest>> => {
+  create: async (
+    data: ITaskCommentsCreateRequest
+  ): Promise<IServerResponse<ITaskCommentsCreateRequest>> => {
     const response = await apiClient.post(`${API_BASE_URL}/task-comments`, data);
     return response.data;
   },
@@ -21,12 +27,16 @@ const taskCommentsApiService = {
   },
 
   deleteAttachment: async (id: string, taskId: string): Promise<IServerResponse<ITaskComment>> => {
-    const response = await apiClient.delete(`${API_BASE_URL}/task-comments/attachment/${id}/${taskId}`);
+    const response = await apiClient.delete(
+      `${API_BASE_URL}/task-comments/attachment/${id}/${taskId}`
+    );
     return response.data;
   },
 
   download: async (id: string, filename: string): Promise<IServerResponse<any>> => {
-    const response = await apiClient.get(`${API_BASE_URL}/task-comments/download?id=${id}&file=${filename}`);
+    const response = await apiClient.get(
+      `${API_BASE_URL}/task-comments/download?id=${id}&file=${filename}`
+    );
     return response.data;
   },
 
@@ -35,8 +45,13 @@ const taskCommentsApiService = {
     return response.data;
   },
 
-  updateReaction: async (id: string, body: {reaction_type: string, task_id: string}): Promise<IServerResponse<ITaskComment>> => {
+  updateReaction: async (
-    const response = await apiClient.put(`${API_BASE_URL}/task-comments/reaction/${id}${toQueryString(body)}`);
+    id: string,
+    body: { reaction_type: string; task_id: string }
+  ): Promise<IServerResponse<ITaskComment>> => {
+    const response = await apiClient.put(
+      `${API_BASE_URL}/task-comments/reaction/${id}${toQueryString(body)}`
+    );
     return response.data;
   },
 };

worklenz-frontend/src/api/tasks/task-dependencies.api.service.ts

@@ -1,7 +1,7 @@
-import { API_BASE_URL } from "@/shared/constants";
+import { API_BASE_URL } from '@/shared/constants';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
-import { ITaskDependency } from "@/types/tasks/task-dependency.types";
+import { ITaskDependency } from '@/types/tasks/task-dependency.types';
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
 
 const rootUrl = `${API_BASE_URL}/task-dependencies`;
 
@@ -10,7 +10,9 @@ export const taskDependenciesApiService = {
     const response = await apiClient.get(`${rootUrl}/${taskId}`);
     return response.data;
   },
-  createTaskDependency: async (body: ITaskDependency): Promise<IServerResponse<ITaskDependency>> => {
+  createTaskDependency: async (
+    body: ITaskDependency
+  ): Promise<IServerResponse<ITaskDependency>> => {
     const response = await apiClient.post(`${rootUrl}`, body);
     return response.data;
   },

worklenz-frontend/src/api/tasks/task-recurring.api.service.ts

@@ -1,16 +1,21 @@
-import { API_BASE_URL } from "@/shared/constants";
+import { API_BASE_URL } from '@/shared/constants';
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
-import { ITaskRecurringSchedule } from "@/types/tasks/task-recurring-schedule";
+import { ITaskRecurringSchedule } from '@/types/tasks/task-recurring-schedule';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
 
 const rootUrl = `${API_BASE_URL}/task-recurring`;
 
 export const taskRecurringApiService = {
-    getTaskRecurringData: async (schedule_id: string): Promise<IServerResponse<ITaskRecurringSchedule>> => {
+  getTaskRecurringData: async (
+    schedule_id: string
+  ): Promise<IServerResponse<ITaskRecurringSchedule>> => {
     const response = await apiClient.get(`${rootUrl}/${schedule_id}`);
     return response.data;
   },
-    updateTaskRecurringData: async (schedule_id: string, body: any): Promise<IServerResponse<ITaskRecurringSchedule>> => {
+  updateTaskRecurringData: async (
+    schedule_id: string,
+    body: any
+  ): Promise<IServerResponse<ITaskRecurringSchedule>> => {
     return apiClient.put(`${rootUrl}/${schedule_id}`, body);
-    }
+  },
-}
+};

worklenz-frontend/src/api/tasks/task-time-logs.api.service.ts

@@ -1,7 +1,7 @@
-import { API_BASE_URL } from "@/shared/constants";
+import { API_BASE_URL } from '@/shared/constants';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
-import { ITaskLogViewModel } from "@/types/tasks/task-log-view.types";
+import { ITaskLogViewModel } from '@/types/tasks/task-log-view.types';
 
 const rootUrl = `${API_BASE_URL}/task-time-log`;
 

worklenz-frontend/src/api/tasks/tasks-custom-columns.service.ts

@@ -1,6 +1,6 @@
-import { ITaskListColumn } from "@/types/tasks/taskList.types";
+import { ITaskListColumn } from '@/types/tasks/taskList.types';
-import apiClient from "../api-client";
+import apiClient from '../api-client';
-import { IServerResponse } from "@/types/common.types";
+import { IServerResponse } from '@/types/common.types';
 
 export const tasksCustomColumnsService = {
   getCustomColumns: async (projectId: string): Promise<IServerResponse<ITaskListColumn[]>> => {
@@ -17,7 +17,7 @@ export const tasksCustomColumnsService = {
     const response = await apiClient.put(`/api/v1/tasks/${taskId}/custom-column`, {
       column_key: columnKey,
       value: value,
-      project_id: projectId
+      project_id: projectId,
     });
     return response.data;
   },
@@ -35,7 +35,7 @@ export const tasksCustomColumnsService = {
   ): Promise<IServerResponse<any>> => {
     const response = await apiClient.post('/api/v1/custom-columns', {
       project_id: projectId,
-      ...columnData
+      ...columnData,
     });
     return response.data;
   },
@@ -63,7 +63,10 @@ export const tasksCustomColumnsService = {
     projectId: string,
     item: ITaskListColumn
   ): Promise<IServerResponse<ITaskListColumn>> => {
-    const response = await apiClient.put(`/api/v1/custom-columns/project/${projectId}/columns`, item);
+    const response = await apiClient.put(
+      `/api/v1/custom-columns/project/${projectId}/columns`,
+      item
+    );
     return response.data;
-  }
+  },
 };

worklenz-frontend/src/api/tasks/tasks.api.service.ts

@@ -131,14 +131,19 @@ export const tasksApiService = {
     return response.data;
   },
 
-  getTaskDependencyStatus: async (taskId: string, statusId: string): Promise<IServerResponse<{ can_continue: boolean }>> => {
+  getTaskDependencyStatus: async (
+    taskId: string,
+    statusId: string
+  ): Promise<IServerResponse<{ can_continue: boolean }>> => {
     const q = toQueryString({ taskId, statusId });
     const response = await apiClient.get(`${rootUrl}/dependency-status${q}`);
     return response.data;
   },
 
-  getTaskListV3: async (config: ITaskListConfigV2): Promise<IServerResponse<ITaskListV3Response>> => {
+  getTaskListV3: async (
-    const q = toQueryString({ ...config, include_empty: "true" });
+    config: ITaskListConfigV2
+  ): Promise<IServerResponse<ITaskListV3Response>> => {
+    const q = toQueryString({ ...config, include_empty: 'true' });
     const response = await apiClient.get(`${rootUrl}/list/v3/${config.id}${q}`);
     return response.data;
   },
@@ -148,20 +153,28 @@ export const tasksApiService = {
     return response.data;
   },
 
-  getTaskProgressStatus: async (projectId: string): Promise<IServerResponse<{
+  getTaskProgressStatus: async (
+    projectId: string
+  ): Promise<
+    IServerResponse<{
       projectId: string;
       totalTasks: number;
       completedTasks: number;
       avgProgress: number;
       lastUpdated: string;
       completionPercentage: number;
-  }>> => {
+    }>
+  > => {
     const response = await apiClient.get(`${rootUrl}/progress-status/${projectId}`);
     return response.data;
   },
 
   // API method to reorder tasks
-  reorderTasks: async (params: { taskIds: string[]; newOrder: number[]; projectId: string }): Promise<IServerResponse<{ done: boolean }>> => {
+  reorderTasks: async (params: {
+    taskIds: string[];
+    newOrder: number[];
+    projectId: string;
+  }): Promise<IServerResponse<{ done: boolean }>> => {
     const response = await apiClient.post(`${rootUrl}/reorder`, {
       task_ids: params.taskIds,
       new_order: params.newOrder,
@@ -171,7 +184,12 @@ export const tasksApiService = {
   },
 
   // API method to update task group (status, priority, phase)
-  updateTaskGroup: async (params: { taskId: string; groupType: 'status' | 'priority' | 'phase'; groupValue: string; projectId: string }): Promise<IServerResponse<{ done: boolean }>> => {
+  updateTaskGroup: async (params: {
+    taskId: string;
+    groupType: 'status' | 'priority' | 'phase';
+    groupValue: string;
+    projectId: string;
+  }): Promise<IServerResponse<{ done: boolean }>> => {
     const response = await apiClient.put(`${rootUrl}/${params.taskId}/group`, {
       group_type: params.groupType,
       group_value: params.groupValue,

worklenz-frontend/src/api/team-members/teamMembers.api.service.ts

@@ -44,7 +44,9 @@ export const teamMembersApiService = {
     return response.data;
   },
 
-  getAll: async (projectId: string | null = null): Promise<IServerResponse<ITeamMemberViewModel[]>> => {
+  getAll: async (
+    projectId: string | null = null
+  ): Promise<IServerResponse<ITeamMemberViewModel[]>> => {
     const params = new URLSearchParams(projectId ? { project: projectId } : {});
     const response = await apiClient.get<IServerResponse<ITeamMemberViewModel[]>>(
       `${rootUrl}/all${params.toString() ? '?' + params.toString() : ''}`

worklenz-frontend/src/api/teams/teams.api.service.ts

@@ -14,11 +14,8 @@ const rootUrl = `${API_BASE_URL}/teams`;
 
 export const teamsApiService = {
   getTeams: async (): Promise<IServerResponse<ITeamGetResponse[]>> => {
-    const response = await apiClient.get<IServerResponse<ITeamGetResponse[]>>(
+    const response = await apiClient.get<IServerResponse<ITeamGetResponse[]>>(`${rootUrl}`);
-      `${rootUrl}`
-    );
     return response.data;
-
   },
 
   setActiveTeam: async (teamId: string): Promise<IServerResponse<ITeamActivateResponse>> => {
@@ -29,23 +26,18 @@ export const teamsApiService = {
     return response.data;
   },
 
-
   createTeam: async (team: IOrganizationTeam): Promise<IServerResponse<ITeam>> => {
     const response = await apiClient.post<IServerResponse<ITeam>>(`${rootUrl}`, team);
     return response.data;
   },
 
-
   getInvitations: async (): Promise<IServerResponse<ITeamInvites[]>> => {
-    const response = await apiClient.get<IServerResponse<ITeamInvites[]>>(
+    const response = await apiClient.get<IServerResponse<ITeamInvites[]>>(`${rootUrl}/invites`);
-      `${rootUrl}/invites`
-    );
     return response.data;
   },
 
   acceptInvitation: async (body: IAcceptTeamInvite): Promise<IServerResponse<ITeamInvites>> => {
     const response = await apiClient.put<IServerResponse<ITeamInvites>>(`${rootUrl}`, body);
     return response.data;
-  }
+  },
 };
-

worklenz-frontend/src/app/performance-monitor.ts

@@ -49,7 +49,7 @@ class ReduxPerformanceMonitor {
 export const performanceMonitor = new ReduxPerformanceMonitor();
 
 // Redux middleware for performance monitoring
-export const performanceMiddleware: Middleware = (store) => (next) => (action: any) => {
+export const performanceMiddleware: Middleware = store => next => (action: any) => {
   const start = performance.now();
 
   const result = next(action);
@@ -110,7 +110,8 @@ export function analyzeReduxPerformance() {
     analysis.recommendations.push('Consider optimizing selectors with createSelector');
   }
 
-  if (analysis.largestStateSize > 1000000) { // 1MB
+  if (analysis.largestStateSize > 1000000) {
+    // 1MB
     analysis.recommendations.push('State size is large - consider normalizing data');
   }
 

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

@@ -62,10 +62,12 @@ export const AdminGuard = memo(({ children }: GuardProps) => {
   const guardResult = useMemo(() => {
     try {
       // Defensive checks to ensure authService and its methods exist
-      if (!authService || 
+      if (
+        !authService ||
         typeof authService.isAuthenticated !== 'function' ||
         typeof authService.isOwnerOrAdmin !== 'function' ||
-          typeof authService.getCurrentSession !== 'function') {
+        typeof authService.getCurrentSession !== 'function'
+      ) {
         return null; // Don't redirect if auth service is not ready
       }
 
@@ -103,9 +105,11 @@ export const LicenseExpiryGuard = memo(({ children }: GuardProps) => {
   const shouldRedirect = useMemo(() => {
     try {
       // Defensive checks to ensure authService and its methods exist
-      if (!authService || 
+      if (
+        !authService ||
         typeof authService.isAuthenticated !== 'function' ||
-          typeof authService.getCurrentSession !== 'function') {
+        typeof authService.getCurrentSession !== 'function'
+      ) {
         return false; // Don't redirect if auth service is not ready
       }
 
@@ -140,7 +144,10 @@ export const LicenseExpiryGuard = memo(({ children }: GuardProps) => {
         }
 
         // If not marked as expired but has trial_expire_date, do a date check
-        if (currentSession.subscription_type === ISUBSCRIPTION_TYPE.TRIAL && currentSession.trial_expire_date) {
+        if (
+          currentSession.subscription_type === ISUBSCRIPTION_TYPE.TRIAL &&
+          currentSession.trial_expire_date
+        ) {
           const today = new Date();
           const expiryDate = new Date(currentSession.trial_expire_date);
 
@@ -227,23 +234,27 @@ const wrapRoutes = (
 // Optimized static license expired component
 const StaticLicenseExpired = memo(() => {
   return (
-    <div style={{ 
+    <div
+      style={{
         marginTop: 65,
         minHeight: '90vh',
         backgroundColor: '#f5f5f5',
         padding: '20px',
         display: 'flex',
         justifyContent: 'center',
-      alignItems: 'center'
+        alignItems: 'center',
-    }}>
+      }}
-      <div style={{ 
+    >
+      <div
+        style={{
           background: 'white',
           padding: '30px',
           borderRadius: '8px',
           boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
           textAlign: 'center',
-        maxWidth: '600px'
+          maxWidth: '600px',
-      }}>
+        }}
+      >
         <h1 style={{ fontSize: '24px', color: '#faad14', marginBottom: '16px' }}>
           Your Worklenz trial has expired!
         </h1>
@@ -258,9 +269,9 @@ const StaticLicenseExpired = memo(() => {
             padding: '8px 16px',
             borderRadius: '4px',
             fontSize: '16px',
-            cursor: 'pointer'
+            cursor: 'pointer',
           }}
-          onClick={() => window.location.href = '/worklenz/admin-center/billing'}
+          onClick={() => (window.location.href = '/worklenz/admin-center/billing')}
         >
           Upgrade now
         </button>
@@ -272,11 +283,7 @@ const StaticLicenseExpired = memo(() => {
 StaticLicenseExpired.displayName = 'StaticLicenseExpired';
 
 // Create route arrays (moved outside of useMemo to avoid hook violations)
-const publicRoutes = [
+const publicRoutes = [...rootRoutes, ...authRoutes, notFoundRoute];
-  ...rootRoutes, 
-  ...authRoutes,
-  notFoundRoute
-];
 
 const protectedMainRoutes = wrapRoutes(mainRoutes, AuthGuard);
 const adminRoutes = wrapRoutes(reportingRoutes, AdminGuard);
@@ -305,7 +312,8 @@ const withLicenseExpiryCheck = (routes: RouteObject[]): RouteObject[] => {
 const licenseCheckedMainRoutes = withLicenseExpiryCheck(protectedMainRoutes);
 
 // Create optimized router with future flags for better performance
-const router = createBrowserRouter([
+const router = createBrowserRouter(
+  [
     {
       element: (
         <ErrorBoundary>
@@ -319,23 +327,20 @@ const router = createBrowserRouter([
           </Suspense>
         </ErrorBoundary>
       ),
-    children: [
+      children: [...licenseCheckedMainRoutes, ...adminRoutes, ...setupRoutes, licenseExpiredRoute],
-      ...licenseCheckedMainRoutes,
-      ...adminRoutes,
-      ...setupRoutes,
-      licenseExpiredRoute,
-    ],
     },
     ...publicRoutes,
-], {
+  ],
+  {
     // Enable React Router future features for better performance
     future: {
       v7_relativeSplatPath: true,
       v7_fetcherPersist: true,
       v7_normalizeFormMethod: true,
       v7_partialHydration: true,
-    v7_skipActionErrorRevalidation: true
+      v7_skipActionErrorRevalidation: true,
+    },
   }
-});
+);
 
 export default router;

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

@@ -11,7 +11,9 @@ import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallba
 const HomePage = lazy(() => import('@/pages/home/home-page'));
 const ProjectList = lazy(() => import('@/pages/projects/project-list'));
 const Schedule = lazy(() => import('@/pages/schedule/schedule'));
-const ProjectTemplateEditView = lazy(() => import('@/pages/settings/project-templates/projectTemplateEditView/ProjectTemplateEditView'));
+const ProjectTemplateEditView = lazy(
+  () => import('@/pages/settings/project-templates/projectTemplateEditView/ProjectTemplateEditView')
+);
 const LicenseExpired = lazy(() => import('@/pages/license-expired/license-expired'));
 const ProjectView = lazy(() => import('@/pages/projects/projectView/project-view'));
 const Unauthorized = lazy(() => import('@/pages/unauthorized/unauthorized'));
@@ -23,9 +25,11 @@ const AdminGuard = ({ children }: { children: React.ReactNode }) => {
 
   try {
     // Defensive checks to ensure authService and its methods exist
-    if (!authService || 
+    if (
+      !authService ||
       typeof authService.isAuthenticated !== 'function' ||
-        typeof authService.isOwnerOrAdmin !== 'function') {
+      typeof authService.isOwnerOrAdmin !== 'function'
+    ) {
       // If auth service is not ready, render children (don't block)
       return <>{children}</>;
     }
@@ -58,7 +62,7 @@ const mainRoutes: RouteObject[] = [
           <Suspense fallback={<SuspenseFallback />}>
             <HomePage />
           </Suspense>
-        )
+        ),
       },
       {
         path: 'projects',
@@ -66,7 +70,7 @@ const mainRoutes: RouteObject[] = [
           <Suspense fallback={<SuspenseFallback />}>
             <ProjectList />
           </Suspense>
-        )
+        ),
       },
       {
         path: 'schedule',
@@ -76,7 +80,7 @@ const mainRoutes: RouteObject[] = [
               <Schedule />
             </AdminGuard>
           </Suspense>
-        )
+        ),
       },
       {
         path: `projects/:projectId`,
@@ -84,7 +88,7 @@ const mainRoutes: RouteObject[] = [
           <Suspense fallback={<SuspenseFallback />}>
             <ProjectView />
           </Suspense>
-        )
+        ),
       },
       {
         path: `settings/project-templates/edit/:templateId/:templateName`,
@@ -100,7 +104,7 @@ const mainRoutes: RouteObject[] = [
           <Suspense fallback={<SuspenseFallback />}>
             <Unauthorized />
           </Suspense>
-        )
+        ),
       },
       ...settingsRoutes,
       ...adminCenterRoutes,
@@ -119,9 +123,9 @@ export const licenseExpiredRoute: RouteObject = {
         <Suspense fallback={<SuspenseFallback />}>
           <LicenseExpired />
         </Suspense>
-      )
+      ),
-    }
+    },
-  ]
+  ],
 };
 
 export default mainRoutes;

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

@@ -4,7 +4,13 @@ import SettingsLayout from '@/layouts/SettingsLayout';
 import { settingsItems } from '@/lib/settings/settings-constants';
 import { useAuthService } from '@/hooks/useAuth';
 
-const SettingsGuard = ({ children, adminRequired }: { children: React.ReactNode; adminRequired: boolean }) => {
+const SettingsGuard = ({
+  children,
+  adminRequired,
+}: {
+  children: React.ReactNode;
+  adminRequired: boolean;
+}) => {
   const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
 
   if (adminRequired && !isOwnerOrAdmin) {
@@ -20,11 +26,7 @@ const settingsRoutes: RouteObject[] = [
     element: <SettingsLayout />,
     children: settingsItems.map(item => ({
       path: item.endpoint,
-      element: (
+      element: <SettingsGuard adminRequired={!!item.adminOnly}>{item.element}</SettingsGuard>,
-        <SettingsGuard adminRequired={!!item.adminOnly}>
-          {item.element}
-        </SettingsGuard>
-      ),
     })),
   },
 ];

worklenz-frontend/src/app/selectors.ts

@@ -7,10 +7,7 @@ import { RootState } from './store';
 // Auth selectors
 export const selectAuth = (state: RootState) => state.auth;
 export const selectUser = (state: RootState) => state.userReducer;
-export const selectIsAuthenticated = createSelector(
+export const selectIsAuthenticated = createSelector([selectAuth], auth => !!auth.user);
-  [selectAuth],
-  (auth) => !!auth.user
-);
 
 // Project selectors
 export const selectProjects = (state: RootState) => state.projectsReducer;
@@ -69,13 +66,10 @@ export const selectGroupByFilter = (state: RootState) => state.groupByFilterDrop
 // Memoized computed selectors for common use cases
 export const selectHasActiveProject = createSelector(
   [selectCurrentProject],
-  (project) => !!project && Object.keys(project).length > 0
+  project => !!project && Object.keys(project).length > 0
 );
 
-export const selectIsLoading = createSelector(
+export const selectIsLoading = createSelector([selectTasks, selectProjects], (tasks, projects) => {
-  [selectTasks, selectProjects],
-  (tasks, projects) => {
   // Check if any major feature is loading
   return (tasks as any)?.loading || (projects as any)?.loading;
-  }
+});
-); 

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -25,7 +25,7 @@ interface AssigneeSelectorProps {
 const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   task,
   groupId = null,
-  isDarkMode = false 
+  isDarkMode = false,
 }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
@@ -63,8 +63,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
   // Close dropdown when clicking outside and handle scroll
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
+      if (
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
@@ -74,7 +78,9 @@ 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 && 
+          const isVisible =
+            rect.top >= 0 &&
+            rect.left >= 0 &&
             rect.bottom <= window.innerHeight &&
             rect.right <= window.innerWidth;
 
@@ -161,10 +167,8 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
     setTeamMembers(prev => ({
       ...prev,
       data: (prev.data || []).map(member =>
-        member.id === memberId 
+        member.id === memberId ? { ...member, selected: checked } : member
-          ? { ...member, selected: checked }
+      ),
-          : member
-      )
     }));
 
     const body = {
@@ -178,12 +182,9 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
 
     // Emit socket event - the socket handler will update Redux with proper types
     socket?.emit(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), JSON.stringify(body));
-    socket?.once(
+    socket?.once(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), (data: any) => {
-      SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(),
-      (data: any) => {
       dispatch(updateEnhancedKanbanTaskAssignees(data));
-      }
+    });
-    );
 
     // Remove from pending changes after a short delay (optimistic)
     setTimeout(() => {
@@ -198,7 +199,8 @@ 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 
+    const assignees =
+      optimisticAssignees.length > 0
         ? optimisticAssignees
         : task?.assignees?.map(assignee => assignee.team_member_id) || [];
     return assignees.includes(memberId);
@@ -217,7 +219,8 @@ 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 
+          ${
+            isOpen
               ? isDarkMode
                 ? 'border-blue-500 bg-blue-900/20 text-blue-400'
                 : 'border-blue-500 bg-blue-50 text-blue-600'
@@ -230,16 +233,14 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
         <PlusOutlined className="text-xs" />
       </button>
 
-      {isOpen && createPortal(
+      {isOpen &&
+        createPortal(
           <div
             ref={dropdownRef}
             onClick={e => e.stopPropagation()}
             className={`
             fixed z-9999 w-72 rounded-md shadow-lg border
-            ${isDarkMode 
+            ${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}
-              ? 'bg-gray-800 border-gray-600' 
-              : 'bg-white border-gray-200'
-            }
           `}
             style={{
               top: dropdownPosition.top,
@@ -252,11 +253,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                 ref={searchInputRef}
                 type="text"
                 value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={e => setSearchQuery(e.target.value)}
                 placeholder="Search members..."
                 className={`
                 w-full px-2 py-1 text-xs rounded border
-                ${isDarkMode
+                ${
+                  isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
                     : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
                 }
@@ -268,12 +270,13 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
             {/* Members List */}
             <div className="max-h-48 overflow-y-auto">
               {filteredMembers && filteredMembers.length > 0 ? (
-              filteredMembers.map((member) => (
+                filteredMembers.map(member => (
                   <div
                     key={member.id}
                     className={`
                     flex items-center gap-2 p-2 cursor-pointer transition-colors
-                    ${member.pending_invitation 
+                    ${
+                      member.pending_invitation
                         ? 'opacity-50 cursor-not-allowed'
                         : isDarkMode
                           ? 'hover:bg-gray-700'
@@ -295,18 +298,24 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                       <span onClick={e => e.stopPropagation()}>
                         <Checkbox
                           checked={checkMemberSelected(member.id || '')}
-                        onChange={(checked) => handleMemberToggle(member.id || '', checked)}
+                          onChange={checked => handleMemberToggle(member.id || '', checked)}
-                        disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
+                          disabled={
+                            member.pending_invitation || pendingChanges.has(member.id || '')
+                          }
                           isDarkMode={isDarkMode}
                         />
                       </span>
                       {pendingChanges.has(member.id || '') && (
-                      <div className={`absolute inset-0 flex items-center justify-center ${
+                        <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 ${
+                        >
+                          <div
+                            className={`w-3 h-3 border border-t-transparent rounded-full animate-spin ${
                               isDarkMode ? 'border-blue-400' : 'border-blue-600'
-                        }`} />
+                            }`}
+                          />
                         </div>
                       )}
                     </div>
@@ -319,10 +328,14 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                     />
 
                     <div className="flex-1 min-w-0">
-                    <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
+                      <div
+                        className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
+                      >
                         {member.name}
                       </div>
-                    <div className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                      <div
+                        className={`text-xs truncate ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
+                      >
                         {member.email}
                         {member.pending_invitation && (
                           <span className="text-red-400 ml-1">(Pending)</span>
@@ -332,7 +345,9 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   </div>
                 ))
               ) : (
-              <div className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                <div
+                  className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
+                >
                   <div className="text-xs">No members found</div>
                 </div>
               )}
@@ -344,10 +359,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                 className={`
                 w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
                 transition-colors
-                ${isDarkMode
+                ${isDarkMode ? 'text-blue-400 hover:bg-gray-700' : 'text-blue-600 hover:bg-blue-50'}
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
               `}
                 onClick={handleInviteProjectMemberDrawer}
               >

worklenz-frontend/src/components/Avatar.tsx

@@ -19,7 +19,7 @@ const Avatar: React.FC<AvatarProps> = ({
   src,
   backgroundColor,
   onClick,
-  style = {}
+  style = {},
 }) => {
   // Handle both numeric and string sizes
   const getSize = () => {
@@ -30,7 +30,7 @@ const Avatar: React.FC<AvatarProps> = ({
     const sizeMap = {
       small: { width: 24, height: 24, fontSize: '10px' },
       default: { width: 32, height: 32, fontSize: '14px' },
-      large: { width: 48, height: 48, fontSize: '18px' }
+      large: { width: 48, height: 48, fontSize: '18px' },
     };
 
     return sizeMap[size];
@@ -39,13 +39,29 @@ const Avatar: React.FC<AvatarProps> = ({
   const sizeStyle = getSize();
 
   const lightColors = [
-    '#f56565', '#4299e1', '#48bb78', '#ed8936', '#9f7aea', 
+    '#f56565',
-    '#ed64a6', '#667eea', '#38b2ac', '#f6ad55', '#4fd1c7'
+    '#4299e1',
+    '#48bb78',
+    '#ed8936',
+    '#9f7aea',
+    '#ed64a6',
+    '#667eea',
+    '#38b2ac',
+    '#f6ad55',
+    '#4fd1c7',
   ];
 
   const darkColors = [
-    '#e53e3e', '#3182ce', '#38a169', '#dd6b20', '#805ad5', 
+    '#e53e3e',
-    '#d53f8c', '#5a67d8', '#319795', '#d69e2e', '#319795'
+    '#3182ce',
+    '#38a169',
+    '#dd6b20',
+    '#805ad5',
+    '#d53f8c',
+    '#5a67d8',
+    '#319795',
+    '#d69e2e',
+    '#319795',
   ];
 
   const colors = isDarkMode ? darkColors : lightColors;
@@ -60,7 +76,7 @@ const Avatar: React.FC<AvatarProps> = ({
   const avatarStyle = {
     ...sizeStyle,
     backgroundColor: defaultBgColor,
-    ...style
+    ...style,
   };
 
   if (src) {

worklenz-frontend/src/components/AvatarGroup.tsx

@@ -26,16 +26,21 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
   size = 28,
   isDarkMode = false,
   className = '',
-  onClick
+  onClick,
 }) => {
-  const stopPropagation = useCallback((e: React.MouseEvent) => {
+  const stopPropagation = useCallback(
+    (e: React.MouseEvent) => {
       e.stopPropagation();
       onClick?.(e);
-  }, [onClick]);
+    },
+    [onClick]
+  );
 
-  const renderAvatar = useCallback((member: Member, index: number) => {
+  const renderAvatar = useCallback(
+    (member: Member, index: number) => {
       const memberName = member.end && member.names ? member.names.join(', ') : member.name || '';
-    const displayName = member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase();
+      const displayName =
+        member.end && member.names ? member.name : member.name?.charAt(0).toUpperCase();
 
       return (
         <Tooltip
@@ -55,7 +60,9 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
           />
         </Tooltip>
       );
-  }, [stopPropagation, size, isDarkMode]);
+    },
+    [stopPropagation, size, isDarkMode]
+  );
 
   const visibleMembers = useMemo(() => {
     return maxCount ? members.slice(0, maxCount) : members;
@@ -77,7 +84,7 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
     const sizeMap = {
       small: { width: 24, height: 24, fontSize: '10px' },
       default: { width: 32, height: 32, fontSize: '14px' },
-      large: { width: 48, height: 48, fontSize: '18px' }
+      large: { width: 48, height: 48, fontSize: '18px' },
     };
 
     return sizeMap[size];
@@ -87,15 +94,10 @@ const AvatarGroup: React.FC<AvatarGroupProps> = ({
     <div onClick={stopPropagation} className={`flex -space-x-1 ${className}`}>
       {avatarElements}
       {remainingCount > 0 && (
-        <Tooltip 
+        <Tooltip title={`${remainingCount} more`} isDarkMode={isDarkMode}>
-          title={`${remainingCount} more`} 
-          isDarkMode={isDarkMode}
-        >
           <div
             className={`rounded-full flex items-center justify-center text-white font-medium shadow-sm border-2 cursor-pointer ${
-              isDarkMode 
+              isDarkMode ? 'bg-gray-600 border-gray-700' : 'bg-gray-400 border-white'
-                ? 'bg-gray-600 border-gray-700' 
-                : 'bg-gray-400 border-white'
             }`}
             style={getSizeStyle()}
             onClick={stopPropagation}

worklenz-frontend/src/components/Button.tsx

@@ -38,13 +38,13 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
       : 'bg-blue-500 text-white hover:bg-blue-600',
     danger: isDarkMode
       ? 'bg-red-600 text-white hover:bg-red-700'
-      : 'bg-red-500 text-white hover:bg-red-600'
+      : 'bg-red-500 text-white hover:bg-red-600',
   };
 
   const sizeClasses = {
     small: 'px-2 py-1 text-xs rounded-sm',
     default: 'px-3 py-2 text-sm rounded-md',
-    large: 'px-4 py-3 text-base rounded-lg'
+    large: 'px-4 py-3 text-base rounded-lg',
   };
 
   return (
@@ -55,7 +55,7 @@ const Button: React.FC<ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElemen
       className={`${baseClasses} ${variantClasses[variant]} ${sizeClasses[size]} ${className}`}
       {...props}
     >
-      {icon && <span className={children ? "mr-1" : ""}>{icon}</span>}
+      {icon && <span className={children ? 'mr-1' : ''}>{icon}</span>}
       {children}
     </button>
   );

worklenz-frontend/src/components/Checkbox.tsx

@@ -15,30 +15,42 @@ const Checkbox: React.FC<CheckboxProps> = ({
   isDarkMode = false,
   className = '',
   disabled = false,
-  indeterminate = false
+  indeterminate = false,
 }) => {
   return (
-    <label className={`inline-flex items-center cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}>
+    <label
+      className={`inline-flex items-center cursor-pointer ${disabled ? 'opacity-50 cursor-not-allowed' : ''} ${className}`}
+    >
       <input
         type="checkbox"
         checked={checked}
-        onChange={(e) => !disabled && onChange(e.target.checked)}
+        onChange={e => !disabled && onChange(e.target.checked)}
         disabled={disabled}
         className="sr-only"
       />
-      <div className={`w-4 h-4 border-2 rounded transition-all duration-200 flex items-center justify-center ${
+      <div
+        className={`w-4 h-4 border-2 rounded transition-all duration-200 flex items-center justify-center ${
           checked || indeterminate
             ? `${isDarkMode ? 'bg-blue-600 border-blue-600' : 'bg-blue-500 border-blue-500'}`
             : `${isDarkMode ? 'bg-gray-800 border-gray-600 hover:border-gray-500' : 'bg-white border-gray-300 hover:border-gray-400'}`
-      } ${disabled ? 'cursor-not-allowed' : ''}`}>
+        } ${disabled ? 'cursor-not-allowed' : ''}`}
+      >
         {checked && !indeterminate && (
           <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
+            <path
+              fillRule="evenodd"
+              d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z"
+              clipRule="evenodd"
+            />
           </svg>
         )}
         {indeterminate && (
           <svg className="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
-            <path fillRule="evenodd" d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clipRule="evenodd" />
+            <path
+              fillRule="evenodd"
+              d="M3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z"
+              clipRule="evenodd"
+            />
           </svg>
         )}
       </div>

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -7,13 +7,9 @@ interface CustomColordLabelProps {
   isDarkMode?: boolean;
 }
 
-const CustomColordLabel: React.FC<CustomColordLabelProps> = ({ 
+const CustomColordLabel: React.FC<CustomColordLabelProps> = ({ label, isDarkMode = false }) => {
-  label, 
+  const truncatedName =
-  isDarkMode = false 
+    label.name && label.name.length > 10 ? `${label.name.substring(0, 10)}...` : label.name;
-}) => {
-  const truncatedName = label.name && label.name.length > 10 
-    ? `${label.name.substring(0, 10)}...` 
-    : label.name;
 
   return (
     <Tooltip title={label.name}>

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -10,7 +10,7 @@ interface CustomNumberLabelProps {
 const CustomNumberLabel: React.FC<CustomNumberLabelProps> = ({
   labelList,
   namesString,
-  isDarkMode = false 
+  isDarkMode = false,
 }) => {
   return (
     <Tooltip title={labelList.join(', ')}>

worklenz-frontend/src/components/ErrorBoundary.tsx

@@ -27,7 +27,7 @@ class ErrorBoundary extends React.Component<Props, State> {
     logger.error('Error caught by ErrorBoundary:', {
       error: error.message,
       stack: error.stack,
-      componentStack: errorInfo.componentStack
+      componentStack: errorInfo.componentStack,
     });
     console.error('Error caught by ErrorBoundary:', error);
   }

worklenz-frontend/src/components/LabelsSelector.tsx

@@ -15,10 +15,7 @@ interface LabelsSelectorProps {
   isDarkMode?: boolean;
 }
 
-const LabelsSelector: React.FC<LabelsSelectorProps> = ({ 
+const LabelsSelector: React.FC<LabelsSelectorProps> = ({ task, isDarkMode = false }) => {
-  task, 
-  isDarkMode = false 
-}) => {
   const [isOpen, setIsOpen] = useState(false);
   const [searchQuery, setSearchQuery] = useState('');
   const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
@@ -31,9 +28,11 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
   const { socket } = useSocket();
 
   const filteredLabels = useMemo(() => {
-    return (labels as ITaskLabel[])?.filter(label =>
+    return (
+      (labels as ITaskLabel[])?.filter(label =>
         label.name?.toLowerCase().includes(searchQuery.toLowerCase())
-    ) || [];
+      ) || []
+    );
   }, [labels, searchQuery]);
 
   // Update dropdown position
@@ -50,8 +49,12 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
   // Close dropdown when clicking outside and handle scroll
   useEffect(() => {
     const handleClickOutside = (event: MouseEvent) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(event.target as Node) &&
+      if (
-          buttonRef.current && !buttonRef.current.contains(event.target as Node)) {
+        dropdownRef.current &&
+        !dropdownRef.current.contains(event.target as Node) &&
+        buttonRef.current &&
+        !buttonRef.current.contains(event.target as Node)
+      ) {
         setIsOpen(false);
       }
     };
@@ -61,7 +64,9 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
         // 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 && 
+          const isVisible =
+            rect.top >= 0 &&
+            rect.left >= 0 &&
             rect.bottom <= window.innerHeight &&
             rect.right <= window.innerWidth;
 
@@ -114,8 +119,6 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
     }
   };
 
-
-
   const handleLabelToggle = (label: ITaskLabel) => {
     const labelData = {
       task_id: task.id,
@@ -163,7 +166,8 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
         className={`
           w-5 h-5 rounded border border-dashed flex items-center justify-center
           transition-colors duration-200
-          ${isOpen 
+          ${
+            isOpen
               ? isDarkMode
                 ? 'border-blue-500 bg-blue-900/20 text-blue-400'
                 : 'border-blue-500 bg-blue-50 text-blue-600'
@@ -176,15 +180,13 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
         <PlusOutlined className="text-xs" />
       </button>
 
-      {isOpen && createPortal(
+      {isOpen &&
+        createPortal(
           <div
             ref={dropdownRef}
             className={`
             fixed z-9999 w-72 rounded-md shadow-lg border
-            ${isDarkMode 
+            ${isDarkMode ? 'bg-gray-800 border-gray-600' : 'bg-white border-gray-200'}
-              ? 'bg-gray-800 border-gray-600' 
-              : 'bg-white border-gray-200'
-            }
           `}
             style={{
               top: dropdownPosition.top,
@@ -197,12 +199,13 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
                 ref={searchInputRef}
                 type="text"
                 value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={e => setSearchQuery(e.target.value)}
                 onKeyDown={handleKeyDown}
                 placeholder="Search labels..."
                 className={`
                 w-full px-2 py-1 text-xs rounded border
-                ${isDarkMode
+                ${
+                  isDarkMode
                     ? 'bg-gray-700 border-gray-600 text-gray-100 placeholder-gray-400 focus:border-blue-500'
                     : 'bg-white border-gray-300 text-gray-900 placeholder-gray-500 focus:border-blue-500'
                 }
@@ -214,7 +217,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
             {/* Labels List */}
             <div className="max-h-48 overflow-y-auto">
               {filteredLabels && filteredLabels.length > 0 ? (
-              filteredLabels.map((label) => (
+                filteredLabels.map(label => (
                   <div
                     key={label.id}
                     className={`
@@ -235,21 +238,26 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
                     />
 
                     <div className="flex-1 min-w-0">
-                    <div className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}>
+                      <div
+                        className={`text-xs font-medium truncate ${isDarkMode ? 'text-gray-100' : 'text-gray-900'}`}
+                      >
                         {label.name}
                       </div>
                     </div>
                   </div>
                 ))
               ) : (
-              <div className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}>
+                <div
+                  className={`p-4 text-center ${isDarkMode ? 'text-gray-400' : 'text-gray-500'}`}
+                >
                   <div className="text-xs">No labels found</div>
                   {searchQuery.trim() && (
                     <button
                       onClick={handleCreateLabel}
                       className={`
                       mt-2 px-3 py-1 text-xs rounded border transition-colors
-                      ${isDarkMode
+                      ${
+                        isDarkMode
                           ? 'border-gray-600 text-gray-300 hover:bg-gray-700'
                           : 'border-gray-300 text-gray-600 hover:bg-gray-50'
                       }
@@ -268,10 +276,7 @@ const LabelsSelector: React.FC<LabelsSelectorProps> = ({
                 className={`
                 w-full flex items-center justify-center gap-1 px-2 py-1 text-xs rounded
                 transition-colors
-                ${isDarkMode
+                ${isDarkMode ? 'text-blue-400 hover:bg-gray-700' : 'text-blue-600 hover:bg-blue-50'}
-                  ? 'text-blue-400 hover:bg-gray-700'
-                  : 'text-blue-600 hover:bg-blue-50'
-                }
               `}
                 onClick={() => {
                   // TODO: Implement manage labels functionality

worklenz-frontend/src/components/Progress.tsx

@@ -19,7 +19,7 @@ const Progress: React.FC<ProgressProps> = ({
   strokeWidth = 2,
   showInfo = true,
   isDarkMode = false,
-  className = ''
+  className = '',
 }) => {
   // Ensure percent is between 0 and 100
   const normalizedPercent = Math.min(Math.max(percent, 0), 100);
@@ -55,7 +55,9 @@ const Progress: React.FC<ProgressProps> = ({
           />
         </svg>
         {showInfo && (
-          <span className={`absolute text-xs font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}>
+          <span
+            className={`absolute text-xs font-medium ${isDarkMode ? 'text-gray-300' : 'text-gray-700'}`}
+          >
             {normalizedPercent}%
           </span>
         )}
@@ -64,12 +66,14 @@ const Progress: React.FC<ProgressProps> = ({
   }
 
   return (
-    <div className={`w-full rounded-full h-2 ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'} ${className}`}>
+    <div
+      className={`w-full rounded-full h-2 ${isDarkMode ? 'bg-gray-600' : 'bg-gray-200'} ${className}`}
+    >
       <div
         className="h-2 rounded-full transition-all duration-300"
         style={{
           width: `${normalizedPercent}%`,
-          backgroundColor: normalizedPercent === 100 ? '#52c41a' : strokeColor 
+          backgroundColor: normalizedPercent === 100 ? '#52c41a' : strokeColor,
         }}
       />
       {showInfo && (

worklenz-frontend/src/components/Tag.tsx

@@ -17,11 +17,11 @@ const Tag: React.FC<TagProps> = ({
   className = '',
   size = 'default',
   variant = 'default',
-  isDarkMode = false
+  isDarkMode = false,
 }) => {
   const sizeClasses = {
     small: 'px-1 py-0.5 text-xs',
-    default: 'px-2 py-1 text-xs'
+    default: 'px-2 py-1 text-xs',
   };
 
   const baseClasses = `inline-flex items-center font-medium rounded-sm ${sizeClasses[size]}`;
@@ -33,7 +33,7 @@ const Tag: React.FC<TagProps> = ({
         style={{
           borderColor: backgroundColor,
           color: backgroundColor,
-          backgroundColor: 'transparent'
+          backgroundColor: 'transparent',
         }}
       >
         {children}
@@ -42,10 +42,7 @@ const Tag: React.FC<TagProps> = ({
   }
 
   return (
-    <span
+    <span className={`${baseClasses} ${className}`} style={{ backgroundColor, color }}>
-      className={`${baseClasses} ${className}`}
-      style={{ backgroundColor, color }}
-    >
       {children}
     </span>
   );

worklenz-frontend/src/components/Tooltip.tsx

@@ -13,19 +13,21 @@ const Tooltip: React.FC<TooltipProps> = ({
   children,
   isDarkMode = false,
   placement = 'top',
-  className = ''
+  className = '',
 }) => {
   const placementClasses = {
     top: 'bottom-full left-1/2 transform -translate-x-1/2 mb-2',
     bottom: 'top-full left-1/2 transform -translate-x-1/2 mt-2',
     left: 'right-full top-1/2 transform -translate-y-1/2 mr-2',
-    right: 'left-full top-1/2 transform -translate-y-1/2 ml-2'
+    right: 'left-full top-1/2 transform -translate-y-1/2 ml-2',
   };
 
   return (
     <div className={`relative group ${className}`}>
       {children}
-      <div className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}>
+      <div
+        className={`absolute ${placementClasses[placement]} px-2 py-1 text-xs text-white ${isDarkMode ? 'bg-gray-700' : 'bg-gray-900'} rounded-sm shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-200 z-50 pointer-events-none min-w-max`}
+      >
         {title}
       </div>
     </div>

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

@@ -39,7 +39,9 @@ export const TasksStep: React.FC<Props> = ({ onEnter, styles, isDarkMode }) => {
 
   const updateTask = (id: number, value: string) => {
     const sanitizedValue = sanitizeInput(value);
-    dispatch(setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task))));
+    dispatch(
+      setTasks(tasks.map(task => (task.id === id ? { ...task, value: sanitizedValue } : task)))
+    );
   };
 
   const handleKeyPress = (e: React.KeyboardEvent<HTMLInputElement>) => {

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

@@ -18,7 +18,9 @@ const AccountStorage = ({ themeMode }: IAccountStorageProps) => {
   const dispatch = useAppDispatch();
   const [subscriptionType, setSubscriptionType] = useState<string>(SUBSCRIPTION_STATUS.TRIALING);
 
-  const { loadingBillingInfo, billingInfo, storageInfo } = useAppSelector(state => state.adminCenterReducer);
+  const { loadingBillingInfo, billingInfo, storageInfo } = useAppSelector(
+    state => state.adminCenterReducer
+  );
 
   const formatBytes = useMemo(
     () =>

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

@@ -10,7 +10,10 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { useMediaQuery } from 'react-responsive';
 import { useTranslation } from 'react-i18next';
 
-import { fetchBillingInfo, fetchFreePlanSettings } from '@/features/admin-center/admin-center.slice';
+import {
+  fetchBillingInfo,
+  fetchFreePlanSettings,
+} from '@/features/admin-center/admin-center.slice';
 
 import CurrentPlanDetails from './current-plan-details/current-plan-details';
 import AccountStorage from './account-storage/account-storage';
@@ -68,10 +71,7 @@ const CurrentBill: React.FC = () => {
       </div>
 
       <div style={{ marginTop: '1.5rem' }}>
-        <Card
+        <Card title={<span style={titleStyle}>{t('invoices')}</span>} style={{ marginTop: '16px' }}>
-          title={<span style={titleStyle}>{t('invoices')}</span>}
-          style={{ marginTop: '16px' }}
-        >
           <InvoicesTable />
         </Card>
       </div>
@@ -92,7 +92,8 @@ const CurrentBill: React.FC = () => {
       ) : (
         renderMobileView()
       )}
-      {currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE && renderChargesAndInvoices()}
+      {currentSession?.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
+        renderChargesAndInvoices()}
     </div>
   );
 };

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

@@ -7,7 +7,20 @@ import {
 } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 import logger from '@/utils/errorLogger';
-import { Button, Card, Flex, Modal, Space, Tooltip, Typography, Statistic, Select, Form, Row, Col } from 'antd/es';
+import {
+  Button,
+  Card,
+  Flex,
+  Modal,
+  Space,
+  Tooltip,
+  Typography,
+  Statistic,
+  Select,
+  Form,
+  Row,
+  Col,
+} from 'antd/es';
 import RedeemCodeDrawer from '../drawers/redeem-code-drawer/redeem-code-drawer';
 import {
   fetchBillingInfo,
@@ -44,8 +57,9 @@ const CurrentPlanDetails = () => {
   const browserTimeZone = Intl.DateTimeFormat().resolvedOptions().timeZone;
 
   type SeatOption = { label: string; value: number | string };
-  const seatCountOptions: SeatOption[] = [1, 2, 3, 4, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90]
+  const seatCountOptions: SeatOption[] = [
-    .map(value => ({ label: value.toString(), value }));
+    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') => {
@@ -127,8 +141,10 @@ const CurrentPlanDetails = () => {
 
   const shouldShowAddSeats = () => {
     if (!billingInfo) return false;
-    return billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE && 
+    return (
-           billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE;
+      billingInfo.subscription_type === ISUBSCRIPTION_TYPE.PADDLE &&
+      billingInfo.status === SUBSCRIPTION_STATUS.ACTIVE
+    );
   };
 
   const renderExtra = () => {
@@ -232,12 +248,11 @@ const CurrentPlanDetails = () => {
           <Typography.Text>
             {isExpired
               ? t('trialExpired', {
-                  trial_expire_string: getExpirationMessage(trialExpireDate)
+                  trial_expire_string: getExpirationMessage(trialExpireDate),
                 })
               : t('trialInProgress', {
-                  trial_expire_string: getExpirationMessage(trialExpireDate)
+                  trial_expire_string: getExpirationMessage(trialExpireDate),
-                })
+                })}
-            }
           </Typography.Text>
         </Tooltip>
       </Flex>
@@ -268,7 +283,6 @@ const CurrentPlanDetails = () => {
             {billingInfo?.billing_type === 'year'
               ? billingInfo.unit_price_per_month
               : billingInfo?.unit_price}
-
             &nbsp;{t('perMonthPerUser')}
           </Typography.Text>
         </Flex>
@@ -308,16 +322,24 @@ const CurrentPlanDetails = () => {
   };
 
   const renderCreditSubscriptionInfo = () => {
-    return <Flex vertical>
+    return (
+      <Flex vertical>
         <Typography.Text strong>{t('creditPlan', 'Credit Plan')}</Typography.Text>
       </Flex>
+    );
   };
 
   const renderCustomSubscriptionInfo = () => {
-    return <Flex vertical>
+    return (
+      <Flex vertical>
         <Typography.Text strong>{t('customPlan', 'Custom Plan')}</Typography.Text>
-      <Typography.Text>{t('planValidTill','Your plan is valid till {{date}}',{date: billingInfo?.valid_till_date})}</Typography.Text>
+        <Typography.Text>
+          {t('planValidTill', 'Your plan is valid till {{date}}', {
+            date: billingInfo?.valid_till_date,
+          })}
+        </Typography.Text>
       </Flex>
+    );
   };
 
   return (
@@ -326,7 +348,6 @@ const CurrentPlanDetails = () => {
       title={
         <Typography.Text
           style={{
-
             color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
             fontWeight: 500,
             fontSize: '16px',
@@ -340,12 +361,16 @@ const CurrentPlanDetails = () => {
     >
       <Flex vertical>
         <div style={{ marginBottom: '14px' }}>
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.LIFE_TIME_DEAL && renderLtdDetails()}
+          {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.PADDLE &&
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT && renderCreditSubscriptionInfo()}
+            renderPaddleSubscriptionInfo()}
-          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM && renderCustomSubscriptionInfo()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CREDIT &&
+            renderCreditSubscriptionInfo()}
+          {billingInfo?.subscription_type === ISUBSCRIPTION_TYPE.CUSTOM &&
+            renderCustomSubscriptionInfo()}
         </div>
 
         {shouldShowRedeemButton() && (
@@ -380,12 +405,16 @@ const CurrentPlanDetails = () => {
           centered
         >
           <Flex vertical gap="middle" style={{ marginTop: '8px' }}>
-            <Typography.Paragraph style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}>
+            <Typography.Paragraph
-              {t('purchaseSeatsText','To continue, you\'ll need to purchase additional seats.')}
+              style={{ fontSize: '16px', margin: '0 0 16px 0', fontWeight: 500 }}
+            >
+              {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})}
+              {t('currentSeatsText', 'You currently have {{seats}} seats available.', {
+                seats: billingInfo?.total_seats,
+              })}
             </Typography.Paragraph>
 
             <Typography.Paragraph style={{ margin: '0 0 24px 0' }}>
@@ -413,16 +442,13 @@ const CurrentPlanDetails = () => {
                     minWidth: '100px',
                     backgroundColor: '#1890ff',
                     borderColor: '#1890ff',
-                    borderRadius: '2px'
+                    borderRadius: '2px',
                   }}
                 >
                   {t('purchase', 'Purchase')}
                 </Button>
               ) : (
-                <Button 
+                <Button type="primary" size="middle">
-                  type="primary" 
-                  size="middle"
-                >
                   {t('contactSales', 'Contact sales')}
                 </Button>
               )}

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

@@ -1,5 +1,17 @@
 import { useEffect, useState } from 'react';
-import { Button, Card, Col, Flex, Form, Row, Select, Tag, Tooltip, Typography, message } from 'antd/es';
+import {
+  Button,
+  Card,
+  Col,
+  Flex,
+  Form,
+  Row,
+  Select,
+  Tag,
+  Tooltip,
+  Typography,
+  message,
+} from 'antd/es';
 import { useTranslation } from 'react-i18next';
 
 import { adminCenterApiService } from '@/api/admin-center/admin-center.api.service';
@@ -264,7 +276,6 @@ const UpgradePlans = () => {
   const isSelected = (cardIndex: IPaddlePlans) =>
     selectedPlan === cardIndex ? { border: '2px solid #1890ff' } : {};
 
-
   const cardStyles = {
     title: {
       color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
@@ -363,7 +374,6 @@ const UpgradePlans = () => {
               title={<span style={cardStyles.title}>{t('freePlan')}</span>}
               onClick={() => setSelectedCard(paddlePlans.FREE)}
             >
-
               <div style={cardStyles.priceContainer}>
                 <Flex justify="space-between" align="center">
                   <Typography.Title level={1}>$ 0.00</Typography.Title>
@@ -389,7 +399,6 @@ const UpgradePlans = () => {
             <Card
               style={{ ...isSelected(paddlePlans.ANNUAL), height: '100%' }}
               hoverable
-
               title={
                 <span style={cardStyles.title}>
                   {t('annualPlan')}{' '}
@@ -401,7 +410,6 @@ const UpgradePlans = () => {
               onClick={() => setSelectedCard(paddlePlans.ANNUAL)}
             >
               <div style={cardStyles.priceContainer}>
-
                 <Flex justify="space-between" align="center">
                   <Typography.Title level={1}>$ {plans.annual_price}</Typography.Title>
                   <Typography.Text>seat / month</Typography.Text>
@@ -442,7 +450,6 @@ const UpgradePlans = () => {
               hoverable
               title={<span style={cardStyles.title}>{t('monthlyPlan')}</span>}
               onClick={() => setSelectedCard(paddlePlans.MONTHLY)}
-
             >
               <div style={cardStyles.priceContainer}>
                 <Flex justify="space-between" align="center">
@@ -501,7 +508,9 @@ const UpgradePlans = () => {
             onClick={continueWithPaddlePlan}
             disabled={billingInfo?.plan_id === plans.annual_plan_id}
           >
-            {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE ? t('changeToPlan', {plan: t('annualPlan')}) : t('continueWith', {plan: t('annualPlan')})}
+            {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
+              ? t('changeToPlan', { plan: t('annualPlan') })
+              : t('continueWith', { plan: t('annualPlan') })}
           </Button>
         )}
         {selectedPlan === paddlePlans.MONTHLY && (
@@ -512,7 +521,9 @@ const UpgradePlans = () => {
             onClick={continueWithPaddlePlan}
             disabled={billingInfo?.plan_id === plans.monthly_plan_id}
           >
-            {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE ? t('changeToPlan', {plan: t('monthlyPlan')}) : t('continueWith', {plan: t('monthlyPlan')})}
+            {billingInfo?.status === SUBSCRIPTION_STATUS.ACTIVE
+              ? t('changeToPlan', { plan: t('monthlyPlan') })
+              : t('continueWith', { plan: t('monthlyPlan') })}
           </Button>
         )}
       </Row>

worklenz-frontend/src/components/admin-center/configuration/configuration.tsx

@@ -75,11 +75,7 @@ const Configuration: React.FC = () => {
         }
         style={{ marginTop: '16px' }}
       >
-        <Form
+        <Form form={form} initialValues={configuration} onFinish={handleSave}>
-          form={form}
-          initialValues={configuration}
-          onFinish={handleSave}
-        >
           <Row>
             <Col span={8} style={{ padding: '0 12px', height: '86px' }}>
               <Form.Item
@@ -180,7 +176,6 @@ const Configuration: React.FC = () => {
                   showSearch
                   placeholder="Country"
                   optionFilterProp="label"
-                  
                   allowClear
                   options={countryOptions}
                 />

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

@@ -68,7 +68,7 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
 
       const body = {
         name: values.name,
-        teamMembers: teamData?.team_members || []
+        teamMembers: teamData?.team_members || [],
       };
 
       const response = await adminCenterApiService.updateTeam(teamId, body);
@@ -120,13 +120,14 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
 
             setTeamData({
               ...teamData,
-              team_members: updatedMembers
+              team_members: updatedMembers,
             });
           }
         };
 
         const isDisabled = record.role_name === 'Owner' || record.pending_invitation;
-        const tooltipTitle = record.role_name === 'Owner' 
+        const tooltipTitle =
+          record.role_name === 'Owner'
             ? t('cannotChangeOwnerRole')
             : record.pending_invitation
               ? t('pendingInvitation')
@@ -145,9 +146,7 @@ const SettingTeamDrawer: React.FC<SettingTeamDrawerProps> = ({
         return (
           <div>
             {isDisabled ? (
-              <Tooltip title={tooltipTitle}>
+              <Tooltip title={tooltipTitle}>{selectComponent}</Tooltip>
-                {selectComponent}
-              </Tooltip>
             ) : (
               selectComponent
             )}

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

@@ -12,7 +12,8 @@ const Avatars: React.FC<AvatarsProps> = React.memo(({ members, maxCount }) => {
     e.stopPropagation();
   }, []);
 
-  const renderAvatar = useCallback((member: InlineMember, index: number) => (
+  const renderAvatar = useCallback(
+    (member: InlineMember, index: number) => (
       <Tooltip
         key={member.team_member_id || index}
         title={member.end && member.names ? member.names.join(', ') : member.name}
@@ -36,7 +37,9 @@ const Avatars: React.FC<AvatarsProps> = React.memo(({ members, maxCount }) => {
           </span>
         )}
       </Tooltip>
-  ), [stopPropagation]);
+    ),
+    [stopPropagation]
+  );
 
   const visibleMembers = useMemo(() => {
     return maxCount ? members.slice(0, maxCount) : members;
@@ -48,9 +51,7 @@ const Avatars: React.FC<AvatarsProps> = React.memo(({ members, maxCount }) => {
 
   return (
     <div onClick={stopPropagation}>
-      <Avatar.Group>
+      <Avatar.Group>{avatarElements}</Avatar.Group>
-        {avatarElements}
-      </Avatar.Group>
     </div>
   );
 });

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

@@ -102,7 +102,6 @@ const BoardAssigneeSelector = ({ task, groupId = null }: BoardAssigneeSelectorPr
     return assignees?.includes(memberId);
   };
 
-
   const membersDropdownContent = (
     <Card className="custom-card" styles={{ body: { padding: 8 } }}>
       <Flex vertical>
@@ -201,7 +200,7 @@ const BoardAssigneeSelector = ({ task, groupId = null }: BoardAssigneeSelectorPr
         type="dashed"
         shape="circle"
         size="small"
-        onClick={(e) => e.stopPropagation()}
+        onClick={e => e.stopPropagation()}
         icon={
           <PlusOutlined
             style={{

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

@@ -14,7 +14,7 @@ const CustomAvatarGroup = ({ task, sectionId }: CustomAvatarGroupProps) => {
     <Flex
       gap={4}
       align="center"
-      onClick={(e) => e.stopPropagation()}
+      onClick={e => e.stopPropagation()}
       style={{
         borderRadius: 4,
         cursor: 'pointer',

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

@@ -86,7 +86,7 @@ const CustomDueDatePicker = ({
               width: 26,
               height: 26,
             }}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation(); // Keep this as a backup
               setIsDatePickerOpen(true);
             }}

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

@@ -31,7 +31,8 @@ const PrioritySection = ({ task }: PrioritySectionProps) => {
 
     const iconProps = {
       style: {
-        color: themeMode === 'dark' ? selectedPriority.color_code_dark : selectedPriority.color_code,
+        color:
+          themeMode === 'dark' ? selectedPriority.color_code_dark : selectedPriority.color_code,
         marginRight: '0.25rem',
       },
     };
@@ -40,9 +41,19 @@ const PrioritySection = ({ task }: PrioritySectionProps) => {
       case 'Low':
         return <MinusOutlined {...iconProps} />;
       case 'Medium':
-        return <PauseOutlined {...iconProps} style={{ ...iconProps.style, transform: 'rotate(90deg)' }} />;
+        return (
+          <PauseOutlined
+            {...iconProps}
+            style={{ ...iconProps.style, transform: 'rotate(90deg)' }}
+          />
+        );
       case 'High':
-        return <DoubleLeftOutlined {...iconProps} style={{ ...iconProps.style, transform: 'rotate(90deg)' }} />;
+        return (
+          <DoubleLeftOutlined
+            {...iconProps}
+            style={{ ...iconProps.style, transform: 'rotate(90deg)' }}
+          />
+        );
       default:
         return null;
     }
@@ -50,11 +61,7 @@ const PrioritySection = ({ task }: PrioritySectionProps) => {
 
   if (!task.priority || !selectedPriority) return null;
 
-  return (
+  return <Flex gap={4}>{priorityIcon}</Flex>;
-    <Flex gap={4}>
-      {priorityIcon}
-    </Flex>
-  );
 };
 
 export default PrioritySection;

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

@@ -2,8 +2,12 @@ import React, { Suspense } from 'react';
 import { Spin } from 'antd';
 
 // Lazy load chart components to reduce initial bundle size
-const LazyBar = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Bar })));
+const LazyBar = React.lazy(() =>
-const LazyDoughnut = React.lazy(() => import('react-chartjs-2').then(module => ({ default: module.Doughnut })));
+  import('react-chartjs-2').then(module => ({ default: module.Bar }))
+);
+const LazyDoughnut = React.lazy(() =>
+  import('react-chartjs-2').then(module => ({ default: module.Doughnut }))
+);
 
 interface ChartLoaderProps {
   type: 'bar' | 'doughnut';

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

@@ -15,7 +15,9 @@ const Collapsible = ({ isOpen, children, className = '', color }: CollapsiblePro
         marginTop: '6px',
       }}
       className={`transition-all duration-300 ease-in-out ${
-        isOpen ? 'max-h-[2000px] opacity-100 overflow-x-scroll' : 'max-h-0 opacity-0 overflow-hidden'
+        isOpen
+          ? 'max-h-[2000px] opacity-100 overflow-x-scroll'
+          : 'max-h-0 opacity-0 overflow-hidden'
       } ${className}`}
     >
       {children}

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

@@ -1,7 +1,10 @@
 import { AutoComplete, Button, Drawer, Flex, Form, message, Select, Spin, Typography } from 'antd';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { toggleInviteMemberDrawer, triggerTeamMembersRefresh } from '../../../features/settings/member/memberSlice';
+import {
+  toggleInviteMemberDrawer,
+  triggerTeamMembersRefresh,
+} from '../../../features/settings/member/memberSlice';
 import { useTranslation } from 'react-i18next';
 import { useState, useEffect, useCallback } from 'react';
 import { jobTitlesApiService } from '@/api/settings/job-titles/job-titles.api.service';

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

@@ -91,4 +91,3 @@
 .custom-template-list .selected-custom-template:hover {
   background-color: var(--color-paleBlue);
 }
-

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

@@ -16,10 +16,7 @@ import {
   pointerWithin,
   rectIntersection,
 } from '@dnd-kit/core';
-import {
+import { SortableContext, horizontalListSortingStrategy } from '@dnd-kit/sortable';
-  SortableContext,
-  horizontalListSortingStrategy,
-} from '@dnd-kit/sortable';
 import { RootState } from '@/app/store';
 import {
   fetchEnhancedKanbanGroups,
@@ -49,7 +46,9 @@ import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 import { useAuthService } from '@/hooks/useAuth';
 
 // Import the TaskListFilters component
-const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
+const TaskListFilters = React.lazy(
+  () => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters')
+);
 interface EnhancedKanbanBoardProps {
   projectId: string;
   className?: string;
@@ -57,19 +56,17 @@ interface EnhancedKanbanBoardProps {
 
 const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, className = '' }) => {
   const dispatch = useDispatch();
-  const {
+  const { taskGroups, loadingGroups, error, dragState, performanceMetrics } = useSelector(
-    taskGroups,
+    (state: RootState) => state.enhancedKanbanReducer
-    loadingGroups,
+  );
-    error,
-    dragState,
-    performanceMetrics
-  } = useSelector((state: RootState) => state.enhancedKanbanReducer);
   const { socket } = useSocket();
   const authService = useAuthService();
   const teamId = authService.getCurrentSession()?.team_id;
   const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
   const project = useAppSelector((state: RootState) => state.projectReducer.project);
-  const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
+  const { statusCategories, status: existingStatuses } = useAppSelector(
+    state => state.taskStatusReducer
+  );
   const themeMode = useAppSelector(state => state.themeReducer.mode);
 
   // Load filter data
@@ -106,22 +103,18 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
   }, [dispatch, projectId]);
 
   // Get all task IDs for sortable context
-  const allTaskIds = useMemo(() =>
+  const allTaskIds = useMemo(
-    taskGroups.flatMap(group => group.tasks.map(task => task.id!)),
+    () => taskGroups.flatMap(group => group.tasks.map(task => task.id!)),
-    [taskGroups]
-  );
-  const allGroupIds = useMemo(() =>
-    taskGroups.map(group => group.id),
     [taskGroups]
   );
+  const allGroupIds = useMemo(() => taskGroups.map(group => group.id), [taskGroups]);
 
   // Enhanced collision detection
   const collisionDetectionStrategy = (args: any) => {
     // First, let's see if we're colliding with any droppable areas
     const pointerIntersections = pointerWithin(args);
-    const intersections = pointerIntersections.length > 0
+    const intersections =
-      ? pointerIntersections
+      pointerIntersections.length > 0 ? pointerIntersections : rectIntersection(args);
-      : rectIntersection(args);
 
     let overId = getFirstCollision(intersections, 'id');
 
@@ -162,11 +155,13 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
       setActiveGroup(foundGroup);
       setActiveTask(null);
 
-      dispatch(setDragState({
+      dispatch(
+        setDragState({
           activeTaskId: null,
           activeGroupId: activeId,
           isDragging: true,
-      }));
+        })
+      );
     } else {
       // Dragging a task
       let foundTask = null;
@@ -184,11 +179,13 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
       setActiveTask(foundTask);
       setActiveGroup(null);
 
-      dispatch(setDragState({
+      dispatch(
+        setDragState({
           activeTaskId: activeId,
           activeGroupId: foundGroup?.id || null,
           isDragging: true,
-      }));
+        })
+      );
     }
   };
 
@@ -220,12 +217,14 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
     setOverId(null);
 
     // Reset Redux drag state
-    dispatch(setDragState({
+    dispatch(
+      setDragState({
         activeTaskId: null,
         activeGroupId: null,
         overId: null,
         isDragging: false,
-    }));
+      })
+    );
 
     if (!over) return;
 
@@ -258,7 +257,7 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
         // Call API to update status order
         try {
           const requestBody: ITaskStatusCreateRequest = {
-            status_order: columnOrder
+            status_order: columnOrder,
           };
 
           const response = await statusApiService.updateStatusOrder(requestBody, projectId);
@@ -267,7 +266,13 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
             const revertedGroups = [...reorderedGroups];
             const [movedBackGroup] = revertedGroups.splice(toIndex, 1);
             revertedGroups.splice(fromIndex, 0, movedBackGroup);
-            dispatch(reorderGroups({ fromIndex: toIndex, toIndex: fromIndex, reorderedGroups: revertedGroups }));
+            dispatch(
+              reorderGroups({
+                fromIndex: toIndex,
+                toIndex: fromIndex,
+                reorderedGroups: revertedGroups,
+              })
+            );
             alertService.error('Failed to update column order', 'Please try again');
           }
         } catch (error) {
@@ -275,7 +280,13 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
           const revertedGroups = [...reorderedGroups];
           const [movedBackGroup] = revertedGroups.splice(toIndex, 1);
           revertedGroups.splice(fromIndex, 0, movedBackGroup);
-          dispatch(reorderGroups({ fromIndex: toIndex, toIndex: fromIndex, reorderedGroups: revertedGroups }));
+          dispatch(
+            reorderGroups({
+              fromIndex: toIndex,
+              toIndex: fromIndex,
+              reorderedGroups: revertedGroups,
+            })
+          );
           alertService.error('Failed to update column order', 'Please try again');
           logger.error('Failed to update column order', error);
         }
@@ -338,7 +349,8 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
     }
 
     // Synchronous UI update
-    dispatch(reorderTasks({
+    dispatch(
+      reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
         fromIndex: sourceIndex,
@@ -346,8 +358,10 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
         task: movedTask,
         updatedSourceTasks,
         updatedTargetTasks,
-    }));
+      })
-    dispatch(reorderEnhancedKanbanTasks({
+    );
+    dispatch(
+      reorderEnhancedKanbanTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
         fromIndex: sourceIndex,
@@ -355,7 +369,8 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
         task: movedTask,
         updatedSourceTasks,
         updatedTargetTasks,
-    }) as any);
+      }) as any
+    );
 
     // --- Socket emit for task sort order ---
     if (socket && projectId && movedTask) {
@@ -368,7 +383,10 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
         toSortOrder = -1;
         toLastIndex = true;
       } else if (targetGroup.tasks[targetIndex]) {
-        toSortOrder = typeof targetGroup.tasks[targetIndex].sort_order === 'number' ? targetGroup.tasks[targetIndex].sort_order! : -1;
+        toSortOrder =
+          typeof targetGroup.tasks[targetIndex].sort_order === 'number'
+            ? targetGroup.tasks[targetIndex].sort_order!
+            : -1;
         toLastIndex = false;
       } else if (targetGroup.tasks.length > 0) {
         const lastSortOrder = targetGroup.tasks[targetGroup.tasks.length - 1].sort_order;

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

@@ -7,7 +7,10 @@ import { nanoid } from '@reduxjs/toolkit';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { IGroupBy, fetchEnhancedKanbanGroups } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import {
+  IGroupBy,
+  fetchEnhancedKanbanGroups,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
 import { createStatus, fetchStatuses } from '@/features/taskAttributes/taskStatusSlice';
 import { ALPHA_CHANNEL } from '@/shared/constants';
@@ -19,10 +22,12 @@ import useIsProjectManager from '@/hooks/useIsProjectManager';
 const EnhancedKanbanCreateSection: React.FC = () => {
   const { t } = useTranslation('kanban-board');
 
-  const themeMode = useAppSelector((state) => state.themeReducer.mode);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const { projectId } = useAppSelector((state) => state.projectReducer);
+  const { projectId } = useAppSelector(state => state.projectReducer);
-  const groupBy = useAppSelector((state) => state.enhancedKanbanReducer.groupBy);
+  const groupBy = useAppSelector(state => state.enhancedKanbanReducer.groupBy);
-  const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);
+  const { statusCategories, status: existingStatuses } = useAppSelector(
+    state => state.taskStatusReducer
+  );
 
   const dispatch = useAppDispatch();
   const isOwnerorAdmin = useAuthService().isOwnerOrAdmin();
@@ -60,9 +65,9 @@ const EnhancedKanbanCreateSection: React.FC = () => {
 
     if (groupBy === IGroupBy.STATUS && projectId) {
       // Find the "To do" category
-      const todoCategory = statusCategories.find(category => 
+      const todoCategory = statusCategories.find(
-        category.name?.toLowerCase() === 'to do' || 
+        category =>
-        category.name?.toLowerCase() === 'todo'
+          category.name?.toLowerCase() === 'to do' || category.name?.toLowerCase() === 'todo'
       );
 
       if (todoCategory && todoCategory.id) {
@@ -75,7 +80,9 @@ const EnhancedKanbanCreateSection: React.FC = () => {
 
         try {
           // Create the status
-          const response = await dispatch(createStatus({ body, currentProjectId: projectId })).unwrap();
+          const response = await dispatch(
+            createStatus({ body, currentProjectId: projectId })
+          ).unwrap();
 
           if (response.done && response.body) {
             // Refresh the board to show the new section

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

@@ -85,7 +85,9 @@ const EnhancedKanbanCreateSubtaskCard = ({
         }, 0);
         if (task.parent_task_id) {
           socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), task.parent_task_id);
-          socket?.once(SocketEvents.GET_TASK_PROGRESS.toString(), (data: {
+          socket?.once(
+            SocketEvents.GET_TASK_PROGRESS.toString(),
+            (data: {
               id: string;
               complete_ratio: number;
               completed_count: number;
@@ -93,14 +95,17 @@ const EnhancedKanbanCreateSubtaskCard = ({
               parent_task: string;
             }) => {
               if (!data.parent_task) data.parent_task = task.parent_task_id || '';
-            dispatch(updateEnhancedKanbanTaskProgress({
+              dispatch(
+                updateEnhancedKanbanTaskProgress({
                   id: task.id || '',
                   complete_ratio: data.complete_ratio,
                   completed_count: data.completed_count,
                   total_tasks_count: data.total_tasks_count,
                   parent_task: data.parent_task,
-            }));
+                })
-          });
+              );
+            }
+          );
         }
       });
     } catch (error) {

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

@@ -127,7 +127,8 @@
 }
 
 @keyframes dropPulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.6;
     transform: scaleX(0.8);
   }

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

@@ -1,6 +1,11 @@
 import React, { useMemo, useRef, useEffect, useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
-import { SortableContext, verticalListSortingStrategy, useSortable, defaultAnimateLayoutChanges } from '@dnd-kit/sortable';
+import {
+  SortableContext,
+  verticalListSortingStrategy,
+  useSortable,
+  defaultAnimateLayoutChanges,
+} from '@dnd-kit/sortable';
 import { CSS } from '@dnd-kit/utilities';
 import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
@@ -11,7 +16,14 @@ import { Badge, Flex, InputRef, MenuProps, Popconfirm } from 'antd';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import useIsProjectManager from '@/hooks/useIsProjectManager';
 import { useAuthService } from '@/hooks/useAuth';
-import { DeleteOutlined, ExclamationCircleFilled, EditOutlined, LoadingOutlined, RetweetOutlined, MoreOutlined } from '@ant-design/icons/lib/icons';
+import {
+  DeleteOutlined,
+  ExclamationCircleFilled,
+  EditOutlined,
+  LoadingOutlined,
+  RetweetOutlined,
+  MoreOutlined,
+} from '@ant-design/icons/lib/icons';
 import { colors } from '@/styles/colors';
 import { Input } from 'antd';
 import { Tooltip } from 'antd';
@@ -29,8 +41,14 @@ import { evt_project_board_column_setting_click } from '@/shared/worklenz-analyt
 import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
 import { ITaskPhase } from '@/types/tasks/taskPhase.types';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
-import { deleteStatusToggleDrawer, seletedStatusCategory } from '@/features/projects/status/DeleteStatusSlice';
+import {
-import { fetchEnhancedKanbanGroups, IGroupBy } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+  deleteStatusToggleDrawer,
+  seletedStatusCategory,
+} from '@/features/projects/status/DeleteStatusSlice';
+import {
+  fetchEnhancedKanbanGroups,
+  IGroupBy,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import EnhancedKanbanCreateTaskCard from './EnhancedKanbanCreateTaskCard';
 
 interface EnhancedKanbanGroupProps {
@@ -42,11 +60,8 @@ interface EnhancedKanbanGroupProps {
 // Performance threshold for virtualization
 const VIRTUALIZATION_THRESHOLD = 50;
 
-const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
+const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(
-  group,
+  ({ group, activeTaskId, overId }) => {
-  activeTaskId,
-  overId
-}) => {
     const [isHover, setIsHover] = useState<boolean>(false);
     const isOwnerOrAdmin = useAuthService().isOwnerOrAdmin();
     const [isEditable, setIsEditable] = useState(false);
@@ -118,7 +133,8 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
     }, [group.tasks.length]);
 
     // Memoize task rendering to prevent unnecessary re-renders
-  const renderTask = useMemo(() => (task: any, index: number) => (
+    const renderTask = useMemo(
+      () => (task: any, index: number) => (
         <EnhancedKanbanTaskCard
           key={task.id}
           sectionId={group.id}
@@ -126,7 +142,9 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
           isActive={task.id === activeTaskId}
           isDropTarget={overId === task.id}
         />
-  ), [activeTaskId, overId]);
+      ),
+      [activeTaskId, overId]
+    );
 
     // Performance optimization: Only render drop indicators when needed
     const shouldShowDropIndicators = isDraggingOver && !shouldVirtualize;
@@ -194,11 +212,10 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
     };
 
     const handleBlur = async () => {
-    setIsEditable(false);
-    if (name === editName) return;
       if (name === 'Untitled section') {
         dispatch(fetchEnhancedKanbanGroups(projectId ?? ''));
       }
+      setIsEditable(false);
 
       if (!projectId || !group.id) return;
 
@@ -212,7 +229,11 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
           name: name,
         };
 
-      const res = await phasesApiService.updateNameOfPhase(group.id, body as ITaskPhase, projectId);
+        const res = await phasesApiService.updateNameOfPhase(
+          group.id,
+          body as ITaskPhase,
+          projectId
+        );
         if (res.done) {
           trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' });
           dispatch(fetchEnhancedKanbanGroups(projectId));
@@ -232,11 +253,18 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
         if (groupBy === IGroupBy.STATUS) {
           const replacingStatusId = '';
           const res = await statusApiService.deleteStatus(group.id, projectId, replacingStatusId);
-        if (res.message === 'At least one status should exists under each category.') return
+          if (res.message === 'At least one status should exists under each category.') return;
           if (res.done) {
             dispatch(fetchEnhancedKanbanGroups(projectId));
           } else {
-          dispatch(seletedStatusCategory({ id: group.id, name: name, category_id: group.category_id ?? '', message: res.message ?? '' }));
+            dispatch(
+              seletedStatusCategory({
+                id: group.id,
+                name: name,
+                category_id: group.category_id ?? '',
+                message: res.message ?? '',
+              })
+            );
             dispatch(deleteStatusToggleDrawer());
           }
         } else if (groupBy === IGroupBy.PHASE) {
@@ -303,7 +331,6 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
       },
     ].filter(Boolean) as MenuProps['items'];
 
-
     return (
       <div
         ref={setRefs}
@@ -335,15 +362,15 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
               gap={6}
               align="center"
               style={{ cursor: 'pointer' }}
-            onClick={(e) => {
+              onClick={e => {
                 e.stopPropagation();
-              if ((isProjectManager || isOwnerOrAdmin) && group.name !== 'Unmapped') setIsEditable(true);
+                if ((isProjectManager || isOwnerOrAdmin) && group.name !== 'Unmapped')
+                  setIsEditable(true);
               }}
-            onMouseDown={(e) => {
+              onMouseDown={e => {
                 e.stopPropagation();
               }}
             >
-
               {isLoading && <LoadingOutlined style={{ color: colors.darkGray }} />}
               {isEditable ? (
                 <Input
@@ -356,13 +383,13 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
                   onChange={handleChange}
                   onBlur={handleBlur}
                   onPressEnter={handlePressEnter}
-                onMouseDown={(e) => {
+                  onMouseDown={e => {
                     e.stopPropagation();
                   }}
-                onKeyDown={(e) => {
+                  onKeyDown={e => {
                     e.stopPropagation();
                   }}
-                onClick={(e) => {
+                  onClick={e => {
                     e.stopPropagation();
                   }}
                 />
@@ -381,14 +408,14 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
                       overflow: 'hidden',
                       userSelect: 'text',
                     }}
-                  onMouseDown={(e) => {
+                    onMouseDown={e => {
                       e.stopPropagation();
                       e.preventDefault();
                     }}
-                  onMouseUp={(e) => {
+                    onMouseUp={e => {
                       e.stopPropagation();
                     }}
-                  onClick={(e) => {
+                    onClick={e => {
                       e.stopPropagation();
                     }}
                   >
@@ -444,7 +471,11 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
         <div className="enhanced-kanban-group-tasks" ref={groupRef}>
           {/* Create card at top */}
           {showNewCardTop && (isOwnerOrAdmin || isProjectManager) && (
-          <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardTop} position="top" />
+            <EnhancedKanbanCreateTaskCard
+              sectionId={group.id}
+              setShowNewCard={setShowNewCardTop}
+              position="top"
+            />
           )}
           {group.tasks.length === 0 && isDraggingOver && (
             <div className="drop-preview-empty">
@@ -505,7 +536,11 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
           )}
           {/* Create card at bottom */}
           {showNewCardBottom && (isOwnerOrAdmin || isProjectManager) && (
-          <EnhancedKanbanCreateTaskCard sectionId={group.id} setShowNewCard={setShowNewCardBottom} position="bottom" />
+            <EnhancedKanbanCreateTaskCard
+              sectionId={group.id}
+              setShowNewCard={setShowNewCardBottom}
+              position="bottom"
+            />
           )}
           {/* Footer Add Task Button */}
           {(isOwnerOrAdmin || isProjectManager) && !showNewCardTop && !showNewCardBottom && (
@@ -530,6 +565,7 @@ const EnhancedKanbanGroup: React.FC<EnhancedKanbanGroupProps> = React.memo(({
         </div>
       </div>
     );
-});
+  }
+);
 
 export default EnhancedKanbanGroup;

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

@@ -47,7 +47,7 @@
 }
 
 .enhanced-kanban-task-card.drop-target::before {
-  content: '';
+  content: "";
   position: absolute;
   top: -2px;
   left: -2px;
@@ -60,7 +60,8 @@
 }
 
 @keyframes dropTargetPulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.3;
     transform: scale(1);
   }

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

@@ -19,7 +19,10 @@ import { ForkOutlined } from '@ant-design/icons';
 import { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import { CaretDownFilled, CaretRightFilled } from '@ant-design/icons';
-import { fetchBoardSubTasks, toggleTaskExpansion } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import {
+  fetchBoardSubTasks,
+  toggleTaskExpansion,
+} from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { Divider } from 'antd';
 import { List } from 'antd';
 import { Skeleton } from 'antd';
@@ -46,13 +49,8 @@ const PRIORITY_COLORS = {
   low: '#52c41a',
 } as const;
 
-const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo(({
+const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo(
-  task,
+  ({ task, sectionId, isActive = false, isDragOverlay = false, isDropTarget = false }) => {
-  sectionId,
-  isActive = false,
-  isDragOverlay = false,
-  isDropTarget = false
-}) => {
     const dispatch = useAppDispatch();
     const { t } = useTranslation('kanban-board');
     const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -62,14 +60,7 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
     );
 
     const projectId = useAppSelector(state => state.projectReducer.projectId);
-  const {
+    const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
       id: task.id!,
       data: {
         type: 'task',
@@ -86,7 +77,8 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
       backgroundColor: themeMode === 'dark' ? '#292929' : '#fafafa',
     };
 
-  const handleCardClick = useCallback((e: React.MouseEvent, id: string) => {
+    const handleCardClick = useCallback(
+      (e: React.MouseEvent, id: string) => {
         // Prevent the event from propagating to parent elements
         e.stopPropagation();
 
@@ -94,7 +86,9 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
         if (isDragging) return;
         dispatch(setSelectedTaskId(id));
         dispatch(setShowTaskDrawer(true));
-  }, [dispatch, isDragging]);
+      },
+      [dispatch, isDragging]
+    );
 
     const renderLabels = useMemo(() => {
       if (!task?.labels?.length) return null;
@@ -113,8 +107,6 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
       );
     }, [task.labels, themeMode]);
 
-
-
     const handleSubTaskExpand = useCallback(() => {
       if (task && task.id && projectId) {
         // Check if subtasks are already loaded and we have subtask data
@@ -132,10 +124,13 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
       }
     }, [task, projectId, dispatch]);
 
-  const handleSubtaskButtonClick = useCallback((e: React.MouseEvent) => {
+    const handleSubtaskButtonClick = useCallback(
+      (e: React.MouseEvent) => {
         e.stopPropagation();
         handleSubTaskExpand();
-  }, [handleSubTaskExpand]);
+      },
+      [handleSubTaskExpand]
+    );
 
     const handleAddSubtaskClick = useCallback((e: React.MouseEvent) => {
       e.stopPropagation();
@@ -152,12 +147,15 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
       >
         <div className="task-content" onClick={e => handleCardClick(e, task.id || '')}>
           <Flex align="center" justify="space-between" className="mb-2">
-          <Flex>
+            <Flex>{renderLabels}</Flex>
-            {renderLabels}
-          </Flex>
 
             <Tooltip title={` ${task?.completed_count} / ${task?.total_tasks_count}`}>
-            <Progress type="circle" percent={task?.complete_ratio} size={24} strokeWidth={(task.complete_ratio || 0) >= 100 ? 9 : 7} />
+              <Progress
+                type="circle"
+                percent={task?.complete_ratio}
+                size={24}
+                strokeWidth={(task.complete_ratio || 0) >= 100 ? 9 : 7}
+              />
             </Tooltip>
           </Flex>
           <Flex gap={4} align="center">
@@ -166,10 +164,7 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
               className="w-2 h-2 rounded-full"
               style={{ backgroundColor: task.priority_color || '#d9d9d9' }}
             />
-          <Typography.Text
+            <Typography.Text style={{ fontWeight: 500 }} ellipsis={{ tooltip: task.name }}>
-            style={{ fontWeight: 500 }}
-            ellipsis={{ tooltip: task.name }}
-          >
               {task.name}
             </Typography.Text>
           </Flex>
@@ -187,7 +182,11 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
                 isDarkMode={themeMode === 'dark'}
                 size={24}
               />
-            <LazyAssigneeSelectorWrapper task={task} groupId={sectionId} isDarkMode={themeMode === 'dark'} />
+              <LazyAssigneeSelectorWrapper
+                task={task}
+                groupId={sectionId}
+                isDarkMode={themeMode === 'dark'}
+              />
             </Flex>
             <Flex gap={4} align="center">
               <CustomDueDatePicker task={task} onDateChange={setDueDate} />
@@ -224,16 +223,25 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
                 <List>
                   {task.sub_tasks_loading && (
                     <List.Item>
-                    <Skeleton active paragraph={{ rows: 2 }} title={false} style={{ marginTop: 8 }} />
+                      <Skeleton
+                        active
+                        paragraph={{ rows: 2 }}
+                        title={false}
+                        style={{ marginTop: 8 }}
+                      />
                     </List.Item>
                   )}
 
-                {!task.sub_tasks_loading && task?.sub_tasks && task.sub_tasks.length > 0 &&
+                  {!task.sub_tasks_loading &&
+                    task?.sub_tasks &&
+                    task.sub_tasks.length > 0 &&
                     task.sub_tasks.map((subtask: any) => (
                       <BoardSubTaskCard key={subtask.id} subtask={subtask} sectionId={sectionId} />
                     ))}
 
-                {!task.sub_tasks_loading && (!task?.sub_tasks || task.sub_tasks.length === 0) && task.sub_tasks_count === 0 && (
+                  {!task.sub_tasks_loading &&
+                    (!task?.sub_tasks || task.sub_tasks.length === 0) &&
+                    task.sub_tasks_count === 0 && (
                       <List.Item>
                         <div style={{ padding: '8px 0', color: '#999', fontSize: '12px' }}>
                           {t('noSubtasks', 'No subtasks')}
@@ -267,6 +275,7 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
         </div>
       </div>
     );
-});
+  }
+);
 
 export default EnhancedKanbanTaskCard;

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

@@ -21,11 +21,16 @@ const PerformanceMonitor: React.FC = () => {
 
   const getStatusColor = (status: string) => {
     switch (status) {
-      case 'critical': return 'red';
+      case 'critical':
-      case 'warning': return 'orange';
+        return 'red';
-      case 'good': return 'blue';
+      case 'warning':
-      case 'excellent': return 'green';
+        return 'orange';
-      default: return 'default';
+      case 'good':
+        return 'blue';
+      case 'excellent':
+        return 'green';
+      default:
+        return 'default';
     }
   };
 

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

@@ -22,15 +22,19 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
   onTaskRender,
 }) => {
   // Memoize task data to prevent unnecessary re-renders
-  const taskData = useMemo(() => ({
+  const taskData = useMemo(
+    () => ({
       tasks,
       activeTaskId,
       overId,
       onTaskRender,
-  }), [tasks, activeTaskId, overId, onTaskRender]);
+    }),
+    [tasks, activeTaskId, overId, onTaskRender]
+  );
 
   // Row renderer for virtualized list
-  const Row = useCallback(({ index, style }: { index: number; style: React.CSSProperties }) => {
+  const Row = useCallback(
+    ({ index, style }: { index: number; style: React.CSSProperties }) => {
       const task = tasks[index];
       if (!task) return null;
 
@@ -45,10 +49,13 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
           sectionId={task.status || 'default'}
         />
       );
-  }, [tasks, activeTaskId, overId, onTaskRender]);
+    },
+    [tasks, activeTaskId, overId, onTaskRender]
+  );
 
   // Memoize the list component to prevent unnecessary re-renders
-  const VirtualizedList = useMemo(() => (
+  const VirtualizedList = useMemo(
+    () => (
       <List
         height={height}
         width="100%"
@@ -60,7 +67,9 @@ const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
       >
         {Row}
       </List>
-  ), [height, tasks.length, itemHeight, taskData, Row]);
+    ),
+    [height, tasks.length, itemHeight, taskData, Row]
+  );
 
   if (tasks.length === 0) {
     return (

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

@@ -20,9 +20,7 @@ const HomeTasksStatusDropdown = ({ task, teamId }: HomeTasksStatusDropdownProps)
   const { t } = useTranslation('task-list-table');
   const { socket, connected } = useSocket();
   const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
-  const {
+  const { refetch } = useGetMyTasksQuery(homeTasksConfig, {
-    refetch
-  } = useGetMyTasksQuery(homeTasksConfig, {
     skip: false, // Ensure this query runs
   });
 

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

@@ -1,15 +1,15 @@
-import { useSocket } from "@/socket/socketContext";
+import { useSocket } from '@/socket/socketContext';
-import { IProjectTask } from "@/types/project/projectTasksViewModel.types";
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import { DatePicker } from "antd";
+import { DatePicker } from 'antd';
 import dayjs from 'dayjs';
 import calendar from 'dayjs/plugin/calendar';
 import { SocketEvents } from '@/shared/socket-events';
 import type { Dayjs } from 'dayjs';
-import { useTranslation } from "react-i18next";
+import { useTranslation } from 'react-i18next';
-import { useEffect, useState, useMemo } from "react";
+import { useEffect, useState, useMemo } from 'react';
-import { useAppSelector } from "@/hooks/useAppSelector";
+import { useAppSelector } from '@/hooks/useAppSelector';
-import { useGetMyTasksQuery } from "@/api/home-page/home-page.api.service";
+import { useGetMyTasksQuery } from '@/api/home-page/home-page.api.service';
-import { getUserSession } from "@/utils/session-helper";
+import { getUserSession } from '@/utils/session-helper';
 
 // Extend dayjs with the calendar plugin
 dayjs.extend(calendar);
@@ -23,13 +23,14 @@ const HomeTasksDatePicker = ({ record }: HomeTasksDatePickerProps) => {
   const { t } = useTranslation('home');
   const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
   const { refetch } = useGetMyTasksQuery(homeTasksConfig, {
-        skip: false
+    skip: false,
   });
 
   // Use useMemo to avoid re-renders when record.end_date is the same
-    const initialDate = useMemo(() =>
+  const initialDate = useMemo(
-        record.end_date ? dayjs(record.end_date) : null
+    () => (record.end_date ? dayjs(record.end_date) : null),
-        , [record.end_date]);
+    [record.end_date]
+  );
 
   const [selectedDate, setSelectedDate] = useState<Dayjs | null>(initialDate);
 
@@ -89,7 +90,7 @@ const HomeTasksDatePicker = ({ record }: HomeTasksDatePickerProps) => {
       placeholder={t('tasks.dueDatePlaceholder')}
       value={selectedDate}
       onChange={value => handleEndDateChanged(value || null, record || null)}
-            format={(value) => getFormattedDate(value)} // Dynamically format the displayed value
+      format={value => getFormattedDate(value)} // Dynamically format the displayed value
       style={{
         color: selectedDate
           ? selectedDate.isSame(dayjs(), 'day') || selectedDate.isSame(dayjs().add(1, 'day'), 'day')

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

@@ -17,16 +17,9 @@ interface SortableKanbanGroupProps {
   activeTaskId?: string | null;
 }
 
-const SortableKanbanGroup: React.FC<SortableKanbanGroupProps> = (props) => {
+const SortableKanbanGroup: React.FC<SortableKanbanGroupProps> = props => {
   const { group, activeTaskId } = props;
-    const {
+  const { setNodeRef, attributes, listeners, transform, transition, isDragging } = useSortable({
-        setNodeRef,
-        attributes,
-        listeners,
-        transform,
-        transition,
-        isDragging,
-    } = useSortable({
     id: group.id,
     data: { type: 'group', groupId: group.id },
   });

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

@@ -72,10 +72,7 @@ const KanbanGroup: React.FC<TaskGroupProps> = ({
   };
 
   return (
-        <div
+    <div ref={setNodeRef} className={`kanban-group-column${isOver ? ' drag-over' : ''}`}>
-            ref={setNodeRef}
-            className={`kanban-group-column${isOver ? ' drag-over' : ''}`}
-        >
       {/* Group Header */}
       <div className="kanban-group-header" style={{ backgroundColor: getGroupColor() }}>
         {/* Drag handle for column */}
@@ -100,7 +97,7 @@ const KanbanGroup: React.FC<TaskGroupProps> = ({
               <Text type="secondary">No tasks in this group</Text>
             </div>
           ) : (
-                        group.tasks.map((task, index) => (
+            group.tasks.map((task, index) =>
               task.id === activeTaskId ? (
                 <div key={task.id} className="kanban-task-card kanban-task-card-placeholder" />
               ) : (
@@ -116,19 +113,14 @@ const KanbanGroup: React.FC<TaskGroupProps> = ({
                   onToggleSubtasks={onToggleSubtasks}
                 />
               )
-                        ))
+            )
           )}
         </div>
       </SortableContext>
 
       {/* Add Task Button */}
       <div className="kanban-group-add-task">
-                <Button
+        <Button type="dashed" icon={<PlusOutlined />} block onClick={handleAddTask}>
-                    type="dashed"
-                    icon={<PlusOutlined />}
-                    block
-                    onClick={handleAddTask}
-                >
           Add Task
         </Button>
       </div>

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

@@ -36,14 +36,7 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
   onSelect,
   onToggleSubtasks,
 }) => {
-  const {
+  const { attributes, listeners, setNodeRef, transform, transition, isDragging } = useSortable({
-    attributes,
-    listeners,
-    setNodeRef,
-    transform,
-    transition,
-    isDragging,
-  } = useSortable({
     id: task.id!,
     data: {
       type: 'task',
@@ -93,7 +86,10 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
           {...attributes}
           {...listeners}
         />
-        <Text strong className={`kanban-task-title${task.complete_ratio === 100 ? ' kanban-task-completed' : ''}`}>
+        <Text
+          strong
+          className={`kanban-task-title${task.complete_ratio === 100 ? ' kanban-task-completed' : ''}`}
+        >
           {task.name}
         </Text>
         {task.sub_tasks_count && task.sub_tasks_count > 0 && (
@@ -112,15 +108,23 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
           {/* Task Key and Status */}
           <div className="kanban-task-row">
             {task.task_key && (
-              <Text code className="kanban-task-key">{task.task_key}</Text>
+              <Text code className="kanban-task-key">
+                {task.task_key}
+              </Text>
             )}
             {task.status_name && (
-              <Tag className="kanban-task-status" style={{ backgroundColor: task.status_color, color: 'white', marginLeft: 8 }}>
+              <Tag
+                className="kanban-task-status"
+                style={{ backgroundColor: task.status_color, color: 'white', marginLeft: 8 }}
+              >
                 {task.status_name}
               </Tag>
             )}
             {task.priority_name && (
-              <Tag className="kanban-task-priority" style={{ backgroundColor: task.priority_color, color: 'white', marginLeft: 8 }}>
+              <Tag
+                className="kanban-task-priority"
+                style={{ backgroundColor: task.priority_color, color: 'white', marginLeft: 8 }}
+              >
                 {task.priority_name}
               </Tag>
             )}
@@ -139,7 +143,11 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
               />
             )}
             {dueDate && (
-              <Text type={dueDate.color as any} className="kanban-task-due-date" style={{ marginLeft: 12 }}>
+              <Text
+                type={dueDate.color as any}
+                className="kanban-task-due-date"
+                style={{ marginLeft: 12 }}
+              >
                 <ClockCircleOutlined style={{ marginRight: 4 }} />
                 {dueDate.text}
               </Text>
@@ -149,7 +157,7 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
           <div className="kanban-task-row">
             {task.assignees && task.assignees.length > 0 && (
               <Avatar.Group size="small" maxCount={3}>
-                {task.assignees.map((assignee) => (
+                {task.assignees.map(assignee => (
                   <Tooltip key={assignee.id} title={assignee.name}>
                     <Avatar size="small">{assignee.name?.charAt(0)?.toUpperCase()}</Avatar>
                   </Tooltip>
@@ -158,11 +166,16 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
             )}
             {task.labels && task.labels.length > 0 && (
               <div className="kanban-task-labels">
-                {task.labels.slice(0, 2).map((label) => (
+                {task.labels.slice(0, 2).map(label => (
                   <Tag
                     key={label.id}
                     className="kanban-task-label"
-                    style={{ backgroundColor: label.color_code, border: 'none', color: 'white', marginLeft: 4 }}
+                    style={{
+                      backgroundColor: label.color_code,
+                      border: 'none',
+                      color: 'white',
+                      marginLeft: 4,
+                    }}
                   >
                     {label.name}
                   </Tag>
@@ -198,7 +211,7 @@ const KanbanTaskCard: React.FC<TaskRowProps> = ({
       {/* Subtasks */}
       {task.show_sub_tasks && task.sub_tasks && task.sub_tasks.length > 0 && (
         <div className="kanban-task-subtasks">
-          {task.sub_tasks.map((subtask) => (
+          {task.sub_tasks.map(subtask => (
             <KanbanTaskCard
               key={subtask.id}
               task={subtask}

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

@@ -19,12 +19,7 @@ import {
 } from '@dnd-kit/sortable';
 import { Card, Spin, Empty, Flex } from 'antd';
 import { RootState } from '@/app/store';
-import {
+import { IGroupBy, setGroup, fetchTaskGroups, reorderTasks } from '@/features/tasks/tasks.slice';
-    IGroupBy,
-    setGroup,
-    fetchTaskGroups,
-    reorderTasks,
-} from '@/features/tasks/tasks.slice';
 import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { AppDispatch } from '@/app/store';
 import BoardSectionCard from '@/pages/projects/projectView/board/board-section/board-section-card/board-section-card';
@@ -38,9 +33,10 @@ import KanbanGroup from './kanbanGroup';
 import KanbanTaskCard from './kanbanTaskCard';
 import SortableKanbanGroup from './SortableKanbanGroup';
 
-
 // Import the TaskListFilters component
-const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
+const TaskListFilters = React.lazy(
+  () => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters')
+);
 
 interface TaskListBoardProps {
   projectId: string;
@@ -64,7 +60,9 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
 
   // Redux selectors
 
-    const { taskGroups, groupBy, loadingGroups, error, search, archived } = useSelector((state: RootState) => state.boardReducer);
+  const { taskGroups, groupBy, loadingGroups, error, search, archived } = useSelector(
+    (state: RootState) => state.boardReducer
+  );
 
   // Selection state
   const [selectedTaskIds, setSelectedTaskIds] = useState<string[]>([]);
@@ -129,7 +127,7 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
   };
 
   const handleDragOver = (event: DragOverEvent) => {
-        setOverId(event.over?.id as string || null);
+    setOverId((event.over?.id as string) || null);
   };
 
   const handleDragEnd = (event: DragEndEvent) => {
@@ -189,7 +187,8 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
       updatedTargetTasks.splice(finalTargetIndex, 0, movedTask);
     }
     // Dispatch the reorder action
-        dispatch(reorderTasks({
+    dispatch(
+      reorderTasks({
         activeGroupId: sourceGroup.id,
         overGroupId: targetGroup.id,
         fromIndex: sourceIndex,
@@ -197,11 +196,10 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
         task: movedTask,
         updatedSourceTasks,
         updatedTargetTasks,
-        }));
+      })
+    );
   };
 
-
-
   const handleSelectTask = (taskId: string, selected: boolean) => {
     setSelectedTaskIds(prev => {
       if (selected) {
@@ -220,10 +218,7 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
   if (error) {
     return (
       <Card className={className}>
-                <Empty
+        <Empty description={`Error loading tasks: ${error}`} image={Empty.PRESENTED_IMAGE_SIMPLE} />
-                    description={`Error loading tasks: ${error}`}
-                    image={Empty.PRESENTED_IMAGE_SIMPLE}
-                />
       </Card>
     );
   }
@@ -231,17 +226,12 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
   return (
     <div className={`task-list-board ${className}`}>
       {/* Task Filters */}
-            <Card
+      <Card size="small" className="mb-4" styles={{ body: { padding: '12px 16px' } }}>
-                size="small"
-                className="mb-4"
-                styles={{ body: { padding: '12px 16px' } }}
-            >
         <React.Suspense fallback={<div>Loading filters...</div>}>
           <TaskListFilters position="board" />
         </React.Suspense>
       </Card>
 
-
       {/* Task Groups Container */}
       <div className="task-groups-outer-container">
         {loadingGroups ? (
@@ -252,10 +242,7 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
           </Card>
         ) : taskGroups.length === 0 ? (
           <Card>
-                        <Empty
+            <Empty description="No tasks found" image={Empty.PRESENTED_IMAGE_SIMPLE} />
-                            description="No tasks found"
-                            image={Empty.PRESENTED_IMAGE_SIMPLE}
-                        />
           </Card>
         ) : (
           <DndContext
@@ -270,7 +257,7 @@ const KanbanTaskListBoard: React.FC<TaskListBoardProps> = ({ projectId, classNam
               strategy={horizontalListSortingStrategy}
             >
               <div className="task-groups-container">
-                                {taskGroups.map((group) => (
+                {taskGroups.map(group => (
                   <SortableKanbanGroup
                     key={group.id}
                     group={group}

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

@@ -83,7 +83,10 @@ const InvitationItem: React.FC<InvitationItemProps> = ({ item, isUnreadNotificat
           You have been invited to work with <b>{item.team_name}</b>.
         </div>
         {isUnreadNotifications && (
-          <div className="mt-2" style={{ display: 'flex', gap: '8px', justifyContent: 'space-between' }}>
+          <div
+            className="mt-2"
+            style={{ display: 'flex', gap: '8px', justifyContent: 'space-between' }}
+          >
             <button
               onClick={() => acceptInvite(true)}
               disabled={inProgress()}

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

@@ -164,15 +164,15 @@ const NotificationDrawer = () => {
           await handleVerifyAuth();
         }
         if (notification.project && notification.task_id) {
-          navigate(`${notification.url}${toQueryString({task: notification.params?.task, tab: notification.params?.tab})}`);
+          navigate(
+            `${notification.url}${toQueryString({ task: notification.params?.task, tab: notification.params?.tab })}`
+          );
         }
-
       } catch (error) {
         console.error('Error navigating to URL:', error);
       } finally {
         setIsLoading(false);
       }
-
     }
   };
 

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

@@ -5,7 +5,11 @@ import { toQueryString } from '@/utils/toQueryString';
 import { BankOutlined } from '@ant-design/icons';
 import './push-notification-template.css';
 
-const PushNotificationTemplate = ({ notification: notificationData }: { notification: IWorklenzNotification }) => {
+const PushNotificationTemplate = ({
+  notification: notificationData,
+}: {
+  notification: IWorklenzNotification;
+}) => {
   const handleClick = async () => {
     if (notificationData.url) {
       let url = notificationData.url;
@@ -29,17 +33,19 @@ const PushNotificationTemplate = ({ notification: notificationData }: { notifica
       style={{
         cursor: notificationData.url ? 'pointer' : 'default',
         padding: '8px 0',
-        borderRadius: '8px'
+        borderRadius: '8px',
       }}
     >
-      <div style={{ 
+      <div
+        style={{
           display: 'flex',
           alignItems: 'center',
           marginBottom: '8px',
           color: '#262626',
           fontSize: '14px',
-        fontWeight: 500
+          fontWeight: 500,
-      }}>
+        }}
+      >
         {notificationData.team && (
           <>
             <BankOutlined style={{ marginRight: '8px', color: '#1890ff' }} />
@@ -53,7 +59,7 @@ const PushNotificationTemplate = ({ notification: notificationData }: { notifica
           color: '#595959',
           fontSize: '13px',
           lineHeight: '1.5',
-          marginTop: '4px'
+          marginTop: '4px',
         }}
         dangerouslySetInnerHTML={{ __html: notificationData.message }}
       />
@@ -81,12 +87,12 @@ const processNotificationQueue = () => {
         boxShadow: '0 2px 8px rgba(0, 0, 0, 0.15)',
         padding: '12px 16px',
         minWidth: '300px',
-        maxWidth: '400px'
+        maxWidth: '400px',
       },
       onClose: () => {
         isProcessing = false;
         processNotificationQueue();
-      }
+      },
     });
   } else {
     isProcessing = false;

worklenz-frontend/src/components/project-list/project-group/project-group-list.tsx

@@ -12,7 +12,7 @@ import {
   Space,
   Avatar,
   theme,
-  Divider
+  Divider,
 } from 'antd';
 import {
   ClockCircleOutlined,
@@ -22,7 +22,7 @@ import {
   UserOutlined,
   SettingOutlined,
   InboxOutlined,
-  MoreOutlined
+  MoreOutlined,
 } from '@ant-design/icons';
 import { ProjectGroupListProps } from '@/types/project/project.types';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -31,18 +31,18 @@ import { themeWiseColor } from '@/utils/themeWiseColor';
 import {
   fetchProjectData,
   setProjectId,
-  toggleProjectDrawer 
+  toggleProjectDrawer,
 } from '@/features/project/project-drawer.slice';
 import {
   toggleArchiveProject,
-  toggleArchiveProjectForAll 
+  toggleArchiveProjectForAll,
 } from '@/features/projects/projectsSlice';
 import { useAuthService } from '@/hooks/useAuth';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 import {
   evt_projects_settings_click,
   evt_projects_archive,
-  evt_projects_archive_all 
+  evt_projects_archive_all,
 } from '@/shared/worklenz-analytics-events';
 import logger from '@/utils/errorLogger';
 
@@ -53,7 +53,7 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
   navigate,
   onProjectSelect,
   loading,
-  t
+  t,
 }) => {
   // Preload project view components on hover for smoother navigation
   const handleProjectHover = React.useCallback((project_id: string) => {
@@ -130,7 +130,11 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
     dispatch(toggleProjectDrawer());
   };
 
-  const handleArchiveClick = async (e: React.MouseEvent, projectId: string, isArchived: boolean) => {
+  const handleArchiveClick = async (
+    e: React.MouseEvent,
+    projectId: string,
+    isArchived: boolean
+  ) => {
     e.stopPropagation();
     try {
       if (isOwnerOrAdmin) {
@@ -146,7 +150,8 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
   };
 
   // Memoized styles for better performance
-  const styles = useMemo(() => ({
+  const styles = useMemo(
+    () => ({
       container: {
         padding: '0',
         background: 'transparent',
@@ -311,7 +316,7 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
           background: getThemeAwareColor(token.colorPrimary, token.colorPrimaryActive),
           color: getThemeAwareColor('#fff', token.colorTextLightSolid),
           transform: 'scale(1.1)',
-       }
+        },
       },
       emptyState: {
         padding: '60px 20px',
@@ -322,8 +327,10 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
       },
       loadingContainer: {
         padding: '40px 20px',
-    }
+      },
-  }), [token, themeMode, getThemeAwareColor]);
+    }),
+    [token, themeMode, getThemeAwareColor]
+  );
 
   // Early return for loading state
   if (loading) {
@@ -368,7 +375,7 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
       <Col key={project.id} xs={24} sm={12} md={8} lg={6} xl={4}>
         <Card
           style={{ ...styles.projectCard, position: 'relative' }}
-          onMouseEnter={(e) => {
+          onMouseEnter={e => {
             Object.assign(e.currentTarget.style, styles.projectCardHover);
             const actionButtons = e.currentTarget.querySelector('.action-buttons') as HTMLElement;
             if (actionButtons) {
@@ -377,7 +384,7 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
             // Preload components for smoother navigation
             handleProjectHover(project.id);
           }}
-          onMouseLeave={(e) => {
+          onMouseLeave={e => {
             Object.assign(e.currentTarget.style, styles.projectCard);
             const actionButtons = e.currentTarget.querySelector('.action-buttons') as HTMLElement;
             if (actionButtons) {
@@ -392,15 +399,15 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
             <Tooltip title={t('setting')}>
               <button
                 style={styles.actionButton}
-                onClick={(e) => handleSettingsClick(e, project.id)}
+                onClick={e => handleSettingsClick(e, project.id)}
-                onMouseEnter={(e) => {
+                onMouseEnter={e => {
                   Object.assign(e.currentTarget.style, {
                     background: getThemeAwareColor(token.colorPrimary, token.colorPrimaryActive),
                     color: getThemeAwareColor('#fff', token.colorTextLightSolid),
                     transform: 'scale(1.1)',
                   });
                 }}
-                onMouseLeave={(e) => {
+                onMouseLeave={e => {
                   Object.assign(e.currentTarget.style, {
                     background: getThemeAwareColor('rgba(255,255,255,0.9)', 'rgba(0,0,0,0.7)'),
                     color: getThemeAwareColor(token.colorTextSecondary, token.colorTextTertiary),
@@ -414,15 +421,15 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
             <Tooltip title={project.archived ? t('unarchive') : t('archive')}>
               <button
                 style={styles.actionButton}
-                onClick={(e) => handleArchiveClick(e, project.id, project.archived)}
+                onClick={e => handleArchiveClick(e, project.id, project.archived)}
-                onMouseEnter={(e) => {
+                onMouseEnter={e => {
                   Object.assign(e.currentTarget.style, {
                     background: getThemeAwareColor(token.colorPrimary, token.colorPrimaryActive),
                     color: getThemeAwareColor('#fff', token.colorTextLightSolid),
                     transform: 'scale(1.1)',
                   });
                 }}
-                onMouseLeave={(e) => {
+                onMouseLeave={e => {
                   Object.assign(e.currentTarget.style, {
                     background: getThemeAwareColor('rgba(255,255,255,0.9)', 'rgba(0,0,0,0.7)'),
                     color: getThemeAwareColor(token.colorTextSecondary, token.colorTextTertiary),
@@ -444,7 +451,11 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
 
           <div style={styles.projectContent}>
             {/* Project title */}
-            <Title level={5} ellipsis={{ rows: 2, tooltip: project.name }} style={styles.projectTitle}>
+            <Title
+              level={5}
+              ellipsis={{ rows: 2, tooltip: project.name }}
+              style={styles.projectTitle}
+            >
               {project.name}
             </Title>
 
@@ -460,9 +471,7 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
 
             {/* Progress section */}
             <div style={styles.progressSection}>
-              <div style={styles.progressLabel}>
+              <div style={styles.progressLabel}>Progress</div>
-                Progress
-              </div>
               <Progress
                 percent={progress}
                 size="small"
@@ -474,12 +483,14 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
                 strokeWidth={4}
                 showInfo={false}
               />
-               <Text style={{ 
+              <Text
+                style={{
                   fontSize: '10px',
                   color: getThemeAwareColor(token.colorTextSecondary, token.colorTextTertiary),
                   marginTop: '2px',
-                 display: 'block'
+                  display: 'block',
-               }}>
+                }}
+              >
                 {progress}%
               </Text>
             </div>
@@ -490,7 +501,9 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
                 <div style={styles.metaItem}>
                   <CheckCircleOutlined style={styles.metaIcon} />
                   <div style={styles.metaContent}>
-                    <span style={styles.metaValue}>{completedTasks}/{totalTasks}</span>
+                    <span style={styles.metaValue}>
+                      {completedTasks}/{totalTasks}
+                    </span>
                     <span style={styles.metaLabel}>Tasks</span>
                   </div>
                 </div>
@@ -521,14 +534,16 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
             <Space align="center" style={{ width: '100%', justifyContent: 'space-between' }}>
               <Space align="center">
                 {group.groupColor && (
-                  <div style={{ 
+                  <div
+                    style={{
                       width: '16px',
                       height: '16px',
                       borderRadius: '50%',
                       backgroundColor: processColor(group.groupColor),
                       flexShrink: 0,
-                    border: `2px solid ${getThemeAwareColor('rgba(255,255,255,0.8)', 'rgba(0,0,0,0.3)')}`
+                      border: `2px solid ${getThemeAwareColor('rgba(255,255,255,0.8)', 'rgba(0,0,0,0.3)')}`,
-                  }} />
+                    }}
+                  />
                 )}
                 <div>
                   <Title level={4} style={styles.groupTitle}>
@@ -551,24 +566,24 @@ const ProjectGroupList: React.FC<ProjectGroupListProps> = ({
                   height: '24px',
                   lineHeight: '22px',
                   borderRadius: '12px',
-                  border: `2px solid ${getThemeAwareColor(token.colorBgContainer, token.colorBgElevated)}`
+                  border: `2px solid ${getThemeAwareColor(token.colorBgContainer, token.colorBgElevated)}`,
                 }}
               />
             </Space>
           </div>
 
           {/* Projects grid */}
-          <Row gutter={[16, 16]}>
+          <Row gutter={[16, 16]}>{group.projects.map(renderProjectCard)}</Row>
-            {group.projects.map(renderProjectCard)}
-          </Row>
 
           {/* Add spacing between groups except for the last one */}
           {groupIndex < groups.length - 1 && (
-            <Divider style={{ 
+            <Divider
+              style={{
                 margin: '32px 0 0 0',
                 borderColor: getThemeAwareColor(token.colorBorderSecondary, token.colorBorder),
-              opacity: 0.5
+                opacity: 0.5,
-            }} />
+              }}
+            />
           )}
         </div>
       ))}

worklenz-frontend/src/components/project-list/project-list-table/project-list-actions/project-list-actions.tsx

@@ -1,6 +1,10 @@
 import { useGetProjectsQuery } from '@/api/projects/projects.v1.api.service';
 import { AppDispatch } from '@/app/store';
-import { fetchProjectData, setProjectId, toggleProjectDrawer } from '@/features/project/project-drawer.slice';
+import {
+  fetchProjectData,
+  setProjectId,
+  toggleProjectDrawer,
+} from '@/features/project/project-drawer.slice';
 import {
   toggleArchiveProjectForAll,
   toggleArchiveProject,
@@ -12,7 +16,11 @@ import { IProjectViewModel } from '@/types/project/projectViewModel.types';
 import logger from '@/utils/errorLogger';
 import { SettingOutlined, InboxOutlined } from '@ant-design/icons';
 import { Tooltip, Button, Popconfirm, Space } from 'antd';
-import { evt_projects_archive, evt_projects_archive_all, evt_projects_settings_click } from '@/shared/worklenz-analytics-events';
+import {
+  evt_projects_archive,
+  evt_projects_archive_all,
+  evt_projects_settings_click,
+} from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 
 interface ActionButtonsProps {
@@ -71,7 +79,9 @@ export const ActionButtons: React.FC<ActionButtonsProps> = ({
           icon={<SettingOutlined />}
         />
       </Tooltip>
-      <Tooltip title={isEditable ? (record.archived ? t('unarchive') : t('archive')) : t('noPermission')}>
+      <Tooltip
+        title={isEditable ? (record.archived ? t('unarchive') : t('archive')) : t('noPermission')}
+      >
         <Popconfirm
           title={record.archived ? t('unarchive') : t('archive')}
           description={record.archived ? t('unarchiveConfirm') : t('archiveConfirm')}

worklenz-frontend/src/components/project-list/project-list-table/project-list-category/project-list-category.tsx

@@ -12,9 +12,7 @@ export const CategoryCell: React.FC<{
 }> = ({ record, t }) => {
   if (!record.category_name) return '-';
 
-  const { requestParams } = useAppSelector(
+  const { requestParams } = useAppSelector(state => state.projectsReducer);
-    state => state.projectsReducer
-  );
   const dispatch = useAppDispatch();
   const newParams: Partial<typeof requestParams> = {};
   const filterByCategory = (categoryId: string | undefined) => {

worklenz-frontend/src/components/project-list/project-list-table/project-list-favorite/project-rate-cell.tsx

@@ -37,7 +37,8 @@ export const ProjectRateCell: React.FC<{
   );
 
   useEffect(() => {
-    setIsFavorite(record.favorite);}, [record.favorite]);
+    setIsFavorite(record.favorite);
+  }, [record.favorite]);
 
   return (
     <ConfigProvider wave={{ disabled: true }}>
@@ -48,7 +49,7 @@ export const ProjectRateCell: React.FC<{
           style={{ backgroundColor: colors.transparent }}
           shape="circle"
           icon={<StarFilled style={{ color: checkIconColor, fontSize: '20px' }} />}
-          onClick={(e) => {
+          onClick={e => {
             e.stopPropagation();
             handleFavorite();
           }}

worklenz-frontend/src/components/project-task-filters/delete-status-drawer/delete-status-drawer.tsx

@@ -36,7 +36,7 @@ const DeleteStatusDrawer: React.FC = () => {
     state => state.deleteStatusReducer.isDeleteStatusDrawerOpen
   );
   const { isDeleteStatusDrawerOpen, status: selectedForDelete } = useAppSelector(
-        (state) => state.deleteStatusReducer
+    state => state.deleteStatusReducer
   );
   const { status, statusCategories } = useAppSelector(state => state.taskStatusReducer);
   const { projectId } = useAppSelector(state => state.projectReducer);
@@ -81,7 +81,6 @@ const DeleteStatusDrawer: React.FC = () => {
           dispatch(deleteSection({ sectionId: groupId }));
         }
       }
-
     } catch (error) {
       logger.error('Error deleting section', error);
     } finally {
@@ -99,7 +98,7 @@ const DeleteStatusDrawer: React.FC = () => {
       open={isDelteStatusDrawerOpen}
       afterOpenChange={handleDrawerOpenChange}
     >
-            <Alert type="warning" message={selectedForDelete?.message.replace("$", "")} />
+      <Alert type="warning" message={selectedForDelete?.message.replace('$', '')} />
 
       <Card className="text-center" style={{ marginTop: 16 }}>
         <Title level={5}>{selectedForDelete?.name}</Title>
@@ -111,8 +110,8 @@ const DeleteStatusDrawer: React.FC = () => {
           value={currentStatus}
           onChange={setReplacingStatus}
           style={{ width: '100%' }}
-                    optionLabelProp='name'
+          optionLabelProp="name"
-                    options={status.map((item) => ({
+          options={status.map(item => ({
             key: item.id,
             value: item.id,
             name: item.name,
@@ -121,11 +120,11 @@ const DeleteStatusDrawer: React.FC = () => {
                 color={item.color_code}
                 text={item?.name || null}
                 style={{
-                                    opacity: item.id === selectedForDelete?.id ? 0.5 : undefined
+                  opacity: item.id === selectedForDelete?.id ? 0.5 : undefined,
                 }}
               />
             ),
-                        disabled: item.id === selectedForDelete?.id
+            disabled: item.id === selectedForDelete?.id,
           }))}
         />
 

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/column-configuration-modal.tsx

@@ -76,14 +76,17 @@ const ColumnConfigurationModal: React.FC<ColumnConfigurationModalProps> = ({
     setHasChanges(false);
   };
 
-  const groupedColumns = config.reduce((groups, column) => {
+  const groupedColumns = config.reduce(
+    (groups, column) => {
       const category = column.category || 'other';
       if (!groups[category]) {
         groups[category] = [];
       }
       groups[category].push(column);
       return groups;
-  }, {} as Record<string, ColumnConfig[]>);
+    },
+    {} as Record<string, ColumnConfig[]>
+  );
 
   const categoryLabels: Record<string, string> = {
     basic: 'Basic Information',
@@ -117,8 +120,8 @@ const ColumnConfigurationModal: React.FC<ColumnConfigurationModalProps> = ({
     >
       <div style={{ marginBottom: 16 }}>
         <Typography.Text type="secondary">
-          Configure which columns appear in the "Show Fields" dropdown and their order.
+          Configure which columns appear in the "Show Fields" dropdown and their order. Use the
-          Use the up/down arrows to reorder columns.
+          up/down arrows to reorder columns.
         </Typography.Text>
       </div>
 

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/group-by-filter-dropdown.tsx

@@ -64,7 +64,7 @@ const GroupByFilterDropdown = () => {
         trigger={['click']}
         menu={{
           items,
-          onClick: (info) => handleGroupChange(info.key),
+          onClick: info => handleGroupChange(info.key),
           selectedKeys: [currentGroup],
         }}
       >
@@ -72,8 +72,8 @@ const GroupByFilterDropdown = () => {
           {selectedLabel} <CaretDownFilled />
         </Button>
       </Dropdown>
-      
+      {(currentGroup === IGroupBy.STATUS || currentGroup === IGroupBy.PHASE) &&
-      {(currentGroup === IGroupBy.STATUS || currentGroup === IGroupBy.PHASE) && (isOwnerOrAdmin || isProjectManager) && (
+        (isOwnerOrAdmin || isProjectManager) && (
           <ConfigProvider wave={{ disabled: true }}>
             {currentGroup === IGroupBy.PHASE && <ConfigPhaseButton />}
             {currentGroup === IGroupBy.STATUS && <CreateStatusButton />}

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/members-filter-dropdown.tsx

@@ -12,7 +12,7 @@ import {
   Input,
   List,
   Space,
-  Typography 
+  Typography,
 } from 'antd';
 import type { InputRef } from 'antd';
 
@@ -50,31 +50,32 @@ const MembersFilterDropdown = () => {
       // Reset task assignees selections
       const resetTaskMembers = taskAssignees.map(member => ({
         ...member,
-        selected: false
+        selected: false,
       }));
       dispatch(setMembers(resetTaskMembers));
 
       // Reset board assignees selections
       const resetBoardMembers = boardTaskAssignees.map(member => ({
         ...member,
-        selected: false
+        selected: false,
       }));
       dispatch(setBoardMembers(resetBoardMembers));
     }
   }, [projectId, dispatch]);
 
   const selectedCount = useMemo(() => {
-    return projectView === 'list' ? taskAssignees.filter(member => member.selected).length : boardTaskAssignees.filter(member => member.selected).length;
+    return projectView === 'list'
+      ? taskAssignees.filter(member => member.selected).length
+      : boardTaskAssignees.filter(member => member.selected).length;
   }, [taskAssignees, boardTaskAssignees, projectView]);
 
   const filteredMembersData = useMemo(() => {
     const members = projectView === 'list' ? taskAssignees : boardTaskAssignees;
-    return members.filter(member => 
+    return members.filter(member => member.name?.toLowerCase().includes(searchQuery.toLowerCase()));
-      member.name?.toLowerCase().includes(searchQuery.toLowerCase())
-    );
   }, [taskAssignees, boardTaskAssignees, searchQuery, projectView]);
 
-  const handleSelectedFiltersCount = useCallback(async (memberId: string | undefined, checked: boolean) => {
+  const handleSelectedFiltersCount = useCallback(
+    async (memberId: string | undefined, checked: boolean) => {
       if (!memberId || !projectId) return;
 
       const updateMembers = async (members: Member[], setAction: any, fetchAction: any) => {
@@ -89,7 +90,9 @@ const MembersFilterDropdown = () => {
       } else {
         await updateMembers(boardTaskAssignees as Member[], setBoardMembers, fetchBoardTaskGroups);
       }
-  }, [projectId, projectView, taskAssignees, boardTaskAssignees, dispatch]);
+    },
+    [projectId, projectView, taskAssignees, boardTaskAssignees, dispatch]
+  );
 
   const renderMemberItem = (member: Member) => (
     <List.Item
@@ -103,11 +106,7 @@ const MembersFilterDropdown = () => {
         onChange={e => handleSelectedFiltersCount(member.id, e.target.checked)}
       >
         <div style={{ display: 'flex', gap: 8, alignItems: 'center' }}>
-          <SingleAvatar
+          <SingleAvatar avatarUrl={member.avatar_url} name={member.name} email={member.email} />
-            avatarUrl={member.avatar_url}
-            name={member.name}
-            email={member.email}
-          />
           <Flex vertical>
             {member.name}
             <Typography.Text style={{ fontSize: 12, color: colors.lightGray }}>
@@ -129,29 +128,36 @@ const MembersFilterDropdown = () => {
           placeholder={t('searchInputPlaceholder')}
         />
         <List style={{ padding: 0, maxHeight: 250, overflow: 'auto' }}>
-          {filteredMembersData.length ? 
+          {filteredMembersData.length ? (
-            filteredMembersData.map((member, index) => renderMemberItem(member as Member)) : 
+            filteredMembersData.map((member, index) => renderMemberItem(member as Member))
+          ) : (
             <Empty />
-          }
+          )}
         </List>
       </Flex>
     </Card>
   );
 
-  const handleMembersDropdownOpen = useCallback((open: boolean) => {
+  const handleMembersDropdownOpen = useCallback(
+    (open: boolean) => {
       if (open) {
         setTimeout(() => membersInputRef.current?.focus(), 0);
         // Only sync the members if board members are empty
-      if (projectView === 'kanban' && boardTaskAssignees.length === 0 && taskAssignees.length > 0) {
+        if (
+          projectView === 'kanban' &&
+          boardTaskAssignees.length === 0 &&
+          taskAssignees.length > 0
+        ) {
           dispatch(setBoardMembers(taskAssignees));
         }
       }
-  }, [dispatch, taskAssignees, boardTaskAssignees, projectView]);
+    },
+    [dispatch, taskAssignees, boardTaskAssignees, projectView]
+  );
 
   const buttonStyle = {
-    backgroundColor: selectedCount > 0
+    backgroundColor:
-      ? themeMode === 'dark' ? '#003a5c' : colors.paleBlue
+      selectedCount > 0 ? (themeMode === 'dark' ? '#003a5c' : colors.paleBlue) : colors.transparent,
-      : colors.transparent,
     color: selectedCount > 0 ? (themeMode === 'dark' ? 'white' : colors.darkGray) : 'inherit',
   };
 
@@ -162,11 +168,7 @@ const MembersFilterDropdown = () => {
       dropdownRender={() => membersDropdownContent}
       onOpenChange={handleMembersDropdownOpen}
     >
-      <Button
+      <Button icon={<CaretDownFilled />} iconPosition="end" style={buttonStyle}>
-        icon={<CaretDownFilled />}
-        iconPosition="end"
-        style={buttonStyle}
-      >
         <Space>
           {t('membersText')}
           {selectedCount > 0 && <Badge size="small" count={selectedCount} color={colors.skyBlue} />}

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/priority-filter-dropdown.tsx

@@ -34,14 +34,12 @@ const PriorityFilterDropdown = ({ priorities }: PriorityFilterDropdownProps) =>
 
   const { projectView } = useTabSearchParam();
 
-  const selectedCount = projectView === 'list' 
+  const selectedCount =
-    ? selectedPriorities.length 
+    projectView === 'list' ? selectedPriorities.length : boardSelectedPriorities.length;
-    : boardSelectedPriorities.length;
 
   const buttonStyle = {
-    backgroundColor: selectedCount > 0
+    backgroundColor:
-      ? themeMode === 'dark' ? '#003a5c' : colors.paleBlue
+      selectedCount > 0 ? (themeMode === 'dark' ? '#003a5c' : colors.paleBlue) : colors.transparent,
-      : colors.transparent,
     color: selectedCount > 0 ? (themeMode === 'dark' ? 'white' : colors.darkGray) : 'inherit',
   };
 
@@ -55,7 +53,8 @@ const PriorityFilterDropdown = ({ priorities }: PriorityFilterDropdownProps) =>
     }
   }, [dispatch, projectId, selectedPriorities, boardSelectedPriorities, projectView]);
 
-  const handleSelectedPriority = useCallback((priorityId: string) => {
+  const handleSelectedPriority = useCallback(
+    (priorityId: string) => {
       if (!projectId) return;
 
       const updatePriorities = (currentPriorities: string[], setAction: any, fetchAction: any) => {
@@ -71,9 +70,12 @@ const PriorityFilterDropdown = ({ priorities }: PriorityFilterDropdownProps) =>
       } else {
         updatePriorities(boardSelectedPriorities, setBoardPriorities, fetchBoardTaskGroups);
       }
-  }, [dispatch, projectId, projectView, selectedPriorities, boardSelectedPriorities]);
+    },
+    [dispatch, projectId, projectView, selectedPriorities, boardSelectedPriorities]
+  );
 
-  const priorityDropdownContent = useMemo(() => (
+  const priorityDropdownContent = useMemo(
+    () => (
       <Card className="custom-card" style={{ width: 120 }} styles={{ body: { padding: 0 } }}>
         <List style={{ padding: 0, maxHeight: 250, overflow: 'auto' }}>
           {priorities?.map(priority => (
@@ -106,7 +108,9 @@ const PriorityFilterDropdown = ({ priorities }: PriorityFilterDropdownProps) =>
           ))}
         </List>
       </Card>
-  ), [priorities, selectedPriorities, boardSelectedPriorities, themeMode, handleSelectedPriority]);
+    ),
+    [priorities, selectedPriorities, boardSelectedPriorities, themeMode, handleSelectedPriority]
+  );
 
   return (
     <Dropdown
@@ -114,16 +118,10 @@ const PriorityFilterDropdown = ({ priorities }: PriorityFilterDropdownProps) =>
       trigger={['click']}
       dropdownRender={() => priorityDropdownContent}
     >
-      <Button
+      <Button icon={<CaretDownFilled />} iconPosition="end" style={buttonStyle}>
-        icon={<CaretDownFilled />}
-        iconPosition="end"
-        style={buttonStyle}
-      >
         <Space>
           {t('priorityText')}
-          {selectedCount > 0 && (
+          {selectedCount > 0 && <Badge size="small" count={selectedCount} color={colors.skyBlue} />}
-            <Badge size="small" count={selectedCount} color={colors.skyBlue} />
-          )}
         </Space>
       </Button>
     </Dropdown>

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/search-dropdown.tsx

@@ -17,7 +17,6 @@ import { SearchOutlined } from '@ant-design/icons';
 
 import { setBoardSearch } from '@/features/board/board-slice';
 
-
 const SearchDropdown = () => {
   const { t } = useTranslation('task-list-filters');
   const dispatch = useDispatch();

worklenz-frontend/src/components/project-task-filters/filter-dropdowns/show-fields-filter-dropdown.tsx

@@ -8,10 +8,7 @@ import React, { useState } from 'react';
 
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import {
+import { updateColumnVisibility, updateCustomColumnPinned } from '@/features/tasks/tasks.slice';
-  updateColumnVisibility,
-  updateCustomColumnPinned,
-} from '@/features/tasks/tasks.slice';
 import { ITaskListColumn } from '@/types/tasks/taskList.types';
 import { useSocket } from '@/socket/socketContext';
 import { SocketEvents } from '@/shared/socket-events';
@@ -37,14 +34,38 @@ const DEFAULT_COLUMN_CONFIG: ColumnConfig[] = [
   { key: 'LABELS', label: 'Labels', showInDropdown: true, order: 7, category: 'basic' },
   { key: 'PHASE', label: 'Phase', showInDropdown: true, order: 8, category: 'basic' },
   { key: 'PRIORITY', label: 'Priority', showInDropdown: true, order: 9, category: 'basic' },
-  { key: 'TIME_TRACKING', label: 'Time Tracking', showInDropdown: true, order: 10, category: 'time' },
+  {
+    key: 'TIME_TRACKING',
+    label: 'Time Tracking',
+    showInDropdown: true,
+    order: 10,
+    category: 'time',
+  },
   { key: 'ESTIMATION', label: 'Estimation', showInDropdown: true, order: 11, category: 'time' },
   { key: 'START_DATE', label: 'Start Date', showInDropdown: true, order: 12, category: 'dates' },
   { key: 'DUE_DATE', label: 'Due Date', showInDropdown: true, order: 13, category: 'dates' },
   { key: 'DUE_TIME', label: 'Due Time', showInDropdown: true, order: 14, category: 'dates' },
-  { key: 'COMPLETED_DATE', label: 'Completed Date', showInDropdown: true, order: 15, category: 'dates' },
+  {
-  { key: 'CREATED_DATE', label: 'Created Date', showInDropdown: true, order: 16, category: 'dates' },
+    key: 'COMPLETED_DATE',
-  { key: 'LAST_UPDATED', label: 'Last Updated', showInDropdown: true, order: 17, category: 'dates' },
+    label: 'Completed Date',
+    showInDropdown: true,
+    order: 15,
+    category: 'dates',
+  },
+  {
+    key: 'CREATED_DATE',
+    label: 'Created Date',
+    showInDropdown: true,
+    order: 16,
+    category: 'dates',
+  },
+  {
+    key: 'LAST_UPDATED',
+    label: 'Last Updated',
+    showInDropdown: true,
+    order: 17,
+    category: 'dates',
+  },
   { key: 'REPORTER', label: 'Reporter', showInDropdown: true, order: 18, category: 'basic' },
 ];
 
@@ -85,7 +106,9 @@ const ShowFieldsFilterDropdown = () => {
   const columnList = useAppSelector(state => state.taskReducer.columns);
   const { projectId, project } = useAppSelector(state => state.projectReducer);
   const [configModalOpen, setConfigModalOpen] = useState(false);
-  const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(useColumnConfig(projectId || undefined));
+  const [columnConfig, setColumnConfig] = useState<ColumnConfig[]>(
+    useColumnConfig(projectId || undefined)
+  );
   const saveColumnConfig = useSaveColumnConfig();
 
   // Update config if projectId changes

worklenz-frontend/src/components/projects/project-create-button/project-create-button.tsx

@@ -82,14 +82,18 @@ const CreateProjectButton: React.FC<CreateProjectButtonProps> = ({ className })
           template_id: currentTemplateId,
         });
         if (res.done) {
-          navigate(`/worklenz/projects/${res.body.project_id}?tab=tasks-list&pinned_tab=tasks-list`);
+          navigate(
+            `/worklenz/projects/${res.body.project_id}?tab=tasks-list&pinned_tab=tasks-list`
+          );
         }
       } else {
         const res = await projectTemplatesApiService.createFromCustomTemplate({
           template_id: currentTemplateId,
         });
         if (res.done) {
-          navigate(`/worklenz/projects/${res.body.project_id}?tab=tasks-list&pinned_tab=tasks-list`);
+          navigate(
+            `/worklenz/projects/${res.body.project_id}?tab=tasks-list&pinned_tab=tasks-list`
+          );
         }
       }
     } catch (e) {

worklenz-frontend/src/components/projects/project-drawer/project-category-section/project-category-section.tsx

@@ -140,7 +140,7 @@ const ProjectCategorySection = ({ categories, form, t, disabled }: ProjectCatego
               onChange={e => setCategoryText(e.currentTarget.value)}
               allowClear
               onClear={() => {
-                setIsAddCategoryInputShow(false)
+                setIsAddCategoryInputShow(false);
               }}
               onPressEnter={() => handleAddCategoryItem(categoryText)}
               onBlur={() => handleAddCategoryInputBlur(categoryText)}

worklenz-frontend/src/components/projects/project-member-invite-drawer/project-member-invite-drawer.tsx

@@ -76,14 +76,16 @@ const ProjectMemberDrawer = () => {
       const res = await dispatch(addProjectMember({ memberId, projectId })).unwrap();
       if (res.done) {
         form.resetFields();
-        dispatch(getTeamMembers({
+        dispatch(
+          getTeamMembers({
             index: 1,
             size: 5,
             field: null,
             order: null,
             search: null,
             all: true,
-        }));        
+          })
+        );
         await fetchProjectMembers();
       }
     } catch (error) {
@@ -135,14 +137,16 @@ const ProjectMemberDrawer = () => {
       if (res.done) {
         form.resetFields();
         await fetchProjectMembers();
-        dispatch(getTeamMembers({
+        dispatch(
+          getTeamMembers({
             index: 1,
             size: 5,
             field: null,
             order: null,
             search: null,
             all: true,
-        }));
+          })
+        );
       }
     } catch (error) {
       logger.error('Error sending invite:', error);

worklenz-frontend/src/components/reporting/drawers/overview-team-info/projects-tab/reporting-overview-projects-tab.tsx

@@ -13,7 +13,6 @@ const OverviewReportsProjectsTab = ({ teamsId = null }: OverviewReportsProjectsT
   const { t } = useTranslation('reporting-projects-drawer');
   const [searchQuery, setSearchQuery] = useState('');
 
-
   return (
     <Flex vertical gap={24}>
       <CustomSearchbar

worklenz-frontend/src/components/reporting/time-wise-filter.tsx

@@ -132,7 +132,11 @@ const TimeWiseFilter = () => {
               {t(item.label)}
             </Typography.Text>
             <Typography.Text type="secondary" style={{ fontSize: 12 }}>
-                {item.dates ? dayjs(item.dates.split(' - ')[0]).format('MMM DD, YYYY') + ' - ' + dayjs(item.dates.split(' - ')[1]).format('MMM DD, YYYY') : ''}
+              {item.dates
+                ? dayjs(item.dates.split(' - ')[0]).format('MMM DD, YYYY') +
+                  ' - ' +
+                  dayjs(item.dates.split(' - ')[1]).format('MMM DD, YYYY')
+                : ''}
             </Typography.Text>
           </List.Item>
         ))}

worklenz-frontend/src/components/schedule/grant-chart/grantt-chart.tsx

@@ -217,7 +217,13 @@ const GranttChart = React.forwardRef(({ type, date }: { type: string; date: Date
               {expandedProject === member.id && (
                 <div>
                   <Popover
-                    content={<ProjectTimelineModal memberId={member?.team_member_id} projectId={selectedProjectId} setIsModalOpen={setIsModalOpen} />}
+                    content={
+                      <ProjectTimelineModal
+                        memberId={member?.team_member_id}
+                        projectId={selectedProjectId}
+                        setIsModalOpen={setIsModalOpen}
+                      />
+                    }
                     trigger={'click'}
                     open={isModalOpen}
                   ></Popover>

worklenz-frontend/src/components/schedule/grant-chart/grantt-members-table.tsx

@@ -2,7 +2,10 @@ import { Badge, Button, Flex, Tooltip } from 'antd';
 import React, { useCallback } from 'react';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import CustomAvatar from '../../CustomAvatar';
-import { fetchMemberProjects, toggleScheduleDrawer } from '../../../features/schedule/scheduleSlice';
+import {
+  fetchMemberProjects,
+  toggleScheduleDrawer,
+} from '../../../features/schedule/scheduleSlice';
 import { CaretDownOutlined, CaretRightFilled } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -38,11 +41,9 @@ const GranttMembersTable = React.memo(
     const handleToggleProject = useCallback(
       (id: string) => {
         if (expandedProject != id) {
-          
           dispatch(fetchMemberProjects({ id }));
         }
         setExpandedProject(expandedProject === id ? null : id);
-
       },
       [expandedProject, setExpandedProject]
     );

worklenz-frontend/src/components/schedule/grant-chart/project-timeline-bar.tsx

@@ -68,7 +68,13 @@ const ProjectTimelineBar = ({
 
   return (
     <Popover
-      content={<ProjectTimelineModal defaultData={defaultData} projectId={project?.id} setIsModalOpen={setIsModalOpen} />}
+      content={
+        <ProjectTimelineModal
+          defaultData={defaultData}
+          projectId={project?.id}
+          setIsModalOpen={setIsModalOpen}
+        />
+      }
       trigger={'click'}
       open={isModalOpen}
     >
@@ -127,7 +133,10 @@ const ProjectTimelineBar = ({
           align="center"
           justify="center"
           style={{ width: '100%' }}
-          onClick={() => {setIsModalOpen(true);dispatch(getWorking());}}
+          onClick={() => {
+            setIsModalOpen(true);
+            dispatch(getWorking());
+          }}
         >
           <Typography.Text
             style={{

worklenz-frontend/src/components/suspense-fallback/suspense-fallback.tsx

@@ -43,11 +43,7 @@ export const InlineSuspenseFallback = memo(() => {
       }}
     >
       <div style={{ width: '100%', maxWidth: '300px' }}>
-        <Skeleton 
+        <Skeleton active paragraph={{ rows: 2, width: ['100%', '70%'] }} title={{ width: '60%' }} />
-          active 
-          paragraph={{ rows: 2, width: ['100%', '70%'] }}
-          title={{ width: '60%' }}
-        />
       </div>
     </div>
   );