@zeniai/client-epic-state 5.1.45 → 5.1.46

package/lib/esm/view/taskManager/taskDetailView/taskDetailSelector.js

@@ -1,8 +1,8 @@
 import isEqual from 'lodash/isEqual';
-import { reduceFetchState } from '../../../commonStateTypes/reduceFetchState';
+import { reduceAnyFetchState } from '../../../commonStateTypes/reduceFetchState';
 import { getClassesByIds } from '../../../entity/class/classSelector';
 import { getFilesByFileIds } from '../../../entity/file/fileSelector';
-import { getTaskById } from '../../../entity/task/taskSelector';
+import { getTaskById, getTasksByIds } from '../../../entity/task/taskSelector';
 import { getUserAndUserRole, } from '../../companyView/types/userAndRole';
 import { getFileDeleteStatusById, getFileUpdateNameStatusById, } from '../../fileView/fileViewSelector';
 import { getUserList, } from '../../userListView/userListViewSelector';
@@ -24,40 +24,58 @@ export const getTaskDetail = (state, taskId) => {
     let createdByUser = undefined;
     let isArchived = undefined;
     let isDeleted = undefined;
+    let depth = undefined;
     let recurringSourceTaskId = undefined;
     let snoozedUntil = undefined;
     let taskGroupId = undefined;
+    let subtasks = [];
     if (taskId != null && sourceTaskDetail != null) {
         const taskEntity = getTaskById(taskState, taskId);
+        subtasks =
+            taskEntity != null
+                ? getTasksByIds(taskState, taskEntity.subTasksIds)
+                : [];
         const fileIdsInEntity = taskEntity?.fileIds ?? [];
         if (taskEntity != null) {
             createdByUser = getUserAndUserRole(userState, userRoleState, addressState, taskEntity.createdBy);
+            depth = taskEntity.depth;
             isArchived = taskEntity.isArchived;
             isDeleted = taskEntity.isDeleted;
             recurringSourceTaskId = taskEntity.recurringSourceTaskId;
             snoozedUntil = taskEntity.snoozedUntil;
             taskGroupId = taskEntity.taskGroupIds[0];
         }
+        // Treat "no entry" as Completed so it doesn't block the combined
+        // fetch state. The Not-Started default would pin the detail page
+        // below Completed forever before the first fetchSubTasks dispatches.
+        const completedSubTaskStatus = {
+            fetchState: 'Completed',
+            error: undefined,
+        };
+        const subTaskStatus = taskDetailState.subTaskListFetchStatusByParentId[taskId] ??
+            completedSubTaskStatus;
         if (fileIdsInEntity.length > 0) {
-            fetchStatus = reduceFetchState([
+            fetchStatus = reduceAnyFetchState([
                 fileViewState.fetchFilesStatus,
                 sourceTaskDetail.fetchTaskStatus,
                 userList,
                 classListState,
+                subTaskStatus,
             ]);
         }
         else {
-            fetchStatus = reduceFetchState([
+            fetchStatus = reduceAnyFetchState([
                 sourceTaskDetail.fetchTaskStatus,
                 userList,
                 classListState,
+                subTaskStatus,
             ]);
         }
         showTaskDetailFormFooter = showFormFooter(sourceTaskDetail.taskDetailLocalData, taskEntity);
         taskHistory = taskDetailState.taskHistoryById[taskId]?.historicEvents ?? [];
     }
     else if (taskId == null) {
-        fetchStatus = reduceFetchState([userList, classListState]);
+        fetchStatus = reduceAnyFetchState([userList, classListState]);
     }
     const { classIds } = classListState;
     const allAccountingClasses = getClassesByIds(classState, {
@@ -84,12 +102,14 @@ export const getTaskDetail = (state, taskId) => {
         error: fetchStatus.error,
         version: 0,
         createdByUser,
+        depth,
         isArchived,
         isDeleted,
         recurringSourceTaskId,
         showTaskDetailFormFooter,
         snoozedUntil,
         taskGroupId,
+        subtasks,
     };
 };
 export const allTaskStatus = [
@@ -137,13 +157,16 @@ export const allTaskPriority = [
     },
 ];
 const showFormFooter = (taskDetailLocalData, taskDetailInStore) => {
-    if (taskDetailLocalData.name !== taskDetailInStore?.name ||
+    if (taskDetailInStore == null) {
+        return false;
+    }
+    if (taskDetailLocalData.name !== taskDetailInStore.name ||
         taskDetailLocalData.description !== taskDetailInStore.description ||
         taskDetailLocalData.priority !== taskDetailInStore.priority.code ||
         taskDetailLocalData.status !== taskDetailInStore.status.code ||
         !isEqual(taskDetailInStore.tagIds, taskDetailLocalData.tagIds) ||
-        !isEqual(taskDetailLocalData.assignee, taskDetailInStore?.assignees ?? []) ||
-        !isEqual(taskDetailLocalData.groupAssignees, taskDetailInStore?.groupAssignees ?? []) ||
+        !isEqual(taskDetailLocalData.assignee, taskDetailInStore.assignees ?? []) ||
+        !isEqual(taskDetailLocalData.groupAssignees, taskDetailInStore.groupAssignees ?? []) ||
         !isEqual(taskDetailLocalData.fileIds, taskDetailInStore.fileIds ?? []) ||
         !isEqual(taskDetailLocalData.dueDate, taskDetailInStore.dueDate) ||
         !isEqual(taskDetailLocalData.type, taskDetailInStore.type) ||
@@ -151,7 +174,10 @@ const showFormFooter = (taskDetailLocalData, taskDetailInStore) => {
         !isEqual(taskDetailLocalData.recurringFrequency, taskDetailInStore.recurringFrequency) ||
         !isEqual(taskDetailLocalData.recurringDaysOfWeek, taskDetailInStore.recurringDaysOfWeek) ||
         !isEqual(taskDetailLocalData.recurringStartDate, taskDetailInStore.recurringStartDate) ||
-        !isEqual(taskDetailLocalData.timeSpent, taskDetailInStore.timeSpent)) {
+        !isEqual(taskDetailLocalData.timeSpent, taskDetailInStore.timeSpent) ||
+        !isEqual(taskDetailLocalData.taskGroupId, taskDetailInStore.taskGroupIds.length > 0
+            ? taskDetailInStore.taskGroupIds[0]
+            : undefined)) {
         return true;
     }
     return false;

package/lib/esm/view/taskManager/taskListView/epics/fetchTaskListEpic.js

@@ -9,15 +9,17 @@ export const fetchTaskListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(f
         .getJSON(`${zeniAPI.apiEndPoints.taskMicroServiceBaseUrl}/1.0/task-manager/tasks?query=${encodeURIComponent(`{"task_type": "all"}`)}`)
         .pipe(mergeMap((response) => {
         if (isSuccessResponse(response) && response.data != null) {
-            const { tasks, deleted, archived, snoozed } = response.data;
+            const { tasks, deleted, archived, snoozed, completed } = response.data;
             const allTasks = [
                 ...tasks,
+                ...(completed ?? []),
                 ...(deleted ?? []),
                 ...(archived ?? []),
                 ...(snoozed ?? []),
             ];
             return of(updateTasks(allTasks), updateTaskList({
                 data: tasks,
+                completed: completed ?? [],
                 deleted: deleted ?? [],
                 archived: archived ?? [],
                 snoozed: snoozed ?? [],

package/lib/esm/view/taskManager/taskListView/taskList.js

@@ -1,6 +1,7 @@
 import { stringToUnion, stringToUnionStrict, } from '../../../commonStateTypes/stringToUnion';
 export const ALL_TASK_LIST_TABS = [
     'live',
+    'completed',
     'archived',
     'deleted',
     'snoozed',

package/lib/esm/view/taskManager/taskListView/taskListReducer.js

@@ -1,4 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { updateTasks } from '../../../entity/task/taskReducer';
 import { toPriorityCodeType, toTaskStatusCodeType, } from '../../../entity/task/taskState';
 import { date, dateNow } from '../../../zeniDayJS';
 import { toDueDateGroupKeyType, } from './taskList';
@@ -42,6 +43,7 @@ export const initialState = {
     currentTab: 'live',
     byTab: {
         live: { ...initialTabData },
+        completed: { ...initialTabData },
         archived: { ...initialTabData },
         deleted: { ...initialTabData },
         snoozed: { ...initialTabData },
@@ -63,14 +65,12 @@ export const initialState = {
     },
     filters: {
         categoryCombinationOperator: 'AND',
-        categories: [
-            {
-                field: 'status',
-                matchingOperator: 'not_equal',
-                values: ['resolved'],
-                valuesCombinationOperator: 'ANY',
-            },
-        ],
+        // Default to no filters. The Completed tab now owns the "hide resolved
+        // tasks from the live list" responsibility via the byTab split in
+        // updateTaskList / updateTaskFromListView / the updateTasks
+        // extraReducer. Keeping the historical `status != resolved` filter
+        // here would empty out the Completed tab.
+        categories: [],
     },
     hasValidState() {
         return this.fetchState == 'Completed';
@@ -102,21 +102,37 @@ const taskList = createSlice({
             draft.error = undefined;
         },
         updateTaskList(draft, action) {
-            const { data, archived, deleted, snoozed } = action.payload;
+            const { data, archived, completed, deleted, snoozed } = action.payload;
             draft.fetchState = 'Completed';
             draft.error = undefined;
+            // Build the nested-subtask set from the UNION of every bucket in
+            // this payload — not per-bucket. A resolved subtask can arrive in
+            // `completed` while its parent (which claims it via `subtasks`)
+            // is still in `data`; a per-bucket scan would miss the cross-tab
+            // claim and surface the subtask as a phantom top-level row in
+            // the Completed tab.
+            const nestedSubtaskIds = collectNestedSubtaskIds([
+                data,
+                completed,
+                archived,
+                deleted,
+                snoozed,
+            ]);
             // Group live tasks
-            const liveGrouped = getGroupedTaskIds(data);
+            const liveGrouped = getGroupedTaskIds(data, nestedSubtaskIds);
             draft.byTab.live = toTabData(liveGrouped);
             // Group other tabs if provided
+            if (completed != null) {
+                draft.byTab.completed = toTabData(getGroupedTaskIds(completed, nestedSubtaskIds));
+            }
             if (archived != null) {
-                draft.byTab.archived = toTabData(getGroupedTaskIds(archived));
+                draft.byTab.archived = toTabData(getGroupedTaskIds(archived, nestedSubtaskIds));
             }
             if (deleted != null) {
-                draft.byTab.deleted = toTabData(getGroupedTaskIds(deleted));
+                draft.byTab.deleted = toTabData(getGroupedTaskIds(deleted, nestedSubtaskIds));
             }
             if (snoozed != null) {
-                draft.byTab.snoozed = toTabData(getGroupedTaskIds(snoozed));
+                draft.byTab.snoozed = toTabData(getGroupedTaskIds(snoozed, nestedSubtaskIds));
             }
             // Copy active tab data to top-level fields
             const activeTabData = draft.byTab[draft.currentTab];
@@ -354,9 +370,26 @@ const taskList = createSlice({
                 draft.taskIdsByAssignees[assigneeKey] = draft.taskIdsByAssignees[assigneeKey].filter((taskId) => taskId !== currentTaskState.id);
                 draft.taskIdsByTags[tagsKey] = draft.taskIdsByTags[tagsKey].filter((taskId) => taskId !== currentTaskState.id);
                 draft.taskIdsByDueDate[dueDateKey] = draft.taskIdsByDueDate[dueDateKey].filter((taskId) => taskId !== currentTaskState.id);
-                draft.taskIdsByGroupsIds[taskGroupId] = draft.taskIdsByGroupsIds[taskGroupId].filter((taskId) => taskId !== currentTaskState.id);
+                // Remove from EVERY previous group bucket the task lived in, not
+                // just the destination bucket. Otherwise a detail-page save that
+                // moves a task from group A to group B leaves the row listed
+                // under both A and B until refetch.
+                const previousGroupIds = currentTaskState.taskGroupIds ?? [];
+                const allGroupIdsToClean = new Set([
+                    ...previousGroupIds,
+                    taskGroupId,
+                ]);
+                allGroupIdsToClean.forEach((gid) => {
+                    if (draft.taskIdsByGroupsIds[gid] != null) {
+                        draft.taskIdsByGroupsIds[gid] = draft.taskIdsByGroupsIds[gid].filter((id) => id !== currentTaskState.id);
+                    }
+                });
             }
             doUpdateTaskList(draft, task, taskGroupId);
+            // Mirror top-level grouping into the active tab's byTab snapshot,
+            // otherwise the next updateTaskListTab call copies stale byTab data
+            // back over this optimistic update.
+            syncTopLevelToActiveTab(draft);
         },
         updateTaskListOnCreateTaskFromTemplateSuccess(draft, action) {
             const { tasks } = action.payload;
@@ -380,6 +413,7 @@ const taskList = createSlice({
             const taskId = task.id;
             draft.updateTasksFetchState.fetchState = 'In-Progress';
             draft.updateTasksFetchState.error = undefined;
+            let didMigrateTab = false;
             if (updates.priority != null) {
                 const prevPriorityCode = toPriorityCodeType(task.priority.code);
                 draft.taskIdsByPriority[prevPriorityCode] = draft.taskIdsByPriority[prevPriorityCode].filter((id) => id != taskId);
@@ -391,6 +425,32 @@ const taskList = createSlice({
                 draft.taskIdsByStatus[prevStatusCode] = draft.taskIdsByStatus[prevStatusCode].filter((id) => id != taskId);
                 const newStatusCode = toTaskStatusCodeType(updates.status.code);
                 draft.taskIdsByStatus[newStatusCode].push(taskId);
+                // Optimistically re-bucket between the live and completed tabs
+                // when status transitions in/out of "resolved", so the task
+                // moves to the Completed tab without waiting for the next
+                // fetch. Mirrors backend split in task_handler.py: only
+                // `resolved` counts as completed; `done` stays Active.
+                //
+                // "Top-level" here means: currently rendered as a standalone
+                // row in the live or completed tab (i.e. present in
+                // `byTab.<tab>.taskIds`). We use presence in byTab — NOT a
+                // `parent_task_id == null` check — so orphan subtasks (parent
+                // hidden from the customer's payload, so we render them flat)
+                // ALSO migrate between tabs on status flip. This matches the
+                // criterion `getGroupedTaskIds` uses when it builds byTab from
+                // the initial fetch — a task is nested iff a visible parent's
+                // `subtasks` array claims it, otherwise it's top-level here.
+                const isTopLevelTask = draft.byTab.live.taskIds.includes(taskId) ||
+                    draft.byTab.completed.taskIds.includes(taskId);
+                const wasCompleted = prevStatusCode === 'resolved';
+                const isCompleted = newStatusCode === 'resolved';
+                if (isTopLevelTask && wasCompleted !== isCompleted) {
+                    const from = isCompleted ? 'live' : 'completed';
+                    const to = isCompleted ? 'completed' : 'live';
+                    const updatedTask = { ...task, ...updates };
+                    migrateTaskBetweenTabs(draft, taskId, updatedTask, from, to);
+                    didMigrateTab = true;
+                }
             }
             if (updates.assignees != null) {
                 const prevGroupId = getAssigneesGroupKey(task.assignees);
@@ -430,7 +490,18 @@ const taskList = createSlice({
                     };
                 }
             }
-            syncTopLevelToActiveTab(draft);
+            if (didMigrateTab) {
+                // The migration moved the task out of the source byTab and into
+                // the destination byTab. The active tab's grouping arrays are
+                // now authoritative — mirror them back to the top-level so the
+                // UI sees the task gone from Live (or freshly arrived in
+                // Completed). Inverse of syncTopLevelToActiveTab, used only on
+                // this path.
+                copyTabDataToTopLevel(draft, draft.byTab[draft.currentTab]);
+            }
+            else {
+                syncTopLevelToActiveTab(draft);
+            }
         },
         updateTasksListOnUpdateTaskSuccess(draft) {
             draft.updateTasksFetchState.fetchState = 'Completed';
@@ -443,12 +514,83 @@ const taskList = createSlice({
         removeTaskFromList(draft, action) {
             removeTaskIds(draft, [action.payload]);
         },
+        /**
+         * Remove a task id from a single group bucket without touching tab
+         * membership or other groupings. Used when the user clears a task's
+         * group on the Detail page so the row stops appearing under the old
+         * group while saveTaskDetailEpic skips the standard list re-insert.
+         */
+        removeTaskFromGroupBucket(draft, action) {
+            const { taskId, taskGroupId } = action.payload;
+            if (draft.taskIdsByGroupsIds[taskGroupId] != null) {
+                draft.taskIdsByGroupsIds[taskGroupId] = draft.taskIdsByGroupsIds[taskGroupId].filter((id) => id !== taskId);
+            }
+            // Mirror to the active tab's grouping so the UI re-renders.
+            const activeTab = draft.byTab[draft.currentTab];
+            if (activeTab.taskIdsByGroupsIds[taskGroupId] != null) {
+                activeTab.taskIdsByGroupsIds[taskGroupId] =
+                    activeTab.taskIdsByGroupsIds[taskGroupId].filter((id) => id !== taskId);
+            }
+        },
         clearTaskList(draft) {
             Object.assign(draft, initialState);
         },
     },
+    extraReducers: (builder) => {
+        // When the entity store receives updated tasks (e.g. from task detail
+        // save, snooze/archive/unarchive, etc.), re-bucket top-level tasks
+        // between the live and completed tabs based on the new status. Mirrors
+        // the backend split in task_handler.py: only `resolved` counts as
+        // completed.
+        //
+        // "Top-level" here means: currently rendered as a standalone row in
+        // the live or completed tab (i.e. present in
+        // `byTab.<tab>.taskIds`). Tasks that are nested under a parent's
+        // expanded subtask row live outside byTab.taskIds and are silently
+        // skipped by the "in-bucket" check below. This uses the same
+        // criterion as `getGroupedTaskIds` — a task is nested iff a visible
+        // parent's `subtasks` array claims it, otherwise it's top-level —
+        // so orphan subtasks (parent hidden from the customer's payload)
+        // migrate correctly on status flip via pusher / detail-save.
+        builder.addCase(updateTasks, (draft, action) => {
+            action.payload.forEach((taskPayload) => {
+                const taskId = taskPayload.task_id;
+                // `TaskPayload.status` is required per the type — every producer
+                // in this repo sends it, and `mapTaskPayloadToTask` dereferences
+                // it unguarded. The optional chain + null guard are defensive
+                // only, in case a downstream consumer (web-app-ui / cockpit-ui)
+                // ever dispatches `updateTasks` with a partial payload; in that
+                // case we treat missing status as "no status change" and skip
+                // re-bucketing so we don't migrate a Completed task back into
+                // the Live tab.
+                const statusCode = taskPayload.status?.code;
+                if (statusCode == null) {
+                    return;
+                }
+                const isCompleted = statusCode === 'resolved';
+                const targetTab = isCompleted ? 'completed' : 'live';
+                const otherTab = isCompleted ? 'live' : 'completed';
+                // Skip if the task isn't currently in either of these buckets
+                // (archived/snoozed/deleted are managed by their own actions).
+                const inLive = draft.byTab.live.taskIds.includes(taskId);
+                const inCompleted = draft.byTab.completed.taskIds.includes(taskId);
+                if (!inLive && !inCompleted) {
+                    return;
+                }
+                if (draft.byTab[otherTab].taskIds.includes(taskId)) {
+                    migrateTaskPayloadBetweenTabs(draft, taskId, taskPayload, otherTab, targetTab);
+                }
+                else if (!draft.byTab[targetTab].taskIds.includes(taskId)) {
+                    draft.byTab[targetTab].taskIds.push(taskId);
+                }
+            });
+            // Re-sync the top-level taskIds / grouping arrays for whichever
+            // tab the user is currently looking at.
+            copyTabDataToTopLevel(draft, draft.byTab[draft.currentTab]);
+        });
+    },
 });
-export const { fetchTaskListPage, fetchTaskList, updateTaskList, updateTaskListTab, updateTaskListFetchStatus, updateTaskListSearchText, updateTaskListUIState, updateTaskFilters, updateTaskListOnNewGroupCreationSuccess, bulkUpdateTaskList, updateTasksListOnBulkUpdateTasksSuccess, updateTasksListOnBulkUpdateTasksFailure, initiateTaskListLocalData, updateTaskListLocalData, updateTaskListOnTaskGroupDeletion, dragNDropTasks, updateTaskListOnNewTaskCreationSuccess, updateTaskListOnTaskGroupNameUpdate, updateTaskFromListView, updateTasksListOnUpdateTaskSuccess, updateTasksListOnUpdateTaskFailure, updateTaskListOnCreateTaskFromTemplateSuccess, removeTaskFromList, clearTaskList, } = taskList.actions;
+export const { fetchTaskListPage, fetchTaskList, updateTaskList, updateTaskListTab, updateTaskListFetchStatus, updateTaskListSearchText, updateTaskListUIState, updateTaskFilters, updateTaskListOnNewGroupCreationSuccess, bulkUpdateTaskList, updateTasksListOnBulkUpdateTasksSuccess, updateTasksListOnBulkUpdateTasksFailure, initiateTaskListLocalData, updateTaskListLocalData, updateTaskListOnTaskGroupDeletion, dragNDropTasks, updateTaskListOnNewTaskCreationSuccess, updateTaskListOnTaskGroupNameUpdate, updateTaskFromListView, updateTasksListOnUpdateTaskSuccess, updateTasksListOnUpdateTaskFailure, updateTaskListOnCreateTaskFromTemplateSuccess, removeTaskFromList, removeTaskFromGroupBucket, clearTaskList, } = taskList.actions;
 export default taskList.reducer;
 /**
  *  helpers
@@ -555,6 +697,115 @@ const copyTabDataToTopLevel = (draft, tabData) => {
     draft.taskIdsByDueDate = tabData.taskIdsByDueDate;
     draft.taskIdsByTags = tabData.taskIdsByTags;
 };
+/**
+ * Migrate a parent task between two `byTab` buckets (live ↔ completed)
+ * when its status flips into / out of `resolved`. The destination tab
+ * picks up the task in EVERY grouping dimension (status, priority,
+ * group id, assignees, dueDate, tags) using the UPDATED task as the
+ * source-of-truth for the new bucket keys. Otherwise the Completed tab
+ * shows the task in the right tab-level list but the grouped views
+ * (Group by Status, Group by Priority, etc.) miss it until the next
+ * full fetch.
+ */
+const migrateTaskBetweenTabs = (draft, taskId, updatedTask, from, to) => {
+    const fromTab = draft.byTab[from];
+    const toTab = draft.byTab[to];
+    // Source tab: drop the task from every grouping dimension.
+    removeIdsFromTabData(fromTab, [taskId]);
+    // Destination tab: add the task to taskIds (deduped) plus the
+    // appropriate bucket inside each grouping dimension based on the
+    // updated task.
+    if (!toTab.taskIds.includes(taskId)) {
+        toTab.taskIds.push(taskId);
+    }
+    const priorityKey = toPriorityCodeType(updatedTask.priority.code);
+    if (!toTab.taskIdsByPriority[priorityKey].includes(taskId)) {
+        toTab.taskIdsByPriority[priorityKey].push(taskId);
+    }
+    const statusKey = toTaskStatusCodeType(updatedTask.status.code);
+    if (!toTab.taskIdsByStatus[statusKey].includes(taskId)) {
+        toTab.taskIdsByStatus[statusKey].push(taskId);
+    }
+    const dueDateKey = updatedTask.dueDate != null
+        ? getDueDateGroupKey(updatedTask.dueDate.toString())
+        : 'upcoming';
+    if (!toTab.taskIdsByDueDate[dueDateKey].includes(taskId)) {
+        toTab.taskIdsByDueDate[dueDateKey].push(taskId);
+    }
+    const assigneeKey = getAssigneesGroupKey(updatedTask.assignees);
+    if (toTab.taskIdsByAssignees[assigneeKey] == null) {
+        toTab.taskIdsByAssignees[assigneeKey] = [taskId];
+    }
+    else if (!toTab.taskIdsByAssignees[assigneeKey].includes(taskId)) {
+        toTab.taskIdsByAssignees[assigneeKey].push(taskId);
+    }
+    const tagIds = [...updatedTask.tagIds].sort();
+    const tagsKey = tagIds.join(',');
+    if (toTab.taskIdsByTags[tagsKey] == null) {
+        toTab.taskIdsByTags[tagsKey] = [taskId];
+    }
+    else if (!toTab.taskIdsByTags[tagsKey].includes(taskId)) {
+        toTab.taskIdsByTags[tagsKey].push(taskId);
+    }
+    (updatedTask.taskGroupIds ?? []).forEach((groupId) => {
+        if (toTab.taskIdsByGroupsIds[groupId] == null) {
+            toTab.taskIdsByGroupsIds[groupId] = [taskId];
+        }
+        else if (!toTab.taskIdsByGroupsIds[groupId].includes(taskId)) {
+            toTab.taskIdsByGroupsIds[groupId].push(taskId);
+        }
+    });
+};
+/**
+ * `updateTasks` extraReducer variant — same migration semantics but
+ * keyed off the raw `TaskPayload` instead of the rich `Task` entity.
+ */
+const migrateTaskPayloadBetweenTabs = (draft, taskId, payload, from, to) => {
+    const fromTab = draft.byTab[from];
+    const toTab = draft.byTab[to];
+    removeIdsFromTabData(fromTab, [taskId]);
+    if (!toTab.taskIds.includes(taskId)) {
+        toTab.taskIds.push(taskId);
+    }
+    if (payload.priority?.code != null) {
+        const priorityKey = toPriorityCodeType(payload.priority.code);
+        if (!toTab.taskIdsByPriority[priorityKey].includes(taskId)) {
+            toTab.taskIdsByPriority[priorityKey].push(taskId);
+        }
+    }
+    if (payload.status?.code != null) {
+        const statusKey = toTaskStatusCodeType(payload.status.code);
+        if (!toTab.taskIdsByStatus[statusKey].includes(taskId)) {
+            toTab.taskIdsByStatus[statusKey].push(taskId);
+        }
+    }
+    const dueDateKey = getDueDateGroupKey(payload.due_date);
+    if (!toTab.taskIdsByDueDate[dueDateKey].includes(taskId)) {
+        toTab.taskIdsByDueDate[dueDateKey].push(taskId);
+    }
+    const assigneeKey = getAssigneesGroupKey(payload.assignees ?? []);
+    if (toTab.taskIdsByAssignees[assigneeKey] == null) {
+        toTab.taskIdsByAssignees[assigneeKey] = [taskId];
+    }
+    else if (!toTab.taskIdsByAssignees[assigneeKey].includes(taskId)) {
+        toTab.taskIdsByAssignees[assigneeKey].push(taskId);
+    }
+    const tagsKey = getTagsGroupKey(payload.tags ?? []);
+    if (toTab.taskIdsByTags[tagsKey] == null) {
+        toTab.taskIdsByTags[tagsKey] = [taskId];
+    }
+    else if (!toTab.taskIdsByTags[tagsKey].includes(taskId)) {
+        toTab.taskIdsByTags[tagsKey].push(taskId);
+    }
+    (payload.task_group_ids ?? []).forEach((groupId) => {
+        if (toTab.taskIdsByGroupsIds[groupId] == null) {
+            toTab.taskIdsByGroupsIds[groupId] = [taskId];
+        }
+        else if (!toTab.taskIdsByGroupsIds[groupId].includes(taskId)) {
+            toTab.taskIdsByGroupsIds[groupId].push(taskId);
+        }
+    });
+};
 const removeIdsFromTabData = (tabData, taskIds) => {
     const removedSet = new Set(taskIds);
     const isRemoved = (id) => removedSet.has(id);
@@ -582,7 +833,39 @@ const removeTaskIds = (draft, taskIds) => {
     removeIdsFromTabData(draft, taskIds);
     removeIdsFromTabData(draft.byTab[draft.currentTab], taskIds);
 };
-const getGroupedTaskIds = (tasks) => {
+// Collect the union of subtask ids claimed by any parent across every
+// bucket in the payload. See the callsite in `updateTaskList` for why
+// this must be cross-bucket rather than per-bucket.
+const collectNestedSubtaskIds = (buckets) => {
+    const nestedSubtaskIds = new Set();
+    buckets.forEach((bucket) => {
+        if (bucket == null) {
+            return;
+        }
+        bucket.forEach((task) => {
+            (task.subtasks ?? []).forEach((subtaskId) => nestedSubtaskIds.add(subtaskId));
+        });
+    });
+    return nestedSubtaskIds;
+};
+// A task is a "nested subtask" (hidden from the flat top-level list +
+// dropped from the tab count) iff a parent in the same payload claims
+// it via its `subtasks: [...]` array. Match this criterion exactly to
+// WC's `allSubtaskIds` union in TaskManagementPage.tsx — otherwise
+// the tab count and the visible top-level row count disagree
+// whenever the BE emits `parent_task_id` on a subtask but omits it
+// from the parent's `subtasks` array (a real inconsistency this UI
+// sees today).
+//
+// Using `parent_task_id` here would sometimes drop a task from the
+// count that WC still renders as a flat top-level row — that's the
+// bug we're fixing.
+//
+// `nestedSubtaskIds` is passed in from the caller and covers subtasks
+// claimed by parents in ANY bucket (live/completed/archived/deleted/
+// snoozed), so a subtask resolved into `completed` while its parent
+// stays in `data` is still correctly recognized as nested.
+const getGroupedTaskIds = (tasks, nestedSubtaskIds) => {
     const taskIds = [];
     const taskIdsByGroupIds = {};
     const taskIdsByAssignees = {};
@@ -597,12 +880,21 @@ const getGroupedTaskIds = (tasks) => {
     };
     const taskIdsByTags = {};
     tasks.forEach((task) => {
-        taskIds.push(task.task_id);
+        const isNestedSubtask = nestedSubtaskIds.has(task.task_id);
+        // Subtasks stay in every groupBy array so the UI can render them
+        // nested under their parent (WC's TaskManagementPage builds
+        // `subtasksByParentId` from `group.tasks` and then filters them
+        // out of top-level rows via `filterOutSubtasks`). Only the flat
+        // top-level `taskIds` array — which drives the Active/Completed/…
+        // tab counts — must exclude nested subtasks.
         const priorityKey = toPriorityCodeType(task.priority.code);
         const statusKey = toTaskStatusCodeType(task.status.code);
         const assigneeKey = getAssigneesGroupKey(task.assignees);
         const dueDateKey = getDueDateGroupKey(task.due_date);
         const tagsKey = getTagsGroupKey(task.tags);
+        if (!isNestedSubtask) {
+            taskIds.push(task.task_id);
+        }
         taskIdsGroupedByPriority[priorityKey] = [
             ...taskIdsGroupedByPriority[priorityKey],
             task.task_id,

package/lib/esm/view/taskManager/taskListView/taskListSelector.js

@@ -334,6 +334,7 @@ export const getAllTasks = createSelector((state) => state.taskListState, (state
     const taskGroupTemplates = getTaskGroupTemplateByIds(taskGroupTemplateState, taskGroupTemplateViewState.taskGroupTemplateIds);
     const tabCounts = {
         live: taskListState.byTab.live.taskIds.length,
+        completed: taskListState.byTab.completed.taskIds.length,
         archived: taskListState.byTab.archived.taskIds.length,
         deleted: taskListState.byTab.deleted.taskIds.length,
         snoozed: taskListState.byTab.snoozed.taskIds.length,

package/lib/esm/view/taskManager/taskListView/taskListViewHelpers.js

@@ -48,3 +48,61 @@ export const getTaskUpdates = (groupByKey, groupId) => {
         taskGroupIds: [groupId],
     };
 };
+/**
+ * Sort a subtask list by one of the sortable columns. Pure — no state
+ * dependency. `statusOrder` is derived from `allTaskStatus` so any new
+ * status added upstream slots in by its enum position instead of
+ * falling into a catch-all bucket.
+ */
+export const sortSubtasks = (subtasks, sortKey, sortOrder, userList, tagList) => {
+    if (sortKey == null) {
+        return subtasks;
+    }
+    const statusOrder = allTaskStatus.reduce((acc, status, index) => {
+        acc[status.code] = index;
+        return acc;
+    }, {});
+    const unknownStatusRank = allTaskStatus.length;
+    const cmpStr = (a, b) => a.localeCompare(b, undefined, { sensitivity: 'base' });
+    const keyFn = (task) => {
+        if (sortKey === 'name') {
+            return task.name ?? '';
+        }
+        if (sortKey === 'status') {
+            return statusOrder[task.status.code] ?? unknownStatusRank;
+        }
+        if (sortKey === 'assignee') {
+            const firstId = task.assignees?.[0];
+            if (firstId == null) {
+                return '';
+            }
+            const user = userList.find((candidate) => candidate.userId === firstId);
+            return user
+                ? `${user.firstName ?? ''} ${user.lastName ?? ''}`.trim()
+                : '';
+        }
+        if (sortKey === 'tag') {
+            const firstTagId = task.tagIds?.[0];
+            if (firstTagId == null) {
+                return '';
+            }
+            const tag = tagList.find((candidate) => candidate.tagId === firstTagId);
+            return tag?.name ?? '';
+        }
+        return '';
+    };
+    const copy = [...subtasks];
+    copy.sort((a, b) => {
+        const av = keyFn(a);
+        const bv = keyFn(b);
+        let cmp;
+        if (typeof av === 'number' && typeof bv === 'number') {
+            cmp = av - bv;
+        }
+        else {
+            cmp = cmpStr(String(av), String(bv));
+        }
+        return sortOrder === 'asc' ? cmp : -cmp;
+    });
+    return copy;
+};