show goal status via colors

packages/desktop-client/src/components/budget/BalanceWithCarryover.tsx

@@ -5,32 +5,35 @@ import View from '../common/View';
 import CellValue from '../spreadsheet/CellValue';
 import useSheetValue from '../spreadsheet/useSheetValue';
 
-import { makeAmountStyleGoal } from './util';
+import { makeAmountStyle } from './util';
 
 type BalanceWithCarryoverProps = {
   carryover: ComponentProps<typeof CellValue>['binding'];
   balance: ComponentProps<typeof CellValue>['binding'];
-  goal: ComponentProps<typeof CellValue>['binding'];
+  goal?: ComponentProps<typeof CellValue>['binding'];
+  budgeted?: ComponentProps<typeof CellValue>['binding'];
   disabled?: boolean;
 };
 export default function BalanceWithCarryover({
   carryover,
   balance,
   goal,
+  budgeted,
   disabled,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
-  //let goalValue = useSheetValue(goal);
-  let goalValue = '5000'; //TODO: figure out how to actually get this value for realzies
-
+  let goalValue = useSheetValue(goal);
+  let budgetedValue = useSheetValue(budgeted);
+  // if a goal is passed in then check if that goal is met or not.
+  let goalStatus = goalValue != null ? budgetedValue >= goalValue : null;
   return (
     <>
       <CellValue
         binding={balance}
-        goalValue={goalValue}
+        goalStatus={goalStatus}
         type="financial"
-        getStyle={makeAmountStyleGoal}
+        getStyle={makeAmountStyle}
         style={{
           textAlign: 'right',
           ...(!disabled && {
@@ -54,7 +57,7 @@ export default function BalanceWithCarryover({
           <ArrowThinRight
             width={7}
             height={7}
-            style={makeAmountStyleGoal(balanceValue, goalValue)}
+            style={makeAmountStyle(balanceValue, goalStatus)}
           />
         </View>
       )}

packages/desktop-client/src/components/budget/rollover/rollover-components.tsx

@@ -479,6 +479,7 @@ export const ExpenseCategoryMonth = memo(function ExpenseCategoryMonth({
             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.js

@@ -24,33 +24,21 @@ export function makeAmountGrey(value) {
     : null;
 }
 
-export function makeAmountStyle(value) {
-  const greyed = makeAmountGrey(value);
-  if (greyed) {
-    return greyed;
-  }
-
+export function makeAmountStyle(value, status) {
   if (value < 0) {
     return { color: theme.errorText };
   }
-}
-
-export function makeAmountStyleGoal(value, goal) {
-  const greyed = makeAmountGrey(value);
-  if (greyed) {
-    return greyed;
-  }
 
-  if (goal) {
-    if (goal >= 0) {
-      if (value < goal) {
-        return { color: theme.warningText }; //TODO: Find the real theme value
-      }
-      return { color: theme.noticeText };
+  if (status === null || status === '') {
+    const greyed = makeAmountGrey(value);
+    if (greyed) {
+      return greyed;
     }
-    if (value < 0) {
-      return { color: theme.errorText };
+  } else {
+    if (!status) {
+      return { color: theme.warningText };
     }
+    return { color: theme.noticeText };
   }
 }
 

packages/desktop-client/src/components/spreadsheet/CellValue.tsx

@@ -15,18 +15,18 @@ import { type Binding } from '.';
 
 type CellValueProps = {
   binding: string | Binding;
-  goalValue?: string | Binding;
+  goalStatus?: boolean;
   type?: string;
   formatter?: (value) => ReactNode;
   style?: CSSProperties;
-  getStyle?: (value, modifier?) => CSSProperties;
+  getStyle?: (value, status) => CSSProperties;
   privacyFilter?: ConditionalPrivacyFilterProps['privacyFilter'];
   ['data-testid']?: string;
 };
 
 function CellValue({
   binding,
-  goalValue,
+  goalStatus,
   type,
   formatter,
   style,
@@ -53,7 +53,7 @@ function CellValue({
           style={{
             ...(type === 'financial' && styles.tnum),
             ...style,
-            ...(getStyle && getStyle(sheetValue, goalValue)),
+            ...(getStyle && getStyle(sheetValue, goalStatus)),
           }}
           data-testid={testId || fullSheetName}
           data-cellname={fullSheetName}

packages/loot-core/src/server/sheet.ts

@@ -213,6 +213,7 @@ export async function loadUserBudgets(db): Promise<void> {
         `${sheetName}!carryover-${budget.category}`,
         budget.carryover === 1 ? true : false,
       );
+      sheet.set(`${sheetName}!goal-${budget.category}`, budget.goal);
     }
   }