feat(migrations): add initial migration setup and performance indexes

- Introduced .pgmrc.json and migrate.json for node-pg-migrate configuration.
- Added multiple migration files to create performance indexes for tasks and related entities.
- Implemented functions for optimized task sorting and manual progress tracking.
- Updated package.json to include migration scripts and dependencies for node-pg-migrate.
- Created README.md for migration guidelines and best practices.

worklenz-backend/.pgmrc.json

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

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

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

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

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

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

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

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

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

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

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

worklenz-backend/migrate.json

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

worklenz-backend/package-lock.json

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

worklenz-backend/package.json

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

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

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

worklenz-backend/src/shared/constants.ts

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -17,7 +17,6 @@ const ProjectTemplateEditView = lazy(
 const LicenseExpired = lazy(() => import('@/pages/license-expired/license-expired'));
 const ProjectView = lazy(() => import('@/pages/projects/projectView/project-view'));
 const Unauthorized = lazy(() => import('@/pages/unauthorized/unauthorized'));
-const GanttDemoPage = lazy(() => import('@/pages/GanttDemoPage'));
 
 // Define AdminGuard component with defensive programming
 const AdminGuard = ({ children }: { children: React.ReactNode }) => {
@@ -107,14 +106,6 @@ const mainRoutes: RouteObject[] = [
           </Suspense>
         ),
       },
-      {
-        path: 'gantt-demo',
-        element: (
-          <Suspense fallback={<SuspenseFallback />}>
-            <GanttDemoPage />
-          </Suspense>
-        ),
-      },
       ...settingsRoutes,
       ...adminCenterRoutes,
     ],

worklenz-frontend/src/components/EmptyListPlaceholder.tsx

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

worklenz-frontend/src/components/advanced-gantt/AdvancedGanttChart.tsx

@@ -1,612 +0,0 @@
-import React, { useReducer, useMemo, useCallback, useRef, useEffect, useState } from 'react';
-import { 
-  GanttTask, 
-  ColumnConfig, 
-  TimelineConfig, 
-  VirtualScrollConfig,
-  ZoomLevel,
-  GanttState,
-  GanttAction,
-  AdvancedGanttProps,
-  SelectionState,
-  GanttViewState,
-  DragState
-} from '../../types/advanced-gantt.types';
-import GanttGrid from './GanttGrid';
-import DraggableTaskBar from './DraggableTaskBar';
-import TimelineMarkers, { holidayPresets, workingDayPresets } from './TimelineMarkers';
-import VirtualScrollContainer, { VirtualTimeline } from './VirtualScrollContainer';
-import { 
-  usePerformanceMonitoring, 
-  useTaskCalculations, 
-  useDateCalculations,
-  useDebounce,
-  useThrottle
-} from '../../utils/gantt-performance';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-
-// Default configurations
-const defaultColumns: ColumnConfig[] = [
-  { 
-    field: 'name', 
-    title: 'Task Name', 
-    width: 250, 
-    minWidth: 150, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'text'
-  },
-  { 
-    field: 'startDate', 
-    title: 'Start Date', 
-    width: 120, 
-    minWidth: 100, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'date'
-  },
-  { 
-    field: 'endDate', 
-    title: 'End Date', 
-    width: 120, 
-    minWidth: 100, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'date'
-  },
-  { 
-    field: 'duration', 
-    title: 'Duration', 
-    width: 80, 
-    minWidth: 60, 
-    resizable: true, 
-    sortable: false, 
-    fixed: true 
-  },
-  { 
-    field: 'progress', 
-    title: 'Progress', 
-    width: 100, 
-    minWidth: 80, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'number'
-  },
-];
-
-const defaultTimelineConfig: TimelineConfig = {
-  topTier: { unit: 'month', format: 'MMM yyyy', height: 30 },
-  bottomTier: { unit: 'day', format: 'dd', height: 25 },
-  showWeekends: true,
-  showNonWorkingDays: true,
-  holidays: holidayPresets.US,
-  workingDays: workingDayPresets.standard,
-  workingHours: { start: 9, end: 17 },
-  dayWidth: 30,
-};
-
-const defaultVirtualScrollConfig: VirtualScrollConfig = {
-  enableRowVirtualization: true,
-  enableTimelineVirtualization: true,
-  bufferSize: 10,
-  itemHeight: 40,
-  overscan: 5,
-};
-
-const defaultZoomLevels: ZoomLevel[] = [
-  { 
-    name: 'Year', 
-    dayWidth: 2, 
-    scale: 0.1,
-    topTier: { unit: 'year', format: 'yyyy' },
-    bottomTier: { unit: 'month', format: 'MMM' }
-  },
-  { 
-    name: 'Month', 
-    dayWidth: 8, 
-    scale: 0.5,
-    topTier: { unit: 'month', format: 'MMM yyyy' },
-    bottomTier: { unit: 'week', format: 'w' }
-  },
-  { 
-    name: 'Week', 
-    dayWidth: 25, 
-    scale: 1,
-    topTier: { unit: 'week', format: 'MMM dd' },
-    bottomTier: { unit: 'day', format: 'dd' }
-  },
-  { 
-    name: 'Day', 
-    dayWidth: 50, 
-    scale: 2,
-    topTier: { unit: 'day', format: 'MMM dd' },
-    bottomTier: { unit: 'hour', format: 'HH' }
-  },
-];
-
-// Gantt state reducer
-function ganttReducer(state: GanttState, action: GanttAction): GanttState {
-  switch (action.type) {
-    case 'SET_TASKS':
-      return { ...state, tasks: action.payload };
-    
-    case 'UPDATE_TASK':
-      return {
-        ...state,
-        tasks: state.tasks.map(task =>
-          task.id === action.payload.id
-            ? { ...task, ...action.payload.updates }
-            : task
-        ),
-      };
-    
-    case 'ADD_TASK':
-      return { ...state, tasks: [...state.tasks, action.payload] };
-    
-    case 'DELETE_TASK':
-      return {
-        ...state,
-        tasks: state.tasks.filter(task => task.id !== action.payload),
-      };
-    
-    case 'SET_SELECTION':
-      return {
-        ...state,
-        selectionState: { ...state.selectionState, selectedTasks: action.payload },
-      };
-    
-    case 'SET_DRAG_STATE':
-      return { ...state, dragState: action.payload };
-    
-    case 'SET_ZOOM_LEVEL':
-      const newZoomLevel = Math.max(0, Math.min(state.zoomLevels.length - 1, action.payload));
-      return {
-        ...state,
-        viewState: { ...state.viewState, zoomLevel: newZoomLevel },
-        timelineConfig: {
-          ...state.timelineConfig,
-          dayWidth: state.zoomLevels[newZoomLevel].dayWidth,
-          topTier: state.zoomLevels[newZoomLevel].topTier,
-          bottomTier: state.zoomLevels[newZoomLevel].bottomTier,
-        },
-      };
-    
-    case 'SET_SCROLL_POSITION':
-      return {
-        ...state,
-        viewState: { ...state.viewState, scrollPosition: action.payload },
-      };
-    
-    case 'SET_SPLITTER_POSITION':
-      return {
-        ...state,
-        viewState: { ...state.viewState, splitterPosition: action.payload },
-      };
-    
-    case 'TOGGLE_TASK_EXPANSION':
-      return {
-        ...state,
-        tasks: state.tasks.map(task =>
-          task.id === action.payload
-            ? { ...task, isExpanded: !task.isExpanded }
-            : task
-        ),
-      };
-    
-    case 'SET_VIEW_STATE':
-      return {
-        ...state,
-        viewState: { ...state.viewState, ...action.payload },
-      };
-    
-    case 'UPDATE_COLUMN_WIDTH':
-      return {
-        ...state,
-        columns: state.columns.map(col =>
-          col.field === action.payload.field
-            ? { ...col, width: action.payload.width }
-            : col
-        ),
-      };
-    
-    default:
-      return state;
-  }
-}
-
-const AdvancedGanttChart: React.FC<AdvancedGanttProps> = ({
-  tasks: initialTasks,
-  columns = defaultColumns,
-  timelineConfig = {},
-  virtualScrollConfig = {},
-  zoomLevels = defaultZoomLevels,
-  initialViewState = {},
-  initialSelection = [],
-  onTaskUpdate,
-  onTaskCreate,
-  onTaskDelete,
-  onTaskMove,
-  onTaskResize,
-  onProgressChange,
-  onSelectionChange,
-  onColumnResize,
-  onDependencyCreate,
-  onDependencyDelete,
-  className = '',
-  style = {},
-  theme = 'auto',
-  enableDragDrop = true,
-  enableResize = true,
-  enableProgressEdit = true,
-  enableInlineEdit = true,
-  enableVirtualScrolling = true,
-  enableDebouncing = true,
-  debounceDelay = 300,
-  maxVisibleTasks = 1000,
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [containerSize, setContainerSize] = useState({ width: 0, height: 0 });
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const { startMeasure, endMeasure, metrics } = usePerformanceMonitoring();
-  const { getDaysBetween } = useDateCalculations();
-
-  // Initialize state
-  const initialState: GanttState = {
-    tasks: initialTasks,
-    columns,
-    timelineConfig: { ...defaultTimelineConfig, ...timelineConfig },
-    virtualScrollConfig: { ...defaultVirtualScrollConfig, ...virtualScrollConfig },
-    dragState: null,
-    selectionState: {
-      selectedTasks: initialSelection,
-      selectedRows: [],
-      focusedTask: undefined,
-    },
-    viewState: {
-      zoomLevel: 2, // Week view by default
-      scrollPosition: { x: 0, y: 0 },
-      viewportSize: { width: 0, height: 0 },
-      splitterPosition: 40, // 40% for grid, 60% for timeline
-      showCriticalPath: false,
-      showBaseline: false,
-      showProgress: true,
-      showDependencies: true,
-      autoSchedule: false,
-      readOnly: false,
-      ...initialViewState,
-    },
-    zoomLevels,
-    performanceMetrics: {
-      renderTime: 0,
-      taskCount: initialTasks.length,
-      visibleTaskCount: 0,
-    },
-  };
-
-  const [state, dispatch] = useReducer(ganttReducer, initialState);
-  const { taskMap, parentChildMap, totalTasks } = useTaskCalculations(state.tasks);
-
-  // Calculate project timeline bounds
-  const projectBounds = useMemo(() => {
-    if (state.tasks.length === 0) {
-      const today = new Date();
-      return {
-        start: new Date(today.getFullYear(), today.getMonth(), 1),
-        end: new Date(today.getFullYear(), today.getMonth() + 3, 0),
-      };
-    }
-
-    const startDates = state.tasks.map(task => task.startDate);
-    const endDates = state.tasks.map(task => task.endDate);
-    const minStart = new Date(Math.min(...startDates.map(d => d.getTime())));
-    const maxEnd = new Date(Math.max(...endDates.map(d => d.getTime())));
-
-    // Add some padding
-    minStart.setDate(minStart.getDate() - 7);
-    maxEnd.setDate(maxEnd.getDate() + 7);
-
-    return { start: minStart, end: maxEnd };
-  }, [state.tasks]);
-
-  // Debounced event handlers
-  const debouncedTaskUpdate = useDebounce(
-    useCallback((taskId: string, updates: Partial<GanttTask>) => {
-      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates } });
-      onTaskUpdate?.(taskId, updates);
-    }, [onTaskUpdate]),
-    enableDebouncing ? debounceDelay : 0
-  );
-
-  const debouncedTaskMove = useDebounce(
-    useCallback((taskId: string, newDates: { start: Date; end: Date }) => {
-      dispatch({ type: 'UPDATE_TASK', payload: { 
-        id: taskId, 
-        updates: { startDate: newDates.start, endDate: newDates.end } 
-      }});
-      onTaskMove?.(taskId, newDates);
-    }, [onTaskMove]),
-    enableDebouncing ? debounceDelay : 0
-  );
-
-  const debouncedProgressChange = useDebounce(
-    useCallback((taskId: string, progress: number) => {
-      dispatch({ type: 'UPDATE_TASK', payload: { id: taskId, updates: { progress } }});
-      onProgressChange?.(taskId, progress);
-    }, [onProgressChange]),
-    enableDebouncing ? debounceDelay : 0
-  );
-
-  // Throttled scroll handler
-  const throttledScrollHandler = useThrottle(
-    useCallback((scrollLeft: number, scrollTop: number) => {
-      dispatch({ type: 'SET_SCROLL_POSITION', payload: { x: scrollLeft, y: scrollTop } });
-    }, []),
-    16 // 60fps
-  );
-
-  // Container size observer
-  useEffect(() => {
-    const observer = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const { width, height } = entry.contentRect;
-        setContainerSize({ width, height });
-        dispatch({ 
-          type: 'SET_VIEW_STATE', 
-          payload: { viewportSize: { width, height } } 
-        });
-      }
-    });
-
-    if (containerRef.current) {
-      observer.observe(containerRef.current);
-    }
-
-    return () => observer.disconnect();
-  }, []);
-
-  // Calculate grid and timeline dimensions
-  const gridWidth = useMemo(() => {
-    return Math.floor(containerSize.width * (state.viewState.splitterPosition / 100));
-  }, [containerSize.width, state.viewState.splitterPosition]);
-
-  const timelineWidth = useMemo(() => {
-    return containerSize.width - gridWidth;
-  }, [containerSize.width, gridWidth]);
-
-  // Handle zoom changes
-  const handleZoomChange = useCallback((direction: 'in' | 'out') => {
-    const currentZoom = state.viewState.zoomLevel;
-    const newZoom = direction === 'in' 
-      ? Math.min(state.zoomLevels.length - 1, currentZoom + 1)
-      : Math.max(0, currentZoom - 1);
-    
-    dispatch({ type: 'SET_ZOOM_LEVEL', payload: newZoom });
-  }, [state.viewState.zoomLevel, state.zoomLevels.length]);
-
-  // Theme-aware colors
-  const colors = useMemo(() => ({
-    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
-    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
-    timelineBackground: themeWiseColor('#f8f9fa', '#374151', themeMode),
-  }), [themeMode]);
-
-  // Render timeline header
-  const renderTimelineHeader = () => {
-    const currentZoom = state.zoomLevels[state.viewState.zoomLevel];
-    const totalDays = getDaysBetween(projectBounds.start, projectBounds.end);
-    const totalWidth = totalDays * state.timelineConfig.dayWidth;
-
-    return (
-      <div className="timeline-header border-b" style={{ 
-        height: (currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25),
-        backgroundColor: colors.timelineBackground,
-        borderColor: colors.border,
-      }}>
-        <VirtualTimeline
-          startDate={projectBounds.start}
-          endDate={projectBounds.end}
-          dayWidth={state.timelineConfig.dayWidth}
-          containerWidth={timelineWidth}
-          containerHeight={(currentZoom.topTier.height || 30) + (currentZoom.bottomTier.height || 25)}
-          onScroll={throttledScrollHandler}
-        >
-          {(date, index, style) => (
-            <div className="timeline-cell flex flex-col border-r text-xs text-center" style={{
-              ...style,
-              borderColor: colors.border,
-            }}>
-              <div className="top-tier border-b px-1 py-1" style={{
-                height: currentZoom.topTier.height || 30,
-                borderColor: colors.border,
-              }}>
-                {formatDateForUnit(date, currentZoom.topTier.unit)}
-              </div>
-              <div className="bottom-tier px-1 py-1" style={{
-                height: currentZoom.bottomTier.height || 25,
-              }}>
-                {formatDateForUnit(date, currentZoom.bottomTier.unit)}
-              </div>
-            </div>
-          )}
-        </VirtualTimeline>
-      </div>
-    );
-  };
-
-  // Render timeline content
-  const renderTimelineContent = () => {
-    const headerHeight = (state.zoomLevels[state.viewState.zoomLevel].topTier.height || 30) + 
-                        (state.zoomLevels[state.viewState.zoomLevel].bottomTier.height || 25);
-    const contentHeight = containerSize.height - headerHeight;
-
-    return (
-      <div className="timeline-content relative" style={{ height: contentHeight }}>
-        {/* Timeline markers (weekends, holidays, etc.) */}
-        <TimelineMarkers
-          startDate={projectBounds.start}
-          endDate={projectBounds.end}
-          dayWidth={state.timelineConfig.dayWidth}
-          containerHeight={contentHeight}
-          timelineConfig={state.timelineConfig}
-          holidays={state.timelineConfig.holidays}
-          showWeekends={state.timelineConfig.showWeekends}
-          showHolidays={true}
-          showToday={true}
-        />
-
-        {/* Task bars */}
-        <VirtualScrollContainer
-          items={state.tasks}
-          itemHeight={state.virtualScrollConfig.itemHeight}
-          containerHeight={contentHeight}
-          containerWidth={timelineWidth}
-          overscan={state.virtualScrollConfig.overscan}
-          onScroll={throttledScrollHandler}
-        >
-          {(task, index, style) => (
-            <DraggableTaskBar
-              key={task.id}
-              task={task}
-              timelineStart={projectBounds.start}
-              dayWidth={state.timelineConfig.dayWidth}
-              rowHeight={state.virtualScrollConfig.itemHeight}
-              index={index}
-              onTaskMove={debouncedTaskMove}
-              onTaskResize={debouncedTaskMove}
-              onProgressChange={debouncedProgressChange}
-              enableDragDrop={enableDragDrop}
-              enableResize={enableResize}
-              enableProgressEdit={enableProgressEdit}
-              readOnly={state.viewState.readOnly}
-            />
-          )}
-        </VirtualScrollContainer>
-      </div>
-    );
-  };
-
-  // Render toolbar
-  const renderToolbar = () => (
-    <div className="gantt-toolbar flex items-center justify-between p-2 border-b bg-gray-50 dark:bg-gray-800" style={{
-      borderColor: colors.border,
-    }}>
-      <div className="toolbar-left flex items-center space-x-2">
-        <button
-          onClick={() => handleZoomChange('out')}
-          disabled={state.viewState.zoomLevel === 0}
-          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
-        >
-          Zoom Out
-        </button>
-        <span className="text-sm text-gray-600 dark:text-gray-400">
-          {state.zoomLevels[state.viewState.zoomLevel].name}
-        </span>
-        <button
-          onClick={() => handleZoomChange('in')}
-          disabled={state.viewState.zoomLevel === state.zoomLevels.length - 1}
-          className="px-2 py-1 text-sm border rounded hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-50"
-        >
-          Zoom In
-        </button>
-      </div>
-      
-      <div className="toolbar-right flex items-center space-x-2 text-xs text-gray-500">
-        <span>Tasks: {state.tasks.length}</span>
-        <span>•</span>
-        <span>Render: {Math.round(metrics.renderTime)}ms</span>
-      </div>
-    </div>
-  );
-
-  // Performance monitoring
-  useEffect(() => {
-    startMeasure('render');
-    return () => endMeasure('render');
-  });
-
-  return (
-    <div
-      ref={containerRef}
-      className={`advanced-gantt-chart flex flex-col ${className}`}
-      style={{
-        height: '100%',
-        backgroundColor: colors.background,
-        ...style,
-      }}
-    >
-      {/* Toolbar */}
-      {renderToolbar()}
-
-      {/* Main content */}
-      <div className="gantt-content flex flex-1 overflow-hidden">
-        {/* Grid */}
-        <div className="gantt-grid-container" style={{ width: gridWidth }}>
-          <GanttGrid
-            tasks={state.tasks}
-            columns={state.columns}
-            rowHeight={state.virtualScrollConfig.itemHeight}
-            containerHeight={containerSize.height - 50} // Subtract toolbar height
-            selection={state.selectionState}
-            enableInlineEdit={enableInlineEdit}
-            onTaskClick={(task) => {
-              // Handle task selection
-              const newSelection = { ...state.selectionState, selectedTasks: [task.id] };
-              dispatch({ type: 'SET_SELECTION', payload: [task.id] });
-              onSelectionChange?.(newSelection);
-            }}
-            onTaskExpand={(taskId) => {
-              dispatch({ type: 'TOGGLE_TASK_EXPANSION', payload: taskId });
-            }}
-            onColumnResize={(field, width) => {
-              dispatch({ type: 'UPDATE_COLUMN_WIDTH', payload: { field, width } });
-              onColumnResize?.(field, width);
-            }}
-            onTaskUpdate={debouncedTaskUpdate}
-          />
-        </div>
-
-        {/* Timeline */}
-        <div className="gantt-timeline-container border-l" style={{ 
-          width: timelineWidth,
-          borderColor: colors.border,
-        }}>
-          {renderTimelineHeader()}
-          {renderTimelineContent()}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Helper function to format dates based on unit
-function formatDateForUnit(date: Date, unit: string): string {
-  switch (unit) {
-    case 'year':
-      return date.getFullYear().toString();
-    case 'month':
-      return date.toLocaleDateString('en-US', { month: 'short', year: 'numeric' });
-    case 'week':
-      return `W${getWeekNumber(date)}`;
-    case 'day':
-      return date.getDate().toString();
-    case 'hour':
-      return date.getHours().toString().padStart(2, '0');
-    default:
-      return '';
-  }
-}
-
-function getWeekNumber(date: Date): number {
-  const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
-  const dayNum = d.getUTCDay() || 7;
-  d.setUTCDate(d.getUTCDate() + 4 - dayNum);
-  const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
-  return Math.ceil((((d.getTime() - yearStart.getTime()) / 86400000) + 1) / 7);
-}
-
-export default AdvancedGanttChart;

worklenz-frontend/src/components/advanced-gantt/AdvancedGanttDemo.tsx

@@ -1,668 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Button, Space, message, Card } from 'antd';
-import AdvancedGanttChart from './AdvancedGanttChart';
-import { GanttTask, ColumnConfig } from '../../types/advanced-gantt.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { holidayPresets, workingDayPresets } from './TimelineMarkers';
-
-// Enhanced sample data with more realistic project structure
-const generateSampleTasks = (): GanttTask[] => {
-  const baseDate = new Date(2024, 11, 1); // December 1, 2024
-  
-  return [
-    // Project Phase 1: Planning & Design
-    {
-      id: 'project-1',
-      name: '🚀 Web Platform Development',
-      startDate: new Date(2024, 11, 1),
-      endDate: new Date(2025, 2, 31),
-      progress: 45,
-      type: 'project',
-      status: 'in-progress',
-      priority: 'high',
-      color: '#1890ff',
-      hasChildren: true,
-      isExpanded: true,
-      level: 0,
-    },
-    {
-      id: 'planning-phase',
-      name: '📋 Planning & Analysis Phase',
-      startDate: new Date(2024, 11, 1),
-      endDate: new Date(2024, 11, 20),
-      progress: 85,
-      type: 'project',
-      status: 'in-progress',
-      priority: 'high',
-      parent: 'project-1',
-      color: '#52c41a',
-      hasChildren: true,
-      isExpanded: true,
-      level: 1,
-    },
-    {
-      id: 'requirements-analysis',
-      name: 'Requirements Gathering & Analysis',
-      startDate: new Date(2024, 11, 1),
-      endDate: new Date(2024, 11, 8),
-      progress: 100,
-      type: 'task',
-      status: 'completed',
-      priority: 'high',
-      parent: 'planning-phase',
-      assignee: {
-        id: 'user-1',
-        name: 'Alice Johnson',
-        avatar: 'https://ui-avatars.com/api/?name=Alice+Johnson&background=1890ff&color=fff',
-      },
-      tags: ['research', 'documentation'],
-      level: 2,
-    },
-    {
-      id: 'technical-architecture',
-      name: 'Technical Architecture Design',
-      startDate: new Date(2024, 11, 8),
-      endDate: new Date(2024, 11, 18),
-      progress: 75,
-      type: 'task',
-      status: 'in-progress',
-      priority: 'high',
-      parent: 'planning-phase',
-      assignee: {
-        id: 'user-2',
-        name: 'Bob Smith',
-        avatar: 'https://ui-avatars.com/api/?name=Bob+Smith&background=52c41a&color=fff',
-      },
-      dependencies: ['requirements-analysis'],
-      tags: ['architecture', 'design'],
-      level: 2,
-    },
-    {
-      id: 'ui-ux-design',
-      name: 'UI/UX Design & Prototyping',
-      startDate: new Date(2024, 11, 10),
-      endDate: new Date(2024, 11, 20),
-      progress: 60,
-      type: 'task',
-      status: 'in-progress',
-      priority: 'medium',
-      parent: 'planning-phase',
-      assignee: {
-        id: 'user-3',
-        name: 'Carol Davis',
-        avatar: 'https://ui-avatars.com/api/?name=Carol+Davis&background=faad14&color=fff',
-      },
-      dependencies: ['requirements-analysis'],
-      tags: ['design', 'prototype'],
-      level: 2,
-    },
-    {
-      id: 'milestone-planning-complete',
-      name: '🎯 Planning Phase Complete',
-      startDate: new Date(2024, 11, 20),
-      endDate: new Date(2024, 11, 20),
-      progress: 0,
-      type: 'milestone',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'planning-phase',
-      dependencies: ['technical-architecture', 'ui-ux-design'],
-      level: 2,
-    },
-
-    // Development Phase
-    {
-      id: 'development-phase',
-      name: '⚡ Development Phase',
-      startDate: new Date(2024, 11, 21),
-      endDate: new Date(2025, 1, 28),
-      progress: 35,
-      type: 'project',
-      status: 'in-progress',
-      priority: 'high',
-      parent: 'project-1',
-      color: '#722ed1',
-      hasChildren: true,
-      isExpanded: true,
-      level: 1,
-    },
-    {
-      id: 'backend-development',
-      name: 'Backend API Development',
-      startDate: new Date(2024, 11, 21),
-      endDate: new Date(2025, 1, 15),
-      progress: 45,
-      type: 'task',
-      status: 'in-progress',
-      priority: 'high',
-      parent: 'development-phase',
-      assignee: {
-        id: 'user-4',
-        name: 'David Wilson',
-        avatar: 'https://ui-avatars.com/api/?name=David+Wilson&background=722ed1&color=fff',
-      },
-      dependencies: ['milestone-planning-complete'],
-      tags: ['backend', 'api'],
-      level: 2,
-    },
-    {
-      id: 'frontend-development',
-      name: 'Frontend React Application',
-      startDate: new Date(2025, 0, 5),
-      endDate: new Date(2025, 1, 25),
-      progress: 25,
-      type: 'task',
-      status: 'in-progress',
-      priority: 'high',
-      parent: 'development-phase',
-      assignee: {
-        id: 'user-5',
-        name: 'Eva Brown',
-        avatar: 'https://ui-avatars.com/api/?name=Eva+Brown&background=ff7a45&color=fff',
-      },
-      dependencies: ['backend-development'],
-      tags: ['frontend', 'react'],
-      level: 2,
-    },
-    {
-      id: 'database-setup',
-      name: 'Database Schema & Migration',
-      startDate: new Date(2024, 11, 21),
-      endDate: new Date(2025, 0, 10),
-      progress: 80,
-      type: 'task',
-      status: 'in-progress',
-      priority: 'medium',
-      parent: 'development-phase',
-      assignee: {
-        id: 'user-6',
-        name: 'Frank Miller',
-        avatar: 'https://ui-avatars.com/api/?name=Frank+Miller&background=13c2c2&color=fff',
-      },
-      dependencies: ['milestone-planning-complete'],
-      tags: ['database', 'migration'],
-      level: 2,
-    },
-
-    // Testing Phase
-    {
-      id: 'testing-phase',
-      name: '🧪 Testing & QA Phase',
-      startDate: new Date(2025, 2, 1),
-      endDate: new Date(2025, 2, 20),
-      progress: 0,
-      type: 'project',
-      status: 'not-started',
-      priority: 'high',
-      parent: 'project-1',
-      color: '#fa8c16',
-      hasChildren: true,
-      isExpanded: false,
-      level: 1,
-    },
-    {
-      id: 'unit-testing',
-      name: 'Unit Testing Implementation',
-      startDate: new Date(2025, 2, 1),
-      endDate: new Date(2025, 2, 10),
-      progress: 0,
-      type: 'task',
-      status: 'not-started',
-      priority: 'high',
-      parent: 'testing-phase',
-      assignee: {
-        id: 'user-7',
-        name: 'Grace Lee',
-        avatar: 'https://ui-avatars.com/api/?name=Grace+Lee&background=fa8c16&color=fff',
-      },
-      dependencies: ['frontend-development'],
-      tags: ['testing', 'unit'],
-      level: 2,
-    },
-    {
-      id: 'integration-testing',
-      name: 'Integration & E2E Testing',
-      startDate: new Date(2025, 2, 8),
-      endDate: new Date(2025, 2, 18),
-      progress: 0,
-      type: 'task',
-      status: 'not-started',
-      priority: 'high',
-      parent: 'testing-phase',
-      assignee: {
-        id: 'user-8',
-        name: 'Henry Clark',
-        avatar: 'https://ui-avatars.com/api/?name=Henry+Clark&background=eb2f96&color=fff',
-      },
-      dependencies: ['unit-testing'],
-      tags: ['testing', 'integration'],
-      level: 2,
-    },
-    {
-      id: 'milestone-beta-ready',
-      name: '🎯 Beta Release Ready',
-      startDate: new Date(2025, 2, 20),
-      endDate: new Date(2025, 2, 20),
-      progress: 0,
-      type: 'milestone',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'testing-phase',
-      dependencies: ['integration-testing'],
-      level: 2,
-    },
-
-    // Deployment Phase
-    {
-      id: 'deployment-phase',
-      name: '🚀 Deployment & Launch',
-      startDate: new Date(2025, 2, 21),
-      endDate: new Date(2025, 2, 31),
-      progress: 0,
-      type: 'project',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'project-1',
-      color: '#f5222d',
-      hasChildren: true,
-      isExpanded: false,
-      level: 1,
-    },
-    {
-      id: 'production-deployment',
-      name: 'Production Environment Setup',
-      startDate: new Date(2025, 2, 21),
-      endDate: new Date(2025, 2, 25),
-      progress: 0,
-      type: 'task',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'deployment-phase',
-      assignee: {
-        id: 'user-9',
-        name: 'Ivy Taylor',
-        avatar: 'https://ui-avatars.com/api/?name=Ivy+Taylor&background=f5222d&color=fff',
-      },
-      dependencies: ['milestone-beta-ready'],
-      tags: ['deployment', 'production'],
-      level: 2,
-    },
-    {
-      id: 'go-live',
-      name: 'Go Live & Monitoring',
-      startDate: new Date(2025, 2, 26),
-      endDate: new Date(2025, 2, 31),
-      progress: 0,
-      type: 'task',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'deployment-phase',
-      assignee: {
-        id: 'user-10',
-        name: 'Jack Anderson',
-        avatar: 'https://ui-avatars.com/api/?name=Jack+Anderson&background=2f54eb&color=fff',
-      },
-      dependencies: ['production-deployment'],
-      tags: ['launch', 'monitoring'],
-      level: 2,
-    },
-    {
-      id: 'milestone-project-complete',
-      name: '🎉 Project Launch Complete',
-      startDate: new Date(2025, 2, 31),
-      endDate: new Date(2025, 2, 31),
-      progress: 0,
-      type: 'milestone',
-      status: 'not-started',
-      priority: 'critical',
-      parent: 'deployment-phase',
-      dependencies: ['go-live'],
-      level: 2,
-    },
-  ];
-};
-
-// Enhanced column configuration
-const sampleColumns: ColumnConfig[] = [
-  { 
-    field: 'name', 
-    title: 'Task / Phase Name', 
-    width: 300, 
-    minWidth: 200, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'text'
-  },
-  { 
-    field: 'assignee', 
-    title: 'Assignee', 
-    width: 150, 
-    minWidth: 120, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true 
-  },
-  { 
-    field: 'startDate', 
-    title: 'Start Date', 
-    width: 120, 
-    minWidth: 100, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'date'
-  },
-  { 
-    field: 'endDate', 
-    title: 'End Date', 
-    width: 120, 
-    minWidth: 100, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'date'
-  },
-  { 
-    field: 'duration', 
-    title: 'Duration', 
-    width: 80, 
-    minWidth: 60, 
-    resizable: true, 
-    sortable: false, 
-    fixed: true,
-    align: 'center'
-  },
-  { 
-    field: 'progress', 
-    title: 'Progress', 
-    width: 120, 
-    minWidth: 100, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'number'
-  },
-  { 
-    field: 'status', 
-    title: 'Status', 
-    width: 100, 
-    minWidth: 80, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'select',
-    editorOptions: [
-      { value: 'not-started', label: 'Not Started' },
-      { value: 'in-progress', label: 'In Progress' },
-      { value: 'completed', label: 'Completed' },
-      { value: 'on-hold', label: 'On Hold' },
-      { value: 'overdue', label: 'Overdue' },
-    ]
-  },
-  { 
-    field: 'priority', 
-    title: 'Priority', 
-    width: 100, 
-    minWidth: 80, 
-    resizable: true, 
-    sortable: true, 
-    fixed: true,
-    editor: 'select',
-    editorOptions: [
-      { value: 'low', label: 'Low' },
-      { value: 'medium', label: 'Medium' },
-      { value: 'high', label: 'High' },
-      { value: 'critical', label: 'Critical' },
-    ]
-  },
-];
-
-const AdvancedGanttDemo: React.FC = () => {
-  const [tasks, setTasks] = useState<GanttTask[]>(generateSampleTasks());
-  const [selectedTasks, setSelectedTasks] = useState<string[]>([]);
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-
-  const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
-    setTasks(prevTasks => 
-      prevTasks.map(task => 
-        task.id === taskId ? { ...task, ...updates } : task
-      )
-    );
-    message.success(`Task "${tasks.find(t => t.id === taskId)?.name}" updated`);
-  };
-
-  const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
-    setTasks(prevTasks => 
-      prevTasks.map(task => 
-        task.id === taskId 
-          ? { ...task, startDate: newDates.start, endDate: newDates.end }
-          : task
-      )
-    );
-    message.info(`Task moved: ${newDates.start.toLocaleDateString()} - ${newDates.end.toLocaleDateString()}`);
-  };
-
-  const handleProgressChange = (taskId: string, progress: number) => {
-    setTasks(prevTasks => 
-      prevTasks.map(task => 
-        task.id === taskId ? { ...task, progress } : task
-      )
-    );
-    message.info(`Progress updated: ${Math.round(progress)}%`);
-  };
-
-  const handleSelectionChange = (selection: any) => {
-    setSelectedTasks(selection.selectedTasks);
-  };
-
-  const resetToSampleData = () => {
-    setTasks(generateSampleTasks());
-    setSelectedTasks([]);
-    message.info('Gantt chart reset to sample data');
-  };
-
-  const addSampleTask = () => {
-    const newTask: GanttTask = {
-      id: `task-${Date.now()}`,
-      name: `New Task ${tasks.length + 1}`,
-      startDate: new Date(),
-      endDate: new Date(Date.now() + 7 * 24 * 60 * 60 * 1000), // +7 days
-      progress: 0,
-      type: 'task',
-      status: 'not-started',
-      priority: 'medium',
-      level: 0,
-    };
-    setTasks(prev => [...prev, newTask]);
-    message.success('New task added');
-  };
-
-  const deleteSelectedTasks = () => {
-    if (selectedTasks.length === 0) {
-      message.warning('No tasks selected');
-      return;
-    }
-    
-    setTasks(prev => prev.filter(task => !selectedTasks.includes(task.id)));
-    setSelectedTasks([]);
-    message.success(`${selectedTasks.length} task(s) deleted`);
-  };
-
-  const taskStats = useMemo(() => {
-    const total = tasks.length;
-    const completed = tasks.filter(t => t.status === 'completed').length;
-    const inProgress = tasks.filter(t => t.status === 'in-progress').length;
-    const overdue = tasks.filter(t => t.status === 'overdue').length;
-    const avgProgress = tasks.reduce((sum, t) => sum + t.progress, 0) / total;
-
-    return { total, completed, inProgress, overdue, avgProgress };
-  }, [tasks]);
-
-  return (
-    <div className="advanced-gantt-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
-      {/* Header */}
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
-        <div className="p-6">
-          <div className="flex justify-between items-start mb-4">
-            <div>
-              <h1 className="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">
-                🚀 Advanced Gantt Chart Demo
-              </h1>
-              <p className="text-gray-600 dark:text-gray-400 mb-4">
-                Professional Gantt chart with draggable tasks, virtual scrolling, holiday markers, 
-                and performance optimizations for modern project management.
-              </p>
-            </div>
-            
-            <div className="flex flex-col items-end space-y-2">
-              <Space>
-                <Button 
-                  onClick={addSampleTask}
-                  type="primary"
-                  className="dark:border-gray-600"
-                >
-                  Add Task
-                </Button>
-                <Button 
-                  onClick={deleteSelectedTasks}
-                  danger
-                  disabled={selectedTasks.length === 0}
-                  className="dark:border-gray-600"
-                >
-                  Delete Selected ({selectedTasks.length})
-                </Button>
-                <Button 
-                  onClick={resetToSampleData}
-                  className="dark:border-gray-600 dark:text-gray-300"
-                >
-                  Reset Data
-                </Button>
-              </Space>
-            </div>
-          </div>
-
-          {/* Project Statistics */}
-          <div className="grid grid-cols-2 md:grid-cols-4 gap-4">
-            <div className="bg-blue-50 dark:bg-blue-900 dark:bg-opacity-20 rounded-lg p-3">
-              <div className="text-blue-600 dark:text-blue-400 text-sm font-medium">Total Tasks</div>
-              <div className="text-2xl font-bold text-blue-700 dark:text-blue-300">{taskStats.total}</div>
-            </div>
-            <div className="bg-green-50 dark:bg-green-900 dark:bg-opacity-20 rounded-lg p-3">
-              <div className="text-green-600 dark:text-green-400 text-sm font-medium">Completed</div>
-              <div className="text-2xl font-bold text-green-700 dark:text-green-300">{taskStats.completed}</div>
-            </div>
-            <div className="bg-yellow-50 dark:bg-yellow-900 dark:bg-opacity-20 rounded-lg p-3">
-              <div className="text-yellow-600 dark:text-yellow-400 text-sm font-medium">In Progress</div>
-              <div className="text-2xl font-bold text-yellow-700 dark:text-yellow-300">{taskStats.inProgress}</div>
-            </div>
-            <div className="bg-purple-50 dark:bg-purple-900 dark:bg-opacity-20 rounded-lg p-3">
-              <div className="text-purple-600 dark:text-purple-400 text-sm font-medium">Avg Progress</div>
-              <div className="text-2xl font-bold text-purple-700 dark:text-purple-300">
-                {Math.round(taskStats.avgProgress)}%
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Gantt Chart */}
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm" style={{ height: '70vh' }}>
-        <AdvancedGanttChart
-          tasks={tasks}
-          columns={sampleColumns}
-          timelineConfig={{
-            showWeekends: true,
-            showNonWorkingDays: true,
-            holidays: holidayPresets.US,
-            workingDays: workingDayPresets.standard,
-            dayWidth: 30,
-          }}
-          onTaskUpdate={handleTaskUpdate}
-          onTaskMove={handleTaskMove}
-          onProgressChange={handleProgressChange}
-          onSelectionChange={handleSelectionChange}
-          enableDragDrop={true}
-          enableResize={true}
-          enableProgressEdit={true}
-          enableInlineEdit={true}
-          enableVirtualScrolling={true}
-          className="h-full"
-        />
-      </div>
-
-      {/* Feature List */}
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
-        <div className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
-            ✨ Advanced Features Demonstrated
-          </h3>
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 text-sm">
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">Performance & UX</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Virtual scrolling for 1000+ tasks</li>
-                <li>• Smooth 60fps drag & drop</li>
-                <li>• Debounced updates</li>
-                <li>• Memory-optimized rendering</li>
-                <li>• Responsive design</li>
-              </ul>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">Gantt Features</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Draggable task bars</li>
-                <li>• Resizable task duration</li>
-                <li>• Progress editing</li>
-                <li>• Multi-level hierarchy</li>
-                <li>• Task dependencies</li>
-              </ul>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">Timeline & Markers</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Weekend & holiday markers</li>
-                <li>• Working day indicators</li>
-                <li>• Today line</li>
-                <li>• Multi-tier timeline</li>
-                <li>• Zoom levels (Year/Month/Week/Day)</li>
-              </ul>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">Grid Features</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Fixed columns layout</li>
-                <li>• Inline editing</li>
-                <li>• Column resizing</li>
-                <li>• Multi-select</li>
-                <li>• Hierarchical tree view</li>
-              </ul>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">UI/UX</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Dark/Light theme support</li>
-                <li>• Tailwind CSS styling</li>
-                <li>• Consistent with Worklenz</li>
-                <li>• Accessibility features</li>
-                <li>• Mobile responsive</li>
-              </ul>
-            </div>
-            <div className="space-y-2">
-              <h4 className="font-medium text-gray-900 dark:text-gray-100">Architecture</h4>
-              <ul className="space-y-1 text-gray-600 dark:text-gray-400">
-                <li>• Modern React patterns</li>
-                <li>• TypeScript safety</li>
-                <li>• Optimized performance</li>
-                <li>• Enterprise features</li>
-                <li>• Best practices 2025</li>
-              </ul>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default AdvancedGanttDemo;

worklenz-frontend/src/components/advanced-gantt/DraggableTaskBar.tsx

@@ -1,304 +0,0 @@
-import React, { useState, useRef, useCallback, useMemo } from 'react';
-import { GanttTask, DragState } from '../../types/advanced-gantt.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-import { useDateCalculations } from '../../utils/gantt-performance';
-
-interface DraggableTaskBarProps {
-  task: GanttTask;
-  timelineStart: Date;
-  dayWidth: number;
-  rowHeight: number;
-  index: number;
-  onTaskMove?: (taskId: string, newDates: { start: Date; end: Date }) => void;
-  onTaskResize?: (taskId: string, newDates: { start: Date; end: Date }) => void;
-  onProgressChange?: (taskId: string, progress: number) => void;
-  onTaskClick?: (task: GanttTask) => void;
-  onTaskDoubleClick?: (task: GanttTask) => void;
-  enableDragDrop?: boolean;
-  enableResize?: boolean;
-  enableProgressEdit?: boolean;
-  readOnly?: boolean;
-}
-
-const DraggableTaskBar: React.FC<DraggableTaskBarProps> = ({
-  task,
-  timelineStart,
-  dayWidth,
-  rowHeight,
-  index,
-  onTaskMove,
-  onTaskResize,
-  onProgressChange,
-  onTaskClick,
-  onTaskDoubleClick,
-  enableDragDrop = true,
-  enableResize = true,
-  enableProgressEdit = true,
-  readOnly = false,
-}) => {
-  const [dragState, setDragState] = useState<DragState | null>(null);
-  const [hoverState, setHoverState] = useState<string | null>(null);
-  const taskBarRef = useRef<HTMLDivElement>(null);
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const { getDaysBetween, addDays } = useDateCalculations();
-
-  // Calculate task position and dimensions
-  const taskPosition = useMemo(() => {
-    const startDays = getDaysBetween(timelineStart, task.startDate);
-    const duration = getDaysBetween(task.startDate, task.endDate);
-    
-    return {
-      x: startDays * dayWidth,
-      width: Math.max(dayWidth * 0.5, duration * dayWidth),
-      y: index * rowHeight + 8, // 8px padding
-      height: rowHeight - 16, // 16px total padding
-    };
-  }, [task.startDate, task.endDate, timelineStart, dayWidth, rowHeight, index, getDaysBetween]);
-
-  // Theme-aware colors
-  const colors = useMemo(() => {
-    const baseColor = task.color || getDefaultTaskColor(task.status);
-    return {
-      background: themeWiseColor(baseColor, adjustColorForDarkMode(baseColor), themeMode),
-      border: themeWiseColor(darkenColor(baseColor, 0.2), lightenColor(baseColor, 0.2), themeMode),
-      progress: themeWiseColor('#52c41a', '#34d399', themeMode),
-      text: themeWiseColor('#ffffff', '#f9fafb', themeMode),
-      hover: themeWiseColor(lightenColor(baseColor, 0.1), darkenColor(baseColor, 0.1), themeMode),
-    };
-  }, [task.color, task.status, themeMode]);
-
-  // Mouse event handlers
-  const handleMouseDown = useCallback((e: React.MouseEvent, dragType: DragState['dragType']) => {
-    if (readOnly || !enableDragDrop) return;
-    
-    e.preventDefault();
-    e.stopPropagation();
-
-    const rect = taskBarRef.current?.getBoundingClientRect();
-    if (!rect) return;
-
-    setDragState({
-      isDragging: true,
-      dragType,
-      taskId: task.id,
-      initialPosition: { x: e.clientX, y: e.clientY },
-      currentPosition: { x: e.clientX, y: e.clientY },
-      initialDates: { start: task.startDate, end: task.endDate },
-      initialProgress: task.progress,
-      snapToGrid: true,
-    });
-
-    // Add global mouse event listeners
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      handleMouseMove_Internal(moveEvent, dragType);
-    };
-
-    const handleMouseUp = () => {
-      handleMouseUp_Internal();
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [readOnly, enableDragDrop, task]);
-
-  const handleMouseMove_Internal = useCallback((e: MouseEvent, dragType: DragState['dragType']) => {
-    if (!dragState) return;
-
-    const deltaX = e.clientX - dragState.initialPosition.x;
-    const deltaDays = Math.round(deltaX / dayWidth);
-
-    let newStartDate = task.startDate;
-    let newEndDate = task.endDate;
-
-    switch (dragType) {
-      case 'move':
-        newStartDate = addDays(dragState.initialDates.start, deltaDays);
-        newEndDate = addDays(dragState.initialDates.end, deltaDays);
-        break;
-      
-      case 'resize-start':
-        newStartDate = addDays(dragState.initialDates.start, deltaDays);
-        // Ensure minimum duration
-        if (newStartDate >= newEndDate) {
-          newStartDate = addDays(newEndDate, -1);
-        }
-        break;
-      
-      case 'resize-end':
-        newEndDate = addDays(dragState.initialDates.end, deltaDays);
-        // Ensure minimum duration
-        if (newEndDate <= newStartDate) {
-          newEndDate = addDays(newStartDate, 1);
-        }
-        break;
-      
-      case 'progress':
-        if (enableProgressEdit) {
-          const progressDelta = deltaX / taskPosition.width;
-          const newProgress = Math.max(0, Math.min(100, (dragState.initialProgress || 0) + progressDelta * 100));
-          onProgressChange?.(task.id, newProgress);
-        }
-        return;
-    }
-
-    // Update drag state
-    setDragState(prev => prev ? {
-      ...prev,
-      currentPosition: { x: e.clientX, y: e.clientY },
-    } : null);
-
-    // Call appropriate handler
-    if (dragType === 'move') {
-      onTaskMove?.(task.id, { start: newStartDate, end: newEndDate });
-    } else if (dragType.startsWith('resize')) {
-      onTaskResize?.(task.id, { start: newStartDate, end: newEndDate });
-    }
-  }, [dragState, dayWidth, task, taskPosition.width, enableProgressEdit, onTaskMove, onTaskResize, onProgressChange, addDays]);
-
-  const handleMouseUp_Internal = useCallback(() => {
-    setDragState(null);
-  }, []);
-
-  const handleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    onTaskClick?.(task);
-  }, [task, onTaskClick]);
-
-  const handleDoubleClick = useCallback((e: React.MouseEvent) => {
-    e.stopPropagation();
-    onTaskDoubleClick?.(task);
-  }, [task, onTaskDoubleClick]);
-
-  // Render task bar with handles
-  const renderTaskBar = () => {
-    const isSelected = false; // TODO: Get from selection state
-    const isDragging = dragState?.isDragging || false;
-
-    return (
-      <div
-        ref={taskBarRef}
-        className={`task-bar relative cursor-pointer select-none transition-all duration-200 ${
-          isDragging ? 'z-10 shadow-lg' : ''
-        } ${isSelected ? 'ring-2 ring-blue-500 ring-opacity-50' : ''}`}
-        style={{
-          position: 'absolute',
-          left: taskPosition.x,
-          top: taskPosition.y,
-          width: taskPosition.width,
-          height: taskPosition.height,
-          backgroundColor: dragState?.isDragging ? colors.hover : colors.background,
-          border: `1px solid ${colors.border}`,
-          borderRadius: '4px',
-          transform: isDragging ? 'translateY(-2px)' : 'none',
-          boxShadow: isDragging ? '0 4px 12px rgba(0,0,0,0.15)' : '0 1px 3px rgba(0,0,0,0.1)',
-        }}
-        onClick={handleClick}
-        onDoubleClick={handleDoubleClick}
-        onMouseEnter={() => setHoverState('task')}
-        onMouseLeave={() => setHoverState(null)}
-        onMouseDown={(e) => handleMouseDown(e, 'move')}
-      >
-        {/* Progress bar */}
-        <div
-          className="progress-bar absolute inset-0 rounded-l"
-          style={{
-            width: `${task.progress}%`,
-            backgroundColor: colors.progress,
-            opacity: 0.7,
-            borderRadius: '3px 0 0 3px',
-          }}
-        />
-
-        {/* Task content */}
-        <div className="task-content relative z-10 h-full flex items-center px-2">
-          <span
-            className="task-name text-xs font-medium truncate"
-            style={{ color: colors.text }}
-          >
-            {task.name}
-          </span>
-          
-          {/* Duration display for smaller tasks */}
-          {taskPosition.width < 100 && (
-            <span
-              className="task-duration text-xs ml-auto"
-              style={{ color: colors.text, opacity: 0.8 }}
-            >
-              {getDaysBetween(task.startDate, task.endDate)}d
-            </span>
-          )}
-        </div>
-
-        {/* Resize handles */}
-        {enableResize && !readOnly && hoverState === 'task' && (
-          <>
-            {/* Left resize handle */}
-            <div
-              className="resize-handle-left absolute left-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
-              onMouseDown={(e) => handleMouseDown(e, 'resize-start')}
-              onMouseEnter={() => setHoverState('resize-start')}
-            />
-            
-            {/* Right resize handle */}
-            <div
-              className="resize-handle-right absolute right-0 top-0 w-1 h-full cursor-ew-resize bg-white bg-opacity-50 hover:bg-opacity-80"
-              onMouseDown={(e) => handleMouseDown(e, 'resize-end')}
-              onMouseEnter={() => setHoverState('resize-end')}
-            />
-          </>
-        )}
-
-        {/* Progress handle */}
-        {enableProgressEdit && !readOnly && hoverState === 'task' && (
-          <div
-            className="progress-handle absolute top-0 h-full w-1 cursor-ew-resize bg-blue-500 opacity-75"
-            style={{ left: `${task.progress}%` }}
-            onMouseDown={(e) => handleMouseDown(e, 'progress')}
-            onMouseEnter={() => setHoverState('progress')}
-          />
-        )}
-
-        {/* Task type indicator */}
-        {task.type === 'milestone' && (
-          <div
-            className="milestone-indicator absolute -top-1 -right-1 w-3 h-3 transform rotate-45"
-            style={{ backgroundColor: colors.border }}
-          />
-        )}
-      </div>
-    );
-  };
-
-  return renderTaskBar();
-};
-
-// Helper functions
-function getDefaultTaskColor(status: GanttTask['status']): string {
-  switch (status) {
-    case 'completed': return '#52c41a';
-    case 'in-progress': return '#1890ff';
-    case 'overdue': return '#ff4d4f';
-    case 'on-hold': return '#faad14';
-    default: return '#d9d9d9';
-  }
-}
-
-function darkenColor(color: string, amount: number): string {
-  // Simple color darkening - in a real app, use a proper color manipulation library
-  return color;
-}
-
-function lightenColor(color: string, amount: number): string {
-  // Simple color lightening - in a real app, use a proper color manipulation library
-  return color;
-}
-
-function adjustColorForDarkMode(color: string): string {
-  // Adjust color for dark mode - in a real app, use a proper color manipulation library
-  return color;
-}
-
-export default DraggableTaskBar;

worklenz-frontend/src/components/advanced-gantt/GanttGrid.tsx

@@ -1,492 +0,0 @@
-import React, { useMemo, useRef, useState, useCallback } from 'react';
-import { GanttTask, ColumnConfig, SelectionState } from '../../types/advanced-gantt.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-import { ChevronRightIcon, ChevronDownIcon } from '@heroicons/react/24/outline';
-import { CalendarIcon, UserIcon, FlagIcon } from '@heroicons/react/24/solid';
-
-interface GanttGridProps {
-  tasks: GanttTask[];
-  columns: ColumnConfig[];
-  rowHeight: number;
-  containerHeight: number;
-  selection: SelectionState;
-  enableInlineEdit?: boolean;
-  enableMultiSelect?: boolean;
-  onTaskClick?: (task: GanttTask, event: React.MouseEvent) => void;
-  onTaskDoubleClick?: (task: GanttTask) => void;
-  onTaskExpand?: (taskId: string) => void;
-  onSelectionChange?: (selection: SelectionState) => void;
-  onColumnResize?: (columnField: string, newWidth: number) => void;
-  onTaskUpdate?: (taskId: string, field: string, value: any) => void;
-  className?: string;
-}
-
-const GanttGrid: React.FC<GanttGridProps> = ({
-  tasks,
-  columns,
-  rowHeight,
-  containerHeight,
-  selection,
-  enableInlineEdit = true,
-  enableMultiSelect = true,
-  onTaskClick,
-  onTaskDoubleClick,
-  onTaskExpand,
-  onSelectionChange,
-  onColumnResize,
-  onTaskUpdate,
-  className = '',
-}) => {
-  const [editingCell, setEditingCell] = useState<{ taskId: string; field: string } | null>(null);
-  const [columnWidths, setColumnWidths] = useState<Record<string, number>>(
-    columns.reduce((acc, col) => ({ ...acc, [col.field]: col.width }), {})
-  );
-  const gridRef = useRef<HTMLDivElement>(null);
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-
-  // Theme-aware colors
-  const colors = useMemo(() => ({
-    background: themeWiseColor('#ffffff', '#1f2937', themeMode),
-    alternateRow: themeWiseColor('#f9fafb', '#374151', themeMode),
-    border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
-    text: themeWiseColor('#111827', '#f9fafb', themeMode),
-    textSecondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
-    selected: themeWiseColor('#eff6ff', '#1e3a8a', themeMode),
-    hover: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
-    headerBg: themeWiseColor('#f8f9fa', '#374151', themeMode),
-  }), [themeMode]);
-
-  // Calculate total grid width
-  const totalWidth = useMemo(() => {
-    return columns.reduce((sum, col) => sum + columnWidths[col.field], 0);
-  }, [columns, columnWidths]);
-
-  // Handle column resize
-  const handleColumnResize = useCallback((columnField: string, deltaX: number) => {
-    const column = columns.find(col => col.field === columnField);
-    if (!column) return;
-
-    const currentWidth = columnWidths[columnField];
-    const newWidth = Math.max(column.minWidth || 60, Math.min(column.maxWidth || 400, currentWidth + deltaX));
-    
-    setColumnWidths(prev => ({ ...prev, [columnField]: newWidth }));
-    onColumnResize?.(columnField, newWidth);
-  }, [columns, columnWidths, onColumnResize]);
-
-  // Handle task selection
-  const handleTaskSelection = useCallback((task: GanttTask, event: React.MouseEvent) => {
-    const { ctrlKey, shiftKey } = event;
-    let newSelectedTasks = [...selection.selectedTasks];
-
-    if (shiftKey && enableMultiSelect && selection.selectedTasks.length > 0) {
-      // Range selection
-      const lastSelectedIndex = tasks.findIndex(t => t.id === selection.selectedTasks[selection.selectedTasks.length - 1]);
-      const currentIndex = tasks.findIndex(t => t.id === task.id);
-      const [start, end] = [Math.min(lastSelectedIndex, currentIndex), Math.max(lastSelectedIndex, currentIndex)];
-      
-      newSelectedTasks = tasks.slice(start, end + 1).map(t => t.id);
-    } else if (ctrlKey && enableMultiSelect) {
-      // Multi selection
-      if (newSelectedTasks.includes(task.id)) {
-        newSelectedTasks = newSelectedTasks.filter(id => id !== task.id);
-      } else {
-        newSelectedTasks.push(task.id);
-      }
-    } else {
-      // Single selection
-      newSelectedTasks = [task.id];
-    }
-
-    onSelectionChange?.({
-      ...selection,
-      selectedTasks: newSelectedTasks,
-      focusedTask: task.id,
-    });
-
-    onTaskClick?.(task, event);
-  }, [tasks, selection, enableMultiSelect, onSelectionChange, onTaskClick]);
-
-  // Handle cell editing
-  const handleCellDoubleClick = useCallback((task: GanttTask, column: ColumnConfig) => {
-    if (!enableInlineEdit || !column.editor) return;
-    
-    setEditingCell({ taskId: task.id, field: column.field });
-  }, [enableInlineEdit]);
-
-  const handleCellEditComplete = useCallback((value: any) => {
-    if (!editingCell) return;
-    
-    onTaskUpdate?.(editingCell.taskId, editingCell.field, value);
-    setEditingCell(null);
-  }, [editingCell, onTaskUpdate]);
-
-  // Render cell content
-  const renderCellContent = useCallback((task: GanttTask, column: ColumnConfig) => {
-    const value = task[column.field as keyof GanttTask];
-    const isEditing = editingCell?.taskId === task.id && editingCell?.field === column.field;
-
-    if (isEditing) {
-      return renderCellEditor(value, column, handleCellEditComplete);
-    }
-
-    if (column.renderer) {
-      return column.renderer(value, task);
-    }
-
-    // Default renderers
-    switch (column.field) {
-      case 'name':
-        return (
-          <div className="flex items-center space-x-2">
-            {task.hasChildren && (
-              <button
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onTaskExpand?.(task.id);
-                }}
-                className="p-0.5 hover:bg-gray-200 dark:hover:bg-gray-600 rounded"
-              >
-                {task.isExpanded ? (
-                  <ChevronDownIcon className="w-3 h-3" />
-                ) : (
-                  <ChevronRightIcon className="w-3 h-3" />
-                )}
-              </button>
-            )}
-            <div 
-              className="flex items-center space-x-2"
-              style={{ paddingLeft: `${(task.level || 0) * 16}px` }}
-            >
-              {getTaskTypeIcon(task.type)}
-              <span className="truncate font-medium">{task.name}</span>
-            </div>
-          </div>
-        );
-      
-      case 'startDate':
-      case 'endDate':
-        return (
-          <div className="flex items-center space-x-1">
-            <CalendarIcon className="w-3 h-3 text-gray-400" />
-            <span>{(value as Date)?.toLocaleDateString() || '-'}</span>
-          </div>
-        );
-      
-      case 'assignee':
-        return task.assignee ? (
-          <div className="flex items-center space-x-2">
-            {task.assignee.avatar ? (
-              <img 
-                src={task.assignee.avatar} 
-                alt={task.assignee.name}
-                className="w-6 h-6 rounded-full"
-              />
-            ) : (
-              <UserIcon className="w-6 h-6 text-gray-400" />
-            )}
-            <span className="truncate">{task.assignee.name}</span>
-          </div>
-        ) : (
-          <span className="text-gray-400">Unassigned</span>
-        );
-      
-      case 'progress':
-        return (
-          <div className="flex items-center space-x-2">
-            <div className="flex-1 bg-gray-200 dark:bg-gray-600 rounded-full h-2">
-              <div
-                className="bg-blue-500 h-2 rounded-full transition-all duration-300"
-                style={{ width: `${task.progress}%` }}
-              />
-            </div>
-            <span className="text-xs w-8 text-right">{task.progress}%</span>
-          </div>
-        );
-      
-      case 'status':
-        return (
-          <span className={`px-2 py-1 rounded-full text-xs font-medium ${getStatusColor(task.status)}`}>
-            {task.status.replace('-', ' ')}
-          </span>
-        );
-      
-      case 'priority':
-        return (
-          <div className="flex items-center space-x-1">
-            <FlagIcon className={`w-3 h-3 ${getPriorityColor(task.priority)}`} />
-            <span className="capitalize">{task.priority}</span>
-          </div>
-        );
-      
-      case 'duration':
-        const duration = task.duration || Math.ceil((task.endDate.getTime() - task.startDate.getTime()) / (1000 * 60 * 60 * 24));
-        return <span>{duration}d</span>;
-      
-      default:
-        return <span>{String(value || '')}</span>;
-    }
-  }, [editingCell, onTaskExpand, handleCellEditComplete]);
-
-  // Render header
-  const renderHeader = () => (
-    <div 
-      className="grid-header flex border-b sticky top-0 z-10"
-      style={{ 
-        backgroundColor: colors.headerBg,
-        borderColor: colors.border,
-        height: rowHeight,
-      }}
-    >
-      {columns.map((column, index) => (
-        <div
-          key={column.field}
-          className="column-header flex items-center px-3 py-2 font-medium text-sm border-r relative group"
-          style={{
-            width: columnWidths[column.field],
-            borderColor: colors.border,
-            color: colors.text,
-          }}
-        >
-          <span className="truncate" title={column.title}>
-            {column.title}
-          </span>
-          
-          {/* Resize handle */}
-          {column.resizable && (
-            <ResizeHandle
-              onResize={(deltaX) => handleColumnResize(column.field, deltaX)}
-              className="absolute right-0 top-0 h-full w-1 cursor-col-resize hover:bg-blue-500 opacity-0 group-hover:opacity-100"
-            />
-          )}
-        </div>
-      ))}
-    </div>
-  );
-
-  // Render task rows
-  const renderRows = () => (
-    <div className="grid-body">
-      {tasks.map((task, rowIndex) => {
-        const isSelected = selection.selectedTasks.includes(task.id);
-        const isFocused = selection.focusedTask === task.id;
-        
-        return (
-          <div
-            key={task.id}
-            className={`grid-row flex border-b cursor-pointer hover:bg-opacity-75 ${
-              isSelected ? 'bg-blue-50 dark:bg-blue-900 bg-opacity-50' : 
-              rowIndex % 2 === 0 ? '' : 'bg-gray-50 dark:bg-gray-800 bg-opacity-30'
-            }`}
-            style={{
-              height: rowHeight,
-              borderColor: colors.border,
-              backgroundColor: isSelected ? colors.selected : 
-                              rowIndex % 2 === 0 ? 'transparent' : colors.alternateRow,
-            }}
-            onClick={(e) => handleTaskSelection(task, e)}
-            onDoubleClick={() => onTaskDoubleClick?.(task)}
-          >
-            {columns.map((column) => (
-              <div
-                key={`${task.id}-${column.field}`}
-                className="grid-cell flex items-center px-3 py-1 border-r overflow-hidden"
-                style={{
-                  width: columnWidths[column.field],
-                  borderColor: colors.border,
-                  textAlign: column.align || 'left',
-                }}
-                onDoubleClick={() => handleCellDoubleClick(task, column)}
-              >
-                {renderCellContent(task, column)}
-              </div>
-            ))}
-          </div>
-        );
-      })}
-    </div>
-  );
-
-  return (
-    <div
-      ref={gridRef}
-      className={`gantt-grid border-r ${className}`}
-      style={{
-        width: totalWidth,
-        height: containerHeight,
-        backgroundColor: colors.background,
-        borderColor: colors.border,
-      }}
-    >
-      {renderHeader()}
-      <div 
-        className="grid-content overflow-auto"
-        style={{ height: containerHeight - rowHeight }}
-      >
-        {renderRows()}
-      </div>
-    </div>
-  );
-};
-
-// Resize handle component
-interface ResizeHandleProps {
-  onResize: (deltaX: number) => void;
-  className?: string;
-}
-
-const ResizeHandle: React.FC<ResizeHandleProps> = ({ onResize, className }) => {
-  const [isDragging, setIsDragging] = useState(false);
-  const startXRef = useRef<number>(0);
-
-  const handleMouseDown = useCallback((e: React.MouseEvent) => {
-    e.preventDefault();
-    setIsDragging(true);
-    startXRef.current = e.clientX;
-
-    const handleMouseMove = (moveEvent: MouseEvent) => {
-      const deltaX = moveEvent.clientX - startXRef.current;
-      onResize(deltaX);
-      startXRef.current = moveEvent.clientX;
-    };
-
-    const handleMouseUp = () => {
-      setIsDragging(false);
-      document.removeEventListener('mousemove', handleMouseMove);
-      document.removeEventListener('mouseup', handleMouseUp);
-    };
-
-    document.addEventListener('mousemove', handleMouseMove);
-    document.addEventListener('mouseup', handleMouseUp);
-  }, [onResize]);
-
-  return (
-    <div
-      className={`resize-handle ${className} ${isDragging ? 'bg-blue-500' : ''}`}
-      onMouseDown={handleMouseDown}
-    />
-  );
-};
-
-// Cell editor component
-const renderCellEditor = (value: any, column: ColumnConfig, onComplete: (value: any) => void) => {
-  const [editValue, setEditValue] = useState(value);
-
-  const handleKeyDown = (e: React.KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      onComplete(editValue);
-    } else if (e.key === 'Escape') {
-      onComplete(value); // Cancel editing
-    }
-  };
-
-  const handleBlur = () => {
-    onComplete(editValue);
-  };
-
-  switch (column.editor) {
-    case 'text':
-      return (
-        <input
-          type="text"
-          value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className="w-full px-1 py-0.5 border rounded text-sm"
-          autoFocus
-        />
-      );
-    
-    case 'date':
-      return (
-        <input
-          type="date"
-          value={editValue instanceof Date ? editValue.toISOString().split('T')[0] : editValue}
-          onChange={(e) => setEditValue(new Date(e.target.value))}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className="w-full px-1 py-0.5 border rounded text-sm"
-          autoFocus
-        />
-      );
-    
-    case 'number':
-      return (
-        <input
-          type="number"
-          value={editValue}
-          onChange={(e) => setEditValue(parseFloat(e.target.value))}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className="w-full px-1 py-0.5 border rounded text-sm"
-          autoFocus
-        />
-      );
-    
-    case 'select':
-      return (
-        <select
-          value={editValue}
-          onChange={(e) => setEditValue(e.target.value)}
-          onKeyDown={handleKeyDown}
-          onBlur={handleBlur}
-          className="w-full px-1 py-0.5 border rounded text-sm"
-          autoFocus
-        >
-          {column.editorOptions?.map((option: any) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
-      );
-    
-    default:
-      return <span>{String(value)}</span>;
-  }
-};
-
-// Helper functions
-const getTaskTypeIcon = (type: GanttTask['type']) => {
-  switch (type) {
-    case 'project':
-      return <div className="w-3 h-3 bg-blue-500 rounded-sm" />;
-    case 'milestone':
-      return <div className="w-3 h-3 bg-yellow-500 rotate-45" />;
-    default:
-      return <div className="w-3 h-3 bg-gray-400 rounded-full" />;
-  }
-};
-
-const getStatusColor = (status: GanttTask['status']) => {
-  switch (status) {
-    case 'completed':
-      return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
-    case 'in-progress':
-      return 'bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200';
-    case 'overdue':
-      return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
-    case 'on-hold':
-      return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-200';
-    default:
-      return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-200';
-  }
-};
-
-const getPriorityColor = (priority: GanttTask['priority']) => {
-  switch (priority) {
-    case 'critical':
-      return 'text-red-600';
-    case 'high':
-      return 'text-orange-500';
-    case 'medium':
-      return 'text-yellow-500';
-    case 'low':
-      return 'text-green-500';
-    default:
-      return 'text-gray-400';
-  }
-};
-
-export default GanttGrid;

worklenz-frontend/src/components/advanced-gantt/TimelineMarkers.tsx

@@ -1,295 +0,0 @@
-import React, { useMemo } from 'react';
-import { Holiday, TimelineConfig } from '../../types/advanced-gantt.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-import { useDateCalculations } from '../../utils/gantt-performance';
-
-interface TimelineMarkersProps {
-  startDate: Date;
-  endDate: Date;
-  dayWidth: number;
-  containerHeight: number;
-  timelineConfig: TimelineConfig;
-  holidays?: Holiday[];
-  showWeekends?: boolean;
-  showHolidays?: boolean;
-  showToday?: boolean;
-  className?: string;
-}
-
-const TimelineMarkers: React.FC<TimelineMarkersProps> = ({
-  startDate,
-  endDate,
-  dayWidth,
-  containerHeight,
-  timelineConfig,
-  holidays = [],
-  showWeekends = true,
-  showHolidays = true,
-  showToday = true,
-  className = '',
-}) => {
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const { getDaysBetween, isWeekend, isWorkingDay } = useDateCalculations();
-
-  // Generate all dates in the timeline
-  const timelineDates = useMemo(() => {
-    const dates: Date[] = [];
-    const totalDays = getDaysBetween(startDate, endDate);
-    
-    for (let i = 0; i <= totalDays; i++) {
-      const date = new Date(startDate);
-      date.setDate(date.getDate() + i);
-      dates.push(date);
-    }
-    
-    return dates;
-  }, [startDate, endDate, getDaysBetween]);
-
-  // Theme-aware colors
-  const colors = useMemo(() => ({
-    weekend: themeWiseColor('rgba(0, 0, 0, 0.05)', 'rgba(255, 255, 255, 0.05)', themeMode),
-    nonWorkingDay: themeWiseColor('rgba(0, 0, 0, 0.03)', 'rgba(255, 255, 255, 0.03)', themeMode),
-    holiday: themeWiseColor('rgba(255, 107, 107, 0.1)', 'rgba(255, 107, 107, 0.15)', themeMode),
-    today: themeWiseColor('rgba(24, 144, 255, 0.15)', 'rgba(64, 169, 255, 0.2)', themeMode),
-    todayLine: themeWiseColor('#1890ff', '#40a9ff', themeMode),
-    holidayBorder: themeWiseColor('#ff6b6b', '#ff8787', themeMode),
-  }), [themeMode]);
-
-  // Check if a date is a holiday
-  const isHoliday = (date: Date): Holiday | undefined => {
-    return holidays.find(holiday => {
-      if (holiday.recurring) {
-        return holiday.date.getMonth() === date.getMonth() && 
-               holiday.date.getDate() === date.getDate();
-      }
-      return holiday.date.toDateString() === date.toDateString();
-    });
-  };
-
-  // Check if date is today
-  const isToday = (date: Date): boolean => {
-    const today = new Date();
-    return date.toDateString() === today.toDateString();
-  };
-
-  // Render weekend markers
-  const renderWeekendMarkers = () => {
-    if (!showWeekends) return null;
-
-    return timelineDates.map((date, index) => {
-      if (!isWeekend(date)) return null;
-
-      return (
-        <div
-          key={`weekend-${index}`}
-          className="weekend-marker absolute top-0 pointer-events-none"
-          style={{
-            left: index * dayWidth,
-            width: dayWidth,
-            height: containerHeight,
-            backgroundColor: colors.weekend,
-            zIndex: 1,
-          }}
-        />
-      );
-    });
-  };
-
-  // Render non-working day markers
-  const renderNonWorkingDayMarkers = () => {
-    return timelineDates.map((date, index) => {
-      if (isWorkingDay(date, timelineConfig.workingDays)) return null;
-
-      return (
-        <div
-          key={`non-working-${index}`}
-          className="non-working-day-marker absolute top-0 pointer-events-none"
-          style={{
-            left: index * dayWidth,
-            width: dayWidth,
-            height: containerHeight,
-            backgroundColor: colors.nonWorkingDay,
-            zIndex: 1,
-          }}
-        />
-      );
-    });
-  };
-
-  // Render holiday markers
-  const renderHolidayMarkers = () => {
-    if (!showHolidays) return null;
-
-    return timelineDates.map((date, index) => {
-      const holiday = isHoliday(date);
-      if (!holiday) return null;
-
-      const holidayColor = holiday.color || colors.holiday;
-
-      return (
-        <div
-          key={`holiday-${index}`}
-          className="holiday-marker absolute top-0 pointer-events-none group"
-          style={{
-            left: index * dayWidth,
-            width: dayWidth,
-            height: containerHeight,
-            backgroundColor: holidayColor,
-            borderLeft: `2px solid ${colors.holidayBorder}`,
-            zIndex: 2,
-          }}
-        >
-          {/* Holiday tooltip */}
-          <div className="holiday-tooltip absolute top-0 left-1/2 transform -translate-x-1/2 -translate-y-full bg-gray-900 dark:bg-gray-100 text-white dark:text-gray-900 text-xs px-2 py-1 rounded opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap z-50">
-            <div className="font-medium">{holiday.name}</div>
-            <div className="text-xs opacity-75">{date.toLocaleDateString()}</div>
-            <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-l-2 border-r-2 border-t-4 border-transparent border-t-gray-900 dark:border-t-gray-100"></div>
-          </div>
-
-          {/* Holiday icon */}
-          <div className="holiday-icon absolute top-1 left-1 w-3 h-3 rounded-full bg-red-500 opacity-75">
-            <div className="w-full h-full rounded-full animate-pulse"></div>
-          </div>
-        </div>
-      );
-    });
-  };
-
-  // Render today marker
-  const renderTodayMarker = () => {
-    if (!showToday) return null;
-
-    const todayIndex = timelineDates.findIndex(date => isToday(date));
-    if (todayIndex === -1) return null;
-
-    return (
-      <div
-        className="today-marker absolute top-0 pointer-events-none"
-        style={{
-          left: todayIndex * dayWidth,
-          width: dayWidth,
-          height: containerHeight,
-          backgroundColor: colors.today,
-          zIndex: 3,
-        }}
-      >
-        {/* Today line */}
-        <div
-          className="today-line absolute top-0 left-1/2 transform -translate-x-1/2"
-          style={{
-            width: '2px',
-            height: containerHeight,
-            backgroundColor: colors.todayLine,
-            zIndex: 4,
-          }}
-        />
-
-        {/* Today label */}
-        <div className="today-label absolute top-2 left-1/2 transform -translate-x-1/2 bg-blue-500 text-white text-xs px-2 py-1 rounded shadow-sm">
-          Today
-        </div>
-      </div>
-    );
-  };
-
-  // Render time period markers (quarters, months, etc.)
-  const renderTimePeriodMarkers = () => {
-    const markers: React.ReactNode[] = [];
-    const currentDate = new Date(startDate);
-    currentDate.setDate(1); // Start of month
-
-    while (currentDate <= endDate) {
-      const daysSinceStart = getDaysBetween(startDate, currentDate);
-      const isQuarterStart = currentDate.getMonth() % 3 === 0 && currentDate.getDate() === 1;
-      const isYearStart = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
-
-      if (isYearStart) {
-        markers.push(
-          <div
-            key={`year-${currentDate.getTime()}`}
-            className="year-marker absolute top-0 border-l-2 border-blue-600 dark:border-blue-400"
-            style={{
-              left: daysSinceStart * dayWidth,
-              height: containerHeight,
-              zIndex: 5,
-            }}
-          >
-            <div className="year-label absolute top-2 left-1 bg-blue-600 dark:bg-blue-400 text-white text-xs px-1 py-0.5 rounded">
-              {currentDate.getFullYear()}
-            </div>
-          </div>
-        );
-      } else if (isQuarterStart) {
-        markers.push(
-          <div
-            key={`quarter-${currentDate.getTime()}`}
-            className="quarter-marker absolute top-0 border-l border-green-500 dark:border-green-400 opacity-60"
-            style={{
-              left: daysSinceStart * dayWidth,
-              height: containerHeight,
-              zIndex: 4,
-            }}
-          >
-            <div className="quarter-label absolute top-2 left-1 bg-green-500 dark:bg-green-400 text-white text-xs px-1 py-0.5 rounded">
-              Q{Math.floor(currentDate.getMonth() / 3) + 1}
-            </div>
-          </div>
-        );
-      }
-
-      // Move to next month
-      currentDate.setMonth(currentDate.getMonth() + 1);
-    }
-
-    return markers;
-  };
-
-  return (
-    <div className={`timeline-markers absolute inset-0 ${className}`}>
-      {renderNonWorkingDayMarkers()}
-      {renderWeekendMarkers()}
-      {renderHolidayMarkers()}
-      {renderTodayMarker()}
-      {renderTimePeriodMarkers()}
-    </div>
-  );
-};
-
-// Holiday presets for common countries
-export const holidayPresets = {
-  US: [
-    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 0, 15), name: "Martin Luther King Jr. Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 1, 19), name: "Presidents' Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 4, 27), name: "Memorial Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 5, 19), name: "Juneteenth", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 6, 4), name: "Independence Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 8, 2), name: "Labor Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 9, 14), name: "Columbus Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 10, 11), name: "Veterans Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 10, 28), name: "Thanksgiving", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'national' as const, recurring: true },
-  ],
-  
-  UK: [
-    { date: new Date(2024, 0, 1), name: "New Year's Day", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 2, 29), name: "Good Friday", type: 'religious' as const, recurring: false },
-    { date: new Date(2024, 3, 1), name: "Easter Monday", type: 'religious' as const, recurring: false },
-    { date: new Date(2024, 4, 6), name: "Early May Bank Holiday", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 4, 27), name: "Spring Bank Holiday", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 7, 26), name: "Summer Bank Holiday", type: 'national' as const, recurring: true },
-    { date: new Date(2024, 11, 25), name: "Christmas Day", type: 'religious' as const, recurring: true },
-    { date: new Date(2024, 11, 26), name: "Boxing Day", type: 'national' as const, recurring: true },
-  ],
-};
-
-// Working day presets
-export const workingDayPresets = {
-  standard: [1, 2, 3, 4, 5], // Monday to Friday
-  middle_east: [0, 1, 2, 3, 4], // Sunday to Thursday
-  six_day: [1, 2, 3, 4, 5, 6], // Monday to Saturday
-  four_day: [1, 2, 3, 4], // Monday to Thursday
-};
-
-export default TimelineMarkers;

worklenz-frontend/src/components/advanced-gantt/VirtualScrollContainer.tsx

@@ -1,372 +0,0 @@
-import React, { useRef, useEffect, useState, useCallback, ReactNode } from 'react';
-import { useThrottle, usePerformanceMonitoring } from '../../utils/gantt-performance';
-import { useAppSelector } from '../../hooks/useAppSelector';
-
-interface VirtualScrollContainerProps {
-  items: any[];
-  itemHeight: number;
-  containerHeight: number;
-  containerWidth?: number;
-  overscan?: number;
-  horizontal?: boolean;
-  children: (item: any, index: number, style: React.CSSProperties) => ReactNode;
-  onScroll?: (scrollLeft: number, scrollTop: number) => void;
-  className?: string;
-  style?: React.CSSProperties;
-}
-
-const VirtualScrollContainer: React.FC<VirtualScrollContainerProps> = ({
-  items,
-  itemHeight,
-  containerHeight,
-  containerWidth = 0,
-  overscan = 5,
-  horizontal = false,
-  children,
-  onScroll,
-  className = '',
-  style = {},
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-  const { startMeasure, endMeasure, recordMetric } = usePerformanceMonitoring();
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-
-  // Calculate visible range
-  const totalHeight = items.length * itemHeight;
-  const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-  const endIndex = Math.min(
-    items.length - 1,
-    Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
-  );
-  const visibleItems = items.slice(startIndex, endIndex + 1);
-  const offsetY = startIndex * itemHeight;
-
-  // Throttled scroll handler
-  const throttledScrollHandler = useThrottle(
-    useCallback((event: Event) => {
-      const target = event.target as HTMLDivElement;
-      const newScrollTop = target.scrollTop;
-      const newScrollLeft = target.scrollLeft;
-      
-      setScrollTop(newScrollTop);
-      setScrollLeft(newScrollLeft);
-      onScroll?.(newScrollLeft, newScrollTop);
-    }, [onScroll]),
-    16 // ~60fps
-  );
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
-    
-    return () => {
-      container.removeEventListener('scroll', throttledScrollHandler);
-    };
-  }, [throttledScrollHandler]);
-
-  // Performance monitoring
-  useEffect(() => {
-    startMeasure('virtualScroll');
-    recordMetric('visibleTaskCount', visibleItems.length);
-    recordMetric('taskCount', items.length);
-    endMeasure('virtualScroll');
-  }, [visibleItems.length, items.length, startMeasure, endMeasure, recordMetric]);
-
-  const renderVisibleItems = () => {
-    return visibleItems.map((item, virtualIndex) => {
-      const actualIndex = startIndex + virtualIndex;
-      const itemStyle: React.CSSProperties = {
-        position: 'absolute',
-        top: horizontal ? 0 : actualIndex * itemHeight,
-        left: horizontal ? actualIndex * itemHeight : 0,
-        height: horizontal ? '100%' : itemHeight,
-        width: horizontal ? itemHeight : '100%',
-        transform: horizontal ? 'none' : `translateY(${offsetY}px)`,
-      };
-
-      return (
-        <div key={item.id || actualIndex} style={itemStyle}>
-          {children(item, actualIndex, itemStyle)}
-        </div>
-      );
-    });
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className={`virtual-scroll-container overflow-auto ${className}`}
-      style={{
-        height: containerHeight,
-        width: containerWidth || '100%',
-        position: 'relative',
-        ...style,
-      }}
-    >
-      {/* Spacer to maintain scroll height */}
-      <div
-        className="virtual-scroll-spacer"
-        style={{
-          height: horizontal ? '100%' : totalHeight,
-          width: horizontal ? totalHeight : '100%',
-          position: 'relative',
-          pointerEvents: 'none',
-        }}
-      >
-        {/* Visible items container */}
-        <div
-          className="virtual-scroll-content"
-          style={{
-            position: 'absolute',
-            top: 0,
-            left: 0,
-            height: '100%',
-            width: '100%',
-            pointerEvents: 'auto',
-          }}
-        >
-          {renderVisibleItems()}
-        </div>
-      </div>
-    </div>
-  );
-};
-
-// Grid virtual scrolling component for both rows and columns
-interface VirtualGridProps {
-  data: any[][];
-  rowHeight: number;
-  columnWidth: number | number[];
-  containerHeight: number;
-  containerWidth: number;
-  overscan?: number;
-  children: (item: any, rowIndex: number, colIndex: number, style: React.CSSProperties) => ReactNode;
-  onScroll?: (scrollLeft: number, scrollTop: number) => void;
-  className?: string;
-}
-
-export const VirtualGrid: React.FC<VirtualGridProps> = ({
-  data,
-  rowHeight,
-  columnWidth,
-  containerHeight,
-  containerWidth,
-  overscan = 3,
-  children,
-  onScroll,
-  className = '',
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [scrollTop, setScrollTop] = useState(0);
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const rowCount = data.length;
-  const colCount = data[0]?.length || 0;
-
-  // Calculate column positions for variable width columns
-  const columnWidths = Array.isArray(columnWidth) ? columnWidth : new Array(colCount).fill(columnWidth);
-  const columnPositions = columnWidths.reduce((acc, width, index) => {
-    acc[index] = index === 0 ? 0 : acc[index - 1] + columnWidths[index - 1];
-    return acc;
-  }, {} as Record<number, number>);
-
-  const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0);
-  const totalHeight = rowCount * rowHeight;
-
-  // Calculate visible ranges
-  const startRowIndex = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);
-  const endRowIndex = Math.min(rowCount - 1, Math.ceil((scrollTop + containerHeight) / rowHeight) + overscan);
-
-  const startColIndex = Math.max(0, findColumnIndex(scrollLeft) - overscan);
-  const endColIndex = Math.min(colCount - 1, findColumnIndex(scrollLeft + containerWidth) + overscan);
-
-  function findColumnIndex(position: number): number {
-    for (let i = 0; i < colCount; i++) {
-      if (columnPositions[i] <= position && position < columnPositions[i] + columnWidths[i]) {
-        return i;
-      }
-    }
-    return colCount - 1;
-  }
-
-  const throttledScrollHandler = useThrottle(
-    useCallback((event: Event) => {
-      const target = event.target as HTMLDivElement;
-      const newScrollTop = target.scrollTop;
-      const newScrollLeft = target.scrollLeft;
-      
-      setScrollTop(newScrollTop);
-      setScrollLeft(newScrollLeft);
-      onScroll?.(newScrollLeft, newScrollTop);
-    }, [onScroll]),
-    16
-  );
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
-    
-    return () => {
-      container.removeEventListener('scroll', throttledScrollHandler);
-    };
-  }, [throttledScrollHandler]);
-
-  const renderVisibleCells = () => {
-    const cells: ReactNode[] = [];
-
-    for (let rowIndex = startRowIndex; rowIndex <= endRowIndex; rowIndex++) {
-      for (let colIndex = startColIndex; colIndex <= endColIndex; colIndex++) {
-        const item = data[rowIndex]?.[colIndex];
-        if (!item) continue;
-
-        const cellStyle: React.CSSProperties = {
-          position: 'absolute',
-          top: rowIndex * rowHeight,
-          left: columnPositions[colIndex],
-          height: rowHeight,
-          width: columnWidths[colIndex],
-        };
-
-        cells.push(
-          <div key={`${rowIndex}-${colIndex}`} style={cellStyle}>
-            {children(item, rowIndex, colIndex, cellStyle)}
-          </div>
-        );
-      }
-    }
-
-    return cells;
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className={`virtual-grid overflow-auto ${className}`}
-      style={{
-        height: containerHeight,
-        width: containerWidth,
-        position: 'relative',
-      }}
-    >
-      <div
-        style={{
-          height: totalHeight,
-          width: totalWidth,
-          position: 'relative',
-        }}
-      >
-        {renderVisibleCells()}
-      </div>
-    </div>
-  );
-};
-
-// Timeline virtual scrolling component
-interface VirtualTimelineProps {
-  startDate: Date;
-  endDate: Date;
-  dayWidth: number;
-  containerWidth: number;
-  containerHeight: number;
-  overscan?: number;
-  children: (date: Date, index: number, style: React.CSSProperties) => ReactNode;
-  onScroll?: (scrollLeft: number) => void;
-  className?: string;
-}
-
-export const VirtualTimeline: React.FC<VirtualTimelineProps> = ({
-  startDate,
-  endDate,
-  dayWidth,
-  containerWidth,
-  containerHeight,
-  overscan = 10,
-  children,
-  onScroll,
-  className = '',
-}) => {
-  const containerRef = useRef<HTMLDivElement>(null);
-  const [scrollLeft, setScrollLeft] = useState(0);
-
-  const totalDays = Math.ceil((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24));
-  const totalWidth = totalDays * dayWidth;
-
-  const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
-  const endDayIndex = Math.min(totalDays - 1, Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan);
-
-  const throttledScrollHandler = useThrottle(
-    useCallback((event: Event) => {
-      const target = event.target as HTMLDivElement;
-      const newScrollLeft = target.scrollLeft;
-      setScrollLeft(newScrollLeft);
-      onScroll?.(newScrollLeft);
-    }, [onScroll]),
-    16
-  );
-
-  useEffect(() => {
-    const container = containerRef.current;
-    if (!container) return;
-
-    container.addEventListener('scroll', throttledScrollHandler, { passive: true });
-    
-    return () => {
-      container.removeEventListener('scroll', throttledScrollHandler);
-    };
-  }, [throttledScrollHandler]);
-
-  const renderVisibleDays = () => {
-    const days: ReactNode[] = [];
-
-    for (let dayIndex = startDayIndex; dayIndex <= endDayIndex; dayIndex++) {
-      const date = new Date(startDate);
-      date.setDate(date.getDate() + dayIndex);
-
-      const dayStyle: React.CSSProperties = {
-        position: 'absolute',
-        left: dayIndex * dayWidth,
-        top: 0,
-        width: dayWidth,
-        height: '100%',
-      };
-
-      days.push(
-        <div key={dayIndex} style={dayStyle}>
-          {children(date, dayIndex, dayStyle)}
-        </div>
-      );
-    }
-
-    return days;
-  };
-
-  return (
-    <div
-      ref={containerRef}
-      className={`virtual-timeline overflow-x-auto ${className}`}
-      style={{
-        height: containerHeight,
-        width: containerWidth,
-        position: 'relative',
-      }}
-    >
-      <div
-        style={{
-          height: '100%',
-          width: totalWidth,
-          position: 'relative',
-        }}
-      >
-        {renderVisibleDays()}
-      </div>
-    </div>
-  );
-};
-
-export default VirtualScrollContainer;

worklenz-frontend/src/components/advanced-gantt/index.ts

@@ -1,17 +0,0 @@
-// Main Components
-export { default as AdvancedGanttChart } from './AdvancedGanttChart';
-export { default as AdvancedGanttDemo } from './AdvancedGanttDemo';
-
-// Core Components
-export { default as GanttGrid } from './GanttGrid';
-export { default as DraggableTaskBar } from './DraggableTaskBar';
-export { default as TimelineMarkers, holidayPresets, workingDayPresets } from './TimelineMarkers';
-
-// Utility Components
-export { default as VirtualScrollContainer, VirtualGrid, VirtualTimeline } from './VirtualScrollContainer';
-
-// Types
-export * from '../../types/advanced-gantt.types';
-
-// Performance Utilities
-export * from '../../utils/gantt-performance';

worklenz-frontend/src/components/project-roadmap-gantt/PhaseModal.tsx

@@ -1,406 +0,0 @@
-import React, { useState } from 'react';
-import { 
-  Modal, 
-  Tabs, 
-  Progress, 
-  Tag, 
-  List, 
-  Avatar, 
-  Badge, 
-  Space, 
-  Button,
-  Statistic,
-  Row,
-  Col,
-  Timeline,
-  Input,
-  Form,
-  DatePicker,
-  Select
-} from 'antd';
-import { 
-  CalendarOutlined, 
-  TeamOutlined, 
-  CheckCircleOutlined, 
-  ClockCircleOutlined,
-  FlagOutlined,
-  ExclamationCircleOutlined,
-  EditOutlined,
-  SaveOutlined,
-  CloseOutlined
-} from '@ant-design/icons';
-import { PhaseModalData, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-import dayjs from 'dayjs';
-
-const { TabPane } = Tabs;
-const { TextArea } = Input;
-
-interface PhaseModalProps {
-  visible: boolean;
-  phase: PhaseModalData | null;
-  onClose: () => void;
-  onUpdate?: (updates: Partial<ProjectPhase>) => void;
-}
-
-const PhaseModal: React.FC<PhaseModalProps> = ({
-  visible,
-  phase,
-  onClose,
-  onUpdate,
-}) => {
-  const [isEditing, setIsEditing] = useState(false);
-  const [form] = Form.useForm();
-  
-  // Theme support
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const isDarkMode = themeMode === 'dark';
-
-  if (!phase) return null;
-
-  const handleEdit = () => {
-    setIsEditing(true);
-    form.setFieldsValue({
-      name: phase.name,
-      description: phase.description,
-      startDate: dayjs(phase.startDate),
-      endDate: dayjs(phase.endDate),
-      status: phase.status,
-    });
-  };
-
-  const handleSave = async () => {
-    try {
-      const values = await form.validateFields();
-      const updates: Partial<ProjectPhase> = {
-        name: values.name,
-        description: values.description,
-        startDate: values.startDate.toDate(),
-        endDate: values.endDate.toDate(),
-        status: values.status,
-      };
-      
-      onUpdate?.(updates);
-      setIsEditing(false);
-    } catch (error) {
-      console.error('Validation failed:', error);
-    }
-  };
-
-  const handleCancel = () => {
-    setIsEditing(false);
-    form.resetFields();
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'completed': return 'success';
-      case 'in-progress': return 'processing';
-      case 'on-hold': return 'warning';
-      default: return 'default';
-    }
-  };
-
-  const getPriorityColor = (priority: string) => {
-    switch (priority) {
-      case 'high': return 'red';
-      case 'medium': return 'orange';
-      case 'low': return 'green';
-      default: return 'default';
-    }
-  };
-
-  const getTaskStatusIcon = (status: string) => {
-    switch (status) {
-      case 'done': return <CheckCircleOutlined style={{ color: '#52c41a' }} />;
-      case 'in-progress': return <ClockCircleOutlined style={{ color: '#1890ff' }} />;
-      default: return <ExclamationCircleOutlined style={{ color: '#d9d9d9' }} />;
-    }
-  };
-
-  return (
-    <Modal
-      title={
-        <div className="flex justify-between items-center">
-          <Space>
-            <Badge status={getStatusColor(phase.status)} />
-            {isEditing ? (
-              <Form.Item name="name" className="mb-0">
-                <Input className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" />
-              </Form.Item>
-            ) : (
-              <h4 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-0">
-                {phase.name}
-              </h4>
-            )}
-          </Space>
-          <Space>
-            {isEditing ? (
-              <>
-                <Button 
-                  type="primary" 
-                  icon={<SaveOutlined />} 
-                  onClick={handleSave}
-                  size="small"
-                >
-                  Save
-                </Button>
-                <Button 
-                  icon={<CloseOutlined />} 
-                  onClick={handleCancel}
-                  size="small"
-                  className="dark:border-gray-600 dark:text-gray-300"
-                >
-                  Cancel
-                </Button>
-              </>
-            ) : (
-              <Button 
-                type="text" 
-                icon={<EditOutlined />} 
-                onClick={handleEdit}
-                size="small"
-                className="dark:text-gray-300 dark:hover:bg-gray-700"
-              >
-                Edit
-              </Button>
-            )}
-          </Space>
-        </div>
-      }
-      open={visible}
-      onCancel={onClose}
-      width={800}
-      footer={null}
-      className="dark:bg-gray-800"
-    >
-      <Form form={form} layout="vertical">
-        <div className="mb-4">
-          {isEditing ? (
-            <Form.Item name="description" label={<span className="text-gray-700 dark:text-gray-300">Description</span>}>
-              <TextArea 
-                rows={2} 
-                className="dark:bg-gray-700 dark:border-gray-600 dark:text-gray-100" 
-              />
-            </Form.Item>
-          ) : (
-            <p className="text-gray-600 dark:text-gray-400">{phase.description}</p>
-          )}
-        </div>
-
-        {/* Phase Statistics */}
-        <Row gutter={16} className="mb-6">
-          <Col span={6}>
-            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-              <Statistic 
-                title={<span className="text-gray-600 dark:text-gray-400">Progress</span>}
-                value={phase.progress} 
-                suffix="%" 
-                valueStyle={{ color: themeWiseColor('#1890ff', '#40a9ff', themeMode) }}
-              />
-              <Progress 
-                percent={phase.progress} 
-                showInfo={false} 
-                size="small" 
-                strokeColor={themeWiseColor('#1890ff', '#40a9ff', themeMode)}
-                trailColor={themeWiseColor('#f0f0f0', '#4b5563', themeMode)}
-              />
-            </div>
-          </Col>
-          <Col span={6}>
-            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-              <Statistic 
-                title={<span className="text-gray-600 dark:text-gray-400">Tasks</span>}
-                value={phase.completedTaskCount} 
-                suffix={`/ ${phase.taskCount}`}
-                valueStyle={{ color: themeWiseColor('#52c41a', '#34d399', themeMode) }}
-              />
-            </div>
-          </Col>
-          <Col span={6}>
-            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-              <Statistic 
-                title={<span className="text-gray-600 dark:text-gray-400">Milestones</span>}
-                value={phase.completedMilestoneCount} 
-                suffix={`/ ${phase.milestoneCount}`}
-                valueStyle={{ color: themeWiseColor('#722ed1', '#9f7aea', themeMode) }}
-              />
-            </div>
-          </Col>
-          <Col span={6}>
-            <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-              <Statistic 
-                title={<span className="text-gray-600 dark:text-gray-400">Team</span>}
-                value={phase.teamMembers.length} 
-                suffix="members"
-                valueStyle={{ color: themeWiseColor('#fa8c16', '#fbbf24', themeMode) }}
-              />
-            </div>
-          </Col>
-        </Row>
-
-        {/* Timeline */}
-        <Row gutter={16} className="mb-6">
-          <Col span={12}>
-            {isEditing ? (
-              <Form.Item name="startDate" label={<span className="text-gray-700 dark:text-gray-300">Start Date</span>}>
-                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
-              </Form.Item>
-            ) : (
-              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-                <div className="flex items-center gap-2">
-                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
-                  <span className="font-medium text-gray-900 dark:text-gray-100">Start:</span>
-                  <span className="text-gray-600 dark:text-gray-400">{phase.startDate.toLocaleDateString()}</span>
-                </div>
-              </div>
-            )}
-          </Col>
-          <Col span={12}>
-            {isEditing ? (
-              <Form.Item name="endDate" label={<span className="text-gray-700 dark:text-gray-300">End Date</span>}>
-                <DatePicker className="w-full dark:bg-gray-700 dark:border-gray-600" />
-              </Form.Item>
-            ) : (
-              <div className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4">
-                <div className="flex items-center gap-2">
-                  <CalendarOutlined className="text-gray-600 dark:text-gray-400" />
-                  <span className="font-medium text-gray-900 dark:text-gray-100">End:</span>
-                  <span className="text-gray-600 dark:text-gray-400">{phase.endDate.toLocaleDateString()}</span>
-                </div>
-              </div>
-            )}
-          </Col>
-        </Row>
-
-        {isEditing && (
-          <Row gutter={16} className="mb-6">
-            <Col span={12}>
-              <Form.Item name="status" label={<span className="text-gray-700 dark:text-gray-300">Status</span>}>
-                <Select className="dark:bg-gray-700 dark:border-gray-600">
-                  <Select.Option value="not-started">Not Started</Select.Option>
-                  <Select.Option value="in-progress">In Progress</Select.Option>
-                  <Select.Option value="completed">Completed</Select.Option>
-                  <Select.Option value="on-hold">On Hold</Select.Option>
-                </Select>
-              </Form.Item>
-            </Col>
-          </Row>
-        )}
-
-        <Tabs 
-          defaultActiveKey="tasks"
-          className="dark:bg-gray-800"
-          tabBarStyle={{ 
-            borderBottom: `1px solid ${themeWiseColor('#f0f0f0', '#4b5563', themeMode)}`
-          }}
-        >
-          <TabPane tab={`Tasks (${phase.taskCount})`} key="tasks">
-            <List
-              dataSource={phase.tasks}
-              renderItem={(task: PhaseTask) => (
-                <List.Item>
-                  <List.Item.Meta
-                    avatar={getTaskStatusIcon(task.status)}
-                    title={
-                      <div className="flex justify-between items-center">
-                        <Text strong>{task.name}</Text>
-                        <Space>
-                          <Tag color={getPriorityColor(task.priority)}>
-                            {task.priority}
-                          </Tag>
-                          <Progress 
-                            percent={task.progress} 
-                            size="small" 
-                            style={{ width: 100 }}
-                          />
-                        </Space>
-                      </div>
-                    }
-                    description={
-                      <div>
-                        <Text type="secondary">{task.description}</Text>
-                        <div className="mt-2 flex justify-between items-center">
-                          <Space>
-                            <CalendarOutlined />
-                            <Text type="secondary">
-                              {task.startDate.toLocaleDateString()} - {task.endDate.toLocaleDateString()}
-                            </Text>
-                          </Space>
-                          {task.assigneeName && (
-                            <Space>
-                              <TeamOutlined />
-                              <Text type="secondary">{task.assigneeName}</Text>
-                            </Space>
-                          )}
-                        </div>
-                      </div>
-                    }
-                  />
-                </List.Item>
-              )}
-            />
-          </TabPane>
-
-          <TabPane tab={`Milestones (${phase.milestoneCount})`} key="milestones">
-            <Timeline>
-              {phase.milestones.map((milestone: PhaseMilestone) => (
-                <Timeline.Item
-                  key={milestone.id}
-                  color={milestone.isCompleted ? 'green' : milestone.criticalPath ? 'red' : 'blue'}
-                  dot={milestone.isCompleted ? <CheckCircleOutlined /> : <FlagOutlined />}
-                >
-                  <div className="flex justify-between items-start">
-                    <div>
-                      <Text strong>{milestone.name}</Text>
-                      {milestone.criticalPath && (
-                        <Tag color="red" className="ml-2">Critical Path</Tag>
-                      )}
-                      {milestone.description && (
-                        <div className="mt-1">
-                          <Text type="secondary">{milestone.description}</Text>
-                        </div>
-                      )}
-                    </div>
-                    <div className="text-right">
-                      <div>
-                        <CalendarOutlined />
-                        <span className="ml-1">{milestone.dueDate.toLocaleDateString()}</span>
-                      </div>
-                      <Badge 
-                        status={milestone.isCompleted ? 'success' : 'processing'} 
-                        text={milestone.isCompleted ? 'Completed' : 'Pending'}
-                      />
-                    </div>
-                  </div>
-                </Timeline.Item>
-              ))}
-            </Timeline>
-          </TabPane>
-
-          <TabPane tab={`Team (${phase.teamMembers.length})`} key="team">
-            <List
-              dataSource={phase.teamMembers}
-              renderItem={(member: string) => (
-                <List.Item>
-                  <List.Item.Meta
-                    avatar={<Avatar>{member.charAt(0).toUpperCase()}</Avatar>}
-                    title={member}
-                    description={
-                      <Text type="secondary">
-                        {phase.tasks.filter(task => task.assigneeName === member).length} tasks assigned
-                      </Text>
-                    }
-                  />
-                </List.Item>
-              )}
-            />
-          </TabPane>
-        </Tabs>
-      </Form>
-    </Modal>
-  );
-};
-
-export default PhaseModal;

worklenz-frontend/src/components/project-roadmap-gantt/ProjectRoadmapGantt.tsx

@@ -1,333 +0,0 @@
-import React, { useState, useMemo } from 'react';
-import { Gantt, Task, ViewMode } from 'gantt-task-react';
-import { Button, Space, Badge } from 'antd';
-import { CalendarOutlined, TeamOutlined, CheckCircleOutlined } from '@ant-design/icons';
-import { ProjectPhase, ProjectRoadmap, GanttViewOptions, PhaseModalData } from '../../types/project-roadmap.types';
-import PhaseModal from './PhaseModal';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { themeWiseColor } from '../../utils/themeWiseColor';
-import 'gantt-task-react/dist/index.css';
-import './gantt-theme.css';
-
-interface ProjectRoadmapGanttProps {
-  roadmap: ProjectRoadmap;
-  viewOptions?: Partial<GanttViewOptions>;
-  onPhaseUpdate?: (phaseId: string, updates: Partial<ProjectPhase>) => void;
-  onTaskUpdate?: (phaseId: string, taskId: string, updates: any) => void;
-}
-
-const ProjectRoadmapGantt: React.FC<ProjectRoadmapGanttProps> = ({
-  roadmap,
-  viewOptions = {},
-  onPhaseUpdate,
-  onTaskUpdate,
-}) => {
-  const [selectedPhase, setSelectedPhase] = useState<PhaseModalData | null>(null);
-  const [isModalVisible, setIsModalVisible] = useState(false);
-  const [viewMode, setViewMode] = useState<ViewMode>(ViewMode.Month);
-  
-  // Theme support
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-  const isDarkMode = themeMode === 'dark';
-
-  const defaultViewOptions: GanttViewOptions = {
-    viewMode: 'month',
-    showTasks: true,
-    showMilestones: true,
-    groupByPhase: true,
-    ...viewOptions,
-  };
-
-  // Theme-aware colors
-  const ganttColors = useMemo(() => {
-    return {
-      background: themeWiseColor('#ffffff', '#1f2937', themeMode),
-      surface: themeWiseColor('#f8f9fa', '#374151', themeMode),
-      border: themeWiseColor('#e5e7eb', '#4b5563', themeMode),
-      taskBar: themeWiseColor('#3b82f6', '#60a5fa', themeMode),
-      taskBarHover: themeWiseColor('#2563eb', '#93c5fd', themeMode),
-      progressBar: themeWiseColor('#10b981', '#34d399', themeMode),
-      milestone: themeWiseColor('#f59e0b', '#fbbf24', themeMode),
-      criticalPath: themeWiseColor('#ef4444', '#f87171', themeMode),
-      text: {
-        primary: themeWiseColor('#111827', '#f9fafb', themeMode),
-        secondary: themeWiseColor('#6b7280', '#d1d5db', themeMode),
-      },
-      grid: themeWiseColor('#f3f4f6', '#4b5563', themeMode),
-      today: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
-    };
-  }, [themeMode]);
-
-  // Convert phases to Gantt tasks
-  const ganttTasks = useMemo(() => {
-    const tasks: Task[] = [];
-
-    roadmap.phases.forEach((phase, phaseIndex) => {
-      // Add phase as main task with theme-aware colors
-      const phaseTask: Task = {
-        id: phase.id,
-        name: phase.name,
-        start: phase.startDate,
-        end: phase.endDate,
-        progress: phase.progress,
-        type: 'project',
-        styles: {
-          progressColor: themeWiseColor(phase.color, phase.color, themeMode),
-          progressSelectedColor: themeWiseColor(phase.color, phase.color, themeMode),
-          backgroundColor: themeWiseColor(`${phase.color}20`, `${phase.color}30`, themeMode),
-        },
-      };
-      tasks.push(phaseTask);
-
-      // Add phase tasks if enabled
-      if (defaultViewOptions.showTasks) {
-        phase.tasks.forEach((task) => {
-          const ganttTask: Task = {
-            id: task.id,
-            name: task.name,
-            start: task.startDate,
-            end: task.endDate,
-            progress: task.progress,
-            type: 'task',
-            project: phase.id,
-            dependencies: task.dependencies,
-            styles: {
-              progressColor: ganttColors.taskBar,
-              progressSelectedColor: ganttColors.taskBarHover,
-              backgroundColor: themeWiseColor('rgba(59, 130, 246, 0.1)', 'rgba(96, 165, 250, 0.2)', themeMode),
-            },
-          };
-          tasks.push(ganttTask);
-        });
-      }
-
-      // Add milestones if enabled
-      if (defaultViewOptions.showMilestones) {
-        phase.milestones.forEach((milestone) => {
-          const milestoneTask: Task = {
-            id: milestone.id,
-            name: milestone.name,
-            start: milestone.dueDate,
-            end: milestone.dueDate,
-            progress: milestone.isCompleted ? 100 : 0,
-            type: 'milestone',
-            project: phase.id,
-            styles: {
-              progressColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
-              progressSelectedColor: milestone.criticalPath ? ganttColors.criticalPath : ganttColors.progressBar,
-              backgroundColor: milestone.criticalPath ? 
-                themeWiseColor('rgba(239, 68, 68, 0.1)', 'rgba(248, 113, 113, 0.2)', themeMode) :
-                themeWiseColor('rgba(16, 185, 129, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode),
-            },
-          };
-          tasks.push(milestoneTask);
-        });
-      }
-    });
-
-    return tasks;
-  }, [roadmap.phases, defaultViewOptions, ganttColors, themeMode]);
-
-  const handlePhaseClick = (phase: ProjectPhase) => {
-    const taskCount = phase.tasks.length;
-    const completedTaskCount = phase.tasks.filter(task => task.status === 'done').length;
-    const milestoneCount = phase.milestones.length;
-    const completedMilestoneCount = phase.milestones.filter(m => m.isCompleted).length;
-    const teamMembers = [...new Set(phase.tasks.map(task => task.assigneeName).filter(Boolean))];
-
-    const phaseModalData: PhaseModalData = {
-      ...phase,
-      taskCount,
-      completedTaskCount,
-      milestoneCount,
-      completedMilestoneCount,
-      teamMembers,
-    };
-
-    setSelectedPhase(phaseModalData);
-    setIsModalVisible(true);
-  };
-
-  const handleTaskClick = (task: Task) => {
-    // Find the phase this task belongs to
-    const phase = roadmap.phases.find(p => 
-      p.tasks.some(t => t.id === task.id) || p.milestones.some(m => m.id === task.id)
-    );
-    
-    if (phase) {
-      handlePhaseClick(phase);
-    }
-  };
-
-  const handleDateChange = (task: Task) => {
-    const phase = roadmap.phases.find(p => p.id === task.id);
-    if (phase && onPhaseUpdate) {
-      onPhaseUpdate(phase.id, {
-        startDate: task.start,
-        endDate: task.end,
-      });
-    } else if (onTaskUpdate) {
-      const parentPhase = roadmap.phases.find(p => 
-        p.tasks.some(t => t.id === task.id)
-      );
-      if (parentPhase) {
-        onTaskUpdate(parentPhase.id, task.id, {
-          startDate: task.start,
-          endDate: task.end,
-        });
-      }
-    }
-  };
-
-  const handleProgressChange = (task: Task) => {
-    const phase = roadmap.phases.find(p => p.id === task.id);
-    if (phase && onPhaseUpdate) {
-      onPhaseUpdate(phase.id, { progress: task.progress });
-    } else if (onTaskUpdate) {
-      const parentPhase = roadmap.phases.find(p => 
-        p.tasks.some(t => t.id === task.id)
-      );
-      if (parentPhase) {
-        onTaskUpdate(parentPhase.id, task.id, { progress: task.progress });
-      }
-    }
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'completed': return '#52c41a';
-      case 'in-progress': return '#1890ff';
-      case 'on-hold': return '#faad14';
-      default: return '#d9d9d9';
-    }
-  };
-
-  const columnWidth = viewMode === ViewMode.Year ? 350 : 
-                    viewMode === ViewMode.Month ? 300 : 
-                    viewMode === ViewMode.Week ? 250 : 60;
-
-  return (
-    <div className="project-roadmap-gantt w-full">
-      {/* Header */}
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
-        <div className="p-6">
-          <div className="flex justify-between items-center mb-4">
-            <div>
-              <h3 className="text-xl font-semibold text-gray-900 dark:text-gray-100 mb-2">
-                {roadmap.name}
-              </h3>
-              {roadmap.description && (
-                <p className="text-gray-600 dark:text-gray-400 mb-0">
-                  {roadmap.description}
-                </p>
-              )}
-            </div>
-            <Space>
-              <Button 
-                type={viewMode === ViewMode.Week ? 'primary' : 'default'}
-                onClick={() => setViewMode(ViewMode.Week)}
-                className="dark:border-gray-600 dark:text-gray-300"
-              >
-                Week
-              </Button>
-              <Button 
-                type={viewMode === ViewMode.Month ? 'primary' : 'default'}
-                onClick={() => setViewMode(ViewMode.Month)}
-                className="dark:border-gray-600 dark:text-gray-300"
-              >
-                Month
-              </Button>
-              <Button 
-                type={viewMode === ViewMode.Year ? 'primary' : 'default'}
-                onClick={() => setViewMode(ViewMode.Year)}
-                className="dark:border-gray-600 dark:text-gray-300"
-              >
-                Year
-              </Button>
-            </Space>
-          </div>
-
-          {/* Phase Overview */}
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4 mb-4">
-            {roadmap.phases.map((phase) => (
-              <div 
-                key={phase.id}
-                className="bg-gray-50 dark:bg-gray-700 border border-gray-200 dark:border-gray-600 rounded-lg p-4 cursor-pointer hover:shadow-md hover:bg-gray-100 dark:hover:bg-gray-600 transition-all duration-200"
-                onClick={() => handlePhaseClick(phase)}
-              >
-                <div className="flex items-center justify-between mb-3">
-                  <Badge 
-                    color={getStatusColor(phase.status)} 
-                    text={
-                      <span className="font-medium text-gray-900 dark:text-gray-100">
-                        {phase.name}
-                      </span>
-                    }
-                  />
-                </div>
-                <div className="space-y-2 text-sm">
-                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                    <CalendarOutlined className="w-4 h-4" />
-                    <span>{phase.startDate.toLocaleDateString()} - {phase.endDate.toLocaleDateString()}</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                    <TeamOutlined className="w-4 h-4" />
-                    <span>{phase.tasks.length} tasks</span>
-                  </div>
-                  <div className="flex items-center gap-2 text-gray-600 dark:text-gray-400">
-                    <CheckCircleOutlined className="w-4 h-4" />
-                    <span>{phase.progress}% complete</span>
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-
-      {/* Gantt Chart */}
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm">
-        <div className="p-4">
-          <div className="w-full overflow-x-auto">
-            <div 
-              className="gantt-container"
-              style={{ 
-                '--gantt-background': ganttColors.background,
-                '--gantt-grid': ganttColors.grid,
-                '--gantt-text': ganttColors.text.primary,
-                '--gantt-border': ganttColors.border,
-              } as React.CSSProperties}
-            >
-              <Gantt
-                tasks={ganttTasks}
-                viewMode={viewMode}
-                onDateChange={handleDateChange}
-                onProgressChange={handleProgressChange}
-                onDoubleClick={handleTaskClick}
-                listCellWidth=""
-                columnWidth={columnWidth}
-                todayColor={ganttColors.today}
-                projectProgressColor={ganttColors.progressBar}
-                projectBackgroundColor={themeWiseColor('rgba(82, 196, 26, 0.1)', 'rgba(52, 211, 153, 0.2)', themeMode)}
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-
-      {/* Phase Modal */}
-      <PhaseModal
-        visible={isModalVisible}
-        phase={selectedPhase}
-        onClose={() => setIsModalVisible(false)}
-        onUpdate={(updates) => {
-          if (selectedPhase && onPhaseUpdate) {
-            onPhaseUpdate(selectedPhase.id, updates);
-          }
-        }}
-      />
-    </div>
-  );
-};
-
-export default ProjectRoadmapGantt;

worklenz-frontend/src/components/project-roadmap-gantt/RoadmapDemo.tsx

@@ -1,112 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Space, message } from 'antd';
-import ProjectRoadmapGantt from './ProjectRoadmapGantt';
-import { sampleProjectRoadmap } from './sample-data';
-import { ProjectPhase, ProjectRoadmap } from '../../types/project-roadmap.types';
-import { useAppSelector } from '../../hooks/useAppSelector';
-
-const RoadmapDemo: React.FC = () => {
-  const [roadmap, setRoadmap] = useState<ProjectRoadmap>(sampleProjectRoadmap);
-  const themeMode = useAppSelector(state => state.themeReducer.mode);
-
-  const handlePhaseUpdate = (phaseId: string, updates: Partial<ProjectPhase>) => {
-    setRoadmap(prevRoadmap => ({
-      ...prevRoadmap,
-      phases: prevRoadmap.phases.map(phase => 
-        phase.id === phaseId 
-          ? { ...phase, ...updates }
-          : phase
-      )
-    }));
-    
-    message.success('Phase updated successfully!');
-  };
-
-  const handleTaskUpdate = (phaseId: string, taskId: string, updates: any) => {
-    setRoadmap(prevRoadmap => ({
-      ...prevRoadmap,
-      phases: prevRoadmap.phases.map(phase => 
-        phase.id === phaseId 
-          ? {
-              ...phase,
-              tasks: phase.tasks.map(task => 
-                task.id === taskId 
-                  ? { ...task, ...updates }
-                  : task
-              )
-            }
-          : phase
-      )
-    }));
-    
-    message.success('Task updated successfully!');
-  };
-
-  const resetToSampleData = () => {
-    setRoadmap(sampleProjectRoadmap);
-    message.info('Roadmap reset to sample data');
-  };
-
-  return (
-    <div className="roadmap-demo p-6 bg-gray-50 dark:bg-gray-900 min-h-screen">
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mb-4">
-        <div className="p-6">
-          <div className="flex justify-between items-center">
-            <div>
-              <h2 className="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">
-                Project Roadmap Gantt Chart Demo
-              </h2>
-              <p className="text-gray-600 dark:text-gray-400 mb-0">
-                Interactive Gantt chart showing project phases as milestones/epics. 
-                Click on any phase card or Gantt bar to view detailed information in a modal.
-              </p>
-            </div>
-            <Space>
-              <Button 
-                onClick={resetToSampleData}
-                className="dark:border-gray-600 dark:text-gray-300 dark:hover:bg-gray-700"
-              >
-                Reset to Sample Data
-              </Button>
-            </Space>
-          </div>
-        </div>
-      </div>
-
-      <ProjectRoadmapGantt
-        roadmap={roadmap}
-        viewOptions={{
-          viewMode: 'month',
-          showTasks: true,
-          showMilestones: true,
-          groupByPhase: true,
-        }}
-        onPhaseUpdate={handlePhaseUpdate}
-        onTaskUpdate={handleTaskUpdate}
-      />
-
-      <div className="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-sm mt-4">
-        <div className="p-6">
-          <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 mb-3">
-            Features Demonstrated:
-          </h3>
-          <ul className="space-y-2 text-gray-700 dark:text-gray-300">
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Phase-based Grouping:</strong> Projects organized by phases (Planning, Development, Testing, Deployment)</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Interactive Phase Cards:</strong> Click on phase cards for detailed view</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Gantt Chart Visualization:</strong> Timeline view with tasks, milestones, and dependencies</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Modal Details:</strong> Comprehensive phase information with tasks, milestones, and team members</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Progress Tracking:</strong> Visual progress indicators and completion statistics</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Multiple View Modes:</strong> Week, Month, and Year timeline views</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Task Management:</strong> Task assignments, priorities, and status tracking</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Milestone Tracking:</strong> Critical path milestones and completion status</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Team Overview:</strong> Team member assignments and workload distribution</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Editable Fields:</strong> In-modal editing for phase attributes (name, description, dates, status)</li>
-            <li>• <strong className="text-gray-900 dark:text-gray-100">Theme Support:</strong> Automatic light/dark theme adaptation with consistent styling</li>
-          </ul>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default RoadmapDemo;

worklenz-frontend/src/components/project-roadmap-gantt/gantt-theme.css

@@ -1,221 +0,0 @@
-/* Custom Gantt Chart Theme Overrides */
-
-/* Light theme styles */
-.gantt-container {
-  font-family: inherit;
-}
-
-.gantt-container .gantt-header {
-  background-color: var(--gantt-background, #ffffff);
-  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
-  color: var(--gantt-text, #111827);
-}
-
-.gantt-container .gantt-task-list-wrapper {
-  background-color: var(--gantt-background, #ffffff);
-  border-right: 1px solid var(--gantt-border, #e5e7eb);
-}
-
-.gantt-container .gantt-task-list-table {
-  background-color: var(--gantt-background, #ffffff);
-}
-
-.gantt-container .gantt-task-list-table-row {
-  color: var(--gantt-text, #111827);
-  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
-}
-
-.gantt-container .gantt-task-list-table-row:hover {
-  background-color: var(--gantt-grid, #f3f4f6);
-}
-
-.gantt-container .gantt-gantt {
-  background-color: var(--gantt-background, #ffffff);
-}
-
-.gantt-container .gantt-vertical-container {
-  background-color: var(--gantt-background, #ffffff);
-}
-
-.gantt-container .gantt-horizontal-container {
-  background-color: var(--gantt-background, #ffffff);
-}
-
-.gantt-container .gantt-calendar {
-  background-color: var(--gantt-background, #ffffff);
-  border-bottom: 1px solid var(--gantt-border, #e5e7eb);
-}
-
-.gantt-container .gantt-calendar-row {
-  color: var(--gantt-text, #111827);
-  background-color: var(--gantt-background, #ffffff);
-  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
-}
-
-.gantt-container .gantt-grid-body {
-  background-color: var(--gantt-background, #ffffff);
-}
-
-.gantt-container .gantt-grid-row {
-  border-bottom: 1px solid var(--gantt-grid, #f3f4f6);
-}
-
-.gantt-container .gantt-grid-row-line {
-  border-left: 1px solid var(--gantt-grid, #f3f4f6);
-}
-
-/* Dark theme overrides */
-html.dark .gantt-container .gantt-header {
-  background-color: #1f2937;
-  border-bottom-color: #4b5563;
-  color: #f9fafb;
-}
-
-html.dark .gantt-container .gantt-task-list-wrapper {
-  background-color: #1f2937;
-  border-right-color: #4b5563;
-}
-
-html.dark .gantt-container .gantt-task-list-table {
-  background-color: #1f2937;
-}
-
-html.dark .gantt-container .gantt-task-list-table-row {
-  color: #f9fafb;
-  border-bottom-color: #4b5563;
-}
-
-html.dark .gantt-container .gantt-task-list-table-row:hover {
-  background-color: #374151;
-}
-
-html.dark .gantt-container .gantt-gantt {
-  background-color: #1f2937;
-}
-
-html.dark .gantt-container .gantt-vertical-container {
-  background-color: #1f2937;
-}
-
-html.dark .gantt-container .gantt-horizontal-container {
-  background-color: #1f2937;
-}
-
-html.dark .gantt-container .gantt-calendar {
-  background-color: #1f2937;
-  border-bottom-color: #4b5563;
-}
-
-html.dark .gantt-container .gantt-calendar-row {
-  color: #f9fafb;
-  background-color: #1f2937;
-  border-bottom-color: #4b5563;
-}
-
-html.dark .gantt-container .gantt-grid-body {
-  background-color: #1f2937;
-}
-
-html.dark .gantt-container .gantt-grid-row {
-  border-bottom-color: #4b5563;
-}
-
-html.dark .gantt-container .gantt-grid-row-line {
-  border-left-color: #4b5563;
-}
-
-/* Tooltip theming */
-.gantt-container .gantt-tooltip {
-  background-color: var(--gantt-background, #ffffff);
-  border: 1px solid var(--gantt-border, #e5e7eb);
-  color: var(--gantt-text, #111827);
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
-}
-
-html.dark .gantt-container .gantt-tooltip {
-  background-color: #374151;
-  border-color: #4b5563;
-  color: #f9fafb;
-  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
-}
-
-/* Task bar styling improvements */
-.gantt-container .gantt-task-progress {
-  border-radius: 2px;
-}
-
-.gantt-container .gantt-task-background {
-  border-radius: 4px;
-  border: 1px solid var(--gantt-border, #e5e7eb);
-}
-
-html.dark .gantt-container .gantt-task-background {
-  border-color: #4b5563;
-}
-
-/* Milestone styling */
-.gantt-container .gantt-milestone {
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
-}
-
-html.dark .gantt-container .gantt-milestone {
-  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-}
-
-/* Selection and hover states */
-.gantt-container .gantt-task:hover .gantt-task-background {
-  opacity: 0.9;
-  transform: translateY(-1px);
-  transition: all 0.2s ease;
-}
-
-.gantt-container .gantt-task-selected .gantt-task-background {
-  box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3);
-}
-
-html.dark .gantt-container .gantt-task-selected .gantt-task-background {
-  box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.3);
-}
-
-/* Responsive improvements */
-@media (max-width: 768px) {
-  .gantt-container {
-    font-size: 14px;
-  }
-  
-  .gantt-container .gantt-task-list-wrapper {
-    min-width: 200px;
-  }
-}
-
-/* Scrollbar theming */
-.gantt-container ::-webkit-scrollbar {
-  width: 8px;
-  height: 8px;
-}
-
-.gantt-container ::-webkit-scrollbar-track {
-  background: var(--gantt-grid, #f3f4f6);
-  border-radius: 4px;
-}
-
-.gantt-container ::-webkit-scrollbar-thumb {
-  background: var(--gantt-border, #e5e7eb);
-  border-radius: 4px;
-}
-
-.gantt-container ::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}
-
-html.dark .gantt-container ::-webkit-scrollbar-track {
-  background: #4b5563;
-}
-
-html.dark .gantt-container ::-webkit-scrollbar-thumb {
-  background: #6b7280;
-}
-
-html.dark .gantt-container ::-webkit-scrollbar-thumb:hover {
-  background: #9ca3af;
-}

worklenz-frontend/src/components/project-roadmap-gantt/index.ts

@@ -1,5 +0,0 @@
-export { default as ProjectRoadmapGantt } from './ProjectRoadmapGantt';
-export { default as PhaseModal } from './PhaseModal';
-export { default as RoadmapDemo } from './RoadmapDemo';
-export { sampleProjectRoadmap } from './sample-data';
-export * from '../../types/project-roadmap.types';

worklenz-frontend/src/components/project-roadmap-gantt/sample-data.ts

@@ -1,317 +0,0 @@
-import { ProjectRoadmap, ProjectPhase, PhaseTask, PhaseMilestone } from '../../types/project-roadmap.types';
-
-// Sample tasks for Planning Phase
-const planningTasks: PhaseTask[] = [
-  {
-    id: 'task-planning-1',
-    name: 'Project Requirements Analysis',
-    description: 'Gather and analyze project requirements from stakeholders',
-    startDate: new Date(2024, 11, 1), // December 1, 2024
-    endDate: new Date(2024, 11, 5),
-    progress: 100,
-    assigneeId: 'user-1',
-    assigneeName: 'Alice Johnson',
-    priority: 'high',
-    status: 'done',
-  },
-  {
-    id: 'task-planning-2',
-    name: 'Technical Architecture Design',
-    description: 'Design the technical architecture and system components',
-    startDate: new Date(2024, 11, 6),
-    endDate: new Date(2024, 11, 12),
-    progress: 75,
-    assigneeId: 'user-2',
-    assigneeName: 'Bob Smith',
-    priority: 'high',
-    status: 'in-progress',
-  },
-  {
-    id: 'task-planning-3',
-    name: 'Resource Allocation Planning',
-    description: 'Plan and allocate team resources for the project',
-    startDate: new Date(2024, 11, 8),
-    endDate: new Date(2024, 11, 15),
-    progress: 50,
-    assigneeId: 'user-3',
-    assigneeName: 'Carol Davis',
-    priority: 'medium',
-    status: 'in-progress',
-    dependencies: ['task-planning-1'],
-  }
-];
-
-// Sample milestones for Planning Phase
-const planningMilestones: PhaseMilestone[] = [
-  {
-    id: 'milestone-planning-1',
-    name: 'Requirements Approved',
-    description: 'All project requirements have been reviewed and approved by stakeholders',
-    dueDate: new Date(2024, 11, 5),
-    isCompleted: true,
-    criticalPath: true,
-  },
-  {
-    id: 'milestone-planning-2',
-    name: 'Architecture Review Complete',
-    description: 'Technical architecture has been reviewed and approved',
-    dueDate: new Date(2024, 11, 15),
-    isCompleted: false,
-    criticalPath: true,
-  }
-];
-
-// Sample tasks for Development Phase
-const developmentTasks: PhaseTask[] = [
-  {
-    id: 'task-dev-1',
-    name: 'Frontend Component Development',
-    description: 'Develop core frontend components using React',
-    startDate: new Date(2024, 11, 16),
-    endDate: new Date(2025, 0, 31), // January 31, 2025
-    progress: 30,
-    assigneeId: 'user-4',
-    assigneeName: 'David Wilson',
-    priority: 'high',
-    status: 'in-progress',
-    dependencies: ['task-planning-2'],
-  },
-  {
-    id: 'task-dev-2',
-    name: 'Backend API Development',
-    description: 'Develop REST APIs and database models',
-    startDate: new Date(2024, 11, 16),
-    endDate: new Date(2025, 0, 25),
-    progress: 45,
-    assigneeId: 'user-5',
-    assigneeName: 'Eva Brown',
-    priority: 'high',
-    status: 'in-progress',
-    dependencies: ['task-planning-2'],
-  },
-  {
-    id: 'task-dev-3',
-    name: 'Database Setup and Migration',
-    description: 'Set up production database and create migration scripts',
-    startDate: new Date(2024, 11, 20),
-    endDate: new Date(2025, 0, 15),
-    progress: 80,
-    assigneeId: 'user-6',
-    assigneeName: 'Frank Miller',
-    priority: 'medium',
-    status: 'in-progress',
-  }
-];
-
-// Sample milestones for Development Phase
-const developmentMilestones: PhaseMilestone[] = [
-  {
-    id: 'milestone-dev-1',
-    name: 'Core Components Complete',
-    description: 'All core frontend components have been developed and tested',
-    dueDate: new Date(2025, 0, 20),
-    isCompleted: false,
-    criticalPath: false,
-  },
-  {
-    id: 'milestone-dev-2',
-    name: 'API Development Complete',
-    description: 'All backend APIs are developed and documented',
-    dueDate: new Date(2025, 0, 25),
-    isCompleted: false,
-    criticalPath: true,
-  }
-];
-
-// Sample tasks for Testing Phase
-const testingTasks: PhaseTask[] = [
-  {
-    id: 'task-test-1',
-    name: 'Unit Testing Implementation',
-    description: 'Write and execute comprehensive unit tests',
-    startDate: new Date(2025, 1, 1), // February 1, 2025
-    endDate: new Date(2025, 1, 15),
-    progress: 0,
-    assigneeId: 'user-7',
-    assigneeName: 'Grace Lee',
-    priority: 'high',
-    status: 'todo',
-    dependencies: ['task-dev-1', 'task-dev-2'],
-  },
-  {
-    id: 'task-test-2',
-    name: 'Integration Testing',
-    description: 'Perform integration testing between frontend and backend',
-    startDate: new Date(2025, 1, 10),
-    endDate: new Date(2025, 1, 25),
-    progress: 0,
-    assigneeId: 'user-8',
-    assigneeName: 'Henry Clark',
-    priority: 'high',
-    status: 'todo',
-    dependencies: ['task-test-1'],
-  },
-  {
-    id: 'task-test-3',
-    name: 'User Acceptance Testing',
-    description: 'Conduct user acceptance testing with stakeholders',
-    startDate: new Date(2025, 1, 20),
-    endDate: new Date(2025, 2, 5), // March 5, 2025
-    progress: 0,
-    assigneeId: 'user-9',
-    assigneeName: 'Ivy Taylor',
-    priority: 'medium',
-    status: 'todo',
-    dependencies: ['task-test-2'],
-  }
-];
-
-// Sample milestones for Testing Phase
-const testingMilestones: PhaseMilestone[] = [
-  {
-    id: 'milestone-test-1',
-    name: 'All Tests Passing',
-    description: 'All unit and integration tests are passing',
-    dueDate: new Date(2025, 1, 25),
-    isCompleted: false,
-    criticalPath: true,
-  },
-  {
-    id: 'milestone-test-2',
-    name: 'UAT Sign-off',
-    description: 'User acceptance testing completed and signed off',
-    dueDate: new Date(2025, 2, 5),
-    isCompleted: false,
-    criticalPath: true,
-  }
-];
-
-// Sample tasks for Deployment Phase
-const deploymentTasks: PhaseTask[] = [
-  {
-    id: 'task-deploy-1',
-    name: 'Production Environment Setup',
-    description: 'Configure and set up production environment',
-    startDate: new Date(2025, 2, 6), // March 6, 2025
-    endDate: new Date(2025, 2, 12),
-    progress: 0,
-    assigneeId: 'user-10',
-    assigneeName: 'Jack Anderson',
-    priority: 'high',
-    status: 'todo',
-    dependencies: ['task-test-3'],
-  },
-  {
-    id: 'task-deploy-2',
-    name: 'Application Deployment',
-    description: 'Deploy application to production environment',
-    startDate: new Date(2025, 2, 13),
-    endDate: new Date(2025, 2, 15),
-    progress: 0,
-    assigneeId: 'user-11',
-    assigneeName: 'Kelly White',
-    priority: 'high',
-    status: 'todo',
-    dependencies: ['task-deploy-1'],
-  },
-  {
-    id: 'task-deploy-3',
-    name: 'Post-Deployment Monitoring',
-    description: 'Monitor application performance post-deployment',
-    startDate: new Date(2025, 2, 16),
-    endDate: new Date(2025, 2, 20),
-    progress: 0,
-    assigneeId: 'user-12',
-    assigneeName: 'Liam Garcia',
-    priority: 'medium',
-    status: 'todo',
-    dependencies: ['task-deploy-2'],
-  }
-];
-
-// Sample milestones for Deployment Phase
-const deploymentMilestones: PhaseMilestone[] = [
-  {
-    id: 'milestone-deploy-1',
-    name: 'Production Go-Live',
-    description: 'Application is live in production environment',
-    dueDate: new Date(2025, 2, 15),
-    isCompleted: false,
-    criticalPath: true,
-  },
-  {
-    id: 'milestone-deploy-2',
-    name: 'Project Handover',
-    description: 'Project handed over to maintenance team',
-    dueDate: new Date(2025, 2, 20),
-    isCompleted: false,
-    criticalPath: false,
-  }
-];
-
-// Sample project phases
-const samplePhases: ProjectPhase[] = [
-  {
-    id: 'phase-planning',
-    name: 'Planning & Analysis',
-    description: 'Initial project planning, requirements gathering, and technical analysis',
-    startDate: new Date(2024, 11, 1),
-    endDate: new Date(2024, 11, 15),
-    progress: 75,
-    color: '#1890ff',
-    status: 'in-progress',
-    tasks: planningTasks,
-    milestones: planningMilestones,
-  },
-  {
-    id: 'phase-development',
-    name: 'Development',
-    description: 'Core development of frontend, backend, and database components',
-    startDate: new Date(2024, 11, 16),
-    endDate: new Date(2025, 0, 31),
-    progress: 40,
-    color: '#52c41a',
-    status: 'in-progress',
-    tasks: developmentTasks,
-    milestones: developmentMilestones,
-  },
-  {
-    id: 'phase-testing',
-    name: 'Testing & QA',
-    description: 'Comprehensive testing including unit, integration, and user acceptance testing',
-    startDate: new Date(2025, 1, 1),
-    endDate: new Date(2025, 2, 5),
-    progress: 0,
-    color: '#faad14',
-    status: 'not-started',
-    tasks: testingTasks,
-    milestones: testingMilestones,
-  },
-  {
-    id: 'phase-deployment',
-    name: 'Deployment & Launch',
-    description: 'Production deployment and project launch activities',
-    startDate: new Date(2025, 2, 6),
-    endDate: new Date(2025, 2, 20),
-    progress: 0,
-    color: '#722ed1',
-    status: 'not-started',
-    tasks: deploymentTasks,
-    milestones: deploymentMilestones,
-  }
-];
-
-// Sample project roadmap
-export const sampleProjectRoadmap: ProjectRoadmap = {
-  id: 'roadmap-sample-project',
-  projectId: 'project-web-platform',
-  name: 'Web Platform Development Roadmap',
-  description: 'Comprehensive roadmap for developing a new web-based platform with modern technologies and agile methodologies',
-  startDate: new Date(2024, 11, 1),
-  endDate: new Date(2025, 2, 20),
-  phases: samplePhases,
-  createdAt: new Date(2024, 10, 15),
-  updatedAt: new Date(2024, 11, 1),
-};
-
-export default sampleProjectRoadmap;

worklenz-frontend/src/components/task-list-v2/GroupProgressBar.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { useTranslation } from 'react-i18next';
+import { Tooltip } from 'antd';
 
 interface GroupProgressBarProps {
   todoProgress: number;
@@ -15,24 +16,34 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
   groupType
 }) => {
   const { t } = useTranslation('task-management');
+  console.log(todoProgress, doingProgress, doneProgress);
   
   // Only show for priority and phase grouping
   if (groupType !== 'priority' && groupType !== 'phase') {
     return null;
   }
 
-  const total = todoProgress + doingProgress + doneProgress;
+  const total = (todoProgress || 0) + (doingProgress || 0) + (doneProgress || 0);
   
   // Don't show if no progress values exist
   if (total === 0) {
     return null;
   }
 
+  // Tooltip content with all values in rows
+  const tooltipContent = (
+    <div>
+      <div>{t('todo')}: {todoProgress || 0}%</div>
+      <div>{t('inProgress')}: {doingProgress || 0}%</div>
+      <div>{t('done')}: {doneProgress || 0}%</div>
+    </div>
+  );
+
   return (
     <div className="flex items-center gap-2">
       {/* Compact progress text */}
       <span className="text-xs text-gray-600 dark:text-gray-400 whitespace-nowrap font-medium">
-        {doneProgress}% {t('done')}
+        {doneProgress || 0}% {t('done')}
       </span>
       
       {/* Compact progress bar */}
@@ -40,27 +51,30 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
         <div className="h-full flex">
           {/* Todo section - light green */}
           {todoProgress > 0 && (
-            <div
+            <Tooltip title={tooltipContent} placement="top">
-              className="bg-green-200 dark:bg-green-800 transition-all duration-300"
+              <div
-              style={{ width: `${(todoProgress / total) * 100}%` }}
+                className="bg-green-200 dark:bg-green-800 transition-all duration-300"
-              title={`${t('todo')}: ${todoProgress}%`}
+                style={{ width: `${(todoProgress / total) * 100}%` }}
-            />
+              />
+            </Tooltip>
           )}
           {/* Doing section - medium green */}
           {doingProgress > 0 && (
-            <div
+            <Tooltip title={tooltipContent} placement="top">
-              className="bg-green-400 dark:bg-green-600 transition-all duration-300"
+              <div
-              style={{ width: `${(doingProgress / total) * 100}%` }}
+                className="bg-green-400 dark:bg-green-600 transition-all duration-300"
-              title={`${t('inProgress')}: ${doingProgress}%`}
+                style={{ width: `${(doingProgress / total) * 100}%` }}
-            />
+              />
+            </Tooltip>
           )}
           {/* Done section - dark green */}
           {doneProgress > 0 && (
-            <div
+            <Tooltip title={tooltipContent} placement="top">
-              className="bg-green-600 dark:bg-green-400 transition-all duration-300"
+              <div
-              style={{ width: `${(doneProgress / total) * 100}%` }}
+                className="bg-green-600 dark:bg-green-400 transition-all duration-300"
-              title={`${t('done')}: ${doneProgress}%`}
+                style={{ width: `${(doneProgress / total) * 100}%` }}
-            />
+              />
+            </Tooltip>
           )}
         </div>
       </div>
@@ -68,22 +82,25 @@ const GroupProgressBar: React.FC<GroupProgressBarProps> = ({
       {/* Small legend dots with better spacing */}
       <div className="flex items-center gap-1">
         {todoProgress > 0 && (
-          <div 
+          <Tooltip title={tooltipContent} placement="top">
-            className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
+            <div 
-            title={`${t('todo')}: ${todoProgress}%`}
+              className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
-          />
+            />
+          </Tooltip>
         )}
         {doingProgress > 0 && (
-          <div 
+          <Tooltip title={tooltipContent} placement="top">
-            className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
+            <div 
-            title={`${t('inProgress')}: ${doingProgress}%`}
+              className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
-          />
+            />
+          </Tooltip>
         )}
         {doneProgress > 0 && (
-          <div 
+          <Tooltip title={tooltipContent} placement="top">
-            className="w-1.5 h-1.5 bg-green-600 dark:bg-green-400 rounded-full" 
+            <div 
-            title={`${t('done')}: ${doneProgress}%`}
+              className="w-1.5 h-1.5 bg-green-600 dark:bg-green-400 rounded-full" 
-          />
+            />
+          </Tooltip>
         )}
       </div>
     </div>

worklenz-frontend/src/components/task-list-v2/TaskGroupHeader.tsx

@@ -1,15 +1,29 @@
 import React, { useMemo, useCallback, useState } from 'react';
 import { useDroppable } from '@dnd-kit/core';
 // @ts-ignore: Heroicons module types
-import { ChevronDownIcon, ChevronRightIcon, EllipsisHorizontalIcon, PencilIcon, ArrowPathIcon } from '@heroicons/react/24/outline';
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  EllipsisHorizontalIcon,
+  PencilIcon,
+  ArrowPathIcon,
+} from '@heroicons/react/24/outline';
 import { Checkbox, Dropdown, Menu, Input, Modal, Badge, Flex } from 'antd';
 import GroupProgressBar from './GroupProgressBar';
 import { useTranslation } from 'react-i18next';
 import { getContrastColor } from '@/utils/colorUtils';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { selectSelectedTaskIds, selectTask, deselectTask } from '@/features/task-management/selection.slice';
+import {
-import { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice';
+  selectSelectedTaskIds,
+  selectTask,
+  deselectTask,
+} from '@/features/task-management/selection.slice';
+import {
+  selectGroups,
+  fetchTasksV3,
+  selectAllTasksArray,
+} from '@/features/task-management/task-management.slice';
 import { selectCurrentGrouping } from '@/features/task-management/grouping.slice';
 import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
 import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service';
@@ -38,7 +52,12 @@ interface TaskGroupHeaderProps {
   projectId: string;
 }
 
-const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, onToggle, projectId }) => {
+const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({
+  group,
+  isCollapsed,
+  onToggle,
+  projectId,
+}) => {
   const { t } = useTranslation('task-management');
   const dispatch = useAppDispatch();
   const selectedTaskIds = useAppSelector(selectSelectedTaskIds);
@@ -48,14 +67,14 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
   const { statusCategories, status: statusList } = useAppSelector(state => state.taskStatusReducer);
   const { trackMixpanelEvent } = useMixpanelTracking();
   const { isOwnerOrAdmin } = useAuthService();
-  
+
   const [dropdownVisible, setDropdownVisible] = useState(false);
 
   const [isRenaming, setIsRenaming] = useState(false);
   const [isChangingCategory, setIsChangingCategory] = useState(false);
   const [isEditingName, setIsEditingName] = useState(false);
   const [editingName, setEditingName] = useState(group.name);
-  
+
   const headerBackgroundColor = group.color || '#F0F0F0'; // Default light gray if no color
   const headerTextColor = getContrastColor(headerBackgroundColor);
 
@@ -85,53 +104,79 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     // If we're grouping by status, show progress based on task completion
     if (currentGrouping === 'status') {
       // For status grouping, calculate based on task progress values
-      const progressStats = tasksInCurrentGroup.reduce((acc, task) => {
+      const progressStats = tasksInCurrentGroup.reduce(
-        const progress = task.progress || 0;
+        (acc, task) => {
-        if (progress === 0) {
+          const progress = task.progress || 0;
-          acc.todo += 1;
+          if (progress === 0) {
-        } else if (progress === 100) {
+            acc.todo += 1;
-          acc.done += 1;
+          } else if (progress === 100) {
-        } else {
+            acc.done += 1;
-          acc.doing += 1;
+          } else {
-        }
+            acc.doing += 1;
-        return acc;
+          }
-      }, { todo: 0, doing: 0, done: 0 });
+          return acc;
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
-      
+
       return {
-        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
-        doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0,
+        doingProgress:
-        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0,
+          totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) || 0 : 0,
+        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) || 0 : 0,
       };
     } else {
       // For priority/phase grouping, show progress based on status distribution
       // Use a simplified approach based on status names and common patterns
-      const statusCounts = tasksInCurrentGroup.reduce((acc, task) => {
+      const statusCounts = tasksInCurrentGroup.reduce(
-        // Find the status by ID first
+        (acc, task) => {
-        const statusInfo = statusList.find(s => s.id === task.status);
+          // Find the status by ID first
-        const statusName = statusInfo?.name?.toLowerCase() || task.status?.toLowerCase() || '';
+          const statusInfo = statusList.find(s => s.id === task.status);
-        
+          const statusName = statusInfo?.name?.toLowerCase() || task.status?.toLowerCase() || '';
-        // Categorize based on common status name patterns
+
-        if (statusName.includes('todo') || statusName.includes('to do') || statusName.includes('pending') || statusName.includes('open') || statusName.includes('backlog')) {
+          // Categorize based on common status name patterns
-          acc.todo += 1;
+          if (
-        } else if (statusName.includes('doing') || statusName.includes('progress') || statusName.includes('active') || statusName.includes('working') || statusName.includes('development')) {
+            statusName.includes('todo') ||
-          acc.doing += 1;
+            statusName.includes('to do') ||
-        } else if (statusName.includes('done') || statusName.includes('completed') || statusName.includes('finished') || statusName.includes('closed') || statusName.includes('resolved')) {
+            statusName.includes('pending') ||
-          acc.done += 1;
+            statusName.includes('open') ||
-        } else {
+            statusName.includes('backlog')
-          // Default unknown statuses to "doing" (in progress)
+          ) {
-          acc.doing += 1;
+            acc.todo += 1;
-        }
+          } else if (
-        return acc;
+            statusName.includes('doing') ||
-      }, { todo: 0, doing: 0, done: 0 });
+            statusName.includes('progress') ||
+            statusName.includes('active') ||
+            statusName.includes('working') ||
+            statusName.includes('development')
+          ) {
+            acc.doing += 1;
+          } else if (
+            statusName.includes('done') ||
+            statusName.includes('completed') ||
+            statusName.includes('finished') ||
+            statusName.includes('closed') ||
+            statusName.includes('resolved')
+          ) {
+            acc.done += 1;
+          } else {
+            // Default unknown statuses to "doing" (in progress)
+            acc.doing += 1;
+          }
+          return acc;
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
-      
+
       return {
-        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
-        doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0,
+        doingProgress:
-        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0,
+          totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) || 0 : 0,
+        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) || 0 : 0,
       };
     }
   }, [currentGroup, allTasks, statusList, currentGrouping]);
@@ -141,30 +186,34 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     if (tasksInGroup.length === 0) {
       return { isAllSelected: false, isPartiallySelected: false };
     }
-    
+
     const selectedTasksInGroup = tasksInGroup.filter(taskId => selectedTaskIds.includes(taskId));
     const allSelected = selectedTasksInGroup.length === tasksInGroup.length;
-    const partiallySelected = selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
+    const partiallySelected =
-    
+      selectedTasksInGroup.length > 0 && selectedTasksInGroup.length < tasksInGroup.length;
+
     return { isAllSelected: allSelected, isPartiallySelected: partiallySelected };
   }, [tasksInGroup, selectedTaskIds]);
 
   // Handle select all checkbox change
-  const handleSelectAllChange = useCallback((e: any) => {
+  const handleSelectAllChange = useCallback(
-    e.stopPropagation();
+    (e: any) => {
-    
+      e.stopPropagation();
-    if (isAllSelected) {
+
-      // Deselect all tasks in this group
+      if (isAllSelected) {
-      tasksInGroup.forEach(taskId => {
+        // Deselect all tasks in this group
-        dispatch(deselectTask(taskId));
+        tasksInGroup.forEach(taskId => {
-      });
+          dispatch(deselectTask(taskId));
-    } else {
+        });
-      // Select all tasks in this group
+      } else {
-      tasksInGroup.forEach(taskId => {
+        // Select all tasks in this group
-        dispatch(selectTask(taskId));
+        tasksInGroup.forEach(taskId => {
-      });
+          dispatch(selectTask(taskId));
-    }
+        });
-  }, [dispatch, isAllSelected, tasksInGroup]);
+      }
+    },
+    [dispatch, isAllSelected, tasksInGroup]
+  );
 
   // Handle inline name editing
   const handleNameSave = useCallback(async () => {
@@ -184,24 +233,22 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           name: editingName.trim(),
           project_id: projectId,
         };
-        
+
         await statusApiService.updateNameOfStatus(statusId, body, projectId);
         trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Status' });
         dispatch(fetchStatuses(projectId));
-        
       } else if (currentGrouping === 'phase') {
         // Extract phase ID from group ID (format: "phase-{phaseId}")
         const phaseId = group.id.replace('phase-', '');
         const body = { id: phaseId, name: editingName.trim() };
-        
+
         await phasesApiService.updateNameOfPhase(phaseId, body as ITaskPhase, projectId);
         trackMixpanelEvent(evt_project_board_column_setting_click, { Rename: 'Phase' });
         dispatch(fetchPhasesByProjectId(projectId));
       }
-      
+
       // Refresh task list to get updated group names
       dispatch(fetchTasksV3(projectId));
-      
     } catch (error) {
       logger.error('Error renaming group:', error);
       setEditingName(group.name);
@@ -209,24 +256,39 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
       setIsEditingName(false);
       setIsRenaming(false);
     }
-  }, [editingName, group.name, group.id, currentGrouping, projectId, dispatch, trackMixpanelEvent, isRenaming]);
+  }, [
+    editingName,
+    group.name,
+    group.id,
+    currentGrouping,
+    projectId,
+    dispatch,
+    trackMixpanelEvent,
+    isRenaming,
+  ]);
 
-  const handleNameClick = useCallback((e: React.MouseEvent) => {
+  const handleNameClick = useCallback(
-    e.stopPropagation();
+    (e: React.MouseEvent) => {
-    if (!isOwnerOrAdmin) return;
+      e.stopPropagation();
-    setIsEditingName(true);
+      if (!isOwnerOrAdmin) return;
-    setEditingName(group.name);
+      setIsEditingName(true);
-  }, [group.name, isOwnerOrAdmin]);
-
-  const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleNameSave();
-    } else if (e.key === 'Escape') {
-      setIsEditingName(false);
       setEditingName(group.name);
-    }
+    },
-    e.stopPropagation();
+    [group.name, isOwnerOrAdmin]
-  }, [group.name, handleNameSave]);
+  );
+
+  const handleNameKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.key === 'Enter') {
+        handleNameSave();
+      } else if (e.key === 'Escape') {
+        setIsEditingName(false);
+        setEditingName(group.name);
+      }
+      e.stopPropagation();
+    },
+    [group.name, handleNameSave]
+  );
 
   const handleNameBlur = useCallback(() => {
     handleNameSave();
@@ -239,31 +301,31 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     setEditingName(group.name);
   }, [group.name]);
 
-
-
   // Handle category change
-  const handleCategoryChange = useCallback(async (categoryId: string, e?: React.MouseEvent) => {
+  const handleCategoryChange = useCallback(
-    e?.stopPropagation();
+    async (categoryId: string, e?: React.MouseEvent) => {
-    if (isChangingCategory) return;
+      e?.stopPropagation();
+      if (isChangingCategory) return;
 
-    setIsChangingCategory(true);
+      setIsChangingCategory(true);
-    try {
+      try {
-      // Extract status ID from group ID (format: "status-{statusId}")
+        // Extract status ID from group ID (format: "status-{statusId}")
-      const statusId = group.id.replace('status-', '');
+        const statusId = group.id.replace('status-', '');
-      
+
-      await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
+        await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
-      trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
+        trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
-      
+
-      // Refresh status list and tasks
+        // Refresh status list and tasks
-      dispatch(fetchStatuses(projectId));
+        dispatch(fetchStatuses(projectId));
-      dispatch(fetchTasksV3(projectId));
+        dispatch(fetchTasksV3(projectId));
-      
+      } catch (error) {
-    } catch (error) {
+        logger.error('Error changing category:', error);
-      logger.error('Error changing category:', error);
+      } finally {
-    } finally {
+        setIsChangingCategory(false);
-      setIsChangingCategory(false);
+      }
-    }
+    },
-  }, [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]);
+    [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]
+  );
 
   // Create dropdown menu items
   const menuItems = useMemo(() => {
@@ -273,7 +335,12 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
       {
         key: 'rename',
         icon: <PencilIcon className="h-4 w-4" />,
-        label: currentGrouping === 'status' ? t('renameStatus') : currentGrouping === 'phase' ? t('renamePhase') : t('renameGroup'),
+        label:
+          currentGrouping === 'status'
+            ? t('renameStatus')
+            : currentGrouping === 'phase'
+              ? t('renamePhase')
+              : t('renameGroup'),
         onClick: (e: any) => {
           e?.domEvent?.stopPropagation();
           handleRenameGroup();
@@ -283,7 +350,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
 
     // Only show "Change Category" when grouped by status
     if (currentGrouping === 'status') {
-      const categorySubMenuItems = statusCategories.map((category) => ({
+      const categorySubMenuItems = statusCategories.map(category => ({
         key: `category-${category.id}`,
         label: (
           <div className="flex items-center gap-2">
@@ -297,16 +364,23 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
         },
       }));
 
-              items.push({
+      items.push({
-          key: 'changeCategory',
+        key: 'changeCategory',
-          icon: <ArrowPathIcon className="h-4 w-4" />,
+        icon: <ArrowPathIcon className="h-4 w-4" />,
-          label: t('changeCategory'),
+        label: t('changeCategory'),
-          children: categorySubMenuItems,
+        children: categorySubMenuItems,
-        } as any);
+      } as any);
     }
 
     return items;
-  }, [currentGrouping, handleRenameGroup, handleCategoryChange, isOwnerOrAdmin, statusCategories, t]);
+  }, [
+    currentGrouping,
+    handleRenameGroup,
+    handleCategoryChange,
+    isOwnerOrAdmin,
+    statusCategories,
+    t,
+  ]);
 
   // Make the group header droppable
   const { isOver, setNodeRef } = useDroppable({
@@ -317,7 +391,7 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
     },
   });
 
-    return (
+  return (
     <div className="relative flex items-center">
       <div
         ref={setNodeRef}
@@ -332,26 +406,26 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
           zIndex: 25, // Higher than task rows but lower than column headers (z-30)
           height: '36px',
           minHeight: '36px',
-          maxHeight: '36px'
+          maxHeight: '36px',
         }}
         onClick={onToggle}
       >
         {/* Drag Handle Space - ultra minimal width */}
         <div style={{ width: '20px' }} className="flex items-center justify-center">
           {/* Chevron button */}
-          <button 
+          <button
             className="p-0 rounded-sm hover:shadow-lg hover:scale-105 transition-all duration-300 ease-out"
             style={{ backgroundColor: 'transparent', color: headerTextColor }}
-            onClick={(e) => {
+            onClick={e => {
               e.stopPropagation();
               onToggle();
             }}
           >
-            <div 
+            <div
               className="transition-transform duration-300 ease-out"
-              style={{ 
+              style={{
                 transform: isCollapsed ? 'rotate(0deg)' : 'rotate(90deg)',
-                transformOrigin: 'center'
+                transformOrigin: 'center',
               }}
             >
               <ChevronRightIcon className="h-3 w-3" style={{ color: headerTextColor }} />
@@ -365,100 +439,99 @@ const TaskGroupHeader: React.FC<TaskGroupHeaderProps> = ({ group, isCollapsed, o
             checked={isAllSelected}
             indeterminate={isPartiallySelected}
             onChange={handleSelectAllChange}
-            onClick={(e) => e.stopPropagation()}
+            onClick={e => e.stopPropagation()}
             style={{
               color: headerTextColor,
             }}
           />
         </div>
 
-              {/* Group indicator and name - no gap at all */}
+        {/* Group indicator and name - no gap at all */}
-      <div className="flex items-center flex-1 ml-1">
+        <div className="flex items-center flex-1 ml-1">
-        {/* Group name and count */}
+          {/* Group name and count */}
-        <div className="flex items-center">
+          <div className="flex items-center">
-          {isEditingName ? (
+            {isEditingName ? (
-            <Input
+              <Input
-              value={editingName}
+                value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
+                onChange={e => setEditingName(e.target.value)}
-              onKeyDown={handleNameKeyDown}
+                onKeyDown={handleNameKeyDown}
-              onBlur={handleNameBlur}
+                onBlur={handleNameBlur}
-              autoFocus
+                autoFocus
-              size="small"
+                size="small"
-              className="text-sm font-semibold"
+                className="text-sm font-semibold"
-              style={{ 
+                style={{
-                width: 'auto',
+                  width: 'auto',
-                minWidth: '100px',
+                  minWidth: '100px',
-                backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                color: headerTextColor,
+                  color: headerTextColor,
-                border: '1px solid rgba(255, 255, 255, 0.3)'
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
-              }}
+                }}
-              onClick={(e) => e.stopPropagation()}
+                onClick={e => e.stopPropagation()}
-            />
+              />
-          ) : (
+            ) : (
-            <span 
+              <span
-              className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
+                className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
-              style={{ color: headerTextColor }}
+                style={{ color: headerTextColor }}
-              onClick={handleNameClick}
+                onClick={handleNameClick}
-            >
+              >
-              {group.name}
+                {group.name}
+              </span>
+            )}
+            <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
+              ({group.count})
             </span>
-          )}
+          </div>
-          <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
-            ({group.count})
-          </span>
         </div>
+
+        {/* Three-dot menu - only show for status and phase grouping */}
+        {menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
+          <div className="flex items-center ml-2">
+            <Dropdown
+              menu={{ items: menuItems }}
+              trigger={['click']}
+              open={dropdownVisible}
+              onOpenChange={setDropdownVisible}
+              placement="bottomRight"
+              overlayStyle={{ zIndex: 1000 }}
+            >
+              <button
+                className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
+                style={{ color: headerTextColor }}
+                onClick={e => {
+                  e.stopPropagation();
+                  setDropdownVisible(!dropdownVisible);
+                }}
+              >
+                <EllipsisHorizontalIcon className="h-4 w-4" />
+              </button>
+            </Dropdown>
+          </div>
+        )}
       </div>
 
-      {/* Three-dot menu - only show for status and phase grouping */}
-      {menuItems.length > 0 && (currentGrouping === 'status' || currentGrouping === 'phase') && (
-        <div className="flex items-center ml-2">
-          <Dropdown
-            menu={{ items: menuItems }}
-            trigger={['click']}
-            open={dropdownVisible}
-            onOpenChange={setDropdownVisible}
-            placement="bottomRight"
-            overlayStyle={{ zIndex: 1000 }}
-          >
-            <button
-              className="p-1 rounded-sm hover:bg-black hover:bg-opacity-10 transition-colors duration-200"
-              style={{ color: headerTextColor }}
-              onClick={(e) => {
-                e.stopPropagation();
-                setDropdownVisible(!dropdownVisible);
-              }}
-            >
-              <EllipsisHorizontalIcon className="h-4 w-4" />
-            </button>
-          </Dropdown>
-        </div>
-      )}
-
-    </div>
-    
       {/* Progress Bar - sticky to the right edge during horizontal scroll */}
-      {(currentGrouping === 'priority' || currentGrouping === 'phase') && 
+      {(currentGrouping === 'priority' || currentGrouping === 'phase') &&
-       (groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && (
+        !(groupProgressValues.todoProgress === 0 && groupProgressValues.doingProgress === 0 && groupProgressValues.doneProgress === 0) && (
-        <div 
+          <div
-          className="flex items-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm px-3 py-1.5 ml-auto"
+            className="flex items-center bg-white dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-md shadow-sm px-3 py-1.5 ml-auto"
-          style={{ 
+            style={{
-            position: 'sticky',
+              position: 'sticky',
-            right: '16px',
+              right: '16px',
-            zIndex: 35, // Higher than header
+              zIndex: 35, // Higher than header
-            minWidth: '160px',
+              minWidth: '160px',
-            height: '30px'
+              height: '30px',
-          }}
+            }}
-        >
+          >
-          <GroupProgressBar
+            <GroupProgressBar
-            todoProgress={groupProgressValues.todoProgress}
+              todoProgress={groupProgressValues.todoProgress}
-            doingProgress={groupProgressValues.doingProgress}
+              doingProgress={groupProgressValues.doingProgress}
-            doneProgress={groupProgressValues.doneProgress}
+              doneProgress={groupProgressValues.doneProgress}
-            groupType={group.groupType || currentGrouping || ''}
+              groupType={group.groupType || currentGrouping || ''}
-          />
+            />
-        </div>
+          </div>
-      )}
+        )}
     </div>
   );
 };
 
-export default TaskGroupHeader; 
+export default TaskGroupHeader;

worklenz-frontend/src/components/task-list-v2/TaskListV2Table.tsx

@@ -60,13 +60,13 @@ import { fetchPhasesByProjectId } from '@/features/projects/singleProject/phase/
 // Components
 import TaskRowWithSubtasks from './TaskRowWithSubtasks';
 import TaskGroupHeader from './TaskGroupHeader';
-import ImprovedTaskFilters from '@/components/task-management/improved-task-filters';
 import OptimizedBulkActionBar from '@/components/task-management/optimized-bulk-action-bar';
 import CustomColumnModal from '@/pages/projects/projectView/taskList/task-list-table/custom-columns/custom-column-modal/custom-column-modal';
 import AddTaskRow from './components/AddTaskRow';
 import { AddCustomColumnButton, CustomColumnHeader } from './components/CustomColumnComponents';
 import TaskListSkeleton from './components/TaskListSkeleton';
 import ConvertToSubtaskDrawer from '@/components/task-list-common/convert-to-subtask-drawer/convert-to-subtask-drawer';
+import EmptyListPlaceholder from '@/components/EmptyListPlaceholder';
 
 // Empty Group Drop Zone Component
 const EmptyGroupDropZone: React.FC<{
@@ -90,12 +90,28 @@ const EmptyGroupDropZone: React.FC<{
         isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
       }`}
     >
-      <div className="flex items-center min-w-max px-1 py-6">
+      <div className="flex items-center min-w-max px-1 border-t border-b border-gray-200 dark:border-gray-700" style={{ height: '40px' }}>
         {visibleColumns.map((column, index) => {
           const emptyColumnStyle = {
             width: column.width,
             flexShrink: 0,
           };
+          
+          // Show text in the title column
+          if (column.id === 'title') {
+            return (
+              <div
+                key={`empty-${column.id}`}
+                className="flex items-center pl-1"
+                style={emptyColumnStyle}
+              >
+                <span className="text-sm text-gray-500 dark:text-gray-400">
+                  No tasks in this group
+                </span>
+              </div>
+            );
+          }
+          
           return (
             <div
               key={`empty-${column.id}`}
@@ -105,17 +121,6 @@ const EmptyGroupDropZone: React.FC<{
           );
         })}
       </div>
-      <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
-        <div 
-          className={`text-sm px-4 py-3 rounded-md border shadow-sm transition-colors duration-200 ${
-            isOver && active 
-              ? 'text-blue-600 dark:text-blue-400 bg-blue-50 dark:bg-blue-900/30 border-blue-300 dark:border-blue-600'
-              : 'text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 border-gray-200 dark:border-gray-700'
-          }`}
-        >
-          {isOver && active ? t('dropTaskHere') || 'Drop task here' : t('noTasksInGroup')}
-        </div>
-      </div>
       {isOver && active && (
         <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
       )}
@@ -179,6 +184,8 @@ const TaskListV2Section: React.FC = () => {
   const { projectId: urlProjectId } = useParams();
   const { t } = useTranslation('task-list-table');
   const { socket, connected } = useSocket();
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const isDarkMode = themeMode === 'dark';
 
   // Redux state selectors
   const allTasks = useAppSelector(selectAllTasksArray);
@@ -492,7 +499,7 @@ const TaskListV2Section: React.FC = () => {
               isAddTaskRow: true,
               groupId: group.id,
               groupType: currentGrouping || 'status',
-              groupValue: group.id, // Use the actual database ID from backend
+              groupValue: group.id, // Send the UUID that backend expects
               projectId: urlProjectId,
               rowId: `add-task-${group.id}-0`,
               autoFocus: false,
@@ -503,7 +510,7 @@ const TaskListV2Section: React.FC = () => {
               isAddTaskRow: true,
               groupId: group.id,
               groupType: currentGrouping || 'status',
-              groupValue: group.id,
+              groupValue: group.id, // Send the UUID that backend expects
               projectId: urlProjectId,
               rowId: rowId,
               autoFocus: index === groupAddRows.length - 1, // Auto-focus the latest row
@@ -536,6 +543,7 @@ const TaskListV2Section: React.FC = () => {
     return virtuosoGroups.flatMap(group => group.tasks);
   }, [virtuosoGroups]);
 
+
   // Render functions
   const renderGroup = useCallback(
     (groupIndex: number) => {
@@ -550,11 +558,7 @@ const TaskListV2Section: React.FC = () => {
               id: group.id,
               name: group.title,
               count: group.actualCount,
-              color: group.color,
+              color: isDarkMode ? group.color_code_dark : group.color,
-              todo_progress: group.todo_progress,
-              doing_progress: group.doing_progress,
-              done_progress: group.done_progress,
-              groupType: group.groupType,
             }}
             isCollapsed={isGroupCollapsed}
             onToggle={() => handleGroupCollapse(group.id)}
@@ -685,13 +689,94 @@ const TaskListV2Section: React.FC = () => {
       </div>
     );
 
-  // Show message when no data
+  // Show message when no data - but for phase grouping, create an unmapped group
   if (groups.length === 0 && !loading) {
+    // If grouped by phase, show an unmapped group to allow task creation
+    if (currentGrouping === 'phase') {
+      const unmappedGroup = {
+        id: 'Unmapped',
+        title: 'Unmapped',
+        groupType: 'phase',
+        groupValue: 'Unmapped', // Use same ID as groupValue for consistency
+        collapsed: false,
+        tasks: [],
+        taskIds: [],
+        color: '#fbc84c69',
+        actualCount: 0,
+        count: 1, // For the add task row
+        startIndex: 0
+      };
+     
+      return (
+        <DndContext
+          sensors={sensors}
+          collisionDetection={closestCenter}
+          onDragStart={handleDragStart}
+          onDragOver={handleDragOver}
+          onDragEnd={handleDragEnd}
+        >
+          <div className="flex flex-col bg-white dark:bg-gray-900 h-full overflow-hidden">
+            <div
+              className="border border-gray-200 dark:border-gray-700 rounded-lg"
+              style={{
+                height: 'calc(100vh - 240px)',
+                display: 'flex',
+                flexDirection: 'column',
+                overflow: 'hidden',
+              }}
+            >
+              <div
+                ref={contentScrollRef}
+                className="flex-1 bg-white dark:bg-gray-900 relative"
+                style={{
+                  overflowX: 'auto',
+                  overflowY: 'auto',
+                  minHeight: 0,
+                }}
+              >
+                {/* Sticky Column Headers */}
+                <div
+                  className="sticky top-0 z-30 bg-gray-50 dark:bg-gray-800"
+                  style={{ width: '100%', minWidth: 'max-content' }}
+                >
+                  {renderColumnHeaders()}
+                </div>
+                
+                <div style={{ minWidth: 'max-content' }}>
+                  <div className="mt-2">
+                    <TaskGroupHeader
+                      group={{
+                        id: 'Unmapped',
+                        name: 'Unmapped',
+                        count: 0,
+                        color: '#fbc84c69',
+                      }}
+                      isCollapsed={false}
+                      onToggle={() => {}}
+                      projectId={urlProjectId || ''}
+                    />
+                    <AddTaskRow
+                      groupId="Unmapped"
+                      groupType="phase"
+                      groupValue="Unmapped"
+                      projectId={urlProjectId || ''}
+                      visibleColumns={visibleColumns}
+                      onTaskAdded={handleTaskAdded}
+                      rowId="add-task-Unmapped-0"
+                      autoFocus={false}
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </DndContext>
+      );
+    }
+    
+    // For other groupings, show the empty state message
     return (
       <div className="flex flex-col bg-white dark:bg-gray-900 h-full">
-        <div className="flex-none" style={{ height: '74px', flexShrink: 0 }}>
-          <ImprovedTaskFilters position="list" />
-        </div>
         <div className="flex-1 flex items-center justify-center">
           <div className="text-center">
             <div className="text-lg font-medium text-gray-900 dark:text-white mb-2">
@@ -812,19 +897,17 @@ const TaskListV2Section: React.FC = () => {
         {/* Drag Overlay */}
         <DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
           {activeId ? (
-            <div className="bg-white dark:bg-gray-800 shadow-2xl rounded-lg border-2 border-blue-500 dark:border-blue-400 scale-105">
+            <div 
-              <div className="px-4 py-3">
+              className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
-                <div className="flex items-center gap-3">
+              style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
-                  <HolderOutlined className="text-blue-500 dark:text-blue-400" />
+            >
-                  <div>
+              <div className="px-3 py-2">
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">
+                <div className="flex items-center gap-2">
-                      {allTasks.find(task => task.id === activeId)?.name ||
+                  <HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
-                        allTasks.find(task => task.id === activeId)?.title ||
+                  <div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
-                        t('emptyStates.dragTaskFallback')}
+                    {allTasks.find(task => task.id === activeId)?.name ||
-                    </div>
+                      allTasks.find(task => task.id === activeId)?.title ||
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
+                      t('emptyStates.dragTaskFallback')}
-                      {allTasks.find(task => task.id === activeId)?.task_key}
-                    </div>
                   </div>
                 </div>
               </div>

worklenz-frontend/src/components/task-list-v2/components/AddTaskRow.tsx

@@ -125,9 +125,9 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
         return <div className="border-r border-gray-200 dark:border-gray-700" style={labelsStyle} />;
       case 'title':
         return (
-          <div className="flex items-center h-full border-r border-gray-200 dark:border-gray-700" style={baseStyle}>
+          <div className="flex items-center h-full" style={baseStyle}>
             <div className="flex items-center w-full h-full">
-              <div className="w-4 mr-1" />
+              <div className="w-1 mr-1" />
               
               {!isAdding ? (
                 <button
@@ -165,7 +165,7 @@ const AddTaskRow: React.FC<AddTaskRowProps> = memo(({
   }, [isAdding, taskName, handleAddTask, handleCancel, handleKeyDown, t]);
 
   return (
-    <div className="flex items-center min-w-max px-1 py-0.5 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[36px] border-b border-gray-200 dark:border-gray-700">
+    <div className="flex items-center min-w-max px-1 py-0.5 hover:bg-gray-50 dark:hover:bg-gray-800 min-h-[36px]">
       {visibleColumns.map((column, index) => (
         <React.Fragment key={column.id}>
           {renderColumn(column.id, column.width)}

worklenz-frontend/src/features/task-management/task-management.slice.ts

@@ -526,9 +526,25 @@ const taskManagementSlice = createSlice({
     },
     addTaskToGroup: (state, action: PayloadAction<{ task: Task; groupId: string }>) => {
       const { task, groupId } = action.payload;
+      
       state.ids.push(task.id);
       state.entities[task.id] = task;
-      const group = state.groups.find(g => g.id === groupId);
+      let group = state.groups.find(g => g.id === groupId);
+      
+      // If group doesn't exist and it's "Unmapped", create it dynamically
+      if (!group && groupId === 'Unmapped') {
+        const unmappedGroup = {
+          id: 'Unmapped',
+          title: 'Unmapped',
+          taskIds: [],
+          type: 'phase' as const,
+          color: '#fbc84c69',
+          groupValue: 'Unmapped'
+        };
+        state.groups.push(unmappedGroup);
+        group = unmappedGroup;
+      }
+      
       if (group) {
         group.taskIds.push(task.id);
       }
@@ -1170,7 +1186,7 @@ export default taskManagementSlice.reducer;
 
 // V3 API selectors - no processing needed, data is pre-processed by backend
 export const selectTaskGroupsV3 = (state: RootState) => state.taskManagement.groups;
-export const selectCurrentGroupingV3 = (state: RootState) => state.taskManagement.grouping;
+export const selectCurrentGroupingV3 = (state: RootState) => state.grouping.currentGrouping;
 
 // Column-related selectors
 export const selectColumns = (state: RootState) => state.taskManagement.columns;

worklenz-frontend/src/hooks/useTaskSocketHandlers.ts

@@ -855,10 +855,11 @@ export const useTaskSocketHandlers = () => {
           // For priority grouping, use priority field (which contains the priority UUID)
           groupId = data.priority;
         } else if (grouping === 'phase') {
-          // For phase grouping, use phase_id
+          // For phase grouping, use phase_id, or 'Unmapped' if no phase_id
-          groupId = data.phase_id;
+          groupId = data.phase_id || 'Unmapped';
         }
 
+
         // Use addTaskToGroup with the actual group UUID
         dispatch(addTaskToGroup({ task, groupId: groupId || '' }));
 

worklenz-frontend/src/pages/GanttDemoPage.tsx

@@ -1,8 +0,0 @@
-import React from 'react';
-import { AdvancedGanttDemo } from '../components/advanced-gantt';
-
-const GanttDemoPage: React.FC = () => {
-  return <AdvancedGanttDemo />;
-};
-
-export default GanttDemoPage;

worklenz-frontend/src/pages/auth/ForgotPasswordPage.tsx

@@ -118,7 +118,7 @@ const ForgotPasswordPage = () => {
             >
               <Input
                 prefix={<UserOutlined />}
-                placeholder={t('emailPlaceholder')}
+                placeholder={t('emailPlaceholder', {defaultValue: 'Enter your email'})}
                 size="large"
                 style={{ borderRadius: 4 }}
               />
@@ -134,7 +134,7 @@ const ForgotPasswordPage = () => {
                   loading={isLoading}
                   style={{ borderRadius: 4 }}
                 >
-                  {t('resetPasswordButton')}
+                  {t('resetPasswordButton', {defaultValue: 'Reset Password'})}
                 </Button>
                 <Typography.Text style={{ textAlign: 'center' }}>{t('orText')}</Typography.Text>
                 <Link to="/auth/login">
@@ -146,7 +146,7 @@ const ForgotPasswordPage = () => {
                       borderRadius: 4,
                     }}
                   >
-                    {t('returnToLoginButton')}
+                    {t('returnToLoginButton', {defaultValue: 'Return to Login'})}
                   </Button>
                 </Link>
               </Flex>

worklenz-frontend/src/pages/auth/SignupPage.tsx

@@ -5,6 +5,8 @@ import { useMediaQuery } from 'react-responsive';
 import { LockOutlined, MailOutlined, UserOutlined } from '@ant-design/icons';
 import { Form, Card, Input, Flex, Button, Typography, Space, message } from 'antd/es';
 import { Rule } from 'antd/es/form';
+import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
+import { useAppSelector } from '@/hooks/useAppSelector';
 
 import googleIcon from '@/assets/images/google-icon.png';
 import PageHeader from '@components/AuthPageHeader';
@@ -297,6 +299,10 @@ const SignupPage = () => {
         min: 8,
         message: t('passwordMinCharacterRequired'),
       },
+      {
+        max: 32,
+        message: t('passwordMaxCharacterRequired'),
+      },
       {
         pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&#])/,
         message: t('passwordPatternRequired'),
@@ -304,6 +310,38 @@ const SignupPage = () => {
     ],
   };
 
+  const passwordChecklistItems = [
+    {
+      key: 'minLength',
+      test: (v: string) => v.length >= 8,
+      label: t('passwordChecklist.minLength', { defaultValue: 'At least 8 characters' }),
+    },
+    {
+      key: 'uppercase',
+      test: (v: string) => /[A-Z]/.test(v),
+      label: t('passwordChecklist.uppercase', { defaultValue: 'One uppercase letter' }),
+    },
+    {
+      key: 'lowercase',
+      test: (v: string) => /[a-z]/.test(v),
+      label: t('passwordChecklist.lowercase', { defaultValue: 'One lowercase letter' }),
+    },
+    {
+      key: 'number',
+      test: (v: string) => /\d/.test(v),
+      label: t('passwordChecklist.number', { defaultValue: 'One number' }),
+    },
+    {
+      key: 'special',
+      test: (v: string) => /[@$!%*?&#]/.test(v),
+      label: t('passwordChecklist.special', { defaultValue: 'One special character' }),
+    },
+  ];
+
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const [passwordValue, setPasswordValue] = useState('');
+  const [passwordActive, setPasswordActive] = useState(false);
+
   return (
     <Card
       style={{
@@ -317,7 +355,7 @@ const SignupPage = () => {
       }}
       variant="outlined"
     >
-      <PageHeader description={t('headerDescription')} />
+      <PageHeader description={t('headerDescription', {defaultValue: 'Sign up to get started'})} />
       <Form
         form={form}
         name="signup"
@@ -331,35 +369,72 @@ const SignupPage = () => {
           name: urlParams.name,
         }}
       >
-        <Form.Item name="name" label={t('nameLabel')} rules={formRules.name}>
+        <Form.Item name="name" label={t('nameLabel', {defaultValue: 'Full Name'})} rules={formRules.name}>
           <Input
             prefix={<UserOutlined />}
-            placeholder={t('namePlaceholder')}
+            placeholder={t('namePlaceholder', {defaultValue: 'Enter your full name'})}
             size="large"
             style={{ borderRadius: 4 }}
           />
         </Form.Item>
 
-        <Form.Item name="email" label={t('emailLabel')} rules={formRules.email as Rule[]}>
+        <Form.Item name="email" label={t('emailLabel', {defaultValue: 'Email'})} rules={formRules.email as Rule[]}>
           <Input
             prefix={<MailOutlined />}
-            placeholder={t('emailPlaceholder')}
+            placeholder={t('emailPlaceholder', {defaultValue: 'Enter your email'})}
             size="large"
             style={{ borderRadius: 4 }}
           />
         </Form.Item>
 
-        <Form.Item name="password" label={t('passwordLabel')} rules={formRules.password}>
+        <Form.Item
+          name="password"
+          label={t('passwordLabel', {defaultValue: 'Password'})}
+          rules={formRules.password}
+          validateTrigger={['onBlur', 'onSubmit']}
+        >
           <div>
             <Input.Password
               prefix={<LockOutlined />}
-              placeholder={t('strongPasswordPlaceholder')}
+              placeholder={t('strongPasswordPlaceholder', {defaultValue: 'Enter a strong password'})}
               size="large"
               style={{ borderRadius: 4 }}
+              value={passwordValue}
+              onFocus={() => setPasswordActive(true)}
+              onChange={e => {
+                setPasswordValue(e.target.value);
+                setPasswordActive(true);
+              }}
+              onBlur={() => {
+                if (!passwordValue) setPasswordActive(false);
+              }}
             />
-            <Typography.Text type="secondary" style={{ fontSize: 12 }}>
+            <Typography.Text type="secondary" style={{ fontSize: 12, marginTop: 4, marginBottom: 0, display: 'block' }}>
-              {t('passwordValidationAltText')}
+              {t('passwordGuideline', {
+                defaultValue: 'Password must be at least 8 characters, include uppercase and lowercase letters, a number, and a special character.'
+              })}
             </Typography.Text>
+            {passwordActive && (
+              <div style={{ marginTop: 8, marginBottom: 4 }}>
+                {passwordChecklistItems.map(item => {
+                  const passed = item.test(passwordValue);
+                  // Only green if passed, otherwise neutral (never red)
+                  let color = passed
+                    ? (themeMode === 'dark' ? '#52c41a' : '#389e0d')
+                    : (themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf');
+                  return (
+                    <Flex key={item.key} align="center" gap={8} style={{ color, fontSize: 13 }}>
+                      {passed ? (
+                        <CheckCircleTwoTone twoToneColor={themeMode === 'dark' ? '#52c41a' : '#52c41a'} />
+                      ) : (
+                        <CloseCircleTwoTone twoToneColor={themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf'} />
+                      )}
+                      <span>{item.label}</span>
+                    </Flex>
+                  );
+                })}
+              </div>
+            )}
           </div>
         </Form.Item>
 
@@ -416,7 +491,7 @@ const SignupPage = () => {
         <Form.Item>
           <Space>
             <Typography.Text style={{ fontSize: 14 }}>
-              {t('alreadyHaveAccountText')}
+              {t('alreadyHaveAccountText', {defaultValue: 'Already have an account?'})}
             </Typography.Text>
 
             <Link

worklenz-frontend/src/pages/auth/VerifyResetEmailPage.tsx

@@ -4,6 +4,8 @@ import { Form, Card, Input, Flex, Button, Typography, Result } from 'antd/es';
 import { LockOutlined } from '@ant-design/icons';
 import { useTranslation } from 'react-i18next';
 import { useMediaQuery } from 'react-responsive';
+import { CheckCircleTwoTone, CloseCircleTwoTone } from '@ant-design/icons';
+import { useAppSelector } from '@/hooks/useAppSelector';
 
 import PageHeader from '@components/AuthPageHeader';
 
@@ -36,6 +38,36 @@ const VerifyResetEmailPage = () => {
   const { t } = useTranslation('auth/verify-reset-email');
 
   const isMobile = useMediaQuery({ query: '(max-width: 576px)' });
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const [passwordValue, setPasswordValue] = useState('');
+  const [passwordTouched, setPasswordTouched] = useState(false);
+  const passwordChecklistItems = [
+    {
+      key: 'minLength',
+      test: (v: string) => v.length >= 8,
+      label: t('passwordChecklist.minLength', { defaultValue: 'At least 8 characters' }),
+    },
+    {
+      key: 'uppercase',
+      test: (v: string) => /[A-Z]/.test(v),
+      label: t('passwordChecklist.uppercase', { defaultValue: 'One uppercase letter' }),
+    },
+    {
+      key: 'lowercase',
+      test: (v: string) => /[a-z]/.test(v),
+      label: t('passwordChecklist.lowercase', { defaultValue: 'One lowercase letter' }),
+    },
+    {
+      key: 'number',
+      test: (v: string) => /\d/.test(v),
+      label: t('passwordChecklist.number', { defaultValue: 'One number' }),
+    },
+    {
+      key: 'special',
+      test: (v: string) => /[@$!%*?&#]/.test(v),
+      label: t('passwordChecklist.special', { defaultValue: 'One special character' }),
+    },
+  ];
 
   useEffect(() => {
     trackMixpanelEvent(evt_verify_reset_email_page_visit);
@@ -104,12 +136,38 @@ const VerifyResetEmailPage = () => {
                 },
               ]}
             >
-              <Input.Password
+              <div>
-                prefix={<LockOutlined />}
+                <Input.Password
-                placeholder={t('placeholder')}
+                  prefix={<LockOutlined />}
-                size="large"
+                  placeholder={t('placeholder')}
-                style={{ borderRadius: 4 }}
+                  size="large"
-              />
+                  style={{ borderRadius: 4 }}
+                  value={passwordValue}
+                  onChange={e => {
+                    setPasswordValue(e.target.value);
+                    if (!passwordTouched) setPasswordTouched(true);
+                  }}
+                  onBlur={() => setPasswordTouched(true)}
+                />
+                <div style={{ marginTop: 8, marginBottom: 4 }}>
+                  {passwordChecklistItems.map(item => {
+                    const passed = item.test(passwordValue);
+                    let color = passed
+                      ? (themeMode === 'dark' ? '#52c41a' : '#389e0d')
+                      : (themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf');
+                    return (
+                      <Flex key={item.key} align="center" gap={8} style={{ color, fontSize: 13 }}>
+                        {passed ? (
+                          <CheckCircleTwoTone twoToneColor={themeMode === 'dark' ? '#52c41a' : '#52c41a'} />
+                        ) : (
+                          <CloseCircleTwoTone twoToneColor={themeMode === 'dark' ? '#b0b3b8' : '#bfbfbf'} />
+                        )}
+                        <span>{item.label}</span>
+                      </Flex>
+                    );
+                  })}
+                </div>
+              </div>
             </Form.Item>
             <Form.Item
               name="confirmPassword"
@@ -136,6 +194,8 @@ const VerifyResetEmailPage = () => {
                 placeholder={t('confirmPasswordPlaceholder')}
                 size="large"
                 style={{ borderRadius: 4 }}
+                value={form.getFieldValue('confirmPassword') || ''}
+                onChange={e => form.setFieldsValue({ confirmPassword: e.target.value })}
               />
             </Form.Item>
 

worklenz-frontend/src/pages/projects/ProjectGanttView.tsx

@@ -1,63 +0,0 @@
-import React, { useMemo } from 'react';
-import { useParams } from 'react-router-dom';
-import { AdvancedGanttChart } from '../../components/advanced-gantt';
-import { useAppSelector } from '../../hooks/useAppSelector';
-import { GanttTask } from '../../types/advanced-gantt.types';
-
-const ProjectGanttView: React.FC = () => {
-  const { projectId } = useParams<{ projectId: string }>();
-  
-  // Get tasks from your Redux store (adjust based on your actual state structure)
-  const tasks = useAppSelector(state => state.tasksReducer?.tasks || []);
-  
-  // Transform your tasks to GanttTask format
-  const ganttTasks = useMemo((): GanttTask[] => {
-    return tasks.map(task => ({
-      id: task.id,
-      name: task.name,
-      startDate: task.start_date ? new Date(task.start_date) : new Date(),
-      endDate: task.end_date ? new Date(task.end_date) : new Date(),
-      progress: task.progress || 0,
-      type: 'task',
-      status: task.status || 'not-started',
-      priority: task.priority || 'medium',
-      assignee: task.assignee ? {
-        id: task.assignee.id,
-        name: task.assignee.name,
-        avatar: task.assignee.avatar,
-      } : undefined,
-      parent: task.parent_task_id,
-      level: task.level || 0,
-      // Map other fields as needed
-    }));
-  }, [tasks]);
-
-  const handleTaskUpdate = (taskId: string, updates: Partial<GanttTask>) => {
-    // Implement your task update logic here
-    console.log('Update task:', taskId, updates);
-    // Dispatch Redux action to update task
-  };
-
-  const handleTaskMove = (taskId: string, newDates: { start: Date; end: Date }) => {
-    // Implement your task move logic here
-    console.log('Move task:', taskId, newDates);
-    // Dispatch Redux action to update task dates
-  };
-
-  return (
-    <div className="project-gantt-view h-full">
-      <AdvancedGanttChart
-        tasks={ganttTasks}
-        onTaskUpdate={handleTaskUpdate}
-        onTaskMove={handleTaskMove}
-        enableDragDrop={true}
-        enableResize={true}
-        enableProgressEdit={true}
-        enableInlineEdit={true}
-        className="h-full"
-      />
-    </div>
-  );
-};
-
-export default ProjectGanttView;

worklenz-frontend/src/types/advanced-gantt.types.ts

@@ -1,307 +0,0 @@
-import { ReactNode } from 'react';
-
-// Core Task Interface
-export interface GanttTask {
-  id: string;
-  name: string;
-  startDate: Date;
-  endDate: Date;
-  progress: number;
-  duration?: number; // in days
-  parent?: string;
-  type: 'task' | 'milestone' | 'project';
-  status: 'not-started' | 'in-progress' | 'completed' | 'on-hold' | 'overdue';
-  priority: 'low' | 'medium' | 'high' | 'critical';
-  assignee?: {
-    id: string;
-    name: string;
-    avatar?: string;
-  };
-  dependencies?: string[];
-  description?: string;
-  tags?: string[];
-  color?: string;
-  isCollapsed?: boolean;
-  level?: number; // for hierarchical display
-  hasChildren?: boolean;
-  isExpanded?: boolean;
-}
-
-// Column Configuration
-export interface ColumnConfig {
-  field: keyof GanttTask | string;
-  title: string;
-  width: number;
-  minWidth?: number;
-  maxWidth?: number;
-  resizable: boolean;
-  sortable: boolean;
-  fixed: boolean;
-  align?: 'left' | 'center' | 'right';
-  renderer?: (value: any, task: GanttTask) => ReactNode;
-  editor?: 'text' | 'date' | 'select' | 'number' | 'progress';
-  editorOptions?: any;
-}
-
-// Timeline Configuration
-export interface TimelineConfig {
-  topTier: {
-    unit: 'year' | 'month' | 'week' | 'day';
-    format: string;
-    height?: number;
-  };
-  bottomTier: {
-    unit: 'month' | 'week' | 'day' | 'hour';
-    format: string;
-    height?: number;
-  };
-  showWeekends: boolean;
-  showNonWorkingDays: boolean;
-  holidays: Holiday[];
-  workingDays: number[]; // 0-6, Sunday-Saturday
-  workingHours: {
-    start: number; // 0-23
-    end: number; // 0-23
-  };
-  minDate?: Date;
-  maxDate?: Date;
-  dayWidth: number; // pixels per day
-}
-
-// Holiday Interface
-export interface Holiday {
-  date: Date;
-  name: string;
-  type: 'national' | 'company' | 'religious' | 'custom';
-  recurring?: boolean;
-  color?: string;
-}
-
-// Virtual Scrolling Configuration
-export interface VirtualScrollConfig {
-  enableRowVirtualization: boolean;
-  enableTimelineVirtualization: boolean;
-  bufferSize: number;
-  itemHeight: number;
-  overscan?: number;
-}
-
-// Drag and Drop State
-export interface DragState {
-  isDragging: boolean;
-  dragType: 'move' | 'resize-start' | 'resize-end' | 'progress' | 'link';
-  taskId: string;
-  initialPosition: { x: number; y: number };
-  currentPosition?: { x: number; y: number };
-  initialDates: { start: Date; end: Date };
-  initialProgress?: number;
-  snapToGrid?: boolean;
-  constraints?: {
-    minDate?: Date;
-    maxDate?: Date;
-    minDuration?: number;
-    maxDuration?: number;
-  };
-}
-
-// Zoom Levels
-export interface ZoomLevel {
-  name: string;
-  dayWidth: number;
-  topTier: TimelineConfig['topTier'];
-  bottomTier: TimelineConfig['bottomTier'];
-  scale: number;
-}
-
-// Selection State
-export interface SelectionState {
-  selectedTasks: string[];
-  selectedRows: number[];
-  selectionRange?: {
-    start: { row: number; col: number };
-    end: { row: number; col: number };
-  };
-  focusedTask?: string;
-}
-
-// Gantt View State
-export interface GanttViewState {
-  zoomLevel: number;
-  scrollPosition: { x: number; y: number };
-  viewportSize: { width: number; height: number };
-  splitterPosition: number; // percentage for grid/timeline split
-  showCriticalPath: boolean;
-  showBaseline: boolean;
-  showProgress: boolean;
-  showDependencies: boolean;
-  autoSchedule: boolean;
-  readOnly: boolean;
-}
-
-// Performance Metrics
-export interface PerformanceMetrics {
-  renderTime: number;
-  taskCount: number;
-  visibleTaskCount: number;
-  memoryUsage?: number;
-  fps?: number;
-}
-
-// Event Handlers
-export type TaskEventHandler<T = void> = (task: GanttTask, event: MouseEvent | TouchEvent) => T;
-export type DragEventHandler = (taskId: string, newDates: { start: Date; end: Date }) => void;
-export type ResizeEventHandler = (taskId: string, newDates: { start: Date; end: Date }) => void;
-export type ProgressEventHandler = (taskId: string, progress: number) => void;
-export type SelectionEventHandler = (selectedTasks: string[]) => void;
-export type ColumnResizeHandler = (columnField: string, newWidth: number) => void;
-
-// Gantt Actions (for useReducer)
-export type GanttAction =
-  | { type: 'SET_TASKS'; payload: GanttTask[] }
-  | { type: 'UPDATE_TASK'; payload: { id: string; updates: Partial<GanttTask> } }
-  | { type: 'ADD_TASK'; payload: GanttTask }
-  | { type: 'DELETE_TASK'; payload: string }
-  | { type: 'SET_SELECTION'; payload: string[] }
-  | { type: 'SET_DRAG_STATE'; payload: DragState | null }
-  | { type: 'SET_ZOOM_LEVEL'; payload: number }
-  | { type: 'SET_SCROLL_POSITION'; payload: { x: number; y: number } }
-  | { type: 'SET_SPLITTER_POSITION'; payload: number }
-  | { type: 'TOGGLE_TASK_EXPANSION'; payload: string }
-  | { type: 'SET_VIEW_STATE'; payload: Partial<GanttViewState> }
-  | { type: 'UPDATE_COLUMN_WIDTH'; payload: { field: string; width: number } };
-
-// Main Gantt State
-export interface GanttState {
-  tasks: GanttTask[];
-  columns: ColumnConfig[];
-  timelineConfig: TimelineConfig;
-  virtualScrollConfig: VirtualScrollConfig;
-  dragState: DragState | null;
-  selectionState: SelectionState;
-  viewState: GanttViewState;
-  zoomLevels: ZoomLevel[];
-  performanceMetrics: PerformanceMetrics;
-}
-
-// Gantt Chart Props
-export interface AdvancedGanttProps {
-  // Data
-  tasks: GanttTask[];
-  columns?: ColumnConfig[];
-  
-  // Configuration
-  timelineConfig?: Partial<TimelineConfig>;
-  virtualScrollConfig?: Partial<VirtualScrollConfig>;
-  zoomLevels?: ZoomLevel[];
-  
-  // Initial State
-  initialViewState?: Partial<GanttViewState>;
-  initialSelection?: string[];
-  
-  // Event Handlers
-  onTaskUpdate?: (taskId: string, updates: Partial<GanttTask>) => void;
-  onTaskCreate?: (task: Omit<GanttTask, 'id'>) => void;
-  onTaskDelete?: (taskId: string) => void;
-  onTaskMove?: DragEventHandler;
-  onTaskResize?: ResizeEventHandler;
-  onProgressChange?: ProgressEventHandler;
-  onSelectionChange?: SelectionEventHandler;
-  onColumnResize?: ColumnResizeHandler;
-  onDependencyCreate?: (fromTaskId: string, toTaskId: string) => void;
-  onDependencyDelete?: (fromTaskId: string, toTaskId: string) => void;
-  
-  // UI Customization
-  className?: string;
-  style?: React.CSSProperties;
-  theme?: 'light' | 'dark' | 'auto';
-  locale?: string;
-  
-  // Feature Flags
-  enableDragDrop?: boolean;
-  enableResize?: boolean;
-  enableProgressEdit?: boolean;
-  enableInlineEdit?: boolean;
-  enableContextMenu?: boolean;
-  enableTooltips?: boolean;
-  enableExport?: boolean;
-  enablePrint?: boolean;
-  
-  // Performance Options
-  enableVirtualScrolling?: boolean;
-  enableDebouncing?: boolean;
-  debounceDelay?: number;
-  maxVisibleTasks?: number;
-}
-
-// Context Menu Options
-export interface ContextMenuOption {
-  id: string;
-  label: string;
-  icon?: ReactNode;
-  disabled?: boolean;
-  separator?: boolean;
-  children?: ContextMenuOption[];
-  onClick?: (task?: GanttTask) => void;
-}
-
-// Export Options
-export interface ExportOptions {
-  format: 'png' | 'pdf' | 'svg' | 'json' | 'csv' | 'xlsx';
-  includeColumns?: string[];
-  dateRange?: { start: Date; end: Date };
-  filename?: string;
-  paperSize?: 'A4' | 'A3' | 'Letter' | 'Legal';
-  orientation?: 'portrait' | 'landscape';
-  scale?: number;
-}
-
-// Filter and Search
-export interface FilterConfig {
-  field: string;
-  operator: 'equals' | 'contains' | 'startsWith' | 'endsWith' | 'greaterThan' | 'lessThan' | 'between';
-  value: any;
-  logic?: 'and' | 'or';
-}
-
-export interface SearchConfig {
-  query: string;
-  fields: string[];
-  caseSensitive?: boolean;
-  wholeWord?: boolean;
-  regex?: boolean;
-}
-
-// Baseline and Critical Path
-export interface TaskBaseline {
-  taskId: string;
-  baselineStart: Date;
-  baselineEnd: Date;
-  baselineDuration: number;
-  baselineProgress: number;
-  variance?: number; // days
-}
-
-export interface CriticalPath {
-  taskIds: string[];
-  totalDuration: number;
-  slack: number; // days of buffer
-}
-
-// Undo/Redo
-export interface HistoryState {
-  past: GanttState[];
-  present: GanttState;
-  future: GanttState[];
-  maxHistorySize: number;
-}
-
-// Keyboard Shortcuts
-export interface KeyboardShortcut {
-  key: string;
-  ctrl?: boolean;
-  shift?: boolean;
-  alt?: boolean;
-  action: string;
-  description: string;
-  handler: (event: KeyboardEvent) => void;
-}

worklenz-frontend/src/types/project-roadmap.types.ts

@@ -1,62 +0,0 @@
-export interface ProjectPhase {
-  id: string;
-  name: string;
-  description: string;
-  startDate: Date;
-  endDate: Date;
-  progress: number;
-  color: string;
-  status: 'not-started' | 'in-progress' | 'completed' | 'on-hold';
-  tasks: PhaseTask[];
-  milestones: PhaseMilestone[];
-}
-
-export interface PhaseTask {
-  id: string;
-  name: string;
-  description?: string;
-  startDate: Date;
-  endDate: Date;
-  progress: number;
-  assigneeId?: string;
-  assigneeName?: string;
-  priority: 'low' | 'medium' | 'high';
-  status: 'todo' | 'in-progress' | 'done';
-  dependencies?: string[];
-}
-
-export interface PhaseMilestone {
-  id: string;
-  name: string;
-  description?: string;
-  dueDate: Date;
-  isCompleted: boolean;
-  criticalPath: boolean;
-}
-
-export interface ProjectRoadmap {
-  id: string;
-  projectId: string;
-  name: string;
-  description?: string;
-  startDate: Date;
-  endDate: Date;
-  phases: ProjectPhase[];
-  createdAt: Date;
-  updatedAt: Date;
-}
-
-export interface GanttViewOptions {
-  viewMode: 'day' | 'week' | 'month' | 'year';
-  showTasks: boolean;
-  showMilestones: boolean;
-  groupByPhase: boolean;
-}
-
-export interface PhaseModalData extends ProjectPhase {
-  taskCount: number;
-  completedTaskCount: number;
-  milestoneCount: number;
-  completedMilestoneCount: number;
-  teamMembers: string[];
-}

worklenz-frontend/src/types/task-management.types.ts

@@ -62,6 +62,7 @@ export interface TaskGroup {
   taskIds: string[];
   type?: 'status' | 'priority' | 'phase' | 'members';
   color?: string;
+  color_code_dark?: string;
   collapsed?: boolean;
   groupValue?: string;
   // Add any other group properties as needed

worklenz-frontend/src/utils/gantt-performance.ts

@@ -1,408 +0,0 @@
-import { useMemo, useCallback, useRef, useEffect } from 'react';
-import { GanttTask, PerformanceMetrics } from '../types/advanced-gantt.types';
-
-// Debounce utility for drag operations
-export function useDebounce<T extends (...args: any[]) => any>(
-  callback: T,
-  delay: number
-): T {
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  
-  return useCallback((...args: Parameters<T>) => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    
-    timeoutRef.current = setTimeout(() => {
-      callback(...args);
-    }, delay);
-  }, [callback, delay]) as T;
-}
-
-// Throttle utility for scroll events
-export function useThrottle<T extends (...args: any[]) => any>(
-  callback: T,
-  delay: number
-): T {
-  const lastCall = useRef<number>(0);
-  
-  return useCallback((...args: Parameters<T>) => {
-    const now = Date.now();
-    if (now - lastCall.current >= delay) {
-      lastCall.current = now;
-      callback(...args);
-    }
-  }, [callback, delay]) as T;
-}
-
-// Memoized task calculations
-export const useTaskCalculations = (tasks: GanttTask[]) => {
-  return useMemo(() => {
-    const taskMap = new Map<string, GanttTask>();
-    const parentChildMap = new Map<string, string[]>();
-    const dependencyMap = new Map<string, string[]>();
-    
-    // Build maps for efficient lookups
-    tasks.forEach(task => {
-      taskMap.set(task.id, task);
-      
-      if (task.parent) {
-        if (!parentChildMap.has(task.parent)) {
-          parentChildMap.set(task.parent, []);
-        }
-        parentChildMap.get(task.parent)!.push(task.id);
-      }
-      
-      if (task.dependencies) {
-        dependencyMap.set(task.id, task.dependencies);
-      }
-    });
-    
-    return {
-      taskMap,
-      parentChildMap,
-      dependencyMap,
-      totalTasks: tasks.length,
-      projectTasks: tasks.filter(t => t.type === 'project'),
-      milestones: tasks.filter(t => t.type === 'milestone'),
-      regularTasks: tasks.filter(t => t.type === 'task'),
-    };
-  }, [tasks]);
-};
-
-// Virtual scrolling calculations
-export interface VirtualScrollData {
-  startIndex: number;
-  endIndex: number;
-  visibleItems: GanttTask[];
-  totalHeight: number;
-  offsetY: number;
-}
-
-export const useVirtualScrolling = (
-  tasks: GanttTask[],
-  containerHeight: number,
-  itemHeight: number,
-  scrollTop: number,
-  overscan: number = 5
-): VirtualScrollData => {
-  return useMemo(() => {
-    const totalHeight = tasks.length * itemHeight;
-    const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
-    const endIndex = Math.min(
-      tasks.length - 1,
-      Math.ceil((scrollTop + containerHeight) / itemHeight) + overscan
-    );
-    const visibleItems = tasks.slice(startIndex, endIndex + 1);
-    const offsetY = startIndex * itemHeight;
-    
-    return {
-      startIndex,
-      endIndex,
-      visibleItems,
-      totalHeight,
-      offsetY,
-    };
-  }, [tasks, containerHeight, itemHeight, scrollTop, overscan]);
-};
-
-// Timeline virtual scrolling
-export interface TimelineVirtualData {
-  startDate: Date;
-  endDate: Date;
-  visibleDays: Date[];
-  totalWidth: number;
-  offsetX: number;
-}
-
-export const useTimelineVirtualScrolling = (
-  projectStartDate: Date,
-  projectEndDate: Date,
-  dayWidth: number,
-  containerWidth: number,
-  scrollLeft: number,
-  overscan: number = 10
-): TimelineVirtualData => {
-  return useMemo(() => {
-    const totalDays = Math.ceil((projectEndDate.getTime() - projectStartDate.getTime()) / (1000 * 60 * 60 * 24));
-    const totalWidth = totalDays * dayWidth;
-    
-    const startDayIndex = Math.max(0, Math.floor(scrollLeft / dayWidth) - overscan);
-    const endDayIndex = Math.min(
-      totalDays - 1,
-      Math.ceil((scrollLeft + containerWidth) / dayWidth) + overscan
-    );
-    
-    const visibleDays: Date[] = [];
-    for (let i = startDayIndex; i <= endDayIndex; i++) {
-      const date = new Date(projectStartDate);
-      date.setDate(date.getDate() + i);
-      visibleDays.push(date);
-    }
-    
-    const offsetX = startDayIndex * dayWidth;
-    const startDate = new Date(projectStartDate);
-    startDate.setDate(startDate.getDate() + startDayIndex);
-    
-    const endDate = new Date(projectStartDate);
-    endDate.setDate(endDate.getDate() + endDayIndex);
-    
-    return {
-      startDate,
-      endDate,
-      visibleDays,
-      totalWidth,
-      offsetX,
-    };
-  }, [projectStartDate, projectEndDate, dayWidth, containerWidth, scrollLeft, overscan]);
-};
-
-// Performance monitoring hook
-export const usePerformanceMonitoring = (): {
-  metrics: PerformanceMetrics;
-  startMeasure: (name: string) => void;
-  endMeasure: (name: string) => void;
-  recordMetric: (name: string, value: number) => void;
-} => {
-  const metricsRef = useRef<PerformanceMetrics>({
-    renderTime: 0,
-    taskCount: 0,
-    visibleTaskCount: 0,
-  });
-  
-  const measurementsRef = useRef<Map<string, number>>(new Map());
-  
-  const startMeasure = useCallback((name: string) => {
-    measurementsRef.current.set(name, performance.now());
-  }, []);
-  
-  const endMeasure = useCallback((name: string) => {
-    const startTime = measurementsRef.current.get(name);
-    if (startTime) {
-      const duration = performance.now() - startTime;
-      measurementsRef.current.delete(name);
-      
-      if (name === 'render') {
-        metricsRef.current.renderTime = duration;
-      }
-    }
-  }, []);
-  
-  const recordMetric = useCallback((name: string, value: number) => {
-    switch (name) {
-      case 'taskCount':
-        metricsRef.current.taskCount = value;
-        break;
-      case 'visibleTaskCount':
-        metricsRef.current.visibleTaskCount = value;
-        break;
-      case 'memoryUsage':
-        metricsRef.current.memoryUsage = value;
-        break;
-      case 'fps':
-        metricsRef.current.fps = value;
-        break;
-    }
-  }, []);
-  
-  return {
-    metrics: metricsRef.current,
-    startMeasure,
-    endMeasure,
-    recordMetric,
-  };
-};
-
-// Intersection Observer for lazy loading
-export const useIntersectionObserver = (
-  callback: (entries: IntersectionObserverEntry[]) => void,
-  options?: IntersectionObserverInit
-) => {
-  const targetRef = useRef<HTMLElement>(null);
-  const observerRef = useRef<IntersectionObserver>();
-  
-  useEffect(() => {
-    if (!targetRef.current) return;
-    
-    observerRef.current = new IntersectionObserver(callback, {
-      root: null,
-      rootMargin: '100px',
-      threshold: 0.1,
-      ...options,
-    });
-    
-    observerRef.current.observe(targetRef.current);
-    
-    return () => {
-      if (observerRef.current) {
-        observerRef.current.disconnect();
-      }
-    };
-  }, [callback, options]);
-  
-  return targetRef;
-};
-
-// Date calculations optimization
-export const useDateCalculations = () => {
-  return useMemo(() => {
-    const cache = new Map<string, number>();
-    
-    const getDaysBetween = (start: Date, end: Date): number => {
-      const key = `${start.getTime()}-${end.getTime()}`;
-      if (cache.has(key)) {
-        return cache.get(key)!;
-      }
-      
-      const days = Math.ceil((end.getTime() - start.getTime()) / (1000 * 60 * 60 * 24));
-      cache.set(key, days);
-      return days;
-    };
-    
-    const addDays = (date: Date, days: number): Date => {
-      const result = new Date(date);
-      result.setDate(result.getDate() + days);
-      return result;
-    };
-    
-    const isWeekend = (date: Date): boolean => {
-      const day = date.getDay();
-      return day === 0 || day === 6; // Sunday or Saturday
-    };
-    
-    const isWorkingDay = (date: Date, workingDays: number[]): boolean => {
-      return workingDays.includes(date.getDay());
-    };
-    
-    const getWorkingDaysBetween = (start: Date, end: Date, workingDays: number[]): number => {
-      let count = 0;
-      const current = new Date(start);
-      
-      while (current <= end) {
-        if (isWorkingDay(current, workingDays)) {
-          count++;
-        }
-        current.setDate(current.getDate() + 1);
-      }
-      
-      return count;
-    };
-    
-    return {
-      getDaysBetween,
-      addDays,
-      isWeekend,
-      isWorkingDay,
-      getWorkingDaysBetween,
-      clearCache: () => cache.clear(),
-    };
-  }, []);
-};
-
-// Task position calculations
-export const useTaskPositions = (
-  tasks: GanttTask[],
-  timelineStart: Date,
-  dayWidth: number
-) => {
-  return useMemo(() => {
-    const positions = new Map<string, { x: number; width: number; y: number }>();
-    
-    tasks.forEach((task, index) => {
-      const startDays = Math.floor((task.startDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
-      const endDays = Math.floor((task.endDate.getTime() - timelineStart.getTime()) / (1000 * 60 * 60 * 24));
-      
-      positions.set(task.id, {
-        x: startDays * dayWidth,
-        width: Math.max(1, (endDays - startDays) * dayWidth),
-        y: index * 40, // Assuming 40px row height
-      });
-    });
-    
-    return positions;
-  }, [tasks, timelineStart, dayWidth]);
-};
-
-// Memory management utilities
-export const useMemoryManagement = () => {
-  const cleanupFunctions = useRef<Array<() => void>>([]);
-  
-  const addCleanup = useCallback((cleanup: () => void) => {
-    cleanupFunctions.current.push(cleanup);
-  }, []);
-  
-  const runCleanup = useCallback(() => {
-    cleanupFunctions.current.forEach(cleanup => cleanup());
-    cleanupFunctions.current = [];
-  }, []);
-  
-  useEffect(() => {
-    return runCleanup;
-  }, [runCleanup]);
-  
-  return { addCleanup, runCleanup };
-};
-
-// Batch update utility for multiple task changes
-export const useBatchUpdates = <T>(
-  updateFunction: (updates: T[]) => void,
-  delay: number = 100
-) => {
-  const batchRef = useRef<T[]>([]);
-  const timeoutRef = useRef<NodeJS.Timeout>();
-  
-  const addUpdate = useCallback((update: T) => {
-    batchRef.current.push(update);
-    
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    
-    timeoutRef.current = setTimeout(() => {
-      if (batchRef.current.length > 0) {
-        updateFunction([...batchRef.current]);
-        batchRef.current = [];
-      }
-    }, delay);
-  }, [updateFunction, delay]);
-  
-  const flushUpdates = useCallback(() => {
-    if (timeoutRef.current) {
-      clearTimeout(timeoutRef.current);
-    }
-    
-    if (batchRef.current.length > 0) {
-      updateFunction([...batchRef.current]);
-      batchRef.current = [];
-    }
-  }, [updateFunction]);
-  
-  return { addUpdate, flushUpdates };
-};
-
-// FPS monitoring
-export const useFPSMonitoring = () => {
-  const fpsRef = useRef<number>(0);
-  const frameCountRef = useRef<number>(0);
-  const lastTimeRef = useRef<number>(performance.now());
-  
-  const measureFPS = useCallback(() => {
-    frameCountRef.current++;
-    const now = performance.now();
-    
-    if (now - lastTimeRef.current >= 1000) {
-      fpsRef.current = Math.round((frameCountRef.current * 1000) / (now - lastTimeRef.current));
-      frameCountRef.current = 0;
-      lastTimeRef.current = now;
-    }
-    
-    requestAnimationFrame(measureFPS);
-  }, []);
-  
-  useEffect(() => {
-    const rafId = requestAnimationFrame(measureFPS);
-    return () => cancelAnimationFrame(rafId);
-  }, [measureFPS]);
-  
-  return fpsRef.current;
-};