feat: obi visualization

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

@@ -12,10 +12,10 @@ const orderData = ref<Order>()
 const orderTab = ref(null)
 
 const tabs = [
-  { title: 'General' },
+  { title: t('General') },
-  { title: 'Preparation' },
+  { title: t('Preparation') },
-  { title: 'Receipt' },
+  { title: t('Receipt') },
-  { title: 'Flow' },
+  { title: t('Flow') },
 ]
 
 const { data, error, execute: fetchOrder } = await useApi<Order>(`/obi/order/${route.params.id}`)
@@ -80,7 +80,7 @@ handleData()
           color="primary"
           @click="refreshData"
         >
-          Reload
+          {{ t("Reload") }}
         </VBtn>
       </div>
     </div>

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

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { format } from 'date-fns'
+import { endOfMonth, format, startOfDay, startOfMonth, subDays, subMonths } from 'date-fns'
 import { VDataTableServer } from 'vuetify/labs/VDataTable'
 import { paginationMeta } from '@api-utils/paginationMeta'
 
@@ -8,10 +8,10 @@ const { t } = useI18n()
 // Data table Headers
 const headers = [
   { title: 'Id', key: 'meta.id' },
-  { title: 'Order', key: 'common.orderId' },
+  { title: t('Order'), key: 'common.orderId' },
-  { title: 'Date', key: 'common.transaction.transactionDate' },
+  { title: t('Date'), key: 'common.transaction.transactionDate' },
-  { title: 'Status', key: 'common.statusData.code' },
+  { title: t('Status'), key: 'common.statusData.code' },
-  { title: 'Type', key: 'common.transaction.transactionTypeDescription' },
+  { title: t('Type'), key: 'common.transaction.transactionTypeDescription' },
 ]
 
 const selectedStatus = ref()
@@ -48,6 +48,9 @@ const page = ref(1)
 const sortBy = ref('request_id')
 const orderBy = ref('desc')
 
+const beginDate = ref<Date | null>(null)
+const endDate = ref<Date | null>(null)
+
 const sortByMapping = (sortby: string) => {
   const headerMapping: { [key: string]: string } = {
     'meta.id': 'request_id',
@@ -80,6 +83,8 @@ const { data: ordersData } = await useApi<any>(createUrl('/obi/order',
       orderBy,
       status: selectedStatus,
       type: selectedType,
+      minDate: beginDate,
+      maxDate: endDate,
     },
   },
 ))
@@ -88,16 +93,44 @@ const widgetData = computed(() => ordersData.value.statistics)
 const orders = computed(() => ordersData.value.orders)
 const totalOrder = computed(() => ordersData.value.total)
 
-const minDate = ref(new Date(2023, 1, 7))
+watch(beginDate, newBeginDate => {
-const maxDate = ref(new Date())
+  if (endDate.value && newBeginDate !== null && newBeginDate > endDate.value)
-const dateRange = ref([minDate.value.getTime(), maxDate.value.getTime()])
+    endDate.value = newBeginDate
+})
 
-const updateDates = () => {
+watch(endDate, newEndDate => {
-  dateRange.value = dateRange.value.map(date => new Date(date).getTime())
+  if (beginDate.value && newEndDate !== null && newEndDate < beginDate.value)
+    beginDate.value = newEndDate
+})
+
+const selectLastMonth = () => {
+  beginDate.value = startOfMonth(subMonths(new Date(), 1))
+  endDate.value = endOfMonth(subMonths(new Date(), 1))
 }
 
-const formattedStartDate = computed(() => format(new Date(dateRange.value[0]), 'dd/MM/yyyy'))
+const selectThisMonth = () => {
-const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd/MM/yyyy'))
+  const today = new Date()
+  const firstDayOfMonth = startOfMonth(today)
+  const lastDayOfMonth = endOfMonth(today)
+
+  beginDate.value = firstDayOfMonth
+  endDate.value = today < lastDayOfMonth ? today : lastDayOfMonth
+}
+
+const selectLast7Days = () => {
+  beginDate.value = startOfDay(subDays(new Date(), 6))
+  endDate.value = startOfDay(new Date())
+}
+
+const selectToday = () => {
+  beginDate.value = startOfDay(new Date())
+  endDate.value = startOfDay(new Date())
+}
+
+const clearDates = () => {
+  beginDate.value = null
+  endDate.value = null
+}
 </script>
 
 <template>
@@ -120,7 +153,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
             <VCol
               cols="12"
               sm="6"
-              md="3"
+              md="2"
               class="px-6"
             >
               <div
@@ -205,41 +238,65 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
             />
           </VCol>
         </VRow>
+
         <VRow>
-          <!-- 👉 dates range -->
+          <VCol
-          <VRangeSlider
+            cols="12"
-            v-model="dateRange"
+            sm="4"
-            :min="minDate.getTime()"
-            :max="maxDate.getTime()"
-            class="mb-4"
-            :thumb-label="false"
-            @change="updateDates"
           >
-            <template #prepend>
+            <!-- 👉 Begin Date -->
-              <VTextField
+            <AppDateTimePicker
-                v-model="formattedStartDate"
+              v-model="beginDate"
-                hide-details
+              :placeholder="$t('Date begin')"
-                single-line
+              :config="{ altFormat: 'J M Y', altInput: true, dateFormat: 'Ymd' }"
-                type="String"
+            />
-                variant="outlined"
+          </VCol>
-                density="compact"
+          <VCol
-                readonly
+            cols="12"
-                style="inline-size: 120px"
+            sm="4"
-              />
+          >
-            </template>
+            <!-- 👉 End Date -->
-            <template #append>
+            <AppDateTimePicker
-              <VTextField
+              v-model="endDate"
-                v-model="formattedEndDate"
+              :placeholder="$t('Date end')"
-                hide-details
+              :config="{ altFormat: 'J M Y', altInput: true, dateFormat: 'Ymd' }"
-                single-line
+            />
-                type="String"
+          </VCol>
-                variant="outlined"
+          <VCol
-                density="compact"
+            cols="12"
-                readonly
+            sm="4"
-                style="inline-size: 120px"
+          >
-              />
+            <VBtn
-            </template>
+              variant="text"
-          </VRangeSlider>
+              @click="selectLastMonth"
+            >
+              {{ $t('Last month') }}
+            </VBtn>
+            <VBtn
+              variant="text"
+              @click="selectThisMonth"
+            >
+              {{ $t('This month') }}
+            </VBtn>
+            <VBtn
+              variant="text"
+              @click="selectLast7Days"
+            >
+              {{ $t('Last 7 days') }}
+            </VBtn>
+            <VBtn
+              variant="text"
+              @click="selectToday"
+            >
+              {{ $t('Today') }}
+            </VBtn>
+            <VBtn
+              variant="text"
+              @click="clearDates"
+            >
+              {{ $t('All') }}
+            </VBtn>
+          </VCol>
         </VRow>
       </VCardText>
     </VCard>
@@ -251,7 +308,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
           <VTextField
             v-model="searchQuery"
             density="compact"
-            placeholder="Search"
+            :placeholder="$t('Search')"
             style=" max-inline-size: 200px; min-inline-size: 200px;"
           />
 
@@ -331,7 +388,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
                   v-bind="slotProps"
                   :icon="false"
                 >
-                  Previous
+                  {{ $t('$vuetify.pagination.ariaLabel.previous') }}
                 </VBtn>
               </template>
 
@@ -342,7 +399,7 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
                   v-bind="slotProps"
                   :icon="false"
                 >
-                  Next
+                  {{ $t('$vuetify.pagination.ariaLabel.next') }}
                 </VBtn>
               </template>
             </VPagination>
@@ -352,14 +409,3 @@ const formattedEndDate = computed(() => format(new Date(dateRange.value[1]), 'dd
     </VCard>
   </div>
 </template>
-
-<style lang="scss" scoped>
-.customer-title:hover{
-  color: rgba(var(--v-theme-primary)) !important;
-}
-
-.product-widget{
-  border-block-end: 1px solid rgba(var(--v-theme-on-surface), var(--v-border-opacity));
-  padding-block-end: 1rem;
-}
-</style>

src/plugins/fake-api/utils/paginationMeta.ts

@@ -1,6 +1,7 @@
 export const paginationMeta = <T extends { page: number; itemsPerPage: number }>(options: T, total: number) => {
   const start = (options.page - 1) * options.itemsPerPage + 1
   const end = Math.min(options.page * options.itemsPerPage, total)
+  const { t } = useI18n()
 
-  return `Showing ${total === 0 ? 0 : start} to ${end} of ${total} entries`
+  return `${t('Showing')} ${total === 0 ? 0 : start} ${t('to')} ${end} ${t('of')} ${total} ${t('entries')}`
 }

src/plugins/i18n/locales/ar.json

@@ -70,8 +70,57 @@
   "Dates range error": "With a date range, a text of at least 5 characters must be specified",
   "Close": "Close",
   "Connect to invidual POS": "Connect to invidual POS",
-  "Orders list": "Orders list",
   "Sign": "Sign",
+  "Order list": "قائمة الطلبات",
+  "Status": "الحالة",
+  "Type": "النوع",
+  "Last month": "الشهر الماضي",
+  "This month": "هذا الشهر",
+  "Last 7 days": "آخر 7 أيام",
+  "Today": "اليوم",
+  "All": "الكل",
+  "Date begin": "Date begin",
+  "Date end": "Date end",
+  "Order": "الطلب",
+  "showing": "Showing",
+  "to": "to",
+  "of": "of",
+  "entries": "entries",
+  "Consumed": "Consumed",
+  "Created": "Created",
+  "Qty": "Qty",
+  "General": "General",
+  "Preparation": "Preparation",
+  "Receipt": "Receipt",
+  "Order lines": "Order lines",
+  "Transaction date history": "Transaction date history",
+  "Creation date history": "Creation date history",
+  "Status order history": "Status order history",
+  "Order was": "Order was",
+  "Your order has been": "Your order has been",
+  "Order line was": "Order line was",
+  "successfully": "successfully",
+  "OMS": "OMS",
+  "OMS Partner": "OMS Partner",
+  "Transaction details": "Transaction details",
+  "Last status": "Last status",
+  "Added": "Added",
+  "Modified": "Modified",
+  "Transaction": "Transaction",
+  "Open order": "Open order",
+  "Origin request": "Origin request",
+  "Cust Id": "Cust Id",
+  "Ship for Pickup": "Ship for Pickup",
+  "Order transaction": "Order transaction",
+  "Order Details": "Order Details",
+  "Package": "Package",
+  "Tracking": "Tracking",
+  "Cd": "Cd",
+  "Weight": "Weight",
+  "N°Exp": "N°Exp",
+  "Carrier": "Carrier",
+  "URL": "URL",
+  "Restocking": "Restocking",
   "---------------------------": "---------------------------",
   "UI Elements": "عناصر واجهة المستخدم",
   "Forms & Tables": "النماذج والجداول",
@@ -212,7 +261,6 @@
   "Ecommerce": "التجارة الإلكترونية",
   "Product": "المنتج",
   "Category": "الفئة",
-  "Order": "طلب",
   "Details": "تفاصيل",
   "Customer": "الزبون",
   "Manage Review": "إدارة المراجعة",

src/plugins/i18n/locales/en.json

@@ -72,6 +72,55 @@
   "Connect to invidual POS": "Connect to invidual POS",
   "Orders list": "Orders list",
   "Sign": "Sign",
+  "Status": "Status",
+  "Type": "Type",
+  "Last month": "Last month",
+  "This month": "This month",
+  "Last 7 days": "Last 7 days",
+  "Today": "Today",
+  "All": "All",
+  "Date begin": "Date begin",
+  "Date end": "Date end",
+  "Order": "Order",
+  "Showing": "Showing",
+  "to": "to",
+  "of": "of",
+  "entries": "entries",
+  "Consumed": "Consumed",
+  "Created": "Created",
+  "Qty": "Qty",
+  "Preparation": "Preparation",
+  "Receipt": "Réception",
+  "Order lines": "Order lines",
+  "Status history": "Status history",
+  "Transaction date history": "Transaction date history",
+  "Creation date history": "Creation date history",
+  "Status order history": "Status order history",
+  "Order was": "Order was",
+  "Order has been": "Order has been",
+  "Order line was": "Order line was",
+  "successfully": "successfully",
+  "OMS": "OMS",
+  "OMS Partner": "OMS Partner",
+  "Transaction details": "Transaction details",
+  "Last status": "Last status",
+  "Added": "Added",
+  "Modified": "Modified",
+  "Transaction": "Transaction",
+  "Open order": "Open order",
+  "Origin request": "Origin request",
+  "Cust Id": "Cust Id",
+  "Ship for Pickup": "Ship for Pickup",
+  "Order transaction": "Order transaction",
+  "Order Details": "Order Details",
+  "Package": "Package",
+  "Tracking": "Tracking",
+  "Cd": "Cd",
+  "Weight": "Weight",
+  "N°Exp": "N°Exp",
+  "Carrier": "Carrier",
+  "URL": "URL",
+  "Restocking": "Restocking",
   "---------------------------": "---------------------------",
   "UI Elements": "UI Elements",
   "Forms & Tables": "Forms & Tables",
@@ -218,7 +267,6 @@
   "Swiper": "Swiper",
   "Product": "Product",
   "Category": "Category",
-  "Order": "Order",
   "Details": "Details",
   "Customer": "Customer",
   "Manage Review": "Manage Review",

src/plugins/i18n/locales/fr.json

@@ -72,6 +72,56 @@
   "Connect to invidual POS": "Connexion à une caisse individuelle",
   "Orders list": "Liste des commandes",
   "Sign": "Enseigne",
+  "Order list": "Liste des commandes",
+  "Status": "Statut",
+  "Type": "Type",
+  "Last month": "Mois dernier",
+  "This month": "Ce mois",
+  "Last 7 days": "7 derniers jours",
+  "Today": "Aujourd'hui",
+  "All": "Tous",
+  "Date begin": "Date début",
+  "Date end": "Date fin",
+  "Order": "Commande",
+  "Showing": "Affichage",
+  "to": "à",
+  "of": "parmi",
+  "entries": "entrées",
+  "Consumed": "Consumed",
+  "Created": "Créé",
+  "Qty": "Qté",
+  "Preparation": "Preparation",
+  "Receipt": "Réception",
+  "Order lines": "Lignes de commande",
+  "Status history": "Histo. statuts",
+  "Transaction date history": "Histo. dates transaction",
+  "Creation date history": "Histo. dates création",
+  "Status order history": "Historique statuts commande",
+  "Order was": "Commande a été",
+  "Order has been": "Commande a été",
+  "Order line was": "Ligne a été",
+  "successfully": "avec succès",
+  "OMS": "OMS",
+  "OMS Partner": "Partenaire OMS",
+  "Transaction details": "Détails transaction",
+  "Last status": "Dernier statut",
+  "Added": "Ajouté",
+  "Modified": "Modifié",
+  "Transaction": "Transaction",
+  "Open order": "Commande",
+  "Origin request": "Origine",
+  "Cust Id": "Id client",
+  "Ship for Pickup": "Ship for Pickup",
+  "Order transaction": "Transaction commande",
+  "Order Details": "Details commande",
+  "Package": "Colis",
+  "Tracking": "Tracking",
+  "Cd": "Cd",
+  "Weight": "Poids",
+  "N°Exp": "N°Exp",
+  "Carrier": "Transport",
+  "URL": "URL",
+  "Restocking": "Restocking",
   "---------------------------": "---------------------------",
   "UI Elements": "ÉLÉMENTS DE L'UI",
   "Forms & Tables": "Formulaires et tableaux",
@@ -214,7 +264,6 @@
   "Ecommerce": "Commerce électronique",
   "Product": "Produit",
   "Category": "Catégorie",
-  "Order": "Ordre",
   "Details": "Détails",
   "Customer": "Client",
   "Manage Review": "Gérer la revue",
@@ -252,7 +301,7 @@
     "dataFooter": {
       "itemsPerPageText": "Objets par page:",
       "itemsPerPageAll": "Tout",
-      "pageText": "{0}-{1} of {2}",
+      "pageText": "{0}-{1} de {2}",
       "firstPage": "Première page",
       "prevPage": "Page précédente",
       "nextPage": "Page suivante",

src/plugins/i18n/vue-i18n.d.ts

@@ -6,10 +6,13 @@
 /**
  * you need to import the some interfaces
  */
+import ar from '@/plugins/i18n/locales/ar.json';
 import en from '@/plugins/i18n/locales/en.json';
+import fr from '@/plugins/i18n/locales/fr.json';
 import 'vue-i18n';
 
-type LocaleMessage = typeof en
+type LocaleMessage = typeof en & typeof fr & typeof ar;
+
 
 declare module 'vue-i18n' { 
   export interface DefineLocaleMessage extends LocaleMessage {

src/plugins/vuetify/index.ts

@@ -1,10 +1,13 @@
 import { deepMerge } from '@antfu/utils'
 import type { App } from 'vue'
+import { useI18n } from 'vue-i18n'
 import { createVuetify } from 'vuetify'
 import { VBtn } from 'vuetify/components/VBtn'
+import { createVueI18nAdapter } from 'vuetify/locale/adapters/vue-i18n'
 import defaults from './defaults'
 import { icons } from './icons'
 import { staticPrimaryColor, themes } from './theme'
+import { getI18n } from '@/plugins/i18n/index'
 
 // Styles
 import { cookieRef } from '@/@layouts/stores/config'
@@ -37,7 +40,9 @@ export default function (app: App) {
     defaults,
     icons,
     theme: optionTheme,
-
+    locale: {
+      adapter: createVueI18nAdapter({ i18n: getI18n(), useI18n }),
+    },
   })
 
   app.use(vuetify)

src/utils/order.ts

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

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

@@ -7,6 +7,8 @@ import 'vue-json-pretty/lib/styles.css'
 
 const props = defineProps<Props>()
 
+const { t } = useI18n()
+
 interface Props {
   orderData: Order
 }
@@ -56,10 +58,10 @@ const openOmsOrderPage = (): void => {
       <VCol cols="6">
         <VCardText class="pa-4">
           <h6 class="text-lg text-no-wrap font-weight-medium">
-            Proximis
+            {{ $t('OMS') }}
           </h6>
           <p class="mb-2">
-            OMS Partner
+            {{ $t('OMS Partner') }}
           </p>
         </VCardText>
       </VCol>
@@ -81,7 +83,7 @@ const openOmsOrderPage = (): void => {
           <div v-if="omsData">
             <VList class="card-list mt-0">
               <div class="text-disabled text-uppercase text-sm">
-                Transaction details
+                {{ $t('Transaction details') }}
               </div>
               <VListItem>
                 <div class="text-body-1 mt-2">
@@ -95,7 +97,7 @@ const openOmsOrderPage = (): void => {
             <VList class="card-list mt-2">
               <VListItem>
                 <div class="text-body-1">
-                  <span class="font-weight-bold me-2">Last status:</span>
+                  <span class="font-weight-bold me-2">{{ $t('Last status') }}:</span>
                   <span>
                     {{ omsData.oms.item.status }}
                   </span>
@@ -105,7 +107,7 @@ const openOmsOrderPage = (): void => {
             <VList class="card-list mt-2">
               <VListItem>
                 <div class="text-body-1">
-                  <span class="font-weight-bold me-2">Added:</span>
+                  <span class="font-weight-bold me-2">{{ $t('Added') }}:</span>
                   <span>
                     {{ format(omsData.oms.item.modificationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                   </span>
@@ -125,7 +127,7 @@ const openOmsOrderPage = (): void => {
             <VList class="card-list mt-2">
               <VListItem>
                 <div class="text-body-1">
-                  <span class="font-weight-bold me-2">Modified:</span>
+                  <span class="font-weight-bold me-2">{{ $t('Modified') }}:</span>
                   <span>
                     {{ format(omsData.oms.item.creationDate, "EEEE d MMMM yyyy HH:mm:ss") }}
                   </span>
@@ -147,7 +149,7 @@ const openOmsOrderPage = (): void => {
             class="mt-0"
             @click="openOrderMessageDialog"
           >
-            Transaction
+            {{ $t('Transaction') }}
           </VBtn>
         </VCardText>
       </VCol>
@@ -162,7 +164,7 @@ const openOmsOrderPage = (): void => {
             class="mt-0"
             @click="openOmsOrderPage"
           >
-            Open order
+            {{ $t('Open order') }}
           </VBtn>
         </VCardText>
       </VCol>
@@ -191,7 +193,7 @@ const openOmsOrderPage = (): void => {
             />
           </VBtn>
 
-          <VToolbarTitle>Order transaction</VToolbarTitle>
+          <VToolbarTitle>{{ t("Order transaction") }}</VToolbarTitle>
 
           <VSpacer />
 
@@ -200,7 +202,7 @@ const openOmsOrderPage = (): void => {
               variant="text"
               @click="OrderMessageDialogVisible = false"
             >
-              Close
+              {{ t("Close") }}
             </VBtn>
           </VToolbarItems>
         </VToolbar>

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

@@ -20,12 +20,12 @@ interface Props {
         <!-- 👉 Order Details -->
         <VCardText>
           <div class="text-disabled text-uppercase text-sm">
-            Order Details
+            {{ $t('Order Details') }}
           </div>
           <VList class="card-list mt-2">
             <VListItem>
               <div class="text-body-1">
-                <span class="font-weight-bold me-2">Origin request:</span>
+                <span class="font-weight-bold me-2">{{ $t('Origin request') }}:</span>
                 <span>
                   {{ props.orderData.common.requestingLocationCd }} / {{ props.orderData.common.requestingSystemCd }}
                 </span>
@@ -33,7 +33,7 @@ interface Props {
             </VListItem>
             <VListItem>
               <div class="text-body-1">
-                <span class="font-weight-bold me-2">Cust Id:</span>
+                <span class="font-weight-bold me-2">{{ $t('Cust Id') }}:</span>
                 <span>
                   {{ props.orderData.common.customerId }}
                 </span>
@@ -41,7 +41,7 @@ interface Props {
             </VListItem>
             <VListItem>
               <div class="text-body-1">
-                <span class="font-weight-bold me-2">Date creation:</span>
+                <span class="font-weight-bold me-2">{{ $t('Created') }}:</span>
                 <span>
                   {{ format(props.orderData.common.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
                 </span>
@@ -49,7 +49,7 @@ interface Props {
             </VListItem>
             <VListItem>
               <div class="text-body-1">
-                <span class="font-weight-bold me-2">Ship for Pickup:</span>
+                <span class="font-weight-bold me-2">{{ $t('Ship for Pickup') }}:</span>
                 <span>
                   {{ props.orderData.common.shipforpickupLocationCd }} /  {{ props.orderData.common.shipforpickupSystemCd }}
                 </span>
@@ -57,7 +57,7 @@ interface Props {
             </VListItem>
           </VList>
           <div class="text-disabled text-uppercase mt-4 text-sm">
-            Transaction
+            {{ $t('Transaction') }}
           </div>
           <VList class="card-list mt-2">
             <VListItem>

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

@@ -19,7 +19,6 @@ const headers = computed(() => [
   { title: t('Date'), key: 'transactionDate' },
   { title: t('Status'), key: 'status' },
   { title: t('Consumed'), key: 'consumed' },
-  { title: t('Created'), key: 'fdateCreation' },
 ])
 </script>
 
@@ -29,7 +28,7 @@ const headers = computed(() => [
     <VCardItem>
       <template #title>
         <h5 class="text-h5">
-          Order Lines
+          {{ $t('Order lines') }}
         </h5>
       </template>
     </VCardItem>
@@ -52,43 +51,53 @@ const headers = computed(() => [
         </VChip>
       </template>
 
+      <template #item.status="{ item }">
+        <VChip
+          variant="outlined"
+          label
+        >
+          {{ item.status }}
+        </VChip>
+      </template>
+
       <!-- Expanded Row Data -->
       <template #expanded-row="slotProps">
         <td :colspan="headers.length">
-          <VTable
+          <VCardText>
-            density="compact"
+            <VTimeline
-            class="text-no-wrap"
+              truncate-line="both"
-          >
+              align="start"
-            <thead>
+              side="end"
-              <tr>
+              line-color="primary"
-                <th class="text-uppercase">
+              density="compact"
-                  Status history
+              class="v-timeline-density-compact"
-                </th>
+            >
-                <th class="text-uppercase">
+              <template
-                  Transaction date history
+                v-for="(historyItem, index) in slotProps.item.history"
-                </th>
+                :key="index"
-                <th class="text-uppercase">
-                  Creation date history
-                </th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr
-                v-for="item in slotProps.item.history"
-                :key="item.statusId"
               >
-                <td>
+                <VTimelineItem
-                  {{ item.status }}
+                  dot-color="primary"
-                </td>
+                  size="x-small"
-                <td>
+                >
-                  {{ format(item.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                  <div class="d-flex justify-space-between align-center">
-                </td>
+                    <div class="app-timeline-title">
-                <td>
+                      <VChip
-                  {{ format(item.fdateCreation, "EEEE d MMMM yyyy HH:mm:ss") }}
+                        variant="outlined"
-                </td>
+                        label
-              </tr>
+                      >
-            </tbody>
+                        {{ historyItem.status }}
-          </VTable>
+                      </VChip>
+                      (Id#{{ historyItem.statusId }})
+                    </div>
+                    <div class="app-timeline-meta">
+                      {{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                    </div>
+                  </div>
+                </VTimelineItem>
+              </template>
+            </VTimeline>
+          </VCardText>
         </td>
       </template>
 
@@ -115,7 +124,7 @@ const headers = computed(() => [
   </VCard>
 
   <!-- 👉 Order History -->
-  <VCard title="Status order history">
+  <VCard :title="$t('Status order history')">
     <VCardText>
       <VTimeline
         truncate-line="both"
@@ -135,15 +144,18 @@ const headers = computed(() => [
           >
             <div class="d-flex justify-space-between align-center">
               <div class="app-timeline-title">
-                Order was {{ historyItem.status }} (Id: #{{ historyItem.statusId }})
+                <VChip
+                  variant="outlined"
+                  label
+                >
+                  {{ historyItem.status }}
+                </VChip>
+                (Id#{{ historyItem.statusId }})
               </div>
               <div class="app-timeline-meta">
                 {{ format(historyItem.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
               </div>
             </div>
-            <p class="app-timeline-text mb-0">
-              Your order has been {{ historyItem.status }} successfully
-            </p>
           </VTimelineItem>
         </template>
       </VTimeline>

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

@@ -80,7 +80,7 @@ const panelStatus = ref(0)
                       <VList class="card-list mt-1">
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">N°Exp:</span>
+                            <span class="font-weight-bold me-2">{{ $t('N°Exp') }}:</span>
                             <span>
                               {{ preparationLine.numeroExpedition }}
                             </span>
@@ -88,7 +88,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Cd:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
                             <span>
                               {{ preparationLine.fulfillmentSystemCd }} /  {{ preparationLine.fulfillmentLocationCd }}
                             </span>
@@ -96,7 +96,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Qty:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
                             <span>
                               {{ preparationLine.validatedFulfillQty }} / {{ preparationLine.fulfillQty }}
                             </span>
@@ -104,7 +104,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Carrier:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Carrier') }}:</span>
                             <span>
                               {{ preparationLine.carrier }}
                             </span>
@@ -112,7 +112,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Tracking:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
                             <span>
                               {{ preparationLine.trackingCode }}
                             </span>
@@ -120,7 +120,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">URL:</span>
+                            <span class="font-weight-bold me-2">{{ $t('URL') }}:</span>
                             <span>
                               <a
                                 v-if="preparationLine.trackingUrl"
@@ -133,7 +133,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Restocking:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Restocking') }}:</span>
                             <span>
                               {{ preparationLine.restockingCode }}
                             </span>
@@ -144,9 +144,9 @@ const panelStatus = ref(0)
                             v-bind="resolveOrderStatus(preparationLine.status)"
                             variant="tonal"
                             label
-                            size="default"
+                            size="x-small"
                           />
-                          {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                          {{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
                         </VListItem>
                       </VList>
                     </VCardText>

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

@@ -80,7 +80,7 @@ const panelStatus = ref(0)
                       <VList class="card-list mt-1">
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Colis:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Package') }}:</span>
                             <span>
                               {{ receptionLine.colisId }}
                             </span>
@@ -88,7 +88,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Cd:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Cd') }}:</span>
                             <span>
                               {{ receptionLine.intransitSystemCd }} /  {{ receptionLine.intransitLocationCd }}
                             </span>
@@ -96,7 +96,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem cla>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Qty:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Qty') }}:</span>
                             <span>
                               {{ receptionLine.validatedIntransitQty }} / {{ receptionLine.intransitQty }}
                             </span>
@@ -104,7 +104,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Tracking:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Tracking') }}:</span>
                             <span>
                               {{ receptionLine.trackingNumber }}
                             </span>
@@ -112,7 +112,7 @@ const panelStatus = ref(0)
                         </VListItem>
                         <VListItem>
                           <div class="text-body-1">
-                            <span class="font-weight-bold me-2">Weight:</span>
+                            <span class="font-weight-bold me-2">{{ $t('Weight') }}:</span>
                             <span>
                               {{ receptionLine.orderLineShipWeight }}
                             </span>
@@ -123,9 +123,9 @@ const panelStatus = ref(0)
                             v-bind="resolveOrderStatus(receptionLine.status)"
                             variant="tonal"
                             label
-                            size="default"
+                            size="x-small"
                           />
-                          {{ format(section.transactionDate, "EEEE d MMMM yyyy HH:mm:ss") }}
+                          {{ format(section.transactionDate, "dd/MM/yyyy HH:mm:ss") }}
                         </VListItem>
                       </VList>
                     </VCardText>