@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

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

@@ -0,0 +1,87 @@
+<script setup>
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { usePreferences } from '@initsolusidigital/worksuite-core/composables/usePreferences.js'
+import { computed } from 'vue'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+import AppToggle from '@initsolusidigital/worksuite-ui/AppToggle.vue'
+
+// Section "Preferensi" — bahasa + tema. PER-USER, tersimpan BACKEND (users.preferences via
+// PUT /profile/preferences) → SYNC lintas app/browser/device. usePreferences.save()
+// apply lokal seketika + cache localStorage + PUT. Berlaku instan, tanpa tombol simpan.
+const { t, locale } = useI18n()
+const appStore = useAppStore()
+const prefs = usePreferences()
+
+// Daftar bahasa + kelas bendera `flag-icons` — SAMA PERSIS dengan AppLanguagePopup di navbar.
+// Dua pintu untuk satu setelan (popup navbar & halaman Profil) harus terlihat sama; kalau tidak,
+// user menyangka keduanya mengatur hal yang berbeda.
+// ⚠️ Nama bahasa diambil dari kamus (`lang.*_full`), BUKAN ditulis tetap seperti sebelumnya:
+// nilai tetap membuat "English" tampil begitu saja walau antarmuka berbahasa Indonesia,
+// sementara popup navbar di layar yang sama menampilkan "Inggris (AS)".
+const LANGS = computed(() => [
+  { value: 'id', label: t('lang.id_full'), flag: 'fi fi-id' },
+  { value: 'en', label: t('lang.en_full'), flag: 'fi fi-us' },
+])
+
+function setLang(code) {
+  prefs.save({ locale: code })
+}
+function toggleTheme() {
+  prefs.save({ theme: appStore.darkMode ? 'light' : 'dark' })
+}
+</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.preferences.title') }}</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 mb-5">{{ t('profile.preferences.subtitle') }}</p>
+
+    <div class="divide-y divide-gray-100 dark:divide-gray-700">
+      <!-- Bahasa -->
+      <div class="flex items-center justify-between gap-4 py-4 first:pt-0">
+        <div>
+          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ t('profile.preferences.language') }}</p>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.preferences.languageHint') }}</p>
+        </div>
+        <div class="w-56 shrink-0">
+          <!-- AppCombobox, bukan AppSelect: daftar opsi <select> digambar OS sehingga bendera
+               mustahil dirender di dalamnya. Slot `option-icon`
+               menaruh bendera di daftar DAN di label terpilih sekaligus. -->
+          <AppCombobox
+            :model-value="locale"
+            :options="LANGS"
+            option-value="value"
+            option-label="label"
+            :aria-label="t('profile.preferences.language')"
+            :placeholder="''"
+            hide-clear
+            dense
+            @update:model-value="setLang"
+          >
+            <template #option-icon="{ option }">
+              <span
+                :class="option.flag"
+                style="width:20px;height:14px;border-radius:2px;flex-shrink:0;display:inline-block;"
+              />
+            </template>
+          </AppCombobox>
+        </div>
+      </div>
+
+      <!-- Tema -->
+      <div class="flex items-center justify-between gap-4 py-4">
+        <div>
+          <p class="text-sm font-medium text-gray-800 dark:text-gray-200">{{ t('profile.preferences.theme') }}</p>
+          <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.preferences.themeHint') }}</p>
+        </div>
+        <AppToggle
+          color="blue"
+          :model-value="appStore.darkMode"
+          :label="appStore.darkMode ? t('profile.preferences.dark') : t('profile.preferences.light')"
+          @toggle="toggleTheme"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,93 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { authApi } from '@initsolusidigital/worksuite-core/api/endpoints/auth.js'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { useFormSubmit } from '@initsolusidigital/worksuite-core/composables/useFormSubmit.js'
+import { useRetryCountdown } from '@initsolusidigital/worksuite-core/composables/useRetryCountdown.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import TwoFactorSection from './TwoFactorSection.vue'
+import { Mail, Send } from '@lucide/vue'
+
+// Password diganti lewat tautan ke email pemilik akun, bukan di layar ini. Sesi yang tertinggal
+// terbuka di perangkat orang lain tak cukup untuk mengganti password: yang dibutuhkan kotak masuk
+// email-nya. Tautan membuka layar atur ulang di pintu identitas, sama dengan alur lupa password.
+const { t } = useI18n()
+const authStore = useAuthStore()
+const { formError, saving, retryIn, submit } = useFormSubmit()
+
+const email = computed(() => authStore.user?.email ?? '')
+
+// Masa berlaku tautan mengikuti `auth.passwords.users.expire` backend (bawaan 60 menit). Angka
+// sebenarnya tertulis di email yang diterima; kalimat di layar ini hanya pengantar.
+const LINK_TTL_MINUTES = 60
+
+// Backend menolak permintaan kedua untuk identitas yang sama selama 60 detik TANPA memberi tahu:
+// `POST /forgot-password` selalu menjawab 200 supaya tak bisa dipakai menebak email terdaftar.
+// Tombol yang tetap aktif di jeda itu menjanjikan email yang tak pernah dikirim, jadi tombolnya
+// dikunci sepanjang jeda yang sama.
+const RESEND_COOLDOWN_SECONDS = 60
+const cooldown = useRetryCountdown()
+const sent = computed(() => cooldown.active.value)
+const waitSeconds = computed(() => Math.max(cooldown.seconds.value, retryIn.value ?? 0))
+
+async function sendLink() {
+  if (!email.value || waitSeconds.value > 0) return
+  await submit(() => authApi.forgotPassword(email.value), {
+    successKey: 'profile.security.linkSent',
+    errorKey: 'profile.security.sendError',
+    onSuccess: () => cooldown.start(RESEND_COOLDOWN_SECONDS),
+  })
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <section class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm overflow-clip">
+      <header class="px-6 py-4 border-b border-gray-100 dark:border-gray-700">
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('profile.security.title') }}</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.security.subtitle') }}</p>
+      </header>
+
+      <div class="px-6 py-5 space-y-4">
+        <AppAlert v-if="formError" variant="error" :message="formError" />
+
+        <p class="text-sm text-gray-700 dark:text-gray-300">
+          {{ t('profile.security.explain', { minutes: LINK_TTL_MINUTES }) }}
+        </p>
+
+        <div class="flex items-center gap-3 p-4 rounded-lg bg-gray-50 dark:bg-gray-900/40 border border-gray-200 dark:border-gray-700">
+          <span class="flex items-center justify-center w-9 h-9 rounded-full bg-blue-50 dark:bg-blue-900/30 text-blue-600 dark:text-blue-400 shrink-0" aria-hidden="true">
+            <Mail class="w-4 h-4" />
+          </span>
+          <div class="min-w-0">
+            <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('profile.security.sentTo') }}</p>
+            <p class="text-sm font-medium text-gray-900 dark:text-white truncate" :title="email">{{ email }}</p>
+          </div>
+        </div>
+
+        <!-- Status kiriman diumumkan pembaca layar; toast saja hilang sebelum sempat dibaca. -->
+        <p v-if="sent" class="text-sm text-green-700 dark:text-green-400" role="status">
+          {{ t('profile.security.sentNote') }}
+        </p>
+
+        <div class="text-xs text-gray-500 dark:text-gray-400 space-y-1">
+          <p>{{ t('profile.security.signOutNote') }}</p>
+          <p>{{ t('profile.security.help') }}</p>
+        </div>
+      </div>
+
+      <footer class="flex justify-end px-6 py-4 bg-gray-50 dark:bg-gray-900/40 border-t border-gray-100 dark:border-gray-700">
+        <AppButton variant="primary" :loading="saving" :disabled="!email || waitSeconds > 0" @click="sendLink">
+          <Send class="w-4 h-4 mr-1.5" aria-hidden="true" />
+          {{ waitSeconds > 0 ? t('profile.security.resendIn', { seconds: waitSeconds }) : t('profile.security.sendButton') }}
+        </AppButton>
+      </footer>
+    </section>
+
+    <!-- 2FA di layar yang SAMA dengan password: keduanya "cara masuk ke akun ini", dan memisahkannya
+         jadi tab sendiri membuat orang mencari 2FA di Preferensi. -->
+    <TwoFactorSection />
+  </div>
+</template>

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

@@ -0,0 +1,418 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Monitor, Tablet, Smartphone, HelpCircle, History, LogOut, ChevronRight, ChevronDown, ChevronLeft } from '@lucide/vue'
+import { Icon } from '@iconify/vue'
+import { useAuthStore } from '@initsolusidigital/worksuite-core/stores/auth.js'
+import { usersApi } from '@initsolusidigital/worksuite-core/api/endpoints/users.js'
+import { browserIconData, osIconData } from '@initsolusidigital/worksuite-core/data/deviceIcons.js'
+import { useActivityFieldFormat } from '@initsolusidigital/worksuite-core/composables/useActivityFieldFormat.js'
+import AppExpandableTable from '@initsolusidigital/worksuite-ui/AppExpandableTable.vue'
+import AppEmptyState from '@initsolusidigital/worksuite-ui/AppEmptyState.vue'
+import AppTooltip from '@initsolusidigital/worksuite-ui/AppTooltip.vue'
+import AppIconButton from '@initsolusidigital/worksuite-ui/AppIconButton.vue'
+import AppForceLogoutModal from '@initsolusidigital/worksuite-core/components/ui/AppForceLogoutModal.vue'
+
+const { t, locale } = useI18n()
+const authStore = useAuthStore()
+const { fieldLabel, changeText } = useActivityFieldFormat()
+
+const companyId = computed(() => authStore.user?.company_id)
+const userId    = computed(() => authStore.user?.id)
+
+// ── State tabel utama — sesi login, server-side pagination ────────────────────
+const sessions   = ref([])
+const totalRows  = ref(0)
+const loading    = ref(false)
+const pageError  = ref('')
+const page       = ref(1)
+const perPage    = ref(10)
+
+// ── State operasi per sesi (lazy-load saat di-expand) ──────────────────────────
+const operationsMap   = ref({})  // { [loginId]: [] }
+const opsMeta         = ref({})  // { [loginId]: { page, lastPage, total } } — paginasi log operasi
+const loadingOps      = ref({})
+const opsError        = ref({})
+
+const columns = [
+  { key: 'login_time', label: t('profile.sessions.colLoginTime') },
+  { key: 'device',     label: t('profile.sessions.colDevice') },
+  { key: 'ip_address', label: t('profile.sessions.colIp') },
+  { key: 'status',     label: t('profile.sessions.colStatus'), align: 'right' },
+]
+
+const deviceIcons = { 1: Monitor, 2: Tablet, 3: Smartphone, 4: HelpCircle }
+
+function deviceLabel(deviceType) {
+  return t(`common.deviceType.${deviceType ?? 4}`)
+}
+
+// Tooltip browser — pakai browser_name (BUKAN browser_family) + browser_version.
+// browser_name sudah bersih tanpa versi terbawa (matomo/device-detector). browser_family JUSTRU menyesatkan utk Edge: matomo mengelompokkan Microsoft
+// Edge (Chromium) ke family "Internet Explorer" (short_name "PS" ada di grup IE bawaan matomo) —
+// kalau dipakai, tooltip Edge malah bunyi "Internet Explorer". browser_name granular & akurat
+// ("Microsoft Edge", "Firefox", dst), dipakai juga utk cari icon-nya di browserIconData.
+function browserTooltip(row) {
+  return [row.browser_name, row.browser_version].filter(Boolean).join(' ') || t('common.unknown')
+}
+
+// Tooltip OS — SENGAJA cuma nama family (Windows/macOS/Android/dst), TANPA versi. os_name/
+// os_version dari backend kadang tidak akurat (mis. Windows 11 asli kebaca "Windows 10",
+// Android 16 kebaca "Android 10") — os_family jauh lebih bisa diandalkan krn cuma klasifikasi
+// kasar, tidak coba menebak versi spesifik.
+function osTooltip(row) {
+  return row.os_family || t('common.unknown')
+}
+
+// Status badge — 4 varian: percobaan gagal (password salah)/ditolak (can_access_hub=false) tidak
+// pernah punya sesi aktif/logout, jadi dicek duluan sebelum lihat logged_out_at.
+function sessionStatusLabel(row) {
+  if (row.status === 'failed') return t('common.loginStatus.failed')
+  if (row.status === 'denied') return t('common.loginStatus.denied')
+  if (row.logged_out_at) return t('profile.sessions.statusEnded')
+  // is_current dari backend — dicocokkan dari token Bearer request ini sendiri, bukan tebakan
+  // IP/device (banyak sesi bisa share IP/device yang sama, terutama abis testing/QA)
+  return row.is_current ? t('profile.sessions.statusActiveCurrent') : t('profile.sessions.statusActive')
+}
+
+function sessionStatusClass(row) {
+  if (row.status === 'failed') return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+  if (row.status === 'denied') return 'bg-orange-100 text-orange-700 dark:bg-orange-900/30 dark:text-orange-300'
+  if (row.logged_out_at) return 'bg-gray-100 text-gray-500 dark:bg-gray-700 dark:text-gray-400'
+  // Sesi saat ini dapat ring tipis biar sedikit menonjol dari sesi aktif lain
+  return row.is_current
+    ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300 ring-1 ring-green-400 dark:ring-green-500'
+    : 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+}
+
+// Tooltip kapan terakhir aktif — cuma relevan utk sesi yang benar-benar Aktif (bukan Berakhir/
+// Gagal/Ditolak). last_activity_at di-throttle 5 menit di backend (TrackLastActivity middleware),
+// jadi bukan real-time detik, tapi cukup akurat utk indikasi "masih dipakai atau tidak"
+function sessionStatusTooltip(row) {
+  if (row.status !== 'success' || row.logged_out_at) return ''
+  return row.last_activity_at
+    ? t('common.lastActiveAt', { time: formatDateTime(row.last_activity_at) })
+    : t('common.lastActiveUnknown')
+}
+
+// ── Force Logout (v0.20.1) — sesi sendiri, selalu diizinkan oleh backend ──────
+const forceLogoutTarget = ref(null)
+
+function onForced(updatedSession) {
+  forceLogoutTarget.value = null
+  const idx = sessions.value.findIndex(s => s.id === updatedSession.id)
+  if (idx !== -1) sessions.value[idx] = { ...sessions.value[idx], ...updatedSession }
+}
+
+function formatDateTime(iso) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US', {
+    dateStyle: 'medium',
+    timeStyle: 'short',
+  })
+}
+
+// ── Fetch sesi login milik sendiri ─────────────────────────────────────────────
+// silent=true dipakai oleh polling background (lihat onMounted) — tidak toggle loading/error
+// state biar tabel tidak flicker & tidak menutupi baris yang sedang di-expand tiap refresh
+async function fetchSessions({ silent = false } = {}) {
+  if (!companyId.value || !userId.value) return
+  if (!silent) {
+    loading.value   = true
+    pageError.value = ''
+  }
+  try {
+    const { data } = await usersApi.getLoginSessions(companyId.value, userId.value, {
+      rowsPerPage: perPage.value,
+      page: page.value,
+    })
+    const payload   = data.data
+    sessions.value  = payload?.data ?? []
+    totalRows.value = payload?.total ?? sessions.value.length
+  } catch {
+    if (!silent) pageError.value = t('profile.sessions.loadError')
+  } finally {
+    if (!silent) loading.value = false
+  }
+}
+
+function onPageChange(p) {
+  page.value = p
+  fetchSessions()
+}
+
+function onPerPageChange(val) {
+  perPage.value = val
+  page.value = 1
+  fetchSessions()
+}
+
+// ── Lazy-load operasi saat baris di-expand — paginated per sesi (backend memang
+// paginate sejak awal; sebelumnya hanya halaman pertama yang tampil tanpa pager) ──
+const OPS_PER_PAGE = 15
+
+async function fetchOperations(loginId, page = 1) {
+  loadingOps.value[loginId] = true
+  opsError.value[loginId]   = ''
+  try {
+    const { data } = await usersApi.getLoginOperations(companyId.value, userId.value, loginId, {
+      rowsPerPage: OPS_PER_PAGE,
+      page,
+    })
+    const pagination = data.data ?? {}
+    operationsMap.value[loginId] = pagination.data ?? []
+    opsMeta.value[loginId] = { page, lastPage: pagination.last_page ?? 1, total: pagination.total ?? 0 }
+  } catch {
+    opsError.value[loginId] = t('profile.sessions.expandError')
+  } finally {
+    loadingOps.value[loginId] = false
+  }
+}
+
+// Rentang "Menampilkan X–Y dari Z" utk pager operasi
+function opsFrom(loginId) {
+  const m = opsMeta.value[loginId]
+  return m && m.total ? (m.page - 1) * OPS_PER_PAGE + 1 : 0
+}
+function opsTo(loginId) {
+  const m = opsMeta.value[loginId]
+  return m ? Math.min(m.page * OPS_PER_PAGE, m.total) : 0
+}
+
+async function onExpand(session) {
+  if (operationsMap.value[session.id] !== undefined) return
+  if (loadingOps.value[session.id]) return
+  await fetchOperations(session.id)
+}
+
+// ── Expand detail changed_fields per baris operasi (v0.22.0) — op.id unik global (UUID),
+// jadi 1 Set saja cukup lintas semua sesi, tidak perlu di-key per session.id ──────────────
+const expandedOpIds = ref(new Set())
+
+function isOpExpanded(op) {
+  return expandedOpIds.value.has(op.id)
+}
+
+function toggleOpExpand(op) {
+  const next = new Set(expandedOpIds.value)
+  next.has(op.id) ? next.delete(op.id) : next.add(op.id)
+  expandedOpIds.value = next
+}
+
+// Badge warna per jenis operasi — hijau dibuat, biru diperbarui, merah dihapus
+function operationBadgeClass(operation) {
+  if (operation === 'created') return 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-300'
+  if (operation === 'updated') return 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-300'
+  if (operation === 'deleted') return 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+  return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-300'
+}
+
+// Nama modul ikut bahasa antarmuka — pakai katalog modules.items.* yang sama dgn halaman Roles,
+// fallback ke nama mentah dari backend kalau slug-nya belum ada di katalog (mis. modul baru)
+function translateModule(slug, name) {
+  return t(`modules.items.${slug}`, name)
+}
+
+// Polling ringan tiap 15 detik supaya status Aktif/Berakhir & last_activity_at tetap akurat
+// tanpa user perlu refresh manual — dihentikan saat komponen unmount (pindah tab profil)
+let pollTimer = null
+onMounted(() => {
+  fetchSessions()
+  pollTimer = setInterval(() => fetchSessions({ silent: true }), 15000)
+})
+onUnmounted(() => clearInterval(pollTimer))
+</script>
+
+<template>
+  <!-- Card Riwayat Login — ditumpuk di bawah kartu identitas, bukan tab terpisah -->
+  <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.sessions.title') }}</h2>
+    <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5 mb-4">{{ t('profile.sessions.subtitle') }}</p>
+
+    <div
+      v-if="pageError"
+      class="mb-4 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-lg text-sm text-red-700 dark:text-red-400"
+    >
+      {{ pageError }}
+    </div>
+
+    <AppExpandableTable
+      :columns="columns"
+      :rows="sessions"
+      :loading="loading"
+      :loading-text="t('profile.sessions.loading')"
+      server-side
+      :total-rows="totalRows"
+      :per-page="perPage"
+      @expand="onExpand"
+      @page-change="onPageChange"
+      @per-page-change="onPerPageChange"
+    >
+
+      <template #cell-login_time="{ row }">
+        <span class="text-gray-700 dark:text-gray-300">{{ formatDateTime(row.created_at) }}</span>
+      </template>
+
+      <template #cell-device="{ row }">
+        <!-- Cuma icon (device-type + brand browser + brand OS) — masing-masing tooltip sendiri -->
+        <div class="flex items-center gap-2">
+          <AppTooltip show-on-touch :text="deviceLabel(row.device_type)">
+            <component :is="deviceIcons[row.device_type] ?? HelpCircle" class="w-4 h-4 text-gray-500 dark:text-gray-400 shrink-0" />
+          </AppTooltip>
+          <!-- Brand tidak dikenali → fallback HelpCircle, BUKAN disembunyikan —
+          tooltip tetap tampil (nama mentah dari backend kalau ada, atau "Tidak diketahui"). -->
+          <AppTooltip show-on-touch :text="browserTooltip(row)">
+            <Icon v-if="browserIconData(row.browser_name)" :icon="browserIconData(row.browser_name)" class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0" />
+            <HelpCircle v-else class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0" />
+          </AppTooltip>
+          <AppTooltip show-on-touch :text="osTooltip(row)">
+            <Icon v-if="osIconData(row.os_family)" :icon="osIconData(row.os_family)" class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0" />
+            <HelpCircle v-else class="w-3.5 h-3.5 text-gray-400 dark:text-gray-500 shrink-0" />
+          </AppTooltip>
+        </div>
+      </template>
+
+      <template #cell-ip_address="{ row }">
+        <span class="font-mono text-xs text-gray-500 dark:text-gray-400">{{ row.ip_address ?? '—' }}</span>
+      </template>
+
+      <template #cell-status="{ row }">
+        <div class="flex items-center justify-end gap-2">
+          <AppTooltip show-on-touch :text="sessionStatusTooltip(row)">
+            <span
+              class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium whitespace-nowrap"
+              :class="sessionStatusClass(row)"
+            >
+              {{ sessionStatusLabel(row) }}
+            </span>
+          </AppTooltip>
+          <AppIconButton v-if="row.status === 'success' && !row.logged_out_at" :icon="LogOut" :label="t('common.forceLogout.action')" variant="danger" @click="forceLogoutTarget = row" />
+        </div>
+      </template>
+
+      <!-- ── Expanded row: aktivitas/operasi selama sesi ini ──────────────── -->
+      <template #expanded-row="{ row: session }">
+        <div class="px-4 sm:px-12 py-4">
+
+          <div v-if="loadingOps[session.id]" class="flex items-center gap-2 text-xs text-gray-400 py-2">
+            <svg class="animate-spin w-3.5 h-3.5" 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 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"/>
+            </svg>
+            {{ t('profile.sessions.expandLoading') }}
+          </div>
+
+          <p v-else-if="opsError[session.id]" class="text-xs text-red-500 dark:text-red-400 py-2">
+            {{ opsError[session.id] }}
+          </p>
+
+          <p
+            v-else-if="operationsMap[session.id]?.length === 0"
+            class="text-xs text-gray-400 dark:text-gray-500 py-2"
+          >
+            {{ t('profile.sessions.expandEmpty') }}
+          </p>
+
+          <div v-else-if="operationsMap[session.id]" class="border border-gray-100 dark:border-gray-700/50 rounded-lg overflow-auto scrollbar-rounded max-h-72">
+            <table class="w-full text-xs border-collapse">
+              <thead class="sticky top-0 z-10 bg-gray-50 dark:bg-gray-800">
+                <tr>
+                  <th class="text-left px-3 py-2 font-semibold text-gray-400 dark:text-gray-500 border border-gray-100 dark:border-gray-700/50">{{ t('profile.sessions.colOperation') }}</th>
+                  <th class="text-left px-3 py-2 font-semibold text-gray-400 dark:text-gray-500 border border-gray-100 dark:border-gray-700/50">{{ t('profile.sessions.colDescription') }}</th>
+                  <th class="text-left px-3 py-2 font-semibold text-gray-400 dark:text-gray-500 border border-gray-100 dark:border-gray-700/50">{{ t('profile.sessions.colModule') }}</th>
+                  <th class="text-left px-3 py-2 font-semibold text-gray-400 dark:text-gray-500 border border-gray-100 dark:border-gray-700/50">{{ t('profile.sessions.colTime') }}</th>
+                </tr>
+              </thead>
+              <tbody>
+                <template v-for="(op, idx) in operationsMap[session.id]" :key="op.id">
+                  <tr :class="idx % 2 === 0 ? 'bg-white dark:bg-transparent' : 'bg-gray-50 dark:bg-gray-800/25'">
+                    <td class="px-3 py-2.5 border border-gray-100 dark:border-gray-700/50">
+                      <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium" :class="operationBadgeClass(op.operation)">
+                        {{ t(`common.operation.${op.operation}`, op.operation) }}
+                      </span>
+                    </td>
+                    <td class="px-3 py-2.5 text-gray-700 dark:text-gray-300 border border-gray-100 dark:border-gray-700/50">
+                      <div class="flex items-center gap-1.5">
+                        <span>{{ op.op_description }}</span>
+                        <AppTooltip v-if="op.changed_fields?.length" :text="isOpExpanded(op) ? t('profile.sessions.hideChanges') : t('profile.sessions.viewChanges')">
+                          <button :aria-label="t('common.toggleDetail')"
+                            @click="toggleOpExpand(op)"
+                            class="p-0.5 rounded text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 hover:bg-gray-100 dark:hover:bg-gray-700 transition-colors shrink-0"
+                          >
+                            <ChevronDown v-if="isOpExpanded(op)" class="w-3.5 h-3.5" />
+                            <ChevronRight v-else class="w-3.5 h-3.5" />
+                          </button>
+                        </AppTooltip>
+                      </div>
+                    </td>
+                    <td class="px-3 py-2.5 text-gray-500 dark:text-gray-400 border border-gray-100 dark:border-gray-700/50">{{ op.module ? translateModule(op.module.slug, op.module.name) : '—' }}</td>
+                    <td class="px-3 py-2.5 text-gray-500 dark:text-gray-400 border border-gray-100 dark:border-gray-700/50 whitespace-nowrap">{{ formatDateTime(op.created_at) }}</td>
+                  </tr>
+                  <tr v-if="isOpExpanded(op)" :class="idx % 2 === 0 ? 'bg-white dark:bg-transparent' : 'bg-gray-50 dark:bg-gray-800/25'">
+                    <td colspan="4" class="px-3 py-2.5 border border-gray-100 dark:border-gray-700/50">
+                      <ul v-if="op.changed_fields?.length" class="space-y-1">
+                        <li v-for="cf in op.changed_fields" :key="cf.field" class="text-xs text-gray-600 dark:text-gray-400">
+                          <span class="font-medium text-gray-500 dark:text-gray-400">{{ fieldLabel(cf.field) }}:</span>
+                          {{ changeText(cf) }}
+                        </li>
+                      </ul>
+                      <p v-else class="text-xs text-gray-400 dark:text-gray-500">{{ t('profile.sessions.noChanges') }}</p>
+                    </td>
+                  </tr>
+                </template>
+              </tbody>
+            </table>
+          </div>
+
+          <!-- Pager operasi — hanya tampil kalau memang lebih dari 1 halaman -->
+          <div
+            v-if="!loadingOps[session.id] && (opsMeta[session.id]?.lastPage ?? 1) > 1"
+            class="flex items-center justify-between gap-3 mt-2"
+          >
+            <p class="text-[11px] text-gray-400 dark:text-gray-500">
+              {{ t('common.pagination', { from: opsFrom(session.id), to: opsTo(session.id), total: opsMeta[session.id].total }) }}
+            </p>
+            <div class="flex items-center gap-1">
+              <button
+                type="button"
+                :disabled="opsMeta[session.id].page === 1"
+                :aria-label="t('common.prevPage')"
+                class="p-1 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                @click="fetchOperations(session.id, opsMeta[session.id].page - 1)"
+              >
+                <ChevronLeft class="w-3.5 h-3.5" />
+              </button>
+              <span class="text-[11px] text-gray-500 dark:text-gray-400 tabular-nums">
+                {{ opsMeta[session.id].page }} / {{ opsMeta[session.id].lastPage }}
+              </span>
+              <button
+                type="button"
+                :disabled="opsMeta[session.id].page >= opsMeta[session.id].lastPage"
+                :aria-label="t('common.nextPage')"
+                class="p-1 rounded-md text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-700 disabled:opacity-40 disabled:cursor-not-allowed transition-colors"
+                @click="fetchOperations(session.id, opsMeta[session.id].page + 1)"
+              >
+                <ChevronRight class="w-3.5 h-3.5" />
+              </button>
+            </div>
+          </div>
+
+        </div>
+      </template>
+
+      <template #empty>
+        <AppEmptyState :label="t('profile.sessions.empty')">
+          <template #icon><History class="w-6 h-6 text-gray-400 dark:text-gray-500" :stroke-width="1.5" /></template>
+        </AppEmptyState>
+      </template>
+
+    </AppExpandableTable>
+
+    <AppForceLogoutModal
+      v-if="forceLogoutTarget"
+      :session="forceLogoutTarget"
+      @close="forceLogoutTarget = null"
+      @forced="onForced"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,58 @@
+<script setup>
+import { ref } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { profileApi } from '@initsolusidigital/worksuite-core/api/endpoints/profile.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import SessionsCard from './SessionsCard.vue'
+import DevicesCard from './DevicesCard.vue'
+import { LogOut } from '@lucide/vue'
+
+// Section "Sesi & Perangkat" — riwayat login (SessionsCard existing) + aksi keluar dari semua
+// perangkat lain (self force-logout, kontrak backend). SessionsCard polling 15 dtk akan
+// mencerminkan sesi lain yang berakhir; +key untuk remount instan setelah aksi.
+const { t } = useI18n()
+const { pushToast } = useToast()
+
+const busy = ref(false)
+const cardKey = ref(0) // naikkan → remount SessionsCard (refresh instan pasca logout-others)
+
+async function logoutOthers() {
+  busy.value = true
+  try {
+    const { data } = await profileApi.logoutOthers()
+    const count = data?.data?.revoked_count ?? 0
+    pushToast({
+      title: t('profile.sessionsAction.done'),
+      body: count > 0 ? t('profile.sessionsAction.revoked', { count }) : t('profile.sessionsAction.none'),
+      variant: 'success',
+    })
+    cardKey.value++
+  } catch (err) {
+    pushToast({ title: err.response?.data?.message || t('profile.sessionsAction.error'), variant: 'error' })
+  } finally {
+    busy.value = false
+  }
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Perangkat aktif (dulu halaman terpisah /devices, digabung ke sini) -->
+    <DevicesCard />
+
+    <!-- Aksi keamanan sesi -->
+    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 shadow-sm p-5 flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3">
+      <div>
+        <h2 class="text-lg font-semibold text-gray-900 dark:text-white">{{ t('profile.sessionsAction.title') }}</h2>
+        <p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">{{ t('profile.sessionsAction.subtitle') }}</p>
+      </div>
+      <AppButton variant="secondary" :loading="busy" @click="logoutOthers">
+        <LogOut class="w-3.5 h-3.5" />{{ t('profile.sessionsAction.button') }}
+      </AppButton>
+    </div>
+
+    <!-- Riwayat login existing -->
+    <SessionsCard :key="cardKey" />
+  </div>
+</template>