From fb3a7f1b97f39998cf2f96fd623f20843af3bbaa Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fr=C3=A9d=C3=A9rik=20BENOIST?= <fbenoist68@gmail.com>
Date: Sun, 31 Dec 2023 14:09:49 +0100
Subject: [PATCH] feat: add page breadcrumb

---
 src/navigation/horizontal/index.ts   |   2 +-
 src/navigation/vertical/index.ts     |   2 +-
 src/pages/flux/bl/not_sent/index.vue | 287 ++++++++++++++-------------
 src/pages/store/details/index.vue    |   8 +
 src/pages/store/list/index.vue       |   7 +
 src/pages/xadmin/log/index.vue       |   7 +
 src/plugins/i18n/locales/ar.json     |   1 +
 src/plugins/i18n/locales/en.json     |   1 +
 src/plugins/i18n/locales/fr.json     |   5 +-
 9 files changed, 177 insertions(+), 143 deletions(-)

diff --git a/src/navigation/horizontal/index.ts b/src/navigation/horizontal/index.ts
index 8f84945..aa53d60 100755
--- a/src/navigation/horizontal/index.ts
+++ b/src/navigation/horizontal/index.ts
@@ -14,7 +14,7 @@ export default [
     icon: { icon: 'tabler-topology-bus' },
     children: [
       {
-        title: 'BL not sent',
+        title: 'BL not sent list',
         to: { name: 'flux-bl-not-sent' },
         icon: { icon: 'tabler-unlink' },
       },
diff --git a/src/navigation/vertical/index.ts b/src/navigation/vertical/index.ts
index 8f84945..aa53d60 100755
--- a/src/navigation/vertical/index.ts
+++ b/src/navigation/vertical/index.ts
@@ -14,7 +14,7 @@ export default [
     icon: { icon: 'tabler-topology-bus' },
     children: [
       {
-        title: 'BL not sent',
+        title: 'BL not sent list',
         to: { name: 'flux-bl-not-sent' },
         icon: { icon: 'tabler-unlink' },
       },
diff --git a/src/pages/flux/bl/not_sent/index.vue b/src/pages/flux/bl/not_sent/index.vue
index 1c8111a..7984128 100644
--- a/src/pages/flux/bl/not_sent/index.vue
+++ b/src/pages/flux/bl/not_sent/index.vue
@@ -147,155 +147,164 @@ const exportEXCEL = () => {
 </script>
 
 <template>
+  <VBreadcrumbs
+    class="px-0 py-2"
+    :items="[
+      { title: t('Home'), to: { name: 'root' } },
+      { title: t('BL not sent list') },
+    ]"
+  />
   <div>
-    <!-- 👉 Statistics Widgets -->
-    <VCard class="mb-6">
-      <VCardText>
-        <VRow>
-          <template
-            v-for="(data, id) in widgetData"
-            :key="id"
-          >
+    <div>
+      <!-- 👉 Statistics Widgets -->
+      <VCard class="mb-6">
+        <VCardText>
+          <VRow>
+            <template
+              v-for="(data, id) in widgetData"
+              :key="id"
+            >
+              <VCol
+                cols="12"
+                sm="6"
+                md="3"
+                class="px-6"
+              >
+                <div class="d-flex justify-space-between">
+                  <div class="d-flex flex-column gap-y-1">
+                    <h4
+                      class="text-h4 text-high-emphasis"
+                      :class="{ 'text-error': id === 3 }"
+                    >
+                      {{ data.value }}
+                    </h4>
+                    <div class="text-body-1 text-capitalize">
+                      {{ data.title }}
+                    </div>
+                  </div>
+
+                  <VAvatar
+                    color="rgba(var(--v-theme-on-background), var(--v-hover-opacity))"
+                    rounded
+                    class="text-high-emphasis"
+                    size="38"
+                  >
+                    <VIcon
+                      :icon="data.icon"
+                      size="26"
+                    />
+                  </VAvatar>
+                </div>
+              </VCol>
+              <VDivider
+                v-if="$vuetify.display.mdAndUp ? id !== widgetData.length - 1
+                  : $vuetify.display.smAndUp ? id % 2 === 0
+                    : false"
+                vertical
+                inset
+              />
+            </template>
+          </VRow>
+        </VCardText>
+      </VCard>
+
+      <VCard
+        :title="$t('Filters')"
+        class="mb-6"
+      >
+        <VCardText>
+          <VRow>
+            <!-- 👉 Select distributor -->
             <VCol
               cols="12"
-              sm="6"
-              md="3"
-              class="px-6"
+              sm="4"
             >
-              <div class="d-flex justify-space-between">
-                <div class="d-flex flex-column gap-y-1">
-                  <h4
-                    class="text-h4 text-high-emphasis"
-                    :class="{ 'text-error': id === 3 }"
-                  >
-                    {{ data.value }}
-                  </h4>
-                  <div class="text-body-1 text-capitalize">
-                    {{ data.title }}
-                  </div>
-                </div>
-
-                <VAvatar
-                  color="rgba(var(--v-theme-on-background), var(--v-hover-opacity))"
-                  rounded
-                  class="text-high-emphasis"
-                  size="38"
-                >
-                  <VIcon
-                    :icon="data.icon"
-                    size="26"
-                  />
-                </VAvatar>
-              </div>
+              <AppSelect
+                v-model="selectedDistributor"
+                :placeholder="$t('Distributor')"
+                :items="distributor"
+                clearable
+                clear-icon="tabler-x"
+              />
             </VCol>
-            <VDivider
-              v-if="$vuetify.display.mdAndUp ? id !== widgetData.length - 1
-                : $vuetify.display.smAndUp ? id % 2 === 0
-                  : false"
-              vertical
-              inset
-            />
-          </template>
-        </VRow>
-      </VCardText>
-    </VCard>
 
-    <VCard
-      :title="$t('Filters')"
-      class="mb-6"
-    >
-      <VCardText>
-        <VRow>
-          <!-- 👉 Select distributor -->
-          <VCol
-            cols="12"
-            sm="4"
-          >
-            <AppSelect
-              v-model="selectedDistributor"
-              :placeholder="$t('Distributor')"
-              :items="distributor"
-              clearable
-              clear-icon="tabler-x"
-            />
-          </VCol>
+            <!-- 👉 Select store -->
+            <VCol
+              cols="12"
+              sm="4"
+            >
+              <AppSelect
+                v-model="selectedStore"
+                :placeholder="$t('Store')"
+                :items="store"
+                clearable
+                clear-icon="tabler-x"
+              />
+            </VCol>
 
-          <!-- 👉 Select store -->
-          <VCol
-            cols="12"
-            sm="4"
-          >
-            <AppSelect
-              v-model="selectedStore"
-              :placeholder="$t('Store')"
-              :items="store"
-              clearable
-              clear-icon="tabler-x"
-            />
-          </VCol>
+            <!-- 👉 Select Reference R -->
+            <VCol
+              cols="12"
+              sm="4"
+            >
+              <AppSelect
+                v-model="selectedRefr"
+                :placeholder="$t('Item')"
+                :items="filterRefr"
+                clearable
+                clear-icon="tabler-x"
+              />
+            </VCol>
+          </VRow>
+        </VCardText>
+      </VCard>
 
-          <!-- 👉 Select Reference R -->
-          <VCol
-            cols="12"
-            sm="4"
-          >
-            <AppSelect
-              v-model="selectedRefr"
-              :placeholder="$t('Item')"
-              :items="filterRefr"
-              clearable
-              clear-icon="tabler-x"
+      <!-- 👉 BL not sent -->
+      <VCard
+        :title="$t('BL not sent list')"
+        class="mb-6"
+      >
+        <div class="d-flex flex-wrap gap-4 mx-5">
+          <div class="d-flex align-center">
+            <!-- 👉 Search  -->
+            <AppTextField
+              v-model="searchQuery"
+              :placeholder="$t('Search')"
+              density="compact"
+              style="inline-size: 200px;"
+              class="me-3"
             />
-          </VCol>
-        </VRow>
-      </VCardText>
-    </VCard>
+          </div>
 
-    <!-- 👉 BL not sent -->
-    <VCard
-      :title="$t('BL not sent list')"
-      class="mb-6"
-    >
-      <div class="d-flex flex-wrap gap-4 mx-5">
-        <div class="d-flex align-center">
-          <!-- 👉 Search  -->
-          <AppTextField
-            v-model="searchQuery"
-            :placeholder="$t('Search')"
-            density="compact"
-            style="inline-size: 200px;"
-            class="me-3"
+          <VSpacer />
+
+          <div class="d-flex gap-4 flex-wrap align-center">
+            <!-- 👉 Export button -->
+            <VBtn
+              variant="tonal"
+              color="primary"
+              prepend-icon="tabler-upload"
+              @click="exportEXCEL"
+            >
+              Export
+            </VBtn>
+          </div>
+        </div>
+
+        <VDivider class="mt-4" />
+
+        <VCol cols="12">
+          <!-- 👉 Datatable  -->
+          <VDataTable
+            class="dt-row-striped"
+            :headers="headers"
+            :items="filteredData"
+            :items-per-page="options.itemsPerPage"
+            :page="options.page"
+            :options="options"
           />
-        </div>
-
-        <VSpacer />
-
-        <div class="d-flex gap-4 flex-wrap align-center">
-          <!-- 👉 Export button -->
-          <VBtn
-            variant="tonal"
-            color="primary"
-            prepend-icon="tabler-upload"
-            @click="exportEXCEL"
-          >
-            Export
-          </VBtn>
-        </div>
-      </div>
-
-      <VDivider class="mt-4" />
-
-      <VCol cols="12">
-        <!-- 👉 Datatable  -->
-        <VDataTable
-          class="dt-row-striped"
-          :headers="headers"
-          :items="filteredData"
-          :items-per-page="options.itemsPerPage"
-          :page="options.page"
-          :options="options"
-        />
-      </VCol>
-    </Vcard>
+        </VCol>
+      </Vcard>
+    </div>
   </div>
 </template>
diff --git a/src/pages/store/details/index.vue b/src/pages/store/details/index.vue
index 47f7bfe..9573a91 100644
--- a/src/pages/store/details/index.vue
+++ b/src/pages/store/details/index.vue
@@ -25,6 +25,14 @@ const { data: storeData } = await useApi<any>(`/stores/${route.query.storeId}/de
 </script>
 
 <template>
+  <VBreadcrumbs
+    class="px-0 py-2"
+    :items="[
+      { title: t('Home'), to: { name: 'root' } },
+      { title: t('List of stores'), to: { name: 'store-list' } },
+      { title: t('Store visualization') },
+    ]"
+  />
   <div>
     <StoreHeader
       class="mb-5"
diff --git a/src/pages/store/list/index.vue b/src/pages/store/list/index.vue
index 077d095..eaff084 100644
--- a/src/pages/store/list/index.vue
+++ b/src/pages/store/list/index.vue
@@ -124,6 +124,13 @@ const reloadStores = async () => {
 </script>
 
 <template>
+  <VBreadcrumbs
+    class="px-0 py-2"
+    :items="[
+      { title: t('Home'), to: { name: 'root' } },
+      { title: t('List of stores') },
+    ]"
+  />
   <div>
     <!-- 👉 filters -->
     <VCard
diff --git a/src/pages/xadmin/log/index.vue b/src/pages/xadmin/log/index.vue
index 709f17f..a35a06e 100644
--- a/src/pages/xadmin/log/index.vue
+++ b/src/pages/xadmin/log/index.vue
@@ -238,6 +238,13 @@ const exportEXCEL = () => {
 </script>
 
 <template>
+  <VBreadcrumbs
+    class="px-0 py-2"
+    :items="[
+      { title: t('Home'), to: { name: 'root' } },
+      { title: t('Logs list') },
+    ]"
+  />
   <div>
     <!-- 👉 Statistics Widgets -->
     <VCard class="mb-6">
diff --git a/src/plugins/i18n/locales/ar.json b/src/plugins/i18n/locales/ar.json
index ccfa2ba..bf1b24a 100755
--- a/src/plugins/i18n/locales/ar.json
+++ b/src/plugins/i18n/locales/ar.json
@@ -6,6 +6,7 @@
   "OBI": "OBI",
   "Dotsoft": "Dotsoft",
   "List of stores": "قائمة المتاجر",
+  "Store visualization": "عرض المتاجر",
   "BL not sent list": "قائمة البيانات الخارجية غير المرسلة",
   "BL not sent": "بيانات البيانات الخارجية غير المرسلة",
   "ST ID": "ST ID",
diff --git a/src/plugins/i18n/locales/en.json b/src/plugins/i18n/locales/en.json
index d481257..2cd707a 100755
--- a/src/plugins/i18n/locales/en.json
+++ b/src/plugins/i18n/locales/en.json
@@ -6,6 +6,7 @@
   "OBI": "OBI",
   "Dotsoft": "Dotsoft",
   "List of stores": "List of stores",
+  "Store visualization": "Store visualization",
   "BL not sent list": "BL not sent list",
   "BL not sent": "BL not sent",
   "ST ID": "ST ID",
diff --git a/src/plugins/i18n/locales/fr.json b/src/plugins/i18n/locales/fr.json
index 92ebe9d..4f6b2b4 100755
--- a/src/plugins/i18n/locales/fr.json
+++ b/src/plugins/i18n/locales/fr.json
@@ -6,8 +6,9 @@
   "OBI": "OBI",
   "Dotsoft": "Dotsoft",
   "List of stores": "Liste des boutiques",
-  "BL not sent list": "Liste des BL non envoyés",
-  "BL not sent": "BL non envoyé",
+  "Store visualization": "Visualisation boutique",
+  "BL not sent list": "Liste BL non envoyés",
+  "BL not sent": "BL non envoyés",
   "ST ID": "ID ST",
   "Exp ID": "ID Exp",
   "BL ID": "ID BL",