@initsolusidigital/worksuite-shell 0.0.0-stage → 0.3.0

package/src/components/approvals/AppApprovalInbox.vue

@@ -0,0 +1,265 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { FileCheck2, UserCheck, Loader2, Check, X, ExternalLink } from '@lucide/vue'
+import { useApprovals } from '@initsolusidigital/worksuite-core/composables/useApprovals.js'
+import { useCrossAppLink } from '@initsolusidigital/worksuite-core/composables/useCrossAppLink.js'
+import { useToast } from '@initsolusidigital/worksuite-core/composables/useToast.js'
+import AppDataTable from '@initsolusidigital/worksuite-ui/AppDataTable.vue'
+import AppBadge from '@initsolusidigital/worksuite-ui/AppBadge.vue'
+import AppButton from '@initsolusidigital/worksuite-ui/AppButton.vue'
+import AppTooltip from '@initsolusidigital/worksuite-ui/AppTooltip.vue'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.vue'
+import AppTextarea from '@initsolusidigital/worksuite-ui/AppTextarea.vue'
+import AppApprovalSubjectModal from './AppApprovalSubjectModal.vue'
+
+// Approval Inbox. Daftar "Menunggu persetujuan saya" LINTAS-MODUL: satu tabel
+// memuat `entity_type` apa pun. Registry disuplai app pemanggil lewat prop `entities` (pola sama
+// `useDashboardLayout({ widgets })`), jadi komponen ini tak pernah membaca bentuk `approvable`.
+//
+// ⚠️ JANGAN pasangi `useModulePermission`. Hak approver datang dari PENUGASAN LANGKAH, bukan izin
+// modul (kontrak backend) — approver bisa saja tak punya izin modul apa pun.
+const props = defineProps({
+  // { [entity_type]: { labelKey, icon, resolver } } — lihat `data/approvalEntities.js`
+  entities: { type: Object, default: () => ({}) },
+})
+
+const { t, te, locale } = useI18n()
+const { pushToast } = useToast()
+const {
+  rows, loading, acting, loadError, hasMore,
+  refresh, fetchMore, approve, reject,
+  entityLabelKey, entityIcon, entitySubject, entityTarget,
+  canAct, isDelegated, delegatorName, requesterName, currentApprover,
+} = useApprovals({ entities: props.entities })
+
+const { isAppUsable, fetchApps } = useCrossAppLink()
+
+onMounted(() => {
+  refresh()
+  // Katalog app untuk pagar N-A tombol "Buka"; singleton, no-op bila sudah termuat.
+  fetchApps()
+})
+
+// Tujuan resolver registry (layar app pemilik) — hanya bila app tujuannya dilanggan tenant. Kini jadi
+// tombol KEDUA di panel isi: layar itu bergerbang seat, sedangkan penyetuju belum tentu punya seat.
+function targetOf(row) {
+  const target = entityTarget(row)
+  return target && isAppUsable(target.target_app) ? target : null
+}
+
+// "Buka" untuk SEMUA baris: tiap baris di kotak ini menugaskan user login pada langkah aktifnya, jadi
+// ia selalu peserta yang berhak membaca isinya lewat `approval_requests/{id}/subject`.
+const subjectRow = ref(null)
+function openRow(row) { subjectRow.value = row }
+
+const columns = computed(() => [
+  { key: 'subject',   label: t('approvals.column.subject') },
+  { key: 'type',      label: t('approvals.column.type') },
+  { key: 'requester', label: t('approvals.column.requester') },
+  { key: 'step',      label: t('approvals.column.step') },
+  { key: 'submitted', label: t('approvals.column.submittedAt') },
+  { key: 'actions',   label: '', align: 'right' },
+])
+
+// Nama jenis pengajuan, TIGA lapis: kunci dari registry app → kamus paket `approvals.entity.{type}`
+// → label generik. Tipe baru lahir di backend kapan saja, dan app yang registry-nya belum menyusul
+// harus tetap menampilkan sesuatu yang bermakna.
+//
+// ⚠️ Jangan jatuh ke `entity_type` MENTAH: itu KODE tabel, bukan label, dan di kolom yang paling
+// menentukan ia terbaca seperti kebocoran, bukan seperti data. Kamus paket memuat seluruh tipe
+// konsumen Approval Engine, jadi tiap app mendapat label yang benar TANPA mendaftarkan ulang tipe
+// milik app lain di registrinya — registry cukup mengurus `resolver` (subjek) & ikon, yaitu bagian
+// yang memang khas app.
+function typeLabel(row) {
+  const key = entityLabelKey(row)
+  if (key && te(key)) return t(key)
+  const kamus = `approvals.entity.${row.entity_type}`
+  if (row.entity_type && te(kamus)) return t(kamus)
+  return t('approvals.entity.unknown')
+}
+// "Penyetuju: Budi (atasan langsung)". Asal penugasan hanya ditulis untuk langkah dinamis —
+// langkah role/user biasa tak membawa `resolved_via`, dan menebaknya berarti mengarang keterangan.
+function approverText(row) {
+  const ca = currentApprover(row)
+  if (!ca) return ''
+  const viaKey = ca.via ? `approvals.resolvedVia.${ca.via}` : null
+  const via = viaKey && te(viaKey) ? t(viaKey) : ''
+  return via ? t('approvals.currentApproverVia', { name: ca.name, via }) : t('approvals.currentApprover', { name: ca.name })
+}
+
+// Subjek dari resolver sub-app → fallback ke pemohon → fallback generik. Tak pernah kosong.
+const subjectOf = (row) => entitySubject(row) || requesterName(row) || t('approvals.entity.unknown')
+
+function formatDate(iso) {
+  if (!iso) return '—'
+  return new Date(iso).toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US',
+    { dateStyle: 'medium', timeStyle: 'short' })
+}
+
+// ── Konfirmasi + catatan ────────────────────────────────────────────────────────────────────
+const dialog = ref(null)   // { row, mode: 'approve' | 'reject' }
+const comment = ref('')
+const commentError = ref('')
+
+function openDialog(row, mode) {
+  dialog.value = { row, mode }
+  comment.value = ''
+  commentError.value = ''
+}
+function closeDialog() { dialog.value = null }
+
+async function submitDialog() {
+  const { row, mode } = dialog.value
+  // Menolak tanpa alasan tak berguna bagi pemohon — dia tak tahu apa yang harus diperbaiki.
+  if (mode === 'reject' && !comment.value.trim()) {
+    commentError.value = t('approvals.comment.requiredOnReject')
+    return
+  }
+  const fn = mode === 'approve' ? approve : reject
+  const { ok, reason } = await fn(row.id, comment.value.trim())
+  closeDialog()
+  if (ok) {
+    pushToast({ title: t(`approvals.result.${mode === 'approve' ? 'approved' : 'rejected'}`), variant: 'success' })
+    return
+  }
+  if (reason === 'busy') return
+  // Yang diajukan sudah dibatalkan/dihapus di luar alur: backend menutup pengajuannya, dan pembatalan
+  // yang sama bisa menutup baris lain — daftar dimuat ulang, bukan hanya satu baris dibuang.
+  if (reason === 'subject_not_pending' || reason === 'subject_unavailable') {
+    pushToast({ title: t('approvals.result.subjectWithdrawn'), variant: 'info' })
+    refresh()
+    return
+  }
+  // Tiap sebab dapat kalimatnya sendiri — `step_advanced` & `already_resolved` BUKAN kesalahan
+  // user (approver lain lebih dulu / sudah selesai), jadi ditampilkan sbg info, bukan error merah.
+  const soft = reason === 'step_advanced' || reason === 'already_acted' || reason === 'already_resolved'
+  const key = `approvals.result.${reason}`
+  pushToast({
+    title: te(key) ? t(key) : t('approvals.result.failed'),
+    variant: soft ? 'info' : 'error',
+  })
+}
+</script>
+
+<template>
+  <div>
+    <AppDataTable
+      :columns="columns"
+      :rows="rows"
+      :loading="loading"
+      :searchable="false"
+      :loading-text="t('approvals.loading')"
+    >
+      <!-- Kolom subjek: ikon dari registry (fallback generik) + penanda DELEGASI.
+      Penanda ini wajib terlihat — menyetujui atas nama orang lain tanpa sadar itu mahal. -->
+      <template #cell-subject="{ row }">
+        <div class="flex items-start gap-2.5">
+          <component :is="entityIcon(row) || FileCheck2" class="w-4 h-4 mt-0.5 shrink-0 text-gray-400 dark:text-gray-500" />
+          <div class="min-w-0">
+            <p class="text-sm font-medium text-gray-900 dark:text-white truncate">{{ subjectOf(row) }}</p>
+            <AppTooltip v-if="isDelegated(row)" :text="t('approvals.viaDelegationHint')">
+              <span class="inline-flex items-center gap-1 mt-0.5 text-xs text-amber-700 dark:text-amber-300">
+                <UserCheck class="w-3 h-3 shrink-0" />
+                {{ t('approvals.viaDelegation', { name: delegatorName(row) || '—' }) }}
+              </span>
+            </AppTooltip>
+          </div>
+        </div>
+      </template>
+
+      <template #cell-type="{ row }">
+        <span class="text-sm text-gray-600 dark:text-gray-300">{{ typeLabel(row) }}</span>
+      </template>
+
+      <!-- ⚠️ `requested_by` NULL bukan data hilang — ia penanda "karyawan mengajukan SENDIRI"
+           lewat pintu employee, lawan dari "HR membuatkan atas nama".
+           Merendernya sebagai '—' membuat baris yang justru punya pemohon paling jelas terlihat
+           seperti data rusak. Namanya sendiri sudah tampil di kolom Pengajuan (`subjectOf` →
+           `entitySubject`), jadi mengulanginya di sini tak menambah informasi; yang berharga
+           adalah membedakan CARA pengajuannya. -->
+      <template #cell-requester="{ row }">
+        <span
+          class="text-sm"
+          :class="requesterName(row) ? 'text-gray-600 dark:text-gray-300' : 'text-gray-400 dark:text-gray-500 italic'"
+        >
+          {{ requesterName(row) || t('approvals.selfSubmitted') }}
+        </span>
+      </template>
+
+      <!-- Langkah ke berapa dari berapa — `total_steps` dari backend, tidak dihitung frontend -->
+      <template #cell-step="{ row }">
+        <AppBadge color="gray">
+          {{ t('approvals.stepOf', { current: row.current_step ?? 1, total: row.total_steps ?? 1 }) }}
+        </AppBadge>
+        <p v-if="approverText(row)" class="mt-1 text-xs text-gray-500 dark:text-gray-400" data-current-approver>
+          {{ approverText(row) }}
+        </p>
+      </template>
+
+      <template #cell-submitted="{ row }">
+        <span class="text-sm text-gray-500 dark:text-gray-400">{{ formatDate(row.created_at) }}</span>
+      </template>
+
+      <!-- Tombol digerbang `can_act` dari backend — tak ditebak frontend. -->
+      <template #cell-actions="{ row }">
+        <div class="flex items-center justify-end gap-2">
+          <AppButton size="sm" variant="ghost" @click="openRow(row)">
+            <ExternalLink class="w-3.5 h-3.5" /> {{ t('approvals.action.open') }}
+          </AppButton>
+          <template v-if="canAct(row)">
+            <AppButton size="sm" variant="secondary" :disabled="acting === row.id" @click="openDialog(row, 'reject')">
+              <X class="w-3.5 h-3.5" /> {{ t('approvals.action.reject') }}
+            </AppButton>
+            <AppButton size="sm" :disabled="acting === row.id" @click="openDialog(row, 'approve')">
+              <Loader2 v-if="acting === row.id" class="w-3.5 h-3.5 animate-spin" />
+              <Check v-else class="w-3.5 h-3.5" /> {{ t('approvals.action.approve') }}
+            </AppButton>
+          </template>
+        </div>
+      </template>
+
+      <template #empty>
+        <p class="text-sm text-gray-500 dark:text-gray-400">
+          {{ loadError ? t('approvals.loadError') : t('approvals.empty') }}
+        </p>
+      </template>
+    </AppDataTable>
+
+    <div v-if="hasMore" class="flex justify-center mt-3">
+      <AppButton variant="secondary" size="sm" :disabled="loading" @click="fetchMore">
+        {{ t('approvals.loadMore') }}
+      </AppButton>
+    </div>
+
+    <AppApprovalSubjectModal
+      v-if="subjectRow"
+      :request-id="subjectRow.id"
+      :title="subjectOf(subjectRow)"
+      :app-target="targetOf(subjectRow)"
+      @close="subjectRow = null"
+    />
+
+    <!-- Konfirmasi + catatan. Catatan WAJIB saat menolak (lihat submitDialog). -->
+    <AppModal
+      v-if="dialog"
+      :title="dialog.mode === 'approve' ? t('approvals.confirm.approveTitle') : t('approvals.confirm.rejectTitle')"
+      :subtitle="subjectOf(dialog.row)"
+      @close="closeDialog"
+    >
+      <AppTextarea
+        v-model="comment"
+        :label="t('approvals.comment.label')"
+        :placeholder="t('approvals.comment.placeholder')"
+        :error="commentError"
+        :rows="3"
+      />
+      <template #footer>
+        <AppButton variant="secondary" @click="closeDialog">{{ t('common.cancel') }}</AppButton>
+        <AppButton :variant="dialog.mode === 'reject' ? 'danger' : 'primary'" :disabled="!!acting" @click="submitDialog">
+          {{ dialog.mode === 'approve' ? t('approvals.action.approve') : t('approvals.action.reject') }}
+        </AppButton>
+      </template>
+    </AppModal>
+  </div>
+</template>

package/src/components/approvals/AppApprovalSubjectModal.vue

@@ -0,0 +1,197 @@
+<script setup>
+import { ref, computed, onMounted } from 'vue'
+import { useI18n } from 'vue-i18n'
+import { FileText, ExternalLink, FileDown } from '@lucide/vue'
+import { approvalsApi } from '@initsolusidigital/worksuite-core/api/endpoints/approvals.js'
+import { normalizeApiError } from '@initsolusidigital/worksuite-core/api/errors.js'
+import { useCrossAppLink } from '@initsolusidigital/worksuite-core/composables/useCrossAppLink.js'
+import AppModal from '@initsolusidigital/worksuite-ui/AppModal.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'
+
+// Panel "isi yang disetujui" dari `GET approval_requests/{id}/subject`.
+// Peserta permintaan berhak MEMBACA entitasnya tanpa seat app pemiliknya (kontrak
+// `approval-flows.md` §8), jadi panel ini tak pernah melompat ke layar app pemilik lebih dulu —
+// layar itu bergerbang seat dan memantulkan penyetuju yang justru dilayani rute ini.
+//
+// ⚠️ Dokumen pun dibuka lewat panel ini, bukan langsung: `window.open` sesudah `await` dianggap
+// popup liar oleh peramban dan diblokir tanpa pesan apa pun. Tombol "Buka dokumen" di panel adalah
+// klik baru, jadi tab penampil selalu terbuka.
+const props = defineProps({
+  requestId: { type: String, required: true },
+  title: { type: String, default: '' },
+  // Tujuan lama dari resolver registry app (layar app pemilik). Tetap ditawarkan sebagai tombol
+  // kedua untuk pemegang seat, karena di sana mereka bisa berbuat lebih dari sekadar membaca.
+  appTarget: { type: Object, default: null },
+})
+const emit = defineEmits(['close'])
+
+const { t, te, locale } = useI18n()
+const { openTarget } = useCrossAppLink()
+
+const loading = ref(true)
+const error = ref('')
+const subject = ref(null)
+const openingPdf = ref(false)
+const pdfError = ref('')
+
+onMounted(async () => {
+  try {
+    const { data } = await approvalsApi.subject(props.requestId)
+    subject.value = data.data ?? null
+  } catch (err) {
+    const e = normalizeApiError(err)
+    error.value = e.reason === 'not_approval_participant'
+      ? t('approvals.subject.notParticipant')
+      : e.status === 404 ? t('approvals.subject.notFound') : t('approvals.subject.loadError')
+  } finally {
+    loading.value = false
+  }
+})
+
+// `summary` entitas non-dokumen adalah atribut model apa adanya, jadi field teknis (kunci asing,
+// stempel waktu, id) disaring di sini; relasi tampil lewat namanya, bukan sebagai objek.
+const HIDDEN = new Set(['id', 'company_id', 'updated_at', 'deleted_at', 'approvable_type', 'approvable_id', 'custom_fields'])
+const NAME_KEYS = ['name', 'title', 'customer_company_name', 'document_number', 'full_name', 'code', 'number']
+
+function isHidden(key) {
+  return HIDDEN.has(key) || key.endsWith('_id') || key.endsWith('_ids') || key.startsWith('_')
+}
+function nameOf(obj) {
+  for (const k of NAME_KEYS) if (typeof obj?.[k] === 'string' && obj[k]) return obj[k]
+  const person = [obj?.first_name, obj?.last_name].filter(Boolean).join(' ')
+  return person || null
+}
+function snake(key) {
+  return key.replace(/([a-z])([A-Z])/g, '$1_$2').toLowerCase()
+}
+function label(key) {
+  const k = `approvals.subject.field.${snake(key)}`
+  if (te(k)) return t(k)
+  const words = snake(key).replace(/_/g, ' ')
+  return words.charAt(0).toUpperCase() + words.slice(1)
+}
+const DATE_RE = /^\d{4}-\d{2}-\d{2}([T ]\d{2}:\d{2})?/
+function format(value) {
+  if (value === true) return t('approvals.subject.yes')
+  if (value === false) return t('approvals.subject.no')
+  if (typeof value === 'number') return value.toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US')
+  if (typeof value === 'string' && DATE_RE.test(value)) {
+    const d = new Date(value.length === 10 ? `${value}T00:00:00` : value)
+    if (!Number.isNaN(d.getTime())) {
+      return d.toLocaleString(locale.value === 'id' ? 'id-ID' : 'en-US',
+        value.length === 10 ? { dateStyle: 'medium' } : { dateStyle: 'medium', timeStyle: 'short' })
+    }
+  }
+  return String(value)
+}
+function isScalar(v) {
+  return v !== null && v !== '' && ['string', 'number', 'boolean'].includes(typeof v)
+}
+
+const fields = computed(() => {
+  const s = subject.value?.summary ?? {}
+  const out = []
+  for (const [key, value] of Object.entries(s)) {
+    if (key === 'items' || isHidden(key)) continue
+    if (isScalar(value)) out.push({ key, label: label(key), value: format(value) })
+    else if (value && typeof value === 'object' && !Array.isArray(value)) {
+      const name = nameOf(value)
+      if (name) out.push({ key, label: label(key), value: name })
+    } else if (Array.isArray(value) && value.length && value.every(isScalar)) {
+      out.push({ key, label: label(key), value: value.map(format).join(', ') })
+    }
+  }
+  return out
+})
+
+const items = computed(() => {
+  const list = subject.value?.summary?.items
+  return Array.isArray(list) && list.length ? list : []
+})
+const itemColumns = computed(() => {
+  const first = items.value[0] ?? {}
+  return Object.keys(first).filter((k) => !isHidden(k) && k !== 'created_at' && isScalar(first[k])).slice(0, 6)
+})
+
+const isDocument = computed(() => subject.value?.kind === 'document')
+
+function openDocument() {
+  if (!openTarget(subject.value?.open)) error.value = t('approvals.openUnavailable')
+  else emit('close')
+}
+function openInApp() {
+  if (!openTarget(props.appTarget)) error.value = t('approvals.openUnavailable')
+  else emit('close')
+}
+
+// Tab dibuka SINKRON di dalam gestur klik lalu diarahkan sesudah PDF siap; dibuka sesudah `await`
+// ia diblokir popup blocker tanpa jejak (pola sama Cetak Laporan `useDataImportExport`).
+async function openPdf() {
+  openingPdf.value = true
+  pdfError.value = ''
+  const win = window.open('', '_blank')
+  try {
+    const res = await approvalsApi.subjectPdf(props.requestId)
+    const url = URL.createObjectURL(res.data)
+    if (win) win.location = url
+    else window.open(url, '_blank')
+  } catch {
+    win?.close()
+    pdfError.value = t('approvals.subject.pdfError')
+  } finally {
+    openingPdf.value = false
+  }
+}
+</script>
+
+<template>
+  <AppModal :title="t('approvals.subject.title')" :subtitle="title" size="lg" @close="emit('close')">
+    <div v-if="loading" class="py-10 flex justify-center"><AppSpinner /></div>
+    <AppAlert v-else-if="error && !subject" variant="error" :message="error" />
+    <div v-else-if="subject" class="space-y-4" data-approval-subject>
+      <AppAlert v-if="error" variant="warning" :message="error" />
+      <p class="text-xs text-gray-500 dark:text-gray-400">{{ t('approvals.subject.readOnlyNote') }}</p>
+
+      <dl class="grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-3">
+        <div v-for="f in fields" :key="f.key" class="min-w-0">
+          <dt class="text-xs text-gray-500 dark:text-gray-400">{{ f.label }}</dt>
+          <dd class="text-sm text-gray-900 dark:text-white break-words whitespace-pre-line">{{ f.value }}</dd>
+        </div>
+      </dl>
+
+      <div v-if="items.length" class="overflow-x-auto scrollbar-rounded rounded-lg border border-gray-200 dark:border-gray-700">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-50 dark:bg-gray-800">
+            <tr class="text-left text-xs text-gray-500 dark:text-gray-400">
+              <th v-for="c in itemColumns" :key="c" class="py-2 px-3 font-medium whitespace-nowrap">{{ label(c) }}</th>
+            </tr>
+          </thead>
+          <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+            <tr v-for="(it, i) in items" :key="it.id ?? i">
+              <td v-for="c in itemColumns" :key="c" class="py-2 px-3 text-gray-700 dark:text-gray-300">
+                {{ isScalar(it[c]) ? format(it[c]) : '—' }}
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <p v-if="pdfError" class="text-xs text-red-600 dark:text-red-400">{{ pdfError }}</p>
+    </div>
+
+    <template #footer>
+      <AppButton variant="secondary" @click="emit('close')">{{ t('approvals.subject.close') }}</AppButton>
+      <AppButton v-if="subject && appTarget && !isDocument" variant="secondary" @click="openInApp">
+        <ExternalLink class="w-4 h-4" />{{ t('approvals.subject.openInApp') }}
+      </AppButton>
+      <AppButton v-if="subject?.pdf_available" variant="secondary" :loading="openingPdf" @click="openPdf">
+        <FileDown class="w-4 h-4" />{{ t('approvals.subject.openPdf') }}
+      </AppButton>
+      <AppButton v-if="isDocument" variant="primary" @click="openDocument">
+        <FileText class="w-4 h-4" />{{ t('approvals.subject.openDocument') }}
+      </AppButton>
+    </template>
+  </AppModal>
+</template>