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

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

@@ -62,6 +62,12 @@ export function DateRange({ start, end, type }: DateRangeProps): ReactElement {
           : d.format(endDate, 'MMM yyyy')}
       </div>
     );
+  } else if (['budget', 'average'].includes(type || '')) {
+    content = (
+      <div>
+        Compare {d.format(startDate, 'MMM yyyy')} to {type}
+      </div>
+    );
   } else {
     content = d.format(endDate, 'MMMM yyyy');
   }

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

@@ -138,7 +138,7 @@ 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,