init

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

@@ -0,0 +1,19 @@
+.status-dropdown .ant-dropdown-menu {
+  padding: 0 !important;
+  margin-top: 8px !important;
+  overflow: hidden;
+}
+
+.status-dropdown .ant-dropdown-menu-item {
+  padding: 0 !important;
+}
+
+.status-dropdown-card .ant-card-body {
+  padding: 0 !important;
+}
+
+.status-menu .ant-menu-item {
+  display: flex;
+  align-items: center;
+  height: 41px !important;
+}

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

@@ -0,0 +1,117 @@
+import { Badge, Flex, Select } from 'antd';
+import './home-tasks-status-dropdown.css';
+import { useAppSelector } from '@/hooks/useAppSelector';
+import { useTranslation } from 'react-i18next';
+import { ITaskStatus } from '@/types/status.types';
+import { useState, useEffect, useMemo } from 'react';
+import { ALPHA_CHANNEL } from '@/shared/constants';
+import { useSocket } from '@/socket/socketContext';
+import { SocketEvents } from '@/shared/socket-events';
+import { ITaskListStatusChangeResponse } from '@/types/tasks/task-list-status.types';
+import { IProjectTask } from '@/types/project/projectTasksViewModel.types';
+import { useGetMyTasksQuery } from '@/api/home-page/home-page.api.service';
+
+type HomeTasksStatusDropdownProps = {
+  task: IProjectTask;
+  teamId: string;
+};
+
+const HomeTasksStatusDropdown = ({ task, teamId }: HomeTasksStatusDropdownProps) => {
+  const { t } = useTranslation('task-list-table');
+  const { socket, connected } = useSocket();
+  const { homeTasksConfig } = useAppSelector(state => state.homePageReducer);
+  const {
+      refetch
+    } = useGetMyTasksQuery(homeTasksConfig, {
+      skip: true // Skip automatic queries entirely
+    });
+
+  const [selectedStatus, setSelectedStatus] = useState<ITaskStatus | undefined>(undefined);
+
+  const handleStatusChange = (statusId: string) => {
+    if (!task.id || !statusId) return;
+
+    socket?.emit(
+      SocketEvents.TASK_STATUS_CHANGE.toString(),
+      JSON.stringify({
+        task_id: task.id,
+        status_id: statusId,
+        parent_task: task.parent_task_id || null,
+        team_id: teamId,
+      })
+    );
+    getTaskProgress(task.id);
+  };
+
+  const handleTaskStatusChange = (response: ITaskListStatusChangeResponse) => {
+    if (response && response.id === task.id) {
+      const updatedTask = {
+        ...task,
+        status_color: response.color_code,
+        complete_ratio: +response.complete_ratio || 0,
+        status_id: response.status_id,
+        status_category: response.statusCategory,
+      };
+      setSelectedStatus(updatedTask);
+      // Only refetch when there's an actual status change
+      if (response.status_id !== task.status_id) {
+        refetch();
+      }
+    }
+  };
+
+  const getTaskProgress = (taskId: string) => {
+    socket?.emit(SocketEvents.GET_TASK_PROGRESS.toString(), taskId);
+  };
+
+  useEffect(() => {
+    const foundStatus = task.project_statuses?.find(status => status.id === task.status_id);
+    setSelectedStatus(foundStatus);
+  }, [task.status_id, task.project_statuses]);
+
+  useEffect(() => {
+    socket?.on(SocketEvents.TASK_STATUS_CHANGE.toString(), handleTaskStatusChange);
+
+    return () => {
+      socket?.removeListener(SocketEvents.TASK_STATUS_CHANGE.toString(), handleTaskStatusChange);
+    };
+  }, [connected]);
+
+  const options = useMemo(
+    () =>
+      task.project_statuses?.map(status => ({
+        value: status.id,
+        label: (
+          <Flex gap={8} align="center">
+            <Badge color={status.color_code} text={status.name} />
+          </Flex>
+        ),
+      })),
+    [task.project_statuses]
+  );
+
+  return (
+    <>
+      {
+        <Select
+          variant="borderless"
+          value={task.status_id}
+          onChange={handleStatusChange}
+          dropdownStyle={{ borderRadius: 8, minWidth: 150, maxWidth: 200 }}
+          style={{
+            backgroundColor: selectedStatus?.color_code + ALPHA_CHANNEL,
+            borderRadius: 16,
+            height: 22,
+          }}
+          labelRender={value => {
+            const status = task.project_statuses?.find(status => status.id === value.value);
+            return status ? <span style={{ fontSize: 13 }}>{status.name}</span> : '';
+          }}
+          options={options}
+        />
+      }
+    </>
+  );
+};
+
+export default HomeTasksStatusDropdown;