Goals: Save full goal value and add an indicator of goal status (#1780)

* first pass at progress bar * db migration / enter goal in db * add getGoal function * stabilize * whoops * TS * reset goal in db if no template found * reconfirm * release note * typo * rename migration * to ms * move priority logic, consistent variable names, * fixup * clear goal if template removed * Visual goals (#40) * 🔥 removing privacyMode feature flag (#1688) * 🎨 fix multiline label in schedules modal (#1687) * Update Visual Regression README File (#1689) * Fix typo in GoCardlessLink.js (#1684) happend -> happened * queried cleared balance for tooltip (#1678) * Dark Theme Reports/Settings (#1512) * 🐛 Mobile account transaction list: Fix sticky date section headers (#1698) * 👷 do not cancel github ci jobs on master branch (#1692) * Sidebar Account Fix (#1703) * Dark Theme Final (#1513) * Category autocomplete should only search selectable categories (#1681) * set colors based on a goal value * extra comment --------- Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: Shaan Khosla <35707672+shaankhosla@users.noreply.github.com> Co-authored-by: Neil <55785687+carkom@users.noreply.github.com> Co-authored-by: Trevor Farlow <trevdor@users.noreply.github.com> * update release note * lint * use null as cleared state * show goal status via colors (#41) * cleanup * I think its working * lint * fix report budget, by adding in the goal coloring * fix the error by adding colors to the report side (#42) * [refactor] Migrate Schedules Table to typescript (#1691) * 🔧 removing unnecessary manual module resolution (#1707) * 🐛 (mobile) scrolling in lists with pull-to-refresh (#1706) * 💄 (mobile) updating apple home-screen icon (#1705) * Enhance Y-Axis Scaling on Net Worth Graph (#1709) * fix report budget, by adding in the goal coloring --------- Co-authored-by: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com> Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> * report budget database updates * Goal progress bar (#1734) * first pass at progress bar * db migration / enter goal in db * add getGoal function * stabilize * whoops * TS * reset goal in db if no template found * reconfirm * release note * typo * rename migration * to ms * move priority logic, consistent variable names, * fixup * clear goal if template removed * Visual goals (#40) * 🔥 removing privacyMode feature flag (#1688) * 🎨 fix multiline label in schedules modal (#1687) * Update Visual Regression README File (#1689) * Fix typo in GoCardlessLink.js (#1684) happend -> happened * queried cleared balance for tooltip (#1678) * Dark Theme Reports/Settings (#1512) * 🐛 Mobile account transaction list: Fix sticky date section headers (#1698) * 👷 do not cancel github ci jobs on master branch (#1692) * Sidebar Account Fix (#1703) * Dark Theme Final (#1513) * Category autocomplete should only search selectable categories (#1681) * set colors based on a goal value * extra comment --------- Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: Shaan Khosla <35707672+shaankhosla@users.noreply.github.com> Co-authored-by: Neil <55785687+carkom@users.noreply.github.com> Co-authored-by: Trevor Farlow <trevdor@users.noreply.github.com> * update release note * lint * use null as cleared state * show goal status via colors (#41) * cleanup * I think its working * lint * fix the error by adding colors to the report side (#42) * [refactor] Migrate Schedules Table to typescript (#1691) * 🔧 removing unnecessary manual module resolution (#1707) * 🐛 (mobile) scrolling in lists with pull-to-refresh (#1706) * 💄 (mobile) updating apple home-screen icon (#1705) * Enhance Y-Axis Scaling on Net Worth Graph (#1709) * fix report budget, by adding in the goal coloring --------- Co-authored-by: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com> Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> * report budget database updates * Fix schedule searchbar (#1729) --------- Co-authored-by: youngcw <calebyoung94@gmail.com> Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: Shaan Khosla <35707672+shaankhosla@users.noreply.github.com> Co-authored-by: Neil <55785687+carkom@users.noreply.github.com> Co-authored-by: Trevor Farlow <trevdor@users.noreply.github.com> Co-authored-by: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com> * working dynamic colors. Need to figure out what changes are actually needed * cleanup * more cleanup * lint * reset the goal when applying a single template * make getCategory function * remove some unneeded changes * actually remove the changes, not just comment * cleanup some unneeded code that was causing some bugs. Works for me, but should be vetted more * lint * add json definitions to database * use template feature flag to enable colors * some fixes * don't set goals for remainders, remove unneeded change * lint * release note * lint again * fix mobile crash * undo changes in CellValue.tsx * lint * use getStyle * move status calc to helper * lint * recommendations * suggestion Co-authored-by: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com> --------- Co-authored-by: shall0pass <20625555+shall0pass@users.noreply.github.com> Co-authored-by: Matiss Janis Aboltins <matiss@mja.lv> Co-authored-by: Crazypkr1099 <nicholas.lacasse430@gmail.com> Co-authored-by: Ikko Eltociear Ashimine <eltociear@gmail.com> Co-authored-by: Shaan Khosla <35707672+shaankhosla@users.noreply.github.com> Co-authored-by: Neil <55785687+carkom@users.noreply.github.com> Co-authored-by: Trevor Farlow <trevdor@users.noreply.github.com> Co-authored-by: Mohamed Muhsin <62111075+muhsinkamil@users.noreply.github.com> Co-authored-by: Joel Jeremy Marquez <joeljeremy.marquez@gmail.com>
actualbudget · Nov 8, 2023 · df5aa31 · df5aa31
1 parent 1c68c3f
commit df5aa31
Show file tree

Hide file tree

Showing 13 changed files with 252 additions and 123 deletions.
diff --git a/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx b/packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx
@@ -1,5 +1,6 @@
 import React, { type ComponentProps } from 'react';
 
+import useFeatureFlag from '../../hooks/useFeatureFlag';
 import ArrowThinRight from '../../icons/v1/ArrowThinRight';
 import { type CSSProperties } from '../../style';
 import View from '../common/View';
@@ -11,6 +12,8 @@ import { makeAmountStyle } from './util';
 type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
   balance: ComponentProps<typeof CellValue>['binding'];
+  goal?: ComponentProps<typeof CellValue>['binding'];
+  budgeted?: ComponentProps<typeof CellValue>['binding'];
   disabled?: boolean;
   style?: CSSProperties;
   balanceStyle?: CSSProperties;
@@ -19,20 +22,30 @@ type BalanceWithCarryoverProps = {
 export default function BalanceWithCarryover({
   carryover,
   balance,
+  goal,
+  budgeted,
   disabled,
   style,
   balanceStyle,
   carryoverStyle,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
-
+  let goalValue = useSheetValue(goal);
+  let budgetedValue = useSheetValue(budgeted);
+  let isGoalTemplatesEnabled = useFeatureFlag('goalTemplatesEnabled');
   return (
     <View style={style}>
       <CellValue
         binding={balance}
         type="financial"
-        getStyle={makeAmountStyle}
+        getStyle={value =>
+          makeAmountStyle(
+            value,
+            isGoalTemplatesEnabled ? goalValue : null,
+            budgetedValue,
+          )
+        }
         style={{
           textAlign: 'right',
           ...(!disabled && {
@@ -58,7 +71,7 @@ export default function BalanceWithCarryover({
           <ArrowThinRight
             width={7}
             height={7}
-            style={makeAmountStyle(balanceValue)}
+            style={makeAmountStyle(balanceValue, goalValue, budgetedValue)}
           />
         </View>
       )}

diff --git a/packages/desktop-client/src/components/budget/MobileBudgetTable.js b/packages/desktop-client/src/components/budget/MobileBudgetTable.js
@@ -446,6 +446,8 @@ const ExpenseCategory = memo(function ExpenseCategory({
             <BalanceWithCarryover
               carryover={rolloverBudget.catCarryover(category.id)}
               balance={rolloverBudget.catBalance(category.id)}
+              goal={reportBudget.catGoal(category.id)}
+              budgeted={reportBudget.catBudgeted(category.id)}
               balanceStyle={{
                 ...styles.smallText,
                 ...styles.underlinedText,

diff --git a/packages/desktop-client/src/components/budget/report/components.tsx b/packages/desktop-client/src/components/budget/report/components.tsx
@@ -369,6 +369,8 @@ export const CategoryMonth = memo(function CategoryMonth({
               disabled={category.is_income}
               carryover={reportBudget.catCarryover(category.id)}
               balance={reportBudget.catBalance(category.id)}
+              goal={reportBudget.catGoal(category.id)}
+              budgeted={reportBudget.catBudgeted(category.id)}
             />
           </span>
           {balanceTooltip.isOpen && (

diff --git a/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx b/packages/desktop-client/src/components/budget/rollover/rollover-components.tsx
@@ -320,6 +320,8 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
           <BalanceWithCarryover
             carryover={rolloverBudget.catCarryover(category.id)}
             balance={rolloverBudget.catBalance(category.id)}
+            goal={rolloverBudget.catGoal(category.id)}
+            budgeted={rolloverBudget.catBudgeted(category.id)}
           />
         </span>
         {balanceTooltip.isOpen && (

diff --git a/packages/desktop-client/src/components/budget/util.ts b/packages/desktop-client/src/components/budget/util.ts
@@ -37,15 +37,26 @@ export function makeAmountGrey(value: number | string) {
     : null;
 }
 
-export function makeAmountStyle(value: number) {
-  const greyed = makeAmountGrey(value);
-  if (greyed) {
-    return greyed;
-  }
-
+export function makeAmountStyle(
+  value: number,
+  goalValue?: number,
+  budgetedValue?: number,
+) {
   if (value < 0) {
     return { color: theme.errorText };
   }
+
+  if (goalValue == null) {
+    const greyed = makeAmountGrey(value);
+    if (greyed) {
+      return greyed;
+    }
+  } else {
+    if (budgetedValue < goalValue) {
+      return { color: theme.warningText };
+    }
+    return { color: theme.noticeText };
+  }
 }
 
 export function makeAmountFullStyle(value: number) {

diff --git a/packages/loot-core/migrations/1694438752000_add_goal_targets.sql b/packages/loot-core/migrations/1694438752000_add_goal_targets.sql
@@ -0,0 +1,7 @@
+BEGIN TRANSACTION;
+
+ALTER TABLE zero_budgets ADD column goal INTEGER DEFAULT null;
+ALTER TABLE reflect_budgets ADD column goal INTEGER DEFAULT null;
+ALTER TABLE categories ADD column goal_def TEXT DEFAULT null;
+
+COMMIT;
diff --git a/packages/loot-core/src/client/queries.ts b/packages/loot-core/src/client/queries.ts
@@ -177,6 +177,7 @@ export const rolloverBudget = {
   catSumAmount: id => `sum-amount-${id}`,
   catBalance: id => `leftover-${id}`,
   catCarryover: id => `carryover-${id}`,
+  catGoal: id => `goal-${id}`,
 };
 
 export const reportBudget = {
@@ -199,4 +200,5 @@ export const reportBudget = {
   catSumAmount: id => `sum-amount-${id}`,
   catBalance: id => `leftover-${id}`,
   catCarryover: id => `carryover-${id}`,
+  catGoal: id => `goal-${id}`,
 };
diff --git a/packages/loot-core/src/server/budget/actions.ts b/packages/loot-core/src/server/budget/actions.ts
@@ -113,6 +113,24 @@ export function setBudget({
   });
 }
 
+export function setGoal({ month, category, goal }): Promise<void> {
+  const table = getBudgetTable();
+  let existing = db.firstSync(
+    `SELECT id FROM ${table} WHERE month = ? AND category = ?`,
+    [dbMonth(month), category],
+  );
+  if (existing) {
+    return db.update(table, {
+      id: existing.id,
+      goal: goal,
+    });
+  }
+  return db.insert(table, {
+    id: month,
+    goal: goal,
+  });
+}
+
 export function setBuffer(month: string, amount: unknown): Promise<void> {
   let existing = db.firstSync(
     `SELECT id FROM zero_budget_months WHERE id = ?`,

diff --git a/packages/loot-core/src/server/budget/base.ts b/packages/loot-core/src/server/budget/base.ts
@@ -318,6 +318,7 @@ function handleBudgetChange(budget) {
         `${sheetName}!carryover-${budget.category}`,
         budget.carryover === 1 ? true : false,
       );
+    sheet.get().set(`${sheetName}!goal-${budget.category}`, budget.goal);
   }
 }