From 4a0ae8aa45ca5ab0f5ad448a7f9bae64bb166623 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Wed, 10 Apr 2024 17:18:57 -0300
Subject: [PATCH 1/5] Item summary

---
 src/i18n/en/index.js                        |  41 +++-
 src/i18n/es/index.js                        |  35 +++
 src/pages/Item/Card/ItemBarcode.vue         |   1 +
 src/pages/Item/Card/ItemBasicData.vue       |   1 +
 src/pages/Item/Card/ItemBotanical.vue       |   1 +
 src/pages/Item/Card/ItemDescriptor.vue      | 108 +--------
 src/pages/Item/Card/ItemDescriptorImage.vue | 159 ++++++++++++++
 src/pages/Item/Card/ItemSummary.vue         | 232 +++++++++++++++++++-
 src/pages/Item/Card/ItemTax.vue             |   1 +
 src/pages/Item/ItemList.vue                 |   2 +-
 src/router/modules/item.js                  |  64 +++++-
 11 files changed, 529 insertions(+), 116 deletions(-)
 create mode 100644 src/pages/Item/Card/ItemBarcode.vue
 create mode 100644 src/pages/Item/Card/ItemBasicData.vue
 create mode 100644 src/pages/Item/Card/ItemBotanical.vue
 create mode 100644 src/pages/Item/Card/ItemDescriptorImage.vue
 create mode 100644 src/pages/Item/Card/ItemTax.vue

diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index cd61d46ff..c4affad71 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -1213,9 +1213,13 @@ export default {
         pageTitles: {
             items: 'Items',
             list: 'List',
-            diary: 'Diary',
-            tags: 'Tags',
-            create: 'Create',
+            diary: 'Histórico',
+            tags: 'Etiquetas',
+            create: 'Crear',
+            basicData: 'Datos básicos',
+            tax: 'IVA',
+            botanical: 'Botánico',
+            barcode: 'Código de barras',
         },
         descriptor: {
             item: 'Item',
@@ -1246,6 +1250,37 @@ export default {
             producer: 'Producer',
             landed: 'Landed',
         },
+        summary: {
+            basicData: 'Datos básicos',
+            otherData: 'Otros datos',
+            description: 'Descripción',
+            tax: 'IVA',
+            tags: 'Etiquetas',
+            botanical: 'Botánico',
+            barcode: 'Código de barras',
+            name: 'Nombre',
+            completeName: 'Nombre completo',
+            family: 'Familia',
+            size: 'Medida',
+            origin: 'Origen',
+            stems: 'Tallos',
+            multiplier: 'Multiplicador',
+            buyer: 'Comprador',
+            doPhoto: 'Hacer foto',
+            intrastatCode: 'Código intrastat',
+            intrastat: 'Intrastat',
+            ref: 'Referencia',
+            relevance: 'Relevancia',
+            weight: 'Peso (gramos)/tallo',
+            units: 'Unidades/caja',
+            expense: 'Gasto',
+            generic: 'Genérico',
+            recycledPlastic: 'Plástico reciclado',
+            nonRecycledPlastic: 'Plástico no reciclado',
+            minSalesQuantity: 'Cantidad mínima de venta',
+            genus: 'Genus',
+            specie: 'Specie',
+        },
     },
     components: {
         topbar: {},
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 08fb809b2..01263f224 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -1215,6 +1215,10 @@ export default {
             diary: 'Histórico',
             tags: 'Etiquetas',
             create: 'Crear',
+            basicData: 'Datos básicos',
+            tax: 'IVA',
+            botanical: 'Botánico',
+            barcode: 'Código de barras',
         },
         descriptor: {
             item: 'Artículo',
@@ -1245,6 +1249,37 @@ export default {
             producer: 'Productor',
             landed: 'F. entrega',
         },
+        summary: {
+            basicData: 'Datos básicos',
+            otherData: 'Otros datos',
+            description: 'Descripción',
+            tax: 'IVA',
+            tags: 'Etiquetas',
+            botanical: 'Botánico',
+            barcode: 'Código de barras',
+            name: 'Nombre',
+            completeName: 'Nombre completo',
+            family: 'Familia',
+            size: 'Medida',
+            origin: 'Origen',
+            stems: 'Tallos',
+            multiplier: 'Multiplicador',
+            buyer: 'Comprador',
+            doPhoto: 'Hacer foto',
+            intrastatCode: 'Código intrastat',
+            intrastat: 'Intrastat',
+            ref: 'Referencia',
+            relevance: 'Relevancia',
+            weight: 'Peso (gramos)/tallo',
+            units: 'Unidades/caja',
+            expense: 'Gasto',
+            generic: 'Genérico',
+            recycledPlastic: 'Plástico reciclado',
+            nonRecycledPlastic: 'Plástico no reciclado',
+            minSalesQuantity: 'Cantidad mínima de venta',
+            genus: 'Genus',
+            specie: 'Specie',
+        },
     },
     components: {
         topbar: {},
diff --git a/src/pages/Item/Card/ItemBarcode.vue b/src/pages/Item/Card/ItemBarcode.vue
new file mode 100644
index 000000000..e4366a11b
--- /dev/null
+++ b/src/pages/Item/Card/ItemBarcode.vue
@@ -0,0 +1 @@
+<template>Item barcode</template>
diff --git a/src/pages/Item/Card/ItemBasicData.vue b/src/pages/Item/Card/ItemBasicData.vue
new file mode 100644
index 000000000..334cf049d
--- /dev/null
+++ b/src/pages/Item/Card/ItemBasicData.vue
@@ -0,0 +1 @@
+<template>Item basic data</template>
diff --git a/src/pages/Item/Card/ItemBotanical.vue b/src/pages/Item/Card/ItemBotanical.vue
new file mode 100644
index 000000000..a2a39d9df
--- /dev/null
+++ b/src/pages/Item/Card/ItemBotanical.vue
@@ -0,0 +1 @@
+<template>Item Botanical</template>
diff --git a/src/pages/Item/Card/ItemDescriptor.vue b/src/pages/Item/Card/ItemDescriptor.vue
index 981de0632..59ac9adf9 100644
--- a/src/pages/Item/Card/ItemDescriptor.vue
+++ b/src/pages/Item/Card/ItemDescriptor.vue
@@ -9,7 +9,7 @@ import VnLv from 'src/components/ui/VnLv.vue';
 import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
 import VnConfirm from 'components/ui/VnConfirm.vue';
 import RegularizeStockForm from 'components/RegularizeStockForm.vue';
-import EditPictureForm from 'components/EditPictureForm.vue';
+import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
 
 import { useState } from 'src/composables/useState';
 import useCardDescription from 'src/composables/useCardDescription';
@@ -50,12 +50,10 @@ const entityId = computed(() => {
 });
 const image = ref(null);
 const regularizeStockFormDialog = ref(null);
-const editPhotoFormDialog = ref(null);
 const item = ref(null);
 const available = ref(null);
 const visible = ref(null);
 const _warehouseFk = ref(null);
-const warehouseText = ref(null);
 const salixUrl = ref();
 const warehouseFk = computed({
     get() {
@@ -63,14 +61,9 @@ const warehouseFk = computed({
     },
     set(val) {
         _warehouseFk.value = val;
-        if (val) {
-            updateStock();
-            getWarehouseName(val);
-        }
+        if (val) updateStock();
     },
 });
-const showWarehouseIconTooltip = ref(true);
-const showEditPhotoForm = ref(false);
 
 onMounted(async () => {
     await getItemAvatar();
@@ -90,26 +83,6 @@ const setData = (entity) => {
     data.value = useCardDescription(entity.name, entity.id);
 };
 
-const getWarehouseName = async (warehouseFk) => {
-    try {
-        showWarehouseIconTooltip.value = false;
-
-        const filter = {
-            where: { id: warehouseFk },
-        };
-
-        const { data } = await axios.get('Warehouses/findOne', { filter });
-
-        warehouseText.value = t('item.descriptor.warehouseText', {
-            warehouseName: data.name,
-        });
-
-        showWarehouseIconTooltip.value = true;
-    } catch (err) {
-        console.error('Error finding warehouse');
-    }
-};
-
 const updateStock = async () => {
     try {
         available.value = null;
@@ -135,10 +108,6 @@ const openRegularizeStockForm = () => {
     regularizeStockFormDialog.value.show();
 };
 
-const toggleEditPictureForm = () => {
-    showEditPhotoForm.value = !showEditPhotoForm.value;
-};
-
 const cloneItem = async () => {
     try {
         const { data } = await axios.post(`Items/${entityId.value}/clone`);
@@ -198,74 +167,11 @@ const openCloneDialog = async () => {
             </QItem>
         </template>
         <template #before>
-            <div class="relative-position">
-                <QImg :src="image" spinner-color="primary" class="photo">
-                    <template #error>
-                        <div
-                            class="absolute-full picture text-center q-pa-md flex flex-center"
-                        >
-                            <div>
-                                <div
-                                    class="text-grey-5"
-                                    style="opacity: 0.4; font-size: 5vh"
-                                >
-                                    <QIcon name="vn:item" />
-                                </div>
-                                <div class="text-grey-5" style="opacity: 0.4">
-                                    {{ t('item.descriptor.item') }}
-                                </div>
-                            </div>
-                        </div>
-                    </template>
-                </QImg>
-                <QBtn
-                    color="primary"
-                    size="lg"
-                    round
-                    class="edit-photo-btn"
-                    @click="toggleEditPictureForm()"
-                >
-                    <QIcon name="edit" size="sm" />
-                    <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
-                        <EditPictureForm
-                            collection="catalog"
-                            :id="entityId"
-                            @close-form="toggleEditPictureForm()"
-                            @on-photo-uploaded="getItemAvatar()"
-                        />
-                    </QDialog>
-                </QBtn>
-            </div>
-
-            <div
-                class="row justify-between items-center full-width bg-primary"
-                style="height: 54px"
-            >
-                <div class="col column items-center">
-                    <span class="text-uppercase color-vn-white" style="font-size: 11px">
-                        {{ t('item.descriptor.visible') }}
-                    </span>
-                    <span class="text-weight-bold text-h5 color-vn-white">{{
-                        visible
-                    }}</span>
-                </div>
-                <div
-                    class="col column items-center separation-borders"
-                    style="font-size: 11px"
-                >
-                    <span class="text-uppercase color-vn-white">
-                        {{ t('item.descriptor.available') }}
-                    </span>
-                    <span class="text-weight-bold text-h5 color-vn-white">{{
-                        available
-                    }}</span>
-                </div>
-                <div class="col column items-center justify-center">
-                    <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
-                        <QTooltip>{{ warehouseText }}</QTooltip>
-                    </QIcon>
-                </div>
-            </div>
+            <ItemDescriptorImage
+                :entity-id="entityId"
+                :visible="visible"
+                :available="available"
+            />
         </template>
         <template #body="{ entity }">
             <VnLv :label="t('item.descriptor.buyer')">
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
new file mode 100644
index 000000000..827e9096a
--- /dev/null
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -0,0 +1,159 @@
+<script setup>
+import { ref, onMounted } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+import EditPictureForm from 'components/EditPictureForm.vue';
+
+import { useSession } from 'src/composables/useSession';
+import axios from 'axios';
+
+const $props = defineProps({
+    visible: {
+        type: Number,
+        default: null,
+    },
+    available: {
+        type: Number,
+        default: null,
+    },
+    entityId: {
+        type: String,
+        default: null,
+    },
+    showEditButton: {
+        type: Boolean,
+        default: true,
+    },
+});
+
+const { t } = useI18n();
+const { getTokenMultimedia } = useSession();
+
+const image = ref(null);
+const editPhotoFormDialog = ref(null);
+const showEditPhotoForm = ref(false);
+const warehouseName = ref(null);
+
+const getItemAvatar = async () => {
+    const token = getTokenMultimedia();
+    const timeStamp = `timestamp=${Date.now()}`;
+    image.value = `/api/Images/catalog/200x200/${$props.entityId}/download?access_token=${token}&${timeStamp}`;
+};
+
+const toggleEditPictureForm = () => {
+    showEditPhotoForm.value = !showEditPhotoForm.value;
+};
+
+const getItemConfigs = async () => {
+    const { data } = await axios.get('ItemConfigs/findOne');
+    if (!data) return;
+    await getWarehouseName(data.warehouseFk);
+    return data;
+};
+
+const getWarehouseName = async (warehouseFk) => {
+    const filter = {
+        where: { id: warehouseFk },
+    };
+
+    const { data } = await axios.get('Warehouses/findOne', { filter });
+    if (!data) return;
+    warehouseName.value = data.name;
+};
+
+onMounted(async () => {
+    getItemAvatar();
+    getItemConfigs();
+});
+</script>
+
+<template>
+    <div class="relative-position">
+        <QImg :src="image" spinner-color="primary" style="min-height: 256px">
+            <template #error>
+                <div class="absolute-full picture text-center q-pa-md flex flex-center">
+                    <div>
+                        <div class="text-grey-5" style="opacity: 0.4; font-size: 5vh">
+                            <QIcon name="vn:item" />
+                        </div>
+                        <div class="text-grey-5" style="opacity: 0.4">
+                            {{ t('item.descriptor.item') }}
+                        </div>
+                    </div>
+                </div>
+            </template>
+        </QImg>
+        <QBtn
+            v-if="showEditButton"
+            color="primary"
+            size="lg"
+            round
+            class="edit-photo-btn"
+            @click="toggleEditPictureForm()"
+        >
+            <QIcon name="edit" size="sm" />
+            <QDialog ref="editPhotoFormDialog" v-model="showEditPhotoForm">
+                <EditPictureForm
+                    collection="catalog"
+                    :id="entityId"
+                    @close-form="toggleEditPictureForm()"
+                    @on-photo-uploaded="getItemAvatar()"
+                />
+            </QDialog>
+        </QBtn>
+    </div>
+
+    <div
+        class="row justify-between items-center full-width bg-primary"
+        style="height: 54px"
+    >
+        <div class="col column items-center">
+            <span class="text-uppercase color-vn-white" style="font-size: 11px">
+                {{ t('item.descriptor.visible') }}
+            </span>
+            <span class="text-weight-bold text-h5 color-vn-white">{{ visible }}</span>
+        </div>
+        <div class="col column items-center separation-borders" style="font-size: 11px">
+            <span class="text-uppercase color-vn-white">
+                {{ t('item.descriptor.available') }}
+            </span>
+            <span class="text-weight-bold text-h5 color-vn-white">{{ available }}</span>
+        </div>
+        <div class="col column items-center justify-center">
+            <QIcon name="info" class="cursor-pointer color-vn-white" size="md">
+                <QTooltip>{{
+                    t('warehouseText', {
+                        warehouseName: warehouseName,
+                    })
+                }}</QTooltip>
+            </QIcon>
+        </div>
+    </div>
+</template>
+
+<i18n>
+es:
+    Regularize stock: Regularizar stock
+    Clone: Clonar
+    All it's properties will be copied: Todas sus propiedades serán copiadas
+    Do you want to clone this item?: ¿Desea clonar este artículo?
+    warehouseText: Calculated on the warehouse of { warehouseName }
+
+en:
+    warehouseText: Calculado sobre el almacén de { warehouseName }
+</i18n>
+
+<style lang="scss" scoped>
+.edit-photo-btn {
+    position: absolute;
+    right: 12px;
+    bottom: 12px;
+    z-index: 1;
+    cursor: pointer;
+}
+
+.separation-borders {
+    border-left: 1px solid $white;
+    border-right: 1px solid $white;
+}
+</style>
diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index 567fbf32b..69c09bb05 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -1 +1,231 @@
-<template>Item summary</template>
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import CardSummary from 'components/ui/CardSummary.vue';
+import VnLv from 'src/components/ui/VnLv.vue';
+import ItemDescriptorImage from 'src/pages/Item/Card/ItemDescriptorImage.vue';
+import VnUserLink from 'src/components/ui/VnUserLink.vue';
+
+import { useRole } from 'src/composables/useRole';
+
+const $props = defineProps({
+    id: {
+        type: Number,
+        default: 0,
+    },
+});
+
+const route = useRoute();
+const { t } = useI18n();
+const roleState = useRole();
+
+const entityId = computed(() => $props.id || route.params.id);
+
+const isBuyer = computed(() => {
+    return roleState.hasAny(['buyer']);
+});
+
+const isReplenisher = computed(() => {
+    return roleState.hasAny(['replenisher']);
+});
+
+const isAdministrative = computed(() => {
+    return roleState.hasAny(['administrative']);
+});
+</script>
+
+<template>
+    <CardSummary
+        ref="summary"
+        :url="`Items/${entityId}/getSummary`"
+        :entity-id="entityId"
+        data-key="ItemSummary"
+    >
+        <template #header-left>
+            <router-link
+                v-if="route.name !== 'ItemSummary'"
+                :to="{ name: 'ItemSummary', params: { id: entityId } }"
+                class="header link"
+            >
+                <QIcon name="open_in_new" color="white" size="sm" />
+            </router-link>
+        </template>
+        <template #header="{ entity: { item } }">
+            {{ item.id }} - {{ item.name }}
+        </template>
+        <template #body="{ entity: { item, tags, visible, available } }">
+            <QCard class="vn-one photo">
+                <ItemDescriptorImage
+                    :entity-id="entityId"
+                    :visible="visible"
+                    :available="available"
+                    :show-edit-button="false"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.basicData') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv :label="t('item.summary.name')" :value="item.name" />
+                <VnLv :label="t('item.summary.completeName')" :value="item.longName" />
+                <VnLv :label="t('item.summary.family')" :value="item.itemType.name" />
+                <VnLv :label="t('item.summary.size')" :value="item.size" />
+                <VnLv :label="t('item.summary.origin')" :value="item.origin.name" />
+                <VnLv :label="t('item.summary.stems')" :value="item.stems" />
+                <VnLv
+                    :label="t('item.summary.multiplier')"
+                    :value="item.stemMultiplier"
+                />
+
+                <VnLv :label="t('item.summary.buyer')">
+                    <template #value>
+                        <VnUserLink
+                            :name="item.itemType.worker.user.name"
+                            :worker-id="item.itemType.worker.id"
+                        />
+                    </template>
+                </VnLv>
+                <VnLv :info="t('Este artículo necesita una foto')">
+                    <template #value>
+                        <QCheckbox
+                            :label="t('item.summary.doPhoto')"
+                            v-model="item.isPhotoRequested"
+                            :disable="true"
+                        />
+                    </template>
+                </VnLv>
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.otherData') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv
+                    :label="t('item.summary.intrastatCode')"
+                    :value="item.intrastat.id"
+                />
+                <VnLv
+                    :label="t('item.summary.intrastat')"
+                    :value="item.intrastat.description"
+                />
+                <VnLv :label="t('item.summary.ref')" :value="item.comment" />
+                <VnLv :label="t('item.summary.relevance')" :value="item.relevancy" />
+                <VnLv :label="t('item.summary.weight')" :value="item.weightByPiece" />
+                <VnLv :label="t('item.summary.units')" :value="item.packingOut" />
+                <VnLv :label="t('item.summary.expense')" :value="item.expense.name" />
+                <VnLv :label="t('item.summary.generic')" :value="item.genericFk" />
+                <VnLv
+                    :label="t('item.summary.recycledPlastic')"
+                    :value="item.recycledPlastic"
+                />
+                <VnLv
+                    :label="t('item.summary.nonRecycledPlastic')"
+                    :value="item.nonRecycledPlastic"
+                />
+                <VnLv
+                    :label="t('item.summary.minSalesQuantity')"
+                    :value="item.minQuantity"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemTags', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isReplenisher }"
+                >
+                    {{ t('item.summary.tags') }}
+                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
+                </component>
+                <VnLv
+                    v-for="(tag, index) in tags"
+                    :key="index"
+                    :label="`${tag.priority} ${tag.tag.name}`"
+                    :value="tag.value"
+                />
+            </QCard>
+            <QCard class="vn-one" v-if="item.description">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBasicData', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.description') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <p>
+                    {{ item.description }}
+                </p>
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isAdministrative ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemTax', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isAdministrative }"
+                >
+                    {{ t('item.summary.tax') }}
+                    <QIcon v-if="isBuyer || isAdministrative" name="open_in_new" />
+                </component>
+                <VnLv
+                    v-for="(tax, index) in item.taxes"
+                    :key="index"
+                    :label="tax.country.country"
+                    :value="tax.taxClass.description"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBotanical', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer }"
+                >
+                    {{ t('item.summary.botanical') }}
+                    <QIcon v-if="isBuyer" name="open_in_new" />
+                </component>
+                <VnLv
+                    :label="t('item.summary.genus')"
+                    :value="item.botanical?.genus?.name"
+                />
+                <VnLv
+                    :label="t('item.summary.specie')"
+                    :value="item.botanical?.specie?.name"
+                />
+            </QCard>
+            <QCard class="vn-one">
+                <component
+                    :is="isBuyer || isReplenisher ? 'router-link' : 'span'"
+                    :to="{ name: 'ItemBarcode', params: { id: entityId } }"
+                    class="header"
+                    :class="{ 'header-link': isBuyer || isReplenisher }"
+                >
+                    {{ t('item.summary.barcode') }}
+                    <QIcon v-if="isBuyer || isReplenisher" name="open_in_new" />
+                </component>
+                <p v-for="(barcode, index) in item.itemBarcode" :key="index">
+                    {{ barcode.code }}
+                </p>
+            </QCard>
+        </template>
+    </CardSummary>
+</template>
+
+<i18n>
+en:
+    Este artículo necesita una foto: Este artículo necesita una foto
+</i18n>
diff --git a/src/pages/Item/Card/ItemTax.vue b/src/pages/Item/Card/ItemTax.vue
new file mode 100644
index 000000000..76663932c
--- /dev/null
+++ b/src/pages/Item/Card/ItemTax.vue
@@ -0,0 +1 @@
+<template>Item tax</template>
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index ec54d1c05..3e399e29f 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -436,7 +436,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                 :all-columns="allColumnNames"
                 table-code="itemsIndex"
                 labels-traductions-path="item.list"
-                @on-config-saved="visibleColumns = ['picture', ...$event]"
+                @on-config-saved="visibleColumns = ['picture', ...$event, 'actions']"
             />
         </div>
         <QSpace />
diff --git a/src/router/modules/item.js b/src/router/modules/item.js
index d16022f79..ef0b58fa6 100644
--- a/src/router/modules/item.js
+++ b/src/router/modules/item.js
@@ -11,7 +11,14 @@ export default {
     redirect: { name: 'ItemMain' },
     menus: {
         main: ['ItemList'],
-        card: [],
+        card: [
+            'ItemBasicData',
+            'ItemDiary',
+            'ItemTags',
+            'ItemTax',
+            'ItemBotanical',
+            'ItemBarcode',
+        ],
     },
     children: [
         {
@@ -54,6 +61,52 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemSummary.vue'),
                 },
+                {
+                    path: 'basic-data',
+                    name: 'ItemBasicData',
+                    meta: {
+                        title: 'basicData',
+                        icon: 'vn:settings',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBasicData.vue'),
+                },
+
+                {
+                    path: 'tags',
+                    name: 'ItemTags',
+                    meta: {
+                        title: 'tags',
+                        icon: 'vn:tags',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
+                },
+                {
+                    path: 'tax',
+                    name: 'ItemTax',
+                    meta: {
+                        title: 'tax',
+                        icon: 'vn:tax',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemTax.vue'),
+                },
+                {
+                    path: 'botanical',
+                    name: 'ItemBotanical',
+                    meta: {
+                        title: 'botanical',
+                        icon: 'vn:botanical',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBotanical.vue'),
+                },
+                {
+                    path: 'barcode',
+                    name: 'ItemBarcode',
+                    meta: {
+                        title: 'barcode',
+                        icon: 'vn:barcode',
+                    },
+                    component: () => import('src/pages/Item/Card/ItemBarcode.vue'),
+                },
                 {
                     path: 'diary',
                     name: 'ItemDiary',
@@ -63,15 +116,6 @@ export default {
                     },
                     component: () => import('src/pages/Item/Card/ItemDiary.vue'),
                 },
-                {
-                    path: 'tags',
-                    name: 'ItemTags',
-                    meta: {
-                        title: 'Tags',
-                        icon: 'vn:tags',
-                    },
-                    component: () => import('src/pages/Item/Card/ItemTags.vue'),
-                },
             ],
         },
     ],

From 92429295cdffe0b6842f6a47edc4b1d96c52fb84 Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 12 Apr 2024 10:44:25 -0300
Subject: [PATCH 2/5] more translations

---
 src/i18n/locale/en.yml | 30 ++++++++++++++++++++++++++++++
 src/i18n/locale/es.yml | 30 ++++++++++++++++++++++++++++++
 2 files changed, 60 insertions(+)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 593f0084c..ed71a8413 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -1128,6 +1128,36 @@ item:
         stemMultiplier: Multiplier
         producer: Producer
         landed: Landed
+    summary:
+        basicData: 'Basic data'
+        otherData: 'Other data'
+        description: 'Description'
+        tax: 'Tax'
+        tags: 'Tags'
+        botanical: 'Botanical'
+        barcode: 'Barcode'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Do photo'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
 components:
     topbar: {}
     userPanel:
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index 70d7a1113..16ede8bef 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -1125,6 +1125,36 @@ item:
         stemMultiplier: Multiplicador
         producer: Productor
         landed: F. entrega
+    summary:
+        basicData: 'Datos básicos'
+        otherData: 'Otros datos'
+        description: 'Descripción'
+        tax: 'IVA'
+        tags: 'Etiquetas'
+        botanical: 'Botánico'
+        barcode: 'Código de barras'
+        name: 'Nombre'
+        completeName: 'Nombre completo'
+        family: 'Familia'
+        size: 'Medida'
+        origin: 'Origen'
+        stems: 'Tallos'
+        multiplier: 'Multiplicador'
+        buyer: 'Comprador'
+        doPhoto: 'Hacer foto'
+        intrastatCode: 'Código intrastat'
+        intrastat: 'Intrastat'
+        ref: 'Referencia'
+        relevance: 'Relevancia'
+        weight: 'Peso (gramos)/tallo'
+        units: 'Unidades/caja'
+        expense: 'Gasto'
+        generic: 'Genérico'
+        recycledPlastic: 'Plástico reciclado'
+        nonRecycledPlastic: 'Plástico no reciclado'
+        minSalesQuantity: 'Cantidad mínima de venta'
+        genus: 'Genus'
+        specie: 'Specie'
 components:
     topbar: {}
     userPanel:

From 5f46ad225e82b80a6cb3bb849f18f59dd8acdcad Mon Sep 17 00:00:00 2001
From: wbuezas <wbuezas@verdnatura.es>
Date: Fri, 12 Apr 2024 10:44:56 -0300
Subject: [PATCH 3/5] Fix genus and specie value

---
 src/pages/Item/Card/ItemSummary.vue | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/pages/Item/Card/ItemSummary.vue b/src/pages/Item/Card/ItemSummary.vue
index 69c09bb05..103b3af59 100644
--- a/src/pages/Item/Card/ItemSummary.vue
+++ b/src/pages/Item/Card/ItemSummary.vue
@@ -55,7 +55,7 @@ const isAdministrative = computed(() => {
         <template #header="{ entity: { item } }">
             {{ item.id }} - {{ item.name }}
         </template>
-        <template #body="{ entity: { item, tags, visible, available } }">
+        <template #body="{ entity: { item, tags, visible, available, botanical } }">
             <QCard class="vn-one photo">
                 <ItemDescriptorImage
                     :entity-id="entityId"
@@ -198,13 +198,10 @@ const isAdministrative = computed(() => {
                     {{ t('item.summary.botanical') }}
                     <QIcon v-if="isBuyer" name="open_in_new" />
                 </component>
-                <VnLv
-                    :label="t('item.summary.genus')"
-                    :value="item.botanical?.genus?.name"
-                />
+                <VnLv :label="t('item.summary.genus')" :value="botanical?.genus?.name" />
                 <VnLv
                     :label="t('item.summary.specie')"
-                    :value="item.botanical?.specie?.name"
+                    :value="botanical?.specie?.name"
                 />
             </QCard>
             <QCard class="vn-one">

From 1ea74d06392cc78fb1e71e454bdd77ca91d7e230 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 24 Apr 2024 07:55:01 +0200
Subject: [PATCH 4/5] fix: minor updates

---
 src/components/FormModelPopup.vue      | 9 +--------
 src/components/RegularizeStockForm.vue | 1 +
 2 files changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/FormModelPopup.vue b/src/components/FormModelPopup.vue
index 74abd2726..c5caf9778 100644
--- a/src/components/FormModelPopup.vue
+++ b/src/components/FormModelPopup.vue
@@ -76,14 +76,6 @@ defineExpose({
             <p>{{ subtitle }}</p>
             <slot name="form-inputs" :data="data" :validate="validate" />
             <div class="q-mt-lg row justify-end">
-                <QBtn
-                    :label="t('globals.save')"
-                    :title="t('globals.save')"
-                    type="submit"
-                    color="primary"
-                    :disabled="isLoading"
-                    :loading="isLoading"
-                />
                 <QBtn
                     :label="t('globals.cancel')"
                     :title="t('globals.cancel')"
@@ -96,6 +88,7 @@ defineExpose({
                 />
                 <QBtn
                     :label="t('globals.save')"
+                    :title="t('globals.save')"
                     type="submit"
                     color="primary"
                     class="q-ml-sm"
diff --git a/src/components/RegularizeStockForm.vue b/src/components/RegularizeStockForm.vue
index 28236be17..fd8e3c37a 100644
--- a/src/components/RegularizeStockForm.vue
+++ b/src/components/RegularizeStockForm.vue
@@ -54,6 +54,7 @@ const onDataSaved = (data) => {
                     <QInput
                         :label="t('Type the visible quantity')"
                         v-model.number="data.quantity"
+                        autofocus
                     />
                 </div>
             </VnRow>

From f4eb14f48704dd5028d1ffdb1023da5c5e29c854 Mon Sep 17 00:00:00 2001
From: Javier Segarra <jsegarra@verdnatura.es>
Date: Wed, 24 Apr 2024 14:22:14 +0200
Subject: [PATCH 5/5] feat: i18n Clone

---
 src/i18n/locale/en.yml                      | 1 +
 src/i18n/locale/es.yml                      | 1 +
 src/pages/Item/Card/ItemDescriptor.vue      | 3 +--
 src/pages/Item/Card/ItemDescriptorImage.vue | 1 -
 src/pages/Item/ItemList.vue                 | 3 +--
 src/pages/Route/RouteList.vue               | 3 +--
 src/pages/Route/RouteRoadmap.vue            | 2 +-
 src/pages/Route/RouteTickets.vue            | 2 +-
 8 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/i18n/locale/en.yml b/src/i18n/locale/en.yml
index 09db311c2..69e37da0c 100644
--- a/src/i18n/locale/en.yml
+++ b/src/i18n/locale/en.yml
@@ -28,6 +28,7 @@ globals:
     reset: Reset
     close: Close
     cancel: Cancel
+    clone: Clone
     confirm: Confirm
     assign: Assign
     back: Back
diff --git a/src/i18n/locale/es.yml b/src/i18n/locale/es.yml
index f58260519..d3a0fb820 100644
--- a/src/i18n/locale/es.yml
+++ b/src/i18n/locale/es.yml
@@ -28,6 +28,7 @@ globals:
     reset: Restaurar
     close: Cerrar
     cancel: Cancelar
+    clone: Clonar
     confirm: Confirmar
     assign: Asignar
     back: Volver
diff --git a/src/pages/Item/Card/ItemDescriptor.vue b/src/pages/Item/Card/ItemDescriptor.vue
index 59ac9adf9..62b54664d 100644
--- a/src/pages/Item/Card/ItemDescriptor.vue
+++ b/src/pages/Item/Card/ItemDescriptor.vue
@@ -162,7 +162,7 @@ const openCloneDialog = async () => {
             </QItem>
             <QItem v-ripple clickable @click="openCloneDialog()">
                 <QItemSection>
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QItemSection>
             </QItem>
         </template>
@@ -213,7 +213,6 @@ const openCloneDialog = async () => {
 <i18n>
 es:
     Regularize stock: Regularizar stock
-    Clone: Clonar
     All it's properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
 </i18n>
diff --git a/src/pages/Item/Card/ItemDescriptorImage.vue b/src/pages/Item/Card/ItemDescriptorImage.vue
index 827e9096a..f16a57548 100644
--- a/src/pages/Item/Card/ItemDescriptorImage.vue
+++ b/src/pages/Item/Card/ItemDescriptorImage.vue
@@ -134,7 +134,6 @@ onMounted(async () => {
 <i18n>
 es:
     Regularize stock: Regularizar stock
-    Clone: Clonar
     All it's properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
     warehouseText: Calculated on the warehouse of { warehouseName }
diff --git a/src/pages/Item/ItemList.vue b/src/pages/Item/ItemList.vue
index 3e399e29f..25dda8796 100644
--- a/src/pages/Item/ItemList.vue
+++ b/src/pages/Item/ItemList.vue
@@ -538,7 +538,7 @@ onUnmounted(() => (stateStore.rightDrawer = false));
                                 size="sm"
                             >
                                 <QTooltip>
-                                    {{ t('Clone') }}
+                                    {{ t('globals.clone') }}
                                 </QTooltip>
                             </QIcon>
                             <QIcon
@@ -572,6 +572,5 @@ es:
     New item: Nuevo artículo
     All it's properties will be copied: Todas sus propiedades serán copiadas
     Do you want to clone this item?: ¿Desea clonar este artículo?
-    Clone: Clonar
     Preview: Vista previa
 </i18n>
diff --git a/src/pages/Route/RouteList.vue b/src/pages/Route/RouteList.vue
index 773b4f773..83db8199c 100644
--- a/src/pages/Route/RouteList.vue
+++ b/src/pages/Route/RouteList.vue
@@ -213,7 +213,7 @@ const openTicketsDialog = (id) => {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>
@@ -510,7 +510,6 @@ es:
     Select the starting date: Seleccione la fecha de inicio
     Stating date: Fecha de inicio
     Cancel: Cancelar
-    Clone: Clonar
     Mark as served: Marcar como servidas
     Download selected routes as PDF: Descargar rutas seleccionadas como PDF
     Add ticket: Añadir tickets
diff --git a/src/pages/Route/RouteRoadmap.vue b/src/pages/Route/RouteRoadmap.vue
index 3fffb3829..7a7dbd948 100644
--- a/src/pages/Route/RouteRoadmap.vue
+++ b/src/pages/Route/RouteRoadmap.vue
@@ -176,7 +176,7 @@ function navigateToRoadmapSummary(event, row) {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneSelection">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>
diff --git a/src/pages/Route/RouteTickets.vue b/src/pages/Route/RouteTickets.vue
index c1ca5507e..44818323e 100644
--- a/src/pages/Route/RouteTickets.vue
+++ b/src/pages/Route/RouteTickets.vue
@@ -251,7 +251,7 @@ const openSmsDialog = async () => {
             <QCardActions align="right">
                 <QBtn flat :label="t('Cancel')" v-close-popup class="text-primary" />
                 <QBtn color="primary" v-close-popup @click="cloneRoutes">
-                    {{ t('Clone') }}
+                    {{ t('globals.clone') }}
                 </QBtn>
             </QCardActions>
         </QCard>