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 1/6] 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 2/6] 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 3/6] 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 4/6] 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 5/6] 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 6/6] 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>