@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/pages/profile/partials/SupportAccessSection.vue

@@ -0,0 +1,173 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { LifeBuoy, Trash2 } from '@lucide/vue'
+import { impersonationApi } from '@initsolusidigital/worksuite-core/api/endpoints/impersonation.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { userName } from '@initsolusidigital/worksuite-core/utils/userName.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppIconButton from '@initsolusidigital/worksuite-ui/AppIconButton.vue'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppEmptyState from '@initsolusidigital/worksuite-ui/AppEmptyState.vue'
+import { tenantTimeZone } from '@initsolusidigital/worksuite-core/utils/datetime.js'
+
+// Section "Akses Dukungan" — SISI TENANT: permintaan tim dukungan untuk melihat
+// ruang kerja MELALUI akun user yang login, beserta keputusannya.
+//
+// Rumahnya di `/profile` karena endpoint-nya self-scoped platform-wide, persis seperti Sesi &
+// Perangkat: `GET /impersonation_requests/my` hanya mengembalikan permintaan yang ditujukan ke
+// user yang login. Konsekuensinya ia ada di setiap app, dan
+// user bisa menyetujui/menolak dari app mana pun yang kebetulan sedang ia buka.
+const { t, locale } = useI18n()
+const { pushToast } = useToast()
+
+const rows = ref([])
+const loading = ref(true)
+const pageError = ref('')
+const busyId = ref(null)
+
+const STATUS_COLOR = {
+  pending: 'amber', approved: 'blue', active: 'green',
+  rejected: 'gray', revoked: 'gray', expired: 'gray',
+}
+
+// Yang menunggu keputusan ditampilkan lebih dulu — sisanya riwayat. Tanpa pemisahan ini,
+// permintaan baru bisa tenggelam di bawah belasan baris yang sudah selesai.
+const pending = computed(() => rows.value.filter((r) => r.status === 'pending'))
+const history = computed(() => rows.value.filter((r) => r.status !== 'pending'))
+
+function fmtDateTime(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(),
+  })
+}
+
+// ⚠️ Nama datang sebagai `first_name`/`last_name`, bukan `name` — membaca `.name` menghasilkan
+// `undefined` lalu jatuh ke UUID mentah di layar (pakai `utils/userName.js`).
+const impersonatorName = (row) => userName(row.impersonator) || t('profile.supportAccess.supportTeam')
+
+async function fetchRows() {
+  loading.value = true
+  pageError.value = ''
+  try {
+    const { data } = await impersonationApi.my()
+    rows.value = data?.data ?? []
+  } catch {
+    pageError.value = t('profile.supportAccess.loadError')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function act(row, action) {
+  busyId.value = row.id
+  pageError.value = ''
+  try {
+    await impersonationApi[action](row.id)
+    pushToast({ title: t(`profile.supportAccess.toast.${action}`), variant: 'success' })
+    await fetchRows()
+  } catch (err) {
+    const e = normalizeApiError(err)
+    // `already_decided` = permintaan sudah diputuskan di tab/perangkat lain. Bukan kegagalan
+    // yang perlu ditakuti — cukup segarkan daftarnya supaya layar menyusul kenyataan.
+    if (e.reason === 'already_decided') {
+      pageError.value = t('profile.supportAccess.alreadyDecided')
+      await fetchRows()
+    } else {
+      pageError.value = e.backendMessage || t('profile.supportAccess.actionFailed')
+    }
+  } finally {
+    busyId.value = null
+  }
+}
+
+onMounted(fetchRows)
+</script>
+
+<template>
+  <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
+    <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('profile.supportAccess.title') }}</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 mb-5">{{ t('profile.supportAccess.subtitle') }}</p>
+
+    <!-- Batas yang berlaku ditulis di layar, bukan cuma dijanjikan lisan: sesi hanya-baca,
+         berdurasi terbatas, dan bisa dicabut kapan saja. Persetujuan tanpa keterangan batasnya
+         bukan persetujuan yang berarti. -->
+    <AppAlert variant="info" :message="t('profile.supportAccess.guarantee')" class="mb-5" />
+
+    <AppAlert v-if="pageError" variant="error" :message="pageError" class="mb-4" />
+
+    <div v-if="loading" class="py-8 flex items-center justify-center text-gray-400">
+      <svg class="animate-spin w-6 h-6" fill="none" viewBox="0 0 24 24">
+        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/>
+        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"/>
+      </svg>
+    </div>
+
+    <template v-else>
+      <AppEmptyState v-if="!rows.length" :label="t('profile.supportAccess.empty')">
+        <template #icon><LifeBuoy class="w-6 h-6 text-gray-400 dark:text-gray-500" :stroke-width="1.5" /></template>
+      </AppEmptyState>
+
+      <!-- Menunggu keputusan -->
+      <ul v-if="pending.length" class="space-y-3 mb-6">
+        <li
+          v-for="row in pending"
+          :key="row.id"
+          class="p-4 rounded-lg border border-amber-200 dark:border-amber-800 bg-amber-50 dark:bg-amber-900/20"
+        >
+          <p class="text-sm font-medium text-gray-900 dark:text-white">
+            {{ t('profile.supportAccess.requestedBy', { name: impersonatorName(row) }) }}
+          </p>
+          <p class="text-sm text-gray-600 dark:text-gray-300 mt-1">{{ row.reason }}</p>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-1">
+            {{ t('profile.supportAccess.durationMeta', { minutes: row.duration_minutes }) }}
+            · {{ fmtDateTime(row.created_at) }}
+          </p>
+          <div class="flex items-center gap-2 mt-3">
+            <AppButton variant="primary" size="sm" :loading="busyId === row.id" @click="act(row, 'approve')">
+              {{ t('profile.supportAccess.approve') }}
+            </AppButton>
+            <AppButton variant="secondary" size="sm" :disabled="busyId === row.id" @click="act(row, 'reject')">
+              {{ t('profile.supportAccess.reject') }}
+            </AppButton>
+          </div>
+        </li>
+      </ul>
+
+      <!-- Riwayat + pencabutan -->
+      <ul v-if="history.length" class="divide-y divide-gray-100 dark:divide-gray-700">
+        <li v-for="row in history" :key="row.id" class="flex flex-wrap items-center justify-between gap-3 py-3">
+          <div class="min-w-0">
+            <p class="text-sm text-gray-800 dark:text-gray-200">{{ impersonatorName(row) }}</p>
+            <p class="text-xs text-gray-500 dark:text-gray-400">
+              {{ row.reason }}
+            </p>
+            <p class="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
+              {{ row.expires_at
+                ? t('profile.supportAccess.expiresAt', { time: fmtDateTime(row.expires_at) })
+                : fmtDateTime(row.created_at) }}
+            </p>
+          </div>
+          <div class="flex items-center gap-2 shrink-0">
+            <AppBadge :color="STATUS_COLOR[row.status] ?? 'gray'">
+              {{ t(`profile.supportAccess.status.${row.status}`) }}
+            </AppBadge>
+            <!-- Pencabutan hanya ditawarkan saat masih ada yang bisa dicabut. Menampilkannya
+                 pada izin yang sudah mati membuat user mengira aksesnya masih terbuka. -->
+            <AppIconButton
+              v-if="['approved', 'active'].includes(row.status)"
+              :icon="Trash2"
+              :label="t('profile.supportAccess.revoke')"
+              variant="danger"
+              :loading="busyId === row.id"
+              @click="act(row, 'revoke')"
+            />
+          </div>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>

package/src/pages/profile/partials/TrustedDevicesCard.vue

@@ -0,0 +1,141 @@
+<script setup>
+// Perangkat tepercaya 2FA — daftar perangkat yang boleh MELEWATI langkah kode TOTP (password tetap
+// ditanya, batas device tetap berlaku). Self-scoped `/profile/2fa/trusted-devices`, jadi tiap
+// app memakai kartu yang sama.
+//
+// Kepercayaan hidup sebagai cookie httpOnly milik backend; kartu ini tak pernah membaca cookie
+// itu — ia hanya menampilkan catatan server & mencabutnya. Mencabut tak butuh password: yang
+// terjadi hanya langkah kode ditanya lagi, bukan sesuatu yang bisa disalahgunakan.
+//
+// Daftar bisa kosong tiba-tiba tanpa aksi di layar ini: backend mencabut SEMUA perangkat saat
+// 2FA dimatikan, password diganti/di-reset, atau recovery code dipakai.
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { twoFactorApi } from '@initsolusidigital/worksuite-core/api/endpoints/twoFactor.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { formatDateTime } from '@initsolusidigital/worksuite-core/utils/datetime.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppIconButton from '@initsolusidigital/worksuite-ui/AppIconButton.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppEmptyState from '@initsolusidigital/worksuite-ui/AppEmptyState.vue'
+import { MonitorSmartphone, Trash2 } from '@lucide/vue'
+
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const { pushToast } = useToast()
+
+const loading = ref(true)
+const error = ref('')
+const devices = ref([])
+const allowed = ref(true)
+const days = ref(30)
+const busyId = ref(null)
+const busyAll = ref(false)
+
+// `remember_device_allowed` di /auth/me = gabungan kebijakan SEMUA tenant orang ini (paling ketat
+// menang); `allowed` dari endpoint daftar memuat hal yang sama — dipakai keduanya supaya catatan
+// tampil walau daftar gagal dimuat.
+const policyBlocked = computed(() =>
+  authStore.twoFactor?.remember_device_allowed === false || allowed.value === false
+)
+
+async function load() {
+  loading.value = true
+  error.value = ''
+  try {
+    const { data } = await twoFactorApi.trustedDevices()
+    const d = data.data ?? data
+    devices.value = Array.isArray(d.devices) ? d.devices : []
+    allowed.value = d.allowed !== false
+    if (Number(d.days) > 0) days.value = Number(d.days)
+  } catch (err) {
+    error.value = normalizeApiError(err).backendMessage || t('profile.twoFactor.trusted.loadFailed')
+  } finally {
+    loading.value = false
+  }
+}
+
+async function revoke(id) {
+  busyId.value = id
+  try {
+    await twoFactorApi.revokeTrustedDevice(id)
+    devices.value = devices.value.filter(x => x.id !== id)
+    pushToast({ title: t('profile.twoFactor.trusted.revoked'), variant: 'success' })
+    authStore.fetchUser?.()
+  } catch (err) {
+    // 404 = sudah dicabut di tempat lain — daftar cukup disegarkan, bukan ditampilkan sebagai galat.
+    if (normalizeApiError(err).status === 404) return load()
+    pushToast({ title: t('profile.twoFactor.trusted.revokeFailed'), variant: 'alert' })
+  } finally {
+    busyId.value = null
+  }
+}
+
+async function revokeAll() {
+  busyAll.value = true
+  try {
+    await twoFactorApi.revokeAllTrustedDevices()
+    devices.value = []
+    pushToast({ title: t('profile.twoFactor.trusted.revokedAll'), variant: 'success' })
+    authStore.fetchUser?.()
+  } catch {
+    pushToast({ title: t('profile.twoFactor.trusted.revokeFailed'), variant: 'alert' })
+  } finally {
+    busyAll.value = false
+  }
+}
+
+function fmt(v) {
+  return v ? formatDateTime(v, locale.value) : '—'
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <div class="mt-6 rounded-lg border border-gray-200 dark:border-gray-700 p-4">
+    <div class="flex flex-wrap items-start justify-between gap-3">
+      <div>
+        <h4 class="text-sm font-semibold text-gray-900 dark:text-white flex items-center gap-2">
+          <MonitorSmartphone class="w-4 h-4 text-gray-400" />{{ t('profile.twoFactor.trusted.title') }}
+        </h4>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.twoFactor.trusted.subtitle', { days }) }}</p>
+      </div>
+      <AppButton
+        v-if="devices.length > 1"
+        variant="secondary"
+        size="sm"
+        :loading="busyAll"
+        @click="revokeAll"
+      >{{ t('profile.twoFactor.trusted.revokeAll') }}</AppButton>
+    </div>
+
+    <AppAlert v-if="policyBlocked" variant="info" :message="t('profile.twoFactor.trusted.policyBlocked')" class="mt-3" />
+    <AppAlert v-if="error" variant="error" :message="error" class="mt-3" />
+
+    <p v-if="loading" class="mt-3 text-sm text-gray-400">{{ t('common.loading') }}</p>
+
+    <AppEmptyState
+      v-else-if="!devices.length && !error"
+      class="mt-3"
+      :label="t('profile.twoFactor.trusted.emptyTitle')"
+      :description="t('profile.twoFactor.trusted.emptyDesc')"
+    />
+
+    <ul v-else-if="devices.length" class="mt-3 divide-y divide-gray-100 dark:divide-gray-700">
+      <li v-for="d in devices" :key="d.id" class="py-3 flex flex-wrap items-start justify-between gap-3">
+        <div class="min-w-0">
+          <p class="text-sm font-medium text-gray-900 dark:text-white break-words">{{ d.label || t('profile.twoFactor.trusted.unknownDevice') }}</p>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
+            <span v-if="d.ip_last">{{ t('profile.twoFactor.trusted.ipLast') }}: {{ d.ip_last }} · </span>
+            {{ t('profile.twoFactor.trusted.lastUsed') }}: {{ fmt(d.last_used_at) }} ·
+            {{ t('profile.twoFactor.trusted.expires') }}: {{ fmt(d.expires_at) }}
+          </p>
+        </div>
+        <AppIconButton :icon="Trash2" :label="t('profile.twoFactor.trusted.revoke')" variant="danger" :loading="busyId === d.id" @click="revoke(d.id)" />
+      </li>
+    </ul>
+  </div>
+</template>

package/src/pages/profile/partials/TwoFactorSection.vue

@@ -0,0 +1,304 @@
+<script setup>
+// Verifikasi Dua Langkah (2FA TOTP) — kontrak `pl3-two-factor-and-google-login.md` §3.
+// Endpoint-nya self-scoped tanpa gate modul (pola `/profile/*`), jadi setiap app memakai
+// layar yang sama.
+//
+// **Enrolment DUA langkah, dan itu disengaja:** rahasia dibuat dulu (`start`), 2FA baru menggigit
+// sesudah user membuktikan aplikasinya menyimpan rahasia itu (`confirm`). Kalau langsung menggigit,
+// orang yang menutup tab di tengah jalan akan terkunci oleh rahasia yang tak pernah ia simpan.
+//
+// ⚠️ **Delapan recovery code tampil SEKALI** (pola `badge_token`) — tak ada endpoint untuk
+// membacanya lagi. Karena itu ada langkah "sudah saya simpan" yang harus ditekan, bukan sekadar
+// tombol tutup: kode yang hilang berarti akun terkunci saat ponselnya hilang.
+import { ref, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { twoFactorApi } from '@initsolusidigital/worksuite-core/api/endpoints/twoFactor.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.vue'
+import TrustedDevicesCard from './TrustedDevicesCard.vue'
+import { ShieldCheck, ShieldOff, KeyRound } from '@lucide/vue'
+
+const { t } = useI18n()
+const authStore = useAuthStore()
+const { pushToast } = useToast()
+
+const status = computed(() => authStore.twoFactor ?? { enabled: false, required: false, enrollment_required: false, recovery_codes_left: 0 })
+const aktif = computed(() => status.value.enabled === true)
+const wajib = computed(() => status.value.required === true)
+const sisaKode = computed(() => Number(status.value.recovery_codes_left ?? 0))
+
+const busy = ref(false)
+const formError = ref('')
+
+// Alur aktivasi: 'password' → 'scan' → (recovery codes)
+const langkah = ref('')            // '' = tak sedang enrol
+const password = ref('')
+const secret = ref('')
+const otpauthUri = ref('')
+// QR digambar SENDIRI di sini, bukan lewat `AppSecretReveal` — komponen itu MODAL sekali-tampil
+// (pola `badge_token`), dan memakainya di sini menutupi field kode di belakangnya: penulis harus
+// menutup modal untuk mengetik, sementara menutupnya membatalkan enrolmen. Terbukti saat uji
+// runtime pertama. Pustaka `qrcode` sudah jadi dependency repo ini (dipakai komponen itu juga).
+const qrDataUrl = ref('')
+const code = ref('')
+
+// Kode pemulihan yang sedang ditampilkan (sekali tampil) + gerbang "sudah saya simpan"
+const recoveryCodes = ref([])
+const sudahDisimpan = ref(false)
+
+const showDisable = ref(false)
+const showRegenerate = ref(false)
+const passwordAksi = ref('')
+
+function bersih() {
+  langkah.value = ''
+  password.value = ''
+  secret.value = ''
+  otpauthUri.value = ''
+  qrDataUrl.value = ''
+  code.value = ''
+  formError.value = ''
+}
+
+function pesanGalat(err, fallbackKey) {
+  const e = normalizeApiError(err)
+  if (e.reason === 'invalid_password') return t('profile.twoFactor.invalidPassword')
+  if (e.reason === 'two_factor_required_by_policy') return t('profile.twoFactor.requiredByPolicy')
+  return e.backendMessage || t(fallbackKey)
+}
+
+async function mulai() {
+  if (!password.value || busy.value) return
+  busy.value = true
+  formError.value = ''
+  try {
+    const { data } = await twoFactorApi.start(password.value)
+    const d = data.data ?? data
+    secret.value = d.secret ?? ''
+    otpauthUri.value = d.otpauth_uri ?? ''
+    langkah.value = 'scan'
+    password.value = ''
+    try {
+      const QRCode = (await import('qrcode')).default
+      qrDataUrl.value = await QRCode.toDataURL(otpauthUri.value, { width: 220, margin: 1 })
+    } catch {
+      // Gagal menggambar QR BUKAN alasan menggagalkan enrolmen: kunci manual di bawahnya cukup
+      // untuk menambahkan akun ke aplikasi authenticator mana pun.
+      qrDataUrl.value = ''
+    }
+  } catch (err) {
+    formError.value = pesanGalat(err, 'profile.twoFactor.startFailed')
+  } finally {
+    busy.value = false
+  }
+}
+
+async function konfirmasi() {
+  if (!code.value.trim() || busy.value) return
+  busy.value = true
+  formError.value = ''
+  try {
+    const { data } = await twoFactorApi.confirm(code.value.trim())
+    const d = data.data ?? data
+    recoveryCodes.value = d.recovery_codes ?? []
+    sudahDisimpan.value = false
+    bersih()
+    // `/auth/me` disegarkan supaya status (dan `recovery_codes_left`) di seluruh app ikut benar —
+    // blok `two_factor` hidup di sessionMeta, bukan di layar ini.
+    await authStore.fetchUser()
+    pushToast({ title: t('profile.twoFactor.enabled'), variant: 'success' })
+  } catch (err) {
+    formError.value = pesanGalat(err, 'profile.twoFactor.confirmFailed')
+  } finally {
+    busy.value = false
+  }
+}
+
+async function cetakUlang() {
+  if (!passwordAksi.value || busy.value) return
+  busy.value = true
+  formError.value = ''
+  try {
+    const { data } = await twoFactorApi.regenerateRecoveryCodes(passwordAksi.value)
+    const d = data.data ?? data
+    recoveryCodes.value = d.recovery_codes ?? []
+    sudahDisimpan.value = false
+    showRegenerate.value = false
+    passwordAksi.value = ''
+    await authStore.fetchUser()
+  } catch (err) {
+    formError.value = pesanGalat(err, 'profile.twoFactor.regenerateFailed')
+  } finally {
+    busy.value = false
+  }
+}
+
+async function matikan() {
+  if (!passwordAksi.value || busy.value) return
+  busy.value = true
+  formError.value = ''
+  try {
+    await twoFactorApi.disable(passwordAksi.value)
+    showDisable.value = false
+    passwordAksi.value = ''
+    await authStore.fetchUser()
+    pushToast({ title: t('profile.twoFactor.disabled'), variant: 'success' })
+  } catch (err) {
+    formError.value = pesanGalat(err, 'profile.twoFactor.disableFailed')
+  } finally {
+    busy.value = false
+  }
+}
+
+function salinSecret() {
+  navigator.clipboard?.writeText(secret.value)
+  pushToast({ title: t('profile.twoFactor.secretCopied'), variant: 'success' })
+}
+
+function salinKode() {
+  navigator.clipboard?.writeText(recoveryCodes.value.join('\n'))
+  pushToast({ title: t('profile.twoFactor.copied'), variant: 'success' })
+}
+
+function unduhKode() {
+  const blob = new Blob([recoveryCodes.value.join('\n')], { type: 'text/plain' })
+  const url = URL.createObjectURL(blob)
+  const a = document.createElement('a')
+  a.href = url
+  a.download = 'worksuite-recovery-codes.txt'
+  a.click()
+  setTimeout(() => URL.revokeObjectURL(url), 30_000)
+}
+</script>
+
+<template>
+  <section class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-6">
+    <div class="flex flex-wrap items-start justify-between gap-3 mb-4">
+      <div>
+        <div class="flex items-center gap-2">
+          <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('profile.twoFactor.title') }}</h2>
+          <AppBadge :color="aktif ? 'green' : 'gray'">{{ t(aktif ? 'profile.twoFactor.on' : 'profile.twoFactor.off') }}</AppBadge>
+          <AppBadge v-if="wajib" color="amber">{{ t('profile.twoFactor.requiredBadge') }}</AppBadge>
+        </div>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.twoFactor.subtitle') }}</p>
+        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 max-w-prose">{{ t('profile.twoFactor.scopeNote') }}</p>
+      </div>
+      <div class="flex flex-wrap gap-2">
+        <AppButton v-if="!aktif && !langkah" variant="primary" size="sm" @click="langkah = 'password'">
+          <ShieldCheck class="w-4 h-4" />{{ t('profile.twoFactor.enable') }}
+        </AppButton>
+        <template v-if="aktif">
+          <AppButton variant="secondary" size="sm" @click="showRegenerate = true">
+            <KeyRound class="w-4 h-4" />{{ t('profile.twoFactor.regenerate') }}
+          </AppButton>
+          <!-- Tombol Matikan DISEMBUNYIKAN saat kebijakan mewajibkan — tapi 422-nya tetap
+               ditangani: kebijakan bisa berubah di tab lain, dan tombol yang tampil lalu ditolak
+               lebih membingungkan daripada tombol yang memang tak ada. -->
+          <AppButton v-if="!wajib" variant="danger" size="sm" @click="showDisable = true">
+            <ShieldOff class="w-4 h-4" />{{ t('profile.twoFactor.disable') }}
+          </AppButton>
+        </template>
+      </div>
+    </div>
+
+    <AppAlert v-if="formError" variant="error" :message="formError" class="mb-4" />
+    <AppAlert
+      v-if="status.enrollment_required"
+      variant="warning"
+      :message="t('profile.twoFactor.enrollmentRequired')"
+      class="mb-4"
+    />
+    <!-- Peringatan HALUS di bawah 3, bukan blokir: kode habis baru menggigit saat ponselnya hilang,
+         dan saat itu sudah terlambat untuk mencetak ulang. -->
+    <AppAlert
+      v-else-if="aktif && sisaKode < 3"
+      variant="warning"
+      :message="t('profile.twoFactor.lowRecovery', { n: sisaKode })"
+      class="mb-4"
+    />
+
+    <!-- Langkah 1 — password -->
+    <div v-if="langkah === 'password'" class="max-w-md space-y-3">
+      <p class="text-sm text-gray-600 dark:text-gray-300">{{ t('profile.twoFactor.passwordPrompt') }}</p>
+      <AppInput v-model="password" type="password" :label="t('profile.twoFactor.password')" required @keydown.enter="mulai" />
+      <div class="flex gap-2">
+        <AppButton variant="primary" :loading="busy" :disabled="!password" @click="mulai">{{ t('common.next') }}</AppButton>
+        <AppButton variant="secondary" :disabled="busy" @click="bersih">{{ t('common.cancel') }}</AppButton>
+      </div>
+    </div>
+
+    <!-- Langkah 2 — pindai & konfirmasi -->
+    <div v-else-if="langkah === 'scan'" class="max-w-md space-y-3">
+      <p class="text-sm text-gray-600 dark:text-gray-300">{{ t('profile.twoFactor.scanPrompt') }}</p>
+      <!-- QR digambar DI SINI dari `otpauth_uri` (backend sengaja tak memasang pustaka gambar).
+           Kunci manual tetap ditampilkan: pemindaian gagal itu biasa (kamera mati, aplikasi
+           desktop), dan tanpa kunci itu enrolmen buntu. -->
+      <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-3 flex flex-wrap items-center gap-4">
+        <img v-if="qrDataUrl" :src="qrDataUrl" :alt="t('profile.twoFactor.scanTitle')" class="w-40 h-40 rounded bg-white p-1" />
+        <div class="min-w-0 flex-1">
+          <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">{{ t('profile.twoFactor.manualLabel') }}</p>
+          <code class="block break-all text-sm font-mono text-gray-800 dark:text-gray-100">{{ secret }}</code>
+          <AppButton variant="secondary" size="sm" class="mt-2" @click="salinSecret">{{ t('common.copy') }}</AppButton>
+        </div>
+      </div>
+      <AppInput v-model="code" :label="t('profile.twoFactor.codeLabel')" inputmode="numeric" maxlength="6" required @keydown.enter="konfirmasi" />
+      <div class="flex gap-2">
+        <AppButton variant="primary" :loading="busy" :disabled="!code.trim()" @click="konfirmasi">{{ t('profile.twoFactor.activate') }}</AppButton>
+        <AppButton variant="secondary" :disabled="busy" @click="bersih">{{ t('common.cancel') }}</AppButton>
+      </div>
+    </div>
+
+    <!-- Perangkat tepercaya hanya berarti saat 2FA aktif; tanpa 2FA tak ada langkah kode yang bisa
+         dilewati, dan kartu kosong di sana hanya membingungkan. -->
+    <TrustedDevicesCard v-if="aktif && !langkah" />
+
+    <!-- Recovery code — TAMPIL SEKALI. Modal tak bisa ditutup sebelum dinyatakan tersimpan. -->
+    <AppModal
+      v-if="recoveryCodes.length"
+      :title="t('profile.twoFactor.recoveryTitle')"
+      size="md"
+      @close="sudahDisimpan && (recoveryCodes = [])"
+    >
+      <AppAlert variant="warning" :message="t('profile.twoFactor.recoveryWarning')" class="mb-3" />
+      <div class="grid grid-cols-2 gap-2 font-mono text-sm">
+        <code v-for="k in recoveryCodes" :key="k" class="px-2 py-1 rounded bg-gray-100 dark:bg-gray-700 text-gray-800 dark:text-gray-100">{{ k }}</code>
+      </div>
+      <div class="mt-3 flex flex-wrap gap-2">
+        <AppButton variant="secondary" size="sm" @click="salinKode">{{ t('common.copy') }}</AppButton>
+        <AppButton variant="secondary" size="sm" @click="unduhKode">{{ t('profile.twoFactor.downloadCodes') }}</AppButton>
+      </div>
+      <label class="mt-4 flex items-start gap-2 text-sm text-gray-700 dark:text-gray-200">
+        <input v-model="sudahDisimpan" type="checkbox" class="mt-0.5 rounded border-gray-300 dark:border-gray-600 text-primary-600" />
+        <span>{{ t('profile.twoFactor.savedConfirm') }}</span>
+      </label>
+      <template #footer>
+        <AppButton variant="primary" :disabled="!sudahDisimpan" @click="recoveryCodes = []">{{ t('profile.twoFactor.doneSaved') }}</AppButton>
+      </template>
+    </AppModal>
+
+    <!-- Konfirmasi password: cetak ulang & matikan -->
+    <AppModal v-if="showRegenerate" :title="t('profile.twoFactor.regenerate')" size="sm" @close="showRegenerate = false; passwordAksi = ''">
+      <AppAlert variant="warning" :message="t('profile.twoFactor.regenerateWarning')" class="mb-3" />
+      <AppInput v-model="passwordAksi" type="password" :label="t('profile.twoFactor.password')" required @keydown.enter="cetakUlang" />
+      <template #footer>
+        <AppButton variant="secondary" :disabled="busy" @click="showRegenerate = false; passwordAksi = ''">{{ t('common.cancel') }}</AppButton>
+        <AppButton variant="primary" :loading="busy" :disabled="!passwordAksi" @click="cetakUlang">{{ t('profile.twoFactor.regenerate') }}</AppButton>
+      </template>
+    </AppModal>
+
+    <AppModal v-if="showDisable" :title="t('profile.twoFactor.disable')" size="sm" @close="showDisable = false; passwordAksi = ''">
+      <AppAlert variant="warning" :message="t('profile.twoFactor.disableWarning')" class="mb-3" />
+      <AppInput v-model="passwordAksi" type="password" :label="t('profile.twoFactor.password')" required @keydown.enter="matikan" />
+      <template #footer>
+        <AppButton variant="secondary" :disabled="busy" @click="showDisable = false; passwordAksi = ''">{{ t('common.cancel') }}</AppButton>
+        <AppButton variant="danger" :loading="busy" :disabled="!passwordAksi" @click="matikan">{{ t('profile.twoFactor.disable') }}</AppButton>
+      </template>
+    </AppModal>
+  </section>
+</template>

package/src/shellSetup.js

@@ -0,0 +1,46 @@
+import { registerPackageMessages } from '@initsolusidigital/worksuite-core/plugins/i18n.js'
+import id from './locales/id.json'
+import en from './locales/en.json'
+
+// Hal yang berbeda per app dan dibaca berkas shell: data menu, peta breadcrumb, badge menu, dan
+// reaksi sesudah logout. Berkas paket tak boleh mengimpor modul app, jadi semuanya masuk lewat
+// satu panggilan ini di `main.js`, sesudah `configureWorksuite()`.
+//
+// Konfigurasi dibaca saat dipakai, tak pernah di tingkat atas modul: impor dievaluasi sebelum
+// badan `main.js` berjalan, jadi pembacaan di tingkat atas selalu menemukan konfigurasi kosong.
+let config = null
+
+/**
+ * @param {object} options
+ * @param {Array} options.navigation isi `data/navigation.js` app: grup menu sidebar.
+ * @param {() => { breadcrumbs: import('vue').ComputedRef<Array> }} options.useBreadcrumbs composable
+ *   breadcrumb app (`useAppBreadcrumbs`).
+ * @param {{ [key: string]: () => import('vue').Ref<number> }} [options.navigationBadges] pembuat
+ *   ref angka badge per `badgeKey` item menu.
+ * @param {(can: Function) => string | null} [options.tenantSettingsEntryRoute] nama rute seksi
+ *   Setelan Tenant pertama yang boleh dibuka (rute ber-param `companyId`); tanpa opsi ini ikon
+ *   Setelan Tenant tak tampil di navbar.
+ * @param {(ctx: { router: import('vue-router').Router, redirect: () => void }) => void} [options.onLogout]
+ *   dipanggil sesudah sesi diakhiri dari menu user. `redirect()` = perilaku bawaan (pintu
+ *   identitas, atau rute `login` app bila pintu itu tak diketahui).
+ */
+export function configureShell(options) {
+  if (!Array.isArray(options?.navigation)) throw new Error('configureShell: navigation wajib diisi (isi data/navigation.js)')
+  if (typeof options.useBreadcrumbs !== 'function') throw new Error('configureShell: useBreadcrumbs wajib diisi (composable useAppBreadcrumbs)')
+  config = { ...options }
+}
+
+registerPackageMessages('shell', { id, en })
+
+function required() {
+  if (!config) {
+    throw new Error('worksuite-shell belum dikonfigurasi: panggil configureShell({ navigation, useBreadcrumbs }) di main.js')
+  }
+  return config
+}
+
+export const getNavigation = () => required().navigation
+export const getNavigationBadges = () => required().navigationBadges ?? {}
+export const getBreadcrumbs = () => required().useBreadcrumbs
+export const getTenantSettingsEntryRoute = () => required().tenantSettingsEntryRoute ?? null
+export const getLogoutHandler = () => required().onLogout ?? null