@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/kpi/AppKpiTeam.vue

@@ -0,0 +1,221 @@
+<script setup>
+// "Tim Saya" — orang yang dipimpin pemanggil beserta KPI jabatannya untuk SATU bulan
+// (`GET /kpi/team`, kontrak `kp1-kpi-tracking.md`). Dipakai pimpinan tanggal 1–3 untuk
+// memasang target & mengisi realisasi tim, lalu memantau siapa yang belum dinilai.
+//
+// ⚠️ **Tombol digambar dari `can_edit_target`/`can_edit_entry` PER METRIK**, bukan dari izin modul:
+// pimpinan tanpa izin `kpis` boleh mengisi untuk timnya, sedangkan target dirinya sendiri ditetapkan
+// atasannya (server 403). Form-nya dipakai ulang dari Workspace lewat emit — layar ini tak memiliki
+// modal sendiri, supaya pimpinan dan pengelola KPI mengisi lewat form yang sama persis.
+//
+// "Memimpin" ditentukan server (atasan berantai + PIC departemen, PIC tak berantai); layar ini tak
+// menyaring ulang anggota, sebab ia tak tahu siapa memimpin siapa.
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { ArrowDown, ArrowUp, Users } from '@lucide/vue'
+import { kpiApi } from '@initsolusidigital/worksuite-core/api/endpoints/kpi.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { useKpi } from '../../composables/useKpi.js'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+import AppCard from '@initsolusidigital/worksuite-ui/AppCard.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'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  /** Periode Workspace — tim hanya bermakna per BULAN. */
+  period: { type: String, default: '' },
+  /** Definisi katalog (untuk `percent_bounded`/pengali saat membuka form target). */
+  definitions: { type: Array, default: () => [] },
+  /** Dinaikkan pemanggil sesudah isian tersimpan. */
+  refreshToken: { type: Number, default: 0 },
+})
+const emit = defineEmits(['enter', 'target', 'open-appraisal'])
+
+const { t } = useI18n()
+const { formatMetric, formatScore, statusTone, definitionLabel, formatTiers } = useKpi(() => props.companyId)
+
+const members = ref([])
+const closed = ref(false)
+const loading = ref(false)
+const loadError = ref('')
+
+const bulanan = computed(() => /^\d{4}-\d{2}$/.test(props.period))
+const APPRAISAL_TONE = { draft: 'gray', submitted: 'blue', acknowledged: 'amber', closed: 'green' }
+
+async function muat() {
+  if (!props.companyId || !bulanan.value) { members.value = []; return }
+  loading.value = true
+  loadError.value = ''
+  try {
+    const { data } = await kpiApi.team(props.companyId, { period: props.period })
+    const body = data.data ?? data
+    members.value = body.members ?? []
+    closed.value = !!body.closed
+  } catch (err) {
+    const e = normalizeApiError(err)
+    loadError.value = e.isForbidden ? t('kpi.noPermission') : (e.backendMessage || t('common.serverError'))
+    members.value = []
+  } finally {
+    loading.value = false
+  }
+}
+
+/** Metrik tim → bentuk "definisi" yang dipahami form isian & form target. */
+function definisi(m) {
+  const katalog = props.definitions.find(d => d.id === m.kpi_definition_id)
+  return katalog ?? {
+    id: m.kpi_definition_id, code: m.code, name: m.name, metric_type: m.metric_type,
+    direction: m.direction, unit: m.unit, resolver_key: m.resolver_key, allow_na: m.allow_na,
+  }
+}
+function baris(member, m) {
+  return {
+    definition: { ...definisi(m), allow_na: m.allow_na, resolver_key: m.resolver_key },
+    subject_type: m.subject_type ?? 'employee',
+    subject_id: m.subject_id ?? member.employee_id,
+    subject_name: member.display_name,
+  }
+}
+function isi(member, m) { emit('enter', baris(member, m)) }
+function target(member, m) {
+  emit('target', {
+    definition: definisi(m),
+    subject: { type: m.subject_type ?? 'employee', id: m.subject_id ?? member.employee_id, label: member.display_name },
+    target: m.target,
+  })
+}
+
+const hasScore = (m) => m.score !== null && m.score !== undefined
+
+watch(() => [props.companyId, props.period, props.refreshToken], muat, { immediate: true })
+defineExpose({ reload: muat })
+</script>
+
+<template>
+  <div class="space-y-4">
+    <AppAlert v-if="!bulanan" variant="info">{{ t('kpi.team.monthlyOnly') }}</AppAlert>
+    <AppAlert v-else-if="loadError" variant="error">{{ loadError }}</AppAlert>
+    <div v-else-if="loading" class="py-12 text-center"><AppSpinner /></div>
+
+    <AppCard v-else-if="!members.length">
+      <AppEmptyState :label="t('kpi.team.empty')" :description="t('kpi.team.emptyHint')">
+        <template #icon><Users class="w-6 h-6 text-gray-400 dark:text-gray-500" :stroke-width="1.5" /></template>
+      </AppEmptyState>
+    </AppCard>
+
+    <template v-else>
+      <AppAlert v-if="closed" variant="info">{{ t('kpi.report.closedHint') }}</AppAlert>
+
+      <AppCard
+        v-for="mb in members"
+        :key="mb.employee_id"
+        padding="none"
+        title-tag="h3"
+        :data-kpi-team-member="mb.employee_id"
+      >
+        <template #header>
+          <div class="px-6 py-4 border-b border-gray-100 dark:border-gray-700 flex flex-wrap items-center justify-between gap-3">
+            <div class="min-w-0">
+              <h3 class="text-sm font-semibold text-gray-900 dark:text-white truncate">{{ mb.display_name }}</h3>
+              <p class="text-xs text-gray-500 dark:text-gray-400">
+                {{ [mb.occupation?.name, mb.department?.name].filter(Boolean).join(' · ') || '—' }}
+                <template v-if="mb.is_leader"> · {{ t('kpi.team.isLeader') }}</template>
+              </p>
+            </div>
+            <div class="flex flex-wrap items-center gap-1.5">
+              <AppBadge v-if="mb.missing_count" color="amber">{{ t('kpi.team.missing', { n: mb.missing_count }) }}</AppBadge>
+              <AppBadge v-if="mb.no_target_count" color="orange">{{ t('kpi.team.noTarget', { n: mb.no_target_count }) }}</AppBadge>
+              <button
+                v-if="mb.appraisal"
+                type="button"
+                class="inline-flex items-center gap-1.5"
+                :aria-label="t('kpi.team.openAppraisal')"
+                @click="emit('open-appraisal', mb.appraisal.id)"
+              >
+                <AppBadge :color="APPRAISAL_TONE[mb.appraisal.status] ?? 'gray'">{{ t(`kpi.appraisal.status.${mb.appraisal.status}`) }}</AppBadge>
+                <AppBadge v-if="mb.appraisal.final_score != null" :color="statusTone(mb.appraisal.final_status)">
+                  {{ formatScore(mb.appraisal.final_score) }}
+                </AppBadge>
+              </button>
+              <AppBadge v-else color="gray">{{ t('kpi.team.noAppraisal') }}</AppBadge>
+            </div>
+          </div>
+        </template>
+
+        <p v-if="!mb.metrics?.length" class="px-6 py-4 text-sm text-gray-500 dark:text-gray-400">{{ t('kpi.team.noMetrics') }}</p>
+
+        <div v-else class="overflow-x-auto scrollbar-rounded">
+          <table class="min-w-full text-sm">
+            <thead class="bg-gray-50 dark:bg-gray-900/40 text-xs text-gray-500 dark:text-gray-400">
+              <tr>
+                <th scope="col" class="text-left font-medium px-6 py-2">{{ t('kpi.report.colDefinition') }}</th>
+                <th scope="col" class="text-right font-medium px-6 py-2">{{ t('kpi.scorecard.colWeight') }}</th>
+                <th scope="col" class="text-right font-medium px-6 py-2">{{ t('kpi.report.colTarget') }}</th>
+                <th scope="col" class="text-right font-medium px-6 py-2">{{ t('kpi.report.colActual') }}</th>
+                <th scope="col" class="text-right font-medium px-6 py-2">{{ t('kpi.report.colAchievement') }}</th>
+                <th scope="col" class="text-right font-medium px-6 py-2"><span class="sr-only">{{ t('kpi.report.colActions') }}</span></th>
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+              <tr v-for="m in mb.metrics" :key="m.kpi_definition_id">
+                <td class="px-6 py-3">
+                  <div class="flex items-center gap-1.5 min-w-0">
+                    <component
+                      :is="m.direction === 'down' ? ArrowDown : ArrowUp"
+                      class="w-3.5 h-3.5 shrink-0"
+                      :class="m.direction === 'down' ? 'text-blue-500' : 'text-gray-400'"
+                      :aria-label="t(`kpi.direction.${m.direction || 'up'}`)"
+                    />
+                    <span class="text-gray-900 dark:text-white truncate">{{ definitionLabel(m) }}</span>
+                  </div>
+                </td>
+                <td class="px-6 py-3 text-right tabular-nums text-gray-600 dark:text-gray-300">{{ m.weight ?? '—' }}</td>
+                <td class="px-6 py-3 text-right tabular-nums text-gray-600 dark:text-gray-300">
+                  <template v-if="m.target === null || m.target === undefined">
+                    <span class="text-orange-600 dark:text-orange-400">{{ t('kpi.team.targetUnset') }}</span>
+                  </template>
+                  <template v-else>
+                    {{ formatMetric(m.target, m) }}
+                    <span v-if="formatTiers(m, m)" class="block text-[11px] text-gray-400 dark:text-gray-500 whitespace-nowrap">{{ formatTiers(m, m) }}</span>
+                  </template>
+                </td>
+                <td class="px-6 py-3 text-right tabular-nums text-gray-900 dark:text-white">
+                  <span v-if="m.state === 'na'" class="text-gray-500 dark:text-gray-400">{{ t('kpi.state.na') }}</span>
+                  <span v-else-if="m.state === 'missing'" class="text-amber-600 dark:text-amber-400">{{ t('kpi.state.missing') }}</span>
+                  <template v-else>{{ formatMetric(m.actual, m) }}</template>
+                  <span
+                    v-if="m.entry_source === 'self'"
+                    class="ml-1.5 align-middle inline-flex items-center rounded px-1.5 py-0.5 text-[10px] font-medium bg-amber-50 text-amber-700 dark:bg-amber-900/30 dark:text-amber-300"
+                    :title="t('kpi.report.sourceSelfHint')"
+                  >{{ t('kpi.report.sourceSelf') }}</span>
+                </td>
+                <td class="px-6 py-3 text-right">
+                  <AppBadge v-if="hasScore(m)" :color="statusTone(m.status)">{{ formatScore(m.score) }}</AppBadge>
+                  <span v-else class="text-gray-400 dark:text-gray-500">—</span>
+                </td>
+                <td class="px-6 py-3 text-right whitespace-nowrap">
+                  <div class="inline-flex items-center gap-3">
+                    <button
+                      v-if="m.can_edit_target"
+                      type="button"
+                      class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                      @click="target(mb, m)"
+                    >{{ t('kpi.report.setTarget') }}</button>
+                    <button
+                      v-if="m.can_edit_entry && !m.resolver_key"
+                      type="button"
+                      class="text-xs text-blue-600 dark:text-blue-400 hover:underline"
+                      @click="isi(mb, m)"
+                    >{{ t('kpi.report.fillActual') }}</button>
+                  </div>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </AppCard>
+    </template>
+  </div>
+</template>

package/src/components/kpi/AppKpiWeightProfiles.vue

@@ -0,0 +1,244 @@
+<script setup>
+// Profil bobot KPI per JOBDESK — daftar metrik + persen yang totalnya wajib 100.
+//
+// Bobot melekat pada JABATAN, bukan pada orang: dua sales dengan jobdesk sama dinilai dengan
+// timbangan yang sama, dan itulah yang membuat komposit antar-orang bisa dibandingkan. Bobot
+// per-ORANG tetap mungkin lewat kolom override di dialog target — itu pengecualian, dan
+// scorecard menandainya sebagai `override` supaya terlihat bahwa ia menyimpang dari profil.
+//
+// ⚠️ **REPLACE-ALL per occupation.** Menyimpan daftar yang lebih pendek MENGHAPUS sisanya di
+// server, jadi form ini selalu mengirim SELURUH baris yang tampil — termasuk yang tak disentuh.
+// Menyimpan "hanya yang diubah" akan menghapus metrik lain tanpa satu pun peringatan.
+//
+// ⚠️ Σ bobot WAJIB tepat 100 (422 `weights_not_100`). Totalnya karena itu dihitung hidup di
+// layar: menekan Simpan lalu ditolak karena selisih 0,5 adalah penolakan yang seharusnya tak
+// pernah perlu terjadi.
+import { ref, computed, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { Plus, Trash2 } from '@lucide/vue'
+import { kpiApi } from '@initsolusidigital/worksuite-core/api/endpoints/kpi.js'
+import { useFormSubmit } from '@initsolusidigital/worksuite-core/composables/useFormSubmit.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import AppCard from '@initsolusidigital/worksuite-ui/AppCard.vue'
+import AppCombobox from '@initsolusidigital/worksuite-ui/AppCombobox.vue'
+import AppInput from '@initsolusidigital/worksuite-ui/AppInput.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'
+
+const props = defineProps({
+  companyId: { type: String, required: true },
+  /** Jabatan `{value,label}` — app tanpa master jabatan tak memanggil layar ini sama sekali. */
+  occupations: { type: Array, default: () => [] },
+  /** Definisi KPI aktif `{id,name}` untuk pemilih metrik. */
+  definitions: { type: Array, default: () => [] },
+  canManage: { type: Boolean, default: false },
+})
+
+const { t } = useI18n()
+const { formError, saving, submit } = useFormSubmit()
+
+const occupationId = ref('')
+const baris = ref([])
+/**
+ * Definisi yang IKUT di baris tersimpan tapi tak ada di daftar aktif — metrik yang dinonaktifkan
+ * setelah profilnya disusun. Backend tetap mengirim relasi `definition`-nya, jadi namanya bisa
+ * ditampilkan; tanpa ini pemilihnya jatuh ke placeholder dan barisnya tampil sebagai **bobot
+ * tanpa nama metrik** — angka yang tak bisa dipertanggungjawabkan, dan tak ada petunjuk bahwa
+ * yang hilang adalah metriknya yang dinonaktifkan.
+ */
+const definisiTakAktif = ref([])
+const loading = ref(false)
+const loadError = ref('')
+
+const labelDef = (d) => (d.code ? `${d.code} — ${d.name}` : d.name)
+const definitionOptions = computed(() => [
+  ...props.definitions.map(d => ({ value: d.id, label: labelDef(d) })),
+  ...definisiTakAktif.value.map(d => ({ value: d.id, label: `${labelDef(d)} — ${t('kpi.weights.inactiveMetric')}` })),
+])
+
+const total = computed(() =>
+  baris.value.reduce((n, b) => n + (Number(b.weight) || 0), 0))
+
+// Dibandingkan dengan toleransi: bobot pecahan (33,33 × 3) tak pernah menjumlah persis 100 dalam
+// aritmetika desimal, dan menolak baris yang benar hanya karena galat pembulatan lebih buruk
+// daripada membiarkan server yang menghitungnya.
+const totalPas = computed(() => Math.abs(total.value - 100) < 0.005)
+const adaBaris = computed(() => baris.value.some(b => b.kpi_definition_id))
+// Profil tersimpan di server (bukan baris yang sedang diketik) — hanya itu yang bisa dihapus.
+const adaTersimpan = ref(false)
+const konfirmasiHapus = ref(false)
+
+async function muat() {
+  if (!occupationId.value) { baris.value = []; return }
+  loading.value = true
+  loadError.value = ''
+  try {
+    const { data } = await kpiApi.weightProfiles(props.companyId, { occupation_id: occupationId.value })
+    const rows = data.data?.data ?? data.data ?? []
+    baris.value = rows.map(r => ({ kpi_definition_id: r.kpi_definition_id, weight: r.weight }))
+    adaTersimpan.value = rows.length > 0
+    konfirmasiHapus.value = false
+    const aktif = new Set(props.definitions.map(d => d.id))
+    definisiTakAktif.value = rows
+      .filter(r => r.definition && !aktif.has(r.kpi_definition_id))
+      .map(r => ({ id: r.kpi_definition_id, name: r.definition.name, code: r.definition.code }))
+  } catch (err) {
+    const e = normalizeApiError(err)
+    loadError.value = e.isForbidden ? t('kpi.noPermission') : (e.backendMessage || t('common.serverError'))
+    baris.value = []
+    definisiTakAktif.value = []
+    adaTersimpan.value = false
+  } finally {
+    loading.value = false
+  }
+}
+
+watch(occupationId, muat)
+
+function tambah() { baris.value.push({ kpi_definition_id: '', weight: '' }) }
+function hapus(i) { baris.value.splice(i, 1) }
+
+/** Bagi rata ke seluruh baris — jalan pintas yang menutup hampir semua kasus nyata. */
+function ratakan() {
+  const n = baris.value.length
+  if (!n) return
+  const each = Math.floor((100 / n) * 100) / 100
+  baris.value.forEach((b, i) => { b.weight = i === n - 1 ? Number((100 - each * (n - 1)).toFixed(2)) : each })
+}
+
+async function simpan() {
+  const isi = baris.value.filter(b => b.kpi_definition_id && b.weight !== '')
+  const ok = await submit(
+    () => kpiApi.upsertWeightProfiles(props.companyId, {
+      occupation_id: occupationId.value,
+      items: isi.map(b => ({ kpi_definition_id: b.kpi_definition_id, weight: b.weight })),
+    }),
+    {
+      successKey: 'kpi.weights.saved',
+      errorKey: 'kpi.weights.saveError',
+      // Dua sebab, dua obat: total meleset menuntut angkanya dibetulkan, definisi ganda menuntut
+      // salah satu barisnya dibuang. Keduanya 422 tanpa error per-field.
+      onError: (e) => {
+        if (e.reason === 'weights_not_100') formError.value = t('kpi.weights.errNot100', { total: total.value })
+        if (e.reason === 'duplicate_definition') formError.value = t('kpi.weights.errDuplicate')
+      },
+    },
+  )
+  if (ok) muat()
+}
+
+// `items: []` menghapus profil jabatan ini: skor komposit kembali ke bobot setara. Inilah jalan
+// keluar untuk profil yang masih menunjuk metrik nonaktif — bobot metrik itu tetap dihitung
+// selama barisnya ada di profil.
+async function hapusProfil() {
+  const ok = await submit(
+    () => kpiApi.upsertWeightProfiles(props.companyId, { occupation_id: occupationId.value, items: [] }),
+    { successKey: 'kpi.weights.cleared', errorKey: 'kpi.weights.saveError' },
+  )
+  konfirmasiHapus.value = false
+  if (ok) muat()
+}
+</script>
+
+<template>
+  <AppCard :title="t('kpi.weights.title')" :description="t('kpi.weights.subtitle')">
+    <div class="space-y-4">
+      <AppAlert v-if="formError" variant="error">{{ formError }}</AppAlert>
+      <AppAlert v-if="loadError" variant="error">{{ loadError }}</AppAlert>
+
+      <div class="w-72">
+        <AppCombobox
+          v-model="occupationId"
+          :label="t('kpi.weights.fieldOccupation')"
+          :options="occupations"
+          :placeholder="t('kpi.weights.selectOccupation')"
+        />
+      </div>
+
+      <AppSpinner v-if="loading" />
+
+      <template v-else-if="occupationId">
+        <div v-if="baris.length" class="space-y-2">
+          <div v-for="(b, i) in baris" :key="i" class="flex flex-wrap items-end gap-2">
+            <div class="grow min-w-[14rem]">
+              <AppCombobox
+                v-model="b.kpi_definition_id"
+                :label="i === 0 ? t('kpi.weights.fieldMetric') : ''"
+                :aria-label="i === 0 ? '' : t('kpi.weights.fieldMetric')"
+                :options="definitionOptions"
+                :placeholder="t('kpi.weights.selectMetric')"
+                :disabled="!canManage"
+              />
+            </div>
+            <div class="w-32">
+              <AppInput
+                v-model="b.weight"
+                type="number"
+                step="any"
+                :label="i === 0 ? t('kpi.weights.fieldWeight') : ''"
+                :aria-label="i === 0 ? '' : t('kpi.weights.fieldWeight')"
+                :disabled="!canManage"
+              />
+            </div>
+            <AppButton
+              v-if="canManage"
+              variant="ghost"
+              size="sm"
+              :aria-label="t('common.delete')"
+              @click="hapus(i)"
+            >
+              <Trash2 class="w-4 h-4 text-red-600 dark:text-red-400" />
+            </AppButton>
+          </div>
+        </div>
+
+        <AppEmptyState
+          v-else
+          :title="t('kpi.weights.emptyTitle')"
+          :description="t('kpi.weights.emptyBody')"
+        />
+
+        <div v-if="canManage" class="flex flex-wrap items-center gap-2">
+          <AppButton variant="ghost" size="sm" @click="tambah">
+            <Plus class="w-4 h-4" />{{ t('kpi.weights.addRow') }}
+          </AppButton>
+          <AppButton v-if="baris.length > 1" variant="ghost" size="sm" @click="ratakan">
+            {{ t('kpi.weights.spreadEvenly') }}
+          </AppButton>
+          <template v-if="adaTersimpan">
+            <AppButton v-if="!konfirmasiHapus" variant="ghost" size="sm" @click="konfirmasiHapus = true">
+              <Trash2 class="w-4 h-4 text-red-600 dark:text-red-400" />{{ t('kpi.weights.clear') }}
+            </AppButton>
+            <template v-else>
+              <span class="text-xs text-gray-600 dark:text-gray-300">{{ t('kpi.weights.clearConfirm') }}</span>
+              <AppButton variant="danger" size="sm" :loading="saving" @click="hapusProfil">{{ t('common.delete') }}</AppButton>
+              <AppButton variant="secondary" size="sm" :disabled="saving" @click="konfirmasiHapus = false">{{ t('common.cancel') }}</AppButton>
+            </template>
+          </template>
+        </div>
+
+        <!-- Metrik nonaktif di dalam profil bukan galat, tapi juga bukan keadaan yang boleh
+             didiamkan: bobotnya masih ikut menghitung skor komposit. -->
+        <p v-if="definisiTakAktif.length" class="text-xs text-amber-600 dark:text-amber-400">
+          {{ t('kpi.weights.hasInactive', { n: definisiTakAktif.length }) }}
+        </p>
+
+        <div v-if="adaBaris" class="flex flex-wrap items-center justify-between gap-3 pt-1">
+          <p class="text-sm" :class="totalPas ? 'text-gray-600 dark:text-gray-300' : 'text-amber-600 dark:text-amber-400'">
+            {{ t('kpi.weights.total', { total: Number(total.toFixed(2)) }) }}
+            <span v-if="!totalPas"> — {{ t('kpi.weights.mustBe100') }}</span>
+          </p>
+          <AppButton v-if="canManage" :loading="saving" :disabled="!totalPas" @click="simpan">
+            {{ t('common.save') }}
+          </AppButton>
+        </div>
+      </template>
+
+      <!-- Tanpa jabatan terpilih tak ada yang bisa ditampilkan; kalimatnya menyebut itu alih-alih
+           membiarkan area kosong yang terbaca seperti gagal memuat. -->
+      <p v-else class="text-sm text-gray-500 dark:text-gray-400">{{ t('kpi.weights.pickFirst') }}</p>
+    </div>
+  </AppCard>
+</template>