feat: order visualization

auto-imports.d.ts

@@ -125,7 +125,9 @@ declare global {
   const registerPlugins_: typeof import('./src/@core/utils/plugins')['registerPlugins_']
   const requiredValidator: typeof import('./src/@core/utils/validators')['requiredValidator']
   const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveOrderStatus: typeof import('./src/utils/order')['resolveOrderStatus']
   const resolveRef: typeof import('@vueuse/core')['resolveRef']
+  const resolveStatus: typeof import('./src/utils/order')['resolveStatus']
   const resolveUnref: typeof import('@vueuse/core')['resolveUnref']
   const resolveVuetifyTheme: typeof import('./src/@core/utils/vuetify')['resolveVuetifyTheme']
   const setActivePinia: typeof import('pinia')['setActivePinia']
@@ -480,6 +482,7 @@ declare module 'vue' {
     readonly registerPlugins: UnwrapRef<typeof import('./src/@core/utils/plugins')['registerPlugins']>
     readonly requiredValidator: UnwrapRef<typeof import('./src/@core/utils/validators')['requiredValidator']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveOrderStatus: UnwrapRef<typeof import('./src/utils/order')['resolveOrderStatus']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly resolveVuetifyTheme: UnwrapRef<typeof import('./src/@core/utils/vuetify')['resolveVuetifyTheme']>
@@ -824,6 +827,7 @@ declare module '@vue/runtime-core' {
     readonly registerPlugins: UnwrapRef<typeof import('./src/@core/utils/plugins')['registerPlugins']>
     readonly requiredValidator: UnwrapRef<typeof import('./src/@core/utils/validators')['requiredValidator']>
     readonly resolveComponent: UnwrapRef<typeof import('vue')['resolveComponent']>
+    readonly resolveOrderStatus: UnwrapRef<typeof import('./src/utils/order')['resolveOrderStatus']>
     readonly resolveRef: UnwrapRef<typeof import('@vueuse/core')['resolveRef']>
     readonly resolveUnref: UnwrapRef<typeof import('@vueuse/core')['resolveUnref']>
     readonly resolveVuetifyTheme: UnwrapRef<typeof import('./src/@core/utils/vuetify')['resolveVuetifyTheme']>

src/pages/obi/order/details/[id].vue

@@ -33,19 +33,6 @@ const refreshData = async () => {
 }
 
 handleData()
-
-const resolveStatus = (status: string) => {
-  if (status === 'fulfilled')
-    return { text: status, color: 'success' }
-  else if (status === 'polled')
-    return { text: status, color: 'info' }
-  else if (status === 'intransit polled')
-    return { text: status, color: 'warning' }
-  else if (status === 'cancelled' || status === 'unfulfillable')
-    return { text: status, color: 'error' }
-  else
-    return { text: status, color: 'primary' }
-}
 </script>
 
 <template>
@@ -71,7 +58,7 @@ const resolveStatus = (status: string) => {
           <VChip
             label
             size="x-large"
-            v-bind="resolveStatus(orderData.common.statusData.code)"
+            v-bind="resolveOrderStatus(orderData.common.statusData.code)"
           />
           <VChip
             label

src/pages/obi/order/list/index.vue

@@ -5,21 +5,6 @@ import { paginationMeta } from '@api-utils/paginationMeta'
 
 const { t } = useI18n()
 
-const widgetData = ref([
-  { title: 'Pending Payment', value: 56, icon: 'tabler-calendar-stats' },
-  { title: 'Unfulfilled', value: 25, icon: 'tabler-circle-x' },
-  { title: 'Completed', value: 12689, icon: 'tabler-checks' },
-  { title: 'Refunded', value: 124, icon: 'tabler-wallet' },
-])
-
-const searchQuery = ref('')
-
-// Data table options
-const itemsPerPage = ref(10)
-const page = ref(1)
-const sortBy = ref('meta.id')
-const orderBy = ref('desc')
-
 // Data table Headers
 const headers = [
   { title: 'Id', key: 'meta.id' },
@@ -29,6 +14,40 @@ const headers = [
   { title: 'Type', key: 'common.transaction.transactionTypeDescription' },
 ]
 
+const selectedStatus = ref()
+
+const status = [
+  'canceled',
+  'complete',
+  'fulfilled',
+  'intransit',
+  'intransit polled',
+  'new_order',
+  'open',
+  'polled',
+  'received',
+  'unfulfillable',
+]
+
+const selectedType = ref()
+
+const type = [
+  'Delivery Order',
+  'Pickup Order',
+  'Retail Pickup Order',
+  'Ship-for-Pickup Order',
+  'Ship-to-Store Order',
+  'unknown transaction type',
+]
+
+const searchQuery = ref('')
+
+// Data table options
+const itemsPerPage = ref(10)
+const page = ref(1)
+const sortBy = ref('meta.id')
+const orderBy = ref('desc')
+
 const updateOptions = (options: any) => {
   page.value = options.page
 
@@ -39,19 +58,6 @@ const updateOptions = (options: any) => {
   }
 }
 
-const resolveStatus = (status: string) => {
-  if (status === 'fulfilled')
-    return { text: status, color: 'success' }
-  else if (status === 'polled')
-    return { text: status, color: 'info' }
-  else if (status === 'intransit polled')
-    return { text: status, color: 'warning' }
-  else if (status === 'cancelled' || status === 'unfulfillable')
-    return { text: status, color: 'error' }
-  else
-    return { text: status, color: 'primary' }
-}
-
 const sortByMapping = (sortby: string) => {
   const headerMapping: { [key: string]: string } = {
     'meta.id': 'request_id',
@@ -76,8 +82,20 @@ const { data: ordersData } = await useApi<any>(createUrl('/obi/order',
   },
 ))
 
+const widgetData = ref(ordersData.value.statistics)
 const orders = computed(() => ordersData.value.orders)
 const totalOrder = computed(() => ordersData.value.total)
+
+const minDate = ref(new Date(2023, 1, 7))
+const maxDate = ref(new Date())
+const dateRange = ref([minDate.value.getTime(), maxDate.value.getTime()])
+
+const updateDates = () => {
+  dateRange.value = dateRange.value.map(date => new Date(date).getTime())
+}
+
+const formattedStartDate = computed(() => format(new Date(dateRange.value[0]), 'dd/MM/yyyy'))
+const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd/MM/yyyy'))
 </script>
 
 <template>
@@ -116,9 +134,12 @@ const totalOrder = computed(() => ordersData.value.total)
                     {{ data.value }}
                   </h4>
 
-                  <h6 class="text-h6">
+                  <VChip
-                    {{ data.title }}
+                    v-bind="resolveOrderStatus(data.title)"
-                  </h6>
+                    variant="tonal"
+                    label
+                    size="default"
+                  />
                 </div>
 
                 <VAvatar
@@ -146,6 +167,79 @@ const totalOrder = computed(() => ordersData.value.total)
       </VCardText>
     </VCard>
 
+    <VCard
+      :title="$t('Filters')"
+      class="mb-6"
+    >
+      <VCardText>
+        <VRow>
+          <!-- 👉 Select Status -->
+          <VCol
+            cols="12"
+            sm="4"
+          >
+            <AppSelect
+              v-model="selectedStatus"
+              :placeholder="$t('Status')"
+              :items="status"
+              clearable
+              clear-icon="tabler-x"
+            />
+          </VCol>
+
+          <!-- 👉 Select Type -->
+          <VCol
+            cols="12"
+            sm="4"
+          >
+            <AppSelect
+              v-model="selectedType"
+              :placeholder="$t('Type')"
+              :items="type"
+              clearable
+              clear-icon="tabler-x"
+            />
+          </VCol>
+        </VRow>
+        <VRow>
+          <!-- 👉 dates range -->
+          <VRangeSlider
+            v-model="dateRange"
+            :min="minDate.getTime()"
+            :max="maxDate.getTime()"
+            class="mb-4"
+            :thumb-label="false"
+            @change="updateDates"
+          >
+            <template #prepend>
+              <VTextField
+                v-model="formattedStartDate"
+                hide-details
+                single-line
+                type="String"
+                variant="outlined"
+                density="compact"
+                readonly
+                style="inline-size: 120px"
+              />
+            </template>
+            <template #append>
+              <VTextField
+                v-model="formattedEndDate"
+                hide-details
+                single-line
+                type="String"
+                variant="outlined"
+                density="compact"
+                readonly
+                style="inline-size: 120px"
+              />
+            </template>
+          </VRangeSlider>
+        </VRow>
+      </VCardText>
+    </VCard>
+    <!-- 👉 Order Table -->
     <VCard>
       <!-- 👉 Filters -->
       <VCardText>
@@ -207,7 +301,7 @@ const totalOrder = computed(() => ordersData.value.total)
         <!-- Status -->
         <template #item.common.statusData.code="{ item }">
           <VChip
-            v-bind="resolveStatus(item.common.statusData.code)"
+            v-bind="resolveOrderStatus(item.common.statusData.code)"
             label
           />
         </template>

src/pages/store/list/index.vue

@@ -14,7 +14,7 @@ const headers = computed(() => [
   { title: 'Pos', key: 'nbcaisses' },
   { title: 'IP', key: 'ip_master', sortable: false },
   { title: t('Phone'), key: 'telephone', sortable: false },
-  { title: t('Brand'), key: 'enseigne' },
+  { title: t('Sign'), key: 'enseigne' },
   { title: t('Country'), key: 'pays' },
   { title: '', key: 'actions', sortable: false },
 ])
@@ -206,7 +206,7 @@ watch(route, (to, from) => {
           >
             <AppSelect
               v-model="selectedBrand"
-              :placeholder="$t('Brand')"
+              :placeholder="$t('Sign')"
               :items="brand"
               clearable
               clear-icon="tabler-x"

src/plugins/i18n/locales/ar.json

@@ -71,6 +71,7 @@
   "Close": "Close",
   "Connect to invidual POS": "Connect to invidual POS",
   "Orders list": "Orders list",
+  "Sign": "Sign",
   "---------------------------": "---------------------------",
   "UI Elements": "عناصر واجهة المستخدم",
   "Forms & Tables": "النماذج والجداول",

src/plugins/i18n/locales/en.json

@@ -71,6 +71,7 @@
   "Close": "Close",
   "Connect to invidual POS": "Connect to invidual POS",
   "Orders list": "Orders list",
+  "Sign": "Sign",
   "---------------------------": "---------------------------",
   "UI Elements": "UI Elements",
   "Forms & Tables": "Forms & Tables",

src/plugins/i18n/locales/fr.json

@@ -71,6 +71,7 @@
   "Close": "Fermer",
   "Connect to invidual POS": "Connexion à une caisse individuelle",
   "Orders list": "Liste des commandes",
+  "Sign": "Enseigne",
   "---------------------------": "---------------------------",
   "UI Elements": "ÉLÉMENTS DE L'UI",
   "Forms & Tables": "Formulaires et tableaux",

src/utils/order.ts

@@ -0,0 +1,12 @@
+export const resolveOrderStatus = (status: string) => {
+  if (status === 'received')
+    return { text: status, color: 'success' }
+  else if (status === 'fulfilled' || status === 'polled')
+    return { text: status, color: 'info' }
+  else if (status === 'intransit polled')
+    return { text: status, color: 'warning' }
+  else if (status === 'canceled' || status === 'unfulfillable')
+    return { text: status, color: 'error' }
+  else
+    return { text: status, color: 'primary' }
+}

src/views/pages/order/view/OrderTabPreparationH.vue

@@ -10,164 +10,160 @@ interface Props {
   orderData: Order
 }
 
-const resolveStatus = (status: string) => {
-  if (status === 'fulfilled')
-    return { text: status, color: 'success' }
-  else if (status === 'polled')
-    return { text: status, color: 'info' }
-  else if (status === 'intransit polled')
-    return { text: status, color: 'warning' }
-  else if (status === 'cancelled' || status === 'unfulfillable')
-    return { text: status, color: 'error' }
-  else
-    return { text: status, color: 'primary' }
-}
-
 const panelStatus = ref(0)
 </script>
 
 <template>
-  <!-- 👉 Preparations 06990018 -->
+  <!-- 👉 Preparations -->
   <VExpansionPanels
     v-model="panelStatus"
     variant="accordion"
   >
-    <VExpansionPanel
+    <template v-if="orderData.preparations && orderData.preparations.length > 0">
-      v-for="(section, index) in orderData.preparations"
+      <VExpansionPanel
-      :key="index"
+        v-for="(section, index) in orderData.preparations"
-      elevation="0"
+        :key="index"
-    >
+        elevation="0"
-      <template #title>
+      >
-        <VCardText class="pa-sm-2">
+        <template #title>
-          <div class="d-flex justify-space-between align-center mb-4">
+          <VCardText class="pa-sm-2">
-            <div>
+            <div class="d-flex justify-space-between align-center mb-4">
-              <VChip
+              <div>
-                v-bind="resolveStatus(section.status)"
+                Prep #{{ index + 1 }} /
-                variant="tonal"
+                <VChip
-                label
+                  v-bind="resolveOrderStatus(section.status)"
-                size="default"
+                  variant="tonal"
-              />
+                  label
-              {{ section.fulfillmentSystemCd }} / {{ section.fulfillmentLocationCd }}
+                  size="default"
+                />
+                {{ section.fulfillmentSystemCd }} / {{ section.fulfillmentLocationCd }}
+              </div>
+              <div class="d-flex">
+                <span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
+              </div>
             </div>
-            <div class="d-flex">
+          </vcardtext>
-              <span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
+        </template>
-            </div>
-          </div>
-        </vcardtext>
-      </template>
 
-      <VExpansionPanelText>
+        <VExpansionPanelText>
-        <!-- 👉 Preparation line -->
+          <!-- 👉 Preparation line -->
-        <div class="mb-6">
+          <div class="mb-6">
-          <VRow>
+            <VRow>
-            <template
+              <template
-              v-for="preparationLine in orderData.preparations[index].lines"
+                v-for="preparationLine in orderData.preparations[index].lines"
-              :key="preparationLine.lineFulfillId"
+                :key="preparationLine.lineFulfillId"
-            >
-              <VCol
-                cols="12"
-                md="4"
-                sm="6"
               >
-                <VCard
+                <VCol
-                  flat
+                  cols="12"
-                  border
+                  md="4"
+                  sm="6"
                 >
-                  <VCardText>
+                  <VCard
-                    <div class="d-flex justify-space-between align-center mb-4">
+                    flat
-                      <VChip
+                    border
-                        variant="tonal"
+                  >
-                        label
+                    <VCardText>
-                      >
+                      <div class="d-flex justify-space-between align-center mb-4">
-                        {{ preparationLine.lineItemOms }}
-                      </VChip>
-
-                      <div class="d-flex">
-                        <span class="text-body-1 font-weight-medium align-center">
-                          {{ preparationLine.itemId }} / {{ preparationLine.seasonCode }}
-                        </span>
-                      </div>
-                    </div>
-                    <VList class="card-list mt-1">
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">N°Exp:</span>
-                          <span>
-                            {{ preparationLine.numeroExpedition }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Cd:</span>
-                          <span>
-                            {{ preparationLine.fulfillmentSystemCd }} /  {{ preparationLine.fulfillmentLocationCd }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Qty:</span>
-                          <span>
-                            {{ preparationLine.validatedFulfillQty }} / {{ preparationLine.fulfillQty }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Carrier:</span>
-                          <span>
-                            {{ preparationLine.carrier }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Tracking:</span>
-                          <span>
-                            {{ preparationLine.trackingCode }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">URL:</span>
-                          <span>
-                            <a
-                              v-if="preparationLine.trackingUrl"
-                              :href="preparationLine.trackingUrl"
-                              target="_blank"
-                              style="text-decoration: underline;"
-                            >Link</a>
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Restocking:</span>
-                          <span>
-                            {{ preparationLine.restockingCode }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
                         <VChip
-                          v-bind="resolveStatus(preparationLine.status)"
                           variant="tonal"
                           label
-                          size="default"
+                        >
-                        />
+                          {{ preparationLine.lineItemOms }}
-                        {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                        </VChip>
-                      </VListItem>
+
-                    </VList>
+                        <div class="d-flex">
-                  </VCardText>
+                          <span class="text-body-1 font-weight-medium align-center">
-                </VCard>
+                            {{ preparationLine.itemId }} / {{ preparationLine.seasonCode }}
-              </VCol>
+                          </span>
-            </template>
+                        </div>
-          </VRow>
+                      </div>
-        </div>
+                      <VList class="card-list mt-1">
-      </VExpansionPanelText>
+                        <VListItem cla>
-    </VExpansionPanel>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">N°Exp:</span>
+                            <span>
+                              {{ preparationLine.numeroExpedition }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem cla>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Cd:</span>
+                            <span>
+                              {{ preparationLine.fulfillmentSystemCd }} /  {{ preparationLine.fulfillmentLocationCd }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem cla>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Qty:</span>
+                            <span>
+                              {{ preparationLine.validatedFulfillQty }} / {{ preparationLine.fulfillQty }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Carrier:</span>
+                            <span>
+                              {{ preparationLine.carrier }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Tracking:</span>
+                            <span>
+                              {{ preparationLine.trackingCode }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">URL:</span>
+                            <span>
+                              <a
+                                v-if="preparationLine.trackingUrl"
+                                :href="preparationLine.trackingUrl"
+                                target="_blank"
+                                style="text-decoration: underline;"
+                              >Link</a>
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Restocking:</span>
+                            <span>
+                              {{ preparationLine.restockingCode }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <VChip
+                            v-bind="resolveOrderStatus(preparationLine.status)"
+                            variant="tonal"
+                            label
+                            size="default"
+                          />
+                          {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                        </VListItem>
+                      </VList>
+                    </VCardText>
+                  </VCard>
+                </VCol>
+              </template>
+            </VRow>
+          </div>
+        </VExpansionPanelText>
+      </VExpansionPanel>
+    </template>
+    <div
+      v-else
+      class="text-h4"
+    >
+      No preparation available
+    </div>
   </VExpansionPanels>
 </template>
 

src/views/pages/order/view/OrderTabReceptionH.vue

@@ -10,19 +10,6 @@ interface Props {
   orderData: Order
 }
 
-const resolveStatus = (status: string) => {
-  if (status === 'fulfilled')
-    return { text: status, color: 'success' }
-  else if (status === 'polled')
-    return { text: status, color: 'info' }
-  else if (status === 'intransit polled')
-    return { text: status, color: 'warning' }
-  else if (status === 'cancelled' || status === 'unfulfillable')
-    return { text: status, color: 'error' }
-  else
-    return { text: status, color: 'primary' }
-}
-
 const panelStatus = ref(0)
 </script>
 
@@ -32,121 +19,130 @@ const panelStatus = ref(0)
     v-model="panelStatus"
     variant="accordion"
   >
-    <VExpansionPanel
+    <template v-if="orderData.receptions && orderData.receptions.length > 0">
-      v-for="(section, index) in orderData.receptions"
+      <VExpansionPanel
-      :key="index"
+        v-for="(section, index) in orderData.receptions"
-      elevation="0"
+        :key="index"
-    >
+        elevation="0"
-      <template #title>
+      >
-        <VCardText class="pa-sm-2">
+        <template #title>
-          <div class="d-flex justify-space-between align-center mb-4">
+          <VCardText class="pa-sm-2">
-            <div>
+            <div class="d-flex justify-space-between align-center mb-4">
-              <VChip
+              <div>
-                v-bind="resolveStatus(section.status)"
+                Recep #{{ index + 1 }} /
-                variant="tonal"
+                <VChip
-                label
+                  v-bind="resolveOrderStatus(section.status)"
-                size="default"
+                  variant="tonal"
-              />
+                  label
-              {{ section.intransitSystemCd }} / {{ section.intransitLocationCd }}
+                  size="default"
+                />
+                {{ section.intransitSystemCd }} / {{ section.intransitLocationCd }}
+              </div>
+              <div class="d-flex">
+                <span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
+              </div>
             </div>
-            <div class="d-flex">
+          </vcardtext>
-              <span class="text-body-1 text-disabled font-weight-medium"> {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}</span>
+        </template>
-            </div>
-          </div>
-        </vcardtext>
-      </template>
 
-      <VExpansionPanelText>
+        <VExpansionPanelText>
-        <!-- 👉 Reception lines -->
+          <!-- 👉 Reception lines -->
-        <div class="mb-6">
+          <div class="mb-6">
-          <VRow>
+            <VRow>
-            <template
+              <template
-              v-for="receptionLine in orderData.receptions[index].lines"
+                v-for="receptionLine in orderData.receptions[index].lines"
-              :key="receptionLine.lineFulfillId"
+                :key="receptionLine.lineFulfillId"
-            >
-              <VCol
-                cols="12"
-                md="4"
-                sm="6"
               >
-                <VCard
+                <VCol
-                  flat
+                  cols="12"
-                  border
+                  md="4"
+                  sm="6"
                 >
-                  <VCardText>
+                  <VCard
-                    <div class="d-flex justify-space-between align-center mb-4">
+                    flat
-                      <VChip
+                    border
-                        variant="tonal"
+                  >
-                        label
+                    <VCardText>
-                      >
+                      <div class="d-flex justify-space-between align-center mb-4">
-                        {{ receptionLine.lineItemNo }}
-                      </VChip>
-
-                      <div class="d-flex">
-                        <span class="text-body-1 font-weight-medium align-center">
-                          {{ receptionLine.itemId }}
-                        </span>
-                      </div>
-                    </div>
-                    <VList class="card-list mt-1">
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Colis:</span>
-                          <span>
-                            {{ receptionLine.colisId }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Cd:</span>
-                          <span>
-                            {{ receptionLine.intransitSystemCd }} /  {{ receptionLine.intransitLocationCd }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem cla>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Qty:</span>
-                          <span>
-                            {{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Tracking:</span>
-                          <span>
-                            {{ receptionLine.trackingNumber }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
-                        <div class="text-body-1">
-                          <span class="font-weight-bold me-2">Weight:</span>
-                          <span>
-                            {{ receptionLine.orderLineShipWeight }}
-                          </span>
-                        </div>
-                      </VListItem>
-                      <VListItem>
                         <VChip
-                          v-bind="resolveStatus(receptionLine.status)"
                           variant="tonal"
                           label
-                          size="default"
+                        >
-                        />
+                          {{ receptionLine.lineItemNo }}
-                        {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                        </VChip>
-                      </VListItem>
+
-                    </VList>
+                        <div class="d-flex">
-                  </VCardText>
+                          <span class="text-body-1 font-weight-medium align-center">
-                </VCard>
+                            {{ receptionLine.itemId }}
-              </VCol>
+                          </span>
-            </template>
+                        </div>
-          </VRow>
+                      </div>
-        </div>
+                      <VList class="card-list mt-1">
-      </VExpansionPanelText>
+                        <VListItem cla>
-    </VExpansionPanel>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Colis:</span>
+                            <span>
+                              {{ receptionLine.colisId }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem cla>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Cd:</span>
+                            <span>
+                              {{ receptionLine.intransitSystemCd }} /  {{ receptionLine.intransitLocationCd }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem cla>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Qty:</span>
+                            <span>
+                              {{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Tracking:</span>
+                            <span>
+                              {{ receptionLine.trackingNumber }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <div class="text-body-1">
+                            <span class="font-weight-bold me-2">Weight:</span>
+                            <span>
+                              {{ receptionLine.orderLineShipWeight }}
+                            </span>
+                          </div>
+                        </VListItem>
+                        <VListItem>
+                          <VChip
+                            v-bind="resolveOrderStatus(receptionLine.status)"
+                            variant="tonal"
+                            label
+                            size="default"
+                          />
+                          {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                        </VListItem>
+                      </VList>
+                    </VCardText>
+                  </VCard>
+                </VCol>
+              </template>
+            </VRow>
+          </div>
+        </VExpansionPanelText>
+      </VExpansionPanel>
+    </template>
+    <div
+      v-else
+      class="text-h4"
+    >
+      No reception available
+    </div>
   </VExpansionPanels>
 </template>
 

src/views/pages/store/view/StoreTabItemHitem.vue

@@ -26,15 +26,10 @@ const fetchData = async () => {
 }
 
 watchEffect(() => {
-  // eslint-disable-next-line sonarjs/no-collapsible-if
+  if (route.query.dbHost && props.item && !(props.item.trim() === ''))
-  if (props.item)
+    fetchData()
-    // eslint-disable-next-line curly
-    if (!(props.item.trim() === ''))
-      fetchData()
 })
 
-// const { t } = useI18n()
-
 const headers = computed(() => [
   { title: t('ITEM_ID'), key: 'itemId' },
   { title: t('LEVEL'), key: 'itemLevelCode' },

src/views/pages/store/view/StoreTabItemHoption.vue

@@ -30,15 +30,10 @@ const fetchData = async () => {
 }
 
 watchEffect(() => {
-  // eslint-disable-next-line sonarjs/no-collapsible-if
+  if (route.query.dbHost && props.item && !(props.item.trim() === ''))
-  if (props.item)
+    fetchData()
-    // eslint-disable-next-line curly
-    if (!(props.item.trim() === ''))
-      fetchData()
 })
 
-// const { t } = useI18n()
-
 const headers = computed(() => [
   { title: t('ITEM_ID'), key: 'itemId' },
   { title: 'LEVEL', key: 'level' },

src/views/pages/store/view/StoreTabItemHprice.vue

@@ -30,15 +30,10 @@ const fetchData = async () => {
 }
 
 watchEffect(() => {
-  // eslint-disable-next-line sonarjs/no-collapsible-if
+  if (route.query.dbHost && props.item && !(props.item.trim() === ''))
-  if (props.item)
+    fetchData()
-    // eslint-disable-next-line curly
-    if (!(props.item.trim() === ''))
-      fetchData()
 })
 
-// const { t } = useI18n()
-
 const headers = computed(() => [
   { title: t('ITEM_ID'), key: 'itemId' },
   { title: t('LEVEL'), key: 'level' },

src/views/pages/store/view/StoreTabItemHstock.vue

@@ -26,15 +26,10 @@ const fetchData = async () => {
 }
 
 watchEffect(() => {
-  // eslint-disable-next-line sonarjs/no-collapsible-if
+  if (route.query.dbHost && props.item && !(props.item.trim() === ''))
-  if (props.item)
+    fetchData()
-    // eslint-disable-next-line curly
-    if (!(props.item.trim() === ''))
-      fetchData()
 })
 
-// const { t } = useI18n()
-
 const headers = computed(() => [
   { title: t('ITEM_ID'), key: 'itemId' },
   { title: 'LOCATION', key: 'invLocationId' },