From 62fcdb821e9fe72336c09545a2172831a14d7a7c Mon Sep 17 00:00:00 2001
From: "Torsten Schulz (local)" <tsschulz@gmx.net>
Date: Fri, 15 May 2026 11:52:34 +0200
Subject: [PATCH] Update footer to display app version and adjust styling

Refactor the footer in App.vue to include the application version and improve layout with flexbox. Remove the version display from StatusBox.vue and update the app version in version.js from 3.0.0 to 3.1.0.
---
 frontend/src/App.vue                  | 26 +++++++++++++++++++++-----
 frontend/src/components/StatusBox.vue | 12 ------------
 frontend/src/config/version.js        |  2 +-
 3 files changed, 22 insertions(+), 18 deletions(-)

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 086823e..ce21bb1 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -37,8 +37,9 @@
     </main>
 
     <footer class="app-footer" v-if="authStore.isAuthenticated">
-      <div class="container">
-        <p>&copy; 2025 TimeClock v3 - Zeiterfassungssystem</p>
+      <div class="container app-footer-inner">
+        <p class="app-footer-copy">&copy; 2025 TimeClock v3 – Zeiterfassungssystem</p>
+        <p class="app-footer-version">Version {{ appVersion }}</p>
       </div>
     </footer>
   </div>
@@ -52,8 +53,10 @@ import { computed } from 'vue'
 import StatusBox from './components/StatusBox.vue'
 import SideMenu from './components/SideMenu.vue'
 import AppBrand from './components/AppBrand.vue'
+import { APP_VERSION } from '@/config/version'
 
 const authStore = useAuthStore()
+const appVersion = APP_VERSION
 const router = useRouter()
 const route = useRoute()
 
@@ -270,15 +273,28 @@ const pageTitle = computed(() => {
   left: 0;
   right: 0;
   background-color: #f9f9f9;
-  padding: 1.5rem 0;
-  text-align: center;
+  padding: 1rem 0;
   color: #666;
   border-top: 1px solid #ddd;
   z-index: 1000;
 }
 
-.app-footer p {
+.app-footer-inner {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.app-footer-copy,
+.app-footer-version {
   margin: 0;
   font-size: 0.9rem;
 }
+
+.app-footer-version {
+  color: #888;
+  font-size: 0.85rem;
+  white-space: nowrap;
+}
 </style>
diff --git a/frontend/src/components/StatusBox.vue b/frontend/src/components/StatusBox.vue
index 3e498f4..84dd673 100644
--- a/frontend/src/components/StatusBox.vue
+++ b/frontend/src/components/StatusBox.vue
@@ -29,7 +29,6 @@
         <span class="value" v-if="value !== null">{{ value || '—' }}</span>
       </div>
     </div>
-    <div class="status-version">TimeClock v{{ appVersion }}</div>
   </div>
   <div class="status-box loading" v-else>
     Lädt…
@@ -41,10 +40,7 @@ import { onMounted, onBeforeUnmount, ref, computed } from 'vue'
 import { useTimeStore } from '../stores/timeStore'
 import { useAuthStore } from '../stores/authStore'
 import { API_BASE_URL } from '@/config/api'
-import { APP_VERSION } from '@/config/version'
-
 const API_URL = API_BASE_URL
-const appVersion = APP_VERSION
 const timeStore = useTimeStore()
 const authStore = useAuthStore()
 const stats = ref({})
@@ -588,12 +584,4 @@ const displayRows = computed(() => {
   font-weight: 500; 
 }
 
-.status-version {
-  margin-top: 8px;
-  padding-top: 6px;
-  border-top: 1px solid #e8e8e8;
-  text-align: center;
-  font-size: 11px;
-  color: #888;
-}
 </style>
diff --git a/frontend/src/config/version.js b/frontend/src/config/version.js
index 9181c11..b46a3bc 100644
--- a/frontend/src/config/version.js
+++ b/frontend/src/config/version.js
@@ -1,2 +1,2 @@
 /** Sichtbare Web-App-Version (synchron mit package.json). */
-export const APP_VERSION = '3.0.0'
+export const APP_VERSION = '3.1.0'