From a74ff042bcc0ad4866a728eb0a0dec25b8c6ab0c Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 21 Mar 2025 11:09:42 +0100
Subject: [PATCH 1/4] feat: refs #7358 added chip in navbar to show environment

---
 src/components/NavBar.vue | 17 +++++++++++++++++
 1 file changed, 17 insertions(+)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index dbb6f1fe6..605d8786a 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -18,7 +18,18 @@ const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
 const pinnedModulesRef = ref();
+const env = process.env.NODE_ENV;
 
+function getEnvironment() {
+    switch (env) {
+        case 'development':
+            return 'dev';
+        case 'production':
+            return;
+        default:
+            return env;
+    }
+}
 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
 </script>
@@ -50,6 +61,9 @@ const refresh = () => window.location.reload();
                     </QTooltip>
                 </QBtn>
             </RouterLink>
+            <QChip class="q-ml-xs q-mr-xs envChip">
+                {{ getEnvironment() }}
+            </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner
                 color="primary"
@@ -118,4 +132,7 @@ const refresh = () => window.location.reload();
 .q-header {
     background-color: var(--vn-section-color);
 }
+.envChip {
+    background-color: $primary;
+}
 </style>

From d8b9f3467a5fab53b7739c99c3c8c0c2fd5824f4 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Fri, 21 Mar 2025 13:25:59 +0100
Subject: [PATCH 2/4] refactor: refs #7358 changed function to computed

---
 src/components/NavBar.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 605d8786a..6365fcd07 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useStateStore } from 'stores/useStateStore';
@@ -20,16 +20,16 @@ const appName = 'Lilium';
 const pinnedModulesRef = ref();
 const env = process.env.NODE_ENV;
 
-function getEnvironment() {
+const getEnvironment = computed(() => {
     switch (env) {
         case 'development':
-            return 'dev';
+            return 'DEV';
         case 'production':
             return;
         default:
-            return env;
+            return env.toUpperCase();
     }
-}
+});
 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
 </script>
@@ -62,7 +62,7 @@ const refresh = () => window.location.reload();
                 </QBtn>
             </RouterLink>
             <QChip class="q-ml-xs q-mr-xs envChip">
-                {{ getEnvironment() }}
+                {{ getEnvironment }}
             </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner

From 90f6486fc1495cdd347a79d1971c1e94513ce9fd Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 25 Mar 2025 14:20:38 +0100
Subject: [PATCH 3/4] refactor: refs #7358 use QBadge instead of QChip

---
 src/components/NavBar.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index 6365fcd07..c71a0a887 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -25,9 +25,9 @@ const getEnvironment = computed(() => {
         case 'development':
             return 'DEV';
         case 'production':
-            return;
+            return null;
         default:
-            return env.toUpperCase();
+            return env;
     }
 });
 onMounted(() => stateStore.setMounted());
@@ -60,10 +60,10 @@ const refresh = () => window.location.reload();
                         {{ t('globals.backToDashboard') }}
                     </QTooltip>
                 </QBtn>
+                <QBadge v-if="getEnvironment" color="primary" align="top">
+                    {{ getEnvironment }}
+                </QBadge>
             </RouterLink>
-            <QChip class="q-ml-xs q-mr-xs envChip">
-                {{ getEnvironment }}
-            </QChip>
             <VnBreadcrumbs v-if="$q.screen.gt.sm" />
             <QSpinner
                 color="primary"
@@ -132,7 +132,4 @@ const refresh = () => window.location.reload();
 .q-header {
     background-color: var(--vn-section-color);
 }
-.envChip {
-    background-color: $primary;
-}
 </style>

From ef3a2c0ee99b5f23f7ad2ef737c4f96174730888 Mon Sep 17 00:00:00 2001
From: Jon <jon@verdnatura.es>
Date: Tue, 25 Mar 2025 15:10:57 +0100
Subject: [PATCH 4/4] refactor: refs #7358 use location.hostname

---
 src/components/NavBar.vue | 15 ++++++---------
 1 file changed, 6 insertions(+), 9 deletions(-)

diff --git a/src/components/NavBar.vue b/src/components/NavBar.vue
index c71a0a887..7329ddae2 100644
--- a/src/components/NavBar.vue
+++ b/src/components/NavBar.vue
@@ -18,18 +18,15 @@ const state = useState();
 const user = state.getUser();
 const appName = 'Lilium';
 const pinnedModulesRef = ref();
-const env = process.env.NODE_ENV;
+const hostname = window.location.hostname;
+const env = ref();
 
 const getEnvironment = computed(() => {
-    switch (env) {
-        case 'development':
-            return 'DEV';
-        case 'production':
-            return null;
-        default:
-            return env;
-    }
+    env.value = hostname.split('-');
+    if (env.value.length <= 1) return;
+    return env.value[0];
 });
+
 onMounted(() => stateStore.setMounted());
 const refresh = () => window.location.reload();
 </script>