From dd6da0f25a63f2c70ca1c2634a0c05dc7cc165e1 Mon Sep 17 00:00:00 2001
From: Dede Fuji Abdul <defuj.official@gmail.com>
Date: Sat, 6 Apr 2024 22:17:19 +0700
Subject: [PATCH] Add detectOS function to helper.ts and update style.css with
 new utility classes

---
 src/assets/css/style.css             |  49 +++--
 src/components/CommandPalettes.vue   | 301 ++++++++++++++++-----------
 src/components/Navigation/Header.vue |  63 ++++--
 src/components/Pages/Welcome.vue     | 213 ++++++++++++-------
 src/stores/command.ts                | 177 ++++++++--------
 src/utils/helper.ts                  |  14 ++
 6 files changed, 506 insertions(+), 311 deletions(-)

diff --git a/src/assets/css/style.css b/src/assets/css/style.css
index a2f9a05..deb3898 100755
--- a/src/assets/css/style.css
+++ b/src/assets/css/style.css
@@ -2206,6 +2206,12 @@ body {
   margin-left: calc(0.75rem * calc(1 - var(--tw-space-x-reverse)));
 }
 
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-x-reverse: 0;
+  margin-right: calc(1rem * var(--tw-space-x-reverse));
+  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -2224,12 +2230,6 @@ body {
   margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));
 }
 
-.space-x-4 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-x-reverse: 0;
-  margin-right: calc(1rem * var(--tw-space-x-reverse));
-  margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
 .divide-y > :not([hidden]) ~ :not([hidden]) {
   --tw-divide-y-reverse: 0;
   border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
@@ -2475,6 +2475,10 @@ body {
   border-bottom-width: 0px;
 }
 
+.border-b-2 {
+  border-bottom-width: 2px;
+}
+
 .border-l-4 {
   border-left-width: 4px;
 }
@@ -2491,10 +2495,6 @@ body {
   border-top-width: 0px;
 }
 
-.border-b-2 {
-  border-bottom-width: 2px;
-}
-
 .border-solid {
   border-style: solid;
 }
@@ -2582,6 +2582,11 @@ body {
   border-color: rgb(255 51 51 / var(--tw-border-opacity));
 }
 
+.border-secondary-500 {
+  --tw-border-opacity: 1;
+  border-color: rgb(0 162 185 / var(--tw-border-opacity));
+}
+
 .border-transparent {
   border-color: transparent;
 }
@@ -2596,11 +2601,6 @@ body {
   border-color: rgb(255 255 51 / var(--tw-border-opacity));
 }
 
-.border-secondary-500 {
-  --tw-border-opacity: 1;
-  border-color: rgb(0 162 185 / var(--tw-border-opacity));
-}
-
 .bg-black {
   --tw-bg-opacity: 1;
   background-color: rgb(0 0 0 / var(--tw-bg-opacity));
@@ -3715,6 +3715,16 @@ body {
   color: rgb(102 102 0 / var(--tw-text-opacity));
 }
 
+.text-slate-300 {
+  --tw-text-opacity: 1;
+  color: rgb(203 213 225 / var(--tw-text-opacity));
+}
+
+.text-slate-500 {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 .text-opacity-40 {
   --tw-text-opacity: 0.4;
 }
@@ -3723,6 +3733,10 @@ body {
   text-decoration-line: underline;
 }
 
+.no-underline {
+  text-decoration-line: none;
+}
+
 .placeholder-gray-500::-moz-placeholder {
   --tw-placeholder-opacity: 1;
   color: rgb(107 114 128 / var(--tw-placeholder-opacity));
@@ -5252,6 +5266,11 @@ body {
   color: rgb(51 51 0 / 0.9);
 }
 
+:is(.dark .dark\:text-slate-500) {
+  --tw-text-opacity: 1;
+  color: rgb(100 116 139 / var(--tw-text-opacity));
+}
+
 :is(.dark .dark\:text-opacity-70) {
   --tw-text-opacity: 0.7;
 }
diff --git a/src/components/CommandPalettes.vue b/src/components/CommandPalettes.vue
index bf3912b..9d5d1c1 100755
--- a/src/components/CommandPalettes.vue
+++ b/src/components/CommandPalettes.vue
@@ -1,36 +1,57 @@
 <template>
-    <TransitionRoot :show="command.open" @after-leave="onQueryChange('')" appear>
-        <Dialog as="div" class="relative z-10" @close="command.closeCommand">
-            <TransitionChild enter="ease-out duration-300" enter-from="opacity-0" enter-to="opacity-100"
-                leave="ease-in duration-200" leave-from="opacity-100" leave-to="opacity-0">
-                <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
-            </TransitionChild>
+  <TransitionRoot :show="command.open" @after-leave="onQueryChange('')" appear>
+    <Dialog as="div" class="relative z-10" @close="command.closeCommand">
+      <TransitionChild
+        enter="ease-out duration-300"
+        enter-from="opacity-0"
+        enter-to="opacity-100"
+        leave="ease-in duration-200"
+        leave-from="opacity-100"
+        leave-to="opacity-0"
+      >
+        <div class="fixed inset-0 transition-opacity bg-gray-500 bg-opacity-25 backdrop-blur" />
+      </TransitionChild>
 
-            <div class="fixed inset-0 z-10 p-4 overflow-y-auto sm:p-6 md:p-20">
-                <TransitionChild enter="ease-out duration-300" enter-from="opacity-0 scale-95"
-                    enter-to="opacity-100 scale-100" leave="ease-in duration-200" leave-from="opacity-100 scale-100"
-                    leave-to="opacity-0 scale-95">
-                    <!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
-                    <DialogPanel
-                        class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5">
-                        <Combobox>
-                            <div class="relative">
-                                <MagnifyingGlassIcon
-                                    class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
-                                    aria-hidden="true" />
-                                <ComboboxInput :autofocus="false"
-                                    class="w-full h-12 pr-4 text-gray-900 placeholder-gray-500 bg-white border-0 pl-11 focus:ring-0 sm:text-sm"
-                                    placeholder="Cari menu..." @change="onQueryChange($event.target.value)" />
-                            </div>
+      <div class="fixed inset-0 z-10 p-4 overflow-y-auto sm:p-6 md:p-20">
+        <TransitionChild
+          enter="ease-out duration-300"
+          enter-from="opacity-0 scale-95"
+          enter-to="opacity-100 scale-100"
+          leave="ease-in duration-200"
+          leave-from="opacity-100 scale-100"
+          leave-to="opacity-0 scale-95"
+        >
+          <!-- max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-80 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5 -->
+          <DialogPanel
+            class="max-w-2xl mx-auto overflow-hidden transition-all transform bg-white bg-opacity-100 divide-y divide-gray-500 shadow-2xl divide-opacity-10 rounded-xl ring-0 ring-black ring-opacity-5"
+          >
+            <Combobox>
+              <div class="relative">
+                <MagnifyingGlassIcon
+                  class="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-900 text-opacity-40"
+                  aria-hidden="true"
+                />
+                <ComboboxInput
+                  :autofocus="false"
+                  class="w-full h-12 pr-4 text-gray-900 placeholder-gray-500 bg-white border-0 pl-11 focus:ring-0 sm:text-sm"
+                  placeholder="Cari menu..."
+                  @change="onQueryChange($event.target.value)"
+                />
+              </div>
 
-                            <ComboboxOptions v-if="query === '' || filteredMenus.length > 0" static
-                                class="overflow-y-auto divide-y divide-gray-500 scroll-py-2 divide-opacity-10">
-                                <li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
-                                    <h2 v-if="query === '' && recent.length > 0"
-                                        class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900">
-                                        Terakhir Diakses
-                                    </h2>
-                                    <!-- <ul class="text-sm text-gray-700">
+              <ComboboxOptions
+                v-if="query === '' || filteredMenus.length > 0"
+                static
+                class="overflow-y-auto divide-y divide-gray-500 scroll-py-2 divide-opacity-10"
+              >
+                <li class="p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
+                  <h2
+                    v-if="query === '' && recent.length > 0"
+                    class="px-3 mt-4 mb-2 text-xs font-semibold text-gray-900"
+                  >
+                    Terakhir Diakses
+                  </h2>
+                  <!-- <ul class="text-sm text-gray-700">
                                         <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
                                             :key="menu.path" v-slot="{ active }">
                                             <li @click="command.openMenu(menu)"
@@ -77,115 +98,155 @@
                                             </li>
                                         </ComboboxOption>
                                     </ul> -->
-                                    <ul class="text-sm text-gray-700">
-                                        <ComboboxOption as="template" v-for="menu in query === '' ? recent : filteredMenus"
-                                            :key="menu.path" v-slot="{ active }">
-                                            <li @click="command.openMenu(menu)" class="group">
-                                                <div class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none lex group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
-                                                    <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]"
-                                                        alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/keluhan/')"
-                                                        :is="navigationIcon[1]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/monalisa/')"
-                                                        :is="navigationIcon[2]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/check-in-out/')"
-                                                        :is="navigationIcon[3]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/anomali-pengaduan/')"
-                                                        :is="navigationIcon[4]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
-                                                        :is="navigationIcon[5]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/material/')"
-                                                        :is="navigationIcon[6]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else-if="menu.path.includes('/transaksi/')"
-                                                        :is="navigationIcon[7]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                                    <component v-else :is="navigationIcon[8]" alt="icon"
-                                                        :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+                  <ul class="text-sm text-gray-700">
+                    <ComboboxOption
+                      as="template"
+                      v-for="menu in query === '' ? recent : filteredMenus"
+                      :key="menu.path"
+                      v-slot="{ active }"
+                    >
+                      <li @click="command.openMenu(menu)" class="group">
+                        <div
+                          class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none lex group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80"
+                        >
+                          <component
+                            v-if="menu.path.includes('/gangguan/')"
+                            :is="navigationIcon[0]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/keluhan/')"
+                            :is="navigationIcon[1]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/monalisa/')"
+                            :is="navigationIcon[2]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/check-in-out/')"
+                            :is="navigationIcon[3]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                            :is="navigationIcon[4]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
+                            :is="navigationIcon[5]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/material/')"
+                            :is="navigationIcon[6]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else-if="menu.path.includes('/transaksi/')"
+                            :is="navigationIcon[7]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
+                          <component
+                            v-else
+                            :is="navigationIcon[8]"
+                            alt="icon"
+                            :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                          />
 
-                                                    <div class="flex flex-col flex-1 ml-3 space-y-1">
-                                                        <span
-                                                            class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
-                                                            {{ menu.name }}
-                                                        </span>
-                                                        <span
-                                                            class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
-                                                            {{ menu.path.replace('/home/', '') }}
-                                                        </span>
-                                                    </div>
-                                                    <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
-                                                        Buka
-                                                    </span>
-                                                </div>
-                                                
+                          <div class="flex flex-col flex-1 ml-3 space-y-1">
+                            <span
+                              class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1"
+                            >
+                              {{ menu.name }}
+                            </span>
+                            <span
+                              class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1"
+                            >
+                              {{ menu.path.replace('/home/', '') }}
+                            </span>
+                          </div>
+                          <span
+                            class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white"
+                          >
+                            Buka
+                          </span>
+                        </div>
+                      </li>
+                    </ComboboxOption>
+                  </ul>
+                </li>
+              </ComboboxOptions>
 
-                                            </li>
-                                        </ComboboxOption>
-                                    </ul>
-                                </li>
-                            </ComboboxOptions>
+              <div
+                v-if="query !== '' && filteredMenus.length === 0"
+                class="px-6 text-center py-14 sm:px-14"
+              >
+                <h2 class="font-semibold text-slate-900">Tidak ada hasil</h2>
 
-                            <div v-if="query !== '' && filteredMenus.length === 0" class="px-6 text-center py-14 sm:px-14">
-                                <h2 class="font-semibold text-slate-900">Tidak ada hasil</h2>
-
-                                <p class="mt-2 text-sm leading-6 text-slate-600">
-                                    Kami tidak dapat menemukan menu apa pun dengan istilah itu saat ini, silahkan gunakan
-                                    kata kunci lainnya.
-                                </p>
-                            </div>
-                        </Combobox>
-                    </DialogPanel>
-                </TransitionChild>
-            </div>
-        </Dialog>
-    </TransitionRoot>
+                <p class="mt-2 text-sm leading-6 text-slate-600">
+                  Kami tidak dapat menemukan menu apa pun dengan istilah itu saat ini, silahkan
+                  gunakan kata kunci lainnya.
+                </p>
+              </div>
+            </Combobox>
+          </DialogPanel>
+        </TransitionChild>
+      </div>
+    </Dialog>
+  </TransitionRoot>
 </template>
 
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import {
-    Combobox,
-    ComboboxInput,
-    ComboboxOptions,
-    ComboboxOption,
-    Dialog,
-    DialogPanel,
-    TransitionChild,
-    TransitionRoot,
+  Combobox,
+  ComboboxInput,
+  ComboboxOptions,
+  ComboboxOption,
+  Dialog,
+  DialogPanel,
+  TransitionChild,
+  TransitionRoot
 } from '@headlessui/vue'
 import { routes } from '@/router'
 import { useCommandPalattesStore } from '@/stores/command'
 import { navigationIcon } from '@/utils/route'
 
 const command = useCommandPalattesStore()
-const recent = computed(() => command.open ? command.readRecent() : [])
+const recent = computed(() => (command.open ? command.readRecent() : []))
 const query = ref('')
 const filteredMenus = computed(() =>
-    query.value === ''
-        ? []
-        : command.searchRoutesByName(routes, query.value)
+  query.value === '' ? [] : command.searchRoutesByName(routes, query.value)
 )
 
-let debounceTimeout: ReturnType<typeof setTimeout> | null = null;
+let debounceTimeout: ReturnType<typeof setTimeout> | null = null
 const onQueryChange = (value: string) => {
-    if (debounceTimeout) {
-        clearTimeout(debounceTimeout);
+  if (debounceTimeout) {
+    clearTimeout(debounceTimeout)
+  }
+  debounceTimeout = setTimeout(() => {
+    // check if value is empty or only spaces
+    if (value.trim() === '') {
+      query.value = ''
+      return
     }
-    debounceTimeout = setTimeout(() => {
-        // check if value is empty or only spaces
-        if (value.trim() === '') {
-            query.value = ''
-            return
-        }
-        query.value = value
-    }, 300);
+    query.value = value
+  }, 300)
 }
 
-</script>
\ No newline at end of file
+onMounted(() => {
+  window.addEventListener('keydown', (e) => command.onKeyPressed(e))
+})
+</script>
diff --git a/src/components/Navigation/Header.vue b/src/components/Navigation/Header.vue
index 4101694..1ce7287 100755
--- a/src/components/Navigation/Header.vue
+++ b/src/components/Navigation/Header.vue
@@ -9,12 +9,15 @@ import PictureInitial from '@/components/PictureInitial.vue'
 import { useDialogStore } from '@/stores/dialog'
 import { IconApp, IconBars3 } from '@/utils/icons'
 import { RouterLink } from 'vue-router'
+import { ref } from 'vue'
+import { detectOS } from '@/utils/helper'
 
 const auth = useAuthStore()
 const user = useUserStore()
 const command = useCommandPalattesStore()
 const menu = useMenuStore()
 const dialog = useDialogStore()
+const os = ref(detectOS())
 
 const openSideBar = () => menu.toggleSidebar()
 
@@ -35,7 +38,11 @@ const showDialogLogout = () => {
 
 <template>
   <div class="sticky top-0 z-10 flex flex-shrink-0 h-16 bg-primary-50 lg:ml-80">
-    <button type="button" class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden" @click="openSideBar">
+    <button
+      type="button"
+      class="px-4 text-gray-500 focus:outline-none focus:ring-0 lg:hidden"
+      @click="openSideBar"
+    >
       <span class="sr-only">Open sidebar</span>
       <IconBars3 class="w-6 h-6 fill-gray-600" />
     </button>
@@ -44,36 +51,57 @@ const showDialogLogout = () => {
     </RouterLink>
     <div class="flex justify-end w-full px-4">
       <div class="flex items-center ml-4 md:ml-6">
-        <button @click="command.showCommandPalettes" type="button"
-          class="flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0">
+        <button
+          @click="command.showCommandPalettes"
+          type="button"
+          class="justify-between flex flex-row items-center md:w-[300px] p-2 mr-2 text-gray-400 bg-white rounded-full hover:text-primary-500 focus:outline-none focus:ring-0"
+        >
           <span class="sr-only">Search</span>
           <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
-          <span class="hidden px-3 text-sm font-medium text-gray-500 md:block text-md">Cari menu</span>
+          <span
+            class="flex-1 hidden px-3 text-sm font-medium text-left text-gray-500 md:block text-md"
+            >Cari menu</span
+          >
+          <button class="hidden mx-2 md:block" v-if="os == 'macOS'">⌘ M</button>
         </button>
 
         <!-- Profile dropdown -->
         <Menu as="div" class="relative ml-1">
           <div>
             <MenuButton
-              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1">
+              class="flex items-center max-w-xs px-1 py-1 text-sm rounded-full bg-secondary-100 md:bg-primary-500 focus:outline-none focus:ring-0 line-clamp-1"
+            >
               <span class="sr-only">Open user menu</span>
-              <PictureInitial size-class="w-8 h-8" background-class="bg-secondary-100"
-                font-class="text-xs font-bold text-primary-500" :name="user.user_name" />
+              <PictureInitial
+                size-class="w-8 h-8"
+                background-class="bg-secondary-100"
+                font-class="text-xs font-bold text-primary-500"
+                :name="user.user_name"
+              />
               <span class="hidden px-3 text-xs font-medium md:block text-primary-50 line-clamp-1">
                 {{ user.user_name }}
               </span>
             </MenuButton>
           </div>
-          <transition enter-active-class="transition duration-100 ease-out"
-            enter-from-class="transform scale-95 opacity-0" enter-to-class="transform scale-100 opacity-100"
-            leave-active-class="transition duration-75 ease-in" leave-from-class="transform scale-100 opacity-100"
-            leave-to-class="transform scale-95 opacity-0">
+          <transition
+            enter-active-class="transition duration-100 ease-out"
+            enter-from-class="transform scale-95 opacity-0"
+            enter-to-class="transform scale-100 opacity-100"
+            leave-active-class="transition duration-75 ease-in"
+            leave-from-class="transform scale-100 opacity-100"
+            leave-to-class="transform scale-95 opacity-0"
+          >
             <MenuItems class="container-menu-item">
               <div class="container-menu-profile group">
                 <div class="flex items-center">
                   <div>
-                    <PictureInitial class-name="inline-block" size-class="w-9 h-9" background-class="bg-secondary-100"
-                      font-class="text-xs font-normal font-semibold text-primary-500" :name="user.user_name" />
+                    <PictureInitial
+                      class-name="inline-block"
+                      size-class="w-9 h-9"
+                      background-class="bg-secondary-100"
+                      font-class="text-xs font-normal font-semibold text-primary-500"
+                      :name="user.user_name"
+                    />
                   </div>
                   <div class="ml-3 space-y-1">
                     <p class="text-sm font-medium text-primary-50">
@@ -89,9 +117,12 @@ const showDialogLogout = () => {
                 </div>
               </div>
               <MenuItem v-slot="{ active }">
-              <button @click="showDialogLogout" :class="[active ? 'menu-item-active' : 'menu-item']">
-                Log out
-              </button>
+                <button
+                  @click="showDialogLogout"
+                  :class="[active ? 'menu-item-active' : 'menu-item']"
+                >
+                  Log out
+                </button>
               </MenuItem>
             </MenuItems>
           </transition>
diff --git a/src/components/Pages/Welcome.vue b/src/components/Pages/Welcome.vue
index cdea700..84c5317 100755
--- a/src/components/Pages/Welcome.vue
+++ b/src/components/Pages/Welcome.vue
@@ -1,100 +1,163 @@
 <template>
-    <div class="flex flex-col items-center justify-between px-4 text-center whitespace-pre-wrap h-[calc(90vh-24px)]">
-        <div class="w-full flex-1 md:w-[440px] justify-center py-4 md:py-0 flex flex-col items-center">
-            <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4">
-            <button @click="command.showCommandPalettes" type="button"
-                class="flex flex-row items-center w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0">
-                <span class="sr-only">Search</span>
-                <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
-                <span class="px-3 text-sm font-medium text-gray-500 text-md">Cari menu</span>
-            </button>
+  <div
+    class="flex flex-col items-center justify-between px-4 text-center whitespace-pre-wrap h-[calc(90vh-24px)]"
+  >
+    <div class="w-full flex-1 md:w-[440px] justify-center py-4 md:py-0 flex flex-col items-center">
+      <img :src="IconApp" alt="pln" class="h-[66px] object-contain mx-auto mb-4" />
+      <button
+        @click="command.showCommandPalettes"
+        type="button"
+        class="flex flex-row items-center justify-between w-full p-2 text-gray-400 rounded-full bg-gray-50 hover:text-primary-500 focus:outline-none focus:ring-0"
+      >
+        <span class="sr-only">Search</span>
+        <MagnifyingGlassIcon class="w-6 h-6 text-primary-500" aria-hidden="true" />
+        <span class="flex-1 px-3 text-sm font-medium text-left text-gray-500 text-md">
+          Cari menu</span
+        >
+        <button class="mx-2" v-if="os == 'macOS'">⌘ M</button>
+      </button>
 
-            <div class="flex mt-3.5" v-if="filteredMenus.length === 0 && recent.length === 0">
-                <h1 class="text-sm text-center text-gray-800">
-                    Silahkan cari menu atau buka menu di samping kiri untuk memulai
-                </h1>
-            </div>
+      <div class="flex mt-3.5" v-if="filteredMenus.length === 0 && recent.length === 0">
+        <h1 class="text-sm text-center text-gray-800">
+          Silahkan cari menu atau buka menu di samping kiri untuk memulai
+        </h1>
+      </div>
 
-            <div v-if="query === '' || filteredMenus.length > 0" static class="w-full mt-6 md:mt-8 lg:mt-12">
-                <div class="flex flex-col items-start w-full p-2" v-if="filteredMenus.length > 0 || recent.length > 0">
-                    <h2 v-if="query === '' && recent.length > 0" class="mb-2 text-xs font-semibold text-gray-900 ">
-                        Terakhir Diakses
-                    </h2>
-                    <div class="flex flex-col w-full space-y-3" v-for="menu in query === '' ? recent : filteredMenus"
-                        :key="menu.path">
-                        <div @click="command.openMenu(menu)" class="group">
-                            <div
-                                class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80">
-                                <component v-if="menu.path.includes('/gangguan/')" :is="navigationIcon[0]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/keluhan/')" :is="navigationIcon[1]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/monalisa/')" :is="navigationIcon[2]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/check-in-out/')" :is="navigationIcon[3]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/anomali-pengaduan/')" :is="navigationIcon[4]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/ctt-kwh-periksa/')" :is="navigationIcon[5]"
-                                    alt="icon" :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/material/')" :is="navigationIcon[6]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else-if="menu.path.includes('/transaksi/')" :is="navigationIcon[7]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
-                                <component v-else :is="navigationIcon[8]" alt="icon"
-                                    :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']" />
+      <div
+        v-if="query === '' || filteredMenus.length > 0"
+        static
+        class="w-full mt-6 md:mt-8 lg:mt-12"
+      >
+        <div
+          class="flex flex-col items-start w-full p-2"
+          v-if="filteredMenus.length > 0 || recent.length > 0"
+        >
+          <h2
+            v-if="query === '' && recent.length > 0"
+            class="mb-2 text-xs font-semibold text-gray-900"
+          >
+            Terakhir Diakses
+          </h2>
+          <div
+            class="flex flex-col w-full space-y-3"
+            v-for="menu in query === '' ? recent : filteredMenus"
+            :key="menu.path"
+          >
+            <div @click="command.openMenu(menu)" class="group">
+              <div
+                class="flex flex-row items-center justify-between px-3 py-2 rounded-md cursor-pointer select-none group-hover:bg-primary-500 group-hover:text-white group-hover:bg-opacity-80"
+              >
+                <component
+                  v-if="menu.path.includes('/gangguan/')"
+                  :is="navigationIcon[0]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/keluhan/')"
+                  :is="navigationIcon[1]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/monalisa/')"
+                  :is="navigationIcon[2]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/check-in-out/')"
+                  :is="navigationIcon[3]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/anomali-pengaduan/')"
+                  :is="navigationIcon[4]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/ctt-kwh-periksa/')"
+                  :is="navigationIcon[5]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/material/')"
+                  :is="navigationIcon[6]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else-if="menu.path.includes('/transaksi/')"
+                  :is="navigationIcon[7]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
+                <component
+                  v-else
+                  :is="navigationIcon[8]"
+                  alt="icon"
+                  :class="['w-8 h-8 fill-gray-600 group-hover:fill-white flex']"
+                />
 
-                                <div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
-                                    <span
-                                        class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1">
-                                        {{ menu.name }}
-                                    </span>
-                                    <span
-                                        class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1">
-                                        {{ menu.path.replace('/home/', '') }}
-                                    </span>
-                                </div>
-                                <span class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white">
-                                    Buka
-                                </span>
-                            </div>
-
-
-                        </div>
-                    </div>
+                <div class="flex flex-col items-start flex-1 w-full pl-3 space-y-1">
+                  <span
+                    class="w-full text-sm font-medium text-gray-800 text-start group-hover:text-white line-clamp-1"
+                  >
+                    {{ menu.name }}
+                  </span>
+                  <span
+                    class="w-full text-xs text-gray-500 text-start group-hover:text-white line-clamp-1"
+                  >
+                    {{ menu.path.replace('/home/', '') }}
+                  </span>
                 </div>
+                <span
+                  class="hidden ml-3 text-sm text-gray-500 group-hover:block group-hover:text-white"
+                >
+                  Buka
+                </span>
+              </div>
             </div>
+          </div>
         </div>
-        <div class="flex flex-col items-center justify-center py-3">
-            <dt class="text-xs text-center text-gray-500">
-                Copyright © 2023 PT PLN (Persero). All Rights Reserved
-            </dt>
-        </div>
+      </div>
     </div>
+    <div class="flex flex-col items-center justify-center py-3">
+      <dt class="text-xs text-center text-gray-500">
+        Copyright © 2023 PT PLN (Persero). All Rights Reserved
+      </dt>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid';
+import { MagnifyingGlassIcon } from '@heroicons/vue/20/solid'
 import { computed, ref } from 'vue'
 import { useCommandPalattesStore } from '@/stores/command'
 import { IconApp } from '@/utils/icons'
 import { type RouteRecordRaw } from 'vue-router'
 import { routes, extractLeafRoutes } from '@/router'
-import { navigationIcon } from '@/utils/route';
+import { navigationIcon } from '@/utils/route'
+import { detectOS } from '@/utils/helper'
 
+const os = ref(detectOS())
 const command = useCommandPalattesStore()
-const recent = computed(() => query.value === '' ? command.readRecent() : [])
+const recent = computed(() => (query.value === '' ? command.readRecent() : []))
 const query = ref('')
 
 const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
-    const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
-    return matchingRoutes
+  const matchingRoutes = extractLeafRoutes(routes, '').filter(
+    (item: RouteRecordRaw) =>
+      item.path.includes('home/') &&
+      item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase())
+  )
+  return matchingRoutes
 }
 
 const filteredMenus = computed(() =>
-    query.value === ''
-        ? []
-        : searchRoutesByName(routes, query.value)
+  query.value === '' ? [] : searchRoutesByName(routes, query.value)
 )
-
-</script>
\ No newline at end of file
+</script>
diff --git a/src/stores/command.ts b/src/stores/command.ts
index 487978e..dfb9bb9 100755
--- a/src/stores/command.ts
+++ b/src/stores/command.ts
@@ -6,103 +6,110 @@ import { extractLeafRoutes } from '@/router'
 import { useMenuStore } from '@/stores/menu'
 
 export const useCommandPalattesStore = defineStore('command_palettes', () => {
-    const open = ref(false)
-    const route = useRouter()
-    const menu = useMenuStore()
-    const controlStatus = ref(false)
-    const keyFStatus = ref(false)
+  const open = ref(false)
+  const route = useRouter()
+  const menu = useMenuStore()
+  const controlStatus = ref(false)
+  const keyFStatus = ref(false)
 
-    const showCommandPalettes = () => {
-        open.value = true
+  const showCommandPalettes = () => {
+    open.value = true
+  }
+
+  const onKeyPressed = (event: KeyboardEvent) => {
+    if ((event.metaKey || event.ctrlKey) && event.key === 'm') {
+      showCommandPalettes()
+      //   console.log('control pressed')
+      //   controlStatus.value = true
     }
 
-    const onKeyPressed = (event: KeyboardEvent) => {
-        if (event.key === 'Control') {
-            console.log('control pressed');
-            controlStatus.value = true
-        }
+    // if (event.key === 'f') {
+    //     console.log('f pressed');
+    //     keyFStatus.value = true
+    // }
 
-        if (event.key === 'f') {
-            console.log('f pressed');
-            keyFStatus.value = true
-        }
+    // if (controlStatus.value && keyFStatus.value) {
+    //     showCommandPalettes()
+    // }
+  }
 
-        if (controlStatus.value && keyFStatus.value) {
-            showCommandPalettes()
-        }
+  const onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === 'Control') {
+      console.log('control released')
+      controlStatus.value = false
     }
 
-    const onKeyUp = (event: KeyboardEvent) => {
-        if (event.key === 'Control') {
-            console.log('control released');
-            controlStatus.value = false
-        }
+    if (event.key === 'f') {
+      console.log('f released')
+      keyFStatus.value = false
+    }
+  }
 
-        if (event.key === 'f') {
-            console.log('f released');
-            keyFStatus.value = false
-        }
+  const readRecent = (): RouteRecordRaw[] => {
+    const recent = readDataJson('recentmenu')
+    if (recent) {
+      try {
+        JSON.parse(recent)
+      } catch (error) {
+        return recent as RouteRecordRaw[]
+      }
+    }
+    return [] as RouteRecordRaw[]
+  }
+
+  const addRecent = (menu: RouteRecordRaw) => {
+    const lastRecent = readRecent()
+    const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
+    if (index > -1) {
+      lastRecent.splice(index, 1)
+    }
+    lastRecent.unshift(menu)
+    if (lastRecent.length > 5) {
+      lastRecent.pop()
     }
 
-    const readRecent = (): RouteRecordRaw[] => {
-        const recent = readDataJson('recentmenu')
-        if (recent) {
-            try {
-                JSON.parse(recent)
-            } catch (error) {
-                return recent as RouteRecordRaw[]
-            }
-        }
-        return [] as RouteRecordRaw[]
-    }
+    writeDataJson('recentmenu', lastRecent)
+  }
 
-    const addRecent = (menu: RouteRecordRaw) => {
-        const lastRecent = readRecent()
-        const index = lastRecent.findIndex((item: RouteRecordRaw) => item.path === menu.path)
-        if (index > -1) {
-            lastRecent.splice(index, 1)
-        }
-        lastRecent.unshift(menu)
-        if (lastRecent.length > 5) {
-            lastRecent.pop()
-        }
+  const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+    const matchingRoutes = extractLeafRoutes(routes, '').filter(
+      (item: RouteRecordRaw) =>
+        item.path.includes('home/') &&
+        item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase())
+    )
+    return matchingRoutes
+  }
 
-        writeDataJson('recentmenu', lastRecent)
-    }
+  const searchRoutesPath = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
+    const matchingRoutes = extractLeafRoutes(routes, '').filter(
+      (item: RouteRecordRaw) => item.path.includes('home/') && item.path === query
+    )
+    return matchingRoutes
+  }
 
-    const searchRoutesByName = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
-        const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.name?.toString().toLocaleLowerCase().includes(query.toLocaleLowerCase()))
-        return matchingRoutes
-    }
+  const openMenu = (routeTarget: RouteRecordRaw) => {
+    addRecent(routeTarget)
+    route.push(routeTarget.path)
+    closeCommand()
+    setTimeout(() => {
+      menu.expandCurrentActiveMenu()
+    }, 200)
+  }
 
-    const searchRoutesPath = (routes: RouteRecordRaw[], query: string): RouteRecordRaw[] => {
-        const matchingRoutes = extractLeafRoutes(routes, '').filter((item: RouteRecordRaw) => item.path.includes('home/') && item.path === query)
-        return matchingRoutes
-    }
+  const closeCommand = () => {
+    open.value = false
+  }
 
-    const openMenu = (routeTarget: RouteRecordRaw) => {
-        addRecent(routeTarget)
-        route.push(routeTarget.path)
-        closeCommand()
-        setTimeout(() => {
-            menu.expandCurrentActiveMenu()
-        }, 200);
-    }
-
-    const closeCommand = () => {
-        open.value = false
-    }
-
-    return {
-        open,
-        showCommandPalettes,
-        onKeyPressed,
-        onKeyUp,
-        addRecent,
-        readRecent,
-        searchRoutesByName,
-        searchRoutesPath,
-        openMenu,
-        closeCommand
-    }
-})
\ No newline at end of file
+  return {
+    open,
+    showCommandPalettes,
+    onKeyPressed,
+    onKeyUp,
+    addRecent,
+    readRecent,
+    searchRoutesByName,
+    searchRoutesPath,
+    openMenu,
+    closeCommand
+  }
+})
diff --git a/src/utils/helper.ts b/src/utils/helper.ts
index 0f38f66..f3bea4b 100644
--- a/src/utils/helper.ts
+++ b/src/utils/helper.ts
@@ -37,3 +37,17 @@ export const getDataRowGroup = (data: any): any => {
     }
   }
 }
+
+export const detectOS = () => {
+  const platform = navigator.userAgent.toLowerCase()
+
+  if (platform.includes('mac')) {
+    return 'macOS'
+  } else if (platform.includes('win')) {
+    return 'Windows'
+  } else if (platform.includes('linux')) {
+    return 'Linux'
+  } else {
+    return 'Unknown'
+  }
+}