Merge branch 'master' into youngcw/up-to-weekly

packages/desktop-client/src/components/autocomplete/CategoryAutocomplete.tsx

@@ -88,7 +88,8 @@ function CategoryList({
     <View>
       <View
         style={{
-          overflow: 'auto',
+          overflowY: 'auto',
+          willChange: 'transform',
           padding: '5px 0',
           ...(!embedded && { maxHeight: 175 }),
         }}

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

@@ -22,6 +22,7 @@ import { useModalState } from '../../hooks/useModalState';
 import { AnimatedLoading } from '../../icons/AnimatedLoading';
 import { SvgLogo } from '../../icons/logo';
 import { SvgDelete } from '../../icons/v0';
+import { useResponsive } from '../../ResponsiveProvider';
 import { styles, theme } from '../../style';
 import { tokens } from '../../tokens';
 
@@ -52,6 +53,7 @@ export const Modal = ({
   containerProps,
   ...props
 }: ModalProps) => {
+  const { isNarrowWidth } = useResponsive();
   const { enableScope, disableScope } = useHotkeysContext();
 
   // This deactivates any key handlers in the "app" scope
@@ -82,7 +84,15 @@ export const Modal = ({
         alignItems: 'center',
         justifyContent: 'center',
         fontSize: 14,
-        backdropFilter: 'blur(1px) brightness(0.9)',
+        willChange: 'transform',
+        // on mobile, we disable the blurred background for performance reasons
+        ...(isNarrowWidth
+          ? {
+              backgroundColor: 'rgba(0, 0, 0, 0.4)',
+            }
+          : {
+              backdropFilter: 'blur(1px) brightness(0.9)',
+            }),
         ...style,
       }}
       {...props}

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

@@ -2,6 +2,8 @@ import React, { type ReactElement } from 'react';
 
 import * as d from 'date-fns';
 
+import * as monthUtils from 'loot-core/src/shared/months';
+
 import { theme } from '../../style';
 import { styles } from '../../style/styles';
 import { Block } from '../common/Block';
@@ -14,8 +16,8 @@ type DateRangeProps = {
 };
 
 function checkDate(date: string) {
-  const dateParsed = new Date(date);
-  if (dateParsed.toString() !== 'Invalid Date') {
+  const dateParsed = monthUtils.parseDate(date);
+  if (dateParsed) {
     return d.format(dateParsed, 'yyyy-MM-dd');
   } else {
     return null;

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

@@ -232,62 +232,47 @@ export type QueryDataEntity = {
   amount: number;
 };
 
+type UncategorizedId = 'off_budget' | 'transfer' | 'other' | 'all';
+
 export type UncategorizedEntity = Pick<
   CategoryEntity,
-  'id' | 'name' | 'hidden'
+  'id' | 'name' | 'hidden' | 'cat_group'
 > & {
-  /*
-    When looking at uncategorized and hidden transactions we
-    need a way to group them. To do this we give them a unique
-    uncategorized_id. We also need a way to filter the
-    transctions from our query. For this we use the 3 variables
-    below.
-  */
-  uncategorized_id?: string;
-  is_off_budget?: boolean;
-  is_transfer?: boolean;
-  has_category?: boolean;
+  uncategorized_id?: UncategorizedId;
 };
 
 const uncategorizedCategory: UncategorizedEntity = {
   id: '',
   name: 'Uncategorized',
-  uncategorized_id: '1',
+  uncategorized_id: 'other',
   hidden: false,
-  is_off_budget: false,
-  is_transfer: false,
-  has_category: false,
 };
 const transferCategory: UncategorizedEntity = {
   id: '',
   name: 'Transfers',
-  uncategorized_id: '2',
+  uncategorized_id: 'transfer',
   hidden: false,
-  is_off_budget: false,
-  is_transfer: true,
-  has_category: false,
 };
 const offBudgetCategory: UncategorizedEntity = {
   id: '',
   name: 'Off Budget',
-  uncategorized_id: '3',
+  uncategorized_id: 'off_budget',
   hidden: false,
-  is_off_budget: true,
-  is_transfer: false,
-  has_category: true,
 };
 
 type UncategorizedGroupEntity = Pick<
   CategoryGroupEntity,
   'name' | 'id' | 'hidden'
 > & {
   categories?: UncategorizedEntity[];
+  uncategorized_id?: UncategorizedId;
 };
 
 const uncategorizedGroup: UncategorizedGroupEntity = {
   name: 'Uncategorized & Off Budget',
   id: 'uncategorized',
   hidden: false,
+  uncategorized_id: 'all',
   categories: [uncategorizedCategory, transferCategory, offBudgetCategory],
 };
 
@@ -302,7 +287,7 @@ export const categoryLists = (categories: {
       const catGroupB = categories.grouped.find(f => f.id === b.cat_group);
       //initial check that both a and b have a sort_order and category group
       return a.sort_order && b.sort_order && catGroupA && catGroupB
-        ? /*sorting by "is_income" because sort_order for this group is 
+        ? /*sorting by "is_income" because sort_order for this group is
         separate from other groups*/
           Number(catGroupA.is_income) - Number(catGroupB.is_income) ||
             //Next, sorting by group sort_order
@@ -342,7 +327,12 @@ export const groupBySelections = (
       break;
     case 'Group':
       groupByList = categoryGroup.map(group => {
-        return { id: group.id, name: group.name, hidden: group.hidden };
+        return {
+          ...group,
+          id: group.id,
+          name: group.name,
+          hidden: group.hidden,
+        };
       });
       groupByLabel = 'categoryGroup';
       break;

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom';
 
 import * as d from 'date-fns';
@@ -102,6 +103,7 @@ function useSelectedCategories(
 }
 
 export function CustomReport() {
+  const { t } = useTranslation();
   const categories = useCategories();
   const { isNarrowWidth } = useResponsive();
   const [_firstDayOfWeekIdx] = useSyncedPref('firstDayOfWeekIdx');
@@ -644,16 +646,20 @@ export function CustomReport() {
       header={
         isNarrowWidth ? (
           <MobilePageHeader
-            title={`Custom Report: ${report.name || 'Unsaved report'}`}
+            title={
+              report.name
+                ? t('Custom Report: {{name}}', { name: report.name })
+                : t('Custom Report: Unsaved report')
+            }
             leftContent={<MobileBackButton onPress={onBackClick} />}
           />
         ) : (
           <PageHeader
             title={
               <>
-                <Text>Custom Report:</Text>
+                <Text>{t('Custom Report:')}</Text>
                 <Text style={{ marginLeft: 5, color: theme.pageTextPositive }}>
-                  {report.name || 'Unsaved report'}
+                  {report.name || t('Unsaved report')}
                 </Text>
               </>
             }
@@ -766,8 +772,9 @@ export function CustomReport() {
 
               {hasWarning && (
                 <Warning style={{ paddingTop: 5, paddingBottom: 5 }}>
-                  This report is configured to use a non-existing filter value
-                  (i.e. category/account/payee).
+                  {t(
+                    'This report is configured to use a non-existing filter value (i.e. category/account/payee).',
+                  )}
                 </Warning>
               )}
             </View>
@@ -830,7 +837,7 @@ export function CustomReport() {
                     intervalsCount={intervals.length}
                   />
                 ) : (
-                  <LoadingIndicator message="Loading report..." />
+                  <LoadingIndicator message={t('Loading report...')} />
                 )}
               </View>
             </View>

packages/desktop-client/src/components/reports/spreadsheets/custom-spreadsheet.ts

@@ -145,6 +145,8 @@ export function createCustomSpreadsheet({
     let netAssets = 0;
     let netDebts = 0;
 
+    const groupsByCategory =
+      groupByLabel === 'category' || groupByLabel === 'categoryGroup';
     const intervalData = intervals.reduce(
       (arr: IntervalEntity[], intervalItem, index) => {
         let perIntervalAssets = 0;
@@ -163,11 +165,13 @@ export function createCustomSpreadsheet({
             showOffBudget,
             showHiddenCategories,
             showUncategorized,
+            groupsByCategory,
           )
             .filter(
               asset =>
                 asset.date === intervalItem &&
-                asset[groupByLabel] === (item.id ?? null),
+                (asset[groupByLabel] === (item.id ?? null) ||
+                  (item.uncategorized_id && groupsByCategory)),
             )
             .reduce((a, v) => (a = a + v.amount), 0);
           perIntervalAssets += intervalAssets;
@@ -178,11 +182,13 @@ export function createCustomSpreadsheet({
             showOffBudget,
             showHiddenCategories,
             showUncategorized,
+            groupsByCategory,
           )
             .filter(
               debt =>
                 debt.date === intervalItem &&
-                debt[groupByLabel] === (item.id ?? null),
+                (debt[groupByLabel] === (item.id ?? null) ||
+                  (item.uncategorized_id && groupsByCategory)),
             )
             .reduce((a, v) => (a = a + v.amount), 0);
           perIntervalDebts += intervalDebts;

packages/desktop-client/src/components/reports/spreadsheets/filterHiddenItems.ts

@@ -9,43 +9,42 @@ export function filterHiddenItems(
   showOffBudget?: boolean,
   showHiddenCategories?: boolean,
   showUncategorized?: boolean,
+  groupByCategory?: boolean,
 ) {
   const showHide = data
-    .filter(e =>
-      !showHiddenCategories
-        ? e.categoryHidden === false && e.categoryGroupHidden === false
-        : true,
+    .filter(
+      e =>
+        showHiddenCategories ||
+        (e.categoryHidden === false && e.categoryGroupHidden === false),
     )
-    .filter(f =>
-      showOffBudget
-        ? showUncategorized
-          ? //true,true
-            true
-          : //true,false
-            f.category !== null ||
-            f.accountOffBudget !== false ||
-            f.transferAccount !== null
-        : showUncategorized
-          ? //false, true
-            f.accountOffBudget === false &&
-            (f.transferAccount === null || f.category !== null)
-          : //false false
-            f.category !== null && f.accountOffBudget === false,
+    .filter(e => showOffBudget || e.accountOffBudget === false)
+    .filter(
+      e =>
+        showUncategorized || e.category !== null || e.accountOffBudget === true,
     );
 
   return showHide.filter(query => {
-    if (!item.uncategorized_id) {
-      return true;
-    }
+    if (!groupByCategory) return true;
+
+    const hasCategory = !!query.category;
+    const isOffBudget = query.accountOffBudget;
+    const isTransfer = !!query.transferAccount;
 
-    const isTransfer = item.is_transfer
-      ? query.transferAccount
-      : !query.transferAccount;
-    const isHidden = item.has_category ? true : !query.category;
-    const isOffBudget = item.is_off_budget
-      ? query.accountOffBudget
-      : !query.accountOffBudget;
+    if (hasCategory && !isOffBudget) {
+      return item.uncategorized_id == null;
+    }
 
-    return isTransfer && isHidden && isOffBudget;
+    switch (item.uncategorized_id) {
+      case 'off_budget':
+        return isOffBudget;
+      case 'transfer':
+        return isTransfer && !isOffBudget;
+      case 'other':
+        return !isOffBudget && !isTransfer;
+      case 'all':
+        return true;
+      default:
+        return false;
+    }
   });
 }