Run eslint with autofix

web/src/App.vue

@@ -26,39 +26,50 @@ export default defineComponent({
 </script>
 
 <template>
-    <div class="flex flex-col md:flex-row flex-1 h-screen">
-        <router-view name="sidebar"></router-view>
+  <div class="flex flex-col md:flex-row flex-1 h-screen">
+    <router-view name="sidebar" />
 
-        <div class="flex-1 overflow-auto">
-            <div
-                class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14">
-                <span
-                    class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
-                    @click="toggleMenuSize"
-                    >≡</span
-                >
-                <span
-                    class="flex-1 font-bold text-5xl -my-3 md:hidden"
-                    @click="toggleMenu"
-                    >≡</span
-                >
+    <div class="flex-1 overflow-auto">
+      <div
+        class="flex bg-gray-400 dark:bg-gray-600 p-4 fixed md:static top-0 left-0 w-full h-14"
+      >
+        <span
+          class="flex-1 font-bold text-5xl -my-3 hidden md:inline"
+          @click="toggleMenuSize"
+        >≡</span>
+        <span
+          class="flex-1 font-bold text-5xl -my-3 md:hidden"
+          @click="toggleMenu"
+        >≡</span>
 
-                <span class="flex-1">{{ CurrentBudgetName }}</span>
+        <span class="flex-1">{{ CurrentBudgetName }}</span>
 
-                <div class="flex flex-1 flex-row justify-end -mx-4">
-                    <router-link class="mx-4" v-if="LoggedIn" to="/dashboard"
-                        >Dashboard</router-link
-                    >
-                    <router-link class="mx-4" v-if="!LoggedIn" to="/login"
-                        >Login</router-link
-                    >
-                    <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
-                </div>
-            </div>
-
-            <div class="p-3 pl-6">
-                <router-view></router-view>
-            </div>
+        <div class="flex flex-1 flex-row justify-end -mx-4">
+          <router-link
+            v-if="LoggedIn"
+            class="mx-4"
+            to="/dashboard"
+          >
+            Dashboard
+          </router-link>
+          <router-link
+            v-if="!LoggedIn"
+            class="mx-4"
+            to="/login"
+          >
+            Login
+          </router-link>
+          <a
+            v-if="LoggedIn"
+            class="mx-4"
+            @click="logout"
+          >Logout</a>
         </div>
+      </div>
+
+      <div class="p-3 pl-6">
+        <router-view />
+      </div>
     </div>
+  </div>
 </template>

web/src/components/AccountWithReconciled.vue

@@ -19,15 +19,17 @@ function daysSinceLastReconciled() {
 </script>
 
 <template>
-    <span>
-        <router-link
-            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
-            {{account.Name}}
-        </router-link>
-        <span
-            v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7"
-            class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline">
-            {{daysSinceLastReconciled()}}
-        </span>
+  <span>
+    <router-link
+      :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID"
+    >
+      {{ account.Name }}
+    </router-link>
+    <span
+      v-if="props.account.LastReconciled.Valid && daysSinceLastReconciled() > 7"
+      class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline"
+    >
+      {{ daysSinceLastReconciled() }}
     </span>
+  </span>
 </template>

web/src/components/Autocomplete.vue

@@ -81,29 +81,29 @@ function clear() {
 </script>
 
 <template>
-    <div>
-        <Input
-            type="text"
-            class="border-b-2 border-black"
-            @keypress="keypress"
-            v-if="id == undefined"
-            v-model="SearchQuery" />
-        <span
-            @click="clear"
-            v-if="id != undefined"
-            class="bg-gray-300 dark:bg-gray-700"
-            >{{ text }}</span
-        >
-        <div
-            v-if="Suggestions.length > 0"
-            class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
-            <span
-                v-for="suggestion in Suggestions"
-                class="block"
-                @click="select"
-                :value="suggestion.ID"
-                >{{ suggestion.Name }}</span
-            >
-        </div>
+  <div>
+    <Input
+      v-if="id == undefined"
+      v-model="SearchQuery"
+      type="text"
+      class="border-b-2 border-black"
+      @keypress="keypress"
+    />
+    <span
+      v-if="id != undefined"
+      class="bg-gray-300 dark:bg-gray-700"
+      @click="clear"
+    >{{ text }}</span>
+    <div
+      v-if="Suggestions.length > 0"
+      class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2"
+    >
+      <span
+        v-for="suggestion in Suggestions"
+        class="block"
+        :value="suggestion.ID"
+        @click="select"
+      >{{ suggestion.Name }}</span>
     </div>
+  </div>
 </template>

web/src/components/Button.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup></script>
 
 <template>
-    <button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
-        <slot></slot>
-    </button>
+  <button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
+    <slot />
+  </button>
 </template>

web/src/components/Card.vue

@@ -1,8 +1,9 @@
 <script lang="ts" setup></script>
 
 <template>
-    <div
-        class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
-        <slot></slot>
-    </div>
+  <div
+    class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg"
+  >
+    <slot />
+  </div>
 </template>

web/src/components/Checkbox.vue

@@ -3,9 +3,10 @@ const props = defineProps(["modelValue"]);
 </script>
 
 <template>
-    <input
-        type="checkbox"
-        :checked="modelValue"
-        @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
-        class="dark:bg-slate-900" />
+  <input
+    type="checkbox"
+    :checked="modelValue"
+    class="dark:bg-slate-900"
+    @change="$emit('update:modelValue', ($event.target as HTMLInputElement)?.checked)"
+  >
 </template>

web/src/components/Currency.vue

@@ -15,9 +15,8 @@ const formattedValue = computed(() => internalValue.value.toLocaleString(undefin
 </script>
 
 <template>
-    <span
-        class="text-right"
-        :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
-        >{{ formattedValue }} €</span
-    >
+  <span
+    class="text-right"
+    :class="internalValue < 0 ? (negativeClass ?? 'negative') : positiveClass"
+  >{{ formattedValue }} €</span>
 </template>

web/src/components/DateInput.vue

@@ -26,10 +26,11 @@ function selectAll(event: FocusEvent) {
 </script>
 
 <template>
-    <Input
-        type="date"
-        ref="input"
-        v-bind:value="dateToYYYYMMDD(modelValue)"
-        @input="updateValue"
-        @focus="selectAll" />
+  <Input
+    ref="input"
+    type="date"
+    :value="dateToYYYYMMDD(modelValue)"
+    @input="updateValue"
+    @focus="selectAll"
+  />
 </template>

web/src/components/Input.vue

@@ -3,8 +3,9 @@ const props = defineProps(["modelValue"]);
 </script>
 
 <template>
-    <input
-        :value="modelValue"
-        @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
-        class="dark:bg-slate-900" />
+  <input
+    :value="modelValue"
+    class="dark:bg-slate-900"
+    @input="$emit('update:modelValue', ($event.target as HTMLInputElement)?.value)"
+  >
 </template>

web/src/components/Modal.vue

@@ -30,38 +30,48 @@ function submitDialog() {
 </script>
 
 <template>
-    <button @click="openDialog">
-        <slot name="placeholder">
-            <Card>
-                <p class="w-24 text-center text-6xl">+</p>
-                <span class="text-lg" dark>{{ buttonText }}</span>
-            </Card>
-        </slot>
-    </button>
+  <button @click="openDialog">
+    <slot name="placeholder">
+      <Card>
+        <p class="w-24 text-center text-6xl">
+          +
+        </p>
+        <span
+          class="text-lg"
+          dark
+        >{{ buttonText }}</span>
+      </Card>
+    </slot>
+  </button>
+  <div
+    v-if="visible"
+    class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"
+  >
     <div
-        v-if="visible"
-        class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full">
-        <div
-            class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black">
-            <div class="mt-3 text-center">
-                <h3
-                    class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100">
-                    {{ buttonText }}
-                </h3>
-                <slot></slot>
-                <div class="grid grid-cols-2 gap-6">
-                    <button
-                        @click="closeDialog"
-                        class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300">
-                        Close
-                    </button>
-                    <button
-                        @click="submitDialog"
-                        class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300">
-                        Save
-                    </button>
-                </div>
-            </div>
+      class="relative top-20 mx-auto p-5 w-96 shadow-lg rounded-md bg-white dark:bg-black"
+    >
+      <div class="mt-3 text-center">
+        <h3
+          class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
+        >
+          {{ buttonText }}
+        </h3>
+        <slot />
+        <div class="grid grid-cols-2 gap-6">
+          <button
+            class="px-4 py-2 bg-red-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+            @click="closeDialog"
+          >
+            Close
+          </button>
+          <button
+            class="px-4 py-2 bg-green-500 text-white text-base font-medium rounded-md shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-green-300"
+            @click="submitDialog"
+          >
+            Save
+          </button>
         </div>
+      </div>
     </div>
+  </div>
 </template>

web/src/components/TransactionEditRow.vue

@@ -38,38 +38,50 @@ function saveTransaction(e: MouseEvent) {
 </script>
 
 <template>
-    <tr>
-        <td class="text-sm">
-            <DateInput class="border-b-2 border-black" v-model="TX.Date" />
-        </td>
-        <td>
-            <Autocomplete
-                v-model:text="TX.Payee"
-                v-model:id="TX.PayeeID"
-                v-model:type="payeeType"
-                model="payees" />
-        </td>
-        <td>
-            <Autocomplete
-                v-model:text="TX.Category"
-                v-model:id="TX.CategoryID"
-                model="categories" />
-        </td>
-        <td>
-            <Input
-                class="block w-full border-b-2 border-black"
-                type="text"
-                v-model="TX.Memo" />
-        </td>
-        <td class="text-right">
-            <Input
-                class="text-right block w-full border-b-2 border-black"
-                type="currency"
-                v-model="TX.Amount" />
-        </td>
-        <td>
-            <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
-        </td>
-        <td></td>
-    </tr>
+  <tr>
+    <td class="text-sm">
+      <DateInput
+        v-model="TX.Date"
+        class="border-b-2 border-black"
+      />
+    </td>
+    <td>
+      <Autocomplete
+        v-model:text="TX.Payee"
+        v-model:id="TX.PayeeID"
+        v-model:type="payeeType"
+        model="payees"
+      />
+    </td>
+    <td>
+      <Autocomplete
+        v-model:text="TX.Category"
+        v-model:id="TX.CategoryID"
+        model="categories"
+      />
+    </td>
+    <td>
+      <Input
+        v-model="TX.Memo"
+        class="block w-full border-b-2 border-black"
+        type="text"
+      />
+    </td>
+    <td class="text-right">
+      <Input
+        v-model="TX.Amount"
+        class="text-right block w-full border-b-2 border-black"
+        type="currency"
+      />
+    </td>
+    <td>
+      <Button
+        class="bg-blue-500"
+        @click="saveTransaction"
+      >
+        Save
+      </Button>
+    </td>
+    <td />
+  </tr>
 </template>

web/src/components/TransactionInputRow.vue

@@ -52,41 +52,53 @@ function saveTransaction(e: MouseEvent) {
 </script>
 
 <template>
-    <tr>
-        <label class="md:hidden">Date</label>
-        <td class="text-sm">
-            <DateInput class="border-b-2 border-black" v-model="TX.Date" />
-        </td>
-        <label class="md:hidden">Payee</label>
-        <td>
-            <Autocomplete
-                v-model:text="TX.Payee"
-                v-model:id="TX.PayeeID"
-                v-model:type="payeeType"
-                model="payees" />
-        </td>
-        <label class="md:hidden">Category</label>
-        <td>
-            <Autocomplete
-                v-model:text="TX.Category"
-                v-model:id="TX.CategoryID"
-                model="categories" />
-        </td>
-        <td class="col-span-2">
-            <Input
-                class="block w-full border-b-2 border-black"
-                type="text"
-                v-model="TX.Memo" />
-        </td>
-        <label class="md:hidden">Amount</label>
-        <td class="text-right">
-            <Input
-                class="text-right block w-full border-b-2 border-black"
-                type="currency"
-                v-model="TX.Amount" />
-        </td>
-        <td class="hidden md:table-cell">
-            <Button class="bg-blue-500" @click="saveTransaction">Save</Button>
-        </td>
-    </tr>
+  <tr>
+    <label class="md:hidden">Date</label>
+    <td class="text-sm">
+      <DateInput
+        v-model="TX.Date"
+        class="border-b-2 border-black"
+      />
+    </td>
+    <label class="md:hidden">Payee</label>
+    <td>
+      <Autocomplete
+        v-model:text="TX.Payee"
+        v-model:id="TX.PayeeID"
+        v-model:type="payeeType"
+        model="payees"
+      />
+    </td>
+    <label class="md:hidden">Category</label>
+    <td>
+      <Autocomplete
+        v-model:text="TX.Category"
+        v-model:id="TX.CategoryID"
+        model="categories"
+      />
+    </td>
+    <td class="col-span-2">
+      <Input
+        v-model="TX.Memo"
+        class="block w-full border-b-2 border-black"
+        type="text"
+      />
+    </td>
+    <label class="md:hidden">Amount</label>
+    <td class="text-right">
+      <Input
+        v-model="TX.Amount"
+        class="text-right block w-full border-b-2 border-black"
+        type="currency"
+      />
+    </td>
+    <td class="hidden md:table-cell">
+      <Button
+        class="bg-blue-500"
+        @click="saveTransaction"
+      >
+        Save
+      </Button>
+    </td>
+  </tr>
 </template>

web/src/components/TransactionRow.vue

@@ -47,45 +47,58 @@ function getStatusSymbol() {
 </script>
 
 <template>
-    <tr v-if="dateChanged()" class="table-row md:hidden">
-        <td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">
-            {{ formatDate(TX.Date) }}
-        </td>
-    </tr>
-    <tr
-        v-if="!edit"
-        class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
-        :class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']">
-        <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
-        <td class="hidden md:block">{{ formatDate(TX.Date) }}</td>
-        <td class="pl-2 md:pl-0">
-            {{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
-        </td>
-        <td>
-            {{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
-        </td>
-        <td>
-            <a
-                :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
-                >{{ TX.Memo }}</a
-            >
-        </td>
-        <td>
-            <Currency class="block" :value="TX.Amount" />
-        </td>
-        <td class="text-right">
-            {{ TX.GroupID ? "☀" : "" }}
-            {{ getStatusSymbol() }}
-            <a @click="edit = true;">✎</a>
-            <Checkbox
-                v-if="Reconciling && TX.Status != 'Reconciled'"
-                v-model="TX.Reconciled" />
-        </td>
-    </tr>
-    <TransactionEditRow
-        v-if="edit"
-        :transactionid="TX.ID"
-        @save="edit = false" />
+  <tr
+    v-if="dateChanged()"
+    class="table-row md:hidden"
+  >
+    <td
+      class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2"
+      colspan="5"
+    >
+      {{ formatDate(TX.Date) }}
+    </td>
+  </tr>
+  <tr
+    v-if="!edit"
+    class="{{new Date(TX.Date) > new Date() ? 'future' : ''}}"
+    :class="[index % 6 < 3 ? 'md:bg-gray-300 dark:md:bg-gray-700' : 'md:bg-gray-100 dark:md:bg-gray-900']"
+  >
+    <!--:class="[index % 6 < 3 ? index % 6 === 1 ? 'bg-gray-400' : 'bg-gray-300' : index % 6 !== 4 ? 'bg-gray-100' : '']">-->
+    <td class="hidden md:block">
+      {{ formatDate(TX.Date) }}
+    </td>
+    <td class="pl-2 md:pl-0">
+      {{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
+    </td>
+    <td>
+      {{ TX.CategoryGroup ? TX.CategoryGroup + " : " + TX.Category : "" }}
+    </td>
+    <td>
+      <a
+        :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
+      >{{ TX.Memo }}</a>
+    </td>
+    <td>
+      <Currency
+        class="block"
+        :value="TX.Amount"
+      />
+    </td>
+    <td class="text-right">
+      {{ TX.GroupID ? "☀" : "" }}
+      {{ getStatusSymbol() }}
+      <a @click="edit = true;">✎</a>
+      <Checkbox
+        v-if="Reconciling && TX.Status != 'Reconciled'"
+        v-model="TX.Reconciled"
+      />
+    </td>
+  </tr>
+  <TransactionEditRow
+    v-if="edit"
+    :transactionid="TX.ID"
+    @save="edit = false"
+  />
 </template>
 
 <style>

web/src/dialogs/EditAccount.vue

@@ -42,29 +42,44 @@ function openEditAccount(e : any) {
 </script>
 
 <template>
-    <Modal
-        button-text="Edit Account"
-        @open="openEditAccount"
-        @submit="editAccount">
-        <template v-slot:placeholder><span class="ml-2">✎</span></template>
-        <div class="mt-2 px-7 py-3">
-            <Input
-                class="border-2 dark:border-gray-700"
-                type="text"
-                v-model="accountName"
-                placeholder="Account name"
-                required />
-        </div>
-        <div class="mt-2 px-7 py-3">
-            <Checkbox class="border-2" v-model="accountOnBudget" required />
-            <label>On Budget</label>
-        </div>
-        <div class="mt-2 px-7 py-3">
-            <Checkbox class="border-2" v-model="accountOpen" required />
-            <label>Open</label>
-        </div>
-        <div v-if="error != ''" class="dark:text-red-300 text-red-700">
-            {{ error }}
-        </div>
-    </Modal>
+  <Modal
+    button-text="Edit Account"
+    @open="openEditAccount"
+    @submit="editAccount"
+  >
+    <template #placeholder>
+      <span class="ml-2">✎</span>
+    </template>
+    <div class="mt-2 px-7 py-3">
+      <Input
+        v-model="accountName"
+        class="border-2 dark:border-gray-700"
+        type="text"
+        placeholder="Account name"
+        required
+      />
+    </div>
+    <div class="mt-2 px-7 py-3">
+      <Checkbox
+        v-model="accountOnBudget"
+        class="border-2"
+        required
+      />
+      <label>On Budget</label>
+    </div>
+    <div class="mt-2 px-7 py-3">
+      <Checkbox
+        v-model="accountOpen"
+        class="border-2"
+        required
+      />
+      <label>Open</label>
+    </div>
+    <div
+      v-if="error != ''"
+      class="dark:text-red-300 text-red-700"
+    >
+      {{ error }}
+    </div>
+  </Modal>
 </template>

web/src/dialogs/NewBudget.vue

@@ -11,14 +11,18 @@ function saveBudget() {
 </script>
 
 <template>
-    <Modal button-text="New Budget" @submit="saveBudget">
-        <div class="mt-2 px-7 py-3">
-            <Input
-                class="border-2"
-                type="text"
-                v-model="budgetName"
-                placeholder="Budget name"
-                required />
-        </div>
-    </Modal>
+  <Modal
+    button-text="New Budget"
+    @submit="saveBudget"
+  >
+    <div class="mt-2 px-7 py-3">
+      <Input
+        v-model="budgetName"
+        class="border-2"
+        type="text"
+        placeholder="Budget name"
+        required
+      />
+    </div>
+  </Modal>
 </template>

web/src/pages/Account.vue

@@ -42,101 +42,125 @@ function createReconcilationTransaction() {
 </script>
 
 <template>
-    <div class="grid grid-cols-[1fr_auto]">
-        <div>
-            <h1 class="inline">
-                {{ accounts.CurrentAccount?.Name }}
-            </h1>
-            <EditAccount />
-        </div>
-
-        <div
-            class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm">
-            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
-                Working:
-                <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
-            </span>
-
-            <span class="rounded-lg p-1 whitespace-nowrap flex-1">
-                Cleared:
-                <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
-            </span>
-
-            <span
-                class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
-                v-if="!transactions.Reconciling"
-                @click="transactions.Reconciling = true">
-                Reconciled:
-                <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
-            </span>
-
-            <span v-if="transactions.Reconciling" class="contents">
-                <Button
-                    @click="submitReconcilation"
-                    class="bg-blue-500 p-1 whitespace-nowrap flex-1">
-                    My current balance is&nbsp;
-                    <Currency :value="transactions.ReconcilingBalance" />
-                </Button>
-
-                <Button
-                    @click="createReconcilationTransaction"
-                    class="bg-orange-500 p-1 whitespace-nowrap flex-1">
-                    No, it's:
-                    <Input
-                        class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
-                        type="number"
-                        v-model="TargetReconcilingBalance" />
-                    (Difference
-                    <Currency
-                        :value="transactions.ReconcilingBalance - TargetReconcilingBalance" />)
-                </Button>
-                <Button
-                    class="bg-red-500 p-1 flex-1"
-                    @click="cancelReconcilation"
-                    >Cancel</Button
-                >
-            </span>
-        </div>
+  <div class="grid grid-cols-[1fr_auto]">
+    <div>
+      <h1 class="inline">
+        {{ accounts.CurrentAccount?.Name }}
+      </h1>
+      <EditAccount />
     </div>
 
-    <table>
-        <tr class="font-bold">
-            <td class="hidden md:block" style="width: 90px;">Date</td>
-            <td style="max-width: 150px;">Payee</td>
-            <td style="max-width: 200px;">Category</td>
-            <td>Memo</td>
-            <td class="text-right">Amount</td>
-            <td style="width: 80px;">
-                <Input
-                    v-if="transactions.Reconciling"
-                    type="checkbox"
-                    @input="setReconciled" />
-            </td>
-        </tr>
-        <TransactionInputRow
-            class="hidden md:table-row"
-            :budgetid="budgetid"
-            :accountid="accountid" />
-        <TransactionRow
-            v-for="(transaction, index) in transactions.TransactionsList"
-            :key="transaction.ID"
-            :transactionid="transaction.ID"
-            :index="index" />
-    </table>
-    <div class="md:hidden">
-        <Modal>
-            <template v-slot:placeholder>
-                <Button
-                    class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
-                    >+</Button
-                >
-            </template>
-            <TransactionInputRow
-                class="grid grid-cols-2"
-                :budgetid="budgetid"
-                :accountid="accountid" />
-        </Modal>
+    <div
+      class="text-right flex flex-wrap flex-col md:flex-row justify-end gap-2 max-w-sm"
+    >
+      <span class="rounded-lg p-1 whitespace-nowrap flex-1">
+        Working:
+        <Currency :value="accounts.CurrentAccount?.WorkingBalance" />
+      </span>
+
+      <span class="rounded-lg p-1 whitespace-nowrap flex-1">
+        Cleared:
+        <Currency :value="accounts.CurrentAccount?.ClearedBalance" />
+      </span>
+
+      <span
+        v-if="!transactions.Reconciling"
+        class="rounded-lg bg-blue-500 p-1 whitespace-nowrap flex-1"
+        @click="transactions.Reconciling = true"
+      >
+        Reconciled:
+        <Currency :value="accounts.CurrentAccount?.ReconciledBalance" />
+      </span>
+
+      <span
+        v-if="transactions.Reconciling"
+        class="contents"
+      >
+        <Button
+          class="bg-blue-500 p-1 whitespace-nowrap flex-1"
+          @click="submitReconcilation"
+        >
+          My current balance is&nbsp;
+          <Currency :value="transactions.ReconcilingBalance" />
+        </Button>
+
+        <Button
+          class="bg-orange-500 p-1 whitespace-nowrap flex-1"
+          @click="createReconcilationTransaction"
+        >
+          No, it's:
+          <Input
+            v-model="TargetReconcilingBalance"
+            class="text-right w-20 bg-transparent dark:bg-transparent border-b-2"
+            type="number"
+          />
+          (Difference
+          <Currency
+            :value="transactions.ReconcilingBalance - TargetReconcilingBalance"
+          />)
+        </Button>
+        <Button
+          class="bg-red-500 p-1 flex-1"
+          @click="cancelReconcilation"
+        >Cancel</Button>
+      </span>
     </div>
+  </div>
+
+  <table>
+    <tr class="font-bold">
+      <td
+        class="hidden md:block"
+        style="width: 90px;"
+      >
+        Date
+      </td>
+      <td style="max-width: 150px;">
+        Payee
+      </td>
+      <td style="max-width: 200px;">
+        Category
+      </td>
+      <td>Memo</td>
+      <td class="text-right">
+        Amount
+      </td>
+      <td style="width: 80px;">
+        <Input
+          v-if="transactions.Reconciling"
+          type="checkbox"
+          @input="setReconciled"
+        />
+      </td>
+    </tr>
+    <TransactionInputRow
+      class="hidden md:table-row"
+      :budgetid="budgetid"
+      :accountid="accountid"
+    />
+    <TransactionRow
+      v-for="(transaction, index) in transactions.TransactionsList"
+      :key="transaction.ID"
+      :transactionid="transaction.ID"
+      :index="index"
+    />
+  </table>
+  <div class="md:hidden">
+    <Modal>
+      <template #placeholder>
+        <Button
+          class="fixed right-4 bottom-4 font-bold text-lg bg-blue-500 py-2"
+        >
+          +
+        </Button>
+      </template>
+      <TransactionInputRow
+        class="grid grid-cols-2"
+        :budgetid="budgetid"
+        :accountid="accountid"
+      />
+    </Modal>
+  </div>
 </template>
 
 <style>

web/src/pages/Admin.vue

@@ -8,9 +8,9 @@ onMounted(() => {
 </script>
 
 <template>
-    <h1>Danger Zone</h1>
-    <div class="budget-item">
-        <button>Clear database</button>
-        <p>This removes all data and starts from scratch. Not undoable!</p>
-    </div>
+  <h1>Danger Zone</h1>
+  <div class="budget-item">
+    <button>Clear database</button>
+    <p>This removes all data and starts from scratch. Not undoable!</p>
+  </div>
 </template>

web/src/pages/BudgetSidebar.vue

@@ -22,59 +22,66 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
 </script>
 
 <template>
-    <div
-        :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
-        class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black">
-        <div class="flex flex-col mt-14 md:mt-0">
-            <span
-                class="m-2 p-1 px-3 h-10 overflow-hidden"
-                :class="[ExpandMenu ? 'text-2xl' : 'text-md']">
-                <router-link to="/dashboard" style="font-size:150%"
-                    >⌂</router-link
-                >
-                {{ CurrentBudgetName }}
-            </span>
-            <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
-                <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'"
-                    >Budget</router-link
-                >
-                <br />
-                <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
-                <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
-            </span>
-            <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
-                <div class="flex flex-row justify-between font-bold">
-                    <span>On-Budget Accounts</span>
-                    <Currency
-                        :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="OnBudgetAccountsBalance" />
-                </div>
-                <div
-                    v-for="account in OnBudgetAccounts"
-                    class="flex flex-row justify-between">
-                    <AccountWithReconciled :account="account" />
-                    <Currency
-                        :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="account.ClearedBalance" />
-                </div>
-            </li>
-            <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
-                <div class="flex flex-row justify-between font-bold">
-                    <span>Off-Budget Accounts</span>
-                    <Currency
-                        :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="OffBudgetAccountsBalance" />
-                </div>
-                <div
-                    v-for="account in OffBudgetAccounts"
-                    class="flex flex-row justify-between">
-                    <AccountWithReconciled :account="account" />
-                    <Currency
-                        :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="account.ClearedBalance" />
-                </div>
-            </li>
-            <!--
+  <div
+    :class="[ExpandMenu ? 'md:w-72' : 'md:w-36', ShowMenu ? '' : 'hidden']"
+    class="md:block flex-shrink-0 w-full bg-gray-500 border-r-4 border-black"
+  >
+    <div class="flex flex-col mt-14 md:mt-0">
+      <span
+        class="m-2 p-1 px-3 h-10 overflow-hidden"
+        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
+      >
+        <router-link
+          to="/dashboard"
+          style="font-size:150%"
+        >⌂</router-link>
+        {{ CurrentBudgetName }}
+      </span>
+      <span class="bg-gray-100 dark:bg-gray-700 p-2 px-3 flex flex-col">
+        <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
+        <br>
+        <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
+        <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
+      </span>
+      <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
+        <div class="flex flex-row justify-between font-bold">
+          <span>On-Budget Accounts</span>
+          <Currency
+            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
+            :value="OnBudgetAccountsBalance"
+          />
+        </div>
+        <div
+          v-for="account in OnBudgetAccounts"
+          class="flex flex-row justify-between"
+        >
+          <AccountWithReconciled :account="account" />
+          <Currency
+            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
+            :value="account.ClearedBalance"
+          />
+        </div>
+      </li>
+      <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
+        <div class="flex flex-row justify-between font-bold">
+          <span>Off-Budget Accounts</span>
+          <Currency
+            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
+            :value="OffBudgetAccountsBalance"
+          />
+        </div>
+        <div
+          v-for="account in OffBudgetAccounts"
+          class="flex flex-row justify-between"
+        >
+          <AccountWithReconciled :account="account" />
+          <Currency
+            :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
+            :value="account.ClearedBalance"
+          />
+        </div>
+      </li>
+      <!--
     <li class="bg-slate-100 dark:bg-slate-800 my-2 p-2 px-3">
       <div class="flex flex-row justify-between font-bold">
         <span>Closed Accounts</span>
@@ -82,15 +89,15 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       + Add Account
     </li>
       -->
-            <!--<li>
+      <!--<li>
       <router-link :to="'/budget/'+CurrentBudgetID+'/accounts'">Edit accounts</router-link>
       </li>-->
-            <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
-                <router-link :to="'/budget/' + CurrentBudgetID + '/settings'"
-                    >Budget-Settings</router-link
-                >
-            </li>
-            <!--<li><router-link to="/admin">Admin</router-link></li>-->
-        </div>
+      <li class="bg-red-100 dark:bg-slate-600 my-2 p-2 px-3">
+        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
+          Budget-Settings
+        </router-link>
+      </li>
+      <!--<li><router-link to="/admin">Admin</router-link></li>-->
     </div>
+  </div>
 </template>

web/src/pages/Budgeting.vue

@@ -75,79 +75,91 @@ function assignedChanged(e : Event, category : Category){
 </script>
 
 <template>
-    <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
-    <span
-        >Available balance:
-        <Currency
-            :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
+  <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
+  <span>Available balance:
+    <Currency
+      :value="accountStore.GetIncomeAvailable(selected.Year, selected.Month)"
     /></span>
-    <div>
-        <router-link
-            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
-            >&lt;&lt;</router-link
-        >&nbsp;
-        <router-link
-            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
-            >Current Month</router-link
-        >&nbsp;
-        <router-link
-            :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
-            >&gt;&gt;</router-link
-        >
-    </div>
-    <div
-        class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5"
-        id="content">
-        <span class="hidden sm:block"></span>
-        <span class="hidden lg:block text-right">Leftover</span>
-        <span class="hidden sm:block text-right">Assigned</span>
-        <span class="hidden sm:block text-right">Activity</span>
-        <span class="hidden sm:block text-right">Available</span>
-        <template v-for="group in GroupsForMonth">
-            <span
-                class="text-lg font-bold mt-2"
-                @click="toggleGroup(group)"
-                >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span
-            >
-            <Currency
-                :value="group.AvailableLastMonth"
-                class="hidden lg:block mt-2"
-                positive-class="text-slate-500"
-                negative-class="text-red-700 dark:text-red-400" />
-            <Currency
-                :value="group.Assigned"
-                class="hidden sm:block mx-2 mt-2 text-right"
-                positive-class="text-slate-500"
-                negative-class="text-red-700 dark:text-red-400" />
-            <Currency
-                :value="group.Activity"
-                class="hidden sm:block mt-2"
-                positive-class="text-slate-500"
-                negative-class="text-red-700 dark:text-red-400" />
-            <Currency
-                :value="group.Available"
-                class="mt-2"
-                positive-class="text-slate-500"
-                negative-class="text-red-700 dark:text-red-400" />
-            <template
-                v-for="category in GetCategories(group.Name)"
-                v-if="getGroupState(group)">
-                <span
-                    class="whitespace-nowrap overflow-hidden"
-                    >{{ category.Name }}</span
-                >
-                <Currency
-                    :value="category.AvailableLastMonth"
-                    class="hidden lg:block" />
-                <Input
-                    type="number"
-                    v-model="category.Assigned"
-                    @input="(evt) => assignedChanged(evt, category)"
-                    class="hidden sm:block mx-2 text-right" />
-                <Currency :value="category.Activity" class="hidden sm:block" />
-                <Currency
-                    :value="accountStore.GetCategoryAvailable(category)" />
-            </template>
-        </template>
-    </div>
+  <div>
+    <router-link
+      :to="'/budget/' + CurrentBudgetID + '/budgeting/' + previous.Year + '/' + previous.Month"
+    >
+      &lt;&lt;
+    </router-link>&nbsp;
+    <router-link
+      :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
+    >
+      Current Month
+    </router-link>&nbsp;
+    <router-link
+      :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
+    >
+      &gt;&gt;
+    </router-link>
+  </div>
+  <div
+    id="content"
+    class="container col-lg-12 grid grid-cols-2 sm:grid-cols-4 lg:grid-cols-5"
+  >
+    <span class="hidden sm:block" />
+    <span class="hidden lg:block text-right">Leftover</span>
+    <span class="hidden sm:block text-right">Assigned</span>
+    <span class="hidden sm:block text-right">Activity</span>
+    <span class="hidden sm:block text-right">Available</span>
+    <template v-for="group in GroupsForMonth">
+      <span
+        class="text-lg font-bold mt-2"
+        @click="toggleGroup(group)"
+      >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span>
+      <Currency
+        :value="group.AvailableLastMonth"
+        class="hidden lg:block mt-2"
+        positive-class="text-slate-500"
+        negative-class="text-red-700 dark:text-red-400"
+      />
+      <Currency
+        :value="group.Assigned"
+        class="hidden sm:block mx-2 mt-2 text-right"
+        positive-class="text-slate-500"
+        negative-class="text-red-700 dark:text-red-400"
+      />
+      <Currency
+        :value="group.Activity"
+        class="hidden sm:block mt-2"
+        positive-class="text-slate-500"
+        negative-class="text-red-700 dark:text-red-400"
+      />
+      <Currency
+        :value="group.Available"
+        class="mt-2"
+        positive-class="text-slate-500"
+        negative-class="text-red-700 dark:text-red-400"
+      />
+      <template
+        v-for="category in GetCategories(group.Name)"
+        v-if="getGroupState(group)"
+      >
+        <span
+          class="whitespace-nowrap overflow-hidden"
+        >{{ category.Name }}</span>
+        <Currency
+          :value="category.AvailableLastMonth"
+          class="hidden lg:block"
+        />
+        <Input
+          v-model="category.Assigned"
+          type="number"
+          class="hidden sm:block mx-2 text-right"
+          @input="(evt) => assignedChanged(evt, category)"
+        />
+        <Currency
+          :value="category.Activity"
+          class="hidden sm:block"
+        />
+        <Currency
+          :value="accountStore.GetCategoryAvailable(category)"
+        />
+      </template>
+    </template>
+  </div>
 </template>

web/src/pages/Dashboard.vue

@@ -11,19 +11,18 @@ const BudgetsList = useSessionStore().BudgetsList;
 </script>
 
 <template>
-    <h1>Budgets</h1>
-    <div class="grid md:grid-cols-2 gap-6">
-        <Card v-for="budget in BudgetsList">
-            <router-link
-                v-bind:to="'/budget/'+budget.ID+'/budgeting'"
-                class="contents">
-                <!--<svg class="w-24"></svg>-->
-                <p class="w-24 text-center text-6xl"></p>
-                <span class="text-lg"
-                    >{{budget.Name}}{{budget.ID == budgetid ? " *" : ""}}</span
-                >
-            </router-link>
-        </Card>
-        <NewBudget />
-    </div>
+  <h1>Budgets</h1>
+  <div class="grid md:grid-cols-2 gap-6">
+    <Card v-for="budget in BudgetsList">
+      <router-link
+        :to="'/budget/'+budget.ID+'/budgeting'"
+        class="contents"
+      >
+        <!--<svg class="w-24"></svg>-->
+        <p class="w-24 text-center text-6xl" />
+        <span class="text-lg">{{ budget.Name }}{{ budget.ID == budgetid ? " *" : "" }}</span>
+      </router-link>
+    </Card>
+    <NewBudget />
+  </div>
 </template>

web/src/pages/Index.vue

@@ -1,13 +1,23 @@
 <script lang="ts" setup></script>
 
 <template>
-    <div>
-        <div class="font-bold" id="content">
-            Willkommen bei Budgeteer, der neuen App für's Budget!
-        </div>
-        <div class="container col-md-4" id="login">
-            <router-link to="/login">Login</router-link> or
-            <router-link to="/login">register</router-link>
-        </div>
+  <div>
+    <div
+      id="content"
+      class="font-bold"
+    >
+      Willkommen bei Budgeteer, der neuen App für's Budget!
     </div>
+    <div
+      id="login"
+      class="container col-md-4"
+    >
+      <router-link to="/login">
+        Login
+      </router-link> or
+      <router-link to="/login">
+        register
+      </router-link>
+    </div>
+  </div>
 </template>

web/src/pages/Login.vue

@@ -28,27 +28,32 @@ function formSubmit(e: MouseEvent) {
 </script>
 
 <template>
-    <div>
-        <Input
-            type="text"
-            v-model="login.user"
-            placeholder="Username"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <Input
-            type="password"
-            v-model="login.password"
-            placeholder="Password"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-    </div>
-    <div>{{ error }}</div>
-    <button
-        type="submit"
-        @click="formSubmit"
-        class="bg-blue-300 rounded-lg p-2 w-48">
-        Login
-    </button>
-    <p>
-        New user?
-        <router-link to="/register">Register</router-link> instead!
-    </p>
+  <div>
+    <Input
+      v-model="login.user"
+      type="text"
+      placeholder="Username"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
+    <Input
+      v-model="login.password"
+      type="password"
+      placeholder="Password"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
+  </div>
+  <div>{{ error }}</div>
+  <button
+    type="submit"
+    class="bg-blue-300 rounded-lg p-2 w-48"
+    @click="formSubmit"
+  >
+    Login
+  </button>
+  <p>
+    New user?
+    <router-link to="/register">
+      Register
+    </router-link> instead!
+  </p>
 </template>

web/src/pages/Register.vue

@@ -28,32 +28,38 @@ function formSubmit(e: MouseEvent) {
 </script>
 
 <template>
-    <div>
-        <Input
-            type="text"
-            v-model="login.name"
-            placeholder="Name"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <Input
-            type="text"
-            v-model="login.email"
-            placeholder="Email"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-        <Input
-            type="password"
-            v-model="login.password"
-            placeholder="Password"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
-    </div>
-    <div>{{ error }}</div>
-    <button
-        type="submit"
-        @click="formSubmit"
-        class="bg-blue-300 rounded-lg p-2 w-48">
-        Register
-    </button>
-    <p>
-        Existing user?
-        <router-link to="/login">Login</router-link> instead!
-    </p>
+  <div>
+    <Input
+      v-model="login.name"
+      type="text"
+      placeholder="Name"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
+    <Input
+      v-model="login.email"
+      type="text"
+      placeholder="Email"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
+    <Input
+      v-model="login.password"
+      type="password"
+      placeholder="Password"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
+  </div>
+  <div>{{ error }}</div>
+  <button
+    type="submit"
+    class="bg-blue-300 rounded-lg p-2 w-48"
+    @click="formSubmit"
+  >
+    Register
+  </button>
+  <p>
+    Existing user?
+    <router-link to="/login">
+      Login
+    </router-link> instead!
+  </p>
 </template>

web/src/pages/Settings.vue

@@ -75,79 +75,102 @@ function ynabExport() {
 </script>
 
 <template>
-    <div>
-        <h1>Danger Zone</h1>
-        <div class="grid md:grid-cols-2 gap-6">
-            <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">Clear Budget</h2>
-                <p>
-                    This removes transactions and assignments to start from
-                    scratch. Accounts and categories are kept. Not undoable!
-                </p>
+  <div>
+    <h1>Danger Zone</h1>
+    <div class="grid md:grid-cols-2 gap-6">
+      <Card class="flex-col p-3">
+        <h2 class="text-lg font-bold">
+          Clear Budget
+        </h2>
+        <p>
+          This removes transactions and assignments to start from
+          scratch. Accounts and categories are kept. Not undoable!
+        </p>
 
-                <Button class="bg-red-500 py-2" @click="clearBudget"
-                    >Clear budget</Button
-                >
-            </Card>
-            <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">Delete Budget</h2>
-                <p>
-                    This deletes the whole bugdet including all transactions,
-                    assignments, accounts and categories. Not undoable!
-                </p>
-                <Button class="bg-red-500 py-2" @click="deleteBudget"
-                    >Delete budget</Button
-                >
-            </Card>
-            <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">
-                    Fix all historic negative category-balances
-                </h2>
-                <p>
-                    This restores YNABs functionality, that would substract any
-                    overspent categories' balances from next months inflows.
-                </p>
-                <Button class="bg-orange-500 py-2" @click="cleanNegative"
-                    >Fix negative</Button
-                >
-            </Card>
-            <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">Import YNAB Budget</h2>
+        <Button
+          class="bg-red-500 py-2"
+          @click="clearBudget"
+        >
+          Clear budget
+        </Button>
+      </Card>
+      <Card class="flex-col p-3">
+        <h2 class="text-lg font-bold">
+          Delete Budget
+        </h2>
+        <p>
+          This deletes the whole bugdet including all transactions,
+          assignments, accounts and categories. Not undoable!
+        </p>
+        <Button
+          class="bg-red-500 py-2"
+          @click="deleteBudget"
+        >
+          Delete budget
+        </Button>
+      </Card>
+      <Card class="flex-col p-3">
+        <h2 class="text-lg font-bold">
+          Fix all historic negative category-balances
+        </h2>
+        <p>
+          This restores YNABs functionality, that would substract any
+          overspent categories' balances from next months inflows.
+        </p>
+        <Button
+          class="bg-orange-500 py-2"
+          @click="cleanNegative"
+        >
+          Fix negative
+        </Button>
+      </Card>
+      <Card class="flex-col p-3">
+        <h2 class="text-lg font-bold">
+          Import YNAB Budget
+        </h2>
 
-                <div>
-                    <label for="transactions_file">
-                        Transaktionen:
-                        <input
-                            type="file"
-                            @change="gotTransactions"
-                            accept="text/*" />
-                    </label>
-                    <br />
-                    <label for="assignments_file">
-                        Budget:
-                        <input
-                            type="file"
-                            @change="gotAssignments"
-                            accept="text/*" />
-                    </label>
-                </div>
-
-                <Button
-                    class="bg-blue-500 py-2"
-                    :disabled="filesIncomplete"
-                    @click="ynabImport"
-                    >Importieren</Button
-                >
-            </Card>
-            <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">Export as YNAB TSV</h2>
-
-                <div class="flex flex-row">
-                    <Button class="bg-blue-500 py-2" @click="ynabExport"
-                        >Export</Button
-                    >
-                </div>
-            </Card>
+        <div>
+          <label for="transactions_file">
+            Transaktionen:
+            <input
+              type="file"
+              accept="text/*"
+              @change="gotTransactions"
+            >
+          </label>
+          <br>
+          <label for="assignments_file">
+            Budget:
+            <input
+              type="file"
+              accept="text/*"
+              @change="gotAssignments"
+            >
+          </label>
         </div>
+
+        <Button
+          class="bg-blue-500 py-2"
+          :disabled="filesIncomplete"
+          @click="ynabImport"
+        >
+          Importieren
+        </Button>
+      </Card>
+      <Card class="flex-col p-3">
+        <h2 class="text-lg font-bold">
+          Export as YNAB TSV
+        </h2>
+
+        <div class="flex flex-row">
+          <Button
+            class="bg-blue-500 py-2"
+            @click="ynabExport"
+          >
+            Export
+          </Button>
+        </div>
+      </Card>
     </div>
+  </div>
 </template>