✨ (dashboards) ability to save net-worth widget details

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

@@ -1,4 +1,10 @@
-import React, { forwardRef, type ComponentPropsWithoutRef } from 'react';
+import React, {
+  forwardRef,
+  type ComponentPropsWithoutRef,
+  type ComponentType,
+  type ReactNode,
+  type SVGProps,
+} from 'react';
 import {
   type ButtonRenderProps as ReactAriaButtonRenderProps,
   Button as ReactAriaButton,
@@ -121,13 +127,21 @@ const _getActiveStyles = (
 type ButtonProps = ComponentPropsWithoutRef<typeof ReactAriaButton> & {
   variant?: ButtonVariant;
   bounce?: boolean;
+  Icon?: ComponentType<SVGProps<SVGElement>>;
+  children?: ReactNode;
 };
 
 type ButtonVariant = 'normal' | 'primary' | 'bare' | 'menu' | 'menuSelected';
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   (props, ref) => {
-    const { children, variant = 'normal', bounce = true, ...restProps } = props;
+    const {
+      children,
+      variant = 'normal',
+      bounce = true,
+      Icon,
+      ...restProps
+    } = props;
 
     const variantWithDisabled: ButtonVariant | `${ButtonVariant}Disabled` =
       props.isDisabled ? `${variant}Disabled` : variant;
@@ -161,6 +175,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           ...styles.smallText,
           ...(renderProps.isDisabled ? {} : { ':hover': hoveredStyle }),
           ...(renderProps.isDisabled ? {} : { ':active': activeStyle }),
+          ...(Icon ? { paddingLeft: 0 } : {}),
         }),
       );
 
@@ -177,6 +192,9 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
           `${renderProps.defaultClassName} ${defaultButtonClassName(renderProps)} ${buttonClassName(renderProps)}`
         }
       >
+        {Icon && (
+          <Icon style={{ height: 15, paddingLeft: 5, paddingRight: 3 }} />
+        )}
         {children}
       </ReactAriaButton>
     );
@@ -203,34 +221,30 @@ export const ButtonWithLoading = forwardRef<
         ...(typeof style === 'function' ? style(buttonRenderProps) : style),
       })}
     >
-      {renderProps => (
-        <>
-          {isLoading && (
-            <View
-              style={{
-                position: 'absolute',
-                top: 0,
-                left: 0,
-                right: 0,
-                bottom: 0,
-                alignItems: 'center',
-                justifyContent: 'center',
-              }}
-            >
-              <AnimatedLoading style={{ width: 20, height: 20 }} />
-            </View>
-          )}
-          <View
-            style={{
-              opacity: isLoading ? 0 : 1,
-              flexDirection: 'row',
-              alignItems: 'center',
-            }}
-          >
-            {typeof children === 'function' ? children(renderProps) : children}
-          </View>
-        </>
+      {isLoading && (
+        <View
+          style={{
+            position: 'absolute',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
+        >
+          <AnimatedLoading style={{ width: 20, height: 20 }} />
+        </View>
       )}
+      <View
+        style={{
+          opacity: isLoading ? 0 : 1,
+          flexDirection: 'row',
+          alignItems: 'center',
+        }}
+      >
+        {children}
+      </View>
     </Button>
   );
 });

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

@@ -2,6 +2,7 @@ import { useLocation } from 'react-router-dom';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
+import { SvgPause, SvgPlay } from '../../icons/v1';
 import { useResponsive } from '../../ResponsiveProvider';
 import { Button } from '../common/Button2';
 import { Select } from '../common/Select';
@@ -19,6 +20,7 @@ import {
 export function Header({
   start,
   end,
+  mode,
   show1Month,
   allMonths,
   onChangeDates,
@@ -28,7 +30,6 @@ export function Header({
   onUpdateFilter,
   onDeleteFilter,
   onConditionsOpChange,
-  headerPrefixItems,
   children,
 }) {
   const location = useLocation();
@@ -52,7 +53,21 @@ export function Header({
             gap: 15,
           }}
         >
-          {headerPrefixItems}
+          {mode && (
+            <Button
+              variant={mode === 'static' ? 'normal' : 'primary'}
+              onPress={() =>
+                onChangeDates(
+                  start,
+                  end,
+                  mode === 'static' ? 'sliding-window' : 'static',
+                )
+              }
+              Icon={mode === 'static' ? SvgPause : SvgPlay}
+            >
+              {mode === 'static' ? 'Paused' : 'Live'}
+            </Button>
+          )}
 
           <View
             style={{
@@ -90,15 +105,16 @@ export function Header({
               options={allMonths.map(({ name, pretty }) => [name, pretty])}
               buttonStyle={{ marginRight: 10 }}
             />
-            {filters && (
-              <FilterButton
-                compact={isNarrowWidth}
-                onApply={onApply}
-                type="accounts"
-              />
-            )}
           </View>
 
+          {filters && (
+            <FilterButton
+              compact={isNarrowWidth}
+              onApply={onApply}
+              type="accounts"
+            />
+          )}
+
           <View
             style={{
               flexDirection: 'row',
@@ -144,7 +160,20 @@ export function Header({
               All Time
             </Button>
           </View>
-          {children || <View style={{ flex: 1 }} />}
+
+          {children ? (
+            <View
+              style={{
+                flex: 1,
+                flexDirection: 'row',
+                justifyContent: 'flex-end',
+              }}
+            >
+              {children}
+            </View>
+          ) : (
+            <View style={{ flex: 1 }} />
+          )}
         </View>
       )}
       {filters && filters.length > 0 && (

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

@@ -528,6 +528,7 @@ export function Overview() {
               <div key={item.i}>
                 {item.type === 'net-worth-card' ? (
                   <NetWorthCard
+                    widgetId={item.i}
                     isEditing={isEditing}
                     accounts={accounts}
                     meta={item.meta}

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

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

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

@@ -3,6 +3,7 @@ import React, { useMemo, useRef, useState, type ComponentProps } from 'react';
 import * as monthUtils from 'loot-core/src/shared/months';
 import { type CategoryEntity } from 'loot-core/types/models/category';
 import { type CategoryGroupEntity } from 'loot-core/types/models/category-group';
+import { type TimeFrame } from 'loot-core/types/models/dashboard';
 import { type CustomReportEntity } from 'loot-core/types/models/reports';
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
@@ -44,7 +45,11 @@ type ReportSidebarProps = {
   setShowUncategorized: (value: boolean) => void;
   setIncludeCurrentInterval: (value: boolean) => void;
   setSelectedCategories: (value: CategoryEntity[]) => void;
-  onChangeDates: (dateStart: string, dateEnd: string) => void;
+  onChangeDates: (
+    dateStart: string,
+    dateEnd: string,
+    mode: TimeFrame['mode'],
+  ) => void;
   onReportChange: ({
     savedReport,
     type,
@@ -420,6 +425,7 @@ export function ReportSidebar({
               onChangeDates(
                 customReportItems.startDate,
                 customReportItems.endDate,
+                'static',
               );
             }}
           >

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

@@ -1,4 +1,5 @@
 import * as monthUtils from 'loot-core/src/shared/months';
+import { type TimeFrame } from 'loot-core/types/models';
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
 import { ReportOptions } from './ReportOptions';
@@ -9,7 +10,7 @@ export function getLiveRange(
   earliestTransaction: string,
   includeCurrentInterval: boolean,
   firstDayOfWeekIdx?: SyncedPrefs['firstDayOfWeekIdx'],
-): [string, string] {
+): [string, string, TimeFrame['mode']] {
   let dateStart = earliestTransaction;
   let dateEnd = monthUtils.currentDay();
   const rangeName = ReportOptions.dateRangeMap.get(cond);
@@ -50,5 +51,5 @@ export function getLiveRange(
       }
   }
 
-  return [dateStart, dateEnd];
+  return [dateStart, dateEnd, 'sliding-window'];
 }

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

@@ -1,4 +1,5 @@
 import * as monthUtils from 'loot-core/src/shared/months';
+import { type TimeFrame } from 'loot-core/types/models';
 import { type SyncedPrefs } from 'loot-core/types/prefs';
 
 export function validateStart(
@@ -7,9 +8,9 @@ export function validateStart(
   end: string,
   interval?: string,
   firstDayOfWeekIdx?: SyncedPrefs['firstDayOfWeekIdx'],
-): [string, string] {
-  let addDays;
-  let dateStart;
+): [string, string, TimeFrame['mode']] {
+  let addDays: number;
+  let dateStart: string;
   switch (interval) {
     case 'Monthly':
       dateStart = start + '-01';
@@ -47,9 +48,9 @@ export function validateEnd(
   end: string,
   interval?: string,
   firstDayOfWeekIdx?: SyncedPrefs['firstDayOfWeekIdx'],
-): [string, string] {
-  let subDays;
-  let dateEnd;
+): [string, string, TimeFrame['mode']] {
+  let subDays: number;
+  let dateEnd: string;
   switch (interval) {
     case 'Monthly':
       dateEnd = monthUtils.getMonthEnd(end + '-01');
@@ -98,8 +99,8 @@ function boundedRange(
   end: string,
   interval?: string,
   firstDayOfWeekIdx?: SyncedPrefs['firstDayOfWeekIdx'],
-): [string, string] {
-  let latest;
+): [string, string, 'static'] {
+  let latest: string;
   switch (interval) {
     case 'Daily':
       latest = monthUtils.currentDay();
@@ -124,7 +125,7 @@ function boundedRange(
   if (start < earliest) {
     start = earliest;
   }
-  return [start, end];
+  return [start, end, 'static'];
 }
 
 export function getSpecificRange(
@@ -150,16 +151,33 @@ export function getSpecificRange(
     );
   }
 
-  return [dateStart, dateEnd];
+  return [dateStart, dateEnd, 'static'];
 }
 
 export function getFullRange(start: string) {
   const end = monthUtils.currentMonth();
-  return [start, end];
+  return [start, end, 'full'];
 }
 
 export function getLatestRange(offset: number) {
   const end = monthUtils.currentMonth();
   const start = monthUtils.subMonths(end, offset);
-  return [start, end];
+  return [start, end, 'sliding-window'];
+}
+
+export function calculateTimeRange(
+  { start, end, mode }: TimeFrame = {
+    start: monthUtils.subMonths(monthUtils.currentMonth(), 5),
+    end: monthUtils.currentMonth(),
+    mode: 'sliding-window',
+  },
+) {
+  if (mode === 'full') {
+    return getFullRange(start);
+  }
+  if (mode === 'sliding-window') {
+    return getLatestRange(monthUtils.differenceInCalendarMonths(end, start));
+  }
+
+  return [start, end, 'static'];
 }

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

@@ -134,19 +134,11 @@ export function CashFlow() {
         onDeleteFilter={onDeleteFilter}
         conditionsOp={conditionsOp}
         onConditionsOpChange={onConditionsOpChange}
-        headerPrefixItems={undefined}
+        mode={undefined}
       >
-        <View
-          style={{
-            flex: 1,
-            flexDirection: 'row',
-            justifyContent: 'flex-end',
-          }}
-        >
-          <Button onPress={() => setShowBalance(state => !state)}>
-            {showBalance ? 'Hide balance' : 'Show balance'}
-          </Button>
-        </View>
+        <Button onPress={() => setShowBalance(state => !state)}>
+          {showBalance ? 'Hide balance' : 'Show balance'}
+        </Button>
       </Header>
       <View
         style={{