@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/composables/useNavigation.js

@@ -0,0 +1,177 @@
+import { computed, unref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRoute, useRouter } from 'vue-router'
+import { getNavigation, getNavigationBadges } from '../shellSetup.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useModulePermission } from '@initsolusidigital/worksuite-core/composables/useModulePermission.js'
+
+/**
+ * Boleh tampil? — `moduleSlug` (satu) atau `moduleSlugs` (beberapa, cukup SALAH SATU diizinkan).
+ *
+ * **Tanpa slug = selalu tampil.** Itu yang membuat filter ini aditif murni: `data/navigation.js`
+ * yang belum menandai slug apa pun tetap menampilkan semua itemnya, jadi app bisa memakai filter
+ * ini tanpa menyentuh data nav mereka lebih dulu.
+ *
+ * `moduleFlag` menyamakan bahasa dengan router guard yang menerimanya lewat
+ * `meta.moduleFlag`. Tanpa itu, halaman yang gerbangnya BUKAN `can_read` — mis. Langganan Saya
+ * (`companies,can_configure`) — tetap tampil di menu untuk user yang cuma bisa membaca, lalu
+ * dijawab 403 oleh API. Menu dan guard yang memakai ukuran berbeda untuk halaman yang sama
+ * adalah cara paling mudah melanggar aturan "yang tidak diizinkan DISEMBUNYIKAN".
+ * Absen = `can_read`, jadi tetap aditif murni.
+ *
+ * Tiap entri `moduleSlugs` boleh membawa flag-nya SENDIRI (`{ slug, flag }`) di samping bentuk
+ * string biasa — perlu untuk menu umbrella yang menampung tab ber-flag campur (daftar `can_read`
+ * + template/pengaturan `can_configure` atas slug yang berbeda). `moduleFlag` tetap jadi default
+ * bagi entri yang tak menyebut flag. Semantik & alasan lengkapnya di `canAny()`.
+ */
+function isAllowed(canAny, item) {
+  const entries = item.moduleSlugs ?? (item.moduleSlug ? [item.moduleSlug] : [])
+  return canAny(entries, item.moduleFlag ?? 'can_read')
+}
+
+// Bentuk lama (array item datar) dibungkus jadi satu grup tanpa label, jadi `navigation.js` yang
+// belum dikelompokkan tetap benar sesudah shell ini ditarik.
+function normalizeGroups(data) {
+  return Array.isArray(data[0]?.items) ? data : [{ items: data }]
+}
+
+// `<router-link>` meresolusi tujuan saat RENDER: rute yang tak terdaftar atau kekurangan param
+// melempar dan satu item rusak menggugurkan SELURUH sidebar. Item seperti itu tak punya tujuan
+// yang bisa dijanjikan menu, jadi dibuang di sini.
+function isResolvable(router, to) {
+  try {
+    router.resolve(to)
+    return true
+  } catch {
+    return false
+  }
+}
+
+function selfCompanyRoute(companyId) {
+  return { name: 'companies.profile', params: { companyId } }
+}
+
+function isOwnCompanyRoute(route, companyId) {
+  return !!companyId && !!route.name?.toString().startsWith('companies.')
+    && String(route.params.companyId) === String(companyId)
+}
+
+// Skor kecocokan rute aktif — dipakai memilih SATU pemenang di seluruh menu. Pencocokan awalan saja
+// menyalakan dua item sekaligus begitu saudaranya berbagi awalan nama: `approvals` ikut menyala di
+// halaman `approvals.flows`. Nama persis selalu menang, sisanya awalan terpanjang.
+function matchScore(route, item, companyId) {
+  if (item.selfCompany) return isOwnCompanyRoute(route, companyId) ? Number.MAX_SAFE_INTEGER - 1 : -1
+  if (!item.name) return -1
+  const name = route.name?.toString() ?? ''
+  if (name === item.name) return Number.MAX_SAFE_INTEGER
+  const prefix = item.activePrefix ?? item.name
+  return name.startsWith(`${prefix}.`) ? prefix.length : -1
+}
+
+/**
+ * Menu sidebar: `{ groups, bottomGroups }`. Satu-satunya pemanggil seharusnya `AppSidebar`, sebab
+ * pabrik badge dijalankan per panggilan dan boleh memicu pengambilan data.
+ */
+export function useNavigation() {
+  const { t } = useI18n()
+  const route = useRoute()
+  const router = useRouter()
+  const authStore = useAuthStore()
+  const { canAny } = useModulePermission()
+
+  const badges = Object.fromEntries(Object.entries(getNavigationBadges()).map(([key, factory]) => [key, factory()]))
+
+  // Peran dibaca di sini, bukan di komponen, supaya grup yang seluruh itemnya khusus System Owner
+  // ikut hilang bagi user tenant tanpa kode khusus di renderer.
+  //
+  // ⚠️ Filter izin nyaris mustahil ketahuan bila keliru: gejalanya hanya muncul pada role dengan izin
+  // TERBATAS, sedangkan pengembangan hampir selalu memakai super admin — dan super admin di-bypass
+  // `can()`. Jadi menunya terlihat benar sepanjang pengembangan.
+  function isVisible(item) {
+    if (item.systemOwnerOnly && !authStore.isSystemOwner) return false
+    if (item.userOnly && authStore.isSystemOwner) return false
+    // System Owner membuka perusahaannya lewat ikon di navbar (`useSelfCompanyItem`).
+    if (item.selfCompany && authStore.isSystemOwner) return false
+    return isAllowed(canAny, item)
+  }
+
+  function toOf(item) {
+    if (item.selfCompany) return selfCompanyRoute(authStore.user?.company_id)
+    return item.name ? { name: item.name } : null
+  }
+
+  function resolveItem(item) {
+    if (!isVisible(item)) return null
+    if (item.children) {
+      // Induk yang SEMUA anaknya tersaring habis ikut disembunyikan — akordeon kosong lebih
+      // membingungkan daripada tak ada menu sama sekali.
+      const children = item.children.map(resolveItem).filter(Boolean)
+      return children.length ? { ...item, label: t(item.labelKey), children } : null
+    }
+    const to = toOf(item)
+    if (!to || !isResolvable(router, to)) return null
+    return {
+      ...item,
+      label: t(item.labelKey),
+      to,
+      badge: item.badgeKey ? (unref(badges[item.badgeKey]) ?? 0) : 0,
+    }
+  }
+
+  const resolved = computed(() => {
+    const groups = normalizeGroups(getNavigation())
+      .map((group, index) => ({
+        key: group.labelKey ?? `group-${index}`,
+        label: group.labelKey ? t(group.labelKey) : '',
+        position: group.position === 'bottom' ? 'bottom' : 'top',
+        items: group.items.map(resolveItem).filter(Boolean),
+      }))
+      .filter(group => group.items.length)
+
+    const leaves = groups.flatMap(group => group.items.flatMap(item => item.children ?? [item]))
+    const companyId = authStore.user?.company_id
+    let winner = null
+    let best = -1
+    for (const leaf of leaves) {
+      const score = matchScore(route, leaf, companyId)
+      if (score > best) { best = score; winner = leaf }
+    }
+    const markActive = (item) => {
+      if (!item.children) return { ...item, active: item === winner }
+      const children = item.children.map(markActive)
+      return { ...item, children, active: false, childActive: children.some(child => child.active) }
+    }
+    return groups.map(group => ({ ...group, items: group.items.map(markActive) }))
+  })
+
+  return {
+    groups: computed(() => resolved.value.filter(group => group.position === 'top')),
+    bottomGroups: computed(() => resolved.value.filter(group => group.position === 'bottom')),
+  }
+}
+
+/**
+ * Ikon Perusahaan Saya di navbar — hanya System Owner; user tenant memilikinya sebagai item sidebar.
+ * Terpisah dari `useNavigation` supaya navbar tak ikut menjalankan pabrik badge.
+ *
+ * ⚠️ `company_id` kosong (sedang logout) → `null`: `<router-link>` melempar "Missing required param"
+ * saat render, tepat ketika `user` dikosongkan.
+ */
+export function useSelfCompanyItem() {
+  const { t } = useI18n()
+  const route = useRoute()
+  const authStore = useAuthStore()
+
+  return computed(() => {
+    const companyId = authStore.user?.company_id
+    if (!authStore.isSystemOwner || !companyId) return null
+    const item = normalizeGroups(getNavigation()).flatMap(group => group.items).find(entry => entry.selfCompany)
+    if (!item) return null
+    return {
+      label: t(item.labelKey),
+      icon: item.icon,
+      to: selfCompanyRoute(companyId),
+      active: isOwnCompanyRoute(route, companyId),
+    }
+  })
+}

package/src/layouts/AppLayout.vue

@@ -0,0 +1,207 @@
+<script setup>
+import { onMounted, onBeforeUnmount, ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { getBreadcrumbs } from '../shellSetup.js'
+import { useLgViewport } from '../composables/useLgViewport.js'
+import { useModulePermission } from '@initsolusidigital/worksuite-core/composables/useModulePermission.js'
+import { useChat } from '@initsolusidigital/worksuite-core/composables/useChat.js'
+import { useNotifications } from '@initsolusidigital/worksuite-core/composables/useNotifications.js'
+import { updatePageBadge } from '@initsolusidigital/worksuite-core/utils/pageBadge.js'
+import AppNavbar from '../components/layout/AppNavbar.vue'
+import AppSidebar from '../components/layout/AppSidebar.vue'
+import AppBreadcrumb from '@initsolusidigital/worksuite-ui/AppBreadcrumb.vue'
+import AppNotificationPopup from '../components/layout/AppNotificationPopup.vue'
+import AppLauncherPopup from '../components/layout/AppLauncherPopup.vue'
+import AppNotificationDrawer from '../components/layout/AppNotificationDrawer.vue'
+import AppUserMenu from '../components/layout/AppUserMenu.vue'
+import AppLanguagePopup from '../components/layout/AppLanguagePopup.vue'
+import AppChatWidget from '../components/chat/AppChatWidget.vue'
+import AppAssistantWidget from '../components/ai/AppAssistantWidget.vue'
+import AppGlobalSearch from '../components/layout/AppGlobalSearch.vue'
+import AppToastContainer from '@initsolusidigital/worksuite-core/components/ui/AppToastContainer.vue'
+import AppPlatformBanners from '../components/layout/AppPlatformBanners.vue'
+
+// Lebar konten per-halaman. Chrome (navbar/footer) SELALU full-width; hanya area
+// konten yang di-cap. `default` = 1280 (form/detail — baca enak); `wide` = 1536 (tabel
+// padat); `fluid` = full-width (papan Kanban/dashboard yang butuh seluruh layar).
+// Padding horizontal DIPUSATKAN di sini (dulu tiap shell pakai idiom `px-* xl:px-0` yang
+// hanya cocok utk cap 1280) — halaman/breadcrumb tak lagi mengatur padding sisi sendiri.
+const props = defineProps({
+  width: {
+    type: String,
+    default: 'default',
+    validator: v => ['default', 'wide', 'fluid'].includes(v),
+  },
+})
+
+const contentMaxW = computed(() => ({
+  default: 'max-w-7xl',
+  wide:    'max-w-screen-2xl',
+  fluid:   'max-w-none',
+}[props.width] ?? 'max-w-7xl'))
+
+const { t } = useI18n()
+const appStore = useAppStore()
+// Peta breadcrumb milik app, dipasok lewat configureShell().
+const useBreadcrumbs = getBreadcrumbs()
+const { breadcrumbs } = useBreadcrumbs()
+// Di ≥ lg breadcrumb dirender AppNavbar sebagai pulau header; baris di atas konten tinggal
+// dipakai bila halaman mengisi `header-actions`.
+const isLg = useLgViewport()
+const { can } = useModulePermission()
+const { unreadTotal } = useChat()
+const { unreadCount } = useNotifications()
+
+// Versi diinjeksi dari package.json via Vite define (vite.config.js)
+const appVersion = __APP_VERSION__
+
+// Terapkan dark mode dari preferensi tersimpan saat layout pertama kali dimuat
+onMounted(() => {
+  appStore.initDarkMode()
+})
+
+// Tumpukan tombol melayang (Asisten AI di atas Chat) naik setinggi bagian footer yang sedang
+// terlihat, lewat variabel CSS `--fab-lift` yang dibaca kedua widget. Posisi naik permanen akan
+// menutupi konten di atas footer di setiap halaman; naik hanya saat footer masuk layar menjaga
+// keduanya — footer tak pernah tertutup, konten tak dikorbankan selama digulung.
+// ResizeObserver ikut dipasang karena tinggi halaman bisa berubah tanpa gulungan (pindah rute,
+// data termuat) dan menggeser footer masuk/keluar layar.
+// Bantalan bawah konten setinggi tumpukan tombol: tanpa itu elemen terakhir halaman (lazimnya
+// tombol Simpan/Lanjut di tepi kanan) tertimpa tombol melayang saat digulung sampai habis.
+// Dua tombol = 24 + 56 + 12 + 48 = 140px dari footer; satu tombol = 80px.
+const showChat = computed(() => can('chats'))
+const showAssistant = computed(() => can('ai_assistant', 'can_create'))
+const mainBottomPad = computed(() => (showChat.value && showAssistant.value ? 'pb-40' : showChat.value || showAssistant.value ? 'pb-24' : 'pb-10'))
+// Ruang yang dicadangkan elemen menempel di dasar konten (`AppFormFooter`) supaya tombolnya tak
+// berada di bawah tombol melayang: kolom tombol memakan 80 px dari tepi layar, padding `main` 16–32 px.
+const fabColumnWidth = computed(() => (showChat.value || showAssistant.value ? '4rem' : '0px'))
+const footerEl = ref(null)
+let fabRaf = 0
+let fabObserver = null
+function updateFabLift() {
+  fabRaf = 0
+  const top = footerEl.value?.getBoundingClientRect().top
+  const lift = top == null ? 0 : Math.max(0, Math.round(window.innerHeight - top))
+  document.documentElement.style.setProperty('--fab-lift', `${lift}px`)
+}
+function scheduleFabLift() { if (!fabRaf) fabRaf = requestAnimationFrame(updateFabLift) }
+onMounted(() => {
+  window.addEventListener('scroll', scheduleFabLift, { passive: true })
+  window.addEventListener('resize', scheduleFabLift)
+  fabObserver = new ResizeObserver(scheduleFabLift)
+  fabObserver.observe(document.body)
+  updateFabLift()
+})
+onBeforeUnmount(() => {
+  window.removeEventListener('scroll', scheduleFabLift)
+  window.removeEventListener('resize', scheduleFabLift)
+  fabObserver?.disconnect()
+  if (fabRaf) cancelAnimationFrame(fabRaf)
+  document.documentElement.style.removeProperty('--fab-lift')
+})
+
+// Badge tab title/favicon — total gabungan chat (widget) + notifikasi umum, lihat
+// src/utils/pageBadge.js utk kenapa dijumlah apa adanya walau sebagian tumpang tindih sumber.
+watch([unreadTotal, unreadCount], ([chat, notif]) => {
+  updatePageBadge(chat + notif)
+}, { immediate: true })
+</script>
+
+<template>
+  <!-- Wrapper seluruh layout — background menyesuaikan dark mode -->
+  <div class="min-h-screen bg-gray-100 dark:bg-gray-900 flex flex-col">
+
+    <!-- Tautan lompat: elemen fokus pertama, supaya pengguna papan tik tak harus melewati seluruh menu tiap halaman -->
+    <a
+      href="#konten"
+      class="sr-only focus:not-sr-only focus:fixed focus:top-2 focus:left-2 focus:z-[80] focus:px-4 focus:py-2 focus:rounded-lg focus:bg-white focus:text-blue-600 focus:shadow-lg"
+    >{{ t('common.skipToContent') }}</a>
+
+    <!-- Navigasi utama (sidebar ≥ lg, laci di bawahnya) + header utilitas melayang -->
+    <AppSidebar />
+    <AppNavbar />
+
+    <!-- Notifikasi: popup untuk desktop, drawer untuk mobile -->
+    <!-- Breakpoint CSS menentukan mana yang aktif, keduanya pakai state yang sama -->
+    <div class="hidden lg:block"><AppNotificationPopup /></div>
+    <div class="lg:hidden"><AppNotificationDrawer /></div>
+
+    <!-- User menu: popup desktop (layar sempit: kaki laci AppSidebar) -->
+    <div class="hidden lg:block"><AppUserMenu /></div>
+
+    <!-- Language popup: tampil di semua breakpoint (tidak butuh drawer terpisah) -->
+    <AppLanguagePopup />
+
+    <!-- App Launcher popup — grid app ala Google, dari navbar -->
+    <AppLauncherPopup />
+
+    <!-- Widget chat melayang — hanya bila role punya modul chats can_read -->
+    <AppChatWidget v-if="showChat" />
+    <!-- Asisten AI: hanya bagi pemegang izin MENJALANKAN asisten; tool di dalamnya disaring izin modul masing-masing. -->
+    <AppAssistantWidget v-if="showAssistant" />
+    <AppGlobalSearch />
+
+    <!-- Toast notifikasi realtime — selalu mount, tidak digerbang modul chats
+    (notifikasi berlaku semua user, lihat useNotifications.js initNotificationRealtime) -->
+    <AppToastContainer />
+
+    <!-- Kolom konten: bergeser selebar sidebar. Kelasnya sinkron dari store sejak render pertama,
+         jadi transisi hanya berjalan saat sidebar diciutkan, bukan tiap halaman dimuat. -->
+    <div
+      class="flex-1 flex flex-col min-w-0 transition-[padding] duration-200"
+      :class="appStore.sidebarCollapsed ? 'lg:pl-20' : 'lg:pl-64'"
+    >
+    <!-- Area konten utama halaman -->
+    <!-- Padding atas = jarak dari header floating: 16 + tinggi header + 32 px (pt-28 untuk bilah
+         64 px di layar sempit, lg:pt-24 untuk pulau 48 px). Nilainya WAJIB sama dengan tinggi
+         masker blur di AppNavbar. Padding horizontal
+         dipusatkan di sini (px-4→lg:px-8) + cap lebar per varian; halaman tidak lagi
+         mengatur padding sisi sendiri. -->
+    <main
+      id="konten"
+      tabindex="-1"
+      class="flex-1 w-full mx-auto pt-28 lg:pt-24 px-4 sm:px-6 lg:px-8 outline-none"
+      :class="[contentMaxW, mainBottomPad]"
+      :style="{ '--fab-col': fabColumnWidth }"
+    >
+      <!-- Banner keadaan platform — sesi impersonation · langganan past_due/suspended ·
+           pengumuman Init. Ditaruh DI ATAS breadcrumb, bukan di bawahnya: ketiganya berlaku ke
+           seluruh aplikasi, jadi menaruhnya sesudah judul halaman membuatnya terbaca sebagai
+           komentar atas halaman itu saja. Tak ada spacing tambahan saat kosong (komponen
+           merender nol elemen). -->
+      <AppPlatformBanners />
+
+      <!-- Baris breadcrumb + aksi header. Slot `header-actions` = tombol aksi yang
+           SEBARIS dengan breadcrumb (mis. tombol "Atur" dashboard). Di ≥ lg breadcrumb ada di
+           header (AppNavbar), jadi baris ini hanya muncul bila halaman punya aksi, rata kanan. -->
+      <div v-if="!isLg || $slots['header-actions']" class="flex items-center justify-between gap-3 mb-4">
+        <AppBreadcrumb v-if="!isLg" :breadcrumbs="breadcrumbs" class="!mb-0 min-w-0" />
+        <div class="shrink-0 ml-auto"><slot name="header-actions" /></div>
+      </div>
+      <!-- Wrapper slot: hapus padding-top dari div pertama setiap halaman -->
+      <!-- agar halaman tidak perlu mengatur jarak atas secara manual -->
+      <div class="[&>div:first-child]:pt-0">
+        <slot />
+      </div>
+    </main>
+
+    <!-- Footer aplikasi — chrome full-width (sejajar navbar), padding konsisten. Tak perlu jalur
+         kosong untuk tombol melayang: tumpukannya naik di atas footer begitu footer terlihat
+         (`--fab-lift`, lihat script). -->
+    <footer ref="footerEl" class="w-full border-t border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
+      <div class="w-full px-4 sm:px-6 lg:px-8 py-4 flex flex-col sm:flex-row items-center justify-between gap-2">
+        <!-- Hak cipta -->
+        <p class="text-xs text-gray-400 dark:text-gray-600">
+          {{ t('common.copyright', { year: new Date().getFullYear() }) }}
+        </p>
+        <!-- Versi aplikasi — diinjeksi dari package.json via Vite define -->
+        <p class="text-xs text-gray-400 dark:text-gray-600">
+          v{{ appVersion }}
+        </p>
+      </div>
+    </footer>
+    </div>
+
+  </div>
+</template>