From 89bbfe58273870139b659ebaad61cffff24d220a Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Sun, 12 Jan 2025 20:12:57 +0500
Subject: [PATCH 1/9] Create `SideModal` component

---
 src/components/Form.vue      | 11 +++++++++++
 src/components/SideModal.vue | 24 ++++++++++++++++++++++++
 src/views/BrandsView.vue     | 28 ++++++++++++++++++++++------
 src/views/ModelsView.vue     |  1 +
 tailwind.config.js           | 27 ++++++++++++++++++++++++++-
 5 files changed, 84 insertions(+), 7 deletions(-)
 create mode 100644 src/components/Form.vue
 create mode 100644 src/components/SideModal.vue

diff --git a/src/components/Form.vue b/src/components/Form.vue
new file mode 100644
index 0000000..4a6bf5c
--- /dev/null
+++ b/src/components/Form.vue
@@ -0,0 +1,11 @@
+<template>
+  <div class="flex flex-col gap-4 h-full">
+    <div class="flex flex-col gap-3 basis-full">
+      <slot name="content" />
+    </div>
+
+    <div class="grid grid-cols-2 gap-3">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>
diff --git a/src/components/SideModal.vue b/src/components/SideModal.vue
new file mode 100644
index 0000000..243cee3
--- /dev/null
+++ b/src/components/SideModal.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+const modalShown = defineModel<boolean>()
+
+const closeModal = () => {
+  modalShown.value = false
+}
+</script>
+
+<template>
+  <div v-if="modalShown"
+       class="bg-gray-600 bg-opacity-80 absolute top-0 left-0 w-full h-full z-50">
+    <div class="w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3" :class="{ 'animate-left-slide-in': modalShown }">
+      <div class="flex justify-between items-center">
+        <h2 class="text-base text-gray-400 font-semibold uppercase"><slot name="header-text" /></h2>
+
+        <span @click="closeModal" class="cursor-pointer">
+          <Icon icon="flowbite:x-outline" width="24" height="24" class="text-gray-400 hover:text-gray-300" />
+        </span>
+      </div>
+
+      <slot name="content" />
+    </div>
+  </div>
+</template>
diff --git a/src/views/BrandsView.vue b/src/views/BrandsView.vue
index ba84aaa..5d05ab8 100644
--- a/src/views/BrandsView.vue
+++ b/src/views/BrandsView.vue
@@ -8,6 +8,8 @@ import type { APIBrand, APIBrands } from '@/utils/api/brands'
 import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
 import NetworkError from '@/components/NetworkError.vue'
+import SideModal from '@/components/SideModal.vue'
+import Form from '@/components/Form.vue'
 
 const route = useRoute()
 
@@ -65,12 +67,6 @@ onMounted(() => {
         :page-count="pageCount"
       >
         <template #actions>
-          <!-- <fwb-button color="red" size="xs">
-            Delete selected
-            <template #suffix>
-              <Icon icon="flowbite:minus-outline" width="24" height="24" />
-            </template>
-          </fwb-button> -->
           <fwb-button color="default" size="md">
             Add new brand
             <template #suffix>
@@ -79,6 +75,26 @@ onMounted(() => {
           </fwb-button>
         </template>
       </Table>
+
+      <SideModal>
+        <template #header-text>Add new brand</template>
+
+        <template #content>
+          <Form>
+            <template #content>
+              <fwb-input label="Test" placeholder="kek" size="md" />
+              <fwb-input label="Test" placeholder="kek" size="md" />
+              <fwb-input label="Test" placeholder="kek" size="md" />
+              <fwb-input label="Test" placeholder="kek" size="md" />
+            </template>
+
+            <template #footer>
+              <fwb-button color="alternative" size="md">Cancel</fwb-button>
+              <fwb-button color="default" size="md">Save</fwb-button>
+            </template>
+          </Form>
+        </template>
+      </SideModal>
     </template>
   </MainLayout>
 </template>
diff --git a/src/views/ModelsView.vue b/src/views/ModelsView.vue
index 5313bb6..58caefc 100644
--- a/src/views/ModelsView.vue
+++ b/src/views/ModelsView.vue
@@ -8,6 +8,7 @@ import type { APIModel } from '@/utils/api/models'
 import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
 import NetworkError from '@/components/NetworkError.vue'
+import SideModal from '@/components/SideModal.vue'
 
 const route = useRoute()
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 75398e3..e0a53fc 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -6,7 +6,32 @@ export default {
     'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
   ],
   theme: {
-    extend: {},
+    extend: {
+      keyframes: {
+        'left-slide-in': {
+          '0%': { transform: 'translateX(-100%)' },
+          '100%': { transform: 'translateX(0)' },
+        },
+        'left-slide-out': {
+          '0%': { transform: 'translateX(0)' },
+          '100%': { transform: 'translateX(-100%)' },
+        },
+        'fade-in': {
+          '0%': { opacity: 0 },
+          '100%': { opacity: 1 },
+        },
+        'fade-out': {
+          '0%': { opacity: 1 },
+          '100%': { opacity: 0 },
+        },
+      },
+      animation: {
+        'left-slide-in': 'left-slide-in 0.3s ease-out',
+        'left-slide-out': 'left-slide-out 0.3s ease-out',
+        'fade-in': 'fade-in 0.3s ease-out',
+        'fade-out': 'fade-out 0.3s ease-out',
+      },
+    },
   },
   plugins: [require('flowbite/plugin')],
 }

From 2b4331988a16f20c4024aec1bf084a624633560c Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Sun, 12 Jan 2025 20:13:27 +0500
Subject: [PATCH 2/9] Create `Form` component

---
 src/components/Form.vue | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/src/components/Form.vue b/src/components/Form.vue
index 4a6bf5c..7d435f9 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,5 +1,16 @@
+<script setup lang="ts">
+const errors = defineModel<string[]>()
+</script>
+
 <template>
   <div class="flex flex-col gap-4 h-full">
+    <fwb-alert v-if="errors.length > 0" type="danger">
+      <span class="font-medium">Ensure that these requirements are met:</span>
+      <ul class="mt-1.5 ml-4 list-disc list-inside">
+        <li v-for="error in errors" :key="error">{{ error }}</li>
+      </ul>
+    </fwb-alert>
+
     <div class="flex flex-col gap-3 basis-full">
       <slot name="content" />
     </div>

From bbb09f7c42717ba9e5c92ae99f47d5dcf285b662 Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Mon, 13 Jan 2025 19:10:34 +0500
Subject: [PATCH 3/9] Handle clicks outside of the side panel and `escape`
 keypresses to close the modal

---
 src/components/SideModal.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/components/SideModal.vue b/src/components/SideModal.vue
index 243cee3..7905074 100644
--- a/src/components/SideModal.vue
+++ b/src/components/SideModal.vue
@@ -1,14 +1,32 @@
 <script setup lang="ts">
+import { onMounted } from 'vue';
+
 const modalShown = defineModel<boolean>()
 
 const closeModal = () => {
   modalShown.value = false
 }
+
+onMounted(() => {
+  window.addEventListener('keydown', (e) => {
+    if (e.key === 'Escape') {
+      closeModal()
+    }
+  })
+
+  window.addEventListener('click', (e) => {
+    if (e.target === document.querySelector('#modal-container')) {
+      closeModal()
+    }
+  })
+})
 </script>
 
 <template>
   <div v-if="modalShown"
-       class="bg-gray-600 bg-opacity-80 absolute top-0 left-0 w-full h-full z-50">
+       id="modal-container"
+       class="bg-gray-600 bg-opacity-80 absolute top-0 left-0 w-full h-full z-50"
+  >
     <div class="w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3" :class="{ 'animate-left-slide-in': modalShown }">
       <div class="flex justify-between items-center">
         <h2 class="text-base text-gray-400 font-semibold uppercase"><slot name="header-text" /></h2>

From fc956334e4d445693c3f3c42b54fe43fdcb36017 Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Sun, 20 Apr 2025 17:14:41 +0500
Subject: [PATCH 4/9] WIP

---
 src/components/Form.vue      |  2 +-
 src/components/SideModal.vue | 10 ++++--
 src/main.ts                  |  2 ++
 src/types/Brand.d.ts         |  4 +++
 src/types/Evaluation.d.ts    |  6 ++++
 src/types/Measurement.d.ts   |  6 ++++
 src/types/Model.d.ts         |  6 ++++
 src/views/BrandsView.vue     | 28 ++++++++++-----
 src/views/ModelsView.vue     | 66 +++++++++++++++++++++++++++++++++++-
 tailwind.config.js           |  8 ++---
 10 files changed, 121 insertions(+), 17 deletions(-)
 create mode 100644 src/types/Brand.d.ts
 create mode 100644 src/types/Evaluation.d.ts
 create mode 100644 src/types/Measurement.d.ts
 create mode 100644 src/types/Model.d.ts

diff --git a/src/components/Form.vue b/src/components/Form.vue
index 7d435f9..bdb30b0 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -11,7 +11,7 @@ const errors = defineModel<string[]>()
       </ul>
     </fwb-alert>
 
-    <div class="flex flex-col gap-3 basis-full">
+    <div class="flex flex-col gap-3 basis-full overflow-y-auto">
       <slot name="content" />
     </div>
 
diff --git a/src/components/SideModal.vue b/src/components/SideModal.vue
index 7905074..5b0a74e 100644
--- a/src/components/SideModal.vue
+++ b/src/components/SideModal.vue
@@ -25,9 +25,11 @@ onMounted(() => {
 <template>
   <div v-if="modalShown"
        id="modal-container"
-       class="bg-gray-600 bg-opacity-80 absolute top-0 left-0 w-full h-full z-50"
+       class="lg:bg-gray-600 lg:bg-opacity-80 absolute top-0 left-0 w-full h-full z-50"
   >
-    <div class="w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3" :class="{ 'animate-left-slide-in': modalShown }">
+    <div class="w-full lg:w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3"
+         :class="{ 'animate-left-slide-in': modalShown }"
+    >
       <div class="flex justify-between items-center">
         <h2 class="text-base text-gray-400 font-semibold uppercase"><slot name="header-text" /></h2>
 
@@ -36,7 +38,9 @@ onMounted(() => {
         </span>
       </div>
 
-      <slot name="content" />
+      <div class="overflow-y-auto basis-full">
+        <slot name="content" />
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/main.ts b/src/main.ts
index 5b778a8..97dd8b0 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@ import {
   FwbButton,
   FwbButtonGroup,
   FwbCard,
+  FwbHeading,
   FwbInput,
   FwbPagination,
   FwbSelect,
@@ -41,6 +42,7 @@ const components = {
   FwbButton,
   FwbButtonGroup,
   FwbCard,
+  FwbHeading,
   FwbInput,
   FwbPagination,
   FwbSelect,
diff --git a/src/types/Brand.d.ts b/src/types/Brand.d.ts
new file mode 100644
index 0000000..dc7c5b1
--- /dev/null
+++ b/src/types/Brand.d.ts
@@ -0,0 +1,4 @@
+interface Brand {
+  name: string
+  errors: string[]
+}
diff --git a/src/types/Evaluation.d.ts b/src/types/Evaluation.d.ts
new file mode 100644
index 0000000..8cb72c7
--- /dev/null
+++ b/src/types/Evaluation.d.ts
@@ -0,0 +1,6 @@
+interface Evaluation {
+  reviewUrl: string | null
+  reviewScore: number | null
+  shopUrl: string | null
+  measurements?: Measurement[]
+}
diff --git a/src/types/Measurement.d.ts b/src/types/Measurement.d.ts
new file mode 100644
index 0000000..2527194
--- /dev/null
+++ b/src/types/Measurement.d.ts
@@ -0,0 +1,6 @@
+interface Measurement {
+  label: string
+  type: string
+  file: string
+  errors: string[]
+}
diff --git a/src/types/Model.d.ts b/src/types/Model.d.ts
new file mode 100644
index 0000000..2bbdd01
--- /dev/null
+++ b/src/types/Model.d.ts
@@ -0,0 +1,6 @@
+interface Model {
+  name: string
+  brandId: number
+  evaluation?: Evaluation
+  errors: string[]
+}
diff --git a/src/views/BrandsView.vue b/src/views/BrandsView.vue
index 5d05ab8..5b6fd81 100644
--- a/src/views/BrandsView.vue
+++ b/src/views/BrandsView.vue
@@ -26,6 +26,11 @@ const page = computed(() => (route.query.page ? Number(route.query.page) : 1))
 const searchQuery = computed(() => (route.query.query ? String(route.query.query) : ''))
 const loading = ref(false)
 const fetchFailed = ref(false)
+const createModalShown = ref(false)
+const newBrand = ref<Brand>({
+  name: '',
+  errors: [],
+})
 
 const fetchBrands = async () => {
   loading.value = true
@@ -41,6 +46,14 @@ const fetchBrands = async () => {
   }
 }
 
+const openCreateModal = () => {
+  createModalShown.value = true
+}
+
+const closeCreateModal = () => {
+  createModalShown.value = false
+}
+
 watch([page, searchQuery], () => {
   fetchBrands()
 })
@@ -67,7 +80,7 @@ onMounted(() => {
         :page-count="pageCount"
       >
         <template #actions>
-          <fwb-button color="default" size="md">
+          <fwb-button color="default" size="md" @click="openCreateModal">
             Add new brand
             <template #suffix>
               <Icon icon="flowbite:plus-outline" width="16" height="16" />
@@ -76,20 +89,19 @@ onMounted(() => {
         </template>
       </Table>
 
-      <SideModal>
+      <SideModal v-model="createModalShown">
         <template #header-text>Add new brand</template>
 
         <template #content>
-          <Form>
+          <Form v-model="newBrand.errors">
             <template #content>
-              <fwb-input label="Test" placeholder="kek" size="md" />
-              <fwb-input label="Test" placeholder="kek" size="md" />
-              <fwb-input label="Test" placeholder="kek" size="md" />
-              <fwb-input label="Test" placeholder="kek" size="md" />
+              <fwb-input label="Name" placeholder="(required)" size="md" v-model="newBrand.name" />
             </template>
 
             <template #footer>
-              <fwb-button color="alternative" size="md">Cancel</fwb-button>
+              <fwb-button color="alternative" size="md" @click="closeCreateModal"
+                >Cancel</fwb-button
+              >
               <fwb-button color="default" size="md">Save</fwb-button>
             </template>
           </Form>
diff --git a/src/views/ModelsView.vue b/src/views/ModelsView.vue
index 58caefc..b17f7cc 100644
--- a/src/views/ModelsView.vue
+++ b/src/views/ModelsView.vue
@@ -2,6 +2,7 @@
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { modelsApi } from '@/utils/api/models'
+import { brandsApi } from '@/utils/api/brands'
 
 import type { APIModel } from '@/utils/api/models'
 
@@ -9,6 +10,7 @@ import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
 import NetworkError from '@/components/NetworkError.vue'
 import SideModal from '@/components/SideModal.vue'
+import Form from '@/components/Form.vue'
 
 const route = useRoute()
 
@@ -25,6 +27,19 @@ const searchQuery = computed(() => (route.query.query ? String(route.query.query
 const pageCount = ref(1)
 const loading = ref(false)
 const fetchFailed = ref(false)
+const createModalShown = ref(false)
+const brands = ref([{ value: 1, name: '123' }])
+const newModel = ref<Model>({
+  name: '',
+  brandId: 0,
+  evaluation: {
+    shopUrl: null,
+    reviewUrl: null,
+    reviewScore: null,
+    measurements: [],
+  },
+  errors: [],
+})
 
 const fetchModels = async () => {
   loading.value = true
@@ -40,6 +55,14 @@ const fetchModels = async () => {
   }
 }
 
+const openCreateModal = () => {
+  createModalShown.value = true
+}
+
+const closeCreateModal = () => {
+  createModalShown.value = false
+}
+
 watch([page, searchQuery], () => {
   fetchModels()
 })
@@ -72,7 +95,7 @@ onMounted(() => {
               <Icon icon="flowbite:minus-outline" width="24" height="24" />
             </template>
           </fwb-button> -->
-          <fwb-button color="default" size="md">
+          <fwb-button color="default" size="md" @click="openCreateModal">
             Add new model
             <template #suffix>
               <Icon icon="flowbite:plus-outline" width="16" height="16" />
@@ -80,6 +103,47 @@ onMounted(() => {
           </fwb-button>
         </template>
       </Table>
+
+      <SideModal v-model="createModalShown">
+        <template #header-text>Add new model</template>
+
+        <template #content>
+          <Form v-model="newModel.errors">
+            <template #content>
+              <fwb-heading tag="h6" class="font-normal">Model</fwb-heading>
+              <fwb-input label="Name" placeholder="(required)" size="md" v-model="newModel.name" />
+              <fwb-select v-model="newModel.brandId" :options="brands" label="Brand" />
+
+              <fwb-heading tag="h6" class="font-normal">Evaluation</fwb-heading>
+              <fwb-input
+                label="Review URL"
+                placeholder="(optional)"
+                size="md"
+                v-model="newModel.evaluation.reviewUrl"
+              />
+              <fwb-input
+                label="Review score"
+                placeholder="(optional)"
+                size="md"
+                v-model="newModel.evaluation.reviewScore"
+              />
+              <fwb-input
+                label="Shop URL"
+                placeholder="(optional)"
+                size="md"
+                v-model="newModel.evaluation.shopUrl"
+              />
+            </template>
+
+            <template #footer>
+              <fwb-button color="alternative" size="md" @click="closeCreateModal"
+                >Cancel</fwb-button
+              >
+              <fwb-button color="default" size="md">Save</fwb-button>
+            </template>
+          </Form>
+        </template>
+      </SideModal>
     </template>
   </MainLayout>
 </template>
diff --git a/tailwind.config.js b/tailwind.config.js
index e0a53fc..ff57fe3 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -26,10 +26,10 @@ export default {
         },
       },
       animation: {
-        'left-slide-in': 'left-slide-in 0.3s ease-out',
-        'left-slide-out': 'left-slide-out 0.3s ease-out',
-        'fade-in': 'fade-in 0.3s ease-out',
-        'fade-out': 'fade-out 0.3s ease-out',
+        'left-slide-in': 'left-slide-in 0.2s ease',
+        'left-slide-out': 'left-slide-out 0.2s ease',
+        'fade-in': 'fade-in 0.2s ease',
+        'fade-out': 'fade-out 0.2s ease',
       },
     },
   },

From ab6a585dfe97dd523cf95c94ab92a537e4b08972 Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Tue, 12 Aug 2025 03:20:21 +0500
Subject: [PATCH 5/9] Fixes

---
 src/assets/base.css          | 53 ++++++++++++++++++++++++++++++++++++
 src/components/Form.vue      |  2 +-
 src/components/SideModal.vue | 21 +++++++++-----
 src/utils/api/brands.ts      | 10 ++++---
 tailwind.config.js           | 29 --------------------
 5 files changed, 74 insertions(+), 41 deletions(-)

diff --git a/src/assets/base.css b/src/assets/base.css
index d683588..f8bbd51 100644
--- a/src/assets/base.css
+++ b/src/assets/base.css
@@ -1,4 +1,57 @@
 @import 'tailwindcss';
 @import 'flowbite-vue/index.css';
+
 @plugin "flowbite/plugin";
 @source "../../node_modules/flowbite-vue";
+
+@keyframes left-slide-in {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes left-slide-out {
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+
+@utility animate-left-slide-in {
+  animation: left-slide-in 0.2s ease;
+}
+
+@utility animate-left-slide-out {
+  animation: left-slide-out 0.2s ease;
+}
+
+@utility animate-fade-in {
+  animation: fade-in 0.2s ease;
+}
+
+@utility animate-fade-out {
+  animation: fade-out 0.2s ease;
+}
diff --git a/src/components/Form.vue b/src/components/Form.vue
index bdb30b0..dd1e9c7 100644
--- a/src/components/Form.vue
+++ b/src/components/Form.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-const errors = defineModel<string[]>()
+const errors = defineModel<string[]>({ required: true })
 </script>
 
 <template>
diff --git a/src/components/SideModal.vue b/src/components/SideModal.vue
index 5b0a74e..c4d91f3 100644
--- a/src/components/SideModal.vue
+++ b/src/components/SideModal.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
+import { onMounted } from 'vue'
 
 const modalShown = defineModel<boolean>()
 
@@ -23,18 +23,25 @@ onMounted(() => {
 </script>
 
 <template>
-  <div v-if="modalShown"
-       id="modal-container"
-       class="lg:bg-gray-600 lg:bg-opacity-80 absolute top-0 left-0 w-full h-full z-50"
+  <div
+    v-if="modalShown"
+    id="modal-container"
+    class="lg:bg-gray-600/80 absolute top-0 left-0 w-full h-full z-50"
   >
-    <div class="w-full lg:w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3"
-         :class="{ 'animate-left-slide-in': modalShown }"
+    <div
+      class="w-full lg:w-[596px] bg-gray-900 h-full p-4 flex flex-col gap-3"
+      :class="{ 'animate-left-slide-in': modalShown }"
     >
       <div class="flex justify-between items-center">
         <h2 class="text-base text-gray-400 font-semibold uppercase"><slot name="header-text" /></h2>
 
         <span @click="closeModal" class="cursor-pointer">
-          <Icon icon="flowbite:x-outline" width="24" height="24" class="text-gray-400 hover:text-gray-300" />
+          <Icon
+            icon="flowbite:x-outline"
+            width="24"
+            height="24"
+            class="text-gray-400 hover:text-gray-300"
+          />
         </span>
       </div>
 
diff --git a/src/utils/api/brands.ts b/src/utils/api/brands.ts
index 48ae9f0..3a477b6 100644
--- a/src/utils/api/brands.ts
+++ b/src/utils/api/brands.ts
@@ -2,9 +2,9 @@ import { apiClient } from '../ApiClient'
 import type { APIPage } from '../ApiClient'
 
 export type APIBrand = {
-  id: number
+  id?: number
   name: string
-  model_count: number
+  model_count?: number
 }
 
 export type APIBrands = APIPage<APIBrand>
@@ -15,6 +15,8 @@ export const brandsApi = {
     return response.data as APIBrands
   },
 
-  // create
-  // edit
+  async create(brand: APIBrand) {
+    const response = await apiClient.post('/brands/new', brand)
+    return response.data as APIBrand
+  },
 }
diff --git a/tailwind.config.js b/tailwind.config.js
index ff57fe3..88f095c 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,33 +5,4 @@ export default {
     './src/**/*.{vue,js,ts,jsx,tsx}',
     'node_modules/flowbite-vue/**/*.{js,jsx,ts,tsx,vue}',
   ],
-  theme: {
-    extend: {
-      keyframes: {
-        'left-slide-in': {
-          '0%': { transform: 'translateX(-100%)' },
-          '100%': { transform: 'translateX(0)' },
-        },
-        'left-slide-out': {
-          '0%': { transform: 'translateX(0)' },
-          '100%': { transform: 'translateX(-100%)' },
-        },
-        'fade-in': {
-          '0%': { opacity: 0 },
-          '100%': { opacity: 1 },
-        },
-        'fade-out': {
-          '0%': { opacity: 1 },
-          '100%': { opacity: 0 },
-        },
-      },
-      animation: {
-        'left-slide-in': 'left-slide-in 0.2s ease',
-        'left-slide-out': 'left-slide-out 0.2s ease',
-        'fade-in': 'fade-in 0.2s ease',
-        'fade-out': 'fade-out 0.2s ease',
-      },
-    },
-  },
-  plugins: [require('flowbite/plugin')],
 }

From 66010bd61696755c45d0b09789d6b90d6027eb9a Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Tue, 12 Aug 2025 03:20:32 +0500
Subject: [PATCH 6/9] WIP

---
 src/views/BrandsView.vue | 50 +++++++++++++++++++++++++++++++---------
 1 file changed, 39 insertions(+), 11 deletions(-)

diff --git a/src/views/BrandsView.vue b/src/views/BrandsView.vue
index 5b6fd81..52f3ddc 100644
--- a/src/views/BrandsView.vue
+++ b/src/views/BrandsView.vue
@@ -3,7 +3,7 @@ import { brandsApi } from '@/utils/api/brands'
 import { ref, onMounted, watch, computed } from 'vue'
 import { useRoute } from 'vue-router'
 
-import type { APIBrand, APIBrands } from '@/utils/api/brands'
+import type { APIBrand } from '@/utils/api/brands'
 
 import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
@@ -20,6 +20,11 @@ const tableColumns = [
   { name: 'Last modified', key: 'updated_at' },
 ]
 
+const initialBrandFormState: Brand = {
+  name: '',
+  errors: [],
+}
+
 const brands = ref([] as APIBrand[])
 const pageCount = ref(1)
 const page = computed(() => (route.query.page ? Number(route.query.page) : 1))
@@ -27,10 +32,7 @@ const searchQuery = computed(() => (route.query.query ? String(route.query.query
 const loading = ref(false)
 const fetchFailed = ref(false)
 const createModalShown = ref(false)
-const newBrand = ref<Brand>({
-  name: '',
-  errors: [],
-})
+const newBrandForm = ref<Brand>(initialBrandFormState)
 
 const fetchBrands = async () => {
   loading.value = true
@@ -46,6 +48,25 @@ const fetchBrands = async () => {
   }
 }
 
+const convertToAPIBrand = (form: Brand): APIBrand => ({
+  name: form.name,
+})
+
+const createBrand = async () => {
+  loading.value = true
+  try {
+    const apiBrand: APIBrand = convertToAPIBrand(newBrandForm.value)
+    await brandsApi.create(apiBrand)
+
+    newBrandForm.value = initialBrandFormState
+    createModalShown.value = false
+    fetchBrands()
+  } catch (error) {
+    console.error(error)
+    loading.value = false
+  }
+}
+
 const openCreateModal = () => {
   createModalShown.value = true
 }
@@ -93,16 +114,23 @@ onMounted(() => {
         <template #header-text>Add new brand</template>
 
         <template #content>
-          <Form v-model="newBrand.errors">
+          <Form v-model="newBrandForm.errors">
             <template #content>
-              <fwb-input label="Name" placeholder="(required)" size="md" v-model="newBrand.name" />
+              <fwb-input
+                label="Name"
+                label-class="text-white"
+                placeholder="(required)"
+                size="md"
+                v-model="newBrandForm.name"
+                required
+              />
             </template>
 
             <template #footer>
-              <fwb-button color="alternative" size="md" @click="closeCreateModal"
-                >Cancel</fwb-button
-              >
-              <fwb-button color="default" size="md">Save</fwb-button>
+              <fwb-button color="alternative" size="md" @click="closeCreateModal">
+                Cancel
+              </fwb-button>
+              <fwb-button color="default" size="md" @click="createBrand">Save</fwb-button>
             </template>
           </Form>
         </template>

From bede782ffa2822a79334b492573ba29eb702b2db Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Tue, 12 Aug 2025 03:39:00 +0500
Subject: [PATCH 7/9] Implement pagination

---
 src/components/Table.vue | 1 -
 src/views/ModelsView.vue | 7 +++----
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/src/components/Table.vue b/src/components/Table.vue
index 62d0d5f..ba6980f 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -14,7 +14,6 @@ const props = defineProps<{
 
 const tableRows = defineModel<object[]>()
 const currentPage = defineModel<number>('currentPage', { required: true })
-const searchQuery = defineModel<string>('searchQuery')
 const loading = defineModel<boolean>('loading', { required: true })
 const selectedRows = ref([])
 </script>
diff --git a/src/views/ModelsView.vue b/src/views/ModelsView.vue
index b17f7cc..b68d015 100644
--- a/src/views/ModelsView.vue
+++ b/src/views/ModelsView.vue
@@ -2,7 +2,6 @@
 import { ref, onMounted, computed, watch } from 'vue'
 import { useRoute } from 'vue-router'
 import { modelsApi } from '@/utils/api/models'
-import { brandsApi } from '@/utils/api/brands'
 
 import type { APIModel } from '@/utils/api/models'
 
@@ -119,19 +118,19 @@ onMounted(() => {
                 label="Review URL"
                 placeholder="(optional)"
                 size="md"
-                v-model="newModel.evaluation.reviewUrl"
+                v-model="newModel.evaluation!.reviewUrl"
               />
               <fwb-input
                 label="Review score"
                 placeholder="(optional)"
                 size="md"
-                v-model="newModel.evaluation.reviewScore"
+                v-model="newModel.evaluation!.reviewScore"
               />
               <fwb-input
                 label="Shop URL"
                 placeholder="(optional)"
                 size="md"
-                v-model="newModel.evaluation.shopUrl"
+                v-model="newModel.evaluation!.shopUrl"
               />
             </template>
 

From c57ac3ce5eb1f462f6cdf9a87317c85ac96705ce Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Sun, 2 Nov 2025 17:31:03 +0500
Subject: [PATCH 8/9] Update TS

---
 package.json   |   8 +-
 pnpm-lock.yaml | 230 ++++++++++++++++++++++++-------------------------
 2 files changed, 121 insertions(+), 117 deletions(-)

diff --git a/package.json b/package.json
index 0c82982..ba85f75 100644
--- a/package.json
+++ b/package.json
@@ -50,7 +50,7 @@
     "oxlint": "^1.11.1",
     "prettier": "^3.6.2",
     "tailwindcss": "^4.1.11",
-    "typescript": "~5.9.2",
+    "typescript": "~5.9.3",
     "vite": "^7.1.1",
     "vite-plugin-vue-devtools": "^8.0.0",
     "vitest": "^3.2.4",
@@ -70,6 +70,10 @@
       "vite@>=5.0.0 <5.4.16": ">=5.4.16",
       "vite@>=5.0.0 <5.4.17": ">=5.4.17",
       "vite@>=5.0.0 <5.4.18": ">=5.4.18"
-    }
+    },
+    "onlyBuiltDependencies": [
+      "@tailwindcss/oxide",
+      "esbuild"
+    ]
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 14f38bb..0b2b5ac 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -36,26 +36,26 @@ importers:
         version: 3.1.2(rollup@4.46.2)
       flowbite-vue:
         specifier: ^0.2.1
-        version: 0.2.1(axios@1.11.0)(postcss@8.5.6)(rollup@4.46.2)(tailwindcss@4.1.11)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))
+        version: 0.2.1(axios@1.11.0)(postcss@8.5.6)(rollup@4.46.2)(tailwindcss@4.1.11)(typescript@5.9.3)(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))
       pinia:
         specifier: ^3.0.3
-        version: 3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
+        version: 3.0.3(typescript@5.9.3)(vue@3.5.18(typescript@5.9.3))
       ts-case-convert:
         specifier: ^2.1.0
         version: 2.1.0
       vue:
         specifier: ^3.5.18
-        version: 3.5.18(typescript@5.9.2)
+        version: 3.5.18(typescript@5.9.3)
       vue-router:
         specifier: ^4.5.1
-        version: 4.5.1(vue@3.5.18(typescript@5.9.2))
+        version: 4.5.1(vue@3.5.18(typescript@5.9.3))
       vue3-toastify:
         specifier: ^0.2.8
-        version: 0.2.8(vue@3.5.18(typescript@5.9.2))
+        version: 0.2.8(vue@3.5.18(typescript@5.9.3))
     devDependencies:
       '@iconify/vue':
         specifier: ^5.0.0
-        version: 5.0.0(vue@3.5.18(typescript@5.9.2))
+        version: 5.0.0(vue@3.5.18(typescript@5.9.3))
       '@playwright/test':
         specifier: ^1.54.2
         version: 1.54.2
@@ -70,22 +70,22 @@ importers:
         version: 24.2.1
       '@vitejs/plugin-vue':
         specifier: ^6.0.1
-        version: 6.0.1(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))
+        version: 6.0.1(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))
       '@vitest/eslint-plugin':
         specifier: 1.3.4
-        version: 1.3.4(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1))
+        version: 1.3.4(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1))
       '@vue/eslint-config-prettier':
         specifier: ^10.2.0
         version: 10.2.0(eslint@9.33.0(jiti@2.5.1))(prettier@3.6.2)
       '@vue/eslint-config-typescript':
         specifier: ^14.6.0
-        version: 14.6.0(eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+        version: 14.6.0(eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       '@vue/test-utils':
         specifier: ^2.4.6
         version: 2.4.6
       '@vue/tsconfig':
         specifier: ^0.7.0
-        version: 0.7.0(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))
+        version: 0.7.0(typescript@5.9.3)(vue@3.5.18(typescript@5.9.3))
       autoprefixer:
         specifier: ^10.4.21
         version: 10.4.21(postcss@8.5.6)
@@ -100,7 +100,7 @@ importers:
         version: 2.2.2(eslint@9.33.0(jiti@2.5.1))
       eslint-plugin-vue:
         specifier: ^10.4.0
-        version: 10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1)))
+        version: 10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1)))
       jsdom:
         specifier: ^26.1.0
         version: 26.1.0
@@ -117,20 +117,20 @@ importers:
         specifier: ^4.1.11
         version: 4.1.11
       typescript:
-        specifier: ~5.9.2
-        version: 5.9.2
+        specifier: ~5.9.3
+        version: 5.9.3
       vite:
         specifier: ^7.1.1
         version: 7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1)
       vite-plugin-vue-devtools:
         specifier: ^8.0.0
-        version: 8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))
+        version: 8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))
       vitest:
         specifier: ^3.2.4
         version: 3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1)
       vue-tsc:
         specifier: ^3.0.5
-        version: 3.0.5(typescript@5.9.2)
+        version: 3.0.5(typescript@5.9.3)
 
 packages:
 
@@ -2608,8 +2608,8 @@ packages:
       eslint: ^8.57.0 || ^9.0.0
       typescript: '>=4.8.4 <6.0.0'
 
-  typescript@5.9.2:
-    resolution: {integrity: sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==}
+  typescript@5.9.3:
+    resolution: {integrity: sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==}
     engines: {node: '>=14.17'}
     hasBin: true
 
@@ -3275,10 +3275,10 @@ snapshots:
 
   '@iconify/types@2.0.0': {}
 
-  '@iconify/vue@5.0.0(vue@3.5.18(typescript@5.9.2))':
+  '@iconify/vue@5.0.0(vue@3.5.18(typescript@5.9.3))':
     dependencies:
       '@iconify/types': 2.0.0
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
   '@isaacs/cliui@8.0.2':
     dependencies:
@@ -3572,41 +3572,41 @@ snapshots:
 
   '@types/web-bluetooth@0.0.21': {}
 
-  '@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/eslint-plugin@8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/regexpp': 4.12.1
-      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       '@typescript-eslint/scope-manager': 8.39.1
-      '@typescript-eslint/type-utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/type-utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.39.1
       eslint: 9.33.0(jiti@2.5.1)
       graphemer: 1.4.0
       ignore: 7.0.5
       natural-compare: 1.4.0
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/scope-manager': 8.39.1
       '@typescript-eslint/types': 8.39.1
-      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.3)
       '@typescript-eslint/visitor-keys': 8.39.1
       debug: 4.4.0
       eslint: 9.33.0(jiti@2.5.1)
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/project-service@8.39.1(typescript@5.9.2)':
+  '@typescript-eslint/project-service@8.39.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.3)
       '@typescript-eslint/types': 8.39.1
       debug: 4.4.0
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -3615,28 +3615,28 @@ snapshots:
       '@typescript-eslint/types': 8.39.1
       '@typescript-eslint/visitor-keys': 8.39.1
 
-  '@typescript-eslint/tsconfig-utils@8.39.1(typescript@5.9.2)':
+  '@typescript-eslint/tsconfig-utils@8.39.1(typescript@5.9.3)':
     dependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
-  '@typescript-eslint/type-utils@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/type-utils@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)':
     dependencies:
       '@typescript-eslint/types': 8.39.1
-      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       debug: 4.4.0
       eslint: 9.33.0(jiti@2.5.1)
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
   '@typescript-eslint/types@8.39.1': {}
 
-  '@typescript-eslint/typescript-estree@8.39.1(typescript@5.9.2)':
+  '@typescript-eslint/typescript-estree@8.39.1(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/project-service': 8.39.1(typescript@5.9.2)
-      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/project-service': 8.39.1(typescript@5.9.3)
+      '@typescript-eslint/tsconfig-utils': 8.39.1(typescript@5.9.3)
       '@typescript-eslint/types': 8.39.1
       '@typescript-eslint/visitor-keys': 8.39.1
       debug: 4.4.0
@@ -3644,19 +3644,19 @@ snapshots:
       is-glob: 4.0.3
       minimatch: 9.0.5
       semver: 7.6.3
-      ts-api-utils: 2.1.0(typescript@5.9.2)
-      typescript: 5.9.2
+      ts-api-utils: 2.1.0(typescript@5.9.3)
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@typescript-eslint/utils@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@typescript-eslint/utils@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)':
     dependencies:
       '@eslint-community/eslint-utils': 4.7.0(eslint@9.33.0(jiti@2.5.1))
       '@typescript-eslint/scope-manager': 8.39.1
       '@typescript-eslint/types': 8.39.1
-      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.3)
       eslint: 9.33.0(jiti@2.5.1)
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
@@ -3665,18 +3665,18 @@ snapshots:
       '@typescript-eslint/types': 8.39.1
       eslint-visitor-keys: 4.2.1
 
-  '@vitejs/plugin-vue@6.0.1(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))':
+  '@vitejs/plugin-vue@6.0.1(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))':
     dependencies:
       '@rolldown/pluginutils': 1.0.0-beta.29
       vite: 7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1)
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
-  '@vitest/eslint-plugin@1.3.4(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)(vitest@3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1))':
+  '@vitest/eslint-plugin@1.3.4(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)(vitest@3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1))':
     dependencies:
-      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       eslint: 9.33.0(jiti@2.5.1)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
       vitest: 3.2.4(@types/node@24.2.1)(jiti@2.5.1)(jsdom@26.1.0)(lightningcss@1.30.1)(yaml@2.6.1)
     transitivePeerDependencies:
       - supports-color
@@ -3836,7 +3836,7 @@ snapshots:
     dependencies:
       '@vue/devtools-kit': 7.7.7
 
-  '@vue/devtools-core@8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))':
+  '@vue/devtools-core@8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))':
     dependencies:
       '@vue/devtools-kit': 8.0.0
       '@vue/devtools-shared': 8.0.0
@@ -3844,7 +3844,7 @@ snapshots:
       nanoid: 5.1.5
       pathe: 2.0.3
       vite-hot-client: 2.1.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
     transitivePeerDependencies:
       - vite
 
@@ -3885,20 +3885,20 @@ snapshots:
     transitivePeerDependencies:
       - '@types/eslint'
 
-  '@vue/eslint-config-typescript@14.6.0(eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)':
+  '@vue/eslint-config-typescript@14.6.0(eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)':
     dependencies:
-      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       eslint: 9.33.0(jiti@2.5.1)
-      eslint-plugin-vue: 10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1)))
+      eslint-plugin-vue: 10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1)))
       fast-glob: 3.3.3
-      typescript-eslint: 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      typescript-eslint: 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       vue-eslint-parser: 10.2.0(eslint@9.33.0(jiti@2.5.1))
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  '@vue/language-core@3.0.5(typescript@5.9.2)':
+  '@vue/language-core@3.0.5(typescript@5.9.3)':
     dependencies:
       '@volar/language-core': 2.4.22
       '@vue/compiler-dom': 3.5.13
@@ -3909,7 +3909,7 @@ snapshots:
       path-browserify: 1.0.1
       picomatch: 4.0.2
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   '@vue/reactivity@3.5.18':
     dependencies:
@@ -3927,11 +3927,11 @@ snapshots:
       '@vue/shared': 3.5.18
       csstype: 3.1.3
 
-  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@5.9.2))':
+  '@vue/server-renderer@3.5.18(vue@3.5.18(typescript@5.9.3))':
     dependencies:
       '@vue/compiler-ssr': 3.5.18
       '@vue/shared': 3.5.18
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
   '@vue/shared@3.5.13': {}
 
@@ -3942,32 +3942,32 @@ snapshots:
       js-beautify: 1.15.1
       vue-component-type-helpers: 2.1.10
 
-  '@vue/tsconfig@0.7.0(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2))':
+  '@vue/tsconfig@0.7.0(typescript@5.9.3)(vue@3.5.18(typescript@5.9.3))':
     optionalDependencies:
-      typescript: 5.9.2
-      vue: 3.5.18(typescript@5.9.2)
+      typescript: 5.9.3
+      vue: 3.5.18(typescript@5.9.3)
 
-  '@vueuse/core@12.8.2(typescript@5.9.2)':
+  '@vueuse/core@12.8.2(typescript@5.9.3)':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 12.8.2
-      '@vueuse/shared': 12.8.2(typescript@5.9.2)
-      vue: 3.5.18(typescript@5.9.2)
+      '@vueuse/shared': 12.8.2(typescript@5.9.3)
+      vue: 3.5.18(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/core@13.6.0(vue@3.5.18(typescript@5.9.2))':
+  '@vueuse/core@13.6.0(vue@3.5.18(typescript@5.9.3))':
     dependencies:
       '@types/web-bluetooth': 0.0.21
       '@vueuse/metadata': 13.6.0
-      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@5.9.2))
-      vue: 3.5.18(typescript@5.9.2)
+      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@5.9.3))
+      vue: 3.5.18(typescript@5.9.3)
 
-  '@vueuse/integrations@13.6.0(axios@1.11.0)(vue@3.5.18(typescript@5.9.2))':
+  '@vueuse/integrations@13.6.0(axios@1.11.0)(vue@3.5.18(typescript@5.9.3))':
     dependencies:
-      '@vueuse/core': 13.6.0(vue@3.5.18(typescript@5.9.2))
-      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@5.9.2))
-      vue: 3.5.18(typescript@5.9.2)
+      '@vueuse/core': 13.6.0(vue@3.5.18(typescript@5.9.3))
+      '@vueuse/shared': 13.6.0(vue@3.5.18(typescript@5.9.3))
+      vue: 3.5.18(typescript@5.9.3)
     optionalDependencies:
       axios: 1.11.0
 
@@ -3975,15 +3975,15 @@ snapshots:
 
   '@vueuse/metadata@13.6.0': {}
 
-  '@vueuse/shared@12.8.2(typescript@5.9.2)':
+  '@vueuse/shared@12.8.2(typescript@5.9.3)':
     dependencies:
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
     transitivePeerDependencies:
       - typescript
 
-  '@vueuse/shared@13.6.0(vue@3.5.18(typescript@5.9.2))':
+  '@vueuse/shared@13.6.0(vue@3.5.18(typescript@5.9.3))':
     dependencies:
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
   abbrev@2.0.0: {}
 
@@ -4300,7 +4300,7 @@ snapshots:
     optionalDependencies:
       eslint-config-prettier: 10.1.8(eslint@9.33.0(jiti@2.5.1))
 
-  eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))):
+  eslint-plugin-vue@10.4.0(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(vue-eslint-parser@10.2.0(eslint@9.33.0(jiti@2.5.1))):
     dependencies:
       '@eslint-community/eslint-utils': 4.4.1(eslint@9.33.0(jiti@2.5.1))
       eslint: 9.33.0(jiti@2.5.1)
@@ -4311,7 +4311,7 @@ snapshots:
       vue-eslint-parser: 10.2.0(eslint@9.33.0(jiti@2.5.1))
       xml-name-validator: 4.0.0
     optionalDependencies:
-      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
 
   eslint-scope@8.2.0:
     dependencies:
@@ -4474,11 +4474,11 @@ snapshots:
 
   flatted@3.3.2: {}
 
-  floating-vue@5.2.2(vue@3.5.18(typescript@5.9.2)):
+  floating-vue@5.2.2(vue@3.5.18(typescript@5.9.3)):
     dependencies:
       '@floating-ui/dom': 1.1.1
-      vue: 3.5.18(typescript@5.9.2)
-      vue-resize: 2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2))
+      vue: 3.5.18(typescript@5.9.3)
+      vue-resize: 2.0.0-alpha.1(vue@3.5.18(typescript@5.9.3))
 
   flowbite-datepicker@1.3.2(rollup@4.46.2):
     dependencies:
@@ -4487,21 +4487,21 @@ snapshots:
     transitivePeerDependencies:
       - rollup
 
-  flowbite-vue@0.2.1(axios@1.11.0)(postcss@8.5.6)(rollup@4.46.2)(tailwindcss@4.1.11)(typescript@5.9.2)(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2)):
+  flowbite-vue@0.2.1(axios@1.11.0)(postcss@8.5.6)(rollup@4.46.2)(tailwindcss@4.1.11)(typescript@5.9.3)(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3)):
     dependencies:
       '@tailwindcss/postcss': 4.1.11
       '@tailwindcss/vite': 4.1.11(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))
-      '@vueuse/core': 12.8.2(typescript@5.9.2)
-      '@vueuse/integrations': 13.6.0(axios@1.11.0)(vue@3.5.18(typescript@5.9.2))
+      '@vueuse/core': 12.8.2(typescript@5.9.3)
+      '@vueuse/integrations': 13.6.0(axios@1.11.0)(vue@3.5.18(typescript@5.9.3))
       classnames: 2.5.1
-      floating-vue: 5.2.2(vue@3.5.18(typescript@5.9.2))
+      floating-vue: 5.2.2(vue@3.5.18(typescript@5.9.3))
       flowbite: 3.1.2(rollup@4.46.2)
       lodash-es: 4.17.21
       nanoid: 5.1.5
       postcss-prefix-selector: 2.1.1(postcss@8.5.6)
       tailwind-merge: 3.2.0
       tailwindcss: 4.1.11
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
     transitivePeerDependencies:
       - '@nuxt/kit'
       - async-validator
@@ -5037,12 +5037,12 @@ snapshots:
 
   pidtree@0.6.0: {}
 
-  pinia@3.0.3(typescript@5.9.2)(vue@3.5.18(typescript@5.9.2)):
+  pinia@3.0.3(typescript@5.9.3)(vue@3.5.18(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 7.7.7
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   playwright-core@1.54.2: {}
 
@@ -5278,9 +5278,9 @@ snapshots:
     dependencies:
       punycode: 2.3.1
 
-  ts-api-utils@2.1.0(typescript@5.9.2):
+  ts-api-utils@2.1.0(typescript@5.9.3):
     dependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   ts-case-convert@2.1.0: {}
 
@@ -5290,18 +5290,18 @@ snapshots:
 
   type-fest@0.20.2: {}
 
-  typescript-eslint@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2):
+  typescript-eslint@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3):
     dependencies:
-      '@typescript-eslint/eslint-plugin': 8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
-      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
-      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.2)
-      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.2)
+      '@typescript-eslint/eslint-plugin': 8.39.1(@typescript-eslint/parser@8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3))(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
+      '@typescript-eslint/parser': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
+      '@typescript-eslint/typescript-estree': 8.39.1(typescript@5.9.3)
+      '@typescript-eslint/utils': 8.39.1(eslint@9.33.0(jiti@2.5.1))(typescript@5.9.3)
       eslint: 9.33.0(jiti@2.5.1)
-      typescript: 5.9.2
+      typescript: 5.9.3
     transitivePeerDependencies:
       - supports-color
 
-  typescript@5.9.2: {}
+  typescript@5.9.3: {}
 
   undici-types@7.10.0: {}
 
@@ -5376,9 +5376,9 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vite-plugin-vue-devtools@8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2)):
+  vite-plugin-vue-devtools@8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3)):
     dependencies:
-      '@vue/devtools-core': 8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.2))
+      '@vue/devtools-core': 8.0.0(vite@7.1.1(@types/node@24.2.1)(jiti@2.5.1)(lightningcss@1.30.1)(yaml@2.6.1))(vue@3.5.18(typescript@5.9.3))
       '@vue/devtools-kit': 8.0.0
       '@vue/devtools-shared': 8.0.0
       execa: 9.6.0
@@ -5479,34 +5479,34 @@ snapshots:
     transitivePeerDependencies:
       - supports-color
 
-  vue-resize@2.0.0-alpha.1(vue@3.5.18(typescript@5.9.2)):
+  vue-resize@2.0.0-alpha.1(vue@3.5.18(typescript@5.9.3)):
     dependencies:
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
-  vue-router@4.5.1(vue@3.5.18(typescript@5.9.2)):
+  vue-router@4.5.1(vue@3.5.18(typescript@5.9.3)):
     dependencies:
       '@vue/devtools-api': 6.6.4
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
-  vue-tsc@3.0.5(typescript@5.9.2):
+  vue-tsc@3.0.5(typescript@5.9.3):
     dependencies:
       '@volar/typescript': 2.4.22
-      '@vue/language-core': 3.0.5(typescript@5.9.2)
-      typescript: 5.9.2
+      '@vue/language-core': 3.0.5(typescript@5.9.3)
+      typescript: 5.9.3
 
-  vue3-toastify@0.2.8(vue@3.5.18(typescript@5.9.2)):
+  vue3-toastify@0.2.8(vue@3.5.18(typescript@5.9.3)):
     optionalDependencies:
-      vue: 3.5.18(typescript@5.9.2)
+      vue: 3.5.18(typescript@5.9.3)
 
-  vue@3.5.18(typescript@5.9.2):
+  vue@3.5.18(typescript@5.9.3):
     dependencies:
       '@vue/compiler-dom': 3.5.18
       '@vue/compiler-sfc': 3.5.18
       '@vue/runtime-dom': 3.5.18
-      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@5.9.2))
+      '@vue/server-renderer': 3.5.18(vue@3.5.18(typescript@5.9.3))
       '@vue/shared': 3.5.18
     optionalDependencies:
-      typescript: 5.9.2
+      typescript: 5.9.3
 
   w3c-xmlserializer@5.0.0:
     dependencies:

From 7c7fbb5aa879275253c18cbf6bb7653a7f544904 Mon Sep 17 00:00:00 2001
From: Aleksei Gostev <starawayy@protonmail.com>
Date: Sun, 2 Nov 2025 17:31:21 +0500
Subject: [PATCH 9/9] New model view WIP

---
 src/assets/main.css                         |  13 ++
 src/components/Dropzone.vue                 |  33 ++++
 src/components/Loader.vue                   |   5 +-
 src/components/Separator.vue                |   5 +
 src/components/Sidebar.vue                  |  22 ++-
 src/components/Table.vue                    |   9 +-
 src/layouts/MainLayout.vue                  |  32 +--
 src/main.ts                                 |  10 +-
 src/router/index.ts                         |  22 ++-
 src/types/Evaluation.d.ts                   |   2 +-
 src/types/Measurement.d.ts                  |   4 +-
 src/types/Model.d.ts                        |   2 +-
 src/utils/api/brands.ts                     |   9 +-
 src/utils/api/databases.ts                  |   2 +-
 src/utils/api/measurement.ts                |   0
 src/utils/api/models.ts                     |   2 +-
 src/views/{ => auth}/AuthVerifyView.vue     |   0
 src/views/{ => auth}/LoginView.vue          |   0
 src/views/{ => brands}/BrandsView.vue       |  64 +-----
 src/views/brands/EditBrandView.vue          |  72 +++++++
 src/views/brands/NewBrandView.vue           |  72 +++++++
 src/views/{ => databases}/DatabasesView.vue |   0
 src/views/{ => models}/ModelsView.vue       |  66 +------
 src/views/models/NewModelView.vue           | 206 ++++++++++++++++++++
 24 files changed, 493 insertions(+), 159 deletions(-)
 create mode 100644 src/components/Dropzone.vue
 create mode 100644 src/components/Separator.vue
 create mode 100644 src/utils/api/measurement.ts
 rename src/views/{ => auth}/AuthVerifyView.vue (100%)
 rename src/views/{ => auth}/LoginView.vue (100%)
 rename src/views/{ => brands}/BrandsView.vue (54%)
 create mode 100644 src/views/brands/EditBrandView.vue
 create mode 100644 src/views/brands/NewBrandView.vue
 rename src/views/{ => databases}/DatabasesView.vue (100%)
 rename src/views/{ => models}/ModelsView.vue (52%)
 create mode 100644 src/views/models/NewModelView.vue

diff --git a/src/assets/main.css b/src/assets/main.css
index df972ba..ce70078 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -7,3 +7,16 @@ body,
   width: 100%;
   font-family: 'Inter';
 }
+
+::-webkit-scrollbar {
+  width: 20px; /* Total width including `border-width` of scrollbar thumb */
+  height: 0;
+}
+::-webkit-scrollbar-thumb {
+  height: 1em;
+  border: 6px solid rgba(0, 0, 0, 0); /* Transparent border together with `background-clip: padding-box` does the trick */
+  background-clip: padding-box;
+  -webkit-border-radius: 1em;
+  background-color: theme('colors.gray.600');
+  -webkit-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.025);
+}
diff --git a/src/components/Dropzone.vue b/src/components/Dropzone.vue
new file mode 100644
index 0000000..81368c7
--- /dev/null
+++ b/src/components/Dropzone.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const files = defineModel<File[]>()
+const fileInputKey = ref(0)
+
+const removeFile = (file: File) => {
+  files.value = files.value?.filter((f) => f !== file)
+  // Reset the file input to clear its internal state
+  fileInputKey.value++
+}
+</script>
+
+<template>
+  <div class="flex flex-col gap-4">
+    <fwb-file-input :key="fileInputKey" v-model="files" dropzone multiple> </fwb-file-input>
+    <div v-if="files && files.length !== 0" class="p-2 flex flex-col gap-4">
+      <div class="flex justify-between items-center" v-for="(file, index) in files" :key="index">
+        <div class="flex items-center gap-2">
+          <Icon icon="flowbite:file-outline" width="16" height="16" class="text-gray-400" />
+          <span>{{ file.name }}</span>
+        </div>
+        <Icon
+          icon="flowbite:x-outline"
+          width="16"
+          height="16"
+          class="text-gray-400 cursor-pointer"
+          @click="removeFile(file)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Loader.vue b/src/components/Loader.vue
index 583ab3b..9c5196b 100644
--- a/src/components/Loader.vue
+++ b/src/components/Loader.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="flex justify-center items-center h-full w-full">
+  <div class="flex flex-col gap-2 justify-center items-center h-full w-full">
     <fwb-spinner size="12" />
+    <p class="text-sm text-gray-400">
+      <slot name="text" />
+    </p>
   </div>
 </template>
diff --git a/src/components/Separator.vue b/src/components/Separator.vue
new file mode 100644
index 0000000..85cc36e
--- /dev/null
+++ b/src/components/Separator.vue
@@ -0,0 +1,5 @@
+<template>
+  <div class="p-2">
+    <hr class="h-px border-0 bg-gray-600" />
+  </div>
+</template>
diff --git a/src/components/Sidebar.vue b/src/components/Sidebar.vue
index 321e7e7..0b35b03 100644
--- a/src/components/Sidebar.vue
+++ b/src/components/Sidebar.vue
@@ -16,10 +16,16 @@ const logout = () => {
     id="main-sidebar"
     class="w-72 fixed top-0 left-0 z-40 border-solid border-r border-gray-700 transition-transform -translate-x-full sm:translate-x-0"
   >
-    <fwb-sidebar-logo name="Squiglink Studio" logo="/src/assets/logo.svg" tag="router-link" />
+    <fwb-sidebar-logo
+      name="Squiglink Studio"
+      logo="/src/assets/logo.svg"
+      tag="router-link"
+      :to="{ name: 'home' }"
+    />
 
     <fwb-sidebar-item
-      to="/databases"
+      tag="router-link"
+      :to="{ name: 'databases' }"
       :class="{ 'bg-gray-700': $route.path === '/databases' || $route.path === '/' }"
     >
       <template #icon>
@@ -29,7 +35,11 @@ const logout = () => {
       <template #default>Databases</template>
     </fwb-sidebar-item>
 
-    <fwb-sidebar-item to="/brands" :class="{ 'bg-gray-700': $route.path === '/brands' }">
+    <fwb-sidebar-item
+      tag="router-link"
+      :to="{ name: 'brands' }"
+      :class="{ 'bg-gray-700': $route.path === '/brands' }"
+    >
       <template #icon>
         <Icon icon="flowbite:grid-solid" width="24" height="24" class="text-gray-400" />
       </template>
@@ -37,7 +47,11 @@ const logout = () => {
       <template #default>Brands</template>
     </fwb-sidebar-item>
 
-    <fwb-sidebar-item to="/models" :class="{ 'bg-gray-700': $route.path === '/models' }">
+    <fwb-sidebar-item
+      tag="router-link"
+      :to="{ name: 'models' }"
+      :class="{ 'bg-gray-700': $route.path === '/models' }"
+    >
       <template #icon>
         <Icon icon="flowbite:headphones-solid" width="24" height="24" class="text-gray-400" />
       </template>
diff --git a/src/components/Table.vue b/src/components/Table.vue
index ba6980f..e045df0 100644
--- a/src/components/Table.vue
+++ b/src/components/Table.vue
@@ -30,7 +30,14 @@ const selectedRows = ref([])
       </template>
     </TableActions>
 
-    <Loader v-if="loading" />
+    <div class="p-4 bg-gray-800 rounded-b-lg" v-if="loading">
+      <Loader>
+        <template #text>
+          <slot name="text">Fetching data...</slot>
+        </template>
+      </Loader>
+    </div>
+
     <div v-else>
       <fwb-table hoverable class="rounded-lg !rounded-t-none">
         <fwb-table-head>
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 599d07a..8d047ea 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,27 +1,37 @@
 <script setup lang="ts">
 import Sidebar from '@/components/Sidebar.vue'
-import { initFlowbite } from 'flowbite';
-import { onMounted } from 'vue';
+import { initFlowbite } from 'flowbite'
+import { onMounted } from 'vue'
 
 onMounted(() => {
-  initFlowbite();
-});
+  initFlowbite()
+})
 </script>
 
 <template>
-  <div class="dark bg-gray-900">
+  <div class="dark dark:text-white bg-gray-900">
     <Sidebar />
 
     <div class="sm:ml-72 h-screen overflow-x-auto p-4 lg:p-6 flex flex-col gap-4">
       <div class="flex gap-4 items-center content-center">
-        <fwb-button color="alternative" data-drawer-target="main-sidebar"
-                    data-drawer-toggle="main-sidebar" aria-controls="main-sidebar"
-                    class="inline-flex items-center p-2 rounded-lg sm:hidden">
+        <fwb-button
+          color="alternative"
+          data-drawer-target="main-sidebar"
+          data-drawer-toggle="main-sidebar"
+          aria-controls="main-sidebar"
+          class="inline-flex items-center p-2 rounded-lg sm:hidden"
+        >
           <Icon icon="flowbite:bars-from-left-outline" width="24" height="24" />
         </fwb-button>
-        <h1 class="text-3xl text-white">
-          <slot name="header-text" />
-        </h1>
+        <div class="w-full flex items-center justify-between">
+          <h1 class="text-3xl text-white flex-3">
+            <slot name="header-text" />
+          </h1>
+
+          <div class="w-full grid grid-cols-2 gap-3 flex-1">
+            <slot name="header-buttons" />
+          </div>
+        </div>
       </div>
 
       <slot name="content" />
diff --git a/src/main.ts b/src/main.ts
index 97dd8b0..d5a1aa7 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -14,6 +14,7 @@ import {
   FwbButton,
   FwbButtonGroup,
   FwbCard,
+  FwbFileInput,
   FwbHeading,
   FwbInput,
   FwbPagination,
@@ -42,6 +43,7 @@ const components = {
   FwbButton,
   FwbButtonGroup,
   FwbCard,
+  FwbFileInput,
   FwbHeading,
   FwbInput,
   FwbPagination,
@@ -68,7 +70,13 @@ app.use(createPinia())
 app.use(router)
 app.use(Vue3Toastify, {
   autoClose: 3000,
-  // ...
+  position: 'top-center',
+  theme: 'dark',
+  multiple: false,
+  transition: 'slide',
+  clearOnUrlChange: false,
+  pauseOnHover: true,
+  pauseOnFocusLoss: false,
 } as ToastContainerOptions)
 
 app.mount('#app')
diff --git a/src/router/index.ts b/src/router/index.ts
index a3af3bb..e5c6235 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -6,32 +6,42 @@ const router = createRouter({
     {
       path: '/',
       name: 'home',
-      component: () => import('../views/DatabasesView.vue'),
+      component: () => import('../views/databases/DatabasesView.vue'),
     },
     {
       path: '/databases',
       name: 'databases',
-      component: () => import('../views/DatabasesView.vue'),
+      component: () => import('../views/databases/DatabasesView.vue'),
     },
     {
       path: '/brands',
       name: 'brands',
-      component: () => import('../views/BrandsView.vue'),
+      component: () => import('../views/brands/BrandsView.vue'),
+    },
+    {
+      path: '/brands/new',
+      name: 'newBrand',
+      component: () => import('../views/brands/NewBrandView.vue'),
     },
     {
       path: '/models',
       name: 'models',
-      component: () => import('../views/ModelsView.vue'),
+      component: () => import('../views/models/ModelsView.vue'),
+    },
+    {
+      path: '/models/new',
+      name: 'newModel',
+      component: () => import('../views/models/NewModelView.vue'),
     },
     {
       path: '/login',
       name: 'login',
-      component: () => import('../views/LoginView.vue'),
+      component: () => import('../views/auth/LoginView.vue'),
     },
     {
       path: '/auth/verify',
       name: 'authVerify',
-      component: () => import('../views/AuthVerifyView.vue'),
+      component: () => import('../views/auth/AuthVerifyView.vue'),
     },
     {
       path: '/:pathMatch(.*)*',
diff --git a/src/types/Evaluation.d.ts b/src/types/Evaluation.d.ts
index 8cb72c7..9d25be4 100644
--- a/src/types/Evaluation.d.ts
+++ b/src/types/Evaluation.d.ts
@@ -2,5 +2,5 @@ interface Evaluation {
   reviewUrl: string | null
   reviewScore: number | null
   shopUrl: string | null
-  measurements?: Measurement[]
+  errors: string[]
 }
diff --git a/src/types/Measurement.d.ts b/src/types/Measurement.d.ts
index 2527194..93c9bf7 100644
--- a/src/types/Measurement.d.ts
+++ b/src/types/Measurement.d.ts
@@ -1,6 +1,8 @@
 interface Measurement {
   label: string
   type: string
-  file: string
+  databaseId: string
+  leftChannel: File[]
+  rightChannel: File[]
   errors: string[]
 }
diff --git a/src/types/Model.d.ts b/src/types/Model.d.ts
index 2bbdd01..0e258a7 100644
--- a/src/types/Model.d.ts
+++ b/src/types/Model.d.ts
@@ -1,6 +1,6 @@
 interface Model {
   name: string
-  brandId: number
+  brandId: string
   evaluation?: Evaluation
   errors: string[]
 }
diff --git a/src/utils/api/brands.ts b/src/utils/api/brands.ts
index 3a477b6..6ec9236 100644
--- a/src/utils/api/brands.ts
+++ b/src/utils/api/brands.ts
@@ -2,9 +2,9 @@ import { apiClient } from '../ApiClient'
 import type { APIPage } from '../ApiClient'
 
 export type APIBrand = {
-  id?: number
+  id: string
   name: string
-  model_count?: number
+  model_count: number
 }
 
 export type APIBrands = APIPage<APIBrand>
@@ -19,4 +19,9 @@ export const brandsApi = {
     const response = await apiClient.post('/brands/new', brand)
     return response.data as APIBrand
   },
+
+  async edit(brand: APIBrand) {
+    const response = await apiClient.patch(`/brands/${brand.id}`, brand)
+    return response.data as APIBrand
+  },
 }
diff --git a/src/utils/api/databases.ts b/src/utils/api/databases.ts
index d80913a..0536db2 100644
--- a/src/utils/api/databases.ts
+++ b/src/utils/api/databases.ts
@@ -2,7 +2,7 @@ import { apiClient } from '../ApiClient'
 import type { APIPage } from '../ApiClient'
 
 export type APIDatabase = {
-  id: number
+  id: string
   kind: string
   path: string
 }
diff --git a/src/utils/api/measurement.ts b/src/utils/api/measurement.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/utils/api/models.ts b/src/utils/api/models.ts
index 07c6ac3..49a2168 100644
--- a/src/utils/api/models.ts
+++ b/src/utils/api/models.ts
@@ -3,7 +3,7 @@ import type { APIPage } from '../ApiClient'
 import type { APIBrand } from './brands'
 
 export type APIModel = {
-  id: number
+  id: string
   name: string
   shop_url: string
   brand: APIBrand
diff --git a/src/views/AuthVerifyView.vue b/src/views/auth/AuthVerifyView.vue
similarity index 100%
rename from src/views/AuthVerifyView.vue
rename to src/views/auth/AuthVerifyView.vue
diff --git a/src/views/LoginView.vue b/src/views/auth/LoginView.vue
similarity index 100%
rename from src/views/LoginView.vue
rename to src/views/auth/LoginView.vue
diff --git a/src/views/BrandsView.vue b/src/views/brands/BrandsView.vue
similarity index 54%
rename from src/views/BrandsView.vue
rename to src/views/brands/BrandsView.vue
index 52f3ddc..b5192c7 100644
--- a/src/views/BrandsView.vue
+++ b/src/views/brands/BrandsView.vue
@@ -8,8 +8,6 @@ import type { APIBrand } from '@/utils/api/brands'
 import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
 import NetworkError from '@/components/NetworkError.vue'
-import SideModal from '@/components/SideModal.vue'
-import Form from '@/components/Form.vue'
 
 const route = useRoute()
 
@@ -20,19 +18,12 @@ const tableColumns = [
   { name: 'Last modified', key: 'updated_at' },
 ]
 
-const initialBrandFormState: Brand = {
-  name: '',
-  errors: [],
-}
-
 const brands = ref([] as APIBrand[])
 const pageCount = ref(1)
 const page = computed(() => (route.query.page ? Number(route.query.page) : 1))
 const searchQuery = computed(() => (route.query.query ? String(route.query.query) : ''))
 const loading = ref(false)
 const fetchFailed = ref(false)
-const createModalShown = ref(false)
-const newBrandForm = ref<Brand>(initialBrandFormState)
 
 const fetchBrands = async () => {
   loading.value = true
@@ -48,33 +39,6 @@ const fetchBrands = async () => {
   }
 }
 
-const convertToAPIBrand = (form: Brand): APIBrand => ({
-  name: form.name,
-})
-
-const createBrand = async () => {
-  loading.value = true
-  try {
-    const apiBrand: APIBrand = convertToAPIBrand(newBrandForm.value)
-    await brandsApi.create(apiBrand)
-
-    newBrandForm.value = initialBrandFormState
-    createModalShown.value = false
-    fetchBrands()
-  } catch (error) {
-    console.error(error)
-    loading.value = false
-  }
-}
-
-const openCreateModal = () => {
-  createModalShown.value = true
-}
-
-const closeCreateModal = () => {
-  createModalShown.value = false
-}
-
 watch([page, searchQuery], () => {
   fetchBrands()
 })
@@ -101,7 +65,7 @@ onMounted(() => {
         :page-count="pageCount"
       >
         <template #actions>
-          <fwb-button color="default" size="md" @click="openCreateModal">
+          <fwb-button color="default" size="md" tag="router-link" :href="{ name: 'newBrand' }">
             Add new brand
             <template #suffix>
               <Icon icon="flowbite:plus-outline" width="16" height="16" />
@@ -109,32 +73,6 @@ onMounted(() => {
           </fwb-button>
         </template>
       </Table>
-
-      <SideModal v-model="createModalShown">
-        <template #header-text>Add new brand</template>
-
-        <template #content>
-          <Form v-model="newBrandForm.errors">
-            <template #content>
-              <fwb-input
-                label="Name"
-                label-class="text-white"
-                placeholder="(required)"
-                size="md"
-                v-model="newBrandForm.name"
-                required
-              />
-            </template>
-
-            <template #footer>
-              <fwb-button color="alternative" size="md" @click="closeCreateModal">
-                Cancel
-              </fwb-button>
-              <fwb-button color="default" size="md" @click="createBrand">Save</fwb-button>
-            </template>
-          </Form>
-        </template>
-      </SideModal>
     </template>
   </MainLayout>
 </template>
diff --git a/src/views/brands/EditBrandView.vue b/src/views/brands/EditBrandView.vue
new file mode 100644
index 0000000..07a46a7
--- /dev/null
+++ b/src/views/brands/EditBrandView.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { brandsApi } from '@/utils/api/brands'
+import { ref } from 'vue'
+import { toast } from 'vue3-toastify'
+import { useRouter } from 'vue-router'
+
+import type { APIBrand } from '@/utils/api/brands'
+
+import MainLayout from '@/layouts/MainLayout.vue'
+import Form from '@/components/Form.vue'
+
+const router = useRouter()
+
+const initialBrandFormState: Brand = {
+  name: '',
+  errors: [],
+}
+
+const loading = ref(false)
+const newBrandForm = ref<Brand>(initialBrandFormState)
+
+const convertToAPIBrand = (form: Brand): APIBrand => ({
+  name: form.name,
+})
+
+const createBrand = async () => {
+  loading.value = true
+  try {
+    const apiBrand: APIBrand = convertToAPIBrand(newBrandForm.value)
+    await brandsApi.create(apiBrand)
+
+    toast.success('Brand created successfully!')
+
+    router.push({ name: 'brands' })
+  } catch (error) {
+    console.error(error)
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <MainLayout>
+    <template #header-text>Add new brand</template>
+    <template #header-buttons>
+      <fwb-button
+        color="alternative"
+        size="md"
+        tag="router-link"
+        :href="{ name: 'brands' }"
+        class="flex justify-center"
+      >
+        Cancel
+      </fwb-button>
+      <fwb-button color="default" size="md" @click="createBrand">Save</fwb-button>
+    </template>
+
+    <template #content>
+      <Form v-model="newBrandForm.errors" class="w-1/4">
+        <template #content>
+          <fwb-input
+            label="Name"
+            placeholder="(required)"
+            size="md"
+            v-model="newBrandForm.name"
+            required
+          />
+        </template>
+      </Form>
+    </template>
+  </MainLayout>
+</template>
diff --git a/src/views/brands/NewBrandView.vue b/src/views/brands/NewBrandView.vue
new file mode 100644
index 0000000..07a46a7
--- /dev/null
+++ b/src/views/brands/NewBrandView.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { brandsApi } from '@/utils/api/brands'
+import { ref } from 'vue'
+import { toast } from 'vue3-toastify'
+import { useRouter } from 'vue-router'
+
+import type { APIBrand } from '@/utils/api/brands'
+
+import MainLayout from '@/layouts/MainLayout.vue'
+import Form from '@/components/Form.vue'
+
+const router = useRouter()
+
+const initialBrandFormState: Brand = {
+  name: '',
+  errors: [],
+}
+
+const loading = ref(false)
+const newBrandForm = ref<Brand>(initialBrandFormState)
+
+const convertToAPIBrand = (form: Brand): APIBrand => ({
+  name: form.name,
+})
+
+const createBrand = async () => {
+  loading.value = true
+  try {
+    const apiBrand: APIBrand = convertToAPIBrand(newBrandForm.value)
+    await brandsApi.create(apiBrand)
+
+    toast.success('Brand created successfully!')
+
+    router.push({ name: 'brands' })
+  } catch (error) {
+    console.error(error)
+    loading.value = false
+  }
+}
+</script>
+
+<template>
+  <MainLayout>
+    <template #header-text>Add new brand</template>
+    <template #header-buttons>
+      <fwb-button
+        color="alternative"
+        size="md"
+        tag="router-link"
+        :href="{ name: 'brands' }"
+        class="flex justify-center"
+      >
+        Cancel
+      </fwb-button>
+      <fwb-button color="default" size="md" @click="createBrand">Save</fwb-button>
+    </template>
+
+    <template #content>
+      <Form v-model="newBrandForm.errors" class="w-1/4">
+        <template #content>
+          <fwb-input
+            label="Name"
+            placeholder="(required)"
+            size="md"
+            v-model="newBrandForm.name"
+            required
+          />
+        </template>
+      </Form>
+    </template>
+  </MainLayout>
+</template>
diff --git a/src/views/DatabasesView.vue b/src/views/databases/DatabasesView.vue
similarity index 100%
rename from src/views/DatabasesView.vue
rename to src/views/databases/DatabasesView.vue
diff --git a/src/views/ModelsView.vue b/src/views/models/ModelsView.vue
similarity index 52%
rename from src/views/ModelsView.vue
rename to src/views/models/ModelsView.vue
index b68d015..7fe1caf 100644
--- a/src/views/ModelsView.vue
+++ b/src/views/models/ModelsView.vue
@@ -8,8 +8,6 @@ import type { APIModel } from '@/utils/api/models'
 import MainLayout from '@/layouts/MainLayout.vue'
 import Table from '@/components/Table.vue'
 import NetworkError from '@/components/NetworkError.vue'
-import SideModal from '@/components/SideModal.vue'
-import Form from '@/components/Form.vue'
 
 const route = useRoute()
 
@@ -26,19 +24,6 @@ const searchQuery = computed(() => (route.query.query ? String(route.query.query
 const pageCount = ref(1)
 const loading = ref(false)
 const fetchFailed = ref(false)
-const createModalShown = ref(false)
-const brands = ref([{ value: 1, name: '123' }])
-const newModel = ref<Model>({
-  name: '',
-  brandId: 0,
-  evaluation: {
-    shopUrl: null,
-    reviewUrl: null,
-    reviewScore: null,
-    measurements: [],
-  },
-  errors: [],
-})
 
 const fetchModels = async () => {
   loading.value = true
@@ -54,14 +39,6 @@ const fetchModels = async () => {
   }
 }
 
-const openCreateModal = () => {
-  createModalShown.value = true
-}
-
-const closeCreateModal = () => {
-  createModalShown.value = false
-}
-
 watch([page, searchQuery], () => {
   fetchModels()
 })
@@ -94,7 +71,7 @@ onMounted(() => {
               <Icon icon="flowbite:minus-outline" width="24" height="24" />
             </template>
           </fwb-button> -->
-          <fwb-button color="default" size="md" @click="openCreateModal">
+          <fwb-button color="default" size="md" tag="router-link" :href="{ name: 'newModel' }">
             Add new model
             <template #suffix>
               <Icon icon="flowbite:plus-outline" width="16" height="16" />
@@ -102,47 +79,6 @@ onMounted(() => {
           </fwb-button>
         </template>
       </Table>
-
-      <SideModal v-model="createModalShown">
-        <template #header-text>Add new model</template>
-
-        <template #content>
-          <Form v-model="newModel.errors">
-            <template #content>
-              <fwb-heading tag="h6" class="font-normal">Model</fwb-heading>
-              <fwb-input label="Name" placeholder="(required)" size="md" v-model="newModel.name" />
-              <fwb-select v-model="newModel.brandId" :options="brands" label="Brand" />
-
-              <fwb-heading tag="h6" class="font-normal">Evaluation</fwb-heading>
-              <fwb-input
-                label="Review URL"
-                placeholder="(optional)"
-                size="md"
-                v-model="newModel.evaluation!.reviewUrl"
-              />
-              <fwb-input
-                label="Review score"
-                placeholder="(optional)"
-                size="md"
-                v-model="newModel.evaluation!.reviewScore"
-              />
-              <fwb-input
-                label="Shop URL"
-                placeholder="(optional)"
-                size="md"
-                v-model="newModel.evaluation!.shopUrl"
-              />
-            </template>
-
-            <template #footer>
-              <fwb-button color="alternative" size="md" @click="closeCreateModal"
-                >Cancel</fwb-button
-              >
-              <fwb-button color="default" size="md">Save</fwb-button>
-            </template>
-          </Form>
-        </template>
-      </SideModal>
     </template>
   </MainLayout>
 </template>
diff --git a/src/views/models/NewModelView.vue b/src/views/models/NewModelView.vue
new file mode 100644
index 0000000..45edaba
--- /dev/null
+++ b/src/views/models/NewModelView.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { toast } from 'vue3-toastify'
+import { useRouter } from 'vue-router'
+
+import MainLayout from '@/layouts/MainLayout.vue'
+import Form from '@/components/Form.vue'
+import SideModal from '@/components/SideModal.vue'
+import Separator from '@/components/Separator.vue'
+import Dropzone from '@/components/Dropzone.vue'
+import { databasesApi } from '@/utils/api/databases'
+import { brandsApi } from '@/utils/api/brands'
+import { modelsApi } from '@/utils/api/models'
+import type { APIModel } from '@/utils/api/models'
+import NetworkError from '@/components/NetworkError.vue'
+
+const addMeasurementModalShown = ref(false)
+const loading = ref(false)
+const fetchFailed = ref(false)
+
+const openAddMeasurementModal = () => {
+  addMeasurementModalShown.value = true
+}
+
+const closeAddMeasurementModal = () => {
+  addMeasurementModalShown.value = false
+}
+
+const initialModelFormState: Model = {
+  name: '',
+  brandId: '',
+  errors: [],
+}
+
+const initialMeasurementFormState: Measurement = {
+  label: '',
+  type: '',
+  databaseId: '',
+  leftChannel: [],
+  rightChannel: [],
+  errors: [],
+}
+
+const initialEvaluationFormState: Evaluation = {
+  reviewUrl: null,
+  reviewScore: null,
+  shopUrl: null,
+  errors: [],
+}
+
+const newModelForm = ref<Model>(initialModelFormState)
+const newMeasurement = ref<Measurement>(initialMeasurementFormState)
+const newEvaluation = ref<Evaluation>(initialEvaluationFormState)
+
+const measurementTypes = [
+  { name: 'Frequency response', value: 'frequency_response' },
+  { name: 'Harmonic distortion', value: 'harmonic_distortion' },
+  { name: 'Impedance', value: 'impedance' },
+  { name: 'Sound isolation', value: 'sound_isolation' },
+]
+
+const databases = ref([] as { name: string; value: string }[])
+const brands = ref([] as { name: string; value: string }[])
+
+const fetchBrands = async () => {
+  try {
+    loading.value = true
+    const response = await brandsApi.all(1, '')
+    brands.value.push(...response.page.map((brand) => ({ name: brand.name, value: brand.id })))
+
+    if (response.page_count > 1) {
+      for (let i = 2; i <= response.page_count; i++) {
+        const pageResponse = await brandsApi.all(i, '')
+        brands.value.push(
+          ...pageResponse.page.map((brand) => ({ name: brand.name, value: brand.id })),
+        )
+      }
+    }
+  } catch (error) {
+    console.error(error)
+    fetchFailed.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+const fetchDatabases = async () => {
+  try {
+    loading.value = true
+    const response = await databasesApi.all(1, '')
+    databases.value.push(
+      ...response.page.map((database) => ({
+        name: `${database.kind} (${database.path})`,
+        value: database.id,
+      })),
+    )
+
+    if (response.page_count > 1) {
+      for (let i = 2; i <= response.page_count; i++) {
+        const pageResponse = await databasesApi.all(i, '')
+        databases.value.push(
+          ...pageResponse.page.map((database) => ({
+            name: `${database.kind} (${database.path})`,
+            value: database.id,
+          })),
+        )
+      }
+    }
+  } catch (error) {
+    console.error(error)
+    fetchFailed.value = true
+  } finally {
+    loading.value = false
+  }
+}
+
+const convertToAPIModel = (form: Model): APIModel => ({
+  name: form.name,
+  brandId: form.brandId,
+})
+
+const createModel = async () => {
+  // loading.value = true
+  // try {
+  //   const apiModel: APIModel = convertToAPIModel(newModelForm.value)
+  //   await modelsApi.create(apiModel)
+  // }
+}
+
+onMounted(() => {
+  fetchBrands()
+  fetchDatabases()
+})
+</script>
+
+<template>
+  <MainLayout>
+    <template #header-text v-if="!fetchFailed">Add new model</template>
+    <template #header-buttons v-if="!fetchFailed">
+      <fwb-button
+        color="alternative"
+        size="md"
+        tag="router-link"
+        :href="{ name: 'models' }"
+        class="flex justify-center"
+      >
+        Cancel
+      </fwb-button>
+      <fwb-button color="default" size="md" @click="createModel">Save</fwb-button>
+    </template>
+
+    <template #content>
+      <NetworkError v-if="fetchFailed" />
+      <div v-else class="grid grid-cols-4">
+        <Form v-model="newModelForm.errors" class="col-span-3">
+          <template #content>
+            <fwb-select v-model="newModelForm.brandId" :options="brands" label="Brand" />
+            <fwb-input
+              label="Name"
+              name="name"
+              placeholder="(required)"
+              size="md"
+              v-model="newModelForm.name"
+              required
+            />
+          </template>
+        </Form>
+      </div>
+
+      <SideModal v-model="addMeasurementModalShown">
+        <template #header-text>Add new measurement</template>
+
+        <template #content>
+          <Form v-model="newMeasurement.errors">
+            <template #content>
+              <fwb-input
+                label="Label"
+                placeholder="Sample 1"
+                size="md"
+                v-model="newMeasurement.label"
+              />
+              <fwb-select v-model="newMeasurement.type" :options="measurementTypes" label="Type" />
+
+              <Separator />
+
+              <fwb-heading tag="h6" class="font-normal">Left channel</fwb-heading>
+              <Dropzone v-model="newMeasurement.leftChannel" />
+
+              <Separator />
+
+              <fwb-heading tag="h6" class="font-normal">Right channel</fwb-heading>
+              <Dropzone v-model="newMeasurement.rightChannel" />
+            </template>
+
+            <template #footer>
+              <fwb-button color="alternative" size="md" @click="closeAddMeasurementModal">
+                Cancel
+              </fwb-button>
+              <fwb-button color="default" size="md">Save</fwb-button>
+            </template>
+          </Form>
+        </template>
+      </SideModal>
+    </template>
+  </MainLayout>
+</template>