fix: consider month offset in ending balance

adjust context menu offset for selects

closes #118

Author: simonwep

src/app/components/base/context-menu/ContextMenu.vue

@@ -48,9 +48,11 @@ const props = withDefaults(
     options?: ContextMenuOption[];
     highlight?: ContextMenuOptionId;
     testId?: string;
+    offset?: [number, number];
   }>(),
   {
-    position: 'right-end'
+    position: 'right-end',
+    offset: () => [10, 10]
   }
 );
 
@@ -69,7 +71,7 @@ watch([visible, reference, popper], () => {
     instance = createPopper(reference.value, popper.value, {
       placement: props.position,
       modifiers: [
-        { name: 'offset', options: { offset: [10, 10] } },
+        { name: 'offset', options: { offset: props.offset } },
         {
           name: 'positionTracker',
           enabled: true,

src/app/components/base/select/Select.vue

@@ -6,6 +6,7 @@
       :testId="testId"
       tooltipPosition="bottom"
       :options="options"
+      :offset="[0, 4]"
       position="bottom-start"
       @select="modelValue = $event.id"
     >

src/app/pages/dashboard/overview/widgets/header-panels/SummaryPanels.vue

@@ -49,7 +49,7 @@
           ? t('page.dashboard.yearInThePast')
           : state.activeYear > time.year.value
             ? t('page.dashboard.yearInTheFuture')
-            : time.month.value === 11
+            : time.month.value === settings.general.monthOffset
               ? t('page.dashboard.yearEnding')
               : undefined
       "
@@ -125,15 +125,15 @@ const expensePercentage = computed(() => {
 });
 
 const remainingBalance = computed(() => {
-  const nextMonth = time.year.value === state.activeYear ? time.month.value + 1 : 0;
-  const netValues = subtract(incomeTotals.value.slice(nextMonth), expensesTotals.value.slice(nextMonth));
-  return sum(netValues);
-});
+  const monthOffset = time.year.value === state.activeYear ? time.month.value - settings.general.monthOffset + 1 : 0;
+  const nextMonth = monthOffset % 12;
 
-const remainingBalancePercentage = computed(() => {
-  const endBalance = expenses.value.at(-1) ?? 0;
-  return endBalance ? remainingBalance.value / endBalance : 0;
+  return sum(subtract(incomeTotals.value.slice(nextMonth), expensesTotals.value.slice(nextMonth)));
 });
+
+const remainingBalancePercentage = computed(() =>
+  endingBalanceSum.value ? remainingBalance.value / endingBalanceSum.value : 0
+);
 </script>
 
 <style lang="scss" module>

test/settings.spec.ts

@@ -54,6 +54,25 @@ test('Change the starting month and show correct labels', async ({ page }) => {
   await expect(page.getByTestId('remaining-balance-title')).toHaveText(`Remaining Balance until ${currentYear + 1}`);
 });
 
+test('Show correct ending balance when using a monthly offset', async ({ page }) => {
+  await page.clock.setFixedTime(new Date('2025-09-26T18:13:50.628Z'));
+  await page.goto('/#demo');
+
+  await expect(page.getByTestId('remaining-balance-value')).toHaveText('€9,253');
+  await expect(page.getByTestId('remaining-balance-sub')).toHaveText('22%');
+
+  await page.getByTestId('settings').click();
+  await page.getByTestId('change-month-offset').click();
+  await page.getByTestId('change-month-offset-2').click();
+  await expect(page.getByTestId('remaining-balance-value')).toHaveText('€17,605');
+  await expect(page.getByTestId('remaining-balance-sub')).toHaveText('42%');
+
+  await page.getByTestId('change-month-offset').click();
+  await page.getByTestId('change-month-offset-4').click();
+  await expect(page.getByTestId('remaining-balance-value')).toHaveText('€23,612');
+  await expect(page.getByTestId('remaining-balance-sub')).toHaveText('56%');
+});
+
 test('Carry over net-savings to next year', async ({ page }) => {
   const currentYear = new Date().getFullYear();