@zeniai/client-epic-state 5.2.93 → 5.2.94-beta0MM

package/lib/esm/view/netBurnOrIncome/netBurnOrIncomeReducer.js

@@ -91,8 +91,16 @@ const netBurnOrIncome = createSlice({
             },
         },
         fetchNetBurnOrIncome: {
-            prepare(fetchFullReport = false, forecastId, cacheOverride = false) {
-                return { payload: { fetchFullReport, forecastId, cacheOverride } };
+            prepare(fetchFullReport = false, forecastId, cacheOverride = false, startDate, endDate) {
+                return {
+                    payload: {
+                        fetchFullReport,
+                        forecastId,
+                        cacheOverride,
+                        startDate,
+                        endDate,
+                    },
+                };
             },
             reducer(
             // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -103,50 +111,138 @@ const netBurnOrIncome = createSlice({
             },
         },
         fetchNetBurnOrIncomeForTimeframe: {
-            prepare(timeframe, forecastId, fetchFullReport = true, cacheOverride = false) {
+            prepare(timeframe, forecastId, fetchFullReport = true, cacheOverride = false, startDate, endDate) {
                 return {
-                    payload: { forecastId, timeframe, fetchFullReport, cacheOverride },
+                    payload: {
+                        forecastId,
+                        timeframe,
+                        fetchFullReport,
+                        cacheOverride,
+                        startDate,
+                        endDate,
+                    },
                 };
             },
             reducer(draft, action) {
                 const timeframe = action.payload.timeframe;
                 const netBurnOrIncomeState = getState(draft, draft.uiState.isForecastModeOn, action.payload.forecastId);
-                const fetchState = {
-                    ...netBurnOrIncomeState.fetchState,
-                };
-                fetchState[timeframe] = {
-                    fetchState: 'In-Progress',
-                    error: undefined,
-                };
-                updateState(draft, action.payload.forecastId, { fetchState });
+                // Route by the fetch's own dates, not the global flag: a custom fetch
+                // (carries start/end) marks customFetchState so the shared fetchState the
+                // dashboard reads is never left In-Progress by a detail-screen fetch.
+                const isCustomDateRange = action.payload.startDate != null && action.payload.endDate != null;
+                if (isCustomDateRange) {
+                    const customFetchState = {
+                        ...(netBurnOrIncomeState.customFetchState ?? {
+                            month: { fetchState: 'Not-Started', error: undefined },
+                            quarter: { fetchState: 'Not-Started', error: undefined },
+                            year: { fetchState: 'Not-Started', error: undefined },
+                        }),
+                    };
+                    customFetchState[timeframe] = {
+                        fetchState: 'In-Progress',
+                        error: undefined,
+                    };
+                    updateState(draft, action.payload.forecastId, { customFetchState });
+                }
+                else {
+                    const fetchState = {
+                        ...netBurnOrIncomeState.fetchState,
+                    };
+                    fetchState[timeframe] = {
+                        fetchState: 'In-Progress',
+                        error: undefined,
+                    };
+                    updateState(draft, action.payload.forecastId, { fetchState });
+                }
             },
         },
         updateNetBurnOrIncomeForTimeframe(draft, action) {
-            doUpdateNetBurnOrIncome(draft, action.payload.forecastId, action.payload.timeframe, action.payload.report);
+            doUpdateNetBurnOrIncome(draft, action.payload.forecastId, action.payload.timeframe, action.payload.report, action.payload.isCustomDateRange === true);
         },
         updateNetBurnOrIncomeForTimeframeFailure: {
-            prepare(error, forecastId, timeframe) {
+            prepare(error, forecastId, timeframe, isCustomDateRange = false) {
                 return {
                     payload: {
                         error,
                         forecastId,
                         timeframe,
+                        isCustomDateRange,
                     },
                 };
             },
             reducer(draft, action) {
                 const netBurnOrIncome = getState(draft, draft.uiState.isForecastModeOn, action.payload.forecastId);
-                const fetchState = {
-                    ...netBurnOrIncome.fetchState,
-                };
-                fetchState[action.payload.timeframe] = {
-                    fetchState: 'Error',
-                    error: action.payload.error,
-                };
-                updateState(draft, action.payload.forecastId, { fetchState });
+                // Route the error like the request/success: a custom (dated) fetch's
+                // failure lands in customFetchState so the shared default the dashboard
+                // reads isn't marked Error, and the detail's customFetchState isn't left
+                // stuck In-Progress.
+                if (action.payload.isCustomDateRange === true) {
+                    const customFetchState = netBurnOrIncome.customFetchState ?? {
+                        month: { fetchState: 'Not-Started', error: undefined },
+                        quarter: { fetchState: 'Not-Started', error: undefined },
+                        year: { fetchState: 'Not-Started', error: undefined },
+                    };
+                    customFetchState[action.payload.timeframe] = {
+                        fetchState: 'Error',
+                        error: action.payload.error,
+                    };
+                    updateState(draft, action.payload.forecastId, { customFetchState });
+                }
+                else {
+                    const fetchState = {
+                        ...netBurnOrIncome.fetchState,
+                    };
+                    fetchState[action.payload.timeframe] = {
+                        fetchState: 'Error',
+                        error: action.payload.error,
+                    };
+                    updateState(draft, action.payload.forecastId, { fetchState });
+                }
             },
         },
         updateNetBurnOrIncomeCOABalancesRange(draft, action) {
+            if (action.payload.isCustomDateRange != null) {
+                if (action.payload.isCustomDateRange === true) {
+                    // Convert the string dates the action carries to ZeniDate values and
+                    // store as a single customTimeframe. Presence signals custom-mode active.
+                    draft.uiState.customTimeframe =
+                        action.payload.customStartDate != null &&
+                            action.payload.customEndDate != null
+                            ? {
+                                startDate: date(action.payload.customStartDate),
+                                endDate: date(action.payload.customEndDate),
+                            }
+                            : undefined;
+                    // Invalidate the shared default-window fetchState so dashboardEpic
+                    // refetches the default data on the next dashboard visit — the custom
+                    // fetch writes into the shared section store, and this lets the card
+                    // self-heal without a reload. The detail screen reads customFetchState.
+                    draft.netBurnOrIncome.fetchState = {
+                        month: { fetchState: 'Not-Started', error: undefined },
+                        quarter: { fetchState: 'Not-Started', error: undefined },
+                        year: { fetchState: 'Not-Started', error: undefined },
+                    };
+                }
+                else {
+                    draft.uiState.customTimeframe = undefined;
+                }
+            }
+            // A custom date range drives the visible window directly: honor the exact
+            // numberOfPeriods + thisPeriod from the payload instead of re-deriving
+            // (which clamps the range to the available/non-zero periods).
+            if (draft.uiState.customTimeframe != null) {
+                draft.uiState.selectedCOABalancesRange =
+                    action.payload.selectedCOABalancesRange;
+                if (action.payload.highlightedCOABalancesRange != null) {
+                    // Clamp the highlight to the same cap the non-custom path enforces so
+                    // a wide custom range doesn't highlight all N periods at once.
+                    draft.uiState.highlightedCOABalancesRange = {
+                        ...action.payload.highlightedCOABalancesRange,
+                        numberOfPeriods: Math.min(action.payload.highlightedCOABalancesRange.numberOfPeriods, draft.uiState.maxNumOfPeriodsToHighlight),
+                    };
+                }
+                return;
+            }
             // When thisPeriod changes the selected and highlighted balances ranges should be calculated based on full report period.
             const netBurnOrIncomeReport = getState(draft, undefined, undefined);
             const { income, cogs, expenses, dataAvailable } = netBurnOrIncomeReport;
@@ -190,6 +286,13 @@ const netBurnOrIncome = createSlice({
             }
         },
         updateNetBurnOrIncomeThisPeriod(draft, action) {
+            // In custom-date mode the picker drives the window; skip re-deriving the
+            // selected/highlighted ranges from the default dataAvailable (the epic
+            // re-dispatches the default thisPeriod on every month response, which
+            // would otherwise clamp the custom window back to the default).
+            if (draft.uiState.customTimeframe != null) {
+                return;
+            }
             // When thisPeriod changes the selected and highlighted balances ranges should be calculated based on full report period.
             const netBurnOrIncomeReport = getState(draft, undefined, undefined);
             const { income, cogs, expenses, dataAvailable } = netBurnOrIncomeReport;
@@ -241,7 +344,9 @@ const netBurnOrIncome = createSlice({
                     ? true
                     : false;
             // Note: We don't want to update selected & highlighted ranges in Ui State when forecast is ON
-            if (dataAvailable != null && draft.uiState.isForecastModeOn === false) {
+            if (dataAvailable != null &&
+                draft.uiState.isForecastModeOn === false &&
+                draft.uiState.customTimeframe == null) {
                 const coaBalances = getAvailableCOABalancesWithMostRecentNonZeroBalance(netBurnOrIncomeReport.firstMonthOfFY, timeframe, [expenses, income, cogs], dataAvailable);
                 const thisPeriod = extractThisPeriod(netBurnOrIncomeReport.firstMonthOfFY, timeframe, selectedCOABalancesRange, coaBalances);
                 if (thisPeriod != null &&
@@ -284,7 +389,7 @@ const netBurnOrIncome = createSlice({
                 draft.uiState.maxNumOfPeriodsToHighlight =
                     initialState.uiState.maxNumOfPeriodsToHighlight;
             }
-            if (dataAvailable != null) {
+            if (dataAvailable != null && draft.uiState.customTimeframe == null) {
                 const timeframe = draft.uiState.timeframe;
                 const coaBalances = getAvailableCOABalancesWithMostRecentNonZeroBalance(netBurnOrIncomeReport.firstMonthOfFY, timeframe, [expenses, income, cogs], dataAvailable);
                 const selectionRanges = getInitialSelectedAndHighlightedRanges({
@@ -339,34 +444,73 @@ const netBurnOrIncome = createSlice({
 });
 export const { fetchNetBurnOrIncome, fetchNetBurnOrIncomeForTimeframe, updateNetBurnOrIncomeForTimeframe, updateNetBurnOrIncomeForTimeframeFailure, updateNetBurnOrIncomeThisPeriod, updateNetBurnOrIncomeUIState, updateNetBurnOrIncomeAdditionalBalancesSelection, updateNetBurnOrIncomeCOABalancesRange, netBurnOrIncomeToggleForecastMode, updateNetBurnOrIncomeTimeFrame, updateNetBurnOrIncomeDownloadState, fetchNetBurnOrIncomeWithForecast, waitForForecastListThenFetchNetBurnOrIncomeWithForecast, } = netBurnOrIncome.actions;
 export default netBurnOrIncome.reducer;
-const doUpdateNetBurnOrIncome = (draft, forecastId, timeframe, data) => {
+const doUpdateNetBurnOrIncome = (draft, forecastId, timeframe, data, isCustomDateRange) => {
     const netBurnOrIncome = getState(draft, draft.uiState.isForecastModeOn, forecastId);
     const report = mapReportPayloadV2ToReportV2(data.report);
     const { expenses, income, cogs, net_burn_or_income, insights, currency, runway, } = data.report;
     const expensesCOABalance = mapCOABalanceGroupedByPeriodPayloadV2ToCOABalanceGroupedByPeriod(expenses, currency, timeframe);
     const incomeCOABalance = mapCOABalanceGroupedByPeriodPayloadV2ToCOABalanceGroupedByPeriod(income, currency, timeframe);
     const cogsCOABalance = mapCOABalanceGroupedByPeriodPayloadV2ToCOABalanceGroupedByPeriod(cogs, currency, timeframe);
-    netBurnOrIncome.expenses = Object.assign({}, netBurnOrIncome.expenses, expensesCOABalance);
-    netBurnOrIncome.income = Object.assign({}, netBurnOrIncome.income, incomeCOABalance);
-    netBurnOrIncome.cogs = Object.assign({}, netBurnOrIncome.cogs, cogsCOABalance);
-    if (timeframe === 'month' && insights != null) {
+    // Route custom-date results (identified by the fetch's own dates, not the
+    // global flag) to the separate slots so the dashboard card (which reads
+    // income/cogs/expenses) keeps the default window.
+    if (isCustomDateRange) {
+        netBurnOrIncome.customExpenses = Object.assign({}, netBurnOrIncome.customExpenses, expensesCOABalance);
+        netBurnOrIncome.customIncome = Object.assign({}, netBurnOrIncome.customIncome, incomeCOABalance);
+        netBurnOrIncome.customCogs = Object.assign({}, netBurnOrIncome.customCogs, cogsCOABalance);
+    }
+    else {
+        netBurnOrIncome.expenses = Object.assign({}, netBurnOrIncome.expenses, expensesCOABalance);
+        netBurnOrIncome.income = Object.assign({}, netBurnOrIncome.income, incomeCOABalance);
+        netBurnOrIncome.cogs = Object.assign({}, netBurnOrIncome.cogs, cogsCOABalance);
+    }
+    // Insights and runway/averages are shared (read by the dashboard card); a
+    // custom-date slice must not overwrite them with its partial window.
+    if (timeframe === 'month' && insights != null && !isCustomDateRange) {
         // we will get insights only in the month timeframe api
         netBurnOrIncome.insights = mapInsightsPayloadtoInsightsState(insights);
     }
-    netBurnOrIncome.runwayAndAverages = mapRunwayPayloadtoRunwayState(runway, net_burn_or_income.averages?.months, data.report.currency);
-    const expensesOrIncome = netBurnOrIncome.expenses != null
-        ? netBurnOrIncome.expenses
-        : netBurnOrIncome.income;
-    netBurnOrIncome.dataAvailable = report.dataAvailable
-        ? report.dataAvailable
-        : getDataAvailableDateRange(expensesOrIncome);
+    if (!isCustomDateRange) {
+        netBurnOrIncome.runwayAndAverages = mapRunwayPayloadtoRunwayState(runway, net_burn_or_income.averages?.months, data.report.currency);
+    }
+    // Derive dataAvailable from the slot this fetch actually populated.
+    const expensesOrIncome = isCustomDateRange
+        ? netBurnOrIncome.customExpenses != null
+            ? netBurnOrIncome.customExpenses
+            : netBurnOrIncome.customIncome
+        : netBurnOrIncome.expenses != null
+            ? netBurnOrIncome.expenses
+            : netBurnOrIncome.income;
+    // Don't let a custom slice shrink the shared dataAvailable the dashboard uses
+    // for its period count; a default fetch always updates it, a custom one only
+    // populates it on first load (when nothing has set it yet).
+    if (!isCustomDateRange || netBurnOrIncome.dataAvailable == null) {
+        netBurnOrIncome.dataAvailable = report.dataAvailable
+            ? report.dataAvailable
+            : getDataAvailableDateRange(expensesOrIncome ?? {});
+    }
     netBurnOrIncome.firstMonthOfFY = report.firstMonthOfFY;
     netBurnOrIncome.bookCloseDate = report.bookCloseDate;
-    netBurnOrIncome.fetchState[timeframe].fetchState = 'Completed';
-    netBurnOrIncome.fetchState[timeframe].error = undefined;
+    // Mark the matching fetchState Completed. A custom fetch uses customFetchState so
+    // dashboardEpic's Completed check on the default fetchState is untouched.
+    if (isCustomDateRange) {
+        const customFetchState = netBurnOrIncome.customFetchState ?? {
+            month: { fetchState: 'Not-Started', error: undefined },
+            quarter: { fetchState: 'Not-Started', error: undefined },
+            year: { fetchState: 'Not-Started', error: undefined },
+        };
+        customFetchState[timeframe] = { fetchState: 'Completed', error: undefined };
+        netBurnOrIncome.customFetchState = customFetchState;
+    }
+    else {
+        netBurnOrIncome.fetchState[timeframe].fetchState = 'Completed';
+        netBurnOrIncome.fetchState[timeframe].error = undefined;
+    }
     if (netBurnOrIncome.dataAvailable != null &&
-        forecastId == null // Note: We don't want to update selected & highlighted ranges in Ui State when forecast is ON
-    ) {
+        forecastId == null && // Note: We don't want to update selected & highlighted ranges in Ui State when forecast is ON
+        // A custom date range drives the window; don't reset it to the default on
+        // every report receipt (this is what clamped wide ranges back to 8).
+        draft.uiState.customTimeframe == null) {
         const timeframe = draft.uiState.timeframe;
         const coaBalances = getAvailableCOABalancesWithMostRecentNonZeroBalance(netBurnOrIncome.firstMonthOfFY, timeframe, [netBurnOrIncome.expenses, netBurnOrIncome.income, netBurnOrIncome.cogs], netBurnOrIncome.dataAvailable);
         const selectionRanges = getInitialSelectedAndHighlightedRanges({

package/lib/esm/view/netBurnOrIncome/netBurnOrIncomeSelector.js

@@ -60,18 +60,28 @@ export const getNetBurnOrIncomeUIState = createSelector((state) => state.netBurn
         scrollPosition,
     };
 });
-export const getNetBurnOrIncomeReport = (accountState, accountGroupState, sectionsState, netBurnOrIncomeState, forecastState, forecastListState, filter, forecastId) => {
+export const getNetBurnOrIncomeReport = (accountState, accountGroupState, sectionsState, netBurnOrIncomeState, forecastState, forecastListState, filter, forecastId, readCustomRangeSlot) => {
     const netBurnOrIncome = getState(netBurnOrIncomeState, netBurnOrIncomeState.uiState.isForecastModeOn, forecastId);
+    // Custom detail reads the isolated custom section-accounts slot; dashboard
+    // (no flag) reads the default slot, so a default fetch can't clobber it.
+    const useCustomRange = readCustomRangeSlot === true &&
+        netBurnOrIncomeState.uiState.customTimeframe != null;
+    // The detail screen opts into customFetchState so its Completed check fires
+    // off the custom fetch; the dashboard (no flag) reads the shared fetchState,
+    // which custom-mode activation reset to Not-Started so dashboardEpic refetches.
+    const activeFetchState = useCustomRange && netBurnOrIncome.customFetchState != null
+        ? netBurnOrIncome.customFetchState
+        : netBurnOrIncome.fetchState;
     const fetchState = reduceAnyFetchState([
-        netBurnOrIncome.fetchState.month,
-        netBurnOrIncome.fetchState.quarter,
-        netBurnOrIncome.fetchState.year,
+        activeFetchState.month,
+        activeFetchState.quarter,
+        activeFetchState.year,
     ]);
     let allTimeframeTicks = [];
     const dataAvailable = netBurnOrIncomeState.netBurnOrIncome.dataAvailable;
     if (dataAvailable != null) {
         const noFilter = newBalancesFilterForDateRange(netBurnOrIncomeState.netBurnOrIncome.firstMonthOfFY, netBurnOrIncomeState.uiState.timeframe, dataAvailable, 'ascending_date', []);
-        const reportId = reportIdUniqueKey();
+        const reportId = reportIdUniqueKey(undefined, useCustomRange);
         const incomeBalance = getSectionBalances(sectionsState, {
             reportId,
             sectionId: 'income',
@@ -88,7 +98,7 @@ export const getNetBurnOrIncomeReport = (accountState, accountGroupState, sectio
             : getCOABalances(incomeBalance, noFilter);
         allTimeframeTicks = incomeOrExpensesBalances.balances.map((balance) => toTimeframeTick(balance));
     }
-    const reportId = reportIdUniqueKey(forecastId);
+    const reportId = reportIdUniqueKey(forecastId, useCustomRange);
     const sections = {};
     const calculatedSections = {};
     if (fetchState.fetchState === 'Completed') {
@@ -135,6 +145,8 @@ export const getNetBurnOrIncomeReport = (accountState, accountGroupState, sectio
         allTimeframeTicks,
         forecastList,
         runwayAndAverages: netBurnOrIncome.runwayAndAverages,
+        // Surface the saved custom timeframe so the detail picker can restore them.
+        customTimeframe: netBurnOrIncomeState.uiState.customTimeframe,
     };
 };
 export const getNetBurnOrIncomeForSelectedRange = createSelector((state) => state.accountState, (state) => state.accountGroupState, (state) => state.sectionAccountsViewState, (state) => state.netBurnOrIncomeState, (state) => state.forecastState, (state) => state.forecastListState, (accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState) => {
@@ -144,7 +156,10 @@ export const getNetBurnOrIncomeForSelectedRange = createSelector((state) => stat
         selectedForecast?.id != null &&
         getNetBurnOrIncomeReportFetchState(selectedForecast.id, netBurnOrIncomeWithForecastState).fetchState === 'Completed'
         ? getNetBurnOrIncomeWithForecastOnDataAvailableDateRange(noFilter, selectedForecast?.id, accountState, accountGroupState, sectionAccountsViewState, forecastListState, netBurnOrIncomeWithForecastState, forecastState)
-        : getNetBurnOrIncomeReport(accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState, noFilter, selectedForecast?.id);
+        : getNetBurnOrIncomeReport(accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState, noFilter, selectedForecast?.id, 
+        // Detail selectors read the custom slot when the detail is in custom
+        // mode; the dashboard's last-periods selector does not.
+        netBurnOrIncomeWithForecastState.uiState.customTimeframe != null);
 });
 export const getNetBurnOrIncomeForHighlightedRange = createSelector((state) => state.accountState, (state) => state.accountGroupState, (state) => state.sectionAccountsViewState, (state) => state.netBurnOrIncomeState, (state) => state.forecastState, (state) => state.forecastListState, (accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState) => {
     const { timeframe, highlightedCOABalancesRange, selectedAdditionalBalances, maxNumOfPeriodsToHighlight, selectedForecast, isForecastModeOn, } = netBurnOrIncomeWithForecastState.uiState;
@@ -154,7 +169,10 @@ export const getNetBurnOrIncomeForHighlightedRange = createSelector((state) => s
         selectedForecast?.id != null &&
         getNetBurnOrIncomeReportFetchState(selectedForecast.id, netBurnOrIncomeWithForecastState).fetchState === 'Completed'
         ? getNetBurnOrIncomeWithForecastOnDataAvailableDateRange(filter, selectedForecast?.id, accountState, accountGroupState, sectionAccountsViewState, forecastListState, netBurnOrIncomeWithForecastState, forecastState)
-        : getNetBurnOrIncomeReport(accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState, filter, selectedForecast?.id);
+        : getNetBurnOrIncomeReport(accountState, accountGroupState, sectionAccountsViewState, netBurnOrIncomeWithForecastState, forecastState, forecastListState, filter, selectedForecast?.id, 
+        // Detail selectors read the custom slot when the detail is in custom
+        // mode; the dashboard's last-periods selector does not.
+        netBurnOrIncomeWithForecastState.uiState.customTimeframe != null);
 });
 export const getNetBurnOrIncomeReportFetchState = (forecastId, netBurnOrIncomeState) => {
     const netBurnOrIncome = getState(netBurnOrIncomeState, forecastId != null, forecastId);

package/lib/esm/view/opEx/opExEpic.js

@@ -2,12 +2,12 @@ import { from } from 'rxjs';
 import { filter, switchMap } from 'rxjs/operators';
 import { fetchOpEx, fetchOpExReportForTimeframe, getState } from './opExReducer';
 export const fetchOpExEpic = (actions$, state) => actions$.pipe(filter(fetchOpEx.match), switchMap((action) => {
-    const { cacheOverride, forecastId } = action.payload;
+    const { cacheOverride, endDate, forecastId, startDate } = action.payload;
     if (cacheOverride === true) {
         return from([
-            fetchOpExReportForTimeframe('month', forecastId),
-            fetchOpExReportForTimeframe('quarter', forecastId),
-            fetchOpExReportForTimeframe('year', forecastId),
+            fetchOpExReportForTimeframe('month', forecastId, true, false, startDate, endDate),
+            fetchOpExReportForTimeframe('quarter', forecastId, true, false, startDate, endDate),
+            fetchOpExReportForTimeframe('year', forecastId, true, false, startDate, endDate),
         ]);
     }
     else {
@@ -16,15 +16,15 @@ export const fetchOpExEpic = (actions$, state) => actions$.pipe(filter(fetchOpEx
         const timeframeFetchState = opExState.fetchState;
         if (timeframeFetchState['month'].fetchState !== 'In-Progress' &&
             timeframeFetchState['month'].fetchState !== 'Completed') {
-            fetchActions.push(fetchOpExReportForTimeframe('month', forecastId));
+            fetchActions.push(fetchOpExReportForTimeframe('month', forecastId, true, false, startDate, endDate));
         }
         if (timeframeFetchState['quarter'].fetchState !== 'In-Progress' &&
             timeframeFetchState['quarter'].fetchState !== 'Completed') {
-            fetchActions.push(fetchOpExReportForTimeframe('quarter', forecastId));
+            fetchActions.push(fetchOpExReportForTimeframe('quarter', forecastId, true, false, startDate, endDate));
         }
         if (timeframeFetchState['year'].fetchState !== 'In-Progress' &&
             timeframeFetchState['year'].fetchState !== 'Completed') {
-            fetchActions.push(fetchOpExReportForTimeframe('year', forecastId));
+            fetchActions.push(fetchOpExReportForTimeframe('year', forecastId, true, false, startDate, endDate));
         }
         return from(fetchActions);
     }

package/lib/esm/view/opEx/opExForTimeFrameEpic.js

@@ -5,9 +5,15 @@ import { updateSectionAccountsView } from '../../entity/sectionAccountsView/sect
 import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
 import { getTimeSeriesGroup } from '../common/reportsHelpers';
 import { fetchOpExReportForTimeframe, updateOpExFailureForTimeframe, updateOpExForTimeframe, updateOpExThisPeriod, } from './opExReducer';
-export const reportIdUniqueKey = (forecastId) => forecastId != null
-    ? `operating_expenses+${forecastId}`
-    : 'operating_expenses';
+// Reserved forecast-slot marker so custom-date section-accounts data lives under
+// its own key (operating_expenses+<marker>) and a default fetch can never
+// overwrite it. Real forecast ids are UUIDs, so this never collides.
+export const CUSTOM_DATE_RANGE_SECTION_MARKER = '__custom_date_range__';
+export const reportIdUniqueKey = (forecastId, isCustomDateRange) => isCustomDateRange === true
+    ? `operating_expenses+${CUSTOM_DATE_RANGE_SECTION_MARKER}`
+    : forecastId != null
+        ? `operating_expenses+${forecastId}`
+        : 'operating_expenses';
 export const fetchOpExReportForTimeframeEpic = (actions$, state, zeniAPI) => actions$.pipe(filter(fetchOpExReportForTimeframe.match), mergeMap((action) => {
     const queryValue = {
         is_full_response: action.payload.fetchFullReport,
@@ -18,16 +24,23 @@ export const fetchOpExReportForTimeframeEpic = (actions$, state, zeniAPI) => act
         queryValue.forecast_id = action.payload.forecastId;
         queryValue.is_forecast_vs_actual = true;
     }
+    if (action.payload.startDate != null && action.payload.endDate != null) {
+        queryValue.custom_start_date = action.payload.startDate;
+        queryValue.custom_end_date = action.payload.endDate;
+    }
     return zeniAPI
         .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/2.0/reports/operating_expenses?query=${encodeURIComponent(JSON.stringify(queryValue))}`)
         .pipe(mergeMap((response) => {
         if (response.data != null && isSuccessResponse(response)) {
             const actions = [];
-            actions.push(updateSectionAccountsView(action.payload.timeframe, 'expenses', reportIdUniqueKey(action.payload.forecastId), response.data.report.expenses, response.data.report.accounts, response.data.report.account_groups, response.data.report.currency));
+            actions.push(updateSectionAccountsView(action.payload.timeframe, 'expenses', reportIdUniqueKey(action.payload.forecastId, action.payload.startDate != null &&
+                action.payload.endDate != null), response.data.report.expenses, response.data.report.accounts, response.data.report.account_groups, response.data.report.currency));
             actions.push(updateOpExForTimeframe({
                 timeframe: action.payload.timeframe,
                 forecastId: action.payload.forecastId,
                 report: response.data,
+                isCustomDateRange: action.payload.startDate != null &&
+                    action.payload.endDate != null,
             }));
             if (action.payload.forecastId == null &&
                 action.payload.timeframe === 'month') {
@@ -42,7 +55,9 @@ export const fetchOpExReportForTimeframeEpic = (actions$, state, zeniAPI) => act
             return from(actions);
         }
         else {
-            return of(updateOpExFailureForTimeframe(response.status, action.payload.forecastId, action.payload.timeframe));
+            return of(updateOpExFailureForTimeframe(response.status, action.payload.forecastId, action.payload.timeframe, action.payload.startDate != null &&
+                action.payload.endDate != null));
         }
-    }), catchError((error) => of(updateOpExFailureForTimeframe(createZeniAPIStatus('Unexpected error', 'OpEx REST API call errored out' + JSON.stringify(error)), action.payload.forecastId, action.payload.timeframe))));
+    }), catchError((error) => of(updateOpExFailureForTimeframe(createZeniAPIStatus('Unexpected error', 'OpEx REST API call errored out' + JSON.stringify(error)), action.payload.forecastId, action.payload.timeframe, action.payload.startDate != null &&
+        action.payload.endDate != null))));
 }));