Run prettier

2022-03-15 12:49:53 +00:00 · 2022-03-15 12:49:53 +00:00 · 61a534610f
commit 61a534610f
parent d8d713f841
42 changed files with 1485 additions and 1187 deletions
--- a/web/.eslintrc.js
+++ b/web/.eslintrc.js
@ -1,17 +1,17 @@
 module.exports = {
-  extends: [
-    // add more generic rulesets here, such as:
-    // 'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    // 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
-  ],
-  rules: {
-    // override/add rules settings here, such as:
-    // 'vue/no-unused-vars': 'error'
-  },
-  "parser": "vue-eslint-parser",
-  "parserOptions": {
-    "parser": "@typescript-eslint/parser",
-    "sourceType": "module"
-  }
-}
+	extends: [
+		// add more generic rulesets here, such as:
+		// 'eslint:recommended',
+		"plugin:vue/vue3-recommended",
+		// 'plugin:vue/recommended' // Use this if you are using Vue.js 2.x.
+	],
+	rules: {
+		// override/add rules settings here, such as:
+		// 'vue/no-unused-vars': 'error'
+	},
+	parser: "vue-eslint-parser",
+	parserOptions: {
+		parser: "@typescript-eslint/parser",
+		sourceType: "module",
+	},
+};
--- a/web/index.html
+++ b/web/index.html
@ -1,13 +1,14 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
-  </head>
-  <body class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
+	<head>
+		<meta charset="UTF-8" />
+		<link rel="icon" href="/favicon.ico" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>Vite App</title>
+	</head>
+	<body
+		class="bg-slate-200 text-slate-800 dark:bg-slate-800 dark:text-slate-200 box-border w-full">
+		<div id="app"></div>
+		<script type="module" src="/src/main.ts"></script>
+	</body>
 </html>
--- a/web/postcss.config.js
+++ b/web/postcss.config.js
@ -1,6 +1,6 @@
 module.exports = {
-  plugins: {
-    tailwindcss: {},
-    autoprefixer: {},
-  },
-}
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+};
--- a/web/src/@types/shims-vue.d.ts
+++ b/web/src/@types/shims-vue.d.ts
@ -1,5 +1,5 @@
 declare module "*.vue" {
-  import { defineComponent } from "vue";
-  const component: ReturnType<typeof defineComponent>;
-  export default component;
+	import { defineComponent } from "vue";
+	const component: ReturnType<typeof defineComponent>;
+	export default component;
 }
--- a/web/src/App.vue
+++ b/web/src/App.vue
@ -26,29 +26,39 @@ 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"></router-view>

-        <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="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>
-    </div>
+			<div class="p-3 pl-6">
+				<router-view></router-view>
+			</div>
+		</div>
+	</div>
 </template>
--- a/web/src/api.ts
+++ b/web/src/api.ts
@ -1,26 +1,26 @@
 import { useSessionStore } from "./stores/session";

-export const BASE_URL = "/api/v1"
+export const BASE_URL = "/api/v1";

 export function GET(path: string) {
-    const sessionStore = useSessionStore();
-    return fetch(BASE_URL + path, {
-        headers: sessionStore.AuthHeaders,
-    })
-};
+	const sessionStore = useSessionStore();
+	return fetch(BASE_URL + path, {
+		headers: sessionStore.AuthHeaders,
+	});
+}

 export function POST(path: string, body: FormData | string | null) {
-    const sessionStore = useSessionStore();
-    return fetch(BASE_URL + path, {
-        method: "POST",
-        headers: sessionStore.AuthHeaders,
-        body: body,
-    })
+	const sessionStore = useSessionStore();
+	return fetch(BASE_URL + path, {
+		method: "POST",
+		headers: sessionStore.AuthHeaders,
+		body: body,
+	});
 }
 export function DELETE(path: string) {
-    const sessionStore = useSessionStore();
-    return fetch(BASE_URL + path, {
-        method: "DELETE",
-        headers: sessionStore.AuthHeaders,
-    })
+	const sessionStore = useSessionStore();
+	return fetch(BASE_URL + path, {
+		method: "DELETE",
+		headers: sessionStore.AuthHeaders,
+	});
 }
--- a/web/src/components/AccountWithReconciled.vue
+++ b/web/src/components/AccountWithReconciled.vue
@ -19,13 +19,15 @@ 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>
+	<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>
--- a/web/src/components/Autocomplete.vue
+++ b/web/src/components/Autocomplete.vue
@ -81,22 +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>
+	<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>
 </template>
--- a/web/src/components/Button.vue
+++ b/web/src/components/Button.vue
@ -1,10 +1,7 @@
-<script lang="ts" setup>
-</script>
+<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></slot>
+	</button>
 </template>
--- a/web/src/components/Card.vue
+++ b/web/src/components/Card.vue
@ -1,8 +1,8 @@
-<script lang="ts" setup>
-</script>
+<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></slot>
+	</div>
 </template>
--- a/web/src/components/Checkbox.vue
+++ b/web/src/components/Checkbox.vue
@ -3,9 +3,9 @@ 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"
+		@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
@ -15,5 +15,9 @@ 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>
--- a/web/src/components/DateInput.vue
+++ b/web/src/components/DateInput.vue
@ -26,11 +26,10 @@ function selectAll(event: FocusEvent) {
 </script>

 <template>
-  <Input
-    type="date"
-    ref="input"
-    v-bind:value="dateToYYYYMMDD(modelValue)"
-    @input="updateValue"
-    @focus="selectAll"
-  />
+	<Input
+		type="date"
+		ref="input"
+		v-bind:value="dateToYYYYMMDD(modelValue)"
+		@input="updateValue"
+		@focus="selectAll" />
 </template>
--- a/web/src/components/Input.vue
+++ b/web/src/components/Input.vue
@ -3,8 +3,8 @@ 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"
+		@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
@ -30,33 +30,38 @@ 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>
-    <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>
-        </div>
-    </div>
+	<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
+			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>
+		</div>
+	</div>
 </template>
--- a/web/src/components/TransactionEditRow.vue
+++ b/web/src/components/TransactionEditRow.vue
@ -38,29 +38,38 @@ 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 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>
 </template>
--- a/web/src/components/TransactionInputRow.vue
+++ b/web/src/components/TransactionInputRow.vue
@ -52,32 +52,41 @@ 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 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>
 </template>
--- a/web/src/components/TransactionRow.vue
+++ b/web/src/components/TransactionRow.vue
@ -47,34 +47,45 @@ 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>
--- a/web/src/date.ts
+++ b/web/src/date.ts
@ -1,7 +1,8 @@
 export function formatDate(date: Date): string {
-    return date.toLocaleDateString(undefined, { // you can use undefined as first argument
-        year: "numeric",
-        month: "2-digit",
-        day: "2-digit",
-    });
+	return date.toLocaleDateString(undefined, {
+		// you can use undefined as first argument
+		year: "numeric",
+		month: "2-digit",
+		day: "2-digit",
+	});
 }
--- a/web/src/dialogs/EditAccount.vue
+++ b/web/src/dialogs/EditAccount.vue
@ -42,35 +42,29 @@ 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 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>
 </template>
--- a/web/src/dialogs/NewBudget.vue
+++ b/web/src/dialogs/NewBudget.vue
@ -11,9 +11,14 @@ 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
+				class="border-2"
+				type="text"
+				v-model="budgetName"
+				placeholder="Budget name"
+				required />
+		</div>
+	</Modal>
 </template>
--- a/web/src/index.css
+++ b/web/src/index.css
@ -3,15 +3,15 @@
@tailwind utilities;

 h1 {
-  font-size: 200%;
+	font-size: 200%;
 }

 a {
-  text-decoration: underline;
+	text-decoration: underline;
 }

 #app {
-    font-family: Avenir, Helvetica, Arial, sans-serif;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
+	font-family: Avenir, Helvetica, Arial, sans-serif;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
--- a/web/src/main.ts
+++ b/web/src/main.ts
@ -1,72 +1,79 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import './index.css'
-import router from './router'
-import { createPinia } from 'pinia'
-import { useBudgetsStore } from './stores/budget';
-import { useAccountStore } from './stores/budget-account'
-import PiniaLogger from './pinia-logger'
-import { useSessionStore } from './stores/session'
+import { createApp } from "vue";
+import App from "./App.vue";
+import "./index.css";
+import router from "./router";
+import { createPinia } from "pinia";
+import { useBudgetsStore } from "./stores/budget";
+import { useAccountStore } from "./stores/budget-account";
+import PiniaLogger from "./pinia-logger";
+import { useSessionStore } from "./stores/session";

-const app = createApp(App)
-app.use(router)
+const app = createApp(App);
+app.use(router);

-const pinia = createPinia()
-pinia.use(PiniaLogger({
-  expanded: false,
-  showDuration: true
-}))
-app.use(pinia)
-app.mount('#app')
+const pinia = createPinia();
+pinia.use(
+	PiniaLogger({
+		expanded: false,
+		showDuration: true,
+	})
+);
+app.use(pinia);
+app.mount("#app");

 router.beforeEach(async (to, from, next) => {
-  const budgetStore = useBudgetsStore();
-  await budgetStore.SetCurrentBudget((<string>to.params.budgetid));
+	const budgetStore = useBudgetsStore();
+	await budgetStore.SetCurrentBudget(<string>to.params.budgetid);

-  const accountStore = useAccountStore();
-  await accountStore.SetCurrentAccount((<string>to.params.budgetid), (<string>to.params.accountid));
-  next();
-})
+	const accountStore = useAccountStore();
+	await accountStore.SetCurrentAccount(
+		<string>to.params.budgetid,
+		<string>to.params.accountid
+	);
+	next();
+});

 router.beforeEach((to, from, next) => {
-  const sessionStore = useSessionStore();
-  const token = sessionStore.Session?.Token;
-  let loggedIn = false;
+	const sessionStore = useSessionStore();
+	const token = sessionStore.Session?.Token;
+	let loggedIn = false;

-  if (token != null) {
-    const jwt = parseJwt(token);
-    if (jwt.exp > Date.now() / 1000)
-      loggedIn = true;
-  }
+	if (token != null) {
+		const jwt = parseJwt(token);
+		if (jwt.exp > Date.now() / 1000) loggedIn = true;
+	}

-  if (to.matched.some(record => record.meta.requiresAuth)) {
-    if (!loggedIn) {
-      next({ path: '/login' });
-    } else {
-      next();
-    }
-
-  } else if (to.matched.some(record => record.meta.hideForAuth)) {
-    if (loggedIn) {
-      next({ path: '/dashboard' });
-    } else {
-      next();
-    }
-  } else {
-    next();
-  }
+	if (to.matched.some((record) => record.meta.requiresAuth)) {
+		if (!loggedIn) {
+			next({ path: "/login" });
+		} else {
+			next();
+		}
+	} else if (to.matched.some((record) => record.meta.hideForAuth)) {
+		if (loggedIn) {
+			next({ path: "/dashboard" });
+		} else {
+			next();
+		}
+	} else {
+		next();
+	}
 });

 function parseJwt(token: string) {
-  var base64Url = token.split('.')[1];
-  var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
-  var jsonPayload = decodeURIComponent(atob(base64).split('').map(function (c) {
-    return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
-  }).join(''));
+	var base64Url = token.split(".")[1];
+	var base64 = base64Url.replace(/-/g, "+").replace(/_/g, "/");
+	var jsonPayload = decodeURIComponent(
+		atob(base64)
+			.split("")
+			.map(function (c) {
+				return "%" + ("00" + c.charCodeAt(0).toString(16)).slice(-2);
+			})
+			.join("")
+	);

-  return JSON.parse(jsonPayload);
-};
+	return JSON.parse(jsonPayload);
+}

-
-1646426130
-1646512855755
+1646426130;
+1646512855755;
--- a/web/src/pages/Account.vue
+++ b/web/src/pages/Account.vue
@ -42,94 +42,101 @@ function createReconcilationTransaction() {
 </script>

 <template>
-    <div class="grid grid-cols-[1fr_auto]">
-        <div>
-            <h1 class="inline">
-                {{ accounts.CurrentAccount?.Name }}
-            </h1>
-            <EditAccount />
-        </div>
+	<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>
+		<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 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
+				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>
+			<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>
+				<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>

-    <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>
+	<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>
 </template>

 <style>
--- a/web/src/pages/Admin.vue
+++ b/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>
--- a/web/src/pages/BudgetSidebar.vue
+++ b/web/src/pages/BudgetSidebar.vue
@ -22,45 +22,59 @@ 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>
@ -68,13 +82,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>
-  </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>
--- a/web/src/pages/Budgeting.vue
+++ b/web/src/pages/Budgeting.vue
@ -75,41 +75,79 @@ 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)" /></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>
+	<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>
 </template>
--- a/web/src/pages/Dashboard.vue
+++ b/web/src/pages/Dashboard.vue
@ -11,15 +11,19 @@ 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
+				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>
 </template>
--- a/web/src/pages/Index.vue
+++ b/web/src/pages/Index.vue
@ -1,13 +1,13 @@
-<script lang="ts" setup>
-</script>
+<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>
+		<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>
 </template>
--- a/web/src/pages/Login.vue
+++ b/web/src/pages/Login.vue
@ -28,18 +28,27 @@ 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
+			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>
 </template>
--- a/web/src/pages/Register.vue
+++ b/web/src/pages/Register.vue
@ -28,21 +28,32 @@ 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
+			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>
 </template>
--- a/web/src/pages/Settings.vue
+++ b/web/src/pages/Settings.vue
@ -72,53 +72,82 @@ function ynabExport() {
            saveAs(blob, timeStamp + " " + CurrentBudgetName.value + " - Transactions.tsv");
        })
 }
-
 </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>
+				<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>
+				<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>
+				<div class="flex flex-row">
+					<Button class="bg-blue-500 py-2" @click="ynabExport"
+						>Export</Button
+					>
+				</div>
+			</Card>
+		</div>
+	</div>
 </template>
--- a/web/src/pinia-logger.ts
+++ b/web/src/pinia-logger.ts
@ -1,81 +1,107 @@
-import { PiniaPluginContext, StoreGeneric, _ActionsTree, _StoreOnActionListenerContext } from 'pinia';
+import {
+	PiniaPluginContext,
+	StoreGeneric,
+	_ActionsTree,
+	_StoreOnActionListenerContext,
+} from "pinia";

 const cloneDeep = <T>(obj: T): T => {
-  try {
-    return JSON.parse(JSON.stringify(obj));
-  } catch {
-    return { ...obj };
-  }
+	try {
+		return JSON.parse(JSON.stringify(obj));
+	} catch {
+		return { ...obj };
+	}
 };
 const formatTime = (date = new Date()) => {
-  const hours = date.getHours().toString().padStart(2, '0');
-  const minutes = date.getMinutes().toString().padStart(2, '0');
-  const seconds = date.getSeconds().toString().padStart(2, '0');
+	const hours = date.getHours().toString().padStart(2, "0");
+	const minutes = date.getMinutes().toString().padStart(2, "0");
+	const seconds = date.getSeconds().toString().padStart(2, "0");

-  return `${hours}:${minutes}:${seconds}`;
+	return `${hours}:${minutes}:${seconds}`;
 };

 export interface PiniaLoggerOptions {
-  disabled?: boolean;
-  expanded?: boolean;
-  showDuration?: boolean
-  showStoreName?: boolean;
-  logErrors?: boolean;
+	disabled?: boolean;
+	expanded?: boolean;
+	showDuration?: boolean;
+	showStoreName?: boolean;
+	logErrors?: boolean;
 }

-export type PiniaActionListenerContext = _StoreOnActionListenerContext<StoreGeneric, string, _ActionsTree>;
+export type PiniaActionListenerContext = _StoreOnActionListenerContext<
+	StoreGeneric,
+	string,
+	_ActionsTree
+>;

 const defaultOptions: PiniaLoggerOptions = {
-  logErrors: true,
-  disabled: false,
-  expanded: true,
-  showStoreName: true,
-  showDuration: false,
+	logErrors: true,
+	disabled: false,
+	expanded: true,
+	showStoreName: true,
+	showDuration: false,
 };

-export const PiniaLogger = (config = defaultOptions) => (ctx: PiniaPluginContext) => {
-  const options = {
-    ...defaultOptions,
-    ...config,
-  };
+export const PiniaLogger =
+	(config = defaultOptions) =>
+	(ctx: PiniaPluginContext) => {
+		const options = {
+			...defaultOptions,
+			...config,
+		};

-  if (options.disabled) return;
+		if (options.disabled) return;

+		ctx.store.$onAction((action: PiniaActionListenerContext) => {
+			const startTime = Date.now();
+			const prevState = cloneDeep(ctx.store.$state);

-  ctx.store.$onAction((action: PiniaActionListenerContext) => {
-    const startTime = Date.now();
-    const prevState = cloneDeep(ctx.store.$state);
+			const log = (isError?: boolean, error?: any) => {
+				const endTime = Date.now();
+				const duration = endTime - startTime + "ms";
+				const nextState = cloneDeep(ctx.store.$state);
+				const storeName = action.store.$id;
+				const title = `${formatTime()} action 🍍 ${
+					options.showStoreName ? `[${storeName}] ` : ""
+				}${action.name} ${
+					isError ? `failed after ` : ""
+				}in ${duration}`;

-    const log = (isError?: boolean, error?: any) => {
-      const endTime = Date.now();
-      const duration = endTime - startTime + 'ms';
-      const nextState = cloneDeep(ctx.store.$state);
-      const storeName = action.store.$id;
-      const title = `${formatTime()} action 🍍 ${options.showStoreName ? `[${storeName}] ` : ''}${action.name} ${isError ? `failed after ` : ''}in ${duration}`;
+				console[options.expanded ? "group" : "groupCollapsed"](
+					`%c${title}`,
+					`font-weight: bold; ${isError ? "color: #ed4981;" : ""}`
+				);
+				console.log(
+					"%cprev state",
+					"font-weight: bold; color: grey;",
+					prevState
+				);
+				console.log("%caction", "font-weight: bold; color: #69B7FF;", {
+					type: action.name,
+					args:
+						action.args.length > 0 ? { ...action.args } : undefined,
+					...(options.showStoreName && { store: action.store.$id }),
+					...(options.showDuration && { duration }),
+					...(isError && { error }),
+				});
+				console.log(
+					"%cnext state",
+					"font-weight: bold; color: #4caf50;",
+					nextState
+				);
+				console.groupEnd();
+			};

-      console[options.expanded ? 'group' : 'groupCollapsed'](`%c${title}`, `font-weight: bold; ${isError ? 'color: #ed4981;' : ''}`);
-      console.log('%cprev state', 'font-weight: bold; color: grey;', prevState);
-      console.log('%caction', 'font-weight: bold; color: #69B7FF;', {
-        type: action.name,
-        args: action.args.length > 0 ? { ...action.args } : undefined,
-        ...(options.showStoreName && { store: action.store.$id }),
-        ...(options.showDuration && { duration }),
-        ...(isError && { error }),
-      });
-      console.log('%cnext state', 'font-weight: bold; color: #4caf50;', nextState);
-      console.groupEnd();
-    };
+			action.after(() => {
+				log();
+			});

-    action.after(() => {
-      log();
-    });
-
-    if (options.logErrors) {
-      action.onError((error) => {
-        log(true, error);
-      });
-    }
-  });
-};
+			if (options.logErrors) {
+				action.onError((error) => {
+					log(true, error);
+				});
+			}
+		});
+	};

 export default PiniaLogger;
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@ -1,30 +1,75 @@
-import { createRouter, createWebHistory, RouteLocationNormalized } from 'vue-router'
-import Dashboard from '../pages/Dashboard.vue';
-import Login from '../pages/Login.vue';
-import Index from '../pages/Index.vue';
-import Register from '../pages/Register.vue';
-import Account from '@/pages/Account.vue';
-import Settings from '../pages/Settings.vue';
-import Budgeting from '../pages/Budgeting.vue';
-import BudgetSidebar from '../pages/BudgetSidebar.vue';
+import {
+	createRouter,
+	createWebHistory,
+	RouteLocationNormalized,
+} from "vue-router";
+import Dashboard from "../pages/Dashboard.vue";
+import Login from "../pages/Login.vue";
+import Index from "../pages/Index.vue";
+import Register from "../pages/Register.vue";
+import Account from "@/pages/Account.vue";
+import Settings from "../pages/Settings.vue";
+import Budgeting from "../pages/Budgeting.vue";
+import BudgetSidebar from "../pages/BudgetSidebar.vue";

 const routes = [
-  { path: "/", name: "Index", component: Index },
-  { path: "/dashboard", name: "Dashboard", component: Dashboard, meta: { requiresAuth: true } },
-  { path: "/login", name: "Login", component: Login, meta: { hideForAuth: true } },
-  { path: "/register", name: "Register", component: Register, meta: { hideForAuth: true } },
-  { path: "/budget/:budgetid/budgeting", name: "Budget", redirect: (to : RouteLocationNormalized) => 
-    '/budget/' + to.params.budgetid + '/budgeting/' + new Date().getFullYear() + '/' + new Date().getMonth(), 
-    meta: { requiresAuth: true } 
-  },
-  { path: "/budget/:budgetid/budgeting/:year/:month", name: "Budget with date", components: { default: Budgeting, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
-  { path: "/budget/:budgetid/Settings", name: "Budget Settings", components: { default: Settings, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
-  { path: "/budget/:budgetid/account/:accountid", name: "Account", components: { default: Account, sidebar: BudgetSidebar }, props: true, meta: { requiresAuth: true } },
-]
+	{ path: "/", name: "Index", component: Index },
+	{
+		path: "/dashboard",
+		name: "Dashboard",
+		component: Dashboard,
+		meta: { requiresAuth: true },
+	},
+	{
+		path: "/login",
+		name: "Login",
+		component: Login,
+		meta: { hideForAuth: true },
+	},
+	{
+		path: "/register",
+		name: "Register",
+		component: Register,
+		meta: { hideForAuth: true },
+	},
+	{
+		path: "/budget/:budgetid/budgeting",
+		name: "Budget",
+		redirect: (to: RouteLocationNormalized) =>
+			"/budget/" +
+			to.params.budgetid +
+			"/budgeting/" +
+			new Date().getFullYear() +
+			"/" +
+			new Date().getMonth(),
+		meta: { requiresAuth: true },
+	},
+	{
+		path: "/budget/:budgetid/budgeting/:year/:month",
+		name: "Budget with date",
+		components: { default: Budgeting, sidebar: BudgetSidebar },
+		props: true,
+		meta: { requiresAuth: true },
+	},
+	{
+		path: "/budget/:budgetid/Settings",
+		name: "Budget Settings",
+		components: { default: Settings, sidebar: BudgetSidebar },
+		props: true,
+		meta: { requiresAuth: true },
+	},
+	{
+		path: "/budget/:budgetid/account/:accountid",
+		name: "Account",
+		components: { default: Account, sidebar: BudgetSidebar },
+		props: true,
+		meta: { requiresAuth: true },
+	},
+];

 const router = createRouter({
-  history: createWebHistory(),
-  routes,
-})
+	history: createWebHistory(),
+	routes,
+});

-export default router
+export default router;
--- a/web/src/stores/budget-account.ts
+++ b/web/src/stores/budget-account.ts
@ -1,195 +1,233 @@
-import { defineStore } from "pinia"
+import { defineStore } from "pinia";
 import { GET, POST } from "../api";
 import { useBudgetsStore } from "./budget";
 import { useSessionStore } from "./session";
 import { useTransactionsStore } from "./transactions";

 interface State {
-    Accounts: Map<string, Account>
-    CurrentAccountID: string | null
-    Categories: Map<string, Category>
-    Months: Map<number, Map<number, Map<string, Category>>>
-    Assignments: []
+	Accounts: Map<string, Account>;
+	CurrentAccountID: string | null;
+	Categories: Map<string, Category>;
+	Months: Map<number, Map<number, Map<string, Category>>>;
+	Assignments: [];
 }

 export interface Account {
-    ID: string
-    Name: string
-    OnBudget: boolean
-    IsOpen: boolean
-    ClearedBalance: number
-    WorkingBalance: number
-    ReconciledBalance: number
-    Transactions: string[]
-    LastReconciled: NullDate
+	ID: string;
+	Name: string;
+	OnBudget: boolean;
+	IsOpen: boolean;
+	ClearedBalance: number;
+	WorkingBalance: number;
+	ReconciledBalance: number;
+	Transactions: string[];
+	LastReconciled: NullDate;
 }

 interface NullDate {
-    Valid: boolean
-    Time: Date
+	Valid: boolean;
+	Time: Date;
 }

 export interface Category {
-    ID: string
-    Group: string
-    Name: string
-    AvailableLastMonth: number
-    Assigned: number
-    Activity: number
+	ID: string;
+	Group: string;
+	Name: string;
+	AvailableLastMonth: number;
+	Assigned: number;
+	Activity: number;
 }

 export const useAccountStore = defineStore("budget/account", {
-    state: (): State => ({
-        Accounts: new Map<string, Account>(),
-        CurrentAccountID: null,
-        Months: new Map<number, Map<number, Map<string, Category>>>(),
-        Categories: new Map<string, Category>(),
-        Assignments: [],
-    }),
-    getters: {
-        AccountsList(state) {
-            return [...state.Accounts.values()];
-        },
-        AllCategoriesForMonth: (state) => (year: number, month: number) => {
-            const yearMap = state.Months.get(year);
-            const monthMap = yearMap?.get(month);
-            return [...monthMap?.values() || []];
-        },
-        GetCategoryAvailable(state) {
-            return (category: Category): number => {
-                return category.AvailableLastMonth + Number(category.Assigned) + category.Activity;
-            }
-        },
-        GetIncomeCategoryID(state) {
-            const budget = useBudgetsStore();
-            return budget.CurrentBudget?.IncomeCategoryID;
-        },
-        GetIncomeAvailable(state) {
-            return (year: number, month: number) => {
-                const IncomeCategoryID = this.GetIncomeCategoryID;
-                if (IncomeCategoryID == null)
-                    return 0;
+	state: (): State => ({
+		Accounts: new Map<string, Account>(),
+		CurrentAccountID: null,
+		Months: new Map<number, Map<number, Map<string, Category>>>(),
+		Categories: new Map<string, Category>(),
+		Assignments: [],
+	}),
+	getters: {
+		AccountsList(state) {
+			return [...state.Accounts.values()];
+		},
+		AllCategoriesForMonth: (state) => (year: number, month: number) => {
+			const yearMap = state.Months.get(year);
+			const monthMap = yearMap?.get(month);
+			return [...(monthMap?.values() || [])];
+		},
+		GetCategoryAvailable(state) {
+			return (category: Category): number => {
+				return (
+					category.AvailableLastMonth +
+					Number(category.Assigned) +
+					category.Activity
+				);
+			};
+		},
+		GetIncomeCategoryID(state) {
+			const budget = useBudgetsStore();
+			return budget.CurrentBudget?.IncomeCategoryID;
+		},
+		GetIncomeAvailable(state) {
+			return (year: number, month: number) => {
+				const IncomeCategoryID = this.GetIncomeCategoryID;
+				if (IncomeCategoryID == null) return 0;

-                const categories = this.AllCategoriesForMonth(year, month);
-                const category = categories.filter(x => x.ID == IncomeCategoryID)[0];
-                if (category == null)
-                    return 0;
-                return category.AvailableLastMonth;
-            }
-        },
-        CategoryGroupsForMonth(state) {
-            return (year: number, month: number) => {
-                const categories = this.AllCategoriesForMonth(year, month);
-                const categoryGroups = [];
-                let prev = undefined;
-                for (const category of categories) {
-                    if (category.ID == this.GetIncomeCategoryID)
-                        continue;
+				const categories = this.AllCategoriesForMonth(year, month);
+				const category = categories.filter(
+					(x) => x.ID == IncomeCategoryID
+				)[0];
+				if (category == null) return 0;
+				return category.AvailableLastMonth;
+			};
+		},
+		CategoryGroupsForMonth(state) {
+			return (year: number, month: number) => {
+				const categories = this.AllCategoriesForMonth(year, month);
+				const categoryGroups = [];
+				let prev = undefined;
+				for (const category of categories) {
+					if (category.ID == this.GetIncomeCategoryID) continue;

-                    if (prev == undefined || category.Group != prev.Name) {
-                        prev = {
-                            Name: category.Group,
-                            Available: this.GetCategoryAvailable(category),
-                            AvailableLastMonth: category.AvailableLastMonth,
-                            Activity: category.Activity,
-                            Assigned: category.Assigned,
-                        }
-                        categoryGroups.push({
-                            ...prev,
-                            Expand: prev.Name != "Hidden Categories",
-                        });
-                    } else {
-                        categoryGroups[categoryGroups.length-1].Available += this.GetCategoryAvailable(category);
-                        categoryGroups[categoryGroups.length-1].AvailableLastMonth += category.AvailableLastMonth;
-                        categoryGroups[categoryGroups.length-1].Activity += category.Activity;
-                        categoryGroups[categoryGroups.length-1].Assigned += category.Assigned;
-                        continue;
-                    }
-                }
-                return categoryGroups;
-            }
-        },
-        CategoriesForMonthAndGroup(state) {
-            return (year: number, month: number, group: string) => {
-                const categories = this.AllCategoriesForMonth(year, month);
-                return categories.filter(x => x.Group == group);
-            }
-        },
-        GetAccount(state) {
-            return (accountid: string) => {
-                return this.Accounts.get(accountid);
-            }
-        },
-        CurrentAccount(state): Account | undefined {
-            if (state.CurrentAccountID == null)
-                return undefined;
+					if (prev == undefined || category.Group != prev.Name) {
+						prev = {
+							Name: category.Group,
+							Available: this.GetCategoryAvailable(category),
+							AvailableLastMonth: category.AvailableLastMonth,
+							Activity: category.Activity,
+							Assigned: category.Assigned,
+						};
+						categoryGroups.push({
+							...prev,
+							Expand: prev.Name != "Hidden Categories",
+						});
+					} else {
+						categoryGroups[categoryGroups.length - 1].Available +=
+							this.GetCategoryAvailable(category);
+						categoryGroups[
+							categoryGroups.length - 1
+						].AvailableLastMonth += category.AvailableLastMonth;
+						categoryGroups[categoryGroups.length - 1].Activity +=
+							category.Activity;
+						categoryGroups[categoryGroups.length - 1].Assigned +=
+							category.Assigned;
+						continue;
+					}
+				}
+				return categoryGroups;
+			};
+		},
+		CategoriesForMonthAndGroup(state) {
+			return (year: number, month: number, group: string) => {
+				const categories = this.AllCategoriesForMonth(year, month);
+				return categories.filter((x) => x.Group == group);
+			};
+		},
+		GetAccount(state) {
+			return (accountid: string) => {
+				return this.Accounts.get(accountid);
+			};
+		},
+		CurrentAccount(state): Account | undefined {
+			if (state.CurrentAccountID == null) return undefined;

-            return this.GetAccount(state.CurrentAccountID);
-        },
-        OnBudgetAccounts(state) {
-            return [...state.Accounts.values()].filter(x => x.OnBudget);
-        },
-        OnBudgetAccountsBalance(state): number {
-            return this.OnBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
-        },
-        OffBudgetAccounts(state) {
-            return [...state.Accounts.values()].filter(x => !x.OnBudget);
-        },
-        OffBudgetAccountsBalance(state): number {
-            return this.OffBudgetAccounts.reduce((prev, curr) => prev + Number(curr.ClearedBalance), 0);
-        },
-    },
-    actions: {
-        async SetCurrentAccount(budgetid: string, accountid: string) {
-            if (budgetid == null)
-                return;
+			return this.GetAccount(state.CurrentAccountID);
+		},
+		OnBudgetAccounts(state) {
+			return [...state.Accounts.values()].filter((x) => x.OnBudget);
+		},
+		OnBudgetAccountsBalance(state): number {
+			return this.OnBudgetAccounts.reduce(
+				(prev, curr) => prev + Number(curr.ClearedBalance),
+				0
+			);
+		},
+		OffBudgetAccounts(state) {
+			return [...state.Accounts.values()].filter((x) => !x.OnBudget);
+		},
+		OffBudgetAccountsBalance(state): number {
+			return this.OffBudgetAccounts.reduce(
+				(prev, curr) => prev + Number(curr.ClearedBalance),
+				0
+			);
+		},
+	},
+	actions: {
+		async SetCurrentAccount(budgetid: string, accountid: string) {
+			if (budgetid == null) return;

-            this.CurrentAccountID = accountid;
+			this.CurrentAccountID = accountid;

-            if (accountid == null)
-                return;
-            const account = this.GetAccount(accountid)!;
-            useSessionStore().setTitle(account.Name);
-            await this.FetchAccount(account);
-        },
-        async FetchAccount(account: Account) {
-            const result = await GET("/account/" + account.ID + "/transactions");
-            const response = await result.json();
-            const transactionsStore = useTransactionsStore()
-            const transactions = transactionsStore.AddTransactions(response.Transactions);
-            account.Transactions = transactions;
-        },
-        async FetchMonthBudget(budgetid: string, year: number, month: number) {
-            const result = await GET("/budget/" + budgetid + "/" + year + "/" + (month + 1));
-            const response = await result.json();
-            if (response.Categories == undefined || response.Categories.length <= 0)
-                return;
-            this.addCategoriesForMonth(year, month, response.Categories);
-        },
-        async EditAccount(accountid: string, name: string, onBudget: boolean, isOpen: boolean) {
-            const result = await POST("/account/" + accountid, JSON.stringify({ name: name, onBudget: onBudget, isOpen: isOpen }));
-            const response = await result.json();
-            useBudgetsStore().MergeBudgetingData(response);
+			if (accountid == null) return;
+			const account = this.GetAccount(accountid)!;
+			useSessionStore().setTitle(account.Name);
+			await this.FetchAccount(account);
+		},
+		async FetchAccount(account: Account) {
+			const result = await GET(
+				"/account/" + account.ID + "/transactions"
+			);
+			const response = await result.json();
+			const transactionsStore = useTransactionsStore();
+			const transactions = transactionsStore.AddTransactions(
+				response.Transactions
+			);
+			account.Transactions = transactions;
+		},
+		async FetchMonthBudget(budgetid: string, year: number, month: number) {
+			const result = await GET(
+				"/budget/" + budgetid + "/" + year + "/" + (month + 1)
+			);
+			const response = await result.json();
+			if (
+				response.Categories == undefined ||
+				response.Categories.length <= 0
+			)
+				return;
+			this.addCategoriesForMonth(year, month, response.Categories);
+		},
+		async EditAccount(
+			accountid: string,
+			name: string,
+			onBudget: boolean,
+			isOpen: boolean
+		) {
+			const result = await POST(
+				"/account/" + accountid,
+				JSON.stringify({
+					name: name,
+					onBudget: onBudget,
+					isOpen: isOpen,
+				})
+			);
+			const response = await result.json();
+			useBudgetsStore().MergeBudgetingData(response);

-            if (!isOpen) {
-                this.Accounts.delete(accountid);
-            }
-        },
-        addCategoriesForMonth(year: number, month: number, categories: Category[]): void {
-            this.$patch((state) => {
-                const yearMap = state.Months.get(year) || new Map<number, Map<string, Category>>();
-                const monthMap = yearMap.get(month) || new Map<string, Category>();
-                for (const category of categories) {
-                    monthMap.set(category.ID, category);
-                }
+			if (!isOpen) {
+				this.Accounts.delete(accountid);
+			}
+		},
+		addCategoriesForMonth(
+			year: number,
+			month: number,
+			categories: Category[]
+		): void {
+			this.$patch((state) => {
+				const yearMap =
+					state.Months.get(year) ||
+					new Map<number, Map<string, Category>>();
+				const monthMap =
+					yearMap.get(month) || new Map<string, Category>();
+				for (const category of categories) {
+					monthMap.set(category.ID, category);
+				}

-                yearMap.set(month, monthMap);
-                state.Months.set(year, yearMap);
-            });
-        },
-        logout() {
-            this.$reset()
-        },
-    }
-
-})
+				yearMap.set(month, monthMap);
+				state.Months.set(year, yearMap);
+			});
+		},
+		logout() {
+			this.$reset();
+		},
+	},
+});
--- a/web/src/stores/budget.ts
+++ b/web/src/stores/budget.ts
@ -4,67 +4,67 @@ import { useAccountStore } from "./budget-account";
 import { Budget, useSessionStore } from "./session";

 interface State {
-    CurrentBudgetID: string | null,
+	CurrentBudgetID: string | null;
 }

-export const useBudgetsStore = defineStore('budget', {
-    state: (): State => ({
-        CurrentBudgetID: null,
-    }),
-    getters: {
-        CurrentBudget(): Budget | undefined {
-            if (this.CurrentBudgetID == null)
-                return undefined;
+export const useBudgetsStore = defineStore("budget", {
+	state: (): State => ({
+		CurrentBudgetID: null,
+	}),
+	getters: {
+		CurrentBudget(): Budget | undefined {
+			if (this.CurrentBudgetID == null) return undefined;

-            const sessionStore = useSessionStore();
-            return sessionStore.Budgets.get(this.CurrentBudgetID);
-        },
-        CurrentBudgetName(state): string {
-            return this.CurrentBudget?.Name ?? "";
-        },
-    },
-    actions: {
-        ImportYNAB(formData: FormData) {
-            return POST(
-                "/budget/" + this.CurrentBudgetID + "/import/ynab",
-                formData,
-            );
-        },
-        async NewBudget(budgetName: string): Promise<void> {
-            const result = await POST(
-                "/budget/new",
-                JSON.stringify({ name: budgetName })
-            );
-            const response = await result.json();
+			const sessionStore = useSessionStore();
+			return sessionStore.Budgets.get(this.CurrentBudgetID);
+		},
+		CurrentBudgetName(state): string {
+			return this.CurrentBudget?.Name ?? "";
+		},
+	},
+	actions: {
+		ImportYNAB(formData: FormData) {
+			return POST(
+				"/budget/" + this.CurrentBudgetID + "/import/ynab",
+				formData
+			);
+		},
+		async NewBudget(budgetName: string): Promise<void> {
+			const result = await POST(
+				"/budget/new",
+				JSON.stringify({ name: budgetName })
+			);
+			const response = await result.json();

-            const sessionStore = useSessionStore();
-            sessionStore.Budgets.set(response.ID, response);
-        },
-        async SetCurrentBudget(budgetid: string): Promise<void> {
-            this.CurrentBudgetID = budgetid;
+			const sessionStore = useSessionStore();
+			sessionStore.Budgets.set(response.ID, response);
+		},
+		async SetCurrentBudget(budgetid: string): Promise<void> {
+			this.CurrentBudgetID = budgetid;

-            if (budgetid == null)
-                return
+			if (budgetid == null) return;

-            await this.FetchBudget(budgetid);
-        },
-        async FetchBudget(budgetid: string) {
-            const result = await GET("/budget/" + budgetid);
-            const response = await result.json();
-            this.MergeBudgetingData(response);
-        },
-        MergeBudgetingData(response: any) {
-            const accounts = useAccountStore();
-            for (const account of response.Accounts || []) {
-                const existingAccount = accounts.Accounts.get(account.ID);
-                account.Transactions = existingAccount?.Transactions ?? [];
-                if(account.LastReconciled.Valid)
-                    account.LastReconciled.Time = new Date(account.LastReconciled.Time);
-                accounts.Accounts.set(account.ID, account);
-            }
-            for (const category of response.Categories || []) {
-                accounts.Categories.set(category.ID, category);
-            }
-        },
-    }
-})
+			await this.FetchBudget(budgetid);
+		},
+		async FetchBudget(budgetid: string) {
+			const result = await GET("/budget/" + budgetid);
+			const response = await result.json();
+			this.MergeBudgetingData(response);
+		},
+		MergeBudgetingData(response: any) {
+			const accounts = useAccountStore();
+			for (const account of response.Accounts || []) {
+				const existingAccount = accounts.Accounts.get(account.ID);
+				account.Transactions = existingAccount?.Transactions ?? [];
+				if (account.LastReconciled.Valid)
+					account.LastReconciled.Time = new Date(
+						account.LastReconciled.Time
+					);
+				accounts.Accounts.set(account.ID, account);
+			}
+			for (const category of response.Categories || []) {
+				accounts.Categories.set(category.ID, category);
+			}
+		},
+	},
+});
--- a/web/src/stores/session.ts
+++ b/web/src/stores/session.ts
@ -1,62 +1,74 @@
-import { StorageSerializers, useStorage } from '@vueuse/core';
-import { defineStore } from 'pinia'
-import { POST } from '../api';
+import { StorageSerializers, useStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+import { POST } from "../api";

 interface State {
-    Session: Session | null
-    Budgets: Map<string, Budget>,
+	Session: Session | null;
+	Budgets: Map<string, Budget>;
 }

 interface Session {
-    Token: string
-    User: string
+	Token: string;
+	User: string;
 }

 export interface Budget {
-    ID: string
-    Name: string
-    AvailableBalance: number
-    IncomeCategoryID: string
+	ID: string;
+	Name: string;
+	AvailableBalance: number;
+	IncomeCategoryID: string;
 }

-export const useSessionStore = defineStore('session', {
-    state: () => ({
-        Session: useStorage<Session | null>('session', null, undefined, { serializer: StorageSerializers.object }),
-        Budgets: useStorage<Map<string, Budget>>('budgets', new Map<string, Budget>(), undefined, { serializer: StorageSerializers.map }),
-    }),
-    getters: {
-        BudgetsList: (state) => [ ...state.Budgets.values() ],
-        AuthHeaders: (state) => ({'Authorization': 'Bearer ' + state.Session?.Token}),
-        LoggedIn: (state) => state.Session != null,
-    },
-    actions: {
-        setTitle(title : string) {
-            document.title = "Budgeteer - " + title;
-        },
-        loginSuccess(x : any) {
-            this.Session = {
-                User: x.User,
-                Token: x.Token,
-            }
-            for (const budget of x.Budgets) {
-                this.Budgets.set(budget.ID, budget);
-            }
-        },
-        async login(login: any) {
-            const response = await POST("/user/login", JSON.stringify(login));
-            const result = await response.json();
-            this.loginSuccess(result);
-            return result;
-        },
-        async register(login : any) {
-            const response = await POST("/user/register", JSON.stringify(login));
-            const result = await response.json();
-            this.loginSuccess(result);
-            return result;
-        },
-        logout() {
-            this.Session = null;
-            this.Budgets.clear();
-        },
-    }
-})
+export const useSessionStore = defineStore("session", {
+	state: () => ({
+		Session: useStorage<Session | null>("session", null, undefined, {
+			serializer: StorageSerializers.object,
+		}),
+		Budgets: useStorage<Map<string, Budget>>(
+			"budgets",
+			new Map<string, Budget>(),
+			undefined,
+			{ serializer: StorageSerializers.map }
+		),
+	}),
+	getters: {
+		BudgetsList: (state) => [...state.Budgets.values()],
+		AuthHeaders: (state) => ({
+			Authorization: "Bearer " + state.Session?.Token,
+		}),
+		LoggedIn: (state) => state.Session != null,
+	},
+	actions: {
+		setTitle(title: string) {
+			document.title = "Budgeteer - " + title;
+		},
+		loginSuccess(x: any) {
+			this.Session = {
+				User: x.User,
+				Token: x.Token,
+			};
+			for (const budget of x.Budgets) {
+				this.Budgets.set(budget.ID, budget);
+			}
+		},
+		async login(login: any) {
+			const response = await POST("/user/login", JSON.stringify(login));
+			const result = await response.json();
+			this.loginSuccess(result);
+			return result;
+		},
+		async register(login: any) {
+			const response = await POST(
+				"/user/register",
+				JSON.stringify(login)
+			);
+			const result = await response.json();
+			this.loginSuccess(result);
+			return result;
+		},
+		logout() {
+			this.Session = null;
+			this.Budgets.clear();
+		},
+	},
+});
--- a/web/src/stores/settings.ts
+++ b/web/src/stores/settings.ts
@ -2,27 +2,27 @@ import { useStorage } from "@vueuse/core";
 import { defineStore } from "pinia";

 interface State {
-    Menu: MenuSettings
+	Menu: MenuSettings;
 }

 interface MenuSettings {
-    Show: boolean | null,
-    Expand: boolean | null,
+	Show: boolean | null;
+	Expand: boolean | null;
 }

-export const useSettingsStore = defineStore('settings', {
-    state: () => ({
-        Menu: useStorage<MenuSettings>('settings', {
-            Show: null,
-            Expand: false,
-        }),
-    }),
-    actions: {
-        toggleMenu() {
-            this.Menu.Show = !this.Menu.Show;
-        },
-        toggleMenuSize() {
-            this.Menu.Expand = !this.Menu.Expand;
-        },
-    }
+export const useSettingsStore = defineStore("settings", {
+	state: () => ({
+		Menu: useStorage<MenuSettings>("settings", {
+			Show: null,
+			Expand: false,
+		}),
+	}),
+	actions: {
+		toggleMenu() {
+			this.Menu.Show = !this.Menu.Show;
+		},
+		toggleMenuSize() {
+			this.Menu.Expand = !this.Menu.Expand;
+		},
+	},
 });
--- a/web/src/stores/transactions.ts
+++ b/web/src/stores/transactions.ts
@ -1,105 +1,110 @@
-import { defineStore } from "pinia"
+import { defineStore } from "pinia";
 import { POST } from "../api";
 import { useAccountStore } from "./budget-account";

 interface State {
-    Transactions: Map<string, Transaction>
-    Reconciling: boolean
+	Transactions: Map<string, Transaction>;
+	Reconciling: boolean;
 }

 export interface Transaction {
-    ID: string
-    Date: Date
-    TransferAccount: string
-    CategoryGroup: string
-    Category: string
-    CategoryID: string | undefined
-    Memo: string
-    Status: string
-    GroupID: string
-    Payee: string
-    PayeeID: string | undefined
-    Amount: number
-    Reconciled: boolean
+	ID: string;
+	Date: Date;
+	TransferAccount: string;
+	CategoryGroup: string;
+	Category: string;
+	CategoryID: string | undefined;
+	Memo: string;
+	Status: string;
+	GroupID: string;
+	Payee: string;
+	PayeeID: string | undefined;
+	Amount: number;
+	Reconciled: boolean;
 }

 export const useTransactionsStore = defineStore("budget/transactions", {
-    state: (): State => ({
-        Transactions: new Map<string, Transaction>(),
-        Reconciling: false,
-    }),
-    getters: {
-        ReconcilingBalance(state): number {
-            const accountsStore = useAccountStore()
-            let reconciledBalance = accountsStore.CurrentAccount!.ReconciledBalance;
-            for (const transaction of this.TransactionsList) {
-                if (transaction.Reconciled)
-                    reconciledBalance += transaction.Amount;
-            }
-            return reconciledBalance;
-        },
-        TransactionsList(state): Transaction[] {
-            const accountsStore = useAccountStore()
-            return accountsStore.CurrentAccount!.Transactions.map(x => {
-                return this.Transactions.get(x)!
-            });
-        },
-    },
-    actions: {
-        AddTransactions(transactions: Array<Transaction>) {
-            const transactionIds = [] as Array<string>;
-            this.$patch(() => {
-                for (const transaction of transactions) {
-                    transaction.Date = new Date(transaction.Date);
-                    this.Transactions.set(transaction.ID, transaction);
-                    transactionIds.push(transaction.ID);
-                }
-            });
-            return transactionIds;
-        },
-        SetReconciledForAllTransactions(value: boolean) {
-            for (const transaction of this.TransactionsList) {
-                if (transaction.Status == "Reconciled")
-                    continue;
+	state: (): State => ({
+		Transactions: new Map<string, Transaction>(),
+		Reconciling: false,
+	}),
+	getters: {
+		ReconcilingBalance(state): number {
+			const accountsStore = useAccountStore();
+			let reconciledBalance =
+				accountsStore.CurrentAccount!.ReconciledBalance;
+			for (const transaction of this.TransactionsList) {
+				if (transaction.Reconciled)
+					reconciledBalance += transaction.Amount;
+			}
+			return reconciledBalance;
+		},
+		TransactionsList(state): Transaction[] {
+			const accountsStore = useAccountStore();
+			return accountsStore.CurrentAccount!.Transactions.map((x) => {
+				return this.Transactions.get(x)!;
+			});
+		},
+	},
+	actions: {
+		AddTransactions(transactions: Array<Transaction>) {
+			const transactionIds = [] as Array<string>;
+			this.$patch(() => {
+				for (const transaction of transactions) {
+					transaction.Date = new Date(transaction.Date);
+					this.Transactions.set(transaction.ID, transaction);
+					transactionIds.push(transaction.ID);
+				}
+			});
+			return transactionIds;
+		},
+		SetReconciledForAllTransactions(value: boolean) {
+			for (const transaction of this.TransactionsList) {
+				if (transaction.Status == "Reconciled") continue;

-                transaction.Reconciled = value;
-            }
-        },
-        async SubmitReconcilation(reconciliationTransactionAmount: number) {
-                const accountsStore = useAccountStore()
-            const account = accountsStore.CurrentAccount!;
-            const reconciledTransactions = this.TransactionsList.filter(x => x.Reconciled);
-            for (const transaction of reconciledTransactions) {
-                account.ReconciledBalance += transaction.Amount;
-                transaction.Status = "Reconciled";
-                transaction.Reconciled = false;
-            }
-            const result = await POST("/account/" + accountsStore.CurrentAccountID + "/reconcile", JSON.stringify({
-                transactionIDs: reconciledTransactions.map(x => x.ID),
-                reconciliationTransactionAmount: reconciliationTransactionAmount.toString(),
-            }));
-            const response = await result.json();
-            const recTrans = response.ReconciliationTransaction;
-            if (recTrans) {
-                this.AddTransactions([recTrans]);
-                account.Transactions.unshift(recTrans.ID);
-            }
-        },
-        logout() {
-            this.$reset()
-        },
-        async saveTransaction(payload: string) {
-                const accountsStore = useAccountStore()
-            const result = await POST("/transaction/new", payload);
-            const response = await result.json() as Transaction;
-            this.AddTransactions([response]);
-            accountsStore.CurrentAccount?.Transactions.unshift(response.ID);
-        },
-        async editTransaction(transactionid: string, payload: string) {
-            const result = await POST("/transaction/" + transactionid, payload);
-            const response = await result.json() as Transaction;
-            this.AddTransactions([response]);
-        }
-    }
-
-})
+				transaction.Reconciled = value;
+			}
+		},
+		async SubmitReconcilation(reconciliationTransactionAmount: number) {
+			const accountsStore = useAccountStore();
+			const account = accountsStore.CurrentAccount!;
+			const reconciledTransactions = this.TransactionsList.filter(
+				(x) => x.Reconciled
+			);
+			for (const transaction of reconciledTransactions) {
+				account.ReconciledBalance += transaction.Amount;
+				transaction.Status = "Reconciled";
+				transaction.Reconciled = false;
+			}
+			const result = await POST(
+				"/account/" + accountsStore.CurrentAccountID + "/reconcile",
+				JSON.stringify({
+					transactionIDs: reconciledTransactions.map((x) => x.ID),
+					reconciliationTransactionAmount:
+						reconciliationTransactionAmount.toString(),
+				})
+			);
+			const response = await result.json();
+			const recTrans = response.ReconciliationTransaction;
+			if (recTrans) {
+				this.AddTransactions([recTrans]);
+				account.Transactions.unshift(recTrans.ID);
+			}
+		},
+		logout() {
+			this.$reset();
+		},
+		async saveTransaction(payload: string) {
+			const accountsStore = useAccountStore();
+			const result = await POST("/transaction/new", payload);
+			const response = (await result.json()) as Transaction;
+			this.AddTransactions([response]);
+			accountsStore.CurrentAccount?.Transactions.unshift(response.ID);
+		},
+		async editTransaction(transactionid: string, payload: string) {
+			const result = await POST("/transaction/" + transactionid, payload);
+			const response = (await result.json()) as Transaction;
+			this.AddTransactions([response]);
+		},
+	},
+});
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@ -1,10 +1,7 @@
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{vue,js,ts,jsx,tsx}"
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-}
+	content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],
+	theme: {
+		extend: {},
+	},
+	plugins: [],
+};
--- a/web/tsconfig.json
+++ b/web/tsconfig.json
@ -1,10 +1,10 @@
 {
-  "compilerOptions": {
-    "target": "esnext",
-    "module": "esnext",
-    // this enables stricter inference for data properties on `this`
-    "strict": true,
-    "jsx": "preserve",
-    "moduleResolution": "node"
-  }
+	"compilerOptions": {
+		"target": "esnext",
+		"module": "esnext",
+		// this enables stricter inference for data properties on `this`
+		"strict": true,
+		"jsx": "preserve",
+		"moduleResolution": "node"
+	}
 }
--- a/web/vite.config.js
+++ b/web/vite.config.js
@ -1,30 +1,30 @@
-import { defineConfig } from 'vite'
-import vue from '@vitejs/plugin-vue'
+import { defineConfig } from "vite";
+import vue from "@vitejs/plugin-vue";

-import path from 'path'
+import path from "path";

 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    // https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
-  ],
-  define: { 'process.env': {} },
-  resolve: {
-    alias: {
-      '@': path.resolve(__dirname, 'src'),
-    },
-  },
-  server: {                                      
-    host: '0.0.0.0',                             
-    proxy: {                                     
-      '/api': {                                  
-        target: 'http://10.0.0.162:1323/',       
-        changeOrigin: true                        
-      }                                          
-    }                                            
-  }                                              
-  /* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
+	plugins: [
+		vue(),
+		// https://github.com/vuetifyjs/vuetify-loader/tree/next/packages/vite-plugin
+	],
+	define: { "process.env": {} },
+	resolve: {
+		alias: {
+			"@": path.resolve(__dirname, "src"),
+		},
+	},
+	server: {
+		host: "0.0.0.0",
+		proxy: {
+			"/api": {
+				target: "http://10.0.0.162:1323/",
+				changeOrigin: true,
+			},
+		},
+	},
+	/* remove the need to specify .vue files https://vitejs.dev/config/#resolve-extensions
  resolve: {
    extensions: [
      '.js',
@ -37,4 +37,4 @@ export default defineConfig({
    ]
  },
  */
-})
+});