@zeniai/client-epic-state 5.2.35-beta0MM → 5.2.35-beta10MM

package/lib/view/expenseAutomationView/selectors/actualMatchingViewSelector.js

@@ -3,6 +3,8 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.getSelectedMonthYearForCurrentTenant = getSelectedMonthYearForCurrentTenant;
+exports.getTenantDisplayCurrency = getTenantDisplayCurrency;
 exports.parseActualMatchingMatchId = parseActualMatchingMatchId;
 exports.isAutoReversedAccrual = isAutoReversedAccrual;
 exports.isManuallyReversedAccrual = isManuallyReversedAccrual;
@@ -11,7 +13,9 @@ exports.isReversedMatchKind = isReversedMatchKind;
 exports.getClearedMatchedAmount = getClearedMatchedAmount;
 exports.getActualMatchingAmount = getActualMatchingAmount;
 exports.getActualMatchingReversalDate = getActualMatchingReversalDate;
+exports.buildActualMatchingKpiSummary = buildActualMatchingKpiSummary;
 exports.getExpenseAutomationActualMatchingMatchView = getExpenseAutomationActualMatchingMatchView;
+exports.getCloseMatchAfterUndo = getCloseMatchAfterUndo;
 exports.getExpenseAutomationActualMatchingView = getExpenseAutomationActualMatchingView;
 const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const timePeriod_1 = require("../../../commonStateTypes/timePeriod");
@@ -19,6 +23,27 @@ const actualMatchingSelector_1 = require("../../../entity/actualMatching/actualM
 const jeScheduleHelper_1 = require("../../../entity/jeSchedules/jeScheduleHelper");
 const jeSchedulesSelector_1 = require("../../../entity/jeSchedules/jeSchedulesSelector");
 const tenantSelector_1 = require("../../../entity/tenant/tenantSelector");
+const zeniDayJS_1 = require("../../../zeniDayJS");
+const actualMatchingViewState_1 = require("../types/actualMatchingViewState");
+function getSelectedMonthYearForCurrentTenant(state) {
+    const tenantId = (0, tenantSelector_1.getCurrentTenant)(state)?.tenantId;
+    if (tenantId == null) {
+        return undefined;
+    }
+    return state.expenseAutomationViewState.selectedPeriodByTenantId[tenantId];
+}
+function getTenantDisplayCurrency(state) {
+    const locale = (0, tenantSelector_1.getCurrentTenant)(state)?.company?.companyLocaleInfo;
+    if (locale?.currencyCode == null || locale.currencyCode === '') {
+        return undefined;
+    }
+    return {
+        currencyCode: locale.currencyCode,
+        currencySymbol: locale.currencySymbol != null && locale.currencySymbol !== ''
+            ? locale.currencySymbol
+            : locale.currencyCode,
+    };
+}
 function toMatchModalAccrual(member) {
     if ('jeOneTimeAccrualKey' in member && member.jeOneTimeAccrualKey != null) {
         return member;
@@ -40,9 +65,9 @@ function uniqueMatchModalAccruals(pinned, searched) {
 }
 function uniqueTransactionSearchResults(pinned, searched) {
     const byKey = new Map();
-    pinned.forEach((row) => byKey.set(`${row.transactionId}:${row.lineId}`, row));
+    pinned.forEach((row) => byKey.set((0, actualMatchingViewState_1.actualMatchingTransactionLineKey)(row.transactionType, row.transactionIntegrationId, row.lineId), row));
     searched.forEach((row) => {
-        const key = `${row.transactionId}:${row.lineId}`;
+        const key = (0, actualMatchingViewState_1.actualMatchingTransactionLineKey)(row.transactionType, row.transactionIntegrationId, row.lineId);
         if (!byKey.has(key)) {
             byKey.set(key, row);
         }
@@ -87,11 +112,18 @@ function getClearedMatchedAmount(accrual) {
 function getActualMatchingAmount(row) {
     return row.actualAmount?.amount ?? row.estimatedAmount.amount;
 }
-function getActualMatchingReversalDate(accrual) {
-    if (isPendingReviewAccrual(accrual)) {
-        return accrual.matchSuggestion.matchedTransactionDate;
+function parseMatchTransactionDate(transactionDate) {
+    if (transactionDate == null || transactionDate === '') {
+        return undefined;
     }
-    return accrual.cleared?.matchedTransactionDate;
+    const parsed = (0, zeniDayJS_1.date)(transactionDate);
+    return Number.isFinite(parsed.valueOf()) ? parsed : undefined;
+}
+function getActualMatchingReversalDate(accrual, matchTransactionDate) {
+    const matchedDate = isPendingReviewAccrual(accrual)
+        ? accrual.matchSuggestion.matchedTransactionDate
+        : accrual.cleared?.matchedTransactionDate;
+    return matchedDate ?? parseMatchTransactionDate(matchTransactionDate);
 }
 function collectGroupedMembers(members) {
     if (members.length <= 1) {
@@ -105,12 +137,32 @@ function collectGroupedMembers(members) {
         serviceMonth: member.serviceMonth,
     }));
 }
+function collectLeftoverMembers(leftovers) {
+    if (leftovers == null || leftovers.length === 0) {
+        return undefined;
+    }
+    return leftovers.map((member) => ({
+        accrualId: member.accrualId,
+        estimatedAmount: member.estimatedAmount,
+        jeDebitAccountName: member.jeDebitAccountName,
+        memo: member.memo,
+        serviceMonth: member.serviceMonth,
+    }));
+}
 function toActualMatchingRow(match) {
     const firstMember = match.members[0];
     if (firstMember == null) {
         throw new Error('Actual matching row requires at least one member');
     }
     const first = toMatchModalAccrual(firstMember);
+    const leftoverMembers = match.leftovers ?? [];
+    const fromCleared = firstMember.cleared?.intendedAccrualIds;
+    const intendedAccrualIds = fromCleared != null && fromCleared.length > 0
+        ? fromCleared
+        : [
+            ...match.members.map((member) => member.accrualId),
+            ...leftoverMembers.map((leftover) => leftover.accrualId),
+        ];
     return {
         ...first,
         matchId: match.matchId,
@@ -123,8 +175,12 @@ function toActualMatchingRow(match) {
         transactionDate: match.transactionDate,
         groupedAccrualIds: match.members.map((member) => member.accrualId),
         groupedMembers: collectGroupedMembers(match.members),
-        reversalDate: getActualMatchingReversalDate(first),
-        vendorName: match.vendorName !== '' ? match.vendorName : first.vendorName,
+        intendedAccrualIds,
+        leftovers: collectLeftoverMembers(match.leftovers),
+        reversalDate: getActualMatchingReversalDate(first, match.transactionDate),
+        vendorName: match.vendorName != null && match.vendorName !== ''
+            ? match.vendorName
+            : first.vendorName,
         estimatedAmount: match.accruedAmount,
     };
 }
@@ -133,10 +189,10 @@ function matchesSearch(row, searchString) {
     if (trimmed.length === 0) {
         return true;
     }
-    if (row.vendorName.toLowerCase().includes(trimmed)) {
+    if ((row.vendorName ?? '').toLowerCase().includes(trimmed)) {
         return true;
     }
-    if (row.memo.toLowerCase().includes(trimmed)) {
+    if ((row.memo ?? '').toLowerCase().includes(trimmed)) {
         return true;
     }
     return (row.groupedMembers ?? []).some((member) => (member.memo ?? '').toLowerCase().includes(trimmed));
@@ -144,9 +200,14 @@ function matchesSearch(row, searchString) {
 function getActualMatchingSortValue(row, sortKey) {
     switch (sortKey) {
         case 'vendor':
-            return row.vendorName.toLowerCase();
-        case 'date':
-            return row.reversalDate?.valueOf() ?? row.transactionDate;
+            return (row.vendorName ?? '').toLowerCase();
+        case 'date': {
+            const millis = row.reversalDate?.valueOf() ??
+                (row.transactionDate != null && row.transactionDate !== ''
+                    ? (0, zeniDayJS_1.date)(row.transactionDate).valueOf()
+                    : 0);
+            return Number.isFinite(millis) ? millis : 0;
+        }
         case 'amount':
             return getActualMatchingAmount(row);
         case 'category':
@@ -179,17 +240,103 @@ function sortActualMatchingRows(rows, uiState) {
     const lodashOrder = uiState.sortOrder === 'ascending' ? 'asc' : 'desc';
     return (0, orderBy_1.default)(rows, [(row) => getActualMatchingSortValue(row, uiState.sortKey)], [lodashOrder]);
 }
+const ESTIMATED_MINUTES_PER_PENDING_MATCH = 4;
 function emptyKpiSummary() {
     return {
-        autoReversed: { count: 0, amount: 0 },
-        pendingReview: { count: 0, amount: 0 },
-        totalThisClose: { count: 0, amount: 0 },
-        ai: { count: 0 },
-        manual: { count: 0 },
+        actualsReceived: { count: 0, expectedCount: 0, vendorsPending: 0 },
+        autoReversed: { count: 0, percent: 0, clearedAmount: 0 },
+        pendingReview: { count: 0, amount: 0, estimatedMinutesToClear: 0 },
+        variance: { percent: 0, averagePercentPerMatch: 0, netAmount: 0 },
     };
 }
-function sumRowAmounts(rows) {
-    return rows.reduce((sum, row) => sum + getActualMatchingAmount(row), 0);
+function sumRowAmounts(rows, displayCurrencyCode) {
+    return rows.reduce((sum, row) => {
+        if (displayCurrencyCode != null &&
+            row.accruedAmount.currencyCode !== displayCurrencyCode) {
+            return sum;
+        }
+        return sum + getActualMatchingAmount(row);
+    }, 0);
+}
+function uniqueVendorCount(rows) {
+    const ids = new Set();
+    rows.forEach((row) => {
+        if (row.vendorId != null && row.vendorId !== '') {
+            ids.add(row.vendorId);
+            return;
+        }
+        if (row.vendorName != null && row.vendorName !== '') {
+            ids.add(row.vendorName);
+        }
+    });
+    return ids.size;
+}
+function rowVariancePercent(row) {
+    const accrued = row.accruedAmount?.amount ?? row.estimatedAmount.amount;
+    const actual = row.actualAmount?.amount;
+    if (actual == null || accrued === 0) {
+        return undefined;
+    }
+    return ((actual - accrued) / Math.abs(accrued)) * 100;
+}
+function buildActualMatchingKpiSummary(rows, displayCurrencyCode) {
+    if (rows.length === 0) {
+        return emptyKpiSummary();
+    }
+    const autoReversed = rows.filter((row) => row.kind === 'auto_reversed');
+    const pendingReview = rows.filter((row) => row.kind === 'pending_review');
+    const receivedCount = rows.length;
+    const rowsWithActual = rows.filter((row) => {
+        if (row.actualAmount?.amount == null) {
+            return false;
+        }
+        if (displayCurrencyCode == null) {
+            return true;
+        }
+        const rowCurrency = row.accruedAmount?.currencyCode ?? row.estimatedAmount.currencyCode;
+        return rowCurrency === displayCurrencyCode;
+    });
+    const accruedTotal = rowsWithActual.reduce((sum, row) => sum + (row.accruedAmount?.amount ?? row.estimatedAmount.amount), 0);
+    const actualTotal = rowsWithActual.reduce((sum, row) => sum + (row.actualAmount?.amount ?? 0), 0);
+    const variancePercents = rows
+        .filter((row) => {
+        if (displayCurrencyCode == null) {
+            return true;
+        }
+        const rowCurrency = row.accruedAmount?.currencyCode ?? row.estimatedAmount.currencyCode;
+        return rowCurrency === displayCurrencyCode;
+    })
+        .map(rowVariancePercent)
+        .filter((percent) => percent != null);
+    return {
+        actualsReceived: {
+            count: receivedCount,
+            // List API does not return still-expected accruals; hide "of N expected"
+            // in the strip until expectedCount is greater than received.
+            expectedCount: receivedCount,
+            vendorsPending: uniqueVendorCount(pendingReview),
+        },
+        autoReversed: {
+            count: autoReversed.length,
+            percent: Math.round((autoReversed.length / receivedCount) * 100),
+            clearedAmount: sumRowAmounts(autoReversed, displayCurrencyCode),
+        },
+        pendingReview: {
+            count: pendingReview.length,
+            amount: sumRowAmounts(pendingReview, displayCurrencyCode),
+            estimatedMinutesToClear: pendingReview.length * ESTIMATED_MINUTES_PER_PENDING_MATCH,
+        },
+        variance: {
+            percent: accruedTotal === 0
+                ? 0
+                : ((actualTotal - accruedTotal) / Math.abs(accruedTotal)) * 100,
+            averagePercentPerMatch: variancePercents.length === 0
+                ? 0
+                : variancePercents.reduce((sum, percent) => sum + percent, 0) /
+                    variancePercents.length,
+            netAmount: actualTotal - accruedTotal,
+        },
+    };
 }
 function getExpenseAutomationActualMatchingMatchView(state, matchId) {
     const view = state.expenseAutomationActualMatchingViewState;
@@ -197,74 +344,76 @@ function getExpenseAutomationActualMatchingMatchView(state, matchId) {
         match: (0, actualMatchingSelector_1.getActualMatchingMatchById)(state.actualMatchingState, matchId),
         detailFetchState: view.detailFetchStateByMatchId[matchId] ?? NOT_STARTED,
         refreshStatus: view.detailRefreshStatusByMatchId[matchId] ?? NOT_STARTED,
-        undoReversalStatus: view.undoReversalStatus ?? NOT_STARTED,
+        undoReversalStatus: view.undoReversalStatusByMatchId[matchId] ?? NOT_STARTED,
+        lastMatchResults: view.lastMatchResultsByMatchId?.[matchId],
+        lastUndoResults: view.lastUndoResultsByMatchId?.[matchId],
     };
 }
+function getCloseMatchAfterUndo(state) {
+    return state.expenseAutomationActualMatchingViewState.closeMatchAfterUndo;
+}
 function getExpenseAutomationActualMatchingView(state) {
-    const { expenseAutomationActualMatchingViewState, expenseAutomationViewState } = state;
-    const { matchIdsByPeriod, fetchState, error, refreshStatus, uiState, matchModal, undoReversalStatus, } = expenseAutomationActualMatchingViewState;
-    const currentTenant = (0, tenantSelector_1.getCurrentTenant)(state);
-    const selectedPeriod = expenseAutomationViewState.selectedPeriodByTenantId[currentTenant?.tenantId ?? ''];
+    const { expenseAutomationActualMatchingViewState } = state;
+    const { matchIdsByPeriod, fetchState, error, refreshStatus, uiState, matchModal, } = expenseAutomationActualMatchingViewState;
+    const selectedPeriod = getSelectedMonthYearForCurrentTenant(state);
     const monthYearPeriodId = selectedPeriod != null ? (0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod) : undefined;
     const matchIds = monthYearPeriodId != null ? matchIdsByPeriod[monthYearPeriodId] : undefined;
-    const rows = (matchIds ?? [])
+    const allRows = (matchIds ?? [])
         .map((matchId) => (0, actualMatchingSelector_1.getActualMatchingMatchById)(state.actualMatchingState, matchId))
         .filter((match) => match != null)
         .filter((match) => match.members.length > 0)
-        .map(toActualMatchingRow)
-        .filter((row) => matchesSearch(row, uiState.searchString));
+        .map(toActualMatchingRow);
+    const rows = allRows.filter((row) => matchesSearch(row, uiState.searchString));
     const reversed = sortActualMatchingRows(rows.filter((row) => isReversedMatchKind(row.kind)), uiState);
     const pendingReview = sortActualMatchingRows(rows.filter((row) => row.kind === 'pending_review'), uiState);
-    const autoReversedForKpi = reversed.filter((row) => row.kind === 'auto_reversed');
-    const listedRows = [...reversed, ...pendingReview];
-    const kpiSummary = listedRows.length === 0
-        ? emptyKpiSummary()
-        : {
-            autoReversed: {
-                count: autoReversedForKpi.length,
-                amount: sumRowAmounts(autoReversedForKpi),
-            },
-            pendingReview: {
-                count: pendingReview.length,
-                amount: sumRowAmounts(pendingReview),
-            },
-            totalThisClose: {
-                count: listedRows.length,
-                amount: sumRowAmounts(listedRows),
-            },
-            ai: {
-                count: listedRows.filter((row) => row.origin === 'agent').length,
-            },
-            manual: {
-                count: listedRows.filter((row) => row.origin === 'human').length,
-            },
-        };
+    const kpiSummary = buildActualMatchingKpiSummary(allRows, getTenantDisplayCurrency(state)?.currencyCode);
     const searchedAccruals = matchModal.accrualSearch.results
         .map((key) => (0, jeSchedulesSelector_1.getJEOneTimeAccrualByKey)(key, state.jeSchedulesState))
         .filter((accrual) => accrual != null);
     const openedMatch = matchModal.openedFromMatchId != null
         ? (0, actualMatchingSelector_1.getActualMatchingMatchById)(state.actualMatchingState, matchModal.openedFromMatchId)
         : undefined;
-    const pinnedAccruals = (openedMatch?.members ?? []).map(toMatchModalAccrual);
-    const firstSuggestion = openedMatch?.members[0]?.matchSuggestion;
+    const pinnedAccruals = [
+        ...(openedMatch?.members ?? []),
+        ...(openedMatch?.leftovers ?? []),
+    ].map(toMatchModalAccrual);
+    const firstMember = openedMatch?.members[0];
+    const cleared = firstMember?.cleared;
+    const suggestion = firstMember?.matchSuggestion;
+    const stamp = cleared ?? suggestion;
+    const consumedLineIds = cleared?.consumedLineIds;
     const prefill = openedMatch == null
         ? undefined
         : {
-            selectedAccrualIds: openedMatch.members.map((member) => member.accrualId),
+            selectedAccrualIds: [
+                ...openedMatch.members.map((member) => member.accrualId),
+                ...(openedMatch.leftovers ?? []).map((leftover) => leftover.accrualId),
+            ],
             actualAmount: openedMatch.actualAmount.amount,
-            matchedLineId: firstSuggestion?.matchedLineId,
-            matchedTransactionId: firstSuggestion?.matchedTransactionId,
+            matchedTransactionId: stamp?.matchedTransactionId,
+            matchedLineId: cleared == null ? suggestion?.matchedLineId : undefined,
+            ...(consumedLineIds != null && consumedLineIds.length > 0
+                ? { consumedLineIds }
+                : {}),
         };
+    // `fetchState` is a flat slice field that survives a period switch. Until this
+    // month's ids land, leftover Completed/Error is the previous month. Report
+    // Not-Started so chrome matches Review's "cache slot missing" skeleton, not
+    // empty-complete or a stale error. In-Progress is this month's fetch.
+    const fetchStatus = matchIds == null &&
+        fetchState !== 'In-Progress' &&
+        fetchState !== 'Not-Started'
+        ? { fetchState: 'Not-Started', error: undefined }
+        : { fetchState, error };
     return {
-        fetchState,
-        error,
+        fetchState: fetchStatus.fetchState,
+        error: fetchStatus.error,
         reversed,
         pendingReview,
         kpiSummary,
         uiState,
         refreshStatus,
         hasLoadedForSelectedPeriod: matchIds != null,
-        undoReversalStatus,
         matchModal: {
             isOpen: matchModal.isOpen,
             openedFromMatchId: matchModal.openedFromMatchId,

package/lib/view/expenseAutomationView/selectors/jeSchedulesViewSelector.js

@@ -381,6 +381,7 @@ function getExpenseAutomationJESchedulesView(state) {
     // reports undefined rather than 0, so the UI can hide the badge instead of asserting "none".
     const scheduleCountsByTab = {};
     jeSchedulesViewState_1.ALL_JE_PAGE_TABS.forEach((pageTab) => {
+        // AM's badge is `actualMatching.kpiSummary`, not schedule row keys.
         if (pageTab === 'actual_matching') {
             return;
         }

package/lib/view/expenseAutomationView/types/actualMatchingViewState.d.ts

@@ -51,7 +51,7 @@ export interface MatchAndReverseResult {
 }
 export interface MatchAndReverseAccrualsParams {
     accrualIds: ID[];
-    lineId: string;
+    lineIds: ID[];
     transactionId: ID;
     transactionIntegrationId: string;
     transactionSyncToken: string;
@@ -66,6 +66,7 @@ export interface UndoReversalResult {
 }
 export interface UndoReversalAccrualsParams {
     accrualIds: ID[];
+    matchId: ActualMatchingMatchId;
 }
 export interface ActualMatchingTransactionSearchState extends FetchStateAndError {
     isLoadingMore: boolean;
@@ -82,18 +83,23 @@ export interface ActualMatchingAccrualSearchState extends FetchStateAndError {
 export interface ActualMatchingMatchModalState {
     accrualSearch: ActualMatchingAccrualSearchState;
     confirmStatus: FetchStateAndError;
+    didPinPrefillTransactions: boolean;
     isOpen: boolean;
     pinnedTransactionResults: ActualMatchingTransactionSearchResult[];
     transactionSearch: ActualMatchingTransactionSearchState;
     lastBatchResults?: MatchAndReverseResult[];
     openedFromMatchId?: ActualMatchingMatchId;
 }
+export declare function actualMatchingTransactionLineKey(transactionType: string, transactionIntegrationId: string, lineId: string): string;
 export interface ActualMatchingViewState extends FetchedState {
+    closeMatchAfterUndo: boolean;
     detailFetchStateByMatchId: Record<ActualMatchingMatchId, FetchStateAndError>;
     detailRefreshStatusByMatchId: Record<ActualMatchingMatchId, FetchStateAndError>;
+    lastMatchResultsByMatchId: Record<ActualMatchingMatchId, MatchAndReverseResult[]>;
+    lastUndoResultsByMatchId: Record<ActualMatchingMatchId, UndoReversalResult[]>;
     matchIdsByPeriod: Record<MonthYearPeriodId, ActualMatchingMatchId[]>;
     matchModal: ActualMatchingMatchModalState;
     refreshStatus: FetchStateAndError;
     uiState: ActualMatchingViewUIState;
-    undoReversalStatus: FetchStateAndError;
+    undoReversalStatusByMatchId: Record<ActualMatchingMatchId, FetchStateAndError>;
 }

package/lib/view/expenseAutomationView/types/actualMatchingViewState.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.toUndoReversalResultStatus = exports.toMatchAndReverseResultStatus = exports.MATCH_SEARCH_DEBOUNCE_MS = exports.MATCH_ACCRUAL_SEARCH_LIMIT = exports.MATCH_TRANSACTION_SEARCH_PAGE_SIZE = exports.toActualMatchingSortKey = void 0;
+exports.actualMatchingTransactionLineKey = actualMatchingTransactionLineKey;
 const stringToUnion_1 = require("../../../commonStateTypes/stringToUnion");
 const ACTUAL_MATCHING_SORT_KEYS = [
     'vendor',
@@ -36,3 +37,6 @@ const UNDO_REVERSAL_RESULT_STATUSES = [
 ];
 const toUndoReversalResultStatus = (v) => (0, stringToUnion_1.stringToUnion)(v, UNDO_REVERSAL_RESULT_STATUSES);
 exports.toUndoReversalResultStatus = toUndoReversalResultStatus;
+function actualMatchingTransactionLineKey(transactionType, transactionIntegrationId, lineId) {
+    return `${transactionType}:${transactionIntegrationId}:${lineId}`;
+}

package/lib/view/expenseAutomationView/types/jeSchedulesViewState.js

@@ -20,6 +20,9 @@ const JE_SCHEDULE_SORT_KEYS = [
 ];
 const toJEScheduleSortKey = (v) => (0, stringToUnion_1.stringToUnion)(v, JE_SCHEDULE_SORT_KEYS);
 exports.toJEScheduleSortKey = toJEScheduleSortKey;
+// `actual_matching` is chrome only: the JE tab bar includes it, but AM data is
+// `expenseAutomationActualMatchingViewState`, not the schedules period-tab
+// cache below. Walks of ALL_JE_PAGE_TABS that read schedule keys must skip it.
 const JE_PAGE_TABS = [
     'schedules',
     'actual_matching',

package/lib/view/financeStatement/financeStatementReducer.js

@@ -37,9 +37,18 @@ const financeStatement = (0, toolkit_1.createSlice)({
             },
         },
         updateFinanceStatementTimeframe(draft, action) {
+            // Unrelated UI re-dispatches the *current* timeframe as a side effect (the
+            // reports page hangs its table scroll reset off that callback); dropping the
+            // anchor there would silently reset the user's period to the latest one.
+            if (draft.timeframe === action.payload) {
+                return;
+            }
             draft.timeframe = action.payload;
+            // A month anchor is meaningless once the timeframe becomes quarter/year, so
+            // a real change drops it and returns the width to the default — 12 months
+            // must not become 12 quarters. Order is the user's, so it survives.
             draft.selectedCOABalancesRange = {
-                numberOfPeriods: draft.selectedCOABalancesRange.numberOfPeriods,
+                numberOfPeriods: exports.initialFinanceStatementState.selectedCOABalancesRange.numberOfPeriods,
                 orderBy: draft.selectedCOABalancesRange.orderBy,
             };
         },
@@ -81,8 +90,7 @@ const financeStatement = (0, toolkit_1.createSlice)({
             draft.selectedReportId = action.payload;
         },
         updateFinanceStatementAdditionalBalancesSelection(draft, action) {
-            const { firstMonthOfFY, additionalBalances: additionalBalancesPayload, coaBalances, maxNumOfPeriodsToHighlight, } = action.payload;
-            const safeCoaBalances = coaBalances != null ? coaBalances : [];
+            const { additionalBalances: additionalBalancesPayload, maxNumOfPeriodsToHighlight, } = action.payload;
             const additionalBalances = additionalBalancesPayload ?? [];
             let tempAdditionalBalances = [...additionalBalances];
             if (additionalBalances.includes('this_period_vs_last_period') ||
@@ -98,30 +106,12 @@ const financeStatement = (0, toolkit_1.createSlice)({
             draft.maxNumOfPeriodsToHighlight = maxNumOfPeriodsToHighlight;
             draft.isAdditionalBalancesShown =
                 additionalBalances.length != 0 ? true : false;
-            const { timeframe, selectedCOABalancesRange } = draft;
-            if (safeCoaBalances.length > 0) {
-                const thisPeriod = (0, thisPeriodHelpers_1.extractThisPeriod)(action.payload.firstMonthOfFY, timeframe, selectedCOABalancesRange, safeCoaBalances);
-                if (thisPeriod != null) {
-                    const selectedCoaBalancesRangeWithThisPeriod = {
-                        ...selectedCOABalancesRange,
-                        thisPeriod,
-                    };
-                    const selectionRanges = (0, getSelectedAndHighlightedRanges_1.getSelectedAndHighlightedRangesForThisPeriod)({
-                        firstMonthOfFY,
-                        thisPeriod: thisPeriod,
-                        coaBalances: safeCoaBalances,
-                        timeframe,
-                        maxNumOfPeriodsToHighlight: maxNumOfPeriodsToHighlight,
-                        currentSelection: {
-                            selectedCOABalancesRange: selectedCoaBalancesRangeWithThisPeriod,
-                        },
-                        orderBy: 'ascending_date',
-                        maxNumOfPeriodsToSelect: maxNumOfPeriodsToHighlight,
-                    });
-                    draft.selectedCOABalancesRange =
-                        selectionRanges.selectedCOABalancesRange;
-                }
-            }
+            // Column metadata only — must not touch selectedCOABalancesRange. The
+            // reports page fires this on load, on resize and on every fetch-state
+            // transition (so also on report switch and on remount after a drill-down)
+            // with a viewport-derived period count that knows nothing about the range
+            // the user picked. The width default comes from initial state, and from
+            // updateFinanceStatementTimeframe on a real timeframe change.
         },
         updateDownloadState(draft, action) {
             draft.downloadState = action.payload;

package/lib/view/spendManagement/billPay/billList/billListSelector.js

@@ -440,7 +440,7 @@ const getBillListOnSort = (sortKey, sortOrder, currentTab, transactions) => {
                     }
                 }
                 else {
-                    if (Boolean(transaction.billPayInfo.paymentDate) === true) {
+                    if (Boolean((0, billListFilterHelpers_1.getActualPaymentDate)(transaction.billPayInfo)) === true) {
                         transactionsWithSortKeyValue.push(transaction);
                     }
                     else {
@@ -525,7 +525,7 @@ const getBillListOnSort = (sortKey, sortOrder, currentTab, transactions) => {
             case 'dueDate':
                 return currentTab === 'draft'
                     ? transaction.dueDate
-                    : transaction.billPayInfo.paymentDate;
+                    : (0, billListFilterHelpers_1.getActualPaymentDate)(transaction.billPayInfo);
             case 'status':
                 return getStatusPerTab(transaction);
             case 'amount':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zeniai/client-epic-state",
-  "version": "5.2.35-beta0MM",
+  "version": "5.2.35-beta10MM",
   "description": "Shared module between Web & Mobile containing required abstractions for state management, async network communication. ",
   "main": "lib/index.js",
   "module": "lib/esm/index.js",