@zeniai/client-epic-state 4.19.93 → 4.19.95-betaJK1

package/lib/esm/view/expenseAutomationView/selectors/missingReceiptsSelector.js

@@ -1,8 +1,11 @@
 import orderBy from 'lodash/orderBy';
 import { toMonthYearPeriodId } from '../../../commonStateTypes/timePeriod';
 import { getCurrentTenant } from '../../../entity/tenant/tenantSelector';
-import { getSupportedTransactionsByIds } from '../../../entity/transaction/transactionSelector';
+import { getSupportedTransactionById, getSupportedTransactionsByIds, } from '../../../entity/transaction/transactionSelector';
+import { isBatchListStatusCompleted } from '../payload/missingReceiptsPayload';
+import { getCompletedTransactionsCacheKey } from '../reducers/missingReceiptsViewReducer';
 import { getAllSteps } from '../selectorTypes/expenseAutomationViewSelectorTypes';
+import { isUnmatchedTabFileStatus, } from '../types/missingReceiptsViewState';
 export function getExpenseAutomationMissingReceiptsView(state) {
     const { expenseAutomationMissingReceiptsViewState, expenseAutomationViewState, transactionState, monthEndCloseChecksState, } = state;
     const currentTenant = getCurrentTenant(state);
@@ -47,6 +50,131 @@ export function getExpenseAutomationMissingReceiptsView(state) {
     const completionStatus = missingReceiptsCompletionStatus != null
         ? missingReceiptsCompletionStatus
         : 'incomplete';
+    const { bulkUpload, pendingMissingReceiptsTabNavigation } = expenseAutomationMissingReceiptsViewState;
+    const currentBatchStatus = bulkUpload.currentBatchId != null
+        ? bulkUpload.batchStatusById[bulkUpload.currentBatchId]
+        : undefined;
+    const batchList = monthYearPeriodId != null
+        ? (bulkUpload.batchListByPeriod[monthYearPeriodId] ?? [])
+        : [];
+    /**
+     * Primary "Unmatched" batch = first completed batch in platform list order, preferring the
+     * first batch that still has possible_matches/no_match work when any completed batch has such work.
+     * Batches without details yet: wait if the list row still reports unmatched work; otherwise skip
+     * so we do not block the whole tab while other rows are not fetched yet.
+     */
+    const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchList, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
+    /**
+     * During upload/matching, prefer `currentBatchId` only when its batch details are loaded,
+     * completed, and still have unmatched-tab work. Otherwise keep `primaryBatchIdFromDetailsOrder`.
+     *
+     * If we pinned to `currentBatchId` as soon as it was absent from the batch list (in-flight
+     * upload), details are often not loaded yet — `unmatchedFiles` would empty while older batches
+     * moved to "past", so the primary "Unmatched Receipts" section vanished during auto-matching.
+     */
+    const unmatchedSectionBatchId = (() => {
+        const phase = bulkUpload.phase;
+        if (phase !== 'matching' && phase !== 'uploading') {
+            return primaryBatchIdFromDetailsOrder;
+        }
+        const currentId = bulkUpload.currentBatchId;
+        if (currentId == null) {
+            return primaryBatchIdFromDetailsOrder;
+        }
+        const currentDetails = bulkUpload.batchDetailsById[currentId];
+        if (currentDetails != null &&
+            currentDetails.status === 'completed' &&
+            batchDetailsHasUnmatchedWork(currentDetails)) {
+            return currentId;
+        }
+        return primaryBatchIdFromDetailsOrder;
+    })();
+    const completedBatchesInApiOrder = batchList.filter((batchListItem) => isBatchListStatusCompleted(batchListItem.status));
+    const currentBatchDetails = unmatchedSectionBatchId != null
+        ? bulkUpload.batchDetailsById[unmatchedSectionBatchId]
+        : undefined;
+    const resolvedFiles = currentBatchDetails?.files.map((file) => resolveBatchFile(file, currentBatchDetails.batchId, transactionState));
+    const failedIds = new Set(bulkUpload.failedBatchDetailIds);
+    const hasMoreBatchDetails = completedBatchesInApiOrder.some((batchListItem) => bulkUpload.batchDetailsById[batchListItem.batchId] == null &&
+        !failedIds.has(batchListItem.batchId));
+    const getSortValue = (file) => {
+        const matchedTransaction = file.matchedTransaction;
+        if (matchedTransaction == null) {
+            return null;
+        }
+        switch (bulkUpload.sortKey) {
+            case 'vendor':
+                return ((matchedTransaction.vendorName ?? matchedTransaction.description)?.toLowerCase() ?? null);
+            case 'category': {
+                const line = matchedTransaction.lines?.[0];
+                return line?.account?.accountName?.toLowerCase() ?? null;
+            }
+            case 'class': {
+                const line = matchedTransaction.lines?.[0];
+                return line?.class?.className?.toLowerCase() ?? null;
+            }
+            case 'date':
+                return matchedTransaction.date.valueOf();
+            case 'amount':
+                return matchedTransaction.amount.amount;
+            default:
+                return null;
+        }
+    };
+    const bulkUploadSortDirection = bulkUpload.sortOrder === 'ascending' ? 'asc' : 'desc';
+    const matchedFiles = orderBy(resolvedFiles?.filter((resolvedFile) => resolvedFile.status === 'exact_match') ?? [], getSortValue, bulkUploadSortDirection);
+    const unmatchedFiles = orderBy(resolvedFiles?.filter((resolvedFile) => isUnmatchedTabFileStatus(resolvedFile.status)) ?? [], getSortValue, bulkUploadSortDirection);
+    const progress = currentBatchStatus != null
+        ? {
+            ...currentBatchStatus.progress,
+            percentage: currentBatchStatus.progress.total > 0
+                ? Math.round((currentBatchStatus.progress.processed /
+                    currentBatchStatus.progress.total) *
+                    100)
+                : 0,
+        }
+        : { total: 0, processed: 0, percentage: 0 };
+    const batchListFetchState = bulkUpload.batchListFetchState;
+    /**
+     * When primary batch is not resolved yet, still aggregate unmatched files from every batch
+     * that has details loaded (otherwise past is empty and receipts vanish from the UI).
+     */
+    const pastBatches = unmatchedSectionBatchId != null
+        ? batchList.filter((batchListItem) => batchListItem.batchId !== unmatchedSectionBatchId)
+        : batchList;
+    const pastUnmatchedFiles = pastBatches.flatMap((pastBatch) => {
+        const details = bulkUpload.batchDetailsById[pastBatch.batchId];
+        if (details == null) {
+            return [];
+        }
+        return details.files
+            .filter((batchFile) => isUnmatchedTabFileStatus(batchFile.status))
+            .map((batchFile) => resolveBatchFile(batchFile, pastBatch.batchId, transactionState));
+    });
+    const completedTransactionsCacheKey = monthYearPeriodId != null
+        ? getCompletedTransactionsCacheKey(monthYearPeriodId, bulkUpload.sortKey, bulkUpload.sortOrder, bulkUpload.completedSubTab)
+        : undefined;
+    const completedTransactionsForPeriod = completedTransactionsCacheKey != null
+        ? bulkUpload.completedTransactionsByPeriod[completedTransactionsCacheKey]
+        : undefined;
+    const completedTransactionIds = completedTransactionsForPeriod?.transactionIds ?? [];
+    const resolvedCompletedTransactions = getSupportedTransactionsByIds(transactionState, completedTransactionIds);
+    const resolvedBatchDetails = currentBatchDetails != null && resolvedFiles != null
+        ? {
+            batchId: currentBatchDetails.batchId,
+            createdAt: currentBatchDetails.createdAt,
+            files: resolvedFiles,
+            status: currentBatchDetails.status,
+            summary: currentBatchDetails.summary,
+        }
+        : undefined;
+    const manualSearchResults = bulkUpload.manualSearch.results.map((result) => {
+        const transaction = getSupportedTransactionById(transactionState, result.transactionId);
+        return {
+            ...result,
+            vendorLogo: result.vendorLogo ?? transaction?.logo?.href,
+        };
+    });
     return {
         fetchState,
         error,
@@ -55,5 +183,120 @@ export function getExpenseAutomationMissingReceiptsView(state) {
         refreshStatus,
         transactions: sortedTransactions,
         completionStatus,
+        pendingMissingReceiptsTabNavigation: pendingMissingReceiptsTabNavigation ?? null,
+        bulkUpload: {
+            phase: bulkUpload.phase,
+            uploadStatus: bulkUpload.uploadStatus,
+            batchStatus: currentBatchStatus,
+            batchDetails: resolvedBatchDetails,
+            completedSubTab: bulkUpload.completedSubTab,
+            completedTransactions: {
+                fetchState: completedTransactionsForPeriod?.fetchState ?? {
+                    fetchState: 'Not-Started',
+                    error: undefined,
+                },
+                nextPageToken: completedTransactionsForPeriod?.nextPageToken ?? null,
+                totalCount: completedTransactionsForPeriod?.totalCount ?? 0,
+                transactions: resolvedCompletedTransactions,
+            },
+            matchedFiles,
+            unmatchedFiles,
+            progress,
+            currentResultsTab: bulkUpload.currentResultsTab,
+            sortKey: bulkUpload.sortKey,
+            sortOrder: bulkUpload.sortOrder,
+            batchList,
+            batchListFetchState,
+            pastBatches,
+            pastUnmatchedFiles,
+            confirmMatchStatus: bulkUpload.confirmMatchStatus,
+            manualSearchUiResetKey: bulkUpload.manualSearchUiResetKey,
+            hasMoreBatchDetails,
+            batchDetailsPaginationState: bulkUpload.batchDetailsPaginationState,
+            manualSearch: {
+                ...bulkUpload.manualSearch,
+                results: manualSearchResults,
+            },
+            uploadProgress: bulkUpload.uploadProgress,
+        },
+    };
+}
+function batchDetailsHasUnmatchedWork(details) {
+    return details.files.some((file) => isUnmatchedTabFileStatus(file.status));
+}
+/** List row summary before batch details load — aligns with unmatched / possible-match work. */
+function batchListItemHasUnmatchedWork(batch) {
+    return batch.noMatchCount > 0 || batch.possibleMatchesCount > 0;
+}
+/**
+ * `batchList` must match platform order (same sequence as the bulk-upload batches API). Picks the
+ * primary batch for the top "Unmatched" section. Skips failed detail fetches.
+ *
+ * If details are not loaded for an earlier list row but that row reports no unmatched work, we
+ * skip it so later rows with loaded details can be primary (avoids an empty tab when the first
+ * fetch page only loaded later batches). If the list reports unmatched work but details are still
+ * loading, we wait (undefined) so primary order stays correct once details arrive.
+ */
+function getPrimaryBatchIdFromBatchListOrder(batchListInPlatformOrder, batchDetailsById, failedBatchDetailIds) {
+    const failedIds = new Set(failedBatchDetailIds);
+    const anyCompletedBatchHasUnmatchedWork = batchListInPlatformOrder.some((batch) => {
+        if (failedIds.has(batch.batchId)) {
+            return false;
+        }
+        const details = batchDetailsById[batch.batchId];
+        if (details != null &&
+            details.status === 'completed' &&
+            batchDetailsHasUnmatchedWork(details)) {
+            return true;
+        }
+        return details == null && batchListItemHasUnmatchedWork(batch);
+    });
+    for (const batch of batchListInPlatformOrder) {
+        if (failedIds.has(batch.batchId)) {
+            continue;
+        }
+        const details = batchDetailsById[batch.batchId];
+        if (details == null) {
+            if (batchListItemHasUnmatchedWork(batch)) {
+                return undefined;
+            }
+            continue;
+        }
+        if (details.status !== 'completed') {
+            continue;
+        }
+        if (anyCompletedBatchHasUnmatchedWork) {
+            if (batchDetailsHasUnmatchedWork(details)) {
+                return batch.batchId;
+            }
+            continue;
+        }
+        return batch.batchId;
+    }
+    return undefined;
+}
+function resolveBatchFile(file, batchId, transactionState) {
+    const matchedTransaction = file.matchedTransactionId != null
+        ? getSupportedTransactionById(transactionState, file.matchedTransactionId)
+        : undefined;
+    const candidates = file.candidates
+        ?.map((ref) => {
+        const transaction = getSupportedTransactionById(transactionState, ref.transactionId);
+        return transaction != null
+            ? { transaction, matchScore: ref.matchScore }
+            : undefined;
+    })
+        .filter((candidate) => candidate != null);
+    return {
+        attachmentId: file.attachmentId,
+        batchId,
+        fileDownloadUrl: file.fileDownloadUrl,
+        fileId: file.fileId,
+        filename: file.filename,
+        filePreviewUrl: file.filePreviewUrl,
+        status: file.status,
+        matchedTransaction,
+        candidates: candidates != null && candidates.length > 0 ? candidates : undefined,
+        matchSource: file.matchSource,
     };
 }

package/lib/esm/view/expenseAutomationView/selectors/transactionCategorizationSelector.js

@@ -10,7 +10,7 @@ import { getAllSteps } from '../selectorTypes/expenseAutomationViewSelectorTypes
 export function getExpenseAutomationTransactionView(state) {
     const { accountState, classState, classListState, accountListState, expenseAutomationTransactionsViewState, expenseAutomationViewState, transactionState, monthEndCloseChecksState, } = state;
     const { selectedTransactionCategorizationTab } = expenseAutomationTransactionsViewState;
-    const { uiState, refreshStatus, saveStatus, markAsNotMiscategorizedStatus, transactionIdsBySelectedPeriod, transactionReviewLocalDataById, selectedCheckBoxTransactionIds, transactionIdsWithUnsavedData, selectedTransactionId, selectedTransactionLineId, } = expenseAutomationTransactionsViewState.transactionCategorizationView[selectedTransactionCategorizationTab];
+    const { uiState, refreshStatus, saveStatus, markAsNotMiscategorizedStatus, transactionIdsBySelectedPeriod, transactionReviewLocalDataById, selectedCheckBoxTransactionIds, transactionIdsWithUnsavedData, uploadReceiptStatusById, selectedTransactionId, selectedTransactionLineId, } = expenseAutomationTransactionsViewState.transactionCategorizationView[selectedTransactionCategorizationTab];
     const uncategorizedIncomeExpense = getUncategorizedAccounts(accountState, accountListState, 'accountList');
     const accountList = getAccountList(accountState, accountListState, 'accountList');
     const classList = getClassList(classState, classListState);
@@ -94,6 +94,7 @@ export function getExpenseAutomationTransactionView(state) {
         completionStatus,
         totalCountByTab,
         fetchStateByTransactionTabs: fetchStateByTab,
+        uploadReceiptStatusById,
         selectedTransactionId,
         selectedTransactionLineId,
     };

package/lib/esm/view/expenseAutomationView/types/missingReceiptsViewState.js

@@ -7,3 +7,47 @@ const MISSING_RECEIPTS_SORT_KEYS = [
     'amount',
 ];
 export const toMissingReceiptsSortKey = (v) => stringToUnion(v, MISSING_RECEIPTS_SORT_KEYS);
+// -- Bulk Receipt Upload Types --
+/**
+ * Minimum trimmed query length before manual-match search calls the expense-automation API.
+ * Kept in sync with `ManualSearchInput` in web-components (fires search only when length ≥ this).
+ */
+export const MIN_MANUAL_TRANSACTION_SEARCH_LENGTH = 2;
+const BATCH_STATUS_VALUES = ['pending', 'processing', 'completed'];
+export const toBatchStatusValue = (v) => stringToUnion(v.trim().toLowerCase(), BATCH_STATUS_VALUES);
+/** Canonical batch file statuses (API ingress may use aliases; see `parseBatchFileStatus`). */
+export const BATCH_FILE_STATUSES = [
+    'exact_match',
+    'possible_matches',
+    'no_match',
+    'failed',
+];
+export const toBatchFileStatus = (v) => stringToUnion(v.trim().toLowerCase().replace(/-/g, '_'), BATCH_FILE_STATUSES);
+const UNMATCHED_TAB_FILE_STATUSES = ['possible_matches', 'no_match'];
+/** True for files that belong in the Unmatched tab (possible matches or no match). */
+export function isUnmatchedTabFileStatus(status) {
+    return UNMATCHED_TAB_FILE_STATUSES.includes(status);
+}
+const BULK_UPLOAD_PHASES = [
+    'idle',
+    'uploading',
+    'matching',
+    'completed',
+];
+export const toBulkUploadPhase = (v) => stringToUnion(v.trim().toLowerCase(), BULK_UPLOAD_PHASES);
+const BULK_UPLOAD_RESULTS_TABS = ['completed', 'unmatched'];
+export const toBulkUploadResultsTab = (v) => stringToUnion(v.trim().toLowerCase(), BULK_UPLOAD_RESULTS_TABS);
+const MISSING_RECEIPTS_TABS = ['missing', 'completed', 'unmatched'];
+export const toMissingReceiptsTab = (v) => stringToUnion(v.trim().toLowerCase(), MISSING_RECEIPTS_TABS);
+const COMPLETED_SUB_TABS = ['all', 'ai_accountant', 'manual'];
+export const toCompletedSubTab = (v) => stringToUnion(v.trim().toLowerCase(), COMPLETED_SUB_TABS);
+const MATCH_SOURCES = ['ai', 'manual'];
+export const toMatchSource = (v) => stringToUnion(v.trim().toLowerCase(), MATCH_SOURCES);
+const BULK_UPLOAD_SORT_KEYS = [
+    'amount',
+    'category',
+    'class',
+    'date',
+    'vendor',
+];
+export const toBulkUploadSortKey = (v) => stringToUnion(v.trim().toLowerCase(), BULK_UPLOAD_SORT_KEYS);

package/lib/esm/view/expenseAutomationView/types/transactionsViewState.js

@@ -4,10 +4,11 @@ const TRANSACTIONS_SORT_KEYS = [
     'vendor',
     'amount',
     'transaction_type',
+    'payment_account',
     'date',
     'category',
     'class',
-    'memo',
+    'memo_and_receipt',
 ];
 export const toTransactionsSortKey = (v) => stringToUnion(v, TRANSACTIONS_SORT_KEYS);
 export const TRANSACTIONS_TABS = ['review', 'autoCategorized'];

package/lib/esm/view/scheduleView/scheduleDetailView/epics/fetchScheduleDetailsEpic.js

@@ -1,9 +1,8 @@
 import { from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { getJEScheduleTransactionDetailKeyPayload, } from '../../../../entity/jeSchedules/jeSchedulesPayload';
 import { updateJESchedules, updateJESchedulesDetails, } from '../../../../entity/jeSchedules/jeSchedulesReducer';
-import { toTransactionType } from '../../../../entity/transaction/stateTypes/transactionType';
 import { createZeniAPIStatus, isSuccessResponse, } from '../../../../responsePayload';
-import { getZeniTransactionDetailKey } from '../../../transactionDetail/transactionDetailState';
 import { createNewSchedules, fetchScheduleDetails, initializeScheduleDetailLocalData, saveScheduleDetailsSuccessOrFailure, updateScheduleDetailsFailure, updateScheduleDetailsSuccess, updateSelectedJEScheduleKey, } from '../scheduleDetailReducer';
 export const fetchScheduleDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchScheduleDetails.match), mergeMap((action) => {
     const updateActions = [];
@@ -24,11 +23,7 @@ export const fetchScheduleDetailsEpic = (actions$, state$, zeniAPI) => actions$.
             .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/schedules/${selectedJeScheduleDetailId}?query=${encodeURIComponent(JSON.stringify(queryParam))}`)
             .pipe(mergeMap((response) => {
             if (isSuccessResponse(response) && response.data != null) {
-                const transactionData = response.data.je_schedules[0].base_transaction;
-                const selectedJEScheduleKey = getZeniTransactionDetailKey({
-                    id: transactionData.transaction_id,
-                    type: toTransactionType(transactionData.transaction_type),
-                });
+                const selectedJEScheduleKey = getJEScheduleTransactionDetailKeyPayload(response.data.je_schedules[0].base_transaction);
                 updateActions.push(updateJESchedules(response.data.je_schedules), updateSelectedJEScheduleKey({ selectedJEScheduleKey }), updateJESchedulesDetails(response.data.je_schedules, response.data.scheduled_journal_entries), saveScheduleDetailsSuccessOrFailure('Not-Started'), initializeScheduleDetailLocalData(scheduleType, selectedJEScheduleKey, selectedJeScheduleDetailId), updateScheduleDetailsSuccess());
                 if (response.data.je_schedules[0].status.code === 'draft' &&
                     isCompleteJEScheduleFormDataPresent(response.data.je_schedules[0])) {

package/lib/esm/view/scheduleView/scheduleListView/scheduleListReducer.js

@@ -1,7 +1,5 @@
 import { createSlice } from '@reduxjs/toolkit';
-import { getJEScheduleKey, } from '../../../entity/jeSchedules/jeSchedulesPayload';
-import { toTransactionID } from '../../../entity/transaction/payloadTypes/transactionIDPayload';
-import { getZeniTransactionDetailKey } from '../../transactionDetail/transactionDetailState';
+import { getJEScheduleKey, getJEScheduleTransactionDetailKeyPayload, } from '../../../entity/jeSchedules/jeSchedulesPayload';
 import { getDefaultSelectedTimeframeForScheduleType } from './scheduleListHelper';
 import { getScheduleListKey, } from './scheduleListTypes';
 export const initialUIState = {
@@ -379,10 +377,7 @@ export default scheduleListView.reducer;
 function doUpdateScheduleList(draft, payload, scheduleType, selectedTimeframe, selectedCategoryId) {
     if (scheduleType !== 'accrued_expenses') {
         const state = getState(draft, scheduleType);
-        const jeScheduleTransactionKeys = payload.map((schedules) => {
-            const transactionID = toTransactionID(schedules.base_transaction);
-            return getZeniTransactionDetailKey(transactionID);
-        });
+        const jeScheduleTransactionKeys = payload.map((schedules) => getJEScheduleTransactionDetailKeyPayload(schedules.base_transaction));
         state.selectedCategoryId = selectedCategoryId;
         state.selectedTimeframe = selectedTimeframe;
         const key = getScheduleListKey(selectedCategoryId, selectedTimeframe);

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

@@ -109,7 +109,7 @@ export const allTaskPriority = [
     },
     {
         code: 'medium',
-        name: 'Normal',
+        name: 'Medium',
     },
     {
         code: 'low',

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

@@ -70,6 +70,7 @@ const toTaskPayload = (state, task) => {
         name: task.name,
         assignees: task.assignees,
         description: task.description,
+        group_assignees: task.groupAssignees,
         due_date: task.dueDate != null ? task.dueDate.format(DEFAULT_DATE_FORMAT) : null,
         priority: task.priority.code,
         status: task.status.code,

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

@@ -11,6 +11,7 @@ import { getTaskGroupTemplateByIds } from '../../../entity/taskGroupTemplate/tas
 import { getUserName, getUsersByUserIds, } from '../../../entity/user/userSelector';
 import { getUserAndUserRole, } from '../../companyView/types/userAndRole';
 import { applyAdvancedFiltersOnList } from '../../spendManagement/spendManagementFilterHelpers';
+import { getUserGroupList } from '../../userGroupListView/userGroupListViewSelector';
 import { getUserList, } from '../../userListView/userListViewSelector';
 import { allTaskPriority, allTaskStatus, } from '../taskDetailView/taskDetailSelector';
 import { DUE_DATE_GROUP_KEYS, } from './taskList';
@@ -308,7 +309,7 @@ const getTaskGroupsWithTaskList = ({ taskListState, taskState, userState, userRo
         tagState,
     });
 };
-export const getAllTasks = createSelector((state) => state.taskListState, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.addressState, (state) => state.taskGroupState, (state) => state.taskGroupViewState, (state) => state.tagViewState, (state) => state.tagState, (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, taskState, userState, userRoleState, userListViewState, addressState, taskGroupState, taskGroupViewState, tagViewState, tagState, taskGroupTemplateState, taskGroupTemplateViewState, isTaskTemplatesEnabled) => {
+export const getAllTasks = createSelector((state) => state.taskListState, (state) => state.taskState, (state) => state.userState, (state) => state.userRoleState, (state) => state.userListViewState, (state) => state.addressState, (state) => state.taskGroupState, (state) => state.taskGroupViewState, (state) => state.tagViewState, (state) => state.tagState, (state) => state.taskGroupTemplateState, (state) => state.taskGroupTemplateViewState, (state) => state.userGroupsState, (state) => state.userGroupListViewState, (_state, isTaskTemplatesEnabled) => isTaskTemplatesEnabled, (taskListState, taskState, userState, userRoleState, userListViewState, addressState, taskGroupState, taskGroupViewState, tagViewState, tagState, taskGroupTemplateState, taskGroupTemplateViewState, userGroupsState, userGroupListViewState, isTaskTemplatesEnabled) => {
     const { localData } = taskListState;
     const taskGroupsWithTasksList = getTaskGroupsWithTaskList({
         taskListState,
@@ -336,6 +337,7 @@ export const getAllTasks = createSelector((state) => state.taskListState, (state
         taskGroupTemplates,
         fetchState: fetchState,
         userList: getUserList(userState, userRoleState, userListViewState, 'taskManagerCandidate'),
+        userGroupList: getUserGroupList(userGroupsState, userGroupListViewState, 'taskManagerCandidate'),
         error: error,
         version: 0,
         taskGroupsWithTasksList,

package/lib/esm/view/userGroupListView/userGroupListViewReducer.js

@@ -0,0 +1,65 @@
+import { createSlice } from '@reduxjs/toolkit';
+const initialUserGroupList = {
+    ids: [],
+    fetchState: 'Not-Started',
+    error: undefined,
+    hasValidState() {
+        return this.fetchState == 'Completed';
+    },
+};
+export const initialState = {
+    userGroupListByType: {
+        taskManagerCandidate: initialUserGroupList,
+    },
+};
+const userGroupListView = createSlice({
+    name: 'userGroupListView',
+    initialState,
+    reducers: {
+        fetchUserGroupListByType: {
+            reducer(draft, action) {
+                const { userGroupType } = action.payload;
+                draft.userGroupListByType[userGroupType].fetchState = 'In-Progress';
+                draft.userGroupListByType[userGroupType].error = undefined;
+            },
+            prepare(userGroupType, cacheOverride = false) {
+                return {
+                    payload: {
+                        userGroupType,
+                        cacheOverride,
+                    },
+                };
+            },
+        },
+        updateUserGroupIds(draft, action) {
+            const { userGroupType, userGroupsPayload } = action.payload;
+            draft.userGroupListByType[userGroupType].fetchState = 'Completed';
+            draft.userGroupListByType[userGroupType].error = undefined;
+            draft.userGroupListByType[userGroupType].ids = userGroupsPayload.map((userGroup) => userGroup.id);
+        },
+        addUserGroupId(draft, action) {
+            const { userGroupType, id } = action.payload;
+            const index = draft.userGroupListByType[userGroupType].ids.indexOf(id);
+            if (index < 0) {
+                draft.userGroupListByType[userGroupType].ids.push(id);
+            }
+        },
+        removeUserGroupId(draft, action) {
+            const { userGroupType, id } = action.payload;
+            const index = draft.userGroupListByType[userGroupType].ids.indexOf(id);
+            if (index > -1) {
+                draft.userGroupListByType[userGroupType].ids.splice(index, 1);
+            }
+        },
+        updateUserGroupListFetchFailure(draft, action) {
+            const { userGroupType, status } = action.payload;
+            draft.userGroupListByType[userGroupType].fetchState = 'Error';
+            draft.userGroupListByType[userGroupType].error = status;
+        },
+        clearUserGroupListView(draft) {
+            Object.assign(draft, initialState);
+        },
+    },
+});
+export const { fetchUserGroupListByType, updateUserGroupIds, addUserGroupId, removeUserGroupId, updateUserGroupListFetchFailure, clearUserGroupListView, } = userGroupListView.actions;
+export default userGroupListView.reducer;

package/lib/esm/view/userGroupListView/userGroupListViewSelector.js

@@ -0,0 +1,16 @@
+import { getUserGroupByUserGroupId } from '../../entity/userGroups/userGroupsSelector';
+export const getUserGroupList = (userGroupsState, userGroupListViewState, userGroupType) => {
+    const listState = userGroupListViewState.userGroupListByType[userGroupType];
+    return {
+        userGroups: getUserGroupListByIds(userGroupsState, userGroupListViewState, userGroupType),
+        fetchState: listState?.fetchState,
+        error: listState?.error,
+        version: 0,
+    };
+};
+function getUserGroupListByIds(userGroupsState, userGroupListViewState, type) {
+    const userGroupIds = userGroupListViewState.userGroupListByType[type].ids;
+    return userGroupIds
+        .map((id) => getUserGroupByUserGroupId(userGroupsState, id))
+        .filter((value) => value != null);
+}

package/lib/esm/view/userGroupListView/userGroupListViewState.js

@@ -0,0 +1 @@
+export {};

package/lib/esm/view/userListView/fetchUserListByTypeEpic.js

@@ -3,9 +3,11 @@ import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateAddresses } from '../../entity/address/addressReducer';
 import { getCurrentTenant, isZeniDomainTenant, } from '../../entity/tenant/tenantSelector';
 import { updateAllUsers } from '../../entity/user/userReducer';
+import { updateAllUserGroups } from '../../entity/userGroups/userGroupsReducer';
 import { updateUserRoles } from '../../entity/userRole/userRoleReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
 import { updateChargeCardCount, updateDebitCardCount, } from '../spendManagement/chargeCards/issueChargeCard/issueChargeCardReducer';
+import { updateUserGroupIds } from '../userGroupListView/userGroupListViewReducer';
 import { fetchUserListByType, updateUserIds, updateUserListFetchFailure, } from './userListViewReducer';
 export const fetchUserListByTypeEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchUserListByType.match), mergeMap((action) => {
     const { userType, cacheOverride } = action.payload;
@@ -29,6 +31,15 @@ export const fetchUserListByTypeEpic = (actions$, state$, zeniAPI) => actions$.p
                         usersPayload: response.data?.users ?? [],
                     }),
                 ];
+                if (response.data?.user_groups != null) {
+                    userListAction.push(updateAllUserGroups({ userGroups: response.data.user_groups }));
+                    if (userType === 'taskManagerCandidate') {
+                        userListAction.push(updateUserGroupIds({
+                            userGroupType: userType,
+                            userGroupsPayload: response.data.user_groups,
+                        }));
+                    }
+                }
                 if (userType === 'cardHolderCandidate') {
                     userListAction.push(updateChargeCardCount(response.data?.cards_count_by_user_id ?? []));
                     userListAction.push(updateDebitCardCount(response.data?.debit_cards_count_by_deposit_account_id ?? {}));

package/lib/esm/zeniAPI.js

@@ -79,8 +79,6 @@ export class ZeniAPIClient {
         return from(promise);
     }
     postFormData(restEndPoint, formData, signal) {
-        // Use apiHeaders for auth headers, then remove Content-Type
-        // so the browser sets multipart/form-data with the correct boundary
         // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const { 'Content-Type': _contentType, ...headers } = this.apiHeaders();
         const promise = fetch(restEndPoint, {