✨ (dashboards) ability to save filters & timeframes on spending widgets

packages/desktop-client/src/components/common/Select.tsx

@@ -28,6 +28,7 @@ type SelectProps<Value> = {
   disabled?: boolean;
   disabledKeys?: Value[];
   style?: CSSProperties;
+  popoverStyle?: CSSProperties;
 };
 
 /**
@@ -53,6 +54,7 @@ export function Select<const Value = string>({
   disabled = false,
   disabledKeys = [],
   style = {},
+  popoverStyle = {},
 }: SelectProps<Value>) {
   const targetOption = options
     .filter(isValueOption)
@@ -108,6 +110,7 @@ export function Select<const Value = string>({
         placement="bottom start"
         isOpen={isOpen}
         onOpenChange={() => setIsOpen(false)}
+        style={popoverStyle}
       >
         <Menu
           onMenuSelect={item => {

packages/desktop-client/src/components/reports/DateRange.tsx

@@ -40,7 +40,14 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
   }
 
   let content: string | ReactElement;
-  if (startDate.getFullYear() !== endDate.getFullYear()) {
+  if (['budget', 'average'].includes(type || '')) {
+    content = (
+      <div>
+        Compare {d.format(startDate, 'MMM yyyy')} to{' '}
+        {type === 'budget' ? 'budgeted' : 'average'}
+      </div>
+    );
+  } else if (startDate.getFullYear() !== endDate.getFullYear()) {
     content = (
       <div>
         {type && 'Compare '}

packages/desktop-client/src/components/reports/Header.tsx

@@ -73,7 +73,7 @@ export function Header({
         flexShrink: 0,
       }}
     >
-      {!['/reports/custom', '/reports/spending'].includes(path) && (
+      {!['/reports/custom'].includes(path) && (
         <View
           style={{
             flexDirection: isNarrowWidth ? 'column' : 'row',

packages/desktop-client/src/components/reports/Overview.tsx

@@ -545,6 +545,7 @@ export function Overview() {
                   />
                 ) : item.type === 'spending-card' ? (
                   <SpendingCard
+                    widgetId={item.i}
                     isEditing={isEditing}
                     meta={item.meta}
                     onMetaChange={newMeta => onMetaChange(item, newMeta)}

packages/desktop-client/src/components/reports/ReportRouter.tsx

@@ -17,6 +17,7 @@ export function ReportRouter() {
       <Route path="/cash-flow/:id" element={<CashFlow />} />
       <Route path="/custom" element={<CustomReport />} />
       <Route path="/spending" element={<Spending />} />
+      <Route path="/spending/:id" element={<Spending />} />
     </Routes>
   );
 }

packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx

@@ -1,5 +1,5 @@
 // @ts-strict-ignore
-import React from 'react';
+import React, { type ComponentProps } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import { css } from 'glamor';
@@ -32,19 +32,22 @@ type PayloadItem = {
     totalDebts: number | string;
     totalTotals: number | string;
     day: string;
-    months: {
-      date: string;
-      cumulative: number | string;
-    };
+    months: Record<
+      string,
+      {
+        date: string;
+        cumulative: number;
+      }
+    >;
   };
 };
 
 type CustomTooltipProps = {
   active?: boolean;
   payload?: PayloadItem[];
-  balanceTypeOp?: string;
-  selection?: string;
-  compare?: string;
+  balanceTypeOp: 'cumulative';
+  selection: string | 'budget' | 'average';
+  compare: string;
 };
 
 const CustomTooltip = ({
@@ -59,7 +62,7 @@ const CustomTooltip = ({
   if (active && payload && payload.length) {
     const comparison = ['average', 'budget'].includes(selection)
       ? payload[0].payload[selection] * -1
-      : payload[0].payload.months[selection].cumulative * -1;
+      : payload[0].payload.months[selection]?.cumulative * -1;
     return (
       <div
         className={`${css({
@@ -82,11 +85,11 @@ const CustomTooltip = ({
             </strong>
           </div>
           <div style={{ lineHeight: 1.5 }}>
-            {payload[0].payload.months[compare].cumulative ? (
+            {payload[0].payload.months[compare]?.cumulative ? (
               <AlignedText
                 left={t('Compare:')}
                 right={amountToCurrency(
-                  payload[0].payload.months[compare].cumulative * -1,
+                  payload[0].payload.months[compare]?.cumulative * -1,
                 )}
               />
             ) : null}
@@ -102,11 +105,11 @@ const CustomTooltip = ({
                 right={amountToCurrency(comparison)}
               />
             )}
-            {payload[0].payload.months[compare].cumulative ? (
+            {payload[0].payload.months[compare]?.cumulative ? (
               <AlignedText
                 left={t('Difference:')}
                 right={amountToCurrency(
-                  payload[0].payload.months[compare].cumulative * -1 -
+                  payload[0].payload.months[compare]?.cumulative * -1 -
                     comparison,
                 )}
               />
@@ -122,7 +125,7 @@ type SpendingGraphProps = {
   style?: CSSProperties;
   data: SpendingEntity;
   compact?: boolean;
-  mode: string;
+  mode: 'single-month' | 'budget' | 'average';
   compare: string;
   compareTo: string;
 };
@@ -138,27 +141,30 @@ export function SpendingGraph({
   const privacyMode = usePrivacyMode();
   const balanceTypeOp = 'cumulative';
 
-  const selection = mode === 'singleMonth' ? compareTo : mode;
+  const selection = mode === 'single-month' ? compareTo : mode;
 
   const thisMonthMax = data.intervalData.reduce((a, b) =>
-    a.months[compare][balanceTypeOp] < b.months[compare][balanceTypeOp] ? a : b,
-  ).months[compare][balanceTypeOp];
+    a.months[compare]?.[balanceTypeOp] < b.months[compare]?.[balanceTypeOp]
+      ? a
+      : b,
+  ).months[compare]?.[balanceTypeOp];
   const selectionMax = ['average', 'budget'].includes(selection)
     ? data.intervalData[27][selection]
     : data.intervalData.reduce((a, b) =>
-        a.months[selection][balanceTypeOp] < b.months[selection][balanceTypeOp]
+        a.months[selection]?.[balanceTypeOp] <
+        b.months[selection]?.[balanceTypeOp]
           ? a
           : b,
-      ).months[selection][balanceTypeOp];
+      ).months[selection]?.[balanceTypeOp];
   const maxYAxis = selectionMax > thisMonthMax;
   const dataMax = Math.max(
-    ...data.intervalData.map(i => i.months[compare].cumulative),
+    ...data.intervalData.map(i => i.months[compare]?.cumulative),
   );
   const dataMin = Math.min(
-    ...data.intervalData.map(i => i.months[compare].cumulative),
+    ...data.intervalData.map(i => i.months[compare]?.cumulative),
   );
 
-  const tickFormatter = tick => {
+  const tickFormatter: ComponentProps<typeof YAxis>['tickFormatter'] = tick => {
     if (!privacyMode) return `${amountToCurrencyNoDecimal(tick)}`; // Formats the tick values as strings with commas
     return '...';
   };
@@ -179,7 +185,7 @@ export function SpendingGraph({
       return obj[month] && -1 * obj[month];
     } else {
       return (
-        obj.months[month][balanceTypeOp] &&
+        obj.months[month]?.[balanceTypeOp] &&
         -1 * obj.months[month][balanceTypeOp]
       );
     }

packages/desktop-client/src/components/reports/reportRanges.ts

@@ -166,7 +166,7 @@ export function getLatestRange(offset: number) {
 }
 
 export function calculateTimeRange(
-  timeFrame?: TimeFrame,
+  timeFrame?: Partial<TimeFrame>,
   defaultTimeFrame?: TimeFrame,
 ) {
   const start =
@@ -181,8 +181,48 @@ export function calculateTimeRange(
     return getFullRange(start);
   }
   if (mode === 'sliding-window') {
-    return getLatestRange(monthUtils.differenceInCalendarMonths(end, start));
+    const offset = monthUtils.differenceInCalendarMonths(end, start);
+
+    if (start > end) {
+      return [
+        monthUtils.currentMonth(),
+        monthUtils.subMonths(monthUtils.currentMonth(), -offset),
+        'sliding-window',
+      ] as const;
+    }
+
+    return getLatestRange(offset);
   }
 
   return [start, end, 'static'] as const;
 }
+
+export function calculateSpendingReportTimeRange({
+  compare,
+  compareTo,
+  isLive = true,
+  mode = 'single-month',
+}: {
+  compare?: string;
+  compareTo?: string;
+  isLive?: boolean;
+  mode?: 'budget' | 'average' | 'single-month';
+}): [string, string] {
+  if (['budget', 'average'].includes(mode) && isLive) {
+    return [monthUtils.currentMonth(), monthUtils.currentMonth()];
+  }
+
+  const [start, end] = calculateTimeRange(
+    {
+      start: compare,
+      end: compareTo,
+      mode: (isLive ?? true) ? 'sliding-window' : 'static',
+    },
+    {
+      start: monthUtils.currentMonth(),
+      end: monthUtils.subMonths(monthUtils.currentMonth(), 1),
+      mode: 'sliding-window',
+    },
+  );
+  return [start, end];
+}