Enhance EnhancedKanbanBoardNativeDnD with task priority updates and socket integration

- Added functionality to handle task priority changes, emitting updates via socket for real-time synchronization.
- Updated the EnhancedKanbanBoardNativeDnD component to include new logic for managing task priorities within the drag-and-drop interface.
- Cleaned up console log statements in the useTaskSocketHandlers hook for improved performance monitoring.

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

@@ -8,7 +8,7 @@ import ImprovedTaskFilters from '../../task-management/improved-task-filters';
 import Card from 'antd/es/card';
 import Spin from 'antd/es/spin';
 import Empty from 'antd/es/empty';
-import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
+import { reorderGroups, reorderEnhancedKanbanGroups, reorderTasks, reorderEnhancedKanbanTasks, fetchEnhancedKanbanLabels, fetchEnhancedKanbanGroups, fetchEnhancedKanbanTaskAssignees, updateEnhancedKanbanTaskPriority } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { useAppSelector } from '@/hooks/useAppSelector';
 import KanbanGroup from './KanbanGroup';
@@ -25,6 +25,7 @@ import { phasesApiService } from '@/api/taskAttributes/phases/phases.api.service
 import { ITaskListGroup } from '@/types/tasks/taskList.types';
 import { fetchPhasesByProjectId, updatePhaseListOrder } from '@/features/projects/singleProject/phase/phases.slice';
 import { useTranslation } from 'react-i18next';
+import { ITaskListPriorityChangeResponse } from '@/types/tasks/task-list-priority.types';
 
 const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ projectId }) => {
   const { t } = useTranslation('kanban-board');
@@ -62,7 +63,7 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     if (!statusCategories.length) {
       dispatch(fetchStatusesCategories() as any);
     }
-    if ( groupBy === 'phase' && !phaseList.length) {
+    if (groupBy === 'phase' && !phaseList.length) {
       dispatch(fetchPhasesByProjectId(projectId) as any);
     }
   }, [dispatch, projectId]);
@@ -102,10 +103,10 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
     // API call for group order
     try {
       if (groupBy === 'status') {
-      const columnOrder = reorderedGroups.map(group => group.id);
+        const columnOrder = reorderedGroups.map(group => group.id);
-      const requestBody = { status_order: columnOrder };
+        const requestBody = { status_order: columnOrder };
-      const response = await statusApiService.updateStatusOrder(requestBody, projectId);
+        const response = await statusApiService.updateStatusOrder(requestBody, projectId);
-              if (!response.done) {
+        if (!response.done) {
           // Revert the change if API call fails
           const revertedGroups = [...reorderedGroups];
           const [movedBackGroup] = revertedGroups.splice(toIdx, 1);
@@ -329,6 +330,22 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
           })
         );
       }
+      if (groupBy === 'priority' && movedTask.id) {
+        socket?.emit(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          JSON.stringify({
+            task_id: movedTask.id,
+            priority_id: targetGroupId,
+            team_id: teamId,
+          })
+        );
+        socket?.once(
+          SocketEvents.TASK_PRIORITY_CHANGE.toString(),
+          (data: ITaskListPriorityChangeResponse) => {
+            dispatch(updateEnhancedKanbanTaskPriority(data));
+          }
+        );
+      }
     }
 
     setDraggedTaskId(null);
@@ -363,12 +380,12 @@ const EnhancedKanbanBoardNativeDnD: React.FC<{ projectId: string }> = ({ project
       </div>
       <div className="enhanced-kanban-board">
         {loadingGroups ? (
-            <div className="flex flex-row gap-2 h-[600px]">
+          <div className="flex flex-row gap-2 h-[600px]">
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '60%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '100%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '80%' }} />
-              <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
+            <div className="rounded bg-gray-200 dark:bg-gray-700 animate-pulse w-1/4" style={{ height: '40%' }} />
-            </div>
+          </div>
         ) : taskGroups.length === 0 ? (
           <Card>
             <Empty description={t('noTasksFound')} image={Empty.PRESENTED_IMAGE_SIMPLE} />

worklenz-frontend/src/features/enhanced-kanban/enhanced-kanban.slice.ts

@@ -575,7 +575,6 @@ const enhancedKanbanSlice = createSlice({
       action: PayloadAction<ITaskListPriorityChangeResponse>
     ) => {
       const { id, priority_id, color_code, color_code_dark } = action.payload;
-
       // Find the task in any group
       const taskInfo = findTaskInAllGroups(state.taskGroups, id);
       if (!taskInfo || !priority_id) return;
@@ -603,7 +602,6 @@ const enhancedKanbanSlice = createSlice({
       // Update cache
       state.taskCache[id] = task;
     },
-
     // Enhanced Kanban assignee update (for use in task drawer dropdown)
     updateEnhancedKanbanTaskAssignees: (
       state,

worklenz-frontend/src/hooks/useTaskSocketHandlers.ts

@@ -285,23 +285,7 @@ export const useTaskSocketHandlers = () => {
             );
           }
 
-          console.log('🔄 Status change group movement debug:', {
-            taskId: response.id,
-            newStatusValue,
-            currentGroupId: currentGroup?.id,
-            currentGroupValue: currentGroup?.groupValue,
-            currentGroupTitle: currentGroup?.title,
-            targetGroupId: targetGroup?.id,
-            targetGroupValue: targetGroup?.groupValue,
-            targetGroupTitle: targetGroup?.title,
-            allGroups: groups.map(g => ({ id: g.id, title: g.title, groupValue: g.groupValue }))
-          });
-
           if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-            console.log('✅ Moving task between groups:', {
-              from: currentGroup.title,
-              to: targetGroup.title
-            });
             // Use the action to move task between groups
             dispatch(
               moveTaskBetweenGroups({
@@ -448,12 +432,6 @@ export const useTaskSocketHandlers = () => {
           }
 
           if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-            console.log('🔄 Moving task between priority groups:', {
-              taskId: response.id,
-              from: currentGroup.title,
-              to: targetGroup.title,
-              newPriorityValue
-            });
             dispatch(
               moveTaskBetweenGroups({
                 taskId: response.id,
@@ -603,12 +581,6 @@ export const useTaskSocketHandlers = () => {
             }
 
             if (currentGroup && targetGroup && currentGroup.id !== targetGroup.id) {
-              console.log('🔄 Moving task between phase groups:', {
-                taskId,
-                from: currentGroup.title,
-                to: targetGroup.title,
-                newPhaseValue
-              });
               dispatch(
                 moveTaskBetweenGroups({
                   taskId: taskId,
@@ -925,10 +897,6 @@ export const useTaskSocketHandlers = () => {
   // Handler for TASK_ASSIGNEES_CHANGE (fallback event with limited data)
   const handleTaskAssigneesChange = useCallback((data: { assigneeIds: string[] }) => {
     if (!data || !data.assigneeIds) return;
-
-    // This event only provides assignee IDs, so we update what we can
-    // The full assignee data will come from QUICK_ASSIGNEES_UPDATE
-    // console.log('🔄 Task assignees change (limited data):', data);
   }, []);
 
   // Handler for timer start events
@@ -994,9 +962,6 @@ export const useTaskSocketHandlers = () => {
     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 || [];

worklenz-frontend/src/utils/enhanced-performance-monitoring.ts

@@ -86,7 +86,7 @@ export class EnhancedPerformanceMonitor {
     this.collectInitialMetrics();
     this.startPeriodicCollection();
     
-    console.log('🚀 Enhanced performance monitoring started');
+    // console.log('🚀 Enhanced performance monitoring started');
   }
 
   // Stop monitoring and cleanup
@@ -97,7 +97,7 @@ export class EnhancedPerformanceMonitor {
     this.cleanupObservers();
     this.clearIntervals();
     
-    console.log('🛑 Enhanced performance monitoring stopped');
+    // console.log('🛑 Enhanced performance monitoring stopped');
   }
 
   // Setup performance observers
@@ -357,7 +357,7 @@ export class EnhancedPerformanceMonitor {
     const recent = this.metrics.slice(-10); // Last 10 metrics
     const report = this.analyzeMetrics(recent);
     
-    console.log('📊 Performance Report:', report);
+    // console.log('📊 Performance Report:', report);
 
     // Check for performance issues
     this.checkPerformanceIssues(report);