Run eslint with autofix

2022-03-15 12:55:22 +00:00 · 2022-03-15 12:55:22 +00:00 · 3ea90a5ebe
commit 3ea90a5ebe
parent d717ef1b4d
24 changed files with 812 additions and 644 deletions
--- a/web/src/App.vue
+++ b/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"
-                        >Dashboard</router-link
+          <router-link
+            v-if="LoggedIn"
+            class="mx-4"
+            to="/dashboard"
          >
-                    <router-link class="mx-4" v-if="!LoggedIn" to="/login"
-                        >Login</router-link
+            Dashboard
+          </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>
--- a/web/src/components/AccountWithReconciled.vue
+++ b/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>
--- a/web/src/components/Autocomplete.vue
+++ b/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>
--- a/web/src/components/Button.vue
+++ b/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>
--- a/web/src/components/Card.vue
+++ b/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">
-        <slot></slot>
+    class="flex flex-row items-center bg-gray-300 dark:bg-gray-700 rounded-lg"
+  >
+    <slot />
  </div>
 </template>
--- a/web/src/components/Checkbox.vue
+++ b/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>
--- a/web/src/components/Currency.vue
+++ b/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>
--- a/web/src/components/DateInput.vue
+++ b/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>
--- a/web/src/components/Input.vue
+++ b/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>
--- a/web/src/components/Modal.vue
+++ b/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>
-                <span class="text-lg" dark>{{ buttonText }}</span>
+        <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">
+    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>
--- a/web/src/components/TransactionEditRow.vue
+++ b/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>
--- a/web/src/components/TransactionInputRow.vue
+++ b/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>
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@ -47,17 +47,26 @@ 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">
+  <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 ? '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>
--- a/web/src/dialogs/EditAccount.vue
+++ b/web/src/dialogs/EditAccount.vue
@ -45,25 +45,40 @@ function openEditAccount(e : any) {
  <Modal
    button-text="Edit Account"
    @open="openEditAccount"
-        @submit="editAccount">
-        <template v-slot:placeholder><span class="ml-2">✎</span></template>
+    @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"
-                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>
--- a/web/src/dialogs/NewBudget.vue
+++ b/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>
--- a/web/src/pages/Account.vue
+++ b/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 style="max-width: 150px;">Payee</td>
-            <td style="max-width: 200px;">Category</td>
+      <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 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>
--- a/web/src/pages/BudgetSidebar.vue
+++ b/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']">
-                <router-link to="/dashboard" style="font-size:150%"
-                    >⌂</router-link
+        :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 + '/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>
@ -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'"
-                    >Budget-Settings</router-link
-                >
+        <router-link :to="'/budget/' + CurrentBudgetID + '/settings'">
+          Budget-Settings
+        </router-link>
      </li>
      <!--<li><router-link to="/admin">Admin</router-link></li>-->
    </div>
--- a/web/src/pages/Budgeting.vue
+++ b/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
-        >Available balance:
+  <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;
+    >
+      &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>
--- a/web/src/pages/Dashboard.vue
+++ b/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'"
-                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
+        :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 />
--- a/web/src/pages/Index.vue
+++ b/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">
-            <router-link to="/login">Login</router-link> or
-            <router-link to="/login">register</router-link>
+    <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>
--- a/web/src/pages/Login.vue
+++ b/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>
--- a/web/src/pages/Register.vue
+++ b/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="Email"
-            class="border-2 border-black rounded-lg block px-2 my-2 w-48" />
+      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
-            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>
--- a/web/src/pages/Settings.vue
+++ b/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"
-                    >Clear budget</Button
+        <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"
-                    >Delete budget</Button
+        <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"
-                    >Fix negative</Button
+        <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"
-                        >Export</Button
+          <Button
+            class="bg-blue-500 py-2"
+            @click="ynabExport"
          >
+            Export
+          </Button>
        </div>
      </Card>
    </div>