Run eslint with autofix

web/src/App.vue

@@ -27,37 +27,48 @@ export default defineComponent({
 
 <template>
   <div class="flex flex-col md:flex-row flex-1 h-screen">
-        <router-view name="sidebar"></router-view>
+    <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">
+        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>
-                >
         <span
           class="flex-1 font-bold text-5xl -my-3 md:hidden"
           @click="toggleMenu"
-                    >≡</span
+        >≡</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"
+          <router-link
-                        >Dashboard</router-link
+            v-if="LoggedIn"
+            class="mx-4"
+            to="/dashboard"
           >
-                    <router-link class="mx-4" v-if="!LoggedIn" to="/login"
+            Dashboard
-                        >Login</router-link
+          </router-link>
+          <router-link
+            v-if="!LoggedIn"
+            class="mx-4"
+            to="/login"
           >
-                    <a class="mx-4" v-if="LoggedIn" @click="logout">Logout</a>
+            Login
+          </router-link>
+          <a
+            v-if="LoggedIn"
+            class="mx-4"
+            @click="logout"
+          >Logout</a>
         </div>
       </div>
 
       <div class="p-3 pl-6">
-                <router-view></router-view>
+        <router-view />
       </div>
     </div>
   </div>

web/src/components/AccountWithReconciled.vue

@@ -21,12 +21,14 @@ function daysSinceLastReconciled() {
 <template>
   <span>
     <router-link
-            :to="'/budget/' + CurrentBudgetID + '/account/' + account.ID">
+      :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">
+      class="font-bold bg-gray-500 rounded-md text-sm px-2 mx-2 py-1 no-underline"
+    >
       {{ daysSinceLastReconciled() }}
     </span>
   </span>

web/src/components/Autocomplete.vue

@@ -83,27 +83,27 @@ function clear() {
 <template>
   <div>
     <Input
+      v-if="id == undefined"
+      v-model="SearchQuery"
       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
+      @click="clear"
-        >
+    >{{ text }}</span>
     <div
       v-if="Suggestions.length > 0"
-            class="absolute bg-gray-400 dark:bg-gray-600 w-64 p-2">
+      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
+        @click="select"
-            >
+      >{{ suggestion.Name }}</span>
     </div>
   </div>
 </template>

web/src/components/Button.vue

@@ -2,6 +2,6 @@
 
 <template>
   <button class="px-4 rounded-md shadow-sm focus:outline-none focus:ring-2">
-        <slot></slot>
+    <slot />
   </button>
 </template>

web/src/components/Card.vue

@@ -2,7 +2,8 @@
 
 <template>
   <div
-        class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg">
+    class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg"
-        <slot></slot>
+  >
+    <slot />
   </div>
 </template>

web/src/components/Checkbox.vue

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

web/src/components/Currency.vue

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

web/src/components/DateInput.vue

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

web/src/components/Input.vue

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

web/src/components/Modal.vue

@@ -33,31 +33,41 @@ function submitDialog() {
   <button @click="openDialog">
     <slot name="placeholder">
       <Card>
-                <p class="w-24 text-center text-6xl">+</p>
+        <p class="w-24 text-center text-6xl">
-                <span class="text-lg" dark>{{ buttonText }}</span>
+          +
+        </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">
+    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">
+      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">
+          class="mt-3 text-lg leading-6 font-medium text-gray-900 dark:text-gray-100"
+        >
           {{ buttonText }}
         </h3>
-                <slot></slot>
+        <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"
-                        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
+            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"
-                        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>

web/src/components/TransactionEditRow.vue

@@ -40,36 +40,48 @@ function saveTransaction(e: MouseEvent) {
 <template>
   <tr>
     <td class="text-sm">
-            <DateInput class="border-b-2 border-black" v-model="TX.Date" />
+      <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" />
+        model="payees"
+      />
     </td>
     <td>
       <Autocomplete
         v-model:text="TX.Category"
         v-model:id="TX.CategoryID"
-                model="categories" />
+        model="categories"
+      />
     </td>
     <td>
       <Input
+        v-model="TX.Memo"
         class="block w-full border-b-2 border-black"
         type="text"
-                v-model="TX.Memo" />
+      />
     </td>
     <td class="text-right">
       <Input
+        v-model="TX.Amount"
         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>
+      <Button
+        class="bg-blue-500"
+        @click="saveTransaction"
+      >
+        Save
+      </Button>
     </td>
-        <td></td>
+    <td />
   </tr>
 </template>

web/src/components/TransactionInputRow.vue

@@ -55,7 +55,10 @@ function saveTransaction(e: MouseEvent) {
   <tr>
     <label class="md:hidden">Date</label>
     <td class="text-sm">
-            <DateInput class="border-b-2 border-black" v-model="TX.Date" />
+      <DateInput
+        v-model="TX.Date"
+        class="border-b-2 border-black"
+      />
     </td>
     <label class="md:hidden">Payee</label>
     <td>
@@ -63,30 +66,39 @@ function saveTransaction(e: MouseEvent) {
         v-model:text="TX.Payee"
         v-model:id="TX.PayeeID"
         v-model:type="payeeType"
-                model="payees" />
+        model="payees"
+      />
     </td>
     <label class="md:hidden">Category</label>
     <td>
       <Autocomplete
         v-model:text="TX.Category"
         v-model:id="TX.CategoryID"
-                model="categories" />
+        model="categories"
+      />
     </td>
     <td class="col-span-2">
       <Input
+        v-model="TX.Memo"
         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
+        v-model="TX.Amount"
         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>
+      <Button
+        class="bg-blue-500"
+        @click="saveTransaction"
+      >
+        Save
+      </Button>
     </td>
   </tr>
 </template>

web/src/components/TransactionRow.vue

@@ -47,17 +47,26 @@ function getStatusSymbol() {
 </script>
 
 <template>
-    <tr v-if="dateChanged()" class="table-row md:hidden">
+  <tr
-        <td class="bg-gray-200 dark:bg-gray-800 rounded-lg p-2" colspan="5">
+    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 ? '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="hidden md:block">
+      {{ formatDate(TX.Date) }}
+    </td>
     <td class="pl-2 md:pl-0">
       {{ TX.TransferAccount ? "Transfer : " + TX.TransferAccount : TX.Payee }}
     </td>
@@ -67,11 +76,13 @@ function getStatusSymbol() {
     <td>
       <a
         :href="'/budget/' + CurrentBudgetID + '/transaction/' + TX.ID"
-                >{{ TX.Memo }}</a
+      >{{ TX.Memo }}</a>
-            >
     </td>
     <td>
-            <Currency class="block" :value="TX.Amount" />
+      <Currency
+        class="block"
+        :value="TX.Amount"
+      />
     </td>
     <td class="text-right">
       {{ TX.GroupID ? "☀" : "" }}
@@ -79,13 +90,15 @@ function getStatusSymbol() {
       <a @click="edit = true;">✎</a>
       <Checkbox
         v-if="Reconciling && TX.Status != 'Reconciled'"
-                v-model="TX.Reconciled" />
+        v-model="TX.Reconciled"
+      />
     </td>
   </tr>
   <TransactionEditRow
     v-if="edit"
     :transactionid="TX.ID"
-        @save="edit = false" />
+    @save="edit = false"
+  />
 </template>
 
 <style>

web/src/dialogs/EditAccount.vue

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

web/src/dialogs/NewBudget.vue

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

web/src/pages/Account.vue

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

web/src/pages/BudgetSidebar.vue

@@ -24,21 +24,22 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
 <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">
+    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']">
+        :class="[ExpandMenu ? 'text-2xl' : 'text-md']"
-                <router-link to="/dashboard" style="font-size:150%"
-                    >⌂</router-link
       >
+        <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'"
+        <router-link :to="'/budget/' + CurrentBudgetID + '/budgeting'">Budget</router-link>
-                    >Budget</router-link
+        <br>
-                >
-                <br />
         <!--<router-link :to="'/budget/'+CurrentBudgetID+'/reports'">Reports</router-link>-->
         <!--<router-link :to="'/budget/'+CurrentBudgetID+'/all-accounts'">All Accounts</router-link>-->
       </span>
@@ -47,15 +48,18 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
           <span>On-Budget Accounts</span>
           <Currency
             :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="OnBudgetAccountsBalance" />
+            :value="OnBudgetAccountsBalance"
+          />
         </div>
         <div
           v-for="account in OnBudgetAccounts"
-                    class="flex flex-row justify-between">
+          class="flex flex-row justify-between"
+        >
           <AccountWithReconciled :account="account" />
           <Currency
             :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="account.ClearedBalance" />
+            :value="account.ClearedBalance"
+          />
         </div>
       </li>
       <li class="bg-slate-200 dark:bg-slate-700 my-2 p-2 px-3">
@@ -63,15 +67,18 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
           <span>Off-Budget Accounts</span>
           <Currency
             :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="OffBudgetAccountsBalance" />
+            :value="OffBudgetAccountsBalance"
+          />
         </div>
         <div
           v-for="account in OffBudgetAccounts"
-                    class="flex flex-row justify-between">
+          class="flex flex-row justify-between"
+        >
           <AccountWithReconciled :account="account" />
           <Currency
             :class="ExpandMenu ? 'md:inline' : 'md:hidden'"
-                        :value="account.ClearedBalance" />
+            :value="account.ClearedBalance"
+          />
         </div>
       </li>
       <!--
@@ -86,9 +93,9 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       <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'"
+        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
-                    >Budget-Settings</router-link
+          Budget-Settings
-                >
+        </router-link>
       </li>
       <!--<li><router-link to="/admin">Admin</router-link></li>-->
     </div>

web/src/pages/Budgeting.vue

@@ -76,29 +76,32 @@ function assignedChanged(e : Event, category : Category){
 
 <template>
   <h1>Budget for {{ selected.Month + 1 }}/{{ selected.Year }}</h1>
-    <span
+  <span>Available balance:
-        >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;
+      &lt;&lt;
+    </router-link>&nbsp;
     <router-link
       :to="'/budget/' + CurrentBudgetID + '/budgeting/' + current.Year + '/' + current.Month"
-            >Current Month</router-link
+    >
-        >&nbsp;
+      Current Month
+    </router-link>&nbsp;
     <router-link
       :to="'/budget/' + CurrentBudgetID + '/budgeting/' + next.Year + '/' + next.Month"
-            >&gt;&gt;</router-link
     >
+      &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"
-        id="content">
+  >
-        <span class="hidden sm:block"></span>
+    <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>
@@ -107,46 +110,55 @@ function assignedChanged(e : Event, category : Category){
       <span
         class="text-lg font-bold mt-2"
         @click="toggleGroup(group)"
-                >{{ (getGroupState(group) ? "−" : "+") + " " + group.Name }}</span
+      >{{ (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" />
+        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" />
+        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" />
+        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" />
+        negative-class="text-red-700 dark:text-red-400"
+      />
       <template
         v-for="category in GetCategories(group.Name)"
-                v-if="getGroupState(group)">
+        v-if="getGroupState(group)"
+      >
         <span
           class="whitespace-nowrap overflow-hidden"
-                    >{{ category.Name }}</span
+        >{{ category.Name }}</span>
-                >
         <Currency
           :value="category.AvailableLastMonth"
-                    class="hidden lg:block" />
+          class="hidden lg:block"
+        />
         <Input
-                    type="number"
           v-model="category.Assigned"
+          type="number"
+          class="hidden sm:block mx-2 text-right"
           @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)" />
+          :value="category.Activity"
+          class="hidden sm:block"
+        />
+        <Currency
+          :value="accountStore.GetCategoryAvailable(category)"
+        />
       </template>
     </template>
   </div>

web/src/pages/Dashboard.vue

@@ -15,13 +15,12 @@ const BudgetsList = useSessionStore().BudgetsList;
   <div class="grid md:grid-cols-2 gap-6">
     <Card v-for="budget in BudgetsList">
       <router-link
-                v-bind:to="'/budget/'+budget.ID+'/budgeting'"
+        :to="'/budget/'+budget.ID+'/budgeting'"
-                class="contents">
+        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
       >
+        <!--<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 />

web/src/pages/Index.vue

@@ -2,12 +2,22 @@
 
 <template>
   <div>
-        <div class="font-bold" id="content">
+    <div
+      id="content"
+      class="font-bold"
+    >
       Willkommen bei Budgeteer, der neuen App für's Budget!
     </div>
-        <div class="container col-md-4" id="login">
+    <div
-            <router-link to="/login">Login</router-link> or
+      id="login"
-            <router-link to="/login">register</router-link>
+      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

@@ -30,25 +30,30 @@ function formSubmit(e: MouseEvent) {
 <template>
   <div>
     <Input
-            type="text"
       v-model="login.user"
+      type="text"
       placeholder="Username"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
+    />
     <Input
-            type="password"
       v-model="login.password"
+      type="password"
       placeholder="Password"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+      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"
-        class="bg-blue-300 rounded-lg p-2 w-48">
+  >
     Login
   </button>
   <p>
     New user?
-        <router-link to="/register">Register</router-link> instead!
+    <router-link to="/register">
+      Register
+    </router-link> instead!
   </p>
 </template>

web/src/pages/Register.vue

@@ -30,30 +30,36 @@ function formSubmit(e: MouseEvent) {
 <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="Name"
-            placeholder="Email"
+      class="border-2 border-black rounded-lg block px-2 my-2 w-48"
-            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
-            type="password"
       v-model="login.password"
+      type="password"
       placeholder="Password"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+      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"
-        class="bg-blue-300 rounded-lg p-2 w-48">
+  >
     Register
   </button>
   <p>
     Existing user?
-        <router-link to="/login">Login</router-link> instead!
+    <router-link to="/login">
+      Login
+    </router-link> instead!
   </p>
 </template>

web/src/pages/Settings.vue

@@ -79,25 +79,35 @@ function ynabExport() {
     <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>
+        <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"
+        <Button
-                    >Clear budget</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>
+        <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"
+        <Button
-                    >Delete budget</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">
@@ -107,28 +117,35 @@ function ynabExport() {
           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"
+        <Button
-                    >Fix negative</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>
+        <h2 class="text-lg font-bold">
+          Import YNAB Budget
+        </h2>
 
         <div>
           <label for="transactions_file">
             Transaktionen:
             <input
               type="file"
+              accept="text/*"
               @change="gotTransactions"
-                            accept="text/*" />
+            >
           </label>
-                    <br />
+          <br>
           <label for="assignments_file">
             Budget:
             <input
               type="file"
+              accept="text/*"
               @change="gotAssignments"
-                            accept="text/*" />
+            >
           </label>
         </div>
 
@@ -136,16 +153,22 @@ function ynabExport() {
           class="bg-blue-500 py-2"
           :disabled="filesIncomplete"
           @click="ynabImport"
-                    >Importieren</Button
         >
+          Importieren
+        </Button>
       </Card>
       <Card class="flex-col p-3">
-                <h2 class="text-lg font-bold">Export as YNAB TSV</h2>
+        <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"
+          <Button
-                        >Export</Button
+            class="bg-blue-500 py-2"
+            @click="ynabExport"
           >
+            Export
+          </Button>
         </div>
       </Card>
     </div>