@zeniai/client-epic-state 4.19.37-betaVR16 → 4.19.37-betaVR18

package/lib/esm/view/expenseAutomationView/epics/missingReceipts/fetchMoreBatchDetailsEpic.js

@@ -1,5 +1,6 @@
+import orderBy from 'lodash/orderBy';
 import { concat, of } from 'rxjs';
-import { catchError, filter, mergeMap } from 'rxjs/operators';
+import { catchError, exhaustMap, filter } from 'rxjs/operators';
 import { toMonthYearPeriodId } from '../../../../commonStateTypes/timePeriod';
 import { getCurrentTenant } from '../../../../entity/tenant/tenantSelector';
 import { createZeniAPIStatus } from '../../../../responsePayload';
@@ -7,7 +8,9 @@ import { isBatchListStatusCompleted } from '../../payload/missingReceiptsPayload
 import { fetchMoreBatchDetails, fetchMoreBatchDetailsComplete, fetchMoreBatchDetailsFailure, } from '../../reducers/missingReceiptsViewReducer';
 import { fetchBatchDetailsByIds } from './fetchMultipleBatchDetailsEpic';
 const MORE_BATCH_PAGE_SIZE = 4;
-export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchMoreBatchDetails.match), mergeMap(() => {
+export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchMoreBatchDetails.match), 
+/** One page at a time — avoids duplicate loads if IO + scroll fallback both fire. */
+exhaustMap(() => {
     const state = state$.value;
     const { expenseAutomationViewState: { selectedPeriodByTenantId }, expenseAutomationMissingReceiptsViewState: { bulkUpload }, } = state;
     const currentTenant = getCurrentTenant(state);
@@ -18,11 +21,10 @@ export const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$
     const periodId = toMonthYearPeriodId(selectedPeriod);
     const batchList = bulkUpload.batchListByPeriod[periodId] ?? [];
     const failedIds = new Set(bulkUpload.failedBatchDetailIds);
-    const unfetchedBatchIds = batchList
-        .filter((batch) => isBatchListStatusCompleted(batch.status) &&
+    const unfetchedBatches = batchList.filter((batch) => isBatchListStatusCompleted(batch.status) &&
         bulkUpload.batchDetailsById[batch.batchId] == null &&
-        !failedIds.has(batch.batchId))
-        .map((batch) => batch.batchId);
+        !failedIds.has(batch.batchId));
+    const unfetchedBatchIds = orderBy(unfetchedBatches, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     if (unfetchedBatchIds.length === 0) {
         return of(fetchMoreBatchDetailsComplete());
     }

package/lib/esm/view/expenseAutomationView/epics/missingReceipts/fetchMultipleBatchDetailsEpic.js

@@ -1,3 +1,4 @@
+import orderBy from 'lodash/orderBy';
 import { EMPTY, concat, from, of } from 'rxjs';
 import { catchError, filter, mergeMap } from 'rxjs/operators';
 import { updateTransactions } from '../../../../entity/transaction/transactionReducer';
@@ -31,10 +32,10 @@ export function fetchBatchDetailsByIds(batchIds, zeniAPI) {
 export const fetchMultipleBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchBulkUploadBatchesSuccess.match), mergeMap((action) => {
     const batchList = action.payload.batchList;
     const { batchDetailsById } = state$.value.expenseAutomationMissingReceiptsViewState.bulkUpload;
-    const completedBatchIds = batchList
-        .filter((batch) => isBatchListStatusCompleted(batch.status) &&
-        batchDetailsById[batch.batchId] == null)
-        .map((batch) => batch.batchId);
+    /** Oldest first — matches primary-batch selection in missingReceiptsSelector (chronological). */
+    const completedBatchesMissingDetails = batchList.filter((batch) => isBatchListStatusCompleted(batch.status) &&
+        batchDetailsById[batch.batchId] == null);
+    const completedBatchIds = orderBy(completedBatchesMissingDetails, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     const batchIdsToFetch = completedBatchIds.slice(0, INITIAL_BATCH_PAGE_SIZE);
     if (batchIdsToFetch.length === 0) {
         return EMPTY;

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

@@ -56,12 +56,15 @@ export function getExpenseAutomationMissingReceiptsView(state) {
     const batchList = monthYearPeriodId != null
         ? bulkUpload.batchListByPeriod[monthYearPeriodId] ?? []
         : [];
+    /** API returns newest-first (`sort_order: desc`); primary batch uses oldest-first order. */
+    const batchListChronological = orderBy(batchList, (b) => new Date(b.createdAt).valueOf(), 'asc');
     /**
-     * Primary "Unmatched" batch = first batch in batch list order whose stored batchDetails
-     * has status `completed`. If an earlier batch has no details yet (still loading), we return
-     * undefined so we do not assign a later batch until ordering is known (avoids async reorder bugs).
+     * Primary "Unmatched" batch = first completed batch in chronological order, preferring the
+     * first batch that still has un_matched/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 older rows are not fetched yet.
      */
-    const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchList, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
+    const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchListChronological, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
     /** During upload/matching, the in-flight batch may not appear in batchList yet — prefer currentBatchId. */
     const unmatchedSectionBatchId = bulkUpload.phase === 'matching' || bulkUpload.phase === 'uploading'
         ? bulkUpload.currentBatchId ?? primaryBatchIdFromDetailsOrder
@@ -112,9 +115,13 @@ export function getExpenseAutomationMissingReceiptsView(state) {
         }
         : { 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((b) => b.batchId !== unmatchedSectionBatchId)
-        : [];
+        : batchList;
     const pastUnmatchedFiles = pastBatches.flatMap((b) => {
         const details = bulkUpload.batchDetailsById[b.batchId];
         if (details == null) {
@@ -183,24 +190,57 @@ export function getExpenseAutomationMissingReceiptsView(state) {
         },
     };
 }
+function batchDetailsHasUnmatchedWork(details) {
+    return details.files.some((f) => f.status === 'un_matched' || f.status === 'no_match');
+}
+/** List row summary before batch details load — aligns with unmatched / possible-match work. */
+function batchListItemHasUnmatchedWork(batch) {
+    return batch.noMatchCount > 0 || batch.possibleMatchesCount > 0;
+}
 /**
- * First batch in `batchList` order with `batchDetailsById[id].status === 'completed'`.
- * Skips failed detail fetches. Stops at the first batch with no details yet (still loading)
- * so a later batch is never chosen as primary until earlier list rows are resolved.
+ * `batchList` must be in chronological order (oldest first). Picks the primary batch for the
+ * top "Unmatched" section. Skips failed detail fetches.
+ *
+ * If details are not loaded for an older batch but the list row reports no unmatched work, we
+ * skip that batch so newer batches with loaded details can be primary (avoids an empty tab when
+ * the first fetch page only loaded newer 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(batchList, batchDetailsById, failedBatchDetailIds) {
+function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetailsById, failedBatchDetailIds) {
     const failedIds = new Set(failedBatchDetailIds);
-    for (const batch of batchList) {
+    const anyCompletedBatchHasUnmatchedWork = batchListChronological.some((b) => {
+        if (failedIds.has(b.batchId)) {
+            return false;
+        }
+        const d = batchDetailsById[b.batchId];
+        if (d != null &&
+            d.status === 'completed' &&
+            batchDetailsHasUnmatchedWork(d)) {
+            return true;
+        }
+        return d == null && batchListItemHasUnmatchedWork(b);
+    });
+    for (const batch of batchListChronological) {
         if (failedIds.has(batch.batchId)) {
             continue;
         }
         const details = batchDetailsById[batch.batchId];
         if (details == null) {
-            return undefined;
+            if (batchListItemHasUnmatchedWork(batch)) {
+                return undefined;
+            }
+            continue;
         }
-        if (details.status === 'completed') {
-            return batch.batchId;
+        if (details.status !== 'completed') {
+            continue;
+        }
+        if (anyCompletedBatchHasUnmatchedWork) {
+            if (batchDetailsHasUnmatchedWork(details)) {
+                return batch.batchId;
+            }
+            continue;
         }
+        return batch.batchId;
     }
     return undefined;
 }

package/lib/view/expenseAutomationView/epics/missingReceipts/fetchMoreBatchDetailsEpic.js

@@ -1,6 +1,10 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchMoreBatchDetailsEpic = void 0;
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const timePeriod_1 = require("../../../../commonStateTypes/timePeriod");
@@ -10,7 +14,9 @@ const missingReceiptsPayload_1 = require("../../payload/missingReceiptsPayload")
 const missingReceiptsViewReducer_1 = require("../../reducers/missingReceiptsViewReducer");
 const fetchMultipleBatchDetailsEpic_1 = require("./fetchMultipleBatchDetailsEpic");
 const MORE_BATCH_PAGE_SIZE = 4;
-const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchMoreBatchDetails.match), (0, operators_1.mergeMap)(() => {
+const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchMoreBatchDetails.match), 
+/** One page at a time — avoids duplicate loads if IO + scroll fallback both fire. */
+(0, operators_1.exhaustMap)(() => {
     const state = state$.value;
     const { expenseAutomationViewState: { selectedPeriodByTenantId }, expenseAutomationMissingReceiptsViewState: { bulkUpload }, } = state;
     const currentTenant = (0, tenantSelector_1.getCurrentTenant)(state);
@@ -21,11 +27,10 @@ const fetchMoreBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((
     const periodId = (0, timePeriod_1.toMonthYearPeriodId)(selectedPeriod);
     const batchList = bulkUpload.batchListByPeriod[periodId] ?? [];
     const failedIds = new Set(bulkUpload.failedBatchDetailIds);
-    const unfetchedBatchIds = batchList
-        .filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
+    const unfetchedBatches = batchList.filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
         bulkUpload.batchDetailsById[batch.batchId] == null &&
-        !failedIds.has(batch.batchId))
-        .map((batch) => batch.batchId);
+        !failedIds.has(batch.batchId));
+    const unfetchedBatchIds = (0, orderBy_1.default)(unfetchedBatches, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     if (unfetchedBatchIds.length === 0) {
         return (0, rxjs_1.of)((0, missingReceiptsViewReducer_1.fetchMoreBatchDetailsComplete)());
     }

package/lib/view/expenseAutomationView/epics/missingReceipts/fetchMultipleBatchDetailsEpic.js

@@ -1,7 +1,11 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fetchMultipleBatchDetailsEpic = void 0;
 exports.fetchBatchDetailsByIds = fetchBatchDetailsByIds;
+const orderBy_1 = __importDefault(require("lodash/orderBy"));
 const rxjs_1 = require("rxjs");
 const operators_1 = require("rxjs/operators");
 const transactionReducer_1 = require("../../../../entity/transaction/transactionReducer");
@@ -35,10 +39,10 @@ function fetchBatchDetailsByIds(batchIds, zeniAPI) {
 const fetchMultipleBatchDetailsEpic = (actions$, state$, zeniAPI) => actions$.pipe((0, operators_1.filter)(missingReceiptsViewReducer_1.fetchBulkUploadBatchesSuccess.match), (0, operators_1.mergeMap)((action) => {
     const batchList = action.payload.batchList;
     const { batchDetailsById } = state$.value.expenseAutomationMissingReceiptsViewState.bulkUpload;
-    const completedBatchIds = batchList
-        .filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
-        batchDetailsById[batch.batchId] == null)
-        .map((batch) => batch.batchId);
+    /** Oldest first — matches primary-batch selection in missingReceiptsSelector (chronological). */
+    const completedBatchesMissingDetails = batchList.filter((batch) => (0, missingReceiptsPayload_1.isBatchListStatusCompleted)(batch.status) &&
+        batchDetailsById[batch.batchId] == null);
+    const completedBatchIds = (0, orderBy_1.default)(completedBatchesMissingDetails, (b) => new Date(b.createdAt).valueOf(), 'asc').map((batch) => batch.batchId);
     const batchIdsToFetch = completedBatchIds.slice(0, INITIAL_BATCH_PAGE_SIZE);
     if (batchIdsToFetch.length === 0) {
         return rxjs_1.EMPTY;

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

@@ -62,12 +62,15 @@ function getExpenseAutomationMissingReceiptsView(state) {
     const batchList = monthYearPeriodId != null
         ? bulkUpload.batchListByPeriod[monthYearPeriodId] ?? []
         : [];
+    /** API returns newest-first (`sort_order: desc`); primary batch uses oldest-first order. */
+    const batchListChronological = (0, orderBy_1.default)(batchList, (b) => new Date(b.createdAt).valueOf(), 'asc');
     /**
-     * Primary "Unmatched" batch = first batch in batch list order whose stored batchDetails
-     * has status `completed`. If an earlier batch has no details yet (still loading), we return
-     * undefined so we do not assign a later batch until ordering is known (avoids async reorder bugs).
+     * Primary "Unmatched" batch = first completed batch in chronological order, preferring the
+     * first batch that still has un_matched/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 older rows are not fetched yet.
      */
-    const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchList, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
+    const primaryBatchIdFromDetailsOrder = getPrimaryBatchIdFromBatchListOrder(batchListChronological, bulkUpload.batchDetailsById, bulkUpload.failedBatchDetailIds);
     /** During upload/matching, the in-flight batch may not appear in batchList yet — prefer currentBatchId. */
     const unmatchedSectionBatchId = bulkUpload.phase === 'matching' || bulkUpload.phase === 'uploading'
         ? bulkUpload.currentBatchId ?? primaryBatchIdFromDetailsOrder
@@ -118,9 +121,13 @@ function getExpenseAutomationMissingReceiptsView(state) {
         }
         : { 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((b) => b.batchId !== unmatchedSectionBatchId)
-        : [];
+        : batchList;
     const pastUnmatchedFiles = pastBatches.flatMap((b) => {
         const details = bulkUpload.batchDetailsById[b.batchId];
         if (details == null) {
@@ -189,24 +196,57 @@ function getExpenseAutomationMissingReceiptsView(state) {
         },
     };
 }
+function batchDetailsHasUnmatchedWork(details) {
+    return details.files.some((f) => f.status === 'un_matched' || f.status === 'no_match');
+}
+/** List row summary before batch details load — aligns with unmatched / possible-match work. */
+function batchListItemHasUnmatchedWork(batch) {
+    return batch.noMatchCount > 0 || batch.possibleMatchesCount > 0;
+}
 /**
- * First batch in `batchList` order with `batchDetailsById[id].status === 'completed'`.
- * Skips failed detail fetches. Stops at the first batch with no details yet (still loading)
- * so a later batch is never chosen as primary until earlier list rows are resolved.
+ * `batchList` must be in chronological order (oldest first). Picks the primary batch for the
+ * top "Unmatched" section. Skips failed detail fetches.
+ *
+ * If details are not loaded for an older batch but the list row reports no unmatched work, we
+ * skip that batch so newer batches with loaded details can be primary (avoids an empty tab when
+ * the first fetch page only loaded newer 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(batchList, batchDetailsById, failedBatchDetailIds) {
+function getPrimaryBatchIdFromBatchListOrder(batchListChronological, batchDetailsById, failedBatchDetailIds) {
     const failedIds = new Set(failedBatchDetailIds);
-    for (const batch of batchList) {
+    const anyCompletedBatchHasUnmatchedWork = batchListChronological.some((b) => {
+        if (failedIds.has(b.batchId)) {
+            return false;
+        }
+        const d = batchDetailsById[b.batchId];
+        if (d != null &&
+            d.status === 'completed' &&
+            batchDetailsHasUnmatchedWork(d)) {
+            return true;
+        }
+        return d == null && batchListItemHasUnmatchedWork(b);
+    });
+    for (const batch of batchListChronological) {
         if (failedIds.has(batch.batchId)) {
             continue;
         }
         const details = batchDetailsById[batch.batchId];
         if (details == null) {
-            return undefined;
+            if (batchListItemHasUnmatchedWork(batch)) {
+                return undefined;
+            }
+            continue;
         }
-        if (details.status === 'completed') {
-            return batch.batchId;
+        if (details.status !== 'completed') {
+            continue;
+        }
+        if (anyCompletedBatchHasUnmatchedWork) {
+            if (batchDetailsHasUnmatchedWork(details)) {
+                return batch.batchId;
+            }
+            continue;
         }
+        return batch.batchId;
     }
     return undefined;
 }

package/package.json

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