diff --git a/packages/desktop-client/src/components/reports/ReportSidebar.jsx b/packages/desktop-client/src/components/reports/ReportSidebar.jsx index e916183c79e..3b2585eba05 100644 --- a/packages/desktop-client/src/components/reports/ReportSidebar.jsx +++ b/packages/desktop-client/src/components/reports/ReportSidebar.jsx @@ -11,14 +11,10 @@ import { View } from '../common/View'; import { Tooltip } from '../tooltips'; import { CategorySelector } from './CategorySelector'; +import { getLiveRange } from './getLiveRange'; import { ModeButton } from './ModeButton'; import { ReportOptions } from './ReportOptions'; -import { - getSpecificRange, - validateEnd, - validateRange, - validateStart, -} from './reportRanges'; +import { validateEnd, validateStart } from './reportRanges'; export function ReportSidebar({ customReportItems, @@ -48,38 +44,7 @@ export function ReportSidebar({ const onSelectRange = cond => { onReportChange({ type: 'modify' }); setDateRange(cond); - let dateStart; - let dateEnd; - switch (cond) { - case 'All time': - onChangeDates(earliestTransaction, monthUtils.currentDay()); - break; - case 'Year to date': - [dateStart, dateEnd] = validateRange( - earliestTransaction, - monthUtils.getYearStart(monthUtils.currentMonth()) + '-01', - monthUtils.currentDay(), - ); - onChangeDates(dateStart, dateEnd); - break; - case 'Last year': - [dateStart, dateEnd] = validateRange( - earliestTransaction, - monthUtils.getYearStart( - monthUtils.prevYear(monthUtils.currentMonth()), - ) + '-01', - monthUtils.getYearEnd(monthUtils.prevYear(monthUtils.currentDate())) + - '-31', - ); - onChangeDates(dateStart, dateEnd); - break; - default: - [dateStart, dateEnd] = getSpecificRange( - ReportOptions.dateRangeMap.get(cond), - cond === 'Last month' ? 0 : null, - ); - onChangeDates(dateStart, dateEnd); - } + onChangeDates(...getLiveRange(cond, earliestTransaction)); }; const onChangeMode = cond => { diff --git a/packages/desktop-client/src/components/reports/getLiveRange.ts b/packages/desktop-client/src/components/reports/getLiveRange.ts new file mode 100644 index 00000000000..a1a44274b1b --- /dev/null +++ b/packages/desktop-client/src/components/reports/getLiveRange.ts @@ -0,0 +1,44 @@ +import * as monthUtils from 'loot-core/src/shared/months'; + +import { ReportOptions } from './ReportOptions'; +import { getSpecificRange, validateRange } from './reportRanges'; + +export function getLiveRange(cond: string, earliestTransaction: string) { + let dateStart; + let dateEnd; + const rangeName = ReportOptions.dateRangeMap.get(cond); + switch (rangeName) { + case 'yearToDate': + [dateStart, dateEnd] = validateRange( + earliestTransaction, + monthUtils.getYearStart(monthUtils.currentMonth()) + '-01', + monthUtils.currentDay(), + ); + break; + case 'lastYear': + [dateStart, dateEnd] = validateRange( + earliestTransaction, + monthUtils.getYearStart( + monthUtils.prevYear(monthUtils.currentMonth()), + ) + '-01', + monthUtils.getYearEnd(monthUtils.prevYear(monthUtils.currentDate())) + + '-31', + ); + break; + case 'allMonths': + dateStart = earliestTransaction; + dateEnd = monthUtils.currentDay(); + break; + default: + if (typeof rangeName === 'number') { + [dateStart, dateEnd] = getSpecificRange( + rangeName, + cond === 'Last month' ? 0 : null, + ); + } else { + break; + } + } + + return [dateStart, dateEnd]; +} diff --git a/packages/desktop-client/src/components/reports/reportRanges.ts b/packages/desktop-client/src/components/reports/reportRanges.ts index 52a79c1d211..6d389e84086 100644 --- a/packages/desktop-client/src/components/reports/reportRanges.ts +++ b/packages/desktop-client/src/components/reports/reportRanges.ts @@ -115,7 +115,7 @@ function boundedRange( return [start, end]; } -export function getSpecificRange(offset: number, addNumber: number) { +export function getSpecificRange(offset: number, addNumber: number | null) { const currentDay = monthUtils.currentDay(); const dateStart = monthUtils.subMonths(currentDay, offset) + '-01'; const dateEnd = monthUtils.getMonthEnd( diff --git a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx index c7e89460ba4..c6da3eb0a0d 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReport.jsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReport.jsx @@ -21,6 +21,7 @@ import { AppliedFilters } from '../../filters/AppliedFilters'; import { PrivacyFilter } from '../../PrivacyFilter'; import { ChooseGraph } from '../ChooseGraph'; import { defaultsList, disabledList } from '../disabledList'; +import { getLiveRange } from '../getLiveRange'; import { Header } from '../Header'; import { LoadingIndicator } from '../LoadingIndicator'; import { ReportLegend } from '../ReportLegend'; @@ -93,18 +94,6 @@ export function CustomReport() { location.state ? (location.state.report ? 'saved' : 'new') : 'new', ); - useEffect(() => { - const format = - ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate'; - - const dateStart = monthUtils[format](startDate); - const dateEnd = monthUtils[format](endDate); - - setIntervals( - monthUtils[ReportOptions.intervalRange.get(interval)](dateStart, dateEnd), - ); - }, [interval, startDate, endDate]); - useEffect(() => { if (selectedCategories === undefined && categories.list.length !== 0) { setSelectedCategories(categories.list); @@ -138,10 +127,31 @@ export function CustomReport() { .reverse(); setAllIntervals(allInter); + + if (!isDateStatic) { + const [dateStart, dateEnd] = getLiveRange( + dateRange, + trans ? trans.date : monthUtils.currentDay(), + ); + setStartDate(dateStart); + setEndDate(dateEnd); + } } run(); }, [interval]); + useEffect(() => { + const format = + ReportOptions.intervalMap.get(interval).toLowerCase() + 'FromDate'; + + const dateStart = monthUtils[format](startDate); + const dateEnd = monthUtils[format](endDate); + + setIntervals( + monthUtils[ReportOptions.intervalRange.get(interval)](dateStart, dateEnd), + ); + }, [interval, startDate, endDate]); + const balanceTypeOp = ReportOptions.balanceTypeMap.get(balanceType); const payees = usePayees(); const accounts = useAccounts(); diff --git a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx index 292352d183a..4ef5c08932b 100644 --- a/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx +++ b/packages/desktop-client/src/components/reports/reports/CustomReportListCards.tsx @@ -1,6 +1,7 @@ -import React, { createRef, useMemo, useState } from 'react'; +import React, { createRef, useEffect, useMemo, useState } from 'react'; import { send, sendCatch } from 'loot-core/platform/client/fetch/index'; +import * as monthUtils from 'loot-core/src/shared/months'; import { type CustomReportEntity } from 'loot-core/types/models/reports'; import { useAccounts } from '../../../hooks/useAccounts'; @@ -72,6 +73,7 @@ export function CustomReportListCards({ const [err, setErr] = useState(''); const [name, setName] = useState(''); const inputRef = createRef(); + const [earliestTransaction, setEarliestTransaction] = useState(''); const payees = usePayees(); const accounts = useAccounts(); @@ -85,6 +87,14 @@ export function CustomReportListCards({ onDeleteMenuOpen(reportData === undefined ? '' : reportData, false); }; + useEffect(() => { + async function run() { + const trans = await send('get-earliest-transaction'); + setEarliestTransaction(trans ? trans.date : monthUtils.currentDay()); + } + run(); + }, []); + const onAddUpdate = async ({ reportData, }: { @@ -216,6 +226,7 @@ export function CustomReportListCards({ payees={payees} accounts={accounts} categories={categories} + earliestTransaction={earliestTransaction} /> diff --git a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx index ade04b9cc4f..44f58d36806 100644 --- a/packages/desktop-client/src/components/reports/reports/GetCardData.tsx +++ b/packages/desktop-client/src/components/reports/reports/GetCardData.tsx @@ -11,6 +11,7 @@ import { styles } from '../../../style/styles'; import { theme } from '../../../style/theme'; import { Text } from '../../common/Text'; import { ChooseGraph } from '../ChooseGraph'; +import { getLiveRange } from '../getLiveRange'; import { LoadingIndicator } from '../LoadingIndicator'; import { ReportOptions } from '../ReportOptions'; import { createCustomSpreadsheet } from '../spreadsheets/custom-spreadsheet'; @@ -35,16 +36,30 @@ export function GetCardData({ payees, accounts, categories, + earliestTransaction, }: { report: CustomReportEntity; payees: PayeeEntity[]; accounts: AccountEntity[]; categories: { list: CategoryEntity[]; grouped: CategoryGroupEntity[] }; + earliestTransaction: string; }) { + let startDate = report.startDate; + let endDate = report.endDate; + + if (!report.isDateStatic) { + const [dateStart, dateEnd] = getLiveRange( + report.dateRange, + earliestTransaction, + ); + startDate = dateStart || report.startDate; + endDate = dateEnd || report.startDate; + } + const getGroupData = useMemo(() => { return createGroupedSpreadsheet({ - startDate: report.startDate, - endDate: report.endDate, + startDate, + endDate, interval: report.interval, categories, selectedCategories: report.selectedCategories ?? categories.list, @@ -56,11 +71,11 @@ export function GetCardData({ showUncategorized: report.showUncategorized, balanceTypeOp: ReportOptions.balanceTypeMap.get(report.balanceType), }); - }, [report, categories]); + }, [report, categories, startDate, endDate]); const getGraphData = useMemo(() => { return createCustomSpreadsheet({ - startDate: report.startDate, - endDate: report.endDate, + startDate, + endDate, interval: report.interval, categories, selectedCategories: report.selectedCategories ?? categories.list, @@ -76,7 +91,7 @@ export function GetCardData({ accounts, graphType: report.graphType, }); - }, [report, categories, payees, accounts]); + }, [report, categories, payees, accounts, startDate, endDate]); const graphData = useReport('default' + report.name, getGraphData); const groupedData = useReport('grouped' + report.name, getGroupData); @@ -86,8 +101,8 @@ export function GetCardData({ return data?.data ? (