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>

packages/desktop-client/e2e/schedules.test.js

@@ -78,5 +78,15 @@ test.describe('Schedules', () => {
       'Show completed schedules',
     );
     await expect(page).toHaveScreenshot(screenshotConfig(page));
+
+    // Schedules search shouldn't shrink with many schedules
+    for (let i = 0; i < 15; i++) {
+      await schedulesPage.addNewSchedule({
+        payee: 'Home Depot',
+        account: 'HSBC',
+        amount: 0,
+      });
+    }
+    await expect(page).toHaveScreenshot(screenshotConfig(page));
   });
 });

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

@@ -10,20 +10,28 @@ 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;
 };
 export default function BalanceWithCarryover({
   carryover,
   balance,
+  goal,
+  budgeted,
   disabled,
 }: BalanceWithCarryoverProps) {
   let carryoverValue = useSheetValue(carryover);
   let balanceValue = useSheetValue(balance);
-
+  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}
+        goalStatus={goalStatus}
         type="financial"
         getStyle={makeAmountStyle}
         style={{
@@ -49,7 +57,7 @@ export default function BalanceWithCarryover({
           <ArrowThinRight
             width={7}
             height={7}
-            style={makeAmountStyle(balanceValue)}
+            style={makeAmountStyle(balanceValue, goalStatus)}
           />
         </View>
       )}

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

@@ -368,6 +368,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

@@ -478,6 +478,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.js

@@ -24,15 +24,22 @@ 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 };
   }
+
+  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) {

packages/desktop-client/src/components/schedules/index.tsx

@@ -11,11 +11,7 @@ import Search from '../common/Search';
 import View from '../common/View';
 import { Page } from '../Page';
 
-import {
-  SchedulesTable,
-  ROW_HEIGHT,
-  type ScheduleItemAction,
-} from './SchedulesTable';
+import { SchedulesTable, type ScheduleItemAction } from './SchedulesTable';
 
 export default function Schedules() {
   const { pushModal } = useActions();
@@ -69,31 +65,38 @@ export default function Schedules() {
 
   return (
     <Page title="Schedules">
-      <View style={{ alignItems: 'flex-end' }}>
-        <Search
-          placeholder="Filter schedules…"
-          value={filter}
-          onChange={setFilter}
-        />
-      </View>
-
       <View
         style={{
-          flexBasis: (ROW_HEIGHT - 1) * (Math.max(schedules.length, 1) + 1),
-          marginTop: 15,
+          flexDirection: 'row',
+          alignItems: 'center',
+          padding: '0 0 15px',
         }}
       >
-        <SchedulesTable
-          schedules={schedules}
-          filter={filter}
-          statuses={statuses}
-          allowCompleted={true}
-          onSelect={onEdit}
-          onAction={onAction}
-          style={{ backgroundColor: theme.tableBackground }}
-        />
+        <View
+          style={{
+            flex: 1,
+            flexDirection: 'row',
+            justifyContent: 'flex-end',
+          }}
+        >
+          <Search
+            placeholder="Filter schedules…"
+            value={filter}
+            onChange={setFilter}
+          />
+        </View>
       </View>
 
+      <SchedulesTable
+        schedules={schedules}
+        filter={filter}
+        statuses={statuses}
+        allowCompleted={true}
+        onSelect={onEdit}
+        onAction={onAction}
+        style={{ backgroundColor: theme.tableBackground }}
+      />
+
       <View
         style={{
           flexDirection: 'row',

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

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

packages/loot-core/migrations/1694438752000_add_goal_targets.sql

@@ -0,0 +1,6 @@
+BEGIN TRANSACTION;
+
+ALTER TABLE zero_budgets ADD column goal INTEGER DEFAULT null;
+ALTER TABLE reflect_budgets ADD column goal INTEGER 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 = ?`,