Merge pull request #153 from shancds/fix/project-list-issues

feat(locales): add 'enterProjectKey' translation to project drawer fo…

README.md

@@ -1,6 +1,6 @@
 <h1 align="center">
     <a href="https://worklenz.com" target="_blank" rel="noopener noreferrer">
-        <img src="https://app.worklenz.com/assets/icons/icon-144x144.png" alt="Worklenz Logo" width="75">
+        <img src="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/icon-144x144.png" alt="Worklenz Logo" width="75">
     </a>
     <br>
     Worklenz    
@@ -315,6 +315,7 @@ docker-compose up -d
 docker-compose down
 ```
 
+
 ## MinIO Integration
 
 The project uses MinIO as an S3-compatible object storage service, which provides an open-source alternative to AWS S3 for development and production.
@@ -403,6 +404,10 @@ This script generates properly configured environment files for both development
    - Frontend: http://localhost:5000
    - Backend API: http://localhost:3000 (or https://localhost:3000 with SSL)
 
+4. Video Guide
+   
+   For a visual walkthrough of the local Docker deployment process, check out our [step-by-step video guide](https://www.youtube.com/watch?v=AfwAKxJbqLg).
+
 ### Remote Server Deployment
 
 When deploying to a remote server:
@@ -428,6 +433,10 @@ When deploying to a remote server:
    - Frontend: http://your-server-hostname:5000
    - Backend API: http://your-server-hostname:3000
 
+4. Video Guide
+   
+   For a complete walkthrough of deploying Worklenz to a remote server, check out our [deployment video guide](https://www.youtube.com/watch?v=CAZGu2iOXQs&t=10s).
+
 ### Environment Configuration
 
 The Docker setup uses environment variables to configure the services:

docs/recurring-tasks-user-guide.md

@@ -16,24 +16,45 @@ Recurring tasks are tasks that repeat automatically on a schedule you choose. Th
 5. Save the task. It will now be created automatically based on your chosen schedule.
 
 ## Schedule Options
-You can choose how often your task repeats. Here are the most common options:
+You can choose how often your task repeats. Here are the available options:
 
 - **Daily:** The task is created every day.
-- **Weekly:** The task is created once a week. You can pick the day (e.g., every Monday).
+- **Weekly:** The task is created once a week. You can pick one or more days (e.g., every Monday and Thursday).
-- **Monthly:** The task is created once a month. You can pick the date (e.g., the 1st of every month).
+- **Monthly:** The task is created once a month. You have two options:
-- **Weekdays:** The task is created every Monday to Friday.
+  - **On a specific date:** Choose a date from 1 to 28 (limited to 28 to ensure consistency across all months)
-- **Custom:** Set your own schedule, such as every 2 days, every 3 weeks, or only on certain days.
+  - **On a specific day:** Choose a week (first, second, third, fourth, or last) and a day of the week
+- **Every X Days:** The task is created every specified number of days (e.g., every 3 days)
+- **Every X Weeks:** The task is created every specified number of weeks (e.g., every 2 weeks)
+- **Every X Months:** The task is created every specified number of months (e.g., every 3 months)
 
 ### Examples
 - "Send team update" every Friday (weekly)
-- "Submit expense report" on the 1st of each month (monthly)
+- "Submit expense report" on the 15th of each month (monthly, specific date)
+- "Monthly team meeting" on the first Monday of each month (monthly, specific day)
 - "Check backups" every day (daily)
-- "Review project status" every Monday and Thursday (custom)
+- "Review project status" every Monday and Thursday (weekly, multiple days)
+- "Quarterly report" every 3 months (every X months)
+
+## Future Task Creation
+The system automatically creates tasks up to a certain point in the future to ensure timely scheduling:
+
+- **Daily Tasks:** Created up to 7 days in advance
+- **Weekly Tasks:** Created up to 2 weeks in advance
+- **Monthly Tasks:** Created up to 2 months in advance
+- **Every X Days/Weeks/Months:** Created up to 2 intervals in advance
+
+This ensures that:
+- You always have upcoming tasks visible in your schedule
+- Tasks are created at appropriate intervals
+- The system maintains a reasonable number of future tasks
 
 ## Tips
 - You can edit or stop a recurring task at any time.
 - Assign team members and labels to recurring tasks for better organization.
 - Check your task list regularly to see newly created recurring tasks.
+- For monthly tasks, dates are limited to 1-28 to ensure the task occurs on the same date every month.
+- Tasks are created automatically within the future limit window - you don't need to manually create them.
+- If you need to see tasks further in the future, they will be created automatically as the current tasks are completed.
 
 ## Need Help?
 If you have questions or need help setting up recurring tasks, contact your workspace admin or support team.

docs/recurring-tasks.md

@@ -17,6 +17,51 @@ The recurring tasks cron job automates the creation of tasks based on predefined
   3. Checks if a task for the next occurrence already exists.
   4. Creates a new task if it does not exist and the next occurrence is within the allowed future window.
 
+## Future Limit Logic
+The system implements different future limits based on the schedule type to maintain an appropriate number of future tasks:
+
+```typescript
+const FUTURE_LIMITS = {
+  daily: moment.duration(7, 'days'),
+  weekly: moment.duration(2, 'weeks'),
+  monthly: moment.duration(2, 'months'),
+  every_x_days: (interval: number) => moment.duration(interval * 2, 'days'),
+  every_x_weeks: (interval: number) => moment.duration(interval * 2, 'weeks'),
+  every_x_months: (interval: number) => moment.duration(interval * 2, 'months')
+};
+```
+
+### Implementation Details
+- **Base Calculation:**
+  ```typescript
+  const futureLimit = moment(template.last_checked_at || template.created_at)
+    .add(getFutureLimit(schedule.schedule_type, schedule.interval), 'days');
+  ```
+
+- **Task Creation Rules:**
+  1. Only create tasks if the next occurrence is before the future limit
+  2. Skip creation if a task already exists for that date
+  3. Update `last_checked_at` after processing
+
+- **Benefits:**
+  - Prevents excessive task creation
+  - Maintains system performance
+  - Ensures timely task visibility
+  - Allows for schedule modifications
+
+## Date Handling
+- **Monthly Tasks:**
+  - Dates are limited to 1-28 to ensure consistency across all months
+  - This prevents issues with months having different numbers of days
+  - No special handling needed for February or months with 30/31 days
+- **Weekly Tasks:**
+  - Supports multiple days of the week (0-6, where 0 is Sunday)
+  - Tasks are created for each selected day
+- **Interval-based Tasks:**
+  - Every X days/weeks/months from the last task's end date
+  - Minimum interval is 1 day/week/month
+  - No maximum limit, but tasks are only created up to the future limit
+
 ## Database Interactions
 - **Templates and Schedules:**
   - Templates are stored in `task_recurring_templates`.
@@ -27,6 +72,7 @@ The recurring tasks cron job automates the creation of tasks based on predefined
   - Assigns team members and labels by calling appropriate functions/controllers.
 - **State Tracking:**
   - Updates `last_checked_at` and `last_created_task_end_date` in the schedule after processing.
+  - Maintains future limits based on schedule type.
 
 ## Task Creation Process
 1. **Fetch Templates:** Retrieve all templates and their associated schedules.
@@ -41,10 +87,12 @@ The recurring tasks cron job automates the creation of tasks based on predefined
 - **Cron Expression:** Modify the `TIME` constant in the code to change the schedule.
 - **Task Template Structure:** Extend the template or schedule interfaces to support additional fields.
 - **Task Creation Logic:** Customize the task creation process or add new assignment/labeling logic as needed.
+- **Future Window:** Adjust the future limits by modifying the `FUTURE_LIMITS` configuration.
 
 ## Error Handling
 - Errors are logged using the `log_error` utility.
 - The job continues processing other templates even if one fails.
+- Failed task creations are not retried automatically.
 
 ## References
 - Source: `src/cron_jobs/recurring-tasks.ts`

update-docker-env.sh

@@ -73,8 +73,8 @@ cat > worklenz-backend/.env << EOL
 NODE_ENV=production
 PORT=3000
 SESSION_NAME=worklenz.sid
-SESSION_SECRET=change_me_in_production
+SESSION_SECRET=$(openssl rand -base64 48)
-COOKIE_SECRET=change_me_in_production
+COOKIE_SECRET=$(openssl rand -base64 48)
 
 # CORS
 SOCKET_IO_CORS=${FRONTEND_URL}
@@ -123,7 +123,7 @@ SLACK_WEBHOOK=
 COMMIT_BUILD_IMMEDIATELY=true
 
 # JWT Secret
-JWT_SECRET=change_me_in_production
+JWT_SECRET=$(openssl rand -base64 48)
 EOL
 
 echo "Environment configuration updated for ${HOSTNAME} with" $([ "$USE_SSL" = "true" ] && echo "HTTPS/WSS" || echo "HTTP/WS")

worklenz-backend/.env.template

@@ -79,3 +79,7 @@ GOOGLE_CAPTCHA_PASS_SCORE=0.8
 
 # Email Cronjobs
 ENABLE_EMAIL_CRONJOBS=true
+
+# RECURRING_JOBS
+ENABLE_RECURRING_JOBS=true
+RECURRING_JOBS_INTERVAL="0 11 */1 * 1-5"

worklenz-backend/Gruntfile.js

@@ -1,131 +0,0 @@
-module.exports = function (grunt) {
-
-  // Project configuration.
-  grunt.initConfig({
-    pkg: grunt.file.readJSON("package.json"),
-    clean: {
-      dist: "build"
-    },
-    compress: require("./grunt/grunt-compress"),
-    copy: {
-      main: {
-        files: [
-          {expand: true, cwd: "src", src: ["public/**"], dest: "build"},
-          {expand: true, cwd: "src", src: ["views/**"], dest: "build"},
-          {expand: true, cwd: "landing-page-assets", src: ["**"], dest: "build/public/assets"},
-          {expand: true, cwd: "src", src: ["shared/sample-data.json"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "src", src: ["shared/templates/**"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "src", src: ["shared/postgresql-error-codes.json"], dest: "build", filter: "isFile"},
-        ]
-      },
-      packages: {
-        files: [
-          {expand: true, cwd: "", src: [".env"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: [".gitignore"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: ["release"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: ["jest.config.js"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: ["package.json"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: ["package-lock.json"], dest: "build", filter: "isFile"},
-          {expand: true, cwd: "", src: ["common_modules/**"], dest: "build"}
-        ]
-      }
-    },
-    sync: {
-      main: {
-        files: [
-          {cwd: "src", src: ["views/**", "public/**"], dest: "build/"}, // makes all src relative to cwd
-        ],
-        verbose: true,
-        failOnError: true,
-        compareUsing: "md5"
-      }
-    },
-    uglify: {
-      all: {
-        files: [{
-          expand: true,
-          cwd: "build",
-          src: "**/*.js",
-          dest: "build"
-        }]
-      },
-      controllers: {
-        files: [{
-          expand: true,
-          cwd: "build",
-          src: "controllers/*.js",
-          dest: "build"
-        }]
-      },
-      routes: {
-        files: [{
-          expand: true,
-          cwd: "build",
-          src: "routes/**/*.js",
-          dest: "build"
-        }]
-      },
-      assets: {
-        files: [{
-          expand: true,
-          cwd: "build",
-          src: "public/assets/**/*.js",
-          dest: "build"
-        }]
-      }
-    },
-    shell: {
-      tsc: {
-        command: "tsc --build tsconfig.prod.json"
-      },
-      esbuild: {
-        // command: "esbuild `find src -type f -name '*.ts'` --platform=node --minify=false --target=esnext --format=cjs --tsconfig=tsconfig.prod.json --outdir=build"
-        command: "node esbuild && node cli/esbuild-patch"
-      },
-      tsc_dev: {
-        command: "tsc --build tsconfig.json"
-      },
-      swagger: {
-        command: "node ./cli/swagger"
-      },
-      inline_queries: {
-        command: "node ./cli/inline-queries"
-      }
-    },
-    watch: {
-      scripts: {
-        files: ["src/**/*.ts"],
-        tasks: ["shell:tsc_dev"],
-        options: {
-          debounceDelay: 250,
-          spawn: false,
-        }
-      },
-      other: {
-        files: ["src/**/*.pug", "landing-page-assets/**"],
-        tasks: ["sync"]
-      }
-    }
-  });
-
-  grunt.registerTask("clean", ["clean"]);
-  grunt.registerTask("copy", ["copy:main"]);
-  grunt.registerTask("swagger", ["shell:swagger"]);
-  grunt.registerTask("build:tsc", ["shell:tsc"]);
-  grunt.registerTask("build", ["clean", "shell:tsc", "copy:main", "compress"]);
-  grunt.registerTask("build:es", ["clean", "shell:esbuild", "copy:main", "uglify:assets", "compress"]);
-  grunt.registerTask("build:strict", ["clean", "shell:tsc", "copy:packages", "uglify:all", "copy:main", "compress"]);
-  grunt.registerTask("dev", ["clean", "copy:main", "shell:tsc_dev", "shell:inline_queries", "watch"]);
-
-  // Load the plugin that provides the "uglify" task.
-  grunt.loadNpmTasks("grunt-contrib-watch");
-  grunt.loadNpmTasks("grunt-contrib-clean");
-  grunt.loadNpmTasks("grunt-contrib-copy");
-  grunt.loadNpmTasks("grunt-contrib-uglify");
-  grunt.loadNpmTasks("grunt-contrib-compress");
-  grunt.loadNpmTasks("grunt-shell");
-  grunt.loadNpmTasks("grunt-sync");
-
-  // Default task(s).
-  grunt.registerTask("default", []);
-};

worklenz-backend/database/migrations/consolidated-progress-migrations.sql

@@ -118,7 +118,7 @@ BEGIN
                         SELECT SUM(time_spent)
                         FROM task_work_log
                         WHERE task_id = t.id
-                    ), 0) / 60.0 as logged_minutes
+                    ), 0) as logged_minutes
                 FROM tasks t
                 WHERE t.id = _task_id
             )

worklenz-backend/database/sql/4_functions.sql

@@ -3351,15 +3351,15 @@ BEGIN
     SELECT COALESCE(ARRAY_TO_JSON(ARRAY_AGG(ROW_TO_JSON(rec))), '[]'::JSON)
     FROM (SELECT team_member_id,
                  project_member_id,
-                 (SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id),
+                 COALESCE((SELECT name FROM team_member_info_view WHERE team_member_info_view.team_member_id = tm.id), '') as name,
-                 (SELECT email_notifications_enabled
+                 COALESCE((SELECT email_notifications_enabled
                   FROM notification_settings
                   WHERE team_id = tm.team_id
-                    AND notification_settings.user_id = u.id) AS email_notifications_enabled,
+                    AND notification_settings.user_id = u.id), false) AS email_notifications_enabled,
-                 u.avatar_url,
+                 COALESCE(u.avatar_url, '') as avatar_url,
                  u.id AS user_id,
-                 u.email,
+                 COALESCE(u.email, '') as email,
-                 u.socket_id AS socket_id,
+                 COALESCE(u.socket_id, '') as socket_id,
                  tm.team_id AS team_id
           FROM tasks_assignees
                    INNER JOIN team_members tm ON tm.id = tasks_assignees.team_member_id
@@ -4066,14 +4066,14 @@ DECLARE
     _schedule_id          JSON;
     _task_completed_at    TIMESTAMPTZ;
 BEGIN
-    SELECT name FROM tasks WHERE id = _task_id INTO _task_name;
+    SELECT COALESCE(name, '') FROM tasks WHERE id = _task_id INTO _task_name;
 
-    SELECT name
+    SELECT COALESCE(name, '')
     FROM task_statuses
     WHERE id = (SELECT status_id FROM tasks WHERE id = _task_id)
     INTO _previous_status_name;
 
-    SELECT name FROM task_statuses WHERE id = _status_id INTO _new_status_name;
+    SELECT COALESCE(name, '') FROM task_statuses WHERE id = _status_id INTO _new_status_name;
 
     IF (_previous_status_name != _new_status_name)
     THEN
@@ -4081,14 +4081,22 @@ BEGIN
 
         SELECT get_task_complete_info(_task_id, _status_id) INTO _task_info;
 
-        SELECT name FROM users WHERE id = _user_id INTO _updater_name;
+        SELECT COALESCE(name, '') FROM users WHERE id = _user_id INTO _updater_name;
 
         _message = CONCAT(_updater_name, ' transitioned "', _task_name, '" from ', _previous_status_name, ' ⟶ ',
                           _new_status_name);
     END IF;
 
     SELECT completed_at FROM tasks WHERE id = _task_id INTO _task_completed_at;
-    SELECT schedule_id FROM tasks WHERE id = _task_id INTO _schedule_id;
+    
+    -- Handle schedule_id properly for recurring tasks
+    SELECT CASE 
+        WHEN schedule_id IS NULL THEN 'null'::json
+        ELSE json_build_object('id', schedule_id)
+    END
+    FROM tasks 
+    WHERE id = _task_id 
+    INTO _schedule_id;
 
     SELECT COALESCE(ROW_TO_JSON(r), '{}'::JSON)
     FROM (SELECT is_done, is_doing, is_todo
@@ -4097,7 +4105,7 @@ BEGIN
     INTO _status_category;
 
     RETURN JSON_BUILD_OBJECT(
-            'message', _message,
+            'message', COALESCE(_message, ''),
             'project_id', (SELECT project_id FROM tasks WHERE id = _task_id),
             'parent_done', (CASE
                                 WHEN EXISTS(SELECT 1
@@ -4105,14 +4113,14 @@ BEGIN
                                             WHERE tasks_with_status_view.task_id = _task_id
                                               AND is_done IS TRUE) THEN 1
                                 ELSE 0 END),
-            'color_code', (_task_info ->> 'color_code')::TEXT,
+            'color_code', COALESCE((_task_info ->> 'color_code')::TEXT, ''),
-            'color_code_dark', (_task_info ->> 'color_code_dark')::TEXT,
+            'color_code_dark', COALESCE((_task_info ->> 'color_code_dark')::TEXT, ''),
-            'total_tasks', (_task_info ->> 'total_tasks')::INT,
+            'total_tasks', COALESCE((_task_info ->> 'total_tasks')::INT, 0),
-            'total_completed', (_task_info ->> 'total_completed')::INT,
+            'total_completed', COALESCE((_task_info ->> 'total_completed')::INT, 0),
-            'members', (_task_info ->> 'members')::JSON,
+            'members', COALESCE((_task_info ->> 'members')::JSON, '[]'::JSON),
             'completed_at', _task_completed_at,
-            'status_category', _status_category,
+            'status_category', COALESCE(_status_category, '{}'::JSON),
-            'schedule_id', _schedule_id
+            'schedule_id', COALESCE(_schedule_id, 'null'::JSON)
            );
 END
 $$;
@@ -6148,3 +6156,219 @@ BEGIN
     RETURN v_new_id;
 END;
 $$;
+
+CREATE OR REPLACE FUNCTION transfer_team_ownership(_team_id UUID, _new_owner_id UUID) RETURNS json
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _old_owner_id UUID;
+    _owner_role_id UUID;
+    _admin_role_id UUID;
+    _old_org_id UUID;
+    _new_org_id UUID;
+    _has_license BOOLEAN;
+    _old_owner_role_id UUID;
+    _new_owner_role_id UUID;
+    _has_active_coupon BOOLEAN;
+    _other_teams_count INTEGER;
+    _new_owner_org_id UUID;
+    _license_type_id UUID;
+    _has_valid_license BOOLEAN;
+BEGIN
+    -- Get the current owner's ID and organization
+    SELECT t.user_id, t.organization_id 
+    INTO _old_owner_id, _old_org_id 
+    FROM teams t 
+    WHERE t.id = _team_id;
+    
+    IF _old_owner_id IS NULL THEN
+        RAISE EXCEPTION 'Team not found';
+    END IF;
+
+    -- Get the new owner's organization
+    SELECT organization_id INTO _new_owner_org_id
+    FROM organizations
+    WHERE user_id = _new_owner_id;
+
+    -- Get the old organization
+    SELECT id INTO _old_org_id
+    FROM organizations
+    WHERE id = _old_org_id;
+
+    IF _old_org_id IS NULL THEN
+        RAISE EXCEPTION 'Organization not found';
+    END IF;
+
+    -- Check if new owner has any valid license type
+    SELECT EXISTS (
+        SELECT 1 
+        FROM (
+            -- Check regular subscriptions
+            SELECT lus.user_id, lus.status, lus.active
+            FROM licensing_user_subscriptions lus
+            WHERE lus.user_id = _new_owner_id 
+            AND lus.active = TRUE
+            AND lus.status IN ('active', 'trialing')
+            
+            UNION ALL
+            
+            -- Check custom subscriptions
+            SELECT lcs.user_id, lcs.subscription_status as status, TRUE as active
+            FROM licensing_custom_subs lcs
+            WHERE lcs.user_id = _new_owner_id
+            AND lcs.end_date > CURRENT_DATE
+            
+            UNION ALL
+            
+            -- Check trial status in organizations
+            SELECT o.user_id, o.subscription_status as status, TRUE as active
+            FROM organizations o
+            WHERE o.user_id = _new_owner_id
+            AND o.trial_in_progress = TRUE
+            AND o.trial_expire_date > CURRENT_DATE
+        ) valid_licenses
+    ) INTO _has_valid_license;
+
+    IF NOT _has_valid_license THEN
+        RAISE EXCEPTION 'New owner does not have a valid license (subscription, custom subscription, or trial)';
+    END IF;
+
+    -- Check if new owner has any active coupon codes
+    SELECT EXISTS (
+        SELECT 1 
+        FROM licensing_coupon_codes lcc
+        WHERE lcc.redeemed_by = _new_owner_id 
+        AND lcc.is_redeemed = TRUE
+        AND lcc.is_refunded = FALSE
+    ) INTO _has_active_coupon;
+
+    IF _has_active_coupon THEN
+        RAISE EXCEPTION 'New owner has active coupon codes that need to be handled before transfer';
+    END IF;
+
+    -- Count other teams in the organization for information purposes
+    SELECT COUNT(*) INTO _other_teams_count
+    FROM teams
+    WHERE organization_id = _old_org_id
+    AND id != _team_id;
+
+    -- If new owner has their own organization, move the team to their organization
+    IF _new_owner_org_id IS NOT NULL THEN
+        -- Update the team to use the new owner's organization
+        UPDATE teams 
+        SET user_id = _new_owner_id,
+            organization_id = _new_owner_org_id
+        WHERE id = _team_id;
+        
+        -- Create notification about organization change
+        PERFORM create_notification(
+            _old_owner_id,
+            _team_id,
+            NULL,
+            NULL,
+            CONCAT('Team <b>', (SELECT name FROM teams WHERE id = _team_id), '</b> has been moved to a different organization')
+        );
+
+        PERFORM create_notification(
+            _new_owner_id,
+            _team_id,
+            NULL,
+            NULL,
+            CONCAT('Team <b>', (SELECT name FROM teams WHERE id = _team_id), '</b> has been moved to your organization')
+        );
+    ELSE
+        -- If new owner doesn't have an organization, transfer the old organization to them
+        UPDATE organizations
+        SET user_id = _new_owner_id
+        WHERE id = _old_org_id;
+        
+        -- Update the team to use the same organization
+        UPDATE teams 
+        SET user_id = _new_owner_id,
+            organization_id = _old_org_id
+        WHERE id = _team_id;
+
+        -- Notify both users about organization ownership transfer
+        PERFORM create_notification(
+            _old_owner_id,
+            NULL,
+            NULL,
+            NULL,
+            CONCAT('You are no longer the owner of organization <b>', (SELECT organization_name FROM organizations WHERE id = _old_org_id), '</b>')
+        );
+
+        PERFORM create_notification(
+            _new_owner_id,
+            NULL,
+            NULL,
+            NULL,
+            CONCAT('You are now the owner of organization <b>', (SELECT organization_name FROM organizations WHERE id = _old_org_id), '</b>')
+        );
+    END IF;
+    
+    -- Get the owner and admin role IDs
+    SELECT id INTO _owner_role_id FROM roles WHERE team_id = _team_id AND owner = TRUE;
+    SELECT id INTO _admin_role_id FROM roles WHERE team_id = _team_id AND admin_role = TRUE;
+
+    -- Get current role IDs for both users
+    SELECT role_id INTO _old_owner_role_id 
+    FROM team_members 
+    WHERE team_id = _team_id AND user_id = _old_owner_id;
+
+    SELECT role_id INTO _new_owner_role_id 
+    FROM team_members 
+    WHERE team_id = _team_id AND user_id = _new_owner_id;
+    
+    -- Update the old owner's role to admin if they want to stay in the team
+    IF _old_owner_role_id IS NOT NULL THEN
+        UPDATE team_members 
+        SET role_id = _admin_role_id 
+        WHERE team_id = _team_id AND user_id = _old_owner_id;
+    END IF;
+    
+    -- Update the new owner's role to owner
+    IF _new_owner_role_id IS NOT NULL THEN
+        UPDATE team_members 
+        SET role_id = _owner_role_id 
+        WHERE team_id = _team_id AND user_id = _new_owner_id;
+    ELSE
+        -- If new owner is not a team member yet, add them
+        INSERT INTO team_members (user_id, team_id, role_id)
+        VALUES (_new_owner_id, _team_id, _owner_role_id);
+    END IF;
+
+    -- Create notification for both users about team ownership
+    PERFORM create_notification(
+        _old_owner_id,
+        _team_id,
+        NULL,
+        NULL,
+        CONCAT('You are no longer the owner of team <b>', (SELECT name FROM teams WHERE id = _team_id), '</b>')
+    );
+
+    PERFORM create_notification(
+        _new_owner_id,
+        _team_id,
+        NULL,
+        NULL,
+        CONCAT('You are now the owner of team <b>', (SELECT name FROM teams WHERE id = _team_id), '</b>')
+    );
+    
+    RETURN json_build_object(
+        'success', TRUE,
+        'old_owner_id', _old_owner_id,
+        'new_owner_id', _new_owner_id,
+        'team_id', _team_id,
+        'old_org_id', _old_org_id,
+        'new_org_id', COALESCE(_new_owner_org_id, _old_org_id),
+        'old_role_id', _old_owner_role_id,
+        'new_role_id', _new_owner_role_id,
+        'has_valid_license', _has_valid_license,
+        'has_active_coupon', _has_active_coupon,
+        'other_teams_count', _other_teams_count,
+        'org_ownership_transferred', _new_owner_org_id IS NULL,
+        'team_moved_to_new_org', _new_owner_org_id IS NOT NULL
+    );
+END;
+$$;

worklenz-backend/package.json

@@ -11,16 +11,30 @@
   "repository": "GITHUB_REPO_HERE",
   "author": "worklenz.com",
   "scripts": {
-    "start": "node ./build/bin/www",
+    "test": "jest",
-    "tcs": "grunt build:tsc",
+    "start": "node build/bin/www.js",
-    "build": "grunt build",
+    "dev": "npm run build:dev && npm run watch",
-    "watch": "grunt watch",
+    "build": "npm run clean && npm run compile && npm run copy && npm run compress",
-    "dev": "grunt dev",
+    "build:dev": "npm run clean && npm run compile:dev && npm run copy",
-    "es": "esbuild `find src -type f -name '*.ts'` --platform=node --minify=true --watch=true --target=esnext --format=cjs --tsconfig=tsconfig.prod.json --outdir=dist",
+    "build:prod": "npm run clean && npm run compile:prod && npm run copy && npm run minify && npm run compress",
-    "copy": "grunt copy",
+    "clean": "rimraf build",
+    "compile": "tsc --build tsconfig.prod.json",
+    "compile:dev": "tsc --build tsconfig.json",
+    "compile:prod": "tsc --build tsconfig.prod.json",
+    "copy": "npm run copy:assets && npm run copy:views && npm run copy:config && npm run copy:shared",
+    "copy:assets": "npx cpx2 \"src/public/**\" build/public",
+    "copy:views": "npx cpx2 \"src/views/**\" build/views",
+    "copy:config": "npx cpx2 \".env\" build && npx cpx2 \"package.json\" build",
+    "copy:shared": "npx cpx2 \"src/shared/postgresql-error-codes.json\" build/shared && npx cpx2 \"src/shared/sample-data.json\" build/shared && npx cpx2 \"src/shared/templates/**\" build/shared/templates",
+    "watch": "concurrently \"npm run watch:ts\" \"npm run watch:assets\"",
+    "watch:ts": "tsc --build tsconfig.json --watch",
+    "watch:assets": "npx cpx2 \"src/{public,views}/**\" build --watch",
+    "minify": "terser build/**/*.js --compress --mangle --output-dir build",
+    "compress": "node scripts/compress.js",
+    "swagger": "node ./cli/swagger",
+    "inline-queries": "node ./cli/inline-queries",
     "sonar": "sonar-scanner -Dproject.settings=sonar-project-dev.properties",
     "tsc": "tsc",
-    "test": "jest --setupFiles dotenv/config",
     "test:watch": "jest --watch --setupFiles dotenv/config"
   },
   "jestSonar": {
@@ -45,6 +59,7 @@
     "cors": "^2.8.5",
     "cron": "^2.4.0",
     "crypto-js": "^4.1.1",
+    "csrf-sync": "^4.2.1",
     "csurf": "^1.11.0",
     "debug": "^4.3.4",
     "dotenv": "^16.3.1",
@@ -120,26 +135,22 @@
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
     "chokidar": "^3.5.3",
+    "concurrently": "^9.1.2",
+    "cpx2": "^8.0.0",
     "esbuild": "^0.17.19",
     "esbuild-envfile-plugin": "^1.0.5",
     "esbuild-node-externals": "^1.8.0",
     "eslint": "^8.45.0",
     "eslint-plugin-security": "^1.7.1",
     "fs-extra": "^10.1.0",
-    "grunt": "^1.6.1",
-    "grunt-contrib-clean": "^2.0.1",
-    "grunt-contrib-compress": "^2.0.0",
-    "grunt-contrib-copy": "^1.0.0",
-    "grunt-contrib-uglify": "^5.2.2",
-    "grunt-contrib-watch": "^1.1.0",
-    "grunt-shell": "^4.0.0",
-    "grunt-sync": "^0.8.2",
     "highcharts": "^11.1.0",
     "jest": "^28.1.3",
     "jest-sonar-reporter": "^2.0.0",
     "ncp": "^2.0.0",
     "nodeman": "^1.1.2",
+    "rimraf": "^6.0.1",
     "swagger-jsdoc": "^6.2.8",
+    "terser": "^5.40.0",
     "ts-jest": "^28.0.8",
     "ts-node": "^10.9.1",
     "tslint": "^6.1.3",

worklenz-backend/scripts/compress.js

@@ -0,0 +1,53 @@
+const fs = require('fs');
+const path = require('path');
+const { createGzip } = require('zlib');
+const { pipeline } = require('stream');
+
+async function compressFile(inputPath, outputPath) {
+  return new Promise((resolve, reject) => {
+    const gzip = createGzip();
+    const source = fs.createReadStream(inputPath);
+    const destination = fs.createWriteStream(outputPath);
+
+    pipeline(source, gzip, destination, (err) => {
+      if (err) {
+        reject(err);
+      } else {
+        resolve();
+      }
+    });
+  });
+}
+
+async function compressDirectory(dir) {
+  const files = fs.readdirSync(dir, { withFileTypes: true });
+  
+  for (const file of files) {
+    const fullPath = path.join(dir, file.name);
+    
+    if (file.isDirectory()) {
+      await compressDirectory(fullPath);
+    } else if (file.name.endsWith('.js') || file.name.endsWith('.css')) {
+      const gzPath = fullPath + '.gz';
+      await compressFile(fullPath, gzPath);
+      console.log(`Compressed: ${fullPath} -> ${gzPath}`);
+    }
+  }
+}
+
+async function main() {
+  try {
+    const buildDir = path.join(__dirname, '../build');
+    if (fs.existsSync(buildDir)) {
+      await compressDirectory(buildDir);
+      console.log('Compression complete!');
+    } else {
+      console.log('Build directory not found. Run build first.');
+    }
+  } catch (error) {
+    console.error('Compression failed:', error);
+    process.exit(1);
+  }
+}
+
+main(); 

worklenz-backend/src/app.ts

@@ -6,7 +6,7 @@ import logger from "morgan";
 import helmet from "helmet";
 import compression from "compression";
 import passport from "passport";
-import csurf from "csurf";
+import { csrfSync } from "csrf-sync";
 import rateLimit from "express-rate-limit";
 import cors from "cors";
 import flash from "connect-flash";
@@ -112,17 +112,13 @@ function isLoggedIn(req: Request, _res: Response, next: NextFunction) {
   return req.user ? next() : next(createError(401));
 }
 
-// CSRF configuration
+// CSRF configuration using csrf-sync for session-based authentication
-const csrfProtection = csurf({
+const {
-  cookie: {
+  invalidCsrfTokenError,
-    key: "XSRF-TOKEN",
+  generateToken,
-    path: "/",
+  csrfSynchronisedProtection,
-    httpOnly: false,
+} = csrfSync({
-    secure: isProduction(), // Only secure in production
+  getTokenFromRequest: (req: Request) => req.headers["x-csrf-token"] as string || (req.body && req.body["_csrf"])
-    sameSite: isProduction() ? "none" : "lax", // Different settings for dev vs prod
-    domain: isProduction() ? ".worklenz.com" : undefined // Only set domain in production
-  },
-  ignoreMethods: ["HEAD", "OPTIONS"]
 });
 
 // Apply CSRF selectively (exclude webhooks and public routes)
@@ -135,38 +131,25 @@ app.use((req, res, next) => {
   ) {
     next();
   } else {
-    csrfProtection(req, res, next);
+    csrfSynchronisedProtection(req, res, next);
   }
 });
 
-// Set CSRF token cookie
+// Set CSRF token method on request object for compatibility
 app.use((req: Request, res: Response, next: NextFunction) => {
-  if (req.csrfToken) {
+  // Add csrfToken method to request object for compatibility
-    const token = req.csrfToken();
+  if (!req.csrfToken && generateToken) {
-    res.cookie("XSRF-TOKEN", token, {
+    req.csrfToken = (overwrite?: boolean) => generateToken(req, overwrite);
-      httpOnly: false,
-      secure: isProduction(),
-      sameSite: isProduction() ? "none" : "lax",
-      domain: isProduction() ? ".worklenz.com" : undefined,
-      path: "/"
-    });
   }
   next();
 });
 
 // CSRF token refresh endpoint
 app.get("/csrf-token", (req: Request, res: Response) => {
-  if (req.csrfToken) {
+  try {
-    const token = req.csrfToken();
+    const token = generateToken(req);
-    res.cookie("XSRF-TOKEN", token, {
+    res.status(200).json({ done: true, message: "CSRF token refreshed", token });
-      httpOnly: false,
+  } catch (error) {
-      secure: isProduction(),
-      sameSite: isProduction() ? "none" : "lax",
-      domain: isProduction() ? ".worklenz.com" : undefined,
-      path: "/"
-    });
-    res.status(200).json({ done: true, message: "CSRF token refreshed" });
-  } else {
     res.status(500).json({ done: false, message: "Failed to generate CSRF token" });
   }
 });
@@ -219,7 +202,7 @@ if (isInternalServer()) {
 
 // CSRF error handler
 app.use((err: any, req: Request, res: Response, next: NextFunction) => {
-  if (err.code === "EBADCSRFTOKEN") {
+  if (err === invalidCsrfTokenError) {
     return res.status(403).json({
       done: false,
       message: "Invalid CSRF token",

worklenz-backend/src/controllers/auth-controller.ts

@@ -35,8 +35,18 @@ export default class AuthController extends WorklenzControllerBase {
     const auth_error = errors.length > 0 ? errors[0] : null;
     const message = messages.length > 0 ? messages[0] : null;
 
-    const midTitle = req.query.strategy === "login" ? "Login Failed!" : "Signup Failed!";
+    // Determine title based on authentication status and strategy
-    const title = req.query.strategy ? midTitle : null;
+    let title = null;
+    if (req.query.strategy) {
+      if (auth_error) {
+        // Show failure title only when there's an actual error
+        title = req.query.strategy === "login" ? "Login Failed!" : "Signup Failed!";
+      } else if (req.isAuthenticated() && message) {
+        // Show success title when authenticated and there's a success message
+        title = req.query.strategy === "login" ? "Login Successful!" : "Signup Successful!";
+      }
+      // If no error and not authenticated, don't show any title (this might be a redirect without completion)
+    }
 
     if (req.user)
       req.user.build_v = FileConstants.getRelease();

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

@@ -415,20 +415,15 @@ export default class ReportingController extends WorklenzControllerBase {
 
   @HandleExceptions()
   public static async getMyTeams(req: IWorkLenzRequest, res: IWorkLenzResponse): Promise<IWorkLenzResponse> {
-    const selectedTeamId = req.user?.team_id;
-    if (!selectedTeamId) {
-      return res.status(400).send(new ServerResponse(false, "No selected team"));
-    }
     const q = `SELECT team_id AS id, name
                FROM team_members tm
                       LEFT JOIN teams ON teams.id = tm.team_id
                WHERE tm.user_id = $1
-                 AND tm.team_id = $2
                  AND role_id IN (SELECT id
                                  FROM roles
                                  WHERE (admin_role IS TRUE OR owner IS TRUE))
                ORDER BY name;`;
-    const result = await db.query(q, [req.user?.id, selectedTeamId]);
+    const result = await db.query(q, [req.user?.id]);
     result.rows.forEach((team: any) => team.selected = true);
     return res.status(200).send(new ServerResponse(true, result.rows));
   }

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

@@ -445,52 +445,27 @@ export default class ReportingAllocationController extends ReportingControllerBa
       }
     }
 
-    // Get organization working days
+    // Count only weekdays (Mon-Fri) in the period
-    const orgWorkingDaysQuery = `
-      SELECT monday, tuesday, wednesday, thursday, friday, saturday, sunday
-      FROM organization_working_days
-      WHERE organization_id IN (
-        SELECT t.organization_id 
-        FROM teams t 
-        WHERE t.id IN (${teamIds})
-        LIMIT 1
-      );
-    `;
-    const orgWorkingDaysResult = await db.query(orgWorkingDaysQuery, []);
-    const workingDaysConfig = orgWorkingDaysResult.rows[0] || {
-      monday: true,
-      tuesday: true,
-      wednesday: true,
-      thursday: true,
-      friday: true,
-      saturday: false,
-      sunday: false
-    };
-
-    // Count working days based on organization settings
     let workingDays = 0;
     let current = startDate.clone();
     while (current.isSameOrBefore(endDate, 'day')) {
       const day = current.isoWeekday();
-      if (
+      if (day >= 1 && day <= 5) workingDays++;
-        (day === 1 && workingDaysConfig.monday) ||
-        (day === 2 && workingDaysConfig.tuesday) ||
-        (day === 3 && workingDaysConfig.wednesday) ||
-        (day === 4 && workingDaysConfig.thursday) ||
-        (day === 5 && workingDaysConfig.friday) ||
-        (day === 6 && workingDaysConfig.saturday) ||
-        (day === 7 && workingDaysConfig.sunday)
-      ) {
-        workingDays++;
-      }
       current.add(1, 'day');
     }
 
-    // Get organization working hours
+    // Get hours_per_day for all selected projects
-    const orgWorkingHoursQuery = `SELECT working_hours FROM organizations WHERE id = (SELECT t.organization_id FROM teams t WHERE t.id IN (${teamIds}) LIMIT 1)`;
+    const projectHoursQuery = `SELECT id, hours_per_day FROM projects WHERE id IN (${projectIds})`;
-    const orgWorkingHoursResult = await db.query(orgWorkingHoursQuery, []);
+    const projectHoursResult = await db.query(projectHoursQuery, []);
-    const orgWorkingHours = orgWorkingHoursResult.rows[0]?.working_hours || 8;
+    const projectHoursMap: Record<string, number> = {};
-    let totalWorkingHours = workingDays * orgWorkingHours;
+    for (const row of projectHoursResult.rows) {
+      projectHoursMap[row.id] = row.hours_per_day || 8;
+    }
+    // Sum total working hours for all selected projects
+    let totalWorkingHours = 0;
+    for (const pid of Object.keys(projectHoursMap)) {
+      totalWorkingHours += workingDays * projectHoursMap[pid];
+    }
 
     const durationClause = this.getDateRangeClause(duration || DATE_RANGES.LAST_WEEK, date_range);
     const archivedClause = archived
@@ -515,19 +490,12 @@ export default class ReportingAllocationController extends ReportingControllerBa
       member.value = member.logged_time ? parseFloat(moment.duration(member.logged_time, "seconds").asHours().toFixed(2)) : 0;
       member.color_code = getColor(member.name);
       member.total_working_hours = totalWorkingHours;
-      if (totalWorkingHours === 0) {
+      member.utilization_percent = (totalWorkingHours > 0 && member.logged_time) ? ((parseFloat(member.logged_time) / (totalWorkingHours * 3600)) * 100).toFixed(2) : '0.00';
-        member.utilization_percent = member.logged_time && parseFloat(member.logged_time) > 0 ? 'N/A' : '0.00';
-        member.utilized_hours = member.logged_time ? (parseFloat(member.logged_time) / 3600).toFixed(2) : '0.00';
-        // Over/under utilized hours: all logged time is over-utilized
-        member.over_under_utilized_hours = member.utilized_hours;
-      } else {
-        member.utilization_percent = (member.logged_time && totalWorkingHours > 0) ? ((parseFloat(member.logged_time) / (totalWorkingHours * 3600)) * 100).toFixed(2) : '0.00';
       member.utilized_hours = member.logged_time ? (parseFloat(member.logged_time) / 3600).toFixed(2) : '0.00';
       // Over/under utilized hours: utilized_hours - total_working_hours
       const overUnder = member.utilized_hours && member.total_working_hours ? (parseFloat(member.utilized_hours) - member.total_working_hours) : 0;
       member.over_under_utilized_hours = overUnder.toFixed(2);
     }
-    }
 
     return res.status(200).send(new ServerResponse(true, result.rows));
   }

worklenz-backend/src/controllers/schedule-v2/schedule-controller.ts

@@ -74,9 +74,14 @@ export default class ScheduleControllerV2 extends WorklenzControllerBase {
             .map(day => `${day.toLowerCase()} = ${workingDays.includes(day)}`)
             .join(", ");
 
-        const updateQuery = `UPDATE public.organization_working_days
+        const updateQuery = `
+      UPDATE public.organization_working_days
       SET ${setClause}, updated_at = CURRENT_TIMESTAMP
-      WHERE organization_id IN (SELECT id FROM organizations WHERE user_id = $1);`;
+      WHERE organization_id IN (
+                                SELECT organization_id FROM organizations 
+                                WHERE user_id = $1
+                            );
+    `;
 
         await db.query(updateQuery, [req.user?.owner_id]);
 

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

@@ -1,6 +1,6 @@
 import WorklenzControllerBase from "./worklenz-controller-base";
-import {getColor} from "../shared/utils";
+import { getColor } from "../shared/utils";
-import {PriorityColorCodes, TASK_PRIORITY_COLOR_ALPHA, TASK_STATUS_COLOR_ALPHA} from "../shared/constants";
+import { PriorityColorCodes, TASK_PRIORITY_COLOR_ALPHA, TASK_STATUS_COLOR_ALPHA } from "../shared/constants";
 import moment from "moment/moment";
 
 export const GroupBy = {
@@ -32,23 +32,14 @@ export default class TasksControllerBase extends WorklenzControllerBase {
   }
 
   public static updateTaskViewModel(task: any) {
-    console.log(`Processing task ${task.id} (${task.name})`);
-    console.log(`  manual_progress: ${task.manual_progress}, progress_value: ${task.progress_value}`);
-    console.log(`  project_use_manual_progress: ${task.project_use_manual_progress}, project_use_weighted_progress: ${task.project_use_weighted_progress}`);
-    console.log(`  has subtasks: ${task.sub_tasks_count > 0}`);
-    
     // For parent tasks (with subtasks), always use calculated progress from subtasks
     if (task.sub_tasks_count > 0) {
-      // For parent tasks without manual progress, calculate from subtasks (already done via db function)
-      console.log(`  Parent task with subtasks: complete_ratio=${task.complete_ratio}`);
-      
       // Ensure progress matches complete_ratio for consistency
       task.progress = task.complete_ratio || 0;
 
       // Important: Parent tasks should not have manual progress
       // If they somehow do, reset it
       if (task.manual_progress) {
-        console.log(`  WARNING: Parent task ${task.id} had manual_progress set to true, resetting`);
         task.manual_progress = false;
         task.progress_value = null;
       }
@@ -58,8 +49,6 @@ export default class TasksControllerBase extends WorklenzControllerBase {
       // For manually set progress, use that value directly
       task.progress = parseInt(task.progress_value);
       task.complete_ratio = parseInt(task.progress_value);
-      
-      console.log(`  Using manual progress: progress=${task.progress}, complete_ratio=${task.complete_ratio}`);
     }
     // For tasks with no subtasks and no manual progress, calculate based on time
     else {
@@ -69,8 +58,6 @@ export default class TasksControllerBase extends WorklenzControllerBase {
 
       // Set complete_ratio to match progress
       task.complete_ratio = task.progress;
-      
-      console.log(`  Calculated time-based progress: progress=${task.progress}, complete_ratio=${task.complete_ratio}`);
     }
 
     // Ensure numeric values
@@ -79,7 +66,7 @@ export default class TasksControllerBase extends WorklenzControllerBase {
 
     task.overdue = task.total_minutes < task.total_minutes_spent;
 
-    task.time_spent = {hours: ~~(task.total_minutes_spent / 60), minutes: task.total_minutes_spent % 60};
+    task.time_spent = { hours: ~~(task.total_minutes_spent / 60), minutes: task.total_minutes_spent % 60 };
 
     task.comments_count = Number(task.comments_count) ? +task.comments_count : 0;
     task.attachments_count = Number(task.attachments_count) ? +task.attachments_count : 0;

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

@@ -97,7 +97,6 @@ export default class TasksControllerV2 extends TasksControllerBase {
     try {
       const result = await db.query("SELECT get_task_complete_ratio($1) AS info;", [taskId]);
       const [data] = result.rows;
-      console.log("data", data);
       if (data && data.info && data.info.ratio !== undefined) {
         data.info.ratio = +((data.info.ratio || 0).toFixed());
         return data.info;

worklenz-backend/src/cron_jobs/index.ts

@@ -7,5 +7,5 @@ export function startCronJobs() {
   startNotificationsJob();
   startDailyDigestJob();
   startProjectDigestJob();
-  // startRecurringTasksJob();
+  if (process.env.ENABLE_RECURRING_JOBS === "true") startRecurringTasksJob();
 }

worklenz-backend/src/cron_jobs/recurring-tasks.ts

@@ -7,43 +7,48 @@ import TasksController from "../controllers/tasks-controller";
 
 // At 11:00+00 (4.30pm+530) on every day-of-month if it's on every day-of-week from Monday through Friday.
 // const TIME = "0 11 */1 * 1-5";
-const TIME = "*/2 * * * *"; // runs every 2 minutes - for testing purposes
+const TIME = process.env.RECURRING_JOBS_INTERVAL || "0 11 */1 * 1-5";
 const TIME_FORMAT = "YYYY-MM-DD";
 // const TIME = "0 0 * * *"; // Runs at midnight every day
 
 const log = (value: any) => console.log("recurring-task-cron-job:", value);
 
-async function onRecurringTaskJobTick() {
+// Define future limits for different schedule types
-    try {
+// More conservative limits to prevent task list clutter
-        log("(cron) Recurring tasks job started.");
+const FUTURE_LIMITS = {
+  daily: moment.duration(3, "days"),
+  weekly: moment.duration(1, "week"),
+  monthly: moment.duration(1, "month"),
+  every_x_days: (interval: number) => moment.duration(interval, "days"),
+  every_x_weeks: (interval: number) => moment.duration(interval, "weeks"),
+  every_x_months: (interval: number) => moment.duration(interval, "months")
+};
 
-        const templatesQuery = `
+// Helper function to get the future limit based on schedule type
-            SELECT t.*, s.*, (SELECT MAX(end_date) FROM tasks WHERE schedule_id = s.id) as last_task_end_date
+function getFutureLimit(scheduleType: string, interval?: number): moment.Duration {
-            FROM task_recurring_templates t
+  switch (scheduleType) {
-            JOIN task_recurring_schedules s ON t.schedule_id = s.id;
+    case "daily":
-        `;
+      return FUTURE_LIMITS.daily;
-        const templatesResult = await db.query(templatesQuery);
+    case "weekly":
-        const templates = templatesResult.rows as (ITaskTemplate & IRecurringSchedule)[];
+      return FUTURE_LIMITS.weekly;
-
+    case "monthly":
-        const now = moment();
+      return FUTURE_LIMITS.monthly;
-        let createdTaskCount = 0;
+    case "every_x_days":
-
+      return FUTURE_LIMITS.every_x_days(interval || 1);
-        for (const template of templates) {
+    case "every_x_weeks":
-            const lastTaskEndDate = template.last_task_end_date 
+      return FUTURE_LIMITS.every_x_weeks(interval || 1);
-                ? moment(template.last_task_end_date)
+    case "every_x_months":
-                : moment(template.created_at);
+      return FUTURE_LIMITS.every_x_months(interval || 1);
-            
+    default:
-            const futureLimit = moment(template.last_checked_at || template.created_at).add(1, "week");
+      return moment.duration(3, "days"); // Default to 3 days
-
-            let nextEndDate = calculateNextEndDate(template, lastTaskEndDate);
-
-            // Find the next future occurrence
-            while (nextEndDate.isSameOrBefore(now)) {
-                nextEndDate = calculateNextEndDate(template, nextEndDate);
   }
+}
 
-            // Only create a task if it's within the future limit
+// Helper function to batch create tasks
-            if (nextEndDate.isSameOrBefore(futureLimit)) {
+async function createBatchTasks(template: ITaskTemplate & IRecurringSchedule, endDates: moment.Moment[]) {
+  const createdTasks = [];
+  
+  for (const nextEndDate of endDates) {
     const existingTaskQuery = `
       SELECT id FROM tasks 
       WHERE schedule_id = $1 AND end_date::DATE = $2::DATE;
@@ -65,7 +70,7 @@ async function onRecurringTaskJobTick() {
       const createdTask = createTaskResult.rows[0].task;
 
       if (createdTask) {
-                        createdTaskCount++;
+        createdTasks.push(createdTask);
 
         for (const assignee of template.assignees) {
           await TasksController.createTaskBulkAssignees(assignee.team_member_id, template.project_id, createdTask.id, assignee.assigned_by); 
@@ -81,17 +86,69 @@ async function onRecurringTaskJobTick() {
     } else {
       console.log(`Skipped creating task for template ${template.name} with end date ${nextEndDate.format(TIME_FORMAT)} - task already exists`);
     }
-            } else {
-                console.log(`No task created for template ${template.name} - next occurrence is beyond the future limit`);
   }
 
+  return createdTasks;
+}
+
+async function onRecurringTaskJobTick() {
+    try {
+        log("(cron) Recurring tasks job started.");
+
+        const templatesQuery = `
+            SELECT t.*, s.*, (SELECT MAX(end_date) FROM tasks WHERE schedule_id = s.id) as last_task_end_date
+            FROM task_recurring_templates t
+            JOIN task_recurring_schedules s ON t.schedule_id = s.id;
+        `;
+        const templatesResult = await db.query(templatesQuery);
+        const templates = templatesResult.rows as (ITaskTemplate & IRecurringSchedule)[];
+
+        const now = moment();
+        let createdTaskCount = 0;
+
+        for (const template of templates) {
+            const lastTaskEndDate = template.last_task_end_date 
+                ? moment(template.last_task_end_date)
+                : moment(template.created_at);
+            
+            // Calculate future limit based on schedule type
+            const futureLimit = moment(template.last_checked_at || template.created_at)
+                .add(getFutureLimit(
+                    template.schedule_type,
+                    template.interval_days || template.interval_weeks || template.interval_months || 1
+                ));
+
+            let nextEndDate = calculateNextEndDate(template, lastTaskEndDate);
+            const endDatesToCreate: moment.Moment[] = [];
+
+            // Find all future occurrences within the limit
+            while (nextEndDate.isSameOrBefore(futureLimit)) {
+                if (nextEndDate.isAfter(now)) {
+                    endDatesToCreate.push(moment(nextEndDate));
+                }
+                nextEndDate = calculateNextEndDate(template, nextEndDate);
+            }
+
+            // Batch create tasks for all future dates
+            if (endDatesToCreate.length > 0) {
+                const createdTasks = await createBatchTasks(template, endDatesToCreate);
+                createdTaskCount += createdTasks.length;
+
                 // Update the last_checked_at in the schedule
                 const updateScheduleQuery = `
                     UPDATE task_recurring_schedules 
-                SET last_checked_at = $1::DATE, last_created_task_end_date = $2 
+                    SET last_checked_at = $1::DATE, 
+                        last_created_task_end_date = $2 
                     WHERE id = $3;
                 `;
-            await db.query(updateScheduleQuery, [moment(template.last_checked_at || template.created_at).add(1, "day").format(TIME_FORMAT), nextEndDate.format(TIME_FORMAT), template.schedule_id]);
+                await db.query(updateScheduleQuery, [
+                    moment().format(TIME_FORMAT),
+                    endDatesToCreate[endDatesToCreate.length - 1].format(TIME_FORMAT),
+                    template.schedule_id
+                ]);
+            } else {
+                console.log(`No tasks created for template ${template.name} - next occurrence is beyond the future limit`);
+            }
         }
         
         log(`(cron) Recurring tasks job ended with ${createdTaskCount} new tasks created.`);

worklenz-backend/src/middlewares/session-middleware.ts

@@ -6,11 +6,11 @@ import { isProduction } from "../shared/utils";
 const pgSession = require("connect-pg-simple")(session);
 
 export default session({
-  name: process.env.SESSION_NAME,
+  name: process.env.SESSION_NAME || "worklenz.sid",
   secret: process.env.SESSION_SECRET || "development-secret-key",
-  proxy: false,
+  proxy: true,
   resave: false,
-  saveUninitialized: true,
+  saveUninitialized: false,
   rolling: true,
   store: new pgSession({
     pool: db.pool,
@@ -18,10 +18,9 @@ export default session({
   }),
   cookie: {
     path: "/",
-    // secure: isProduction(),
+    secure: isProduction(), // Use secure cookies in production
-    // httpOnly: isProduction(),
+    httpOnly: true,
-    // sameSite: "none",
+    sameSite: "lax", // Standard setting for same-origin requests
-    // domain: isProduction() ? ".worklenz.com" : undefined,
     maxAge: 30 * 24 * 60 * 60 * 1000 // 30 days
   }
 });

worklenz-backend/src/passport/passport-strategies/passport-local-login.ts

@@ -3,13 +3,16 @@ import { Strategy as LocalStrategy } from "passport-local";
 import { log_error } from "../../shared/utils";
 import db from "../../config/db";
 import { Request } from "express";
+import { ERROR_KEY, SUCCESS_KEY } from "./passport-constants";
 
 async function handleLogin(req: Request, email: string, password: string, done: any) {
-  console.log("Login attempt for:", email);
+  // Clear any existing flash messages
+  (req.session as any).flash = {};
 
   if (!email || !password) {
-    console.log("Missing credentials");
+    const errorMsg = "Please enter both email and password";
-    return done(null, false, { message: "Please enter both email and password" });
+    req.flash(ERROR_KEY, errorMsg);
+    return done(null, false);
   }
 
   try {
@@ -19,23 +22,27 @@ async function handleLogin(req: Request, email: string, password: string, done:
                  AND google_id IS NULL
                  AND is_deleted IS FALSE;`;
     const result = await db.query(q, [email]);
-    console.log("User query result count:", result.rowCount);
     
     const [data] = result.rows;
 
     if (!data?.password) {
-      console.log("No account found");
+      const errorMsg = "No account found with this email";
-      return done(null, false, { message: "No account found with this email" });
+      req.flash(ERROR_KEY, errorMsg);
+      return done(null, false);
     }
 
     const passwordMatch = bcrypt.compareSync(password, data.password);
-    console.log("Password match:", passwordMatch);
     
     if (passwordMatch && email === data.email) {
       delete data.password;
-      return done(null, data, {message: "User successfully logged in"});
+      const successMsg = "User successfully logged in";
+      req.flash(SUCCESS_KEY, successMsg);
+      return done(null, data);
     }
-    return done(null, false, { message: "Incorrect email or password" });
+    
+    const errorMsg = "Incorrect email or password";
+    req.flash(ERROR_KEY, errorMsg);
+    return done(null, false);
   } catch (error) {
     console.error("Login error:", error);
     log_error(error, req.body);

worklenz-backend/src/shared/constants.ts

@@ -166,9 +166,7 @@ export const UNMAPPED = "Unmapped";
 
 export const DATE_RANGES = {
   YESTERDAY: "YESTERDAY",
-  LAST_7_DAYS: "LAST_7_DAYS",
   LAST_WEEK: "LAST_WEEK",
-  LAST_30_DAYS: "LAST_30_DAYS",
   LAST_MONTH: "LAST_MONTH",
   LAST_QUARTER: "LAST_QUARTER",
   ALL_TIME: "ALL_TIME"

worklenz-backend/worklenz-email-templates/password-changed-notification.html

@@ -2,31 +2,30 @@
 <html lang="en">
 
 <head>
-  <title></title>
+  <title>Password Changed | Worklenz</title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="width=device-width,initial-scale=1" name="viewport">
   <style>
     * {
-      box-sizing: border-box
+      box-sizing: border-box;
     }
 
     body {
       margin: 0;
-      padding: 0
+      padding: 0;
+      background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      font-family: 'Mada', Arial, sans-serif;
     }
 
-    a[x-apple-data-detectors] {
+    .main-container {
-      color: inherit !important;
+      background: #fff;
-      text-decoration: inherit !important
+      border-radius: 18px;
-    }
+      box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
-
+      margin: 40px auto 0 auto;
-    #MessageViewBody a {
+      max-width: 500px;
-      color: inherit;
+      padding: 0 0 20px 0;
-      text-decoration: none
-    }
-
-    p {
-      line-height: inherit
     }
 
     .padding-30 {
@@ -42,33 +41,48 @@
       mso-hide: all;
       display: none;
       max-height: 0;
-      overflow: hidden
+      overflow: hidden;
+    }
+
+    .footer {
+      text-align: center;
+      color: #b0b8c9;
+      font-size: 13px;
+      margin-top: 30px;
+      padding-bottom: 18px;
     }
 
     @media (max-width: 525px) {
+      .main-container {
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+        max-width: 100% !important;
+      }
+
       .desktop_hide table.icons-inner {
-        display: inline-block !important
+        display: inline-block !important;
       }
 
       .icons-inner {
-        text-align: center
+        text-align: center;
       }
 
       .icons-inner td {
-        margin: 0 auto
+        margin: 0 auto;
       }
 
       .row-content {
-        width: 95% !important
+        width: 95% !important;
       }
 
       .mobile_hide {
-        display: none
+        display: none;
       }
 
       .stack .column {
         width: 100%;
-        display: block
+        display: block;
       }
 
       .mobile_hide {
@@ -76,19 +90,21 @@
         max-height: 0;
         max-width: 0;
         overflow: hidden;
-        font-size: 0
+        font-size: 0;
       }
 
       .desktop_hide,
       .desktop_hide table {
         display: table !important;
-        max-height: none !important
+        max-height: none !important;
       }
     }
   </style>
+  <link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
 </head>
 
 <body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none;">
+  <div class="main-container">
     <table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
       style="mso-table-lspace:0;mso-table-rspace:0; background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
       width="100%">
@@ -100,7 +116,6 @@
               <tbody>
                 <tr>
                   <td>
-
                     <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20"
                       role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
                   padding-bottom: 20px;" width="220">
@@ -127,28 +142,35 @@
                             <table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30"
                               role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
                               width="100%">
-
                               <tr>
                                 <td class="pad" style="width:100%;padding-right:0;padding-left:0">
-                                <div align="center" class="alignment" style="line-height:10px"><img
+                                  <div align="center" class="alignment" style="line-height:10px;margin-top: 30px;">
+                                    <img
                                       src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-password-changed.png"
-                                    style="display:block;height:auto;border:0;width:100px;max-width:100%;margin-top: 30px;margin-bottom: 10px;"
+                                      style="display:block;height:auto;border:0;width:100px;max-width:100%;margin-bottom: 10px;"
                                       width="100">
                                   </div>
                                 </td>
                               </tr>
                               <tr>
                                 <td class="pad">
+                                  <h1
+                                    style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:10px;margin-bottom:0;padding-top: 10px;padding-bottom: 10px;font-family: 'Mada', Arial, sans-serif;">
+                                    Password Changed Successfully
+                                  </h1>
                                   <div
-                                  style="color:#505771;font-size:19px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:500;line-height:150%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:24px">
+                                    style="color:#505771;font-size:19px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:150%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px;margin-top: 18px;">
-                                  <p style="margin-top: 0px;margin-bottom: 30px;">
+                                    <p style="margin-top: 0px;margin-bottom: 18px;">Hi,</p>
-                                    We wanted to let you know that your Worklenz password was reset.
+                                    <p style="margin:0;margin-bottom:10px">This is a confirmation that your Worklenz
-                                  </p>
+                                      account password was changed.</p>
+                                    <p style="margin:0;margin-bottom:10px">If you did not make this change, please <a
+                                        href="mailto:support@worklenz.com"
+                                        style="color:#4992f0;text-decoration:none;">contact our support team</a>
+                                      immediately.</p>
                                   </div>
                                 </td>
                               </tr>
                             </table>
-
                           </td>
                         </tr>
                       </tbody>
@@ -201,10 +223,12 @@
         </tr>
       </tbody>
     </table>
-  </td>
+    <div class="footer">
-  </tr>
+      If you have any questions, contact us at <a href="mailto:support@worklenz.com"
-  </tbody>
+        style="color:#4992f0;text-decoration:none;">support@worklenz.com</a>.<br>
-  </table><!-- End -->
+      &copy; 2025 Worklenz. All rights reserved.
+    </div>
+  </div>
 </body>
 
 </html>

worklenz-backend/worklenz-email-templates/reset-password.html

@@ -2,31 +2,30 @@
 <html lang="en">
 
 <head>
-  <title></title>
+  <title>Reset Your Password | Worklenz</title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="width=device-width,initial-scale=1" name="viewport">
   <style>
     * {
-      box-sizing: border-box
+      box-sizing: border-box;
     }
 
     body {
       margin: 0;
-      padding: 0
+      padding: 0;
+      background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      font-family: 'Mada', Arial, sans-serif;
     }
 
-    a[x-apple-data-detectors] {
+    .main-container {
-      color: inherit !important;
+      background: #fff;
-      text-decoration: inherit !important
+      border-radius: 18px;
-    }
+      box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
-
+      margin: 40px auto 0 auto;
-    #MessageViewBody a {
+      max-width: 500px;
-      color: inherit;
+      padding: 0 0 20px 0;
-      text-decoration: none
-    }
-
-    p {
-      line-height: inherit
     }
 
     .padding-30 {
@@ -42,33 +41,68 @@
       mso-hide: all;
       display: none;
       max-height: 0;
-      overflow: hidden
+      overflow: hidden;
+    }
+
+    .modern-btn {
+      text-decoration: none;
+      display: inline-block;
+      color: #fff;
+      background: linear-gradient(90deg, #54bf6b 0%, #4992f0d9 100%);
+      border-radius: 6px;
+      font-weight: 600;
+      padding: 10px 32px;
+      font-size: 17px;
+      box-shadow: 0 2px 8px rgba(73, 146, 240, 0.15);
+      transition: background 0.2s, box-shadow 0.2s;
+      margin-top: 10px;
+      margin-bottom: 30px;
+    }
+
+    .modern-btn:hover {
+      background: linear-gradient(90deg, #4992f0d9 0%, #54bf6b 100%);
+      box-shadow: 0 4px 16px rgba(73, 146, 240, 0.18);
+    }
+
+    .footer {
+      text-align: center;
+      color: #b0b8c9;
+      font-size: 13px;
+      margin-top: 30px;
+      padding-bottom: 18px;
     }
 
     @media (max-width: 525px) {
+      .main-container {
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+        max-width: 100% !important;
+      }
+
       .desktop_hide table.icons-inner {
-        display: inline-block !important
+        display: inline-block !important;
       }
 
       .icons-inner {
-        text-align: center
+        text-align: center;
       }
 
       .icons-inner td {
-        margin: 0 auto
+        margin: 0 auto;
       }
 
       .row-content {
-        width: 95% !important
+        width: 95% !important;
       }
 
       .mobile_hide {
-        display: none
+        display: none;
       }
 
       .stack .column {
         width: 100%;
-        display: block
+        display: block;
       }
 
       .mobile_hide {
@@ -76,160 +110,113 @@
         max-height: 0;
         max-width: 0;
         overflow: hidden;
-        font-size: 0
+        font-size: 0;
       }
 
       .desktop_hide,
       .desktop_hide table {
         display: table !important;
-        max-height: none !important
+        max-height: none !important;
       }
     }
   </style>
+  <link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
 </head>
 
-<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
+<body>
-<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+  <div class="main-container">
-       style="mso-table-lspace:0;mso-table-rspace:0; background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
+    <table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="background:transparent;" width="100%">
-       width="100%">
       <tbody>
         <tr>
           <td>
-      <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation"
+            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-             style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
               <tbody>
                 <tr>
                   <td>
-
+                    <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px; padding-bottom: 20px;" width="220">
-            <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
-                  padding-bottom: 20px;" width="220">
                       <tr>
                         <td class="pad" style="width:100%;padding-right:0;padding-left:0">
                           <div align="left" class="alignment" style="line-height:10px">
-                    <a href="www.worklenz.com" style="outline:none;width: 170px;" tabindex="-1"
+                            <a href="www.worklenz.com" style="outline:none;width: 170px;" tabindex="-1" target="_blank"><img src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-logo.png" style="display:block;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 5px;"></a>
-                       target="_blank"><img
-                      src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-logo.png"
-                      style="display:block;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 5px;"></a>
                           </div>
                         </td>
                       </tr>
                     </table>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
+                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px;" width="475">
-                   role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px;"
-                   width="475">
                       <tbody>
                         <tr>
-                <td class="column column-1"
+                          <td class="column column-1" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0" width="100%">
-                    style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
+                            <table border="0" cellpadding="0" cellspacing="0" class="image_block block-3" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                    width="100%">
-                  <table border="0" cellpadding="0" cellspacing="0" class="image_block block-3" role="presentation"
-                         style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
                               <tr>
                                 <td class="pad">
-                        <h1
+                                  <h1 style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;font-family: 'Mada', Arial, sans-serif;">
-                          style="margin:0;color:rgb(66, 66, 66);font-size:26px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:normal;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;">
+                                    <span class="tinyMce-placeholder">Reset your password</span>
-                          <span class="tinyMce-placeholder">Reset your password on Worklenz</span>
                                   </h1>
                                 </td>
                               </tr>
                               <tr>
                                 <td class="pad" style="width:100%;padding-right:0;padding-left:0">
-                        <div align="center" class="alignment" style="line-height:10px"><img
+                                  <div align="center" class="alignment" style="line-height:10px"><img src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-new-team.png" style="display:block;height:auto;border:0;width:180px;max-width:100%;margin-top: 30px;margin-bottom: 10px;" width="180">
-                          src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-new-team.png"
-                          style="display:block;height:auto;border:0;width:180px;max-width:100%;margin-top: 30px;margin-bottom: 10px;"
-                          width="180">
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30"
+                            <table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
-                         role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
-                         width="100%">
                               <tr>
                                 <td class="pad">
-                        <div
+                                  <div style="color:#505771;font-size:20px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:130%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px">
-                          style="color:#505771;font-size:19px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:500;line-height:120%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:24px">
                                     <p style="margin-top: 0px;margin-bottom: 2px;">Hi,</p>
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
+                            <table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
-                         role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
-                         width="100%">
                               <tr>
                                 <td class="pad">
-                        <div
+                                  <div style="color:rgb(143,152,164);font-size:16px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:145%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:18px">
-                          style="color:rgb(143,152,164);font-size:16px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:18px">
+                                    <p style="margin:0;margin-bottom:10px">We received a request to reset your Worklenz account password.</p>
-                          <p style="margin:0;margin-bottom:10px">You have requested to reset your password
+                                    <p style="margin:0;margin-bottom:10px">Click the button below to set a new password. If you did not request this, you can safely ignore this email.</p>
-                          </p>
-                          <p style="margin:0;margin-bottom:10px">To reset your password, click the following link and follow the instructions.</p>
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="10" cellspacing="0" class="button_block block-6" role="presentation"
+                            <table border="0" cellpadding="10" cellspacing="0" class="button_block block-6" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-top: 10px;margin-bottom: 30px;" width="100%">
-                         style="mso-table-lspace:0;mso-table-rspace:0;margin-top: 10px;margin-bottom: 30px;"
-                         width="100%">
                               <tr>
                                 <td class="pad">
                                   <div align="center" class="alignment">
-                          <a href="https://[VAR_HOSTNAME]/auth/verify-reset-email/[VAR_USER_ID]/[VAR_HASH]">
+                                    <a href="https://[VAR_HOSTNAME]/auth/verify-reset-email/[VAR_USER_ID]/[VAR_HASH]" class="modern-btn">
-                            <div
+                                      Reset my password
-                              style="text-decoration:none;display:inline-block;color:#fff;background: #54bf6b;border-radius:3px;width:auto;font-weight:400;padding-top:6px;padding-bottom:7px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all">
-                                      <span
-                                        style="padding-left:25px;padding-right:25px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                        dir="ltr" style="word-break: break-word; line-height: 28px;">Reset my password</span></span>
-                            </div>
                                     </a>
-                          <!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
+                                  </div>
+                                  <div style="color:#b0b8c9;font-size:14px;text-align:center;margin-top:10px;">
+                                    <p style="margin:0;">For your security, this link will expire in 1 hour.</p>
                                   </div>
                                 </td>
                               </tr>
-                    </td>
-                    </tr>
-                    </tbody>
-                  </table>
                             </table>
                           </td>
                         </tr>
                       </tbody>
                     </table>
-      <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation"
+                  </td>
-             style="mso-table-lspace:0;mso-table-rspace:0"
+                </tr>
-             width="100%">
+              </tbody>
+            </table>
+            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
               <tbody>
                 <tr>
                   <td>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
+                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px" width="505">
-                   role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px" width="505">
                       <tbody>
                         <tr>
-                <td class="column column-1"
+                          <td class="column column-1" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0" width="100%">
-                    style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
+                            <table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                    width="100%">
-                  <table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation"
-                         style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
                               <tr>
-                      <td class="pad"
+                                <td class="pad" style="vertical-align:middle;color:#9d9d9d;font-family:inherit;font-size:15px;padding-bottom:5px;padding-top:5px;text-align:center">
-                          style="vertical-align:middle;color:#9d9d9d;font-family:inherit;font-size:15px;padding-bottom:5px;padding-top:5px;text-align:center">
+                                  <table cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                        <table cellpadding="0" cellspacing="0" role="presentation"
-                               style="mso-table-lspace:0;mso-table-rspace:0"
-                               width="100%">
                                     <tr>
                                       <td class="alignment" style="vertical-align:middle;text-align:center">
-                              <!--[if vml]>
+                                        <table cellpadding="0" cellspacing="0" class="icons-inner" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block;margin-right:-4px;padding-left:0;padding-right:0">
-                              <table align="left" cellpadding="0" cellspacing="0" role="presentation"
-                                     style="display:inline-block;padding-left:0px;padding-right:0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
-                              <![endif]-->
-                              <!--[if !vml]><!-->
-                              <table cellpadding="0"
-                                     cellspacing="0"
-                                     class="icons-inner" role="presentation"
-                                     style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block;margin-right:-4px;padding-left:0;padding-right:0">
                                         </table>
                                       </td>
                                     </tr>
@@ -248,7 +235,12 @@
           </td>
         </tr>
       </tbody>
-</table><!-- End -->
+    </table>
+    <div class="footer">
+      If you have any questions, contact us at <a href="mailto:support@worklenz.com" style="color:#4992f0;text-decoration:none;">support@worklenz.com</a>.<br>
+      &copy; 2025 Worklenz. All rights reserved.
+    </div>
+  </div>
 </body>
 
 </html>

worklenz-backend/worklenz-email-templates/team-invitation.html

@@ -2,31 +2,30 @@
 <html lang="en">
 
 <head>
-  <title></title>
+  <title>Join Your Team on Worklenz</title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="width=device-width,initial-scale=1" name="viewport">
   <style>
     * {
-      box-sizing: border-box
+      box-sizing: border-box;
     }
 
     body {
       margin: 0;
-      padding: 0
+      padding: 0;
+      background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      font-family: 'Mada', Arial, sans-serif;
     }
 
-    a[x-apple-data-detectors] {
+    .main-container {
-      color: inherit !important;
+      background: #fff;
-      text-decoration: inherit !important
+      border-radius: 18px;
-    }
+      box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
-
+      margin: 40px auto 0 auto;
-    #MessageViewBody a {
+      max-width: 500px;
-      color: inherit;
+      padding: 0 0 20px 0;
-      text-decoration: none
-    }
-
-    p {
-      line-height: inherit
     }
 
     .padding-30 {
@@ -42,33 +41,68 @@
       mso-hide: all;
       display: none;
       max-height: 0;
-      overflow: hidden
+      overflow: hidden;
+    }
+
+    .modern-btn {
+      text-decoration: none;
+      display: inline-block;
+      color: #fff;
+      background: linear-gradient(90deg, #54bf6b 0%, #4992f0d9 100%);
+      border-radius: 6px;
+      font-weight: 600;
+      padding: 10px 32px;
+      font-size: 17px;
+      box-shadow: 0 2px 8px rgba(73, 146, 240, 0.15);
+      transition: background 0.2s, box-shadow 0.2s;
+      margin-top: 10px;
+      margin-bottom: 30px;
+    }
+
+    .modern-btn:hover {
+      background: linear-gradient(90deg, #4992f0d9 0%, #54bf6b 100%);
+      box-shadow: 0 4px 16px rgba(73, 146, 240, 0.18);
+    }
+
+    .footer {
+      text-align: center;
+      color: #b0b8c9;
+      font-size: 13px;
+      margin-top: 30px;
+      padding-bottom: 18px;
     }
 
     @media (max-width: 525px) {
+      .main-container {
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+        max-width: 100% !important;
+      }
+
       .desktop_hide table.icons-inner {
-        display: inline-block !important
+        display: inline-block !important;
       }
 
       .icons-inner {
-        text-align: center
+        text-align: center;
       }
 
       .icons-inner td {
-        margin: 0 auto
+        margin: 0 auto;
       }
 
       .row-content {
-        width: 95% !important
+        width: 95% !important;
       }
 
       .mobile_hide {
-        display: none
+        display: none;
       }
 
       .stack .column {
         width: 100%;
-        display: block
+        display: block;
       }
 
       .mobile_hide {
@@ -76,162 +110,110 @@
         max-height: 0;
         max-width: 0;
         overflow: hidden;
-        font-size: 0
+        font-size: 0;
       }
 
       .desktop_hide,
       .desktop_hide table {
         display: table !important;
-        max-height: none !important
+        max-height: none !important;
       }
     }
   </style>
+  <link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
 </head>
 
-<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
+<body>
-<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+  <div class="main-container">
-       style="mso-table-lspace:0;mso-table-rspace:0; background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
+    <table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation" style="background:transparent;" width="100%">
-       width="100%">
       <tbody>
         <tr>
           <td>
-      <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation"
+            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-1" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-             style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
               <tbody>
                 <tr>
                   <td>
-
+                    <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px; padding-bottom: 20px;" width="220">
-            <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
-                  padding-bottom: 20px;" width="220">
                       <tr>
                         <td class="pad" style="width:100%;padding-right:0;padding-left:0">
                           <div align="left" class="alignment" style="line-height:10px">
-                    <a href="www.worklenz.com" style="outline:none;width: 170px;" tabindex="-1"
+                            <a href="www.worklenz.com" style="outline:none;width: 170px;" tabindex="-1" target="_blank"><img src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-logo.png" style="display:block;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 5px;"></a>
-                       target="_blank"><img
-                      src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-logo.png"
-                      style="display:block;height:auto;border:0;max-width:100%;margin-top: 10px;margin-bottom: 5px;"></a>
                           </div>
                         </td>
                       </tr>
                     </table>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
+                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px;" width="475">
-                   role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px;"
-                   width="475">
                       <tbody>
                         <tr>
-                <td class="column column-1"
+                          <td class="column column-1" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0" width="100%">
-                    style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
+                            <table border="0" cellpadding="0" cellspacing="0" class="image_block block-3" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                    width="100%">
-                  <table border="0" cellpadding="0" cellspacing="0" class="image_block block-3" role="presentation"
-                         style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
                               <tr>
                                 <td class="pad">
-                        <h1
+                                  <h1 style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;font-family: 'Mada', Arial, sans-serif;">
-                          style="margin:0;color:rgb(66, 66, 66);font-size:26px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:normal;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;">
                                     <span class="tinyMce-placeholder">Join your team on Worklenz</span>
                                   </h1>
                                 </td>
                               </tr>
                               <tr>
                                 <td class="pad" style="width:100%;padding-right:0;padding-left:0">
-                        <div align="center" class="alignment" style="line-height:10px"><img
+                                  <div align="center" class="alignment" style="line-height:10px"><img src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-new-team.png" style="display:block;height:auto;border:0;width:180px;max-width:100%;margin-top: 30px;margin-bottom: 10px;" width="180">
-                          src="https://worklenz.s3.amazonaws.com/email-templates-assets/email-new-team.png"
-                          style="display:block;height:auto;border:0;width:180px;max-width:100%;margin-top: 30px;margin-bottom: 10px;"
-                          width="180">
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30"
+                            <table border="0" cellpadding="5" cellspacing="0" class="paragraph_block block-4 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
-                         role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
-                         width="100%">
                               <tr>
                                 <td class="pad">
-                        <div
+                                  <div style="color:#505771;font-size:20px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:130%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px">
-                          style="color:#505771;font-size:19px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:500;line-height:120%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:24px">
                                     <p style="margin-top: 0px;margin-bottom: 2px;">Hi [VAR_USER_NAME],</p>
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30"
+                            <table border="0" cellpadding="8" cellspacing="0" class="paragraph_block block-5 padding-30" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word" width="100%">
-                         role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;word-break:break-word"
-                         width="100%">
                               <tr>
                                 <td class="pad">
-                        <div
+                                  <div style="color:rgb(143,152,164);font-size:16px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:145%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:18px">
-                          style="color:rgb(143,152,164);font-size:16px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:18px">
+                                    <p style="margin:0;margin-bottom:10px">You have been added to the "[VAR_TEAM_NAME]" team on Worklenz!</p>
-                          <p style="margin:0;margin-bottom:10px">You have been added to the "[VAR_TEAM_NAME]" team
-                            on Worklenz!
-                          </p>
                                     <p>Sign in to your Worklenz account to continue.</p>
                                   </div>
                                 </td>
                               </tr>
                             </table>
-                  <table border="0" cellpadding="10" cellspacing="0" class="button_block block-6" role="presentation"
+                            <table border="0" cellpadding="10" cellspacing="0" class="button_block block-6" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;margin-top: 10px;margin-bottom: 30px;" width="100%">
-                         style="mso-table-lspace:0;mso-table-rspace:0;margin-top: 10px;margin-bottom: 30px;"
-                         width="100%">
                               <tr>
                                 <td class="pad">
                                   <div align="center" class="alignment">
-                          <a href="https://[VAR_HOSTNAME]/auth/login?team=[VAR_TEAM_ID]&user=[VAR_USER_ID]&project=[PROJECT_ID]">
+                                    <a href="https://[VAR_HOSTNAME]/auth/login?team=[VAR_TEAM_ID]&user=[VAR_USER_ID]&project=[PROJECT_ID]" class="modern-btn">
-                            <div
+                                      Go to Worklenz
-                              style="text-decoration:none;display:inline-block;color:#fff;background: #54bf6b;border-radius:3px;width:auto;font-weight:400;padding-top:6px;padding-bottom:7px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all">
-                                      <span
-                                        style="padding-left:25px;padding-right:25px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                        dir="ltr" style="word-break: break-word; line-height: 28px;">Go to
-                                          Worklenz</span></span>
-                            </div>
                                     </a>
-                          <!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
                                   </div>
                                 </td>
                               </tr>
-                    </td>
-                    </tr>
-                    </tbody>
-                  </table>
                             </table>
                           </td>
                         </tr>
                       </tbody>
                     </table>
-      <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation"
+                  </td>
-             style="mso-table-lspace:0;mso-table-rspace:0"
+                </tr>
-             width="100%">
+              </tbody>
+            </table>
+            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row row-2" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
               <tbody>
                 <tr>
                   <td>
-            <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack"
+                    <table align="center" border="0" cellpadding="0" cellspacing="0" class="row-content stack" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px" width="505">
-                   role="presentation"
-                   style="mso-table-lspace:0;mso-table-rspace:0;color:#000;width:475px" width="505">
                       <tbody>
                         <tr>
-                <td class="column column-1"
+                          <td class="column column-1" style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0" width="100%">
-                    style="mso-table-lspace:0;mso-table-rspace:0;font-weight:400;text-align:left;vertical-align:top;padding-top:5px;padding-bottom:5px;border-top:0;border-right:0;border-bottom:0;border-left:0"
+                            <table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                    width="100%">
-                  <table border="0" cellpadding="0" cellspacing="0" class="icons_block block-1" role="presentation"
-                         style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
                               <tr>
-                      <td class="pad"
+                                <td class="pad" style="vertical-align:middle;color:#9d9d9d;font-family:inherit;font-size:15px;padding-bottom:5px;padding-top:5px;text-align:center">
-                          style="vertical-align:middle;color:#9d9d9d;font-family:inherit;font-size:15px;padding-bottom:5px;padding-top:5px;text-align:center">
+                                  <table cellpadding="0" cellspacing="0" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0" width="100%">
-                        <table cellpadding="0" cellspacing="0" role="presentation"
-                               style="mso-table-lspace:0;mso-table-rspace:0"
-                               width="100%">
                                     <tr>
                                       <td class="alignment" style="vertical-align:middle;text-align:center">
-                              <!--[if vml]>
+                                        <table cellpadding="0" cellspacing="0" class="icons-inner" role="presentation" style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block;margin-right:-4px;padding-left:0;padding-right:0">
-                              <table align="left" cellpadding="0" cellspacing="0" role="presentation"
-                                     style="display:inline-block;padding-left:0px;padding-right:0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
-                              <![endif]-->
-                              <!--[if !vml]><!-->
-                              <table cellpadding="0"
-                                     cellspacing="0"
-                                     class="icons-inner" role="presentation"
-                                     style="mso-table-lspace:0;mso-table-rspace:0;display:inline-block;margin-right:-4px;padding-left:0;padding-right:0">
                                         </table>
                                       </td>
                                     </tr>
@@ -250,7 +232,12 @@
           </td>
         </tr>
       </tbody>
-</table><!-- End -->
+    </table>
+    <div class="footer">
+      If you have any questions, contact us at <a href="mailto:support@worklenz.com" style="color:#4992f0;text-decoration:none;">support@worklenz.com</a>.<br>
+      &copy; 2025 Worklenz. All rights reserved.
+    </div>
+  </div>
 </body>
 
 </html>

worklenz-backend/worklenz-email-templates/unregistered-team-invitation-notification.html

@@ -2,31 +2,30 @@
 <html lang="en">
 
 <head>
-  <title></title>
+  <title>Join Your Team on Worklenz</title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="width=device-width,initial-scale=1" name="viewport">
   <style>
     * {
-      box-sizing: border-box
+      box-sizing: border-box;
     }
 
     body {
       margin: 0;
-      padding: 0
+      padding: 0;
+      background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      font-family: 'Mada', Arial, sans-serif;
     }
 
-    a[x-apple-data-detectors] {
+    .main-container {
-      color: inherit !important;
+      background: #fff;
-      text-decoration: inherit !important
+      border-radius: 18px;
-    }
+      box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
-
+      margin: 40px auto 0 auto;
-    #MessageViewBody a {
+      max-width: 500px;
-      color: inherit;
+      padding: 0 0 20px 0;
-      text-decoration: none
-    }
-
-    p {
-      line-height: inherit
     }
 
     .padding-30 {
@@ -42,33 +41,68 @@
       mso-hide: all;
       display: none;
       max-height: 0;
-      overflow: hidden
+      overflow: hidden;
+    }
+
+    .modern-btn {
+      text-decoration: none;
+      display: inline-block;
+      color: #fff;
+      background: linear-gradient(90deg, #6249f0 0%, #4992f0d9 100%);
+      border-radius: 6px;
+      font-weight: 600;
+      padding: 10px 32px;
+      font-size: 17px;
+      box-shadow: 0 2px 8px rgba(73, 146, 240, 0.15);
+      transition: background 0.2s, box-shadow 0.2s;
+      margin-top: 10px;
+      margin-bottom: 30px;
+    }
+
+    .modern-btn:hover {
+      background: linear-gradient(90deg, #4992f0d9 0%, #6249f0 100%);
+      box-shadow: 0 4px 16px rgba(73, 146, 240, 0.18);
+    }
+
+    .footer {
+      text-align: center;
+      color: #b0b8c9;
+      font-size: 13px;
+      margin-top: 30px;
+      padding-bottom: 18px;
     }
 
     @media (max-width: 525px) {
+      .main-container {
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+        max-width: 100% !important;
+      }
+
       .desktop_hide table.icons-inner {
-        display: inline-block !important
+        display: inline-block !important;
       }
 
       .icons-inner {
-        text-align: center
+        text-align: center;
       }
 
       .icons-inner td {
-        margin: 0 auto
+        margin: 0 auto;
       }
 
       .row-content {
-        width: 95% !important
+        width: 95% !important;
       }
 
       .mobile_hide {
-        display: none
+        display: none;
       }
 
       .stack .column {
         width: 100%;
-        display: block
+        display: block;
       }
 
       .mobile_hide {
@@ -76,21 +110,23 @@
         max-height: 0;
         max-width: 0;
         overflow: hidden;
-        font-size: 0
+        font-size: 0;
       }
 
       .desktop_hide,
       .desktop_hide table {
         display: table !important;
-        max-height: none !important
+        max-height: none !important;
       }
     }
   </style>
+  <link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
 </head>
 
-<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
+<body>
-<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+  <div class="main-container">
-       style="mso-table-lspace:0;mso-table-rspace:0; background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
+    <table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+           style="background:transparent;"
            width="100%">
       <tbody>
       <tr>
@@ -100,7 +136,6 @@
             <tbody>
             <tr>
               <td>
-
                 <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation"
                        style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
                       padding-bottom: 20px;" width="220">
@@ -129,7 +164,7 @@
                         <tr>
                           <td class="pad">
                             <h1
-                          style="margin:0;color:rgb(66, 66, 66);font-size:26px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:normal;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;">
+                              style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;font-family: 'Mada', Arial, sans-serif;">
                               <span class="tinyMce-placeholder">Join your team on Worklenz</span>
                             </h1>
                           </td>
@@ -150,7 +185,7 @@
                         <tr>
                           <td class="pad">
                             <div
-                          style="color:#505771;font-size:19px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:500;line-height:120%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:24px">
+                              style="color:#505771;font-size:20px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:130%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px">
                               <p style="margin-top: 0px;margin-bottom: 2px;">Hi,</p>
                             </div>
                           </td>
@@ -162,7 +197,7 @@
                         <tr>
                           <td class="pad">
                             <div
-                          style="color:rgb(143,152,164);font-size:16px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:18px">
+                              style="color:rgb(143,152,164);font-size:16px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:145%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:18px">
                               <p style="margin:0;margin-bottom:10px">You have been added to the "[VAR_TEAM_NAME]" team
                                 on Worklenz!</p>
                               <p>Create an account in Worklenz to continue.</p>
@@ -176,24 +211,17 @@
                         <tr>
                           <td class="pad">
                             <div align="center" class="alignment">
-                          <a href="https://[VAR_HOSTNAME]/auth/signup?email=[VAR_EMAIL]&user=[VAR_USER_ID]&team=[VAR_TEAM_ID]&name=[VAR_USER_NAME]&project=[PROJECT_ID]">
+                              <a href="https://[VAR_HOSTNAME]/auth/signup?email=[VAR_EMAIL]&user=[VAR_USER_ID]&team=[VAR_TEAM_ID]&name=[VAR_USER_NAME]&project=[PROJECT_ID]" class="modern-btn">
-                            <div
+                                Join Worklenz
-                              style="text-decoration:none;display:inline-block;color:#fff;background: #6249f0;border-radius:3px;width:auto;font-weight:400;padding-top:6px;padding-bottom:7px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all">
-                                      <span
-                                        style="padding-left:25px;padding-right:25px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                        dir="ltr" style="word-break: break-word; line-height: 28px;">Join
-                                          Worklenz</span></span>
-                            </div>
                               </a>
-                          <!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
                             </div>
                           </td>
                         </tr>
+                      </table>
                     </td>
                   </tr>
                   </tbody>
                 </table>
-            </table>
               </td>
             </tr>
             </tbody>
@@ -222,11 +250,6 @@
                                    width="100%">
                               <tr>
                                 <td class="alignment" style="vertical-align:middle;text-align:center">
-                              <!--[if vml]>
-                              <table align="left" cellpadding="0" cellspacing="0" role="presentation"
-                                     style="display:inline-block;padding-left:0px;padding-right:0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
-                              <![endif]-->
-                              <!--[if !vml]><!-->
                                   <table cellpadding="0"
                                          cellspacing="0"
                                          class="icons-inner" role="presentation"
@@ -249,7 +272,12 @@
         </td>
       </tr>
       </tbody>
-</table><!-- End -->
+    </table>
+    <div class="footer">
+      If you have any questions, contact us at <a href="mailto:support@worklenz.com" style="color:#4992f0;text-decoration:none;">support@worklenz.com</a>.<br>
+      &copy; 2025 Worklenz. All rights reserved.
+    </div>
+  </div>
 </body>
 
 </html>

worklenz-backend/worklenz-email-templates/welcome.html

@@ -2,31 +2,30 @@
 <html lang="en">
 
 <head>
-  <title></title>
+  <title>Welcome to Worklenz</title>
   <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
   <meta content="width=device-width,initial-scale=1" name="viewport">
   <style>
     * {
-      box-sizing: border-box
+      box-sizing: border-box;
     }
 
     body {
       margin: 0;
-      padding: 0
+      padding: 0;
+      background: linear-gradient(135deg, #f5f8ff 0%, #eaf0fb 100%);
+      -webkit-text-size-adjust: none;
+      text-size-adjust: none;
+      font-family: 'Mada', Arial, sans-serif;
     }
 
-    a[x-apple-data-detectors] {
+    .main-container {
-      color: inherit !important;
+      background: #fff;
-      text-decoration: inherit !important
+      border-radius: 18px;
-    }
+      box-shadow: 0 4px 24px rgba(73, 146, 240, 0.10);
-
+      margin: 40px auto 0 auto;
-    #MessageViewBody a {
+      max-width: 500px;
-      color: inherit;
+      padding: 0 0 20px 0;
-      text-decoration: none
-    }
-
-    p {
-      line-height: inherit
     }
 
     .padding-30 {
@@ -42,33 +41,68 @@
       mso-hide: all;
       display: none;
       max-height: 0;
-      overflow: hidden
+      overflow: hidden;
+    }
+
+    .modern-btn {
+      text-decoration: none;
+      display: inline-block;
+      color: #fff;
+      background: linear-gradient(90deg, #4992f0d9 0%, #3b6fd6 100%);
+      border-radius: 6px;
+      font-weight: 600;
+      padding: 10px 32px;
+      font-size: 17px;
+      box-shadow: 0 2px 8px rgba(73, 146, 240, 0.15);
+      transition: background 0.2s, box-shadow 0.2s;
+      margin-top: 10px;
+      margin-bottom: 30px;
+    }
+
+    .modern-btn:hover {
+      background: linear-gradient(90deg, #3b6fd6 0%, #4992f0d9 100%);
+      box-shadow: 0 4px 16px rgba(73, 146, 240, 0.18);
+    }
+
+    .footer {
+      text-align: center;
+      color: #b0b8c9;
+      font-size: 13px;
+      margin-top: 30px;
+      padding-bottom: 18px;
     }
 
     @media (max-width: 525px) {
+      .main-container {
+        margin: 0;
+        border-radius: 0;
+        box-shadow: none;
+        max-width: 100% !important;
+      }
+
       .desktop_hide table.icons-inner {
-        display: inline-block !important
+        display: inline-block !important;
       }
 
       .icons-inner {
-        text-align: center
+        text-align: center;
       }
 
       .icons-inner td {
-        margin: 0 auto
+        margin: 0 auto;
       }
 
       .row-content {
-        width: 95% !important
+        width: 95% !important;
       }
 
       .mobile_hide {
-        display: none
+        display: none;
       }
 
       .stack .column {
         width: 100%;
-        display: block
+        display: block;
       }
 
       .mobile_hide {
@@ -76,21 +110,23 @@
         max-height: 0;
         max-width: 0;
         overflow: hidden;
-        font-size: 0
+        font-size: 0;
       }
 
       .desktop_hide,
       .desktop_hide table {
         display: table !important;
-        max-height: none !important
+        max-height: none !important;
       }
     }
   </style>
+  <link href="https://fonts.googleapis.com/css2?family=Mada:wght@500;700&display=swap" rel="stylesheet">
 </head>
 
-<body style="background-color:#fff;margin:0;padding:0;-webkit-text-size-adjust:none;text-size-adjust:none">
+<body>
-<table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+  <div class="main-container">
-       style="mso-table-lspace:0;mso-table-rspace:0;background-image:none;background-position:top left;background-size:auto;background-repeat:no-repeat"
+    <table border="0" cellpadding="0" cellspacing="0" class="nl-container" role="presentation"
+           style="mso-table-lspace:0;mso-table-rspace:0;background:transparent;"
            width="100%">
       <tbody>
       <tr>
@@ -100,7 +136,6 @@
             <tbody>
             <tr>
               <td>
-
                 <table border="0" cellpadding="0" cellspacing="0" class="image_block block-1 padding-20" role="presentation"
                        style="mso-table-lspace:0;mso-table-rspace:0;margin-left: auto;margin-right: auto;padding-top: 20px;
                       padding-bottom: 20px;" width="220">
@@ -129,7 +164,7 @@
                         <tr>
                           <td class="pad">
                             <h1
-                          style="margin:0;color:rgb(66, 66, 66);font-size:26px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:normal;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;">
+                              style="margin:0;color:rgb(66, 66, 66);font-size:28px;line-height:120%;text-align:center;direction:ltr;font-weight:700;letter-spacing:0.5px;margin-top:30px;margin-bottom:0;padding-top: 20px;padding-bottom: 20px;font-family: 'Mada', Arial, sans-serif;">
                               <span class="tinyMce-placeholder">Let's get started with Worklenz.</span>
                             </h1>
                           </td>
@@ -150,7 +185,7 @@
                         <tr>
                           <td class="pad">
                             <div
-                          style="color:#505771;font-size:19px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:500;line-height:120%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:24px">
+                              style="color:#505771;font-size:20px;font-family: 'Mada', Arial, sans-serif;font-weight:500;line-height:130%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:24px">
                               <p style="margin-top: 0px;margin-bottom: 2px;">Hi [VAR_USER_NAME],</p>
                             </div>
                           </td>
@@ -162,7 +197,7 @@
                         <tr>
                           <td class="pad">
                             <div
-                          style="color:rgb(143,152,164);font-size:16px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;font-weight:400;line-height:135%;text-align:center;direction:ltr;letter-spacing:0;mso-line-height-alt:18px">
+                              style="color:rgb(143,152,164);font-size:16px;font-family: 'Mada', Arial, sans-serif;font-weight:400;line-height:145%;text-align:center;direction:ltr;letter-spacing:0.1px;mso-line-height-alt:18px">
                               <p style="margin:0;margin-bottom:10px">Thanks for joining Worklenz!</p>
                               <p style="margin:0"> We're excited to have you on board. </p>
                             </div>
@@ -175,24 +210,17 @@
                         <tr>
                           <td class="pad">
                             <div align="center" class="alignment">
-                          <a href="https://[VAR_HOSTNAME]/auth/login">
+                              <a href="https://[VAR_HOSTNAME]/auth/login" class="modern-btn">
-                            <div
+                                Go to Worklenz
-                              style="text-decoration:none;display:inline-block;color:#fff;background:#4992f0d9;border-radius:3px;width:auto;font-weight:400;padding-top:6px;padding-bottom:7px;@import url('https://fonts.googleapis.com/css2?family=Mada:wght@500&display=swap');font-family: 'Mada', sans-serif;text-align:center;mso-border-alt:none;word-break:keep-all">
-                                      <span
-                                        style="padding-left:25px;padding-right:25px;font-size:16px;display:inline-block;letter-spacing:normal;"><span
-                                        dir="ltr" style="word-break: break-word; line-height: 28px;">Go to
-                                          Worklenz</span></span>
-                            </div>
                               </a>
-                          <!--[if mso]></center></v:textbox></v:roundrect><![endif]-->
                             </div>
                           </td>
                         </tr>
+                      </table>
                     </td>
                   </tr>
                   </tbody>
                 </table>
-            </table>
               </td>
             </tr>
             </tbody>
@@ -221,11 +249,6 @@
                                    width="100%">
                               <tr>
                                 <td class="alignment" style="vertical-align:middle;text-align:center">
-                              <!--[if vml]>
-                              <table align="left" cellpadding="0" cellspacing="0" role="presentation"
-                                     style="display:inline-block;padding-left:0px;padding-right:0px;mso-table-lspace: 0pt;mso-table-rspace: 0pt;">
-                              <![endif]-->
-                              <!--[if !vml]><!-->
                                   <table cellpadding="0"
                                          cellspacing="0"
                                          class="icons-inner" role="presentation"
@@ -248,7 +271,12 @@
         </td>
       </tr>
       </tbody>
-</table><!-- End -->
+    </table>
+    <div class="footer">
+      If you have any questions, contact us at <a href="mailto:support@worklenz.com" style="color:#4992f0;text-decoration:none;">support@worklenz.com</a>.<br>
+      &copy; 2025 Worklenz. All rights reserved.
+    </div>
+  </div>
 </body>
 
 </html>

worklenz-frontend/Dockerfile

@@ -12,7 +12,7 @@ COPY . .
 RUN echo "window.VITE_API_URL='${VITE_API_URL:-http://backend:3000}';" > ./public/env-config.js && \
     echo "window.VITE_SOCKET_URL='${VITE_SOCKET_URL:-ws://backend:3000}';" >> ./public/env-config.js
 
-RUN npm run build
+RUN NODE_OPTIONS="--max-old-space-size=4096" npm run build
 
 FROM node:22-alpine AS production
 

worklenz-frontend/index.html

@@ -48,6 +48,17 @@
   <noscript>You need to enable JavaScript to run this app.</noscript>
   <div id="root"></div>
   <script type="module" src="./src/index.tsx"></script>
+  <script type="text/javascript">
+    if (window.location.hostname === 'app.worklenz.com') {
+      var hs = document.createElement('script');
+      hs.type = 'text/javascript';
+      hs.id = 'hs-script-loader';
+      hs.async = true;
+      hs.defer = true;
+      hs.src = '//js.hs-scripts.com/22348300.js';
+      document.body.appendChild(hs);
+    }
+  </script>
 </body>
 
 </html>

worklenz-frontend/public/locales/en/admin-center/overview.json

@@ -4,19 +4,5 @@
   "owner": "Organization Owner",
   "admins": "Organization Admins",
   "contactNumber": "Add Contact Number",
-  "edit": "Edit",
+  "edit": "Edit"
-  "organizationWorkingDaysAndHours": "Organization Working Days & Hours",
-  "workingDays": "Working Days",
-  "workingHours": "Working Hours",
-  "monday": "Monday",
-  "tuesday": "Tuesday",
-  "wednesday": "Wednesday",
-  "thursday": "Thursday",
-  "friday": "Friday",
-  "saturday": "Saturday",
-  "sunday": "Sunday",
-  "hours": "hours",
-  "saveButton": "Save",
-  "saved": "Saved successfully!",
-  "errorSaving": "Error saving settings."
 }

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

@@ -47,5 +47,6 @@
   "weightedProgress": "Weighted Progress",
   "weightedProgressTooltip": "Calculate progress based on subtask weights",
   "timeProgress": "Time-based Progress",
-  "timeProgressTooltip": "Calculate progress based on estimated time"
+  "timeProgressTooltip": "Calculate progress based on estimated time",
+  "enterProjectKey": "Enter project key"
 }

worklenz-frontend/public/locales/en/task-drawer/task-drawer-recurring-config.json

@@ -2,6 +2,7 @@
   "recurring": "Recurring",
   "recurringTaskConfiguration": "Recurring task configuration",
   "repeats": "Repeats",
+  "daily": "Daily",
   "weekly": "Weekly",
   "everyXDays": "Every X Days",
   "everyXWeeks": "Every X Weeks",

worklenz-frontend/public/locales/es/admin-center/overview.json

@@ -4,19 +4,5 @@
   "owner": "Propietario de la Organización",
   "admins": "Administradores de la Organización",
   "contactNumber": "Agregar Número de Contacto",
-  "edit": "Editar",
+  "edit": "Editar"
-  "organizationWorkingDaysAndHours": "Días y Horas Laborales de la Organización",
-  "workingDays": "Días Laborales",
-  "workingHours": "Horas Laborales",
-  "monday": "Lunes",
-  "tuesday": "Martes",
-  "wednesday": "Miércoles",
-  "thursday": "Jueves",
-  "friday": "Viernes",
-  "saturday": "Sábado",
-  "sunday": "Domingo",
-  "hours": "horas",
-  "saveButton": "Guardar",
-  "saved": "¡Guardado exitosamente!",
-  "errorSaving": "Error al guardar la configuración."
 }

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

@@ -47,5 +47,6 @@
   "weightedProgress": "Progreso Ponderado",
   "weightedProgressTooltip": "Calcular el progreso basado en los pesos de las subtareas",
   "timeProgress": "Progreso Basado en Tiempo",
-  "timeProgressTooltip": "Calcular el progreso basado en el tiempo estimado"
+  "timeProgressTooltip": "Calcular el progreso basado en el tiempo estimado",
+  "enterProjectKey": "Ingresa la clave del proyecto"
 }

worklenz-frontend/public/locales/es/task-drawer/task-drawer-recurring-config.json

@@ -2,6 +2,7 @@
   "recurring": "Recurrente",
   "recurringTaskConfiguration": "Configuración de tarea recurrente",
   "repeats": "Repeticiones",
+  "daily": "Diario",
   "weekly": "Semanal",
   "everyXDays": "Cada X días",
   "everyXWeeks": "Cada X semanas",

worklenz-frontend/public/locales/pt/admin-center/overview.json

@@ -4,19 +4,5 @@
   "owner": "Proprietário da Organização",
   "admins": "Administradores da Organização",
   "contactNumber": "Adicione o Número de Contato",
-  "edit": "Editar",
+  "edit": "Editar"
-  "organizationWorkingDaysAndHours": "Dias e Horas de Trabalho da Organização",
-  "workingDays": "Dias de Trabalho",
-  "workingHours": "Horas de Trabalho",
-  "monday": "Segunda-feira",
-  "tuesday": "Terça-feira",
-  "wednesday": "Quarta-feira",
-  "thursday": "Quinta-feira",
-  "friday": "Sexta-feira",
-  "saturday": "Sábado",
-  "sunday": "Domingo",
-  "hours": "horas",
-  "saveButton": "Salvar",
-  "saved": "Salvo com sucesso!",
-  "errorSaving": "Erro ao salvar as configurações."
 }

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

@@ -47,5 +47,6 @@
   "weightedProgress": "Progresso Ponderado",
   "weightedProgressTooltip": "Calcular o progresso com base nos pesos das subtarefas",
   "timeProgress": "Progresso Baseado em Tempo",
-  "timeProgressTooltip": "Calcular o progresso com base no tempo estimado"
+  "timeProgressTooltip": "Calcular o progresso com base no tempo estimado",
+  "enterProjectKey": "Insira a chave do projeto"
 }

worklenz-frontend/public/locales/pt/task-drawer/task-drawer-recurring-config.json

@@ -2,6 +2,7 @@
   "recurring": "Recorrente",
   "recurringTaskConfiguration": "Configuração de tarefa recorrente",
   "repeats": "Repete",
+  "daily": "Diário",
   "weekly": "Semanal",
   "everyXDays": "A cada X dias",
   "everyXWeeks": "A cada X semanas",

worklenz-frontend/src/App.tsx

@@ -13,6 +13,7 @@ import router from './app/routes';
 // Hooks & Utils
 import { useAppSelector } from './hooks/useAppSelector';
 import { initMixpanel } from './utils/mixpanelInit';
+import { initializeCsrfToken } from './api/api-client';
 
 // Types & Constants
 import { Language } from './features/i18n/localesSlice';
@@ -35,6 +36,13 @@ const App: React.FC<{ children: React.ReactNode }> = ({ children }) => {
     });
   }, [language]);
 
+  // Initialize CSRF token on app startup
+  useEffect(() => {
+    initializeCsrfToken().catch(error => {
+      logger.error('Failed to initialize CSRF token:', error);
+    });
+  }, []);
+
   return (
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>

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

@@ -4,27 +4,36 @@ import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
 import config from '@/config/env';
 
-export const getCsrfToken = (): string | null => {
+// Store CSRF token in memory (since csrf-sync uses session-based tokens)
-  const match = document.cookie.split('; ').find(cookie => cookie.startsWith('XSRF-TOKEN='));
+let csrfToken: string | null = null;
 
-  if (!match) {
+export const getCsrfToken = (): string | null => {
-    return null;
+  return csrfToken;
-  }
-  return decodeURIComponent(match.split('=')[1]);
 };
 
-// Function to refresh CSRF token if needed
+// Function to refresh CSRF token from server
 export const refreshCsrfToken = async (): Promise<string | null> => {
   try {
     // Make a GET request to the server to get a fresh CSRF token
-    await axios.get(`${config.apiUrl}/csrf-token`, { withCredentials: true });
+    const response = await axios.get(`${config.apiUrl}/csrf-token`, { withCredentials: true });
-    return getCsrfToken();
+    if (response.data && response.data.token) {
+      csrfToken = response.data.token;
+      return csrfToken;
+    }
+    return null;
   } catch (error) {
     console.error('Failed to refresh CSRF token:', error);
     return null;
   }
 };
 
+// Initialize CSRF token on app load
+export const initializeCsrfToken = async (): Promise<void> => {
+  if (!csrfToken) {
+    await refreshCsrfToken();
+  }
+};
+
 const apiClient = axios.create({
   baseURL: config.apiUrl,
   withCredentials: true,
@@ -36,12 +45,16 @@ const apiClient = axios.create({
 
 // Request interceptor
 apiClient.interceptors.request.use(
-  config => {
+  async config => {
-    const token = getCsrfToken();
+    // Ensure we have a CSRF token before making requests
-    if (token) {
+    if (!csrfToken) {
-      config.headers['X-CSRF-Token'] = token;
+      await refreshCsrfToken();
+    }
+    
+    if (csrfToken) {
+      config.headers['X-CSRF-Token'] = csrfToken;
     } else {
-      console.warn('No CSRF token found');
+      console.warn('No CSRF token available');
     }
     return config;
   },
@@ -84,7 +97,7 @@ apiClient.interceptors.response.use(
         (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')) {
       alertService.error('Security Error', 'Invalid security token. Refreshing your session...');
       
@@ -94,7 +107,7 @@ apiClient.interceptors.response.use(
         // Update the token in the failed request
         error.config.headers['X-CSRF-Token'] = newToken;
         // Retry the original request with the new token
-        return axios(error.config);
+        return apiClient(error.config);
       } else {
         // If token refresh failed, redirect to login
         window.location.href = '/auth/login';

worklenz-frontend/src/api/home-page/home-page.api.service.ts

@@ -5,7 +5,7 @@ import { toQueryString } from '@/utils/toQueryString';
 import { IHomeTasksModel, IHomeTasksConfig } from '@/types/home/home-page.types';
 import { IMyTask } from '@/types/home/my-tasks.types';
 import { IProject } from '@/types/project/project.types';
-import { getCsrfToken } from '../api-client';
+import { getCsrfToken, refreshCsrfToken } from '../api-client';
 import config from '@/config/env';
 
 const rootUrl = '/home';
@@ -14,9 +14,18 @@ const api = createApi({
   reducerPath: 'homePageApi',
   baseQuery: fetchBaseQuery({
     baseUrl: `${config.apiUrl}${API_BASE_URL}`,
-    prepareHeaders: headers => {
+    prepareHeaders: async headers => {
-      headers.set('X-CSRF-Token', getCsrfToken() || '');
+      // Get CSRF token, refresh if needed
+      let token = getCsrfToken();
+      if (!token) {
+        token = await refreshCsrfToken();
+      }
+      
+      if (token) {
+        headers.set('X-CSRF-Token', token);
+      }
       headers.set('Content-Type', 'application/json');
+      return headers;
     },
     credentials: 'include',
   }),

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

@@ -5,7 +5,7 @@ import { IProjectCategory } from '@/types/project/projectCategory.types';
 import { IProjectsViewModel } from '@/types/project/projectsViewModel.types';
 import { IServerResponse } from '@/types/common.types';
 import { IProjectMembersViewModel } from '@/types/projectMember.types';
-import { getCsrfToken } from '../api-client';
+import { getCsrfToken, refreshCsrfToken } from '../api-client';
 import config from '@/config/env';
 
 const rootUrl = '/projects';
@@ -14,9 +14,18 @@ export const projectsApi = createApi({
   reducerPath: 'projectsApi',
   baseQuery: fetchBaseQuery({
     baseUrl: `${config.apiUrl}${API_BASE_URL}`,
-    prepareHeaders: headers => {
+    prepareHeaders: async headers => {
-      headers.set('X-CSRF-Token', getCsrfToken() || '');
+      // Get CSRF token, refresh if needed
+      let token = getCsrfToken();
+      if (!token) {
+        token = await refreshCsrfToken();
+      }
+      
+      if (token) {
+        headers.set('X-CSRF-Token', token);
+      }
       headers.set('Content-Type', 'application/json');
+      return headers;
     },
     credentials: 'include',
   }),

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

@@ -5,6 +5,16 @@ import { ITaskLogViewModel } from "@/types/tasks/task-log-view.types";
 
 const rootUrl = `${API_BASE_URL}/task-time-log`;
 
+export interface IRunningTimer {
+  task_id: string;
+  start_time: string;
+  task_name: string;
+  project_id: string;
+  project_name: string;
+  parent_task_id?: string;
+  parent_task_name?: string;
+}
+
 export const taskTimeLogsApiService = {
   getByTask: async (id: string) : Promise<IServerResponse<ITaskLogViewModel[]>> => {
     const response = await apiClient.get(`${rootUrl}/task/${id}`);
@@ -26,6 +36,11 @@ export const taskTimeLogsApiService = {
     return response.data;
   },
 
+  getRunningTimers: async (): Promise<IServerResponse<IRunningTimer[]>> => {
+    const response = await apiClient.get(`${rootUrl}/running-timers`);
+    return response.data;
+  },
+
   exportToExcel(taskId: string) {
     window.location.href = `${import.meta.env.VITE_API_URL}${API_BASE_URL}/task-time-log/export/${taskId}`;
   },

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

@@ -8,7 +8,7 @@ type EmptyListPlaceholderProps = {
 };
 
 const EmptyListPlaceholder = ({
-  imageSrc = '/src/assets/images/empty-box.webp',
+  imageSrc = 'https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp',
   imageHeight = 60,
   text,
 }: EmptyListPlaceholderProps) => {

worklenz-frontend/src/components/HubSpot.tsx

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+
+const HubSpot = () => {
+  useEffect(() => {
+    const script = document.createElement('script');
+    script.type = 'text/javascript';
+    script.id = 'hs-script-loader';
+    script.async = true;
+    script.defer = true;
+    script.src = '//js.hs-scripts.com/22348300.js';
+    document.body.appendChild(script);
+
+    return () => {
+      const existingScript = document.getElementById('hs-script-loader');
+      if (existingScript) {
+        existingScript.remove();
+      }
+    };
+  }, []);
+
+  return null;
+};
+
+export default HubSpot; 

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

@@ -23,7 +23,7 @@ const HomeTasksStatusDropdown = ({ task, teamId }: HomeTasksStatusDropdownProps)
   const {
     refetch
   } = useGetMyTasksQuery(homeTasksConfig, {
-      skip: true // Skip automatic queries entirely
+    skip: false, // Ensure this query runs
   });
 
   const [selectedStatus, setSelectedStatus] = useState<ITaskStatus | undefined>(undefined);

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

@@ -23,7 +23,7 @@ const HomeTasksDatePicker = ({ record }: HomeTasksDatePickerProps) => {
     const { t } = useTranslation('home');
     const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
     const { refetch } = useGetMyTasksQuery(homeTasksConfig, {
-        skip: true // Skip automatic queries entirely
+        skip: false
     });
 
     // Use useMemo to avoid re-renders when record.end_date is the same

worklenz-frontend/src/components/task-drawer/shared/info-tab/details/task-drawer-recurring-config/task-drawer-recurring-config.tsx

@@ -24,44 +24,46 @@ import { taskRecurringApiService } from '@/api/tasks/task-recurring.api.service'
 import logger from '@/utils/errorLogger';
 import { setTaskRecurringSchedule } from '@/features/task-drawer/task-drawer.slice';
 
-const repeatOptions: IRepeatOption[] = [
-  { label: 'Daily', value: ITaskRecurring.Daily },
-  { label: 'Weekly', value: ITaskRecurring.Weekly },
-  { label: 'Every X Days', value: ITaskRecurring.EveryXDays },
-  { label: 'Every X Weeks', value: ITaskRecurring.EveryXWeeks },
-  { label: 'Every X Months', value: ITaskRecurring.EveryXMonths },
-  { label: 'Monthly', value: ITaskRecurring.Monthly },
-];
-
-const daysOfWeek = [
-  { label: 'Sunday', value: 0, checked: false },
-  { label: 'Monday', value: 1, checked: false },
-  { label: 'Tuesday', value: 2, checked: false },
-  { label: 'Wednesday', value: 3, checked: false },
-  { label: 'Thursday', value: 4, checked: false },
-  { label: 'Friday', value: 5, checked: false },
-  { label: 'Saturday', value: 6, checked: false }
-];
-
 const monthlyDateOptions = Array.from({ length: 28 }, (_, i) => i + 1);
-const weekOptions = [
-  { label: 'First', value: 1 },
-  { label: 'Second', value: 2 },
-  { label: 'Third', value: 3 },
-  { label: 'Fourth', value: 4 },
-  { label: 'Last', value: 5 }
-];
-const dayOptions = daysOfWeek.map(d => ({ label: d.label, value: d.value }));
 
 const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
   const { socket, connected } = useSocket();
   const dispatch = useAppDispatch();
   const { t } = useTranslation('task-drawer/task-drawer-recurring-config');
 
+  const repeatOptions: IRepeatOption[] = [
+    { label: t('daily'), value: ITaskRecurring.Daily },
+    { label: t('weekly'), value: ITaskRecurring.Weekly },
+    { label: t('everyXDays'), value: ITaskRecurring.EveryXDays },
+    { label: t('everyXWeeks'), value: ITaskRecurring.EveryXWeeks },
+    { label: t('everyXMonths'), value: ITaskRecurring.EveryXMonths },
+    { label: t('monthly'), value: ITaskRecurring.Monthly },
+  ];
+
+  const daysOfWeek = [
+    { label: t('sun'), value: 0, checked: false },
+    { label: t('mon'), value: 1, checked: false },
+    { label: t('tue'), value: 2, checked: false },
+    { label: t('wed'), value: 3, checked: false },
+    { label: t('thu'), value: 4, checked: false },
+    { label: t('fri'), value: 5, checked: false },
+    { label: t('sat'), value: 6, checked: false }
+  ];
+
+  const weekOptions = [
+    { label: t('first'), value: 1 },
+    { label: t('second'), value: 2 },
+    { label: t('third'), value: 3 },
+    { label: t('fourth'), value: 4 },
+    { label: t('last'), value: 5 }
+  ];
+
+  const dayOptions = daysOfWeek.map(d => ({ label: d.label, value: d.value }));
+
   const [recurring, setRecurring] = useState(false);
   const [showConfig, setShowConfig] = useState(false);
   const [repeatOption, setRepeatOption] = useState<IRepeatOption>({});
-  const [selectedDays, setSelectedDays] = useState([]);
+  const [selectedDays, setSelectedDays] = useState<number[]>([]);
   const [monthlyOption, setMonthlyOption] = useState('date');
   const [selectedMonthlyDate, setSelectedMonthlyDate] = useState(1);
   const [selectedMonthlyWeek, setSelectedMonthlyWeek] = useState(weekOptions[0].value);
@@ -106,8 +108,8 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
     [repeatOption]
   );
 
-  const handleDayCheckboxChange = (checkedValues: string[]) => {
+  const handleDayCheckboxChange = (checkedValues: number[]) => {
-    setSelectedDays(checkedValues as unknown as string[]);
+    setSelectedDays(checkedValues);
   };
 
   const getSelectedDays = () => {
@@ -165,7 +167,9 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
 
       const res = await taskRecurringApiService.updateTaskRecurringData(task.schedule_id, body);
       if (res.done) {
+        setRecurring(true);
         setShowConfig(false);
+        configVisibleChange(false);
       }
     } catch (e) {
       logger.error("handleSave", e);
@@ -220,9 +224,9 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
     if (!task) return;
 
     if (task) setRecurring(!!task.schedule_id);
-    if (recurring) void getScheduleData();
+    if (task.schedule_id) void getScheduleData();
     socket?.on(SocketEvents.TASK_RECURRING_CHANGE.toString(), handleResponse);
-  }, [task]);
+  }, [task?.schedule_id]);
 
   return (
     <div>
@@ -232,11 +236,11 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
           &nbsp;
           {recurring && (
             <Popover
-              title="Recurring task configuration"
+              title={t('recurringTaskConfiguration')}
               content={
                 <Skeleton loading={loadingData} active>
                   <Form layout="vertical">
-                    <Form.Item label="Repeats">
+                    <Form.Item label={t('repeats')}>
                       <Select
                         value={repeatOption.value}
                         onChange={val => {
@@ -251,9 +255,12 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                     </Form.Item>
 
                     {repeatOption.value === ITaskRecurring.Weekly && (
-                      <Form.Item label="Select Days of the Week">
+                      <Form.Item label={t('selectDaysOfWeek')}>
                         <Checkbox.Group
-                          options={daysOfWeek}
+                          options={daysOfWeek.map(day => ({
+                            label: day.label,
+                            value: day.value
+                          }))}
                           value={selectedDays}
                           onChange={handleDayCheckboxChange}
                           style={{ width: '100%' }}
@@ -271,17 +278,17 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
 
                     {isMonthlySelected && (
                       <>
-                        <Form.Item label="Monthly repeat type">
+                        <Form.Item label={t('monthlyRepeatType')}>
                           <Radio.Group
                             value={monthlyOption}
                             onChange={e => setMonthlyOption(e.target.value)}
                           >
-                            <Radio.Button value="date">On a specific date</Radio.Button>
+                            <Radio.Button value="date">{t('onSpecificDate')}</Radio.Button>
-                            <Radio.Button value="day">On a specific day</Radio.Button>
+                            <Radio.Button value="day">{t('onSpecificDay')}</Radio.Button>
                           </Radio.Group>
                         </Form.Item>
                         {monthlyOption === 'date' && (
-                          <Form.Item label="Date of the month">
+                          <Form.Item label={t('dateOfMonth')}>
                             <Select
                               value={selectedMonthlyDate}
                               onChange={setSelectedMonthlyDate}
@@ -295,7 +302,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                         )}
                         {monthlyOption === 'day' && (
                           <>
-                            <Form.Item label="Week of the month">
+                            <Form.Item label={t('weekOfMonth')}>
                               <Select
                                 value={selectedMonthlyWeek}
                                 onChange={setSelectedMonthlyWeek}
@@ -303,7 +310,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                                 style={{ width: 150 }}
                               />
                             </Form.Item>
-                            <Form.Item label="Day of the week">
+                            <Form.Item label={t('dayOfWeek')}>
                               <Select
                                 value={selectedMonthlyDay}
                                 onChange={setSelectedMonthlyDay}
@@ -317,7 +324,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                     )}
 
                     {repeatOption.value === ITaskRecurring.EveryXDays && (
-                      <Form.Item label="Interval (days)">
+                      <Form.Item label={t('intervalDays')}>
                         <InputNumber
                           min={1}
                           value={intervalDays}
@@ -326,7 +333,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                       </Form.Item>
                     )}
                     {repeatOption.value === ITaskRecurring.EveryXWeeks && (
-                      <Form.Item label="Interval (weeks)">
+                      <Form.Item label={t('intervalWeeks')}>
                         <InputNumber
                           min={1}
                           value={intervalWeeks}
@@ -335,7 +342,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                       </Form.Item>
                     )}
                     {repeatOption.value === ITaskRecurring.EveryXMonths && (
-                      <Form.Item label="Interval (months)">
+                      <Form.Item label={t('intervalMonths')}>
                         <InputNumber
                           min={1}
                           value={intervalMonths}
@@ -350,7 +357,7 @@ const TaskDrawerRecurringConfig = ({ task }: { task: ITaskViewModel }) => {
                         loading={updatingData}
                         onClick={handleSave}
                       >
-                        Save Changes
+                        {t('saveChanges')}
                       </Button>
                     </Form.Item>
                   </Form>

worklenz-frontend/src/components/task-drawer/shared/info-tab/task-details-form.tsx

@@ -30,6 +30,7 @@ import TaskDrawerProgress from './details/task-drawer-progress/task-drawer-progr
 import { useAppSelector } from '@/hooks/useAppSelector';
 import logger from '@/utils/errorLogger';
 import TaskDrawerRecurringConfig from './details/task-drawer-recurring-config/task-drawer-recurring-config';
+import { InlineMember } from '@/types/teamMembers/inlineMember.types';
 
 interface TaskDetailsFormProps {
   taskFormViewModel?: ITaskFormViewModel | null;
@@ -46,9 +47,6 @@ const ConditionalProgressInput = ({ task, form }: ConditionalProgressInputProps)
   const hasSubTasks = task?.sub_tasks_count > 0;
   const isSubTask = !!task?.parent_task_id;
 
-  // Add more aggressive logging and checks
-  logger.debug(`Task ${task.id} status: hasSubTasks=${hasSubTasks}, isSubTask=${isSubTask}, modes: time=${project?.use_time_progress}, manual=${project?.use_manual_progress}, weighted=${project?.use_weighted_progress}`);
-  
   // STRICT RULE: Never show progress input for parent tasks with subtasks
   // This is the most important check and must be done first
   if (hasSubTasks) {
@@ -59,13 +57,19 @@ const ConditionalProgressInput = ({ task, form }: ConditionalProgressInputProps)
   // Only for tasks without subtasks, determine which input to show based on project mode
   if (project?.use_time_progress) {
     // In time-based mode, show progress input ONLY for tasks without subtasks
-    return <TaskDrawerProgress task={{...task, sub_tasks_count: hasSubTasks ? 1 : 0}} form={form} />;
+    return (
+      <TaskDrawerProgress task={{ ...task, sub_tasks_count: hasSubTasks ? 1 : 0 }} form={form} />
+    );
   } else if (project?.use_manual_progress) {
     // In manual mode, show progress input ONLY for tasks without subtasks
-    return <TaskDrawerProgress task={{...task, sub_tasks_count: hasSubTasks ? 1 : 0}} form={form} />;
+    return (
+      <TaskDrawerProgress task={{ ...task, sub_tasks_count: hasSubTasks ? 1 : 0 }} form={form} />
+    );
   } else if (project?.use_weighted_progress && isSubTask) {
     // In weighted mode, show weight input for subtasks
-    return <TaskDrawerProgress task={{...task, sub_tasks_count: hasSubTasks ? 1 : 0}} form={form} />;
+    return (
+      <TaskDrawerProgress task={{ ...task, sub_tasks_count: hasSubTasks ? 1 : 0 }} form={form} />
+    );
   }
 
   return null;
@@ -148,7 +152,13 @@ const TaskDetailsForm = ({ taskFormViewModel = null }: TaskDetailsFormProps) =>
 
         <Form.Item name="assignees" label={t('taskInfoTab.details.assignees')}>
           <Flex gap={4} align="center">
-            <Avatars members={taskFormViewModel?.task?.assignee_names || []} />
+            <Avatars
+              members={
+                taskFormViewModel?.task?.assignee_names ||
+                (taskFormViewModel?.task?.names as unknown as InlineMember[]) ||
+                []
+              }
+            />
             <TaskDrawerAssigneeSelector
               task={(taskFormViewModel?.task as ITaskViewModel) || null}
             />
@@ -160,10 +170,7 @@ const TaskDetailsForm = ({ taskFormViewModel = null }: TaskDetailsFormProps) =>
         <TaskDrawerEstimation t={t} task={taskFormViewModel?.task as ITaskViewModel} form={form} />
 
         {taskFormViewModel?.task && (
-          <ConditionalProgressInput 
+          <ConditionalProgressInput task={taskFormViewModel?.task as ITaskViewModel} form={form} />
-            task={taskFormViewModel?.task as ITaskViewModel} 
-            form={form} 
-          />
         )}
 
         <Form.Item name="priority" label={t('taskInfoTab.details.priority')}>
@@ -176,9 +183,9 @@ const TaskDetailsForm = ({ taskFormViewModel = null }: TaskDetailsFormProps) =>
           <TaskDrawerBillable task={taskFormViewModel?.task as ITaskViewModel} />
         </Form.Item>
 
-        {/* <Form.Item name="recurring" label={t('taskInfoTab.details.recurring')}>
+        <Form.Item name="recurring" label={t('taskInfoTab.details.recurring')}>
           <TaskDrawerRecurringConfig task={taskFormViewModel?.task as ITaskViewModel} />
-        </Form.Item> */}
+        </Form.Item>
 
         <Form.Item name="notify" label={t('taskInfoTab.details.notify')}>
           <NotifyMemberSelector task={taskFormViewModel?.task as ITaskViewModel} t={t} />

worklenz-frontend/src/components/task-drawer/task-drawer-header/task-drawer-header.tsx

@@ -27,6 +27,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   const { socket, connected } = useSocket();
   const { clearTaskFromUrl } = useTaskDrawerUrlSync();
   const isDeleting = useRef(false);
+  const [isEditing, setIsEditing] = useState(false);
 
   const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
   const [taskName, setTaskName] = useState<string>(taskFormViewModel?.task?.name ?? '');
@@ -88,6 +89,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   };
 
   const handleInputBlur = () => {
+    setIsEditing(false);
     if (
       !selectedTaskId ||
       !connected ||
@@ -113,6 +115,7 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   return (
     <Flex gap={12} align="center" style={{ marginBlockEnd: 6 }}>
       <Flex style={{ position: 'relative', width: '100%' }}>
+        {isEditing ? (
           <Input
             ref={inputRef}
             size="large"
@@ -125,9 +128,26 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
               width: '100%', 
               border: 'none',
             }}
-          showCount={false}
+            showCount={true}
             maxLength={250}
+            autoFocus
           />
+        ) : (
+          <p 
+            onClick={() => setIsEditing(true)} 
+            style={{ 
+              margin: 0, 
+              padding: '4px 11px',
+              fontSize: '16px',
+              cursor: 'pointer',
+              wordWrap: 'break-word',
+              overflowWrap: 'break-word',
+              width: '100%'
+            }}
+          >
+            {taskName || t('taskHeader.taskNamePlaceholder')}
+          </p>
+        )}
       </Flex>
 
       <TaskDrawerStatusDropdown

worklenz-frontend/src/components/task-drawer/task-drawer-status-dropdown/task-drawer-status-dropdown.tsx

@@ -12,7 +12,7 @@ import { ITaskViewModel } from '@/types/tasks/task.types';
 import { ITaskStatus } from '@/types/tasks/taskStatus.types';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 import { Select } from 'antd';
-import { useEffect, useMemo } from 'react';
+import { useMemo } from 'react';
 
 interface TaskDrawerStatusDropdownProps {
   statuses: ITaskStatus[];
@@ -21,7 +21,7 @@ interface TaskDrawerStatusDropdownProps {
 }
 
 const TaskDrawerStatusDropdown = ({ statuses, task, teamId }: TaskDrawerStatusDropdownProps) => {
-  const { socket, connected } = useSocket();
+  const { socket } = useSocket();
   const dispatch = useAppDispatch();
   const themeMode = useAppSelector(state => state.themeReducer.mode);
   const { tab } = useTabSearchParam();

worklenz-frontend/src/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar.tsx

@@ -58,7 +58,7 @@ import alertService from '@/services/alerts/alertService';
 
 interface ITaskAssignee {
   id: string;
-  name?: string;
+  name: string;
   email?: string;
   avatar_url?: string;
   team_member_id: string;
@@ -437,7 +437,7 @@ const TaskListBulkActionsBar = () => {
                 placement="top"
                 arrow
                 trigger={['click']}
-                destroyPopupOnHide
+                destroyOnHidden
                 onOpenChange={value => {
                   if (!value) {
                     setSelectedLabels([]);

worklenz-frontend/src/features/navbar/navbar.tsx

@@ -5,7 +5,6 @@ import { Col, ConfigProvider, Flex, Menu, MenuProps, Alert } from 'antd';
 import { createPortal } from 'react-dom';
 
 import InviteTeamMembers from '../../components/common/invite-team-members/invite-team-members';
-import HelpButton from './help/HelpButton';
 import InviteButton from './invite/InviteButton';
 import MobileMenuButton from './mobileMenu/MobileMenuButton';
 import NavbarLogo from './navbar-logo';
@@ -22,6 +21,7 @@ import { useAuthService } from '@/hooks/useAuth';
 import { authApiService } from '@/api/auth/auth.api.service';
 import { ISUBSCRIPTION_TYPE } from '@/shared/constants';
 import logger from '@/utils/errorLogger';
+import TimerButton from './timers/timer-button';
 
 const Navbar = () => {
   const [current, setCurrent] = useState<string>('home');
@@ -90,6 +90,7 @@ const Navbar = () => {
   }, [location]);
 
   return (
+    
     <Col
       style={{
         width: '100%',
@@ -101,14 +102,6 @@ const Navbar = () => {
         justifyContent: 'space-between',
       }}
     >
-      {daysUntilExpiry !== null && ((daysUntilExpiry <= 3 && daysUntilExpiry > 0) || (daysUntilExpiry >= -7 && daysUntilExpiry < 0)) && (
-        <Alert
-          message={daysUntilExpiry > 0 ? `Your license will expire in ${daysUntilExpiry} days` : `Your license has expired ${Math.abs(daysUntilExpiry)} days ago`}
-          type="warning"
-          showIcon
-          style={{ width: '100%', marginTop: 12 }}
-        />
-      )}
       <Flex
         style={{
           width: '100%',
@@ -152,7 +145,7 @@ const Navbar = () => {
                   <Flex align="center">
                     <SwitchTeamButton />
                     <NotificationButton />
-                    <HelpButton />
+                    <TimerButton />
                     <ProfileButton isOwnerOrAdmin={isOwnerOrAdmin} />
                   </Flex>
                 </Flex>

worklenz-frontend/src/features/navbar/timers/timer-button.tsx

@@ -0,0 +1,275 @@
+import { ClockCircleOutlined, StopOutlined } from '@ant-design/icons';
+import { Badge, Button, Dropdown, List, Tooltip, Typography, Space, Divider, theme } from 'antd';
+import React, { useEffect, useState, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { taskTimeLogsApiService, IRunningTimer } from '@/api/tasks/task-time-logs.api.service';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { updateTaskTimeTracking } from '@/features/tasks/tasks.slice';
+import moment from 'moment';
+
+const { Text } = Typography;
+const { useToken } = theme;
+
+const TimerButton = () => {
+  const [runningTimers, setRunningTimers] = useState<IRunningTimer[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [currentTimes, setCurrentTimes] = useState<Record<string, string>>({});
+  const [dropdownOpen, setDropdownOpen] = useState(false);
+  const { t } = useTranslation('navbar');
+  const { token } = useToken();
+  const dispatch = useAppDispatch();
+  const { socket } = useSocket();
+
+  const fetchRunningTimers = useCallback(async () => {
+    try {
+      setLoading(true);
+      const response = await taskTimeLogsApiService.getRunningTimers();
+      if (response.done) {
+        setRunningTimers(response.body || []);
+      }
+    } catch (error) {
+      console.error('Error fetching running timers:', error);
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  const updateCurrentTimes = () => {
+    const newTimes: Record<string, string> = {};
+    runningTimers.forEach(timer => {
+      const startTime = moment(timer.start_time);
+      const now = moment();
+      const duration = moment.duration(now.diff(startTime));
+      const hours = Math.floor(duration.asHours());
+      const minutes = duration.minutes();
+      const seconds = duration.seconds();
+      newTimes[timer.task_id] = `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
+    });
+    setCurrentTimes(newTimes);
+  };
+
+  useEffect(() => {
+    fetchRunningTimers();
+    
+    // Set up polling to refresh timers every 30 seconds
+    const pollInterval = setInterval(() => {
+      fetchRunningTimers();
+    }, 30000);
+    
+    return () => clearInterval(pollInterval);
+  }, [fetchRunningTimers]);
+
+  useEffect(() => {
+    if (runningTimers.length > 0) {
+      updateCurrentTimes();
+      const interval = setInterval(updateCurrentTimes, 1000);
+      return () => clearInterval(interval);
+    }
+  }, [runningTimers]);
+
+  // Listen for timer start/stop events and project updates to refresh the count
+  useEffect(() => {
+    if (!socket) return;
+
+    const handleTimerStart = (data: string) => {
+      try {
+        const { id } = typeof data === 'string' ? JSON.parse(data) : data;
+        if (id) {
+          // Refresh the running timers list when a new timer is started
+          fetchRunningTimers();
+        }
+      } catch (error) {
+        console.error('Error parsing timer start event:', error);
+      }
+    };
+
+    const handleTimerStop = (data: string) => {
+      try {
+        const { id } = typeof data === 'string' ? JSON.parse(data) : data;
+        if (id) {
+          // Refresh the running timers list when a timer is stopped
+          fetchRunningTimers();
+        }
+      } catch (error) {
+        console.error('Error parsing timer stop event:', error);
+      }
+    };
+
+    const handleProjectUpdates = () => {
+      // Refresh timers when project updates are available
+      fetchRunningTimers();
+    };
+
+    socket.on(SocketEvents.TASK_TIMER_START.toString(), handleTimerStart);
+    socket.on(SocketEvents.TASK_TIMER_STOP.toString(), handleTimerStop);
+    socket.on(SocketEvents.PROJECT_UPDATES_AVAILABLE.toString(), handleProjectUpdates);
+
+    return () => {
+      socket.off(SocketEvents.TASK_TIMER_START.toString(), handleTimerStart);
+      socket.off(SocketEvents.TASK_TIMER_STOP.toString(), handleTimerStop);
+      socket.off(SocketEvents.PROJECT_UPDATES_AVAILABLE.toString(), handleProjectUpdates);
+    };
+  }, [socket, fetchRunningTimers]);
+
+  const hasRunningTimers = () => {
+    return runningTimers.length > 0;
+  };
+
+  const timerCount = () => {
+    return runningTimers.length;
+  };
+
+  const handleStopTimer = (taskId: string) => {
+    if (!socket) return;
+    
+    socket.emit(SocketEvents.TASK_TIMER_STOP.toString(), JSON.stringify({ task_id: taskId }));
+    dispatch(updateTaskTimeTracking({ taskId, timeTracking: null }));
+  };
+
+  const dropdownContent = (
+    <div 
+      style={{ 
+        width: 350, 
+        maxHeight: 400, 
+        overflow: 'auto',
+        backgroundColor: token.colorBgElevated,
+        borderRadius: token.borderRadius,
+        boxShadow: token.boxShadowSecondary,
+        border: `1px solid ${token.colorBorderSecondary}`
+      }}
+    >
+      {runningTimers.length === 0 ? (
+        <div style={{ padding: 16, textAlign: 'center' }}>
+          <Text type="secondary">No running timers</Text>
+        </div>
+      ) : (
+        <List
+          dataSource={runningTimers}
+          renderItem={(timer) => (
+            <List.Item 
+              style={{ 
+                padding: '12px 16px',
+                borderBottom: `1px solid ${token.colorBorderSecondary}`,
+                backgroundColor: 'transparent'
+              }}
+            >
+              <div style={{ width: '100%' }}>
+                <Space direction="vertical" size={4} style={{ width: '100%' }}>
+                  <Text strong style={{ fontSize: 14, color: token.colorText }}>
+                    {timer.task_name}
+                  </Text>
+                  <div style={{ 
+                    display: 'inline-block',
+                    backgroundColor: token.colorPrimaryBg,
+                    color: token.colorPrimary,
+                    padding: '2px 8px',
+                    borderRadius: token.borderRadiusSM,
+                    fontSize: 11,
+                    fontWeight: 500,
+                    marginTop: 2
+                  }}>
+                    {timer.project_name}
+                  </div>
+                  {timer.parent_task_name && (
+                    <Text type="secondary" style={{ fontSize: 11 }}>
+                      Parent: {timer.parent_task_name}
+                    </Text>
+                  )}
+                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                    <div style={{ flex: 1 }}>
+                      <div style={{ display: 'flex', alignItems: 'center', gap: 8, marginBottom: 4 }}>
+                        <Text type="secondary" style={{ fontSize: 11 }}>
+                          Started: {moment(timer.start_time).format('HH:mm')}
+                        </Text>
+                        <Text 
+                          strong 
+                          style={{ 
+                            fontSize: 14, 
+                            color: token.colorPrimary,
+                            fontFamily: 'monospace'
+                          }}
+                        >
+                          {currentTimes[timer.task_id] || '00:00:00'}
+                        </Text>
+                      </div>
+                    </div>
+                    <Button
+                      size="small"
+                      icon={<StopOutlined />}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        handleStopTimer(timer.task_id);
+                      }}
+                      style={{
+                        backgroundColor: token.colorErrorBg,
+                        borderColor: token.colorError,
+                        color: token.colorError,
+                        fontWeight: 500
+                      }}
+                    >
+                      Stop
+                    </Button>
+                  </div>
+                </Space>
+              </div>
+            </List.Item>
+          )}
+        />
+      )}
+      {runningTimers.length > 0 && (
+        <>
+          <Divider style={{ margin: 0, borderColor: token.colorBorderSecondary }} />
+          <div 
+            style={{ 
+              padding: '8px 16px', 
+              textAlign: 'center', 
+              backgroundColor: token.colorFillQuaternary,
+              borderBottomLeftRadius: token.borderRadius,
+              borderBottomRightRadius: token.borderRadius
+            }}
+          >
+            <Text type="secondary" style={{ fontSize: 11 }}>
+              {runningTimers.length} timer{runningTimers.length !== 1 ? 's' : ''} running
+            </Text>
+          </div>
+        </>
+      )}
+    </div>
+  );
+
+  return (
+    <Dropdown
+      popupRender={() => dropdownContent}
+      trigger={['click']}
+      placement="bottomRight"
+      open={dropdownOpen}
+      onOpenChange={(open) => {
+        setDropdownOpen(open);
+        if (open) {
+          fetchRunningTimers();
+        }
+      }}
+    >
+      <Tooltip title="Running Timers">
+        <Button
+          style={{ height: '62px', width: '60px' }}
+          type="text"
+          icon={
+            hasRunningTimers() ? (
+              <Badge count={timerCount()}>
+                <ClockCircleOutlined style={{ fontSize: 20 }} />
+              </Badge>
+            ) : (
+              <ClockCircleOutlined style={{ fontSize: 20 }} />
+            )
+          }
+          loading={loading}
+        />
+      </Tooltip>
+    </Dropdown>
+  );
+};
+
+export default TimerButton; 

worklenz-frontend/src/hooks/useFilterDataLoader.ts

@@ -0,0 +1,69 @@
+import { useEffect, useCallback } from 'react';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
+import {
+  fetchLabelsByProject,
+  fetchTaskAssignees,
+} from '@/features/tasks/tasks.slice';
+import { getTeamMembers } from '@/features/team-members/team-members.slice';
+
+/**
+ * Hook to manage filter data loading independently of main task list loading
+ * This ensures filter data loading doesn't block the main UI skeleton
+ */
+export const useFilterDataLoader = () => {
+  const dispatch = useAppDispatch();
+  
+  const { priorities } = useAppSelector(state => ({
+    priorities: state.priorityReducer.priorities,
+  }));
+  
+  const { projectId } = useAppSelector(state => ({
+    projectId: state.projectReducer.projectId,
+  }));
+
+  // Load filter data asynchronously
+  const loadFilterData = useCallback(async () => {
+    try {
+      // Load priorities if not already loaded (usually fast/cached)
+      if (!priorities.length) {
+        dispatch(fetchPriorities());
+      }
+
+      // Load project-specific data in parallel without blocking
+      if (projectId) {
+        // These dispatch calls are fire-and-forget
+        // They will update the UI when ready, but won't block initial render
+        dispatch(fetchLabelsByProject(projectId));
+        dispatch(fetchTaskAssignees(projectId));
+      }
+
+      // Load team members for member filters
+      dispatch(getTeamMembers({ 
+        index: 0, 
+        size: 100, 
+        field: null, 
+        order: null, 
+        search: null, 
+        all: true 
+      }));
+    } catch (error) {
+      console.error('Error loading filter data:', error);
+      // Don't throw - filter loading errors shouldn't break the main UI
+    }
+  }, [dispatch, priorities.length, projectId]);
+
+  // Load filter data on mount and when dependencies change
+  useEffect(() => {
+    // Use setTimeout to ensure this runs after the main component render
+    // This prevents filter loading from blocking the initial render
+    const timeoutId = setTimeout(loadFilterData, 0);
+    
+    return () => clearTimeout(timeoutId);
+  }, [loadFilterData]);
+
+  return {
+    loadFilterData,
+  };
+}; 

worklenz-frontend/src/hooks/useTaskDragAndDrop.ts

@@ -0,0 +1,146 @@
+import { useMemo, useCallback } from 'react';
+import {
+  DndContext,
+  DragEndEvent,
+  DragOverEvent,
+  DragStartEvent,
+  PointerSensor,
+  useSensor,
+  useSensors,
+  KeyboardSensor,
+  TouchSensor,
+} from '@dnd-kit/core';
+import { sortableKeyboardCoordinates } from '@dnd-kit/sortable';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { updateTaskStatus } from '@/features/tasks/tasks.slice';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+
+export const useTaskDragAndDrop = () => {
+  const dispatch = useAppDispatch();
+  
+  // Memoize the selector to prevent unnecessary rerenders
+  const taskGroups = useAppSelector(state => state.taskReducer.taskGroups);
+  const groupBy = useAppSelector(state => state.taskReducer.groupBy);
+
+  // Memoize sensors configuration for better performance
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 8,
+      },
+    }),
+    useSensor(KeyboardSensor, {
+      coordinateGetter: sortableKeyboardCoordinates,
+    }),
+    useSensor(TouchSensor, {
+      activationConstraint: {
+        delay: 250,
+        tolerance: 5,
+      },
+    })
+  );
+
+  const handleDragStart = useCallback((event: DragStartEvent) => {
+    // Add visual feedback for drag start
+    const { active } = event;
+    if (active) {
+      document.body.style.cursor = 'grabbing';
+    }
+  }, []);
+
+  const handleDragOver = useCallback((event: DragOverEvent) => {
+    // Handle drag over logic if needed
+    // This can be used for visual feedback during drag
+  }, []);
+
+  const handleDragEnd = useCallback(
+    (event: DragEndEvent) => {
+      // Reset cursor
+      document.body.style.cursor = '';
+
+      const { active, over } = event;
+      
+      if (!active || !over || !taskGroups) {
+        return;
+      }
+
+      try {
+        const activeId = active.id as string;
+        const overId = over.id as string;
+
+        // Find the task being dragged
+        let draggedTask: IProjectTask | null = null;
+        let sourceGroupId: string | null = null;
+
+        for (const group of taskGroups) {
+          const task = group.tasks?.find((t: IProjectTask) => t.id === activeId);
+          if (task) {
+            draggedTask = task;
+            sourceGroupId = group.id;
+            break;
+          }
+        }
+
+        if (!draggedTask || !sourceGroupId) {
+          console.warn('Could not find dragged task');
+          return;
+        }
+
+        // Determine target group
+        let targetGroupId: string | null = null;
+
+        // Check if dropped on a group container
+        const targetGroup = taskGroups.find((group: ITaskListGroup) => group.id === overId);
+        if (targetGroup) {
+          targetGroupId = targetGroup.id;
+        } else {
+          // Check if dropped on another task
+          for (const group of taskGroups) {
+            const targetTask = group.tasks?.find((t: IProjectTask) => t.id === overId);
+            if (targetTask) {
+              targetGroupId = group.id;
+              break;
+            }
+          }
+        }
+
+        if (!targetGroupId || targetGroupId === sourceGroupId) {
+          return; // No change needed
+        }
+
+        // Update task status based on group change
+        const targetGroupData = taskGroups.find((group: ITaskListGroup) => group.id === targetGroupId);
+        if (targetGroupData && groupBy === 'status') {
+          const updatePayload: any = {
+            task_id: draggedTask.id,
+            status_id: targetGroupData.id,
+          };
+          
+          if (draggedTask.parent_task_id) {
+            updatePayload.parent_task = draggedTask.parent_task_id;
+          }
+          
+          dispatch(updateTaskStatus(updatePayload));
+        }
+      } catch (error) {
+        console.error('Error handling drag end:', error);
+      }
+    },
+    [taskGroups, groupBy, dispatch]
+  );
+
+  // Memoize the drag and drop configuration
+  const dragAndDropConfig = useMemo(
+    () => ({
+      sensors,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+    }),
+    [sensors, handleDragStart, handleDragOver, handleDragEnd]
+  );
+
+  return dragAndDropConfig;
+}; 

worklenz-frontend/src/hooks/useTaskSocketHandlers.ts

@@ -0,0 +1,343 @@
+import { useCallback, useEffect } from 'react';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useSocket } from '@/socket/socketContext';
+import { useAuthService } from '@/hooks/useAuth';
+import { SocketEvents } from '@/shared/socket-events';
+import logger from '@/utils/errorLogger';
+import alertService from '@/services/alerts/alertService';
+
+import { ITaskAssigneesUpdateResponse } from '@/types/tasks/task-assignee-update-response';
+import { ILabelsChangeResponse } from '@/types/tasks/taskList.types';
+import { ITaskListStatusChangeResponse } from '@/types/tasks/task-list-status.types';
+import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
+import { ITaskPhaseChangeResponse } from '@/types/tasks/task-phase-change-response';
+import { InlineMember } from '@/types/teamMembers/inlineMember.types';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+
+import {
+  fetchTaskAssignees,
+  updateTaskAssignees,
+  fetchLabelsByProject,
+  updateTaskLabel,
+  updateTaskStatus,
+  updateTaskPriority,
+  updateTaskEndDate,
+  updateTaskEstimation,
+  updateTaskName,
+  updateTaskPhase,
+  updateTaskStartDate,
+  updateTaskDescription,
+  updateSubTasks,
+  updateTaskProgress,
+} from '@/features/tasks/tasks.slice';
+import { fetchLabels } from '@/features/taskAttributes/taskLabelSlice';
+import {
+  setStartDate,
+  setTaskAssignee,
+  setTaskEndDate,
+  setTaskLabels,
+  setTaskPriority,
+  setTaskStatus,
+  setTaskSubscribers,
+} from '@/features/task-drawer/task-drawer.slice';
+import { deselectAll } from '@/features/projects/bulkActions/bulkActionSlice';
+
+export const useTaskSocketHandlers = () => {
+  const dispatch = useAppDispatch();
+  const { socket } = useSocket();
+  const currentSession = useAuthService().getCurrentSession();
+  
+  const { loadingAssignees, taskGroups } = useAppSelector((state: any) => state.taskReducer);
+  const { projectId } = useAppSelector((state: any) => state.projectReducer);
+
+  // Memoize socket event handlers
+  const handleAssigneesUpdate = useCallback(
+    (data: ITaskAssigneesUpdateResponse) => {
+      if (!data) return;
+
+      const updatedAssignees = data.assignees?.map(assignee => ({
+        ...assignee,
+        selected: true,
+      })) || [];
+
+      const groupId = taskGroups?.find((group: ITaskListGroup) =>
+        group.tasks?.some(
+          (task: IProjectTask) =>
+            task.id === data.id ||
+            (task.sub_tasks && task.sub_tasks.some((subtask: IProjectTask) => subtask.id === data.id))
+        )
+      )?.id;
+
+      if (groupId) {
+        dispatch(
+          updateTaskAssignees({
+            groupId,
+            taskId: data.id,
+            assignees: updatedAssignees,
+          })
+        );
+
+        dispatch(
+          setTaskAssignee({
+            ...data,
+            manual_progress: false,
+          } as IProjectTask)
+        );
+
+        if (currentSession?.team_id && !loadingAssignees) {
+          dispatch(fetchTaskAssignees(currentSession.team_id));
+        }
+      }
+    },
+    [taskGroups, dispatch, currentSession?.team_id, loadingAssignees]
+  );
+
+  const handleLabelsChange = useCallback(
+    async (labels: ILabelsChangeResponse) => {
+      if (!labels) return;
+      
+      await Promise.all([
+        dispatch(updateTaskLabel(labels)),
+        dispatch(setTaskLabels(labels)),
+        dispatch(fetchLabels()),
+        projectId && dispatch(fetchLabelsByProject(projectId)),
+      ]);
+    },
+    [dispatch, projectId]
+  );
+
+  const handleTaskStatusChange = useCallback(
+    (response: ITaskListStatusChangeResponse) => {
+      if (!response) return;
+
+      if (response.completed_deps === false) {
+        alertService.error(
+          'Task is not completed',
+          'Please complete the task dependencies before proceeding'
+        );
+        return;
+      }
+
+      dispatch(updateTaskStatus(response));
+      dispatch(deselectAll());
+    },
+    [dispatch]
+  );
+
+  const handleTaskProgress = useCallback(
+    (data: {
+      id: string;
+      status: string;
+      complete_ratio: number;
+      completed_count: number;
+      total_tasks_count: number;
+      parent_task: string;
+    }) => {
+      if (!data) return;
+
+      dispatch(
+        updateTaskProgress({
+          taskId: data.parent_task || data.id,
+          progress: data.complete_ratio,
+          totalTasksCount: data.total_tasks_count,
+          completedCount: data.completed_count,
+        })
+      );
+    },
+    [dispatch]
+  );
+
+  const handlePriorityChange = useCallback(
+    (response: ITaskListPriorityChangeResponse) => {
+      if (!response) return;
+
+      dispatch(updateTaskPriority(response));
+      dispatch(setTaskPriority(response));
+      dispatch(deselectAll());
+    },
+    [dispatch]
+  );
+
+  const handleEndDateChange = useCallback(
+    (task: {
+      id: string;
+      parent_task: string | null;
+      end_date: string;
+    }) => {
+      if (!task) return;
+
+      const taskWithProgress = {
+        ...task,
+        manual_progress: false,
+      } as IProjectTask;
+
+      dispatch(updateTaskEndDate({ task: taskWithProgress }));
+      dispatch(setTaskEndDate(taskWithProgress));
+    },
+    [dispatch]
+  );
+
+  const handleTaskNameChange = useCallback(
+    (data: { id: string; parent_task: string; name: string }) => {
+      if (!data) return;
+      dispatch(updateTaskName(data));
+    },
+    [dispatch]
+  );
+
+  const handlePhaseChange = useCallback(
+    (data: ITaskPhaseChangeResponse) => {
+      if (!data) return;
+      dispatch(updateTaskPhase(data));
+      dispatch(deselectAll());
+    },
+    [dispatch]
+  );
+
+  const handleStartDateChange = useCallback(
+    (task: {
+      id: string;
+      parent_task: string | null;
+      start_date: string;
+    }) => {
+      if (!task) return;
+
+      const taskWithProgress = {
+        ...task,
+        manual_progress: false,
+      } as IProjectTask;
+
+      dispatch(updateTaskStartDate({ task: taskWithProgress }));
+      dispatch(setStartDate(taskWithProgress));
+    },
+    [dispatch]
+  );
+
+  const handleTaskSubscribersChange = useCallback(
+    (data: InlineMember[]) => {
+      if (!data) return;
+      dispatch(setTaskSubscribers(data));
+    },
+    [dispatch]
+  );
+
+  const handleEstimationChange = useCallback(
+    (task: {
+      id: string;
+      parent_task: string | null;
+      estimation: number;
+    }) => {
+      if (!task) return;
+
+      const taskWithProgress = {
+        ...task,
+        manual_progress: false,
+      } as IProjectTask;
+
+      dispatch(updateTaskEstimation({ task: taskWithProgress }));
+    },
+    [dispatch]
+  );
+
+  const handleTaskDescriptionChange = useCallback(
+    (data: {
+      id: string;
+      parent_task: string;
+      description: string;
+    }) => {
+      if (!data) return;
+      dispatch(updateTaskDescription(data));
+    },
+    [dispatch]
+  );
+
+  const handleNewTaskReceived = useCallback(
+    (data: IProjectTask) => {
+      if (!data) return;
+      if (data.parent_task_id) {
+        dispatch(updateSubTasks(data));
+      }
+    },
+    [dispatch]
+  );
+
+  const handleTaskProgressUpdated = useCallback(
+    (data: {
+      task_id: string;
+      progress_value?: number;
+      weight?: number;
+    }) => {
+      if (!data || !taskGroups) return;
+
+      if (data.progress_value !== undefined) {
+        for (const group of taskGroups) {
+          const task = group.tasks?.find((task: IProjectTask) => task.id === data.task_id);
+          if (task) {
+            dispatch(
+              updateTaskProgress({
+                taskId: data.task_id,
+                progress: data.progress_value,
+                totalTasksCount: task.total_tasks_count || 0,
+                completedCount: task.completed_count || 0,
+              })
+            );
+            break;
+          }
+        }
+      }
+    },
+    [dispatch, taskGroups]
+  );
+
+  // Register socket event listeners
+  useEffect(() => {
+    if (!socket) return;
+
+    const eventHandlers = [
+      { event: SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), handler: handleAssigneesUpdate },
+      { event: SocketEvents.TASK_LABELS_CHANGE.toString(), handler: handleLabelsChange },
+      { event: SocketEvents.TASK_STATUS_CHANGE.toString(), handler: handleTaskStatusChange },
+      { event: SocketEvents.TASK_PROGRESS_UPDATED.toString(), handler: handleTaskProgress },
+      { event: SocketEvents.TASK_PRIORITY_CHANGE.toString(), handler: handlePriorityChange },
+      { event: SocketEvents.TASK_END_DATE_CHANGE.toString(), handler: handleEndDateChange },
+      { event: SocketEvents.TASK_NAME_CHANGE.toString(), handler: handleTaskNameChange },
+      { event: SocketEvents.TASK_PHASE_CHANGE.toString(), handler: handlePhaseChange },
+      { event: SocketEvents.TASK_START_DATE_CHANGE.toString(), handler: handleStartDateChange },
+      { event: SocketEvents.TASK_SUBSCRIBERS_CHANGE.toString(), handler: handleTaskSubscribersChange },
+      { event: SocketEvents.TASK_TIME_ESTIMATION_CHANGE.toString(), handler: handleEstimationChange },
+      { event: SocketEvents.TASK_DESCRIPTION_CHANGE.toString(), handler: handleTaskDescriptionChange },
+      { event: SocketEvents.QUICK_TASK.toString(), handler: handleNewTaskReceived },
+      { event: SocketEvents.TASK_PROGRESS_UPDATED.toString(), handler: handleTaskProgressUpdated },
+    ];
+
+    // Register all event listeners
+    eventHandlers.forEach(({ event, handler }) => {
+      socket.on(event, handler);
+    });
+
+    // Cleanup function
+    return () => {
+      eventHandlers.forEach(({ event, handler }) => {
+        socket.off(event, handler);
+      });
+    };
+  }, [
+    socket,
+    handleAssigneesUpdate,
+    handleLabelsChange,
+    handleTaskStatusChange,
+    handleTaskProgress,
+    handlePriorityChange,
+    handleEndDateChange,
+    handleTaskNameChange,
+    handlePhaseChange,
+    handleStartDateChange,
+    handleTaskSubscribersChange,
+    handleEstimationChange,
+    handleTaskDescriptionChange,
+    handleNewTaskReceived,
+    handleTaskProgressUpdated,
+  ]);
+}; 

worklenz-frontend/src/index.css

@@ -58,9 +58,9 @@ html.light body {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  font-family: -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial,
+  font-family:
-    "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol",
+    -apple-system, BlinkMacSystemFont, "Inter", Roboto, "Helvetica Neue", Arial, "Noto Sans",
-    "Noto Color Emoji" !important;
+    sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
 }
 
 /* helper classes  */
@@ -145,3 +145,4 @@ Not supports in Firefox and IE */
 tr:hover .action-buttons {
   opacity: 1;
 }
+

worklenz-frontend/src/layouts/MainLayout.tsx

@@ -7,7 +7,7 @@ import { colors } from '../styles/colors';
 import { verifyAuthentication } from '@/features/auth/authSlice';
 import { useEffect } from 'react';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import TawkTo from '@/components/TawkTo';
+import HubSpot from '@/components/HubSpot';
 
 const MainLayout = () => {
   const themeMode = useAppSelector(state => state.themeReducer.mode);
@@ -68,9 +68,6 @@ const MainLayout = () => {
             <Outlet />
           </Col>
         </Layout.Content>
-        {import.meta.env.VITE_APP_ENV === 'production' && (
-          <TawkTo propertyId="67ecc524f62fbf190db18bde" widgetId="1inqe45sq" />
-        )}
       </Layout>
     </ConfigProvider>
   );

worklenz-frontend/src/lib/settings/settings-constants.ts

@@ -108,14 +108,14 @@ export const settingsItems: SettingMenuItems[] = [
     element: React.createElement(CategoriesSettings),
     adminOnly: true,
   },
-  // {
+  {
-  //   key: 'project-templates',
+    key: 'project-templates',
-  //   name: 'project-templates',
+    name: 'project-templates',
-  //   endpoint: 'project-templates',
+    endpoint: 'project-templates',
-  //   icon: React.createElement(FileZipOutlined),
+    icon: React.createElement(FileZipOutlined),
-  //   element: React.createElement(ProjectTemplatesSettings),
+    element: React.createElement(ProjectTemplatesSettings),
-  //   adminOnly: true,
+    adminOnly: true,
-  // },
+  },
   {
     key: 'task-templates',
     name: 'task-templates',

worklenz-frontend/src/pages/admin-center/overview/overview.tsx

@@ -1,6 +1,6 @@
 import { EditOutlined, MailOutlined, PhoneOutlined } from '@ant-design/icons';
 import { PageHeader } from '@ant-design/pro-components';
-import { Button, Card, Input, Space, Tooltip, Typography, Checkbox, Col, Form, Row, message } from 'antd';
+import { Button, Card, Input, Space, Tooltip, Typography } from 'antd';
 import React, { useEffect, useState } from 'react';
 import OrganizationAdminsTable from '@/components/admin-center/overview/organization-admins-table/organization-admins-table';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -12,8 +12,6 @@ import { adminCenterApiService } from '@/api/admin-center/admin-center.api.servi
 import { IOrganization, IOrganizationAdmin } from '@/types/admin-center/admin-center.types';
 import logger from '@/utils/errorLogger';
 import { tr } from 'date-fns/locale';
-import { scheduleAPIService } from '@/api/schedule/schedule.api.service';
-import { Settings } from '@/types/schedule/schedule-v2.types';
 
 const { Text } = Typography;
 
@@ -21,10 +19,6 @@ const Overview: React.FC = () => {
   const [organization, setOrganization] = useState<IOrganization | null>(null);
   const [organizationAdmins, setOrganizationAdmins] = useState<IOrganizationAdmin[] | null>(null);
   const [loadingAdmins, setLoadingAdmins] = useState(false);
-  const [workingDays, setWorkingDays] = useState<Settings['workingDays']>([]);
-  const [workingHours, setWorkingHours] = useState<Settings['workingHours']>(8);
-  const [saving, setSaving] = useState(false);
-  const [form] = Form.useForm();
 
   const themeMode = useAppSelector((state: RootState) => state.themeReducer.mode);
   const { t } = useTranslation('admin-center/overview');
@@ -40,19 +34,6 @@ const Overview: React.FC = () => {
     }
   };
 
-  const getOrgWorkingSettings = async () => {
-    try {
-      const res = await scheduleAPIService.fetchScheduleSettings();
-      if (res && res.done) {
-        setWorkingDays(res.body.workingDays || ['Monday','Tuesday','Wednesday','Thursday','Friday']);
-        setWorkingHours(res.body.workingHours || 8);
-        form.setFieldsValue({ workingDays: res.body.workingDays || ['Monday','Tuesday','Wednesday','Thursday','Friday'], workingHours: res.body.workingHours || 8 });
-      }
-    } catch (error) {
-      logger.error('Error getting organization working settings', error);
-    }
-  };
-
   const getOrganizationAdmins = async () => {
     setLoadingAdmins(true);
     try {
@@ -67,30 +48,8 @@ const Overview: React.FC = () => {
     }
   };
 
-  const handleSave = async (values: any) => {
-    setSaving(true);
-    try {
-      const res = await scheduleAPIService.updateScheduleSettings({
-        workingDays: values.workingDays,
-        workingHours: values.workingHours,
-      });
-      if (res && res.done) {
-        message.success(t('saved'));
-        setWorkingDays(values.workingDays);
-        setWorkingHours(values.workingHours);
-        getOrgWorkingSettings();
-      }
-    } catch (error) {
-      logger.error('Error updating organization working days/hours', error);
-      message.error(t('errorSaving'));
-    } finally {
-      setSaving(false);
-    }
-  };
-
   useEffect(() => {
     getOrganizationDetails();
-    getOrgWorkingSettings();
     getOrganizationAdmins();
   }, []);
 
@@ -113,37 +72,6 @@ const Overview: React.FC = () => {
           refetch={getOrganizationDetails}
         />
 
-        <Card>
-          <Typography.Title level={5} style={{ margin: 0 }}>{t('organizationWorkingDaysAndHours') || 'Organization Working Days & Hours'}</Typography.Title>
-          <Form
-            layout="vertical"
-            form={form}
-            initialValues={{ workingDays, workingHours }}
-            onFinish={handleSave}
-            style={{ marginTop: 16 }}
-          >
-            <Form.Item label={t('workingDays')} name="workingDays">
-              <Checkbox.Group>
-                <Row>
-                  <Col span={8}><Checkbox value="Monday">{t('monday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Tuesday">{t('tuesday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Wednesday">{t('wednesday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Thursday">{t('thursday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Friday">{t('friday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Saturday">{t('saturday')}</Checkbox></Col>
-                  <Col span={8}><Checkbox value="Sunday">{t('sunday')}</Checkbox></Col>
-                </Row>
-              </Checkbox.Group>
-            </Form.Item>
-            <Form.Item label={t('workingHours')} name="workingHours">
-              <Input type="number" min={1} max={24} suffix={t('hours')} width={100} />
-            </Form.Item>
-            <Form.Item>
-              <Button type="primary" htmlType="submit" loading={saving}>{t('saveButton') || 'Save'}</Button>
-            </Form.Item>
-          </Form>
-        </Card>
-
         <Card>
           <Typography.Title level={5} style={{ margin: 0 }}>
             {t('admins')}

worklenz-frontend/src/pages/home/recent-and-favourite-project-list/recent-and-favourite-project-list.tsx

@@ -132,7 +132,7 @@ const RecentAndFavouriteProjectList = () => {
       <div style={{ maxHeight: 420, overflow: 'auto' }}>
         {projectsData?.body?.length === 0 ? (
           <Empty
-            image="https://app.worklenz.com/assets/images/empty-box.webp"
+            image="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
             imageStyle={{ height: 60 }}
             style={{
               display: 'flex',

worklenz-frontend/src/pages/home/task-list/tasks-list.tsx

@@ -89,7 +89,7 @@ const TasksList: React.FC = React.memo(() => {
     dispatch(getTeamMembers({ index: 0, size: 100, field: null, order: null, search: null, all: true }));
   }, [dispatch]);
 
-  const handleSelectTask = useCallback((task : IMyTask) => {
+  const handleSelectTask = useCallback((task: IMyTask) => {
     dispatch(setSelectedTaskId(task.id || ''));
     dispatch(fetchTask({ taskId: task.id || '', projectId: task.project_id || '' }));
     dispatch(setProjectId(task.project_id || ''));
@@ -155,7 +155,7 @@ const TasksList: React.FC = React.memo(() => {
         render: (_, record) => {
           return (
             <Tooltip title={record.project_name}>
-              <Typography.Paragraph style={{ margin: 0, paddingInlineEnd: 6, maxWidth:120 }} ellipsis={{ tooltip: true }}>
+              <Typography.Paragraph style={{ margin: 0, paddingInlineEnd: 6, maxWidth: 120 }} ellipsis={{ tooltip: true }}>
                 <Badge color={record.phase_color || 'blue'} style={{ marginInlineEnd: 4 }} />
                 {record.project_name}
               </Typography.Paragraph>
@@ -259,7 +259,7 @@ const TasksList: React.FC = React.memo(() => {
         <Skeleton active />
       ) : data?.body.total === 0 ? (
         <EmptyListPlaceholder
-          imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
+          imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
           text=" No tasks to show."
         />
       ) : (
@@ -271,7 +271,7 @@ const TasksList: React.FC = React.memo(() => {
             columns={columns as TableProps<IMyTask>['columns']}
             size="middle"
             rowClassName={() => 'custom-row-height'}
-            loading={homeTasksFetching && !skipAutoRefetch}
+            loading={homeTasksFetching && skipAutoRefetch}
             pagination={false}
           />
 

worklenz-frontend/src/pages/home/todo-list/todo-list.tsx

@@ -147,7 +147,7 @@ const TodoList = () => {
         <div style={{ maxHeight: 420, overflow: 'auto' }}>
           {data?.body.length === 0 ? (
             <EmptyListPlaceholder
-              imageSrc="/src/assets/images/empty-box.webp"
+              imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
               text={t('home:todoList.noTasks')}
             />
           ) : (

worklenz-frontend/src/pages/projects/projectView/members/project-view-members.tsx

@@ -263,7 +263,7 @@ const ProjectViewMembers = () => {
     >
       {members?.total === 0 ? (
         <EmptyListPlaceholder
-          imageSrc="https://app.worklenz.com/assets/images/empty-box.webp"
+          imageSrc="https://s3.us-west-2.amazonaws.com/worklenz.com/assets/empty-box.webp"
           imageHeight={120}
           text={t('emptyText')}
         />

worklenz-frontend/src/pages/projects/projectView/project-view.tsx

@@ -177,7 +177,7 @@ const ProjectView = () => {
         onChange={handleTabChange}
         items={tabMenuItems}
         tabBarStyle={{ paddingInline: 0 }}
-        destroyInactiveTabPane={true}
+        destroyOnHidden={true}
       />
 
       {portalElements}

worklenz-frontend/src/pages/projects/projectView/taskList/components/task-group/task-group.tsx

@@ -0,0 +1,241 @@
+import React, { useState, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDroppable } from '@dnd-kit/core';
+import Flex from 'antd/es/flex';
+import Badge from 'antd/es/badge';
+import Button from 'antd/es/button';
+import Dropdown from 'antd/es/dropdown';
+import Input from 'antd/es/input';
+import Typography from 'antd/es/typography';
+import { MenuProps } from 'antd/es/menu';
+import { EditOutlined, EllipsisOutlined, RetweetOutlined, RightOutlined } from '@ant-design/icons';
+
+import { colors } from '@/styles/colors';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import Collapsible from '@/components/collapsible/collapsible';
+import TaskListTable from '../../task-list-table/task-list-table';
+import { IGroupBy, updateTaskGroupColor } from '@/features/tasks/tasks.slice';
+import { useAuthService } from '@/hooks/useAuth';
+import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
+import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
+import { ITaskPhase } from '@/types/tasks/taskPhase.types';
+import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/phases.slice';
+import { fetchStatuses } from '@/features/taskAttributes/taskStatusSlice';
+import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
+import { evt_project_board_column_setting_click } from '@/shared/worklenz-analytics-events';
+import { ALPHA_CHANNEL } from '@/shared/constants';
+import useIsProjectManager from '@/hooks/useIsProjectManager';
+import logger from '@/utils/errorLogger';
+
+interface TaskGroupProps {
+  taskGroup: ITaskListGroup;
+  groupBy: string;
+  color: string;
+  activeId?: string | null;
+}
+
+const TaskGroup: React.FC<TaskGroupProps> = ({ 
+  taskGroup, 
+  groupBy, 
+  color, 
+  activeId 
+}) => {
+  const { t } = useTranslation('task-list-table');
+  const dispatch = useAppDispatch();
+  const { trackMixpanelEvent } = useMixpanelTracking();
+  const isProjectManager = useIsProjectManager();
+  const currentSession = useAuthService().getCurrentSession();
+
+  const [isExpanded, setIsExpanded] = useState(true);
+  const [isRenaming, setIsRenaming] = useState(false);
+  const [groupName, setGroupName] = useState(taskGroup.name || '');
+
+  const { projectId } = useAppSelector((state: any) => state.projectReducer);
+  const themeMode = useAppSelector((state: any) => state.themeReducer.mode);
+
+  // Memoize droppable configuration
+  const { setNodeRef } = useDroppable({
+    id: taskGroup.id,
+    data: {
+      type: 'group',
+      groupId: taskGroup.id,
+    },
+  });
+
+  // Memoize task count
+  const taskCount = useMemo(() => taskGroup.tasks?.length || 0, [taskGroup.tasks]);
+
+  // Memoize dropdown items
+  const dropdownItems: MenuProps['items'] = useMemo(() => {
+    if (groupBy !== IGroupBy.STATUS || !isProjectManager) return [];
+
+    return [
+      {
+        key: 'rename',
+        label: t('renameText'),
+        icon: <EditOutlined />,
+        onClick: () => setIsRenaming(true),
+      },
+      {
+        key: 'change-category',
+        label: t('changeCategoryText'),
+        icon: <RetweetOutlined />,
+        children: [
+          {
+            key: 'todo',
+            label: t('todoText'),
+            onClick: () => handleStatusCategoryChange('0'),
+          },
+          {
+            key: 'doing',
+            label: t('doingText'),
+            onClick: () => handleStatusCategoryChange('1'),
+          },
+          {
+            key: 'done',
+            label: t('doneText'),
+            onClick: () => handleStatusCategoryChange('2'),
+          },
+        ],
+      },
+    ];
+  }, [groupBy, isProjectManager, t]);
+
+  const handleStatusCategoryChange = async (category: string) => {
+    if (!projectId || !taskGroup.id) return;
+
+    try {
+      await statusApiService.updateStatus({
+        id: taskGroup.id,
+        category_id: category,
+        project_id: projectId,
+      });
+      
+      dispatch(fetchStatuses());
+      trackMixpanelEvent(evt_project_board_column_setting_click, {
+        column_id: taskGroup.id,
+        action: 'change_category',
+        category,
+      });
+    } catch (error) {
+      logger.error('Error updating status category:', error);
+    }
+  };
+
+  const handleRename = async () => {
+    if (!projectId || !taskGroup.id || !groupName.trim()) return;
+
+    try {
+      if (groupBy === IGroupBy.STATUS) {
+        await statusApiService.updateStatus({
+          id: taskGroup.id,
+          name: groupName.trim(),
+          project_id: projectId,
+        });
+        dispatch(fetchStatuses());
+      } else if (groupBy === IGroupBy.PHASE) {
+        const phaseData: ITaskPhase = {
+          id: taskGroup.id,
+          name: groupName.trim(),
+          project_id: projectId,
+          color_code: taskGroup.color_code,
+        };
+        await phasesApiService.updatePhase(phaseData);
+        dispatch(fetchPhasesByProjectId(projectId));
+      }
+      
+      setIsRenaming(false);
+    } catch (error) {
+      logger.error('Error renaming group:', error);
+    }
+  };
+
+  const handleColorChange = async (newColor: string) => {
+    if (!projectId || !taskGroup.id) return;
+
+    try {
+      const baseColor = newColor.endsWith(ALPHA_CHANNEL)
+        ? newColor.slice(0, -ALPHA_CHANNEL.length)
+        : newColor;
+
+      if (groupBy === IGroupBy.PHASE) {
+        const phaseData: ITaskPhase = {
+          id: taskGroup.id,
+          name: taskGroup.name || '',
+          project_id: projectId,
+          color_code: baseColor,
+        };
+        await phasesApiService.updatePhase(phaseData);
+        dispatch(fetchPhasesByProjectId(projectId));
+      }
+
+      dispatch(updateTaskGroupColor({
+        groupId: taskGroup.id,
+        color: baseColor,
+      }));
+    } catch (error) {
+      logger.error('Error updating group color:', error);
+    }
+  };
+
+  return (
+    <div ref={setNodeRef}>
+      <Flex vertical>
+        {/* Group Header */}
+        <Flex style={{ transform: 'translateY(6px)' }}>
+          <Button
+            className="custom-collapse-button"
+            style={{
+              backgroundColor: color,
+              border: 'none',
+              borderBottomLeftRadius: isExpanded ? 0 : 4,
+              borderBottomRightRadius: isExpanded ? 0 : 4,
+              color: colors.darkGray,
+              minWidth: 200,
+            }}
+            icon={<RightOutlined rotate={isExpanded ? 90 : 0} />}
+            onClick={() => setIsExpanded(!isExpanded)}
+          >
+            {isRenaming ? (
+              <Input
+                size="small"
+                value={groupName}
+                onChange={e => setGroupName(e.target.value)}
+                onBlur={handleRename}
+                onPressEnter={handleRename}
+                onClick={e => e.stopPropagation()}
+                autoFocus
+              />
+            ) : (
+              <Typography.Text style={{ fontSize: 14, fontWeight: 600 }}>
+                {taskGroup.name} ({taskCount})
+              </Typography.Text>
+            )}
+          </Button>
+          
+          {dropdownItems.length > 0 && !isRenaming && (
+            <Dropdown menu={{ items: dropdownItems }} trigger={['click']}>
+              <Button icon={<EllipsisOutlined />} className="borderless-icon-btn" />
+            </Dropdown>
+          )}
+        </Flex>
+
+        {/* Task List */}
+        <Collapsible isOpen={isExpanded}>
+          <TaskListTable
+            taskList={taskGroup.tasks || []}
+            tableId={taskGroup.id}
+            groupBy={groupBy}
+            color={color}
+            activeId={activeId}
+          />
+        </Collapsible>
+      </Flex>
+    </div>
+  );
+};
+
+export default React.memo(TaskGroup); 

worklenz-frontend/src/pages/projects/projectView/taskList/project-view-task-list.tsx

@@ -4,7 +4,7 @@ import Skeleton from 'antd/es/skeleton';
 import { useSearchParams } from 'react-router-dom';
 
 import TaskListFilters from './task-list-filters/task-list-filters';
-import TaskGroupWrapper from './task-list-table/task-group-wrapper/task-group-wrapper';
+import TaskGroupWrapperOptimized from './task-group-wrapper-optimized';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { fetchTaskGroups, fetchTaskListColumns } from '@/features/tasks/tasks.slice';
@@ -17,29 +17,33 @@ const ProjectViewTaskList = () => {
   const dispatch = useAppDispatch();
   const { projectView } = useTabSearchParam();
   const [searchParams, setSearchParams] = useSearchParams();
-  const [isLoading, setIsLoading] = useState(true);
   const [initialLoadComplete, setInitialLoadComplete] = useState(false);
 
-  const { projectId } = useAppSelector(state => state.projectReducer);
+  // Split selectors to prevent unnecessary rerenders
-  const { taskGroups, loadingGroups, groupBy, archived, fields, search } = useAppSelector(
+  const projectId = useAppSelector(state => state.projectReducer.projectId);
-    state => state.taskReducer
+  const taskGroups = useAppSelector(state => state.taskReducer.taskGroups);
-  );
+  const loadingGroups = useAppSelector(state => state.taskReducer.loadingGroups);
-  const { statusCategories, loading: loadingStatusCategories } = useAppSelector(
+  const groupBy = useAppSelector(state => state.taskReducer.groupBy);
-    state => state.taskStatusReducer
+  const archived = useAppSelector(state => state.taskReducer.archived);
-  );
+  const fields = useAppSelector(state => state.taskReducer.fields);
-  const { loadingPhases } = useAppSelector(state => state.phaseReducer);
+  const search = useAppSelector(state => state.taskReducer.search);
-  const { loadingColumns } = useAppSelector(state => state.taskReducer);
 
-  // Memoize the loading state calculation - ignoring task list filter loading
+  const statusCategories = useAppSelector(state => state.taskStatusReducer.statusCategories);
-  const isLoadingState = useMemo(() => 
+  const loadingStatusCategories = useAppSelector(state => state.taskStatusReducer.loading);
-    loadingGroups || loadingPhases || loadingStatusCategories,
+
-    [loadingGroups, loadingPhases, loadingStatusCategories]
+  const loadingPhases = useAppSelector(state => state.phaseReducer.loadingPhases);
+
+  // Single source of truth for loading state - EXCLUDE labels loading from skeleton
+  // Labels loading should not block the main task list display
+  const isLoading = useMemo(() => 
+    loadingGroups || loadingPhases || loadingStatusCategories || !initialLoadComplete,
+    [loadingGroups, loadingPhases, loadingStatusCategories, initialLoadComplete]
   );
 
   // Memoize the empty state check
   const isEmptyState = useMemo(() => 
-    taskGroups && taskGroups.length === 0 && !isLoadingState,
+    taskGroups && taskGroups.length === 0 && !isLoading,
-    [taskGroups, isLoadingState]
+    [taskGroups, isLoading]
   );
 
   // Handle view type changes
@@ -50,34 +54,32 @@ const ProjectViewTaskList = () => {
       newParams.set('pinned_tab', 'tasks-list');
       setSearchParams(newParams);
     }
-  }, [projectView, setSearchParams]);
+  }, [projectView, setSearchParams, searchParams]);
 
-  // Update loading state
+  // Batch initial data fetching - core data only
-  useEffect(() => {
-    setIsLoading(isLoadingState);
-  }, [isLoadingState]);
-
-  // Fetch initial data only once
   useEffect(() => {
     const fetchInitialData = async () => {
       if (!projectId || !groupBy || initialLoadComplete) return;
 
       try {
-        await Promise.all([
+        // Batch only essential API calls for initial load
+        // Filter data (labels, assignees, etc.) will load separately and not block the UI
+        await Promise.allSettled([
           dispatch(fetchTaskListColumns(projectId)),
           dispatch(fetchPhasesByProjectId(projectId)),
-          dispatch(fetchStatusesCategories())
+          dispatch(fetchStatusesCategories()),
         ]);
         setInitialLoadComplete(true);
       } catch (error) {
         console.error('Error fetching initial data:', error);
+        setInitialLoadComplete(true); // Still mark as complete to prevent infinite loading
       }
     };
 
     fetchInitialData();
   }, [projectId, groupBy, dispatch, initialLoadComplete]);
 
-  // Fetch task groups
+  // Fetch task groups with dependency on initial load completion
   useEffect(() => {
     const fetchTasks = async () => {
       if (!projectId || !groupBy || projectView !== 'list' || !initialLoadComplete) return;
@@ -92,15 +94,22 @@ const ProjectViewTaskList = () => {
     fetchTasks();
   }, [projectId, groupBy, projectView, dispatch, fields, search, archived, initialLoadComplete]);
 
+  // Memoize the task groups to prevent unnecessary re-renders
+  const memoizedTaskGroups = useMemo(() => taskGroups || [], [taskGroups]);
+
   return (
     <Flex vertical gap={16} style={{ overflowX: 'hidden' }}>
+      {/* Filters load independently and don't block the main content */}
       <TaskListFilters position="list" />
 
       {isEmptyState ? (
         <Empty description="No tasks group found" />
       ) : (
         <Skeleton active loading={isLoading} className='mt-4 p-4'>
-          <TaskGroupWrapper taskGroups={taskGroups} groupBy={groupBy} />
+          <TaskGroupWrapperOptimized 
+            taskGroups={memoizedTaskGroups} 
+            groupBy={groupBy} 
+          />
         </Skeleton>
       )}
     </Flex>

worklenz-frontend/src/pages/projects/projectView/taskList/task-group-wrapper-optimized.tsx

@@ -0,0 +1,112 @@
+import React, { useEffect, useMemo } from 'react';
+import { createPortal } from 'react-dom';
+import Flex from 'antd/es/flex';
+import useIsomorphicLayoutEffect from '@/hooks/useIsomorphicLayoutEffect';
+
+import {
+  DndContext,
+  pointerWithin,
+} from '@dnd-kit/core';
+
+import { ITaskListGroup } from '@/types/tasks/taskList.types';
+import { useAppSelector } from '@/hooks/useAppSelector';
+
+import TaskListTableWrapper from './task-list-table/task-list-table-wrapper/task-list-table-wrapper';
+import TaskListBulkActionsBar from '@/components/taskListCommon/task-list-bulk-actions-bar/task-list-bulk-actions-bar';
+import TaskTemplateDrawer from '@/components/task-templates/task-template-drawer';
+
+import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
+import { useTaskDragAndDrop } from '@/hooks/useTaskDragAndDrop';
+
+interface TaskGroupWrapperOptimizedProps {
+  taskGroups: ITaskListGroup[];
+  groupBy: string;
+}
+
+const TaskGroupWrapperOptimized = ({ taskGroups, groupBy }: TaskGroupWrapperOptimizedProps) => {
+  const themeMode = useAppSelector((state: any) => state.themeReducer.mode);
+
+  // Use extracted hooks
+  useTaskSocketHandlers();
+  const {
+    activeId,
+    sensors,
+    handleDragStart,
+    handleDragEnd,
+    handleDragOver,
+    resetTaskRowStyles,
+  } = useTaskDragAndDrop({ taskGroups, groupBy });
+
+  // Memoize task groups with colors
+  const taskGroupsWithColors = useMemo(() => 
+    taskGroups?.map(taskGroup => ({
+      ...taskGroup,
+      displayColor: themeMode === 'dark' ? taskGroup.color_code_dark : taskGroup.color_code,
+    })) || [],
+    [taskGroups, themeMode]
+  );
+
+  // Add drag styles
+  useEffect(() => {
+    const style = document.createElement('style');
+    style.textContent = `
+      .task-row[data-is-dragging="true"] {
+        opacity: 0.5 !important;
+        transform: rotate(5deg) !important;
+        z-index: 1000 !important;
+        position: relative !important;
+      }
+      .task-row {
+        transition: transform 0.2s ease, opacity 0.2s ease;
+      }
+    `;
+    document.head.appendChild(style);
+
+    return () => {
+      document.head.removeChild(style);
+    };
+  }, []);
+
+  // Handle animation cleanup after drag ends
+  useIsomorphicLayoutEffect(() => {
+    if (activeId === null) {
+      const timeoutId = setTimeout(resetTaskRowStyles, 50);
+      return () => clearTimeout(timeoutId);
+    }
+  }, [activeId, resetTaskRowStyles]);
+
+  return (
+    <DndContext
+      sensors={sensors}
+      collisionDetection={pointerWithin}
+      onDragStart={handleDragStart}
+      onDragEnd={handleDragEnd}
+      onDragOver={handleDragOver}
+    >
+      <Flex gap={24} vertical>
+        {taskGroupsWithColors.map(taskGroup => (
+          <TaskListTableWrapper
+            key={taskGroup.id}
+            taskList={taskGroup.tasks}
+            tableId={taskGroup.id}
+            name={taskGroup.name}
+            groupBy={groupBy}
+            statusCategory={taskGroup.category_id}
+            color={taskGroup.displayColor}
+            activeId={activeId}
+          />
+        ))}
+
+        {createPortal(<TaskListBulkActionsBar />, document.body, 'bulk-action-container')}
+
+        {createPortal(
+          <TaskTemplateDrawer showDrawer={false} selectedTemplateId="" onClose={() => {}} />,
+          document.body,
+          'task-template-drawer'
+        )}
+      </Flex>
+    </DndContext>
+  );
+};
+
+export default React.memo(TaskGroupWrapperOptimized); 

worklenz-frontend/src/pages/projects/projectView/taskList/task-list-filters/task-list-filters.tsx

@@ -7,6 +7,7 @@ import { useTranslation } from 'react-i18next';
 import { fetchPriorities } from '@/features/taskAttributes/taskPrioritySlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
 import {
   fetchLabelsByProject,
   fetchTaskAssignees,
@@ -33,23 +34,49 @@ const TaskListFilters: React.FC<TaskListFiltersProps> = ({ position }) => {
   const { projectView } = useTabSearchParam();
 
   const priorities = useAppSelector(state => state.priorityReducer.priorities);
-
   const projectId = useAppSelector(state => state.projectReducer.projectId);
   const archived = useAppSelector(state => state.taskReducer.archived);
 
   const handleShowArchivedChange = () => dispatch(toggleArchived());
 
+  // Load filter data asynchronously and non-blocking
+  // This runs independently of the main task list loading
   useEffect(() => {
-    const fetchInitialData = async () => {
+    const loadFilterData = async () => {
-      if (!priorities.length) await dispatch(fetchPriorities());
+      try {
-      if (projectId) {
+        // Load priorities first (usually cached/fast)
-        await dispatch(fetchLabelsByProject(projectId));
+        if (!priorities.length) {
-        await dispatch(fetchTaskAssignees(projectId));
+          dispatch(fetchPriorities());
+        }
+
+        // Load project-specific filter data in parallel, but don't await
+        // This allows the main task list to load while filters are still loading
+        if (projectId) {
+          // Fire and forget - these will update the UI when ready
+          dispatch(fetchLabelsByProject(projectId));
+          dispatch(fetchTaskAssignees(projectId));
+        }
+
+        // Load team members (usually needed for member filters)
+        dispatch(getTeamMembers({ 
+          index: 0, 
+          size: 100, 
+          field: null, 
+          order: null, 
+          search: null, 
+          all: true 
+        }));
+      } catch (error) {
+        console.error('Error loading filter data:', error);
+        // Don't throw - filter loading errors shouldn't break the main UI
       }
-      dispatch(getTeamMembers({ index: 0, size: 100, field: null, order: null, search: null, all: true }));
     };
 
-    fetchInitialData();
+    // Use setTimeout to ensure this runs after the main component render
+    // This prevents filter loading from blocking the initial render
+    const timeoutId = setTimeout(loadFilterData, 0);
+    
+    return () => clearTimeout(timeoutId);
   }, [dispatch, priorities.length, projectId]);
 
   return (

worklenz-frontend/src/pages/reporting/time-reports/members-time-sheet/members-time-sheet.tsx

@@ -16,7 +16,6 @@ import { reportingTimesheetApiService } from '@/api/reporting/reporting.timeshee
 import { IRPTTimeMember } from '@/types/reporting/reporting.types';
 import logger from '@/utils/errorLogger';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { format } from 'date-fns';
 
 ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend, ChartDataLabels);
 
@@ -142,18 +141,12 @@ const MembersTimeSheet = forwardRef<MembersTimeSheetRef>((_, ref) => {
       const selectedProjects = filterProjects.filter(project => project.selected);
       const selectedCategories = categories.filter(category => category.selected);
 
-      // Format dates using date-fns
-      const formattedDateRange = dateRange ? [
-        format(new Date(dateRange[0]), 'yyyy-MM-dd'),
-        format(new Date(dateRange[1]), 'yyyy-MM-dd')
-      ] : undefined;
-
       const body = {
         teams: selectedTeams.map(t => t.id),
         projects: selectedProjects.map(project => project.id),
         categories: selectedCategories.map(category => category.id),
         duration,
-        date_range: formattedDateRange,
+        date_range: dateRange,
         billable,
       };
 

worklenz-frontend/src/pages/settings/project-templates/project-templates-settings.tsx

@@ -51,7 +51,7 @@ const ProjectTemplatesSettings = () => {
           style={{ display: 'flex', gap: '10px', justifyContent: 'right' }}
           className="button-visibilty"
         >
-          <Tooltip title={t('editToolTip')}>
+          {/* <Tooltip title={t('editToolTip')}>
             <Button
               size="small"
               onClick={() =>
@@ -60,7 +60,7 @@ const ProjectTemplatesSettings = () => {
             >
               <EditOutlined />
             </Button>
-          </Tooltip>
+          </Tooltip> */}
           <Tooltip title={t('deleteToolTip')}>
             <Popconfirm
               title={