@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/dataTools/AppImportSchemaGuide.vue

@@ -0,0 +1,130 @@
+<script setup>
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Loader2 } from '@lucide/vue'
+
+// Panduan isi template yang diturunkan dari `GET /imports/{module}/schema`, dipakai otomatis oleh
+// AppImportExport bila halaman tak mengisi slot `guide`. Satu sumber kebenaran: begitu importer
+// backend mengubah kolom, wajib-isi, atau daftar nilai sah, panduan ikut berubah tanpa satu baris
+// frontend disunting — panduan tulisan tangan per halaman basi diam-diam pada perubahan pertama.
+//
+// Kalimat disusun dari field TERSTRUKTUR (required/type/options/default/example) lewat i18n. Petunjuk
+// per kolom dipilih dari `hint_key` + `hint_params` (kontrak `data-import-export.md` §Terjemahan
+// petunjuk): satu kode = satu kalimat lintas modul, jadi satu entri `dataTools.guide.hintKey.*`
+// melayani semua importer. `hint` (English) hanya cadangan — kode yang belum dikenal kamus, atau
+// kalimat yang menuntut parameter yang tak dikirim, jatuh ke sana alih-alih merender `{max}` kosong.
+// DILARANG memilih kalimat dengan mencocokkan teks `hint`: backend bebas menyuntingnya.
+const props = defineProps({
+  schema:  { type: Object, default: null },   // data.* respons skema
+  loading: { type: Boolean, default: false },
+  error:   { type: Boolean, default: false },
+})
+
+const { t, locale, getLocaleMessage } = useI18n()
+
+const rows = computed(() => [
+  ...(props.schema?.fields ?? []),
+  ...(props.schema?.custom_fields ?? []),
+])
+const hasExample = computed(() => rows.value.some(f => f.example != null && f.example !== ''))
+const hasLookup = computed(() => rows.value.some(f => f.type === 'lookup'))
+
+// Parameter array (mis. `types` daftar tipe kontak) dirangkai di sini — kontrak menyerahkannya ke
+// frontend supaya pemisahnya mengikuti bahasa tampilan, bukan koma Inggris yang dibekukan backend.
+function hintParams(f) {
+  const out = {}
+  for (const [k, v] of Object.entries(f.hint_params ?? {})) {
+    out[k] = Array.isArray(v) ? v.join(', ') : v
+  }
+  return out
+}
+
+function hintOf(f) {
+  if (f.hint_key) {
+    // Dibaca dari kamus locale AKTIF, bukan lewat `te()`: di vue-i18n v11 `te()` ikut menghitung
+    // locale cadangan, sehingga locale tanpa terjemahan (en) mendapat kalimat Indonesia dari
+    // cadangan alih-alih kalimat backend yang memang berbahasa Inggris. String mentah juga
+    // dibutuhkan untuk memeriksa `{param}` yang tak terisi — hasil render sudah kehilangan jejaknya.
+    const key = `dataTools.guide.hintKey.${f.hint_key}`
+    const raw = key.split('.').reduce((o, k) => (o == null ? o : o[k]), getLocaleMessage(locale.value))
+    const params = hintParams(f)
+    const complete = typeof raw === 'string' && (raw.match(/\{(\w+)\}/g) ?? []).every((tok) => {
+      const v = params[tok.slice(1, -1)]
+      return v !== undefined && v !== null && v !== ''
+    })
+    if (complete) return t(key, params)
+  }
+  return f.hint || ''
+}
+
+// Pilihan yang ditampilkan sebagai <code> supaya bisa disalin persis. Boolean tidak membawa
+// `options` di skema, tapi importer menerima yes/no — itu yang ditulis pengisi.
+function choicesOf(f) {
+  if (f.type === 'boolean') return ['yes', 'no']
+  return Array.isArray(f.options) ? f.options : []
+}
+
+function typeText(f) {
+  if (f.type === 'email') return t('dataTools.guide.type.email')
+  if (f.type?.startsWith('custom_field:')) return t('dataTools.guide.type.customField')
+  return ''
+}
+
+function choicesLabel(f) {
+  return f.type === 'lookup' ? t('dataTools.guide.type.lookup') : t('dataTools.guide.type.enum')
+}
+
+// Contoh lookup berasal dari baris contoh template yang statis (mis. role "Sales"), bukan dari data
+// tenant; bila nilainya tak ada di daftar sah tenant ini, menampilkannya justru mengajak pengisi
+// menulis nilai yang pasti ditolak.
+function exampleOf(f) {
+  if (f.example == null || f.example === '') return ''
+  if (f.type === 'lookup' && Array.isArray(f.options) && !f.options.includes(f.example)) return ''
+  return f.example
+}
+</script>
+
+<template>
+  <div class="rounded-lg border border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-900/40 p-3 space-y-2 text-xs text-gray-600 dark:text-gray-400">
+    <p class="font-medium text-gray-800 dark:text-gray-200">{{ t('dataTools.guide.title') }}</p>
+
+    <p v-if="loading" class="flex items-center gap-1.5">
+      <Loader2 class="w-3.5 h-3.5 animate-spin" />{{ t('dataTools.guide.loading') }}
+    </p>
+    <p v-else-if="error" class="text-amber-600 dark:text-amber-400">{{ t('dataTools.guide.loadError') }}</p>
+
+    <template v-else-if="rows.length">
+      <p v-if="hasLookup">{{ t('dataTools.guide.lookupNote') }}</p>
+      <p v-if="hasExample">{{ t('dataTools.guide.exampleRowNote') }}</p>
+
+      <ul class="divide-y divide-gray-200 dark:divide-gray-700 max-h-72 overflow-y-auto scrollbar-rounded pr-1">
+        <li v-for="f in rows" :key="f.key" class="py-1.5 space-y-1">
+          <div class="flex flex-wrap items-center gap-1.5">
+            <code class="text-gray-800 dark:text-gray-100 font-medium">{{ f.key }}</code>
+            <span
+              :class="f.required
+                ? 'px-1.5 rounded bg-red-50 text-red-700 dark:bg-red-900/30 dark:text-red-300'
+                : 'px-1.5 rounded bg-gray-100 text-gray-500 dark:bg-gray-800 dark:text-gray-400'"
+            >{{ f.required ? t('dataTools.guide.required') : t('dataTools.guide.optional') }}</span>
+            <span v-if="typeText(f)">{{ typeText(f) }}</span>
+            <span v-if="f.default != null && f.default !== ''">{{ t('dataTools.guide.default', { value: f.default }) }}</span>
+            <span v-if="exampleOf(f)">{{ t('dataTools.guide.example', { value: exampleOf(f) }) }}</span>
+          </div>
+          <p v-if="hintOf(f)">{{ hintOf(f) }}</p>
+          <div v-if="choicesOf(f).length" class="flex flex-wrap items-center gap-1 max-h-24 overflow-y-auto scrollbar-rounded">
+            <span>{{ choicesLabel(f) }}</span>
+            <code
+              v-for="o in choicesOf(f)"
+              :key="o"
+              class="px-1.5 py-0.5 rounded bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 text-gray-800 dark:text-gray-100"
+            >{{ o }}</code>
+          </div>
+          <p v-else-if="f.type === 'lookup'" :class="f.required ? 'text-amber-600 dark:text-amber-400' : ''">
+            {{ t('dataTools.guide.lookupEmpty') }}
+          </p>
+          <p v-if="f.options_truncated" class="italic">{{ t('dataTools.guide.truncated') }}</p>
+        </li>
+      </ul>
+    </template>
+  </div>
+</template>

package/src/components/hrMetrics/AppHrMetricsDashboard.vue

@@ -0,0 +1,231 @@
+<script setup>
+// Dasbor metrik SDM (kontrak `ha2-hr-metrics.md`): kartu bulan terakhir, tren per bulan (satu
+// metrik per grafik — tak ada sumbu ganda), dan rincian satu bulan per dimensi.
+// Dipakai identik oleh Hub (`/hr-metrics`, ringkasan direksi tanpa seat HRIS) dan HRIS (plus klik
+// angka → daftar per orang lewat emit `drill`). Endpoint & gerbang milik pemanggil lewat `companyId`.
+//
+// 403 `module_not_licensed` (tenant tanpa lisensi HRIS) → emit `unlicensed` dan tak merender apa pun
+// (kanon: sembunyikan senyap); 403 `forbidden` biasa tetap ditampilkan sebagai galat.
+import { ref, computed, watch, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { useAppStore } from '@initsolusidigital/worksuite-core/stores/app.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { hrMetricsApi, HR_METRICS_DIMENSIONS, HR_METRICS_KEYS, HR_METRICS_CHARTS } from '@initsolusidigital/worksuite-core/api/endpoints/hrMetrics.js'
+import AppHrMetricsStat from './AppHrMetricsStat.vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.vue'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppSpinner from '@initsolusidigital/worksuite-ui/AppSpinner.vue'
+import AppEmptyState from '@initsolusidigital/worksuite-ui/AppEmptyState.vue'
+import { BarChart3, Table2, LineChart } from '@lucide/vue'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  // HRIS: angka headcount/masuk/keluar bisa diklik → `drill({period, status, department_id})`.
+  drillable: { type: Boolean, default: false },
+})
+const emit = defineEmits(['unlicensed', 'drill'])
+const { t, te, locale } = useI18n()
+const appStore = useAppStore()
+
+// ── Filter: 12 bulan terakhir, opsional departemen ──
+const ym = (d) => `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`
+const now = new Date()
+const from = ref(ym(new Date(now.getFullYear(), now.getMonth() - 11, 1)))
+const to = ref(ym(now))
+const departmentId = ref(null)
+const departments = ref([])
+const departmentOptions = computed(() => departments.value.map((d) => ({ value: d.id, label: d.name })))
+
+const loading = ref(true)
+const error = ref('')
+const unlicensed = ref(false)
+const summary = ref(null)
+const periods = computed(() => summary.value?.periods ?? [])
+const minGroup = computed(() => summary.value?.min_group_size ?? 5)
+const latest = computed(() => [...periods.value].reverse().find((p) => !p.snapshot_missing) ?? periods.value[periods.value.length - 1] ?? null)
+const statKeys = computed(() => HR_METRICS_KEYS.filter((k) => k !== 'payroll_cost_per_employee' || summary.value?.includes_pay))
+const definition = (k) => summary.value?.definitions?.[k] ?? ''
+
+async function load() {
+  loading.value = true; error.value = ''
+  try {
+    const params = { from: from.value, to: to.value }
+    if (departmentId.value) params.department_id = departmentId.value
+    const { data } = await hrMetricsApi.summary(props.companyId, params)
+    summary.value = data?.data ?? null
+  } catch (err) {
+    const e = normalizeApiError(err)
+    if (e.reason === 'module_not_licensed') { unlicensed.value = true; emit('unlicensed'); return }
+    error.value = e.isValidation && e.fieldErrors ? Object.values(e.fieldErrors).join(' ') : e.isForbidden ? t('common.forbidden') : t('hrMetrics.loadError')
+  } finally { loading.value = false }
+}
+onMounted(async () => {
+  load()
+  try { departments.value = (await hrMetricsApi.departments()).data?.data ?? [] } catch { departments.value = [] }
+})
+
+// ── Grafik tren: satu metrik per grafik, satu seri → tanpa legenda, 2 px, marker saat hover ──
+const trendView = ref('chart')
+const fmtNum = (v, digits = 1) => (v === null || v === undefined ? '—' : new Intl.NumberFormat(locale.value === 'id' ? 'id-ID' : 'en-US', { maximumFractionDigits: digits }).format(v))
+const chartKeys = HR_METRICS_CHARTS
+function chartOptions(key) {
+  const dark = appStore.darkMode
+  const ps = periods.value
+  return {
+    chart: { type: 'line', toolbar: { show: false }, zoom: { enabled: false }, animations: { enabled: false }, background: 'transparent', fontFamily: 'inherit' },
+    theme: { mode: dark ? 'dark' : 'light' },
+    colors: ['#3b82f6'],
+    stroke: { width: 2, curve: 'straight' },
+    markers: { size: 0, hover: { size: 5 } },
+    grid: { borderColor: dark ? '#374151' : '#e5e7eb', strokeDashArray: 3, padding: { left: 8, right: 8 } },
+    xaxis: { categories: ps.map((p) => p.period), labels: { style: { colors: dark ? '#9ca3af' : '#6b7280', fontSize: '11px' } }, axisBorder: { show: false }, axisTicks: { show: false } },
+    yaxis: { labels: { style: { colors: dark ? '#9ca3af' : '#6b7280', fontSize: '11px' }, formatter: (v) => fmtNum(v, 1) }, forceNiceScale: true, min: 0 },
+    tooltip: {
+      theme: dark ? 'dark' : 'light',
+      // Tooltip ikut menyebut n — angka tanpa n adalah angka yang menyesatkan.
+      custom: ({ dataPointIndex }) => {
+        const p = ps[dataPointIndex]
+        if (!p) return ''
+        const body = p.snapshot_missing ? t('hrMetrics.snapshotMissing') : p.suppressed ? t('hrMetrics.suppressed', { min: minGroup.value }) : `${fmtNum(p[key])}`
+        return `<div class="px-2 py-1 text-xs"><div class="font-semibold">${p.period}</div><div>${body}</div><div class="opacity-70">n = ${p.sample_size ?? '—'}</div></div>`
+      },
+    },
+    dataLabels: { enabled: false },
+  }
+}
+// Nilai tersembunyi/absen = celah di garis (null), bukan nol.
+const chartSeries = (key) => [{ name: t(`hrMetrics.metric.${key}`), data: periods.value.map((p) => (p.suppressed || p.snapshot_missing || p[key] === null || p[key] === undefined ? null : Number(p[key]))) }]
+
+// ── Rincian satu bulan ──
+const bdPeriod = ref(null)
+const bdDimension = ref('department')
+const breakdown = ref(null)
+const bdLoading = ref(false)
+const bdError = ref('')
+const periodOptions = computed(() => periods.value.filter((p) => !p.snapshot_missing).map((p) => ({ value: p.period, label: p.period })))
+const dimensionOptions = computed(() => HR_METRICS_DIMENSIONS.map((d) => ({ value: d, label: t(`hrMetrics.dimension.${d}`) })))
+watch(latest, (p) => { if (p && !bdPeriod.value) bdPeriod.value = p.period })
+async function loadBreakdown() {
+  if (!bdPeriod.value) return
+  bdLoading.value = true; bdError.value = ''
+  try {
+    const params = { period: bdPeriod.value, dimension: bdDimension.value }
+    if (departmentId.value) params.department_id = departmentId.value
+    breakdown.value = (await hrMetricsApi.breakdown(props.companyId, params)).data?.data ?? null
+  } catch (err) { bdError.value = normalizeApiError(err).isForbidden ? t('common.forbidden') : t('hrMetrics.loadError') } finally { bdLoading.value = false }
+}
+watch([bdPeriod, bdDimension], loadBreakdown)
+const bdCols = computed(() => ['headcount', 'hires', 'separations', 'turnover_rate', 'absence_rate', 'average_tenure_months', ...(summary.value?.includes_pay ? ['payroll_cost_per_employee'] : [])].filter((k) => bdDimension.value !== 'exit_reason' || ['separations'].includes(k) || true))
+// Label kelompok: nama (departemen/jabatan) dari backend; kode baku (band/usia/`unspecified`) diterjemahkan dari kunci.
+const groupLabel = (item) => (te(`hrMetrics.band.${item.key}`) ? t(`hrMetrics.band.${item.key}`) : (item.label ?? item.key))
+
+function drill(status, period = latest.value?.period) {
+  if (!props.drillable || !period) return
+  emit('drill', { period, status, department_id: departmentId.value })
+}
+</script>
+
+<template>
+  <div v-if="!unlicensed" class="space-y-6" data-hr-metrics>
+    <!-- Filter: satu baris di atas grafik -->
+    <div class="flex flex-wrap items-end gap-3">
+      <AppInput v-model="from" type="month" :label="t('hrMetrics.filter.from')" class="w-40" />
+      <AppInput v-model="to" type="month" :label="t('hrMetrics.filter.to')" class="w-40" />
+      <AppCombobox v-model="departmentId" :options="departmentOptions" :label="t('hrMetrics.filter.department')" :placeholder="t('hrMetrics.filter.allDepartments')" class="w-64" />
+      <AppButton variant="secondary" size="lg" :loading="loading" data-hr-apply @click="load(); loadBreakdown()">{{ t('hrMetrics.filter.apply') }}</AppButton>
+    </div>
+    <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('hrMetrics.evidenceNote', { min: minGroup }) }}</p>
+
+    <AppAlert v-if="error" variant="error" :message="error" />
+    <div v-else-if="loading" class="py-10 flex justify-center"><AppSpinner /></div>
+    <AppEmptyState v-else-if="!periods.length" :label="t('hrMetrics.noPeriods')">
+      <template #icon><BarChart3 class="w-6 h-6 text-gray-400" :stroke-width="1.5" /></template>
+    </AppEmptyState>
+
+    <template v-else>
+      <!-- Kartu bulan terakhir -->
+      <section>
+        <h2 class="text-sm font-semibold text-gray-900 dark:text-white mb-2">{{ t('hrMetrics.latest') }} <span class="font-mono text-xs text-gray-400">{{ latest?.period }}</span><span v-if="drillable" class="ml-2 text-xs font-normal text-gray-400">{{ t('hrMetrics.employees.drillHint') }}</span></h2>
+        <div class="grid grid-cols-2 md:grid-cols-3 xl:grid-cols-5 gap-3">
+          <AppHrMetricsStat v-for="k in statKeys" :key="k" :metric-key="k" :period="latest" :min-group-size="minGroup" :definition="definition(k)"
+            :clickable="drillable && ['headcount', 'hires', 'separations'].includes(k)" @click="drill({ headcount: 'active', hires: 'joined', separations: 'exited' }[k])" />
+        </div>
+      </section>
+
+      <!-- Tren: grafik kecil berjajar (satu metrik per grafik) + tampilan tabel -->
+      <section class="space-y-3">
+        <div class="flex items-center justify-between gap-2">
+          <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('hrMetrics.trend.title') }}</h2>
+          <div class="inline-flex rounded-lg border border-gray-200 dark:border-gray-700 overflow-hidden text-xs">
+            <button type="button" class="px-2.5 py-1.5 inline-flex items-center gap-1" :class="trendView === 'chart' ? 'bg-blue-600 text-white' : 'text-gray-600 dark:text-gray-300'" :aria-pressed="trendView === 'chart'" @click="trendView = 'chart'"><LineChart class="w-3.5 h-3.5" />{{ t('hrMetrics.trend.chart') }}</button>
+            <button type="button" class="px-2.5 py-1.5 inline-flex items-center gap-1" :class="trendView === 'table' ? 'bg-blue-600 text-white' : 'text-gray-600 dark:text-gray-300'" :aria-pressed="trendView === 'table'" @click="trendView = 'table'"><Table2 class="w-3.5 h-3.5" />{{ t('hrMetrics.trend.table') }}</button>
+          </div>
+        </div>
+        <div v-if="trendView === 'chart'" class="grid grid-cols-1 lg:grid-cols-2 gap-3">
+          <div v-for="k in chartKeys" :key="k" class="rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-3" :data-hr-chart="k">
+            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 mb-1" :title="definition(k)">{{ t(`hrMetrics.metric.${k}`) }}</p>
+            <apexchart type="line" height="180" :options="chartOptions(k)" :series="chartSeries(k)" />
+          </div>
+        </div>
+        <div v-else class="overflow-x-auto scrollbar-rounded rounded-xl border border-gray-200 dark:border-gray-700">
+          <table class="min-w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-900/40 text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
+              <tr><th class="px-3 py-2 text-left">{{ t('hrMetrics.breakdown.period') }}</th><th class="px-3 py-2 text-right">n</th><th v-for="k in statKeys" :key="k" class="px-3 py-2 text-right whitespace-nowrap">{{ t(`hrMetrics.metric.${k}`) }}</th></tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+              <tr v-for="p in periods" :key="p.period">
+                <td class="px-3 py-2 font-mono text-xs text-gray-700 dark:text-gray-300">{{ p.period }}</td>
+                <td class="px-3 py-2 text-right text-gray-500">{{ p.sample_size ?? '—' }}</td>
+                <td v-for="k in statKeys" :key="k" class="px-3 py-2 text-right text-gray-800 dark:text-gray-200">
+                  <span v-if="p.snapshot_missing" class="text-xs text-gray-400">{{ t('hrMetrics.snapshotMissing') }}</span>
+                  <span v-else-if="p.suppressed || p[k] === null || p[k] === undefined" class="text-xs text-amber-600 dark:text-amber-400">{{ t('hrMetrics.suppressed', { min: minGroup }) }}</span>
+                  <span v-else>{{ fmtNum(p[k], k === 'payroll_cost_per_employee' ? 0 : 1) }}</span>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+
+      <!-- Rincian satu bulan per dimensi -->
+      <section class="space-y-3" data-hr-breakdown>
+        <h2 class="text-sm font-semibold text-gray-900 dark:text-white">{{ t('hrMetrics.breakdown.title') }}</h2>
+        <div class="flex flex-wrap items-end gap-3">
+          <AppCombobox v-model="bdPeriod" :options="periodOptions" :label="t('hrMetrics.breakdown.period')" hide-clear class="w-40" />
+          <AppCombobox v-model="bdDimension" :options="dimensionOptions" :label="t('hrMetrics.breakdown.dimension')" hide-clear class="w-56" />
+        </div>
+        <AppAlert v-if="bdError" variant="error" :message="bdError" />
+        <div v-else-if="bdLoading" class="py-6 flex justify-center"><AppSpinner /></div>
+        <template v-else-if="breakdown">
+          <AppAlert v-if="breakdown.population_suppressed" variant="warning" :message="t('hrMetrics.breakdown.populationSuppressed')" />
+          <p v-else-if="!breakdown.items?.length" class="text-sm text-gray-400">{{ t('hrMetrics.breakdown.empty') }}</p>
+          <div v-else class="overflow-x-auto scrollbar-rounded rounded-xl border border-gray-200 dark:border-gray-700">
+            <table class="min-w-full text-sm">
+              <thead class="bg-gray-50 dark:bg-gray-900/40 text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
+                <tr><th class="px-3 py-2 text-left">{{ t('hrMetrics.breakdown.group') }}</th><th class="px-3 py-2 text-right">n</th><th v-for="k in bdCols" :key="k" class="px-3 py-2 text-right whitespace-nowrap">{{ t(`hrMetrics.metric.${k}`) }}</th></tr>
+              </thead>
+              <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+                <tr v-for="it in breakdown.items" :key="it.key" :data-hr-group="it.key">
+                  <td class="px-3 py-2 text-gray-900 dark:text-white">{{ groupLabel(it) }}</td>
+                  <td class="px-3 py-2 text-right text-gray-500">{{ it.sample_size ?? '—' }}</td>
+                  <template v-if="it.suppressed">
+                    <td :colspan="bdCols.length" class="px-3 py-2 text-xs text-amber-600 dark:text-amber-400">{{ t('hrMetrics.suppressed', { min: breakdown.min_group_size ?? minGroup }) }}</td>
+                  </template>
+                  <template v-else>
+                    <td v-for="k in bdCols" :key="k" class="px-3 py-2 text-right text-gray-800 dark:text-gray-200">
+                      <button v-if="drillable && bdDimension === 'department' && ['headcount', 'hires', 'separations'].includes(k) && it.key !== 'unspecified'" type="button" class="text-blue-600 dark:text-blue-400 hover:underline" @click="emit('drill', { period: bdPeriod, status: { headcount: 'active', hires: 'joined', separations: 'exited' }[k], department_id: it.key })">{{ fmtNum(it[k], 0) }}</button>
+                      <span v-else>{{ fmtNum(it[k], k === 'payroll_cost_per_employee' ? 0 : 1) }}</span>
+                    </td>
+                  </template>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+          <p class="text-xs text-gray-400">{{ t('hrMetrics.breakdown.secondaryNote') }}</p>
+        </template>
+      </section>
+    </template>
+  </div>
+</template>

package/src/components/hrMetrics/AppHrMetricsEmployees.vue

@@ -0,0 +1,87 @@
+<script setup>
+// Daftar per orang di balik satu angka metrik (HRIS saja: `GET hr_metrics/employees` menuntut
+// `hr_metrics` + `employees` can_read). Tanpa ambang kelompok — pemakainya HR ber-seat.
+import { ref, watch, computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { hrMetricsApi } from '@initsolusidigital/worksuite-core/api/endpoints/hrMetrics.js'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.vue'
+import AppSpinner from '@initsolusidigital/worksuite-ui/AppSpinner.vue'
+import AppAlert from '@initsolusidigital/worksuite-ui/AppAlert.vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  query: { type: Object, required: true },   // { period, status, department_id? }
+})
+const emit = defineEmits(['close'])
+const { t, locale } = useI18n()
+const rows = ref([])
+const total = ref(0)
+const page = ref(1)
+const loading = ref(false)
+const error = ref('')
+const perPage = 25
+const pages = computed(() => Math.max(1, Math.ceil(total.value / perPage)))
+const fmt = (v) => (v === null || v === undefined ? '—' : new Intl.NumberFormat(locale.value === 'id' ? 'id-ID' : 'en-US', { maximumFractionDigits: 1 }).format(v))
+
+async function load() {
+  loading.value = true; error.value = ''
+  try {
+    const params = { period: props.query.period, status: props.query.status, page: page.value, rowsPerPage: perPage }
+    if (props.query.department_id) params.department_id = props.query.department_id
+    const { data } = await hrMetricsApi.employees(props.companyId, params)
+    const d = data?.data
+    rows.value = d?.data ?? (Array.isArray(d) ? d : [])
+    total.value = d?.total ?? rows.value.length
+  } catch (err) { error.value = normalizeApiError(err).isForbidden ? t('common.forbidden') : t('hrMetrics.employees.loadError') } finally { loading.value = false }
+}
+// Ganti kueri = kembali ke halaman 1; `page` dipantau sendiri supaya satu perubahan tak memuat dua kali.
+watch(() => props.query, () => { if (page.value !== 1) page.value = 1; else load() }, { immediate: true, deep: true })
+watch(page, load)
+</script>
+
+<template>
+  <AppModal :title="t('hrMetrics.employees.title')" :subtitle="`${t(`hrMetrics.employees.status.${query.status}`)} · ${query.period}`" size="xl" @close="emit('close')">
+    <AppAlert v-if="error" variant="error" :message="error" />
+    <div v-else-if="loading" class="py-8 flex justify-center"><AppSpinner /></div>
+    <p v-else-if="!rows.length" class="text-sm text-gray-400 py-6 text-center">{{ t('hrMetrics.employees.empty') }}</p>
+    <div v-else class="overflow-x-auto scrollbar-rounded rounded-xl border border-gray-200 dark:border-gray-700" data-hr-employees>
+      <table class="min-w-full text-sm">
+        <thead class="bg-gray-50 dark:bg-gray-900/40 text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400">
+          <tr>
+            <th class="px-3 py-2 text-left">{{ t('hrMetrics.employees.colName') }}</th>
+            <th class="px-3 py-2 text-left">{{ t('hrMetrics.employees.colDepartment') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colTenure') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colPresent') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colAbsent') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colLate') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colOvertime') }}</th>
+            <th class="px-3 py-2 text-right">{{ t('hrMetrics.employees.colLeave') }}</th>
+            <th class="px-3 py-2 text-left">{{ t('hrMetrics.employees.colExit') }}</th>
+          </tr>
+        </thead>
+        <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+          <tr v-for="r in rows" :key="r.employee_id">
+            <td class="px-3 py-2"><p class="text-gray-900 dark:text-white">{{ r.employee_name }}</p><p class="text-xs font-mono text-gray-400">{{ r.employee_code }}</p></td>
+            <td class="px-3 py-2 text-gray-600 dark:text-gray-300">{{ r.department_name || '—' }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.tenure_months) }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.present_days) }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.absent_days) }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.late_minutes) }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.overtime_minutes) }}</td>
+            <td class="px-3 py-2 text-right">{{ fmt(r.leave_days) }}</td>
+            <td class="px-3 py-2"><AppBadge v-if="r.exited_in_period" color="red">{{ r.exit_type || r.exit_reason_code || '—' }}</AppBadge><span v-else class="text-gray-300">—</span></td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+    <template #footer>
+      <span class="text-xs text-gray-400 mr-auto">{{ total }} · {{ page }}/{{ pages }}</span>
+      <AppButton variant="secondary" size="sm" :disabled="page <= 1 || loading" @click="page--">‹</AppButton>
+      <AppButton variant="secondary" size="sm" :disabled="page >= pages || loading" @click="page++">›</AppButton>
+      <AppButton variant="secondary" size="sm" @click="emit('close')">{{ t('common.close') }}</AppButton>
+    </template>
+  </AppModal>
+</template>

package/src/components/hrMetrics/AppHrMetricsStat.vue

@@ -0,0 +1,61 @@
+<script setup>
+// Satu angka metrik SDM ber-konteks: nilai + periode + n. Tiga keadaan non-angka dibedakan
+// terang-terangan — `suppressed` (kelompok < ambang), `snapshot_missing` (bulan belum difoto),
+// null biasa — karena menulis "0" untuk ketiganya adalah vonis yang datanya tak pernah ada.
+import { computed } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { EyeOff, CalendarOff, Info } from '@lucide/vue'
+
+const props = defineProps({
+  metricKey: { type: String, required: true },
+  period: { type: Object, default: null },      // satu baris `periods[]` dari summary
+  minGroupSize: { type: Number, default: 5 },
+  definition: { type: String, default: '' },    // kalimat rumus (English fallback dari backend)
+  clickable: { type: Boolean, default: false },
+})
+const emit = defineEmits(['click'])
+const { t, te, locale } = useI18n()
+
+const UNIT = {
+  turnover_rate: 'percent', voluntary_turnover_rate: 'percent', absence_rate: 'percent',
+  late_minutes_per_employee: 'minutes', overtime_hours_per_employee: 'hours', average_tenure_months: 'months',
+  headcount: 'people', average_headcount: 'people', hires: 'people', separations: 'people',
+}
+const label = computed(() => te(`hrMetrics.metric.${props.metricKey}`) ? t(`hrMetrics.metric.${props.metricKey}`) : props.metricKey)
+const raw = computed(() => props.period?.[props.metricKey])
+const state = computed(() => {
+  if (!props.period) return 'empty'
+  if (props.period.snapshot_missing) return 'missing'
+  if (props.period.suppressed || raw.value === null || raw.value === undefined) return 'suppressed'
+  return 'value'
+})
+const value = computed(() => {
+  const v = raw.value
+  if (props.metricKey === 'payroll_cost_per_employee') return new Intl.NumberFormat(locale.value === 'id' ? 'id-ID' : 'en-US', { style: 'currency', currency: 'IDR', maximumFractionDigits: 0 }).format(v)
+  const n = Number(v)
+  const digits = Number.isInteger(n) ? 0 : 1
+  return new Intl.NumberFormat(locale.value === 'id' ? 'id-ID' : 'en-US', { maximumFractionDigits: digits }).format(n)
+})
+const unit = computed(() => (UNIT[props.metricKey] ? t(`hrMetrics.unit.${UNIT[props.metricKey]}`) : ''))
+const sampleText = computed(() => {
+  const n = props.metricKey === 'payroll_cost_per_employee' ? props.period?.payroll_sample_size : props.period?.sample_size
+  return n === null || n === undefined ? t('hrMetrics.sampleNoN', { period: props.period?.period ?? '' }) : t('hrMetrics.sample', { n, period: props.period?.period ?? '' })
+})
+</script>
+
+<template>
+  <component :is="clickable && state === 'value' ? 'button' : 'div'" :type="clickable ? 'button' : undefined"
+    class="w-full text-left rounded-xl border border-gray-200 dark:border-gray-700 bg-white dark:bg-gray-800 p-4 flex flex-col gap-1"
+    :class="clickable && state === 'value' ? 'hover:border-blue-400 dark:hover:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500 cursor-pointer' : ''"
+    :data-hr-stat="metricKey" @click="clickable && state === 'value' && emit('click')">
+    <div class="flex items-start justify-between gap-2">
+      <p class="text-xs font-medium text-gray-500 dark:text-gray-400">{{ label }}</p>
+      <span v-if="definition" class="text-gray-400 shrink-0" :title="definition" :aria-label="t('hrMetrics.definitions')"><Info class="w-3.5 h-3.5" /></span>
+    </div>
+    <p v-if="state === 'value'" class="text-2xl font-semibold text-gray-900 dark:text-white leading-tight">{{ value }}<span v-if="unit" class="ml-1 text-sm font-normal text-gray-400">{{ unit }}</span></p>
+    <p v-else-if="state === 'suppressed'" class="text-sm text-gray-500 dark:text-gray-400 inline-flex items-center gap-1.5"><EyeOff class="w-4 h-4 text-amber-500" />{{ t('hrMetrics.suppressed', { min: minGroupSize }) }}</p>
+    <p v-else-if="state === 'missing'" class="text-sm text-gray-500 dark:text-gray-400 inline-flex items-center gap-1.5"><CalendarOff class="w-4 h-4 text-gray-400" />{{ t('hrMetrics.snapshotMissing') }}</p>
+    <p v-else class="text-sm text-gray-400">—</p>
+    <p class="text-[11px] text-gray-400 dark:text-gray-500 font-mono">{{ sampleText }}</p>
+  </component>
+</template>