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.

.claude/settings.local.json

@@ -0,0 +1,11 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find:*)",
+      "Bash(npm run build:*)",
+      "Bash(npm run type-check:*)",
+      "Bash(npm run:*)"
+    ],
+    "deny": []
+  }
+}

test_sort_fix.sql

@@ -0,0 +1,41 @@
+-- Test script to verify the sort order constraint fix
+
+-- Test the helper function
+SELECT get_sort_column_name('status');    -- Should return 'status_sort_order'
+SELECT get_sort_column_name('priority');  -- Should return 'priority_sort_order'
+SELECT get_sort_column_name('phase');     -- Should return 'phase_sort_order'
+SELECT get_sort_column_name('members');   -- Should return 'member_sort_order'
+SELECT get_sort_column_name('unknown');   -- Should return 'status_sort_order' (default)
+
+-- Test bulk update function (example - would need real project_id and task_ids)
+/*
+SELECT update_task_sort_orders_bulk(
+    '[
+        {"task_id": "example-uuid", "sort_order": 1, "status_id": "status-uuid"},
+        {"task_id": "example-uuid-2", "sort_order": 2, "status_id": "status-uuid"}
+    ]'::json,
+    'status'
+);
+*/
+
+-- Verify that sort_order constraint still exists and works
+SELECT 
+    tc.constraint_name,
+    tc.table_name,
+    kcu.column_name
+FROM information_schema.table_constraints tc
+JOIN information_schema.key_column_usage kcu 
+    ON tc.constraint_name = kcu.constraint_name
+WHERE tc.constraint_name = 'tasks_sort_order_unique';
+
+-- Check that new sort order columns don't have unique constraints (which is correct)
+SELECT 
+    tc.constraint_name,
+    tc.table_name,
+    kcu.column_name
+FROM information_schema.table_constraints tc
+JOIN information_schema.key_column_usage kcu 
+    ON tc.constraint_name = kcu.constraint_name
+WHERE kcu.table_name = 'tasks'
+  AND kcu.column_name IN ('status_sort_order', 'priority_sort_order', 'phase_sort_order', 'member_sort_order')
+  AND tc.constraint_type = 'UNIQUE';

test_sort_orders.sql

@@ -0,0 +1,30 @@
+-- Test script to validate the separate sort order implementation
+
+-- Check if new columns exist
+SELECT column_name, data_type, is_nullable, column_default
+FROM information_schema.columns 
+WHERE table_name = 'tasks' 
+  AND column_name IN ('status_sort_order', 'priority_sort_order', 'phase_sort_order', 'member_sort_order')
+ORDER BY column_name;
+
+-- Check if helper function exists
+SELECT routine_name, routine_type
+FROM information_schema.routines 
+WHERE routine_name IN ('get_sort_column_name', 'update_task_sort_orders_bulk', 'handle_task_list_sort_order_change');
+
+-- Sample test data to verify different sort orders work
+-- (This would be run after the migrations)
+/*
+-- Test: Tasks should have different orders for different groupings
+SELECT 
+  id, 
+  name, 
+  sort_order, 
+  status_sort_order, 
+  priority_sort_order, 
+  phase_sort_order, 
+  member_sort_order
+FROM tasks 
+WHERE project_id = '<test-project-id>'
+ORDER BY status_sort_order;
+*/

worklenz-backend/.pgmrc.json

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

worklenz-backend/database/migrations/fix_duplicate_sort_orders.sql

@@ -0,0 +1,300 @@
+-- Fix Duplicate Sort Orders Script
+-- This script detects and fixes duplicate sort order values that break task ordering
+
+-- 1. DETECTION QUERIES - Run these first to see the scope of the problem
+
+-- Check for duplicates in main sort_order column
+SELECT 
+    project_id,
+    sort_order,
+    COUNT(*) as duplicate_count,
+    STRING_AGG(id::text, ', ') as task_ids
+FROM tasks 
+WHERE project_id IS NOT NULL
+GROUP BY project_id, sort_order 
+HAVING COUNT(*) > 1
+ORDER BY project_id, sort_order;
+
+-- Check for duplicates in status_sort_order
+SELECT 
+    project_id,
+    status_sort_order,
+    COUNT(*) as duplicate_count,
+    STRING_AGG(id::text, ', ') as task_ids
+FROM tasks 
+WHERE project_id IS NOT NULL
+GROUP BY project_id, status_sort_order 
+HAVING COUNT(*) > 1
+ORDER BY project_id, status_sort_order;
+
+-- Check for duplicates in priority_sort_order
+SELECT 
+    project_id,
+    priority_sort_order,
+    COUNT(*) as duplicate_count,
+    STRING_AGG(id::text, ', ') as task_ids
+FROM tasks 
+WHERE project_id IS NOT NULL
+GROUP BY project_id, priority_sort_order 
+HAVING COUNT(*) > 1
+ORDER BY project_id, priority_sort_order;
+
+-- Check for duplicates in phase_sort_order
+SELECT 
+    project_id,
+    phase_sort_order,
+    COUNT(*) as duplicate_count,
+    STRING_AGG(id::text, ', ') as task_ids
+FROM tasks 
+WHERE project_id IS NOT NULL
+GROUP BY project_id, phase_sort_order 
+HAVING COUNT(*) > 1
+ORDER BY project_id, phase_sort_order;
+
+-- Note: member_sort_order removed - no longer used
+
+-- 2. CLEANUP FUNCTIONS
+
+-- Fix duplicates in main sort_order column
+CREATE OR REPLACE FUNCTION fix_sort_order_duplicates() RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _project RECORD;
+    _task RECORD;
+    _counter INTEGER;
+BEGIN
+    -- For each project, reassign sort_order values to ensure uniqueness
+    FOR _project IN 
+        SELECT DISTINCT project_id 
+        FROM tasks 
+        WHERE project_id IS NOT NULL
+    LOOP
+        _counter := 0;
+        
+        -- Reassign sort_order values sequentially for this project
+        FOR _task IN 
+            SELECT id 
+            FROM tasks 
+            WHERE project_id = _project.project_id 
+            ORDER BY sort_order, created_at
+        LOOP
+            UPDATE tasks 
+            SET sort_order = _counter 
+            WHERE id = _task.id;
+            
+            _counter := _counter + 1;
+        END LOOP;
+    END LOOP;
+    
+    RAISE NOTICE 'Fixed sort_order duplicates for all projects';
+END
+$$;
+
+-- Fix duplicates in status_sort_order column
+CREATE OR REPLACE FUNCTION fix_status_sort_order_duplicates() RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _project RECORD;
+    _task RECORD;
+    _counter INTEGER;
+BEGIN
+    FOR _project IN 
+        SELECT DISTINCT project_id 
+        FROM tasks 
+        WHERE project_id IS NOT NULL
+    LOOP
+        _counter := 0;
+        
+        FOR _task IN 
+            SELECT id 
+            FROM tasks 
+            WHERE project_id = _project.project_id 
+            ORDER BY status_sort_order, created_at
+        LOOP
+            UPDATE tasks 
+            SET status_sort_order = _counter 
+            WHERE id = _task.id;
+            
+            _counter := _counter + 1;
+        END LOOP;
+    END LOOP;
+    
+    RAISE NOTICE 'Fixed status_sort_order duplicates for all projects';
+END
+$$;
+
+-- Fix duplicates in priority_sort_order column
+CREATE OR REPLACE FUNCTION fix_priority_sort_order_duplicates() RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _project RECORD;
+    _task RECORD;
+    _counter INTEGER;
+BEGIN
+    FOR _project IN 
+        SELECT DISTINCT project_id 
+        FROM tasks 
+        WHERE project_id IS NOT NULL
+    LOOP
+        _counter := 0;
+        
+        FOR _task IN 
+            SELECT id 
+            FROM tasks 
+            WHERE project_id = _project.project_id 
+            ORDER BY priority_sort_order, created_at
+        LOOP
+            UPDATE tasks 
+            SET priority_sort_order = _counter 
+            WHERE id = _task.id;
+            
+            _counter := _counter + 1;
+        END LOOP;
+    END LOOP;
+    
+    RAISE NOTICE 'Fixed priority_sort_order duplicates for all projects';
+END
+$$;
+
+-- Fix duplicates in phase_sort_order column
+CREATE OR REPLACE FUNCTION fix_phase_sort_order_duplicates() RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _project RECORD;
+    _task RECORD;
+    _counter INTEGER;
+BEGIN
+    FOR _project IN 
+        SELECT DISTINCT project_id 
+        FROM tasks 
+        WHERE project_id IS NOT NULL
+    LOOP
+        _counter := 0;
+        
+        FOR _task IN 
+            SELECT id 
+            FROM tasks 
+            WHERE project_id = _project.project_id 
+            ORDER BY phase_sort_order, created_at
+        LOOP
+            UPDATE tasks 
+            SET phase_sort_order = _counter 
+            WHERE id = _task.id;
+            
+            _counter := _counter + 1;
+        END LOOP;
+    END LOOP;
+    
+    RAISE NOTICE 'Fixed phase_sort_order duplicates for all projects';
+END
+$$;
+
+-- Note: fix_member_sort_order_duplicates() removed - no longer needed
+
+-- Master function to fix all sort order duplicates
+CREATE OR REPLACE FUNCTION fix_all_duplicate_sort_orders() RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    RAISE NOTICE 'Starting sort order cleanup for all columns...';
+    
+    PERFORM fix_sort_order_duplicates();
+    PERFORM fix_status_sort_order_duplicates();
+    PERFORM fix_priority_sort_order_duplicates();
+    PERFORM fix_phase_sort_order_duplicates();
+    
+    RAISE NOTICE 'Completed sort order cleanup for all columns';
+END
+$$;
+
+-- 3. VERIFICATION FUNCTION
+
+-- Verify that duplicates have been fixed
+CREATE OR REPLACE FUNCTION verify_sort_order_integrity() RETURNS TABLE(
+    column_name text,
+    project_id uuid,
+    duplicate_count bigint,
+    status text
+)
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    -- Check sort_order duplicates
+    RETURN QUERY
+    SELECT 
+        'sort_order'::text as column_name,
+        t.project_id,
+        COUNT(*) as duplicate_count,
+        CASE WHEN COUNT(*) > 1 THEN 'DUPLICATES FOUND' ELSE 'OK' END as status
+    FROM tasks t
+    WHERE t.project_id IS NOT NULL
+    GROUP BY t.project_id, t.sort_order
+    HAVING COUNT(*) > 1;
+    
+    -- Check status_sort_order duplicates
+    RETURN QUERY
+    SELECT 
+        'status_sort_order'::text as column_name,
+        t.project_id,
+        COUNT(*) as duplicate_count,
+        CASE WHEN COUNT(*) > 1 THEN 'DUPLICATES FOUND' ELSE 'OK' END as status
+    FROM tasks t
+    WHERE t.project_id IS NOT NULL
+    GROUP BY t.project_id, t.status_sort_order
+    HAVING COUNT(*) > 1;
+    
+    -- Check priority_sort_order duplicates
+    RETURN QUERY
+    SELECT 
+        'priority_sort_order'::text as column_name,
+        t.project_id,
+        COUNT(*) as duplicate_count,
+        CASE WHEN COUNT(*) > 1 THEN 'DUPLICATES FOUND' ELSE 'OK' END as status
+    FROM tasks t
+    WHERE t.project_id IS NOT NULL
+    GROUP BY t.project_id, t.priority_sort_order
+    HAVING COUNT(*) > 1;
+    
+    -- Check phase_sort_order duplicates
+    RETURN QUERY
+    SELECT 
+        'phase_sort_order'::text as column_name,
+        t.project_id,
+        COUNT(*) as duplicate_count,
+        CASE WHEN COUNT(*) > 1 THEN 'DUPLICATES FOUND' ELSE 'OK' END as status
+    FROM tasks t
+    WHERE t.project_id IS NOT NULL
+    GROUP BY t.project_id, t.phase_sort_order
+    HAVING COUNT(*) > 1;
+    
+    -- Note: member_sort_order verification removed - column no longer used
+    
+END
+$$;
+
+-- 4. USAGE INSTRUCTIONS
+
+/*
+USAGE:
+
+1. First, run the detection queries to see which projects have duplicates
+2. Then run this to fix all duplicates:
+   SELECT fix_all_duplicate_sort_orders();
+3. Finally, verify the fix worked:
+   SELECT * FROM verify_sort_order_integrity();
+   
+If verification returns no rows, all duplicates have been fixed successfully.
+
+WARNING: This will reassign sort order values based on current order + creation time.
+Make sure to backup your database before running these functions.
+*/

worklenz-backend/database/migrations/release-2.1.2/20250715000000-add-grouping-sort-orders.sql

@@ -0,0 +1,37 @@
+-- Migration: Add separate sort order columns for different grouping types
+-- This allows users to maintain different task orders when switching between grouping views
+
+-- Add new sort order columns
+ALTER TABLE tasks ADD COLUMN IF NOT EXISTS status_sort_order INTEGER DEFAULT 0;
+ALTER TABLE tasks ADD COLUMN IF NOT EXISTS priority_sort_order INTEGER DEFAULT 0;
+ALTER TABLE tasks ADD COLUMN IF NOT EXISTS phase_sort_order INTEGER DEFAULT 0;
+ALTER TABLE tasks ADD COLUMN IF NOT EXISTS member_sort_order INTEGER DEFAULT 0;
+
+-- Initialize new columns with current sort_order values
+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
+ALTER TABLE tasks ADD CONSTRAINT tasks_status_sort_order_check CHECK (status_sort_order >= 0);
+ALTER TABLE tasks ADD CONSTRAINT tasks_priority_sort_order_check CHECK (priority_sort_order >= 0);
+ALTER TABLE tasks ADD CONSTRAINT tasks_phase_sort_order_check CHECK (phase_sort_order >= 0);
+ALTER TABLE tasks ADD CONSTRAINT tasks_member_sort_order_check CHECK (member_sort_order >= 0);
+
+-- Add indexes for performance (since these will be used for ordering)
+CREATE INDEX IF NOT EXISTS idx_tasks_status_sort_order ON tasks(project_id, status_sort_order);
+CREATE INDEX IF NOT EXISTS idx_tasks_priority_sort_order ON tasks(project_id, priority_sort_order);
+CREATE INDEX IF NOT EXISTS idx_tasks_phase_sort_order ON tasks(project_id, phase_sort_order);
+CREATE INDEX IF NOT EXISTS idx_tasks_member_sort_order ON tasks(project_id, member_sort_order);
+
+-- Update comments for documentation
+COMMENT ON COLUMN tasks.status_sort_order IS 'Sort order when grouped by status';
+COMMENT ON COLUMN tasks.priority_sort_order IS 'Sort order when grouped by priority';
+COMMENT ON COLUMN tasks.phase_sort_order IS 'Sort order when grouped by phase';
+COMMENT ON COLUMN tasks.member_sort_order IS 'Sort order when grouped by members/assignees';

worklenz-backend/database/migrations/release-2.1.2/20250715000001-update-sort-functions.sql

@@ -0,0 +1,172 @@
+-- Migration: Update database functions to handle grouping-specific sort orders
+
+-- Function to get the appropriate sort column name based on grouping type
+CREATE OR REPLACE FUNCTION get_sort_column_name(_group_by TEXT) RETURNS TEXT
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    CASE _group_by
+        WHEN 'status' THEN RETURN 'status_sort_order';
+        WHEN 'priority' THEN RETURN 'priority_sort_order';
+        WHEN 'phase' THEN RETURN 'phase_sort_order';
+        WHEN 'members' THEN RETURN 'member_sort_order';
+        ELSE RETURN 'sort_order'; -- fallback to general sort_order
+    END CASE;
+END;
+$$;
+
+-- Updated bulk sort order function to handle different sort columns
+CREATE OR REPLACE FUNCTION update_task_sort_orders_bulk(_updates json, _group_by text DEFAULT 'status') RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _update_record RECORD;
+    _sort_column TEXT;
+    _sql TEXT;
+BEGIN
+    -- Get the appropriate sort column based on grouping
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- 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 the appropriate sort column and other fields using dynamic SQL
+        -- Only update sort_order if we're using the default sorting
+        IF _sort_column = 'sort_order' THEN
+            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;
+        ELSE
+            -- Update only the grouping-specific sort column, not the main sort_order
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, ' ||
+                    'status_id = COALESCE($2, status_id), ' ||
+                    'priority_id = COALESCE($3, priority_id) ' ||
+                    'WHERE id = $4';
+            
+            EXECUTE _sql USING 
+                _update_record.sort_order,
+                _update_record.status_id,
+                _update_record.priority_id,
+                _update_record.task_id;
+        END IF;
+        
+        -- 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;
+$$;
+
+-- Updated main sort order change handler
+CREATE OR REPLACE FUNCTION handle_task_list_sort_order_change(_body json) RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _from_index INT;
+    _to_index   INT;
+    _task_id    UUID;
+    _project_id UUID;
+    _from_group UUID;
+    _to_group   UUID;
+    _group_by   TEXT;
+    _batch_size INT := 100;
+    _sort_column TEXT;
+    _sql TEXT;
+BEGIN
+    _project_id = (_body ->> 'project_id')::UUID;
+    _task_id = (_body ->> 'task_id')::UUID;
+    _from_index = (_body ->> 'from_index')::INT;
+    _to_index = (_body ->> 'to_index')::INT;
+    _from_group = (_body ->> 'from_group')::UUID;
+    _to_group = (_body ->> 'to_group')::UUID;
+    _group_by = (_body ->> 'group_by')::TEXT;
+    
+    -- Get the appropriate sort column
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Handle group changes
+    IF (_from_group <> _to_group OR (_from_group <> _to_group) IS NULL) THEN
+        IF (_group_by = 'status') THEN
+            UPDATE tasks 
+            SET status_id = _to_group 
+            WHERE id = _task_id 
+              AND status_id = _from_group
+              AND project_id = _project_id;
+        END IF;
+        
+        IF (_group_by = 'priority') THEN
+            UPDATE tasks 
+            SET priority_id = _to_group 
+            WHERE id = _task_id 
+              AND priority_id = _from_group
+              AND project_id = _project_id;
+        END IF;
+        
+        IF (_group_by = 'phase') THEN
+            IF (is_null_or_empty(_to_group) IS FALSE) THEN
+                INSERT INTO task_phase (task_id, phase_id)
+                VALUES (_task_id, _to_group)
+                ON CONFLICT (task_id) DO UPDATE SET phase_id = _to_group;
+            ELSE
+                DELETE FROM task_phase WHERE task_id = _task_id;
+            END IF;
+        END IF;
+    END IF;
+
+    -- Handle sort order changes using dynamic SQL
+    IF (_from_index <> _to_index) THEN
+        -- For the main sort_order column, we need to be careful about unique constraints
+        IF _sort_column = 'sort_order' THEN
+            -- Use a transaction-safe approach for the main sort_order column
+            IF (_to_index > _from_index) THEN
+                -- Moving down: decrease sort_order for items between old and new position
+                UPDATE tasks SET sort_order = sort_order - 1 
+                WHERE project_id = _project_id 
+                  AND sort_order > _from_index 
+                  AND sort_order <= _to_index;
+            ELSE
+                -- Moving up: increase sort_order for items between new and old position  
+                UPDATE tasks SET sort_order = sort_order + 1 
+                WHERE project_id = _project_id 
+                  AND sort_order >= _to_index 
+                  AND sort_order < _from_index;
+            END IF;
+            
+            -- Set the new sort_order for the moved task
+            UPDATE tasks SET sort_order = _to_index WHERE id = _task_id;
+        ELSE
+            -- For grouping-specific columns, use dynamic SQL since there's no unique constraint
+            IF (_to_index > _from_index) THEN
+                -- Moving down: decrease sort_order for items between old and new position
+                _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' - 1 ' ||
+                       'WHERE project_id = $1 AND ' || _sort_column || ' > $2 AND ' || _sort_column || ' <= $3';
+                EXECUTE _sql USING _project_id, _from_index, _to_index;
+            ELSE
+                -- Moving up: increase sort_order for items between new and old position  
+                _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' + 1 ' ||
+                       'WHERE project_id = $1 AND ' || _sort_column || ' >= $2 AND ' || _sort_column || ' < $3';
+                EXECUTE _sql USING _project_id, _to_index, _from_index;
+            END IF;
+            
+            -- Set the new sort_order for the moved task
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1 WHERE id = $2';
+            EXECUTE _sql USING _to_index, _task_id;
+        END IF;
+    END IF;
+END;
+$$;

worklenz-backend/database/migrations/release-2.1.2/20250715000002-fix-sort-constraint.sql

@@ -0,0 +1,179 @@
+-- Migration: Fix sort order constraint violations
+
+-- First, let's ensure all existing tasks have unique sort_order values within each project
+-- This is a one-time fix to ensure data consistency
+
+DO $$
+DECLARE
+    _project RECORD;
+    _task RECORD;
+    _counter INTEGER;
+BEGIN
+    -- For each project, reassign sort_order values to ensure uniqueness
+    FOR _project IN 
+        SELECT DISTINCT project_id 
+        FROM tasks 
+        WHERE project_id IS NOT NULL
+    LOOP
+        _counter := 0;
+        
+        -- Reassign sort_order values sequentially for this project
+        FOR _task IN 
+            SELECT id 
+            FROM tasks 
+            WHERE project_id = _project.project_id 
+            ORDER BY sort_order, created_at
+        LOOP
+            UPDATE tasks 
+            SET sort_order = _counter 
+            WHERE id = _task.id;
+            
+            _counter := _counter + 1;
+        END LOOP;
+    END LOOP;
+END
+$$;
+
+-- Now create a better version of our functions that properly handles the constraints
+
+-- Updated bulk sort order function that avoids sort_order conflicts
+CREATE OR REPLACE FUNCTION update_task_sort_orders_bulk(_updates json, _group_by text DEFAULT 'status') RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _update_record RECORD;
+    _sort_column TEXT;
+    _sql TEXT;
+BEGIN
+    -- Get the appropriate sort column based on grouping
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Process each update record
+    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 the grouping-specific sort column and other fields
+        _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, ' ||
+                'status_id = COALESCE($2, status_id), ' ||
+                'priority_id = COALESCE($3, priority_id), ' ||
+                'updated_at = CURRENT_TIMESTAMP ' ||
+                'WHERE id = $4';
+        
+        EXECUTE _sql USING 
+            _update_record.sort_order,
+            _update_record.status_id,
+            _update_record.priority_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;
+$$;
+
+-- Also update the helper function to be more explicit
+CREATE OR REPLACE FUNCTION get_sort_column_name(_group_by TEXT) RETURNS TEXT
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    CASE _group_by
+        WHEN 'status' THEN RETURN 'status_sort_order';
+        WHEN 'priority' THEN RETURN 'priority_sort_order';
+        WHEN 'phase' THEN RETURN 'phase_sort_order';
+        WHEN 'members' THEN RETURN 'member_sort_order';
+        -- For backward compatibility, still support general sort_order but be explicit
+        WHEN 'general' THEN RETURN 'sort_order';
+        ELSE RETURN 'status_sort_order'; -- Default to status sorting
+    END CASE;
+END;
+$$;
+
+-- Updated main sort order change handler that avoids conflicts
+CREATE OR REPLACE FUNCTION handle_task_list_sort_order_change(_body json) RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _from_index INT;
+    _to_index   INT;
+    _task_id    UUID;
+    _project_id UUID;
+    _from_group UUID;
+    _to_group   UUID;
+    _group_by   TEXT;
+    _sort_column TEXT;
+    _sql TEXT;
+BEGIN
+    _project_id = (_body ->> 'project_id')::UUID;
+    _task_id = (_body ->> 'task_id')::UUID;
+    _from_index = (_body ->> 'from_index')::INT;
+    _to_index = (_body ->> 'to_index')::INT;
+    _from_group = (_body ->> 'from_group')::UUID;
+    _to_group = (_body ->> 'to_group')::UUID;
+    _group_by = (_body ->> 'group_by')::TEXT;
+    
+    -- Get the appropriate sort column
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Handle group changes first
+    IF (_from_group <> _to_group OR (_from_group <> _to_group) IS NULL) THEN
+        IF (_group_by = 'status') THEN
+            UPDATE tasks 
+            SET status_id = _to_group, updated_at = CURRENT_TIMESTAMP
+            WHERE id = _task_id 
+              AND project_id = _project_id;
+        END IF;
+        
+        IF (_group_by = 'priority') THEN
+            UPDATE tasks 
+            SET priority_id = _to_group, updated_at = CURRENT_TIMESTAMP
+            WHERE id = _task_id 
+              AND project_id = _project_id;
+        END IF;
+        
+        IF (_group_by = 'phase') THEN
+            IF (is_null_or_empty(_to_group) IS FALSE) THEN
+                INSERT INTO task_phase (task_id, phase_id)
+                VALUES (_task_id, _to_group)
+                ON CONFLICT (task_id) DO UPDATE SET phase_id = _to_group;
+            ELSE
+                DELETE FROM task_phase WHERE task_id = _task_id;
+            END IF;
+        END IF;
+    END IF;
+
+    -- Handle sort order changes for the grouping-specific column only
+    IF (_from_index <> _to_index) THEN
+        -- Update the grouping-specific sort order (no unique constraint issues)
+        IF (_to_index > _from_index) THEN
+            -- Moving down: decrease sort order for items between old and new position
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' - 1, ' ||
+                   'updated_at = CURRENT_TIMESTAMP ' ||
+                   'WHERE project_id = $1 AND ' || _sort_column || ' > $2 AND ' || _sort_column || ' <= $3';
+            EXECUTE _sql USING _project_id, _from_index, _to_index;
+        ELSE
+            -- Moving up: increase sort order for items between new and old position  
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' + 1, ' ||
+                   'updated_at = CURRENT_TIMESTAMP ' ||
+                   'WHERE project_id = $1 AND ' || _sort_column || ' >= $2 AND ' || _sort_column || ' < $3';
+            EXECUTE _sql USING _project_id, _to_index, _from_index;
+        END IF;
+        
+        -- Set the new sort order for the moved task
+        _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2';
+        EXECUTE _sql USING _to_index, _task_id;
+    END IF;
+END;
+$$;

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,
@@ -1391,27 +1398,30 @@ ALTER TABLE task_work_log
         CHECK (time_spent >= (0)::NUMERIC);
 
 CREATE TABLE IF NOT EXISTS tasks (
-    id                 UUID                     DEFAULT uuid_generate_v4() NOT NULL,
-    name               TEXT                                                NOT NULL,
-    description        TEXT,
-    done               BOOLEAN                  DEFAULT FALSE              NOT NULL,
-    total_minutes      NUMERIC                  DEFAULT 0                  NOT NULL,
-    archived           BOOLEAN                  DEFAULT FALSE              NOT NULL,
-    task_no            BIGINT                                              NOT NULL,
-    start_date         TIMESTAMP WITH TIME ZONE,
-    end_date           TIMESTAMP WITH TIME ZONE,
-    priority_id        UUID                                                NOT NULL,
-    project_id         UUID                                                NOT NULL,
-    reporter_id        UUID                                                NOT NULL,
-    parent_task_id     UUID,
-    status_id          UUID                                                NOT NULL,
-    completed_at       TIMESTAMP WITH TIME ZONE,
-    created_at         TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP  NOT NULL,
-    updated_at         TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP  NOT NULL,
-    sort_order         INTEGER                  DEFAULT 0                  NOT NULL,
-    roadmap_sort_order INTEGER                  DEFAULT 0                  NOT NULL,
-    billable           BOOLEAN                  DEFAULT TRUE,
-    schedule_id        UUID
+    id                  UUID                     DEFAULT uuid_generate_v4() NOT NULL,
+    name                TEXT                                                NOT NULL,
+    description         TEXT,
+    done                BOOLEAN                  DEFAULT FALSE              NOT NULL,
+    total_minutes       NUMERIC                  DEFAULT 0                  NOT NULL,
+    archived            BOOLEAN                  DEFAULT FALSE              NOT NULL,
+    task_no             BIGINT                                              NOT NULL,
+    start_date          TIMESTAMP WITH TIME ZONE,
+    end_date            TIMESTAMP WITH TIME ZONE,
+    priority_id         UUID                                                NOT NULL,
+    project_id          UUID                                                NOT NULL,
+    reporter_id         UUID                                                NOT NULL,
+    parent_task_id      UUID,
+    status_id           UUID                                                NOT NULL,
+    completed_at        TIMESTAMP WITH TIME ZONE,
+    created_at          TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    updated_at          TIMESTAMP WITH TIME ZONE DEFAULT CURRENT_TIMESTAMP  NOT NULL,
+    sort_order          INTEGER                  DEFAULT 0                  NOT NULL,
+    roadmap_sort_order  INTEGER                  DEFAULT 0                  NOT NULL,
+    status_sort_order   INTEGER                  DEFAULT 0                  NOT NULL,
+    priority_sort_order INTEGER                  DEFAULT 0                  NOT NULL,
+    phase_sort_order    INTEGER                  DEFAULT 0                  NOT NULL,
+    billable            BOOLEAN                  DEFAULT TRUE,
+    schedule_id         UUID
 );
 
 ALTER TABLE tasks
@@ -1499,6 +1509,21 @@ ALTER TABLE tasks
     ADD CONSTRAINT tasks_total_minutes_check
         CHECK ((total_minutes >= (0)::NUMERIC) AND (total_minutes <= (999999)::NUMERIC));
 
+-- Add constraints for new sort order columns
+ALTER TABLE tasks ADD CONSTRAINT tasks_status_sort_order_check CHECK (status_sort_order >= 0);
+ALTER TABLE tasks ADD CONSTRAINT tasks_priority_sort_order_check CHECK (priority_sort_order >= 0);
+ALTER TABLE tasks ADD CONSTRAINT tasks_phase_sort_order_check CHECK (phase_sort_order >= 0);
+
+-- Add indexes for performance on new sort order columns
+CREATE INDEX IF NOT EXISTS idx_tasks_status_sort_order ON tasks(project_id, status_sort_order);
+CREATE INDEX IF NOT EXISTS idx_tasks_priority_sort_order ON tasks(project_id, priority_sort_order);
+CREATE INDEX IF NOT EXISTS idx_tasks_phase_sort_order ON tasks(project_id, phase_sort_order);
+
+-- Add comments for documentation
+COMMENT ON COLUMN tasks.status_sort_order IS 'Sort order when grouped by status';
+COMMENT ON COLUMN tasks.priority_sort_order IS 'Sort order when grouped by priority';
+COMMENT ON COLUMN tasks.phase_sort_order IS 'Sort order when grouped by phase';
+
 CREATE TABLE IF NOT EXISTS tasks_assignees (
     task_id           UUID                                               NOT NULL,
     project_member_id UUID                                               NOT NULL,

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

@@ -4313,6 +4313,24 @@ BEGIN
 END
 $$;
 
+-- Helper function to get the appropriate sort column name based on grouping type
+CREATE OR REPLACE FUNCTION get_sort_column_name(_group_by TEXT) RETURNS TEXT
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    CASE _group_by
+        WHEN 'status' THEN RETURN 'status_sort_order';
+        WHEN 'priority' THEN RETURN 'priority_sort_order';
+        WHEN 'phase' THEN RETURN 'phase_sort_order';
+        WHEN 'members' THEN RETURN 'member_sort_order';
+        -- For backward compatibility, still support general sort_order but be explicit
+        WHEN 'general' THEN RETURN 'sort_order';
+        ELSE RETURN 'status_sort_order'; -- Default to status sorting
+    END CASE;
+END;
+$$;
+
 CREATE OR REPLACE FUNCTION handle_task_list_sort_order_change(_body json) RETURNS void
     LANGUAGE plpgsql
 AS
@@ -4325,66 +4343,67 @@ DECLARE
     _from_group UUID;
     _to_group   UUID;
     _group_by   TEXT;
-    _batch_size INT := 100; -- PERFORMANCE OPTIMIZATION: Batch size for large updates
+    _sort_column TEXT;
+    _sql TEXT;
 BEGIN
     _project_id = (_body ->> 'project_id')::UUID;
     _task_id = (_body ->> 'task_id')::UUID;
-
-    _from_index = (_body ->> 'from_index')::INT; -- from sort_order
-    _to_index = (_body ->> 'to_index')::INT; -- to sort_order
-
+    _from_index = (_body ->> 'from_index')::INT;
+    _to_index = (_body ->> 'to_index')::INT;
     _from_group = (_body ->> 'from_group')::UUID;
     _to_group = (_body ->> 'to_group')::UUID;
-
     _group_by = (_body ->> 'group_by')::TEXT;
-
-    -- PERFORMANCE OPTIMIZATION: Use CTE for better query planning
-    IF (_from_group <> _to_group OR (_from_group <> _to_group) IS NULL)
-    THEN
-        -- PERFORMANCE OPTIMIZATION: Batch update group changes
-        IF (_group_by = 'status')
-        THEN
+    
+    -- Get the appropriate sort column
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Handle group changes first
+    IF (_from_group <> _to_group OR (_from_group <> _to_group) IS NULL) THEN
+        IF (_group_by = 'status') THEN
             UPDATE tasks 
-            SET status_id = _to_group 
+            SET status_id = _to_group, updated_at = CURRENT_TIMESTAMP
             WHERE id = _task_id 
-              AND status_id = _from_group
               AND project_id = _project_id;
         END IF;
-
-        IF (_group_by = 'priority')
-        THEN
+        
+        IF (_group_by = 'priority') THEN
             UPDATE tasks 
-            SET priority_id = _to_group 
+            SET priority_id = _to_group, updated_at = CURRENT_TIMESTAMP
             WHERE id = _task_id 
-              AND priority_id = _from_group
               AND project_id = _project_id;
         END IF;
-
-        IF (_group_by = 'phase')
-        THEN
-            IF (is_null_or_empty(_to_group) IS FALSE)
-            THEN
+        
+        IF (_group_by = 'phase') THEN
+            IF (is_null_or_empty(_to_group) IS FALSE) THEN
                 INSERT INTO task_phase (task_id, phase_id)
                 VALUES (_task_id, _to_group)
                 ON CONFLICT (task_id) DO UPDATE SET phase_id = _to_group;
-            END IF;
-            IF (is_null_or_empty(_to_group) IS TRUE)
-            THEN
-                DELETE
-                FROM task_phase
-                WHERE task_id = _task_id;
+            ELSE
+                DELETE FROM task_phase WHERE task_id = _task_id;
             END IF;
         END IF;
+    END IF;
 
-        -- PERFORMANCE OPTIMIZATION: Optimized sort order handling
-        IF ((_body ->> 'to_last_index')::BOOLEAN IS TRUE AND _from_index < _to_index)
-        THEN
-            PERFORM handle_task_list_sort_inside_group_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
+    -- Handle sort order changes for the grouping-specific column only
+    IF (_from_index <> _to_index) THEN
+        -- Update the grouping-specific sort order (no unique constraint issues)
+        IF (_to_index > _from_index) THEN
+            -- Moving down: decrease sort order for items between old and new position
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' - 1, ' ||
+                   'updated_at = CURRENT_TIMESTAMP ' ||
+                   'WHERE project_id = $1 AND ' || _sort_column || ' > $2 AND ' || _sort_column || ' <= $3';
+            EXECUTE _sql USING _project_id, _from_index, _to_index;
         ELSE
-            PERFORM handle_task_list_sort_between_groups_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
+            -- Moving up: increase sort order for items between new and old position  
+            _sql := 'UPDATE tasks SET ' || _sort_column || ' = ' || _sort_column || ' + 1, ' ||
+                   'updated_at = CURRENT_TIMESTAMP ' ||
+                   'WHERE project_id = $1 AND ' || _sort_column || ' >= $2 AND ' || _sort_column || ' < $3';
+            EXECUTE _sql USING _project_id, _to_index, _from_index;
         END IF;
-    ELSE
-        PERFORM handle_task_list_sort_inside_group_optimized(_from_index, _to_index, _task_id, _project_id, _batch_size);
+        
+        -- Set the new sort order for the moved task
+        _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, updated_at = CURRENT_TIMESTAMP WHERE id = $2';
+        EXECUTE _sql USING _to_index, _task_id;
     END IF;
 END
 $$;
@@ -4589,31 +4608,31 @@ BEGIN
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
     VALUES (_project_id, 'Progress', 'PROGRESS', 3, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Members', 'ASSIGNEES', 4, TRUE);
+    VALUES (_project_id, 'Status', 'STATUS', 4, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Labels', 'LABELS', 5, TRUE);
+    VALUES (_project_id, 'Members', 'ASSIGNEES', 5, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Status', 'STATUS', 6, TRUE);
+    VALUES (_project_id, 'Labels', 'LABELS', 6, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Priority', 'PRIORITY', 7, TRUE);
+    VALUES (_project_id, 'Phase', 'PHASE', 7, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Time Tracking', 'TIME_TRACKING', 8, TRUE);
+    VALUES (_project_id, 'Priority', 'PRIORITY', 8, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Estimation', 'ESTIMATION', 9, FALSE);
+    VALUES (_project_id, 'Time Tracking', 'TIME_TRACKING', 9, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Start Date', 'START_DATE', 10, FALSE);
+    VALUES (_project_id, 'Estimation', 'ESTIMATION', 10, FALSE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Due Date', 'DUE_DATE', 11, TRUE);
+    VALUES (_project_id, 'Start Date', 'START_DATE', 11, FALSE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Completed Date', 'COMPLETED_DATE', 12, FALSE);
+    VALUES (_project_id, 'Due Date', 'DUE_DATE', 12, TRUE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Created Date', 'CREATED_DATE', 13, FALSE);
+    VALUES (_project_id, 'Completed Date', 'COMPLETED_DATE', 13, FALSE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Last Updated', 'LAST_UPDATED', 14, FALSE);
+    VALUES (_project_id, 'Created Date', 'CREATED_DATE', 14, FALSE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Reporter', 'REPORTER', 15, FALSE);
+    VALUES (_project_id, 'Last Updated', 'LAST_UPDATED', 15, FALSE);
     INSERT INTO project_task_list_cols (project_id, name, key, index, pinned)
-    VALUES (_project_id, 'Phase', 'PHASE', 16, FALSE);
+    VALUES (_project_id, 'Reporter', 'REPORTER', 16, FALSE);
 END
 $$;
 
@@ -6521,15 +6540,20 @@ BEGIN
 END
 $$;
 
--- Simple function to update task sort orders in bulk
-CREATE OR REPLACE FUNCTION update_task_sort_orders_bulk(_updates json) RETURNS void
+-- Updated bulk sort order function that avoids sort_order conflicts
+CREATE OR REPLACE FUNCTION update_task_sort_orders_bulk(_updates json, _group_by text DEFAULT 'status') RETURNS void
     LANGUAGE plpgsql
 AS
 $$
 DECLARE
     _update_record RECORD;
+    _sort_column TEXT;
+    _sql TEXT;
 BEGIN
-    -- Simple approach: update each task's sort_order from the provided array
+    -- Get the appropriate sort column based on grouping
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Process each update record
     FOR _update_record IN 
         SELECT 
             (item->>'task_id')::uuid as task_id,
@@ -6539,12 +6563,18 @@ BEGIN
             (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;
+        -- Update the grouping-specific sort column and other fields
+        _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, ' ||
+                'status_id = COALESCE($2, status_id), ' ||
+                'priority_id = COALESCE($3, priority_id), ' ||
+                'updated_at = CURRENT_TIMESTAMP ' ||
+                'WHERE id = $4';
+        
+        EXECUTE _sql USING 
+            _update_record.sort_order,
+            _update_record.status_id,
+            _update_record.priority_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
@@ -6555,3 +6585,66 @@ BEGIN
     END LOOP;
 END
 $$;
+
+-- Function to get the appropriate sort column name based on grouping type
+CREATE OR REPLACE FUNCTION get_sort_column_name(_group_by TEXT) RETURNS TEXT
+    LANGUAGE plpgsql
+AS
+$$
+BEGIN
+    CASE _group_by
+        WHEN 'status' THEN RETURN 'status_sort_order';
+        WHEN 'priority' THEN RETURN 'priority_sort_order';
+        WHEN 'phase' THEN RETURN 'phase_sort_order';
+        -- For backward compatibility, still support general sort_order but be explicit
+        WHEN 'general' THEN RETURN 'sort_order';
+        ELSE RETURN 'status_sort_order'; -- Default to status sorting
+    END CASE;
+END;
+$$;
+
+-- Updated bulk sort order function to handle different sort columns
+CREATE OR REPLACE FUNCTION update_task_sort_orders_bulk(_updates json, _group_by text DEFAULT 'status') RETURNS void
+    LANGUAGE plpgsql
+AS
+$$
+DECLARE
+    _update_record RECORD;
+    _sort_column TEXT;
+    _sql TEXT;
+BEGIN
+    -- Get the appropriate sort column based on grouping
+    _sort_column := get_sort_column_name(_group_by);
+    
+    -- Process each update record
+    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 the grouping-specific sort column and other fields
+        _sql := 'UPDATE tasks SET ' || _sort_column || ' = $1, ' ||
+                'status_id = COALESCE($2, status_id), ' ||
+                'priority_id = COALESCE($3, priority_id), ' ||
+                'updated_at = CURRENT_TIMESTAMP ' ||
+                'WHERE id = $4';
+        
+        EXECUTE _sql USING 
+            _update_record.sort_order,
+            _update_record.status_id,
+            _update_record.priority_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;
+$$;

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",
-  1: "#fbc84c",
-  2: "#f37070"
+  0: "#2E8B57",
+  1: "#DAA520",
+  2: "#CD5C5C"
 };
 
 export const PriorityColorCodesDark: { [x: number]: string; } = {
-  0: "#46D980",
-  1: "#FFC227",
-  2: "#FF4141"
+  0: "#3CB371",
+  1: "#B8860B",
+  2: "#F08080"
 };
 
 export const TASK_STATUS_TODO_COLOR = "#a9a9a9";
 export const TASK_STATUS_DOING_COLOR = "#70a6f3";
 export const TASK_STATUS_DONE_COLOR = "#75c997";
 
-export const TASK_PRIORITY_LOW_COLOR = "#75c997";
-export const TASK_PRIORITY_MEDIUM_COLOR = "#fbc84c";
-export const TASK_PRIORITY_HIGH_COLOR = "#f37070";
+export const TASK_PRIORITY_LOW_COLOR = "#2E8B57";
+export const TASK_PRIORITY_MEDIUM_COLOR = "#DAA520";
+export const TASK_PRIORITY_HIGH_COLOR = "#CD5C5C";
 
 export const TASK_DUE_COMPLETED_COLOR = "#75c997";
 export const TASK_DUE_UPCOMING_COLOR = "#70a6f3";

worklenz-backend/src/socket.io/commands/on-task-sort-order-change.ts

@@ -53,11 +53,27 @@ function notifyStatusChange(socket: Socket, config: Config) {
 }
 
 async function emitSortOrderChange(data: ChangeRequest, socket: Socket) {
+  // Determine which sort column to use based on group_by
+  let sortColumn = "sort_order";
+  switch (data.group_by) {
+    case "status":
+      sortColumn = "status_sort_order";
+      break;
+    case "priority":
+      sortColumn = "priority_sort_order";
+      break;
+    case "phase":
+      sortColumn = "phase_sort_order";
+      break;
+    default:
+      sortColumn = "sort_order";
+  }
+
   const q = `
-    SELECT id, sort_order, completed_at
+    SELECT id, sort_order, ${sortColumn} as current_sort_order, completed_at
     FROM tasks
     WHERE project_id = $1
-    ORDER BY sort_order;
+    ORDER BY ${sortColumn};
   `;
   const tasks = await db.query(q, [data.project_id]);
   socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), tasks.rows);
@@ -84,9 +100,9 @@ export async function on_task_sort_order_change(_io: Server, socket: Socket, dat
         }
       }
 
-      // Use the simple bulk update function
-      const q = `SELECT update_task_sort_orders_bulk($1);`;
-      await db.query(q, [JSON.stringify(data.task_updates)]);
+      // Use the simple bulk update function with group_by parameter
+      const q = `SELECT update_task_sort_orders_bulk($1, $2);`;
+      await db.query(q, [JSON.stringify(data.task_updates), data.group_by || "status"]);
       await emitSortOrderChange(data, socket);
       
       // Handle notifications and logging

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

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

worklenz-frontend/public/locales/alb/task-drawer/task-drawer.json

@@ -1,37 +1,43 @@
 {
   "taskHeader": {
-    "taskNamePlaceholder": "Shkruani Detyrën tuaj",
-    "deleteTask": "Fshi Detyrën"
+    "taskNamePlaceholder": "Shkruani detyrën tuaj",
+    "deleteTask": "Fshi detyrën",
+    "parentTask": "Detyra kryesore",
+    "currentTask": "Detyra aktuale",
+    "back": "Kthehu",
+    "backToParent": "Kthehu te detyra kryesore",
+    "toParentTask": "te detyra kryesore",
+    "loadingHierarchy": "Duke ngarkuar hierarkinë..."
   },
   "taskInfoTab": {
     "title": "Informacioni",
     "details": {
       "title": "Detajet",
-      "task-key": "Çelësi i Detyrës",
+      "task-key": "Çelësi i detyrës",
       "phase": "Faza",
-      "assignees": "Të Caktuar",
-      "due-date": "Data e Përfundimit",
-      "time-estimation": "Vlerësimi i Kohës",
+      "assignees": "Të caktuarit",
+      "due-date": "Data e përfundimit",
+      "time-estimation": "Vlerësimi i kohës",
       "priority": "Prioriteti",
       "labels": "Etiketat",
-      "billable": "E Faturueshme",
+      "billable": "I faturueshëm",
       "notify": "Njofto",
       "when-done-notify": "Kur përfundon, njofto",
-      "start-date": "Data e Fillimit",
-      "end-date": "Data e Përfundimit",
-      "hide-start-date": "Fshih Datën e Fillimit",
-      "show-start-date": "Shfaq Datën e Fillimit",
+      "start-date": "Data e fillimit",
+      "end-date": "Data e përfundimit",
+      "hide-start-date": "Fshih datën e fillimit",
+      "show-start-date": "Shfaq datën e fillimit",
       "hours": "Orë",
       "minutes": "Minuta",
-      "progressValue": "Vlera e Progresit",
-      "progressValueTooltip": "Vendosni përqindjen e progresit (0-100%)",
+      "progressValue": "Vlera e progresit",
+      "progressValueTooltip": "Vendos përqindjen e progresit (0-100%)",
       "progressValueRequired": "Ju lutemi vendosni një vlerë progresi",
       "progressValueRange": "Progresi duhet të jetë midis 0 dhe 100",
-      "taskWeight": "Pesha e Detyrës",
-      "taskWeightTooltip": "Vendosni peshën e kësaj nëndetyre (përqindje)",
+      "taskWeight": "Pesha e detyrës",
+      "taskWeightTooltip": "Vendos peshën e kësaj nëndetyre (përqindje)",
       "taskWeightRequired": "Ju lutemi vendosni një peshë detyre",
       "taskWeightRange": "Pesha duhet të jetë midis 0 dhe 100",
-      "recurring": "E Përsëritur"
+      "recurring": "Përsëritëse"
     },
     "labels": {
       "labelInputPlaceholder": "Kërko ose krijo",
@@ -43,71 +49,71 @@
     },
     "subTasks": {
       "title": "Nëndetyrat",
-      "addSubTask": "Shto Nëndetyrë",
+      "addSubTask": "Shto nëndetyrë",
       "addSubTaskInputPlaceholder": "Shkruani detyrën tuaj dhe shtypni enter",
-      "refreshSubTasks": "Rifresko Nëndetyrat",
-      "edit": "Modifiko",
+      "refreshSubTasks": "Rifresko nëndetyrat",
+      "edit": "Redakto",
       "delete": "Fshi",
-      "confirmDeleteSubTask": "Jeni i sigurt që doni të fshini këtë nëndetyrë?",
-      "deleteSubTask": "Fshi Nëndetyrën"
+      "confirmDeleteSubTask": "Jeni i sigurt që dëshironi ta fshini këtë nëndetyrë?",
+      "deleteSubTask": "Fshi nëndetyrën"
     },
     "dependencies": {
       "title": "Varësitë",
       "addDependency": "+ Shto varësi të re",
       "blockedBy": "Bllokuar nga",
-      "searchTask": "Shkruani për të kërkuar detyrë",
+      "searchTask": "Shkruaj për të kërkuar detyrën",
       "noTasksFound": "Nuk u gjetën detyra",
-      "confirmDeleteDependency": "Jeni i sigurt që doni të fshini?"
+      "confirmDeleteDependency": "Jeni i sigurt që dëshironi ta fshini?"
     },
     "attachments": {
       "title": "Bashkëngjitjet",
-      "chooseOrDropFileToUpload": "Zgjidhni ose hidhni skedar për të ngarkuar",
+      "chooseOrDropFileToUpload": "Zgjidh ose lësho skedarin për ta ngarkuar",
       "uploading": "Duke ngarkuar..."
     },
     "comments": {
       "title": "Komentet",
       "addComment": "+ Shto koment të ri",
-      "noComments": "Ende pa komente. Bëhu i pari që komenton!",
+      "noComments": "Ende pa komente. Bëhu i pari që komentoni!",
       "delete": "Fshi",
-      "confirmDeleteComment": "Jeni i sigurt që doni të fshini këtë koment?",
+      "confirmDeleteComment": "Jeni i sigurt që dëshironi ta fshini këtë koment?",
       "addCommentPlaceholder": "Shto një koment...",
       "cancel": "Anulo",
       "commentButton": "Komento",
       "attachFiles": "Bashkëngjit skedarë",
       "addMoreFiles": "Shto më shumë skedarë",
-      "selectedFiles": "Skedarët e Zgjedhur (Deri në 25MB, Maksimumi {count})",
-      "maxFilesError": "Mund të ngarkoni maksimum {count} skedarë",
-      "processFilesError": "Dështoi përpunimi i skedarëve",
+      "selectedFiles": "Skedarët e zgjedhur (Deri në 25MB, Maksimumi {count})",
+      "maxFilesError": "Mund të ngarkoni maksimumi {count} skedarë",
+      "processFilesError": "Dështoi në përpunimin e skedarëve",
       "addCommentError": "Ju lutemi shtoni një koment ose bashkëngjitni skedarë",
       "createdBy": "Krijuar {{time}} nga {{user}}",
       "updatedTime": "Përditësuar {{time}}"
     },
     "searchInputPlaceholder": "Kërko sipas emrit",
-    "pendingInvitation": "Ftesë në Pritje"
+    "pendingInvitation": "Ftesë në pritje"
   },
   "taskTimeLogTab": {
-    "title": "Regjistri i Kohës",
-    "addTimeLog": "Shto regjistrim të ri kohe",
-    "totalLogged": "Totali i Regjistruar",
+    "title": "Regjistri i kohës",
+    "addTimeLog": "Shto regjistër të ri kohe",
+    "totalLogged": "Totali i regjistruar",
     "exportToExcel": "Eksporto në Excel",
-    "noTimeLogsFound": "Nuk u gjetën regjistra kohe",
+    "noTimeLogsFound": "Nuk u gjetën regjistrime kohe",
     "timeLogForm": {
       "date": "Data",
-      "startTime": "Koha e Fillimit",
-      "endTime": "Koha e Përfundimit",
-      "workDescription": "Përshkrimi i Punës",
+      "startTime": "Ora e fillimit",
+      "endTime": "Ora e përfundimit",
+      "workDescription": "Përshkrimi i punës",
       "descriptionPlaceholder": "Shto një përshkrim",
       "logTime": "Regjistro kohën",
       "updateTime": "Përditëso kohën",
       "cancel": "Anulo",
       "selectDateError": "Ju lutemi zgjidhni një datë",
-      "selectStartTimeError": "Ju lutemi zgjidhni kohën e fillimit",
-      "selectEndTimeError": "Ju lutemi zgjidhni kohën e përfundimit",
-      "endTimeAfterStartError": "Koha e përfundimit duhet të jetë pas kohës së fillimit"
+      "selectStartTimeError": "Ju lutemi zgjidhni orën e fillimit",
+      "selectEndTimeError": "Ju lutemi zgjidhni orën e përfundimit",
+      "endTimeAfterStartError": "Ora e përfundimit duhet të jetë pas orës së fillimit"
     }
   },
   "taskActivityLogTab": {
-    "title": "Regjistri i Aktivitetit",
+    "title": "Regjistri i aktivitetit",
     "add": "SHTO",
     "remove": "HIQE",
     "none": "Asnjë",
@@ -115,9 +121,9 @@
     "createdTask": "krijoi detyrën."
   },
   "taskProgress": {
-    "markAsDoneTitle": "Shëno Detyrën si të Kryer?",
-    "confirmMarkAsDone": "Po, shëno si të kryer",
-    "cancelMarkAsDone": "Jo, mbaj statusin aktual",
-    "markAsDoneDescription": "Keni vendosur progresin në 100%. Doni të përditësoni statusin e detyrës në \"Kryer\"?"
+    "markAsDoneTitle": "Shëno detyrën si të përfunduar?",
+    "confirmMarkAsDone": "Po, shënoje si të përfunduar",
+    "cancelMarkAsDone": "Jo, mbaj gjendjen aktuale",
+    "markAsDoneDescription": "Keni vendosur progresin në 100%. Dëshironi ta përditësoni gjendjen e detyrës në \"Përfunduar\"?"
   }
 }

worklenz-frontend/public/locales/alb/task-list-table.json

@@ -39,6 +39,7 @@
   "addTaskText": "Shto Detyrë",
   "addSubTaskText": "+ Shto Nën-Detyrë",
   "noTasksInGroup": "Nuk ka detyra në këtë grup",
+  "dropTaskHere": "Lëshoje detyrën këtu",
   "addTaskInputPlaceholder": "Shkruaj detyrën dhe shtyp Enter",
 
   "openButton": "Hap",

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

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

worklenz-frontend/public/locales/de/task-drawer/task-drawer.json

@@ -1,22 +1,28 @@
 {
   "taskHeader": {
     "taskNamePlaceholder": "Geben Sie Ihre Aufgabe ein",
-    "deleteTask": "Aufgabe löschen"
+    "deleteTask": "Aufgabe löschen",
+    "parentTask": "Übergeordnete Aufgabe",
+    "currentTask": "Aktuelle Aufgabe",
+    "back": "Zurück",
+    "backToParent": "Zurück zur übergeordneten Aufgabe",
+    "toParentTask": "zur übergeordneten Aufgabe",
+    "loadingHierarchy": "Hierarchie wird geladen..."
   },
   "taskInfoTab": {
     "title": "Info",
     "details": {
       "title": "Details",
-      "task-key": "Aufgaben-Schlüssel",
+      "task-key": "Aufgabenschlüssel",
       "phase": "Phase",
-      "assignees": "Beauftragte",
+      "assignees": "Zugewiesene",
       "due-date": "Fälligkeitsdatum",
       "time-estimation": "Zeitschätzung",
       "priority": "Priorität",
       "labels": "Labels",
       "billable": "Abrechenbar",
       "notify": "Benachrichtigen",
-      "when-done-notify": "Bei Abschluss benachrichtigen",
+      "when-done-notify": "Bei Fertigstellung benachrichtigen",
       "start-date": "Startdatum",
       "end-date": "Enddatum",
       "hide-start-date": "Startdatum ausblenden",
@@ -24,50 +30,50 @@
       "hours": "Stunden",
       "minutes": "Minuten",
       "progressValue": "Fortschrittswert",
-      "progressValueTooltip": "Fortschritt in Prozent einstellen (0-100%)",
+      "progressValueTooltip": "Setzen Sie den Fortschrittsprozentsatz (0-100%)",
       "progressValueRequired": "Bitte geben Sie einen Fortschrittswert ein",
       "progressValueRange": "Fortschritt muss zwischen 0 und 100 liegen",
       "taskWeight": "Aufgabengewicht",
-      "taskWeightTooltip": "Gewicht dieser Teilaufgabe festlegen (Prozent)",
+      "taskWeightTooltip": "Setzen Sie das Gewicht dieser Unteraufgabe (Prozentsatz)",
       "taskWeightRequired": "Bitte geben Sie ein Aufgabengewicht ein",
       "taskWeightRange": "Gewicht muss zwischen 0 und 100 liegen",
       "recurring": "Wiederkehrend"
     },
     "labels": {
       "labelInputPlaceholder": "Suchen oder erstellen",
-      "labelsSelectorInputTip": "Enter drücken zum Erstellen"
+      "labelsSelectorInputTip": "Drücken Sie Enter zum Erstellen"
     },
     "description": {
       "title": "Beschreibung",
-      "placeholder": "Detailliertere Beschreibung hinzufügen..."
+      "placeholder": "Fügen Sie eine detailliertere Beschreibung hinzu..."
     },
     "subTasks": {
-      "title": "Teilaufgaben",
-      "addSubTask": "Teilaufgabe hinzufügen",
+      "title": "Unteraufgaben",
+      "addSubTask": "Unteraufgabe hinzufügen",
       "addSubTaskInputPlaceholder": "Geben Sie Ihre Aufgabe ein und drücken Sie Enter",
-      "refreshSubTasks": "Teilaufgaben aktualisieren",
+      "refreshSubTasks": "Unteraufgaben aktualisieren",
       "edit": "Bearbeiten",
       "delete": "Löschen",
-      "confirmDeleteSubTask": "Sind Sie sicher, dass Sie diese Teilaufgabe löschen möchten?",
-      "deleteSubTask": "Teilaufgabe löschen"
+      "confirmDeleteSubTask": "Sind Sie sicher, dass Sie diese Unteraufgabe löschen möchten?",
+      "deleteSubTask": "Unteraufgabe löschen"
     },
     "dependencies": {
       "title": "Abhängigkeiten",
       "addDependency": "+ Neue Abhängigkeit hinzufügen",
       "blockedBy": "Blockiert von",
-      "searchTask": "Aufgabe suchen",
+      "searchTask": "Zum Suchen der Aufgabe eingeben",
       "noTasksFound": "Keine Aufgaben gefunden",
       "confirmDeleteDependency": "Sind Sie sicher, dass Sie löschen möchten?"
     },
     "attachments": {
       "title": "Anhänge",
-      "chooseOrDropFileToUpload": "Datei zum Hochladen wählen oder ablegen",
+      "chooseOrDropFileToUpload": "Datei zum Hochladen auswählen oder ablegen",
       "uploading": "Wird hochgeladen..."
     },
     "comments": {
       "title": "Kommentare",
       "addComment": "+ Neuen Kommentar hinzufügen",
-      "noComments": "Noch keine Kommentare. Seien Sie der Erste!",
+      "noComments": "Noch keine Kommentare. Seien Sie der Erste, der kommentiert!",
       "delete": "Löschen",
       "confirmDeleteComment": "Sind Sie sicher, dass Sie diesen Kommentar löschen möchten?",
       "addCommentPlaceholder": "Kommentar hinzufügen...",
@@ -75,9 +81,9 @@
       "commentButton": "Kommentieren",
       "attachFiles": "Dateien anhängen",
       "addMoreFiles": "Weitere Dateien hinzufügen",
-      "selectedFiles": "Ausgewählte Dateien (Bis zu 25MB, Maximum {count})",
+      "selectedFiles": "Ausgewählte Dateien (Bis zu 25MB, Maximum von {count})",
       "maxFilesError": "Sie können maximal {count} Dateien hochladen",
-      "processFilesError": "Fehler beim Verarbeiten der Dateien",
+      "processFilesError": "Dateien konnten nicht verarbeitet werden",
       "addCommentError": "Bitte fügen Sie einen Kommentar hinzu oder hängen Sie Dateien an",
       "createdBy": "Erstellt {{time}} von {{user}}",
       "updatedTime": "Aktualisiert {{time}}"
@@ -86,18 +92,18 @@
     "pendingInvitation": "Ausstehende Einladung"
   },
   "taskTimeLogTab": {
-    "title": "Zeiterfassung",
-    "addTimeLog": "Neuen Zeiteintrag hinzufügen",
-    "totalLogged": "Gesamt erfasst",
+    "title": "Zeitprotokoll",
+    "addTimeLog": "Neues Zeitprotokoll hinzufügen",
+    "totalLogged": "Gesamt protokolliert",
     "exportToExcel": "Nach Excel exportieren",
-    "noTimeLogsFound": "Keine Zeiteinträge gefunden",
+    "noTimeLogsFound": "Keine Zeitprotokolle gefunden",
     "timeLogForm": {
       "date": "Datum",
       "startTime": "Startzeit",
       "endTime": "Endzeit",
       "workDescription": "Arbeitsbeschreibung",
       "descriptionPlaceholder": "Beschreibung hinzufügen",
-      "logTime": "Zeit erfassen",
+      "logTime": "Zeit protokollieren",
       "updateTime": "Zeit aktualisieren",
       "cancel": "Abbrechen",
       "selectDateError": "Bitte wählen Sie ein Datum",

worklenz-frontend/public/locales/de/task-list-table.json

@@ -40,6 +40,7 @@
   "addSubTaskText": "+ Unteraufgabe hinzufügen",
   "addTaskInputPlaceholder": "Aufgabe eingeben und Enter drücken",
   "noTasksInGroup": "Keine Aufgaben in dieser Gruppe",
+  "dropTaskHere": "Aufgabe hier ablegen",
 
   "openButton": "Öffnen",
   "okButton": "OK",

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

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

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

@@ -1,7 +1,13 @@
 {
   "taskHeader": {
     "taskNamePlaceholder": "Type your Task",
-    "deleteTask": "Delete Task"
+    "deleteTask": "Delete Task",
+    "parentTask": "Parent Task",
+    "currentTask": "Current Task",
+    "back": "Back",
+    "backToParent": "Back to Parent Task",
+    "toParentTask": "to parent task",
+    "loadingHierarchy": "Loading hierarchy..."
   },
   "taskInfoTab": {
     "title": "Info",

worklenz-frontend/public/locales/en/task-list-table.json

@@ -40,6 +40,7 @@
   "addSubTaskText": "Add Sub Task",
   "addTaskInputPlaceholder": "Type your task and hit enter",
   "noTasksInGroup": "No tasks in this group",
+  "dropTaskHere": "Drop task here",
 
   "openButton": "Open",
   "okButton": "Ok",

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

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

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

@@ -1,35 +1,41 @@
 {
   "taskHeader": {
-    "taskNamePlaceholder": "Escriba su Tarea",
-    "deleteTask": "Eliminar Tarea"
+    "taskNamePlaceholder": "Escribe tu tarea",
+    "deleteTask": "Eliminar tarea",
+    "parentTask": "Tarea principal",
+    "currentTask": "Tarea actual",
+    "back": "Volver",
+    "backToParent": "Volver a la tarea principal",
+    "toParentTask": "a la tarea principal",
+    "loadingHierarchy": "Cargando jerarquía..."
   },
   "taskInfoTab": {
     "title": "Información",
     "details": {
       "title": "Detalles",
-      "task-key": "Clave de Tarea",
+      "task-key": "Clave de tarea",
       "phase": "Fase",
       "assignees": "Asignados",
-      "due-date": "Fecha de Vencimiento",
-      "time-estimation": "Estimación de Tiempo",
+      "due-date": "Fecha de vencimiento",
+      "time-estimation": "Estimación de tiempo",
       "priority": "Prioridad",
       "labels": "Etiquetas",
       "billable": "Facturable",
       "notify": "Notificar",
-      "when-done-notify": "Al terminar, notificar",
-      "start-date": "Fecha de Inicio",
-      "end-date": "Fecha de Fin",
-      "hide-start-date": "Ocultar Fecha de Inicio",
-      "show-start-date": "Mostrar Fecha de Inicio",
+      "when-done-notify": "Al finalizar, notificar",
+      "start-date": "Fecha de inicio",
+      "end-date": "Fecha de finalización",
+      "hide-start-date": "Ocultar fecha de inicio",
+      "show-start-date": "Mostrar fecha de inicio",
       "hours": "Horas",
       "minutes": "Minutos",
-      "progressValue": "Valor de Progreso",
+      "progressValue": "Valor de progreso",
       "progressValueTooltip": "Establecer el porcentaje de progreso (0-100%)",
-      "progressValueRequired": "Por favor, introduzca un valor de progreso",
+      "progressValueRequired": "Por favor ingrese un valor de progreso",
       "progressValueRange": "El progreso debe estar entre 0 y 100",
-      "taskWeight": "Peso de la Tarea",
+      "taskWeight": "Peso de la tarea",
       "taskWeightTooltip": "Establecer el peso de esta subtarea (porcentaje)",
-      "taskWeightRequired": "Por favor, introduzca un peso de tarea",
+      "taskWeightRequired": "Por favor ingrese un peso de tarea",
       "taskWeightRange": "El peso debe estar entre 0 y 100",
       "recurring": "Recurrente"
     },
@@ -39,85 +45,85 @@
     },
     "description": {
       "title": "Descripción",
-      "placeholder": "Añadir una descripción más detallada..."
+      "placeholder": "Añade una descripción más detallada..."
     },
     "subTasks": {
-      "title": "Sub Tareas",
-      "addSubTask": "Agregar Sub Tarea",
-      "addSubTaskInputPlaceholder": "Escriba su tarea y presione enter",
-      "refreshSubTasks": "Actualizar Sub Tareas",
+      "title": "Subtareas",
+      "addSubTask": "Añadir subtarea",
+      "addSubTaskInputPlaceholder": "Escribe tu tarea y presiona enter",
+      "refreshSubTasks": "Actualizar subtareas",
       "edit": "Editar",
       "delete": "Eliminar",
-      "confirmDeleteSubTask": "¿Está seguro de que desea eliminar esta subtarea?",
-      "deleteSubTask": "Eliminar Sub Tarea"
+      "confirmDeleteSubTask": "¿Estás seguro de que quieres eliminar esta subtarea?",
+      "deleteSubTask": "Eliminar subtarea"
     },
     "dependencies": {
       "title": "Dependencias",
-      "addDependency": "+ Agregar nueva dependencia",
+      "addDependency": "+ Añadir nueva dependencia",
       "blockedBy": "Bloqueado por",
-      "searchTask": "Escribir para buscar tarea",
+      "searchTask": "Escribe para buscar tarea",
       "noTasksFound": "No se encontraron tareas",
-      "confirmDeleteDependency": "¿Está seguro de que desea eliminar?"
+      "confirmDeleteDependency": "¿Estás seguro de que quieres eliminar?"
     },
     "attachments": {
       "title": "Adjuntos",
-      "chooseOrDropFileToUpload": "Elija o arrastre un archivo para subir",
+      "chooseOrDropFileToUpload": "Elige o arrastra archivo para subir",
       "uploading": "Subiendo..."
     },
     "comments": {
       "title": "Comentarios",
-      "addComment": "+ Agregar nuevo comentario",
+      "addComment": "+ Añadir nuevo comentario",
       "noComments": "Aún no hay comentarios. ¡Sé el primero en comentar!",
       "delete": "Eliminar",
-      "confirmDeleteComment": "¿Está seguro de que desea eliminar este comentario?",
-      "addCommentPlaceholder": "Agregar un comentario...",
+      "confirmDeleteComment": "¿Estás seguro de que quieres eliminar este comentario?",
+      "addCommentPlaceholder": "Añadir un comentario...",
       "cancel": "Cancelar",
       "commentButton": "Comentar",
       "attachFiles": "Adjuntar archivos",
-      "addMoreFiles": "Agregar más archivos",
-      "selectedFiles": "Archivos Seleccionados (Hasta 25MB, Máximo {count})",
-      "maxFilesError": "Solo puede subir un máximo de {count} archivos",
+      "addMoreFiles": "Añadir más archivos",
+      "selectedFiles": "Archivos seleccionados (Hasta 25MB, Máximo de {count})",
+      "maxFilesError": "Solo puedes subir un máximo de {count} archivos",
       "processFilesError": "Error al procesar archivos",
-      "addCommentError": "Por favor agregue un comentario o adjunte archivos",
+      "addCommentError": "Por favor añade un comentario o adjunta archivos",
       "createdBy": "Creado {{time}} por {{user}}",
       "updatedTime": "Actualizado {{time}}"
     },
     "searchInputPlaceholder": "Buscar por nombre",
-    "pendingInvitation": "Invitación Pendiente"
+    "pendingInvitation": "Invitación pendiente"
   },
   "taskTimeLogTab": {
-    "title": "Registro de Tiempo",
+    "title": "Registro de tiempo",
     "addTimeLog": "Añadir nuevo registro de tiempo",
-    "totalLogged": "Total Registrado",
+    "totalLogged": "Total registrado",
     "exportToExcel": "Exportar a Excel",
     "noTimeLogsFound": "No se encontraron registros de tiempo",
     "timeLogForm": {
       "date": "Fecha",
-      "startTime": "Hora de Inicio",
-      "endTime": "Hora de Fin",
-      "workDescription": "Descripción del Trabajo",
-      "descriptionPlaceholder": "Agregar una descripción",
+      "startTime": "Hora de inicio",
+      "endTime": "Hora de finalización",
+      "workDescription": "Descripción del trabajo",
+      "descriptionPlaceholder": "Añadir una descripción",
       "logTime": "Registrar tiempo",
       "updateTime": "Actualizar tiempo",
       "cancel": "Cancelar",
-      "selectDateError": "Por favor seleccione una fecha",
-      "selectStartTimeError": "Por favor seleccione la hora de inicio",
-      "selectEndTimeError": "Por favor seleccione la hora de fin",
-      "endTimeAfterStartError": "La hora de fin debe ser posterior a la hora de inicio"
+      "selectDateError": "Por favor selecciona una fecha",
+      "selectStartTimeError": "Por favor selecciona hora de inicio",
+      "selectEndTimeError": "Por favor selecciona hora de finalización",
+      "endTimeAfterStartError": "La hora de finalización debe ser posterior a la de inicio"
     }
   },
   "taskActivityLogTab": {
-    "title": "Registro de Actividad",
-    "add": "AGREGAR",
-    "remove": "QUITAR",
+    "title": "Registro de actividad",
+    "add": "AÑADIR",
+    "remove": "ELIMINAR",
     "none": "Ninguno",
     "weight": "Peso",
     "createdTask": "creó la tarea."
   },
   "taskProgress": {
-    "markAsDoneTitle": "¿Marcar Tarea como Completada?",
+    "markAsDoneTitle": "¿Marcar tarea como completada?",
     "confirmMarkAsDone": "Sí, marcar como completada",
     "cancelMarkAsDone": "No, mantener estado actual",
-    "markAsDoneDescription": "Ha establecido el progreso al 100%. ¿Le gustaría actualizar el estado de la tarea a \"Completada\"?"
+    "markAsDoneDescription": "Has establecido el progreso al 100%. ¿Te gustaría actualizar el estado de la tarea a \"Completada\"?"
   }
 }

worklenz-frontend/public/locales/es/task-list-table.json

@@ -39,6 +39,7 @@
   "addTaskText": "Agregar tarea",
   "addSubTaskText": "Agregar subtarea",
   "noTasksInGroup": "No hay tareas en este grupo",
+  "dropTaskHere": "Soltar tarea aquí",
   "addTaskInputPlaceholder": "Escribe tu tarea y presiona enter",
 
   "openButton": "Abrir",

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

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

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

@@ -1,33 +1,39 @@
 {
   "taskHeader": {
-    "taskNamePlaceholder": "Digite sua Tarefa",
-    "deleteTask": "Deletar Tarefa"
+    "taskNamePlaceholder": "Digite sua tarefa",
+    "deleteTask": "Excluir tarefa",
+    "parentTask": "Tarefa principal",
+    "currentTask": "Tarefa atual",
+    "back": "Voltar",
+    "backToParent": "Voltar à tarefa principal",
+    "toParentTask": "à tarefa principal",
+    "loadingHierarchy": "Carregando hierarquia..."
   },
   "taskInfoTab": {
     "title": "Informações",
     "details": {
       "title": "Detalhes",
-      "task-key": "Chave da Tarefa",
+      "task-key": "Chave da tarefa",
       "phase": "Fase",
       "assignees": "Responsáveis",
-      "due-date": "Data de Vencimento",
-      "time-estimation": "Estimativa de Tempo",
+      "due-date": "Data de vencimento",
+      "time-estimation": "Estimativa de tempo",
       "priority": "Prioridade",
       "labels": "Etiquetas",
       "billable": "Faturável",
       "notify": "Notificar",
-      "when-done-notify": "Quando concluído, notificar",
-      "start-date": "Data de Início",
-      "end-date": "Data de Fim",
-      "hide-start-date": "Ocultar Data de Início",
-      "show-start-date": "Mostrar Data de Início",
+      "when-done-notify": "Ao concluir, notificar",
+      "start-date": "Data de início",
+      "end-date": "Data de término",
+      "hide-start-date": "Ocultar data de início",
+      "show-start-date": "Mostrar data de início",
       "hours": "Horas",
       "minutes": "Minutos",
-      "progressValue": "Valor do Progresso",
+      "progressValue": "Valor do progresso",
       "progressValueTooltip": "Definir a porcentagem de progresso (0-100%)",
       "progressValueRequired": "Por favor, insira um valor de progresso",
       "progressValueRange": "O progresso deve estar entre 0 e 100",
-      "taskWeight": "Peso da Tarefa",
+      "taskWeight": "Peso da tarefa",
       "taskWeightTooltip": "Definir o peso desta subtarefa (porcentagem)",
       "taskWeightRequired": "Por favor, insira um peso da tarefa",
       "taskWeightRange": "O peso deve estar entre 0 e 100",
@@ -39,17 +45,17 @@
     },
     "description": {
       "title": "Descrição",
-      "placeholder": "Adicionar uma descrição mais detalhada..."
+      "placeholder": "Adicione uma descrição mais detalhada..."
     },
     "subTasks": {
-      "title": "Sub Tarefas",
-      "addSubTask": "Adicionar Sub Tarefa",
+      "title": "Subtarefas",
+      "addSubTask": "Adicionar subtarefa",
       "addSubTaskInputPlaceholder": "Digite sua tarefa e pressione enter",
-      "refreshSubTasks": "Atualizar Sub Tarefas",
+      "refreshSubTasks": "Atualizar subtarefas",
       "edit": "Editar",
-      "delete": "Deletar",
-      "confirmDeleteSubTask": "Tem certeza de que deseja deletar esta subtarefa?",
-      "deleteSubTask": "Deletar Sub Tarefa"
+      "delete": "Excluir",
+      "confirmDeleteSubTask": "Tem certeza de que deseja excluir esta subtarefa?",
+      "deleteSubTask": "Excluir subtarefa"
     },
     "dependencies": {
       "title": "Dependências",
@@ -57,57 +63,57 @@
       "blockedBy": "Bloqueado por",
       "searchTask": "Digite para pesquisar tarefa",
       "noTasksFound": "Nenhuma tarefa encontrada",
-      "confirmDeleteDependency": "Tem certeza de que deseja deletar?"
+      "confirmDeleteDependency": "Tem certeza de que deseja excluir?"
     },
     "attachments": {
       "title": "Anexos",
-      "chooseOrDropFileToUpload": "Escolha ou arraste um arquivo para upload",
+      "chooseOrDropFileToUpload": "Escolha ou arraste arquivo para enviar",
       "uploading": "Enviando..."
     },
     "comments": {
       "title": "Comentários",
       "addComment": "+ Adicionar novo comentário",
       "noComments": "Ainda não há comentários. Seja o primeiro a comentar!",
-      "delete": "Deletar",
-      "confirmDeleteComment": "Tem certeza de que deseja deletar este comentário?",
+      "delete": "Excluir",
+      "confirmDeleteComment": "Tem certeza de que deseja excluir este comentário?",
       "addCommentPlaceholder": "Adicionar um comentário...",
       "cancel": "Cancelar",
       "commentButton": "Comentar",
       "attachFiles": "Anexar arquivos",
       "addMoreFiles": "Adicionar mais arquivos",
-      "selectedFiles": "Arquivos Selecionados (Até 25MB, Máximo {count})",
-      "maxFilesError": "Você pode fazer upload de no máximo {count} arquivos",
+      "selectedFiles": "Arquivos selecionados (Até 25MB, Máximo de {count})",
+      "maxFilesError": "Você pode enviar no máximo {count} arquivos",
       "processFilesError": "Falha ao processar arquivos",
-      "addCommentError": "Por favor adicione um comentário ou anexe arquivos",
+      "addCommentError": "Por favor, adicione um comentário ou anexe arquivos",
       "createdBy": "Criado {{time}} por {{user}}",
       "updatedTime": "Atualizado {{time}}"
     },
     "searchInputPlaceholder": "Pesquisar por nome",
-    "pendingInvitation": "Convite Pendente"
+    "pendingInvitation": "Convite pendente"
   },
   "taskTimeLogTab": {
-    "title": "Registro de Tempo",
+    "title": "Registro de tempo",
     "addTimeLog": "Adicionar novo registro de tempo",
-    "totalLogged": "Total Registrado",
+    "totalLogged": "Total registrado",
     "exportToExcel": "Exportar para Excel",
     "noTimeLogsFound": "Nenhum registro de tempo encontrado",
     "timeLogForm": {
       "date": "Data",
-      "startTime": "Hora de Início",
-      "endTime": "Hora de Fim",
-      "workDescription": "Descrição do Trabalho",
+      "startTime": "Hora de início",
+      "endTime": "Hora de término",
+      "workDescription": "Descrição do trabalho",
       "descriptionPlaceholder": "Adicionar uma descrição",
       "logTime": "Registrar tempo",
       "updateTime": "Atualizar tempo",
       "cancel": "Cancelar",
-      "selectDateError": "Por favor selecione uma data",
-      "selectStartTimeError": "Por favor selecione a hora de início",
-      "selectEndTimeError": "Por favor selecione a hora de fim",
-      "endTimeAfterStartError": "A hora de fim deve ser posterior à hora de início"
+      "selectDateError": "Por favor, selecione uma data",
+      "selectStartTimeError": "Por favor, selecione a hora de início",
+      "selectEndTimeError": "Por favor, selecione a hora de término",
+      "endTimeAfterStartError": "A hora de término deve ser posterior à hora de início"
     }
   },
   "taskActivityLogTab": {
-    "title": "Registro de Atividade",
+    "title": "Registro de atividade",
     "add": "ADICIONAR",
     "remove": "REMOVER",
     "none": "Nenhum",
@@ -115,7 +121,7 @@
     "createdTask": "criou a tarefa."
   },
   "taskProgress": {
-    "markAsDoneTitle": "Marcar Tarefa como Concluída?",
+    "markAsDoneTitle": "Marcar tarefa como concluída?",
     "confirmMarkAsDone": "Sim, marcar como concluída",
     "cancelMarkAsDone": "Não, manter status atual",
     "markAsDoneDescription": "Você definiu o progresso para 100%. Gostaria de atualizar o status da tarefa para \"Concluída\"?"

worklenz-frontend/public/locales/pt/task-list-table.json

@@ -39,6 +39,7 @@
   "addTaskText": "Adicionar Tarefa",
   "addSubTaskText": "+ Adicionar Subtarefa",
   "noTasksInGroup": "Nenhuma tarefa neste grupo",
+  "dropTaskHere": "Soltar tarefa aqui",
   "addTaskInputPlaceholder": "Digite sua tarefa e pressione enter",
 
   "openButton": "Abrir",

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

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

worklenz-frontend/public/locales/zh/task-drawer/task-drawer.json

@@ -1,22 +1,28 @@
 {
   "taskHeader": {
     "taskNamePlaceholder": "输入您的任务",
-    "deleteTask": "删除任务"
+    "deleteTask": "删除任务",
+    "parentTask": "父任务",
+    "currentTask": "当前任务",
+    "back": "返回",
+    "backToParent": "返回父任务",
+    "toParentTask": "到父任务",
+    "loadingHierarchy": "加载层次结构..."
   },
   "taskInfoTab": {
     "title": "信息",
     "details": {
-      "title": "详情",
+      "title": "详细信息",
       "task-key": "任务键",
       "phase": "阶段",
-      "assignees": "受让人",
+      "assignees": "受理人",
       "due-date": "截止日期",
       "time-estimation": "时间估算",
       "priority": "优先级",
       "labels": "标签",
       "billable": "可计费",
       "notify": "通知",
-      "when-done-notify": "完成时，通知",
+      "when-done-notify": "完成时通知",
       "start-date": "开始日期",
       "end-date": "结束日期",
       "hide-start-date": "隐藏开始日期",
@@ -24,18 +30,18 @@
       "hours": "小时",
       "minutes": "分钟",
       "progressValue": "进度值",
-      "progressValueTooltip": "设置进度百分比（0-100%）",
+      "progressValueTooltip": "设置进度百分比 (0-100%)",
       "progressValueRequired": "请输入进度值",
-      "progressValueRange": "进度必须在0到100之间",
+      "progressValueRange": "进度必须在 0 到 100 之间",
       "taskWeight": "任务权重",
-      "taskWeightTooltip": "设置此子任务的权重（百分比）",
+      "taskWeightTooltip": "设置此子任务的权重 (百分比)",
       "taskWeightRequired": "请输入任务权重",
-      "taskWeightRange": "权重必须在0到100之间",
+      "taskWeightRange": "权重必须在 0 到 100 之间",
       "recurring": "重复"
     },
     "labels": {
       "labelInputPlaceholder": "搜索或创建",
-      "labelsSelectorInputTip": "按回车创建"
+      "labelsSelectorInputTip": "按 Enter 键创建"
     },
     "description": {
       "title": "描述",
@@ -44,7 +50,7 @@
     "subTasks": {
       "title": "子任务",
       "addSubTask": "添加子任务",
-      "addSubTaskInputPlaceholder": "输入您的任务并按回车",
+      "addSubTaskInputPlaceholder": "输入您的任务并按回车键",
       "refreshSubTasks": "刷新子任务",
       "edit": "编辑",
       "delete": "删除",
@@ -52,10 +58,10 @@
       "deleteSubTask": "删除子任务"
     },
     "dependencies": {
-      "title": "依赖关系",
-      "addDependency": "+ 添加新依赖",
+      "title": "依赖项",
+      "addDependency": "+ 添加新依赖项",
       "blockedBy": "被阻止",
-      "searchTask": "输入搜索任务",
+      "searchTask": "输入以搜索任务",
       "noTasksFound": "未找到任务",
       "confirmDeleteDependency": "您确定要删除吗？"
     },
@@ -67,7 +73,7 @@
     "comments": {
       "title": "评论",
       "addComment": "+ 添加新评论",
-      "noComments": "还没有评论。成为第一个评论的人！",
+      "noComments": "还没有评论。成为第一个评论者！",
       "delete": "删除",
       "confirmDeleteComment": "您确定要删除此评论吗？",
       "addCommentPlaceholder": "添加评论...",
@@ -75,12 +81,12 @@
       "commentButton": "评论",
       "attachFiles": "附加文件",
       "addMoreFiles": "添加更多文件",
-      "selectedFiles": "已选择的文件（最多25MB，最大{count}个）",
-      "maxFilesError": "您最多只能上传{count}个文件",
+      "selectedFiles": "选定文件 (最多 25MB，最多 {count} 个)",
+      "maxFilesError": "您最多只能上传 {count} 个文件",
       "processFilesError": "处理文件失败",
       "addCommentError": "请添加评论或附加文件",
-      "createdBy": "{{time}}由{{user}}创建",
-      "updatedTime": "更新于{{time}}"
+      "createdBy": "由 {{user}} 在 {{time}} 创建",
+      "updatedTime": "更新于 {{time}}"
     },
     "searchInputPlaceholder": "按名称搜索",
     "pendingInvitation": "待处理邀请"
@@ -88,8 +94,8 @@
   "taskTimeLogTab": {
     "title": "时间日志",
     "addTimeLog": "添加新时间日志",
-    "totalLogged": "总记录时间",
-    "exportToExcel": "导出到Excel",
+    "totalLogged": "总计记录",
+    "exportToExcel": "导出到 Excel",
     "noTimeLogsFound": "未找到时间日志",
     "timeLogForm": {
       "date": "日期",
@@ -103,7 +109,7 @@
       "selectDateError": "请选择日期",
       "selectStartTimeError": "请选择开始时间",
       "selectEndTimeError": "请选择结束时间",
-      "endTimeAfterStartError": "结束时间必须在开始时间之后"
+      "endTimeAfterStartError": "结束时间必须晚于开始时间"
     }
   },
   "taskActivityLogTab": {
@@ -116,8 +122,8 @@
   },
   "taskProgress": {
     "markAsDoneTitle": "将任务标记为完成？",
-    "confirmMarkAsDone": "是的，标记为完成",
-    "cancelMarkAsDone": "不，保持当前状态",
-    "markAsDoneDescription": "您已将进度设置为100%。您想将任务状态更新为\"完成\"吗？"
+    "confirmMarkAsDone": "是，标记为完成",
+    "cancelMarkAsDone": "否，保持当前状态",
+    "markAsDoneDescription": "您已将进度设置为 100%。您想将任务状态更新为\"完成\"吗？"
   }
 }

worklenz-frontend/public/locales/zh/task-list-table.json

@@ -37,6 +37,7 @@
   "addSubTaskText": "+ 添加子任务",
   "addTaskInputPlaceholder": "输入任务并按回车键",
   "noTasksInGroup": "此组中没有任务",
+  "dropTaskHere": "将任务拖到这里",
   "openButton": "打开",
   "okButton": "确定",
   "noLabelsFound": "未找到标签",

worklenz-frontend/public/sw.js

@@ -331,6 +331,13 @@ self.addEventListener('message', event => {
       });
       break;
       
+    case 'LOGOUT':
+      // Special handler for logout - clear all caches and unregister
+      handleLogout().then(() => {
+        event.ports[0].postMessage({ success: true });
+      });
+      break;
+      
     default:
       console.log('Service Worker: Unknown message type', type);
   }
@@ -342,4 +349,19 @@ async function clearAllCaches() {
   console.log('Service Worker: All caches cleared');
 }
 
+async function handleLogout() {
+  try {
+    // Clear all caches
+    await clearAllCaches();
+    
+    // Unregister the service worker to force fresh registration on next visit
+    await self.registration.unregister();
+    
+    console.log('Service Worker: Logout handled - caches cleared and unregistered');
+  } catch (error) {
+    console.error('Service Worker: Error during logout handling', error);
+    throw error;
+  }
+}
+
 console.log('Service Worker: Loaded successfully'); 

worklenz-frontend/src/App.tsx

@@ -5,6 +5,7 @@ import i18next from 'i18next';
 
 // Components
 import ThemeWrapper from './features/theme/ThemeWrapper';
+import ModuleErrorBoundary from './components/ModuleErrorBoundary';
 
 // Routes
 import router from './app/routes';
@@ -13,6 +14,7 @@ import router from './app/routes';
 import { useAppSelector } from './hooks/useAppSelector';
 import { initMixpanel } from './utils/mixpanelInit';
 import { initializeCsrfToken } from './api/api-client';
+import CacheCleanup from './utils/cache-cleanup';
 
 // Types & Constants
 import { Language } from './features/i18n/localesSlice';
@@ -113,6 +115,56 @@ const App: React.FC = memo(() => {
     };
   }, []);
 
+  // Global error handlers for module loading issues
+  useEffect(() => {
+    const handleUnhandledRejection = (event: PromiseRejectionEvent) => {
+      const error = event.reason;
+      
+      // Check if this is a module loading error
+      if (
+        error?.message?.includes('Failed to fetch dynamically imported module') ||
+        error?.message?.includes('Loading chunk') ||
+        error?.name === 'ChunkLoadError'
+      ) {
+        console.error('Unhandled module loading error:', error);
+        event.preventDefault(); // Prevent default browser error handling
+        
+        // Clear caches and reload
+        CacheCleanup.clearAllCaches()
+          .then(() => CacheCleanup.forceReload('/auth/login'))
+          .catch(() => window.location.reload());
+      }
+    };
+
+    const handleError = (event: ErrorEvent) => {
+      const error = event.error;
+      
+      // Check if this is a module loading error
+      if (
+        error?.message?.includes('Failed to fetch dynamically imported module') ||
+        error?.message?.includes('Loading chunk') ||
+        error?.name === 'ChunkLoadError'
+      ) {
+        console.error('Global module loading error:', error);
+        event.preventDefault(); // Prevent default browser error handling
+        
+        // Clear caches and reload
+        CacheCleanup.clearAllCaches()
+          .then(() => CacheCleanup.forceReload('/auth/login'))
+          .catch(() => window.location.reload());
+      }
+    };
+
+    // Add global error handlers
+    window.addEventListener('unhandledrejection', handleUnhandledRejection);
+    window.addEventListener('error', handleError);
+
+    return () => {
+      window.removeEventListener('unhandledrejection', handleUnhandledRejection);
+      window.removeEventListener('error', handleError);
+    };
+  }, []);
+
   // Register service worker
   useEffect(() => {
     registerSW({
@@ -150,12 +202,14 @@ const App: React.FC = memo(() => {
   return (
     <Suspense fallback={<SuspenseFallback />}>
       <ThemeWrapper>
-        <RouterProvider
-          router={router}
-          future={{
-            v7_startTransition: true,
-          }}
-        />
+        <ModuleErrorBoundary>
+          <RouterProvider
+            router={router}
+            future={{
+              v7_startTransition: true,
+            }}
+          />
+        </ModuleErrorBoundary>
       </ThemeWrapper>
     </Suspense>
   );

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

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

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

@@ -90,6 +90,23 @@ export const SetupGuard = memo(({ children }: GuardProps) => {
 
 SetupGuard.displayName = 'SetupGuard';
 
+// Combined guard for routes that require both authentication and setup completion
+export const AuthAndSetupGuard = memo(({ children }: GuardProps) => {
+  const { isAuthenticated, isSetupComplete, location } = useAuthStatus();
+
+  if (!isAuthenticated) {
+    return <Navigate to="/auth" state={{ from: location }} replace />;
+  }
+
+  if (!isSetupComplete) {
+    return <Navigate to="/worklenz/setup" />;
+  }
+
+  return <>{children}</>;
+});
+
+AuthAndSetupGuard.displayName = 'AuthAndSetupGuard';
+
 // Optimized route wrapping function with Suspense boundaries
 const wrapRoutes = (
   routes: RouteObject[],
@@ -171,9 +188,11 @@ StaticLicenseExpired.displayName = 'StaticLicenseExpired';
 // Create route arrays (moved outside of useMemo to avoid hook violations)
 const publicRoutes = [...rootRoutes, ...authRoutes, notFoundRoute];
 
-const protectedMainRoutes = wrapRoutes(mainRoutes, AuthGuard);
+// Apply combined guard to main routes that require both auth and setup completion
+const protectedMainRoutes = wrapRoutes(mainRoutes, AuthAndSetupGuard);
 const adminRoutes = wrapRoutes(reportingRoutes, AdminGuard);
-const setupRoutes = wrapRoutes([accountSetupRoute], SetupGuard);
+// Setup route should be accessible without setup completion, only requires authentication
+const setupRoutes = wrapRoutes([accountSetupRoute], AuthGuard);
 
 // License expiry check function
 const withLicenseExpiryCheck = (routes: RouteObject[]): RouteObject[] => {

worklenz-frontend/src/components/CustomColordLabel.tsx

@@ -39,7 +39,7 @@ const CustomColordLabel = React.forwardRef<HTMLSpanElement, CustomColordLabelPro
       <Tooltip title={label.name}>
         <span
           ref={ref}
-          className="inline-flex items-center px-2 py-0.5 rounded-sm text-xs font-medium shrink-0 max-w-[120px]"
+          className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium shrink-0 max-w-[100px]"
           style={{ 
             backgroundColor,
             color: textColor,

worklenz-frontend/src/components/CustomNumberLabel.tsx

@@ -21,8 +21,8 @@ const CustomNumberLabel = React.forwardRef<HTMLSpanElement, CustomNumberLabelPro
       <Tooltip title={labelList.join(', ')}>
         <span
           ref={ref}
-          className="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium text-white cursor-help"
-          style={{ backgroundColor }}
+          className="inline-flex items-center px-1.5 py-0.5 rounded text-xs font-medium cursor-help"
+          style={{ backgroundColor, color: 'white' }}
         >
           {namesString}
         </span>

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/ModuleErrorBoundary.tsx

@@ -0,0 +1,110 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+import { Button, Result } from 'antd';
+import CacheCleanup from '@/utils/cache-cleanup';
+
+interface Props {
+  children: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error?: Error;
+}
+
+class ModuleErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error): State {
+    // Check if this is a module loading error
+    const isModuleError = 
+      error.message.includes('Failed to fetch dynamically imported module') ||
+      error.message.includes('Loading chunk') ||
+      error.message.includes('Loading CSS chunk') ||
+      error.name === 'ChunkLoadError';
+
+    if (isModuleError) {
+      return { hasError: true, error };
+    }
+
+    // For other errors, let them bubble up
+    return { hasError: false };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    console.error('Module Error Boundary caught an error:', error, errorInfo);
+    
+    // If this is a module loading error, clear caches and reload
+    if (this.state.hasError) {
+      this.handleModuleError();
+    }
+  }
+
+  private async handleModuleError() {
+    try {
+      console.log('Handling module loading error - clearing caches...');
+      
+      // Clear all caches
+      await CacheCleanup.clearAllCaches();
+      
+      // Force reload to login page
+      CacheCleanup.forceReload('/auth/login');
+    } catch (cacheError) {
+      console.error('Failed to handle module error:', cacheError);
+      // Fallback: just reload the page
+      window.location.reload();
+    }
+  }
+
+  private handleRetry = async () => {
+    try {
+      await CacheCleanup.clearAllCaches();
+      CacheCleanup.forceReload('/auth/login');
+    } catch (error) {
+      console.error('Retry failed:', error);
+      window.location.reload();
+    }
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div style={{ 
+          display: 'flex', 
+          justifyContent: 'center', 
+          alignItems: 'center', 
+          minHeight: '100vh',
+          padding: '20px'
+        }}>
+          <Result
+            status="error"
+            title="Module Loading Error"
+            subTitle="There was an issue loading the application. This usually happens after updates or during logout."
+            extra={[
+              <Button 
+                type="primary" 
+                key="retry" 
+                onClick={this.handleRetry}
+                loading={false}
+              >
+                Retry
+              </Button>,
+              <Button 
+                key="reload" 
+                onClick={() => window.location.reload()}
+              >
+                Reload Page
+              </Button>
+            ]}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export default ModuleErrorBoundary; 

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

@@ -1,5 +1,5 @@
 import React, { startTransition, useEffect, useRef, useState } from 'react';
-import { useDispatch, useSelector } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 
@@ -18,6 +18,11 @@ import { IAccountSetupRequest } from '@/types/project-templates/project-template
 import { evt_account_setup_template_complete } from '@/shared/worklenz-analytics-events';
 import { useMixpanelTracking } from '@/hooks/useMixpanelTracking';
 import { createPortal } from 'react-dom';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { verifyAuthentication } from '@/features/auth/authSlice';
+import { setUser } from '@/features/user/userSlice';
+import { setSession } from '@/utils/session-helper';
+import { IAuthorizeResponse } from '@/types/auth/login.types';
 
 const { Title } = Typography;
 
@@ -29,7 +34,7 @@ interface Props {
 
 export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = false }) => {
   const { t } = useTranslation('account-setup');
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const navigate = useNavigate();
   const { trackMixpanelEvent } = useMixpanelTracking();
 
@@ -69,6 +74,18 @@ export const ProjectStep: React.FC<Props> = ({ onEnter, styles, isDarkMode = fal
       if (res.done && res.body.id) {
         toggleTemplateSelector(false);
         trackMixpanelEvent(evt_account_setup_template_complete);
+        
+        // Refresh user session to update setup_completed status
+        try {
+          const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
+          if (authResponse?.authenticated && authResponse?.user) {
+            setSession(authResponse.user);
+            dispatch(setUser(authResponse.user));
+          }
+        } catch (error) {
+          logger.error('Failed to refresh user session after template setup completion', error);
+        }
+        
         navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
       }
     } catch (error) {

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

@@ -19,7 +19,6 @@ import { useAuthService } from '@/hooks/useAuth';
 import { statusApiService } from '@/api/taskAttributes/status/status.api.service';
 import alertService from '@/services/alerts/alertService';
 import logger from '@/utils/errorLogger';
-import Skeleton from 'antd/es/skeleton/Skeleton';
 import { checkTaskDependencyStatus } from '@/utils/check-task-dependency-status';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
 
@@ -148,11 +147,11 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     const targetGroup = taskGroups.find(g => g.id === targetGroupId);
     if (!sourceGroup || !targetGroup) return;
 
-
     const taskIdx = sourceGroup.tasks.findIndex(t => t.id === draggedTaskId);
     if (taskIdx === -1) return;
 
     const movedTask = sourceGroup.tasks[taskIdx];
+    let didStatusChange = false;
     if (groupBy === 'status' && movedTask.id) {
       if (sourceGroup.id !== targetGroup.id) {
         const canContinue = await checkTaskDependencyStatus(movedTask.id, targetGroupId);
@@ -163,6 +162,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
           );
           return;
         }
+        didStatusChange = true;
       }
     }
     let insertIdx = hoveredTaskIdx;
@@ -259,6 +259,18 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
         team_id: teamId,
       });
 
+      // Emit progress update if status changed
+      if (didStatusChange) {
+        socket.emit(
+          SocketEvents.TASK_STATUS_CHANGE.toString(),
+          JSON.stringify({
+            task_id: movedTask.id,
+            status_id: targetGroupId,
+            parent_task: movedTask.parent_task_id || null,
+            team_id: teamId,
+          })
+        );
+      }
     }
 
     setDraggedTaskId(null);

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

@@ -15,6 +15,7 @@ import { SocketEvents } from '@/shared/socket-events';
 import { getUserSession } from '@/utils/session-helper';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { toggleTaskExpansion, fetchBoardSubTasks } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import TaskProgressCircle from './TaskProgressCircle';
 
 // Simple Portal component
 const Portal: React.FC<{ children: React.ReactNode }> = ({ children }) => {
@@ -69,7 +70,6 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
         const d = selectedDate || new Date();
         return new Date(d.getFullYear(), d.getMonth(), 1);
     });
-    const [showSubtasks, setShowSubtasks] = useState(false);
 
     useEffect(() => {
         setSelectedDate(task.end_date ? new Date(task.end_date) : null);
@@ -202,7 +202,11 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
 
     return (
         <>
-            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block' }} >
+            <div className="enhanced-kanban-task-card" style={{ background, color, display: 'block', position: 'relative' }} >
+                {/* Progress circle at top right */}
+                <div style={{ position: 'absolute', top: 6, right: 6, zIndex: 2 }}>
+                    <TaskProgressCircle task={task} size={20} />
+                </div>
                 <div
                     draggable
                     onDragStart={e => onTaskDragStart(e, task.id!, groupId)}
@@ -450,7 +454,7 @@ const TaskCard: React.FC<TaskCardProps> = memo(({
                                                 style={{ backgroundColor: themeMode === 'dark' ? (sub.priority_color_dark || sub.priority_color || '#d9d9d9') : (sub.priority_color || '#d9d9d9') }}
                                             ></span>
                                         ) : null}
-                                        <span className="flex-1 truncate text-xs text-gray-800 dark:text-gray-100">{sub.name}</span>
+                                        <span className="flex-1 truncate text-xs text-gray-800 dark:text-gray-100" title={sub.name}>{sub.name}</span>
                                         <span
                                             className="task-due-date ml-2 text-[10px] text-gray-500 dark:text-gray-400"
                                         >

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

@@ -0,0 +1,52 @@
+import { IProjectTask } from "@/types/project/projectTasksViewModel.types";
+
+// Add a simple circular progress component
+const TaskProgressCircle: React.FC<{ task: IProjectTask; size?: number }> = ({ task, size = 28 }) => {
+    const progress = typeof task.complete_ratio === 'number'
+        ? task.complete_ratio
+        : (typeof task.progress === 'number' ? task.progress : 0);
+    const strokeWidth = 1.5;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (progress / 100) * circumference;
+    return (
+        <svg width={size} height={size} style={{ display: 'block' }}>
+            
+            <circle
+                cx={size / 2}
+                cy={size / 2}
+                r={radius}
+                stroke={progress === 100 ? "#22c55e" : "#3b82f6"}
+                strokeWidth={strokeWidth}
+                fill="none"
+                strokeDasharray={circumference}
+                strokeDashoffset={offset}
+                strokeLinecap="round"
+                style={{ transition: 'stroke-dashoffset 0.3s' }}
+            />
+            {progress === 100 ? (
+                // Green checkmark icon
+                <g>
+                    <circle cx={size / 2} cy={size / 2} r={radius} fill="#22c55e" opacity="0.15" />
+                    <svg x={(size/2)-(size*0.22)} y={(size/2)-(size*0.22)} width={size*0.44} height={size*0.44} viewBox="0 0 24 24">
+                        <path d="M5 13l4 4L19 7" stroke="#22c55e" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round"/>
+                    </svg>
+                </g>
+            ) : progress > 0 && (
+                <text
+                    x="50%"
+                    y="50%"
+                    textAnchor="middle"
+                    dominantBaseline="central"
+                    fontSize={size * 0.38}
+                    fill="#3b82f6"
+                    fontWeight="bold"
+                >
+                    {Math.round(progress)}
+                </text>
+            )}
+        </svg>
+    );
+};
+
+export default TaskProgressCircle;

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

@@ -1,101 +0,0 @@
-.performance-monitor {
-  position: fixed;
-  top: 80px;
-  right: 16px;
-  width: 280px;
-  z-index: 1000;
-  background: var(--ant-color-bg-elevated);
-  border: 1px solid var(--ant-color-border);
-  box-shadow: 0 4px 12px var(--ant-color-shadow);
-}
-
-.performance-monitor-header {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  font-weight: 600;
-  color: var(--ant-color-text);
-}
-
-.performance-status {
-  font-size: 10px;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-}
-
-.performance-metrics {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 12px;
-  margin-bottom: 12px;
-}
-
-.performance-metrics .ant-statistic {
-  text-align: center;
-}
-
-.performance-metrics .ant-statistic-title {
-  font-size: 12px;
-  color: var(--ant-color-text-secondary);
-  margin-bottom: 4px;
-}
-
-.performance-metrics .ant-statistic-content {
-  font-size: 14px;
-  color: var(--ant-color-text);
-}
-
-.virtualization-status {
-  grid-column: 1 / -1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 0;
-  border-top: 1px solid var(--ant-color-border);
-}
-
-.status-label {
-  font-size: 12px;
-  color: var(--ant-color-text-secondary);
-  font-weight: 500;
-}
-
-.performance-tips {
-  margin-top: 12px;
-  padding-top: 12px;
-  border-top: 1px solid var(--ant-color-border);
-}
-
-.performance-tips h4 {
-  font-size: 12px;
-  color: var(--ant-color-text);
-  margin-bottom: 8px;
-  font-weight: 600;
-}
-
-.performance-tips ul {
-  margin: 0;
-  padding-left: 16px;
-}
-
-.performance-tips li {
-  font-size: 11px;
-  color: var(--ant-color-text-secondary);
-  margin-bottom: 4px;
-  line-height: 1.4;
-}
-
-/* Responsive design */
-@media (max-width: 768px) {
-  .performance-monitor {
-    position: static;
-    width: 100%;
-    margin-bottom: 16px;
-  }
-
-  .performance-metrics {
-    grid-template-columns: 1fr;
-    gap: 8px;
-  }
-}

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

@@ -1,108 +0,0 @@
-import React from 'react';
-import { Card, Statistic, Tooltip, Badge } from 'antd';
-import { useSelector } from 'react-redux';
-import { RootState } from '@/app/store';
-import './PerformanceMonitor.css';
-
-const PerformanceMonitor: React.FC = () => {
-  const { performanceMetrics } = useSelector((state: RootState) => state.enhancedKanbanReducer);
-
-  // Only show if there are tasks loaded
-  if (performanceMetrics.totalTasks === 0) {
-    return null;
-  }
-
-  const getPerformanceStatus = () => {
-    if (performanceMetrics.totalTasks > 1000) return 'critical';
-    if (performanceMetrics.totalTasks > 500) return 'warning';
-    if (performanceMetrics.totalTasks > 100) return 'good';
-    return 'excellent';
-  };
-
-  const getStatusColor = (status: string) => {
-    switch (status) {
-      case 'critical':
-        return 'red';
-      case 'warning':
-        return 'orange';
-      case 'good':
-        return 'blue';
-      case 'excellent':
-        return 'green';
-      default:
-        return 'default';
-    }
-  };
-
-  const status = getPerformanceStatus();
-  const statusColor = getStatusColor(status);
-
-  return (
-    <Card
-      size="small"
-      className="performance-monitor"
-      title={
-        <div className="performance-monitor-header">
-          <span>Performance Monitor</span>
-          <Badge
-            status={statusColor as any}
-            text={status.toUpperCase()}
-            className="performance-status"
-          />
-        </div>
-      }
-    >
-      <div className="performance-metrics">
-        <Tooltip title="Total number of tasks across all groups">
-          <Statistic
-            title="Total Tasks"
-            value={performanceMetrics.totalTasks}
-            suffix="tasks"
-            valueStyle={{ fontSize: '16px' }}
-          />
-        </Tooltip>
-
-        <Tooltip title="Largest group by number of tasks">
-          <Statistic
-            title="Largest Group"
-            value={performanceMetrics.largestGroupSize}
-            suffix="tasks"
-            valueStyle={{ fontSize: '16px' }}
-          />
-        </Tooltip>
-
-        <Tooltip title="Average tasks per group">
-          <Statistic
-            title="Average Group"
-            value={Math.round(performanceMetrics.averageGroupSize)}
-            suffix="tasks"
-            valueStyle={{ fontSize: '16px' }}
-          />
-        </Tooltip>
-
-        <Tooltip title="Virtualization is enabled for groups with more than 50 tasks">
-          <div className="virtualization-status">
-            <span className="status-label">Virtualization:</span>
-            <Badge
-              status={performanceMetrics.virtualizationEnabled ? 'success' : 'default'}
-              text={performanceMetrics.virtualizationEnabled ? 'Enabled' : 'Disabled'}
-            />
-          </div>
-        </Tooltip>
-      </div>
-
-      {performanceMetrics.totalTasks > 500 && (
-        <div className="performance-tips">
-          <h4>Performance Tips:</h4>
-          <ul>
-            <li>Use filters to reduce the number of visible tasks</li>
-            <li>Consider grouping by different criteria</li>
-            <li>Virtualization is automatically enabled for large groups</li>
-          </ul>
-        </div>
-      )}
-    </Card>
-  );
-};
-
-export default React.memo(PerformanceMonitor);

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

@@ -1,60 +0,0 @@
-.virtualized-task-list {
-  background: transparent;
-  border-radius: 6px;
-  overflow: hidden;
-}
-
-.virtualized-task-row {
-  padding: 4px 0;
-  display: flex;
-  align-items: stretch;
-}
-
-.virtualized-empty-state {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: var(--ant-color-bg-container);
-  border-radius: 6px;
-  border: 2px dashed var(--ant-color-border);
-}
-
-.empty-message {
-  color: var(--ant-color-text-secondary);
-  font-size: 14px;
-  font-weight: 500;
-}
-
-/* Ensure virtualized list works well with drag and drop */
-.virtualized-task-list .react-window__inner {
-  overflow: visible !important;
-}
-
-/* Performance optimizations */
-.virtualized-task-list * {
-  will-change: transform;
-}
-
-/* Smooth scrolling */
-.virtualized-task-list {
-  scroll-behavior: smooth;
-}
-
-/* Custom scrollbar for better UX */
-.virtualized-task-list::-webkit-scrollbar {
-  width: 6px;
-}
-
-.virtualized-task-list::-webkit-scrollbar-track {
-  background: var(--ant-color-bg-container);
-  border-radius: 3px;
-}
-
-.virtualized-task-list::-webkit-scrollbar-thumb {
-  background: var(--ant-color-border);
-  border-radius: 3px;
-}
-
-.virtualized-task-list::-webkit-scrollbar-thumb:hover {
-  background: var(--ant-color-text-tertiary);
-}

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

@@ -1,94 +0,0 @@
-import React, { useMemo, useCallback } from 'react';
-import { FixedSizeList as List } from 'react-window';
-import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
-import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
-import './VirtualizedTaskList.css';
-
-interface VirtualizedTaskListProps {
-  tasks: IProjectTask[];
-  height: number;
-  itemHeight?: number;
-  activeTaskId?: string | null;
-  overId?: string | null;
-  onTaskRender?: (task: IProjectTask, index: number) => void;
-}
-
-const VirtualizedTaskList: React.FC<VirtualizedTaskListProps> = ({
-  tasks,
-  height,
-  itemHeight = 80,
-  activeTaskId,
-  overId,
-  onTaskRender,
-}) => {
-  // Memoize task data to prevent unnecessary re-renders
-  const taskData = useMemo(
-    () => ({
-      tasks,
-      activeTaskId,
-      overId,
-      onTaskRender,
-    }),
-    [tasks, activeTaskId, overId, onTaskRender]
-  );
-
-  // Row renderer for virtualized list
-  const Row = useCallback(
-    ({ index, style }: { index: number; style: React.CSSProperties }) => {
-      const task = tasks[index];
-      if (!task) return null;
-
-      // Call onTaskRender callback if provided
-      onTaskRender?.(task, index);
-
-      return (
-        <EnhancedKanbanTaskCard
-          task={task}
-          isActive={task.id === activeTaskId}
-          isDropTarget={overId === task.id}
-          sectionId={task.status || 'default'}
-        />
-      );
-    },
-    [tasks, activeTaskId, overId, onTaskRender]
-  );
-
-  // Memoize the list component to prevent unnecessary re-renders
-  const VirtualizedList = useMemo(
-    () => (
-      <List
-        height={height}
-        width="100%"
-        itemCount={tasks.length}
-        itemSize={itemHeight}
-        itemData={taskData}
-        overscanCount={10} // Increased overscan for smoother scrolling experience
-        className="virtualized-task-list"
-      >
-        {Row}
-      </List>
-    ),
-    [height, tasks.length, itemHeight, taskData, Row]
-  );
-
-  if (tasks.length === 0) {
-    return (
-      <div className="virtualized-empty-state" style={{ height, display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
-        <div className="empty-message" style={{ 
-          padding: '32px 24px', 
-          color: '#8c8c8c', 
-          fontSize: '14px',
-          backgroundColor: '#fafafa',
-          borderRadius: '8px',
-          border: '1px solid #f0f0f0'
-        }}>
-          No tasks in this group
-        </div>
-      </div>
-    );
-  }
-
-  return VirtualizedList;
-};
-
-export default React.memo(VirtualizedTaskList);

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

@@ -1,6 +1,5 @@
 import { useSocket } from '@/socket/socketContext';
 import { ITaskPhase } from '@/types/tasks/taskPhase.types';
-import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
 import { Select } from 'antd';
 
 import { Form } from 'antd';
@@ -27,12 +26,6 @@ const TaskDrawerPhaseSelector = ({ phases, task }: TaskDrawerPhaseSelectorProps)
       phase_id: value,
       parent_task: task.parent_task_id || null,
     });
-
-    // socket?.once(SocketEvents.TASK_PHASE_CHANGE.toString(), () => {
-    //   if(list.getCurrentGroup().value === this.list.GROUP_BY_PHASE_VALUE && this.list.isSubtasksIncluded) {
-    //     this.list.emitRefreshSubtasksIncluded();
-    //   }
-    // });
   };
 
   return (
@@ -41,8 +34,11 @@ const TaskDrawerPhaseSelector = ({ phases, task }: TaskDrawerPhaseSelectorProps)
         allowClear
         placeholder="Select Phase"
         options={phaseMenuItems}
-        style={{ width: 'fit-content' }}
-        dropdownStyle={{ width: 'fit-content' }}
+        styles={{
+          root: {
+            width: 'fit-content',
+          },
+        }}
         onChange={handlePhaseChange}
       />
     </Form.Item>

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

@@ -7,3 +7,28 @@
   outline: 1px solid #d9d9d9;
   border-radius: 4px;
 }
+
+/* Task name display styles */
+.task-name-display {
+  margin: 0;
+  padding: 2px 8px;
+  font-size: 16px;
+  cursor: pointer;
+  width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  min-height: 20px;
+  line-height: 1.4;
+  display: flex;
+  align-items: center;
+}
+
+.task-name-display:hover {
+  background-color: rgba(0, 0, 0, 0.02);
+  border-radius: 4px;
+}
+
+[data-theme='dark'] .task-name-display:hover {
+  background-color: rgba(255, 255, 255, 0.05);
+}

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

@@ -1,4 +1,4 @@
-import { Button, Dropdown, Flex, Input, InputRef, MenuProps } from 'antd';
+import { Button, Dropdown, Flex, Input, InputRef, MenuProps, Tooltip } from 'antd';
 import React, { ChangeEvent, useEffect, useRef, useState } from 'react';
 import { EllipsisOutlined } from '@ant-design/icons';
 import { TFunction } from 'i18next';
@@ -21,12 +21,19 @@ import { deleteBoardTask } from '@/features/board/board-slice';
 import { deleteTask as deleteKanbanTask, updateEnhancedKanbanSubtask } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import useTabSearchParam from '@/hooks/useTabSearchParam';
 import { ITaskViewModel } from '@/types/tasks/task.types';
+import TaskHierarchyBreadcrumb from '../task-hierarchy-breadcrumb/task-hierarchy-breadcrumb';
 
 type TaskDrawerHeaderProps = {
   inputRef: React.RefObject<InputRef | null>;
   t: TFunction;
 };
 
+// Utility function to truncate text
+const truncateText = (text: string, maxLength: number = 50): string => {
+  if (!text || text.length <= maxLength) return text;
+  return `${text.substring(0, maxLength)}...`;
+};
+
 const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   const dispatch = useAppDispatch();
   const { socket, connected } = useSocket();
@@ -38,6 +45,9 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
   const [taskName, setTaskName] = useState<string>(taskFormViewModel?.task?.name ?? '');
   const currentSession = useAuthService().getCurrentSession();
 
+  // Check if current task is a sub-task
+  const isSubTask = taskFormViewModel?.task?.is_sub_task || !!taskFormViewModel?.task?.parent_task_id;
+
   useEffect(() => {
     setTaskName(taskFormViewModel?.task?.name ?? '');
   }, [taskFormViewModel?.task?.name]);
@@ -126,54 +136,57 @@ const TaskDrawerHeader = ({ inputRef, t }: TaskDrawerHeaderProps) => {
     // No need for local socket listeners that could interfere with global handlers
   };
 
+  const displayTaskName = taskName || t('taskHeader.taskNamePlaceholder');
+  const truncatedTaskName = truncateText(displayTaskName, 50);
+  const shouldShowTooltip = displayTaskName.length > 50;
+
   return (
-    <Flex gap={12} align="center" style={{ marginBlockEnd: 6 }}>
-      <Flex style={{ position: 'relative', width: '100%' }}>
-        {isEditing ? (
-          <Input
-            ref={inputRef}
-            size="large"
-            value={taskName}
-            onChange={e => onTaskNameChange(e)}
-            onBlur={handleInputBlur}
-            placeholder={t('taskHeader.taskNamePlaceholder')}
-            className="task-name-input"
-            style={{
-              width: '100%',
-              border: 'none',
-            }}
-            showCount={true}
-            maxLength={250}
-            autoFocus
-          />
-        ) : (
-          <p
-            onClick={() => setIsEditing(true)}
-            style={{
-              margin: 0,
-              padding: '4px 11px',
-              fontSize: '16px',
-              cursor: 'pointer',
-              wordWrap: 'break-word',
-              overflowWrap: 'break-word',
-              width: '100%',
-            }}
-          >
-            {taskName || t('taskHeader.taskNamePlaceholder')}
-          </p>
-        )}
+    <div>
+      {/* Show breadcrumb for sub-tasks */}
+      {isSubTask && <TaskHierarchyBreadcrumb t={t} />}
+      
+      <Flex gap={8} align="center" style={{ marginBlockEnd: 2 }}>
+        <Flex style={{ position: 'relative', width: '100%', alignItems: 'center' }}>
+          {isEditing ? (
+            <Input
+              ref={inputRef}
+              size="large"
+              value={taskName}
+              onChange={e => onTaskNameChange(e)}
+              onBlur={handleInputBlur}
+              placeholder={t('taskHeader.taskNamePlaceholder')}
+              className="task-name-input"
+              style={{
+                width: '100%',
+                border: 'none',
+              }}
+              showCount={true}
+              maxLength={250}
+              autoFocus
+            />
+          ) : (
+            <Tooltip title={shouldShowTooltip ? displayTaskName : ''} trigger="hover">
+              <p
+                onClick={() => setIsEditing(true)}
+                className="task-name-display"
+              >
+                {truncatedTaskName}
+              </p>
+            </Tooltip>
+          )}
+        </Flex>
+
+        <TaskDrawerStatusDropdown
+          statuses={taskFormViewModel?.statuses ?? []}
+          task={taskFormViewModel?.task ?? ({} as ITaskViewModel)}
+          teamId={currentSession?.team_id ?? ''}
+        />
+
+        <Dropdown overlayClassName={'delete-task-dropdown'} menu={{ items: deletTaskDropdownItems }}>
+          <Button type="text" icon={<EllipsisOutlined />} />
+        </Dropdown>
       </Flex>
-
-      <TaskDrawerStatusDropdown
-        statuses={taskFormViewModel?.statuses ?? []}
-        task={taskFormViewModel?.task ?? ({} as ITaskViewModel)}
-        teamId={currentSession?.team_id ?? ''}
-      />
-
-      <Dropdown overlayClassName={'delete-task-dropdown'} menu={{ items: deletTaskDropdownItems }}>
-        <Button type="text" icon={<EllipsisOutlined />} />
-      </Dropdown>
-    </Flex>
+    </div>
   );
 };
 

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

@@ -3,7 +3,7 @@ import Drawer from 'antd/es/drawer';
 import { InputRef } from 'antd/es/input';
 import { useTranslation } from 'react-i18next';
 import { useEffect, useRef, useState } from 'react';
-import { PlusOutlined } from '@ant-design/icons';
+import { PlusOutlined, CloseOutlined, ArrowLeftOutlined } from '@ant-design/icons';
 
 import { useAppSelector } from '@/hooks/useAppSelector';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
@@ -13,6 +13,7 @@ import {
   setTaskFormViewModel,
   setTaskSubscribers,
   setTimeLogEditing,
+  fetchTask,
 } from '@/features/task-drawer/task-drawer.slice';
 
 import './task-drawer.css';
@@ -33,6 +34,7 @@ const TaskDrawer = () => {
 
   const { showTaskDrawer, timeLogEditing } = useAppSelector(state => state.taskDrawerReducer);
   const { taskFormViewModel, selectedTaskId } = useAppSelector(state => state.taskDrawerReducer);
+  const { projectId } = useAppSelector(state => state.projectReducer);
   const taskNameInputRef = useRef<InputRef>(null);
   const isClosingManually = useRef(false);
 
@@ -54,6 +56,17 @@ const TaskDrawer = () => {
     dispatch(setTaskSubscribers([]));
   };
 
+  const handleBackToParent = () => {
+    if (taskFormViewModel?.task?.parent_task_id && projectId) {
+      // Navigate to parent task
+      dispatch(setSelectedTaskId(taskFormViewModel.task.parent_task_id));
+      dispatch(fetchTask({ 
+        taskId: taskFormViewModel.task.parent_task_id, 
+        projectId 
+      }));
+    }
+  };
+
   const handleOnClose = (
     e?: React.MouseEvent<Element, MouseEvent> | React.KeyboardEvent<Element>
   ) => {
@@ -68,10 +81,8 @@ const TaskDrawer = () => {
     if (isClickOutsideDrawer || !taskFormViewModel?.task?.is_sub_task) {
       resetTaskState();
     } else {
-      dispatch(setSelectedTaskId(null));
-      dispatch(setTaskFormViewModel({}));
-      dispatch(setTaskSubscribers([]));
-      dispatch(setSelectedTaskId(taskFormViewModel?.task?.parent_task_id || null));
+      // For sub-tasks, navigate to parent instead of closing
+      handleBackToParent();
     }
     // Reset the flag after a short delay
     setTimeout(() => {
@@ -205,6 +216,17 @@ const TaskDrawer = () => {
     };
   };
 
+  // Check if current task is a sub-task
+  const isSubTask = taskFormViewModel?.task?.is_sub_task || !!taskFormViewModel?.task?.parent_task_id;
+
+  // Custom close icon based on whether it's a sub-task
+  const getCloseIcon = () => {
+    if (isSubTask) {
+      return <ArrowLeftOutlined />;
+    }
+    return <CloseOutlined />;
+  };
+
   const drawerProps = {
     open: showTaskDrawer,
     onClose: handleOnClose,
@@ -215,6 +237,7 @@ const TaskDrawer = () => {
     footer: renderFooter(),
     bodyStyle: getBodyStyle(),
     footerStyle: getFooterStyle(),
+    closeIcon: getCloseIcon(),
   };
 
   return (

worklenz-frontend/src/components/task-drawer/task-hierarchy-breadcrumb/task-hierarchy-breadcrumb.css

@@ -0,0 +1,88 @@
+.task-hierarchy-breadcrumb {
+  margin-bottom: 4px;
+}
+
+.task-hierarchy-breadcrumb .ant-breadcrumb {
+  font-size: 14px;
+  line-height: 1;
+}
+
+.task-hierarchy-breadcrumb .ant-breadcrumb-link {
+  color: inherit;
+}
+
+.task-hierarchy-breadcrumb .ant-breadcrumb-separator {
+  color: #8c8c8c;
+  margin: 0 4px;
+}
+
+/* Dark mode styles */
+[data-theme='dark'] .task-hierarchy-breadcrumb .ant-breadcrumb-separator {
+  color: #595959;
+}
+
+/* Back button styles */
+.task-hierarchy-breadcrumb .ant-btn-link {
+  padding: 0;
+  height: auto;
+  font-size: 14px;
+  line-height: 1.3;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+}
+
+.task-hierarchy-breadcrumb .ant-btn-link .anticon {
+  margin-right: 0; /* Remove default margin */
+}
+
+.task-hierarchy-breadcrumb .ant-btn-link:hover {
+  color: #40a9ff;
+}
+
+[data-theme='dark'] .task-hierarchy-breadcrumb .ant-btn-link:hover {
+  color: #40a9ff;
+}
+
+/* Current task name styles */
+.task-hierarchy-breadcrumb .current-task-name {
+  font-size: 14px;
+  color: #000000d9;
+  font-weight: 500;
+  max-width: 200px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: inline-block;
+  line-height: 1.3;
+}
+
+[data-theme='dark'] .task-hierarchy-breadcrumb .current-task-name {
+  color: #ffffffd9;
+}
+
+/* Breadcrumb item container */
+.task-hierarchy-breadcrumb .ant-breadcrumb-item {
+  max-width: 220px;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+}
+
+/* Ensure breadcrumb items don't break the layout */
+.task-hierarchy-breadcrumb .ant-breadcrumb ol {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+}
+
+/* Better alignment for breadcrumb items */
+.task-hierarchy-breadcrumb .ant-breadcrumb-item .ant-breadcrumb-link {
+  display: flex;
+  align-items: center;
+} 

worklenz-frontend/src/components/task-drawer/task-hierarchy-breadcrumb/task-hierarchy-breadcrumb.tsx

@@ -0,0 +1,189 @@
+import React, { useState, useEffect } from 'react';
+import { Breadcrumb, Button, Typography, Tooltip } from 'antd';
+import { HomeOutlined } from '@ant-design/icons';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { fetchTask, setSelectedTaskId } from '@/features/task-drawer/task-drawer.slice';
+import { tasksApiService } from '@/api/tasks/tasks.api.service';
+import { TFunction } from 'i18next';
+import './task-hierarchy-breadcrumb.css';
+
+interface TaskHierarchyBreadcrumbProps {
+  t: TFunction;
+  onBackClick?: () => void;
+}
+
+interface TaskHierarchyItem {
+  id: string;
+  name: string;
+  parent_task_id?: string;
+}
+
+// Utility function to truncate text
+const truncateText = (text: string, maxLength: number = 25): string => {
+  if (!text || text.length <= maxLength) return text;
+  return `${text.substring(0, maxLength)}...`;
+};
+
+const TaskHierarchyBreadcrumb: React.FC<TaskHierarchyBreadcrumbProps> = ({ t, onBackClick }) => {
+  const dispatch = useAppDispatch();
+  const { taskFormViewModel } = useAppSelector(state => state.taskDrawerReducer);
+  const { projectId } = useAppSelector(state => state.projectReducer);
+  const themeMode = useAppSelector(state => state.themeReducer.mode);
+  const [hierarchyPath, setHierarchyPath] = useState<TaskHierarchyItem[]>([]);
+  const [loading, setLoading] = useState(false);
+
+  const task = taskFormViewModel?.task;
+  const isSubTask = task?.is_sub_task || !!task?.parent_task_id;
+
+  // Recursively fetch the complete hierarchy path
+  const fetchHierarchyPath = async (currentTaskId: string): Promise<TaskHierarchyItem[]> => {
+    if (!projectId) return [];
+    
+    const path: TaskHierarchyItem[] = [];
+    let taskId = currentTaskId;
+    
+    // Traverse up the hierarchy until we reach the root
+    while (taskId) {
+      try {
+        const response = await tasksApiService.getFormViewModel(taskId, projectId);
+        if (response.done && response.body.task) {
+          const taskData = response.body.task;
+          path.unshift({
+            id: taskData.id,
+            name: taskData.name || '',
+            parent_task_id: taskData.parent_task_id || undefined
+          });
+          
+          // Move to parent task
+          taskId = taskData.parent_task_id || '';
+        } else {
+          break;
+        }
+      } catch (error) {
+        console.error('Error fetching task in hierarchy:', error);
+        break;
+      }
+    }
+    
+    return path;
+  };
+
+  // Fetch the complete hierarchy when component mounts or task changes
+  useEffect(() => {
+    const loadHierarchy = async () => {
+      if (!isSubTask || !task?.parent_task_id || !projectId) {
+        setHierarchyPath([]);
+        return;
+      }
+
+      setLoading(true);
+      try {
+        const path = await fetchHierarchyPath(task.parent_task_id);
+        setHierarchyPath(path);
+      } catch (error) {
+        console.error('Error loading task hierarchy:', error);
+        setHierarchyPath([]);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadHierarchy();
+  }, [task?.parent_task_id, projectId, isSubTask]);
+
+  const handleNavigateToTask = (taskId: string) => {
+    if (projectId) {
+      if (onBackClick) {
+        onBackClick();
+      }
+      
+      // Navigate to the selected task
+      dispatch(setSelectedTaskId(taskId));
+      dispatch(fetchTask({ taskId, projectId }));
+    }
+  };
+
+  if (!isSubTask || hierarchyPath.length === 0) {
+    return null;
+  }
+
+  // Create breadcrumb items from the hierarchy path
+  const breadcrumbItems = [
+    // Add all parent tasks in the hierarchy
+    ...hierarchyPath.map((hierarchyTask, index) => {
+      const truncatedName = truncateText(hierarchyTask.name, 25);
+      const shouldShowTooltip = hierarchyTask.name.length > 25;
+      
+      return {
+        title: (
+          <Tooltip title={shouldShowTooltip ? hierarchyTask.name : ''} trigger="hover">
+            <Button
+              type="link"
+              icon={index === 0 ? <HomeOutlined /> : undefined}
+              onClick={() => handleNavigateToTask(hierarchyTask.id)}
+              style={{
+                padding: 0,
+                height: 'auto',
+                color: themeMode === 'dark' ? '#1890ff' : '#1890ff',
+                fontSize: '14px',
+                marginRight: '0px',
+                maxWidth: '200px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                display: 'flex',
+                alignItems: 'center',
+                gap: index === 0 ? '6px' : '0px', // Add gap between icon and text for root task
+              }}
+            >
+              {truncatedName}
+            </Button>
+          </Tooltip>
+        ),
+      };
+    }),
+    // Add the current task as the last item (non-clickable)
+    {
+      title: (() => {
+        const currentTaskName = task?.name || t('taskHeader.currentTask', 'Current Task');
+        const truncatedCurrentName = truncateText(currentTaskName, 25);
+        const shouldShowCurrentTooltip = currentTaskName.length > 25;
+        
+        return (
+          <Tooltip title={shouldShowCurrentTooltip ? currentTaskName : ''} trigger="hover">
+            <Typography.Text
+              className="current-task-name"
+              style={{
+                color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9',
+                fontSize: '14px',
+                fontWeight: 500,
+                maxWidth: '200px',
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                whiteSpace: 'nowrap',
+                display: 'inline-block',
+              }}
+            >
+              {truncatedCurrentName}
+            </Typography.Text>
+          </Tooltip>
+        );
+      })(),
+    },
+  ];
+
+  return (
+    <div className="task-hierarchy-breadcrumb">
+      {loading ? (
+        <Typography.Text style={{ color: themeMode === 'dark' ? '#ffffffd9' : '#000000d9' }}>
+          {t('taskHeader.loadingHierarchy', 'Loading hierarchy...')}
+        </Typography.Text>
+      ) : (
+        <Breadcrumb items={breadcrumbItems} />
+      )}
+    </div>
+  );
+};
+
+export default TaskHierarchyBreadcrumb; 

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
-              className="bg-green-200 dark:bg-green-800 transition-all duration-300"
-              style={{ width: `${(todoProgress / total) * 100}%` }}
-              title={`${t('todo')}: ${todoProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-200 dark:bg-green-800 transition-all duration-300"
+                style={{ width: `${(todoProgress / total) * 100}%` }}
+              />
+            </Tooltip>
           )}
           {/* Doing section - medium green */}
           {doingProgress > 0 && (
-            <div
-              className="bg-green-400 dark:bg-green-600 transition-all duration-300"
-              style={{ width: `${(doingProgress / total) * 100}%` }}
-              title={`${t('inProgress')}: ${doingProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-400 dark:bg-green-600 transition-all duration-300"
+                style={{ width: `${(doingProgress / total) * 100}%` }}
+              />
+            </Tooltip>
           )}
           {/* Done section - dark green */}
           {doneProgress > 0 && (
-            <div
-              className="bg-green-600 dark:bg-green-400 transition-all duration-300"
-              style={{ width: `${(doneProgress / total) * 100}%` }}
-              title={`${t('done')}: ${doneProgress}%`}
-            />
+            <Tooltip title={tooltipContent} placement="top">
+              <div
+                className="bg-green-600 dark:bg-green-400 transition-all duration-300"
+                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 
-            className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
-            title={`${t('todo')}: ${todoProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              className="w-1.5 h-1.5 bg-green-200 dark:bg-green-800 rounded-full" 
+            />
+          </Tooltip>
         )}
         {doingProgress > 0 && (
-          <div 
-            className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
-            title={`${t('inProgress')}: ${doingProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              className="w-1.5 h-1.5 bg-green-400 dark:bg-green-600 rounded-full" 
+            />
+          </Tooltip>
         )}
         {doneProgress > 0 && (
-          <div 
-            className="w-1.5 h-1.5 bg-green-600 dark:bg-green-400 rounded-full" 
-            title={`${t('done')}: ${doneProgress}%`}
-          />
+          <Tooltip title={tooltipContent} placement="top">
+            <div 
+              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 { selectGroups, fetchTasksV3, selectAllTasksArray } from '@/features/task-management/task-management.slice';
+import {
+  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 progress = task.progress || 0;
-        if (progress === 0) {
-          acc.todo += 1;
-        } else if (progress === 100) {
-          acc.done += 1;
-        } else {
-          acc.doing += 1;
-        }
-        return acc;
-      }, { todo: 0, doing: 0, done: 0 });
+      const progressStats = tasksInCurrentGroup.reduce(
+        (acc, task) => {
+          const progress = task.progress || 0;
+          if (progress === 0) {
+            acc.todo += 1;
+          } else if (progress === 100) {
+            acc.done += 1;
+          } else {
+            acc.doing += 1;
+          }
+          return acc;
+        },
+        { todo: 0, doing: 0, done: 0 }
+      );
 
       const totalTasks = tasksInCurrentGroup.length;
-      
+
       return {
-        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) : 0,
-        doingProgress: totalTasks > 0 ? Math.round((progressStats.doing / totalTasks) * 100) : 0,
-        doneProgress: totalTasks > 0 ? Math.round((progressStats.done / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((progressStats.todo / totalTasks) * 100) || 0 : 0,
+        doingProgress:
+          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) => {
-        // Find the status by ID first
-        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')) {
-          acc.todo += 1;
-        } else if (statusName.includes('doing') || 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 statusCounts = tasksInCurrentGroup.reduce(
+        (acc, task) => {
+          // Find the status by ID first
+          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')
+          ) {
+            acc.todo += 1;
+          } else if (
+            statusName.includes('doing') ||
+            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,
-        doingProgress: totalTasks > 0 ? Math.round((statusCounts.doing / totalTasks) * 100) : 0,
-        doneProgress: totalTasks > 0 ? Math.round((statusCounts.done / totalTasks) * 100) : 0,
+        todoProgress: totalTasks > 0 ? Math.round((statusCounts.todo / totalTasks) * 100) || 0 : 0,
+        doingProgress:
+          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) => {
-    e.stopPropagation();
-    
-    if (isAllSelected) {
-      // Deselect all tasks in this group
-      tasksInGroup.forEach(taskId => {
-        dispatch(deselectTask(taskId));
-      });
-    } else {
-      // Select all tasks in this group
-      tasksInGroup.forEach(taskId => {
-        dispatch(selectTask(taskId));
-      });
-    }
-  }, [dispatch, isAllSelected, tasksInGroup]);
+  const handleSelectAllChange = useCallback(
+    (e: any) => {
+      e.stopPropagation();
+
+      if (isAllSelected) {
+        // Deselect all tasks in this group
+        tasksInGroup.forEach(taskId => {
+          dispatch(deselectTask(taskId));
+        });
+      } else {
+        // Select all tasks in this group
+        tasksInGroup.forEach(taskId => {
+          dispatch(selectTask(taskId));
+        });
+      }
+    },
+    [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) => {
-    e.stopPropagation();
-    if (!isOwnerOrAdmin) return;
-    setIsEditingName(true);
-    setEditingName(group.name);
-  }, [group.name, isOwnerOrAdmin]);
-
-  const handleNameKeyDown = useCallback((e: React.KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === 'Enter') {
-      handleNameSave();
-    } else if (e.key === 'Escape') {
-      setIsEditingName(false);
+  const handleNameClick = useCallback(
+    (e: React.MouseEvent) => {
+      e.stopPropagation();
+      if (!isOwnerOrAdmin) return;
+      setIsEditingName(true);
       setEditingName(group.name);
-    }
-    e.stopPropagation();
-  }, [group.name, handleNameSave]);
+    },
+    [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, 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) => {
-    e?.stopPropagation();
-    if (isChangingCategory) return;
+  const handleCategoryChange = useCallback(
+    async (categoryId: string, e?: React.MouseEvent) => {
+      e?.stopPropagation();
+      if (isChangingCategory) return;
 
-    setIsChangingCategory(true);
-    try {
-      // Extract status ID from group ID (format: "status-{statusId}")
-      const statusId = group.id.replace('status-', '');
-      
-      await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
-      trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
-      
-      // Refresh status list and tasks
-      dispatch(fetchStatuses(projectId));
-      dispatch(fetchTasksV3(projectId));
-      
-    } catch (error) {
-      logger.error('Error changing category:', error);
-    } finally {
-      setIsChangingCategory(false);
-    }
-  }, [group.id, projectId, dispatch, trackMixpanelEvent, isChangingCategory]);
+      setIsChangingCategory(true);
+      try {
+        // Extract status ID from group ID (format: "status-{statusId}")
+        const statusId = group.id.replace('status-', '');
+
+        await statusApiService.updateStatusCategory(statusId, categoryId, projectId);
+        trackMixpanelEvent(evt_project_board_column_setting_click, { 'Change category': 'Status' });
+
+        // Refresh status list and tasks
+        dispatch(fetchStatuses(projectId));
+        dispatch(fetchTasksV3(projectId));
+      } catch (error) {
+        logger.error('Error changing category:', error);
+      } finally {
+        setIsChangingCategory(false);
+      }
+    },
+    [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({
-          key: 'changeCategory',
-          icon: <ArrowPathIcon className="h-4 w-4" />,
-          label: t('changeCategory'),
-          children: categorySubMenuItems,
-        } as any);
+      items.push({
+        key: 'changeCategory',
+        icon: <ArrowPathIcon className="h-4 w-4" />,
+        label: t('changeCategory'),
+        children: categorySubMenuItems,
+      } 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 */}
-      <div className="flex items-center flex-1 ml-1">
-        {/* Group name and count */}
-        <div className="flex items-center">
-          {isEditingName ? (
-            <Input
-              value={editingName}
-              onChange={(e) => setEditingName(e.target.value)}
-              onKeyDown={handleNameKeyDown}
-              onBlur={handleNameBlur}
-              autoFocus
-              size="small"
-              className="text-sm font-semibold"
-              style={{ 
-                width: 'auto',
-                minWidth: '100px',
-                backgroundColor: 'rgba(255, 255, 255, 0.1)',
-                color: headerTextColor,
-                border: '1px solid rgba(255, 255, 255, 0.3)'
-              }}
-              onClick={(e) => e.stopPropagation()}
-            />
-          ) : (
-            <span 
-              className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
-              style={{ color: headerTextColor }}
-              onClick={handleNameClick}
-            >
-              {group.name}
+        {/* Group indicator and name - no gap at all */}
+        <div className="flex items-center flex-1 ml-1">
+          {/* Group name and count */}
+          <div className="flex items-center">
+            {isEditingName ? (
+              <Input
+                value={editingName}
+                onChange={e => setEditingName(e.target.value)}
+                onKeyDown={handleNameKeyDown}
+                onBlur={handleNameBlur}
+                autoFocus
+                size="small"
+                className="text-sm font-semibold"
+                style={{
+                  width: 'auto',
+                  minWidth: '100px',
+                  backgroundColor: 'rgba(255, 255, 255, 0.1)',
+                  color: headerTextColor,
+                  border: '1px solid rgba(255, 255, 255, 0.3)',
+                }}
+                onClick={e => e.stopPropagation()}
+              />
+            ) : (
+              <span
+                className="text-sm font-semibold pr-2 cursor-pointer hover:underline"
+                style={{ color: headerTextColor }}
+                onClick={handleNameClick}
+              >
+                {group.name}
+              </span>
+            )}
+            <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
+              ({group.count})
             </span>
-          )}
-          <span className="text-sm font-semibold ml-1" style={{ color: headerTextColor }}>
-            ({group.count})
-          </span>
+          </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>
 
-      {/* 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') && 
-       (groupProgressValues.todoProgress || groupProgressValues.doingProgress || groupProgressValues.doneProgress) && (
-        <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"
-          style={{ 
-            position: 'sticky',
-            right: '16px',
-            zIndex: 35, // Higher than header
-            minWidth: '160px',
-            height: '30px'
-          }}
-        >
-          <GroupProgressBar
-            todoProgress={groupProgressValues.todoProgress}
-            doingProgress={groupProgressValues.doingProgress}
-            doneProgress={groupProgressValues.doneProgress}
-            groupType={group.groupType || currentGrouping || ''}
-          />
-        </div>
-      )}
+      {(currentGrouping === 'priority' || currentGrouping === 'phase') &&
+        !(groupProgressValues.todoProgress === 0 && groupProgressValues.doingProgress === 0 && groupProgressValues.doneProgress === 0) && (
+          <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"
+            style={{
+              position: 'sticky',
+              right: '16px',
+              zIndex: 35, // Higher than header
+              minWidth: '160px',
+              height: '30px',
+            }}
+          >
+            <GroupProgressBar
+              todoProgress={groupProgressValues.todoProgress}
+              doingProgress={groupProgressValues.doingProgress}
+              doneProgress={groupProgressValues.doneProgress}
+              groupType={group.groupType || currentGrouping || ''}
+            />
+          </div>
+        )}
     </div>
   );
 };
 
-export default TaskGroupHeader; 
+export default TaskGroupHeader;

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

@@ -9,6 +9,7 @@ import {
   KeyboardSensor,
   TouchSensor,
   closestCenter,
+  useDroppable,
 } from '@dnd-kit/core';
 import {
   SortableContext,
@@ -59,13 +60,113 @@ 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<{
+  groupId: string;
+  visibleColumns: any[];
+  t: (key: string) => string;
+}> = ({ groupId, visibleColumns, t }) => {
+  const { setNodeRef, isOver, active } = useDroppable({
+    id: `empty-group-${groupId}`,
+    data: {
+      type: 'group',
+      groupId: groupId,
+      isEmpty: true,
+    },
+  });
+
+  return (
+    <div 
+      ref={setNodeRef}
+      className={`relative w-full transition-colors duration-200 ${
+        isOver && active ? 'bg-blue-50 dark:bg-blue-900/20' : ''
+      }`}
+    >
+      <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}`}
+              className="border-r border-gray-200 dark:border-gray-700"
+              style={emptyColumnStyle}
+            />
+          );
+        })}
+      </div>
+      {isOver && active && (
+        <div className="absolute inset-0 border-2 border-dashed border-blue-400 dark:border-blue-500 rounded-md pointer-events-none" />
+      )}
+    </div>
+  );
+};
+
+// Placeholder Drop Indicator Component
+const PlaceholderDropIndicator: React.FC<{
+  isVisible: boolean;
+  visibleColumns: any[];
+}> = ({ isVisible, visibleColumns }) => {
+  if (!isVisible) return null;
+  
+  return (
+    <div 
+      className="flex items-center min-w-max px-1 border-2 border-dashed border-blue-400 dark:border-blue-500 bg-blue-50 dark:bg-blue-900/20 rounded-md mx-1 my-1 transition-all duration-200 ease-in-out"
+      style={{ minWidth: 'max-content', height: '40px' }}
+    >
+      {visibleColumns.map((column, index) => {
+        const columnStyle = {
+          width: column.width,
+          flexShrink: 0,
+        };
+        return (
+          <div
+            key={`placeholder-${column.id}`}
+            className="flex items-center justify-center h-full"
+            style={columnStyle}
+          >
+            {/* Show "Drop task here" message in the title column */}
+            {column.id === 'title' && (
+              <div className="text-xs text-blue-600 dark:text-blue-400 font-medium opacity-75">
+                Drop task here
+              </div>
+            )}
+            {/* Show subtle placeholder content in other columns */}
+            {column.id !== 'title' && column.id !== 'dragHandle' && (
+              <div className="w-full h-4 mx-1 bg-white dark:bg-gray-700 rounded opacity-50" />
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
 
 // Hooks and utilities
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
@@ -83,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);
@@ -127,7 +230,7 @@ const TaskListV2Section: React.FC = () => {
   );
 
   // Custom hooks
-  const { activeId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
+  const { activeId, overId, handleDragStart, handleDragOver, handleDragEnd } = useDragAndDrop(
     allTasks,
     groups
   );
@@ -396,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,
@@ -407,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
@@ -440,6 +543,7 @@ const TaskListV2Section: React.FC = () => {
     return virtuosoGroups.flatMap(group => group.tasks);
   }, [virtuosoGroups]);
 
+
   // Render functions
   const renderGroup = useCallback(
     (groupIndex: number) => {
@@ -454,42 +558,18 @@ const TaskListV2Section: React.FC = () => {
               id: group.id,
               name: group.title,
               count: group.actualCount,
-              color: group.color,
-              todo_progress: group.todo_progress,
-              doing_progress: group.doing_progress,
-              done_progress: group.done_progress,
-              groupType: group.groupType,
+              color: isDarkMode ? group.color_code_dark : group.color,
             }}
             isCollapsed={isGroupCollapsed}
             onToggle={() => handleGroupCollapse(group.id)}
             projectId={urlProjectId || ''}
           />
           {isGroupEmpty && !isGroupCollapsed && (
-            <div className="relative w-full">
-              <div className="flex items-center min-w-max px-1 py-6">
-                {visibleColumns.map((column, index) => {
-                  const emptyColumnStyle = {
-                    width: column.width,
-                    flexShrink: 0,
-                    ...(column.id === 'labels' && column.width === 'auto'
-                      ? { minWidth: '200px', flexGrow: 1 }
-                      : {}),
-                  };
-                  return (
-                    <div
-                      key={`empty-${column.id}`}
-                      className="border-r border-gray-200 dark:border-gray-700"
-                      style={emptyColumnStyle}
-                    />
-                  );
-                })}
-              </div>
-              <div className="absolute left-4 top-1/2 transform -translate-y-1/2 flex items-center">
-                <div className="text-sm text-gray-500 dark:text-gray-400 bg-white dark:bg-gray-900 px-4 py-3 rounded-md border border-gray-200 dark:border-gray-700 shadow-sm">
-                  {t('noTasksInGroup')}
-                </div>
-              </div>
-            </div>
+            <EmptyGroupDropZone 
+              groupId={group.id}
+              visibleColumns={visibleColumns}
+              t={t}
+            />
           )}
         </div>
       );
@@ -546,12 +626,6 @@ const TaskListV2Section: React.FC = () => {
             const columnStyle: ColumnStyle = {
               width: column.width,
               flexShrink: 0,
-              ...(column.id === 'labels' && column.width === 'auto'
-                ? {
-                    minWidth: '200px',
-                    flexGrow: 1,
-                  }
-                : {}),
               ...((column as any).minWidth && { minWidth: (column as any).minWidth }),
               ...((column as any).maxWidth && { maxWidth: (column as any).maxWidth }),
             };
@@ -615,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">
@@ -687,8 +842,9 @@ const TaskListV2Section: React.FC = () => {
                     {renderGroup(groupIndex)}
 
                     {/* Group Tasks */}
-                    {!collapsedGroups.has(group.id) &&
-                      group.tasks.map((task, taskIndex) => {
+                    {!collapsedGroups.has(group.id) && (
+                      group.tasks.length > 0 ? (
+                        group.tasks.map((task, taskIndex) => {
                         const globalTaskIndex =
                           virtuosoGroups.slice(0, groupIndex).reduce((sum, g) => sum + g.count, 0) +
                           taskIndex;
@@ -696,12 +852,41 @@ const TaskListV2Section: React.FC = () => {
                         // Check if this is the first actual task in the group (not AddTaskRow)
                         const isFirstTaskInGroup = taskIndex === 0 && !('isAddTaskRow' in task);
 
+                        // Check if we should show drop indicators
+                        const isTaskBeingDraggedOver = overId === task.id;
+                        const isGroupBeingDraggedOver = overId === group.id;
+                        const isFirstTaskInGroupBeingDraggedOver = isFirstTaskInGroup && isTaskBeingDraggedOver;
+
                         return (
                           <div key={task.id || `add-task-${group.id}-${taskIndex}`}>
+                            {/* Placeholder drop indicator before first task in group */}
+                            {isFirstTaskInGroupBeingDraggedOver && (
+                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
+                            )}
+                            
+                            {/* Placeholder drop indicator between tasks */}
+                            {isTaskBeingDraggedOver && !isFirstTaskInGroup && (
+                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
+                            )}
+                            
                             {renderTask(globalTaskIndex, isFirstTaskInGroup)}
+                            
+                            {/* Placeholder drop indicator at end of group when dragging over group */}
+                            {isGroupBeingDraggedOver && taskIndex === group.tasks.length - 1 && (
+                              <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
+                            )}
                           </div>
                         );
-                      })}
+                      })
+                      ) : (
+                        // Handle empty groups with placeholder drop indicator
+                        overId === group.id && (
+                          <div style={{ minWidth: 'max-content' }}>
+                            <PlaceholderDropIndicator isVisible={true} visibleColumns={visibleColumns} />
+                          </div>
+                        )
+                      )
+                    )}
                   </div>
                 ))}
               </div>
@@ -710,21 +895,19 @@ const TaskListV2Section: React.FC = () => {
         </div>
 
         {/* Drag Overlay */}
-        <DragOverlay dropAnimation={null}>
+        <DragOverlay dropAnimation={{ duration: 200, easing: 'ease-in-out' }}>
           {activeId ? (
-            <div className="bg-white dark:bg-gray-800 shadow-xl rounded-md border-2 border-blue-400 opacity-95">
-              <div className="px-4 py-3">
-                <div className="flex items-center gap-3">
-                  <HolderOutlined className="text-blue-500" />
-                  <div>
-                    <div className="text-sm font-medium text-gray-900 dark:text-white">
-                      {allTasks.find(task => task.id === activeId)?.name ||
-                        allTasks.find(task => task.id === activeId)?.title ||
-                        t('emptyStates.dragTaskFallback')}
-                    </div>
-                    <div className="text-xs text-gray-500 dark:text-gray-400">
-                      {allTasks.find(task => task.id === activeId)?.task_key}
-                    </div>
+            <div 
+              className="bg-white dark:bg-gray-800 shadow-lg rounded-md border border-blue-400 dark:border-blue-500 opacity-90"
+              style={{ width: visibleColumns.find(col => col.id === 'title')?.width || '300px' }}
+            >
+              <div className="px-3 py-2">
+                <div className="flex items-center gap-2">
+                  <HolderOutlined className="text-gray-400 dark:text-gray-500 text-xs" />
+                  <div className="text-sm font-medium text-gray-900 dark:text-white truncate flex-1">
+                    {allTasks.find(task => task.id === activeId)?.name ||
+                      allTasks.find(task => task.id === activeId)?.title ||
+                      t('emptyStates.dragTaskFallback')}
                   </div>
                 </div>
               </div>

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

@@ -24,6 +24,7 @@ interface TaskRowProps {
   isSubtask?: boolean;
   isFirstInGroup?: boolean;
   updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
+  depth?: number;
 }
 
 const TaskRow: React.FC<TaskRowProps> = memo(({ 
@@ -32,7 +33,8 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
   visibleColumns, 
   isSubtask = false, 
   isFirstInGroup = false, 
-  updateTaskCustomColumnValue 
+  updateTaskCustomColumnValue,
+  depth = 0
 }) => {
   // Get task data and selection state from Redux
   const task = useAppSelector(state => selectTaskById(state, taskId));
@@ -107,13 +109,14 @@ const TaskRow: React.FC<TaskRowProps> = memo(({
     handleTaskNameEdit,
     attributes,
     listeners,
+    depth,
   });
 
   // Memoize style object to prevent unnecessary re-renders
   const style = useMemo(() => ({
     transform: CSS.Transform.toString(transform),
     transition,
-    opacity: isDragging ? 0.5 : 1,
+    opacity: isDragging ? 0 : 1, // Completely hide the original task while dragging
   }), [transform, transition, isDragging]);
 
   return (

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

@@ -22,6 +22,8 @@ interface TaskRowWithSubtasksProps {
   }>;
   isFirstInGroup?: boolean;
   updateTaskCustomColumnValue?: (taskId: string, columnKey: string, value: string) => void;
+  depth?: number; // Add depth prop to track nesting level
+  maxDepth?: number; // Add maxDepth prop to limit nesting
 }
 
 interface AddSubtaskRowProps {
@@ -32,14 +34,15 @@ interface AddSubtaskRowProps {
     width: string;
     isSticky?: boolean;
   }>;
-  onSubtaskAdded: () => void; // Simplified - no rowId needed
-  rowId: string; // Unique identifier for this add subtask row
-  autoFocus?: boolean; // Whether this row should auto-focus on mount
-  isActive?: boolean; // Whether this row should show the input/button
-  onActivate?: () => void; // Simplified - no rowId needed
+  onSubtaskAdded: () => void;
+  rowId: string;
+  autoFocus?: boolean;
+  isActive?: boolean;
+  onActivate?: () => void;
+  depth?: number; // Add depth prop for proper indentation
 }
 
-const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({ 
+const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
   parentTaskId, 
   projectId, 
   visibleColumns, 
@@ -47,25 +50,20 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
   rowId,
   autoFocus = false,
   isActive = true,
-  onActivate
+  onActivate,
+  depth = 0
 }) => {
-  const [isAdding, setIsAdding] = useState(autoFocus);
+  const { t } = useTranslation('task-list-table');
+  const [isAdding, setIsAdding] = useState(false);
   const [subtaskName, setSubtaskName] = useState('');
   const inputRef = useRef<any>(null);
-  const { socket, connected } = useSocket();
-  const { t } = useTranslation('task-list-table');
   const dispatch = useAppDispatch();
-  
-  // Get session data for reporter_id and team_id
+  const { socket, connected } = useSocket();
   const currentSession = useAuthService().getCurrentSession();
 
-  // Auto-focus when autoFocus prop is true
   useEffect(() => {
     if (autoFocus && inputRef.current) {
-      setIsAdding(true);
-      setTimeout(() => {
-        inputRef.current?.focus();
-      }, 100);
+      inputRef.current.focus();
     }
   }, [autoFocus]);
 
@@ -141,11 +139,15 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
         return (
           <div className="flex items-center h-full" style={baseStyle}>
             <div className="flex items-center w-full h-full">
-              {/* Match subtask indentation pattern - tighter spacing */}
-              <div className="w-4" />
+              {/* Match subtask indentation pattern - reduced spacing for level 1 */}
               <div className="w-2" />
+              {/* Add additional indentation for deeper levels - increased spacing for level 2+ */}
+              {Array.from({ length: depth }).map((_, i) => (
+                <div key={i} className="w-6" />
+              ))}
+              <div className="w-1" />
               
-              {isActive ? (
+                            {isActive ? (
                 !isAdding ? (
                   <button
                     onClick={() => {
@@ -188,7 +190,7 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
       default:
         return <div style={baseStyle} />;
     }
-  }, [isAdding, subtaskName, handleAddSubtask, handleCancel, handleBlur, handleKeyDown, t, isActive, onActivate]);
+  }, [isAdding, subtaskName, handleAddSubtask, handleCancel, handleBlur, handleKeyDown, t, isActive, onActivate, depth]);
 
   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">
@@ -203,12 +205,42 @@ const AddSubtaskRow: React.FC<AddSubtaskRowProps> = memo(({
 
 AddSubtaskRow.displayName = 'AddSubtaskRow';
 
+// Helper function to get background color based on depth
+const getSubtaskBackgroundColor = (depth: number) => {
+  switch (depth) {
+    case 1:
+      return 'bg-gray-50 dark:bg-gray-800/50';
+    case 2:
+      return 'bg-blue-50 dark:bg-blue-900/20';
+    case 3:
+      return 'bg-green-50 dark:bg-green-900/20';
+    default:
+      return 'bg-gray-50 dark:bg-gray-800/50';
+  }
+};
+
+// Helper function to get border color based on depth
+const getBorderColor = (depth: number) => {
+  switch (depth) {
+    case 1:
+      return 'border-blue-200 dark:border-blue-700';
+    case 2:
+      return 'border-green-200 dark:border-green-700';
+    case 3:
+      return 'border-purple-200 dark:border-purple-700';
+    default:
+      return 'border-blue-200 dark:border-blue-700';
+  }
+};
+
 const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({ 
   taskId, 
   projectId, 
   visibleColumns,
   isFirstInGroup = false,
-  updateTaskCustomColumnValue
+  updateTaskCustomColumnValue,
+  depth = 0,
+  maxDepth = 3
 }) => {
   const task = useAppSelector(state => selectTaskById(state, taskId));
   const isLoadingSubtasks = useAppSelector(state => selectSubtaskLoading(state, taskId));
@@ -223,6 +255,9 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
     return null;
   }
 
+  // Don't render subtasks if we've reached the maximum depth
+  const canHaveSubtasks = depth < maxDepth;
+
   return (
     <>
       {/* Main task row */}
@@ -232,10 +267,12 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
         visibleColumns={visibleColumns}
         isFirstInGroup={isFirstInGroup}
         updateTaskCustomColumnValue={updateTaskCustomColumnValue}
+        isSubtask={depth > 0}
+        depth={depth}
       />
       
       {/* Subtasks and add subtask row when expanded */}
-      {task.show_sub_tasks && (
+      {canHaveSubtasks && task.show_sub_tasks && (
         <>
           {/* Show loading skeleton while fetching subtasks */}
           {isLoadingSubtasks && (
@@ -244,22 +281,23 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
             </>
           )}
           
-          {/* Render existing subtasks when not loading */}
+          {/* Render existing subtasks when not loading - RECURSIVELY */}
           {!isLoadingSubtasks && task.sub_tasks?.map((subtask: Task) => (
-            <div key={subtask.id} className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
-              <TaskRow
+            <div key={subtask.id} className={`${getSubtaskBackgroundColor(depth + 1)} border-l-2 ${getBorderColor(depth + 1)}`}>
+              <TaskRowWithSubtasks
                 taskId={subtask.id}
                 projectId={projectId}
                 visibleColumns={visibleColumns}
-                isSubtask={true}
                 updateTaskCustomColumnValue={updateTaskCustomColumnValue}
+                depth={depth + 1}
+                maxDepth={maxDepth}
               />
             </div>
           ))}
           
           {/* Add subtask row - only show when not loading */}
           {!isLoadingSubtasks && (
-            <div className="bg-gray-50 dark:bg-gray-800/50 border-l-2 border-blue-200 dark:border-blue-700">
+            <div className={`${getSubtaskBackgroundColor(depth + 1)} border-l-2 ${getBorderColor(depth + 1)}`}>
               <AddSubtaskRow
                 parentTaskId={taskId}
                 projectId={projectId}
@@ -267,8 +305,9 @@ const TaskRowWithSubtasks: React.FC<TaskRowWithSubtasksProps> = memo(({
                 onSubtaskAdded={handleSubtaskAdded}
                 rowId={`add-subtask-${taskId}`}
                 autoFocus={false}
-                isActive={true} // Always show the add subtask row
-                onActivate={undefined} // Not needed anymore
+                isActive={true}
+                onActivate={undefined}
+                depth={depth + 1}
               />
             </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/components/task-list-v2/components/TaskRowColumns.tsx

@@ -252,10 +252,9 @@ interface LabelsColumnProps {
 }
 
 export const LabelsColumn: React.FC<LabelsColumnProps> = memo(({ width, task, labelsAdapter, isDarkMode, visibleColumns }) => {
-  const labelsColumn = visibleColumns.find(col => col.id === 'labels');
   const labelsStyle = {
     width,
-    ...(labelsColumn?.width === 'auto' ? { minWidth: '200px', flexGrow: 1 } : {})
+    flexShrink: 0
   };
 
   return (

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

@@ -24,6 +24,7 @@ interface TitleColumnProps {
   onEditTaskName: (editing: boolean) => void;
   onTaskNameChange: (name: string) => void;
   onTaskNameSave: () => void;
+  depth?: number;
 }
 
 export const TitleColumn: React.FC<TitleColumnProps> = memo(({
@@ -36,7 +37,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
   taskName,
   onEditTaskName,
   onTaskNameChange,
-  onTaskNameSave
+  onTaskNameSave,
+  depth = 0
 }) => {
   const dispatch = useAppDispatch();
   const { socket, connected } = useSocket();
@@ -150,11 +152,16 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
         /* Normal layout when not editing */
         <>
           <div className="flex items-center flex-1 min-w-0">
-            {/* Indentation for subtasks - tighter spacing */}
-            {isSubtask && <div className="w-4 flex-shrink-0" />}
+            {/* Indentation for subtasks - reduced spacing for level 1 */}
+            {isSubtask && <div className="w-2 flex-shrink-0" />}
             
-            {/* Expand/Collapse button - only show for parent tasks */}
-            {!isSubtask && (
+            {/* Additional indentation for deeper levels - increased spacing for level 2+ */}
+            {Array.from({ length: depth }).map((_, i) => (
+              <div key={i} className="w-6 flex-shrink-0" />
+            ))}
+            
+            {/* Expand/Collapse button - show for any task that can have sub-tasks */}
+            {depth < 2 && ( // Only show if not at maximum depth (can still have children)
               <button
                 onClick={handleToggleExpansion}
                 className={`flex h-4 w-4 items-center justify-center rounded-sm text-xs mr-1 hover:border hover:border-blue-500 hover:bg-blue-50 dark:hover:bg-blue-900/20 hover:scale-110 transition-all duration-300 ease-out flex-shrink-0 ${
@@ -175,8 +182,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
               </button>
             )}
             
-            {/* Additional indentation for subtasks after the expand button space */}
-            {isSubtask && <div className="w-2 flex-shrink-0" />}
+            {/* Additional indentation for subtasks after the expand button space - reduced for level 1 */}
+            {isSubtask && <div className="w-1 flex-shrink-0" />}
             
             <div className="flex items-center gap-2 flex-1 min-w-0">
               {/* Task name with dynamic width */}
@@ -202,8 +209,8 @@ export const TitleColumn: React.FC<TitleColumnProps> = memo(({
               
               {/* Indicators container - flex-shrink-0 to prevent compression */}
               <div className="flex items-center gap-1 flex-shrink-0">
-                {/* Subtask count indicator - only show if count > 0 */}
-                {!isSubtask && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
+                {/* Subtask count indicator - show for any task that can have sub-tasks */}
+                {depth < 2 && task.sub_tasks_count != null && task.sub_tasks_count > 0 && (
                   <Tooltip title={t(`indicators.tooltips.subtasks${task.sub_tasks_count === 1 ? '' : '_plural'}`, { count: task.sub_tasks_count })}>
                     <div className="flex items-center gap-1 px-1.5 py-0.5 bg-blue-50 dark:bg-blue-900/20 rounded text-xs">
                       <span className="text-blue-600 dark:text-blue-400 font-medium">

worklenz-frontend/src/components/task-list-v2/constants/columns.ts

@@ -19,10 +19,10 @@ export const BASE_COLUMNS = [
   { id: 'title', label: 'taskColumn', width: '470px', isSticky: true, key: COLUMN_KEYS.NAME },
   { id: 'description', label: 'descriptionColumn', width: '260px', key: COLUMN_KEYS.DESCRIPTION },
   { id: 'progress', label: 'progressColumn', width: '120px', key: COLUMN_KEYS.PROGRESS },
-  { id: 'assignees', label: 'assigneesColumn', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
-  { id: 'labels', label: 'labelsColumn', width: 'auto', key: COLUMN_KEYS.LABELS },
-  { id: 'phase', label: 'phaseColumn', width: '120px', key: COLUMN_KEYS.PHASE },
   { id: 'status', label: 'statusColumn', width: '120px', key: COLUMN_KEYS.STATUS },
+  { id: 'assignees', label: 'assigneesColumn', width: '150px', key: COLUMN_KEYS.ASSIGNEES },
+  { id: 'labels', label: 'labelsColumn', width: '250px', key: COLUMN_KEYS.LABELS },
+  { id: 'phase', label: 'phaseColumn', width: '120px', key: COLUMN_KEYS.PHASE },
   { id: 'priority', label: 'priorityColumn', width: '120px', key: COLUMN_KEYS.PRIORITY },
   { id: 'timeTracking', label: 'timeTrackingColumn', width: '120px', key: COLUMN_KEYS.TIME_TRACKING },
   { id: 'estimation', label: 'estimationColumn', width: '120px', key: COLUMN_KEYS.ESTIMATION },

worklenz-frontend/src/components/task-list-v2/hooks/useDragAndDrop.ts

@@ -1,12 +1,142 @@
 import { useState, useCallback } from 'react';
 import { DragEndEvent, DragOverEvent, DragStartEvent } from '@dnd-kit/core';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
-import { reorderTasksInGroup, moveTaskBetweenGroups } from '@/features/task-management/task-management.slice';
-import { Task, TaskGroup } from '@/types/task-management.types';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { reorderTasksInGroup } from '@/features/task-management/task-management.slice';
+import { selectCurrentGrouping } from '@/features/task-management/grouping.slice';
+import { Task, TaskGroup, getSortOrderField } from '@/types/task-management.types';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { useParams } from 'react-router-dom';
+import { useAuthService } from '@/hooks/useAuth';
+import logger from '@/utils/errorLogger';
 
 export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
   const dispatch = useAppDispatch();
+  const { socket, connected } = useSocket();
+  const { projectId } = useParams();
+  const currentGrouping = useAppSelector(selectCurrentGrouping);
+  const currentSession = useAuthService().getCurrentSession();
   const [activeId, setActiveId] = useState<string | null>(null);
+  const [overId, setOverId] = useState<string | null>(null);
+
+  // Helper function to emit socket event for persistence
+  const emitTaskSortChange = useCallback(
+    (taskId: string, sourceGroup: TaskGroup, targetGroup: TaskGroup, insertIndex: number) => {
+      if (!socket || !connected || !projectId) {
+        logger.warning('Socket not connected or missing project ID');
+        return;
+      }
+
+      const task = allTasks.find(t => t.id === taskId);
+      if (!task) {
+        logger.error('Task not found for socket emission:', taskId);
+        return;
+      }
+
+      // Get team_id from current session
+      const teamId = currentSession?.team_id || '';
+
+      // Use new bulk update approach - recalculate ALL task orders to prevent duplicates
+      const taskUpdates: any[] = [];
+      
+      // Create a copy of all groups and perform the move operation
+      const updatedGroups = groups.map(group => ({
+        ...group,
+        taskIds: [...group.taskIds]
+      }));
+      
+      // Find the source and target groups in our copy
+      const sourceGroupCopy = updatedGroups.find(g => g.id === sourceGroup.id)!;
+      const targetGroupCopy = updatedGroups.find(g => g.id === targetGroup.id)!;
+      
+      if (sourceGroup.id === targetGroup.id) {
+        // Same group - reorder within the group
+        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
+        // Remove task from old position
+        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
+        // Insert at new position
+        sourceGroupCopy.taskIds.splice(insertIndex, 0, taskId);
+      } else {
+        // Different groups - move task between groups
+        // Remove from source group
+        const sourceIndex = sourceGroupCopy.taskIds.indexOf(taskId);
+        sourceGroupCopy.taskIds.splice(sourceIndex, 1);
+        
+        // Add to target group
+        targetGroupCopy.taskIds.splice(insertIndex, 0, taskId);
+      }
+      
+      // Now assign sequential sort orders to ALL tasks across ALL groups
+      let currentSortOrder = 0;
+      updatedGroups.forEach(group => {
+        group.taskIds.forEach(id => {
+          const update: any = {
+            task_id: id,
+            sort_order: currentSortOrder
+          };
+          
+          // Add group-specific fields for the moved task if it changed groups
+          if (id === taskId && sourceGroup.id !== targetGroup.id) {
+            if (currentGrouping === 'status') {
+              update.status_id = targetGroup.id;
+            } else if (currentGrouping === 'priority') {
+              update.priority_id = targetGroup.id;
+            } else if (currentGrouping === 'phase') {
+              update.phase_id = targetGroup.id;
+            }
+          }
+          
+          taskUpdates.push(update);
+          currentSortOrder++;
+        });
+      });
+
+      const socketData = {
+        project_id: projectId,
+        group_by: currentGrouping || 'status',
+        task_updates: taskUpdates,
+        from_group: sourceGroup.id,
+        to_group: targetGroup.id,
+        task: {
+          id: task.id,
+          project_id: projectId,
+          status: task.status || '',
+          priority: task.priority || '',
+        },
+        team_id: teamId,
+      };
+
+      socket.emit(SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), socketData);
+
+      // Also emit the specific grouping field change event for the moved task
+      if (sourceGroup.id !== targetGroup.id) {
+        if (currentGrouping === 'phase') {
+          // Emit phase change event
+          socket.emit(SocketEvents.TASK_PHASE_CHANGE.toString(), {
+            task_id: taskId,
+            phase_id: targetGroup.id,
+            parent_task: task.parent_task_id || null,
+          });
+        } else if (currentGrouping === 'priority') {
+          // Emit priority change event
+          socket.emit(SocketEvents.TASK_PRIORITY_CHANGE.toString(), JSON.stringify({
+            task_id: taskId,
+            priority_id: targetGroup.id,
+            team_id: teamId,
+          }));
+        } else if (currentGrouping === 'status') {
+          // Emit status change event
+          socket.emit(SocketEvents.TASK_STATUS_CHANGE.toString(), JSON.stringify({
+            task_id: taskId,
+            status_id: targetGroup.id,
+            team_id: teamId,
+          }));
+        }
+      }
+    },
+    [socket, connected, projectId, allTasks, groups, currentGrouping, currentSession]
+  );
 
   const handleDragStart = useCallback((event: DragStartEvent) => {
     setActiveId(event.active.id as string);
@@ -16,11 +146,17 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
     (event: DragOverEvent) => {
       const { active, over } = event;
 
-      if (!over) return;
+      if (!over) {
+        setOverId(null);
+        return;
+      }
 
       const activeId = active.id;
       const overId = over.id;
 
+      // Set the overId for drop indicators
+      setOverId(overId as string);
+
       // Find the active task and the item being dragged over
       const activeTask = allTasks.find(task => task.id === activeId);
       if (!activeTask) return;
@@ -38,15 +174,6 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
       }
 
       if (!activeGroup || !targetGroup) return;
-
-      // If dragging to a different group, we need to handle cross-group movement
-      if (activeGroup.id !== targetGroup.id) {
-        console.log('Cross-group drag detected:', {
-          activeTask: activeTask.id,
-          fromGroup: activeGroup.id,
-          toGroup: targetGroup.id,
-        });
-      }
     },
     [allTasks, groups]
   );
@@ -55,6 +182,7 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
     (event: DragEndEvent) => {
       const { active, over } = event;
       setActiveId(null);
+      setOverId(null);
 
       if (!over || active.id === over.id) {
         return;
@@ -66,22 +194,27 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
       // Find the active task
       const activeTask = allTasks.find(task => task.id === activeId);
       if (!activeTask) {
-        console.error('Active task not found:', activeId);
+        logger.error('Active task not found:', activeId);
         return;
       }
 
       // Find the groups
       const activeGroup = groups.find(group => group.taskIds.includes(activeTask.id));
       if (!activeGroup) {
-        console.error('Could not find active group for task:', activeId);
+        logger.error('Could not find active group for task:', activeId);
         return;
       }
 
-      // Check if we're dropping on a task or a group
+      // Check if we're dropping on a task, group, or empty group
       const overTask = allTasks.find(task => task.id === overId);
       const overGroup = groups.find(group => group.id === overId);
+      
+      // Check if dropping on empty group drop zone
+      const isEmptyGroupDrop = typeof overId === 'string' && overId.startsWith('empty-group-');
+      const emptyGroupId = isEmptyGroupDrop ? overId.replace('empty-group-', '') : null;
+      const emptyGroup = emptyGroupId ? groups.find(group => group.id === emptyGroupId) : null;
 
-      let targetGroup = overGroup;
+      let targetGroup = overGroup || emptyGroup;
       let insertIndex = 0;
 
       if (overTask) {
@@ -94,27 +227,20 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
         // Dropping on a group (at the end)
         targetGroup = overGroup;
         insertIndex = targetGroup.taskIds.length;
+      } else if (emptyGroup) {
+        // Dropping on an empty group
+        targetGroup = emptyGroup;
+        insertIndex = 0; // First position in empty group
       }
 
       if (!targetGroup) {
-        console.error('Could not find target group');
+        logger.error('Could not find target group');
         return;
       }
 
       const isCrossGroup = activeGroup.id !== targetGroup.id;
       const activeIndex = activeGroup.taskIds.indexOf(activeTask.id);
 
-      console.log('Drag operation:', {
-        activeId,
-        overId,
-        activeTask: activeTask.name || activeTask.title,
-        activeGroup: activeGroup.id,
-        targetGroup: targetGroup.id,
-        activeIndex,
-        insertIndex,
-        isCrossGroup,
-      });
-
       if (isCrossGroup) {
         // Moving task between groups
         console.log('Moving task between groups:', {
@@ -124,16 +250,8 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
           newPosition: insertIndex,
         });
 
-        // Move task to the target group
-        dispatch(
-          moveTaskBetweenGroups({
-            taskId: activeId as string,
-            sourceGroupId: activeGroup.id,
-            targetGroupId: targetGroup.id,
-          })
-        );
-
-        // Reorder task within target group at drop position
+        // reorderTasksInGroup handles both same-group and cross-group moves
+        // No need for separate moveTaskBetweenGroups call
         dispatch(
           reorderTasksInGroup({
             sourceTaskId: activeId as string,
@@ -142,15 +260,10 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
             destinationGroupId: targetGroup.id,
           })
         );
-      } else {
-        // Reordering within the same group
-        console.log('Reordering task within same group:', {
-          task: activeTask.name || activeTask.title,
-          group: activeGroup.title,
-          from: activeIndex,
-          to: insertIndex,
-        });
 
+        // Emit socket event for persistence
+        emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
+      } else {
         if (activeIndex !== insertIndex) {
           // Reorder task within same group at drop position
           dispatch(
@@ -161,14 +274,18 @@ export const useDragAndDrop = (allTasks: Task[], groups: TaskGroup[]) => {
               destinationGroupId: activeGroup.id,
             })
           );
+
+          // Emit socket event for persistence
+          emitTaskSortChange(activeId as string, activeGroup, targetGroup, insertIndex);
         }
       }
     },
-    [allTasks, groups, dispatch]
+    [allTasks, groups, dispatch, emitTaskSortChange]
   );
 
   return {
     activeId,
+    overId,
     handleDragStart,
     handleDragOver,
     handleDragEnd,

worklenz-frontend/src/components/task-list-v2/hooks/useTaskRowColumns.tsx

@@ -58,6 +58,9 @@ interface UseTaskRowColumnsProps {
   // Drag and drop
   attributes: any;
   listeners: any;
+  
+  // Depth for nested subtasks
+  depth?: number;
 }
 
 export const useTaskRowColumns = ({
@@ -84,6 +87,7 @@ export const useTaskRowColumns = ({
   handleTaskNameEdit,
   attributes,
   listeners,
+  depth = 0,
 }: UseTaskRowColumnsProps) => {
   
   const renderColumn = useCallback((columnId: string, width: string, isSticky?: boolean, index?: number) => {
@@ -128,6 +132,7 @@ export const useTaskRowColumns = ({
             onEditTaskName={setEditTaskName}
             onTaskNameChange={setTaskName}
             onTaskNameSave={handleTaskNameSave}
+            depth={depth}
           />
         );
 

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

@@ -7,7 +7,7 @@ import {
   EntityId,
   createSelector,
 } from '@reduxjs/toolkit';
-import { Task, TaskManagementState, TaskGroup, TaskGrouping } from '@/types/task-management.types';
+import { Task, TaskManagementState, TaskGroup, TaskGrouping, getSortOrderField } from '@/types/task-management.types';
 import { ITaskListColumn } from '@/types/tasks/taskList.types';
 import { RootState } from '@/app/store';
 import {
@@ -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);
       }
@@ -660,12 +676,12 @@ const taskManagementSlice = createSlice({
           const [removed] = newTasks.splice(newTasks.indexOf(sourceTaskId), 1);
           newTasks.splice(newTasks.indexOf(destinationTaskId), 0, removed);
           group.taskIds = newTasks;
-  
-          // Update order for affected tasks. Assuming simple reordering affects order.
-          // This might need more sophisticated logic based on how `order` is used.
+
+          // Update order for affected tasks using the appropriate sort field
+          const sortField = getSortOrderField(state.grouping?.id);
           newTasks.forEach((id, index) => {
             if (newEntities[id]) {
-              newEntities[id] = { ...newEntities[id], order: index };
+              newEntities[id] = { ...newEntities[id], [sortField]: index };
             }
           });
         }
@@ -673,11 +689,11 @@ const taskManagementSlice = createSlice({
         // Moving between different groups
         const sourceGroup = state.groups.find(g => g.id === sourceGroupId);
         const destinationGroup = state.groups.find(g => g.id === destinationGroupId);
-  
+
         if (sourceGroup && destinationGroup) {
           // Remove from source group
           sourceGroup.taskIds = sourceGroup.taskIds.filter(id => id !== sourceTaskId);
-  
+
           // Add to destination group at the correct position relative to destinationTask
           const destinationIndex = destinationGroup.taskIds.indexOf(destinationTaskId);
           if (destinationIndex !== -1) {
@@ -685,50 +701,17 @@ const taskManagementSlice = createSlice({
           } else {
             destinationGroup.taskIds.push(sourceTaskId); // Add to end if destination task not found
           }
-  
-          // Update task's grouping field to reflect new group (e.g., status, priority, phase)
-          // This assumes the group ID directly corresponds to the task's field value
-          if (sourceTask) {
-            let updatedTask = { ...sourceTask };
-            switch (state.grouping?.id) {
-              case IGroupBy.STATUS:
-                updatedTask.status = destinationGroup.id;
-                break;
-              case IGroupBy.PRIORITY:
-                updatedTask.priority = destinationGroup.id;
-                break;
-              case IGroupBy.PHASE:
-                // Handle unmapped group specially
-                if (destinationGroup.id === 'Unmapped' || destinationGroup.title === 'Unmapped') {
-                  updatedTask.phase = ''; // Clear phase for unmapped group
-                } else {
-                  updatedTask.phase = destinationGroup.id;
-                }
-                break;
-              case IGroupBy.MEMBERS:
-                // If moving to a member group, ensure task is assigned to that member
-                // This assumes the group ID is the member ID
-                if (!updatedTask.assignees) {
-                  updatedTask.assignees = [];
-                }
-                if (!updatedTask.assignees.includes(destinationGroup.id)) {
-                  updatedTask.assignees.push(destinationGroup.id);
-                }
-                // If moving from a member group, and the task is no longer in any member group,
-                // consider removing the assignment (more complex logic might be needed here)
-                break;
-              default:
-                break;
-            }
-            newEntities[sourceTaskId] = updatedTask;
-          }
-  
-          // Update order for affected tasks in both groups if necessary
+
+          // Do NOT update the task's grouping field (priority, phase, status) here.
+          // This will be handled by the socket event handler after backend confirmation.
+
+          // Update order for affected tasks in both groups using the appropriate sort field
+          const sortField = getSortOrderField(state.grouping?.id);
           sourceGroup.taskIds.forEach((id, index) => {
-            if (newEntities[id]) newEntities[id] = { ...newEntities[id], order: index };
+            if (newEntities[id]) newEntities[id] = { ...newEntities[id], [sortField]: index };
           });
           destinationGroup.taskIds.forEach((id, index) => {
-            if (newEntities[id]) newEntities[id] = { ...newEntities[id], order: index };
+            if (newEntities[id]) newEntities[id] = { ...newEntities[id], [sortField]: index };
           });
         }
       }
@@ -958,8 +941,26 @@ const taskManagementSlice = createSlice({
       .addCase(fetchTasksV3.fulfilled, (state, action) => {
         state.loading = false;
         const { allTasks, groups, grouping } = action.payload;
-        tasksAdapter.setAll(state as EntityState<Task, string>, allTasks || []); // Ensure allTasks is an array
-        state.ids = (allTasks || []).map(task => task.id); // Also update ids
+        
+        // Preserve existing timer state from old tasks before replacing
+        const oldTasks = state.entities;
+        const tasksWithTimers = (allTasks || []).map(task => {
+          const oldTask = oldTasks[task.id];
+          if (oldTask?.timeTracking?.activeTimer) {
+            // Preserve the timer state from the old task
+            return {
+              ...task,
+              timeTracking: {
+                ...task.timeTracking,
+                activeTimer: oldTask.timeTracking.activeTimer
+              }
+            };
+          }
+          return task;
+        });
+        
+        tasksAdapter.setAll(state as EntityState<Task, string>, tasksWithTimers); // Ensure allTasks is an array
+        state.ids = tasksWithTimers.map(task => task.id); // Also update ids
         state.groups = groups;
         state.grouping = grouping;
       })
@@ -1010,7 +1011,7 @@ const taskManagementSlice = createSlice({
             order: subtask.sort_order || subtask.order || 0,
             parent_task_id: parentTaskId,
             is_sub_task: true,
-            sub_tasks_count: 0,
+            sub_tasks_count: subtask.sub_tasks_count || 0, // Use actual count from backend
             show_sub_tasks: false,
           }));
 
@@ -1185,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/features/task-management/taskListFields.slice.ts

@@ -14,10 +14,10 @@ const DEFAULT_FIELDS: TaskListField[] = [
   { key: 'KEY', label: 'Key', visible: false, order: 1 },
   { key: 'DESCRIPTION', label: 'Description', visible: false, order: 2 },
   { key: 'PROGRESS', label: 'Progress', visible: true, order: 3 },
-  { key: 'ASSIGNEES', label: 'Assignees', visible: true, order: 4 },
-  { key: 'LABELS', label: 'Labels', visible: true, order: 5 },
-  { key: 'PHASE', label: 'Phase', visible: true, order: 6 },
-  { key: 'STATUS', label: 'Status', visible: true, order: 7 },
+  { key: 'STATUS', label: 'Status', visible: true, order: 4 },
+  { key: 'ASSIGNEES', label: 'Assignees', visible: true, order: 5 },
+  { key: 'LABELS', label: 'Labels', visible: true, order: 6 },
+  { key: 'PHASE', label: 'Phase', visible: true, order: 7 },
   { key: 'PRIORITY', label: 'Priority', visible: true, order: 8 },
   { key: 'TIME_TRACKING', label: 'Time Tracking', visible: true, order: 9 },
   { key: 'ESTIMATION', label: 'Estimation', visible: false, order: 10 },

worklenz-frontend/src/hooks/useTaskSocketHandlers.ts

@@ -33,6 +33,7 @@ import {
   updateTaskDescription,
   updateSubTasks,
   updateTaskProgress,
+  updateTaskTimeTracking,
 } from '@/features/tasks/tasks.slice';
 import {
   addTask,
@@ -854,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
-          groupId = data.phase_id;
+          // For phase grouping, use phase_id, or 'Unmapped' if no phase_id
+          groupId = data.phase_id || 'Unmapped';
         }
 
+
         // Use addTaskToGroup with the actual group UUID
         dispatch(addTaskToGroup({ task, groupId: groupId || '' }));
 
@@ -936,6 +938,8 @@ export const useTaskSocketHandlers = () => {
       const { task_id, start_time } = typeof data === 'string' ? JSON.parse(data) : data;
       if (!task_id) return;
 
+      const timerTimestamp = start_time ? (typeof start_time === 'number' ? start_time : parseInt(start_time)) : Date.now();
+
       // Update the task-management slice to include timer state
       const currentTask = store.getState().taskManagement.entities[task_id];
       if (currentTask) {
@@ -943,13 +947,16 @@ export const useTaskSocketHandlers = () => {
           ...currentTask,
           timeTracking: {
             ...currentTask.timeTracking,
-            activeTimer: start_time ? (typeof start_time === 'number' ? start_time : parseInt(start_time)) : Date.now(),
+            activeTimer: timerTimestamp,
           },
           updatedAt: new Date().toISOString(),
           updated_at: new Date().toISOString(),
         };
         dispatch(updateTask(updatedTask));
       }
+
+      // Also update the tasks slice activeTimers to keep both slices in sync
+      dispatch(updateTaskTimeTracking({ taskId: task_id, timeTracking: timerTimestamp }));
     } catch (error) {
       logger.error('Error handling timer start event:', error);
     }
@@ -975,11 +982,79 @@ export const useTaskSocketHandlers = () => {
         };
         dispatch(updateTask(updatedTask));
       }
+
+      // Also update the tasks slice activeTimers to keep both slices in sync
+      dispatch(updateTaskTimeTracking({ taskId: task_id, timeTracking: null }));
     } catch (error) {
       logger.error('Error handling timer stop event:', error);
     }
   }, [dispatch]);
 
+  // Handler for task sort order change events
+  const handleTaskSortOrderChange = useCallback((data: any[]) => {
+    try {
+      if (!Array.isArray(data) || data.length === 0) return;
+
+      // DEBUG: Log the data received from the backend
+      console.log('[TASK_SORT_ORDER_CHANGE] Received data:', data);
+
+      // Get canonical lists from Redux
+      const state = store.getState();
+      const priorityList = state.priorityReducer?.priorities || [];
+      const phaseList = state.phaseReducer?.phaseList || [];
+      const statusList = state.taskStatusReducer?.status || [];
+
+      // The backend sends an array of tasks with updated sort orders and possibly grouping fields
+      data.forEach((taskData: any) => {
+        const currentTask = state.taskManagement.entities[taskData.id];
+        if (currentTask) {
+          let updatedTask: Task = {
+            ...currentTask,
+            order: taskData.sort_order || taskData.current_sort_order || currentTask.order,
+            updatedAt: new Date().toISOString(),
+            updated_at: new Date().toISOString(),
+          };
+
+          // Update grouping fields if present
+          if (typeof taskData.priority_id !== 'undefined') {
+            const found = priorityList.find(p => p.id === taskData.priority_id);
+            if (found) {
+              updatedTask.priority = found.name;
+              // updatedTask.priority_id = found.id; // Only if Task type has priority_id
+            } else {
+              updatedTask.priority = taskData.priority_id || '';
+              // updatedTask.priority_id = taskData.priority_id;
+            }
+          }
+          if (typeof taskData.phase_id !== 'undefined') {
+            const found = phaseList.find(p => p.id === taskData.phase_id);
+            if (found) {
+              updatedTask.phase = found.name;
+              // updatedTask.phase_id = found.id; // Only if Task type has phase_id
+            } else {
+              updatedTask.phase = taskData.phase_id || '';
+              // updatedTask.phase_id = taskData.phase_id;
+            }
+          }
+          if (typeof taskData.status_id !== 'undefined') {
+            const found = statusList.find(s => s.id === taskData.status_id);
+            if (found) {
+              updatedTask.status = found.name;
+              // updatedTask.status_id = found.id; // Only if Task type has status_id
+            } else {
+              updatedTask.status = taskData.status_id || '';
+              // updatedTask.status_id = taskData.status_id;
+            }
+          }
+
+          dispatch(updateTask(updatedTask));
+        }
+      });
+    } catch (error) {
+      logger.error('Error handling task sort order change event:', error);
+    }
+  }, [dispatch]);
+
   // Register socket event listeners
   useEffect(() => {
     if (!socket) return;
@@ -1013,6 +1088,7 @@ export const useTaskSocketHandlers = () => {
       { event: SocketEvents.TASK_CUSTOM_COLUMN_UPDATE.toString(), handler: handleCustomColumnUpdate },
       { event: SocketEvents.TASK_TIMER_START.toString(), handler: handleTimerStart },
       { event: SocketEvents.TASK_TIMER_STOP.toString(), handler: handleTimerStop },
+      { event: SocketEvents.TASK_SORT_ORDER_CHANGE.toString(), handler: handleTaskSortOrderChange },
 
     ];
 
@@ -1047,6 +1123,7 @@ export const useTaskSocketHandlers = () => {
     handleCustomColumnUpdate,
     handleTimerStart,
     handleTimerStop,
+    handleTaskSortOrderChange,
 
   ]);
 };

worklenz-frontend/src/hooks/useTaskTimer.ts

@@ -50,7 +50,11 @@ export const useTaskTimer = (taskId: string, initialStartTime: number | null) =>
 
   // Timer management effect
   useEffect(() => {
-    if (started && localStarted && reduxStartTime) {
+    if (started && reduxStartTime) {
+      // Sync local state with Redux state
+      if (!localStarted) {
+        setLocalStarted(true);
+      }
       clearTimerInterval();
       timerTick();
       intervalRef.current = setInterval(timerTick, 1000);

worklenz-frontend/src/hooks/useTimerInitialization.ts

@@ -0,0 +1,79 @@
+import { useEffect, useRef } from 'react';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
+import { updateTaskTimeTracking } from '@/features/tasks/tasks.slice';
+import { updateTask } from '@/features/task-management/task-management.slice';
+import { taskTimeLogsApiService } from '@/api/tasks/task-time-logs.api.service';
+import { store } from '@/app/store';
+import { Task } from '@/types/task-management.types';
+import logger from '@/utils/errorLogger';
+import moment from 'moment';
+
+export const useTimerInitialization = () => {
+  const dispatch = useAppDispatch();
+  const hasInitialized = useRef(false);
+
+  useEffect(() => {
+    const initializeTimers = async () => {
+      // Prevent duplicate initialization
+      if (hasInitialized.current) {
+        return;
+      }
+
+      try {
+        hasInitialized.current = true;
+        
+        // Fetch running timers from backend
+        const response = await taskTimeLogsApiService.getRunningTimers();
+        
+        if (response && response.done && Array.isArray(response.body)) {
+          const runningTimers = response.body;
+          
+          // Update Redux state for each running timer
+          runningTimers.forEach(timer => {
+            if (timer.task_id && timer.start_time) {
+              try {
+                // Convert start_time to timestamp
+                const startTime = moment(timer.start_time);
+                if (startTime.isValid()) {
+                  const timestamp = startTime.valueOf();
+                  
+                  // Update the tasks slice activeTimers
+                  dispatch(updateTaskTimeTracking({ 
+                    taskId: timer.task_id, 
+                    timeTracking: timestamp 
+                  }));
+                  
+                  // Update the task-management slice if the task exists
+                  const currentTask = store.getState().taskManagement.entities[timer.task_id];
+                  if (currentTask) {
+                    const updatedTask: Task = {
+                      ...currentTask,
+                      timeTracking: {
+                        ...currentTask.timeTracking,
+                        activeTimer: timestamp,
+                      },
+                      updatedAt: new Date().toISOString(),
+                      updated_at: new Date().toISOString(),
+                    };
+                    dispatch(updateTask(updatedTask));
+                  }
+                }
+              } catch (error) {
+                logger.error(`Error initializing timer for task ${timer.task_id}:`, error);
+              }
+            }
+          });
+          
+          if (runningTimers.length > 0) {
+            logger.info(`Initialized ${runningTimers.length} running timers from backend`);
+          }
+        }
+      } catch (error) {
+        logger.error('Error initializing timers from backend:', error);
+      }
+    };
+
+    // Initialize timers when the hook mounts
+    initializeTimers();
+  }, [dispatch]);
+}; 

worklenz-frontend/src/pages/account-setup/account-setup.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
+import { useSelector } from 'react-redux';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import { Space, Steps, Button, Typography } from 'antd/es';
@@ -26,6 +26,7 @@ import { validateEmail } from '@/utils/validateEmail';
 import { sanitizeInput } from '@/utils/sanitizeInput';
 import logo from '@/assets/images/worklenz-light-mode.png';
 import logoDark from '@/assets/images/worklenz-dark-mode.png';
+import { useAppDispatch } from '@/hooks/useAppDispatch';
 
 import './account-setup.css';
 import { IAccountSetupRequest } from '@/types/project-templates/project-templates.types';
@@ -34,7 +35,7 @@ import { profileSettingsApiService } from '@/api/settings/profile/profile-settin
 const { Title } = Typography;
 
 const AccountSetup: React.FC = () => {
-  const dispatch = useDispatch();
+  const dispatch = useAppDispatch();
   const { t } = useTranslation('account-setup');
   useDocumentTitle(t('setupYourAccount', 'Account Setup'));
   const navigate = useNavigate();
@@ -52,8 +53,7 @@ const AccountSetup: React.FC = () => {
     trackMixpanelEvent(evt_account_setup_visit);
     const verifyAuthStatus = async () => {
       try {
-        const response = (await dispatch(verifyAuthentication()).unwrap())
-          .payload as IAuthorizeResponse;
+        const response = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
         if (response?.authenticated) {
           setSession(response.user);
           dispatch(setUser(response.user));
@@ -163,6 +163,18 @@ const AccountSetup: React.FC = () => {
       const res = await profileSettingsApiService.setupAccount(model);
       if (res.done && res.body.id) {
         trackMixpanelEvent(skip ? evt_account_setup_skip_invite : evt_account_setup_complete);
+        
+        // Refresh user session to update setup_completed status
+        try {
+          const authResponse = await dispatch(verifyAuthentication()).unwrap() as IAuthorizeResponse;
+          if (authResponse?.authenticated && authResponse?.user) {
+            setSession(authResponse.user);
+            dispatch(setUser(authResponse.user));
+          }
+        } catch (error) {
+          logger.error('Failed to refresh user session after setup completion', error);
+        }
+        
         navigate(`/worklenz/projects/${res.body.id}?tab=tasks-list&pinned_tab=tasks-list`);
       }
     } catch (error) {

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/LoggingOutPage.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { useAuthService } from '@/hooks/useAuth';
 import { useMediaQuery } from 'react-responsive';
 import { authApiService } from '@/api/auth/auth.api.service';
+import CacheCleanup from '@/utils/cache-cleanup';
 
 const LoggingOutPage = () => {
   const navigate = useNavigate();
@@ -14,14 +15,30 @@ const LoggingOutPage = () => {
 
   useEffect(() => {
     const logout = async () => {
-      await auth.signOut();
-      await authApiService.logout();
-      setTimeout(() => {
-        window.location.href = '/';
-      }, 1500);
+      try {
+        // Clear local session
+        await auth.signOut();
+        
+        // Call backend logout
+        await authApiService.logout();
+        
+        // Clear all caches using the utility
+        await CacheCleanup.clearAllCaches();
+        
+        // Force a hard reload to ensure fresh state
+        setTimeout(() => {
+          CacheCleanup.forceReload('/auth/login');
+        }, 1000);
+        
+      } catch (error) {
+        console.error('Logout error:', error);
+        // Fallback: force reload to login page
+        CacheCleanup.forceReload('/auth/login');
+      }
     };
+    
     void logout();
-  }, [auth, navigate]);
+  }, [auth]);
 
   const cardStyles = {
     width: '100%',

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 }}>
-              {t('passwordValidationAltText')}
+            <Typography.Text type="secondary" style={{ fontSize: 12, marginTop: 4, marginBottom: 0, display: 'block' }}>
+              {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
-                prefix={<LockOutlined />}
-                placeholder={t('placeholder')}
-                size="large"
-                style={{ borderRadius: 4 }}
-              />
+              <div>
+                <Input.Password
+                  prefix={<LockOutlined />}
+                  placeholder={t('placeholder')}
+                  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/projectView/project-view.tsx

@@ -39,6 +39,7 @@ import { resetState as resetEnhancedKanbanState } from '@/features/enhanced-kanb
 import { setProjectId as setInsightsProjectId } from '@/features/projects/insights/project-insights.slice';
 import { SuspenseFallback } from '@/components/suspense-fallback/suspense-fallback';
 import { useTranslation } from 'react-i18next';
+import { useTimerInitialization } from '@/hooks/useTimerInitialization';
 
 
 // Import critical components synchronously to avoid suspense interruptions
@@ -89,6 +90,9 @@ const ProjectView = React.memo(() => {
   const [taskid, setTaskId] = useState<string>(urlParams.taskId);
   const [isInitialized, setIsInitialized] = useState(false);
 
+  // Initialize timer state from backend when project view loads
+  useTimerInitialization();
+
   // Update local state when URL params change
   useEffect(() => {
     setActiveTab(urlParams.tab);

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

@@ -41,6 +41,10 @@ export interface Task {
   has_subscribers?: boolean;
   schedule_id?: string | null;
   order?: number;
+  status_sort_order?: number; // Sort order when grouped by status
+  priority_sort_order?: number; // Sort order when grouped by priority
+  phase_sort_order?: number; // Sort order when grouped by phase
+  member_sort_order?: number; // Sort order when grouped by members
   reporter?: string; // Reporter field
   timeTracking?: { // Time tracking information
     logged?: number;
@@ -58,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
@@ -173,3 +178,21 @@ export interface BulkAction {
   value?: any;
   taskIds: string[];
 }
+
+// Helper function to get the appropriate sort order field based on grouping
+export function getSortOrderField(grouping: string | undefined): keyof Task {
+  switch (grouping) {
+    case 'status':
+      return 'status_sort_order';
+    case 'priority':
+      return 'priority_sort_order';
+    case 'phase':
+      return 'phase_sort_order';
+    case 'members':
+      return 'member_sort_order';
+    case 'general':
+      return 'order'; // explicit general sorting
+    default:
+      return 'status_sort_order'; // Default to status sorting to match backend
+  }
+}

worklenz-frontend/src/utils/cache-cleanup.ts

@@ -0,0 +1,163 @@
+/**
+ * Cache cleanup utilities for logout operations
+ * Handles clearing of various caches to prevent stale data issues
+ */
+
+export class CacheCleanup {
+  /**
+   * Clear all caches including service worker, browser cache, and storage
+   */
+  static async clearAllCaches(): Promise<void> {
+    try {
+      console.log('CacheCleanup: Starting cache clearing process...');
+      
+      // Clear browser caches
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        console.log('CacheCleanup: Found caches:', cacheNames);
+        
+        await Promise.all(
+          cacheNames.map(async cacheName => {
+            const deleted = await caches.delete(cacheName);
+            console.log(`CacheCleanup: Deleted cache "${cacheName}":`, deleted);
+            return deleted;
+          })
+        );
+        console.log('CacheCleanup: Browser caches cleared');
+      } else {
+        console.log('CacheCleanup: Cache API not supported');
+      }
+
+      // Clear service worker cache
+      if ('serviceWorker' in navigator) {
+        const registration = await navigator.serviceWorker.getRegistration();
+        if (registration) {
+          console.log('CacheCleanup: Found service worker registration');
+          
+          // Send logout message to service worker to clear its caches and unregister
+          if (registration.active) {
+            try {
+              console.log('CacheCleanup: Sending LOGOUT message to service worker...');
+              await this.sendMessageToServiceWorker('LOGOUT');
+              console.log('CacheCleanup: LOGOUT message sent successfully');
+            } catch (error) {
+              console.warn('CacheCleanup: Failed to send logout message to service worker:', error);
+              // Fallback: try to clear cache manually
+              try {
+                console.log('CacheCleanup: Trying fallback CLEAR_CACHE message...');
+                await this.sendMessageToServiceWorker('CLEAR_CACHE');
+                console.log('CacheCleanup: CLEAR_CACHE message sent successfully');
+              } catch (fallbackError) {
+                console.warn('CacheCleanup: Failed to clear service worker cache:', fallbackError);
+              }
+            }
+          }
+          
+          // If service worker is still registered, unregister it
+          if (registration.active) {
+            console.log('CacheCleanup: Unregistering service worker...');
+            await registration.unregister();
+            console.log('CacheCleanup: Service worker unregistered');
+          }
+        } else {
+          console.log('CacheCleanup: No service worker registration found');
+        }
+      } else {
+        console.log('CacheCleanup: Service Worker not supported');
+      }
+
+      // Clear localStorage and sessionStorage
+      const localStorageKeys = Object.keys(localStorage);
+      const sessionStorageKeys = Object.keys(sessionStorage);
+      
+      console.log('CacheCleanup: Clearing localStorage keys:', localStorageKeys);
+      console.log('CacheCleanup: Clearing sessionStorage keys:', sessionStorageKeys);
+      
+      localStorage.clear();
+      sessionStorage.clear();
+      console.log('CacheCleanup: Local storage cleared');
+
+      console.log('CacheCleanup: Cache clearing process completed successfully');
+
+    } catch (error) {
+      console.error('CacheCleanup: Error clearing caches:', error);
+      throw error;
+    }
+  }
+
+  /**
+   * Send message to service worker
+   */
+  private static async sendMessageToServiceWorker(type: string, payload?: any): Promise<any> {
+    if (!('serviceWorker' in navigator)) {
+      throw new Error('Service Worker not supported');
+    }
+
+    const registration = await navigator.serviceWorker.getRegistration();
+    if (!registration || !registration.active) {
+      throw new Error('Service Worker not active');
+    }
+
+    return new Promise((resolve, reject) => {
+      const messageChannel = new MessageChannel();
+      
+      messageChannel.port1.onmessage = (event) => {
+        if (event.data.error) {
+          reject(event.data.error);
+        } else {
+          resolve(event.data);
+        }
+      };
+
+      registration.active!.postMessage(
+        { type, payload },
+        [messageChannel.port2]
+      );
+
+      // Timeout after 5 seconds
+      setTimeout(() => {
+        reject(new Error('Service Worker message timeout'));
+      }, 5000);
+    });
+  }
+
+  /**
+   * Force reload the page to ensure fresh state
+   */
+  static forceReload(url: string = '/auth/login'): void {
+    // Use replace to prevent back button issues
+    window.location.replace(url);
+  }
+
+  /**
+   * Clear specific cache types
+   */
+  static async clearSpecificCaches(cacheTypes: string[]): Promise<void> {
+    if (!('caches' in window)) return;
+
+    const cacheNames = await caches.keys();
+    const cachesToDelete = cacheNames.filter(name => 
+      cacheTypes.some(type => name.includes(type))
+    );
+
+    await Promise.all(
+      cachesToDelete.map(cacheName => caches.delete(cacheName))
+    );
+  }
+
+  /**
+   * Clear API cache specifically
+   */
+  static async clearAPICache(): Promise<void> {
+    await this.clearSpecificCaches(['api', 'dynamic']);
+  }
+
+  /**
+   * Clear static asset cache
+   */
+  static async clearStaticCache(): Promise<void> {
+    await this.clearSpecificCaches(['static', 'images']);
+  }
+}
+
+export default CacheCleanup;