Custom reports updates (#2386)

* Button changes and time filters

* rename on dashboard

* notes

* fix time filters

* Sort Categories

* Page title

* category sort order

* move button

* featureflag

* Highlight report name

* sankey fix

* VRT

* remove doubled element

* update

* fixes

* fixes

* create button fix and rename card fix

* Title change

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

@@ -50,12 +50,22 @@ function boundedRange(earliest, start, end) {
   return [start, end];
 }
 
-export function getLatestRange(offset) {
+function getLatestRange(offset) {
   const end = monthUtils.currentMonth();
   const start = monthUtils.subMonths(end, offset);
   return [start, end];
 }
 
+export function getSpecificRange(offset, addNumber) {
+  const currMonth = monthUtils.currentMonth();
+  const start = monthUtils.subMonths(currMonth, offset);
+  const end = monthUtils.addMonths(
+    start,
+    addNumber === null ? offset : addNumber,
+  );
+  return [start, end];
+}
+
 export function getFullRange(allMonths) {
   const start = allMonths[allMonths.length - 1].name;
   const end = monthUtils.currentMonth();

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

@@ -4,11 +4,13 @@ import { useReports } from 'loot-core/src/client/data-hooks/reports';
 
 import { useAccounts } from '../../hooks/useAccounts';
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
-import { theme, styles } from '../../style';
+import { styles } from '../../style';
+import { AnchorLink } from '../common/AnchorLink';
+import { Button } from '../common/Button';
+import { Text } from '../common/Text';
 import { View } from '../common/View';
 
 import { CashFlowCard } from './reports/CashFlowCard';
-import { CustomReportCard } from './reports/CustomReportCard';
 import { CustomReportListCards } from './reports/CustomReportListCards';
 import { NetWorthCard } from './reports/NetWorthCard';
 import { SankeyCard } from './reports/SankeyCard';
@@ -19,8 +21,6 @@ export function Overview() {
 
   const customReportsFeatureFlag = useFeatureFlag('customReports');
 
-  const featureCount =
-    3 - (sankeyFeatureFlag ? 1 : 0) - (customReportsFeatureFlag ? 1 : 0);
   const accounts = useAccounts();
   return (
     <View
@@ -29,6 +29,22 @@ export function Overview() {
         ...{ paddingLeft: 40, paddingRight: 40, minWidth: 700 },
       }}
     >
+      {customReportsFeatureFlag && (
+        <View
+          style={{
+            flex: '0 0 auto',
+            alignItems: 'flex-end',
+            marginRight: 15,
+            marginTop: 10,
+          }}
+        >
+          <AnchorLink to="/reports/custom" style={{ textDecoration: 'none' }}>
+            <Button type="primary">
+              <Text>Create new custom report</Text>
+            </Button>
+          </AnchorLink>
+        </View>
+      )}
       <View
         style={{
           flexDirection: 'row',
@@ -45,24 +61,9 @@ export function Overview() {
         }}
       >
         {sankeyFeatureFlag && <SankeyCard />}
-        {customReportsFeatureFlag && <CustomReportCard />}
-        {featureCount !== 3 &&
-          [...Array(featureCount)].map((e, i) => (
-            <View key={i} style={{ padding: 15, flex: 1 }} />
-          ))}
       </View>
       {customReportsFeatureFlag && (
-        <>
-          <View
-            style={{
-              height: 1,
-              backgroundColor: theme.pillBorderDark,
-              marginTop: 10,
-              flexShrink: 0,
-            }}
-          />
-          <CustomReportListCards reports={customReports} />
-        </>
+        <CustomReportListCards reports={customReports} />
       )}
     </View>
   );

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

@@ -150,7 +150,21 @@ export const categoryLists = (categories: {
   grouped: CategoryGroupEntity[];
 }) => {
   const categoryList = [
-    ...categories.list,
+    ...categories.list.sort((a, b) => {
+      //The point of this sorting is to make the graphs match the "budget" page
+      const catGroupA = categories.grouped.find(f => f.id === a.cat_group);
+      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 
+        separate from other groups*/
+          Number(catGroupA.is_income) - Number(catGroupB.is_income) ||
+            //Next, sorting by group sort_order
+            (catGroupA.sort_order ?? 0) - (catGroupB.sort_order ?? 0) ||
+            //Finally, sorting by category within each group
+            a.sort_order - b.sort_order
+        : 0;
+    }),
     uncategorizedCategory,
     offBudgetCategory,
     transferCategory,

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

@@ -14,9 +14,9 @@ import { CategorySelector } from './CategorySelector';
 import {
   validateStart,
   validateEnd,
-  getLatestRange,
   getFullRange,
   validateRange,
+  getSpecificRange,
 } from './Header';
 import { ModeButton } from './ModeButton';
 import { ReportOptions } from './ReportOptions';
@@ -75,7 +75,12 @@ export function ReportSidebar({
         );
         break;
       default:
-        onChangeDates(...getLatestRange(ReportOptions.dateRangeMap.get(cond)));
+        onChangeDates(
+          ...getSpecificRange(
+            ReportOptions.dateRangeMap.get(cond),
+            cond === 'Last month' ? 0 : null,
+          ),
+        );
     }
   };
 

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

@@ -48,7 +48,10 @@ export function SaveReport({
     setName(chooseSavedReport === undefined ? '' : chooseSavedReport.name);
   }
 
-  const onAddUpdate = async (menuChoice: string) => {
+  const onAddUpdate = async ({ menuChoice }: { menuChoice?: string }) => {
+    if (!menuChoice) {
+      return null;
+    }
     if (menuChoice === 'save-report') {
       const newSavedReport = {
         ...report,
@@ -111,7 +114,7 @@ export function SaveReport({
       case 'update-report':
         setErr('');
         setMenuOpen(false);
-        onAddUpdate(item);
+        onAddUpdate({ menuChoice: item });
         break;
       case 'save-report':
         setErr('');

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

@@ -1,5 +1,7 @@
 import React, { type RefObject, useEffect } from 'react';
 
+import { type CustomReportEntity } from 'loot-core/types/models/reports';
+
 import { theme } from '../../style';
 import { Button } from '../common/Button';
 import { Input } from '../common/Input';
@@ -15,8 +17,15 @@ type SaveReportNameProps = {
   name: string;
   setName: (name: string) => void;
   inputRef: RefObject<HTMLInputElement>;
-  onAddUpdate: (menuItem: string) => void;
+  onAddUpdate: ({
+    menuChoice,
+    reportData,
+  }: {
+    menuChoice?: string;
+    reportData?: CustomReportEntity;
+  }) => void;
   err: string;
+  report?: CustomReportEntity;
 };
 
 export function SaveReportName({
@@ -27,6 +36,7 @@ export function SaveReportName({
   inputRef,
   onAddUpdate,
   err,
+  report,
 }: SaveReportNameProps) {
   useEffect(() => {
     if (inputRef.current) {
@@ -63,7 +73,10 @@ export function SaveReportName({
               style={{ marginTop: 30 }}
               onClick={e => {
                 e.preventDefault();
-                onAddUpdate(menuItem);
+                onAddUpdate({
+                  menuChoice: menuItem ?? undefined,
+                  reportData: report ?? undefined,
+                });
               }}
             >
               {menuItem === 'save-report' ? 'Add' : 'Update'}

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

@@ -312,7 +312,23 @@ export function CustomReport() {
 
   return (
     <View style={{ ...styles.page, minWidth: 650, overflow: 'hidden' }}>
-      <Header title="Custom Reports" />
+      <View
+        style={{
+          flexDirection: 'row',
+          flexShrink: 0,
+        }}
+      >
+        <Header title="Custom Report:" />
+        <Text
+          style={{
+            ...styles.veryLargeText,
+            marginTop: 40,
+            color: theme.pageTextPositive,
+          }}
+        >
+          {report.name || 'Unsaved report'}
+        </Text>
+      </View>
       <View
         style={{
           display: 'flex',