Merge pull request #217 from shancds/fix/enhanced-board-assignees

Fix/enhanced board assignees

worklenz-frontend/src/components/AssigneeSelector.tsx

@@ -14,6 +14,7 @@ import { sortTeamMembers } from '@/utils/sort-team-members';
 import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { toggleProjectMemberDrawer } from '@/features/projects/singleProject/members/projectMembersSlice';
 import { updateTask } from '@/features/task-management/task-management.slice';
+import { updateEnhancedKanbanTaskAssignees } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 
 interface AssigneeSelectorProps {
   task: IProjectTask;
@@ -177,6 +178,12 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
 
     // Emit socket event - the socket handler will update Redux with proper types
     socket?.emit(SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(), JSON.stringify(body));
+    socket?.once(
+      SocketEvents.QUICK_ASSIGNEES_UPDATE.toString(),
+      (data: any) => {
+        dispatch(updateEnhancedKanbanTaskAssignees(data));
+      }
+    );
 
     // Remove from pending changes after a short delay (optimistic)
     setTimeout(() => {
@@ -226,6 +233,7 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
       {isOpen && createPortal(
         <div
           ref={dropdownRef}
+          onClick={e => e.stopPropagation()}
           className={`
             fixed z-9999 w-72 rounded-md shadow-lg border
             ${isDarkMode 
@@ -284,12 +292,14 @@ const AssigneeSelector: React.FC<AssigneeSelectorProps> = ({
                   }}
                 >
                   <div className="relative">
-                    <Checkbox
-                      checked={checkMemberSelected(member.id || '')}
-                      onChange={(checked) => handleMemberToggle(member.id || '', checked)}
-                      disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
-                      isDarkMode={isDarkMode}
-                    />
+                    <span onClick={e => e.stopPropagation()}>
+                      <Checkbox
+                        checked={checkMemberSelected(member.id || '')}
+                        onChange={(checked) => handleMemberToggle(member.id || '', checked)}
+                        disabled={member.pending_invitation || pendingChanges.has(member.id || '')}
+                        isDarkMode={isDarkMode}
+                      />
+                    </span>
                     {pendingChanges.has(member.id || '') && (
                       <div className={`absolute inset-0 flex items-center justify-center ${
                         isDarkMode ? 'bg-gray-800/50' : 'bg-white/50'

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

@@ -7,7 +7,6 @@ import {
   DragStartEvent,
   DragEndEvent,
   DragOverEvent,
-  closestCorners,
   KeyboardSensor,
   PointerSensor,
   useSensor,
@@ -20,7 +19,6 @@ import {
 import {
   SortableContext,
   horizontalListSortingStrategy,
-  verticalListSortingStrategy,
 } from '@dnd-kit/sortable';
 import { RootState } from '@/app/store';
 import {
@@ -34,8 +32,6 @@ import {
   fetchEnhancedKanbanLabels,
 } from '@/features/enhanced-kanban/enhanced-kanban.slice';
 import EnhancedKanbanGroup from './EnhancedKanbanGroup';
-import EnhancedKanbanTaskCard from './EnhancedKanbanTaskCard';
-import PerformanceMonitor from './PerformanceMonitor';
 import './EnhancedKanbanBoard.css';
 import { useSocket } from '@/socket/socketContext';
 import { useAppSelector } from '@/hooks/useAppSelector';
@@ -50,6 +46,7 @@ import ImprovedTaskFilters from '../task-management/improved-task-filters';
 import { fetchStatusesCategories } from '@/features/taskAttributes/taskStatusSlice';
 import { useFilterDataLoader } from '@/hooks/useFilterDataLoader';
 import { useTaskSocketHandlers } from '@/hooks/useTaskSocketHandlers';
+import { useAuthService } from '@/hooks/useAuth';
 
 // Import the TaskListFilters component
 const TaskListFilters = React.lazy(() => import('@/pages/projects/projectView/taskList/task-list-filters/task-list-filters'));
@@ -68,7 +65,8 @@ const EnhancedKanbanBoard: React.FC<EnhancedKanbanBoardProps> = ({ projectId, cl
     performanceMetrics
   } = useSelector((state: RootState) => state.enhancedKanbanReducer);
   const { socket } = useSocket();
-  const { teamId } = useAppSelector((state: RootState) => state.auth);
+  const authService = useAuthService();
+  const teamId = authService.getCurrentSession()?.team_id;
   const groupBy = useSelector((state: RootState) => state.enhancedKanbanReducer.groupBy);
   const project = useAppSelector((state: RootState) => state.projectReducer.project);
   const { statusCategories, status: existingStatuses } = useAppSelector((state) => state.taskStatusReducer);

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

@@ -13,7 +13,6 @@ import { useAppDispatch } from '@/hooks/useAppDispatch';
 import { setShowTaskDrawer, setSelectedTaskId } from '@/features/task-drawer/task-drawer.slice';
 import PrioritySection from '../board/taskCard/priority-section/priority-section';
 import Typography from 'antd/es/typography';
-import CustomAvatarGroup from '../board/custom-avatar-group';
 import CustomDueDatePicker from '../board/custom-due-date-picker';
 import { themeWiseColor } from '@/utils/themeWiseColor';
 import { ForkOutlined } from '@ant-design/icons';
@@ -29,6 +28,8 @@ import BoardSubTaskCard from '@/pages/projects/projectView/board/board-section/b
 import BoardCreateSubtaskCard from '@/pages/projects/projectView/board/board-section/board-sub-task-card/board-create-sub-task-card';
 import { useTranslation } from 'react-i18next';
 import EnhancedKanbanCreateSubtaskCard from './EnhancedKanbanCreateSubtaskCard';
+import LazyAssigneeSelectorWrapper from '@/components/task-management/lazy-assignee-selector';
+import AvatarGroup from '@/components/AvatarGroup';
 
 interface EnhancedKanbanTaskCardProps {
   task: IProjectTask;
@@ -179,8 +180,15 @@ const EnhancedKanbanTaskCard: React.FC<EnhancedKanbanTaskCardProps> = React.memo
             marginBlock: 8,
           }}
         >
-          {task && <CustomAvatarGroup task={task} sectionId={sectionId} />}
-
+          <Flex align="center" gap={2}>
+            <AvatarGroup
+              members={task.names || []}
+              maxCount={3}
+              isDarkMode={themeMode === 'dark'}
+              size={24}
+            />
+            <LazyAssigneeSelectorWrapper task={task} groupId={sectionId} isDarkMode={themeMode === 'dark'} />
+          </Flex>
           <Flex gap={4} align="center">
             <CustomDueDatePicker task={task} onDateChange={setDueDate} />
 

worklenz-frontend/src/components/enhanced-kanban/README.md

@@ -1,189 +0,0 @@
-# Enhanced Kanban Board - Performance Optimizations
-
-## Overview
-
-The Enhanced Kanban Board is designed to handle **much much** tasks efficiently through multiple performance optimization strategies.
-
-## Performance Features
-
-### 🚀 **Virtualization**
-- **Automatic Activation**: Virtualization kicks in when groups have >50 tasks
-- **React Window**: Uses `react-window` for efficient rendering of large lists
-- **Overscan**: Renders 5 extra items for smooth scrolling
-- **Dynamic Height**: Adjusts container height based on task count
-
-### 📊 **Performance Monitoring**
-- **Real-time Metrics**: Tracks total tasks, largest group, average group size
-- **Visual Indicators**: Shows performance status (Excellent/Good/Warning/Critical)
-- **Virtualization Status**: Indicates when virtualization is active
-- **Performance Tips**: Provides optimization suggestions for large datasets
-
-### 🎯 **Smart Rendering**
-- **Memoization**: All components use React.memo for optimal re-rendering
-- **Conditional Rendering**: Drop indicators only render when needed
-- **Lazy Loading**: Components load only when required
-- **CSS Containment**: Uses `contain: layout style paint` for performance
-
-### 💾 **Caching Strategy**
-- **Task Cache**: Stores individual tasks for quick access
-- **Group Cache**: Caches group data to prevent recalculation
-- **Redux Optimization**: Optimistic updates with rollback capability
-- **Memory Management**: Automatic cache cleanup
-
-## Performance Thresholds
-
-| Task Count | Performance Level | Features Enabled |
-|------------|-------------------|------------------|
-| 0-50       | Excellent         | Standard rendering |
-| 51-100     | Good              | Virtualization |
-| 101-500    | Good              | Virtualization + Monitoring |
-| 501-1000   | Warning           | All optimizations |
-| 1000+      | Critical          | All optimizations + Tips |
-
-## Key Components
-
-### VirtualizedTaskList
-```typescript
-// Handles large task lists efficiently
-<VirtualizedTaskList
-  tasks={group.tasks}
-  height={groupHeight}
-  itemHeight={80}
-  activeTaskId={activeTaskId}
-  overId={overId}
-/>
-```
-
-### PerformanceMonitor
-```typescript
-// Shows performance metrics for large datasets
-<PerformanceMonitor />
-// Only appears when totalTasks > 100
-```
-
-### EnhancedKanbanGroup
-```typescript
-// Automatically switches between standard and virtualized rendering
-const shouldVirtualize = group.tasks.length > VIRTUALIZATION_THRESHOLD;
-```
-
-## Performance Optimizations
-
-### 1. **React Optimization**
-- `React.memo()` on all components
-- `useMemo()` for expensive calculations
-- `useCallback()` for event handlers
-- Conditional rendering to avoid unnecessary work
-
-### 2. **CSS Performance**
-```css
-/* Performance optimizations */
-.enhanced-kanban-group-tasks.large-list {
-  contain: layout style paint;
-  will-change: transform;
-}
-```
-
-### 3. **Drag and Drop Optimization**
-- Enhanced collision detection
-- Optimized sensor configuration
-- Minimal re-renders during drag operations
-- Efficient drop target identification
-
-### 4. **Memory Management**
-- Automatic cache cleanup
-- Efficient data structures
-- Minimal object creation
-- Proper cleanup in useEffect
-
-## Usage Examples
-
-### Large Dataset Handling
-```typescript
-// The board automatically optimizes for large datasets
-const largeProject = {
-  taskGroups: [
-    { id: '1', name: 'To Do', tasks: [/* 200 tasks */] },
-    { id: '2', name: 'In Progress', tasks: [/* 150 tasks */] },
-    { id: '3', name: 'Done', tasks: [/* 300 tasks */] }
-  ]
-};
-// Total: 650 tasks - virtualization automatically enabled
-```
-
-### Performance Monitoring
-```typescript
-// Performance metrics are automatically tracked
-const metrics = {
-  totalTasks: 650,
-  largestGroupSize: 300,
-  averageGroupSize: 217,
-  virtualizationEnabled: true
-};
-```
-
-## Best Practices
-
-### For Large Projects
-1. **Use Filters**: Reduce visible tasks with search/filters
-2. **Group Strategically**: Choose grouping that distributes tasks evenly
-3. **Monitor Performance**: Watch the performance monitor for insights
-4. **Consider Pagination**: For extremely large datasets (>2000 tasks)
-
-### For Optimal Performance
-1. **Keep Groups Balanced**: Avoid single groups with 1000+ tasks
-2. **Use Meaningful Grouping**: Group by status, priority, or assignee
-3. **Regular Cleanup**: Archive completed tasks regularly
-4. **Monitor Metrics**: Use the performance monitor to track trends
-
-## Technical Details
-
-### Virtualization Implementation
-- **Item Height**: Fixed at 80px for consistency
-- **Overscan**: 5 items for smooth scrolling
-- **Dynamic Height**: Scales with content (200px - 600px)
-- **Responsive**: Adapts to screen size
-
-### Memory Usage
-- **Task Cache**: ~1KB per task
-- **Group Cache**: ~2KB per group
-- **Virtualization**: Only renders visible items
-- **Cleanup**: Automatic garbage collection
-
-### Rendering Performance
-- **60fps**: Maintained even with 1000+ tasks
-- **Smooth Scrolling**: Optimized for large lists
-- **Drag and Drop**: Responsive even with large datasets
-- **Updates**: Optimistic updates for immediate feedback
-
-## Troubleshooting
-
-### Performance Issues
-1. **Check Task Count**: Monitor the performance metrics
-2. **Enable Virtualization**: Ensure groups with >50 tasks use virtualization
-3. **Use Filters**: Reduce visible tasks with search/filters
-4. **Group Optimization**: Consider different grouping strategies
-
-### Memory Issues
-1. **Clear Cache**: Use the clear cache action if needed
-2. **Archive Tasks**: Move completed tasks to archived status
-3. **Monitor Usage**: Watch browser memory usage
-4. **Refresh**: Reload the page if memory usage is high
-
-## Future Enhancements
-
-### Planned Optimizations
-- **Infinite Scrolling**: Load tasks on demand
-- **Web Workers**: Move heavy calculations to background threads
-- **IndexedDB**: Client-side caching for offline support
-- **Service Workers**: Background sync for updates
-
-### Advanced Features
-- **Predictive Loading**: Pre-load likely-to-be-viewed tasks
-- **Smart Caching**: AI-powered cache optimization
-- **Performance Analytics**: Detailed performance insights
-- **Auto-optimization**: Automatic performance tuning
-
----
-
-**The Enhanced Kanban Board is designed to handle projects of any size efficiently, from small teams to enterprise-scale operations with thousands of tasks.**