Merge branch 'master' into youngcw/goal_progress

packages/desktop-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@actual-app/web",
-  "version": "23.10.0",
+  "version": "23.11.0",
   "license": "MIT",
   "files": [
     "build"

packages/desktop-client/src/components/Titlebar.tsx

@@ -41,15 +41,21 @@ import useSheetValue from './spreadsheet/useSheetValue';
 import { ThemeSelector } from './ThemeSelector';
 import { Tooltip } from './tooltips';
 
-export let TitlebarContext = createContext(null);
+export type TitlebarContextValue = {
+  sendEvent: (msg: string) => void;
+  subscribe: (listener) => () => void;
+};
+
+export let TitlebarContext = createContext<TitlebarContextValue>(null);
 
 type TitlebarProviderProps = {
   children?: ReactNode;
 };
+
 export function TitlebarProvider({ children }: TitlebarProviderProps) {
   let listeners = useRef([]);
 
-  function sendEvent(msg) {
+  function sendEvent(msg: string) {
     listeners.current.forEach(func => func(msg));
   }
 

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -58,7 +58,7 @@ export default function BalanceWithCarryover({
             alignSelf: 'center',
             marginLeft: 2,
             position: 'absolute',
-            right: -4,
+            right: -8,
             top: 0,
             bottom: 0,
             justifyContent: 'center',

packages/desktop-client/src/components/budget/BudgetPageHeader.js → packages/desktop-client/src/components/budget/BudgetPageHeader.tsx

@@ -1,4 +1,4 @@
-import React, { memo } from 'react';
+import React, { type ComponentProps, memo } from 'react';
 
 import * as monthUtils from 'loot-core/src/shared/months';
 
@@ -7,8 +7,15 @@ import View from '../common/View';
 import { MonthPicker } from './MonthPicker';
 import { getScrollbarWidth } from './util';
 
-const BudgetPageHeader = memo(
-  ({ startMonth, onMonthSelect, numMonths, monthBounds, style }) => {
+type BudgetPageHeaderProps = {
+  startMonth: string;
+  onMonthSelect: (month: string) => void;
+  numMonths: number;
+  monthBounds: ComponentProps<typeof MonthPicker>['monthBounds'];
+};
+
+const BudgetPageHeader = memo<BudgetPageHeaderProps>(
+  ({ startMonth, onMonthSelect, numMonths, monthBounds }) => {
     function getValidMonth(month) {
       let start = monthBounds.start;
       let end = monthUtils.subMonths(monthBounds.end, numMonths - 1);

packages/desktop-client/src/components/budget/DynamicBudgetTable.js → packages/desktop-client/src/components/budget/DynamicBudgetTable.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, useEffect } from 'react';
+import React, { forwardRef, useEffect, type ComponentProps } from 'react';
 import { useSelector } from 'react-redux';
 import AutoSizer from 'react-virtualized-auto-sizer';
 
@@ -9,7 +9,7 @@ import { useBudgetMonthCount } from './BudgetMonthCountContext';
 import BudgetPageHeader from './BudgetPageHeader';
 import BudgetTable from './BudgetTable';
 
-function getNumPossibleMonths(width) {
+function getNumPossibleMonths(width: number) {
   let estimatedTableWidth = width - 200;
 
   if (estimatedTableWidth < 500) {
@@ -27,7 +27,15 @@ function getNumPossibleMonths(width) {
   return 6;
 }
 
-const DynamicBudgetTableInner = forwardRef(
+type DynamicBudgetTableInnerProps = {
+  width: number;
+  height: number;
+} & ComponentProps<typeof BudgetTable>;
+
+const DynamicBudgetTableInner = forwardRef<
+  BudgetTable,
+  DynamicBudgetTableInnerProps
+>(
   (
     {
       width,
@@ -92,17 +100,19 @@ const DynamicBudgetTableInner = forwardRef(
   },
 );
 
-export default forwardRef((props, ref) => {
-  return (
-    <AutoSizer>
-      {({ width, height }) => (
-        <DynamicBudgetTableInner
-          ref={ref}
-          width={width}
-          height={height}
-          {...props}
-        />
-      )}
-    </AutoSizer>
-  );
-});
+export default forwardRef<BudgetTable, DynamicBudgetTableInnerProps>(
+  (props, ref) => {
+    return (
+      <AutoSizer>
+        {({ width, height }) => (
+          <DynamicBudgetTableInner
+            ref={ref}
+            width={width}
+            height={height}
+            {...props}
+          />
+        )}
+      </AutoSizer>
+    );
+  },
+);

packages/desktop-client/src/components/budget/index.js → packages/desktop-client/src/components/budget/index.tsx

@@ -7,29 +7,37 @@ import React, {
   useRef,
 } from 'react';
 import { useSelector } from 'react-redux';
-import { useLocation, useMatch } from 'react-router-dom';
+import {
+  type NavigateFunction,
+  type PathMatch,
+  useLocation,
+  useMatch,
+} from 'react-router-dom';
 
 import { useSpreadsheet } from 'loot-core/src/client/SpreadsheetProvider';
+import { type QueriesState } from 'loot-core/src/client/state-types/queries';
 import { send, listen } from 'loot-core/src/platform/client/fetch';
 import {
   addCategory,
-  updateCategory,
   moveCategory,
   moveCategoryGroup,
+  updateCategory,
   deleteCategory,
   addGroup,
   updateGroup,
   deleteGroup,
 } from 'loot-core/src/shared/categories';
 import * as monthUtils from 'loot-core/src/shared/months';
+import { type Handlers } from 'loot-core/src/types/handlers';
+import { type GlobalPrefs, type LocalPrefs } from 'loot-core/src/types/prefs';
 
-import { useActions } from '../../hooks/useActions';
+import { type BoundActions, useActions } from '../../hooks/useActions';
 import useCategories from '../../hooks/useCategories';
 import useFeatureFlag from '../../hooks/useFeatureFlag';
 import useNavigate from '../../hooks/useNavigate';
 import { styles } from '../../style';
 import View from '../common/View';
-import { TitlebarContext } from '../Titlebar';
+import { TitlebarContext, type TitlebarContextValue } from '../Titlebar';
 
 import DynamicBudgetTable from './DynamicBudgetTable';
 import { getValidMonthBounds } from './MonthsContext';
@@ -38,7 +46,56 @@ import { ReportProvider } from './report/ReportContext';
 import * as rollover from './rollover/rollover-components';
 import { RolloverContext } from './rollover/RolloverContext';
 
-function Budget(props) {
+type ReportComponents = {
+  SummaryComponent: typeof report.BudgetSummary;
+  ExpenseCategoryComponent: typeof report.ExpenseCategoryMonth;
+  ExpenseGroupComponent: typeof report.ExpenseGroupMonth;
+  IncomeCategoryComponent: typeof report.IncomeCategoryMonth;
+  IncomeGroupComponent: typeof report.IncomeGroupMonth;
+  BudgetTotalsComponent: typeof report.BudgetTotalsMonth;
+  IncomeHeaderComponent: typeof report.IncomeHeaderMonth;
+};
+
+type RolloverComponents = {
+  SummaryComponent: typeof RolloverBudgetSummary;
+  ExpenseCategoryComponent: typeof rollover.ExpenseCategoryMonth;
+  ExpenseGroupComponent: typeof rollover.ExpenseGroupMonth;
+  IncomeCategoryComponent: typeof rollover.IncomeCategoryMonth;
+  IncomeGroupComponent: typeof rollover.IncomeGroupMonth;
+  BudgetTotalsComponent: typeof rollover.BudgetTotalsMonth;
+  IncomeHeaderComponent: typeof rollover.IncomeHeaderMonth;
+};
+
+type BudgetProps = {
+  accountId?: string;
+  startMonth: LocalPrefs['budget.startMonth'];
+  collapsedPrefs: LocalPrefs['budget.collapsed'];
+  summaryCollapsed: LocalPrefs['budget.summaryCollapsed'];
+  budgetType: LocalPrefs['budgetType'];
+  maxMonths: GlobalPrefs['maxMonths'];
+  categoryGroups: QueriesState['categories']['grouped'];
+  reportComponents: ReportComponents;
+  rolloverComponents: RolloverComponents;
+  titlebar: TitlebarContextValue;
+  match: PathMatch<string>;
+  spreadsheet: ReturnType<typeof useSpreadsheet>;
+  navigate: NavigateFunction;
+  getCategories: BoundActions['getCategories'];
+  savePrefs: BoundActions['savePrefs'];
+  createCategory: BoundActions['createCategory'];
+  updateCategory: BoundActions['updateCategory'];
+  pushModal: BoundActions['pushModal'];
+  deleteCategory: BoundActions['deleteCategory'];
+  createGroup: BoundActions['createGroup'];
+  updateGroup: BoundActions['updateGroup'];
+  deleteGroup: BoundActions['deleteGroup'];
+  applyBudgetAction: BoundActions['applyBudgetAction'];
+  moveCategory: BoundActions['moveCategory'];
+  moveCategoryGroup: BoundActions['moveCategoryGroup'];
+  loadPrefs: BoundActions['loadPrefs'];
+};
+
+function Budget(props: BudgetProps) {
   const currentMonth = monthUtils.currentMonth();
   const tableRef = useRef(null);
 
@@ -130,7 +187,7 @@ function Budget(props) {
   const prewarmMonth = async (month, type = null) => {
     type = type || props.budgetType;
 
-    let method =
+    let method: keyof Handlers =
       type === 'report' ? 'report-budget-month' : 'rollover-budget-month';
 
     let values = await send(method, { month });
@@ -439,7 +496,7 @@ function Budget(props) {
   return <View style={{ flex: 1 }}>{table}</View>;
 }
 
-const RolloverBudgetSummary = memo(props => {
+const RolloverBudgetSummary = memo<{ month: string }>(props => {
   const isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   return (
     <rollover.BudgetSummary
@@ -470,7 +527,7 @@ export default function BudgetWrapper(props) {
   let match = useMatch(location.pathname);
   let navigate = useNavigate();
 
-  let reportComponents = useMemo(
+  let reportComponents = useMemo<ReportComponents>(
     () => ({
       SummaryComponent: report.BudgetSummary,
       ExpenseCategoryComponent: report.ExpenseCategoryMonth,
@@ -483,7 +540,7 @@ export default function BudgetWrapper(props) {
     [report],
   );
 
-  let rolloverComponents = useMemo(
+  let rolloverComponents = useMemo<RolloverComponents>(
     () => ({
       SummaryComponent: RolloverBudgetSummary,
       ExpenseCategoryComponent: rollover.ExpenseCategoryMonth,

packages/desktop-client/src/components/budget/report/components.tsx

@@ -360,6 +360,7 @@ export const CategoryMonth = memo(function CategoryMonth({
       {!category.is_income && (
         <Field
           name="balance"
+          truncate={false}
           width="flex"
           style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
         >

packages/desktop-client/src/components/budget/rollover/HoldTooltip.tsx

@@ -29,7 +29,7 @@ export default function HoldTooltip({ onSubmit, onClose }: HoldTooltipProps) {
   useEffect(() => {
     (async () => {
       const node = await spreadsheet.get(sheetName, 'to-budget');
-      setAmount(integerToCurrency(Math.max(node.value, 0)));
+      setAmount(integerToCurrency(Math.max(node.value as number, 0)));
     })();
   }, []);
 

packages/desktop-client/src/components/budget/rollover/TransferTooltip.tsx

@@ -51,7 +51,7 @@ export default function TransferTooltip({
     (async () => {
       if (initialAmountName) {
         const node = await spreadsheet.get(sheetName, initialAmountName);
-        setAmount(integerToCurrency(Math.max(node.value, 0)));
+        setAmount(integerToCurrency(Math.max(node.value as number, 0)));
       } else {
         setAmount(integerToCurrency(Math.max(initialAmount, 0)));
       }

packages/desktop-client/src/components/budget/rollover/rollover-components.tsx

@@ -187,9 +187,10 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           <View
             style={{
               flexShrink: 1,
-              marginRight: 0,
-              marginLeft: 3,
+              paddingLeft: 3,
               justifyContent: 'center',
+              borderTopWidth: 1,
+              borderColor: theme.tableBorder,
             }}
           >
             <Button
@@ -311,6 +312,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
       </Field>
       <Field
         name="balance"
+        truncate={false}
         width="flex"
         style={{ paddingRight: styles.monthRightPadding, textAlign: 'right' }}
       >

packages/desktop-client/src/components/mobile/MobileForms.js

@@ -32,8 +32,8 @@ export function FieldLabel({ title, flush, style }) {
 const valueStyle = {
   borderWidth: 1,
   borderColor: theme.formInputBorder,
-  marginLeft: -1,
-  marginRight: -1,
+  marginLeft: 8,
+  marginRight: 8,
   height: FIELD_HEIGHT,
   paddingHorizontal: styles.mobileEditingPadding,
 };

packages/desktop-client/src/components/table.tsx

@@ -306,8 +306,9 @@ const readonlyInputStyle = {
 };
 
 type InputValueProps = ComponentProps<typeof Input> & {
-  value: string;
+  value?: string;
 };
+
 function InputValue({
   value: defaultValue,
   onUpdate,

packages/desktop-client/src/components/transactions/MobileTransaction.js

@@ -570,14 +570,18 @@ class TransactionEditInner extends PureComponent {
                 />
               </View>
 
-              <View style={{ marginLeft: 35, marginRight: 35 }}>
+              <View style={{ marginLeft: 0, marginRight: 8 }}>
                 <FieldLabel title="Cleared" />
                 <BooleanField
                   checked={transaction.cleared}
                   onUpdate={checked =>
                     this.onEdit(transaction, 'cleared', checked)
                   }
-                  style={{ marginTop: 4 }}
+                  style={{
+                    margin: 'auto',
+                    width: 22,
+                    height: 22,
+                  }}
                 />
               </View>
             </View>

packages/desktop-electron/package.json

@@ -2,7 +2,7 @@
   "name": "desktop-electron",
   "productName": "Actual",
   "description": "A simple and powerful personal finance system",
-  "version": "23.10.0",
+  "version": "23.11.0",
   "scripts": {
     "clean": "rm -rf dist",
     "update-client": "bin/update-client",

packages/loot-core/src/client/SpreadsheetProvider.tsx

@@ -4,7 +4,8 @@ import LRU from 'lru-cache';
 
 import { listen, send } from '../platform/client/fetch';
 
-const SpreadsheetContext = createContext(undefined);
+type SpreadsheetContextValue = ReturnType<typeof makeSpreadsheet>;
+const SpreadsheetContext = createContext<SpreadsheetContextValue>(undefined);
 
 export function useSpreadsheet() {
   return useContext(SpreadsheetContext);

packages/loot-core/src/client/actions/queries.ts

@@ -216,7 +216,7 @@ export function updateGroup(group) {
   };
 }
 
-export function deleteGroup(id, transferId) {
+export function deleteGroup(id, transferId?) {
   return async function (dispatch, getState) {
     await send('category-group-delete', { id, transferId });
     await dispatch(getCategories());

packages/loot-core/src/server/spreadsheet/spreadsheet.ts

@@ -5,7 +5,7 @@ import { compileQuery, runCompiledQuery, schema, schemaConfig } from '../aql';
 import Graph from './graph-data-structure';
 import { unresolveName, resolveName } from './util';
 
-type Node = {
+export type Node = {
   name: string;
   expr: string | number | boolean;
   value: string | number | boolean;