Squashed commit of the following:

commit bcfb4c1456 Merge: 1cbde57 975c87d Author: Munawwirul Jamal <57973347+munaja@users.noreply.github.com> Date: Mon Nov 17 11:15:14 2025 +0700 Merge pull request #147 from dikstub-rssa/feat/surat-kontrol-135 Feat: Integration Rehab Medik - Surat Kontrol commit 975c87d99a Merge: f582090 1cbde57 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Nov 17 10:58:10 2025 +0700 Merge branch 'dev' into feat/surat-kontrol-135 commit f582090d18 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Thu Nov 13 11:56:21 2025 +0700 Fix: Refactor surat kontrol commit a14c4a5d3c Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Tue Nov 11 14:21:58 2025 +0700 Fix: Refactor Surat Kontrol CRUD {id} to {code} commit 24313adef6 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Fri Nov 7 10:35:46 2025 +0700 Fix: debug back btn in add, edit, detail content page commit 59b44b5729 Merge: 99a61a0 db15ec9 Author: Muhammad Hasyim Chaidir Ali <68959522+Hasyim-Kai@users.noreply.github.com> Date: Fri Nov 7 09:11:10 2025 +0700 Merge branch 'dev' into feat/surat-kontrol-135 commit 99a61a0bf2 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Thu Nov 6 08:06:01 2025 +0700 Feat: add right & bottom label in input base component commit db48919325 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:53:43 2025 +0700 Feat: add banner in List if requirement not met commit bd57250f7e Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:26:48 2025 +0700 Fix: refactor getDetail url param commit a361922e32 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Wed Nov 5 13:19:07 2025 +0700 Feat: Add & integrate add, edit, detail page commit 331f4a6b20 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Tue Nov 4 16:56:08 2025 +0700 Feat: Integrate Control Letter commit 2275f4dc99 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Oct 27 14:01:58 2025 +0700 Feat: add UI BPJS > Surat Kontrol commit 89e0e7a2c8 Author: hasyim_kai <muhammad.hasyim.c.a@gmail.com> Date: Mon Oct 27 10:21:59 2025 +0700 Feat: add UI CRUD Surat Kontrol at Rehab Medik > kunjungan > Proses
2025-11-18 12:58:58 +07:00
parent dc0bcc3606
commit c98018bb4e
47 changed files with 2696 additions and 31 deletions
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import FilterDialog from '~/components/pub/my-ui/nav-header/filter-dialog.vue'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const refExportNav: RefExportNav = {
+  onExportCsv: () => {
+    // open filter modal
+    console.log(`Export CSV Clicked`)
+  },
+}
+
+const isFormEntryDialogOpen = ref(false)
+const isHistoryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+
+const filterPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+function handleFiltering() {
+  console.log('Confirmed action: Filter')
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showProcess:
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break
+
+    case ActionEvents.showDetail:
+      isHistoryDialogOpen.value = true
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+
+  <!-- Disable dulu, ayahab kalo diminta beneran -->
+  <!-- <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+<template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+</div>
+</div>
+-->
+
+  <FilterDialog :prep="{ ...filterPrep }" 
+    :ref-search-nav="refSearchNav" 
+    :ref-export-nav="refExportNav" 
+    :enable-search="false"
+    :enable-date-range="false"/>
+
+  <AppBpjsControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    title="Filter"
+  >
+    <AppBpjsControlLetterFilter @submit="handleFiltering" />
+  </Dialog>
+
+  <Dialog
+    v-model:open="isHistoryDialogOpen"
+    title="Log History Surat Kontrol">
+    <AppBpjsControlLetterCommonHistoryDialog />
+  </Dialog>
+
+  <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+    @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.firstName">
+          <strong>Nama:</strong>
+          {{ record.firstName }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.cellphone }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
@@ -0,0 +1,133 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import {  handleActionSave,} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { type ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const controlLetter: ControlLetter = await composeFormData()
+  let createdControlLetterId = 0
+
+  const response = await handleActionSave(
+    controlLetter,
+    () => { },
+    () => { },
+    toast,
+  )
+
+  const data = (response?.body?.data ?? null)
+  if (!data) return
+  createdControlLetterId = data.id
+
+  // // If has callback provided redirect to callback with patientData
+  if (props.callbackUrl) {
+    navigateTo(props.callbackUrl + '?control-letter-id=' + controlLetter.id)
+  }
+
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd" />
+</template>
+
+<style scoped>
+/* component style */
+</style>
@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { Patient } from '~/models/patient'
+import type { Person } from '~/models/person'
+import { getDetail } from '~/services/control-letter.service'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const controlLetter = ref<ControlLetter | null>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Surat Kontrol',
+  icon: 'i-lucide-newspaper',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId, {
+    includes: "unit,specialist,subspecialist,doctor-employee-person",
+  })
+  if (result.success) {
+    controlLetter.value = result.body?.data
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": controlLetterId },
+      })
+      break
+
+    case 'back':
+      goBack()
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header :prep="headerPrep" :ref-search-nav="headerPrep.refSearchNav" />
+
+  <AppControlLetterPreview :instance="controlLetter" @click="handleAction" />
+</template>
@@ -0,0 +1,162 @@
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+import type { Patient, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import type { PatientBase } from '~/models/patient'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { uploadAttachment } from '~/services/patient.service'
+import { getDetail, update } from '~/services/control-letter.service'
+
+import {
+  // for form entry
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+} from '~/handlers/control-letter.handler'
+
+import { toast } from '~/components/pub/ui/toast'
+import { withBase } from '~/models/_base'
+import type { Person } from '~/models/person'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ControlLetter } from '~/models/control-letter'
+import { ControlLetterSchema } from '~/schemas/control-letter.schema'
+import { formatDateYyyyMmDd } from '~/lib/date'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const controlLetterForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const route = useRoute()
+const router = useRouter()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+const controlLetterId = typeof route.params.control_letter_id == 'string' ? parseInt(route.params.control_letter_id) : 0
+
+const isConfirmationOpen = ref(false)
+const controlLetter = ref({})
+
+const selectedUnitId = ref<number|null>(null)
+const selectedSpecialistId = ref<number|null>(null)
+const selectedSubSpecialistId = ref<number|null>(null)
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  const result = await getDetail(controlLetterId)
+  if (result.success) {
+    const responseData = {...result.body.data, date: formatDateYyyyMmDd(result.body.data.date)}
+    selectedUnitId.value = responseData?.unit_code
+    selectedSpecialistId.value = responseData?.specialist_code
+    selectedSubSpecialistId.value = responseData?.subspecialist_code
+
+    controlLetter.value = responseData
+    controlLetterForm.value?.setValues(responseData)
+  }
+})
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  const response = await handleActionEdit(
+    controlLetterId,
+    await composeFormData(),
+    () => { },
+    () => { },
+    toast,
+  )
+  goBack()
+}
+
+async function composeFormData(): Promise<ControlLetter> {
+  const [controlLetter,] = await Promise.all([
+    controlLetterForm.value?.validate(),
+  ])
+
+  const results = [controlLetter]
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  if (!allValid) return Promise.reject('Form validation failed')
+
+  const formData = controlLetter?.values
+  formData.encounter_id = encounterId
+  return new Promise((resolve) => resolve(formData))
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+  }
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+
+provide("selectedUnitId", selectedUnitId);
+provide("selectedSpecialistId", selectedSpecialistId);
+provide("selectedSubSpecialistId", selectedSubSpecialistId);
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Update Surat Kontrol</div>
+  <AppControlLetterEntryForm
+    ref="controlLetterForm"
+    :schema="ControlLetterSchema"
+    :selected-unit-id="selectedUnitId"
+    :selected-specialist-id="selectedSpecialistId"
+    :selected-sub-specialist-id="selectedSubSpecialistId"
+  />
+  
+  <div class="my-2 flex justify-end py-2">
+    <Action :enable-draft="false" @click="handleActionClick" />
+  </div>
+
+  <Confirmation
+    v-model:open="isConfirmationOpen"
+    title="Simpan Data"
+    message="Apakah Anda yakin ingin menyimpan data ini?"
+    confirm-text="Simpan"
+    @confirm="handleConfirmAdd"
+    @cancel="handleCancelAdd"
+  />
+</template>
+
+<style scoped>
+/* component style */
+</style>
@@ -0,0 +1,176 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+// #region Imports
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { getList, remove } from '~/services/control-letter.service'
+import { toast } from '~/components/pub/ui/toast'
+import type { Encounter } from '~/models/encounter'
+import WarningAlert from '~/components/pub/my-ui/alert/warning-alert.vue'
+// #endregion
+
+// #region State
+const props = defineProps<{
+  encounter?: Encounter
+}>()
+const route = useRoute()
+const encounterId = typeof route.params.id == 'string' ? parseInt(route.params.id) : 0
+
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getList({ ...params, includes: 'specialist,subspecialist,doctor-employee-person', }),
+  entityName: 'control-letter',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+const isRequirementsMet = ref(true)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: "Surat Kontrol",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Surat Kontrol",
+    onClick: () => navigateTo({
+        name: 'rehab-encounter-id-control-letter-add',
+        params: { id: encounterId },
+      }),
+  },
+}
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getListData()
+})
+// #endregion
+
+// #region Functions
+async function getListData() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching Data:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await remove(record.id)
+      if (result.success) {
+        toast({ title: 'Berhasil', description: 'Data berhasil dihapus', variant: 'default' })
+        await fetchData()
+      } else {
+        toast({ title: 'Gagal', description: `Data gagal dihapus`, variant: 'destructive' })
+      }
+    } catch (error) {
+      toast({ title: 'Gagal', description: `Something went wrong`, variant: 'destructive' })
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'rehab-encounter-id-control-letter-control_letter_id-edit',
+        params: { id: encounterId, "control_letter_id": recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <WarningAlert v-if="!isRequirementsMet"
+    class="mb-5"
+    text="Syarat pembuatan surat kontrol belum terpenuhi"
+    :description="[
+      'Lanjutan Penatalaksanaan Pasien harus pulang/KRS.',
+      'Status Resume Medis harus tervalidasi.'
+    ]" />
+
+  <div v-else>
+    <Header v-model:search="searchInput"
+      :prep="{ ...headerPrep }"
+      :ref-search-nav="refSearchNav"
+      @search="handleSearch" />
+
+    <AppControlLetterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p>
+            <strong>ID:</strong>
+            {{ record?.id }}
+          </p>
+          <p v-if="record?.firstName">
+            <strong>Nama:</strong>
+            {{ record.firstName }}
+          </p>
+          <p v-if="record?.code">
+            <strong>Kode:</strong>
+            {{ record.cellphone }}
+          </p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
@@ -20,6 +20,7 @@ import Radiology from '~/components/content/radiology-order/main.vue'
 import Consultation from '~/components/content/consultation/list.vue'
 import DocUploadList from '~/components/content/document-upload/list.vue'
 import { genEncounter } from '~/models/encounter'
+import ControlLetterList from '~/components/content/control-letter/list.vue'

 const route = useRoute()
 const router = useRouter()
@@ -80,7 +81,7 @@ const tabs: TabItem[] = [
  { value: 'mcu-result', label: 'Hasil Penunjang' },
  { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
  { value: 'resume', label: 'Resume' },
-  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'control', label: 'Surat Kontrol', component: ControlLetterList, props: { encounter: data } },
  { value: 'screening', label: 'Skrinning MPP' },
  { value: 'supporting-document', label: 'Upload Dokumen Pendukung', component: DocUploadList, props: { encounter: data, },  },
 ]