From 4bf5ada94f5378903365a737d488d4928c8a7566 Mon Sep 17 00:00:00 2001
From: Matthew Wilson <22526682+automationator@users.noreply.github.com>
Date: Mon, 30 Mar 2026 20:25:40 -0400
Subject: [PATCH] Use MoneyInput for account starting balance field

Replace the plain number input with the MoneyInput component so the
starting balance field has auto-decimal formatting and a tappable
+/- sign toggle, matching the transaction amount field UX.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/accounts/AccountForm.vue | 15 +++++++++------
 frontend/src/components/common/MoneyInput.vue    |  4 ++++
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/accounts/AccountForm.vue b/frontend/src/components/accounts/AccountForm.vue
index b27bd0e..e95b0e6 100644
--- a/frontend/src/components/accounts/AccountForm.vue
+++ b/frontend/src/components/accounts/AccountForm.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import type { Account, AccountType } from '@/types'
+import MoneyInput from '@/components/common/MoneyInput.vue'
 
 const props = defineProps<{
   account?: Account | null
@@ -55,6 +56,7 @@ const description = ref('')
 const includeInBudget = ref(true)
 const isActive = ref(true)
 const startingBalance = ref('')
+const isExpense = ref(false)
 const selectedIcon = ref<string | null>(null)
 const customIconInput = ref('')
 
@@ -71,6 +73,7 @@ watch(
       includeInBudget.value = account.include_in_budget
       isActive.value = account.is_active
       startingBalance.value = ''
+      isExpense.value = false
       // Check if icon is in common icons list or is a custom icon
       if (account.icon) {
         const isCommonIcon = commonIcons.some((i) => i.value === account.icon)
@@ -92,6 +95,7 @@ watch(
       includeInBudget.value = true
       isActive.value = true
       startingBalance.value = ''
+      isExpense.value = false
       selectedIcon.value = null
       customIconInput.value = ''
     }
@@ -127,7 +131,7 @@ function handleSubmit() {
   if (startingBalance.value.trim()) {
     const parsed = parseFloat(startingBalance.value)
     if (!isNaN(parsed)) {
-      startingBalanceCents = Math.round(parsed * 100)
+      startingBalanceCents = isExpense.value ? -Math.round(parsed * 100) : Math.round(parsed * 100)
     }
   }
 
@@ -221,15 +225,14 @@ function handleSubmit() {
         rows="2"
       />
 
-      <v-text-field
+      <MoneyInput
         v-if="!isEditing"
         v-model="startingBalance"
+        v-model:is-expense="isExpense"
         label="Starting Balance (optional)"
-        type="number"
-        step="0.01"
-        prefix="$"
+        :disabled="loading"
+        :required="false"
         hint="Set an initial balance for this account"
-        persistent-hint
       />
 
       <v-switch
diff --git a/frontend/src/components/common/MoneyInput.vue b/frontend/src/components/common/MoneyInput.vue
index 2a071fa..1ea426c 100644
--- a/frontend/src/components/common/MoneyInput.vue
+++ b/frontend/src/components/common/MoneyInput.vue
@@ -12,6 +12,7 @@ const props = withDefaults(
     required?: boolean
     isExpense?: boolean | null
     autofocus?: boolean
+    hint?: string
   }>(),
   {
     label: 'Amount',
@@ -22,6 +23,7 @@ const props = withDefaults(
     required: true,
     isExpense: null,
     autofocus: false,
+    hint: undefined,
   }
 )
 
@@ -120,6 +122,8 @@ const toggleSign = () => {
     :density="density"
     :hide-details="hideDetails"
     :autofocus="autofocus"
+    :hint="hint"
+    :persistent-hint="!!hint"
     @update:model-value="handleModelUpdate"
   >
     <template