From 13328aeec38cecfdc24bf859978c41c67bf0b303 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Wed, 29 Oct 2025 20:57:34 +0300
Subject: [PATCH 01/12] styles added

---
 src/styles/styles.css | 31 +++++++++++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/src/styles/styles.css b/src/styles/styles.css
index 8219206..67d9708 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -2,6 +2,10 @@
   margin-top: 10px;
 }
 
+.mt-20 {
+  margin-top: 20px;
+}
+
 .mb-10 {
   margin-bottom: 10px;
 }
@@ -166,3 +170,30 @@ body,
   max-height: 70vh;
   object-fit: contain;
 }
+
+.router-link-button{
+  color: inherit;
+  text-decoration: none;
+}
+
+.label-container {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+}
+
+.label-column {
+  display: flex;
+  flex-direction: column;
+}
+
+.label-row {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.label-preview {
+  justify-content: center;
+  margin-bottom: 20px;
+}

From 30c42324068a7d586c35f8920abe6e4ce34797db Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Wed, 29 Oct 2025 20:58:02 +0300
Subject: [PATCH 02/12] post requests fixed

---
 src/services/apiClient.js | 52 +++++++++++++++++++++------------------
 1 file changed, 28 insertions(+), 24 deletions(-)

diff --git a/src/services/apiClient.js b/src/services/apiClient.js
index 60d5d46..7bc1f10 100644
--- a/src/services/apiClient.js
+++ b/src/services/apiClient.js
@@ -6,23 +6,23 @@ let isRefreshing = false
 let refreshPromise = null
 
 function createConfig(options = {}) {
-  const authStore = useAuthStore()
+  const token = localStorage.getItem('accessToken');
   const headers = {
     'Content-Type': 'application/json',
     ...options.headers,
-  }
+  };
 
-  if (authStore.accessToken) {
-    headers['Authorization'] = `Bearer ${authStore.accessToken}`
+  if (token) {
+    headers['Authorization'] = `Bearer ${token}`;
   }
 
   return {
     headers,
-    credentials: 'include',
     ...options,
-  }
+  };
 }
 
+
 async function refreshAccessToken() {
   const authStore = useAuthStore()
 
@@ -53,7 +53,8 @@ async function refreshAccessToken() {
     })
 
     .catch((error) => {
-      throw error
+      console.error('Refresh error:', error)
+      throw new Error('REFRESH_FAILED')
     })
 
     .finally(() => {
@@ -66,29 +67,32 @@ async function refreshAccessToken() {
 
 async function request(url, options = {}, isRetry = false) {
   const config = createConfig(options)
-
   const response = await fetch(`${BASE_URL}${url}`, config)
 
   if (response.status === 401 && !isRetry) {
     try {
       const data = await refreshAccessToken()
-
       const token = data.access_token
-      if (!token) {
-        throw new Error('Refresh response did not contain access_token')
-      }
+      if (!token) throw new Error('Refresh response did not contain access_token')
+
 
       const newOptions = {
         ...options,
         headers: {
           ...options.headers,
-          'Authorization': `Bearer ${token}`,
+          Authorization: `Bearer ${token}`,
         },
       }
+
       return await request(url, newOptions, true)
     } catch (e) {
-      const authStore = useAuthStore()
-      authStore.forceLogout()
+      if (e.message === 'REFRESH_FAILED') {
+        const authStore = useAuthStore()
+        authStore.forceLogout()
+        console.warn('Force logout (refresh failed)', url)
+      } else {
+        console.error('Unexpected error during refresh', e)
+      }
       throw e
     }
   }
@@ -100,9 +104,15 @@ async function request(url, options = {}, isRetry = false) {
     } catch {
       errorData = {}
     }
-    throw new Error(errorData.message || `HTTP Error: ${response.status}`)
+
+    return {
+      status: response.status,
+      ok: false,
+      error: errorData.message || `HTTP Error: ${response.status}`,
+    }
   }
 
+
   let data = null
   const contentType = response.headers.get('content-type')
   if (contentType?.includes('application/json')) {
@@ -113,11 +123,7 @@ async function request(url, options = {}, isRetry = false) {
     }
   }
 
-  return {
-    status: response.status,
-    ok: response.ok,
-    data,
-  }
+  return { status: response.status, ok: response.ok, data }
 }
 
 export const apiClient = {
@@ -132,9 +138,7 @@ export const apiClient = {
     return request(url, {
       method: 'POST',
       body: isFormData ? data : JSON.stringify(data),
-      headers: isFormData
-        ? {}
-        : { 'Content-Type': 'application/json' }
+      // headers: isFormData ? {} : { 'Content-Type': 'application/json' }
     })
   },
   put: (url, data) => request(url, {

From 53558c4b46dd76e59ddf67eaa00d00ce06b366bb Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Wed, 29 Oct 2025 20:58:16 +0300
Subject: [PATCH 03/12] fix

---
 src/stores/authStore.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index 7cdfc82..cede1f1 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { computed, ref } from 'vue'
+import { computed, nextTick, ref } from 'vue'
 import { apiClient } from '@/services/apiClient'
 import router from '@/router/index.js'
 
@@ -54,6 +54,7 @@ export const useAuthStore = defineStore('auth', () => {
     try {
       const response = await apiClient.post('/user/auth/login', { email, password })
       setToken(response.data.access_token)
+      await nextTick()
       router.push({ name: 'collection'})
     } catch (error) {
       console.error('Login error:', error)

From c74032d1d047fc862f197a62757c795af1e96a2b Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Wed, 29 Oct 2025 20:58:47 +0300
Subject: [PATCH 04/12] labels added

---
 src/components/LabelDotTemplate.vue           |  27 ++++
 src/components/LabelTemplate.vue              |  45 ++++++
 src/components/ManageLabels.vue               |   7 +
 src/components/Navbar/NavBar.vue              |   3 +-
 src/router/index.js                           |   6 +
 src/stores/labelsStore.js                     | 107 +++++++++++++
 src/views/CollectionView.vue                  |  26 +++-
 .../CollectionView/CollectionMerchCard.vue    |  36 ++++-
 .../CollectionView/CollectionToolbar.vue      |  67 ++++----
 src/views/DetailsView.vue                     |   2 +
 src/views/DetailsView/AttachLabel.vue         | 147 ++++++++++++++++++
 src/views/LabelsView.vue                      |  78 ++++++++++
 src/views/LabelsView/LabelCard.vue            | 143 +++++++++++++++++
 src/views/LabelsView/LabelForm.vue            |  36 +++++
 src/views/PersonalView/PersonalMainBlock.vue  |   9 +-
 .../PersonalView/PersonalSessionBlock.vue     |   7 +-
 16 files changed, 702 insertions(+), 44 deletions(-)
 create mode 100644 src/components/LabelDotTemplate.vue
 create mode 100644 src/components/LabelTemplate.vue
 create mode 100644 src/components/ManageLabels.vue
 create mode 100644 src/stores/labelsStore.js
 create mode 100644 src/views/DetailsView/AttachLabel.vue
 create mode 100644 src/views/LabelsView.vue
 create mode 100644 src/views/LabelsView/LabelCard.vue
 create mode 100644 src/views/LabelsView/LabelForm.vue

diff --git a/src/components/LabelDotTemplate.vue b/src/components/LabelDotTemplate.vue
new file mode 100644
index 0000000..c37db3f
--- /dev/null
+++ b/src/components/LabelDotTemplate.vue
@@ -0,0 +1,27 @@
+<script setup>
+const props = defineProps({
+  color: {
+    type: String,
+    default: '#EF2D56FF'
+  },
+  bg_color: {
+    type: String,
+    default: '#FFFFFF'
+  }
+})
+</script>
+
+<template>
+  <span class="color-dot" :style="{ borderColor: color, backgroundColor: bg_color }"></span>
+</template>
+
+<style scoped>
+.color-dot {
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  border: 1px solid; /* чтобы border-color работал */
+  vertical-align: middle;
+}
+</style>
diff --git a/src/components/LabelTemplate.vue b/src/components/LabelTemplate.vue
new file mode 100644
index 0000000..f26f669
--- /dev/null
+++ b/src/components/LabelTemplate.vue
@@ -0,0 +1,45 @@
+<script setup>
+const props = defineProps({
+  text: {
+    type: String,
+    required: true,
+    default: 'label'
+  },
+  color: {
+    type: String,
+    default: '#EF2D56FF'
+  },
+  bg_color: {
+    type: String,
+    default: '#FFFFFF'
+  }
+})
+</script>
+
+<template>
+  <label class="custom_label"
+         :style="{color: color, backgroundColor: bg_color, borderColor: color}"
+  >
+    {{ text }}
+  </label>
+</template>
+
+<style scoped>
+.custom_label {
+  font-family: 'Heebo', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 500;
+  letter-spacing: 0.025rem;
+  font-style: normal;
+  text-transform: uppercase;
+  border-radius: 1.25rem;
+  -webkit-border-radius: 1.25rem;
+  -moz-border-radius: 1.25rem;
+  padding: 0.35rem 0.75rem;
+  border-style: solid;
+  border-width: 0.125rem;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  -box-shadow: none;
+}
+</style>
diff --git a/src/components/ManageLabels.vue b/src/components/ManageLabels.vue
new file mode 100644
index 0000000..6d57f82
--- /dev/null
+++ b/src/components/ManageLabels.vue
@@ -0,0 +1,7 @@
+<template>
+  <n-button type="primary">
+    <router-link :to="{ name: 'labels' }" class="router-link-button">
+      Manage labels
+    </router-link>
+  </n-button>
+</template>
diff --git a/src/components/Navbar/NavBar.vue b/src/components/Navbar/NavBar.vue
index d8774fb..c2fcb65 100644
--- a/src/components/Navbar/NavBar.vue
+++ b/src/components/Navbar/NavBar.vue
@@ -28,6 +28,7 @@ const authMenu = computed(() => {
   }
 
   return [
+    { label: 'Labels', key: 'labels' },
     { label: 'Personal', key: 'personal' },
   ]
 })
@@ -137,7 +138,7 @@ const renderLabel = (option) => {
   display: flex;
   align-items: center;
   margin-left: auto;
-  min-width: 150px;
+  min-width: 250px;
   padding-right: 16px;
   box-sizing: border-box;
 }
diff --git a/src/router/index.js b/src/router/index.js
index 53e4751..1a83844 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,6 +7,7 @@ import ParsersView from '@/views/ParsersView.vue'
 import PersonalView from '@/views/PersonalView.vue'
 import AddMerchView from '@/views/AddMerchView.vue'
 import DetailsView from '@/views/DetailsView.vue'
+import LabelsView from '@/views/LabelsView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -52,6 +53,11 @@ const router = createRouter({
       component: DetailsView,
       props: true,
     },
+    {
+      path: '/labels',
+      name: 'labels',
+      component: LabelsView,
+    },
   ],
 })
 
diff --git a/src/stores/labelsStore.js b/src/stores/labelsStore.js
new file mode 100644
index 0000000..968d3ff
--- /dev/null
+++ b/src/stores/labelsStore.js
@@ -0,0 +1,107 @@
+import { defineStore } from 'pinia'
+import { apiClient } from '@/services/apiClient.js'
+import { ref } from 'vue'
+
+function safeParseJSON(str, fallback = []) {
+  if (str === null || str === undefined || str === 'null' || str === '') {
+    return fallback
+  }
+  try {
+    const parsed = JSON.parse(str)
+    return Array.isArray(parsed) ? parsed : fallback
+  } catch (e) {
+    console.warn('Failed to parse localStorage item "labels", using fallback:', e)
+    return fallback
+  }
+}
+
+export const useLabelsStore = defineStore('labels', () => {
+  //state
+  const labels = ref(safeParseJSON(localStorage.getItem('labels'), []))
+
+  //getters
+
+  //action
+  const createLabel = async (newLabel) => {
+    try {
+      await apiClient.post('/merch/labels', newLabel)
+      await getLabels()
+    } catch (error) {
+      console.error('Failed to create label:', error)
+      throw error
+    }
+  }
+
+  const getLabels = async () => {
+    try {
+      const response = await apiClient.get('/merch/labels')
+      const labelList = Array.isArray(response.data) ? response.data : []
+      labels.value = labelList
+      localStorage.setItem('labels', JSON.stringify(labelList))
+    } catch (error) {
+      console.error('Failed to fetch labels:', error)
+      labels.value = []
+    }
+  }
+
+  const updateLabel = async (uuid, updatedData) => {
+    try {
+      await apiClient.put(`/merch/labels/${uuid}`, updatedData)
+      await getLabels()
+    } catch (error) {
+      console.error('Failed to update label:', error)
+      throw error
+    }
+  }
+
+  const deleteLabel = async (uuid) => {
+    try {
+      await apiClient.delete(`/merch/labels/${uuid}`)
+      await getLabels()
+    } catch (error) {
+      console.error('Failed to delete label:', error)
+      throw error
+    }
+  }
+
+  const attachLabel = async (merchUuid, labelUuid) => {
+    try {
+      const payload = { merch_uuid: merchUuid, label_uuid: labelUuid }
+      await apiClient.post('/merch/labels/attach', payload)
+    } catch (error) {
+      console.error('Failed to attach label:', error)
+      throw error
+    }
+  }
+
+  const detachLabel = async (merchUuid, labelUuid) => {
+    try {
+      const payload = { merch_uuid: merchUuid, label_uuid: labelUuid }
+      await apiClient.post('/merch/labels/detach', payload)
+    } catch (error) {
+      console.error('Failed to detach label:', error)
+      throw error
+    }
+  }
+
+  const getMerchLabels = async (merchUuid) => {
+    try {
+      const response = await apiClient.get(`/merch/labels/${merchUuid}`)
+      return response
+    } catch (error) {
+      console.error('Failed to get merch labels:', error)
+      throw error
+    }
+  }
+
+  return {
+    labels,
+    createLabel,
+    getLabels,
+    updateLabel,
+    deleteLabel,
+    attachLabel,
+    detachLabel,
+    getMerchLabels,
+  }
+})
diff --git a/src/views/CollectionView.vue b/src/views/CollectionView.vue
index d3fc1a5..52818c0 100644
--- a/src/views/CollectionView.vue
+++ b/src/views/CollectionView.vue
@@ -4,12 +4,14 @@ import CollectionMerchCard from '@/views/CollectionView/CollectionMerchCard.vue'
 import { computed, onMounted, ref } from 'vue'
 import { useMerchApi } from '@/api/merch.js'
 import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
+import { useLabelsStore } from '@/stores/labelsStore'
 
 const merchList = ref(null)
 const loading = ref(true)
 const error = ref(null)
 
 const { getMerchList } = useMerchApi()
+const { getLabels } = useLabelsStore()
 
 const fetchMerch = async () => {
   try {
@@ -25,27 +27,39 @@ const fetchMerch = async () => {
 
 onMounted(() => {
   fetchMerch()
+  getLabels()
 })
 
 const searchQuery = ref('')
+const selectedLabelUuids = ref([])
 
 const filteredMerch = computed(() => {
-  if (!searchQuery.value.trim()) {
-    return merchList.value
+  let result = merchList.value || []
+
+  if (searchQuery.value.trim()) {
+    const q = searchQuery.value.toLowerCase()
+    result = result.filter((item) => item.name.toLowerCase().includes(q))
   }
-  const q = searchQuery.value.toLowerCase()
-  return merchList.value.filter((item) => item.name.toLowerCase().includes(q))
+
+  if (selectedLabelUuids.value.length > 0) {
+    const selectedSet = new Set(selectedLabelUuids.value)
+    result = result.filter((item) => {
+      return item.labels && item.labels.some((labelUuid) => selectedSet.has(labelUuid))
+    })
+  }
+
+  return result
 })
 </script>
 
 <template>
   <div class="sticky-search-container">
-    <CollectionToolbar v-model="searchQuery" />
+    <CollectionToolbar v-model="searchQuery" v-model:labelUuids="selectedLabelUuids" />
   </div>
   <n-grid responsive="screen" cols="2 s:3 m:4 l:5 xl:6 2xl:7" class="grid-main">
     <n-gi class="grid-item" v-for="item in filteredMerch" :key="item.merch_uuid">
       <router-link :to="`/details/${item.merch_uuid}`" class="card-link">
-        <CollectionMerchCard :merch="item" />
+        <CollectionMerchCard :merch="item" :labels="item.labels" />
       </router-link>
     </n-gi>
   </n-grid>
diff --git a/src/views/CollectionView/CollectionMerchCard.vue b/src/views/CollectionView/CollectionMerchCard.vue
index bb90992..c3ca223 100644
--- a/src/views/CollectionView/CollectionMerchCard.vue
+++ b/src/views/CollectionView/CollectionMerchCard.vue
@@ -1,14 +1,33 @@
 <script setup>
 import BoxIcon from '@/components/icons/BoxIcon.vue'
 import { useMerchImagesApi } from '@/api/merchImages.js'
-import { onMounted, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+import LabelDotTemplate from '@/components/LabelDotTemplate.vue'
+import { useLabelsStore } from '@/stores/labelsStore.js'
 const { getImageUrl } = useMerchImagesApi()
 
 const props = defineProps({
   merch: {
     type: Object,
     required: true,
+  },
+  labels: {
+    type: Array,
+    default: () => [],
+  },
+})
+
+const store = useLabelsStore()
+
+const resolvedLabelDots = computed(() => {
+  const labelMap = new Map()
+  for (const label of store.labels) {
+    labelMap.set(label.label_uuid, label)
   }
+
+  return props.labels
+    .map(uuid => labelMap.get(uuid))
+    .filter(Boolean)
 })
 
 const fileList = ref([])
@@ -44,6 +63,14 @@ onMounted(async () => {
   <n-card class="responsive-card">
     <template #header>
       <h3 class="card-title">{{ merch.name }}</h3>
+      <div v-if="resolvedLabelDots.length > 0" class="label-dots">
+        <LabelDotTemplate
+          v-for="label in resolvedLabelDots"
+          :key="label.label_uuid"
+          :color="label.color"
+          :bg_color="label.bg_color"
+        />
+      </div>
     </template>
     <template #cover>
       <div class="cover-wrapper">
@@ -101,4 +128,11 @@ onMounted(async () => {
   height: auto;
   max-width: 80%;
 }
+
+.label-dots {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  justify-content: right;
+}
 </style>
diff --git a/src/views/CollectionView/CollectionToolbar.vue b/src/views/CollectionView/CollectionToolbar.vue
index e2ac70d..67e7e84 100644
--- a/src/views/CollectionView/CollectionToolbar.vue
+++ b/src/views/CollectionView/CollectionToolbar.vue
@@ -1,47 +1,59 @@
 <script setup>
-import { ref, watch } from 'vue'
+import { computed, ref, watch } from 'vue'
 import router from '@/router/index.js'
+import { useLabelsStore } from '@/stores/labelsStore.js'
 
-
-const value = ref(null)
-const options = [
-  { label: 'Placeholder 1', value: 'Placeholder 1' },
-  { label: 'Placeholder 2', value: 'Placeholder 2' },
-]
-
-const addMerch = () => {
-  router.push({ name: 'addMerch' })
-}
+const store = useLabelsStore()
 
 const props = defineProps({
   modelValue: {
     type: String,
     default: '',
   },
+  labelUuids: {
+    type: Array,
+    default: () => [],
+  },
+})
+const emit = defineEmits(['update:modelValue', 'update:labelUuids'])
+
+const addMerch = () => {
+  router.push({ name: 'addMerch' })
+}
+
+
+const localSearch = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  }
 })
 
-const emit = defineEmits(['update:modelValue'])
-
-const localValue = ref(props.modelValue)
-
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    localValue.value = newVal
+const selectedLabelUuids = computed({
+  get() {
+    return props.labelUuids
+  },
+  set(value) {
+    emit('update:labelUuids', value)
   }
-)
+})
 
-watch(localValue, (newVal) => {
-  emit('update:modelValue', newVal)
+const labelOptions = computed(() => {
+  return store.labels.map((label) => ({
+    label: label.name,
+    value: label.label_uuid,
+  }))
 })
 </script>
 
 <template>
   <div class="toolbar">
-    <n-button type="primary" class="toolbar-item" @click="addMerch"> Add merch </n-button>
+    <n-button type="primary" class="toolbar-item" @click="addMerch"> Add merch</n-button>
 
     <div class="search-wrapper toolbar-item">
-      <n-input v-model:value="localValue" placeholder="Search..." clearable />
+      <n-input v-model:value="localSearch" placeholder="Search..." clearable />
     </div>
 
     <div class="selector toolbar-item">
@@ -49,9 +61,10 @@ watch(localValue, (newVal) => {
         placeholder="Select label"
         clearable
         multiple
-        v-model:value="value"
-        :options="options"
-        class="mobile-full-width" />
+        v-model:value="selectedLabelUuids"
+        :options="labelOptions"
+        class="mobile-full-width"
+      />
     </div>
   </div>
 </template>
diff --git a/src/views/DetailsView.vue b/src/views/DetailsView.vue
index 95b27c0..7a2e53d 100644
--- a/src/views/DetailsView.vue
+++ b/src/views/DetailsView.vue
@@ -8,6 +8,7 @@ import { useChartsApi } from '@/api/charts.js'
 import EditLink from '@/views/DetailsView/EditLink.vue'
 import CopyToClipboard from '@/components/CopyToClipboard.vue'
 import DetailsViewImages from '@/views/DetailsView/DetailsViewImages.vue'
+import AttachLabel from '@/views/DetailsView/AttachLabel.vue'
 
 const { getMerchDetails, deleteMerch } = useMerchApi()
 const { getDistinctPrices } = useChartsApi()
@@ -107,6 +108,7 @@ onMounted(() => {
       <div>
         <p><strong>Uuid:</strong> {{ merchDetails.merch_uuid }}</p>
         <p><strong>Name:</strong> {{ merchDetails.name }}</p>
+        <AttachLabel :merch-uuid="props.merch_uuid" />
       </div>
       <DetailsViewImages :merch-uuid="merchDetails.merch_uuid"/>
     </div>
diff --git a/src/views/DetailsView/AttachLabel.vue b/src/views/DetailsView/AttachLabel.vue
new file mode 100644
index 0000000..18ca912
--- /dev/null
+++ b/src/views/DetailsView/AttachLabel.vue
@@ -0,0 +1,147 @@
+<script setup>
+import { computed, onMounted, ref } from 'vue'
+import { useLabelsStore } from '@/stores/labelsStore.js'
+import { useMessage } from 'naive-ui'
+import LabelTemplate from '@/components/LabelTemplate.vue'
+
+const store = useLabelsStore()
+const messages = useMessage()
+
+const props = defineProps({
+  merchUuid: {
+    type: String,
+    default: '',
+  },
+})
+
+const attachedLabels = ref([])
+const selectedLabelUuids = ref([])
+const loading = ref(false)
+
+const labelOptions = computed(() => {
+  const attachedUuids = new Set(attachedLabels.value.map(l => l.label_uuid))
+  return store.labels
+    .filter(label => !attachedUuids.has(label.label_uuid))
+    .map(label => ({
+      label: label.name,
+      value: label.label_uuid,
+    }))
+})
+
+const fetchAttachedLabels = async () => {
+  if (!props.merchUuid) return
+
+  loading.value = true
+  try {
+    const response = await store.getMerchLabels(props.merchUuid)
+    const uuids = response.data || []
+
+    if (!Array.isArray(uuids)) {
+      attachedLabels.value = []
+      return
+    }
+
+    const labelMap = new Map()
+    for (const label of store.labels) {
+      labelMap.set(label.label_uuid, label)
+    }
+
+    attachedLabels.value = uuids
+      .map(uuid => labelMap.get(uuid))
+      .filter(Boolean)
+  } catch (error) {
+    messages.error('Failed to load attached labels: ' + error)
+    attachedLabels.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+const handleAttach = async () => {
+  if (!props.merchUuid) {
+    messages.error('Merch UUID is missing')
+    return
+  }
+  if (selectedLabelUuids.value.length === 0) {
+    messages.warning('No labels selected')
+    return
+  }
+
+  try {
+    await Promise.all(
+      selectedLabelUuids.value.map(labelUuid =>
+        store.attachLabel(props.merchUuid, labelUuid)
+      )
+    )
+    messages.success('Label(s) attached successfully')
+    selectedLabelUuids.value = []
+    await fetchAttachedLabels()
+  } catch (error) {
+    messages.error('Failed to attach label(s): ' + error)
+  }
+}
+
+const handleDetach = async (labelUuid) => {
+  if (!props.merchUuid) {
+    messages.error('Merch UUID is missing')
+    return
+  }
+
+  try {
+    await store.detachLabel(props.merchUuid, labelUuid)
+    messages.success('Label detached successfully')
+    await fetchAttachedLabels()
+  } catch (error) {
+    messages.error('Failed to detach label: ' + error)
+  }
+}
+
+onMounted(() => {
+  fetchAttachedLabels()
+})
+</script>
+
+<template>
+  <p><strong>Select labels to attach:</strong></p>
+  <div class="label-row">
+    <n-select
+      v-model:value="selectedLabelUuids"
+      multiple
+      :options="labelOptions"
+      :loading="loading"
+    />
+    <n-button
+      type="primary"
+      @click="handleAttach"
+      :disabled="selectedLabelUuids.length === 0 || loading"
+      style="width: 100px; margin-left: 12px"
+    >
+      Attach
+    </n-button>
+  </div>
+
+  <p><strong>Attached labels. Click label to detach it.</strong></p>
+  <div v-if="attachedLabels.length > 0" class="mt-10 label-row">
+    <LabelTemplate
+      v-for="label in attachedLabels"
+      :key="label.label_uuid"
+      :text="label.name"
+      :color="label.color"
+      :bg_color="label.bg_color"
+      @click="handleDetach(label.label_uuid)"
+      style="cursor: pointer"
+    />
+  </div>
+
+  <div class="mt-20">
+    <router-link :to="{ name: 'labels' }">
+      <n-button type="primary">
+        Manage labels
+      </n-button>
+    </router-link>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/LabelsView.vue b/src/views/LabelsView.vue
new file mode 100644
index 0000000..00637d7
--- /dev/null
+++ b/src/views/LabelsView.vue
@@ -0,0 +1,78 @@
+<script setup>
+import { useLabelsStore } from '@/stores/labelsStore.js'
+import LabelCard from '@/views/LabelsView/LabelCard.vue'
+import { NModal, useMessage } from 'naive-ui'
+import LabelForm from '@/views/LabelsView/LabelForm.vue'
+import { ref } from 'vue'
+import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
+
+const store = useLabelsStore()
+const messages = useMessage()
+
+const editForm = ref({
+  name: '',
+  color: '#EF2D56FF',
+  bg_color: '#FFFFFF',
+})
+
+const handleCreate = async () => {
+  try {
+    const name = editForm.value.name?.trim() || 'preview'
+
+    await store.createLabel({
+      name,
+      color: editForm.value.color,
+      bg_color: editForm.value.bg_color,
+    })
+
+    editForm.value = {
+      name: '',
+      color: '#EF2D56FF',
+      bg_color: '#FFFFFF',
+    }
+
+    showCreateModal.value = false
+    messages.success('Label created.')
+  } catch (error) {
+    messages.error(error)
+    console.error('Failed to create label in component:', error)
+  }
+}
+
+const showCreateModal = ref(false)
+
+const cancelCreate = () => {
+  showCreateModal.value = false
+}
+</script>
+
+<template>
+  <h3>Manage labels</h3>
+  <n-divider title-placement="left">Create label</n-divider>
+  <n-modal v-model:show="showCreateModal" preset="dialog" title="Create new label">
+    <template #default>
+      <p>Enter new values to create label.</p>
+      <LabelForm :edit-form="editForm" />
+    </template>
+    <template #action>
+      <n-button @click="handleCreate" type="primary">Create</n-button>
+      <n-button @click="cancelCreate">Cancel</n-button>
+    </template>
+  </n-modal>
+  <div class="mt-10 c-center">
+    <n-button type="primary" @click="showCreateModal=true" :loading="false" class="w360">
+      Create Label
+    </n-button>
+  </div>
+
+  <n-divider title-placement="left">Current labels</n-divider>
+  <h4 class="text-center">Tip: click on a record to edit / delete label.</h4>
+
+  <div v-for="label in store.labels" :key="label.label_uuid">
+    <LabelCard :label-uuid="label.label_uuid" />
+  </div>
+
+  <ScrollToTopButton />
+</template>
+
+<style scoped></style>
diff --git a/src/views/LabelsView/LabelCard.vue b/src/views/LabelsView/LabelCard.vue
new file mode 100644
index 0000000..0b9d4e7
--- /dev/null
+++ b/src/views/LabelsView/LabelCard.vue
@@ -0,0 +1,143 @@
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { NModal, useMessage } from 'naive-ui'
+import { useLabelsStore } from '@/stores/labelsStore.js'
+import LabelTemplate from '@/components/LabelTemplate.vue'
+import LabelDotTemplate from '@/components/LabelDotTemplate.vue'
+import LabelForm from '@/views/LabelsView/LabelForm.vue'
+
+const store = useLabelsStore()
+const message = useMessage()
+
+const props = defineProps({
+  labelUuid: {
+    type: String,
+    required: true,
+  },
+})
+
+const labelData = computed(() => {
+  return store.labels.find((label) => label.label_uuid === props.labelUuid)
+})
+
+const editForm = ref({})
+
+const showEditModal = ref(false)
+
+const editLabelRecordHandler = () => {
+  if (!labelData.value) return
+  editForm.value = { ...labelData.value }
+  showEditModal.value = true
+}
+
+const cancelEdit = () => {
+  showEditModal.value = false
+}
+
+const handleUpdate = async () => {
+  try {
+    await store.updateLabel(editForm.value.label_uuid, {
+      name: editForm.value.name,
+      color: editForm.value.color,
+      bg_color: editForm.value.bg_color,
+    })
+    showEditModal.value = false
+    message.success('Label updated successfully.')
+  } catch (error) {
+    message.error(error.message)
+  }
+}
+
+const confirmDelete = ref(false)
+
+const handleDelete = async () => {
+  if (!confirmDelete.value) return
+  try {
+    await store.deleteLabel(props.labelUuid)
+    showEditModal.value = false
+    message.success('Label deleted successfully.')
+  } catch (error) {
+    message.error(error.message)
+  }
+}
+
+//на случай изменений извне, хотя таких быть не должно
+watch(
+  () => props.labelData,
+  (newVal) => {
+    if (showEditModal.value) return
+    Object.assign(editForm.value, newVal)
+  },
+  { deep: true },
+)
+</script>
+
+<template>
+  <n-list hoverable clickable class="bottom-border">
+    <n-list-item @click="editLabelRecordHandler">
+      <div class="label-container">
+        <div>
+          <n-thing>Name: {{ labelData.name }}</n-thing>
+          <n-thing>UUID: {{ labelData.label_uuid }}</n-thing>
+        </div>
+
+        <div class="label-column">
+          <n-thing>
+            <div class="label-row">
+              <LabelDotTemplate :color="labelData.color" :bg_color="labelData.bg_color" />
+
+              <LabelTemplate
+                :text="labelData.name"
+                :color="labelData.color"
+                :bg_color="labelData.bg_color"
+              />
+            </div>
+          </n-thing>
+        </div>
+      </div>
+    </n-list-item>
+  </n-list>
+
+  <n-modal v-model:show="showEditModal" preset="dialog" title="Manage label record">
+    <template #default>
+      <p>Enter new values to update. Or hit delete button to delete record.</p>
+      <LabelForm :edit-form="editForm" />
+    </template>
+    <template #action>
+      <div class="modal-actions">
+        <div class="checkbox-row">
+          <n-checkbox v-model:checked="confirmDelete"> Check to confirm delete </n-checkbox>
+        </div>
+        <div class="buttons-row">
+          <n-button @click="handleUpdate" type="warning">Update</n-button>
+          <n-button @click="handleDelete" type="error" :disabled="!confirmDelete">Delete</n-button>
+          <n-button @click="cancelEdit">Cancel</n-button>
+        </div>
+      </div>
+    </template>
+  </n-modal>
+</template>
+
+<style scoped>
+.bottom-border {
+  border-bottom: rgba(24, 160, 88, 0.25) solid 1px;
+}
+
+.modal-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+}
+
+.checkbox-row,
+.buttons-row {
+  display: flex;
+  align-items: center;
+}
+
+.buttons-row {
+  justify-content: flex-end;
+  gap: 8px;
+}
+</style>
diff --git a/src/views/LabelsView/LabelForm.vue b/src/views/LabelsView/LabelForm.vue
new file mode 100644
index 0000000..c10e70c
--- /dev/null
+++ b/src/views/LabelsView/LabelForm.vue
@@ -0,0 +1,36 @@
+<!-- LabelForm.vue -->
+<script setup>
+import LabelDotTemplate from '@/components/LabelDotTemplate.vue'
+import LabelTemplate from '@/components/LabelTemplate.vue'
+
+defineProps({
+  editForm: {
+    type: Object,
+    required: true
+  }
+})
+</script>
+
+<template>
+  <div class="label-row label-preview">
+    <span>Preview: </span>
+    <LabelDotTemplate :color="editForm.color" :bg_color="editForm.bg_color" />
+    <LabelTemplate
+      :text="editForm.name || 'preview'"
+      :color="editForm.color"
+      :bg_color="editForm.bg_color"
+    />
+  </div>
+
+  <n-form :model="editForm" label-placement="left" label-width="100">
+    <n-form-item label="Name" path="name">
+      <n-input v-model:value="editForm.name" />
+    </n-form-item>
+    <n-form-item label="Border and text color" path="color">
+      <n-color-picker v-model:value="editForm.color" />
+    </n-form-item>
+    <n-form-item label="Background color" path="bg_color">
+      <n-color-picker v-model:value="editForm.bg_color" />
+    </n-form-item>
+  </n-form>
+</template>
diff --git a/src/views/PersonalView/PersonalMainBlock.vue b/src/views/PersonalView/PersonalMainBlock.vue
index 0e89baf..cc45fca 100644
--- a/src/views/PersonalView/PersonalMainBlock.vue
+++ b/src/views/PersonalView/PersonalMainBlock.vue
@@ -14,27 +14,26 @@ onMounted(() => {
 </script>
 
 <template>
-  <n-card :bordered="false" title="Main">
+  <n-divider title-placement="left">Main</n-divider>
     <n-list hoverable clickable>
       <n-list-item>
-        <n-thing title="Email" content-style="margin-top: 10px;">
+        <n-thing title="Email" class="mt-10">
           {{ userData?.email || '---' }}
         </n-thing>
       </n-list-item>
 
       <n-list-item>
-        <n-thing title="Username" content-style="margin-top: 10px;">
+        <n-thing title="Username" class="mt-10">
           {{ userData?.username || '---' }}
         </n-thing>
       </n-list-item>
 
       <n-list-item>
-        <n-thing title="Created At" content-style="margin-top: 10px;">
+        <n-thing title="Created At" class="mt-10">
           {{ userData?.created_at || '---' }}
         </n-thing>
       </n-list-item>
     </n-list>
-  </n-card>
 </template>
 
 <style scoped></style>
diff --git a/src/views/PersonalView/PersonalSessionBlock.vue b/src/views/PersonalView/PersonalSessionBlock.vue
index f8192d4..a67743a 100644
--- a/src/views/PersonalView/PersonalSessionBlock.vue
+++ b/src/views/PersonalView/PersonalSessionBlock.vue
@@ -35,16 +35,16 @@ const onLogout = () => {
 </script>
 
 <template>
-  <n-card :bordered="false" title="Session">
+  <n-divider title-placement="left">Session</n-divider>
     <n-list hoverable clickable>
       <n-list-item>
-        <n-thing title="Session id" content-style="margin-top: 10px;">
+        <n-thing title="Session id" class="mt-10">
           {{ currentSession?.uuid || '---' }}
         </n-thing>
       </n-list-item>
 
       <n-list-item>
-        <n-thing title="Expires at" content-style="margin-top: 10px;">
+        <n-thing title="Expires at" class="mt-10">
           {{ formattedDate }}
         </n-thing>
       </n-list-item>
@@ -52,7 +52,6 @@ const onLogout = () => {
         <n-button type="info" class="center-button" @click="onLogout">Log out</n-button>
       </div>
     </n-list>
-  </n-card>
 </template>
 
 <style scoped>

From 0e51451ad2b34f15c38d17301f9596196e22517a Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 2 Nov 2025 19:49:06 +0300
Subject: [PATCH 05/12] messages added

---
 src/stores/authStore.js |  1 +
 src/views/LoginView.vue | 46 +++++++++++++++++++++++++++++++++++------
 2 files changed, 41 insertions(+), 6 deletions(-)

diff --git a/src/stores/authStore.js b/src/stores/authStore.js
index cede1f1..977cd25 100644
--- a/src/stores/authStore.js
+++ b/src/stores/authStore.js
@@ -58,6 +58,7 @@ export const useAuthStore = defineStore('auth', () => {
       router.push({ name: 'collection'})
     } catch (error) {
       console.error('Login error:', error)
+      throw error
     }
   }
 
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 0a2015e..756bb8d 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -2,16 +2,23 @@
 import { reactive, ref } from 'vue'
 import { useAuthStore } from '@/stores/authStore.js'
 import { storeToRefs } from 'pinia'
+import { useMessage } from 'naive-ui'
 
 const store = useAuthStore()
+const messages = useMessage()
 
 const { activeTab } = storeToRefs(store)
 
 const signInEmail = ref('')
 const signInPassword = ref('')
 
-const onSignIn = () => {
-  store.login(signInEmail.value, signInPassword.value)
+const onSignIn = async () => {
+  try{
+    await store.login(signInEmail.value, signInPassword.value)
+    messages.success('Login success')
+  } catch (error) {
+    messages.error("Login error")
+  }
 }
 
 const signUp = reactive({
@@ -20,8 +27,35 @@ const signUp = reactive({
   reenterPassword: '',
 })
 
-const onSignUp = () => {
-  store.register(signUp.email, signUp.password)
+const onSignUp = async () => {
+  if (!signUp.email.trim()) {
+    messages.error('Email is required')
+    return
+  }
+
+  const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
+  if (!emailRegex.test(signUp.email)) {
+    messages.error('Please enter a valid email address')
+    return
+  }
+
+  if (!signUp.password.trim()) {
+    messages.error('Password is required')
+    return
+  }
+
+  if (signUp.password !== signUp.reenterPassword) {
+    messages.error('Passwords do not match')
+    return
+  }
+
+  try{
+    await store.register(signUp.email, signUp.password)
+    messages.success('Register success')
+    activeTab.value = 'signin'
+  } catch (error) {
+    messages.error("Register error")
+  }
 }
 </script>
 
@@ -43,7 +77,7 @@ const onSignUp = () => {
           <n-form-item-row label="Password">
             <n-input v-model:value="signInPassword" type="password" show-password-on="click" />
           </n-form-item-row>
-          <n-button type="primary" block secondary strong attr-type="submit" @click="onSignIn"> Sign In</n-button>
+          <n-button type="primary" block secondary strong attr-type="submit"> Sign In</n-button>
         </n-form>
       </n-tab-pane>
 
@@ -58,7 +92,7 @@ const onSignUp = () => {
           <n-form-item-row label="Reenter Password">
             <n-input type="password" v-model:value="signUp.reenterPassword" show-password-on="click" />
           </n-form-item-row>
-          <n-button type="primary" block secondary strong attr-type="submit" @click="onSignUp">Sign up</n-button>
+          <n-button type="primary" block secondary strong attr-type="submit">Sign up</n-button>
         </n-form>
       </n-tab-pane>
     </n-tabs>

From 2b088892184db9b18a5206c2a4065b60b7f26b49 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 2 Nov 2025 20:02:05 +0300
Subject: [PATCH 06/12] cache fix

---
 src/stores/labelsStore.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/stores/labelsStore.js b/src/stores/labelsStore.js
index 968d3ff..ab8ef28 100644
--- a/src/stores/labelsStore.js
+++ b/src/stores/labelsStore.js
@@ -34,7 +34,7 @@ export const useLabelsStore = defineStore('labels', () => {
 
   const getLabels = async () => {
     try {
-      const response = await apiClient.get('/merch/labels')
+      const response = await apiClient.get(`/merch/labels?_=${Date.now()}`)
       const labelList = Array.isArray(response.data) ? response.data : []
       labels.value = labelList
       localStorage.setItem('labels', JSON.stringify(labelList))
@@ -46,7 +46,7 @@ export const useLabelsStore = defineStore('labels', () => {
 
   const updateLabel = async (uuid, updatedData) => {
     try {
-      await apiClient.put(`/merch/labels/${uuid}`, updatedData)
+      await apiClient.put(`/merch/labels/${uuid}?_=${Date.now()}`, updatedData)
       await getLabels()
     } catch (error) {
       console.error('Failed to update label:', error)

From cffc6acc2b1da70d8a48c1ece242156f09e3ca88 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 2 Nov 2025 23:40:44 +0300
Subject: [PATCH 07/12] zero prices block added

---
 src/api/zeroPrices.js                         | 27 ++++++++++
 src/components/Navbar/NavBar.vue              |  1 +
 src/router/index.js                           |  6 +++
 src/services/apiClient.js                     |  6 ++-
 src/styles/styles.css                         |  5 ++
 .../CollectionView/CollectionToolbar.vue      | 11 ++--
 src/views/ZeroPricesView.vue                  | 49 ++++++++++++++++++
 src/views/ZeroPricesView/ZeroPriceCard.vue    | 51 +++++++++++++++++++
 .../ZeroPricesView/ZeroPricesToolbar.vue      | 47 +++++++++++++++++
 9 files changed, 194 insertions(+), 9 deletions(-)
 create mode 100644 src/api/zeroPrices.js
 create mode 100644 src/views/ZeroPricesView.vue
 create mode 100644 src/views/ZeroPricesView/ZeroPriceCard.vue
 create mode 100644 src/views/ZeroPricesView/ZeroPricesToolbar.vue

diff --git a/src/api/zeroPrices.js b/src/api/zeroPrices.js
new file mode 100644
index 0000000..c69efd1
--- /dev/null
+++ b/src/api/zeroPrices.js
@@ -0,0 +1,27 @@
+import { apiClient } from '@/services/apiClient.js'
+
+export const useZeroPrices = () => {
+  const getZeroPrices = async () => {
+    try {
+      return await apiClient.get('/merch/zeroprices')
+    } catch (error) {
+      console.log('Get zero prices error: ', error)
+      throw error
+    }
+  }
+
+  const deleteZeroPrices = async (list) => {
+    try {
+      await apiClient.delete('/merch/zeroprices', list)
+    }
+    catch (error) {
+      console.log('Delete zero prices error: ', error)
+      throw error
+    }
+  }
+
+  return {
+    getZeroPrices,
+    deleteZeroPrices,
+  }
+}
diff --git a/src/components/Navbar/NavBar.vue b/src/components/Navbar/NavBar.vue
index c2fcb65..a05c67c 100644
--- a/src/components/Navbar/NavBar.vue
+++ b/src/components/Navbar/NavBar.vue
@@ -17,6 +17,7 @@ const mainMenu = computed(() => {
     { label: 'Collection', key: 'collection' },
     { label: 'Charts', key: 'charts' },
     { label: 'Parsers', key: 'parsers' },
+    { label: 'Zero prices', key: 'zeroprices' },
   ]
 })
 
diff --git a/src/router/index.js b/src/router/index.js
index 1a83844..0a0ff85 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -8,6 +8,7 @@ import PersonalView from '@/views/PersonalView.vue'
 import AddMerchView from '@/views/AddMerchView.vue'
 import DetailsView from '@/views/DetailsView.vue'
 import LabelsView from '@/views/LabelsView.vue'
+import ZeroPricesView from '@/views/ZeroPricesView.vue'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -58,6 +59,11 @@ const router = createRouter({
       name: 'labels',
       component: LabelsView,
     },
+    {
+      path: '/zeroprices',
+      name: 'zeroprices',
+      component: ZeroPricesView,
+    },
   ],
 })
 
diff --git a/src/services/apiClient.js b/src/services/apiClient.js
index 7bc1f10..082f10a 100644
--- a/src/services/apiClient.js
+++ b/src/services/apiClient.js
@@ -138,12 +138,14 @@ export const apiClient = {
     return request(url, {
       method: 'POST',
       body: isFormData ? data : JSON.stringify(data),
-      // headers: isFormData ? {} : { 'Content-Type': 'application/json' }
     })
   },
   put: (url, data) => request(url, {
     method: 'PUT',
     body: JSON.stringify(data),
   }),
-  delete: (url) => request(url, { method: 'DELETE' }),
+  delete: (url, data) => request(url, {
+    method: 'DELETE',
+    body: data ? JSON.stringify(data) : undefined,
+  }),
 }
diff --git a/src/styles/styles.css b/src/styles/styles.css
index 67d9708..815f71a 100644
--- a/src/styles/styles.css
+++ b/src/styles/styles.css
@@ -197,3 +197,8 @@ body,
   justify-content: center;
   margin-bottom: 20px;
 }
+
+.padding-lr-30 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
diff --git a/src/views/CollectionView/CollectionToolbar.vue b/src/views/CollectionView/CollectionToolbar.vue
index 67e7e84..ebe8bc0 100644
--- a/src/views/CollectionView/CollectionToolbar.vue
+++ b/src/views/CollectionView/CollectionToolbar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { computed, ref, watch } from 'vue'
+import { computed } from 'vue'
 import router from '@/router/index.js'
 import { useLabelsStore } from '@/stores/labelsStore.js'
 
@@ -21,14 +21,13 @@ const addMerch = () => {
   router.push({ name: 'addMerch' })
 }
 
-
 const localSearch = computed({
   get() {
     return props.modelValue
   },
   set(value) {
     emit('update:modelValue', value)
-  }
+  },
 })
 
 const selectedLabelUuids = computed({
@@ -37,7 +36,7 @@ const selectedLabelUuids = computed({
   },
   set(value) {
     emit('update:labelUuids', value)
-  }
+  },
 })
 
 const labelOptions = computed(() => {
@@ -69,6 +68,4 @@ const labelOptions = computed(() => {
   </div>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>
diff --git a/src/views/ZeroPricesView.vue b/src/views/ZeroPricesView.vue
new file mode 100644
index 0000000..d1ae267
--- /dev/null
+++ b/src/views/ZeroPricesView.vue
@@ -0,0 +1,49 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useZeroPrices } from '@/api/zeroPrices.js'
+import ZeroPriceCard from '@/views/ZeroPricesView/ZeroPriceCard.vue'
+import ZeroPricesToolbar from '@/views/ZeroPricesView/ZeroPricesToolbar.vue'
+
+const { getZeroPrices } = useZeroPrices()
+
+const zeroPrices = ref([])
+const toDelete = ref([])
+
+const handleToggle = ({ id, merch_uuid, checked }) => {
+  if (checked) {
+    toDelete.value.push({ id, merch_uuid });
+  } else {
+    toDelete.value = toDelete.value.filter(item => item.id !== id);
+  }
+}
+
+const fetchZeroPrices = async () => {
+  try {
+    const response = await getZeroPrices()
+    zeroPrices.value = response.data
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+onMounted(() => {
+  fetchZeroPrices()
+})
+</script>
+
+<template>
+  <div v-if="zeroPrices.length === 0">
+    <n-h2 class="text-center">Zero prices</n-h2>
+    <n-h3 class="text-center">No data</n-h3>
+  </div>
+  <div v-else>
+    <div class="sticky-search-container">
+      <ZeroPricesToolbar :selected="toDelete" />
+    </div>
+    <div v-for="item in zeroPrices" :key="item.created_at">
+      <ZeroPriceCard :zero-price="item" @toggle="handleToggle" />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ZeroPricesView/ZeroPriceCard.vue b/src/views/ZeroPricesView/ZeroPriceCard.vue
new file mode 100644
index 0000000..10c80d7
--- /dev/null
+++ b/src/views/ZeroPricesView/ZeroPriceCard.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { ref } from 'vue'
+
+const props = defineProps({
+  zeroPrice: {
+    type: Object,
+    required: true,
+  },
+})
+
+const isChecked = ref(false)
+const emit = defineEmits(['toggle'])
+const handleCheckboxChange = () => {
+  isChecked.value = !isChecked.value
+  emit('toggle', {
+    id: props.zeroPrice.id,
+    merch_uuid: props.zeroPrice.merch_uuid,
+    checked: isChecked.value,
+  })
+}
+</script>
+
+<template>
+  <div class="zeroPriceCard mt-10">
+    <n-grid responsive="screen" item-responsive cols="4" :x-gap="16" :y-gap="16" class="shift">
+      <n-gi>
+        <n-checkbox :checked="isChecked" @update:checked="handleCheckboxChange">
+          <strong>Delete</strong>
+        </n-checkbox>
+      </n-gi>
+      <n-gi><strong>Name:</strong> {{ props.zeroPrice.name }}</n-gi>
+      <n-gi><strong>Created:</strong> {{ props.zeroPrice.created_at }}</n-gi>
+      <n-gi><strong>Origin:</strong> {{ props.zeroPrice.origin }}</n-gi>
+    </n-grid>
+  </div>
+</template>
+
+<style scoped>
+.zeroPriceCard {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 16px;
+  background: #f5f5f5;
+  border-radius: 8px;
+  font-family: Arial, sans-serif;
+  font-size: 14px;
+  gap: 12px;
+  border: 1px solid #e0e0e0;
+}
+</style>
diff --git a/src/views/ZeroPricesView/ZeroPricesToolbar.vue b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
new file mode 100644
index 0000000..8e3e9b2
--- /dev/null
+++ b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
@@ -0,0 +1,47 @@
+<script setup>
+import { useMessage } from 'naive-ui'
+import { useZeroPrices } from '@/api/zeroPrices.js'
+const props = defineProps({
+  selected: {
+    type: Array,
+    required: true,
+  },
+})
+
+const messages = useMessage()
+const { deleteZeroPrices } = useZeroPrices()
+
+const handleDelete = async () => {
+  try {
+    await deleteZeroPrices(props.selected)
+    messages.success("Selected zero prices deleted")
+  } catch (error) {
+    console.log(error)
+    messages.error("Error deleting selected prices")
+  }
+}
+</script>
+
+<template>
+  {{ props.selected }}
+  <div class="toolbar button-container-evenly padding-lr-30">
+    <div v-if="props.selected.length === 0" class="toolbar-item">
+      <span>Select records to delete</span>
+    </div>
+    <div v-else class="toolbar-item">
+      {{ props.selected.length }} items selected
+    </div>
+
+    <div class="toolbar-item">
+      <n-button
+        type="error"
+        :disabled="props.selected.length === 0"
+        @click="handleDelete"
+      >
+        Delete Selected
+      </n-button>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

From 7aa2ff1d3ace103b3a40893e631042f269e05158 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sun, 2 Nov 2025 23:46:22 +0300
Subject: [PATCH 08/12] refresh on delete

---
 src/views/ZeroPricesView.vue                   | 7 ++++++-
 src/views/ZeroPricesView/ZeroPricesToolbar.vue | 3 ++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/views/ZeroPricesView.vue b/src/views/ZeroPricesView.vue
index d1ae267..adab776 100644
--- a/src/views/ZeroPricesView.vue
+++ b/src/views/ZeroPricesView.vue
@@ -26,6 +26,11 @@ const fetchZeroPrices = async () => {
   }
 }
 
+const handleDeleted = () => {
+  toDelete.value = []
+  fetchZeroPrices()
+}
+
 onMounted(() => {
   fetchZeroPrices()
 })
@@ -38,7 +43,7 @@ onMounted(() => {
   </div>
   <div v-else>
     <div class="sticky-search-container">
-      <ZeroPricesToolbar :selected="toDelete" />
+      <ZeroPricesToolbar :selected="toDelete" @deleted="handleDeleted" />
     </div>
     <div v-for="item in zeroPrices" :key="item.created_at">
       <ZeroPriceCard :zero-price="item" @toggle="handleToggle" />
diff --git a/src/views/ZeroPricesView/ZeroPricesToolbar.vue b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
index 8e3e9b2..122e3d5 100644
--- a/src/views/ZeroPricesView/ZeroPricesToolbar.vue
+++ b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
@@ -10,11 +10,13 @@ const props = defineProps({
 
 const messages = useMessage()
 const { deleteZeroPrices } = useZeroPrices()
+const emit = defineEmits(['deleted'])
 
 const handleDelete = async () => {
   try {
     await deleteZeroPrices(props.selected)
     messages.success("Selected zero prices deleted")
+    emit('deleted')
   } catch (error) {
     console.log(error)
     messages.error("Error deleting selected prices")
@@ -23,7 +25,6 @@ const handleDelete = async () => {
 </script>
 
 <template>
-  {{ props.selected }}
   <div class="toolbar button-container-evenly padding-lr-30">
     <div v-if="props.selected.length === 0" class="toolbar-item">
       <span>Select records to delete</span>

From 54d814f9b259f2e6ecb73155f286caa24127761e Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Tue, 4 Nov 2025 14:20:08 +0300
Subject: [PATCH 09/12] image handling fixes

---
 src/services/apiClient.js                   |  4 +-
 src/views/DetailsView/DetailsViewImages.vue | 59 ++++++++++-----------
 2 files changed, 32 insertions(+), 31 deletions(-)

diff --git a/src/services/apiClient.js b/src/services/apiClient.js
index 082f10a..639fb84 100644
--- a/src/services/apiClient.js
+++ b/src/services/apiClient.js
@@ -7,8 +7,10 @@ let refreshPromise = null
 
 function createConfig(options = {}) {
   const token = localStorage.getItem('accessToken');
+  const isFormData = options.body instanceof FormData;
+
   const headers = {
-    'Content-Type': 'application/json',
+    ...(isFormData ? {} : { 'Content-Type': 'application/json' }),
     ...options.headers,
   };
 
diff --git a/src/views/DetailsView/DetailsViewImages.vue b/src/views/DetailsView/DetailsViewImages.vue
index 7284760..dc7a258 100644
--- a/src/views/DetailsView/DetailsViewImages.vue
+++ b/src/views/DetailsView/DetailsViewImages.vue
@@ -54,37 +54,21 @@ function onFileInputChange(event) {
   event.target.value = ''
 }
 
-async function handleUpload({ fileList: newFileList }) {
-  const file = newFileList[newFileList.length - 1]
+async function fetchImage(bustCache = false) {
   try {
-    await uploadImage(props.merchUuid, file.file)
+    let imgUrl = getImageUrl(props.merchUuid, 'full')
 
-    const { imgUrl } = await getImageUrl(props.merchUuid, 'full')
-
-    message.success('Image uploaded successfully.')
-
-    fileList.value = [
-      {
-        name: file.name,
-        url: imgUrl,
-        status: 'finished',
-      },
-    ]
-  } catch (error) {
-    message.error('Upload error: ' + (error.message || 'Unknown error.'))
-  }
-}
-
-onMounted(async () => {
-  try {
-    const imgUrl = getImageUrl(props.merchUuid, 'full');
+    if (bustCache) {
+      const separator = imgUrl.includes('?') ? '&' : '?'
+      imgUrl += `${separator}_t=${Date.now()}`
+    }
 
     await new Promise((resolve, reject) => {
-      const img = new Image();
-      img.src = imgUrl;
-      img.onload = () => resolve(imgUrl);
-      img.onerror = () => reject(new Error('Image not found'));
-    });
+      const img = new Image()
+      img.src = imgUrl
+      img.onload = () => resolve(imgUrl)
+      img.onerror = () => reject(new Error('Image not found'))
+    })
 
     fileList.value = [
       {
@@ -92,13 +76,28 @@ onMounted(async () => {
         url: imgUrl,
         status: 'finished',
       },
-    ];
+    ]
   } catch (error) {
-    fileList.value = [];
+    fileList.value = []
     if (!error.message.includes('404')) {
-      console.error('Error getting image: ', error);
+      console.error('Error getting image:', error)
     }
   }
+}
+
+async function handleUpload({ fileList: newFileList }) {
+  const file = newFileList[newFileList.length - 1]
+  try {
+    await uploadImage(props.merchUuid, file.file)
+    message.success('Image uploaded successfully.')
+    await fetchImage(true)
+  } catch (error) {
+    message.error('Upload error: ' + (error.message || 'Unknown error.'))
+  }
+}
+
+onMounted(async () => {
+  await fetchImage(false)
 });
 
 const showConfirmDelete = ref(false)

From 504f215c5ac66b15b51fdf487a9bf39be7193264 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Tue, 4 Nov 2025 16:46:37 +0300
Subject: [PATCH 10/12] zero prices fixes

---
 src/views/ZeroPricesView.vue                  | 21 ++++++++++++++++---
 src/views/ZeroPricesView/ZeroPriceCard.vue    | 15 ++++++-------
 .../ZeroPricesView/ZeroPricesToolbar.vue      | 10 ++++++++-
 3 files changed, 35 insertions(+), 11 deletions(-)

diff --git a/src/views/ZeroPricesView.vue b/src/views/ZeroPricesView.vue
index adab776..6e5820e 100644
--- a/src/views/ZeroPricesView.vue
+++ b/src/views/ZeroPricesView.vue
@@ -17,10 +17,17 @@ const handleToggle = ({ id, merch_uuid, checked }) => {
   }
 }
 
+const handleSelectAll = () => {
+  toDelete.value = zeroPrices.value.map(item => ({
+    id: item.id,
+    merch_uuid: item.merch_uuid
+  }))
+}
+
 const fetchZeroPrices = async () => {
   try {
     const response = await getZeroPrices()
-    zeroPrices.value = response.data
+    zeroPrices.value = Array.isArray(response.data) ? response.data : []
   } catch (error) {
     console.error(error)
   }
@@ -43,10 +50,18 @@ onMounted(() => {
   </div>
   <div v-else>
     <div class="sticky-search-container">
-      <ZeroPricesToolbar :selected="toDelete" @deleted="handleDeleted" />
+      <ZeroPricesToolbar
+        :selected="toDelete"
+        @deleted="handleDeleted"
+        @selectAll="handleSelectAll"
+      />
     </div>
     <div v-for="item in zeroPrices" :key="item.created_at">
-      <ZeroPriceCard :zero-price="item" @toggle="handleToggle" />
+      <ZeroPriceCard
+        :zero-price="item"
+        @toggle="handleToggle"
+        :checked="toDelete.some(t => t.id === item.id)"
+      />
     </div>
   </div>
 </template>
diff --git a/src/views/ZeroPricesView/ZeroPriceCard.vue b/src/views/ZeroPricesView/ZeroPriceCard.vue
index 10c80d7..44236ee 100644
--- a/src/views/ZeroPricesView/ZeroPriceCard.vue
+++ b/src/views/ZeroPricesView/ZeroPriceCard.vue
@@ -1,21 +1,22 @@
 <script setup>
-import { ref } from 'vue'
-
 const props = defineProps({
   zeroPrice: {
     type: Object,
     required: true,
   },
+  checked: {
+    type: Boolean,
+    default: false,
+  },
 })
 
-const isChecked = ref(false)
 const emit = defineEmits(['toggle'])
-const handleCheckboxChange = () => {
-  isChecked.value = !isChecked.value
+
+const handleCheckboxChange = (newValue) => {
   emit('toggle', {
     id: props.zeroPrice.id,
     merch_uuid: props.zeroPrice.merch_uuid,
-    checked: isChecked.value,
+    checked: newValue,
   })
 }
 </script>
@@ -24,7 +25,7 @@ const handleCheckboxChange = () => {
   <div class="zeroPriceCard mt-10">
     <n-grid responsive="screen" item-responsive cols="4" :x-gap="16" :y-gap="16" class="shift">
       <n-gi>
-        <n-checkbox :checked="isChecked" @update:checked="handleCheckboxChange">
+        <n-checkbox :checked="checked" @update:checked="handleCheckboxChange">
           <strong>Delete</strong>
         </n-checkbox>
       </n-gi>
diff --git a/src/views/ZeroPricesView/ZeroPricesToolbar.vue b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
index 122e3d5..abe01cb 100644
--- a/src/views/ZeroPricesView/ZeroPricesToolbar.vue
+++ b/src/views/ZeroPricesView/ZeroPricesToolbar.vue
@@ -10,7 +10,7 @@ const props = defineProps({
 
 const messages = useMessage()
 const { deleteZeroPrices } = useZeroPrices()
-const emit = defineEmits(['deleted'])
+const emit = defineEmits(['deleted', 'selectAll'])
 
 const handleDelete = async () => {
   try {
@@ -22,6 +22,11 @@ const handleDelete = async () => {
     messages.error("Error deleting selected prices")
   }
 }
+
+const handleSelectAll = async () => {
+  emit('selectAll')
+}
+
 </script>
 
 <template>
@@ -32,6 +37,9 @@ const handleDelete = async () => {
     <div v-else class="toolbar-item">
       {{ props.selected.length }} items selected
     </div>
+    <div class="toolbar-item">
+      <span @click="handleSelectAll">Click here to select all</span>
+    </div>
 
     <div class="toolbar-item">
       <n-button

From d42e21bae779386546fb617c75b67fe410ac67bd Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sat, 6 Dec 2025 19:13:22 +0300
Subject: [PATCH 11/12] factor out origins colors

---
 src/components/ChartBlock.vue |  6 +--
 src/services/colors.js        |  4 ++
 src/views/ZeroPricesView.vue  | 77 +++++++----------------------------
 3 files changed, 19 insertions(+), 68 deletions(-)
 create mode 100644 src/services/colors.js

diff --git a/src/components/ChartBlock.vue b/src/components/ChartBlock.vue
index 96a5243..11bd874 100644
--- a/src/components/ChartBlock.vue
+++ b/src/components/ChartBlock.vue
@@ -13,6 +13,7 @@ import {
 } from 'chart.js'
 import { Line } from 'vue-chartjs'
 import 'chartjs-adapter-date-fns'
+import { originColors } from '@/services/colors.js'
 
 ChartJS.register(
   Title,
@@ -33,11 +34,6 @@ const props = defineProps({
   },
 })
 
-const originColors = {
-  surugaya: '#2d3081',
-  mandarake: '#924646',
-}
-
 const chartData = ref({
   datasets: [],
 })
diff --git a/src/services/colors.js b/src/services/colors.js
new file mode 100644
index 0000000..c337f2a
--- /dev/null
+++ b/src/services/colors.js
@@ -0,0 +1,4 @@
+export const originColors = {
+  surugaya: '#2d3081',
+  mandarake: '#924646',
+};
diff --git a/src/views/ZeroPricesView.vue b/src/views/ZeroPricesView.vue
index 6e5820e..82d41a5 100644
--- a/src/views/ZeroPricesView.vue
+++ b/src/views/ZeroPricesView.vue
@@ -1,69 +1,20 @@
 <script setup>
-import { onMounted, ref } from 'vue'
-import { useZeroPrices } from '@/api/zeroPrices.js'
-import ZeroPriceCard from '@/views/ZeroPricesView/ZeroPriceCard.vue'
-import ZeroPricesToolbar from '@/views/ZeroPricesView/ZeroPricesToolbar.vue'
-
-const { getZeroPrices } = useZeroPrices()
-
-const zeroPrices = ref([])
-const toDelete = ref([])
-
-const handleToggle = ({ id, merch_uuid, checked }) => {
-  if (checked) {
-    toDelete.value.push({ id, merch_uuid });
-  } else {
-    toDelete.value = toDelete.value.filter(item => item.id !== id);
-  }
-}
-
-const handleSelectAll = () => {
-  toDelete.value = zeroPrices.value.map(item => ({
-    id: item.id,
-    merch_uuid: item.merch_uuid
-  }))
-}
-
-const fetchZeroPrices = async () => {
-  try {
-    const response = await getZeroPrices()
-    zeroPrices.value = Array.isArray(response.data) ? response.data : []
-  } catch (error) {
-    console.error(error)
-  }
-}
-
-const handleDeleted = () => {
-  toDelete.value = []
-  fetchZeroPrices()
-}
-
-onMounted(() => {
-  fetchZeroPrices()
-})
+  import ScrollToTopButton from '@/components/ScrollToTopButton.vue'
+  import TargetZeroesTab from '@/views/ZeroPricesView/TargetZeroesTab.vue'
+  import PeriodSelectTab from '@/views/ZeroPricesView/PeriodSelectTab.vue'
 </script>
 
 <template>
-  <div v-if="zeroPrices.length === 0">
-    <n-h2 class="text-center">Zero prices</n-h2>
-    <n-h3 class="text-center">No data</n-h3>
-  </div>
-  <div v-else>
-    <div class="sticky-search-container">
-      <ZeroPricesToolbar
-        :selected="toDelete"
-        @deleted="handleDeleted"
-        @selectAll="handleSelectAll"
-      />
-    </div>
-    <div v-for="item in zeroPrices" :key="item.created_at">
-      <ZeroPriceCard
-        :zero-price="item"
-        @toggle="handleToggle"
-        :checked="toDelete.some(t => t.id === item.id)"
-      />
-    </div>
-  </div>
+  <n-tabs type="line" animated>
+    <n-tab-pane name="Target zeroes" tab="Target zeroes">
+      <TargetZeroesTab />
+    </n-tab-pane>
+    <n-tab-pane name="Period select" tab="Period select">
+      <PeriodSelectTab />
+    </n-tab-pane>
+  </n-tabs>
+  <ScrollToTopButton />
 </template>
 
-<style scoped></style>
+<style scoped>
+</style>

From 5639f8031c7a081084756a88034e84239ce8bd23 Mon Sep 17 00:00:00 2001
From: nquidox <nquidox@gmail.com>
Date: Sat, 6 Dec 2025 19:13:48 +0300
Subject: [PATCH 12/12] zero prices period select + delete, tabs refactor

---
 src/api/zeroPrices.js                        | 15 ++++-
 src/views/ZeroPricesView/PeriodSelectTab.vue | 54 +++++++++++++++
 src/views/ZeroPricesView/TargetZeroesTab.vue | 71 ++++++++++++++++++++
 src/views/ZeroPricesView/ZeroPriceCard.vue   | 21 +++++-
 4 files changed, 159 insertions(+), 2 deletions(-)
 create mode 100644 src/views/ZeroPricesView/PeriodSelectTab.vue
 create mode 100644 src/views/ZeroPricesView/TargetZeroesTab.vue

diff --git a/src/api/zeroPrices.js b/src/api/zeroPrices.js
index c69efd1..a7db41a 100644
--- a/src/api/zeroPrices.js
+++ b/src/api/zeroPrices.js
@@ -15,13 +15,26 @@ export const useZeroPrices = () => {
       await apiClient.delete('/merch/zeroprices', list)
     }
     catch (error) {
-      console.log('Delete zero prices error: ', error)
+      console.log('Delete target zero prices error: ', error)
       throw error
     }
   }
 
+  const deleteZeroPricesPeriod = async (start, end) => {
+    const params = new URLSearchParams({ start, end }).toString()
+    const url = `/merch/zeroprices/period${params ? `?${params}` : ''}`
+    const response = await apiClient.delete(url)
+
+    if (response.status === 200) {
+      return response
+    } else {
+      console.log('Delete period select zero prices error: ', response)
+    }
+  }
+
   return {
     getZeroPrices,
     deleteZeroPrices,
+    deleteZeroPricesPeriod,
   }
 }
diff --git a/src/views/ZeroPricesView/PeriodSelectTab.vue b/src/views/ZeroPricesView/PeriodSelectTab.vue
new file mode 100644
index 0000000..4239f15
--- /dev/null
+++ b/src/views/ZeroPricesView/PeriodSelectTab.vue
@@ -0,0 +1,54 @@
+<script setup>
+import { ref, onMounted, computed } from 'vue'
+import { useZeroPrices } from '@/api/zeroPrices.js'
+
+const range = ref(null)
+
+const setTodayRange = () => {
+  const now = new Date()
+  const start = new Date(now.getFullYear(), now.getMonth(), now.getDate())
+  const end = new Date(start.getTime() + 24 * 60 * 60 * 1000)
+
+  range.value = [start.getTime(), end.getTime()]
+}
+
+onMounted(() => {
+  setTodayRange()
+})
+
+const toRFCtime = (timestamp) => {
+  return new Date(timestamp).toISOString()
+}
+
+const { deleteZeroPricesPeriod } = useZeroPrices()
+
+const deleteEnabled = computed(() => {
+  return range.value === null
+})
+
+const deletePeriod = async () => {
+  if (range.value !== null) {
+    const start = toRFCtime(range.value[0])
+    const end = toRFCtime(range.value[1])
+    await deleteZeroPricesPeriod(start, end)
+  } else {
+    console.log('Delete period select zero prices error')
+  }
+}
+
+
+</script>
+
+<template>
+  <n-date-picker
+    v-model:value="range"
+    type="datetimerange"
+    format="HH:mm:ss dd-MM-yyyy"
+    clearable
+  />
+  <div class="button-container-center">
+    <n-button class="center-button w360" type="error" :disabled="deleteEnabled" @click="deletePeriod">Delete</n-button>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/views/ZeroPricesView/TargetZeroesTab.vue b/src/views/ZeroPricesView/TargetZeroesTab.vue
new file mode 100644
index 0000000..ba71ba5
--- /dev/null
+++ b/src/views/ZeroPricesView/TargetZeroesTab.vue
@@ -0,0 +1,71 @@
+<script setup>
+import { onMounted, ref } from 'vue'
+import { useZeroPrices } from '@/api/zeroPrices.js'
+import ZeroPriceCard from '@/views/ZeroPricesView/ZeroPriceCard.vue'
+import ZeroPricesToolbar from '@/views/ZeroPricesView/ZeroPricesToolbar.vue'
+
+const { getZeroPrices } = useZeroPrices()
+
+const zeroPrices = ref([])
+const toDelete = ref([])
+
+const handleToggle = ({ id, merch_uuid, checked }) => {
+  if (checked) {
+    toDelete.value.push({ id, merch_uuid });
+  } else {
+    toDelete.value = toDelete.value.filter(item => item.id !== id);
+  }
+}
+
+const handleSelectAll = () => {
+  toDelete.value = zeroPrices.value.map(item => ({
+    id: item.id,
+    merch_uuid: item.merch_uuid
+  }))
+}
+
+const fetchZeroPrices = async () => {
+  try {
+    const response = await getZeroPrices()
+    zeroPrices.value = Array.isArray(response.data) ? response.data : []
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const handleDeleted = () => {
+  toDelete.value = []
+  fetchZeroPrices()
+}
+
+onMounted(() => {
+  fetchZeroPrices()
+})
+</script>
+
+<template>
+  <div v-if="zeroPrices.length === 0">
+    <n-h2 class="text-center">Zero prices</n-h2>
+    <n-h3 class="text-center">No data</n-h3>
+  </div>
+  <div v-else>
+    <div class="sticky-search-container">
+      <ZeroPricesToolbar
+        :selected="toDelete"
+        @deleted="handleDeleted"
+        @selectAll="handleSelectAll"
+      />
+    </div>
+    <div v-for="item in zeroPrices" :key="item.created_at">
+      <ZeroPriceCard
+        :zero-price="item"
+        @toggle="handleToggle"
+        :checked="toDelete.some(t => t.id === item.id)"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+
+</style>
diff --git a/src/views/ZeroPricesView/ZeroPriceCard.vue b/src/views/ZeroPricesView/ZeroPriceCard.vue
index 44236ee..32bd31f 100644
--- a/src/views/ZeroPricesView/ZeroPriceCard.vue
+++ b/src/views/ZeroPricesView/ZeroPriceCard.vue
@@ -1,4 +1,7 @@
 <script setup>
+import { computed } from 'vue'
+import { originColors } from '@/services/colors.js'
+
 const props = defineProps({
   zeroPrice: {
     type: Object,
@@ -19,6 +22,10 @@ const handleCheckboxChange = (newValue) => {
     checked: newValue,
   })
 }
+
+const currentOriginColor = computed(() => {
+  return originColors[props.zeroPrice.origin] || '#fff';
+});
 </script>
 
 <template>
@@ -31,7 +38,12 @@ const handleCheckboxChange = (newValue) => {
       </n-gi>
       <n-gi><strong>Name:</strong> {{ props.zeroPrice.name }}</n-gi>
       <n-gi><strong>Created:</strong> {{ props.zeroPrice.created_at }}</n-gi>
-      <n-gi><strong>Origin:</strong> {{ props.zeroPrice.origin }}</n-gi>
+      <n-gi
+        ><strong>Origin:</strong>
+        <span class="bordered" :style="{ borderColor: currentOriginColor }">
+          {{ props.zeroPrice.origin }}
+        </span>
+      </n-gi>
     </n-grid>
   </div>
 </template>
@@ -49,4 +61,11 @@ const handleCheckboxChange = (newValue) => {
   gap: 12px;
   border: 1px solid #e0e0e0;
 }
+
+.bordered {
+  border: 1px solid;
+  border-radius: 4px;
+  padding: 2px;
+  margin: 3px;
+}
 </style>