@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/layout/AppNotificationDrawer.vue

@@ -0,0 +1,98 @@
+<script setup>
+import { nextTick, ref, watch } from 'vue'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useI18n } from 'vue-i18n'
+import { useNotifications } from '@initsolusidigital/worksuite-core/composables/useNotifications.js'
+import { X } from '@lucide/vue'
+import AppNotificationContent from './AppNotificationContent.vue'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+const { markAllAsRead } = useNotifications()
+
+// Fokus pindah ke laci saat terbuka dan kembali ke lonceng saat tertutup: tanpa ini pengguna papan tik
+// & pembaca layar tertinggal di belakang backdrop. Escape ditangani AppNotificationPopup, yang tetap
+// ter-mount (tersembunyi lewat CSS) di lebar ini dan memakai state yang sama.
+const closeButton = ref(null)
+let openerEl = null
+watch(() => appStore.showNotification, async (open) => {
+  if (open) {
+    openerEl = document.activeElement
+    await nextTick()
+    closeButton.value?.focus()
+  } else {
+    if (openerEl?.isConnected) openerEl.focus()
+    openerEl = null
+  }
+})
+</script>
+
+<template>
+  <!-- Backdrop gelap — klik untuk tutup drawer -->
+  <Transition name="fade">
+    <div
+      v-if="appStore.showNotification"
+      class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[70]"
+      @click="appStore.closeNotification()"
+    />
+  </Transition>
+
+  <!-- Panel drawer notifikasi — muncul dari kanan -->
+  <Transition name="slide-right">
+    <aside
+      v-if="appStore.showNotification"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="t('notification.title')"
+      class="fixed top-0 right-0 h-full w-[min(24rem,88vw)] pt-[env(safe-area-inset-top)] bg-white dark:bg-gray-900 z-[80] flex flex-col shadow-2xl"
+    >
+      <!-- Header: judul + tandai dibaca + tombol tutup -->
+      <div class="px-4 py-2 border-b border-gray-100 dark:border-gray-800 flex items-center justify-between shrink-0">
+        <h2 class="text-sm font-semibold text-gray-800 dark:text-white">{{ t('notification.title') }}</h2>
+        <div class="flex items-center gap-3">
+          <button
+            @click="markAllAsRead"
+            class="text-xs text-blue-600 dark:text-blue-400 hover:underline transition-colors"
+          >
+            {{ t('notification.markAllRead') }}
+          </button>
+          <button
+            ref="closeButton"
+            type="button"
+            @click="appStore.closeNotification()"
+            class="w-10 h-10 -mr-2 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"
+            :aria-label="t('notification.close')"
+            :title="t('notification.close')"
+          >
+            <X class="w-5 h-5" aria-hidden="true" />
+          </button>
+        </div>
+      </div>
+
+      <!-- Konten bersama: tab bar + daftar notifikasi -->
+      <AppNotificationContent />
+    </aside>
+  </Transition>
+</template>
+
+<style scoped>
+/* Transisi fade untuk backdrop */
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+/* Transisi slide dari kanan untuk panel drawer */
+.slide-right-enter-active,
+.slide-right-leave-active {
+  transition: transform 0.3s ease-in-out;
+}
+.slide-right-enter-from,
+.slide-right-leave-to {
+  transform: translateX(100%);
+}
+</style>

package/src/components/layout/AppNotificationPopup.vue

@@ -0,0 +1,67 @@
+<script setup>
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useDismissOnEscape } from '@initsolusidigital/worksuite-core/composables/useDismissOnEscape.js'
+import { useI18n } from 'vue-i18n'
+import { useNotifications } from '@initsolusidigital/worksuite-core/composables/useNotifications.js'
+import AppNotificationContent from './AppNotificationContent.vue'
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+// Escape menutup popup ini — mengalah bila ada dialog di atasnya (lihat composable).
+useDismissOnEscape(() => appStore.showNotification, () => appStore.closeNotification())
+const { markAllAsRead } = useNotifications()
+</script>
+
+<template>
+  <!-- Backdrop transparan — menutup popup saat klik di luar panel -->
+  <div
+    v-if="appStore.showNotification"
+    class="fixed inset-0 z-[55]"
+    @click="appStore.closeNotification()"
+  />
+
+  <!-- Wrapper posisi — mirror navbar (fixed + px-4 + max-w-7xl) agar popup
+       sejajar dengan batas kanan navbar di semua lebar layar -->
+  <!-- 8 px di bawah header: 88 = 16 + 64 (bilah layar sempit), 72 = 16 + 48 (pulau ≥lg) -->
+  <div class="fixed top-[88px] lg:top-[72px] left-0 right-0 z-[60] pointer-events-none">
+    <div class="w-full px-4 sm:px-6 lg:px-8 flex justify-end pointer-events-none">
+
+  <!-- Panel popup notifikasi desktop -->
+  <Transition name="fade-down">
+    <div
+      v-if="appStore.showNotification"
+      class="pointer-events-auto w-80 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-100 dark:border-gray-700 overflow-hidden flex flex-col max-h-[480px]"
+    >
+      <!-- Header: judul + tombol tandai semua dibaca -->
+      <div class="px-4 py-3 border-b border-gray-100 dark:border-gray-700 flex justify-between items-center bg-gray-50/50 dark:bg-gray-700/50 shrink-0">
+        <h3 class="text-sm font-semibold text-gray-800 dark:text-white">{{ t('notification.title') }}</h3>
+        <button
+          @click="markAllAsRead"
+          class="text-xs text-blue-600 dark:text-blue-400 hover:underline transition-colors"
+        >
+          {{ t('notification.markAllRead') }}
+        </button>
+      </div>
+
+      <!-- Konten bersama: tab bar + daftar notifikasi -->
+      <AppNotificationContent />
+    </div>
+  </Transition>
+
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Animasi popup muncul dari atas dengan sedikit geser ke bawah */
+.fade-down-enter-active,
+.fade-down-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+.fade-down-enter-from,
+.fade-down-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

package/src/components/layout/AppPlatformBanners.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { computed, ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useRouter } from 'vue-router'
+import { usePlatformState } from '@initsolusidigital/worksuite-core/composables/usePlatformState.js'
+import { useImpersonation } from '@initsolusidigital/worksuite-core/composables/useImpersonation.js'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import { tenantTimeZone } from '@initsolusidigital/worksuite-core/utils/datetime.js'
+
+// Banner keadaan PLATFORM. Tiga sumber, satu tumpukan, urutan TETAP:
+//
+//   1. Sesi impersonation  — permanen, tak bisa ditutup. Paling atas karena ia mengubah arti
+//                            SEMUA yang dilihat di bawahnya (data ini milik orang lain).
+//   2. Workspace demo      — permanen, tak bisa ditutup. Di atas langganan karena ia menjelaskan
+//                            sifat SELURUH workspace (data disapu tiap malam, lalu dipurge) —
+//                            keterangan yang lebih mendasar daripada status tagihannya.
+//   3. Status langganan    — past_due / suspended. Tak bisa ditutup: ia bukan pengumuman,
+//                            melainkan keterangan kenapa tombol simpan berhenti bekerja.
+//   4. Pengumuman platform — bisa ditutup (kontrak: "dismiss = state lokal").
+//
+// ⚠️ JANGAN membuat banner langganan bisa ditutup "biar tak mengganggu". Saat suspended, setiap
+// write dijawab 403 oleh backend; tanpa banner, kegagalannya terbaca sebagai aplikasi rusak dan
+// yang dihubungi bukan bagian keuangan tenant melainkan dukungan kami.
+const { t, locale } = useI18n()
+const router = useRouter()
+const {
+  isPastDue, isSuspended, impersonation, visibleAnnouncements, dismissAnnouncement,
+  isTrial, subscriptionEndDate, purgeScheduledAt, isDemo, demoExpiresAt,
+} = usePlatformState()
+const { isImpersonating, endSession } = useImpersonation()
+
+// "Akhiri Sesi" hanya ditawarkan pada tab yang MEMEGANG token-nya (`isImpersonating`), bukan
+// setiap kali `/auth/me` membawa objek impersonation. Keduanya bisa berbeda: bila kelak backend
+// juga menandai sisi tenant, banner tetap tampil di sana — dan tombol yang tak akan pernah
+// bekerja lebih buruk daripada tak ada tombol.
+const ending = ref(false)
+async function stopImpersonation() {
+  ending.value = true
+  try {
+    await endSession()          // melepas token DULU, baru mencabut izin — lihat useImpersonation
+    router.push({ name: 'dashboard' })
+  } finally {
+    ending.value = false
+  }
+}
+
+function formatDateTime(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    day: '2-digit', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit', timeZoneName: 'short', timeZone: tenantTimeZone(),
+  })
+}
+
+// Tautan "lihat tagihan" hanya dipasang bila app ini MEMANG punya halamannya.
+// Komponen ini dipakai juga oleh app yang tak punya rute `my-subscription`, dan
+// `router-link :to="{ name }"` ke rute tak dikenal melempar saat render — satu banner yang
+// salah asumsi akan mematikan seluruh halaman, bukan cuma dirinya sendiri.
+const billingRoute = computed(() => (router.hasRoute('my-subscription') ? { name: 'my-subscription' } : null))
+
+// ── Siklus hidup langganan ──────────────────────────────────────────────────────────────────
+// Tanggal saja (tanpa jam): keduanya tenggat kalender, dan menambahkan "14:37" pada kalimat
+// "data dihapus permanen" cuma menyiratkan presisi yang tak dijanjikan backend.
+function formatDate(iso) {
+  if (!iso) return ''
+  return new Date(iso).toLocaleDateString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    day: '2-digit', month: 'long', year: 'numeric',
+  })
+}
+
+// Sisa hari menuju penghapusan. Dibulatkan KE ATAS supaya "besok" tak pernah tampil sebagai
+// "0 hari lagi" — pada banner yang memperingatkan kehilangan data permanen, meremehkan sisa
+// waktu jauh lebih berbahaya daripada melebihkannya.
+const purgeDaysLeft = computed(() => {
+  if (!purgeScheduledAt.value) return null
+  const ms = new Date(purgeScheduledAt.value).getTime() - Date.now()
+  if (Number.isNaN(ms)) return null
+  return Math.max(0, Math.ceil(ms / 86_400_000))
+})
+
+// Banner trial hanya untuk tenant yang MEMANG sedang trial dan belum lewat tenggat. Tenant
+// trial yang sudah past_due/suspended melihat banner read-only saja — dua banner yang
+// mengatakan hal berbeda tentang keadaan yang sama justru membingungkan.
+const showTrialBanner = computed(() => isTrial.value && !isPastDue.value && !isSuspended.value)
+
+// Level pengumuman → varian AppAlert. `maintenance` memakai varian padat (kontrak: paling
+// mencolok); level tak dikenal jatuh ke `info`, bukan disembunyikan — pengumuman yang tak
+// tampil karena level baru dari backend adalah kegagalan yang tak terlihat siapa pun.
+const LEVEL_VARIANT = { info: 'info', warning: 'warning', maintenance: 'maintenance' }
+const variantFor = (level) => LEVEL_VARIANT[level] ?? 'info'
+</script>
+
+<template>
+  <div v-if="impersonation || isDemo || isPastDue || isSuspended || showTrialBanner || visibleAnnouncements.length" class="space-y-2 mb-4">
+
+    <!-- 1. Sesi impersonation — permanen -->
+    <AppAlert
+      v-if="impersonation"
+      variant="support"
+      :title="t('platformBanner.impersonation.title', { name: impersonation.impersonator_name })"
+      :message="t('platformBanner.impersonation.body', { expires: formatDateTime(impersonation.expires_at) })"
+    >
+      <button
+        v-if="isImpersonating"
+        type="button"
+        class="mt-2 px-3 py-1 rounded-md bg-white/20 hover:bg-white/30 text-sm font-semibold transition-colors disabled:opacity-60"
+        :disabled="ending"
+        @click="stopImpersonation"
+      >
+        {{ ending ? t('common.processing') : t('platformBanner.impersonation.endSession') }}
+      </button>
+    </AppAlert>
+
+    <!-- 2. Workspace demo — permanen, tak bisa ditutup -->
+    <AppAlert
+      v-if="isDemo"
+      variant="info"
+      :title="t('platformBanner.demo.title')"
+      :message="demoExpiresAt
+        ? t('platformBanner.demo.body', { date: formatDate(demoExpiresAt) })
+        : t('platformBanner.demo.bodyNoDate')"
+    />
+
+    <!-- 3. Status langganan -->
+    <AppAlert
+      v-if="isSuspended"
+      variant="error"
+      :title="t('platformBanner.suspended.title')"
+      :message="t('platformBanner.suspended.body')"
+    >
+      <p v-if="purgeScheduledAt" class="mt-1.5 font-semibold">
+        {{ t('platformBanner.purge.warning', { date: formatDate(purgeScheduledAt), days: purgeDaysLeft }) }}
+      </p>
+      <router-link
+        v-if="billingRoute"
+        :to="billingRoute"
+        class="inline-block mt-1.5 font-semibold underline underline-offset-2"
+      >
+        {{ t('platformBanner.viewBilling') }}
+      </router-link>
+    </AppAlert>
+    <!-- ⚠️ `past_due` memakai varian ERROR, bukan `warning`: status ini berarti read-only
+         seketika, bukan "menunggak tapi masih bisa kerja". Nada peringatan ringan pada keadaan yang memblokir semua
+         penyimpanan akan membuat tenant terus mencoba lalu menyimpulkan aplikasinya rusak. -->
+    <AppAlert
+      v-else-if="isPastDue"
+      variant="error"
+      :title="t('platformBanner.pastDue.title')"
+      :message="t('platformBanner.pastDue.body')"
+    >
+      <p v-if="purgeScheduledAt" class="mt-1.5 font-semibold">
+        {{ t('platformBanner.purge.warning', { date: formatDate(purgeScheduledAt), days: purgeDaysLeft }) }}
+      </p>
+      <router-link
+        v-if="billingRoute"
+        :to="billingRoute"
+        class="inline-block mt-1.5 font-semibold underline underline-offset-2"
+      >
+        {{ t('platformBanner.viewBilling') }}
+      </router-link>
+    </AppAlert>
+
+    <!-- 3b. Trial berjalan — informatif, bukan peringatan. Tenant trial belum melakukan apa pun
+         yang salah; yang berguna baginya adalah tahu kapan berakhir & ke mana upgrade. -->
+    <AppAlert
+      v-else-if="showTrialBanner"
+      variant="info"
+      :title="t('platformBanner.trial.title')"
+      :message="subscriptionEndDate
+        ? t('platformBanner.trial.body', { date: formatDate(subscriptionEndDate) })
+        : t('platformBanner.trial.bodyNoDate')"
+    >
+      <router-link
+        v-if="billingRoute"
+        :to="billingRoute"
+        class="inline-block mt-1.5 font-semibold underline underline-offset-2"
+      >
+        {{ t('platformBanner.trial.upgrade') }}
+      </router-link>
+    </AppAlert>
+
+    <!-- 4. Pengumuman platform -->
+    <AppAlert
+      v-for="a in visibleAnnouncements"
+      :key="a.id"
+      :variant="variantFor(a.level)"
+      :title="a.title"
+      :message="a.body"
+      dismissible
+      @dismiss="dismissAnnouncement(a.id)"
+    />
+  </div>
+</template>

package/src/components/layout/AppSidebar.vue

@@ -0,0 +1,226 @@
+<script setup>
+import { computed, nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
+import { useI18n } from 'vue-i18n'
+import { ChevronsLeft, ChevronsRight, X } from '@lucide/vue'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useNavigation } from '../../composables/useNavigation.js'
+import { SIDEBAR_BASE, brandAlpha, brandInitialsColor, brandTextOn, normalizeBrandColor } from '@initsolusidigital/worksuite-core/utils/brandColor.js'
+import AppAvatar from '@initsolusidigital/worksuite-ui/AppAvatar.vue'
+import AppTooltip from '@initsolusidigital/worksuite-ui/AppTooltip.vue'
+import AppSidebarNav from './AppSidebarNav.vue'
+import AppUserMenuContent from './AppUserMenuContent.vue'
+
+const route = useRoute()
+const { t } = useI18n()
+const authStore = useAuthStore()
+const appStore = useAppStore()
+const { groups, bottomGroups } = useNavigation()
+
+const collapsed = computed(() => appStore.sidebarCollapsed)
+const drawerGroups = computed(() => [...groups.value, ...bottomGroups.value])
+
+// Warna brand boleh ber-alpha, sampai transparan penuh (logo berlatar sendiri).
+const brandColor = computed(() => normalizeBrandColor(authStore.brandingColor))
+const initialsColor = computed(() => brandInitialsColor(brandColor.value))
+const brandStyle = computed(() => ({
+  backgroundColor: brandColor.value,
+  color: brandTextOn(brandColor.value, appStore.darkMode ? SIDEBAR_BASE.dark : SIDEBAR_BASE.light),
+}))
+// Garis tepi membuat brand yang nyaris sewarna latar sidebar tetap terbaca sebagai blok. Pada alpha 0
+// tak ada blok yang perlu ditegaskan: garisnya justru membingkai logo yang dimaksudkan telanjang.
+const brandRing = computed(() => (brandAlpha(brandColor.value) > 0 ? 'ring-1 ring-inset ring-black/5 dark:ring-white/10' : ''))
+// Mode rail hanya menyisakan logo, jadi nama app & tenant pindah ke tooltip.
+const brandTooltip = computed(() => [t('common.appName'), authStore.companyName].filter(Boolean).join(' · '))
+const userName = computed(() => authStore.user?.first_name || t('user.fallback'))
+const userFullName = computed(() => [authStore.user?.first_name, authStore.user?.last_name].filter(Boolean).join(' ') || userName.value)
+const userEmail = computed(() => authStore.user?.email || '')
+
+// ── Gulungan daftar menu ─────────────────────────────────────────────────────────────────────
+// AppLayout dibungkus per halaman, jadi komponen ini remount tiap pindah rute. Tanpa pemulihan,
+// daftar panjang melompat ke atas setiap kali satu item bawahnya diklik.
+const scrollEl = ref(null)
+function saveScroll() {
+  if (scrollEl.value) appStore.sidebarScrollTop = scrollEl.value.scrollTop
+}
+function revealActive() {
+  const box = scrollEl.value
+  const active = box?.querySelector('[aria-current="page"]')
+  if (!active) return
+  // Dihitung manual: `scrollIntoView` ikut menggulung leluhur lain bila ada yang bisa digulung.
+  const boxRect = box.getBoundingClientRect()
+  const rect = active.getBoundingClientRect()
+  if (rect.top < boxRect.top) box.scrollTop -= boxRect.top - rect.top
+  else if (rect.bottom > boxRect.bottom) box.scrollTop += rect.bottom - boxRect.bottom
+}
+onMounted(() => {
+  if (scrollEl.value) scrollEl.value.scrollTop = appStore.sidebarScrollTop
+  revealActive()
+})
+
+// ── Laci layar sempit ────────────────────────────────────────────────────────────────────────
+const closeButton = ref(null)
+let openerEl = null
+function onKeydown(e) {
+  if (e.key === 'Escape') appStore.closeSidebar()
+}
+watch(() => appStore.showMobileSidebar, async (open) => {
+  if (open) {
+    openerEl = document.activeElement
+    window.addEventListener('keydown', onKeydown)
+    await nextTick()
+    closeButton.value?.focus()
+  } else {
+    window.removeEventListener('keydown', onKeydown)
+    if (openerEl?.isConnected) openerEl.focus()
+    openerEl = null
+  }
+})
+watch(() => route.fullPath, () => appStore.closeSidebar())
+// Keadaan laci hidup di store sedangkan komponen ini remount tiap pindah rute: tanpa ini laci yang
+// ditinggalkan navigasi terprogram tetap terbuka di halaman berikutnya.
+onBeforeUnmount(() => {
+  window.removeEventListener('keydown', onKeydown)
+  appStore.closeSidebar()
+})
+</script>
+
+<template>
+  <!-- ── Sidebar ≥ lg ─────────────────────────────────────────────────────────────────────── -->
+  <aside
+    class="fixed inset-y-0 left-0 z-40 hidden lg:flex flex-col bg-white dark:bg-gray-900 border-r border-gray-200 dark:border-gray-800 transition-[width] duration-200"
+    :class="collapsed ? 'w-20' : 'w-64'"
+  >
+    <!-- Puncak sejajar pulau header (top-4 + h-12), supaya blok brand & pulau header segaris. -->
+    <!-- `aria-current-value`: di dashboard RouterLink memberi logo `aria-current="page"`, dan "halaman
+         saat ini" akan terbaca dua kali bersama item Dashboard di menu. -->
+    <!-- Jarak luar milik pembungkus tooltip (span `inline-flex`): tautan di dalamnya mengisi lebarnya. -->
+    <AppTooltip class="mt-4 shrink-0" :class="collapsed ? 'mx-2' : 'mx-3'" placement="right" :text="collapsed ? brandTooltip : ''">
+      <router-link
+        :to="{ name: 'dashboard' }"
+        :aria-label="t('common.goToDashboard')"
+        aria-current-value="false"
+        data-sidebar-brand
+        class="w-full h-12 flex items-center gap-2.5 rounded-xl transition-colors duration-300"
+        :class="[collapsed ? 'justify-center' : 'px-2.5', brandRing]"
+        :style="brandStyle"
+      >
+        <span class="w-8 h-8 shrink-0 flex items-center justify-center">
+          <img v-if="authStore.brandingLogo" :src="authStore.brandingLogo" class="w-full h-full object-contain" alt="">
+          <span v-else class="w-8 h-8 rounded-full bg-white flex items-center justify-center font-black text-[11px] leading-none" :style="{ color: initialsColor }">{{ authStore.companyInitials }}</span>
+        </span>
+        <span v-if="!collapsed" class="min-w-0 flex flex-col leading-tight">
+          <span class="text-sm font-semibold truncate">{{ t('common.appName') }}</span>
+          <span v-if="authStore.companyName" data-sidebar-tenant class="text-xs opacity-75 truncate" :title="authStore.companyName">{{ authStore.companyName }}</span>
+        </span>
+      </router-link>
+    </AppTooltip>
+
+    <!-- Jarak ke blok brand dibagi dua: `mt-2` di LUAR area gulir tetap ada saat menu digulir, sedangkan
+         padding di dalamnya ikut tergulung. Tepi atas dipudarkan setinggi `pt-3`, jadi menu yang tergulung
+         memudar alih-alih terpotong rata; saat diam jalur pudar itu kosong. -->
+    <div ref="scrollEl" data-sidebar-scroll class="flex-1 min-h-0 mt-2 overflow-y-auto overflow-x-hidden scrollbar-rounded px-3 pt-3 pb-5 [mask-image:linear-gradient(to_bottom,transparent,#000_12px)]" @scroll.passive="saveScroll">
+      <AppSidebarNav :groups="groups" :collapsed="collapsed" />
+    </div>
+
+    <div class="shrink-0 border-t border-gray-200 dark:border-gray-800 p-3 flex flex-col gap-3">
+      <AppSidebarNav v-if="bottomGroups.length" :groups="bottomGroups" :collapsed="collapsed" :aria-label="t('common.secondaryNav')" />
+      <AppTooltip class="w-full" placement="right" :text="collapsed ? t('common.sidebarExpand') : ''">
+        <button
+          type="button"
+          :aria-label="collapsed ? t('common.sidebarExpand') : t('common.sidebarCollapse')"
+          :aria-expanded="!collapsed"
+          class="w-full h-10 flex items-center gap-3 rounded-lg px-3 text-sm font-medium text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white transition-colors"
+          :class="collapsed ? 'justify-center' : ''"
+          @click="appStore.toggleSidebarCollapsed()"
+        >
+          <ChevronsRight v-if="collapsed" class="w-5 h-5 shrink-0" aria-hidden="true" />
+          <template v-else>
+            <ChevronsLeft class="w-5 h-5 shrink-0" aria-hidden="true" />
+            <span class="truncate">{{ t('common.sidebarCollapse') }}</span>
+          </template>
+        </button>
+      </AppTooltip>
+    </div>
+  </aside>
+
+  <!-- ── Laci < lg ─────────────────────────────────────────────────────────────────────────── -->
+  <!-- `v-if`, bukan `v-show`: dua <nav> bernama sama tak boleh hidup bersamaan di pohon aksesibilitas. -->
+  <Transition name="sidebar-fade">
+    <div
+      v-if="appStore.showMobileSidebar"
+      class="fixed inset-0 bg-black/60 backdrop-blur-sm z-[60] lg:hidden"
+      @click="appStore.closeSidebar()"
+    ></div>
+  </Transition>
+  <Transition name="sidebar-slide">
+    <aside
+      v-if="appStore.showMobileSidebar"
+      role="dialog"
+      aria-modal="true"
+      :aria-label="t('common.mainMenu')"
+      class="fixed inset-y-0 left-0 w-72 max-w-[85vw] bg-white dark:bg-gray-900 z-[70] flex flex-col shadow-2xl lg:hidden"
+    >
+      <div class="shrink-0 flex items-center gap-2 p-3 border-b border-gray-200 dark:border-gray-800">
+        <div
+          class="flex-1 min-w-0 h-14 flex items-center gap-3 px-3 rounded-2xl"
+          :class="brandRing"
+          :style="brandStyle"
+        >
+          <span class="w-9 h-9 shrink-0 flex items-center justify-center">
+            <img v-if="authStore.brandingLogo" :src="authStore.brandingLogo" class="w-full h-full object-contain" alt="">
+            <span v-else class="w-8 h-8 rounded-full bg-white flex items-center justify-center font-black text-xs leading-none" :style="{ color: initialsColor }">{{ authStore.companyInitials }}</span>
+          </span>
+          <span class="min-w-0 flex flex-col leading-tight">
+            <span class="text-base font-semibold truncate">{{ t('common.appName') }}</span>
+            <span v-if="authStore.companyName" class="text-xs opacity-75 truncate" :title="authStore.companyName">{{ authStore.companyName }}</span>
+          </span>
+        </div>
+        <button
+          ref="closeButton"
+          type="button"
+          :aria-label="t('common.closeMenu')"
+          class="w-10 h-10 flex items-center justify-center rounded-lg text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800"
+          @click="appStore.closeSidebar()"
+        >
+          <X class="w-5 h-5" aria-hidden="true" />
+        </button>
+      </div>
+
+      <div class="flex-1 min-h-0 overflow-y-auto scrollbar-rounded px-3 py-5">
+        <AppSidebarNav :groups="drawerGroups" @navigate="appStore.closeSidebar()" />
+      </div>
+
+      <div class="shrink-0 border-t border-gray-200 dark:border-gray-800">
+        <div class="p-4 flex items-center gap-3">
+          <AppAvatar :src="authStore.user?.avatar ?? null" :name="userFullName" size="lg" />
+          <div class="min-w-0">
+            <p class="text-sm font-semibold text-gray-800 dark:text-white truncate">{{ userName }}</p>
+            <p class="text-xs text-gray-400 dark:text-gray-500 break-all">{{ userEmail }}</p>
+          </div>
+        </div>
+        <AppUserMenuContent />
+      </div>
+    </aside>
+  </Transition>
+</template>
+
+<style scoped>
+.sidebar-fade-enter-active,
+.sidebar-fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+.sidebar-fade-enter-from,
+.sidebar-fade-leave-to {
+  opacity: 0;
+}
+.sidebar-slide-enter-active,
+.sidebar-slide-leave-active {
+  transition: transform 0.2s ease-out;
+}
+.sidebar-slide-enter-from,
+.sidebar-slide-leave-to {
+  transform: translateX(-100%);
+}
+</style>