Goals: Save full goal value and add an indicator of goal status

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,27 +22,37 @@ 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');
+  // if a goal is passed in then check if that goal is met or not.
+  let goalStatus = goalValue != null ? budgetedValue >= goalValue : null;
   return (
     <View style={style}>
       <CellValue
         binding={balance}
         type="financial"
-        getStyle={makeAmountStyle}
+        getStyle={null}
         style={{
           textAlign: 'right',
           ...(!disabled && {
             cursor: 'pointer',
             ':hover': { textDecoration: 'underline' },
           }),
           ...balanceStyle,
+          ...makeAmountStyle(
+            useSheetValue(balance),
+            isGoalTemplatesEnabled ? goalStatus : null,
+          ),
         }}
       />
       {carryoverValue && (
@@ -58,7 +71,7 @@ export default function BalanceWithCarryover({
           <ArrowThinRight
             width={7}
             height={7}
-            style={makeAmountStyle(balanceValue)}
+            style={makeAmountStyle(balanceValue, goalStatus)}
           />
         </View>
       )}

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,

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 && (

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 && (

packages/desktop-client/src/components/budget/util.ts

@@ -37,15 +37,22 @@ 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, status: boolean | string) {
   if (value < 0) {
     return { color: theme.errorText };
   }
+
+  if (status === null || status === '') {
+    const greyed = makeAmountGrey(value);
+    if (greyed) {
+      return greyed;
+    }
+  } else {
+    if (!status) {
+      return { color: theme.warningText };
+    }
+    return { color: theme.noticeText };
+  }
 }
 
 export function makeAmountFullStyle(value: number) {

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;

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

@@ -173,6 +173,7 @@ export const rolloverBudget = {
   catSumAmount: id => `sum-amount-${id}`,
   catBalance: id => `leftover-${id}`,
   catCarryover: id => `carryover-${id}`,
+  catGoal: id => `goal-${id}`,
 };
 
 export const reportBudget = {
@@ -195,4 +196,5 @@ export const reportBudget = {
   catSumAmount: id => `sum-amount-${id}`,
   catBalance: id => `leftover-${id}`,
   catCarryover: id => `carryover-${id}`,
+  catGoal: id => `goal-${id}`,
 };

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 = ?`,

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);
   }
 }