Fix some linter issues

web/src/components/DateInput.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import Input from './Input.vue';
-const props = defineProps(["modelValue"]);
+const props = defineProps<{
+  modelValue: Date
+}>();
 const emit = defineEmits(['update:modelValue']);
 
 function dateToYYYYMMDD(d: Date) : string {

web/src/components/Input.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-const props = defineProps(["modelValue"]);
+const props = defineProps<{modelValue : number | string}>();
 </script>
 
 <template>

web/src/pages/BudgetSidebar.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { computed } from "vue";
-import Currency from "../components/Currency.vue"
-import { useBudgetsStore } from "../stores/budget"
-import { Account, useAccountStore } from "../stores/budget-account"
-import { useSettingsStore } from "../stores/settings"
+import Currency from "../components/Currency.vue";
+import { useBudgetsStore } from "../stores/budget";
+import { Account, useAccountStore } from "../stores/budget-account";
+import { useSettingsStore } from "../stores/settings";
 import AccountWithReconciled from "../components/AccountWithReconciled.vue";
 
 const settings = useSettingsStore();
@@ -33,7 +33,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
       >
         <router-link
           to="/dashboard"
-          style="font-size:150%"
+          style="font-size: 150%"
         >⌂</router-link>
         {{ CurrentBudgetName }}
       </span>
@@ -53,6 +53,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         </div>
         <div
           v-for="account in OnBudgetAccounts"
+          :key="account.ID"
           class="flex flex-row justify-between"
         >
           <AccountWithReconciled :account="account" />
@@ -72,6 +73,7 @@ const OffBudgetAccountsBalance = computed(() => accountStore.OffBudgetAccountsBa
         </div>
         <div
           v-for="account in OffBudgetAccounts"
+          :key="account.ID"
           class="flex flex-row justify-between"
         >
           <AccountWithReconciled :account="account" />

web/src/pages/Budgeting.vue

@@ -106,7 +106,10 @@ function assignedChanged(e : Event, category : Category){
     <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">
+    <template
+      v-for="group in GroupsForMonth"
+      :key="group.Name"
+    >
       <span
         class="text-lg font-bold mt-2"
         @click="toggleGroup(group)"
@@ -137,7 +140,11 @@ function assignedChanged(e : Event, category : Category){
       />
       <template
         v-for="category in GetCategories(group.Name)"
+        :key="category.ID"
+      >
+        <div
           v-if="getGroupState(group)"
+          class="contents"
         >
           <span
             class="whitespace-nowrap overflow-hidden"
@@ -159,6 +166,7 @@ function assignedChanged(e : Event, category : Category){
           <Currency
             :value="accountStore.GetCategoryAvailable(category)"
           />
+        </div>
       </template>
     </template>
   </div>

web/src/pages/Dashboard.vue

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

web/src/pages/Welcome.vue

@@ -1,4 +1,5 @@
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+</script>
 
 <template>
   <div>