Update and organize reports

packages/desktop-client/src/components/filters/FiltersMenu.jsx

@@ -594,7 +594,13 @@ export function AppliedFilters({
   onDelete,
   conditionsOp,
   onCondOpChange,
+  onUpdateChange,
 }) {
+  const onUpdateAppliedFilter = (filter, newFilter) => {
+    onUpdateChange?.(null, 'modify');
+    return onUpdate(filter, newFilter);
+  };
+
   return (
     <View
       style={{
@@ -617,7 +623,7 @@ export function AppliedFilters({
           value={filter.value}
           options={filter.options}
           editing={editingFilter === filter}
-          onChange={newFilter => onUpdate(filter, newFilter)}
+          onChange={newFilter => onUpdateAppliedFilter(filter, newFilter)}
           onDelete={() => onDelete(filter)}
         />
       ))}

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

@@ -10,21 +10,23 @@ import {
 const startDate = monthUtils.subMonths(monthUtils.currentMonth(), 5);
 const endDate = monthUtils.currentMonth();
 
-export const defaultState: CustomReportEntity = {
+export const defaultReport: CustomReportEntity = {
   id: undefined,
+  name: 'Default',
+  startDate,
+  endDate,
+  isDateStatic: false,
+  dateRange: 'Last 6 months',
   mode: 'total',
   groupBy: 'Category',
   balanceType: 'Payment',
   showEmpty: false,
-  showOffBudgetHidden: false,
+  showOffBudget: false,
   showUncategorized: false,
+  selectedCategories: [],
   graphType: 'BarGraph',
-  startDate,
-  endDate,
-  selectedCategories: null,
-  isDateStatic: false,
+  conditions: [],
   conditionsOp: 'and',
-  name: 'Default',
 };
 
 const balanceTypeOptions = [

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

@@ -35,14 +35,16 @@ export function ReportSidebar({
   setMode,
   setIsDateStatic,
   setShowEmpty,
-  setShowOffBudgetHidden,
+  setShowOffBudget,
   setShowUncategorized,
   setSelectedCategories,
   onChangeDates,
   onChangeViews,
+  onReportChange,
 }) {
   const [menuOpen, setMenuOpen] = useState(false);
   const onSelectRange = cond => {
+    onReportChange(null, 'modify');
     setDateRange(cond);
     switch (cond) {
       case 'All time':
@@ -76,6 +78,7 @@ export function ReportSidebar({
   };
 
   const onChangeMode = cond => {
+    onReportChange(null, 'modify');
     setMode(cond);
     if (cond === 'time') {
       if (customReportItems.graphType === 'TableGraph') {
@@ -106,6 +109,7 @@ export function ReportSidebar({
   };
 
   const onChangeSplit = cond => {
+    onReportChange(null, 'modify');
     setGroupBy(cond);
     if (customReportItems.mode === 'total') {
       if (customReportItems.graphType !== 'TableGraph') {
@@ -122,6 +126,11 @@ export function ReportSidebar({
     }
   };
 
+  const onChangeBalanceType = cond => {
+    onReportChange(null, 'modify');
+    setBalanceType(cond);
+  };
+
   return (
     <View
       style={{
@@ -205,7 +214,7 @@ export function ReportSidebar({
           </Text>
           <Select
             value={customReportItems.balanceType}
-            onChange={setBalanceType}
+            onChange={e => onChangeBalanceType(e)}
             options={ReportOptions.balanceType.map(option => [
               option.description,
               option.description,
@@ -265,11 +274,9 @@ export function ReportSidebar({
               >
                 <Menu
                   onMenuSelect={type => {
-                    if (type === 'show-hidden-categories') {
-                      setShowOffBudgetHidden(
-                        !customReportItems.showOffBudgetHidden,
-                      );
-                    } else if (type === 'show-empty-rows') {
+                    if (type === 'show-off-budget') {
+                      setShowOffBudget(!customReportItems.showOffBudget);
+                    } else if (type === 'show-empty-items') {
                       setShowEmpty(!customReportItems.showEmpty);
                     } else if (type === 'show-uncategorized') {
                       setShowUncategorized(
@@ -279,16 +286,16 @@ export function ReportSidebar({
                   }}
                   items={[
                     {
-                      name: 'show-empty-rows',
+                      name: 'show-empty-items',
                       text: 'Show Empty Rows',
                       tooltip: 'Show rows that are zero or blank',
                       toggle: customReportItems.showEmpty,
                     },
                     {
-                      name: 'show-hidden-categories',
+                      name: 'show-off-budget',
                       text: 'Show Off Budget',
                       tooltip: 'Show off budget accounts and hidden categories',
-                      toggle: customReportItems.showOffBudgetHidden,
+                      toggle: customReportItems.showOffBudget,
                     },
                     {
                       name: 'show-uncategorized',

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

@@ -18,6 +18,7 @@ import { SaveReportMenuButton } from './SaveReport';
 
 export function ReportTopbar({
   customReportItems,
+  savedStatus,
   setGraphType,
   setTypeDisabled,
   setBalanceType,
@@ -27,6 +28,7 @@ export function ReportTopbar({
   viewLabels,
   onApplyFilter,
   onChangeViews,
+  onReportChange,
 }) {
   return (
     <View
@@ -158,10 +160,17 @@ export function ReportTopbar({
           marginRight: 15,
           flexShrink: 0,
         }}
+      />{' '}
+      <FilterButton
+        compact
+        hover
+        onApply={e => {
+          onApplyFilter(e);
+          onReportChange(null, 'modify');
+        }}
       />
-      <FilterButton onApply={onApplyFilter} compact hover />
       <View style={{ flex: 1 }} />
-      <SaveReportMenuButton />
+      <SaveReportMenuButton savedStatus={savedStatus} />
     </View>
   );
 }

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

@@ -38,7 +38,7 @@ function SaveReportMenu({ setMenuOpen }) {
   );
 }
 
-export function SaveReportMenuButton() {
+export function SaveReportMenuButton(savedStatus: string) {
   const [menuOpen, setMenuOpen] = useState(false);
 
   return (
@@ -65,6 +65,7 @@ export function SaveReportMenuButton() {
         >
           Unsaved Report 
         </Text>
+        {savedStatus === 'modified' && <Text>(modified)&nbsp;</Text>}
         <SvgExpandArrow width={8} height={8} style={{ marginRight: 5 }} />
       </Button>
       {menuOpen && <SaveReportMenu setMenuOpen={setMenuOpen} />}