@zeniai/client-epic-state 5.2.93-betaNB2 → 5.2.94-betaNB1

package/lib/commonStateTypes/timeframeTick.d.ts

@@ -9,6 +9,7 @@ export interface TimeframeTick {
 export interface TimeframeTickWithMetaData extends TimeframeTick {
     balanceType: COABalanceType;
     currencySymbol: string;
+    label?: string;
 }
 export declare const toTimeframeTick: (balance: COABalance) => TimeframeTickWithMetaData;
 export declare const toTimePeriod: (tick: TimeframeTick) => TimePeriod;

package/lib/commonStateTypes/timeframeTick.js

@@ -8,6 +8,7 @@ const toTimeframeTick = (balance) => ({
     endDate: balance.endDate,
     currencySymbol: balance.balance.currencySymbol,
     balanceType: balance.type,
+    label: balance.label,
 });
 exports.toTimeframeTick = toTimeframeTick;
 const toTimePeriod = (tick) => ({

package/lib/commonStateTypes/viewAndReport/reportUIState.d.ts

@@ -2,6 +2,7 @@ import { COABalanceMonthQuarterYearTimeframe } from '../coaBalance/coaBalance';
 import { COABalanceType } from '../coaBalance/coaBalanceType';
 import { COABalancesOrder, COABalancesRange, COABalancesRangeWithThisPeriod } from '../coaBalance/coaBalancesFilter';
 import { FetchState, ID } from '../common';
+import { TimeframeTick } from '../timeframeTick';
 import { ReportFormat } from './viewAndReport';
 export interface ReportUIState {
     displayOrder: COABalancesOrder;
@@ -12,6 +13,7 @@ export interface ReportUIState {
     selectedAdditionalBalances: COABalanceType[];
     selectedCOABalancesRange: COABalancesRange;
     timeframe: COABalanceMonthQuarterYearTimeframe;
+    customTimeframe?: TimeframeTick;
     highlightedCOABalancesRange?: COABalancesRangeWithThisPeriod;
     isForecastModeOn?: boolean;
     selectedForecast?: {

package/lib/commonStateTypes/viewAndReport/viewAndReport.d.ts

@@ -3,6 +3,7 @@ import { FetchStateAndError, ID } from '../common';
 import { DataAvailable } from '../dataAvailable';
 import { Status } from '../status';
 import { Month } from '../timePeriod';
+import { TimeframeTick } from '../timeframeTick';
 export declare const ALL_REPORT_IDS: readonly ["cash_balance", "card_balance", "expense_automation_card", "operating_expenses", "operating_expenses_by_classes", "operating_expenses_by_projects", "revenue", "revenue_by_classes", "revenue_by_projects", "net_burn_or_income", "net_burn_or_income_story_card", "net_burn_or_income_by_classes", "net_burn_or_income_by_projects", "cash_position", "top_expenses", "profit_and_loss", "profit_and_loss_by_classes", "profit_and_loss_by_projects", "balance_sheet", "balance_sheet_by_classes", "balance_sheet_by_projects", "cash_flow", "cash_flow_by_classes", "cash_flow_by_projects", "dashboard", "finance_statement", "transaction_list_of_account", "transaction_list_missing_receipt", "transaction_list_of_account_by_class", "transaction_list_of_account_by_project", "transaction_detail", "cash_in_cash_out", "insights_dashboard", "company_details", "class_list", "account_list", "account_list_by_type", "vendor", "task_card", "bill_pay", "reimbursement", "bill_pay_card", "reimbursement_card", "bill_pay_promo_card", "zeni_accounts", "zeni_accounts_promo_card", "zeni_treasury", "charge_cards", "other_connection", "reimbursement_promo_card", "onboarding", "operating_expenses_by_vendor", "operating_expenses_by_vendor_summary", "vendors_tab", "accounts_payable_aging", "accounts_receivable_aging", "vendor_global_review", "prepaid_expenses", "fixed_assets", "notification", "rewards_card", "billing", "flux_analysis_operating_expense", "account_reconciliation", "zeni_credit_promo_card", "treasury_promo_card", "excluded_account_reconciliation", "transfer_accounts", "credit_card_transfer_accounts"];
 export declare const toReportID: (v: string) => "cash_balance" | "card_balance" | "expense_automation_card" | "operating_expenses" | "operating_expenses_by_classes" | "operating_expenses_by_projects" | "revenue" | "revenue_by_classes" | "revenue_by_projects" | "net_burn_or_income" | "net_burn_or_income_story_card" | "net_burn_or_income_by_classes" | "net_burn_or_income_by_projects" | "cash_position" | "top_expenses" | "profit_and_loss" | "profit_and_loss_by_classes" | "profit_and_loss_by_projects" | "balance_sheet" | "balance_sheet_by_classes" | "balance_sheet_by_projects" | "cash_flow" | "cash_flow_by_classes" | "cash_flow_by_projects" | "dashboard" | "finance_statement" | "transaction_list_of_account" | "transaction_list_missing_receipt" | "transaction_list_of_account_by_class" | "transaction_list_of_account_by_project" | "transaction_detail" | "cash_in_cash_out" | "insights_dashboard" | "company_details" | "class_list" | "account_list" | "account_list_by_type" | "vendor" | "task_card" | "bill_pay" | "reimbursement" | "bill_pay_card" | "reimbursement_card" | "bill_pay_promo_card" | "zeni_accounts" | "zeni_accounts_promo_card" | "zeni_treasury" | "charge_cards" | "other_connection" | "reimbursement_promo_card" | "onboarding" | "operating_expenses_by_vendor" | "operating_expenses_by_vendor_summary" | "vendors_tab" | "accounts_payable_aging" | "accounts_receivable_aging" | "vendor_global_review" | "prepaid_expenses" | "fixed_assets" | "notification" | "rewards_card" | "billing" | "flux_analysis_operating_expense" | "account_reconciliation" | "zeni_credit_promo_card" | "treasury_promo_card" | "excluded_account_reconciliation" | "transfer_accounts" | "credit_card_transfer_accounts";
 export type ReportID = ReturnType<typeof toReportID>;
@@ -30,6 +31,7 @@ export interface Report extends View {
  */
 export interface SelectorReport extends Report, FetchStateAndError {
     availableNumberOfPeriods?: number;
+    customTimeframe?: TimeframeTick;
     [key: string]: unknown;
 }
 export type PageToken = string | null;

package/lib/esm/commonStateTypes/timeframeTick.js

@@ -5,6 +5,7 @@ export const toTimeframeTick = (balance) => ({
     endDate: balance.endDate,
     currencySymbol: balance.balance.currencySymbol,
     balanceType: balance.type,
+    label: balance.label,
 });
 export const toTimePeriod = (tick) => ({
     start: toAbsoluteDay(tick.startDate.format('YYYY-MM-DD')), // eslint-disable-line @typescript-eslint/no-non-null-assertion

package/lib/esm/view/balanceSheet/balanceSheetForTimeframeEpic.js

@@ -20,6 +20,10 @@ export const fetchBalanceSheetForTimeframeEpic = (actions$, _, zeniAPI) => actio
         is_full_response: action.payload.fetchFullReport,
         time_series_groups: [getTimeSeriesGroup(action.payload.timeframe)],
     };
+    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/balance_sheet?query=${encodeURIComponent(JSON.stringify(queryValue))}`)
         .pipe(mergeMap((response) => {

package/lib/esm/view/balanceSheet/balanceSheetReducer.js

@@ -45,9 +45,15 @@ const balanceSheet = createSlice({
             },
         },
         fetchBalanceSheetForTimeframe: {
-            prepare(timeframe, fetchFullReport = true, cacheOverride = false) {
+            prepare(timeframe, fetchFullReport = true, cacheOverride = false, startDate, endDate) {
                 return {
-                    payload: { timeframe, fetchFullReport, cacheOverride },
+                    payload: {
+                        timeframe,
+                        fetchFullReport,
+                        cacheOverride,
+                        startDate,
+                        endDate,
+                    },
                 };
             },
             reducer(draft, action) {

package/lib/esm/view/cashFlow/cashFlowForTimeframeEpic.js

@@ -20,6 +20,10 @@ export const fetchCashFlowForTimeframeEpic = (actions$, _, zeniAPI) => actions$.
         is_full_response: action.payload.fetchFullReport,
         time_series_groups: [getTimeSeriesGroup(action.payload.timeframe)],
     };
+    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/cash_flow?query=${encodeURIComponent(JSON.stringify(queryValue))}`)
         .pipe(mergeMap((response) => {

package/lib/esm/view/cashFlow/cashFlowReducer.js

@@ -43,9 +43,9 @@ const cashFlow = createSlice({
             },
         },
         fetchCashFlowForTimeframe: {
-            prepare(timeframe, fetchFullReport = true) {
+            prepare(timeframe, fetchFullReport = true, startDate, endDate) {
                 return {
-                    payload: { timeframe, fetchFullReport },
+                    payload: { timeframe, fetchFullReport, startDate, endDate },
                 };
             },
             reducer(draft, action) {

package/lib/esm/view/cashInCashOut/cashInCashOutEpic.js

@@ -4,17 +4,25 @@ import { updateAccounts } from '../../entity/account/accountReducer';
 import { updateAccountGroups } from '../../entity/accountGroup/accountGroupReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
 import { fetchCashInCashOut, updateCashInCashOut, updateCashInCashOutFailure, updateCashInCashOutThisPeriod, } from './cashInCashOutReducer';
-export const fetchCashInCashOutEpic = (actions$, state, zeniAPI) => actions$.pipe(filter(fetchCashInCashOut.match), switchMap(() => zeniAPI
-    .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/reports/cash_in_cash_out`)
-    .pipe(mergeMap((response) => {
-    if (isSuccessResponse(response)) {
-        return of(updateAccounts(response.data?.report.accounts ?? [], 'cash_in_cash_out'), updateAccountGroups(response.data?.report.account_groups ?? [], 'cash_in_cash_out'), updateCashInCashOut(response.data), // eslint-disable-line @typescript-eslint/no-non-null-assertion
-        updateCashInCashOutThisPeriod({
-            thisPeriod: state.value.reportUIOptionsState.thisPeriod,
-        }));
-    }
-    else {
-        return of(updateCashInCashOutFailure(response.status));
-    }
-}), catchError((error) => of(updateCashInCashOutFailure(createZeniAPIStatus('Unexpected error', 'CashInCashOut REST API call errored out' +
-    JSON.stringify(error))))))));
+export const fetchCashInCashOutEpic = (actions$, state, zeniAPI) => actions$.pipe(filter(fetchCashInCashOut.match), switchMap((action) => {
+    const { startDate, endDate } = action.payload;
+    // Route by the fetch's own dates, not a global flag: a custom fetch carries
+    // start/end, so its results land in the isolated custom slots and the
+    // dashboard's default window is untouched.
+    const isCustomDateRange = startDate != null && endDate != null;
+    const url = `${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/reports/cash_in_cash_out${isCustomDateRange
+        ? `?query=${encodeURIComponent(JSON.stringify({ custom_end_date: endDate, custom_start_date: startDate }))}`
+        : ''}`;
+    return zeniAPI.getJSON(url).pipe(mergeMap((response) => {
+        if (isSuccessResponse(response)) {
+            return of(updateAccounts(response.data?.report.accounts ?? [], 'cash_in_cash_out'), updateAccountGroups(response.data?.report.account_groups ?? [], 'cash_in_cash_out'), updateCashInCashOut(response.data, isCustomDateRange), // eslint-disable-line @typescript-eslint/no-non-null-assertion
+            updateCashInCashOutThisPeriod({
+                thisPeriod: state.value.reportUIOptionsState.thisPeriod,
+            }));
+        }
+        else {
+            return of(updateCashInCashOutFailure(response.status, isCustomDateRange));
+        }
+    }), catchError((error) => of(updateCashInCashOutFailure(createZeniAPIStatus('Unexpected error', 'CashInCashOut REST API call errored out' +
+        JSON.stringify(error)), isCustomDateRange))));
+}));

package/lib/esm/view/cashInCashOut/cashInCashOutReducer.js

@@ -5,6 +5,7 @@ import { getDataAvailableDateRange, getNumberOfPeriods, } from '../../commonStat
 import { extractThisPeriod, getMatchingThisPeriod, } from '../../commonStateTypes/viewAndReport/thisPeriodHelpers';
 import { mapInsightsPayloadtoInsightsState } from '../../entity/insights/insightSummaryPayload';
 import { clearAll } from '../../rootActions';
+import { date } from '../../zeniDayJS';
 import { getAvailableCOABalancesWithMostRecentNonZeroBalance, getInitialSelectedAndHighlightedRanges, getSelectedAndHighlightedRangesForNewSelection, getSelectedAndHighlightedRangesForThisPeriod, } from '../common/getSelectedAndHighlightedRanges';
 export const defaultPeriods = {
     numberOfPeriods: 5,
@@ -15,6 +16,10 @@ export const initialState = {
     cashIn: undefined,
     cashOut: undefined,
     netCashFlow: undefined,
+    customCashIn: undefined,
+    customCashOut: undefined,
+    customNetCashFlow: undefined,
+    customFetchState: undefined,
     dataAvailable: undefined,
     firstMonthOfFY: 1,
     reportId: 'cash_in_cash_out',
@@ -49,49 +54,118 @@ const cashInCashOut = createSlice({
     name: 'cashInCashOut',
     initialState,
     reducers: {
-        fetchCashInCashOut(draft) {
-            draft.fetchState = 'In-Progress';
-            draft.error = undefined;
+        fetchCashInCashOut: {
+            prepare(startDate, endDate) {
+                return { payload: { endDate, startDate } };
+            },
+            reducer(draft, action) {
+                // Route by per-fetch dates: a custom (dated) fetch marks only the
+                // isolated customFetchState so the shared fetchState the dashboard reads
+                // stays as custom-mode activation left it (self-heal), and the shared
+                // error isn't cleared by a detail-only fetch.
+                if (action.payload.startDate != null &&
+                    action.payload.endDate != null) {
+                    draft.customFetchState = 'In-Progress';
+                }
+                else {
+                    draft.fetchState = 'In-Progress';
+                    draft.error = undefined;
+                }
+            },
         },
-        updateCashInCashOut(draft, action) {
-            draft.fetchState = 'Completed';
-            draft.error = undefined;
-            const report = mapReportPayloadToReport(action.payload.report);
-            Object.assign(draft, report);
-            const { cash_in, cash_out, net_cash_flow, insights } = action.payload.report;
-            draft.cashIn =
-                mapCOABalanceGroupedWithIDsPayloadToCOABalanceGroupedWithIDs(cash_in);
-            draft.cashOut =
-                mapCOABalanceGroupedWithIDsPayloadToCOABalanceGroupedWithIDs(cash_out);
-            draft.netCashFlow =
-                mapCOABalanceGroupedPayloadToCOABalanceGrouped(net_cash_flow);
-            draft.insights = mapInsightsPayloadtoInsightsState(insights);
-            const cashInOrCashOut = draft.cashIn != null ? draft.cashIn : draft.cashOut;
-            draft.dataAvailable = report.dataAvailable
-                ? report.dataAvailable
-                : getDataAvailableDateRange(cashInOrCashOut);
-            if (draft.dataAvailable != null) {
-                const timeframe = draft.uiState.timeframe;
-                const coaBalances = getAvailableCOABalancesWithMostRecentNonZeroBalance(draft.firstMonthOfFY, timeframe, [draft.cashIn, draft.cashOut], draft.dataAvailable);
-                const selectionRanges = getInitialSelectedAndHighlightedRanges({
-                    firstMonthOfFY: draft.firstMonthOfFY,
-                    timeframe,
-                    coaBalances,
-                    orderBy: 'ascending_date',
-                    maxNumOfPeriodsToSelect: defaultPeriods.numberOfPeriods,
-                    maxNumOfPeriodsToHighlight: initialState.uiState.maxNumOfPeriodsToHighlight,
-                });
-                if (selectionRanges?.selectedCOABalancesRange != null) {
-                    draft.uiState.selectedCOABalancesRange =
-                        selectionRanges?.selectedCOABalancesRange;
+        updateCashInCashOut: {
+            prepare(data, isCustomDateRange = false) {
+                return { payload: { data, isCustomDateRange } };
+            },
+            reducer(draft, action) {
+                const isCustomDateRange = action.payload.isCustomDateRange === true;
+                // A custom (dated) fetch marks the isolated scalar customFetchState so the
+                // shared fetchState the dashboard reads via hasValidState() stays as
+                // custom-mode activation left it (Not-Started), letting the card self-heal.
+                if (isCustomDateRange) {
+                    draft.customFetchState = 'Completed';
                 }
-                draft.uiState.highlightedCOABalancesRange =
-                    selectionRanges?.highlightedCOABalancesRange;
-            }
+                else {
+                    draft.fetchState = 'Completed';
+                    draft.error = undefined;
+                }
+                const report = mapReportPayloadToReport(action.payload.data.report);
+                // A custom (dated) fetch must not overwrite the shared report fields the
+                // dashboard card reads (firstMonthOfFY, bookCloseDate, reportTitle,
+                // status, version) — only its isolated custom* slots below.
+                if (!isCustomDateRange) {
+                    Object.assign(draft, report);
+                }
+                const { cash_in, cash_out, net_cash_flow, insights } = action.payload.data.report;
+                const mappedCashIn = mapCOABalanceGroupedWithIDsPayloadToCOABalanceGroupedWithIDs(cash_in);
+                const mappedCashOut = mapCOABalanceGroupedWithIDsPayloadToCOABalanceGroupedWithIDs(cash_out);
+                const mappedNetCashFlow = mapCOABalanceGroupedPayloadToCOABalanceGrouped(net_cash_flow);
+                // Route custom-date results to the separate slots so the dashboard card
+                // (which reads cashIn/cashOut/netCashFlow) keeps the default window.
+                if (isCustomDateRange) {
+                    draft.customCashIn = mappedCashIn;
+                    draft.customCashOut = mappedCashOut;
+                    draft.customNetCashFlow = mappedNetCashFlow;
+                }
+                else {
+                    draft.cashIn = mappedCashIn;
+                    draft.cashOut = mappedCashOut;
+                    draft.netCashFlow = mappedNetCashFlow;
+                }
+                // Insights are shared (read by the dashboard card); a custom slice must
+                // not overwrite them.
+                if (!isCustomDateRange) {
+                    draft.insights = mapInsightsPayloadtoInsightsState(insights);
+                }
+                // Derive dataAvailable from the slot this fetch actually populated.
+                const cashInOrCashOut = mappedCashIn != null ? mappedCashIn : mappedCashOut;
+                // 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 || draft.dataAvailable == null) {
+                    draft.dataAvailable = report.dataAvailable
+                        ? report.dataAvailable
+                        : getDataAvailableDateRange(cashInOrCashOut);
+                }
+                if (draft.dataAvailable != null &&
+                    // 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(draft.firstMonthOfFY, timeframe, [draft.cashIn, draft.cashOut], draft.dataAvailable);
+                    const selectionRanges = getInitialSelectedAndHighlightedRanges({
+                        firstMonthOfFY: draft.firstMonthOfFY,
+                        timeframe,
+                        coaBalances,
+                        orderBy: 'ascending_date',
+                        maxNumOfPeriodsToSelect: defaultPeriods.numberOfPeriods,
+                        maxNumOfPeriodsToHighlight: initialState.uiState.maxNumOfPeriodsToHighlight,
+                    });
+                    if (selectionRanges?.selectedCOABalancesRange != null) {
+                        draft.uiState.selectedCOABalancesRange =
+                            selectionRanges?.selectedCOABalancesRange;
+                    }
+                    draft.uiState.highlightedCOABalancesRange =
+                        selectionRanges?.highlightedCOABalancesRange;
+                }
+            },
         },
-        updateCashInCashOutFailure(draft, action) {
-            draft.fetchState = 'Error';
-            draft.error = action.payload;
+        updateCashInCashOutFailure: {
+            prepare(error, isCustomDateRange = false) {
+                return { payload: { error, isCustomDateRange } };
+            },
+            reducer(draft, action) {
+                // 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.
+                if (action.payload.isCustomDateRange === true) {
+                    draft.customFetchState = 'Error';
+                }
+                else {
+                    draft.fetchState = 'Error';
+                    draft.error = action.payload.error;
+                }
+            },
         },
         updateCashInCashOutAdditionalBalancesSelection(draft, action) {
             const { cashIn, cashOut, dataAvailable } = draft;
@@ -107,7 +181,7 @@ const cashInCashOut = createSlice({
                     action.payload.additionalBalances.length != 0
                     ? true
                     : false;
-            if (dataAvailable != null) {
+            if (dataAvailable != null && draft.uiState.customTimeframe == null) {
                 const coaBalances = getAvailableCOABalancesWithMostRecentNonZeroBalance(draft.firstMonthOfFY, timeframe, [cashIn, cashOut], dataAvailable);
                 const thisPeriod = extractThisPeriod(draft.firstMonthOfFY, timeframe, selectedCOABalancesRange, coaBalances);
                 if (thisPeriod != null &&
@@ -136,6 +210,45 @@ const cashInCashOut = createSlice({
             }
         },
         updateCashInCashOutCOABalancesRange(draft, action) {
+            if (action.payload.isCustomDateRange != null) {
+                if (action.payload.isCustomDateRange === true) {
+                    // Collapse the two raw date strings into a single customTimeframe object.
+                    // Presence of customTimeframe signals custom-mode active (replaces the
+                    // old isCustomDateRangeActive boolean + customStartDate/customEndDate).
+                    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 custom slots, and this lets the card self-heal
+                    // without a reload. The detail screen reads customFetchState.
+                    draft.fetchState = 'Not-Started';
+                }
+                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;
+            }
             const { cashIn, cashOut, dataAvailable } = draft;
             const { timeframe, selectedCOABalancesRange, maxNumOfPeriodsToHighlight, highlightedCOABalancesRange, } = draft.uiState;
             if (dataAvailable != null &&
@@ -180,6 +293,13 @@ const cashInCashOut = createSlice({
             draft.uiState.downloadState = action.payload;
         },
         updateCashInCashOutThisPeriod(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 response, which would
+            // otherwise clamp the custom window back to the default).
+            if (draft.uiState.customTimeframe != null) {
+                return;
+            }
             const { cashIn, cashOut, dataAvailable } = draft;
             const { timeframe, selectedCOABalancesRange, highlightedCOABalancesRange, maxNumOfPeriodsToHighlight, } = draft.uiState;
             if (dataAvailable != null && action.payload.thisPeriod != null) {

package/lib/esm/view/cashInCashOut/cashInCashOutSelector.js

@@ -5,39 +5,53 @@ import { getNumberOfPeriods } from '../../commonStateTypes/dataAvailable';
 import { toTimeframeTick, } from '../../commonStateTypes/timeframeTick';
 import { getAccountsOrdered } from '../../entity/account/accountSelector';
 import { getAccountGroupsOrdered } from '../../entity/accountGroup/accountGroupSelector';
-export const getCashInCashOut = (accountState, accountGroupState, cashInCashOutState, filter) => {
+export const getCashInCashOut = (accountState, accountGroupState, cashInCashOutState, filter, readCustomRangeSlot) => {
     const reportId = 'cash_in_cash_out';
+    // The detail (in custom mode) reads the isolated custom slots so a default
+    // fetch can't overwrite the partial-period data; the dashboard (no flag) reads
+    // the default slots, so the two can never clobber each other.
+    const useCustomRange = readCustomRangeSlot === true &&
+        cashInCashOutState.uiState.customTimeframe != null;
+    const cashInSource = useCustomRange
+        ? cashInCashOutState.customCashIn
+        : cashInCashOutState.cashIn;
+    const cashOutSource = useCustomRange
+        ? cashInCashOutState.customCashOut
+        : cashInCashOutState.cashOut;
+    const netCashFlowSource = useCustomRange
+        ? cashInCashOutState.customNetCashFlow
+        : cashInCashOutState.netCashFlow;
     const cashIn = {
         itemOrder: 'last_balance_descending',
-        accountGroupsOrdered: getAccountGroupsOrdered(filter, accountState, accountGroupState, cashInCashOutState.cashIn?.accountGroupIDs ?? [], 'cash_in_cash_out', 'cash_in_cash_out', 'cashIn'),
-        accountsOrdered: cashInCashOutState.cashIn?.accountGroupIDs.length === 0
+        accountGroupsOrdered: getAccountGroupsOrdered(filter, accountState, accountGroupState, cashInSource?.accountGroupIDs ?? [], 'cash_in_cash_out', 'cash_in_cash_out', 'cashIn'),
+        accountsOrdered: cashInSource?.accountGroupIDs.length === 0
             ? getAccountsOrdered(filter, accountState, {
-                accountIDs: cashInCashOutState.cashIn?.accountIDs ?? [],
+                accountIDs: cashInSource?.accountIDs ?? [],
                 reportId,
             }, 'cashIn')
             : [],
-        ...getCOABalances(cashInCashOutState.cashIn, filter),
+        ...getCOABalances(cashInSource, filter),
     };
     const cashOut = {
         itemOrder: 'last_balance_descending',
-        accountGroupsOrdered: getAccountGroupsOrdered(filter, accountState, accountGroupState, cashInCashOutState.cashOut?.accountGroupIDs ?? [], 'cash_in_cash_out', 'cash_in_cash_out', 'cashOut'),
-        accountsOrdered: cashInCashOutState.cashOut?.accountGroupIDs.length === 0
+        accountGroupsOrdered: getAccountGroupsOrdered(filter, accountState, accountGroupState, cashOutSource?.accountGroupIDs ?? [], 'cash_in_cash_out', 'cash_in_cash_out', 'cashOut'),
+        accountsOrdered: cashOutSource?.accountGroupIDs.length === 0
             ? getAccountsOrdered(filter, accountState, {
-                accountIDs: cashInCashOutState.cashOut?.accountIDs ?? [],
+                accountIDs: cashOutSource?.accountIDs ?? [],
                 reportId,
             }, 'cashOut')
             : [],
-        ...getCOABalances(cashInCashOutState.cashOut, filter),
+        ...getCOABalances(cashOutSource, filter),
     };
-    const netCashFlow = getCOABalances(cashInCashOutState.netCashFlow, filter);
+    const netCashFlow = getCOABalances(netCashFlowSource, filter);
     let allTimeframeTicks = [];
     const dataAvailable = cashInCashOutState.dataAvailable;
     const firstMonthOfFY = cashInCashOutState.firstMonthOfFY;
     if (dataAvailable != null) {
         const noFilter = newBalancesFilterForDateRange(firstMonthOfFY, cashInCashOutState.uiState.timeframe, dataAvailable, 'ascending_date', []);
         const cashInCashOutBalances = cashIn.balances.length > 0
-            ? getCOABalances(cashInCashOutState.cashIn, noFilter)
-            : getCOABalances(cashInCashOutState.cashOut, noFilter);
+            ? getCOABalances(cashInSource, noFilter)
+            : getCOABalances(cashOutSource, noFilter);
         allTimeframeTicks = cashInCashOutBalances.balances.map((balance) => toTimeframeTick(balance));
     }
     return {
@@ -53,10 +67,17 @@ export const getCashInCashOut = (accountState, accountGroupState, cashInCashOutS
         reportTitle: cashInCashOutState.reportTitle,
         version: cashInCashOutState.version,
         status: cashInCashOutState.status,
-        fetchState: cashInCashOutState.fetchState,
+        // The detail reads the isolated customFetchState so its loading state follows
+        // the custom fetch; the dashboard (no flag) reads the shared fetchState, which
+        // custom-mode activation reset to Not-Started so dashboardEpic refetches.
+        fetchState: useCustomRange && cashInCashOutState.customFetchState != null
+            ? cashInCashOutState.customFetchState
+            : cashInCashOutState.fetchState,
         error: cashInCashOutState.error,
         insights: cashInCashOutState.insights ?? [],
         downloadState: cashInCashOutState.uiState.downloadState,
+        // Surface the customTimeframe so the detail picker can restore the selection.
+        customTimeframe: cashInCashOutState.uiState.customTimeframe,
     };
 };
 export const getCashInCashOutUIState = createSelector((state) => state.cashInCashOutState, (state) => {
@@ -82,11 +103,17 @@ export const getCashInCashOutUIState = createSelector((state) => state.cashInCas
 export const getCashInCashOutForSelectedRange = createSelector((state) => state.accountState, (state) => state.accountGroupState, (state) => state.cashInCashOutState, (accountState, accountGroupState, cashInCashOutState) => {
     const { timeframe, selectedCOABalancesRange, selectedAdditionalBalances } = cashInCashOutState.uiState;
     const noFilter = newBalancesFilter(cashInCashOutState.firstMonthOfFY, timeframe, selectedCOABalancesRange.numberOfPeriods, selectedCOABalancesRange.thisPeriod, 'ascending_date', selectedAdditionalBalances);
-    return getCashInCashOut(accountState, accountGroupState, cashInCashOutState, noFilter);
+    return getCashInCashOut(accountState, accountGroupState, cashInCashOutState, noFilter, 
+    // Detail selectors read the custom slot when the detail is in custom mode;
+    // the dashboard's getCashInCashOutLast4Periods does not.
+    cashInCashOutState.uiState.customTimeframe != null);
 });
 export const getCashInCashOutForHighlightedRange = createSelector((state) => state.accountState, (state) => state.accountGroupState, (state) => state.cashInCashOutState, (accountState, accountGroupState, cashInCashOutState) => {
     const { timeframe, highlightedCOABalancesRange, selectedAdditionalBalances, maxNumOfPeriodsToHighlight, } = cashInCashOutState.uiState;
     const filter = newBalancesFilter(cashInCashOutState.firstMonthOfFY, timeframe, highlightedCOABalancesRange?.numberOfPeriods ??
         maxNumOfPeriodsToHighlight, highlightedCOABalancesRange?.thisPeriod, 'ascending_date', selectedAdditionalBalances);
-    return getCashInCashOut(accountState, accountGroupState, cashInCashOutState, filter);
+    return getCashInCashOut(accountState, accountGroupState, cashInCashOutState, filter, 
+    // Detail selectors read the custom slot when the detail is in custom mode;
+    // the dashboard's getCashInCashOutLast4Periods does not.
+    cashInCashOutState.uiState.customTimeframe != null);
 });

package/lib/esm/view/cashPosition/cashPositionEpic.js

@@ -3,17 +3,25 @@ import { catchError, filter, mergeMap, switchMap } from 'rxjs/operators';
 import { updateAccounts } from '../../entity/account/accountReducer';
 import { createZeniAPIStatus, isSuccessResponse } from '../../responsePayload';
 import { fetchCashPosition, updateCashPosition, updateCashPositionFailure, updateCashPositionThisPeriod, } from './cashPositionReducer';
-export const fetchCashPositionEpic = (actions$, state, zeniAPI) => actions$.pipe(filter(fetchCashPosition.match), switchMap((action) => zeniAPI
-    .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/reports/cash_position?query=${encodeURIComponent(`{"is_full_response":${action.payload.fetchFullReport}}`)}`)
-    .pipe(mergeMap((response) => {
-    if (isSuccessResponse(response)) {
-        return of(updateAccounts(response.data?.report.accounts ?? [], 'cash_position'), updateCashPosition(response.data), // eslint-disable-line @typescript-eslint/no-non-null-assertion
-        updateCashPositionThisPeriod({
-            thisPeriod: state.value.reportUIOptionsState.thisPeriod,
-        }));
+export const fetchCashPositionEpic = (actions$, state, zeniAPI) => actions$.pipe(filter(fetchCashPosition.match), switchMap((action) => {
+    const queryValue = { is_full_response: action.payload.fetchFullReport };
+    const isCustomDateRange = action.payload.startDate != null && action.payload.endDate != null;
+    if (isCustomDateRange) {
+        queryValue.custom_start_date = action.payload.startDate;
+        queryValue.custom_end_date = action.payload.endDate;
     }
-    else {
-        return of(updateCashPositionFailure(response.status));
-    }
-}), catchError((error) => of(updateCashPositionFailure(createZeniAPIStatus('Unexpected error', 'Cash Position REST API call errored out' +
-    JSON.stringify(error))))))));
+    return zeniAPI
+        .getJSON(`${zeniAPI.apiEndPoints.accountMicroServiceBaseUrl}/1.0/reports/cash_position?query=${encodeURIComponent(JSON.stringify(queryValue))}`)
+        .pipe(mergeMap((response) => {
+        if (isSuccessResponse(response)) {
+            return of(updateAccounts(response.data?.report.accounts ?? [], 'cash_position'), updateCashPosition(response.data, isCustomDateRange), // eslint-disable-line @typescript-eslint/no-non-null-assertion
+            updateCashPositionThisPeriod({
+                thisPeriod: state.value.reportUIOptionsState.thisPeriod,
+            }));
+        }
+        else {
+            return of(updateCashPositionFailure(response.status, isCustomDateRange));
+        }
+    }), catchError((error) => of(updateCashPositionFailure(createZeniAPIStatus('Unexpected error', 'Cash Position REST API call errored out' +
+        JSON.stringify(error)), isCustomDateRange))));
+}));