@zeniai/client-epic-state 5.0.64 → 5.0.65-betaML2

package/lib/esm/view/expenseAutomationView/helpers/transactionCategorizationLocalDataHelper.js

@@ -59,6 +59,22 @@ export const filterAutoTabLineItems = (tabView, transactionId, updatedTransactio
     }
 };
 export const MAX_SELECTION_LIMIT = 5;
+// Returns true when the transaction should be auto-added to the
+// selectedCheckBoxTransactionIds list after a categorization-related
+// state mutation: all line items are filled, the selection limit has
+// not been hit, and the id isn't already in the list. Consolidates the
+// triplet that was inlined at four sites (updateSelectedCustomer/Vendor,
+// setAllItemsToCategoryClassInLocalDataForCategorization, and
+// setEntityRecommendationForLineIdInLocalData below).
+export const shouldAutoSelectAndAdd = (transaction, localData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) => {
+    if (selectedCheckBoxTransactionIds.includes(transaction.id)) {
+        return false;
+    }
+    if (selectedCheckBoxTransactionIds.length >= MAX_SELECTION_LIMIT) {
+        return false;
+    }
+    return checkIfAllLineItemsAreCategoryClassFilled(transaction, localData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled);
+};
 export const toTransactionDetailLocalData = (transaction, selectedTab, lineItemsByTransactionIds, uncategorizedIncomeExpense, isUncategorizedExpenseCategoryEnabled) => {
     const transactionLocal = {
         ...initialSupportedTransactionCategorization.transactionReviewLocalData,
@@ -544,10 +560,14 @@ export const setEntityRecommendationForLineIdInLocalData = (draft, transaction,
         selectedEntity: transactionDetailLocalData.selectedEntity,
         tabSpecificLineItems: transactionDetailLocalData.tabSpecificLineItems,
     };
+    // Auto-uncheck if not all line items are filled (the row's
+    // category/class became stale after the entity update). Otherwise
+    // route through shouldAutoSelectAndAdd so the MAX_SELECTION_LIMIT
+    // gate is consistently applied across all auto-add sites.
     if (!checkIfAllLineItemsAreCategoryClassFilled(transaction, newLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
         selectedCheckBoxTransactionIds = selectedCheckBoxTransactionIds.filter((id) => id !== transaction.id);
     }
-    else if (selectedCheckBoxTransactionIds.includes(transaction.id) === false) {
+    else if (shouldAutoSelectAndAdd(transaction, newLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
         selectedCheckBoxTransactionIds.push(transaction.id);
     }
     draft.selectedCheckBoxTransactionIds = selectedCheckBoxTransactionIds;

package/lib/esm/view/expenseAutomationView/reducers/missingReceiptsViewReducer.js

@@ -1,5 +1,6 @@
 import { createAction, createSlice } from '@reduxjs/toolkit';
 import { toMonthYearPeriodId } from '../../../commonStateTypes/timePeriod';
+import { DEFAULT_COMPLETED_SUB_TAB, } from '../types/completedSubTab';
 import { MIN_MANUAL_TRANSACTION_SEARCH_LENGTH, } from '../types/missingReceiptsViewState';
 export const getCompletedTransactionsCacheKey = (periodId, sortKey, sortOrder, subTab) => {
     const sortKeyPart = sortKey ?? 'none';
@@ -12,7 +13,7 @@ export const initialBulkUploadState = {
     batchListByPeriod: {},
     batchListFetchState: { fetchState: 'Not-Started', error: undefined },
     batchStatusById: {},
-    completedSubTab: 'all',
+    completedSubTab: DEFAULT_COMPLETED_SUB_TAB,
     completedTransactionsByPeriod: {},
     confirmMatchStatus: { fetchState: 'Not-Started', error: undefined },
     currentBatchId: undefined,

package/lib/esm/view/expenseAutomationView/reducers/transactionsViewReducer.js

@@ -3,7 +3,8 @@ import recordGet from 'lodash/get';
 import uniq from 'lodash/uniq';
 import { toMonthYearPeriodId, } from '../../../commonStateTypes/timePeriod';
 import { isVendorTransaction } from '../../../entity/transaction/stateTypes/vendorTransaction';
-import { MAX_SELECTION_LIMIT, checkIfAllLineItemsAreCategoryClassFilled, filterAutoTabLineItems, mergeTabSpecificLineItems, removeTransactionFromTabView, setEntityRecommendationForLineIdInLocalData, toSetAllLineItemsToCategoryClass, toTransactionDetailLocalData, } from '../helpers/transactionCategorizationLocalDataHelper';
+import { filterAutoTabLineItems, mergeTabSpecificLineItems, removeTransactionFromTabView, setEntityRecommendationForLineIdInLocalData, shouldAutoSelectAndAdd, toSetAllLineItemsToCategoryClass, toTransactionDetailLocalData, } from '../helpers/transactionCategorizationLocalDataHelper';
+import { DEFAULT_COMPLETED_SUB_TAB, } from '../types/completedSubTab';
 export const initialTransactionTabViewState = {
     saveStatus: {
         fetchState: 'Not-Started',
@@ -41,12 +42,74 @@ export const initialTransactionTabViewState = {
     selectedTransactionLineId: undefined,
 };
 export const initialState = {
+    autoCategorizedSubTabCache: {},
+    parentTotalCountByTab: {
+        review: {},
+        autoCategorized: {},
+    },
     selectedTransactionCategorizationTab: 'review',
+    selectedTransactionCategorizationCompletedSubTab: DEFAULT_COMPLETED_SUB_TAB,
     transactionCategorizationView: {
         review: { ...initialTransactionTabViewState },
         autoCategorized: { ...initialTransactionTabViewState },
     },
 };
+/**
+ * Capture the autoCategorized tab's current paginated dataset for a sub-tab.
+ * The mid-flight `'In-Progress'` state is normalised to `'Completed'` because
+ * the in-flight request is cancelled by `switchMap` in the fetch epic when the
+ * sub-tab changes — restoring `'In-Progress'` later would leave the UI stuck
+ * showing a phantom loading state with no fetch actually running. Length-zero
+ * datasets degrade to `'Not-Started'` so the next visit triggers a fresh
+ * fetch from page 1 instead of short-circuiting on stale empty caches.
+ *
+ * Snapshot scope (deliberately narrow):
+ * - Captured: `pageToken`, `totalCount`, `transactionIdsBySelectedPeriod`,
+ *   `fetchState`, `error`, `scrollPosition`. The first five are the keys the
+ *   fetch epic's cache check reads to decide whether to short-circuit a
+ *   sub-tab revisit; `scrollPosition` is captured per sub-tab so revisiting
+ *   restores the user's last offset and switching to a never-visited sub-tab
+ *   starts at the top instead of inheriting the outgoing sub-tab's offset
+ *   (which would land the user at a meaningless row index against a
+ *   completely different list).
+ * - Intentionally NOT captured (left in place on `autoCat` and inherited by
+ *   the incoming sub-tab):
+ *     - `uiState.searchString`, `uiState.sortKey`, `uiState.sortOrder`,
+ *       `uiState.nodeCollapseState`, `uiState.limit` — search and sort are
+ *       user-applied preferences that persist across sub-tabs by design (a
+ *       search query stays active when the user toggles between Manual / AI
+ *       Accountant).
+ *     - `selectedCheckBoxTransactionIds` — selection state is intentionally
+ *       cleared at the action source (the fetch epic / save flow), not
+ *       by the snapshot path. Carrying selection across sub-tabs is safe
+ *       because every sub-tab change goes through a fetch round-trip that
+ *       reconciles selection against the new row IDs.
+ *     - `transactionReviewLocalDataById`, `transactionIdsWithUnsavedData`,
+ *       `uploadReceiptStatusById`, `saveStatus`, `refreshStatus`,
+ *       `markAsNotMiscategorizedStatus` — these are per-row / per-flight
+ *       caches that are write-through global state, not sub-tab-scoped.
+ *
+ * If the contract changes (e.g. selection should reset on every sub-tab
+ * switch), update both this comment and the snapshot return shape together.
+ */
+function snapshotAutoCategorizedTab(autoCat) {
+    const transactionIdsBySelectedPeriod = {
+        ...autoCat.transactionIdsBySelectedPeriod,
+    };
+    const hasAnyLoadedRows = Object.values(transactionIdsBySelectedPeriod).some((ids) => ids.length > 0);
+    let normalisedFetchState = autoCat.fetchState;
+    if (normalisedFetchState === 'In-Progress') {
+        normalisedFetchState = hasAnyLoadedRows ? 'Completed' : 'Not-Started';
+    }
+    return {
+        error: autoCat.error,
+        fetchState: normalisedFetchState,
+        pageToken: autoCat.uiState.pageToken,
+        scrollPosition: autoCat.uiState.scrollPosition,
+        totalCount: { ...autoCat.uiState.totalCount },
+        transactionIdsBySelectedPeriod,
+    };
+}
 const expenseAutomationTransactionsView = createSlice({
     name: 'expenseAutomationTransactionsView',
     initialState,
@@ -260,6 +323,55 @@ const expenseAutomationTransactionsView = createSlice({
                 return { payload: { newSelectedTab } };
             },
         },
+        updateTransactionCategorizationCompletedSubTab: {
+            reducer(draft, action) {
+                const { newSubTab } = action.payload;
+                const previousSubTab = draft.selectedTransactionCategorizationCompletedSubTab;
+                if (previousSubTab === newSubTab) {
+                    return;
+                }
+                const autoCat = draft.transactionCategorizationView.autoCategorized;
+                // Snapshot the outgoing sub-tab so a future revisit can short-circuit
+                // the fetch epic (mirrors the parent-tab "don't refetch what's
+                // already cached" behaviour). Period-scoped data is preserved as-is
+                // because the snapshot itself is keyed only by sub-tab; the active
+                // tab's per-period maps remain the source of truth while live.
+                draft.autoCategorizedSubTabCache[previousSubTab] =
+                    snapshotAutoCategorizedTab(autoCat);
+                const cached = draft.autoCategorizedSubTabCache[newSubTab];
+                if (cached != null) {
+                    autoCat.uiState.pageToken = cached.pageToken;
+                    autoCat.uiState.totalCount = { ...cached.totalCount };
+                    autoCat.uiState.scrollPosition = cached.scrollPosition;
+                    autoCat.transactionIdsBySelectedPeriod = {
+                        ...cached.transactionIdsBySelectedPeriod,
+                    };
+                    autoCat.fetchState = cached.fetchState;
+                    autoCat.error = cached.error;
+                }
+                else {
+                    // Sub-tab has never been visited — clear the active slot so the
+                    // view-epic's `fetchState === 'Not-Started' || transactionIds.length
+                    // === 0` cache check falls through and triggers a fresh page-1
+                    // fetch for the new dataset. `scrollPosition` is reset to the top
+                    // so the incoming list isn't anchored to the outgoing sub-tab's
+                    // offset (different rows → previous offset is meaningless).
+                    autoCat.uiState.pageToken = null;
+                    autoCat.uiState.totalCount = {};
+                    autoCat.uiState.scrollPosition = {
+                        scrollTop: 0,
+                        scrollLeft: undefined,
+                    };
+                    autoCat.transactionIdsBySelectedPeriod = {};
+                    autoCat.fetchState = 'Not-Started';
+                    autoCat.error = undefined;
+                }
+                draft.selectedTransactionCategorizationCompletedSubTab = newSubTab;
+            },
+            prepare(newSubTab) {
+                return { payload: { newSubTab } };
+            },
+        },
         updateTransactionCategorization: {
             reducer(draft, action) {
                 const selectedTab = action.payload.selectedTab;
@@ -308,12 +420,9 @@ const expenseAutomationTransactionsView = createSlice({
                     const selectedCheckBoxTransactionIds = draft.transactionCategorizationView[selectedTab]
                         .selectedCheckBoxTransactionIds;
                     if (selectedTransaction != null &&
-                        checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                        selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                        selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                        shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                         draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
-                            ...draft.transactionCategorizationView[selectedTab]
-                                .selectedCheckBoxTransactionIds,
+                            ...selectedCheckBoxTransactionIds,
                             transactionId,
                         ];
                     }
@@ -396,9 +505,26 @@ const expenseAutomationTransactionsView = createSlice({
                 const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
                     .transactionReviewLocalDataById, transactionId.id, undefined);
                 if (transactionLocalData != null) {
+                    const newLocalData = setEntityRecommendationForLineIdInLocalData(draft.transactionCategorizationView[selectedTab], transaction, transactionLocalData.transactionReviewLocalData, entity, lineIds, uncategorizedAccounts, action.payload.recommendationWithCOTByLineId, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled);
+                    // Release the per-line fetch flag for every line this fetch
+                    // covered. Done in-place on the freshly returned local data
+                    // (the helper produces a new mutable object), before we write
+                    // it back to the draft.
+                    lineIds.forEach((lineId) => {
+                        const lineItem = newLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            newLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
                     draft.transactionCategorizationView[selectedTab].transactionReviewLocalDataById[transaction.id] = {
                         transactionId: transaction.id,
-                        transactionReviewLocalData: setEntityRecommendationForLineIdInLocalData(draft.transactionCategorizationView[selectedTab], transaction, transactionLocalData.transactionReviewLocalData, entity, lineIds, uncategorizedAccounts, action.payload.recommendationWithCOTByLineId, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled),
+                        transactionReviewLocalData: newLocalData,
                     };
                     // Mark transaction as dirty (autofill happened)
                     if (!draft.transactionCategorizationView[selectedTab].transactionIdsWithUnsavedData.includes(transaction.id)) {
@@ -411,6 +537,99 @@ const expenseAutomationTransactionsView = createSlice({
                 }
             },
         },
+        // Start arm of the line-update recommendations fetch. Flips covered
+        // lines to In-Progress AND removes the transaction from
+        // selectedCheckBoxTransactionIds — the row is unchecked + disabled
+        // until either the success arm (recheck if limit allows) or the
+        // failure arm releases the per-line flag.
+        markCategoryClassRecommendationsInProgressForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds } = action.payload;
+                const tab = draft.transactionCategorizationView[selectedTab];
+                const transactionLocalData = recordGet(tab.transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'In-Progress',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+                // Uncheck on fetch start: the row's existing category/class are
+                // stale after a payee change, so we drop the auto-selection until
+                // fresh recommendations land.
+                if (tab.selectedCheckBoxTransactionIds.includes(transactionId.id)) {
+                    tab.selectedCheckBoxTransactionIds =
+                        tab.selectedCheckBoxTransactionIds.filter((id) => id !== transactionId.id);
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds) {
+                return { payload: { selectedTab, transactionId, lineIds } };
+            },
+        },
+        // Completed arm. Used by the epic when the HTTP call succeeds but the
+        // server returned no per-line recommendations — we still need to
+        // release the In-Progress flag so the skeleton resolves. Successful
+        // responses with recommendations go through
+        // setEntityRecommendationForLineIdsForCategorization instead (which
+        // also flips the lines to Completed).
+        markCategoryClassRecommendationsCompletedForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds } = action.payload;
+                const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
+                    .transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Completed',
+                                    error: undefined,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds) {
+                return { payload: { selectedTab, transactionId, lineIds } };
+            },
+        },
+        // Failure arm. Flips covered lines to Error so the skeleton resolves
+        // and downstream UI can react to the failure. The transaction stays
+        // unchecked from the start-arm action.
+        markCategoryClassRecommendationsFailureForCategorization: {
+            reducer(draft, action) {
+                const { selectedTab, transactionId, lineIds, error } = action.payload;
+                const transactionLocalData = recordGet(draft.transactionCategorizationView[selectedTab]
+                    .transactionReviewLocalDataById, transactionId.id, undefined);
+                if (transactionLocalData != null) {
+                    lineIds.forEach((lineId) => {
+                        const lineItem = transactionLocalData.transactionReviewLocalData.lineItemById[lineId];
+                        if (lineItem != null) {
+                            transactionLocalData.transactionReviewLocalData.lineItemById[lineId] = {
+                                ...lineItem,
+                                categoryClassRecommendationsFetchState: {
+                                    fetchState: 'Error',
+                                    error,
+                                },
+                            };
+                        }
+                    });
+                }
+            },
+            prepare(selectedTab, transactionId, lineIds, error) {
+                return { payload: { selectedTab, transactionId, lineIds, error } };
+            },
+        },
         fetchTransactionCategorizationSuccess(draft, action) {
             const { selectedTab, refreshViewInBackground } = action.payload;
             if (draft.transactionCategorizationView[selectedTab].fetchState ===
@@ -506,9 +725,7 @@ const expenseAutomationTransactionsView = createSlice({
                     .selectedCheckBoxTransactionIds;
                 if (newTransactionLocalData.customer != null &&
                     newTransactionLocalData.customer.id != null &&
-                    checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                    selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                    selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                    shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                     draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
                         ...selectedCheckBoxTransactionIds,
                         transactionId,
@@ -582,9 +799,7 @@ const expenseAutomationTransactionsView = createSlice({
                     .selectedCheckBoxTransactionIds;
                 if (newTransactionLocalData.vendor != null &&
                     newTransactionLocalData.vendor.id != null &&
-                    checkIfAllLineItemsAreCategoryClassFilled(selectedTransaction, newTransactionLocalData, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled) === true && // check if all line items are filled
-                    selectedCheckBoxTransactionIds.length < MAX_SELECTION_LIMIT &&
-                    selectedCheckBoxTransactionIds.includes(transactionId) === false) {
+                    shouldAutoSelectAndAdd(selectedTransaction, newTransactionLocalData, selectedCheckBoxTransactionIds, uncategorizedAccounts, isUncategorizedExpenseCategoryEnabled, isAccountingClassesEnabled)) {
                     draft.transactionCategorizationView[selectedTab].selectedCheckBoxTransactionIds = [
                         ...selectedCheckBoxTransactionIds,
                         transactionId,
@@ -697,6 +912,10 @@ const expenseAutomationTransactionsView = createSlice({
             const { selectedTab, selectedPeriod, totalCount } = action.payload;
             draft.transactionCategorizationView[selectedTab].uiState.totalCount[toMonthYearPeriodId(selectedPeriod)] = totalCount;
         },
+        updateParentTotalCountForTab(draft, action) {
+            const { selectedTab, selectedPeriod, parentTotalCount } = action.payload;
+            draft.parentTotalCountByTab[selectedTab][toMonthYearPeriodId(selectedPeriod)] = parentTotalCount;
+        },
         updateSelectedCheckboxTransactionIds(draft, action) {
             const selectedTab = action.payload.selectedTab;
             const transactionIds = action.payload.transactionIds;
@@ -707,6 +926,16 @@ const expenseAutomationTransactionsView = createSlice({
             draft.transactionCategorizationView[selectedTab] = {
                 ...initialTransactionTabViewState,
             };
+            draft.parentTotalCountByTab[selectedTab] = {};
+            // The per-sub-tab snapshot cache lives at the slice root and is
+            // exclusively populated by the autoCategorized tab's sub-tab switching
+            // (see updateTransactionCategorizationCompletedSubTab). When that tab
+            // is reset, leaving stale snapshots behind would short-circuit the
+            // next sub-tab visit with phantom row IDs / page tokens that no longer
+            // correspond to anything in state — drop them in lockstep.
+            if (selectedTab === 'autoCategorized') {
+                draft.autoCategorizedSubTabCache = {};
+            }
         },
         clearExpenseAutomationTransactionsView(draft) {
             Object.assign(draft, initialState);
@@ -803,5 +1032,5 @@ const expenseAutomationTransactionsView = createSlice({
         },
     },
 });
-export const { fetchTransactionCategorization, updateTransactionCategorizationUIState, initializeTransactionCategorizationViewLocalData, saveTransactionCategorizationLocalData, fetchTransactionCategorizationFailure, saveTransactionCategorization, updateTransactionCategorization, updateCurrentSelectedTransactionCategorizationTab, updateTransactionCategorizationSaveStatus, markTransactionAsNotMiscategorized, updateStatusForTransactionNotMiscategorizedUpdateForCategorization, updateSelectedVendorForTransaction, updateSelectedCustomerForTransaction, setAllItemsToCategoryClassInLocalDataForCategorization, updateTotalCountForTransactionCategorization, fetchTransactionCategorizationSuccess, resetOtherTabsFetchState, fetchTransactionCategorizationView, updateSelectedCheckboxTransactionIds, clearExpenseAutomationTransactionsViewPerTabView, clearExpenseAutomationTransactionsView, setEntityRecommendationForLineIdsForCategorization, updateSelectedTransactionId, syncTransactionCategorizationFromDetailSave, backgroundRefetchReviewTab, updateTransactionCategorizationUploadReceiptState, uploadTransactionCategorizationReceiptSuccess, } = expenseAutomationTransactionsView.actions;
+export const { fetchTransactionCategorization, updateTransactionCategorizationUIState, initializeTransactionCategorizationViewLocalData, saveTransactionCategorizationLocalData, fetchTransactionCategorizationFailure, saveTransactionCategorization, updateTransactionCategorization, updateCurrentSelectedTransactionCategorizationTab, updateTransactionCategorizationCompletedSubTab, updateTransactionCategorizationSaveStatus, markTransactionAsNotMiscategorized, updateStatusForTransactionNotMiscategorizedUpdateForCategorization, updateSelectedVendorForTransaction, updateSelectedCustomerForTransaction, setAllItemsToCategoryClassInLocalDataForCategorization, updateTotalCountForTransactionCategorization, updateParentTotalCountForTab, fetchTransactionCategorizationSuccess, resetOtherTabsFetchState, fetchTransactionCategorizationView, updateSelectedCheckboxTransactionIds, clearExpenseAutomationTransactionsViewPerTabView, clearExpenseAutomationTransactionsView, setEntityRecommendationForLineIdsForCategorization, markCategoryClassRecommendationsInProgressForCategorization, markCategoryClassRecommendationsCompletedForCategorization, markCategoryClassRecommendationsFailureForCategorization, updateSelectedTransactionId, syncTransactionCategorizationFromDetailSave, backgroundRefetchReviewTab, updateTransactionCategorizationUploadReceiptState, uploadTransactionCategorizationReceiptSuccess, } = expenseAutomationTransactionsView.actions;
 export default expenseAutomationTransactionsView.reducer;

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

@@ -1,3 +1,4 @@
+import { createSelector } from '@reduxjs/toolkit';
 import omit from 'lodash/omit';
 import { reduceAllFetchState, reduceAnyFetchState, } from '../../../commonStateTypes/reduceFetchState';
 import { toMonthYearPeriodId } from '../../../commonStateTypes/timePeriod';
@@ -8,9 +9,32 @@ import { getAccountList, getNestedAccountListHierarchy, getUncategorizedAccounts
 import { getClassList, getNestedClassListHierarchy, } from '../../classList/classListSelector';
 import { getProjectList } from '../../projectList/projectListSelector';
 import { getAllSteps } from '../selectorTypes/expenseAutomationViewSelectorTypes';
+// Per-transaction "any line is fetching category/class recommendations?"
+// map for the active categorization tab. Memoized on the active tab's
+// transactionReviewLocalDataById reference, so steady state (no fetches
+// in flight) recomputes only when local data changes — and the row-table
+// can read a single map lookup per row instead of re-iterating the
+// row's lineItemById in the render path.
+export const getCategorizationInFlightRecommendationsByTransactionId = createSelector((state) => state.expenseAutomationTransactionsViewState
+    .selectedTransactionCategorizationTab, (state) => state.expenseAutomationTransactionsViewState
+    .transactionCategorizationView, (selectedTab, transactionCategorizationView) => {
+    const tab = transactionCategorizationView[selectedTab];
+    const result = {};
+    for (const [transactionId, data] of Object.entries(tab.transactionReviewLocalDataById)) {
+        const lineItems = Object.values(data.transactionReviewLocalData.lineItemById);
+        if (lineItems.some((lineItem) => lineItem.categoryClassRecommendationsFetchState?.fetchState ===
+            'In-Progress')) {
+            result[transactionId] = true;
+        }
+    }
+    return result;
+});
+// Page-level "any line on the active tab is in flight?" flag. Drives the
+// list-page Save disable.
+export const getCategorizationHasInFlightRecommendations = createSelector(getCategorizationInFlightRecommendationsByTransactionId, (inFlightByTransactionId) => Object.keys(inFlightByTransactionId).length > 0);
 export function getExpenseAutomationTransactionView(state) {
     const { accountState, classState, classListState, accountListState, expenseAutomationTransactionsViewState, expenseAutomationViewState, projectState, projectListState, transactionState, monthEndCloseChecksState, monthEndCloseChecksViewState, } = state;
-    const { selectedTransactionCategorizationTab } = expenseAutomationTransactionsViewState;
+    const { selectedTransactionCategorizationCompletedSubTab, selectedTransactionCategorizationTab, } = expenseAutomationTransactionsViewState;
     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');
@@ -63,10 +87,27 @@ export function getExpenseAutomationTransactionView(state) {
         .uiState.totalCount;
     const totalCountByAutoCat = expenseAutomationTransactionsViewState.transactionCategorizationView
         .autoCategorized.uiState.totalCount;
+    // Per-(sub-)tab counts powering pagination, in-list "showing X of Y", and
+    // any save/refresh round-trips. Sourced from `uiState.totalCount` which
+    // mirrors the response's `total_count` for whatever tab/sub-tab the user is
+    // viewing (e.g. only the Manual sub-tab rows for Completed → Manual).
     const totalCountByTab = {
         review: monthYearPeriodId != null ? totalCountByReview[monthYearPeriodId] : 0,
         autoCategorized: monthYearPeriodId != null ? totalCountByAutoCat[monthYearPeriodId] : 0,
     };
+    // Parent-tab badge counts. Sourced from `parent_tab_total_count` in the
+    // listing response and used exclusively by the navbar / tab strip badges.
+    // Independent of which Completed sub-tab is active so the badge stays
+    // stable across sub-tab switches.
+    const parentTotalCountByTab = expenseAutomationTransactionsViewState.parentTotalCountByTab;
+    const parentTabTotalCountByTab = {
+        review: monthYearPeriodId != null
+            ? (parentTotalCountByTab.review[monthYearPeriodId] ?? 0)
+            : 0,
+        autoCategorized: monthYearPeriodId != null
+            ? (parentTotalCountByTab.autoCategorized[monthYearPeriodId] ?? 0)
+            : 0,
+    };
     const fetchStateByTab = {
         review: {
             fetchState: expenseAutomationTransactionsViewState.transactionCategorizationView
@@ -86,6 +127,8 @@ export function getExpenseAutomationTransactionView(state) {
         : [];
     const transactionCompletionStatus = allSteps.find((step) => step.step === 'transaction_categorization')?.completionStatus;
     const completionStatus = transactionCompletionStatus ?? 'incomplete';
+    const inFlightCategoryClassRecommendationsByTransactionId = getCategorizationInFlightRecommendationsByTransactionId(state);
+    const hasInFlightCategoryClassRecommendations = getCategorizationHasInFlightRecommendations(state);
     return {
         version: 0,
         fetchState: fetchStatus.fetchState,
@@ -99,6 +142,8 @@ export function getExpenseAutomationTransactionView(state) {
         classList: allClasses,
         accountsHierarchyList,
         classHierarchyList,
+        hasInFlightCategoryClassRecommendations,
+        inFlightCategoryClassRecommendationsByTransactionId,
         isAccountingProjectsEnabled,
         projectList,
         transactionLocalData,
@@ -108,9 +153,11 @@ export function getExpenseAutomationTransactionView(state) {
         markAsNotMiscategorizedStatus,
         completionStatus,
         totalCountByTab,
+        parentTabTotalCountByTab,
         fetchStateByTransactionTabs: fetchStateByTab,
         uploadReceiptStatusById,
         selectedTransactionId,
         selectedTransactionLineId,
+        selectedTransactionCategorizationCompletedSubTab,
     };
 }

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

@@ -0,0 +1,17 @@
+import { stringToUnion } from '../../../commonStateTypes/stringToUnion';
+/**
+ * Sub-tabs that can appear under any "Completed" tab in the Expense Automation
+ * surface (Transaction Categorization Completed and Missing Receipts Completed
+ * both use this exact union). Forwarded verbatim to listing APIs as `sub_tab`
+ * / `match_type`. `'all'` preserves parent-tab semantics on the backend.
+ */
+const COMPLETED_SUB_TABS = ['all', 'ai_accountant', 'manual'];
+export const toCompletedSubTab = (v) => stringToUnion(v.trim().toLowerCase(), COMPLETED_SUB_TABS);
+/**
+ * "No sub-tab filter" sentinel — single source of truth for the default
+ * value of {@link CompletedSubTab}. Use this constant in initial slice
+ * state and at any call site that needs to fall back to the parent-tab
+ * listing semantics (review tab requests, manual-search overrides, etc.)
+ * so a future rename of the union doesn't require chasing literals.
+ */
+export const DEFAULT_COMPLETED_SUB_TAB = 'all';

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

@@ -39,8 +39,6 @@ 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 = [

package/lib/esm/view/recommendation/fetchEntityRecommendationsForLineUpdateEpic.js

@@ -0,0 +1,88 @@
+import { concat, of, timer } from 'rxjs';
+import { catchError, debounce, filter, groupBy, mergeMap, switchMap, } from 'rxjs/operators';
+import { getIsAccountingClassesEnabled } from '../../entity/tenant/tenantSelector';
+import { getTransactionWithCOT, getTransactionWithCOTFromRecommendations, } from '../../entity/transaction/transactionHelper';
+import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
+import { getUncategorizedAccounts } from '../accountList/accountListSelector';
+import { markCategoryClassRecommendationsCompletedForCategorization, markCategoryClassRecommendationsFailureForCategorization, markCategoryClassRecommendationsInProgressForCategorization, setEntityRecommendationForLineIdsForCategorization, } from '../expenseAutomationView/reducers/transactionsViewReducer';
+import { markCategoryClassRecommendationsCompletedForTransactionDetail, markCategoryClassRecommendationsFailureForTransactionDetail, markCategoryClassRecommendationsInProgressForTransactionDetail, setEntityRecommendationForLineIdsForTransactionDetail, } from '../transactionDetail/transactionDetailReducer';
+import { buildRecommendationUrl, getRecommendationByLineIdWithCOTFromRecommendationPayloadWithCOT, } from './recommendationHelper';
+import { fetchEntityRecommendationsForLineUpdate } from './recommendationReducer';
+// Close the per-target groupBy bucket after this much idle time so inactive
+// groups don't accumulate forever (each group holds a Subject + a chain of
+// active subscribers; without a duration selector groupBy retains them for
+// the lifetime of the source observable, which is the lifetime of the app).
+// Picked at 60s to leave a generous window for re-fetches on the same
+// payee/transaction/line target while still bounding memory.
+const GROUP_INACTIVITY_TIMEOUT_MS = 60000;
+// Build the groupBy key. Same flow + same transaction + same line set
+// share a target so switchMap can cancel an in-flight prior fetch. Use
+// NUL (\u0000) as separator because it can never appear in transaction
+// or line ids (vs the `|` used in an earlier WIP which collides with
+// pipe-delimited synthetic ids).
+const SEPARATOR = '\u0000';
+const toGroupKey = (flowType, transactionId, lineIds) => `${flowType}${SEPARATOR}${transactionId}${SEPARATOR}${[...lineIds]
+    .sort((a, b) => a.localeCompare(b))
+    .join(SEPARATOR)}`;
+// Targeted recommendations fetch that drives the per-line skeleton, the
+// list-page row-checkbox uncheck/recheck, and the page-level Save
+// disable.
+//
+// Concurrency model:
+//   - groupBy by (flowType, transactionId, sorted lineIds) so distinct
+//     targets run in parallel.
+//   - inside each group, switchMap so a re-fetch on the SAME target
+//     cancels any prior in-flight request for that target.
+//   - groupBy duration selector closes idle groups to bound memory.
+export const fetchEntityRecommendationsForLineUpdateEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchEntityRecommendationsForLineUpdate.match), groupBy((action) => toGroupKey(action.payload.flowType, action.payload.transactionDetails.transactionId.id, action.payload.transactionDetails.lineIds), undefined, (group$) => group$.pipe(debounce(() => timer(GROUP_INACTIVITY_TIMEOUT_MS)))), mergeMap((group$) => group$.pipe(switchMap((action) => {
+    const { entity, amount, transactionDetails, flowType, selectedTab, isFetchCOT, isUncategorizedExpenseCategoryEnabled, } = action.payload;
+    const { transactionId, transaction, lineIds } = transactionDetails;
+    // Synchronously emit the start arm so the per-line skeleton +
+    // row uncheck happen before the HTTP request begins.
+    const startAction = flowType === 'categorization' && selectedTab != null
+        ? markCategoryClassRecommendationsInProgressForCategorization(selectedTab, transactionId, lineIds)
+        : markCategoryClassRecommendationsInProgressForTransactionDetail(transactionId, lineIds);
+    // TEMP-LOG[JE-skeleton]: epic dispatch payload — confirms the
+    // targeted-fetch fired with the expected flowType / txnId / lineIds.
+    // eslint-disable-next-line no-console
+    console.log('[JE-skeleton][epic] dispatch start arm', {
+        flowType,
+        selectedTab,
+        transactionId,
+        lineIds,
+        transactionType: transaction?.type,
+    });
+    const url = buildRecommendationUrl(zeniAPI.apiEndPoints.accountMicroServiceBaseUrl, entity, amount, transactionDetails, isFetchCOT === true);
+    const httpStream$ = zeniAPI
+        .getJSON(url)
+        .pipe(mergeMap((response) => {
+        if (!isSuccessResponse(response) || response.data == null) {
+            return of(flowType === 'categorization' && selectedTab != null
+                ? markCategoryClassRecommendationsFailureForCategorization(selectedTab, transactionId, lineIds, response.status)
+                : markCategoryClassRecommendationsFailureForTransactionDetail(transactionId, lineIds, response.status));
+        }
+        const recommendationWithCOTByLineId = getRecommendationByLineIdWithCOTFromRecommendationPayloadWithCOT(response.data.recommendations, lineIds);
+        // HTTP 200 with no per-line recommendations: NOT an error.
+        // Flip lines to Completed so the skeleton resolves and
+        // downstream UI can treat this as "we tried, nothing to
+        // apply".
+        if (recommendationWithCOTByLineId == null) {
+            return of(flowType === 'categorization' && selectedTab != null
+                ? markCategoryClassRecommendationsCompletedForCategorization(selectedTab, transactionId, lineIds)
+                : markCategoryClassRecommendationsCompletedForTransactionDetail(transactionId, lineIds));
+        }
+        const transactionWithCOT = isFetchCOT === true
+            ? getTransactionWithCOTFromRecommendations(transaction, recommendationWithCOTByLineId)
+            : getTransactionWithCOT(transaction);
+        const uncategorizedIncomeExpense = getUncategorizedAccounts(state$.value.accountState, state$.value.accountListState, 'accountList');
+        if (flowType === 'categorization' && selectedTab != null) {
+            return of(setEntityRecommendationForLineIdsForCategorization(selectedTab, transactionId, transactionWithCOT, lineIds, entity, amount, recommendationWithCOTByLineId, uncategorizedIncomeExpense, isUncategorizedExpenseCategoryEnabled, getIsAccountingClassesEnabled(state$.value)));
+        }
+        return of(setEntityRecommendationForLineIdsForTransactionDetail(transactionId, transactionWithCOT, lineIds, entity, amount, recommendationWithCOTByLineId, uncategorizedIncomeExpense));
+    }), catchError((error) => of(flowType === 'categorization' && selectedTab != null
+        ? markCategoryClassRecommendationsFailureForCategorization(selectedTab, transactionId, lineIds, createZeniAPIStatus('Unexpected Error', 'fetchEntityRecommendationsForLineUpdate failed: ' +
+            JSON.stringify(error)))
+        : markCategoryClassRecommendationsFailureForTransactionDetail(transactionId, lineIds, createZeniAPIStatus('Unexpected Error', 'fetchEntityRecommendationsForLineUpdate failed: ' +
+            JSON.stringify(error))))));
+    return concat(of(startAction), httpStream$);
+}))));