From e28703dfb2ae72910f730e54ae9a7ad3bc9a9188 Mon Sep 17 00:00:00 2001
From: tonyaellie <tonya@tokia.dev>
Date: Fri, 25 Oct 2024 14:40:45 +0000
Subject: [PATCH] chore: get front end tests passing

---
 frontend/assets/css/main.css                 | 58 ++++++++++++++++++++
 frontend/components/Base/SectionHeader.vue   |  1 -
 frontend/components/Form/Autocomplete2.vue   | 10 ++--
 frontend/components/Form/TextArea.vue        | 13 ++---
 frontend/components/Form/TextField.vue       | 10 ++--
 frontend/components/Item/Card.vue            |  2 +-
 frontend/components/Item/CreateModal.vue     |  8 ++-
 frontend/components/Item/View/Table.vue      | 24 ++++----
 frontend/components/Label/CreateModal.vue    |  6 +-
 frontend/components/Location/CreateModal.vue |  8 ++-
 frontend/components/Location/Selector.vue    |  8 ++-
 frontend/components/Location/Tree/Root.vue   |  1 +
 frontend/components/Maintenance/ListView.vue |  4 +-
 frontend/components/global/Markdown.vue      | 50 +----------------
 frontend/composables/use-formatters.ts       | 23 ++------
 frontend/layouts/default.vue                 | 18 +++---
 frontend/lib/api/__test__/user/items.test.ts |  4 +-
 frontend/pages/item/[id]/index.vue           | 11 +---
 frontend/pages/item/[id]/index/edit.vue      |  4 +-
 frontend/pages/label/[id].vue                |  8 ++-
 frontend/pages/location/[id].vue             | 14 ++++-
 frontend/pages/profile.vue                   | 15 +++--
 frontend/pages/tools.vue                     |  4 ++
 23 files changed, 168 insertions(+), 136 deletions(-)

diff --git a/frontend/assets/css/main.css b/frontend/assets/css/main.css
index 8a9d8fa72..185c47f5f 100644
--- a/frontend/assets/css/main.css
+++ b/frontend/assets/css/main.css
@@ -28,3 +28,61 @@
 ::-webkit-scrollbar-thumb:hover {
   background-color: #9B9B9B;
 }
+
+.scroll-bg::-webkit-scrollbar {
+  width: 0.5rem;
+}
+
+.scroll-bg::-webkit-scrollbar-thumb {
+  border-radius: 0.25rem;
+  @apply bg-base-300;
+}
+
+.markdown > :first-child {
+  margin-top: 0px !important;
+}
+
+.markdown :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
+  margin-top: var(--y-gap);
+  margin-bottom: var(--y-gap);
+}
+
+.markdown :where(ul) {
+  list-style: disc;
+  margin-left: 2rem;
+}
+
+.markdown :where(ol) {
+  list-style: decimal;
+  margin-left: 2rem;
+}
+/* Heading Styles */
+.markdown :where(h1) {
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+.markdown :where(h2) {
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+.markdown :where(h3) {
+  font-size: 1.25rem;
+  font-weight: 700;
+}
+
+.markdown :where(h4) {
+  font-size: 1rem;
+  font-weight: 700;
+}
+
+.markdown :where(h5) {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+
+.markdown :where(h6) {
+  font-size: 0.75rem;
+  font-weight: 700;
+}
diff --git a/frontend/components/Base/SectionHeader.vue b/frontend/components/Base/SectionHeader.vue
index 387d160fc..9f1a86f25 100644
--- a/frontend/components/Base/SectionHeader.vue
+++ b/frontend/components/Base/SectionHeader.vue
@@ -4,7 +4,6 @@
       class="flex items-center text-3xl font-bold tracking-tight"
       :class="{
         'text-neutral-content': dark,
-        'text-content': !dark,
       }"
     >
       <slot />
diff --git a/frontend/components/Form/Autocomplete2.vue b/frontend/components/Form/Autocomplete2.vue
index 92fef222a..d9ce505cc 100644
--- a/frontend/components/Form/Autocomplete2.vue
+++ b/frontend/components/Form/Autocomplete2.vue
@@ -156,7 +156,7 @@
 
     const matches = index.value.search("*" + search.value + "*");
 
-    let resultIDs = []
+    const resultIDs = [];
     for (let i = 0; i < matches.length; i++) {
       const match = matches[i];
       const item = props.items[parseInt(match.ref)];
@@ -170,9 +170,11 @@
      * Resolve the issue of language not being supported
      */
     for (let i = 0; i < props.items.length; i++) {
-      const item = props.items[i]
-      if(resultIDs.find(item_ => item_ === item.id) != undefined){continue}
-      if(item.treeString.indexOf(search.value) > -1){
+      const item = props.items[i];
+      if (resultIDs.find(item_ => item_ === item.id) !== undefined) {
+        continue;
+      }
+      if (item.treeString.includes(search.value)) {
         const display = extractDisplay(item);
         list.push({ id: i, display, value: item });
       }
diff --git a/frontend/components/Form/TextArea.vue b/frontend/components/Form/TextArea.vue
index f208b3274..87207415a 100644
--- a/frontend/components/Form/TextArea.vue
+++ b/frontend/components/Form/TextArea.vue
@@ -6,10 +6,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <textarea ref="el" v-model="value" class="textarea textarea-bordered h-28 w-full" :placeholder="placeholder" />
@@ -21,10 +21,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <textarea
@@ -63,10 +63,12 @@
     },
     maxLength: {
       type: Number,
+      default: -1,
       required: false,
     },
     minLength: {
       type: Number,
+      default: -1,
       required: false,
     },
   });
@@ -84,7 +86,4 @@
   });
 
   const value = useVModel(props, "modelValue", emit);
-  const valueLen = computed(() => {
-    return value.value ? value.value.length : 0;
-  });
 </script>
diff --git a/frontend/components/Form/TextField.vue b/frontend/components/Form/TextField.vue
index d1aa2e46b..7e63a2158 100644
--- a/frontend/components/Form/TextField.vue
+++ b/frontend/components/Form/TextField.vue
@@ -6,10 +6,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <input
@@ -28,10 +28,10 @@
         :class="{
           'text-red-600':
             typeof value === 'string' &&
-            ((maxLength && value.length > maxLength) || (minLength && value.length < minLength)),
+            ((maxLength !== -1 && value.length > maxLength) || (minLength !== -1 && value.length < minLength)),
         }"
       >
-        {{ typeof value === "string" && (maxLength || minLength) ? `${value.length}/${maxLength}` : "" }}
+        {{ typeof value === "string" && (maxLength !== -1 || minLength !== -1) ? `${value.length}/${maxLength}` : "" }}
       </span>
     </label>
     <input
@@ -76,10 +76,12 @@
     },
     maxLength: {
       type: Number,
+      default: -1,
       required: false,
     },
     minLength: {
       type: Number,
+      default: -1,
       required: false,
     },
   });
diff --git a/frontend/components/Item/Card.vue b/frontend/components/Item/Card.vue
index d4a51d7ba..30751c4b8 100644
--- a/frontend/components/Item/Card.vue
+++ b/frontend/components/Item/Card.vue
@@ -19,7 +19,7 @@
       </div>
     </div>
     <div class="col-span-4 flex grow flex-col gap-y-1 rounded-b bg-base-100 p-4 pt-2">
-      <h2 class="line-clamp-2 text-ellipsis text-lg font-bold text-wrap">{{ item.name }}</h2>
+      <h2 class="line-clamp-2 text-ellipsis text-wrap text-lg font-bold">{{ item.name }}</h2>
       <div class="divider my-0"></div>
       <div class="flex gap-2">
         <div v-if="item.insured" class="tooltip z-10" data-tip="Insured">
diff --git a/frontend/components/Item/CreateModal.vue b/frontend/components/Item/CreateModal.vue
index 7708ba7a7..5d01462b1 100644
--- a/frontend/components/Item/CreateModal.vue
+++ b/frontend/components/Item/CreateModal.vue
@@ -12,7 +12,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.item.create_modal.item_description')" :max-length="1000" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.item.create_modal.item_description')"
+        :max-length="1000"
+      />
       <FormMultiselect v-model="form.labels" :label="$t('global.labels')" :items="labels ?? []" />
 
       <div class="modal-action mb-6">
@@ -39,7 +43,7 @@
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="size-5" name="mdi-chevron-down" />
             </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 right-0 w-64 p-2 shadow">
+            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
               <li>
                 <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>
diff --git a/frontend/components/Item/View/Table.vue b/frontend/components/Item/View/Table.vue
index a8d594f53..53d2f173d 100644
--- a/frontend/components/Item/View/Table.vue
+++ b/frontend/components/Item/View/Table.vue
@@ -83,7 +83,7 @@
         </label>
         <ul tabindex="0" class="dropdown-content rounded-box flex w-64 flex-col gap-2 bg-base-100 p-2 pl-3 shadow">
           <li>Headers:</li>
-          <li v-for="(h, i) in headers" class="flex flex-row items-center gap-1">
+          <li v-for="(h, i) in headers" :key="h.value" class="flex flex-row items-center gap-1">
             <button
               class="btn btn-square btn-ghost btn-xs"
               :class="{
@@ -150,7 +150,10 @@
 
   const defaultHeaders = [
     {
-      text: "items.name", value: "name", enabled: true, type: "name"
+      text: "items.name",
+      value: "name",
+      enabled: true,
+      type: "name",
     },
     { text: "items.quantity", value: "quantity", align: "center", enabled: true },
     { text: "items.insured", value: "insured", align: "center", enabled: true, type: "boolean" },
@@ -162,16 +165,13 @@
   ] satisfies TableHeader[];
 
   const headers = ref<TableHeader[]>(
-    (preferences.value.tableHeaders ?? []).concat(
-      defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value))
-    )
-    // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
-      .map(h => (
-        {
-          ...defaultHeaders.find(h2 => h2.value === h.value) as TableHeader,
-          enabled: h.enabled
-        }
-      ))
+    (preferences.value.tableHeaders ?? [])
+      .concat(defaultHeaders.filter(h => !preferences.value.tableHeaders?.find(h2 => h2.value === h.value)))
+      // this is a hack to make sure that any changes to the defaultHeaders are reflected in the preferences
+      .map(h => ({
+        ...(defaultHeaders.find(h2 => h2.value === h.value) as TableHeader),
+        enabled: h.enabled,
+      }))
   );
 
   console.log(headers.value);
diff --git a/frontend/components/Label/CreateModal.vue b/frontend/components/Label/CreateModal.vue
index cabfd7686..89d74354d 100644
--- a/frontend/components/Label/CreateModal.vue
+++ b/frontend/components/Label/CreateModal.vue
@@ -11,7 +11,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.label.create_modal.label_description')"
+        :max-length="255"
+      />
       <div class="modal-action">
         <div class="flex justify-center">
           <BaseButton class="rounded-r-none" :loading="loading" type="submit"> {{ $t("global.create") }} </BaseButton>
diff --git a/frontend/components/Location/CreateModal.vue b/frontend/components/Location/CreateModal.vue
index 0c5c4a942..0552194a7 100644
--- a/frontend/components/Location/CreateModal.vue
+++ b/frontend/components/Location/CreateModal.vue
@@ -12,7 +12,11 @@
         :max-length="255"
         :min-length="1"
       />
-      <FormTextArea v-model="form.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
+      <FormTextArea
+        v-model="form.description"
+        :label="$t('components.location.create_modal.location_description')"
+        :max-length="1000"
+      />
       <LocationSelector v-model="form.parent" />
       <div class="modal-action">
         <div class="flex justify-center">
@@ -21,7 +25,7 @@
             <label tabindex="0" class="btn rounded-l-none rounded-r-xl">
               <MdiChevronDown class="size-5" />
             </label>
-            <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 right-0 w-64 p-2 shadow">
+            <ul tabindex="0" class="dropdown-content menu rounded-box right-0 w-64 bg-base-100 p-2 shadow">
               <li>
                 <button type="button" @click="create(false)">{{ $t("global.create_and_add") }}</button>
               </li>
diff --git a/frontend/components/Location/Selector.vue b/frontend/components/Location/Selector.vue
index 65a82b83e..bbb4997d9 100644
--- a/frontend/components/Location/Selector.vue
+++ b/frontend/components/Location/Selector.vue
@@ -1,5 +1,11 @@
 <template>
-  <FormAutocomplete2 v-if="locations" v-model="value" :items="locations" display="name" :label="$t('components.location.selector.parent_location')">
+  <FormAutocomplete2
+    v-if="locations"
+    v-model="value"
+    :items="locations"
+    display="name"
+    :label="$t('components.location.selector.parent_location')"
+  >
     <template #display="{ item, selected, active }">
       <div>
         <div class="flex w-full">
diff --git a/frontend/components/Location/Tree/Root.vue b/frontend/components/Location/Tree/Root.vue
index d1b7b1ed1..523e0676c 100644
--- a/frontend/components/Location/Tree/Root.vue
+++ b/frontend/components/Location/Tree/Root.vue
@@ -10,6 +10,7 @@
 </script>
 
 <template>
+  <!-- eslint-disable-next-line tailwindcss/no-custom-classname -->
   <div class="root border-2 p-4">
     <p v-if="locs.length === 0" class="text-center text-sm">
       {{ $t("location.tree.no_locations") }}
diff --git a/frontend/components/Maintenance/ListView.vue b/frontend/components/Maintenance/ListView.vue
index e91605509..cc90d2c61 100644
--- a/frontend/components/Maintenance/ListView.vue
+++ b/frontend/components/Maintenance/ListView.vue
@@ -80,7 +80,7 @@
       <StatCard
         v-for="stat in stats"
         :key="stat.id"
-        class="stats border-l-primary block shadow-xl"
+        class="stats block border-l-primary shadow-xl"
         :title="stat.title"
         :value="stat.value"
         :type="stat.type"
@@ -189,7 +189,7 @@
       <div v-if="props.currentItemId" class="hidden first:block">
         <button
           type="button"
-          class="border-base-content relative block w-full rounded-lg border-2 border-dashed p-12 text-center"
+          class="relative block w-full rounded-lg border-2 border-dashed border-base-content p-12 text-center"
           @click="maintenanceEditModal?.openCreateModal(props.currentItemId)"
         >
           <MdiWrenchClock class="inline size-16" />
diff --git a/frontend/components/global/Markdown.vue b/frontend/components/global/Markdown.vue
index 0408c690d..40ad484d0 100644
--- a/frontend/components/global/Markdown.vue
+++ b/frontend/components/global/Markdown.vue
@@ -24,6 +24,7 @@
 </script>
 
 <template>
+  <!-- eslint-disable-next-line vue/no-v-html -->
   <div class="markdown text-wrap" v-html="raw"></div>
 </template>
 
@@ -31,53 +32,4 @@
   * {
     --y-gap: 0.65rem;
   }
-
-  .markdown > :first-child {
-    margin-top: 0px !important;
-  }
-
-  .markdown :where(p, ul, ol, dl, blockquote, h1, h2, h3, h4, h5, h6) {
-    margin-top: var(--y-gap);
-    margin-bottom: var(--y-gap);
-  }
-
-  .markdown :where(ul) {
-    list-style: disc;
-    margin-left: 2rem;
-  }
-
-  .markdown :where(ol) {
-    list-style: decimal;
-    margin-left: 2rem;
-  }
-  /* Heading Styles */
-  .markdown :where(h1) {
-    font-size: 2rem;
-    font-weight: 700;
-  }
-
-  .markdown :where(h2) {
-    font-size: 1.5rem;
-    font-weight: 700;
-  }
-
-  .markdown :where(h3) {
-    font-size: 1.25rem;
-    font-weight: 700;
-  }
-
-  .markdown :where(h4) {
-    font-size: 1rem;
-    font-weight: 700;
-  }
-
-  .markdown :where(h5) {
-    font-size: 0.875rem;
-    font-weight: 700;
-  }
-
-  .markdown :where(h6) {
-    font-size: 0.75rem;
-    font-weight: 700;
-  }
 </style>
diff --git a/frontend/composables/use-formatters.ts b/frontend/composables/use-formatters.ts
index d21617c12..602a71081 100644
--- a/frontend/composables/use-formatters.ts
+++ b/frontend/composables/use-formatters.ts
@@ -45,8 +45,8 @@ export function useLocaleTimeAgo(date: Date) {
 
   const I18N_MESSAGES: UseTimeAgoMessages<UseTimeAgoUnitNamesDefault> = {
     justNow: t("components.global.date_time.just-now"),
-    past: (n) => (n.match(/\d/) ? t("components.global.date_time.ago", [n]) : n),
-    future: (n) => (n.match(/\d/) ? t("components.global.date_time.in", [n]) : n),
+    past: n => (n.match(/\d/) ? t("components.global.date_time.ago", [n]) : n),
+    future: n => (n.match(/\d/) ? t("components.global.date_time.in", [n]) : n),
     month: (n, past) =>
       n === 1
         ? past
@@ -71,17 +71,9 @@ export function useLocaleTimeAgo(date: Date) {
           ? t("components.global.date_time.last-week")
           : t("components.global.date_time.next-week")
         : `${n} ${t(`components.global.date_time.weeks`)}`,
-    hour: (n) => `${n} ${
-      n === 1 ? t("components.global.date_time.hour") : t("components.global.date_time.hours")
-      }`,
-    minute: (n) => `${n} ${
-      n === 1 ? t("components.global.date_time.minute") : t("components.global.date_time.minutes")
-      }`,
-    second: (n) => `${n} ${
-      n === 1
-        ? t("components.global.date_time.second")
-        : t("components.global.date_time.seconds")
-    }`,
+    hour: n => `${n} ${n === 1 ? t("components.global.date_time.hour") : t("components.global.date_time.hours")}`,
+    minute: n => `${n} ${n === 1 ? t("components.global.date_time.minute") : t("components.global.date_time.minutes")}`,
+    second: n => `${n} ${n === 1 ? t("components.global.date_time.second") : t("components.global.date_time.seconds")}`,
     invalid: "",
   };
 
@@ -91,10 +83,7 @@ export function useLocaleTimeAgo(date: Date) {
   });
 }
 
-export function fmtDate(
-  value: string | Date,
-  fmt: DateTimeFormat = "human"
-): string {
+export function fmtDate(value: string | Date, fmt: DateTimeFormat = "human"): string {
   const months = [
     "January",
     "February",
diff --git a/frontend/layouts/default.vue b/frontend/layouts/default.vue
index 9ece67c00..c207d7ad9 100644
--- a/frontend/layouts/default.vue
+++ b/frontend/layouts/default.vue
@@ -12,15 +12,15 @@
     <AppToast />
     <div class="drawer drawer-mobile">
       <input id="my-drawer-2" v-model="drawerToggle" type="checkbox" class="drawer-toggle" />
-      <div class="drawer-content bg-base-300 justify-center pt-20 lg:pt-0">
+      <div class="drawer-content justify-center bg-base-300 pt-20 lg:pt-0">
         <AppHeaderDecor v-if="preferences.displayHeaderDecor" class="-mt-10 hidden lg:block" />
         <!-- Button -->
-        <div class="navbar drawer-button bg-primary fixed top-0 z-[99] shadow-md lg:hidden">
+        <div class="navbar drawer-button fixed top-0 z-[99] bg-primary shadow-md lg:hidden">
           <label for="my-drawer-2" class="btn btn-square btn-ghost drawer-button text-base-100 lg:hidden">
             <MdiMenu class="size-6" />
           </label>
           <NuxtLink to="/home">
-            <h2 class="text-base-100 flex text-3xl font-bold tracking-tight">
+            <h2 class="flex text-3xl font-bold tracking-tight text-base-100">
               HomeB
               <AppLogo class="-mb-3 w-8" />
               x
@@ -29,7 +29,7 @@
         </div>
 
         <slot></slot>
-        <footer v-if="status" class="bg-base-300 text-secondary-content bottom-0 w-full pb-4 text-center">
+        <footer v-if="status" class="bottom-0 w-full bg-base-300 pb-4 text-center text-secondary-content">
           <p class="text-center text-sm">
             {{ $t("global.version", { version: status.build.version }) }} ~
             {{ $t("global.build", { build: status.build.commit }) }}
@@ -42,17 +42,17 @@
         <label for="my-drawer-2" class="drawer-overlay"></label>
 
         <!-- Top Section -->
-        <div class="bg-base-200 flex min-w-40 max-w-min flex-col p-5 md:py-10">
+        <div class="flex min-w-40 max-w-min flex-col bg-base-200 p-5 md:py-10">
           <div class="space-y-8">
             <div class="flex flex-col items-center gap-4">
               <p>{{ $t("global.welcome", { username: username }) }}</p>
               <NuxtLink class="avatar placeholder" to="/home">
-                <div class="bg-base-300 text-neutral-content w-24 rounded-full p-4">
+                <div class="w-24 rounded-full bg-base-300 p-4 text-neutral-content">
                   <AppLogo />
                 </div>
               </NuxtLink>
             </div>
-            <div class="bg-base-200 flex flex-col">
+            <div class="flex flex-col bg-base-200">
               <div class="mb-6">
                 <div class="dropdown visible w-full">
                   <label tabindex="0" class="text-no-transform btn btn-primary btn-block text-lg">
@@ -61,7 +61,7 @@
                     </span>
                     {{ $t("global.create") }}
                   </label>
-                  <ul tabindex="0" class="dropdown-content menu rounded-box bg-base-100 w-full p-2 shadow">
+                  <ul tabindex="0" class="dropdown-content menu rounded-box w-full bg-base-100 p-2 shadow">
                     <li v-for="btn in dropdown" :key="btn.id">
                       <button @click="btn.action">
                         {{ btn.name.value }}
@@ -89,7 +89,7 @@
           </div>
 
           <!-- Bottom -->
-          <button class="rounded-btn hover:bg-base-300 mx-2 mt-auto p-3" @click="logout">
+          <button class="rounded-btn mx-2 mt-auto p-3 hover:bg-base-300" @click="logout">
             {{ $t("global.sign_out") }}
           </button>
         </div>
diff --git a/frontend/lib/api/__test__/user/items.test.ts b/frontend/lib/api/__test__/user/items.test.ts
index 4f8973f9a..74153f14e 100644
--- a/frontend/lib/api/__test__/user/items.test.ts
+++ b/frontend/lib/api/__test__/user/items.test.ts
@@ -148,9 +148,7 @@ describe("user should be able to create an item and add an attachment", () => {
     {
       const { response, data } = await api.items.maintenance.getLog(item.id);
       expect(response.status).toBe(200);
-      expect(data.entries).toHaveLength(maintenanceEntries.length);
-      expect(data.costAverage).toBeGreaterThan(0);
-      expect(data.costTotal).toBeGreaterThan(0);
+      expect(data).toHaveLength(maintenanceEntries.length);
     }
 
     cleanup();
diff --git a/frontend/pages/item/[id]/index.vue b/frontend/pages/item/[id]/index.vue
index 002fd0dc6..c51b98360 100644
--- a/frontend/pages/item/[id]/index.vue
+++ b/frontend/pages/item/[id]/index.vue
@@ -234,7 +234,7 @@
       details.push({
         name,
         text: "",
-        slot: slot,
+        slot,
       });
     };
 
@@ -624,13 +624,4 @@
   dialog::backdrop {
     background: rgba(0, 0, 0, 0.5);
   }
-
-  .scroll-bg::-webkit-scrollbar {
-    width: 0.5rem;
-  }
-
-  .scroll-bg::-webkit-scrollbar-thumb {
-    border-radius: 0.25rem;
-    @apply bg-base-300;
-  }
 </style>
diff --git a/frontend/pages/item/[id]/index/edit.vue b/frontend/pages/item/[id]/index/edit.vue
index 664205c0c..ff4008438 100644
--- a/frontend/pages/item/[id]/index/edit.vue
+++ b/frontend/pages/item/[id]/index/edit.vue
@@ -611,7 +611,7 @@
             </div>
           </div>
           <div class="mt-4 flex justify-end px-5 pb-4">
-            <BaseButton size="sm" @click="addField"> {{$t("global.add")}} </BaseButton>
+            <BaseButton size="sm" @click="addField"> {{ $t("global.add") }} </BaseButton>
           </div>
         </BaseCard>
 
@@ -621,7 +621,7 @@
           class="card overflow-visible bg-base-100 shadow-xl sm:rounded-lg"
         >
           <div class="px-4 py-5 sm:px-6">
-            <h3 class="text-lg font-medium leading-6"> {{ $t("items.attachments") }} </h3>
+            <h3 class="text-lg font-medium leading-6">{{ $t("items.attachments") }}</h3>
             <p class="text-xs">{{ $t("items.changes_persisted_immediately") }}</p>
           </div>
           <div class="border-t border-gray-300 p-4">
diff --git a/frontend/pages/label/[id].vue b/frontend/pages/label/[id].vue
index 90d8818b6..274e8cf84 100644
--- a/frontend/pages/label/[id].vue
+++ b/frontend/pages/label/[id].vue
@@ -104,9 +104,13 @@
           :max-length="255"
           :min-length="1"
         />
-        <FormTextArea v-model="updateData.description" :label="$t('components.label.create_modal.label_description')" :max-length="255" />
+        <FormTextArea
+          v-model="updateData.description"
+          :label="$t('components.label.create_modal.label_description')"
+          :max-length="255"
+        />
         <div class="modal-action">
-          <BaseButton type="submit" :loading="updating"> {{$t("global.update")}} </BaseButton>
+          <BaseButton type="submit" :loading="updating"> {{ $t("global.update") }} </BaseButton>
         </div>
       </form>
     </BaseModal>
diff --git a/frontend/pages/location/[id].vue b/frontend/pages/location/[id].vue
index 73871a449..1de2861d5 100644
--- a/frontend/pages/location/[id].vue
+++ b/frontend/pages/location/[id].vue
@@ -111,8 +111,18 @@
     <BaseModal v-model="updateModal">
       <template #title> {{ $t("locations.update_location") }} </template>
       <form v-if="location" @submit.prevent="update">
-        <FormTextField v-model="updateData.name" :autofocus="true" :label="$t('components.location.create_modal.location_name')" :max-length="255" :min-length="1" />
-        <FormTextArea v-model="updateData.description" :label="$t('components.location.create_modal.location_description')" :max-length="1000" />
+        <FormTextField
+          v-model="updateData.name"
+          :autofocus="true"
+          :label="$t('components.location.create_modal.location_name')"
+          :max-length="255"
+          :min-length="1"
+        />
+        <FormTextArea
+          v-model="updateData.description"
+          :label="$t('components.location.create_modal.location_description')"
+          :max-length="1000"
+        />
         <LocationSelector v-model="parent" />
         <div class="modal-action">
           <BaseButton type="submit" :loading="updating"> {{ $t("global.update") }} </BaseButton>
diff --git a/frontend/pages/profile.vue b/frontend/pages/profile.vue
index 2e88a46a4..d13301b36 100644
--- a/frontend/pages/profile.vue
+++ b/frontend/pages/profile.vue
@@ -8,7 +8,6 @@
   import MdiFill from "~icons/mdi/fill";
   import MdiPencil from "~icons/mdi/pencil";
   import MdiAccountMultiple from "~icons/mdi/account-multiple";
-import { useI18n } from "vue-i18n";
 
   definePageMeta({
     middleware: ["auth"],
@@ -20,7 +19,6 @@ import { useI18n } from "vue-i18n";
   const api = useUserApi();
   const confirm = useConfirm();
   const notify = useNotifier();
-  const { t } = useI18n();
 
   const currencies = computedAsync(async () => {
     const resp = await api.group.currencies();
@@ -378,8 +376,15 @@ import { useI18n } from "vue-i18n";
           <label class="label">
             <span class="label-text">{{ $t("profile.language") }}</span>
           </label>
-          <select v-model="$i18n.locale" @change="(event) => {setLanguage((event.target as HTMLSelectElement).value )}"
-            class="select select-bordered">
+          <select
+            v-model="$i18n.locale"
+            class="select select-bordered"
+            @change="
+              event => {
+                setLanguage((event.target as HTMLSelectElement).value);
+              }
+            "
+          >
             <option v-for="lang in $i18n.availableLocales" :key="lang" :value="lang">
               {{ $t(`languages.${lang}`) }} ({{ $t(`languages.${lang}`, 1, { locale: lang }) }})
             </option>
@@ -447,7 +452,7 @@ import { useI18n } from "vue-i18n";
 
         <div v-if="group && currencies && currencies.length > 0" class="p-5 pt-0">
           <FormSelect v-model="currency" :label="$t('profile.currency_format')" :items="currencies" />
-          <p class="m-2 text-sm">{{$t("profile.example")}}: {{ currencyExample }}</p>
+          <p class="m-2 text-sm">{{ $t("profile.example") }}: {{ currencyExample }}</p>
 
           <div class="mt-4">
             <BaseButton size="sm" @click="updateGroup"> {{ $t("profile.update_group") }} </BaseButton>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
index 97ce8867c..c45973145 100644
--- a/frontend/pages/tools.vue
+++ b/frontend/pages/tools.vue
@@ -39,6 +39,7 @@
         <div class="divide-y divide-gray-300 border-t border-gray-300 px-6 pb-3">
           <DetailAction @action="modals.import = true">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-html="$t('tools.import_export_set.import_sub')"></div>
             <template #button> {{ $t("tools.import_export_set.import_button") }} </template>
           </DetailAction>
@@ -55,6 +56,7 @@
             <MdiAlert class="mr-2" />
             <span> {{ $t("tools.actions") }} </span>
             <template #description>
+              <!-- eslint-disable-next-line vue/no-v-html -->
               <div v-html="$t('tools.actions_sub')"></div>
             </template>
           </BaseSectionHeader>
@@ -72,11 +74,13 @@
           </DetailAction>
           <DetailAction @action="resetItemDateTimes">
             <template #title> {{ $t("tools.actions_set.zero_datetimes") }} </template>
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-html="$t('tools.actions_set.zero_datetimes_sub')"></div>
             <template #button> {{ $t("tools.actions_set.zero_datetimes_button") }} </template>
           </DetailAction>
           <DetailAction @action="setPrimaryPhotos">
             <template #title> {{ $t("tools.actions_set.set_primary_photo") }} </template>
+            <!-- eslint-disable-next-line vue/no-v-html -->
             <div v-html="$t('tools.actions_set.set_primary_photo_sub')"></div>
             <template #button> {{ $t("tools.actions_set.set_primary_photo_button") }} </template>
           </DetailAction>