added manual guide for app

2025-09-29 15:28:50 +08:00
parent e039b9bfea
commit 5ffcbc8c71
11 changed files with 396 additions and 16 deletions
@@ -8,7 +8,7 @@
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"
    />
    <title>Vite App</title>
-    <script type="module" crossorigin src="/assets/index-6hSXk9eK.js"></script>
+    <script type="module" crossorigin src="/assets/index-DOxYJapr.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-PWd6qU--.css">
  </head>
  <body>
@@ -38,7 +38,8 @@ const isSettingsActive = computed(() =>
  route.path.includes('/worker/settings') ||
  route.path.includes('/worker/history') ||
  route.path.includes('/worker/change-password') ||
-  route.path.includes('/worker/services-status')
+  route.path.includes('/worker/services-status') ||
+  route.path.includes('/worker/manual-guide')
 )
 </script>

@@ -255,5 +255,52 @@

  "workLocationTracking": "কর্মক্ষেত্রের লোকেশন ট্র্যাকিং",
  "locationTrackingForAttendance": "কাজের উপস্থিতির জন্য লোকেশন ট্র্যাকিং সক্রিয়",
-  "monitoringLocation": "কাজের উপস্থিতির জন্য লোকেশন নিরীক্ষণ করা হচ্ছে"
+  "monitoringLocation": "কাজের উপস্থিতির জন্য লোকেশন নিরীক্ষণ করা হচ্ছে",
+
+  "manualGuide": "ম্যানুয়াল গাইড ",
+  "viewUserManual": "নির্দেশাবলী এবং FAQs পড়ুন",
+    "manual": {
+      "android": {
+        "heading": "Android",
+        "faqs": [
+          {
+            "id": "android-location",
+            "title": "Location কীভাবে খুলবেন (Android)",
+            "steps": [
+              "আপনার ফোনে <strong>Settings</strong> খুলুন।",
+              "<strong>Location</strong> এ যান <span class=\"text-sm text-gray-500\">(কিছু ফোনে <em>Security &amp; privacy</em> এর অধীনে)</span>।",
+              "<strong>Use location</strong> ON করুন।",
+              "<strong>App permissions</strong> খুলুন → <strong>Attendance System</strong> খুঁজুন → <strong>Allow while using the app</strong> সেট করুন।",
+              "উপলব্ধ থাকলে <strong>Precise location</strong> সক্রিয় করুন।",
+              "App এ ফিরে যান এবং আবার clock-in করার চেষ্টা করুন।"
+            ],
+            "note": "ব্র্যান্ড অনুযায়ী নাম ভিন্ন: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services।"
+          },
+          {
+            "id": "android-camera",
+            "title": "Camera permission সক্রিয় করুন (Android)",
+            "steps": [
+              "<strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong> খুলুন।",
+              "<strong>Permissions</strong> → <strong>Camera</strong> ট্যাপ করুন → <strong>Allow</strong> অথবা <strong>Allow while using the app</strong> নির্বাচন করুন।",
+              "App পুনরায় খুলুন এবং আবার scanning এর চেষ্টা করুন।"
+            ]
+          },
+          {
+            "id": "clockin-troubleshoot",
+            "title": "Clock-in কাজ করছে না? দ্রুত checklist",
+            "steps": [
+              "<strong>Location</strong> ON করুন এবং app permission <strong>Allow while using the app</strong> সেট করুন (উপলব্ধ থাকলে <strong>Precise location</strong> সক্রিয় করুন)।",
+              "Network পরীক্ষা করুন: Wi-Fi অথবা data চালু আছে। <strong>Airplane mode</strong> off→on toggle করুন, তারপর আবার চেষ্টা করুন। হস্তক্ষেপ করলে VPN নিষ্ক্রিয় করুন।",
+              "নিশ্চিত করুন <strong>Automatic date &amp; time</strong> এবং <strong>time zone</strong> Android settings এ সক্রিয় আছে।",
+              "Force close করুন এবং app পুনরায় খুলুন। প্রয়োজনে, <strong>Attendance System</strong> cache clear করুন (Settings → Apps → Attendance System → Storage → Clear cache)।"
+            ],
+            "note": "এখনও আটকে আছেন? একটি screenshot নিন এবং আপনার manager বা HR এর সাথে যোগাযোগ করুন।"
+          }
+        ]
+      },
+      "ios": {
+        "heading": "iOS",
+        "comingSoon": "শীঘ্রই আসছে।"
+      }
+    }
 }
@@ -262,7 +262,54 @@
  "platform": "Platform",
  "android": "Android",
  "web": "Web",
-  "darkMode": "Dark Mode",
  "enableDarkMode": "Enable dark mode",
-  "disableDarkMode": "Disable dark mode"
+  "disableDarkMode": "Disable dark mode",
+  "viewUserManual": "Read instructions and FAQs",
+
+    "manualGuide": "Manual Guide",
+    "manual": {
+      "android": {
+        "heading": "Android",
+        "faqs": [
+          {
+            "id": "android-location",
+            "title": "How to open location (Android)",
+            "steps": [
+              "Open <strong>Settings</strong> on your phone.",
+              "Go to <strong>Location</strong> <span class=\"text-sm text-gray-500\">(on some phones under <em>Security &amp; privacy</em>)</span>.",
+              "Turn <strong>Use location</strong> ON.",
+              "Open <strong>App permissions</strong> → find <strong>Attendance System</strong> → set to <strong>Allow while using the app</strong>.",
+              "Enable <strong>Precise location</strong> if available.",
+              "Return to the app and try clock-in again."
+            ],
+            "note": "Names vary by brand: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services."
+          },
+          {
+            "id": "android-camera",
+            "title": "Enable camera permission (Android)",
+            "steps": [
+              "Open <strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong>.",
+              "Tap <strong>Permissions</strong> → <strong>Camera</strong> → choose <strong>Allow</strong> or <strong>Allow while using the app</strong>.",
+              "Reopen the app and try scanning again."
+            ]
+          },
+          {
+            "id": "clockin-troubleshoot",
+            "title": "Clock-in not working? Quick checklist",
+            "steps": [
+              "Turn <strong>Location</strong> ON and set app permission to <strong>Allow while using the app</strong> (enable <strong>Precise location</strong> if available).",
+              "Check network: Wi-Fi or data is on. Toggle <strong>Airplane mode</strong> off→on, then retry. Disable VPN if it interferes.",
+              "Ensure <strong>Automatic date &amp; time</strong> and <strong>time zone</strong> are enabled in Android settings.",
+              "Force close and reopen the app. If needed, clear <strong>Attendance System</strong> cache (Settings → Apps → Attendance System → Storage → Clear cache)."
+            ],
+            "note": "Still stuck? Take a screenshot and contact your manager or HR."
+          }
+        ]
+      },
+      "ios": {
+        "heading": "iOS",
+        "comingSoon": "Coming soon."
+      }
+    }
+  
 }
@@ -261,7 +261,53 @@
  "platform": "Platform",
  "android": "Android",
  "web": "Web",
-  "darkMode": "Mod Gelap",
  "enableDarkMode": "Aktifkan mod gelap",
-  "disableDarkMode": "Nyahaktifkan mod gelap"
+  "disableDarkMode": "Nyahaktifkan mod gelap",
+
+  "manualGuide": "Panduan Manual",
+  "viewUserManual": "Baca arahan dan soalan lazim",
+  "manual": {
+    "android": {
+      "heading": "Android",
+      "faqs": [
+        {
+          "id": "android-location",
+          "title": "Cara membuka lokasi (Android)",
+          "steps": [
+            "Buka <strong>Settings</strong> pada telefon anda.",
+            "Pergi ke <strong>Location</strong> <span class=\"text-sm text-gray-500\">(pada sesetengah telefon di bawah <em>Security &amp; privacy</em>)</span>.",
+            "Hidupkan <strong>Use location</strong>.",
+            "Buka <strong>App permissions</strong> → cari <strong>Attendance System</strong> → tetapkan kepada <strong>Allow while using the app</strong>.",
+            "Dayakan <strong>Precise location</strong> jika tersedia.",
+            "Kembali ke aplikasi dan cuba daftar masuk semula."
+          ],
+          "note": "Nama berbeza mengikut jenama: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services."
+        },
+        {
+          "id": "android-camera",
+          "title": "Dayakan kebenaran kamera (Android)",
+          "steps": [
+            "Buka <strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong>.",
+            "Ketik <strong>Permissions</strong> → <strong>Camera</strong> → pilih <strong>Allow</strong> atau <strong>Allow while using the app</strong>.",
+            "Buka semula aplikasi dan cuba imbas semula."
+          ]
+        },
+        {
+          "id": "clockin-troubleshoot",
+          "title": "Daftar masuk tidak berfungsi? Senarai semak pantas",
+          "steps": [
+            "Hidupkan <strong>Location</strong> dan tetapkan kebenaran aplikasi kepada <strong>Allow while using the app</strong> (dayakan <strong>Precise location</strong> jika tersedia).",
+            "Semak rangkaian: Wi-Fi atau data dihidupkan. Toggle <strong>Airplane mode</strong> off→on, kemudian cuba lagi. Lumpuhkan VPN jika mengganggu.",
+            "Pastikan <strong>Automatic date &amp; time</strong> dan <strong>time zone</strong> didayakan dalam tetapan Android.",
+            "Tutup paksa dan buka semula aplikasi. Jika perlu, kosongkan cache <strong>Attendance System</strong> (Settings → Apps → Attendance System → Storage → Clear cache)."
+          ],
+          "note": "Masih tersekat? Ambil tangkapan skrin dan hubungi pengurus atau HR anda."
+        }
+      ]
+    },
+    "ios": {
+      "heading": "iOS",
+      "comingSoon": "Akan datang."
+    }
+  }
 }
@@ -255,5 +255,52 @@

  "workLocationTracking": "အလုပ်တည်နေရာ ခြေရာခံမှု",
  "locationTrackingForAttendance": "အလုပ်တက်ရောက်မှုအတွက် တည်နေရာခြေရာခံမှု အသက်ဝင်နေသည်",
-  "monitoringLocation": "အလုပ်တက်ရောက်မှုအတွက် တည်နေရာကို ကြည့်ရှုနေသည်"
+  "monitoringLocation": "အလုပ်တက်ရောက်မှုအတွက် တည်နေရာကို ကြည့်ရှုနေသည်",
+
+  "manualGuide": "လက်စွဲလမ်းညွှန်",
+  "viewUserManual": "လမ်းညွှန်ချက်များနှင့် FAQs ကိုဖတ်ပါ",
+  "manual": {
+    "android": {
+      "heading": "Android",
+      "faqs": [
+        {
+          "id": "android-location",
+          "title": "Location ကို ဖွင့်နည်း (Android)",
+          "steps": [
+            "သင့်ဖုန်းရှိ <strong>Settings</strong> ကို ဖွင့်ပါ။",
+            "<strong>Location</strong> သို့သွားပါ <span class=\"text-sm text-gray-500\">(အချို့ဖုန်းများတွင် <em>Security &amp; privacy</em> အောက်တွင်)</span>။",
+            "<strong>Use location</strong> ကို ON ဖွင့်ပါ။",
+            "<strong>App permissions</strong> ကိုဖွင့်ပါ → <strong>Attendance System</strong> ကိုရှာပါ → <strong>Allow while using the app</strong> သတ်မှတ်ပါ။",
+            "ရနိုင်လျှင် <strong>Precise location</strong> ကို ဖွင့်ပါ။",
+            "App သို့ပြန်သွားပြီး clock-in ကို ထပ်စမ်းကြည့်ပါ။"
+          ],
+          "note": "အမှတ်တံဆိပ်ပေါ်မူတည်၍ အမည်များကွဲပြားနိုင်သည်: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services။"
+        },
+        {
+          "id": "android-camera",
+          "title": "Camera permission ဖွင့်နည်း (Android)",
+          "steps": [
+            "<strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong> ကို ဖွင့်ပါ။",
+            "<strong>Permissions</strong> → <strong>Camera</strong> ကို နှိပ်ပါ → <strong>Allow</strong> သို့မဟုတ် <strong>Allow while using the app</strong> ကို ရွေးပါ။",
+            "App ကို ပြန်ဖွင့်ပြီး scanning ကို ထပ်စမ်းကြည့်ပါ။"
+          ]
+        },
+        {
+          "id": "clockin-troubleshoot",
+          "title": "Clock-in အလုပ်မလုပ်ဘူးလား? အမြန် checklist",
+          "steps": [
+            "<strong>Location</strong> ကို ON ဖွင့်ပြီး app permission ကို <strong>Allow while using the app</strong> သတ်မှတ်ပါ (ရနိုင်လျှင် <strong>Precise location</strong> ကို ဖွင့်ပါ)။",
+            "Network ကို စစ်ဆေးပါ: Wi-Fi သို့မဟုတ် data ကို ဖွင့်ထားသည်။ <strong>Airplane mode</strong> ကို off→on toggle လုပ်ပါ၊ ပြီးနောက် ထပ်စမ်းကြည့်ပါ။ ဝင်စွက်နေလျှင် VPN ကို ပိတ်ပါ။",
+            "Android settings တွင် <strong>Automatic date &amp; time</strong> နှင့် <strong>time zone</strong> တို့ကို ဖွင့်ထားကြောင်း သေချာပါစေ။",
+            "Force close လုပ်ပြီး app ကို ပြန်ဖွင့်ပါ။ လိုအပ်လျှင် <strong>Attendance System</strong> cache ကို clear လုပ်ပါ (Settings → Apps → Attendance System → Storage → Clear cache)။"
+          ],
+          "note": "ဆက်လက်ပြဿနာရှိနေပါသလား? Screenshot ရိုက်ပြီး သင့် manager သို့မဟုတ် HR ကို ဆက်သွယ်ပါ။"
+        }
+      ]
+    },
+    "ios": {
+      "heading": "iOS",
+      "comingSoon": "မကြာမီ ရောက်ရှိပါမည်။"
+    }
+  }
 }
@@ -255,5 +255,52 @@

  "workLocationTracking": "कार्य स्थान ट्र्याकिङ",
  "locationTrackingForAttendance": "कार्य उपस्थितिको लागि स्थान ट्र्याकिङ सक्रिय",
-  "monitoringLocation": "कार्य उपस्थितिको लागि स्थान निगरानी गर्दै"
+  "monitoringLocation": "कार्य उपस्थितिको लागि स्थान निगरानी गर्दै",
+
+  "manualGuide": "म्यानुअल गाइड",
+  "viewUserManual": "निर्देशनहरू र FAQs पढ्नुहोस्",
+    "manual": {
+      "android": {
+        "heading": "Android",
+        "faqs": [
+          {
+            "id": "android-location",
+            "title": "Location कसरी खोल्ने (Android)",
+            "steps": [
+              "आफ्नो फोनमा <strong>Settings</strong> खोल्नुहोस्।",
+              "<strong>Location</strong> मा जानुहोस् <span class=\"text-sm text-gray-500\">(केहि फोनहरूमा <em>Security &amp; privacy</em> अन्तर्गत)</span>।",
+              "<strong>Use location</strong> ON गर्नुहोस्।",
+              "<strong>App permissions</strong> खोल्नुहोस् → <strong>Attendance System</strong> फेला पार्नुहोस् → <strong>Allow while using the app</strong> सेट गर्नुहोस्।",
+              "उपलब्ध भए <strong>Precise location</strong> सक्षम गर्नुहोस्।",
+              "App मा फर्कनुहोस् र फेरि clock-in प्रयास गर्नुहोस्।"
+            ],
+            "note": "ब्रान्ड अनुसार नामहरू फरक हुन्छन्: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services।"
+          },
+          {
+            "id": "android-camera",
+            "title": "Camera permission सक्षम गर्नुहोस् (Android)",
+            "steps": [
+              "<strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong> खोल्नुहोस्।",
+              "<strong>Permissions</strong> → <strong>Camera</strong> ट्याप गर्नुहोस् → <strong>Allow</strong> वा <strong>Allow while using the app</strong> छान्नुहोस्।",
+              "App पुन: खोल्नुहोस् र फेरि scanning प्रयास गर्नुहोस्।"
+            ]
+          },
+          {
+            "id": "clockin-troubleshoot",
+            "title": "Clock-in काम गरिरहेको छैन? द्रुत checklist",
+            "steps": [
+              "<strong>Location</strong> ON गर्नुहोस् र app permission लाई <strong>Allow while using the app</strong> सेट गर्नुहोस् (उपलब्ध भए <strong>Precise location</strong> सक्षम गर्नुहोस्)।",
+              "Network जाँच गर्नुहोस्: Wi-Fi वा data खुला छ। <strong>Airplane mode</strong> off→on toggle गर्नुहोस्, त्यसपछि फेरि प्रयास गर्नुहोस्। हस्तक्षेप गरेमा VPN निष्क्रिय गर्नुहोस्।",
+              "Android settings मा <strong>Automatic date &amp; time</strong> र <strong>time zone</strong> सक्षम छन् भनी सुनिश्चित गर्नुहोस्।",
+              "Force close गर्नुहोस् र app पुन: खोल्नुहोस्। आवश्यक भएमा, <strong>Attendance System</strong> cache clear गर्नुहोस् (Settings → Apps → Attendance System → Storage → Clear cache)।"
+            ],
+            "note": "अझै अड्किनु भयो? Screenshot लिनुहोस् र आफ्नो manager वा HR लाई सम्पर्क गर्नुहोस्।"
+          }
+        ]
+      },
+      "ios": {
+        "heading": "iOS",
+        "comingSoon": "चाँडै आउँदैछ।"
+      }
+    }
 }
@@ -242,5 +242,52 @@
  "signOutOfAccount": "உங்கள் கணக்கிலிருந்து வெளியேறவும்",
  "workLocationTracking": "பணியிட இருப்பிட கண்காணிப்பு",
  "locationTrackingForAttendance": "பணி வருகைக்காக இருப்பிட கண்காணிப்பு செயலில்",
-  "monitoringLocation": "பணி வருகைக்காக இருப்பிடத்தைக் கண்காணிக்கிறது"
+  "monitoringLocation": "பணி வருகைக்காக இருப்பிடத்தைக் கண்காணிக்கிறது",
+
+  "manualGuide": "கையேடு வழிகாட்டி",
+  "viewUserManual": "வழிமுறைகள் மற்றும் FAQs ஐ படிக்கவும்",
+    "manual": {
+      "android": {
+        "heading": "Android",
+        "faqs": [
+          {
+            "id": "android-location",
+            "title": "Location ஐ எப்படி திறப்பது (Android)",
+            "steps": [
+              "உங்கள் தொலைபேசியில் <strong>Settings</strong> ஐத் திறக்கவும்.",
+              "<strong>Location</strong> க்குச் செல்லவும் <span class=\"text-sm text-gray-500\">(சில தொலைபேசிகளில் <em>Security &amp; privacy</em> கீழ்)</span>.",
+              "<strong>Use location</strong> ஐ ON செய்யவும்.",
+              "<strong>App permissions</strong> ஐத் திறக்கவும் → <strong>Attendance System</strong> ஐக் கண்டறியவும் → <strong>Allow while using the app</strong> என அமைக்கவும்.",
+              "கிடைத்தால் <strong>Precise location</strong> ஐ இயக்கவும்.",
+              "ஆப்பிற்குத் திரும்பி மீண்டும் clock-in செய்ய முயற்சிக்கவும்."
+            ],
+            "note": "பிராண்டுகளுக்கு ஏற்ப பெயர்கள் மாறுபடும்: Samsung → Settings → Location → App permissions. Xiaomi → Settings → Location → Location services."
+          },
+          {
+            "id": "android-camera",
+            "title": "Camera permission ஐ இயக்குவது எப்படி (Android)",
+            "steps": [
+              "<strong>Settings</strong> → <strong>Apps</strong> → <strong>Attendance System</strong> ஐத் திறக்கவும்.",
+              "<strong>Permissions</strong> → <strong>Camera</strong> ஐத் தட்டவும் → <strong>Allow</strong> அல்லது <strong>Allow while using the app</strong> தேர்ந்தெடுக்கவும்.",
+              "ஆப்பை மீண்டும் திறந்து scanning செய்ய முயற்சிக்கவும்."
+            ]
+          },
+          {
+            "id": "clockin-troubleshoot",
+            "title": "Clock-in வேலை செய்யவில்லையா? விரைவு checklist",
+            "steps": [
+              "<strong>Location</strong> ஐ ON செய்து app permission ஐ <strong>Allow while using the app</strong> என அமைக்கவும் (கிடைத்தால் <strong>Precise location</strong> ஐ இயக்கவும்).",
+              "Network ஐ சரிபார்க்கவும்: Wi-Fi அல்லது data இயக்கத்தில் உள்ளது. <strong>Airplane mode</strong> ஐ off→on toggle செய்து, பின்னர் மீண்டும் முயற்சிக்கவும். தடையாக இருந்தால் VPN ஐ முடக்கவும்.",
+              "Android settings இல் <strong>Automatic date &amp; time</strong> மற்றும் <strong>time zone</strong> இயக்கப்பட்டுள்ளதா என உறுதிப்படுத்தவும்.",
+              "Force close செய்து app ஐ மீண்டும் திறக்கவும். தேவைப்பட்டால், <strong>Attendance System</strong> cache ஐ clear செய்யவும் (Settings → Apps → Attendance System → Storage → Clear cache)."
+            ],
+            "note": "இன்னும் சிக்கலா? Screenshot எடுத்து உங்கள் manager அல்லது HR ஐ தொடர்பு கொள்ளவும்."
+          }
+        ]
+      },
+      "ios": {
+        "heading": "iOS",
+        "comingSoon": "விரைவில் வரும்."
+      }
+    }
 }
@@ -41,6 +41,13 @@ const router = createRouter({
      component: SettingsView,
      meta: { requiresAuth: true, role: 'worker' },
    },
+    {
+      path: '/worker/manual-guide',
+      name: 'ManualGuide',
+      component: () => import('@/views/ManualGuide.vue'),
+      meta: { requiresAuth: true, role: 'worker' }
+    },
+
  ],
 })

@@ -0,0 +1,77 @@
+<template>
+  <div class="min-h-screen bg-gray-50 dark:bg-gray-900">
+    <!-- Blue 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);`">
+        <div class="flex items-center">
+          <button @click="goBack" class="mr-4 p-2 hover:bg-blue-700 rounded-lg transition-colors" aria-label="Back">
+            <ArrowLeftIcon class="w-6 h-6" />
+          </button>
+          <h1 class="text-3xl font-bold">{{ $t('manualGuide') }}</h1>
+        </div>
+      </div>
+    </header>
+
+    <main class="main-with-fixed-header-and-nav p-4 space-y-4">
+      <!-- Android Group -->
+      <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
+        <div class="px-5 pt-5 pb-3">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            {{ $t('manual.android.heading') }}
+          </h2>
+        </div>
+
+        <div class="divide-y divide-gray-200 dark:divide-gray-700">
+          <div v-for="item in faqsAndroid" :key="item.id">
+            <details class="group">
+              <summary
+                class="flex items-center justify-between cursor-pointer select-none p-5 focus:outline-none
+                       focus-visible:ring-2 focus-visible:ring-blue-500"
+              >
+                <span class="text-lg font-semibold text-gray-900 dark:text-gray-100">
+                  {{ item.title }}
+                </span>
+                <ChevronDownIcon class="w-5 h-5 text-gray-500 transition-transform group-open:rotate-180" />
+              </summary>
+
+              <div class="px-5 pb-5 pt-0 text-gray-700 dark:text-gray-300">
+                <ol v-if="item.steps" class="list-decimal pl-5 space-y-2">
+                  <li v-for="(s, i) in item.steps" :key="i" v-html="s"></li>
+                </ol>
+                <p v-if="item.note" class="mt-3 text-sm text-gray-500 dark:text-gray-400" v-html="item.note"></p>
+              </div>
+            </details>
+          </div>
+        </div>
+      </section>
+
+      <!-- iOS Group -->
+      <section class="bg-white dark:bg-gray-800 rounded-2xl shadow-sm overflow-hidden">
+        <div class="px-5 pt-5 pb-3">
+          <h2 class="text-xs font-semibold uppercase tracking-wider text-gray-500 dark:text-gray-400">
+            {{ $t('manual.ios.heading') }}
+          </h2>
+        </div>
+        <div class="p-5 text-gray-700 dark:text-gray-300">
+          <p class="text-sm">{{ $t('manual.ios.comingSoon') }}</p>
+        </div>
+      </section>
+    </main>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ChevronDownIcon, ArrowLeftIcon } from '@heroicons/vue/24/outline'
+import { useRouter } from 'vue-router'
+
+const router = useRouter()
+const goBack = () => router.back()
+
+// i18n: t -> strings, tm -> returns objects/arrays from the locale message tree
+const { tm } = useI18n()
+
+// Pull translated Android FAQs (array) for current locale
+const faqsAndroid = computed(() => tm('manual.android.faqs') || [])
+</script>
@@ -47,7 +47,7 @@
            <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">{{ $t('darkMode') }}</h3>
            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('toggleDarkMode') }}</p>
          </div>
-          <button @click="toggleDarkMode" 
+          <button @click="toggleDarkMode"
            class="relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
            :class="isDarkMode ? 'bg-indigo-600' : 'bg-gray-200'">
            <span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform"
@@ -73,6 +73,20 @@
            </select>
          </div>
        </div>
+        <!-- Manual Guide (new) -->
+        <router-link
+          to="/worker/manual-guide"
+          class="flex items-center p-5 border-t border-gray-200 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+        >
+          <div class="w-12 h-12 bg-green-100 dark:bg-green-900/30 rounded-xl flex items-center justify-center mr-5">
+            <BookOpenIcon class="w-8 h-8 text-green-600 dark:text-green-400" />
+          </div>
+          <div class="flex-grow">
+            <h3 class="font-semibold text-lg text-gray-900 dark:text-gray-100">{{ $t('manualGuide') }}</h3>
+            <p class="text-sm text-gray-500 dark:text-gray-400">{{ $t('viewUserManual') }}</p>
+          </div>
+          <ChevronRightIcon class="w-6 h-6 text-gray-400 dark:text-gray-500" />
+        </router-link>
      </div>

      <!-- App Information -->
@@ -109,7 +123,7 @@
 import { ref, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useI18n } from 'vue-i18n'
-import { ChartBarIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon, MoonIcon, SunIcon } from '@heroicons/vue/24/outline'
+import { ChartBarIcon, LockClosedIcon, LanguageIcon, ArrowRightOnRectangleIcon, ChevronRightIcon, MoonIcon, SunIcon, BookOpenIcon } from '@heroicons/vue/24/outline'
 import { authService } from '@/services/authService.js'
 import { nativeServicesManager } from '@/services/nativeServicesManager.js'
 import { applyThemeWithCompat, getSystemDarkModePreference } from '@/utils/webviewCompat.js'
@@ -125,11 +139,11 @@ const isDarkMode = ref(false)
    if (savedLang) {
      currentLang.value = savedLang
    }
-    
+
    // Initialize dark mode with WebView compatibility
    const savedTheme = localStorage.getItem('theme')
    const prefersDark = getSystemDarkModePreference()
-    
+
    if (savedTheme === 'dark' || (!savedTheme && prefersDark)) {
      isDarkMode.value = true
      applyThemeWithCompat(true)
@@ -148,9 +162,9 @@ const isDarkMode = ref(false)

  const toggleDarkMode = () => {
    isDarkMode.value = !isDarkMode.value
-    
+
    applyThemeWithCompat(isDarkMode.value)
-    
+
    if (isDarkMode.value) {
      localStorage.setItem('theme', 'dark')
    } else {