@zeniai/client-epic-state 5.1.69 → 5.1.70-betaRD1

package/lib/esm/view/invoicing/invoiceList/fetchInvoiceListEpic.js

@@ -6,10 +6,10 @@ import { updateInvoices } from '../../../entity/invoicing/invoice/invoiceReducer
 import { createZeniAPIStatus, isSuccessResponse } from '../../../responsePayload';
 import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../invoicingApiHelper';
 import { fetchInvoiceList, updateInvoiceList, updateInvoiceListFailure, } from './invoiceListReducer';
-const buildInvoiceListQuery = (filters, cursor, sort) => {
+const buildInvoiceListQuery = (filters, status, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
+    if (status != null && status.length > 0) {
+        params.set('status', status);
     }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
@@ -33,9 +33,11 @@ const buildInvoiceListQuery = (filters, cursor, sort) => {
     applyListSortParams(params, sort);
     return params;
 };
-export const fetchInvoiceListEpic = (actions$, _state$, zeniAPI) => actions$.pipe(filter(fetchInvoiceList.match), switchMap((action) => {
+export const fetchInvoiceListEpic = (actions$, state$, zeniAPI) => actions$.pipe(filter(fetchInvoiceList.match), switchMap((action) => {
     const { filters, cursor, keepExistingListItems, sort } = action.payload;
-    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/invoices`, buildInvoiceListQuery(filters, cursor, sort));
+    const { activeTab } = state$.value.invoicingInvoiceListState;
+    const status = activeTab !== 'all' ? activeTab : undefined;
+    const apiUrl = withQuery(`${zeniAPI.apiEndPoints.invoicingMicroServiceBaseUrl}/1.0/invoices`, buildInvoiceListQuery(filters, status, cursor, sort));
     return zeniAPI.getJSON(apiUrl).pipe(switchMap((response) => {
         if (isSuccessResponse(response)) {
             const items = response.data?.items ?? [];

package/lib/esm/view/invoicing/invoiceList/fetchInvoiceListPageEpic.js

@@ -16,8 +16,9 @@ const shouldFetch = (fetchStateAndError, cacheOverride) => cacheOverride ||
 export const fetchInvoiceListPageEpic = (actions$, state$) => actions$.pipe(filter(fetchInvoiceListPage.match), mergeMap((action) => {
     const { cacheOverride, filters, sort } = action.payload;
     const state = state$.value.invoicingInvoiceListState;
+    const activeTabState = state.invoiceByTab[state.activeTab];
     const pageActions = [];
-    if (shouldFetch({ fetchState: state.fetchState, error: state.error }, cacheOverride)) {
+    if (shouldFetch({ fetchState: activeTabState.fetchState, error: activeTabState.error }, cacheOverride)) {
         pageActions.push(fetchInvoiceList({ filters, sort }));
     }
     if (shouldFetch(state.countsFetchState, cacheOverride)) {

package/lib/esm/view/invoicing/invoiceList/invoiceListReducer.js

@@ -1,30 +1,34 @@
 import { createSlice } from '@reduxjs/toolkit';
+import { ALL_INVOICING_INVOICE_TAB_IDS, makeInvoiceByTab, } from './invoiceListState';
 /**
- * Whether two invoice-list queries (filters + sort) would return the same list.
- * Used to invalidate the cached list when a page mounts with a different query
- * — e.g. the customer detail page after the main Invoices page, or vice versa.
+ * Whether two invoice-list queries share the same base (tab-independent) query.
+ * The status tab is server-side per-tab, so it is excluded here — when the base
+ * query changes (search / customer / subscription / dates / sort) every per-tab
+ * cache is stale and the reducer resets them all.
  */
 export const sameInvoiceListQuery = (a, b) => a.filters.customerId === b.filters.customerId &&
     a.filters.subscriptionId === b.filters.subscriptionId &&
-    a.filters.status === b.filters.status &&
     a.filters.search === b.filters.search &&
     a.filters.dateFrom === b.filters.dateFrom &&
     a.filters.dateTo === b.filters.dateTo &&
     a.sort?.field === b.sort?.field &&
     a.sort?.dir === b.sort?.dir;
+/**
+ * Narrow an invoice status to a status tab id when one exists. Statuses like
+ * `draft` / `posted` / `pending` have no dedicated tab, so a newly created
+ * invoice in one of those states only lands in the `all` tab.
+ */
+const statusToTabId = (status) => ALL_INVOICING_INVOICE_TAB_IDS.includes(status)
+    ? status
+    : undefined;
 export const initialState = {
-    fetchState: 'Not-Started',
-    error: undefined,
-    invoiceIds: [],
-    nextCursor: null,
+    activeTab: 'all',
+    invoiceByTab: makeInvoiceByTab(),
     filters: {},
     counts: { all: 0 },
     countsFetchState: { fetchState: 'Not-Started', error: undefined },
     kpis: undefined,
     kpisFetchState: { fetchState: 'Not-Started', error: undefined },
-    hasValidState() {
-        return this.fetchState === 'Completed';
-    },
 };
 const invoiceList = createSlice({
     name: 'invoicingInvoiceList',
@@ -32,14 +36,15 @@ const invoiceList = createSlice({
     reducers: {
         fetchInvoiceList: {
             reducer(draft, action) {
+                const tab = draft.invoiceByTab[draft.activeTab];
                 if (!action.payload.keepExistingListItems) {
-                    draft.invoiceIds = [];
-                    draft.nextCursor = null;
+                    tab.invoiceIds = [];
+                    tab.nextCursor = null;
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
-                draft.fetchState = 'In-Progress';
-                draft.error = undefined;
+                tab.fetchState = 'In-Progress';
+                tab.error = undefined;
             },
             prepare(payload) {
                 return {
@@ -54,13 +59,11 @@ const invoiceList = createSlice({
         },
         fetchInvoiceListPage: {
             reducer(draft, action) {
-                // A different query invalidates the cached list — reset so the page
-                // epic's shouldFetch refetches instead of showing another view's rows
-                // (e.g. a customer-filtered list left behind by the detail page).
+                // A different base query invalidates every tab's cache — reset so the
+                // page epic's shouldFetch refetches the active tab instead of showing
+                // rows fetched under a stale search/customer/subscription/dates/sort.
                 if (!sameInvoiceListQuery(draft, action.payload)) {
-                    draft.invoiceIds = [];
-                    draft.nextCursor = null;
-                    draft.fetchState = 'Not-Started';
+                    draft.invoiceByTab = makeInvoiceByTab();
                 }
                 draft.filters = action.payload.filters;
                 draft.sort = action.payload.sort;
@@ -76,17 +79,19 @@ const invoiceList = createSlice({
             },
         },
         updateInvoiceList(draft, action) {
+            const tab = draft.invoiceByTab[draft.activeTab];
             const newIds = action.payload.invoices.map((invoice) => invoice.id);
-            draft.invoiceIds = action.payload.keepExistingListItems
-                ? [...new Set([...draft.invoiceIds, ...newIds])]
+            tab.invoiceIds = action.payload.keepExistingListItems
+                ? [...new Set([...tab.invoiceIds, ...newIds])]
                 : newIds;
-            draft.nextCursor = action.payload.nextCursor;
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
+            tab.nextCursor = action.payload.nextCursor;
+            tab.fetchState = 'Completed';
+            tab.error = undefined;
         },
         updateInvoiceListFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+            const tab = draft.invoiceByTab[draft.activeTab];
+            tab.fetchState = 'Error';
+            tab.error = action.payload;
         },
         fetchInvoiceCounts(draft) {
             draft.countsFetchState.fetchState = 'In-Progress';
@@ -117,24 +122,45 @@ const invoiceList = createSlice({
         updateInvoiceListFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The view dispatches the follow-up fetchInvoiceListPage
+        // so the page epic fetches the tab when its cache is empty and reuses it when
+        // already loaded.
+        setInvoiceActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created invoice in the cached list + tab counts so the
-        // invoices page shows it without refetching from the server. Bumps the
-        // `all` total and the per-status count key the tabs read (a create is
-        // typically `draft`). KPIs are money aggregates (Amount, not a plain
-        // increment), so they are left untouched and refetched lazily.
+        // invoices page shows it without refetching. Prepends the id to the `all`
+        // tab and its status tab (dedup via includes), and bumps the `all` total and
+        // the per-status count key the tabs read. KPIs are money aggregates, so they
+        // are left untouched and refetched lazily.
         addInvoiceToList(draft, action) {
             const { id, status } = action.payload;
-            if (draft.invoiceIds.includes(id)) {
+            const allTab = draft.invoiceByTab['all'];
+            if (allTab.invoiceIds.includes(id)) {
                 return;
             }
-            draft.invoiceIds = [id, ...draft.invoiceIds];
+            allTab.invoiceIds = [id, ...allTab.invoiceIds];
+            const statusTab = statusToTabId(status);
+            if (statusTab != null) {
+                const tab = draft.invoiceByTab[statusTab];
+                if (!tab.invoiceIds.includes(id)) {
+                    tab.invoiceIds = [id, ...tab.invoiceIds];
+                }
+            }
             draft.counts.all += 1;
             draft.counts[status] = (draft.counts[status] ?? 0) + 1;
         },
         clearInvoiceList(draft) {
-            Object.assign(draft, initialState);
+            draft.activeTab = 'all';
+            draft.invoiceByTab = makeInvoiceByTab();
+            draft.filters = {};
+            draft.sort = undefined;
+            draft.counts = { all: 0 };
+            draft.countsFetchState = { fetchState: 'Not-Started', error: undefined };
+            draft.kpis = undefined;
+            draft.kpisFetchState = { fetchState: 'Not-Started', error: undefined };
         },
     },
 });
-export const { fetchInvoiceList, fetchInvoiceListPage, updateInvoiceList, updateInvoiceListFailure, fetchInvoiceCounts, updateInvoiceCounts, updateInvoiceCountsFailure, fetchInvoiceKPIs, updateInvoiceKPIs, updateInvoiceKPIsFailure, updateInvoiceListFilters, addInvoiceToList, clearInvoiceList, } = invoiceList.actions;
+export const { fetchInvoiceList, fetchInvoiceListPage, updateInvoiceList, updateInvoiceListFailure, fetchInvoiceCounts, updateInvoiceCounts, updateInvoiceCountsFailure, fetchInvoiceKPIs, updateInvoiceKPIs, updateInvoiceKPIsFailure, updateInvoiceListFilters, setInvoiceActiveTab, addInvoiceToList, clearInvoiceList, } = invoiceList.actions;
 export default invoiceList.reducer;

package/lib/esm/view/invoicing/invoiceList/invoiceListSelector.js

@@ -6,18 +6,22 @@ import { INVOICING_INVOICE_TABS, } from './invoiceListState';
  * array (and the wrapping view object) keep referential identity until the
  * invoice entity slice or the list-view slice actually change.
  */
-export const getInvoiceListView = createSelector((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (invoiceState, listViewState) => ({
-    invoices: listViewState.invoiceIds
-        .map((id) => invoiceState.invoiceByID[id])
-        .filter((item) => item != null),
-    counts: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    kpis: listViewState.kpis,
-    kpisFetchState: listViewState.kpisFetchState,
-    nextCursor: listViewState.nextCursor,
-    tabIds: INVOICING_INVOICE_TABS,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    version: 1.0,
-}));
+export const getInvoiceListView = createSelector((state) => state.invoicingInvoiceState, (state) => state.invoicingInvoiceListState, (invoiceState, listViewState) => {
+    const activeTabState = listViewState.invoiceByTab[listViewState.activeTab];
+    return {
+        activeTab: listViewState.activeTab,
+        invoices: activeTabState.invoiceIds
+            .map((id) => invoiceState.invoiceByID[id])
+            .filter((item) => item != null),
+        counts: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        kpis: listViewState.kpis,
+        kpisFetchState: listViewState.kpisFetchState,
+        nextCursor: activeTabState.nextCursor,
+        tabIds: INVOICING_INVOICE_TABS,
+        fetchState: activeTabState.fetchState,
+        error: activeTabState.error,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoiceList/invoiceListState.js

@@ -17,3 +17,13 @@ export const toInvoicingInvoiceTabId = (v) => stringToUnion(v, ALL_INVOICING_INV
 export const INVOICING_INVOICE_TABS = [
     ...ALL_INVOICING_INVOICE_TAB_IDS,
 ];
+export const makeInvoiceTabState = () => ({
+    invoiceIds: [],
+    nextCursor: null,
+    fetchState: 'Not-Started',
+    error: undefined,
+});
+export const makeInvoiceByTab = () => ALL_INVOICING_INVOICE_TAB_IDS.reduce((acc, tabId) => {
+    acc[tabId] = makeInvoiceTabState();
+    return acc;
+}, {});

package/lib/esm/view/invoicing/invoicingCreditNoteListView/epics/fetchInvoicingCreditNoteListEpic.js

@@ -6,9 +6,6 @@ import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../..
 import { fetchInvoicingCreditNoteList, updateInvoicingCreditNoteList, updateInvoicingCreditNoteListFailure, } from '../invoicingCreditNoteListViewReducer';
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }

package/lib/esm/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,10 +81,15 @@ const invoicingCreditNoteListView = createSlice({
         updateInvoicingCreditNoteFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingCreditNoteActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         clearInvoicingCreditNoteListView(draft) {
             Object.assign(draft, initialState);
         },
     },
 });
-export const { fetchInvoicingCreditNoteList, fetchInvoicingCreditNoteListPage, updateInvoicingCreditNoteList, updateInvoicingCreditNoteListFailure, fetchInvoicingCreditNoteCounts, updateInvoicingCreditNoteCounts, updateInvoicingCreditNoteCountsFailure, updateInvoicingCreditNoteFilters, clearInvoicingCreditNoteListView, } = invoicingCreditNoteListView.actions;
+export const { fetchInvoicingCreditNoteList, fetchInvoicingCreditNoteListPage, updateInvoicingCreditNoteList, updateInvoicingCreditNoteListFailure, fetchInvoicingCreditNoteCounts, updateInvoicingCreditNoteCounts, updateInvoicingCreditNoteCountsFailure, updateInvoicingCreditNoteFilters, setInvoicingCreditNoteActiveTab, clearInvoicingCreditNoteListView, } = invoicingCreditNoteListView.actions;
 export default invoicingCreditNoteListView.reducer;

package/lib/esm/view/invoicing/invoicingCreditNoteListView/invoicingCreditNoteListViewSelector.js

@@ -6,16 +6,26 @@ import { INVOICING_CREDIT_NOTE_COLUMNS, INVOICING_CREDIT_NOTE_TABS, } from './in
  * object) keep referential identity until the credit-note entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingCreditNoteListView = createSelector((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (creditNoteState, listViewState) => ({
-    columns: INVOICING_CREDIT_NOTE_COLUMNS,
-    creditNotes: getInvoicingCreditNotesByIds(creditNoteState, listViewState.ids),
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    tabIds: INVOICING_CREDIT_NOTE_TABS,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+export const getInvoicingCreditNoteListView = createSelector((state) => state.invoicingCreditNoteState, (state) => state.invoicingCreditNoteListViewState, (creditNoteState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allCreditNotes = getInvoicingCreditNotesByIds(creditNoteState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const creditNotes = activeTab === 'all'
+        ? allCreditNotes
+        : allCreditNotes.filter((creditNote) => creditNote.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_CREDIT_NOTE_COLUMNS,
+        creditNotes,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        nextCursor: listViewState.nextCursor,
+        tabIds: INVOICING_CREDIT_NOTE_TABS,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoicingCustomerDetailView/fetchInvoicingCustomerDetailPageEpic.js

@@ -20,6 +20,7 @@ export const fetchInvoicingCustomerDetailPageEpic = (actions$, state$) => action
     const { cacheOverride, id } = action.payload;
     const customerDetail = state$.value.invoicingCustomerDetailViewState.detailById[id];
     const invoiceListState = state$.value.invoicingInvoiceListState;
+    const invoiceListTabState = invoiceListState.invoiceByTab[invoiceListState.activeTab];
     const settingsState = state$.value.invoicingSettingsViewState;
     const pageActions = [];
     if (shouldFetch({
@@ -33,8 +34,8 @@ export const fetchInvoicingCustomerDetailPageEpic = (actions$, state$) => action
     const invoiceListIsForCustomer = invoiceListState.filters.customerId === id;
     if (!invoiceListIsForCustomer ||
         shouldFetch({
-            fetchState: invoiceListState.fetchState,
-            error: invoiceListState.error,
+            fetchState: invoiceListTabState.fetchState,
+            error: invoiceListTabState.error,
         }, cacheOverride)) {
         pageActions.push(fetchInvoiceList({ filters: { customerId: id } }));
     }

package/lib/esm/view/invoicing/invoicingCustomerDetailView/invoicingCustomerDetailViewSelector.js

@@ -10,7 +10,7 @@ export const getInvoicingCustomerDetail = (state, invoicingCustomerID) => {
     const settings = getInvoicingSettings(state);
     return {
         invoicingCustomer: getInvoicingCustomerById(invoicingCustomerState, invoicingCustomerID),
-        invoices: getInvoicesByIds(state.invoicingInvoiceState, state.invoicingInvoiceListState.invoiceIds),
+        invoices: getInvoicesByIds(state.invoicingInvoiceState, state.invoicingInvoiceListState.invoiceByTab[state.invoicingInvoiceListState.activeTab].invoiceIds),
         setupIntent: getInvoicingSetupIntent(state),
         setupIntentFetchState: getInvoicingSetupIntentFetchState(state),
         plaidLinkToken: getInvoicingPlaidLinkToken(state),

package/lib/esm/view/invoicing/invoicingCustomerListView/epics/fetchInvoicingCustomerListEpic.js

@@ -11,9 +11,6 @@ const buildQuery = (filters, cursor, sort) => {
     if (filters.search != null && filters.search.length > 0) {
         params.set('search', filters.search);
     }
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     params.set('limit', String(INVOICING_LIST_PAGE_SIZE));
     if (cursor != null) {
         params.set('cursor', cursor);

package/lib/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,6 +81,11 @@ const invoicingCustomerListView = createSlice({
         updateInvoicingCustomerFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingCustomerActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created customer in the cached list + tab counts so the
         // customer page shows the new row without refetching from the server. The
         // per-status count key mirrors the customer `status` value the counts map
@@ -101,5 +107,5 @@ const invoicingCustomerListView = createSlice({
         },
     },
 });
-export const { fetchInvoicingCustomerList, fetchInvoicingCustomerListPage, updateInvoicingCustomerList, updateInvoicingCustomerListFailure, fetchInvoicingCustomerCounts, updateInvoicingCustomerCounts, updateInvoicingCustomerCountsFailure, updateInvoicingCustomerFilters, addInvoicingCustomerToList, clearInvoicingCustomerListView, } = invoicingCustomerListView.actions;
+export const { fetchInvoicingCustomerList, fetchInvoicingCustomerListPage, updateInvoicingCustomerList, updateInvoicingCustomerListFailure, fetchInvoicingCustomerCounts, updateInvoicingCustomerCounts, updateInvoicingCustomerCountsFailure, updateInvoicingCustomerFilters, setInvoicingCustomerActiveTab, addInvoicingCustomerToList, clearInvoicingCustomerListView, } = invoicingCustomerListView.actions;
 export default invoicingCustomerListView.reducer;

package/lib/esm/view/invoicing/invoicingCustomerListView/invoicingCustomerListViewSelector.js

@@ -7,15 +7,28 @@ import { INVOICING_CUSTOMER_COLUMNS, INVOICING_CUSTOMER_TABS, } from './invoicin
  * slice actually change. Without this, the connected list page re-rendered on
  * every unrelated redux action because a fresh array was built each call.
  */
-export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (customerState, listViewState) => ({
-    columns: INVOICING_CUSTOMER_COLUMNS,
-    customers: getInvoicingCustomersByIds(customerState, listViewState.ids),
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    nextCursor: listViewState.nextCursor,
-    filters: listViewState.filters,
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    tabIds: INVOICING_CUSTOMER_TABS,
-    sort: listViewState.sort,
-}));
+export const getInvoicingCustomerListView = createSelector((state) => state.invoicingCustomerState, (state) => state.invoicingCustomerListViewState, (customerState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allCustomers = getInvoicingCustomersByIds(customerState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything, 'at_risk' keys off the
+    // `isAtRisk` flag, the rest match the customer `status`).
+    const customers = activeTab === 'all'
+        ? allCustomers
+        : activeTab === 'at_risk'
+            ? allCustomers.filter((customer) => customer.isAtRisk === true)
+            : allCustomers.filter((customer) => customer.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_CUSTOMER_COLUMNS,
+        customers,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        nextCursor: listViewState.nextCursor,
+        filters: listViewState.filters,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        tabIds: INVOICING_CUSTOMER_TABS,
+        sort: listViewState.sort,
+    };
+});

package/lib/esm/view/invoicing/invoicingDunningCaseListView/epics/fetchInvoicingDunningCaseListEpic.js

@@ -6,9 +6,6 @@ import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../..
 import { fetchInvoicingDunningCaseList, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, } from '../invoicingDunningCaseListViewReducer';
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.search != null && filters.search.length > 0) {
         params.set('search', filters.search);
     }

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,10 +81,15 @@ const invoicingDunningCaseListView = createSlice({
         updateInvoicingDunningCaseFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingDunningCaseActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         clearInvoicingDunningCaseListView(draft) {
             Object.assign(draft, initialState);
         },
     },
 });
-export const { fetchInvoicingDunningCaseList, fetchInvoicingDunningCaseListPage, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, fetchInvoicingDunningCaseCounts, updateInvoicingDunningCaseCounts, updateInvoicingDunningCaseCountsFailure, updateInvoicingDunningCaseFilters, clearInvoicingDunningCaseListView, } = invoicingDunningCaseListView.actions;
+export const { fetchInvoicingDunningCaseList, fetchInvoicingDunningCaseListPage, updateInvoicingDunningCaseList, updateInvoicingDunningCaseListFailure, fetchInvoicingDunningCaseCounts, updateInvoicingDunningCaseCounts, updateInvoicingDunningCaseCountsFailure, updateInvoicingDunningCaseFilters, setInvoicingDunningCaseActiveTab, clearInvoicingDunningCaseListView, } = invoicingDunningCaseListView.actions;
 export default invoicingDunningCaseListView.reducer;

package/lib/esm/view/invoicing/invoicingDunningCaseListView/invoicingDunningCaseListViewSelector.js

@@ -6,16 +6,26 @@ import { INVOICING_DUNNING_CASE_COLUMNS, INVOICING_DUNNING_CASE_TABS, } from './
  * object) keep referential identity until the dunning-case entity slice or the
  * list-view slice actually change.
  */
-export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (dunningCaseState, listViewState) => ({
-    columns: INVOICING_DUNNING_CASE_COLUMNS,
-    dunningCases: getInvoicingDunningCasesByIds(dunningCaseState, listViewState.ids),
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    filters: listViewState.filters,
-    nextCursor: listViewState.nextCursor,
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    tabIds: INVOICING_DUNNING_CASE_TABS,
-    sort: listViewState.sort,
-    version: 1.0,
-}));
+export const getInvoicingDunningCaseListView = createSelector((state) => state.invoicingDunningCaseState, (state) => state.invoicingDunningCaseListViewState, (dunningCaseState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allDunningCases = getInvoicingDunningCasesByIds(dunningCaseState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const dunningCases = activeTab === 'all'
+        ? allDunningCases
+        : allDunningCases.filter((dunningCase) => dunningCase.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_DUNNING_CASE_COLUMNS,
+        dunningCases,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        filters: listViewState.filters,
+        nextCursor: listViewState.nextCursor,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        tabIds: INVOICING_DUNNING_CASE_TABS,
+        sort: listViewState.sort,
+        version: 1.0,
+    };
+});

package/lib/esm/view/invoicing/invoicingSubscriptionListView/epics/fetchInvoicingSubscriptionListEpic.js

@@ -8,9 +8,6 @@ import { INVOICING_LIST_PAGE_SIZE, applyListSortParams, withQuery, } from '../..
 import { fetchInvoicingSubscriptionList, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, } from '../invoicingSubscriptionListViewReducer';
 const buildQuery = (filters, cursor, sort) => {
     const params = new URLSearchParams();
-    if (filters.status != null && filters.status.length > 0) {
-        params.set('status', filters.status);
-    }
     if (filters.customerId != null) {
         params.set('customer_id', filters.customerId);
     }

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewReducer.js

@@ -2,6 +2,7 @@ import { createSlice } from '@reduxjs/toolkit';
 export const initialState = {
     fetchState: 'Not-Started',
     error: undefined,
+    activeTab: 'all',
     ids: [],
     nextCursor: null,
     filters: {},
@@ -80,6 +81,11 @@ const invoicingSubscriptionListView = createSlice({
         updateInvoicingSubscriptionFilters(draft, action) {
             draft.filters = action.payload;
         },
+        // Select a status tab. The list API ignores `status` (returns all statuses),
+        // so the selector filters rows to this tab client-side — no refetch needed.
+        setInvoicingSubscriptionActiveTab(draft, action) {
+            draft.activeTab = action.payload;
+        },
         // Reflect a newly created subscription in the cached list + tab counts so the
         // subscription page shows it without refetching from the server. The status
         // doubles as the per-tab count key (tab ids mirror InvoicingSubscriptionStatus).
@@ -99,5 +105,5 @@ const invoicingSubscriptionListView = createSlice({
         },
     },
 });
-export const { fetchInvoicingSubscriptionList, fetchInvoicingSubscriptionListPage, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, fetchInvoicingSubscriptionCounts, updateInvoicingSubscriptionCounts, updateInvoicingSubscriptionCountsFailure, updateInvoicingSubscriptionFilters, addInvoicingSubscriptionToList, clearInvoicingSubscriptionListView, } = invoicingSubscriptionListView.actions;
+export const { fetchInvoicingSubscriptionList, fetchInvoicingSubscriptionListPage, updateInvoicingSubscriptionList, updateInvoicingSubscriptionListFailure, fetchInvoicingSubscriptionCounts, updateInvoicingSubscriptionCounts, updateInvoicingSubscriptionCountsFailure, updateInvoicingSubscriptionFilters, setInvoicingSubscriptionActiveTab, addInvoicingSubscriptionToList, clearInvoicingSubscriptionListView, } = invoicingSubscriptionListView.actions;
 export default invoicingSubscriptionListView.reducer;

package/lib/esm/view/invoicing/invoicingSubscriptionListView/invoicingSubscriptionListViewSelector.js

@@ -8,15 +8,25 @@ import { INVOICING_SUBSCRIPTION_COLUMNS, INVOICING_SUBSCRIPTION_TABS, } from './
  * re-rendered on every unrelated redux action because a fresh array was built
  * each call.
  */
-export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (subscriptionState, listViewState) => ({
-    columns: INVOICING_SUBSCRIPTION_COLUMNS,
-    subscriptions: getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids),
-    fetchState: listViewState.fetchState,
-    error: listViewState.error,
-    nextCursor: listViewState.nextCursor,
-    filters: listViewState.filters,
-    count: listViewState.counts,
-    countsFetchState: listViewState.countsFetchState,
-    tabIds: INVOICING_SUBSCRIPTION_TABS,
-    sort: listViewState.sort,
-}));
+export const getInvoicingSubscriptionListView = createSelector((state) => state.invoicingSubscriptionState, (state) => state.invoicingSubscriptionListViewState, (subscriptionState, listViewState) => {
+    const { activeTab } = listViewState;
+    const allSubscriptions = getInvoicingSubscriptionsByIds(subscriptionState, listViewState.ids);
+    // The list API ignores `status`, so it returns every status; filter to the
+    // active tab client-side ('all' shows everything).
+    const subscriptions = activeTab === 'all'
+        ? allSubscriptions
+        : allSubscriptions.filter((subscription) => subscription.status === activeTab);
+    return {
+        activeTab,
+        columns: INVOICING_SUBSCRIPTION_COLUMNS,
+        subscriptions,
+        fetchState: listViewState.fetchState,
+        error: listViewState.error,
+        nextCursor: listViewState.nextCursor,
+        filters: listViewState.filters,
+        count: listViewState.counts,
+        countsFetchState: listViewState.countsFetchState,
+        tabIds: INVOICING_SUBSCRIPTION_TABS,
+        sort: listViewState.sort,
+    };
+});