DONE: generate letter after the membership-application is completed

2026-07-02 10:08:19 +08:00
parent 9e9867217f
commit 4dcd135c32
20 changed files with 679 additions and 38 deletions
@@ -2,7 +2,7 @@
 import { computed, onMounted, onUnmounted, ref } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 import dayjs from 'dayjs'
-import { CircleAlert, CircleCheck, Download, Eye, Pencil } from '@lucide/vue'
+import { CircleAlert, CircleCheck, Download, Eye, FileText, Pencil } from '@lucide/vue'
 import {
  AlertRoot,
  AlertTitle,
@@ -13,7 +13,7 @@ import { Badge } from '@/components/ui/badge'
 import { Box } from '@/components/ui/box'
 import { Button } from '@/components/ui/button'
 import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
-import { Field, FieldLabel } from '@/components/ui/field'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import { Input } from '@/components/ui/input'
 import { TabsRoot, TabsList, TabsTrigger, TabsContent } from '@/components/ui/tabs'
 import { Textarea } from '@/components/ui/textarea'
@@ -23,6 +23,7 @@ import {
  completeMembershipApplication,
  downloadMembershipApplicationDocument,
  fetchMembershipApplicationDocument,
+  generateMembershipApplicationResultLetter,
  getMembershipApplication,
  submitBoardReview,
  submitManagementReview,
@@ -42,6 +43,7 @@ import type {
  MembershipApplicationReviewDetail,
  MembershipApplicationStatus,
 } from '../types/membership-application.types'
+import { RESULT_LETTER_DOCUMENT_TYPE } from '../types/membership-application.types'

 const WORKFLOW_STEPS = [
  { id: 1, label: 'Dihantar' },
@@ -56,6 +58,7 @@ const DOCUMENT_TYPE_LABELS: Record<string, string> = {
  photo: 'Gambar Passport',
  salary_slip: 'Slip Gaji',
  employer_letter: 'Surat Pengesahan Majikan',
+  [RESULT_LETTER_DOCUMENT_TYPE]: 'Surat Keputusan',
 }

 const router = useRouter()
@@ -83,6 +86,10 @@ const previewOpen = ref(false)
 const previewLoading = ref(false)
 const previewUrl = ref<string | null>(null)
 const previewDocument = ref<MembershipApplicationDocumentDetail | null>(null)
+const generateDialogOpen = ref(false)
+const generateSubmitting = ref(false)
+const boardMeetingReference = ref('')
+const boardMeetingReferenceError = ref<string | null>(null)

 function statusLabel(status: MembershipApplicationStatus): string {
  const labels: Record<MembershipApplicationStatus, string> = {
@@ -135,6 +142,20 @@ const showCompleteAction = computed(
    application.value?.status === 'PENDING_NOTIFICATION',
 )

+const resultLetterDocument = computed(() =>
+  application.value?.documents.find((document) => document.type === RESULT_LETTER_DOCUMENT_TYPE) ?? null,
+)
+
+const showGenerateResultLetter = computed(
+  () =>
+    hasPermission('jana surat keputusan keahlian') &&
+    application.value?.status === 'COMPLETED' &&
+    !resultLetterDocument.value &&
+    (application.value.board_result === 'PASS' || application.value.board_result === 'FAIL'),
+)
+
+const applicant = computed(() => application.value?.applicant ?? null)
+
 const confirmDialogTitle = computed(() => {
  if (!pendingAction.value) return 'Sahkan Tindakan'

@@ -207,8 +228,6 @@ function workflowStepLabelClass(stepId: number) {
    : 'ml-3 opacity-70 lg:mx-auto lg:mt-3 lg:w-32'
 }

-const applicant = computed(() => application.value?.applicant ?? null)
-
 const sortedReviews = computed(() => {
  if (!application.value?.reviews.length) return []

@@ -219,6 +238,10 @@ const sortedReviews = computed(() => {
  })
 })

+const uploadedDocuments = computed(() =>
+  application.value?.documents.filter((document) => document.type !== RESULT_LETTER_DOCUMENT_TYPE) ?? [],
+)
+
 function displayValue(value: string | number | null | undefined): string {
  if (value === null || value === undefined || value === '') return '-'
  return String(value)
@@ -390,6 +413,49 @@ async function confirmPendingAction() {
  }
 }

+async function openGenerateDialog() {
+  boardMeetingReference.value = ''
+  boardMeetingReferenceError.value = null
+  generateDialogOpen.value = true
+}
+
+function closeGenerateDialog() {
+  if (generateSubmitting.value) return
+  generateDialogOpen.value = false
+  boardMeetingReference.value = ''
+  boardMeetingReferenceError.value = null
+}
+
+async function confirmGenerateLetter() {
+  if (!application.value || generateSubmitting.value) return
+
+  const reference = boardMeetingReference.value.trim()
+  if (!reference) {
+    boardMeetingReferenceError.value = 'Rujukan mesyuarat lembaga diperlukan.'
+    return
+  }
+
+  generateSubmitting.value = true
+  boardMeetingReferenceError.value = null
+  error.value = null
+
+  try {
+    const response = await generateMembershipApplicationResultLetter(application.value.id, {
+      board_meeting_reference: reference,
+    })
+
+    application.value = response.data.application
+    successMessage.value = response.message
+    closeGenerateDialog()
+  } catch (err) {
+    const validationErrors = getApiValidationErrors(err)
+    boardMeetingReferenceError.value = validationErrors?.board_meeting_reference?.[0] ?? null
+    error.value = getApiErrorMessage(err, 'Gagal menjana surat keputusan.')
+  } finally {
+    generateSubmitting.value = false
+  }
+}
+
 async function handleDownloadDocument(document: MembershipApplicationDocumentDetail) {
  if (!application.value || downloadingDocumentId.value) return

@@ -594,6 +660,46 @@ onUnmounted(() => {
        </div>
      </Box>

+      <Box v-if="showGenerateResultLetter" class="p-5 sm:p-6">
+        <div class="font-medium">Surat Keputusan</div>
+        <p class="mt-1 text-sm opacity-70">
+          Jana surat keputusan lembaga untuk permohonan ini. Surat hanya boleh dijana sekali.
+        </p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          <Button type="button" variant="primary" @click="openGenerateDialog">
+            <FileText class="mr-2 size-4" />
+            Jana Surat Keputusan
+          </Button>
+        </div>
+      </Box>
+
+      <Box v-else-if="resultLetterDocument" class="p-5 sm:p-6">
+        <div class="font-medium">Surat Keputusan</div>
+        <p class="mt-1 text-sm opacity-70">
+          {{ resultLetterDocument.name }} · {{ formatFileSize(resultLetterDocument.file_size) }}
+        </p>
+        <div class="mt-4 flex flex-wrap gap-2">
+          <Button
+            type="button"
+            look="outline"
+            :disabled="previewLoading && previewDocument?.id === resultLetterDocument.id"
+            @click="handleViewDocument(resultLetterDocument)"
+          >
+            <Eye class="mr-2 size-4" />
+            Lihat
+          </Button>
+          <Button
+            type="button"
+            look="outline"
+            :disabled="downloadingDocumentId === resultLetterDocument.id"
+            @click="handleDownloadDocument(resultLetterDocument)"
+          >
+            <Download class="mr-2 size-4" />
+            {{ downloadingDocumentId === resultLetterDocument.id ? 'Memuat turun...' : 'Muat Turun' }}
+          </Button>
+        </div>
+      </Box>
+
      <TabsRoot defaultValue="personal" class="w-full">
        <Box raised="single" class="w-full p-0">
          <div class="w-full px-5 py-4">
@@ -783,9 +889,9 @@ onUnmounted(() => {
        </TabsContent>

        <TabsContent value="documents" class="mt-6">
-          <div v-if="!application.documents.length" class="opacity-70">Tiada dokumen dimuat naik.</div>
+          <div v-if="!uploadedDocuments.length" class="opacity-70">Tiada dokumen dimuat naik.</div>
          <div v-else class="space-y-3">
-            <div v-for="document in application.documents" :key="document.id"
+            <div v-for="document in uploadedDocuments" :key="document.id"
              class="flex flex-wrap items-center justify-between gap-3 rounded-lg border border-foreground/10 p-4">
              <div>
                <div class="font-medium">{{ documentLabel(document.type, document.name) }}</div>
@@ -871,6 +977,43 @@ onUnmounted(() => {
      </DialogContent>
    </DialogRoot>

+    <DialogRoot :open="generateDialogOpen" @openChange="(details) => { if (!details.open) closeGenerateDialog() }">
+      <DialogContent>
+        <div class="p-5">
+          <div class="text-2xl font-medium">Jana Surat Keputusan</div>
+          <p v-if="application" class="mt-2 text-sm opacity-70">
+            {{ application.application_number }} · {{ application.applicant?.name ?? '-' }}
+          </p>
+          <Field class="mt-5">
+            <FieldLabel for="detail-board-meeting-reference">Rujukan Mesyuarat Lembaga</FieldLabel>
+            <Input
+              id="detail-board-meeting-reference"
+              v-model="boardMeetingReference"
+              type="text"
+              placeholder="Contoh: Mesyuarat Lembaga Bil. 3/2026"
+              :disabled="generateSubmitting"
+              @input="boardMeetingReferenceError = null"
+            />
+            <FieldError v-if="boardMeetingReferenceError">{{ boardMeetingReferenceError }}</FieldError>
+          </Field>
+        </div>
+        <div class="px-5 pb-8 text-center">
+          <DialogCloseTrigger class="mr-2 w-32" :disabled="generateSubmitting" @click="closeGenerateDialog">
+            Batal
+          </DialogCloseTrigger>
+          <Button
+            class="w-32"
+            type="button"
+            variant="primary"
+            :disabled="generateSubmitting"
+            @click="confirmGenerateLetter"
+          >
+            {{ generateSubmitting ? 'Menjana...' : 'Jana Surat' }}
+          </Button>
+        </div>
+      </DialogContent>
+    </DialogRoot>
+
    <Teleport to="body">
      <div v-if="previewOpen" class="fixed inset-0 z-70 flex items-center justify-center p-4 sm:p-6" role="dialog"
        aria-modal="true"
@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import { computed, ref, watch } from 'vue'
 import { useRouter } from 'vue-router'
-import { CircleAlert, CircleCheck, Search, Eye, Pencil } from '@lucide/vue'
+import { CircleAlert, CircleCheck, Search, Eye, Pencil, FileText, Download } from '@lucide/vue'
 import dayjs from 'dayjs'
 import * as select from '@zag-js/select'
 import {
@@ -26,13 +26,18 @@ import {
 } from '@/components/ui/select'
 import { Button } from '@/components/ui/button'
 import { DialogRoot, DialogContent, DialogCloseTrigger } from '@/components/ui/dialog'
+import { Field, FieldError, FieldLabel } from '@/components/ui/field'
 import DataTable from '@/components/ui/usage/DataTable.vue'
 import type { TableHeader } from '@/components/ui/usage/DataTable.vue'
-import { getApiErrorMessage } from '@/core/utils/getApiErrorMessage'
+import { getApiErrorMessage, getApiValidationErrors } from '@/core/utils/getApiErrorMessage'
 import axios from 'axios'
 import { useMembershipApplicationList } from '../composables/useMembershipApplicationList'
 import { usePermissions } from '@/composables/usePermissions'
-import { batchCompleteMembershipApplications } from '../services/membership-application.service'
+import {
+  batchCompleteMembershipApplications,
+  downloadMembershipApplicationDocument,
+  generateMembershipApplicationResultLetter,
+} from '../services/membership-application.service'
 import {
  boardResultBadgeVariant,
  statusBadgeLook,
@@ -41,6 +46,7 @@ import {
 import type {
  BatchCompleteFailedItem,
  BatchCompleteResponse,
+  GenerateResultLetterResponse,
  MembershipApplicationBoardResult,
  MembershipApplicationListItem,
  MembershipApplicationStatus,
@@ -99,11 +105,19 @@ const {
 } = useMembershipApplicationList()

 const canBatchComplete = computed(() => hasPermission('selesaikan permohonan keahlian'))
+const canGenerateResultLetter = computed(() => hasPermission('jana surat keputusan keahlian'))
 const selectedIds = ref<string[]>([])
 const batchSubmitting = ref(false)
 const batchConfirmOpen = ref(false)
 const batchSuccessMessage = ref<string | null>(null)
+const letterSuccessMessage = ref<string | null>(null)
 const batchFailedItems = ref<BatchCompleteFailedItem[]>([])
+const generateDialogOpen = ref(false)
+const generateSubmitting = ref(false)
+const boardMeetingReference = ref('')
+const boardMeetingReferenceError = ref<string | null>(null)
+const generateTarget = ref<MembershipApplicationListItem | null>(null)
+const downloadingResultLetterId = ref<string | null>(null)

 const selectableApplications = computed(() =>
  applications.value.filter((item) => item.status === 'PENDING_NOTIFICATION'),
@@ -227,6 +241,90 @@ function goToApplicationEdit(id: string) {
  router.push({ name: 'edit-membership-application', params: { id } })
 }

+function canGenerateLetter(item: MembershipApplicationListItem): boolean {
+  return (
+    canGenerateResultLetter.value &&
+    item.status === 'COMPLETED' &&
+    !item.has_result_letter &&
+    (item.board_result === 'PASS' || item.board_result === 'FAIL')
+  )
+}
+
+function canDownloadLetter(item: MembershipApplicationListItem): boolean {
+  return !!item.has_result_letter && !!item.result_letter_document
+}
+
+function openGenerateDialog(item: MembershipApplicationListItem) {
+  generateTarget.value = item
+  boardMeetingReference.value = ''
+  boardMeetingReferenceError.value = null
+  generateDialogOpen.value = true
+}
+
+function closeGenerateDialog() {
+  if (generateSubmitting.value) return
+  generateDialogOpen.value = false
+  generateTarget.value = null
+  boardMeetingReference.value = ''
+  boardMeetingReferenceError.value = null
+}
+
+async function confirmGenerateLetter() {
+  if (!generateTarget.value || generateSubmitting.value) return
+
+  const reference = boardMeetingReference.value.trim()
+  if (!reference) {
+    boardMeetingReferenceError.value = 'Rujukan mesyuarat lembaga diperlukan.'
+    return
+  }
+
+  generateSubmitting.value = true
+  boardMeetingReferenceError.value = null
+  error.value = null
+  letterSuccessMessage.value = null
+
+  try {
+    const response = await generateMembershipApplicationResultLetter(generateTarget.value.id, {
+      board_meeting_reference: reference,
+    })
+
+    letterSuccessMessage.value = response.message
+    closeGenerateDialog()
+    await fetchApplications(page.value)
+  } catch (err) {
+    if (axios.isAxiosError(err) && err.response?.data) {
+      const responseData = err.response.data as GenerateResultLetterResponse
+      const validationErrors = getApiValidationErrors(err)
+      boardMeetingReferenceError.value = validationErrors?.board_meeting_reference?.[0] ?? null
+      error.value = responseData.message ?? getApiErrorMessage(err, 'Gagal menjana surat keputusan.')
+    } else {
+      error.value = getApiErrorMessage(err, 'Gagal menjana surat keputusan.')
+    }
+  } finally {
+    generateSubmitting.value = false
+  }
+}
+
+async function handleDownloadResultLetter(item: MembershipApplicationListItem) {
+  const document = item.result_letter_document
+  if (!document) return
+
+  downloadingResultLetterId.value = item.id
+
+  try {
+    await downloadMembershipApplicationDocument(
+      item.id,
+      document.id,
+      document.name,
+      document.mime_type,
+    )
+  } catch (err) {
+    error.value = getApiErrorMessage(err, 'Gagal memuat turun surat keputusan.')
+  } finally {
+    downloadingResultLetterId.value = null
+  }
+}
+
 const headers = computed<TableHeader[]>(() => {
  const base: TableHeader[] = [
    { title: 'Bil.', key: '#', sortable: false },
@@ -286,6 +384,13 @@ const headers = computed<TableHeader[]>(() => {
      <p class="mt-1 text-sm opacity-70">Urus dan semak permohonan keahlian koperasi.</p>
    </div>

+    <AlertRoot v-if="letterSuccessMessage" variant="success">
+      <CircleCheck />
+      <AlertTitle>Berjaya</AlertTitle>
+      <AlertDescription>{{ letterSuccessMessage }}</AlertDescription>
+      <AlertCloseTrigger @click="letterSuccessMessage = null" />
+    </AlertRoot>
+
    <AlertRoot v-if="batchSuccessMessage" variant="success">
      <CircleCheck />
      <AlertTitle>Berjaya</AlertTitle>
@@ -411,6 +516,29 @@ const headers = computed<TableHeader[]>(() => {
            @click="goToApplicationEdit((item as MembershipApplicationListItem).id)">
            <Pencil class="size-4" aria-hidden="true" />
          </Button>
+          <Button
+            v-if="canGenerateLetter(item as MembershipApplicationListItem)"
+            type="button"
+            variant="ghost"
+            size="sm"
+            class="bg-amber-600 text-white"
+            title="Jana surat keputusan"
+            @click="openGenerateDialog(item as MembershipApplicationListItem)"
+          >
+            <FileText class="size-4" aria-hidden="true" />
+          </Button>
+          <Button
+            v-if="canDownloadLetter(item as MembershipApplicationListItem)"
+            type="button"
+            variant="ghost"
+            size="sm"
+            class="bg-purple-600 text-white"
+            title="Muat turun surat keputusan"
+            :disabled="downloadingResultLetterId === (item as MembershipApplicationListItem).id"
+            @click="handleDownloadResultLetter(item as MembershipApplicationListItem)"
+          >
+            <Download class="size-4" aria-hidden="true" />
+          </Button>
        </div>
      </template>
    </DataTable>
@@ -434,5 +562,45 @@ const headers = computed<TableHeader[]>(() => {
        </div>
      </DialogContent>
    </DialogRoot>
+
+    <DialogRoot :open="generateDialogOpen" @openChange="(details) => { if (!details.open) closeGenerateDialog() }">
+      <DialogContent>
+        <div class="p-5">
+          <div class="text-2xl font-medium">Jana Surat Keputusan</div>
+          <p v-if="generateTarget" class="mt-2 text-sm opacity-70">
+            {{ generateTarget.application_number }} · {{ generateTarget.applicant?.name ?? '-' }}
+          </p>
+          <Field class="mt-5">
+            <FieldLabel for="board-meeting-reference">Rujukan Mesyuarat Lembaga</FieldLabel>
+            <Input
+              id="board-meeting-reference"
+              v-model="boardMeetingReference"
+              type="text"
+              placeholder="Contoh: Mesyuarat Lembaga Bil. 3/2026"
+              :disabled="generateSubmitting"
+              @input="boardMeetingReferenceError = null"
+            />
+            <FieldError v-if="boardMeetingReferenceError">{{ boardMeetingReferenceError }}</FieldError>
+          </Field>
+          <p class="mt-3 text-sm opacity-70">
+            Surat hanya boleh dijana sekali dan akan disimpan sebagai dokumen permohonan.
+          </p>
+        </div>
+        <div class="px-5 pb-8 text-center">
+          <DialogCloseTrigger class="mr-2 w-32" :disabled="generateSubmitting" @click="closeGenerateDialog">
+            Batal
+          </DialogCloseTrigger>
+          <Button
+            class="w-32"
+            type="button"
+            variant="primary"
+            :disabled="generateSubmitting"
+            @click="confirmGenerateLetter"
+          >
+            {{ generateSubmitting ? 'Menjana...' : 'Jana Surat' }}
+          </Button>
+        </div>
+      </DialogContent>
+    </DialogRoot>
  </div>
 </template>
@@ -1,7 +1,10 @@
 import { api } from '@/core/services/api'
 import type { PaginatedApiResponse } from '@/core/types/api'
 import type {
+  BatchCompleteResponse,
  DocumentUploadType,
+  GenerateResultLetterPayload,
+  GenerateResultLetterResponse,
  ListMembershipApplicationsParams,
  MembershipApplicationApiResponse,
  MembershipApplicationFormState,
@@ -9,7 +12,6 @@ import type {
  MembershipApplicationReviewPayload,
  MembershipApplicationReviewResponse,
  MembershipApplicationSubmitResponse,
-  BatchCompleteResponse,
  MembershipApplicationUpdateResponse,
  MemberLookupResponse,
  UpdateMembershipApplicationPayload,
@@ -215,6 +217,22 @@ export async function batchCompleteMembershipApplications(
  return data
 }

+export async function generateMembershipApplicationResultLetter(
+  id: string,
+  payload: GenerateResultLetterPayload,
+): Promise<GenerateResultLetterResponse> {
+  const { data } = await api.post<GenerateResultLetterResponse>(
+    `/v1/membership-applications/${id}/result-letter`,
+    payload,
+  )
+
+  if (!data.success) {
+    throw new Error(data.message ?? 'Failed to generate result letter')
+  }
+
+  return data
+}
+
 // Fetch membership application document/ view in modal
 export async function fetchMembershipApplicationDocument(
  applicationId: string,
@@ -80,6 +80,8 @@ export type MembershipApplicationStatus =

 export type MembershipApplicationBoardResult = 'PASS' | 'FAIL'

+export const RESULT_LETTER_DOCUMENT_TYPE = 'result_letter' as const
+
 export interface MembershipApplicationApplicantSummary {
  name: string
  email: string
@@ -92,6 +94,8 @@ export interface MembershipApplicationListItem {
  status: MembershipApplicationStatus
  board_result: MembershipApplicationBoardResult | null
  submitted_at: string | null
+  has_result_letter: boolean
+  result_letter_document: MembershipApplicationDocumentDetail | null
  applicant: MembershipApplicationApplicantSummary | null
  created_at: string | null
 }
@@ -232,3 +236,16 @@ export type BatchCompleteResponse = {
    failed: BatchCompleteFailedItem[]
  }
 }
+
+export interface GenerateResultLetterPayload {
+  board_meeting_reference: string
+}
+
+export type GenerateResultLetterResponse = {
+  success: boolean
+  message: string
+  data: {
+    application: MembershipApplicationDetail
+    document: MembershipApplicationDocumentDetail | null
+  }
+}