add goal tooltip to balance in budget table (#3123)

* add goal tooltip to balance in budget table

* release note

* fix long goals over multiple months

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

@@ -3,10 +3,12 @@ import React, { type ComponentPropsWithoutRef } from 'react';
 
 import { useFeatureFlag } from '../../hooks/useFeatureFlag';
 import { SvgArrowThinRight } from '../../icons/v1';
-import { type CSSProperties } from '../../style';
+import { type CSSProperties, theme, styles } from '../../style';
+import { Tooltip } from '../common/Tooltip';
 import { View } from '../common/View';
 import { type Binding } from '../spreadsheet';
 import { CellValue } from '../spreadsheet/CellValue';
+import { useFormat } from '../spreadsheet/useFormat';
 import { useSheetValue } from '../spreadsheet/useSheetValue';
 
 import { makeBalanceAmountStyle } from './util';
@@ -50,6 +52,21 @@ export function DefaultCarryoverIndicator({ style }: CarryoverIndicatorProps) {
   );
 }
 
+function GoalTooltipRow({ children }) {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        gap: 10,
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
 export function BalanceWithCarryover({
   carryover,
   balance,
@@ -71,6 +88,34 @@ export function BalanceWithCarryover({
     isGoalTemplatesEnabled ? goalValue : null,
     longGoalValue === 1 ? balanceValue : budgetedValue,
   );
+  const format = useFormat();
+
+  const differenceToGoal =
+    longGoalValue === 1 ? balanceValue - goalValue : budgetedValue - goalValue;
+
+  const balanceCellValue = (
+    <CellValue
+      {...props}
+      binding={balance}
+      type="financial"
+      getStyle={value =>
+        makeBalanceAmountStyle(
+          value,
+          isGoalTemplatesEnabled ? goalValue : null,
+          longGoalValue === 1 ? balanceValue : budgetedValue,
+        )
+      }
+      style={{
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        textAlign: 'right',
+        ...(!disabled && {
+          cursor: 'pointer',
+        }),
+        ...props.style,
+      }}
+    />
+  );
 
   return (
     <span
@@ -81,27 +126,55 @@ export function BalanceWithCarryover({
         maxWidth: '100%',
       }}
     >
-      <CellValue
-        {...props}
-        binding={balance}
-        type="financial"
-        getStyle={value =>
-          makeBalanceAmountStyle(
-            value,
-            isGoalTemplatesEnabled ? goalValue : null,
-            longGoalValue === 1 ? balanceValue : budgetedValue,
-          )
-        }
-        style={{
-          overflow: 'hidden',
-          textOverflow: 'ellipsis',
-          textAlign: 'right',
-          ...(!disabled && {
-            cursor: 'pointer',
-          }),
-          ...props.style,
-        }}
-      />
+      {isGoalTemplatesEnabled && goalValue !== null ? (
+        <Tooltip
+          content={
+            <View style={{ padding: 10 }}>
+              <span style={{ fontWeight: 'bold' }}>
+                {differenceToGoal === 0 ? (
+                  <span style={{ color: theme.noticeText }}>Fully funded</span>
+                ) : differenceToGoal > 0 ? (
+                  <span style={{ color: theme.noticeText }}>
+                    Overfunded ({format(differenceToGoal, 'financial')})
+                  </span>
+                ) : (
+                  <span style={{ color: theme.errorText }}>
+                    Underfunded ({format(differenceToGoal, 'financial')})
+                  </span>
+                )}
+              </span>
+              <GoalTooltipRow>
+                <div>Goal Type:</div>
+                <div>{longGoalValue === 1 ? 'Long' : 'Template'}</div>
+              </GoalTooltipRow>
+              <GoalTooltipRow>
+                <div>Goal:</div>
+                <div>{format(goalValue, 'financial')}</div>
+              </GoalTooltipRow>
+              <GoalTooltipRow>
+                {longGoalValue !== 1 ? (
+                  <>
+                    <div>Budgeted:</div>
+                    <div>{format(budgetedValue, 'financial')}</div>
+                  </>
+                ) : (
+                  <>
+                    <div>Balance:</div>
+                    <div>{format(balanceValue, 'financial')}</div>
+                  </>
+                )}
+              </GoalTooltipRow>
+            </View>
+          }
+          style={{ ...styles.tooltip, borderRadius: '0px 5px 5px 0px' }}
+          placement="bottom"
+          triggerProps={{ delay: 750 }}
+        >
+          {balanceCellValue}
+        </Tooltip>
+      ) : (
+        balanceCellValue
+      )}
       {carryoverValue && carryoverIndicator({ style: valueStyle })}
     </span>
   );

upcoming-release-notes/3123.md

+---
+category: Enhancements
+authors: [matt-fidd]
+---
+
+Add a goal information tooltip to the balance on the budget table