@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/layout/AppNavbar.vue

@@ -0,0 +1,402 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useModulePermission } from '@initsolusidigital/worksuite-core/composables/useModulePermission.js'
+import { useSelfCompanyItem } from '../../composables/useNavigation.js'
+import { getTenantSettingsEntryRoute, getBreadcrumbs } from '../../shellSetup.js'
+import { useLgViewport } from '../../composables/useLgViewport.js'
+import { useNotifications } from '@initsolusidigital/worksuite-core/composables/useNotifications.js'
+import { useGlobalSearch } from '@initsolusidigital/worksuite-core/composables/useGlobalSearch.js'
+import { brandInitialsColor, brandSolid, brandTextOn, normalizeBrandColor } from '@initsolusidigital/worksuite-core/utils/brandColor.js'
+import { userName } from '@initsolusidigital/worksuite-core/utils/userName.js'
+import AppLanguageSwitcher from '@initsolusidigital/worksuite-core/components/ui/AppLanguageSwitcher.vue'
+import AppTooltip from '@initsolusidigital/worksuite-ui/AppTooltip.vue'
+import AppBreadcrumb from '@initsolusidigital/worksuite-ui/AppBreadcrumb.vue'
+
+const router = useRouter()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+const myCompanyItem = useSelfCompanyItem()
+// Di ≥ lg breadcrumb tinggal di header sebagai pulau kiri, sebaris dengan pulau utilitas; di
+// bawahnya `AppLayout` yang merendernya di atas konten. Keduanya memilih lewat ref yang sama.
+const isLg = useLgViewport()
+const { breadcrumbs } = getBreadcrumbs()()
+const { unreadCount, fetchUnreadCount, initNotificationRealtime, teardownNotificationRealtime } = useNotifications()
+
+// ── Smart Scroll ─────────────────────────────────────────────────────────────
+// Header disembunyikan saat pengguna scroll ke bawah, muncul kembali saat ke atas
+const isHidden = ref(false)
+let lastScrollY = 0
+let scrollTimer = null
+
+function onScroll() {
+  const y = window.scrollY
+  // Sembunyikan saat scroll ke bawah melewati 50px dari atas
+  if (y > lastScrollY && y > 50) {
+    isHidden.value = true
+  } else if (y < lastScrollY) {
+    isHidden.value = false
+  }
+  lastScrollY = y <= 0 ? 0 : y
+  // Tampilkan kembali setelah 800ms berhenti scroll
+  clearTimeout(scrollTimer)
+  scrollTimer = setTimeout(() => { isHidden.value = false }, 800)
+}
+
+// State fullscreen
+const isFullscreen = ref(false)
+
+// Toggle fullscreen browser
+function toggleFullscreen() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen()
+    isFullscreen.value = true
+  } else {
+    document.exitFullscreen()
+    isFullscreen.value = false
+  }
+}
+
+// Ikon gear Setelan Tenant: tampil bila app memasok `tenantSettingsEntryRoute` lewat
+// configureShell() dan user berhak membuka minimal satu seksi Setelan Tenant. Seksi Pesan,
+// Integrasi & API punya gerbang modulnya sendiri, jadi pemegangnya berhak masuk walau tanpa
+// `companies,can_configure`; tanpa cabang ini satu-satunya jalan mereka adalah mengetik URL.
+// Daftar seksi + gerbangnya milik app (satu sumber dengan tab Setelan Tenant), bukan diulang di sini.
+const { can } = useModulePermission()
+const { openSearch } = useGlobalSearch()
+const settingsEntryRoute = computed(() => getTenantSettingsEntryRoute()?.(can) ?? null)
+function navigateToSelfSettings() {
+  if (!authStore.user?.company_id || !settingsEntryRoute.value) return
+  router.push({ name: settingsEntryRoute.value, params: { companyId: authStore.user.company_id } })
+  appStore.closeUserMenu()
+  appStore.closeNotification()
+}
+
+// ── Lifecycle ────────────────────────────────────────────────────────────────
+onMounted(() => {
+  window.addEventListener('scroll', onScroll, { passive: true })
+  fetchUnreadCount()
+  // Badge lonceng real-time — independen dari permission modul `chats`, makanya
+  // di-init di sini (navbar selalu mount), BUKAN di AppChatWidget (digerbang izin chat).
+  initNotificationRealtime(authStore.user?.id)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('scroll', onScroll)
+  clearTimeout(scrollTimer)
+  teardownNotificationRealtime()
+})
+
+// ── Warna branding ───────────────────────────────────────────────────────────
+// Pil logo mengisi lebar layar sempit sebagai navbar utama — latar transparan tidak terbaca di sana,
+// jadi alpha warna brand dibuang.
+const brandingColorSolid = computed(() => brandSolid(normalizeBrandColor(authStore.brandingColor)))
+// Teks & ikon di atas pil dinilai terhadap warna pil itu sendiri: pil selalu solid.
+const brandingText = computed(() => brandTextOn(brandingColorSolid.value))
+const brandingInitials = computed(() => brandInitialsColor(brandingColorSolid.value))
+
+// ── Data user (computed dari auth store) ──────────────────────────────────────
+// Inisial dua huruf: huruf pertama first_name + huruf pertama last_name (misal: WP)
+const userInitials = computed(() => {
+  const first = authStore.user?.first_name?.charAt(0)?.toUpperCase() || ''
+  const last = authStore.user?.last_name?.charAt(0)?.toUpperCase() || ''
+  return first + last || 'U'
+})
+// Backend selalu mengirim avatar sebagai absolute URL siap pakai
+const userAvatar = computed(() => authStore.user?.avatar ?? null)
+const userDisplayName = computed(() => userName(authStore.user))
+// Fallback ke inisial jika gambar avatar gagal dimuat
+const avatarError = ref(false)
+</script>
+
+<template>
+  <!-- Frosted blur mask — menutupi dari tepi atas viewport hingga ke zona buffer
+       sebelum konten halaman. Tingginya WAJIB sama dengan padding atas `main` di AppLayout
+       (h-28/pt-28 di layar sempit, h-24/pt-24 di ≥lg tempat pulau header 48 px) agar fade
+       selesai tepat di awal konten. Fade dimulai sejak 20% agar transisi blur tersebar merata
+       di seluruh area navbar dan menghilang halus di 90%. -->
+  <div
+    class="fixed top-0 left-0 right-0 h-28 lg:h-24 pointer-events-none z-[49]
+           bg-gradient-to-b from-gray-100/80 dark:from-gray-900/80 to-transparent
+           backdrop-blur transition-transform duration-500"
+    :class="[isHidden ? '-translate-y-[200%]' : 'translate-y-0', appStore.sidebarCollapsed ? 'lg:left-20' : 'lg:left-64']"
+    style="mask-image: linear-gradient(to bottom, black 20%, transparent 90%);
+           -webkit-mask-image: linear-gradient(to bottom, black 20%, transparent 90%);"
+    aria-hidden="true"
+  />
+
+  <!-- ── Floating Header Wrapper ──────────────────────────────────────────── -->
+  <!-- Fixed di atas viewport, tersembunyi dengan transform saat scroll ke bawah. Kiri mengikuti lebar
+       sidebar, dan `pointer-events-none`: baris ini selebar layar sedangkan isinya hanya pulau di
+       kanan — tanpa itu ruang kosongnya menelan klik pada konten yang tergulung di bawahnya. -->
+  <div
+    class="fixed top-4 left-0 right-0 z-50 transition-transform duration-500 pointer-events-none"
+    :class="[isHidden ? '-translate-y-[200%]' : 'translate-y-0', appStore.sidebarCollapsed ? 'lg:left-20' : 'lg:left-64']"
+  >
+    <!-- Padding sama dengan popup di bawah (AppUserMenu/AppNotificationPopup/AppLanguagePopup) supaya
+         tepi kanannya sejajar. Konten halaman lebarnya diatur per-halaman via prop AppLayout `width`. -->
+    <div class="w-full px-4 sm:px-6 lg:px-8 flex gap-3">
+
+      <!-- ── Layar sempit: logo + utilitas + hamburger ─────────────────────── -->
+      <!-- Warna latar dari primary_color perusahaan aktif. Dioper lewat `:style`, bukan `v-bind()` di
+           <style>: `v-bind()` mengandalkan `useCssVars` hasil compiler SFC, dan pada dev server yang
+           sudah lama hidup generate itu bisa hilang sehingga latar jatuh ke transparan. -->
+      <div
+        class="logo-pill pointer-events-auto lg:hidden h-16 rounded-2xl shadow-xl flex items-center px-4 md:px-6 shrink-0 w-full justify-between transition-colors duration-300"
+        :style="{ '--logo-pill-solid': brandingColorSolid, color: brandingText }"
+      >
+
+        <!-- Gambar logo: rounded-lg + object-contain agar tidak terpotong; inisial: lingkaran bg putih.
+             `aria-label` WAJIB: tanpa itu namanya jatuh ke `alt="Logo"` — lolos audit, tapi yang
+             diumumkan BENDAnya, bukan TUJUANnya, padahal ini kontrol pertama dalam urutan tab. -->
+        <router-link :to="{ name: 'dashboard' }" :aria-label="t('common.goToDashboard')" class="flex items-center shrink-0">
+          <div
+            class="w-8 h-8 flex items-center justify-center shrink-0"
+            :class="authStore.brandingLogo ? '' : 'rounded-full bg-white overflow-hidden'"
+          >
+            <img
+              v-if="authStore.brandingLogo"
+              :src="authStore.brandingLogo"
+              class="w-full h-full object-contain"
+              alt="Logo"
+            >
+            <span
+              v-else
+              class="font-black text-xs leading-none"
+              :style="{ color: brandingInitials }"
+            >{{ authStore.companyInitials }}</span>
+          </div>
+        </router-link>
+
+        <div class="flex items-center gap-3">
+
+          <!-- Pill kecil berisi ikon utilities (dark mode, notif, my company, avatar) — dibesarkan
+               sedikit (py-1.5→py-2.5, ikon w-4→w-5) agar target tap lebih nyaman di mobile -->
+          <div class="bg-white text-gray-600 rounded-full px-3.5 py-2.5 flex items-center gap-3.5 shadow-md">
+
+            <!-- Gear Setelan Tenant mobile -->
+            <button v-if="settingsEntryRoute" @click="navigateToSelfSettings" class="hover:text-blue-600 transition-colors" :title="t('tab.company.settings')" :aria-label="t('tab.company.settings')">
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </button>
+
+            <!-- Pencarian global mobile -->
+            <button :aria-label="t('search.title')" @click="openSearch" class="hover:text-blue-600 transition-colors" :title="t('search.title')" data-open-search>
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 10.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"/></svg>
+            </button>
+
+            <!-- App Launcher mobile — grid 9-titik -->
+            <button :aria-label="t('launcher.title')" @click.stop="appStore.toggleAppLauncher()" class="hover:text-blue-600 transition-colors" :title="t('launcher.title')">
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="5" cy="5" r="1.6" /><circle cx="12" cy="5" r="1.6" /><circle cx="19" cy="5" r="1.6" />
+                <circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
+                <circle cx="5" cy="19" r="1.6" /><circle cx="12" cy="19" r="1.6" /><circle cx="19" cy="19" r="1.6" />
+              </svg>
+            </button>
+
+            <!-- Toggle dark mode mobile -->
+            <button :aria-label="t('common.toggleDark')" @click="appStore.toggleDarkMode()" class="hover:text-blue-600 transition-colors" :title="t('common.toggleDark')">
+              <!-- Ikon matahari saat dark mode aktif -->
+              <svg v-if="appStore.darkMode" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+              </svg>
+              <!-- Ikon bulan saat mode terang aktif -->
+              <svg v-else class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+              </svg>
+            </button>
+
+            <!-- Ikon lonceng notifikasi mobile — membuka AppNotificationDrawer -->
+            <button :aria-label="t('notification.title')" @click.stop="appStore.toggleNotification()" class="relative hover:text-blue-600 transition-colors">
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+              </svg>
+              <span
+                v-if="unreadCount > 0"
+                class="absolute -top-1 -right-1 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center leading-none"
+              >{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
+            </button>
+
+            <!-- Language switcher mobile (compact + navbar: popup fixed di bawah navbar) -->
+            <AppLanguageSwitcher compact navbar />
+
+            <!-- Perusahaan Saya — HANYA System Owner; user tenant memilikinya di sidebar. -->
+            <router-link
+              v-if="myCompanyItem"
+              :to="myCompanyItem.to"
+              class="hover:text-blue-600 transition-colors"
+              :title="myCompanyItem.label"
+              :aria-label="myCompanyItem.label"
+            >
+              <component :is="myCompanyItem.icon" class="w-5 h-5" />
+            </router-link>
+
+          </div>
+
+          <!-- Tombol hamburger untuk membuka sidebar -->
+          <!-- Kunci chrome hidup di `common.*`, BUKAN `nav.*`: blok `nav`
+               berisi label menu milik tiap app dan isinya memang beda per app — kunci chrome
+               yang ditaruh di sana tak akan pernah terdeteksi hilang oleh pemeriksa locale. -->
+          <button :aria-label="t('common.openMenu')" @click="appStore.openSidebar()" class="hover:opacity-70 transition-opacity">
+            <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+      <!-- ── Pulau utilitas (lg ke atas) ─────────────────────────────────── -->
+      <!-- ── Layar lebar: pulau breadcrumb (kiri) ─────────────────────────── -->
+      <!-- `min-w-0` + `flex-1`: jejak panjang menggulung di dalam pulau (gulungan mendatar
+           milik AppBreadcrumb) alih-alih mendorong pulau utilitas keluar layar. -->
+      <div
+        v-if="isLg"
+        class="pointer-events-auto flex min-w-0 flex-1 h-12 bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 items-center px-4"
+      >
+        <AppBreadcrumb :breadcrumbs="breadcrumbs" fade-overflow class="!mb-0 min-w-0" />
+      </div>
+
+      <div class="pointer-events-auto hidden lg:flex shrink-0 ml-auto h-12 bg-white dark:bg-gray-800 rounded-xl shadow-md border border-gray-200 dark:border-gray-700 items-center px-2">
+
+        <!-- Utilitas kanan (fullscreen, dark mode, notif, language switcher, my company, profil) -->
+        <!-- Semua ikon (fullscreen s.d. my company) pakai AppTooltip agar UX hover lebih jelas -->
+        <div class="flex items-center gap-1 shrink-0">
+
+          <!-- Pencarian global — juga lewat Ctrl/⌘+K -->
+          <AppTooltip placement="bottom" :text="t('search.tooltip')">
+            <button :aria-label="t('search.title')" @click="openSearch" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors" data-open-search>
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-4.35-4.35M17 10.5a6.5 6.5 0 11-13 0 6.5 6.5 0 0113 0z"/></svg>
+            </button>
+          </AppTooltip>
+
+          <!-- Tombol fullscreen browser -->
+          <AppTooltip placement="bottom" :text="t('common.fullscreen')">
+            <button :aria-label="t('common.fullscreen')" @click="toggleFullscreen" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors">
+              <!-- Ikon expand saat belum fullscreen -->
+              <svg v-if="!isFullscreen" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4"/>
+              </svg>
+              <!-- Ikon compress saat fullscreen aktif -->
+              <svg v-else class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 9V4.5M9 9H4.5M9 9L3.75 3.75M9 15v4.5M9 15H4.5M9 15l-5.25 5.25M15 9h4.5M15 9V4.5M15 9l5.25-5.25M15 15h4.5M15 15v4.5m0-4.5l5.25 5.25"/>
+              </svg>
+            </button>
+          </AppTooltip>
+
+          <!-- Toggle dark mode desktop -->
+          <AppTooltip placement="bottom" :text="t('common.toggleDark')">
+            <button :aria-label="t('common.toggleDark')" @click="appStore.toggleDarkMode()" class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors">
+              <svg v-if="appStore.darkMode" class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"/>
+              </svg>
+              <svg v-else class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z"/>
+              </svg>
+            </button>
+          </AppTooltip>
+
+          <!-- Tombol notifikasi desktop — membuka AppNotificationPopup -->
+          <AppTooltip placement="bottom" :text="t('notification.title')">
+            <button :aria-label="t('notification.title')"
+              @click.stop="appStore.toggleNotification()"
+              class="relative w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-500 dark:text-gray-400 transition-colors"
+            >
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9"/>
+              </svg>
+              <span
+                v-if="unreadCount > 0"
+                class="absolute top-0.5 right-0.5 min-w-[16px] h-4 px-1 rounded-full bg-red-500 text-white text-[9px] font-bold flex items-center justify-center leading-none"
+              >{{ unreadCount > 9 ? '9+' : unreadCount }}</span>
+            </button>
+          </AppTooltip>
+
+          <!-- Language switcher desktop (navbar: popup fixed di bawah navbar) -->
+          <AppTooltip placement="bottom" :text="t('lang.switchTitle')">
+            <AppLanguageSwitcher navbar />
+          </AppTooltip>
+
+          <!-- Perusahaan Saya — HANYA System Owner (di antara language switcher & avatar); user tenant
+               memilikinya di sidebar. -->
+          <AppTooltip v-if="myCompanyItem" placement="bottom" :text="myCompanyItem.label">
+            <router-link
+              :to="myCompanyItem.to"
+              :aria-label="myCompanyItem.label"
+              :aria-current="myCompanyItem.active ? 'page' : undefined"
+              class="w-8 h-8 flex items-center justify-center rounded-full transition-colors"
+              :class="myCompanyItem.active
+                ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
+                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
+            >
+              <component :is="myCompanyItem.icon" class="w-[18px] h-[18px]" />
+            </router-link>
+          </AppTooltip>
+
+          <!-- Gear Setelan Tenant: hanya bila app memasok tenantSettingsEntryRoute. -->
+          <AppTooltip v-if="settingsEntryRoute" placement="bottom" :text="t('tab.company.settings')">
+            <button
+              @click="navigateToSelfSettings"
+              :aria-label="t('tab.company.settings')"
+              class="w-8 h-8 flex items-center justify-center rounded-full text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors"
+            >
+              <svg class="w-5 h-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"/>
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
+              </svg>
+            </button>
+          </AppTooltip>
+
+          <!-- App Launcher — grid 9-titik ala Google, popup lompat cepat lintas app -->
+          <AppTooltip placement="bottom" :text="t('launcher.title')">
+            <button :aria-label="t('launcher.title')"
+              @click.stop="appStore.toggleAppLauncher()"
+              class="w-8 h-8 flex items-center justify-center rounded-full transition-colors"
+              :class="appStore.showAppLauncher
+                ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
+                : 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700'"
+            >
+              <svg class="w-5 h-5" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+                <circle cx="5" cy="5" r="1.6" /><circle cx="12" cy="5" r="1.6" /><circle cx="19" cy="5" r="1.6" />
+                <circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" />
+                <circle cx="5" cy="19" r="1.6" /><circle cx="12" cy="19" r="1.6" /><circle cx="19" cy="19" r="1.6" />
+              </svg>
+            </button>
+          </AppTooltip>
+
+          <!-- Tombol avatar user desktop — membuka AppUserMenu. Nama hanya di ≥xl: di 1024–1279 px
+               lebarnya dipakai pulau breadcrumb. Nama aksesibel memuat nama yang terlihat, supaya
+               perintah suara "klik <nama>" tetap mengenai tombol ini. -->
+          <button
+            :aria-label="userDisplayName ? `${t('user.profile')}: ${userDisplayName}` : t('user.profile')"
+            @click.stop="appStore.toggleUserMenu()"
+            class="flex items-center gap-2 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-700 py-1 pl-1 pr-2 transition-colors ml-1"
+          >
+            <div class="w-7 h-7 rounded-full bg-blue-600 text-white flex items-center justify-center text-xs font-bold shrink-0 overflow-hidden">
+              <img v-if="userAvatar && !avatarError" :src="userAvatar" @error="avatarError = true" class="w-full h-full object-cover" alt="">
+              <span v-else>{{ userInitials }}</span>
+            </div>
+            <span v-if="userDisplayName" class="hidden xl:inline max-w-40 truncate text-sm font-medium text-gray-700 dark:text-gray-200">{{ userDisplayName }}</span>
+            <svg class="w-3 h-3 text-gray-400 transition-transform" :class="{ 'rotate-180': appStore.showUserMenu }" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/>
+            </svg>
+          </button>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Nilai `--logo-pill-solid` disuntikkan lewat `:style` di elemen .logo-pill (lihat catatan di template);
+   fallback #363636 supaya pil tak pernah tembus pandang seandainya variabelnya tak terpasang. */
+.logo-pill {
+  background-color: var(--logo-pill-solid, #363636);
+}
+</style>

package/src/components/layout/AppNotificationContent.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { onMounted, watch } from 'vue'
+import { useRouter } from 'vue-router'
+import { Bell, Loader2, MessageSquareText, AlertTriangle, LifeBuoy, ListChecks } from '@lucide/vue'
+import { useI18n } from 'vue-i18n'
+import { useNotifications } from '@initsolusidigital/worksuite-core/composables/useNotifications.js'
+import { useChat } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import { useCrossAppLink } from '@initsolusidigital/worksuite-core/composables/useCrossAppLink.js'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { notificationTitle, notificationBody } from '@initsolusidigital/worksuite-core/utils/notificationText.js'
+
+const { t, locale } = useI18n()
+const router = useRouter()
+const appStore = useAppStore()
+const { openConversationFromNotification } = useChat()
+// Katalog sub-app (singleton) — dipakai penahan tautan lintas-app di onItemClick().
+const { fetchApps } = useCrossAppLink()
+// Pakai singleton state — tab dan data dibagikan dengan popup & drawer
+const {
+  activeTab, tabs, filteredNotifications, loading, hasMore,
+  fetchNotifications, fetchMore, markAsRead,
+} = useNotifications()
+
+// ── Judul/isi notifikasi: i18n by `type` + variabel dari `data` ───────────────
+// Resolvernya hidup di `utils/notificationText.js` — DIPAKAI BERSAMA dengan toast real-time
+// (`useNotifications.js`). Selama ia privat di berkas ini, toast tak punya akses ke sana dan
+// terpaksa memakai `title`/`body` mentah, sehingga permukaan yang paling sering dilihat justru
+// yang selalu berbahasa Inggris. Alasan & tiga pagarnya ditulis lengkap di util itu.
+const notifTitle = notificationTitle
+const notifBody  = notificationBody
+
+// Fetch tiap kali panel dibuka — parent (Popup/Drawer) mount ulang komponen ini
+// via v-if setiap kali appStore.showNotification jadi true, jadi data selalu segar.
+// Katalog app ikut dimuat ULANG di sini: penahan tautan lintas-app memakai status app saat item
+// diklik, dan status itu berubah selagi halaman terbuka.
+onMounted(() => {
+  fetchNotifications()
+  fetchApps(true)
+})
+watch(activeTab, fetchNotifications)
+
+// Ikon per tipe notifikasi (fallback Bell). backup_alert/mass_deletion_alert = peringatan,
+// chat_message/chat_access_request = pesan. backup_alert TIDAK ada deep-link (backend tidak
+// kirim `data` sama sekali utk tipe ini, murni alarm infra System Owner, tidak ada halaman
+// tujuan) — tetap klik-utk-mark-read saja, sengaja generic.
+function iconFor(type) {
+  if (type === 'chat_message' || type === 'chat_access_request') return MessageSquareText
+  if (type === 'backup_alert' || type === 'mass_deletion_alert' || type === 'app_status_alert') return AlertTriangle
+  // Permintaan akses dukungan MENUNTUT keputusan user; ikon lonceng generik membuatnya terbaca
+  // sebagai kabar biasa yang boleh diabaikan.
+  if (type === 'impersonation_request' || type === 'impersonation_resolved') return LifeBuoy
+  // Penugasan & komentar task — alasan yang sama dengan tiga baris di atas:
+  // keduanya menuntut tindakan orangnya, dan lonceng generik membuatnya terbaca sebagai kabar
+  // lewat. Notifikasi ini mendarat di app MANA PUN (tabel platform-wide), jadi ikonnya sering
+  // jadi satu-satunya petunjuk cepat bahwa ini soal pekerjaan di Project.
+  if (type === 'project_task_assigned' || type === 'project_task_comment') return ListChecks
+  return Bell
+}
+function iconClass(type) {
+  if (type === 'backup_alert' || type === 'mass_deletion_alert' || type === 'app_status_alert') return 'text-amber-500'
+  if (type === 'chat_message' || type === 'chat_access_request') return 'text-blue-500'
+  if (type === 'impersonation_request' || type === 'impersonation_resolved') return 'text-violet-500'
+  if (type === 'project_task_assigned' || type === 'project_task_comment') return 'text-emerald-500'
+  return 'text-gray-400 dark:text-gray-500'
+}
+
+// Identitas app ini sendiri — VITE_APP_KEY (lihat .env). Dipakai bareng target_app di bawah.
+// Navigasi lintas-app hidup di `composables/useCrossAppLink.js` — kartu entitas chat
+// butuh perilaku PERSIS sama, dan dua resolver berarti dua tempat yang harus ingat pagar N-A,
+// peta origin, & aturan "app sendiri tak pernah digerbang". Yang kedua pasti tertinggal.
+const { openTarget } = useCrossAppLink()
+
+function onItemClick(notif) {
+  markAsRead(notif)
+  if ((notif.type === 'chat_message' || notif.type === 'chat_access_request') && notif.data?.conversation_id) {
+    appStore.closeNotification()
+    openConversationFromNotification(notif.data.conversation_id)
+    return
+  }
+  // `impersonation_request` — jalur LOKAL, bukan `target_app`/`target_path`, dan itu
+  // BUKAN pelanggaran kanon "backend yang menentukan tujuan" melainkan kasus yang di luar
+  // jangkauannya: halaman tujuannya `/profile/support-access` ada di SETIAP app (paket shell), jadi
+  // tak ada satu `target_app` yang benar — user harus mendarat di app yang sedang ia buka.
+  // Tipe chat di atas memakai jalur yang sama. ⚠️ Jangan menambah tipe lain ke jalur ini
+  // kecuali halamannya memang milik paket dan ada di semua app; selain itu, backend yang menentukan.
+  if (notif.type === 'impersonation_request') {
+    appStore.closeNotification()
+    router.push({ name: 'profile.supportAccess' })
+    return
+  }
+  openTarget(notif.data, { beforeNavigate: () => appStore.closeNotification() })
+}
+
+function formatTime(iso) {
+  return new Date(iso).toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+}
+</script>
+
+<template>
+  <!-- Wrapper flex column — mengisi sisa ruang di dalam popup maupun drawer -->
+  <div class="flex flex-col flex-1 overflow-hidden">
+
+    <!-- Tab bar filter notifikasi -->
+    <div class="flex border-b border-gray-100 dark:border-gray-800 shrink-0">
+      <button
+        v-for="tab in tabs"
+        :key="tab.key"
+        @click="activeTab = tab.key"
+        class="flex-1 py-2.5 text-xs font-medium transition-colors"
+        :class="activeTab === tab.key
+          ? 'text-blue-600 border-b-2 border-blue-600 dark:text-blue-400 dark:border-blue-400'
+          : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-300'"
+      >
+        {{ t(tab.labelKey) }}
+      </button>
+    </div>
+
+    <!-- Daftar notifikasi (scrollable) -->
+    <div class="flex-1 overflow-y-auto scrollbar-rounded">
+
+      <!-- Loading awal -->
+      <div v-if="loading && filteredNotifications.length === 0" class="flex items-center justify-center h-full py-12">
+        <Loader2 class="w-5 h-5 text-gray-300 dark:text-gray-600 animate-spin" />
+      </div>
+
+      <!-- Empty state -->
+      <div v-else-if="filteredNotifications.length === 0" class="flex flex-col items-center justify-center h-full py-12">
+        <Bell class="w-12 h-12 text-gray-200 dark:text-gray-700 mb-3" :stroke-width="1.5" />
+        <p class="text-sm font-medium text-gray-400 dark:text-gray-500">{{ t('notification.empty') }}</p>
+        <p class="text-xs text-gray-300 dark:text-gray-600 mt-1">{{ t('notification.emptyDesc') }}</p>
+      </div>
+
+      <!-- List item notifikasi -->
+      <template v-else>
+        <button
+          v-for="notif in filteredNotifications"
+          :key="notif.id"
+          @click="onItemClick(notif)"
+          class="w-full text-left px-4 py-3 border-b border-gray-50 dark:border-gray-800/60 transition-colors relative flex gap-2.5"
+          :class="notif.read_at ? 'hover:bg-gray-50 dark:hover:bg-gray-800/50' : 'bg-blue-50/60 dark:bg-blue-900/10 hover:bg-blue-50 dark:hover:bg-blue-900/20'"
+        >
+          <!-- Titik penanda belum dibaca -->
+          <span v-if="!notif.read_at" class="absolute left-1.5 top-4 w-1.5 h-1.5 rounded-full bg-blue-600 dark:bg-blue-400" />
+          <!-- Ikon per tipe notifikasi -->
+          <component :is="iconFor(notif.type)" class="w-4 h-4 mt-0.5 shrink-0" :class="iconClass(notif.type)" />
+          <div class="flex-1 min-w-0">
+            <p
+              class="text-sm"
+              :class="notif.read_at ? 'text-gray-600 dark:text-gray-300 font-normal' : 'text-gray-800 dark:text-white font-semibold'"
+            >{{ notifTitle(notif) }}</p>
+            <p v-if="notifBody(notif)" class="text-xs text-gray-400 dark:text-gray-500 mt-0.5 line-clamp-2">{{ notifBody(notif) }}</p>
+            <p class="text-[11px] text-gray-300 dark:text-gray-600 mt-1">{{ formatTime(notif.created_at) }}</p>
+          </div>
+        </button>
+
+        <!-- Muat lebih banyak -->
+        <div v-if="hasMore" class="p-3 text-center">
+          <button
+            @click="fetchMore"
+            :disabled="loading"
+            class="text-xs text-blue-600 dark:text-blue-400 hover:underline disabled:opacity-50 transition-colors"
+          >
+            {{ loading ? t('common.loading') : t('notification.loadMore') }}
+          </button>
+        </div>
+      </template>
+
+    </div>
+  </div>
+</template>