@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/layout/AppSidebarNav.vue

@@ -0,0 +1,119 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { ChevronDown } from '@lucide/vue'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import AppTooltip from '@initsolusidigital/worksuite-ui/AppTooltip.vue'
+
+const props = defineProps({
+  // [{ key, label, items: [{ labelKey, label, icon, to, active, badge, children?, childActive? }] }]
+  groups: { type: Array, required: true },
+  collapsed: { type: Boolean, default: false },
+  // Sidebar desktop punya dua <nav> (tengah + kaki); nama yang sama membuat keduanya tak bisa
+  // dibedakan pembaca layar maupun `getByRole('navigation', { name })`.
+  ariaLabel: { type: String, default: '' },
+})
+const emit = defineEmits(['navigate'])
+
+const { t } = useI18n()
+const appStore = useAppStore()
+
+// Kunci absen = ikut keadaan aktif, supaya akordeon yang memuat halaman sekarang terbuka sendiri
+// tanpa menimpa pilihan pengguna yang sudah menutupnya.
+function isOpen(item) {
+  return appStore.sidebarOpenGroups[item.labelKey] ?? !!item.childActive
+}
+
+function onParentClick(item) {
+  // Rail tak punya ruang untuk anak: klik memperluas sidebar lalu membuka akordeonnya.
+  if (props.collapsed) {
+    appStore.toggleSidebarCollapsed()
+    appStore.sidebarOpenGroups[item.labelKey] = true
+    return
+  }
+  appStore.sidebarOpenGroups[item.labelKey] = !isOpen(item)
+}
+
+function linkClass(active) {
+  return active
+    ? 'bg-blue-50 text-blue-600 dark:bg-blue-900/20 dark:text-blue-400'
+    : 'text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 hover:text-gray-900 dark:hover:text-white'
+}
+function badgeText(n) {
+  return n > 99 ? '99+' : n
+}
+</script>
+
+<template>
+  <nav :aria-label="ariaLabel || t('common.mainNav')" class="flex flex-col gap-6">
+    <div v-for="group in groups" :key="group.key">
+      <p
+        v-if="group.label && !collapsed"
+        class="px-3 mb-1 text-xs font-semibold uppercase tracking-wide text-gray-400 dark:text-gray-500 truncate"
+      >{{ group.label }}</p>
+      <!-- Rail kehilangan label grup: garis tipis menjaga pengelompokannya tetap terbaca. -->
+      <div v-else-if="group.label" class="mx-3 mb-2 border-t border-gray-200 dark:border-gray-800" aria-hidden="true"></div>
+
+      <ul class="space-y-0.5">
+        <li v-for="item in group.items" :key="item.labelKey">
+          <AppTooltip class="w-full" placement="right" :text="collapsed ? item.label : ''">
+            <!-- `custom` + <a> sendiri: `aria-current` bawaan RouterLink hanya menyala pada rute yang
+                 PERSIS sama, sedangkan item menu juga aktif di halaman turunannya. -->
+            <router-link v-if="!item.children" v-slot="{ href, navigate }" :to="item.to" custom>
+              <a
+                :href="href"
+                :aria-current="item.active ? 'page' : undefined"
+                class="relative w-full h-10 flex items-center gap-3 rounded-lg px-3 text-sm font-medium transition-colors"
+                :class="[linkClass(item.active), collapsed ? 'justify-center' : '']"
+                @click="(e) => { navigate(e); emit('navigate') }"
+              >
+                <component :is="item.icon" class="w-5 h-5 shrink-0" aria-hidden="true" />
+                <span :class="collapsed ? 'sr-only' : 'truncate'">{{ item.label }}</span>
+                <span
+                  v-if="item.badge > 0"
+                  class="inline-flex items-center justify-center rounded-full bg-red-500 text-white font-semibold leading-none"
+                  :class="collapsed ? 'absolute top-1 right-1 h-4 min-w-4 px-1 text-[10px]' : 'ml-auto h-5 min-w-5 px-1.5 text-[11px]'"
+                  :aria-label="t('common.pendingCount', { n: item.badge })"
+                >{{ badgeText(item.badge) }}</span>
+              </a>
+            </router-link>
+
+            <!-- Item ber-`children`: akordeon satu tingkat. -->
+            <button
+              v-else
+              type="button"
+              :aria-expanded="collapsed ? undefined : isOpen(item)"
+              class="w-full h-10 flex items-center gap-3 rounded-lg px-3 text-sm font-medium transition-colors"
+              :class="[linkClass(item.childActive && (collapsed || !isOpen(item))), collapsed ? 'justify-center' : '']"
+              @click="onParentClick(item)"
+            >
+              <component :is="item.icon" class="w-5 h-5 shrink-0" aria-hidden="true" />
+              <span :class="collapsed ? 'sr-only' : 'flex-1 truncate text-left'">{{ item.label }}</span>
+              <ChevronDown
+                v-if="!collapsed"
+                class="w-4 h-4 shrink-0 text-gray-400 transition-transform"
+                :class="{ 'rotate-180': isOpen(item) }"
+                aria-hidden="true"
+              />
+            </button>
+          </AppTooltip>
+
+          <ul v-if="item.children && !collapsed && isOpen(item)" class="mt-0.5 space-y-0.5">
+            <li v-for="child in item.children" :key="child.labelKey">
+              <router-link v-slot="{ href, navigate }" :to="child.to" custom>
+                <a
+                  :href="href"
+                  :aria-current="child.active ? 'page' : undefined"
+                  class="w-full h-9 flex items-center rounded-lg pl-11 pr-3 text-sm transition-colors"
+                  :class="[linkClass(child.active), child.active ? 'font-medium' : '']"
+                  @click="(e) => { navigate(e); emit('navigate') }"
+                >
+                  <span class="truncate">{{ child.label }}</span>
+                </a>
+              </router-link>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </nav>
+</template>

package/src/components/layout/AppUserMenu.vue

@@ -0,0 +1,89 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { useDismissOnEscape } from '@initsolusidigital/worksuite-core/composables/useDismissOnEscape.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import AppUserMenuContent from './AppUserMenuContent.vue'
+
+const { t } = useI18n()
+
+const appStore = useAppStore()
+
+// Escape menutup popup ini — mengalah bila ada dialog di atasnya (lihat composable).
+useDismissOnEscape(() => appStore.showUserMenu, () => appStore.closeUserMenu())
+const authStore = useAuthStore()
+
+// ── Data user untuk header popup ─────────────────────────────────────────────
+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 avatarError = ref(false)
+const userName = computed(() => {
+  const first = authStore.user?.first_name || ''
+  const last  = authStore.user?.last_name  || ''
+  return [first, last].filter(Boolean).join(' ') || t('user.fallback')
+})
+const userEmail    = computed(() => authStore.user?.email    || '')
+const userUsername = computed(() => authStore.user?.username || '')
+</script>
+
+<template>
+  <!-- Backdrop transparan — menutup popup saat klik di luar panel -->
+  <div
+    v-if="appStore.showUserMenu"
+    class="fixed inset-0 z-[55]"
+    @click="appStore.closeUserMenu()"
+  />
+
+  <!-- Wrapper posisi — mirror navbar (px-4 + max-w-7xl) agar sejajar batas kanan navbar -->
+  <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 user menu desktop -->
+      <Transition name="fade-down">
+        <div
+          v-if="appStore.showUserMenu"
+          class="pointer-events-auto w-64 bg-white dark:bg-gray-800 rounded-xl shadow-2xl border border-gray-100 dark:border-gray-700 overflow-hidden"
+        >
+          <!-- Header: avatar + nama + email dengan gradient gelap -->
+          <div class="px-4 py-4 bg-gradient-to-br from-[#363636] to-gray-700 text-white flex items-center gap-3">
+            <div class="w-10 h-10 rounded-full bg-blue-500 text-white flex items-center justify-center text-base font-bold shrink-0 ring-2 ring-white/20 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>
+            <div class="min-w-0">
+              <p class="text-sm font-bold truncate">{{ userName }}</p>
+              <p class="text-xs text-gray-300 truncate">{{ userEmail }}</p>
+              <span
+                v-if="userUsername"
+                class="mt-1.5 inline-block text-[10px] font-medium bg-white/15 text-white/90 px-2 py-0.5 rounded-full leading-none"
+              >@{{ userUsername }}</span>
+            </div>
+          </div>
+
+          <!-- Menu items bersama — cukup ubah AppUserMenuContent untuk kedua platform -->
+          <AppUserMenuContent />
+        </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/AppUserMenuContent.vue

@@ -0,0 +1,59 @@
+<script setup>
+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 { LogOut, UserCog } from '@lucide/vue'
+import { redirectToIdentityLogin } from '@initsolusidigital/worksuite-core/utils/loginRedirect.js'
+import { getLogoutHandler } from '../../shellSetup.js'
+
+const router    = useRouter()
+const { t }     = useI18n()
+const authStore = useAuthStore()
+const appStore  = useAppStore()
+
+// Logout: tutup menu, hapus state sesi, lalu pindah halaman. Bawaannya FULL PAGE ke pintu
+// identitas, sebab layar login tak ada di app staf; pintu tak diketahui (dev per-port tanpa
+// VITE_AUTH_URL) → rute login lokal yang memperlihatkan keadaan itu. App yang butuh langkah
+// sendiri (membersihkan store miliknya, atau pintu masuk yang berbeda) memasok `onLogout`.
+function redirect() {
+  if (!redirectToIdentityLogin()) router.push({ name: 'login' }).catch(() => {})
+}
+
+async function logout() {
+  appStore.closeUserMenu()
+  await authStore.logout()
+  const onLogout = getLogoutHandler()
+  if (onLogout) onLogout({ router, redirect })
+  else redirect()
+}
+</script>
+
+<template>
+  <!-- Daftar menu aksi user — tambah item baru di sini -->
+  <div class="py-2">
+    <!-- Profil Saya → Setelan Akun (default tab Akun); perangkat & sesi ada di seksi
+         "Sesi & Perangkat" di dalam profil. Setelan Tenant tak ada di menu ini: hub memberinya
+         tombol gear sendiri di navbar. Item ini berikon karena tombol Keluar di bawah berikon —
+         tanpa ikon kedua baris menu tak sejajar. -->
+    <router-link
+      :to="{ name: 'profile.account' }"
+      class="flex items-center gap-2 px-4 py-2 text-sm text-gray-700 dark:text-gray-200 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors"
+      @click="appStore.closeUserMenu()"
+    >
+      <UserCog class="w-4 h-4 shrink-0" />
+      {{ t('user.profile') }}
+    </router-link>
+  </div>
+
+  <!-- Tombol logout — selalu di bawah, dipisah garis -->
+  <div class="border-t border-gray-100 dark:border-gray-700 py-2">
+    <button
+      @click="logout"
+      class="w-full flex items-center gap-2 px-4 py-2 text-sm text-red-600 dark:text-red-400 hover:bg-red-50 dark:hover:bg-red-900/20 transition-colors text-left"
+    >
+      <LogOut class="w-4 h-4 shrink-0" />
+      {{ t('user.logout') }}
+    </button>
+  </div>
+</template>

package/src/composables/useKpi.js

@@ -0,0 +1,232 @@
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { kpiApi, kpiSubjectsApi } from '@initsolusidigital/worksuite-core/api/endpoints/kpi.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+
+/**
+ * State + aturan angka mesin KPI. Dipakai bersama seluruh permukaan KPI (HRIS tingkat 2, CRM &
+ * Project tingkat 1) supaya tiga app tak pernah menghitung atau merender angka yang sama dengan
+ * cara berbeda.
+ *
+ * ⚠️ **`actual: null` = BELUM ADA KEJADIAN, bukan nol.** "Belum ada deal won" ≠ "sales cycle 0
+ * hari", dan merender 0 untuk keduanya menghapus perbedaan yang justru paling penting saat
+ * penilaian. Semua formatter di sini mengembalikan tanda pisah (—) untuk null.
+ *
+ * ⚠️ **Angka "Capaian" = `score` (0–120), BUKAN `achievement_pct`.** Skor dihitung server dengan
+ * rumus potong-garis yang sama dengan Excel laporan bulanan (toleransi = 50, target = 100,
+ * stretch = 120); `achievement_pct` hanya rasio mentah realisasi/target dan tetap boleh tampil
+ * sebagai info sekunder. Realisasi 0 pada KPI arah turun berskor 120 tapi rasionya `null` (target
+ * ÷ 0), jadi layar yang merender rasio sebagai angka utama menampilkan "—" untuk kinerja terbaik.
+ *
+ * ⚠️ **Warna dari `status` server** (`green|yellow|red|null`), jangan dari ambang sendiri: status
+ * dihitung dari skor yang sudah dibulatkan 1 desimal, jadi ambang tulisan tangan bisa berbeda
+ * warna tepat di batasnya — dan dua warna untuk satu angka tak punya jawaban benar.
+ *
+ * ⚠️ **`state`** membedakan tiga hal yang semuanya "tak ada skor": `value` (ada angka, termasuk 0)
+ * · `na` (tidak ada kejadian, dikeluarkan dari komposit) · `missing` (belum diisi). Merender
+ * ketiganya sebagai "—" menghapus satu-satunya petunjuk apa yang harus dikerjakan berikutnya.
+ */
+export function useKpi(companyId) {
+  const { t, te, locale } = useI18n()
+
+  const resolvers = ref([])
+  const definitions = ref([])
+  const hrisTier = ref(false)
+  /** Pengali tier bawaan global `{up:{threshold,stretch}, down:{…}}` — milik server, beda per deployment. */
+  const defaultTiers = ref(null)
+  const loadingCatalog = ref(false)
+  const catalogError = ref('')
+
+  const rows = ref([])
+  const reportMonths = ref([])
+  const reportClosed = ref(false)
+  const loadingReport = ref(false)
+  const reportError = ref('')
+
+  const users = ref([])
+  const employees = ref([])
+
+  const cid = () => (typeof companyId === 'function' ? companyId() : companyId?.value ?? companyId)
+
+  async function fetchCatalog(includeInactive = false) {
+    if (!cid()) return
+    loadingCatalog.value = true
+    catalogError.value = ''
+    try {
+      const { data } = await kpiApi.catalog(cid(), includeInactive ? { include_inactive: 1 } : undefined)
+      const body = data.data ?? data
+      resolvers.value = body.resolvers ?? []
+      definitions.value = body.definitions ?? []
+      hrisTier.value = !!body.hris_tier
+      defaultTiers.value = body.default_tiers ?? null
+    } catch (err) {
+      const e = normalizeApiError(err)
+      catalogError.value = e.isForbidden ? t('kpi.noPermission') : (e.backendMessage || t('common.serverError'))
+      resolvers.value = []
+      definitions.value = []
+    } finally {
+      loadingCatalog.value = false
+    }
+  }
+
+  async function fetchReport(params) {
+    if (!cid()) return
+    loadingReport.value = true
+    reportError.value = ''
+    try {
+      const { data } = await kpiApi.report(cid(), params)
+      const body = data.data ?? data
+      rows.value = body.rows ?? []
+      reportMonths.value = body.months ?? []
+      reportClosed.value = !!body.closed
+    } catch (err) {
+      const e = normalizeApiError(err)
+      reportError.value = e.reason === 'invalid_period_span'
+        ? t('kpi.errInvalidSpan')
+        : (e.isForbidden ? t('kpi.noPermission') : (e.backendMessage || t('common.serverError')))
+      rows.value = []
+    } finally {
+      loadingReport.value = false
+    }
+  }
+
+  /** Pemilih subjek: user selalu, karyawan hanya bermakna di tenant ber-seat `kpis`. */
+  async function fetchSubjects() {
+    try {
+      const { data } = await kpiSubjectsApi.users()
+      users.value = (data.data?.data ?? data.data ?? []).map(u => ({
+        value: u.id,
+        label: [u.first_name, u.last_name].filter(Boolean).join(' ').trim() || u.username || u.id,
+      }))
+    } catch { /* pemilih user kosong — formnya mengatakan itu lewat daftar kosong */ }
+
+    if (!hrisTier.value) return
+    try {
+      const { data } = await kpiSubjectsApi.employees()
+      employees.value = (data.data?.data ?? data.data ?? []).map(e => ({
+        value: e.id,
+        // `first_name`/`last_name` baris karyawan hanya terisi untuk karyawan TANPA akun; nama karyawan
+        // ber-akun hanya ada di `display_name` (disajikan `/get_employees`).
+        label: (e.display_name ?? '').trim() || [e.first_name, e.last_name].filter(Boolean).join(' ').trim() || e.code || e.id,
+      }))
+    } catch { /* idem */ }
+  }
+
+  /**
+   * Nama resolver dalam bahasa UI. Backend mengirim `label`/`description` **English** (kanon
+   * language-neutral), jadi kamus lokal dicoba lebih dulu dan `label` backend jadi cadangan —
+   * bukan sebaliknya, dan TIDAK pernah di-parse.
+   */
+  function resolverLabel(r) {
+    const key = `kpi.resolver.${r.key}.label`
+    return te(key) ? t(key) : (r.label ?? r.key)
+  }
+  function resolverDescription(r) {
+    const key = `kpi.resolver.${r.key}.description`
+    return te(key) ? t(key) : (r.description ?? '')
+  }
+
+  const nf = () => (locale.value === 'id' ? 'id-ID' : 'en-US')
+
+  /** Angka realisasi/target sesuai `metric_type`. `null` → "—", TIDAK PERNAH 0. */
+  function formatMetric(value, def) {
+    if (value === null || value === undefined) return '—'
+    const n = Number(value)
+    if (Number.isNaN(n)) return String(value)
+    switch (def?.metric_type) {
+      case 'currency':
+        return new Intl.NumberFormat(nf(), { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(n)
+      case 'percent':
+        return `${new Intl.NumberFormat(nf(), { maximumFractionDigits: 2 }).format(n)}%`
+      case 'duration':
+        return `${new Intl.NumberFormat(nf(), { maximumFractionDigits: 1 }).format(n)} ${def.unit || ''}`.trim()
+      default:
+        return new Intl.NumberFormat(nf(), { maximumFractionDigits: 2 }).format(n)
+    }
+  }
+
+  /** Rasio mentah realisasi/target — info SEKUNDER, bukan angka Capaian. */
+  function formatAchievement(pct) {
+    if (pct === null || pct === undefined) return '—'
+    return `${new Intl.NumberFormat(nf(), { maximumFractionDigits: 0 }).format(Number(pct))}%`
+  }
+
+  /** Skor 0–120. Dua desimal mengikuti kolom Capaian Excel (106,67), bukan dibulatkan ke bilangan bulat. */
+  function formatScore(score) {
+    if (score === null || score === undefined) return '—'
+    return new Intl.NumberFormat(nf(), { maximumFractionDigits: 2 }).format(Number(score))
+  }
+
+  /** `status` server → warna `AppBadge`. `null` (tanpa skor) = abu. */
+  function statusTone(status) {
+    return { green: 'green', yellow: 'amber', red: 'red' }[status] ?? 'gray'
+  }
+
+  /** "KPI-DEV-01 — Bug produksi" bila berkode; kode = rujukan yang dipakai Excel & berita acara. */
+  function definitionLabel(def) {
+    if (!def) return ''
+    return def.code ? `${def.code} — ${def.name}` : (def.name ?? '')
+  }
+
+  /**
+   * "toleransi 15 · target 30 · stretch 36" dari tier EFEKTIF baris (server mengisi bawaan bila
+   * tier tak dipasang). Ditampilkan apa adanya, tak pernah dihitung ulang: pengali bawaan bisa
+   * ditimpa per definisi dan dibatasi 100 untuk persen, dan salinan rumus itu di klien pasti basi.
+   */
+  function formatTiers(row, def) {
+    if (row?.threshold === null || row?.threshold === undefined) return ''
+    return [
+      `${t('kpi.tier.threshold')} ${formatMetric(row.threshold, def)}`,
+      `${t('kpi.tier.target')} ${formatMetric(row.target, def)}`,
+      `${t('kpi.tier.stretch')} ${formatMetric(row.stretch, def)}`,
+    ].join(' · ')
+  }
+
+  const activeDefinitions = computed(() => definitions.value.filter(d => d.is_active !== false))
+
+  return {
+    resolvers, definitions, activeDefinitions, hrisTier, defaultTiers, loadingCatalog, catalogError,
+    rows, reportMonths, reportClosed, loadingReport, reportError,
+    users, employees,
+    fetchCatalog, fetchReport, fetchSubjects,
+    resolverLabel, resolverDescription,
+    formatMetric, formatAchievement, formatScore, statusTone, definitionLabel, formatTiers,
+  }
+}
+
+/**
+ * PRATINJAU tier yang akan berlaku bila toleransi/stretch dikosongkan, SEBELUM disimpan — urutan
+ * sumber mengikuti kontrak `kp1-kpi-tracking.md`: pengali definisi → `default_tiers`
+ * katalog; persen `percent_bounded` arah naik: stretch dibatasi 100. Sesudah disimpan, angka yang
+ * dipakai tetap tier EFEKTIF di respons, bukan hasil fungsi ini.
+ * @returns {{threshold:number, stretch:number}|null} null bila target belum valid / pengali tak diketahui
+ */
+export function previewTiers(target, def, defaultTiers) {
+  const tv = Number(target)
+  if (!(tv > 0) || !def) return null
+  const arah = def.direction === 'down' ? 'down' : 'up'
+  const thrR = def.default_threshold_ratio ?? defaultTiers?.[arah]?.threshold
+  const strR = def.default_stretch_ratio ?? defaultTiers?.[arah]?.stretch
+  if (thrR == null || strR == null) return null
+  let stretch = tv * Number(strR)
+  if (arah === 'up' && def.metric_type === 'percent' && def.percent_bounded) stretch = Math.min(stretch, 100)
+  return { threshold: tv * Number(thrR), stretch }
+}
+
+/**
+ * Bentuk periode yang diterima backend. **Daftar ini mengikat** — mengarang bentuk lain
+ * (mis. `2026-W12`) dijawab 422 `invalid_period_span`, dan pemilih yang menawarkannya hanya
+ * memindahkan penolakan itu ke sesudah pengguna menekan tombol.
+ */
+export const PERIOD_KINDS = ['month', 'quarter', 'semester', 'year', 'custom']
+
+export function buildPeriod(kind, { year, month, quarter, semester, from, to }) {
+  switch (kind) {
+    case 'month':    return `${year}-${String(month).padStart(2, '0')}`
+    case 'quarter':  return `${year}-Q${quarter}`
+    case 'semester': return `${year}-S${semester}`
+    case 'year':     return String(year)
+    case 'custom':   return `${from}:${to}`
+    default:         return `${year}-${String(month).padStart(2, '0')}`
+  }
+}

package/src/composables/useLgViewport.js

@@ -0,0 +1,25 @@
+// Apakah viewport sedang ≥ lg (1024 px, breakpoint Tailwind `lg`).
+//
+// Satu ref tingkat modul untuk semua pemakai. Breadcrumb dirender di DUA tempat menurut lebar
+// layar (pil di header pada ≥ lg, baris di atas konten di bawahnya), dan keduanya memilih lewat
+// `v-if` pada ref yang SAMA: satu sumber berarti tepat satu breadcrumb di DOM pada lebar apa pun.
+// Menyembunyikan salah satunya lewat kelas responsif (`hidden lg:flex`) meninggalkan dua `nav`
+// ber-label sama di pohon aksesibilitas, dan pencari `getByRole('navigation', { name })` di uji
+// menemukan dua elemen.
+import { ref } from 'vue'
+
+const QUERY = '(min-width: 1024px)'
+const isLg = ref(false)
+let mql = null
+
+function ensure() {
+  if (mql || typeof window === 'undefined' || !window.matchMedia) return
+  mql = window.matchMedia(QUERY)
+  isLg.value = mql.matches
+  mql.addEventListener('change', (e) => { isLg.value = e.matches })
+}
+
+export function useLgViewport() {
+  ensure()
+  return isLg
+}