refactor: refs #8004 remove consoleLogs

src/components/NavBar.vue

@@ -15,12 +15,10 @@ const quasar = useQuasar();
 const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
+const pinnedModulesRef = ref();
 
 onMounted(() => stateStore.setMounted());
-
-const pinnedModulesRef = ref();
 </script>
-
 <template>
     <QHeader color="white" elevated>
         <QToolbar class="q-py-sm q-px-md">
@@ -55,16 +53,6 @@ const pinnedModulesRef = ref();
             <QSpace />
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="actions-prepend"></div>
-                <QBtn
-                    flat
-                    v-if="!quasar.platform.is.mobile"
-                    @click="pinnedModulesRef.redirect($route.params.id)"
-                    icon="more_up"
-                >
-                    <QTooltip>
-                        {{ t('Go to Salix') }}
-                    </QTooltip>
-                </QBtn>
                 <QBtn
                     :class="{ 'q-pa-none': quasar.platform.is.mobile }"
                     id="pinnedModules"
@@ -96,7 +84,6 @@ const pinnedModulesRef = ref();
         <VnBreadcrumbs v-if="$q.screen.lt.md" class="q-ml-md" />
     </QHeader>
 </template>
-
 <style lang="scss" scoped>
 .searchbar {
     width: max-content;
@@ -105,9 +92,3 @@ const pinnedModulesRef = ref();
     background-color: var(--vn-section-color);
 }
 </style>
-<i18n>
-en:
-    Go to Salix: Go to Salix
-es:
-    Go to Salix: Ir a Salix
-</i18n>

src/components/VnTable/VnTable.vue

@@ -453,7 +453,7 @@ function handleOnDataSaved(_) {
                 <template #header-cell="{ col }">
                     <QTh v-if="col.visible ?? true">
                         <div
-                            class="column self-start q-ml-xs ellipsis"
+                            class="column ellipsis"
                             :class="`text-${col?.align ?? 'left'}`"
                             :style="$props.columnSearch ? 'height: 75px' : ''"
                         >
@@ -495,7 +495,7 @@ function handleOnDataSaved(_) {
                     <!-- Columns -->
                     <QTd
                         auto-width
-                        class="no-margin q-px-xs"
+                        class="no-margin"
                         :class="[getColAlign(col), col.columnClass]"
                         :style="col.style"
                         v-if="col.visible ?? true"
@@ -823,21 +823,6 @@ es:
         top: 0;
         padding: 12px 0;
     }
-    tbody {
-        .q-checkbox {
-            display: flex;
-            margin-bottom: 9px;
-            & .q-checkbox__label {
-                margin-left: 31px;
-                color: var(--vn-text-color);
-            }
-            & .q-checkbox__inner {
-                position: absolute;
-                left: 0;
-                color: var(--vn-label-color);
-            }
-        }
-    }
     .sticky {
         position: sticky;
         right: 0;

src/components/common/RightMenu.vue

@@ -2,6 +2,7 @@
 import { ref, onMounted, useSlots } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useStateStore } from 'stores/useStateStore';
+import isMobile from 'src/composables/isMobile';
 
 const slots = useSlots();
 const hasContent = ref(false);
@@ -11,7 +12,6 @@ onMounted(() => {
     rightPanel.value = document.querySelector('#right-panel');
     if (!rightPanel.value) return;
 
-    // Check if there's content to display
     const observer = new MutationObserver(() => {
         hasContent.value = rightPanel.value.childNodes.length;
     });
@@ -22,7 +22,8 @@ onMounted(() => {
         attributes: true,
     });
 
-    if (!slots['right-panel'] && !hasContent.value) stateStore.rightDrawer = false;
+    if ((!slots['right-panel'] && !hasContent.value) || isMobile)
+        stateStore.rightDrawer = false;
 });
 
 const { t } = useI18n();
@@ -45,7 +46,12 @@ const stateStore = useStateStore();
             </QBtn>
         </div>
     </Teleport>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        :show-if-above="!isMobile"
+    >
         <QScrollArea class="fit">
             <div id="right-panel"></div>
             <slot v-if="!hasContent" name="right-panel" />

src/components/common/VnInputDate.vue

@@ -101,7 +101,7 @@ const styleAttrs = computed(() => {
             :class="{ required: $attrs.required }"
             :rules="mixinRules"
             :clearable="false"
-            @click="isPopupOpen = true"
+            @click="isPopupOpen = !isPopupOpen"
             hide-bottom-space
         >
             <template #append>
@@ -120,13 +120,6 @@ const styleAttrs = computed(() => {
                         isPopupOpen = false;
                     "
                 />
-                <QIcon
-                    v-if="showEvent"
-                    name="event"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open date')"
-                />
             </template>
             <QMenu
                 transition-show="scale"
@@ -138,6 +131,7 @@ const styleAttrs = computed(() => {
                 :no-parent-event="true"
             >
                 <QDate
+                    class="date-picker"
                     v-model="popupDate"
                     :landscape="true"
                     :today-btn="true"
@@ -153,15 +147,6 @@ const styleAttrs = computed(() => {
         </QInput>
     </div>
 </template>
-<style lang="scss">
-.vn-input-date.q-field--standard.q-field--readonly .q-field__control:before {
-    border-bottom-style: solid;
-}
-
-.vn-input-date.q-field--outlined.q-field--readonly .q-field__control:before {
-    border-style: solid;
-}
-</style>
 <i18n>
     es:
         Open date: Abrir fecha

src/components/common/VnInputTime.vue

@@ -79,7 +79,7 @@ function dateToTime(newDate) {
             :class="{ required: $attrs.required }"
             style="min-width: 100px"
             :rules="mixinRules"
-            @click="isPopupOpen = false"
+            @click="isPopupOpen = !isPopupOpen"
             type="time"
             hide-bottom-space
         >
@@ -99,12 +99,6 @@ function dateToTime(newDate) {
                         isPopupOpen = false;
                     "
                 />
-                <QIcon
-                    name="Schedule"
-                    class="cursor-pointer"
-                    @click="isPopupOpen = !isPopupOpen"
-                    :title="t('Open time')"
-                />
             </template>
             <QMenu
                 transition-show="scale"

src/composables/isMobile.js

@@ -0,0 +1,3 @@
+const regex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
+const isMobile = regex.test(navigator.userAgent);
+export default isMobile;

src/css/app.scss

@@ -240,7 +240,7 @@ input::-webkit-inner-spin-button {
 .q-table {
     th,
     td {
-        padding: 1px 10px 1px 10px;
+        padding: 1px 3px 1px 3px;
         max-width: 100px;
         div span {
             overflow: hidden;
@@ -299,3 +299,9 @@ input::-webkit-inner-spin-button {
         }
     }
 }
+
+.q-date__header-today {
+    border-radius: 12px;
+    border: 1px solid;
+    box-shadow: 0 4px 6px #00000000;
+}

src/i18n/locale/en.yml

@@ -118,7 +118,7 @@ globals:
         workCenters: Work centers
         modes: Modes
         zones: Zones
-        zonesList: Zones
+        zonesList: List
         deliveryDays: Delivery days
         upcomingDeliveries: Upcoming deliveries
         role: Role

src/i18n/locale/es.yml

@@ -120,7 +120,7 @@ globals:
         workCenters: Centros de trabajo
         modes: Modos
         zones: Zonas
-        zonesList: Zonas
+        zonesList: Listado
         deliveryDays: Días de entrega
         upcomingDeliveries: Próximos repartos
         role: Role

src/pages/Claim/ClaimList.vue

@@ -104,6 +104,7 @@ const columns = computed(() => [
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, ClaimSummary),
+                isPrimary: true,
             },
         ],
     },
@@ -134,7 +135,6 @@ const STATE_COLOR = {
         :columns="columns"
         redirect="claim"
         :right-search="false"
-        auto-load
     >
         <template #column-clientFk="{ row }">
             <span class="link" @click.stop>

src/pages/Customer/CustomerList.vue

@@ -419,7 +419,6 @@ function handleLocation(data, location) {
         :columns="columns"
         redirect="customer"
         :right-search="false"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect

src/pages/Entry/EntryList.vue

@@ -192,9 +192,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
 </script>
 <template>
     <VnSearchbar
@@ -222,7 +219,6 @@ onMounted(async () => {
         order="id DESC"
         :columns="columns"
         redirect="entry"
-        auto-load
         :right-search="false"
     >
         <template #column-supplierFk="{ row }">

src/pages/InvoiceIn/InvoiceInList.vue

@@ -1,7 +1,6 @@
 <script setup>
-import { ref, computed, onMounted, onUnmounted } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useStateStore } from 'stores/useStateStore';
 import { downloadFile } from 'src/composables/downloadFile';
 import { toDate, toCurrency } from 'src/filters/index';
 import InvoiceInFilter from './InvoiceInFilter.vue';
@@ -15,19 +14,19 @@ import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInput from 'src/components/common/VnInput.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
 
-const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
 const { t } = useI18n();
 
-onMounted(async () => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 const tableRef = ref();
 const cols = computed(() => [
     {
         align: 'left',
         name: 'id',
         label: 'Id',
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         align: 'left',
@@ -41,6 +40,7 @@ const cols = computed(() => [
             },
         },
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -67,6 +67,7 @@ const cols = computed(() => [
         name: 'isBooked',
         label: t('invoiceIn.list.isBooked'),
         columnFilter: false,
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -78,6 +79,7 @@ const cols = computed(() => [
         name: 'amount',
         label: t('invoiceIn.list.amount'),
         format: ({ amount }) => toCurrency(amount),
+        cardVisible: true,
     },
     {
         align: 'right',
@@ -87,6 +89,7 @@ const cols = computed(() => [
                 title: t('components.smartCard.openSummary'),
                 icon: 'preview',
                 type: 'submit',
+                isPrimary: true,
                 action: (row) => viewSummary(row.id, InvoiceInSummary),
             },
             {
@@ -121,7 +124,6 @@ const cols = computed(() => [
         redirect="invoice-in"
         :columns="cols"
         :right-search="false"
-        :disable-option="{ card: true }"
         :auto-load="!!$route.query.params"
     >
         <template #column-supplierFk="{ row }">

src/pages/InvoiceOut/InvoiceOutList.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, onUnmounted, ref, computed, watchEffect } from 'vue';
+import { ref, computed, watchEffect } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnSelect from 'src/components/common/VnSelect.vue';
 import VnInputDate from 'src/components/common/VnInputDate.vue';
@@ -10,12 +10,10 @@ import { usePrintService } from 'composables/usePrintService';
 import VnTable from 'components/VnTable/VnTable.vue';
 import InvoiceOutSummary from './Card/InvoiceOutSummary.vue';
 import { toCurrency, toDate } from 'src/filters/index';
-import { useStateStore } from 'stores/useStateStore';
 import { QBtn } from 'quasar';
 import CustomerDescriptorProxy from '../Customer/Card/CustomerDescriptorProxy.vue';
 
 const { t } = useI18n();
-const stateStore = useStateStore();
 const { viewSummary } = useSummaryDialog();
 const tableRef = ref();
 const invoiceOutSerialsOptions = ref([]);
@@ -137,8 +135,6 @@ const columns = computed(() => [
         ],
     },
 ]);
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
 
 function openPdf(id) {
     try {
@@ -210,7 +206,6 @@ watchEffect(selectedRows);
         order="id DESC"
         :columns="columns"
         redirect="invoice-out"
-        auto-load
         :table="{
             'row-key': 'id',
             selection: 'multiple',

src/pages/Item/ItemList.vue

@@ -2,6 +2,7 @@
 import { onMounted, ref, computed, reactive, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
+import isMobile from 'src/composables/isMobile';
 
 import FetchData from 'components/FetchData.vue';
 import FetchedTags from 'components/ui/FetchedTags.vue';
@@ -389,7 +390,6 @@ const cloneItem = async (itemFk) => {
 };
 
 onMounted(async () => {
-    stateStore.rightDrawer = true;
     const filteredColumns = columns.value.filter(
         (col) => col.name !== 'picture' && col.name !== 'actions'
     );

src/pages/Route/RouteExtendedList.vue

@@ -193,30 +193,6 @@ const columns = computed(() => [
         columnFilter: false,
         columnClass: 'shrink',
     },
-    {
-        align: 'right',
-        name: 'tableActions',
-        actions: [
-            {
-                title: t('route.Add tickets'),
-                icon: 'vn:ticketAdd',
-                action: (row) => openTicketsDialog(row?.id),
-                isPrimary: true,
-            },
-            {
-                title: t('route.components.smartCard.viewSummary'),
-                icon: 'preview',
-                action: (row) => viewSummary(row?.id, RouteSummary),
-                isPrimary: true,
-            },
-            {
-                title: t('route.Route summary'),
-                icon: 'arrow_forward',
-                action: (row) => navigate(row?.id),
-                isPrimary: true,
-            },
-        ],
-    },
 ]);
 
 function navigate(id) {

src/pages/Route/RouteList.vue

@@ -26,7 +26,7 @@ const routeFilter = {
 };
 const columns = computed(() => [
     {
-        align: 'left',
+        align: 'right',
         isId: true,
         name: 'id',
         label: 'Id',

src/pages/Shelving/ShelvingList.vue

@@ -1,8 +1,6 @@
 <script setup>
 import VnPaginate from 'components/ui/VnPaginate.vue';
-import { useStateStore } from 'stores/useStateStore';
 import { useI18n } from 'vue-i18n';
-import { onMounted, onUnmounted } from 'vue';
 import CardList from 'components/ui/CardList.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import { useRouter } from 'vue-router';
@@ -12,7 +10,6 @@ import ShelvingSearchbar from 'pages/Shelving/Card/ShelvingSearchbar.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import RightMenu from 'src/components/common/RightMenu.vue';
 
-const stateStore = useStateStore();
 const router = useRouter();
 const { t } = useI18n();
 const { viewSummary } = useSummaryDialog();
@@ -20,9 +17,6 @@ const filter = {
     include: [{ relation: 'parking' }],
 };
 
-onMounted(() => (stateStore.rightDrawer = true));
-onUnmounted(() => (stateStore.rightDrawer = false));
-
 function navigate(id) {
     router.push({ path: `/shelving/${id}` });
 }

src/pages/Supplier/Card/SupplierAccounts.vue

@@ -14,10 +14,10 @@ import axios from 'axios';
 import useNotify from 'src/composables/useNotify.js';
 import { useQuasar } from 'quasar';
 
-const quasar = useQuasar();
-const { notify } = useNotify();
-const route = useRoute();
 const { t } = useI18n();
+const { notify } = useNotify();
+const quasar = useQuasar();
+const route = useRoute();
 
 const bankEntitiesRef = ref(null);
 const supplier = ref(null);

src/pages/Supplier/SupplierList.vue

@@ -12,7 +12,10 @@ const columns = computed(() => [
         align: 'left',
         label: t('supplier.list.tableVisibleColumns.id'),
         name: 'id',
-        isTitle: true,
+        isId: true,
+        chip: {
+            condition: () => true,
+        },
     },
     {
         align: 'left',
@@ -22,6 +25,7 @@ const columns = computed(() => [
         columnFilter: {
             name: 'search',
         },
+        isTitle: true,
     },
     {
         align: 'left',
@@ -30,6 +34,7 @@ const columns = computed(() => [
         columnFilter: {
             inWhere: true,
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -38,6 +43,7 @@ const columns = computed(() => [
         columnFilter: {
             name: 'search',
         },
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -111,7 +117,6 @@ const columns = computed(() => [
         }"
         order="id ASC"
         :columns="columns"
-        auto-load
     />
 </template>
 

src/pages/Ticket/TicketList.vue

@@ -95,6 +95,7 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
+        cardVisible: true,
         format: (row, dashIfEmpty) => dashIfEmpty(row.salesPerson),
     },
     {
@@ -126,12 +127,14 @@ const columns = computed(() => [
         name: 'nickname',
         label: t('ticketList.nickname'),
         columnClass: 'expand',
+        isTitle: true,
     },
     {
         align: 'left',
         name: 'addressNickname',
         label: t('ticketList.addressNickname'),
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -152,6 +155,7 @@ const columns = computed(() => [
             },
         },
         columnClass: 'expand',
+        cardVisible: true,
     },
     {
         align: 'left',
@@ -302,7 +306,6 @@ const getDateColor = (date) => {
 
 onMounted(() => {
     initializeFromQuery();
-    stateStore.rightDrawer = true;
 });
 
 async function makeInvoice(ticket) {

src/pages/Travel/Card/TravelCard.vue

@@ -1,6 +1,7 @@
 <script setup>
 import VnCard from 'components/common/VnCard.vue';
 import TravelDescriptor from './TravelDescriptor.vue';
+import TravelFilter from '../TravelFilter.vue';
 
 const filter = {
     fields: [

src/pages/Travel/TravelFilter.vue

@@ -27,7 +27,7 @@ defineExpose({ states });
     <VnFilterPanel :data-key="props.dataKey" :search-button="true" search-url="table">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
-                <strong>{{ t(`params.${tag.label}`) }}: </strong>
+                <strong>{{ t(`travel.${tag.label}`) }}: </strong>
                 <span>{{ formatFn(tag.value) }}</span>
             </div>
         </template>

src/pages/Travel/TravelList.vue

@@ -1,8 +1,7 @@
 <script setup>
-import { onMounted, ref, computed } from 'vue';
+import { ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter, useRoute } from 'vue-router';
-import { useStateStore } from 'stores/useStateStore';
 import VnTable from 'components/VnTable/VnTable.vue';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
 import TravelSummary from './Card/TravelSummary.vue';
@@ -15,7 +14,6 @@ import TravelFilter from './TravelFilter.vue';
 const { viewSummary } = useSummaryDialog();
 const router = useRouter();
 const { t } = useI18n();
-const stateStore = useStateStore();
 const route = useRoute();
 const tableRef = ref();
 const $props = defineProps({
@@ -27,9 +25,6 @@ const $props = defineProps({
 const entityId = computed(() => $props.id || route.params.id);
 
 const travelFilterRef = ref();
-onMounted(async () => {
-    stateStore.rightDrawer = true;
-});
 
 const cloneTravel = (travelData) => {
     const stringifiedTravelData = JSON.stringify(travelData);
@@ -48,9 +43,11 @@ const columns = computed(() => [
     {
         align: 'left',
         name: 'id',
-        label: t('travel.travelList.tableVisibleColumns.id'),
+        label: 'Id',
+        chip: {
+            condition: () => true,
+        },
         isId: true,
-        cardVisible: true,
     },
     {
         align: 'left',
@@ -60,7 +57,7 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
-        cardVisible: true,
+        isTitle: true,
         create: true,
     },
     {
@@ -139,7 +136,6 @@ const columns = computed(() => [
         columnField: {
             component: null,
         },
-        cardVisible: true,
         create: true,
         format: (row, dashIfEmpty) => dashIfEmpty(toDate(row.landed)),
     },
@@ -225,7 +221,6 @@ const columns = computed(() => [
         :user-params="{ daysOnward: 7 }"
         order="landed DESC"
         :columns="columns"
-        auto-load
         redirect="travel"
         :is-editable="false"
         :use-model="true"
@@ -273,7 +268,6 @@ const columns = computed(() => [
         </template>
     </VnTable>
 </template>
-
 <i18n>
 en:
     Add entry: Add entry
@@ -287,7 +281,6 @@ es:
     Clone: Clonar
     Add entry: Añadir Entrada
 </i18n>
-
 <style lang="scss" scoped>
 .is-active {
     color: #c8e484;

src/pages/Wagon/WagonList.vue

@@ -98,7 +98,6 @@ async function remove(row) {
             url="Wagons"
             :filter="filter"
             :columns="columns"
-            auto-load
             order="id DESC"
             :right-search="false"
             :column-search="false"

src/pages/Worker/WorkerList.vue

@@ -105,6 +105,7 @@ const columns = computed(() => [
                 title: t('components.smartCard.viewSummary'),
                 icon: 'preview',
                 action: (row) => viewSummary(row.id, WorkerSummary),
+                isPrimary: true,
             },
         ],
     },

src/pages/Zone/ZoneList.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
-import { computed, ref, onMounted } from 'vue';
+import { computed, ref } from 'vue';
 import axios from 'axios';
 
 import { toCurrency } from 'src/filters';
@@ -9,7 +9,6 @@ import { toTimeFormat } from 'src/filters/date';
 import { useVnConfirm } from 'composables/useVnConfirm';
 import useNotify from 'src/composables/useNotify.js';
 import { useSummaryDialog } from 'src/composables/useSummaryDialog';
-import { useStateStore } from 'stores/useStateStore';
 import ZoneSummary from 'src/pages/Zone/Card/ZoneSummary.vue';
 import VnTable from 'src/components/VnTable/VnTable.vue';
 import VnSelect from 'src/components/common/VnSelect.vue';
@@ -24,7 +23,6 @@ const router = useRouter();
 const { notify } = useNotify();
 const { viewSummary } = useSummaryDialog();
 const { openConfirmationModal } = useVnConfirm();
-const stateStore = useStateStore();
 const tableRef = ref();
 const warehouseOptions = ref([]);
 
@@ -130,8 +128,6 @@ const handleClone = (id) => {
         () => clone(id)
     );
 };
-
-onMounted(() => (stateStore.rightDrawer = true));
 </script>
 
 <template>
@@ -155,7 +151,6 @@ onMounted(() => (stateStore.rightDrawer = true));
         :columns="columns"
         redirect="zone"
         :right-search="false"
-        auto-load
     >
         <template #more-create-dialog="{ data }">
             <VnSelect

src/router/modules/shelving.js

@@ -25,7 +25,7 @@ export default {
                     path: 'list',
                     name: 'ShelvingList',
                     meta: {
-                        title: 'shelvingList',
+                        title: 'list',
                         icon: 'view_list',
                     },
                     component: () => import('src/pages/Shelving/ShelvingList.vue'),

src/router/modules/wagon.js

@@ -25,7 +25,7 @@ export default {
                     path: 'list',
                     name: 'WagonList',
                     meta: {
-                        title: 'wagonsList',
+                        title: 'list',
                         icon: 'vn:trolley',
                     },
                     component: () => import('src/pages/Wagon/WagonList.vue'),

src/router/modules/zone.js

@@ -38,7 +38,7 @@ export default {
                     name: 'ZoneList',
                     meta: {
                         title: 'zonesList',
-                        icon: 'vn:zone',
+                        icon: 'view_list',
                     },
                     component: () => import('src/pages/Zone/ZoneList.vue'),
                 },