From e659b2b45594c35a1464f32108f99f01e68a2715 Mon Sep 17 00:00:00 2001
From: sudomarcma <1040211836@qq.com>
Date: Wed, 23 Jul 2025 17:07:46 +0800
Subject: [PATCH] feat:UI enhancements

---
 .../release/baselineProfiles/0/app-release.dm | Bin 0 -> 3089 bytes
 .../release/baselineProfiles/1/app-release.dm | Bin 0 -> 3026 bytes
 android/app/release/output-metadata.json      |  37 +++++++++++
 src/App.vue                                   |   6 ++
 src/assets/main.css                           |   7 +++
 src/locales/en.json                           |  11 +++-
 src/locales/ms.json                           |  11 +++-
 src/services/authService.js                   |   4 +-
 src/views/ChangePasswordView.vue              |  20 +++---
 src/views/LoginView.vue                       |   1 +
 src/views/SettingsView.vue                    |  59 +++++++++---------
 src/views/WorkerDashboardView.vue             |  53 +++++++++++-----
 src/views/WorkerHistoryView.vue               |  22 +++----
 13 files changed, 164 insertions(+), 67 deletions(-)
 create mode 100644 android/app/release/baselineProfiles/0/app-release.dm
 create mode 100644 android/app/release/baselineProfiles/1/app-release.dm
 create mode 100644 android/app/release/output-metadata.json

diff --git a/android/app/release/baselineProfiles/0/app-release.dm b/android/app/release/baselineProfiles/0/app-release.dm
new file mode 100644
index 0000000000000000000000000000000000000000..44f948807785e901cd85bda82dc67e3506b6c069
GIT binary patch
literal 3089
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

literal 0
HcmV?d00001

diff --git a/android/app/release/baselineProfiles/1/app-release.dm b/android/app/release/baselineProfiles/1/app-release.dm
new file mode 100644
index 0000000000000000000000000000000000000000..7c12850e1aa2030b478d015bc8f5ee31d9f1636a
GIT binary patch
literal 3026
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
HKUV(*qIAzK

literal 0
HcmV?d00001

diff --git a/android/app/release/output-metadata.json b/android/app/release/output-metadata.json
new file mode 100644
index 0000000..36f38ec
--- /dev/null
+++ b/android/app/release/output-metadata.json
@@ -0,0 +1,37 @@
+{
+  "version": 3,
+  "artifactType": {
+    "type": "APK",
+    "kind": "Directory"
+  },
+  "applicationId": "com.ouji.factory.myapp",
+  "variantName": "release",
+  "elements": [
+    {
+      "type": "SINGLE",
+      "filters": [],
+      "attributes": [],
+      "versionCode": 1,
+      "versionName": "1.0.1a",
+      "outputFile": "app-release.apk"
+    }
+  ],
+  "elementType": "File",
+  "baselineProfiles": [
+    {
+      "minApi": 28,
+      "maxApi": 30,
+      "baselineProfiles": [
+        "baselineProfiles/1/app-release.dm"
+      ]
+    },
+    {
+      "minApi": 31,
+      "maxApi": 2147483647,
+      "baselineProfiles": [
+        "baselineProfiles/0/app-release.dm"
+      ]
+    }
+  ],
+  "minSdkVersionForDexing": 24
+}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index d74d6d7..d552586 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -178,6 +178,12 @@ onMounted(async () => {
         sessionStorage.setItem('token', token)
       }
 
+      // Get cached worker data to retrieve username
+      const cachedWorkerData = await authService.getCachedWorkerData(autoLoginResult.userId);
+      if (cachedWorkerData && cachedWorkerData.username) {
+        sessionStorage.setItem('username', cachedWorkerData.username);
+      }
+
       // Start native services
       await nativeServicesManager.onUserLogin()
 
diff --git a/src/assets/main.css b/src/assets/main.css
index 82cb921..c1fe388 100644
--- a/src/assets/main.css
+++ b/src/assets/main.css
@@ -100,3 +100,10 @@
     padding-bottom: calc(var(--safe-area-inset-bottom) + 4rem); /* 4rem = bottom nav height */
   }
 }
+
+/* Dark mode overrides */
+@layer base {
+  html.dark {
+    color-scheme: dark;
+  }
+}
diff --git a/src/locales/en.json b/src/locales/en.json
index e096982..b86c15d 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -250,5 +250,14 @@
 
   "workLocationTracking": "Work Location Tracking",
   "locationTrackingForAttendance": "Location tracking active for work attendance",
-  "monitoringLocation": "Monitoring location for work attendance"
+  "monitoringLocation": "Monitoring location for work attendance",
+
+  "appInformation": "App Information",
+  "version": "Version",
+  "platform": "Platform",
+  "android": "Android",
+  "web": "Web",
+  "darkMode": "Dark Mode",
+  "enableDarkMode": "Enable dark mode",
+  "disableDarkMode": "Disable dark mode"
 }
diff --git a/src/locales/ms.json b/src/locales/ms.json
index f2cb7a3..b40fe9c 100644
--- a/src/locales/ms.json
+++ b/src/locales/ms.json
@@ -249,5 +249,14 @@
   "workLocationTracking": "Penjejakan Lokasi Kerja",
   "locationTrackingForAttendance": "Penjejakan lokasi aktif untuk kehadiran kerja",
   "monitoringLocation": "Memantau lokasi untuk kehadiran kerja",
-  "failedToVerifyStatus": "Gagal untuk mengesahkan status semasa dari pelayan."
+  "failedToVerifyStatus": "Gagal untuk mengesahkan status semasa dari pelayan.",
+
+  "appInformation": "Maklumat Aplikasi",
+  "version": "Versi",
+  "platform": "Platform",
+  "android": "Android",
+  "web": "Web",
+  "darkMode": "Mod Gelap",
+  "enableDarkMode": "Aktifkan mod gelap",
+  "disableDarkMode": "Nyahaktifkan mod gelap"
 }
diff --git a/src/services/authService.js b/src/services/authService.js
index 059ac82..2af6b79 100644
--- a/src/services/authService.js
+++ b/src/services/authService.js
@@ -228,9 +228,9 @@ class AuthService {
           credentials
         )
 
-        // Cache worker data
+        // Cache worker data including username
         if (decodedToken.role === 'worker') {
-          await this.cacheWorkerData(decodedToken.userId, { full_name: data.fullName })
+          await this.cacheWorkerData(decodedToken.userId, { full_name: data.fullName, username: username })
         }
 
         return {
diff --git a/src/views/ChangePasswordView.vue b/src/views/ChangePasswordView.vue
index fef5171..1212c69 100644
--- a/src/views/ChangePasswordView.vue
+++ b/src/views/ChangePasswordView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed left-0 right-0 top-0 z-50 bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6" style="padding-top: calc(var(--safe-area-inset-top) + 1.5rem);">
@@ -13,32 +13,32 @@
     </header>
 
     <main class="main-with-fixed-header-and-nav px-4 py-8">
-      <div class="bg-white rounded-2xl shadow-lg p-8 w-full max-w-lg mx-auto mt-8">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-8 w-full max-w-lg mx-auto mt-8">
         <form @submit.prevent="handleChangePassword" class="space-y-6">
           <!-- Success Message -->
-          <div v-if="successMessage" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg">
+          <div v-if="successMessage" class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 rounded-lg">
             {{ $t(successMessage) }}
           </div>
           <!-- Error Message -->
-          <div v-if="errorMessage" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg">
+          <div v-if="errorMessage" class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 rounded-lg">
             {{ $t(errorMessage) }}
           </div>
 
           <!-- Form Fields -->
           <div>
-            <label for="currentPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('currentPassword') }}</label>
+            <label for="currentPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('currentPassword') }}</label>
             <input type="password" id="currentPassword" v-model="passwords.currentPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
           <div>
-            <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('newPassword') }}</label>
+            <label for="newPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('newPassword') }}</label>
             <input type="password" id="newPassword" v-model="passwords.newPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
           <div>
-            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 mb-2">{{ $t('confirmNewPassword') }}</label>
+            <label for="confirmPassword" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">{{ $t('confirmNewPassword') }}</label>
             <input type="password" id="confirmPassword" v-model="passwords.confirmPassword" required
-              class="w-full px-4 py-3 text-gray-700 bg-gray-50 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
+              class="w-full px-4 py-3 text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent" />
           </div>
 
           <!-- Submit Button -->
diff --git a/src/views/LoginView.vue b/src/views/LoginView.vue
index 267ba64..39036fe 100644
--- a/src/views/LoginView.vue
+++ b/src/views/LoginView.vue
@@ -92,6 +92,7 @@ const handleLogin = async () => {
       sessionStorage.setItem('userId', loginResult.userId.toString())
       sessionStorage.setItem('userRole', loginResult.userRole)
       sessionStorage.setItem('token', loginResult.token)
+      sessionStorage.setItem('username', username.value)
 
       console.log('✅ SESSION STORAGE SET:', {
         userId: sessionStorage.getItem('userId'),
diff --git a/src/views/SettingsView.vue b/src/views/SettingsView.vue
index d0a4c5d..4416d86 100644
--- a/src/views/SettingsView.vue
+++ b/src/views/SettingsView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 min-h-screen">
     <!-- Fixed Header -->
     <header class="fixed-header-safe bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6">
@@ -10,7 +10,7 @@
     <!-- Scrollable Main Content -->
     <main class="main-with-fixed-header-and-nav px-4 py-8 space-y-4">
       <!-- Menu Items -->
-      <div class="bg-white rounded-2xl shadow-lg overflow-hidden mt-8">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg overflow-hidden mt-8">
         <!-- Clock History -->
         <router-link to="/worker/history"
           class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
@@ -24,19 +24,6 @@
           <ChevronRightIcon class="w-6 h-6 text-gray-400" />
         </router-link>
 
-        <!-- Service Status -->
-        <router-link to="/worker/services-status"
-          class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
-          <div class="w-12 h-12 bg-green-100 rounded-xl flex items-center justify-center mr-5">
-            <CogIcon class="w-8 h-8 text-green-600" />
-          </div>
-          <div class="flex-grow">
-            <h3 class="font-semibold text-lg text-gray-900">{{ $t('servicesStatus') }}</h3>
-            <p class="text-sm text-gray-500">{{ $t('systemServicesStatus') }}</p>
-          </div>
-          <ChevronRightIcon class="w-6 h-6 text-gray-400" />
-        </router-link>
-
         <!-- Change Password -->
         <router-link to="/worker/change-password"
           class="flex items-center p-5 border-b border-gray-200 hover:bg-gray-50 transition-colors">
@@ -58,7 +45,7 @@
           <div class="flex-grow">
             <h3 class="font-semibold text-lg text-gray-900 mb-2">{{ $t('language') }}</h3>
             <select v-model="currentLang" @change="changeLang"
-              class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+              class="w-full px-4 py-3 border border-gray-300 bg-white text-gray-900 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent">
               <option value="en">{{ $t('english') }}</option>
               <option value="ms">{{ $t('malay') }}</option>
               <option value="tm">{{ $t('tamil') }}</option>
@@ -70,6 +57,21 @@
         </div>
       </div>
 
+      <!-- App Information -->
+      <div class="bg-white rounded-2xl shadow-lg p-6">
+        <h3 class="font-semibold text-lg text-gray-900 mb-4">{{ $t('appInformation') }}</h3>
+        <div class="space-y-3">
+          <div class="flex justify-between">
+            <span class="text-gray-600">{{ $t('version') }}</span>
+            <span class="font-medium text-gray-900">1.0.0</span>
+          </div>
+          <div class="flex justify-between">
+            <span class="text-gray-600">{{ $t('platform') }}</span>
+            <span class="font-medium text-gray-900">{{ $t('android') }}</span>
+          </div>
+        </div>
+      </div>
+
       <!-- Logout Button -->
       <button @click="logout"
         class="w-full flex items-center justify-center p-5 bg-white rounded-2xl shadow-lg hover:bg-red-50 transition-colors">
@@ -89,7 +91,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ChartBarIcon, CogIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+import { ChartBarIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
 import { authService } from '@/services/authService.js'
 import { nativeServicesManager } from '@/services/nativeServicesManager.js'
 
@@ -98,10 +100,18 @@ const router = useRouter()
 
 const currentLang = ref(locale.value)
 
-const changeLang = () => {
-  locale.value = currentLang.value
-  localStorage.setItem('lang', currentLang.value)
-}
+  onMounted(() => {
+    const savedLang = localStorage.getItem('lang')
+    if (savedLang) {
+      currentLang.value = savedLang
+    }
+  })
+
+  const changeLang = () => {
+    locale.value = currentLang.value
+    localStorage.setItem('lang', currentLang.value)
+  }
+
 
 const logout = async () => {
   try {
@@ -117,11 +127,4 @@ const logout = async () => {
     router.push('/')
   }
 }
-
-onMounted(() => {
-  const savedLang = localStorage.getItem('lang')
-  if (savedLang) {
-    currentLang.value = savedLang
-  }
-})
 </script>
diff --git a/src/views/WorkerDashboardView.vue b/src/views/WorkerDashboardView.vue
index bb6ef31..fb54e5f 100644
--- a/src/views/WorkerDashboardView.vue
+++ b/src/views/WorkerDashboardView.vue
@@ -1,38 +1,39 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed-header-safe bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6">
         <h1 class="text-3xl font-bold text-center">{{ $t('appTitle') }}</h1>
-        <p class="text-center text-blue-200 mt-1">{{ workerName }}</p>
       </div>
     </header>
 
     <main class="main-with-fixed-header px-4 py-8 space-y-8">
-      <!-- Clock Status Card -->
-      <div class="bg-white rounded-2xl shadow-lg p-6 text-center mt-16">
+      <!-- Worker Name Display -->
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6 text-center mt-16">
+        <h1 class="text-2xl font-bold text-gray-900 dark:text-gray-100 mb-2">{{ workerName }}</h1>
+        <p class="text-gray-600 dark:text-gray-400 mb-4">{{ username }}</p>
         <div class="flex items-center justify-center gap-4 mb-4">
           <component :is="isClockedIn ? CheckCircleIcon : ClockIcon"
-                     :class="['w-16 h-16', isClockedIn ? 'text-green-500' : 'text-red-500']" />
+                     :class="['w-16 h-16', isClockedIn ? 'text-green-500 dark:text-green-400' : 'text-red-500 dark:text-red-400']" />
         </div>
-        <p class="text-lg text-gray-600 mb-1">{{ $t('yourStatus') }}</p>
-        <h2 class="text-3xl font-bold" :class="isClockedIn ? 'text-green-600' : 'text-red-600'">
+        <p class="text-lg text-gray-600 dark:text-gray-400 mb-1">{{ $t('yourStatus') }}</p>
+        <h2 class="text-3xl font-bold" :class="isClockedIn ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'">
           {{ clockStatus }}
         </h2>
       </div>
 
       <!-- Messages -->
-      <div v-if="successMessage" class="bg-green-100 border-l-4 border-green-500 text-green-700 p-4 rounded-lg shadow-md">
+      <div v-if="successMessage" class="bg-green-100 dark:bg-green-900 border-l-4 border-green-500 text-green-700 dark:text-green-300 p-4 rounded-lg shadow-md">
         {{ successMessage }}
       </div>
-      <div v-if="errorMessage" class="bg-red-100 border-l-4 border-red-500 text-red-700 p-4 rounded-lg shadow-md">
+      <div v-if="errorMessage" class="bg-red-100 dark:bg-red-900 border-l-4 border-red-500 text-red-700 dark:text-red-300 p-4 rounded-lg shadow-md">
         {{ errorMessage }}
       </div>
 
       <!-- QR Scanner Card -->
-      <div class="bg-white rounded-2xl shadow-lg p-6">
+      <div class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-6">
         <div v-if="!isScannerActive" class="space-y-4 text-center">
-          <h3 class="text-xl font-semibold text-gray-800 mb-4">
+          <h3 class="text-xl font-semibold text-gray-800 dark:text-gray-200 mb-4">
             {{ $t('scanToClock', { action: $t(isClockedIn ? 'out' : 'in') }) }}
           </h3>
           <button @click="startScanner"
@@ -46,9 +47,9 @@
         <!-- QR Scanner Overlay -->
         <div id="qr-reader-container" v-show="isScannerActive"
           class="fixed inset-0 bg-black bg-opacity-90 flex flex-col items-center justify-center z-50 p-4">
-          <div class="bg-white rounded-2xl p-6 w-full max-w-md">
-            <h3 class="text-2xl font-bold text-gray-900 text-center mb-4">{{ $t('scanQRCode') }}</h3>
-            <div id="qr-reader" class="w-full rounded-lg overflow-hidden border-4 border-gray-300"></div>
+          <div class="bg-white dark:bg-gray-800 rounded-2xl p-6 w-full max-w-md">
+            <h3 class="text-2xl font-bold text-gray-900 dark:text-gray-100 text-center mb-4">{{ $t('scanQRCode') }}</h3>
+            <div id="qr-reader" class="w-full rounded-lg overflow-hidden border-4 border-gray-300 dark:border-gray-600"></div>
           </div>
           <button @click="stopScanner"
             class="mt-8 bg-red-600 hover:bg-red-700 text-white font-bold px-10 py-4 rounded-xl transition-transform transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 shadow-lg">
@@ -82,16 +83,31 @@ const isScannerActive = ref(false)
 const errorMessage = ref('')
 const successMessage = ref('')
 const workerName = ref('')
+const username = ref('')
 
 let userId = sessionStorage.getItem('userId')
 
 const clockStatus = computed(() => (isClockedIn.value ? t('clockedIn') : t('clockedOut')))
 
 const fetchWorkerDetails = async () => {
+  // Try to get cached worker data first
+  try {
+    const cachedData = await authService.getCachedWorkerData(userId);
+    if (cachedData && cachedData.full_name) {
+      workerName.value = cachedData.full_name;
+      return;
+    }
+  } catch (cacheError) {
+    console.log('No cached worker data available, fetching from API:', cacheError);
+  }
+
+  // Fallback to API if no cached data
   try {
     const data = await apiFetch(`/api/workers/${userId}`)
     if (data) {
       workerName.value = data.full_name
+      // Cache the data for future use
+      await authService.cacheWorkerData(userId, { full_name: data.full_name, username: username.value });
     }
   } catch (err) {
     errorMessage.value = t('couldNotLoadWorkerInfo') + `: ${err.message}`
@@ -204,6 +220,15 @@ onMounted(async () => {
     console.error('Failed to initialize native services:', error)
   }
 
+  // Get username from the current approach
+  const storedUsername = sessionStorage.getItem('username');
+  if (storedUsername) {
+    username.value = storedUsername;
+  } else {
+    // Fallback to placeholder if not found
+    username.value = t('username');
+  }
+
   fetchWorkerDetails()
   fetchCurrentStatus()
 })
diff --git a/src/views/WorkerHistoryView.vue b/src/views/WorkerHistoryView.vue
index 7bae176..d59e04e 100644
--- a/src/views/WorkerHistoryView.vue
+++ b/src/views/WorkerHistoryView.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="mobile-viewport bg-gray-100">
+  <div class="mobile-viewport bg-gray-100 dark:bg-gray-900 min-h-screen">
     <!-- Header -->
     <header class="fixed left-0 right-0 top-0 z-50 bg-blue-600 text-white shadow-lg">
       <div class="px-4 py-6" style="padding-top: calc(var(--safe-area-inset-top) + 1.5rem);">
@@ -15,27 +15,27 @@
     <main class="main-with-fixed-header-and-nav px-4 py-8">
       <!-- Empty State -->
       <div v-if="!clockHistory.length" class="text-center py-16 mt-8">
-        <ChartBarIcon class="w-16 h-16 text-gray-400 mx-auto mb-4" />
-        <h2 class="text-2xl font-semibold text-gray-700">{{ $t('noClockHistory') }}</h2>
-        <p class="text-gray-500 mt-2">{{ $t('clockHistoryEmptyState') }}</p>
+        <ChartBarIcon class="w-16 h-16 text-gray-400 dark:text-gray-500 mx-auto mb-4" />
+        <h2 class="text-2xl font-semibold text-gray-700 dark:text-gray-300">{{ $t('noClockHistory') }}</h2>
+        <p class="text-gray-500 dark:text-gray-400 mt-2">{{ $t('clockHistoryEmptyState') }}</p>
       </div>
 
       <!-- History List -->
       <div v-else class="space-y-4 mt-8 mb-10">
         <div v-for="event in clockHistory" :key="event.id"
-             class="bg-white rounded-2xl shadow-lg p-5 flex items-center space-x-4">
+             class="bg-white dark:bg-gray-800 rounded-2xl shadow-lg p-5 flex items-center space-x-4">
           <div class="w-12 h-12 rounded-full flex items-center justify-center"
-               :class="event.event_type === 'clock_in' ? 'bg-green-100' : 'bg-red-100'">
+               :class="event.event_type === 'clock_in' ? 'bg-green-100 dark:bg-green-900/50' : 'bg-red-100 dark:bg-red-900/50'">
             <component :is="event.event_type === 'clock_in' ? ArrowDownCircleIcon : ArrowUpCircleIcon"
-                       :class="['w-8 h-8', event.event_type === 'clock_in' ? 'text-green-600' : 'text-red-600']" />
+                       :class="['w-8 h-8', event.event_type === 'clock_in' ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400']" />
           </div>
           <div class="flex-grow">
-            <div class="font-bold text-lg text-gray-900">{{ $t(event.event_type) }}</div>
-            <div class="text-sm text-gray-600">{{ event.qrCodeUsedName }}</div>
+            <div class="font-bold text-lg text-gray-900 dark:text-gray-100">{{ $t(event.event_type) }}</div>
+            <div class="text-sm text-gray-600 dark:text-gray-400">{{ event.qrCodeUsedName }}</div>
           </div>
           <div class="text-right">
-            <div class="font-medium text-gray-800">{{ new Date(event.timestamp).toLocaleDateString() }}</div>
-            <div class="text-sm text-gray-500">{{ new Date(event.timestamp).toLocaleTimeString() }}</div>
+            <div class="font-medium text-gray-800 dark:text-gray-200">{{ new Date(event.timestamp).toLocaleDateString() }}</div>
+            <div class="text-sm text-gray-500 dark:text-gray-400">{{ new Date(event.timestamp).toLocaleTimeString() }}</div>
           </div>
         </div>
       </div>