fix: add product description editing and saving functionality

bo/components.d.ts

@@ -11,7 +11,6 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
-    Cart1: typeof import('./src/components/customer/Cart1.vue')['default']
     CartSelector: typeof import('./src/components/customer/CartSelector.vue')['default']
     CategoryMenu: typeof import('./src/components/inner/categoryMenu.vue')['default']
     Cs_PrivacyPolicyView: typeof import('./src/components/terms/cs_PrivacyPolicyView.vue')['default']
@@ -43,15 +42,12 @@ declare module 'vue' {
     UCard: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Card.vue')['default']
     UCheckbox: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Checkbox.vue')['default']
     UDrawer: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Drawer.vue')['default']
-    UDropdownMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/DropdownMenu.vue')['default']
     UForm: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Form.vue')['default']
     UFormField: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/FormField.vue')['default']
     UIcon: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/components/Icon.vue')['default']
     UInput: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Input.vue')['default']
     UInputNumber: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/InputNumber.vue')['default']
-    ULink: typeof import('./node_modules/@nuxt/ui/dist/runtime/vue/overrides/vue-router/Link.vue')['default']
     UModal: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Modal.vue')['default']
-    UNavigationMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/NavigationMenu.vue')['default']
     UPagination: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Pagination.vue')['default']
     USelect: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/Select.vue')['default']
     USelectMenu: typeof import('./node_modules/@nuxt/ui/dist/runtime/components/SelectMenu.vue')['default']

bo/src/components/TopBar.vue

@@ -11,14 +11,12 @@ const authStore = useAuthStore()
     class="fixed top-0 left-0 right-0 z-50 bg-white/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
     <div class="container mx-auto px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-14">
-        <!-- Logo -->
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
           <div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
-            <UIcon name="i-heroicons-clock" class="w-5 h-5" />
+            <UIcon name="carbon:ibm-webmethods-b2b-integration" class="w-5 h-5" />
           </div>
-          <span class="font-semibold text-gray-900 dark:text-white">TimeTracker</span>
+          <span class="font-semibold text-gray-900 dark:text-white">B2B</span>
         </RouterLink>
-        <!-- Right Side Actions -->
         <RouterLink :to="{ name: 'products-list' }">
           products list
         </RouterLink>
@@ -38,11 +36,8 @@ const authStore = useAuthStore()
           Carts
         </RouterLink>
         <div class="flex items-center gap-2">
-          <!-- Language Switcher -->
           <LangSwitch />
-          <!-- Theme Switcher -->
           <ThemeSwitch />
-          <!-- Logout Button (only when authenticated) -->
           <button v-if="authStore.isAuthenticated" @click="authStore.logout()"
             class="px-3 py-1.5 text-sm font-medium text-black dark:text-white hover:text-black dark:hover:text-white hover:bg-gray-100 dark:hover:bg-gray-600 rounded-lg transition-colors border border-(--border-light) dark:border-(--border-dark)">
             {{ $t('general.logout') }}

bo/src/components/TopBarLogin.vue

@@ -11,18 +11,14 @@ const authStore = useAuthStore()
     class="fixed top-0 left-0 right-0 z-50 bg-(--main-light)/80 dark:bg-(--black) backdrop-blur-md border-b border-(--border-light) dark:border-(--border-dark)">
     <div class="container px-4 sm:px-6 lg:px-8">
       <div class="flex items-center justify-between h-14">
-        <!-- Logo -->
         <RouterLink :to="{ name: 'home' }" class="flex items-center gap-2">
           <div class="w-8 h-8 rounded-lg bg-primary text-white flex items-center justify-center">
             <UIcon name="carbon:ibm-webmethods-b2b-integration" class="w-5 h-5" />
           </div>
           <span class="font-semibold text-gray-900 dark:text-white">B2B</span>
         </RouterLink>
-        <!-- Right Side Actions -->
         <div class="flex items-center gap-2">
-          <!-- Language Switcher -->
           <LangSwitch />
-          <!-- Theme Switcher -->
           <ThemeSwitch />
         </div>
       </div>

bo/src/components/admin/PageProductsList.vue

@@ -9,7 +9,7 @@
                             <span>{{ item.name }}</span>
                         </div>
                     </template>
-</UNavigationMenu> -->
+                </UNavigationMenu> -->
                 {{ filters }}
                 <h1 class="text-2xl font-bold mb-6 text-gray-900 dark:text-white">Products</h1>
                 <div v-if="loading" class="text-center py-8">
@@ -39,19 +39,18 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, watch, h, resolveComponent, computed } from 'vue'
+import { ref, watch, h, resolveComponent, computed } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
 import Default from '@/layouts/default.vue'
 import { useRoute, useRouter } from 'vue-router'
 import type { TableColumn } from '@nuxt/ui'
-import { log } from 'console'
-
 interface Product {
     reference: number
     product_id: number
     name: string
     image_link: string
     link_rewrite: string
+    quantity: number
 }
 
 const router = useRouter()
@@ -136,7 +135,7 @@ async function fetchProductList() {
     try {
         const response = await useFetchJson<ApiResponse>(url)
 
-        productsList.value = response.items || []
+        productsList.value = (response as unknown as { items: Product[] }).items || []
         total.value = response.count || 0
     } catch (e: unknown) {
         error.value = e instanceof Error ? e.message : 'Failed to load products'
@@ -145,15 +144,16 @@ async function fetchProductList() {
     }
 }
 
-function goToProduct(productId: number) {
+function goToProduct(productId: number, imageLink: string) {
     router.push({
         name: 'product-detail',
-        params: { id: productId }
+        params: { id: productId },
+        query: { image: imageLink }
     })
 }
 
 const selectedCount = ref({
-    product_id: null,
+    product_id: null as number | null,
     count: 0
 })
 
@@ -170,7 +170,7 @@ const UInput = resolveComponent('UInput')
 const UButton = resolveComponent('UButton')
 const UIcon = resolveComponent('UIcon')
 
-const columns: TableColumn<Payment>[] = [
+const columns: TableColumn<Product>[] = [
     {
         id: 'expand',
         cell: ({ row }) =>
@@ -219,8 +219,13 @@ const columns: TableColumn<Payment>[] = [
                 })
             ])
         },
-        // header: '#',
-        cell: ({ row }) => `#${row.getValue('product_id') as number}`
+        cell: ({ row }) => h('span', {
+            class: 'cursor-pointer text-blue-500 hover:underline',
+            onClick: (e: Event) => {
+                e.stopPropagation()
+                goToProduct(row.original.product_id, row.original.image_link)
+            }
+        }, `#${row.getValue('product_id') as number}`)
     },
     {
         accessorKey: 'image_link',
@@ -262,7 +267,13 @@ const columns: TableColumn<Payment>[] = [
                 })
             ])
         },
-        cell: ({ row }) => row.getValue('name') as string,
+        cell: ({ row }) => h('span', {
+            class: 'cursor-pointer text-blue-500 hover:underline',
+            onClick: (e: Event) => {
+                e.stopPropagation()
+                goToProduct(row.original.product_id, row.original.image_link)
+            }
+        }, row.getValue('name') as string),
         filterFn: (row, columnId, value) => {
             const name = row.getValue(columnId) as string
             return name.toLowerCase().includes(value.toLowerCase())
@@ -327,11 +338,17 @@ const columns: TableColumn<Payment>[] = [
     }
 ]
 
-const columnsChild: TableColumn<Payment>[] = [
+const columnsChild: TableColumn<Product>[] = [
     {
         accessorKey: 'product_id',
         header: '',
-        cell: ({ row }) => `#${row.getValue('product_id') as number}`
+        cell: ({ row }) => h('span', {
+            class: 'cursor-pointer text-blue-500 hover:underline',
+            onClick: (e: Event) => {
+                e.stopPropagation()
+                goToProduct(row.original.product_id, row.original.image_link)
+            }
+        }, `#${row.getValue('product_id') as number}`)
     },
     {
         accessorKey: 'image_link',
@@ -346,7 +363,13 @@ const columnsChild: TableColumn<Payment>[] = [
     {
         accessorKey: 'name',
         header: '',
-        cell: ({ row }) => row.getValue('name') as string
+        cell: ({ row }) => h('span', {
+            class: 'cursor-pointer text-blue-500 hover:underline',
+            onClick: (e: Event) => {
+                e.stopPropagation()
+                goToProduct(row.original.product_id, row.original.image_link)
+            }
+        }, row.getValue('name') as string)
     },
     {
         accessorKey: 'quantity',
@@ -393,7 +416,7 @@ const columnsChild: TableColumn<Payment>[] = [
     }
 ]
 
-watch([page, sortField, filters.value], () => {
+watch([page, sortField, filters], () => {
     fetchProductList()
 }, { immediate: true })
 </script>

bo/src/components/admin/ProductDetailView.vue

@@ -1,127 +1,127 @@
 <template>
-  
+
   <component :is="Default || 'div'">
-  <div class="container my-10 mx-auto ">
-
-    <div
-      class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
-      <div class="flex items-end gap-3">
-        <USelect v-model="selectedLanguage" :items="availableLangs" variant="outline" class="w-40!" valueKey="iso_code">
-          <template #default="{ modelValue }">
-            <div class="flex items-center gap-2">
-              <span class="text-md">{{availableLangs.find(x => x.iso_code == modelValue)?.flag}}</span>
-              <span class="font-medium dark:text-white text-black">{{availableLangs.find(x => x.iso_code ==
-                modelValue)?.name}}</span>
-            </div>
-          </template>
-          <template #item-leading="{ item }">
-            <div class="flex items-center rounded-md cursor-pointer transition-colors">
-              <span class="text-md">{{ item.flag }}</span>
-              <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
-            </div>
-          </template>
-        </USelect>
+    <div class="container my-10 mx-auto ">
+      <div
+        class="flex items-end justify-between gap-4 mb-6 bg-(--second-light) dark:bg-(--main-dark) border border-(--border-light) dark:border-(--border-dark) p-4 rounded-md">
+        <div class="flex items-end gap-3">
+          <USelect v-model="selectedLanguage" :items="availableLangs" variant="outline" class="w-40!"
+            valueKey="iso_code">
+            <template #default="{ modelValue }">
+              <div class="flex items-center gap-2">
+                <span class="text-md">{{availableLangs.find(x => x.iso_code == modelValue)?.flag}}</span>
+                <span class="font-medium dark:text-white text-black">{{availableLangs.find(x => x.iso_code ==
+                  modelValue)?.name}}</span>
+              </div>
+            </template>
+            <template #item-leading="{ item }">
+              <div class="flex items-center rounded-md cursor-pointer transition-colors">
+                <span class="text-md">{{ item.flag }}</span>
+                <span class="ml-2 dark:text-white text-black font-medium">{{ item.name }}</span>
+              </div>
+            </template>
+          </USelect>
+        </div>
+        <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
+          class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
+          Translate
+        </UButton>
       </div>
-      <UButton @click="translateToSelectedLanguage" color="primary" :loading="translating"
-        class="text-white bg-(--accent-blue-light) dark:bg-(--accent-blue-dark) px-12!">
-        Translate
-      </UButton>
-    </div>
 
-    <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
-      <div class="flex flex-col items-center gap-4 p-8 bg-(--main-light) dark:bg-(--main-dark) rounded-lg shadow-xl">
+      <div v-if="translating" class="fixed inset-0 z-50 flex items-center justify-center bg-black/50">
+        <div class="flex flex-col items-center gap-4 p-8 bg-(--main-light) dark:bg-(--main-dark) rounded-lg shadow-xl">
+          <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
+          <p class="text-lg font-medium dark:text-white text-black">Translating...</p>
+        </div>
+      </div>
+
+      <div v-if="productStore.loading" class="flex items-center justify-center py-20">
         <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
-        <p class="text-lg font-medium dark:text-white text-black">Translating...</p>
       </div>
-    </div>
-
-    <div v-if="productStore.loading" class="flex items-center justify-center py-20">
-      <UIcon name="svg-spinners:ring-resize" class="text-4xl text-primary" />
-    </div>
-    <div v-else-if="productStore.error" class="flex items-center justify-center py-20">
-      <p class="text-red-500">{{ productStore.error }}</p>
-    </div>
-    <div v-else-if="productStore.productDescription" class="flex items-start gap-30">
-      <div class="w-80 h-80 bg-(--second-light) dark:bg-gray-700 rounded-lg flex items-center justify-center">
-        <span class="text-gray-500 dark:text-gray-400">Product Image</span>
+      <div v-else-if="productStore.error" class="flex items-center justify-center py-20">
+        <p class="text-red-500">{{ productStore.error }}</p>
       </div>
-      <div class="flex flex-col gap-2">
-        <p class="text-[25px] font-bold text-black dark:text-white">
-          {{ productStore.productDescription.name || 'Product Name' }}
-        </p>
-        <p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
-        <div class="space-y-[10px]">
-          <div class="flex items-center gap-1">
-            <UIcon name="lets-icons:done-ring-round-fill" class="text-[20px] text-green-600" />
-            <p class="text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
-              {{ productStore.productDescription.available_now }}
-            </p>
+      <div v-else-if="productStore.productDescription" class="flex items-start gap-30">
+        <img v-if="imageUrl" :src="imageUrl as string" class="w-[60%]" />
+        <div class="flex flex-col gap-2">
+          <p class="text-[25px] font-bold text-black dark:text-white">
+            {{ productStore.productDescription.name || 'Product Name' }}
+          </p>
+          <p v-html="productStore.productDescription.description_short" class="text-black dark:text-white"></p>
+          <div class="space-y-[10px]">
+            <div class="flex items-center gap-1">
+              <UIcon name="lets-icons:done-ring-round-fill" class="text-[20px] text-green-600" />
+              <p class="text-[16px] font-bold text-(--accent-blue-light) dark:text-(--accent-blue-dark)">
+                {{ productStore.productDescription.available_now }}
+              </p>
+            </div>
+            <div class="flex items-center gap-1">
+              <UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
+              <p class="text-[18px] font-bold text-black dark:text-white">
+                {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
+              </p>
+            </div>
           </div>
-          <div class="flex items-center gap-1">
-            <UIcon name="marketeq:car-shipping" class="text-[25px] text-green-600" />
-            <p class="text-[18px] font-bold text-black dark:text-white">
-              {{ productStore.productDescription.delivery_in_stock || 'Delivery information' }}
-            </p>
+        </div>
+      </div>
+
+      <div v-if="productStore.productDescription" class="mt-16">
+        <div class="flex gap-4 my-6">
+          <UButton @click="activeTab = 'description'"
+            :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
+            variant="outline">
+            <p class="dark:text-white">Description</p>
+          </UButton>
+
+          <UButton @click="activeTab = 'usage'"
+            :class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
+            variant="outline">
+            <p class="dark:text-white">Usage</p>
+          </UButton>
+        </div>
+
+        <div v-if="activeTab === 'usage'"
+          class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
+
+          <div class="flex justify-end items-center gap-3 mb-4">
+            <UButton v-if="!isEditing" @click="enableEdit"
+              class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
+              <p class="text-white">Change Text</p>
+              <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+            </UButton>
+            <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
+              <p class="dark:text-white text-black">Save the edited text</p>
+            </UButton>
+            <UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline"
+              class="p-2.5 cursor-pointer">
+              Cancel
+            </UButton>
+          </div>
+          <p ref="usageRef" v-html="productStore.productDescription.usage"
+            class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
+        </div>
+
+        <div v-if="activeTab === 'description'"
+          class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
+          <div class="flex items-center justify-end gap-3 mb-4">
+            <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
+              class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
+              <p class="text-white">Change Text</p>
+              <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
+            </UButton>
+            <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline"
+              class="p-2.5 cursor-pointer">
+              <p class="dark:text-white text-black ">Save the edited text</p>
+            </UButton>
+            <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral"
+              variant="outline" class="p-2.5 cursor-pointer">Cancel</UButton>
+          </div>
+          <div ref="descriptionRef" v-html="productStore.productDescription.description"
+            class="flex flex-col justify-center dark:text-white text-black">
           </div>
         </div>
       </div>
     </div>
-
-    <div v-if="productStore.productDescription" class="mt-16">
-      <div class="flex gap-4 my-6">
-        <UButton @click="activeTab = 'description'"
-          :class="['cursor-pointer', activeTab === 'description' ? 'bg-blue-500 text-white' : '']" color="neutral"
-          variant="outline">
-          <p class="dark:text-white">Description</p>
-        </UButton>
-
-        <UButton @click="activeTab = 'usage'"
-          :class="['cursor-pointer', activeTab === 'usage' ? 'bg-blue-500 text-white' : '']" color="neutral"
-          variant="outline">
-          <p class="dark:text-white">Usage</p>
-        </UButton>
-      </div>
-
-      <div v-if="activeTab === 'usage'"
-        class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
-
-        <div class="flex justify-end items-center gap-3 mb-4">
-          <UButton v-if="!isEditing" @click="enableEdit"
-            class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-            <p class="text-white">Change Text</p>
-            <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
-          </UButton>
-          <UButton v-if="isEditing" @click="saveText" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
-            <p class="dark:text-white text-black">Save the edited text</p>
-          </UButton>
-          <UButton v-if="isEditing" @click="cancelEdit" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
-            Cancel
-          </UButton>
-        </div>
-        <p ref="usageRef" v-html="productStore.productDescription.usage"
-          class="flex flex-col justify-center w-full text-start dark:text-white! text-black!"></p>
-
-      </div>
-
-      <div v-if="activeTab === 'description'"
-        class="px-8 py-4 border border-(--border-light) dark:border-(--border-dark) rounded-md bg-(--second-light) dark:bg-(--main-dark)">
-        <div class="flex items-center justify-end gap-3 mb-4">
-          <UButton v-if="!descriptionEdit.isEditing.value" @click="enableDescriptionEdit"
-            class="flex items-center gap-2 m-2 cursor-pointer bg-(--accent-blue-light)! dark:bg-(--accent-blue-dark)!">
-            <p class="text-white">Change Text</p>
-            <UIcon name="material-symbols-light:stylus-note-sharp" class="text-[30px] text-white!" />
-          </UButton>
-          <UButton v-if="descriptionEdit.isEditing.value" @click="saveDescription" color="neutral" variant="outline" class="p-2.5 cursor-pointer">
-            <p class="dark:text-white text-black ">Save the edited text</p>
-          </UButton>
-          <UButton v-if="descriptionEdit.isEditing.value" @click="cancelDescriptionEdit" color="neutral" variant="outline" class="p-2.5 cursor-pointer">Cancel</UButton>
-        </div>
-        <div ref="descriptionRef" v-html="productStore.productDescription.description"
-          class="flex flex-col justify-center dark:text-white text-black">
-        </div>
-      </div>
-    </div>
-  </div>
   </component>
 </template>
 
@@ -148,7 +148,10 @@ const selectedLanguage = ref('pl')
 const currentLangId = ref(2)
 const productID = ref<number>(0)
 
-// Watch for language changes and refetch product description
+const imageUrl = computed(() => {
+  return route.query.image ? String(route.query.image) : ''
+})
+
 watch(selectedLanguage, async (newLang: string) => {
   if (productID.value) {
     await fetchForLanguage(newLang)
@@ -194,10 +197,14 @@ const originalDescription = ref('')
 const originalUsage = ref('')
 
 const saveDescription = async () => {
-  descriptionEdit.disableEdit()
-  await productStore.saveProductDescription(productID.value)
-}
+  if (descriptionRef.value) {
+    productStore.productDescription.description = descriptionRef.value.innerHTML
+  }
 
+  descriptionEdit.disableEdit()
+
+  await productStore.saveProductDescription(productID.value, currentLangId.value)
+}
 const cancelDescriptionEdit = () => {
   if (descriptionRef.value) {
     descriptionRef.value.innerHTML = originalDescription.value
@@ -221,9 +228,14 @@ const enableEdit = () => {
 }
 
 const saveText = () => {
+  if (usageRef.value) {
+    productStore.productDescription.usage = usageRef.value.innerHTML
+  }
+
   usageEdit.disableEdit()
   isEditing.value = false
-  productStore.saveProductDescription(productID.value)
+
+  productStore.saveProductDescription(productID.value, currentLangId.value)
 }
 
 const cancelEdit = () => {
@@ -233,14 +245,5 @@ const cancelEdit = () => {
   usageEdit.disableEdit()
   isEditing.value = false
 }
-
 </script>
 
-<style>
-.images {
-  display: flex;
-  align-items: center;
-  gap: 70px;
-  margin: 20px 0 20px 0;
-}
-</style>

bo/src/components/admin/ProductsView.vue

@@ -158,26 +158,20 @@ function clearFilters() {
   <div class="container">
     <div class="p-6 bg-white dark:bg-(--black) min-h-screen font-sans">
       <div>
-        <!-- v-html="productStore.products" -->
       </div>
       <h1 class="text-2xl font-bold mb-6 text-black dark:text-white">{{ t('products.title') }}</h1>
 
       <div v-if="!authStore.isAuthenticated" class="mb-4 p-3 bg-yellow-100 text-yellow-700 rounded">
         {{ t('products.login_to_view') }}
       </div>
-
-      <!-- Loading State -->
       <div v-if="productStore.loading" class="mb-4 p-3 bg-blue-100 text-blue-700 rounded">
         {{ t('products.loading') }}...
       </div>
-
-      <!-- Error State -->
       <div v-if="productStore.error" class="mb-4 p-3 bg-red-100 text-red-700 rounded">
         {{ productStore.error }}
       </div>
 
       <div v-if="authStore.isAuthenticated && !productStore.loading && !productStore.error" class="space-y-4">
-        <!-- Filter Block -->
         <div
           class="flex flex-wrap gap-4 mb-4 p-4 border border-(--border-light) dark:border-(--border-dark) rounded bg-gray-50 dark:bg-gray-800">
           <div class="flex flex-col min-w-[180px]">

bo/src/router/index.ts

@@ -25,7 +25,7 @@ const router = createRouter({
       path: '/:locale',
       children: [
         { path: 'category/:category_id-:link_rewrite', component: () => import('@/views/CategoryView.vue'), name: 'category' },
-        { path: 'products-datail', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
+        { path: 'products-detail/:id(\\d+)?', component: () => import('@/components/admin/ProductDetailView.vue'), name: 'product-detail' },
         { path: '', component: () => import('@/views/RepoChartView.vue'), name: 'home' },
         { path: 'products', component: () => import('@/components/admin/ProductsView.vue'), name: 'products' },
         { path: 'product-card-full', component: () => import('@/components/customer/PageProductCardFull.vue'), name: 'product-card-full' },
@@ -116,3 +116,4 @@ router.beforeEach((to, from) => {
 })
 
 export default router
+

bo/src/stores/product.ts

@@ -2,6 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { useFetchJson } from '@/composable/useFetchJson'
 import type { ProductDescription } from '@/types/product'
+import { currentLang } from '@/router/langs'
 
 export interface Product {
   id: number
@@ -34,33 +35,43 @@ export const useProductStore = defineStore('product', () => {
 
     try {
       const response = await useFetchJson<ProductDescription>(
-        `/api/v1/restricted/product-description/get-product-description?productID=${productID}&productLangID=${langId}`
+        `/api/v1/restricted/product-translation/get-product-description?productID=${productID}&productLangID=${langId}`,
       )
-      console.log(response, 'dfsfsdf');
       productDescription.value = response.items
-      
+      console.log(productDescription, 'dfsfsdf');
+
     } catch (e: unknown) {
       error.value = e instanceof Error ? e.message : 'Failed to load product description'
     } finally {
       loading.value = false
     }
   }
-
-  async function saveProductDescription(productID?: number) {
+  function stripHtml(html: string) {
+    const div = document.createElement('div')
+    div.innerHTML = html
+    return div.textContent || div.innerText || ''
+  }
+  async function saveProductDescription(productID?: number, langId?: number) {
     const id = productID || 1
+    const lang = langId || 1
     try {
       const data = await useFetchJson(
-        `/api/v1/restricted/product-description/save-product-description?productID=${id}&productShopID=1&productLangID=1`,
+        `/api/v1/restricted/product-translation/save-product-description?productID=${id}&productLangID=${lang}`,
         {
           method: 'POST',
-          body: JSON.stringify(
-            {
-              description: productDescription.value.description,
-              description_short: productDescription.value.description_short,
-              meta_description: productDescription.value.meta_description,
-              available_now: productDescription.value.available_now,
-              usage: productDescription.value.usage
-            })
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            name: stripHtml(productDescription.value?.name || ''),
+            description: stripHtml(productDescription.value?.description || ''),
+            description_short: stripHtml(productDescription.value?.description_short || ''),
+            meta_title: stripHtml(productDescription.value?.meta_title || ''),
+            meta_description: stripHtml(productDescription.value?.meta_description || ''),
+            available_now: stripHtml(productDescription.value?.available_now || ''),
+            available_later: stripHtml(productDescription.value?.available_later || ''),
+            usage: stripHtml(productDescription.value?.usage || '')
+          })
         }
       )
       return data
@@ -69,12 +80,12 @@ export const useProductStore = defineStore('product', () => {
     }
   }
 
-  async function translateProductDescription(productID: number, fromLangId: number, toLangId: number) {
+  async function translateProductDescription(productID: number, fromLangId: number, toLangId: number, model: string = 'OpenAI') {
     loading.value = true
     error.value = null
 
     try {
-      const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-description/translate-product-description?productID=${productID}&productShopID=1&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=OpenAI`)
+      const response = await useFetchJson<ProductDescription>(`/api/v1/restricted/product-translation/translate-product-description?productID=${productID}&productFromLangID=${fromLangId}&productToLangID=${toLangId}&model=${model}`)
       productDescription.value = response.items
       return response.items
     } catch (e: any) {