From fc308809b848512a664659a51475e634e08f06f4 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Wed, 29 Oct 2025 14:57:19 +0700
Subject: [PATCH 1/5] Feat: add UI Rehab Medik > Proses > Resume

---
 .../app/resume/_common/select-arrangement.vue |  72 +++++++
 .../app/resume/_common/select-date.vue        | 121 ++++++++++++
 .../app/resume/_common/select-death-cause.vue |  71 +++++++
 .../app/resume/_common/select-faskes.vue      |  70 +++++++
 .../_common/select-primary-diagnosis.vue      |  70 +++++++
 .../_common/select-secondary-diagnosis.vue    |  71 +++++++
 app/components/app/resume/add.vue             | 185 ++++++++++++++++++
 app/components/app/resume/list.cfg.ts         |  93 +++++++++
 app/components/app/resume/list.vue            |  43 ++++
 app/components/content/encounter/process.vue  |   3 +-
 app/components/content/resume/add.vue         | 104 ++++++++++
 app/components/content/resume/list.vue        | 151 ++++++++++++++
 .../pub/my-ui/form/text-area-input.vue        |  86 ++++++++
 .../pub/my-ui/nav-footer/ba-dr-su.vue         |   3 +-
 app/pages/(features)/resume/add.vue           |  41 ++++
 app/schemas/resume.schema.ts                  |  42 ++++
 16 files changed, 1224 insertions(+), 2 deletions(-)
 create mode 100644 app/components/app/resume/_common/select-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-date.vue
 create mode 100644 app/components/app/resume/_common/select-death-cause.vue
 create mode 100644 app/components/app/resume/_common/select-faskes.vue
 create mode 100644 app/components/app/resume/_common/select-primary-diagnosis.vue
 create mode 100644 app/components/app/resume/_common/select-secondary-diagnosis.vue
 create mode 100644 app/components/app/resume/add.vue
 create mode 100644 app/components/app/resume/list.cfg.ts
 create mode 100644 app/components/app/resume/list.vue
 create mode 100644 app/components/content/resume/add.vue
 create mode 100644 app/components/content/resume/list.vue
 create mode 100644 app/components/pub/my-ui/form/text-area-input.vue
 create mode 100644 app/pages/(features)/resume/add.vue
 create mode 100644 app/schemas/resume.schema.ts

diff --git a/app/components/app/resume/_common/select-arrangement.vue b/app/components/app/resume/_common/select-arrangement.vue
new file mode 100644
index 00000000..9a945d44
--- /dev/null
+++ b/app/components/app/resume/_common/select-arrangement.vue
@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label,
+  placeholder,
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const arrangementTypeOpts = [
+  { label: 'KRS', value: "krs" },
+  { label: 'MRS', value: "mrs" },
+  { label: 'Pindah IGD', value: "pindahIgd" },
+  { label: 'Rujuk', value: "rujuk" },
+  { label: 'Rujuk Balik', value: "rujukBalik" },
+  { label: 'Meninggal', value: "meninggal" },
+  { label: 'Lain Lain', value: "other" },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      v-show="label"
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+        <FormField :name="fieldName" v-slot="{ componentField, value }">
+          <FormItem>
+            <FormControl>
+              <Select 
+                v-bind="componentField" 
+                :model-value="value"
+                :items="arrangementTypeOpts"
+                :defaultValue='arrangementTypeOpts[0]?.value' 
+              />
+            </FormControl>            
+            <FormMessage />
+          </FormItem>
+        </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-date.vue b/app/components/app/resume/_common/select-date.vue
new file mode 100644
index 00000000..74245e7e
--- /dev/null
+++ b/app/components/app/resume/_common/select-date.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { differenceInDays, differenceInMonths, differenceInYears, parseISO } from 'date-fns'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  isWithTime?: boolean
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+  isWithTime = false,
+} = props
+
+// Reactive variables for age calculation
+const patientAge = ref<string>('Masukkan tanggal lahir')
+
+// Function to calculate age with years, months, and days
+function calculateAge(birthDate: string | Date | undefined): string {
+  if (!birthDate) {
+    return 'Masukkan tanggal lahir'
+  }
+
+  try {
+    let dateObj: Date
+
+    if (typeof birthDate === 'string') {
+      dateObj = parseISO(birthDate)
+    } else {
+      dateObj = birthDate
+    }
+
+    const today = new Date()
+
+    // Calculate years, months, and days
+    const totalYears = differenceInYears(today, dateObj)
+
+    // Calculate remaining months after years
+    const yearsPassed = new Date(dateObj)
+    yearsPassed.setFullYear(yearsPassed.getFullYear() + totalYears)
+    const remainingMonths = differenceInMonths(today, yearsPassed)
+
+    // Calculate remaining days after years and months
+    const monthsPassed = new Date(yearsPassed)
+    monthsPassed.setMonth(monthsPassed.getMonth() + remainingMonths)
+    const remainingDays = differenceInDays(today, monthsPassed)
+
+    // Format the result
+    const parts = []
+    if (totalYears > 0) parts.push(`${totalYears} Tahun`)
+    if (remainingMonths > 0) parts.push(`${remainingMonths} Bulan`)
+    if (remainingDays > 0) parts.push(`${remainingDays} Hari`)
+
+    return parts.length > 0 ? parts.join(' ') : '0 Hari'
+  } catch {
+    return 'Masukkan tanggal lahir'
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Input
+              id="birthDate"
+              :type="isWithTime ? 'datetime-local' : 'date'"
+              min="1900-01-01"
+              :max="new Date().toISOString().split('T')[0]"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :disabled="isDisabled"
+              @update:model-value="
+                (value: string | number) => {
+                  const dateStr = typeof value === 'number' ? String(value) : value
+                  patientAge = calculateAge(dateStr)
+                }
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-death-cause.vue b/app/components/app/resume/_common/select-death-cause.vue
new file mode 100644
index 00000000..a155b139
--- /dev/null
+++ b/app/components/app/resume/_common/select-death-cause.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label,
+  placeholder,
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      v-show="label"
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-faskes.vue b/app/components/app/resume/_common/select-faskes.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-faskes.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-primary-diagnosis.vue b/app/components/app/resume/_common/select-primary-diagnosis.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-primary-diagnosis.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-secondary-diagnosis.vue b/app/components/app/resume/_common/select-secondary-diagnosis.vue
new file mode 100644
index 00000000..a155b139
--- /dev/null
+++ b/app/components/app/resume/_common/select-secondary-diagnosis.vue
@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label,
+  placeholder,
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      v-show="label"
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/add.vue b/app/components/app/resume/add.vue
new file mode 100644
index 00000000..2e12f872
--- /dev/null
+++ b/app/components/app/resume/add.vue
@@ -0,0 +1,185 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import { FieldArray } from 'vee-validate'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import SelectSecondaryDiagnosis from './_common/select-secondary-diagnosis.vue'
+import SelectPrimaryDiagnosis from './_common/select-primary-diagnosis.vue'
+import SelectArrangement from './_common/select-arrangement.vue'
+import type { ResumeArrangementType } from '~/schemas/resume.schema'
+import SelectFaskes from './_common/select-faskes.vue'
+import SelectDeathCause from './_common/select-death-cause.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  resumeArrangementType: ResumeArrangementType
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form ref="formRef" v-slot="{ values }" as="" keep-values :validation-schema="formSchema" :validate-on-mount="false"
+    validation-mode="onSubmit" :initial-values="initialValues ? initialValues : {}">
+    <h1 class="mb-3 text-base font-medium">Pemeriksaan Pasien</h1>
+    <DE.Block :col-count="3" :cell-flex="false">
+      <SelectDate field-name="inDate" label="Tanggal Masuk" :errors="errors" :is-disabled="true" />
+      <SelectDate field-name="outDate" label="Tanggal Keluar" :errors="errors" :is-disabled="true" />
+    </DE.Block>
+    <DE.Block :col-count="3" :cell-flex="false">
+      <TextAreaInput field-name="anamnesis" label="Anamnesis" placeholder="Anamnesis" :errors="errors" />
+      <TextAreaInput field-name="physicalCheckup" label="Pemeriksaan Fisik" placeholder="Pemeriksaan Fisik"
+        :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Pemeriksaan Penunjang"
+        :errors="errors" />
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <!-- DIAGNOSIS -->
+    <h1 class="mb-3 text-base font-medium">Diagnosis</h1>
+    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
+      <SelectPrimaryDiagnosis
+        field-name="primaryDiagnosis"
+        label="Diagnosis Utama"
+        placeholder="Diagnosis Utama"
+        :errors="errors" is-required />
+
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <h1 class="mb-3 font-medium">Diagnosis Sekunder</h1>
+
+        <FieldArray v-slot="{ fields, push, remove }" name="secondaryDiagnosis">
+          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+            <SelectSecondaryDiagnosis
+              :field-name="`secondaryDiagnosis[${idx}]`"
+              :errors="errors"
+            />
+            <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+            </Button>
+          </div>
+          <Button type="button" variant="outline"
+            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+            @click="push(``)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Diagnosis
+          </Button>
+        </FieldArray>
+      </div>
+    </DE.Block>
+    <Separator class="my-4" />
+
+
+    <!-- DIAGNOSIS -->
+    <h1 class="mb-3 text-base font-medium">Tindakan Operatif/Non Operatif</h1>
+    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
+      <SelectPrimaryDiagnosis
+        field-name="primaryOperativeNonOperativeAct"
+        label="Tindakan Operatif Utama"
+        placeholder="Tindakan Operatif Utama"
+        :errors="errors" is-required />
+
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <h1 class="mb-3 font-medium">Tindakan / Prosedur</h1>
+
+        <FieldArray v-slot="{ fields, push, remove }" name="secondaryOperativeNonOperativeAct">
+          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+            <SelectSecondaryDiagnosis
+              :field-name="`secondaryOperativeNonOperativeAct[${idx}]`"
+              :errors="errors"
+            />
+            <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+            </Button>
+          </div>
+          <Button type="button" variant="outline"
+            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+            @click="push(``)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Tindakan / Prosedur
+          </Button>
+        </FieldArray>
+      </div>
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <DE.Block class="w-3/5" :cell-flex="false">
+      <TextAreaInput field-name="medikamentosa" label="Medikamentosa" placeholder="Medikamentosa" :errors="errors" />
+    </DE.Block>
+    <Separator class="my-4" />
+
+    <h1 class="mb-3 font-medium">Penatalaksanaan</h1>
+    <DE.Block :col-count="3" :cell-flex="false">
+      <SelectArrangement field-name="arrangement" label="Lanjutan Penatalaksanaan" placeholder="Pilih Arrangement" :errors="errors" />
+      
+      <SelectFaskes
+        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        field-name="faskes"
+        label="Faskes"
+        placeholder="Pilih Faskes"
+        :errors="errors"
+      />
+      <InputBase
+        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        field-name="clinic"
+        label="Klinik"
+        placeholder="Masukkan Klinik"
+        :errors="errors"
+      />
+
+      <SelectDate
+        v-show="resumeArrangementType === `meninggal`"
+        field-name="deathDate"
+        label="Jam Tanggal Meninggal"
+        :errors="errors"
+        :is-with-time="true" />
+      
+      <DE.Cell class="mt-2" :col-span="2" v-show="resumeArrangementType === `meninggal`">
+        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+          <h1 class="mb-3 font-medium">Sebab Meninggal</h1>
+
+          <FieldArray v-slot="{ fields, push, remove }" name="deathCause">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <SelectDeathCause
+                :field-name="`deathCause[${idx}]`"
+                :errors="errors"
+              />
+              <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(``)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Sebab Meninggal
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+
+      <TextAreaInput
+        v-show="resumeArrangementType === `other`"
+        field-name="keterangan"
+        label="Keterangan"
+        placeholder="Keterangan"
+        :errors="errors" />
+    
+    </DE.Block>
+
+  </Form>
+</template>
diff --git a/app/components/app/resume/list.cfg.ts b/app/components/app/resume/list.cfg.ts
new file mode 100644
index 00000000..38f8f5d7
--- /dev/null
+++ b/app/components/app/resume/list.cfg.ts
@@ -0,0 +1,93 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {width: 3},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis/Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/resume/list.vue b/app/components/app/resume/list.vue
new file mode 100644
index 00000000..c4c101e5
--- /dev/null
+++ b/app/components/app/resume/list.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './list.cfg'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue';
+
+interface Props {
+  data: any
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <article class="space-y-4">
+      <h1 class="font-medium text-[0.89rem]">Pemeriksaan Pasien</h1>
+    <div class="space-y-1">
+      <DetailRow label="Tanggal Masuk">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
+      <DetailRow label="Tanggal Keluar">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
+      <DetailRow label="Anamnesis">{{ `-` }}</DetailRow>
+      <DetailRow label="Pemeriksaan Fisik">{{ `-` }}</DetailRow>
+      <DetailRow label="Pemeriksaan Penunjang">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Diagnosis</h1>
+    <div class="space-y-1">
+      <DetailRow label="Diagnosis Utama">{{ `-` }}</DetailRow>
+      <DetailRow label="Diagnosis Sekunder">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Tindakan Operatif/Non Operatif</h1>
+    <div class="space-y-1">
+      <DetailRow label="Tindakan Operatif Utama">{{ `-` }}</DetailRow>
+      <DetailRow label="Tindakan /Prosedur">{{ `-` }}</DetailRow>
+      <DetailRow label="Medikamentosa">{{ `-` }}</DetailRow>
+    </div>
+    <Separator class="" />
+      <h1 class="font-medium text-[0.89rem]">Penatalaksanaan</h1>
+    <div class="space-y-1">
+      <DetailRow label="Lanjutan Penatalaksanaan">{{ `-` }}</DetailRow>
+    </div>
+  </article>
+</template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 71c7fe3d..9b6308f2 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -16,6 +16,7 @@ import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
 import EarlyMedicalRehabList from '~/components/content/soapi/entry.vue'
 import PrescriptionList from '~/components/content/prescription/list.vue'
 import Consultation from '~/components/content/consultation/list.vue'
+import ResumeList from '~/components/content/resume/list.vue'
 
 const route = useRoute()
 const router = useRouter()
@@ -58,7 +59,7 @@ const tabs: TabItem[] = [
   { value: 'medical-action', label: 'Order Ruang Tindakan' },
   { value: 'mcu-result', label: 'Hasil Penunjang' },
   { value: 'consultation', label: 'Konsultasi', component: Consultation, props: { encounter: data } },
-  { value: 'resume', label: 'Resume' },
+  { value: 'resume', label: 'Resume', component: ResumeList, props: { encounter: data } },
   { value: 'control', label: 'Surat Kontrol' },
   { value: 'screening', label: 'Skrinning MPP' },
   { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
new file mode 100644
index 00000000..6df169c6
--- /dev/null
+++ b/app/components/content/resume/add.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { ExposedForm } from '~/types/form';
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { ResumeSchema } from '~/schemas/resume.schema';
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+
+// #region Props & Emits
+const props = defineProps<{
+  callbackUrl?: string
+}>()
+
+// form related state
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+// #endregion
+
+// #region State & Computed
+const router = useRouter()
+const isConfirmationOpen = ref(false)
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+function goBack() {
+  router.go(-1)
+}
+
+async function handleConfirmAdd() {
+  // handleActionClick('submit')
+  console.log(`tersubmit wak`)
+}
+
+function handleCancelAdd() {
+  isConfirmationOpen.value = false
+}
+// #endregion region
+
+// #region Utilities & event handlers
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    isConfirmationOpen.value = true
+    // const patient: Patient = await composeFormData()
+    // let createdPatientId = 0
+
+    // const response = await handleActionSave(
+    //   patient,
+    //   () => {},
+    //   () => {},
+    //   toast,
+    // )
+
+    // const data = (response?.body?.data ?? null) as PatientBase | null
+    // if (!data) return
+    // createdPatientId = data.id
+
+    // If has callback provided redirect to callback with patientData
+    // if (props.callbackUrl) {
+    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+    //   return
+    // }
+
+    // Navigate to patient list or show success message
+    // await navigateTo('/outpatient/encounter')
+    // return
+  }
+
+  if (eventType === 'back') {
+    if (props.callbackUrl) {
+      await navigateTo(props.callbackUrl)
+      return
+    }
+
+    goBack()
+    // handleCancelForm()
+  }
+}
+// #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 Resume</div>
+  <AppResumeAdd 
+    ref="personPatientForm"
+    :schema="ResumeSchema"
+    :resume-arrangement-type="personPatientForm?.values.arrangement" />
+  
+  <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>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
new file mode 100644
index 00000000..5c5e3658
--- /dev/null
+++ b/app/components/content/resume/list.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+import type { HeaderPrep, 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 SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.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
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const formType = ref<`a` | `b`>(`a`)
+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: "Resume",
+  icon: 'i-lucide-newspaper',
+  addNav: {
+    label: "Resume",
+    onClick: () => navigateTo('/resume/add'),
+  },
+}
+// #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 handleFormScreening(key: string) {
+  switch (key) {
+    case 'form-a':
+      navigateTo("/screening-mpp/add/a")
+      break;
+    case 'preview-form-a':
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break;
+    case 'form-b':
+      navigateTo("/screening-mpp/add/b")
+      break;
+    case 'preview-form-b':
+      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
+      break;
+    default:
+      break;
+  }
+}
+// #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: 'outpatient-encounter-id',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      navigateTo({
+        name: 'outpatient-encounter-id-edit',
+        params: { id: recId.value },
+      })
+      break
+
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+// #endregion
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" />
+  <AppResumeList />
+
+  <!-- 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>
+-->
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
new file mode 100644
index 00000000..7747e727
--- /dev/null
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import { Input } from '~/components/pub/ui/input'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  placeholder: string
+  label: string
+  errors?: FormErrors
+  class?: string
+  colSpan?: number
+  numericOnly?: boolean
+  maxLength?: number
+  isRequired?: boolean
+  isDisabled?: boolean
+}>()
+
+function handleInput(event: Event) {
+  const target = event.target as HTMLInputElement
+  let value = target.value
+
+  // Filter numeric only jika diperlukan
+  if (props.numericOnly) {
+    value = value.replace(/\D/g, '')
+  }
+
+  // Batasi panjang maksimal jika diperlukan
+  if (props.maxLength && value.length > props.maxLength) {
+    value = value.slice(0, props.maxLength)
+  }
+
+  // Update value jika ada perubahan
+  if (target.value !== value) {
+    target.value = value
+    // Trigger input event untuk update form
+    target.dispatchEvent(new Event('input', { bubbles: true }))
+  }
+}
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label
+      class="mb-1 font-medium"
+      v-if="label !== ''"
+      :label-for="fieldName"
+      :is-required="isRequired && !isDisabled"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Textarea
+              :disabled="isDisabled"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              :maxlength="maxLength"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              autocomplete="off"
+              aria-autocomplete="none"
+              autocorrect="off"
+              autocapitalize="off"
+              spellcheck="false"
+              @input="handleInput"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
index 4598817b..e38e12fa 100644
--- a/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
+++ b/app/components/pub/my-ui/nav-footer/ba-dr-su.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 const props = defineProps<{
+  enableDraft?: boolean
   smallMode?: boolean
   defaultClass?: string
   class?: string
@@ -28,7 +29,7 @@ function onClick(type: ClickType) {
         Back
       </Button>
     </div>
-    <div>
+    <div v-show="props.enableDraft">
       <Button variant="secondary" type="button" @click="onClick('draft')">
         <Icon name="i-lucide-file" />
         Draft
diff --git a/app/pages/(features)/resume/add.vue b/app/pages/(features)/resume/add.vue
new file mode 100644
index 00000000..7cc707f9
--- /dev/null
+++ b/app/pages/(features)/resume/add.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Resume',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => `${route.meta.title}`, // backtick to avoid the ts-plugin(2322) warning
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   throw createError({
+//     statusCode: 403,
+//     statusMessage: 'Access denied',
+//   })
+// }
+
+// Define permission-based computed properties
+const canCreate = true // hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentResumeAdd />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
new file mode 100644
index 00000000..99539414
--- /dev/null
+++ b/app/schemas/resume.schema.ts
@@ -0,0 +1,42 @@
+import { z } from 'zod'
+import type { CreateDto } from '~/models/consultation'
+
+export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "meninggal" | "other"
+
+const ResumeSchema = z.object({
+  inDate: z.string({ required_error: 'Tanggal harus diisi' }),
+  outDate: z.string({ required_error: 'Tanggal harus diisi' }),
+  anamnesis: z.number({ required_error: 'Anamnesis harus diisi' })
+    .min(1, 'Anamnesis minimum 1 karakter')
+    .max(2048, 'Anamnesis maksimum 2048 karakter'),
+  physicalCheckup: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+  supplementCheckup: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+
+  primaryDiagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
+  secondaryDiagnosis: z.array(z.string()).optional().default([]),
+
+  primaryOperativeNonOperativeAct: z.string({ required_error: 'Diagnosis harus diisi' }),
+  secondaryOperativeNonOperativeAct: z.array(z.string()).optional().default([]),
+  medikamentosa: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+
+  arrangement: z.custom<ResumeArrangementType>().default("krs"),
+  faskes: z.string({ required_error: 'Faskes harus diisi' }).optional(),
+  clinic: z.string({ required_error: 'Klinik harus diisi' }).optional(),
+  deathDate: z.string({ required_error: 'Tanggal harus diisi' }).optional(),
+  deathCause: z.array(z.string()).optional().default([]),
+  keterangan: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter')
+    .optional(),
+})
+
+type ResumeFormData = z.infer<typeof ResumeSchema> & (CreateDto)
+
+export { ResumeSchema }
+export type { ResumeFormData }

From 53bd8e7f6e2b22b03690947f52b42744a17703ee Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Fri, 7 Nov 2025 08:55:23 +0700
Subject: [PATCH 2/5] Fix: refactor rehab medik - Resume UI

---
 .../app/resume/_common/print-btn.vue          |  22 +
 .../resume/_common/select-concious-level.vue  |  70 +++
 .../_common/select-following-arrangement.vue  |  70 +++
 .../select-hospital-leave-condition.vue       |  70 +++
 .../_common/select-hospital-leave-method.vue  |  70 +++
 .../app/resume/_common/select-icd-10.vue      |  70 +++
 .../app/resume/_common/select-icd-9.vue       |  70 +++
 ...select-national-program-service-status.vue |  70 +++
 .../select-national-program-service.vue       |  70 +++
 .../app/resume/_common/select-pain-scale.vue  |  70 +++
 .../app/resume/_common/verify-badge.vue       |  67 +++
 app/components/app/resume/add.vue             | 468 ++++++++++++++----
 .../history-list/action-history-dialog.vue    |  66 +++
 .../resume/history-list/action-list.cfg.ts    |  94 ++++
 .../consultation-history-dialog.vue           |  66 +++
 .../history-list/consultation-list.cfg.ts     |  51 ++
 .../history-list/farmacy-history-dialog.vue   |  66 +++
 .../resume/history-list/farmacy-list.cfg.ts   |  39 ++
 .../national-program-history-dialog.vue       |  65 +++
 .../history-list/national-program-list.cfg.ts |  30 ++
 .../supporting-history-dialog.vue             |  66 +++
 .../history-list/supporting-list.cfg.ts       |  39 ++
 app/components/app/resume/list.cfg.ts         |  20 +-
 app/components/app/resume/list.vue            |  50 +-
 app/components/app/resume/verify-dialog.vue   |  97 ++++
 app/components/content/resume/add.vue         |  98 +++-
 app/components/content/resume/list.vue        | 142 ++++--
 .../pub/my-ui/data/dropdown-action-dvvp.vue   | 103 ++++
 app/components/pub/my-ui/data/types.ts        |   3 +
 app/components/pub/my-ui/form/input-base.vue  |   8 +-
 .../pub/my-ui/form/text-area-input.vue        |   2 +-
 app/schemas/resume.schema.ts                  |  35 +-
 32 files changed, 2142 insertions(+), 185 deletions(-)
 create mode 100644 app/components/app/resume/_common/print-btn.vue
 create mode 100644 app/components/app/resume/_common/select-concious-level.vue
 create mode 100644 app/components/app/resume/_common/select-following-arrangement.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-condition.vue
 create mode 100644 app/components/app/resume/_common/select-hospital-leave-method.vue
 create mode 100644 app/components/app/resume/_common/select-icd-10.vue
 create mode 100644 app/components/app/resume/_common/select-icd-9.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service-status.vue
 create mode 100644 app/components/app/resume/_common/select-national-program-service.vue
 create mode 100644 app/components/app/resume/_common/select-pain-scale.vue
 create mode 100644 app/components/app/resume/_common/verify-badge.vue
 create mode 100644 app/components/app/resume/history-list/action-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/action-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/consultation-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/consultation-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/farmacy-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/farmacy-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/national-program-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/national-program-list.cfg.ts
 create mode 100644 app/components/app/resume/history-list/supporting-history-dialog.vue
 create mode 100644 app/components/app/resume/history-list/supporting-list.cfg.ts
 create mode 100644 app/components/app/resume/verify-dialog.vue
 create mode 100644 app/components/pub/my-ui/data/dropdown-action-dvvp.vue

diff --git a/app/components/app/resume/_common/print-btn.vue b/app/components/app/resume/_common/print-btn.vue
new file mode 100644
index 00000000..5688d007
--- /dev/null
+++ b/app/components/app/resume/_common/print-btn.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { ListItemDto } from '~/components/pub/my-ui/data/types';
+
+const props = defineProps<{
+  url: string
+  btnTxt?: string
+  rec: ListItemDto
+}>()
+
+function handlePrint() {
+   navigateTo(props.url || 'https://google.com', {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button 
+    class="gap-3 items-center border-orange-400 text-orange-400"
+    variant="outline" @click="handlePrint">
+    <Icon name="i-lucide-printer" class="h-4 w-4" />
+    {{ props.btnTxt || 'Lampiran' }}
+  </Button>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/_common/select-concious-level.vue b/app/components/app/resume/_common/select-concious-level.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-concious-level.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-following-arrangement.vue b/app/components/app/resume/_common/select-following-arrangement.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-following-arrangement.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-hospital-leave-condition.vue b/app/components/app/resume/_common/select-hospital-leave-condition.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-hospital-leave-condition.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-hospital-leave-method.vue b/app/components/app/resume/_common/select-hospital-leave-method.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-hospital-leave-method.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-icd-10.vue b/app/components/app/resume/_common/select-icd-10.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-icd-10.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-icd-9.vue b/app/components/app/resume/_common/select-icd-9.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-icd-9.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-national-program-service-status.vue b/app/components/app/resume/_common/select-national-program-service-status.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-national-program-service-status.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-national-program-service.vue b/app/components/app/resume/_common/select-national-program-service.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-national-program-service.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/select-pain-scale.vue b/app/components/app/resume/_common/select-pain-scale.vue
new file mode 100644
index 00000000..0852195b
--- /dev/null
+++ b/app/components/app/resume/_common/select-pain-scale.vue
@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+import { occupationCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+// Generate job options from constants, sama seperti pola genderCodes
+const jobOptions = mapToComboboxOptList(occupationCodes)
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              class="focus:ring-0 focus:ring-offset-0"
+              :id="fieldName"
+              v-bind="componentField"
+              :items="jobOptions"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>
diff --git a/app/components/app/resume/_common/verify-badge.vue b/app/components/app/resume/_common/verify-badge.vue
new file mode 100644
index 00000000..8a999895
--- /dev/null
+++ b/app/components/app/resume/_common/verify-badge.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { Badge, type Variants } from '~/components/pub/ui/badge'
+
+const activeStatusCodes: Record<string, string> = {
+  verified: 'Terverifikasi',
+  validated: 'Tervalidasi',
+  unverified: 'Belum Verifikasi',
+  unvalidated: 'Batal Validasi',
+}
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusText = computed(() => {
+  let code: keyof typeof activeStatusCodes = `unverified`
+  switch (props.rec.status_code) {
+    case 1:
+      code = 'verified'
+      break
+    case 2:
+      code = 'validated'
+      break
+    case 3:
+      code = 'unverified'
+      break
+    case 4:
+      code = 'unvalidated'
+      break
+    default:
+      code = 'unverified'
+      break
+  }
+  return activeStatusCodes[code]
+})
+
+const badgeVariant = computed(() => {
+  let variant: Variants = `outline`
+  switch (props.rec.status_code) {
+    case 1:
+      variant = 'secondary'
+      break
+    case 2:
+      variant = 'default'
+      break
+    case 3:
+      variant = 'outline'
+      break
+    case 4:
+      variant = 'destructive'
+      break
+    default:
+      variant = 'outline'
+      break
+  }
+  return variant
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="badgeVariant" class="rounded-2xl text-[0.6rem]" >
+      {{ statusText }}
+    </Badge>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/add.vue b/app/components/app/resume/add.vue
index 2e12f872..d1423735 100644
--- a/app/components/app/resume/add.vue
+++ b/app/components/app/resume/add.vue
@@ -8,12 +8,19 @@ import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
-import SelectSecondaryDiagnosis from './_common/select-secondary-diagnosis.vue'
-import SelectPrimaryDiagnosis from './_common/select-primary-diagnosis.vue'
 import SelectArrangement from './_common/select-arrangement.vue'
 import type { ResumeArrangementType } from '~/schemas/resume.schema'
 import SelectFaskes from './_common/select-faskes.vue'
 import SelectDeathCause from './_common/select-death-cause.vue'
+import SelectIcd10 from './_common/select-icd-10.vue'
+import SelectIcd9 from './_common/select-icd-9.vue'
+import SelectConciousLevel from './_common/select-concious-level.vue'
+import SelectPainScale from './_common/select-pain-scale.vue'
+import SelectNationalProgramService from './_common/select-national-program-service.vue'
+import SelectNationalProgramServiceStatus from './_common/select-national-program-service-status.vue'
+import SelectHospitalLeaveCondition from './_common/select-hospital-leave-condition.vue'
+import SelectFollowingArrangement from './_common/select-following-arrangement.vue'
+import SelectHospitalLeaveMethod from './_common/select-hospital-leave-method.vue'
 
 const props = defineProps<{
   schema: any
@@ -22,6 +29,11 @@ const props = defineProps<{
   errors?: FormErrors
 }>()
 
+const isActionHistoryOpen = inject(`isActionHistoryOpen`) as Ref<boolean>
+const isConsultationHistoryOpen = inject(`isConsultationHistoryOpen`) as Ref<boolean>
+const isSupportingHistoryOpen = inject(`isSupportingHistoryOpen`) as Ref<boolean>
+const isFarmacyHistoryOpen = inject(`isFarmacyHistoryOpen`) as Ref<boolean>
+const isNationalProgramServiceHistoryOpen = inject(`isNationalProgramServiceHistoryOpen`) as Ref<boolean>
 const formSchema = toTypedSchema(props.schema)
 const formRef = ref()
 
@@ -31,101 +43,369 @@ defineExpose({
   setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
   values: computed(() => formRef.value?.values),
 })
+
+const DEFAULT_SECONDARY_DIAGNOSIS_VALUE = {
+  diagnosis: '',
+  icd10: '',
+  diagnosisBasis: '',
+};
+const DEFAULT_SECONDARY_ACTION_VALUE = {
+  action: '',
+  icd9: '',
+  actionBasis: '',
+};
+const DEFAULT_CONSULTATION_VALUE = {
+  consultation: '',
+  consultationReply: '',
+};
 </script>
 
 <template>
-  <Form ref="formRef" v-slot="{ values }" as="" keep-values :validation-schema="formSchema" :validate-on-mount="false"
-    validation-mode="onSubmit" :initial-values="initialValues ? initialValues : {}">
+  <Form ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues ? initialValues : {}">
+
+    <!-- Pasien -->
     <h1 class="mb-3 text-base font-medium">Pemeriksaan Pasien</h1>
     <DE.Block :col-count="3" :cell-flex="false">
       <SelectDate field-name="inDate" label="Tanggal Masuk" :errors="errors" :is-disabled="true" />
-      <SelectDate field-name="outDate" label="Tanggal Keluar" :errors="errors" :is-disabled="true" />
-    </DE.Block>
+      <SelectDate field-name="outDate" label="Tanggal Keluar" :errors="errors" :is-disabled="true" />      
+      <InputBase
+        field-name="doctor_id"
+        :is-disabled="true"
+        label="DPJP" placeholder="DPJP"/>
+    </DE.Block> 
+    <DE.Block class="" :cell-flex="false">   
+      <InputBase
+        class="w-2/3"
+        field-name="first_diagnosis"
+        :is-disabled="true"
+        label="Diagnosis Masuk/Rujukan" placeholder="Diagnosis Masuk/Rujukan"/>
+    </DE.Block> 
     <DE.Block :col-count="3" :cell-flex="false">
-      <TextAreaInput field-name="anamnesis" label="Anamnesis" placeholder="Anamnesis" :errors="errors" />
-      <TextAreaInput field-name="physicalCheckup" label="Pemeriksaan Fisik" placeholder="Pemeriksaan Fisik"
-        :errors="errors" />
-      <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Pemeriksaan Penunjang"
-        :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Indikasi Rawat Jalan" placeholder="Indikasi Rawat Jalan" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Keluhan Utama (Singkat & Menunjang)" placeholder="Keluhan Utama (Singkat & Menunjang)" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Pemeriksaan Fisik (Singkat & Menunjang)" placeholder="Pemeriksaan Fisik (Singkat & Menunjang)" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Riwayat Penyakit" placeholder="Riwayat Penyakit" :errors="errors" />
+      <TextAreaInput field-name="supplementCheckup"
+        label="Diagnosa Medis" placeholder="Diagnosa Medis" :errors="errors" />
     </DE.Block>
     <Separator class="my-4" />
 
+
+
     <!-- DIAGNOSIS -->
-    <h1 class="mb-3 text-base font-medium">Diagnosis</h1>
-    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
-      <SelectPrimaryDiagnosis
+    <h1 class="mb-3 text-base font-medium">Diagnosa</h1>
+    <h1 class="mb-3 text-base font-medium">Diagnosa Utama</h1>
+    <DE.Block :col-count="2" class="" :cell-flex="false">   
+      <InputBase
+        field-name="diagnosis"
+        label="Diagnosa" placeholder="Masukkan Diagnosa"
+        :errors="errors" is-required />
+      <SelectIcd10
         field-name="primaryDiagnosis"
-        label="Diagnosis Utama"
-        placeholder="Diagnosis Utama"
+        label="ICD 10"
+        placeholder="ICD 10"
         :errors="errors" is-required />
+      <DE.Cell :col-span="2">
+        <TextAreaInput field-name="supplementCheckup"
+        label="Dasar Diagnosa" placeholder="Masukkan Dasar Diagnosa utama Pasien" :errors="errors" />
+      </DE.Cell>
 
-      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
-        <h1 class="mb-3 font-medium">Diagnosis Sekunder</h1>
 
-        <FieldArray v-slot="{ fields, push, remove }" name="secondaryDiagnosis">
-          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
-            <SelectSecondaryDiagnosis
-              :field-name="`secondaryDiagnosis[${idx}]`"
-              :errors="errors"
-            />
-            <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
-              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+      <DE.Cell :col-span="2">
+        <h1 class="mb-3 text-base font-medium">Diagnosa Sekunder</h1>
+        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+
+          <FieldArray v-slot="{ fields, push, remove }" name="secondaryDiagnosis">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <div class="w-full">
+                <h1 class="font-medium">Diagnosa {{ idx + 1 }}</h1>
+                <div class="flex gap-3">
+                  <InputBase
+                    :field-name="`secondaryDiagnosis[${idx}].diagnosis`"
+                    label="Diagnosa" placeholder="Masukkan Diagnosa"
+                    :errors="errors" is-required />
+                  <SelectIcd10
+                    :field-name="`secondaryDiagnosis[${idx}].icd10`"
+                    label="ICD 10"
+                    placeholder="ICD 10"
+                    :errors="errors" is-required />
+                </div>
+                <TextAreaInput :field-name="`secondaryDiagnosis[${idx}].diagnosisBasis`"
+                  label="Dasar Diagnosa" placeholder="Masukkan Dasar Diagnosa Pasien" :errors="errors" />
+              </div>
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(DEFAULT_SECONDARY_DIAGNOSIS_VALUE)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Diagnosis
             </Button>
-          </div>
-          <Button type="button" variant="outline"
-            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
-            @click="push(``)">
-            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
-            Tambah Diagnosis
-          </Button>
-        </FieldArray>
-      </div>
-    </DE.Block>
-    <Separator class="my-4" />
+          </FieldArray>
+        </div>
+      </DE.Cell>
 
 
-    <!-- DIAGNOSIS -->
-    <h1 class="mb-3 text-base font-medium">Tindakan Operatif/Non Operatif</h1>
-    <DE.Block class="w-3/5 space-y-2" :cell-flex="false">
-      <SelectPrimaryDiagnosis
-        field-name="primaryOperativeNonOperativeAct"
-        label="Tindakan Operatif Utama"
-        placeholder="Tindakan Operatif Utama"
-        :errors="errors" is-required />
-
-      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
-        <h1 class="mb-3 font-medium">Tindakan / Prosedur</h1>
-
-        <FieldArray v-slot="{ fields, push, remove }" name="secondaryOperativeNonOperativeAct">
-          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
-            <SelectSecondaryDiagnosis
-              :field-name="`secondaryOperativeNonOperativeAct[${idx}]`"
-              :errors="errors"
-            />
-            <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
-              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
-            </Button>
-          </div>
-          <Button type="button" variant="outline"
-            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
-            @click="push(``)">
-            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
-            Tambah Tindakan / Prosedur
-          </Button>
-        </FieldArray>
-      </div>
-    </DE.Block>
-    <Separator class="my-4" />
-
-    <DE.Block class="w-3/5" :cell-flex="false">
-      <TextAreaInput field-name="medikamentosa" label="Medikamentosa" placeholder="Medikamentosa" :errors="errors" />
-    </DE.Block>
-    <Separator class="my-4" />
-
-    <h1 class="mb-3 font-medium">Penatalaksanaan</h1>
-    <DE.Block :col-count="3" :cell-flex="false">
-      <SelectArrangement field-name="arrangement" label="Lanjutan Penatalaksanaan" placeholder="Pilih Arrangement" :errors="errors" />
       
+    </DE.Block>
+    <Separator class="my-4" />
+
+
+
+
+    <!-- Tindakan OPERATIF/NON OPERATIF -->
+    <div class="mb-3 flex gap-3 items-center">
+      <h1 class="text-base font-medium">Tindakan Operatif/Non Operatif</h1>
+      <Button variant="ghost"
+        class="gap-1 items-center text-orange-400"
+        @click="isActionHistoryOpen = true">
+        <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Tindakan</Button>
+    </div>
+    <h1 class="mb-3 font-normal">Tindakan Operatif/Non Operatif Utama</h1>
+    <DE.Block :col-count="2" class="" :cell-flex="false">   
+      <InputBase
+        field-name="diagnosis"
+        label="Tindakan" placeholder="Masukkan Tindakan"
+        :errors="errors" is-required />
+      <SelectIcd9
+        field-name="primaryDiagnosis"
+        label="ICD 9"
+        placeholder="ICD 9"
+        :errors="errors" is-required />
+      <DE.Cell :col-span="2">        
+        <TextAreaInput field-name="supplementCheckup"
+          label="Dasar Tindakan" placeholder="Masukkan Dasar Tindakan utama Pasien" :errors="errors" />
+      </DE.Cell>
+
+      <DE.Cell :col-span="2">
+        <h1 class="mb-3 text-base font-medium">Tindakan Lain</h1>
+        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+
+          <FieldArray v-slot="{ fields, push, remove }" name="secondaryOperativeNonOperativeAct">
+            <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+              <div class="w-full">
+                <h1 class="font-medium">Tindakan {{ idx + 1 }}</h1>
+                <div class="flex gap-3">
+                  <InputBase
+                    :field-name="`secondaryOperativeNonOperativeAct[${idx}].action`"
+                    label="Tindakan" placeholder="Masukkan Tindakan"
+                    :errors="errors" is-required />
+                  <SelectIcd10
+                    :field-name="`secondaryOperativeNonOperativeAct[${idx}].icd9`"
+                    label="ICD 10"
+                    placeholder="ICD 10"
+                    :errors="errors" is-required />
+                </div>
+                <TextAreaInput :field-name="`secondaryOperativeNonOperativeAct[${idx}].actionBasis`"
+                  label="Dasar Tindakan" placeholder="Masukkan Dasar Tindakan Pasien" :errors="errors" />
+              </div>
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+                <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+              </Button>
+            </div>
+            <Button type="button" variant="outline"
+              class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+              @click="push(DEFAULT_SECONDARY_ACTION_VALUE)">
+              <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+              Tambah Tindakan
+            </Button>
+          </FieldArray>
+        </div>
+      </DE.Cell>
+      
+    </DE.Block>    
+    <TextAreaInput :field-name="`medicalAction`"
+      label="Tindakan Medis" placeholder="Masukkan Tindakan Medis" :errors="errors" />
+    <Separator class="my-4" />
+
+
+
+    <!-- KONSULTASI -->
+    <div class="mb-3 flex gap-3 items-center">
+      <h1 class="text-base font-medium">Konsultasi</h1>
+      <Button variant="ghost"
+        class="gap-1 items-center text-orange-400"
+        @click="isConsultationHistoryOpen = true">
+        <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Konsultasi</Button>
+    </div>
+      <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+        <FieldArray v-slot="{ fields, push, remove }" name="consultation">
+          <div v-for="(field, idx) in fields" :key="idx" class="flex items-center gap-3 mb-3">
+            <div class="w-full">
+              <h1 class="font-medium mb-1">Konsultasi {{ idx + 1 }}</h1>
+              <div class="flex gap-3">
+                <TextAreaInput :field-name="`consultation[${idx}].consultation`"
+                  label="Konsultasi" placeholder="Masukkan Konsultasi" :errors="errors" />
+                <TextAreaInput :field-name="`consultation[${idx}].consultationReply`"
+                  label="Jawaban Konsultasi" placeholder="Masukkan Jawaban Konsultasi" :errors="errors" />
+              </div>
+            </div>
+            <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <Icon name="i-lucide-trash-2" class="h-4 w-4" />
+            </Button>
+          </div>
+          <Button type="button" variant="outline"
+            class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
+            @click="push(DEFAULT_CONSULTATION_VALUE)">
+            <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
+            Tambah Konsultasi
+          </Button>
+        </FieldArray>
+      </div>
+    <Separator class="my-4" />
+
+
+
+    <!-- DATA PENUNJANG -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Data Penunjang</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isSupportingHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Data Penunjang</Button>
+      </div>
+      <DE.Block class="" :cell-flex="false">
+        <TextAreaInput field-name="supplementCheckup" label="Pemeriksaan Penunjang" placeholder="Masukkan Pemeriksaan Penunjang" :errors="errors" />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- DATA Farmasi -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Data Farmasi</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isFarmacyHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Data Farmasi</Button>
+      </div>
+      <DE.Block class="items-end" :col-count="3" :cell-flex="false">
+        <TextAreaInput field-name="supplementCheckup"
+          label="Kelainan Khusus Alergi" placeholder="Masukkan Kelainan Khusus Alergi" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Kelainan Lain" placeholder="Masukkan Kelainan Lain" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Selama Dirawat" placeholder="Masukkan Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Selama Dirawat" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Waktu Pulang" placeholder="Masukkan Terapi yang Diberikan (Farmakologi dan Non Farmakologi) Waktu Pulang" :errors="errors" />
+        <TextAreaInput field-name="supplementCheckup"
+          label="Instruksi Tindak Lanjut/Anjuran dan Edukasi (Follow Up/Kontrol)" placeholder="Masukkan Instruksi Tindak Lanjut/Anjuran dan Edukasi (Follow Up/Kontrol)" :errors="errors" />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- Keadaan Waktu Keluar -->
+    <section>
+      <h1 class="mb-3 font-medium">Keadaan Waktu Keluar</h1>
+      <DE.Block :col-count="4" :cell-flex="false">
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Tekanan Darah Sistol" placeholder="Masukkan Tekanan Darah Sistol"
+          right-label="mmHg" bottom-label="Contoh: 90"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Tekanan Darah Diastol" placeholder="Masukkan Tekanan Darah Diastol"
+          right-label="mmHg" bottom-label="Contoh: 60"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Pernafasan" placeholder="Masukkan Pernafasan"
+          right-label="kali / menit" bottom-label="Contoh: 20"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Denyut Jantung" placeholder="Masukkan Denyut Jantung"
+          right-label="kali / menit" bottom-label="Contoh: 20"
+          :errors="errors" is-required numeric-only />
+        <InputBase
+          :field-name="`aaaaaaaaaaa`"
+          label="Suhu Tubuh" placeholder="Masukkan Suhu Tubuh"
+          right-label="'C" bottom-label="Contoh: 37"
+          :errors="errors" is-required numeric-only />
+        <SelectConciousLevel
+          :field-name="`aaaaaaaaaaa`"
+          label="Tingkat Kesadaran"
+          placeholder="Tingkat Kesadaran"
+          :errors="errors" is-required />
+        <SelectPainScale
+          :field-name="`aaaaaaaaaaa`"
+          label="Skala Nyeri"
+          placeholder="Skala Nyeri"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />
+
+
+
+    <!-- Program Nasional -->
+    <section>
+      <div class="mb-3 flex gap-3 items-center">
+        <h1 class="text-base font-medium">Program Nasional</h1>
+        <Button variant="ghost"
+          class="gap-1 items-center text-orange-400"
+          @click="isNationalProgramServiceHistoryOpen = true">
+          <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Program Nasional</Button>
+      </div>
+      <DE.Block :col-count="3" :cell-flex="false">
+        <SelectNationalProgramService
+          :field-name="`aaaaaaaaaaa`"
+          label="Layanan Program Nasional"
+          placeholder="Layanan Program Nasional"
+          :errors="errors" is-required />
+        <SelectNationalProgramServiceStatus
+          :field-name="`aaaaaaaaaaa`"
+          label="Status Layanan Program Nasional"
+          placeholder="Status Layanan Program Nasional"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+    <Separator class="my-4" />  
+
+
+
+    <!-- Penatalaksanaan -->
+    <section>
+      <h1 class="mb-3 font-medium">Penatalaksanaan</h1>
+      <DE.Block :col-count="3" :cell-flex="false">
+        <SelectArrangement
+          field-name="arrangement"
+          label="Lanjutan Penatalaksanaan"
+          placeholder="Pilih Arrangement"
+          :errors="errors" />
+        <SelectHospitalLeaveCondition
+          :field-name="`aaaaaaaaaaa`"
+          label="Kondisi Meninggalkan RS"
+          placeholder="Kondisi Meninggalkan RS"
+          :errors="errors" is-required />
+        <SelectHospitalLeaveMethod
+          :field-name="`aaaaaaaaaaa`"
+          label="Cara Keluar RS"
+          placeholder="Cara Keluar RS"
+          :errors="errors" is-required />
+      </DE.Block>
+    </section>
+
+    <DE.Block :col-count="3" :cell-flex="false">      
       <SelectFaskes
         v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
         field-name="faskes"
@@ -148,8 +428,8 @@ defineExpose({
         :errors="errors"
         :is-with-time="true" />
       
-      <DE.Cell class="mt-2" :col-span="2" v-show="resumeArrangementType === `meninggal`">
-        <div class="w-full rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
+      <DE.Cell class="mt-2" :col-span="3" v-show="resumeArrangementType === `meninggal`">
+        <div class="w-2/3 rounded-md border bg-gray-50/50 p-4 shadow-sm dark:bg-neutral-950">
           <h1 class="mb-3 font-medium">Sebab Meninggal</h1>
 
           <FieldArray v-slot="{ fields, push, remove }" name="deathCause">
@@ -158,11 +438,11 @@ defineExpose({
                 :field-name="`deathCause[${idx}]`"
                 :errors="errors"
               />
-              <Button type="button" variant="destructive" size="sm" @click="remove(idx)">
+              <Button v-if="idx !== 0" type="button" variant="destructive" size="sm" @click="remove(idx)">
                 <Icon name="i-lucide-trash-2" class="h-4 w-4" />
               </Button>
             </div>
-            <Button type="button" variant="outline"
+            <Button v-if="fields.length < 3" type="button" variant="outline"
               class="w-full rounded-md border border-primary bg-white px-4 py-2 text-primary hover:border-primary hover:bg-primary hover:text-white sm:w-auto sm:text-sm"
               @click="push(``)">
               <Icon name="i-lucide-plus" class="mr-2 h-4 w-4 align-middle transition-colors" />
@@ -172,12 +452,24 @@ defineExpose({
         </div>
       </DE.Cell>
 
-      <TextAreaInput
-        v-show="resumeArrangementType === `other`"
-        field-name="keterangan"
-        label="Keterangan"
-        placeholder="Keterangan"
-        :errors="errors" />
+      <DE.Cell 
+        v-show="resumeArrangementType === `meninggal`"
+        :col-span="3">
+        <TextAreaInput            
+            field-name="deathCauseDescription"
+            label="Keterangan Sebab Meninggal"
+            placeholder="Keterangan Sebab Meninggal"
+            :errors="errors" />
+      </DE.Cell>          
+
+      <DE.Cell :col-span="3"
+        v-show="resumeArrangementType === `other`">
+        <TextAreaInput
+          field-name="keterangan"
+          label="Keterangan"
+          placeholder="Keterangan"
+          :errors="errors" />
+      </DE.Cell>
     
     </DE.Block>
 
diff --git a/app/components/app/resume/history-list/action-history-dialog.vue b/app/components/app/resume/history-list/action-history-dialog.vue
new file mode 100644
index 00000000..5602016e
--- /dev/null
+++ b/app/components/app/resume/history-list/action-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './action-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isActionHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/action-list.cfg.ts b/app/components/app/resume/history-list/action-list.cfg.ts
new file mode 100644
index 00000000..2dad3e6a
--- /dev/null
+++ b/app/components/app/resume/history-list/action-list.cfg.ts
@@ -0,0 +1,94 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dvvp.vue'))
+
+export const config: Config = {
+  cols: [{width: 140}, {}, {}, {width: 140}, {width: 10},],
+
+  headers: [
+    [
+      { label: 'Tanggal/Jam' },
+      { label: 'Dokter' },
+      { label: 'Tempat Layanan' },
+      { label: 'Jenis' },
+      { label: 'Jenis Pemeriksaan' },
+      { label: 'Tanggal/Jam' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'person.name', 'birth_date',],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    patientId: (rec: unknown): unknown => {
+      const patient = rec as Patient
+      return patient.number
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (person.nationality == 'WNA') {
+        return person.passportNumber
+      }
+
+      return person.residentIdentityNumber || '-'
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+      if (typeof person.education_code == 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}
diff --git a/app/components/app/resume/history-list/consultation-history-dialog.vue b/app/components/app/resume/history-list/consultation-history-dialog.vue
new file mode 100644
index 00000000..ad1e777e
--- /dev/null
+++ b/app/components/app/resume/history-list/consultation-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './consultation-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isConsultationHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/consultation-list.cfg.ts b/app/components/app/resume/history-list/consultation-list.cfg.ts
new file mode 100644
index 00000000..196c208c
--- /dev/null
+++ b/app/components/app/resume/history-list/consultation-list.cfg.ts
@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+
+const lampiranBtn = defineAsyncComponent(() => import('../_common/print-btn.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal/Jam' },
+      { label: 'Dokter' },
+      { label: 'Tempat Layanan' },
+      { label: 'KSM' },
+      { label: 'Tanggal/Jam' },
+      { label: 'Tujuan' },
+      { label: 'Dokter' },
+      { label: 'Berkas' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'person.name', 'birth_date','person.name', 'action', ],
+
+  parses: {
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: lampiranBtn,
+      }
+    },
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/farmacy-history-dialog.vue b/app/components/app/resume/history-list/farmacy-history-dialog.vue
new file mode 100644
index 00000000..53bf3875
--- /dev/null
+++ b/app/components/app/resume/history-list/farmacy-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './farmacy-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isFarmacyHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/farmacy-list.cfg.ts b/app/components/app/resume/history-list/farmacy-list.cfg.ts
new file mode 100644
index 00000000..75ea1e80
--- /dev/null
+++ b/app/components/app/resume/history-list/farmacy-list.cfg.ts
@@ -0,0 +1,39 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal Order' },
+      { label: 'No Resep' },
+      { label: 'Tempat Layanan' },
+      { label: 'Nama Obat' },
+      { label: 'Tanggal Disetujui' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'person.name', 'birth_date',],
+
+  parses: {
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+  },
+
+  components: {
+    
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/national-program-history-dialog.vue b/app/components/app/resume/history-list/national-program-history-dialog.vue
new file mode 100644
index 00000000..cc702227
--- /dev/null
+++ b/app/components/app/resume/history-list/national-program-history-dialog.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './national-program-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+import type { Item } from '~/components/pub/my-ui/combobox'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  searchValue: string
+  statusValue: string
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isNationalProgramServiceHistoryOpen`) as Ref<boolean>
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:searchValue': [value: string]
+  'update:statusValue': [value: string]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+const statusOptions: Item[] = [
+  { value: 'all', label: 'All Statuses' },
+  { value: 'pending', label: 'Pending' },
+  { value: 'active', label: 'Active' },
+  { value: 'completed', label: 'Completed' },
+  { value: 'archived', label: 'Archived' },
+]
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <DE.Block :col-count="4" class="" :cell-flex="false"> 
+          <Input
+            v-model="props.searchValue"
+            class=""
+            placeholder="Cari .."/>
+          <Select
+            :items="statusOptions"
+            :model-value="props.statusValue" 
+            @update:model-value="(data) => emit('update:statusValue', data)"
+          />
+        </DE.Block>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/national-program-list.cfg.ts b/app/components/app/resume/history-list/national-program-list.cfg.ts
new file mode 100644
index 00000000..fe6d3ea0
--- /dev/null
+++ b/app/components/app/resume/history-list/national-program-list.cfg.ts
@@ -0,0 +1,30 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Nomor' },
+      { label: 'Layanan Program Nasional' },
+      { label: 'Status' },
+    ],
+  ],
+
+  keys: ['person.name', 'person.name', 'person.name',],
+
+  parses: {
+    // birth_date: (rec: unknown): unknown => {
+      
+    // },
+  },
+
+  components: {
+    
+  },
+
+  htmls: {
+    
+  },
+}
diff --git a/app/components/app/resume/history-list/supporting-history-dialog.vue b/app/components/app/resume/history-list/supporting-history-dialog.vue
new file mode 100644
index 00000000..32fb4508
--- /dev/null
+++ b/app/components/app/resume/history-list/supporting-history-dialog.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './supporting-list.cfg'
+import { cn } from '~/lib/utils'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { CalendarIcon } from 'lucide-vue-next'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isSupportingHistoryOpen`) as Ref<boolean>
+
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="" size="2xl">
+    <div class="space-y-4">
+        <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+        <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+    </div>
+  </Dialog>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/history-list/supporting-list.cfg.ts b/app/components/app/resume/history-list/supporting-list.cfg.ts
new file mode 100644
index 00000000..f005042d
--- /dev/null
+++ b/app/components/app/resume/history-list/supporting-list.cfg.ts
@@ -0,0 +1,39 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {},],
+
+  headers: [
+    [
+      { label: 'Tanggal Order' },
+      { label: 'No Lab' },
+      { label: 'Nama Pemeriksaan' },
+      { label: 'Tanggal Pemeriksaan' },
+    ],
+  ],
+
+  keys: ['birth_date', 'person.name', 'person.name', 'birth_date',],
+
+  parses: {
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as Patient
+
+      if (typeof person.birthDate == 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString('id-ID')
+      } else if (typeof person.birthDate == 'string') {
+        return (person.birthDate as string).substring(0, 10)
+      }
+      return person.birthDate
+    },
+  },
+
+  components: {
+  },
+
+  htmls: {
+    // patient_address(_rec) {
+    //   return '-'
+    // },
+  },
+}
diff --git a/app/components/app/resume/list.cfg.ts b/app/components/app/resume/list.cfg.ts
index 38f8f5d7..b756b1ee 100644
--- a/app/components/app/resume/list.cfg.ts
+++ b/app/components/app/resume/list.cfg.ts
@@ -4,22 +4,23 @@ import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
 import { calculateAge } from '~/lib/utils'
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dvvp.vue'))
+const statusBadge = defineAsyncComponent(() => import('./_common/verify-badge.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, {}, {}, {width: 3},],
+  cols: [{width: 140}, {}, {}, {width: 140}, {width: 10},],
 
   headers: [
     [
-      { label: 'Tgl Rencana Kontrol' },
-      { label: 'Spesialis/Sub Spesialis' },
+      { label: 'Tgl Simpan' },
       { label: 'DPJP' },
-      { label: 'Status SEP' },
+      { label: 'KSM' },
+      { label: 'Status' },
       { label: 'Action' },
     ],
   ],
 
-  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'action'],
+  keys: ['birth_date', 'number', 'person.name', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -83,6 +84,13 @@ export const config: Config = {
         component: action,
       }
     },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
 
   htmls: {
diff --git a/app/components/app/resume/list.vue b/app/components/app/resume/list.vue
index c4c101e5..0d62cc6c 100644
--- a/app/components/app/resume/list.vue
+++ b/app/components/app/resume/list.vue
@@ -2,42 +2,30 @@
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
 import { config } from './list.cfg'
-import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue';
 
 interface Props {
-  data: any
+  data: any[]
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <article class="space-y-4">
-      <h1 class="font-medium text-[0.89rem]">Pemeriksaan Pasien</h1>
-    <div class="space-y-1">
-      <DetailRow label="Tanggal Masuk">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
-      <DetailRow label="Tanggal Keluar">{{ new Date().toLocaleDateString('id-ID') }}</DetailRow>
-      <DetailRow label="Anamnesis">{{ `-` }}</DetailRow>
-      <DetailRow label="Pemeriksaan Fisik">{{ `-` }}</DetailRow>
-      <DetailRow label="Pemeriksaan Penunjang">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Diagnosis</h1>
-    <div class="space-y-1">
-      <DetailRow label="Diagnosis Utama">{{ `-` }}</DetailRow>
-      <DetailRow label="Diagnosis Sekunder">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Tindakan Operatif/Non Operatif</h1>
-    <div class="space-y-1">
-      <DetailRow label="Tindakan Operatif Utama">{{ `-` }}</DetailRow>
-      <DetailRow label="Tindakan /Prosedur">{{ `-` }}</DetailRow>
-      <DetailRow label="Medikamentosa">{{ `-` }}</DetailRow>
-    </div>
-    <Separator class="" />
-      <h1 class="font-medium text-[0.89rem]">Penatalaksanaan</h1>
-    <div class="space-y-1">
-      <DetailRow label="Lanjutan Penatalaksanaan">{{ `-` }}</DetailRow>
-    </div>
-  </article>
-</template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/components/app/resume/verify-dialog.vue b/app/components/app/resume/verify-dialog.vue
new file mode 100644
index 00000000..1519446c
--- /dev/null
+++ b/app/components/app/resume/verify-dialog.vue
@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import type { InstallationFormData } from '~/schemas/installation.schema'
+
+
+const props = defineProps<{
+  schema: any
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+const items = ref([
+  { label: 'Rujukan Internal', value: 'ri' },
+  { label: 'SEP Rujukan', value: 'sr' },
+])
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+
+          <InputBase
+            field-name="name"
+            label="Nama"
+            placeholder="Masukkan Nama"
+            :errors="errors"/>
+          <InputBase
+            field-name="email"
+            label="Email"
+            placeholder="Masukkan Email"
+            :errors="errors"/>
+
+          <div class="mt-2">
+            <Label class="" for="password">Password</Label>
+            <Field class="" id="password" :errors="errors">
+              <FormField v-slot="{ componentField }" name="password">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="password"
+                      v-bind="componentField"
+                      type="password"
+                      class="w-full"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </div>
+
+          <InputBase
+            class="mb-2"
+            field-name="captha"
+            label="Captha"
+            placeholder="Masukkan Captha"
+            :errors="errors"/>
+
+        </div>
+      </div>
+    </form>
+  </Form>
+</template>
\ No newline at end of file
diff --git a/app/components/content/resume/add.vue b/app/components/content/resume/add.vue
index 6df169c6..6fda4bf8 100644
--- a/app/components/content/resume/add.vue
+++ b/app/components/content/resume/add.vue
@@ -3,6 +3,14 @@ import type { ExposedForm } from '~/types/form';
 import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 import { ResumeSchema } from '~/schemas/resume.schema';
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date';
+import type { DateRange } from 'radix-vue';
+import { getPatients } from '~/services/patient.service';
+import ActionHistoryDialog from '~/components/app/resume/history-list/action-history-dialog.vue';
+import ConsultationHistoryDialog from '~/components/app/resume/history-list/consultation-history-dialog.vue';
+import SupportingHistoryDialog from '~/components/app/resume/history-list/supporting-history-dialog.vue';
+import FarmacyHistoryDialog from '~/components/app/resume/history-list/farmacy-history-dialog.vue';
+import NationalProgramHistoryDialog from '~/components/app/resume/history-list/national-program-history-dialog.vue';
 
 // #region Props & Emits
 const props = defineProps<{
@@ -11,14 +19,60 @@ const props = defineProps<{
 
 // form related state
 const personPatientForm = ref<ExposedForm<any> | null>(null)
+const actionHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const consultationHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const supportingHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const farmacyHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+const nationalProgramServiceHistoryData = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
 // #endregion
 
 // #region State & Computed
 const router = useRouter()
 const isConfirmationOpen = ref(false)
+const isActionHistoryOpen = ref<boolean>(false)
+const isConsultationHistoryOpen = ref<boolean>(false)
+const isSupportingHistoryOpen = ref<boolean>(false)
+const isFarmacyHistoryOpen = ref<boolean>(false)
+const isNationalProgramServiceHistoryOpen = ref<boolean>(false)
+
+provide(`isActionHistoryOpen`, isActionHistoryOpen)
+provide(`isConsultationHistoryOpen`, isConsultationHistoryOpen)
+provide(`isSupportingHistoryOpen`, isSupportingHistoryOpen)
+provide(`isFarmacyHistoryOpen`, isFarmacyHistoryOpen)
+provide(`isNationalProgramServiceHistoryOpen`, isNationalProgramServiceHistoryOpen)
+
+const defaultDate = {
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}
+
+const actionHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const consultationHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const supportingHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const farmacyHistoryDateValue = ref(defaultDate) as Ref<DateRange>
+const nationalProgramServiceSearch = ref<string>('')
+const nationalProgramServiceSelectedStatus = ref<string>('all')
 // #endregion
 
 // #region Lifecycle Hooks
+onMounted(() => {
+
+})
 // #endregion
 
 // #region Functions
@@ -86,7 +140,7 @@ async function handleActionClick(eventType: string) {
   <AppResumeAdd 
     ref="personPatientForm"
     :schema="ResumeSchema"
-    :resume-arrangement-type="personPatientForm?.values.arrangement" />
+    :resume-arrangement-type="personPatientForm?.values.arrangement"/>
   
   <div class="my-2 flex justify-end py-2">
     <Action :enable-draft="false"
@@ -101,4 +155,46 @@ async function handleActionClick(eventType: string) {
     @confirm="handleConfirmAdd"
     @cancel="handleCancelAdd"
   />
+
+  <ActionHistoryDialog
+    v-model:is-modal-open="isActionHistoryOpen"
+    v-model:date-value="actionHistoryDateValue"
+    :data="actionHistoryData.data.value"
+    :pagination-meta="actionHistoryData.paginationMeta"
+    @page-change="actionHistoryData.handlePageChange"
+  />
+
+  <p v-if="isConsultationHistoryOpen === true">aaaaaaaaaaaaaaa</p>
+  <ConsultationHistoryDialog
+    v-model:is-modal-open="isConsultationHistoryOpen"
+    v-model:date-value="consultationHistoryDateValue"
+    :data="consultationHistoryData.data.value"
+    :pagination-meta="consultationHistoryData.paginationMeta"
+    @page-change="consultationHistoryData.handlePageChange"
+  />
+
+  <SupportingHistoryDialog
+    v-model:is-modal-open="isSupportingHistoryOpen"
+    v-model:date-value="supportingHistoryDateValue"
+    :data="supportingHistoryData.data.value"
+    :pagination-meta="supportingHistoryData.paginationMeta"
+    @page-change="supportingHistoryData.handlePageChange"
+  />
+
+  <FarmacyHistoryDialog
+    v-model:is-modal-open="isFarmacyHistoryOpen"
+    v-model:date-value="farmacyHistoryDateValue"
+    :data="farmacyHistoryData.data.value"
+    :pagination-meta="farmacyHistoryData.paginationMeta"
+    @page-change="farmacyHistoryData.handlePageChange"
+  />
+
+  <NationalProgramHistoryDialog
+    v-model:is-modal-open="isNationalProgramServiceHistoryOpen"
+    v-model:search-value="nationalProgramServiceSearch"
+    v-model:status-value="nationalProgramServiceSelectedStatus"
+    :data="nationalProgramServiceHistoryData.data.value"
+    :pagination-meta="nationalProgramServiceHistoryData.paginationMeta"
+    @page-change="nationalProgramServiceHistoryData.handlePageChange"
+  />
 </template>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index 5c5e3658..389c830d 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -10,9 +10,12 @@ import { ActionEvents } from '~/components/pub/my-ui/data/types'
 import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
 import { usePaginatedList } from '~/composables/usePaginatedList'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
 
 import { getPatients, removePatient } from '~/services/patient.service'
 import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 
 // #endregion
 
@@ -35,6 +38,7 @@ const refSearchNav: RefSearchNav = {
 }
 
 const formType = ref<`a` | `b`>(`a`)
+const isVerifyDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 
@@ -69,23 +73,61 @@ async function getPatientSummary() {
     summaryLoading.value = false
   }
 }
-function handleFormScreening(key: string) {
-  switch (key) {
-    case 'form-a':
-      navigateTo("/screening-mpp/add/a")
-      break;
-    case 'preview-form-a':
-      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
-      break;
-    case 'form-b':
-      navigateTo("/screening-mpp/add/b")
-      break;
-    case 'preview-form-b':
-      navigateTo('https://google.com', { external: true, open: { target: '_blank' } });
-      break;
-    default:
-      break;
+
+async function handleActionClick(eventType: string) {
+  if (eventType === 'submit') {
+    // const patient: Patient = await composeFormData()
+    // let createdPatientId = 0
+
+    // const response = await handleActionSave(
+    //   patient,
+    //   () => {},
+    //   () => {},
+    //   toast,
+    // )
+
+    // const data = (response?.body?.data ?? null) as PatientBase | null
+    // if (!data) return
+    // createdPatientId = data.id
+
+    // If has callback provided redirect to callback with patientData
+    // if (props.callbackUrl) {
+    //   await navigateTo(props.callbackUrl + '?patient-id=' + patient.id)
+    //   return
+    // }
+
+    // Navigate to patient list or show success message
+    // await navigateTo('/outpatient/encounter')
+    // return
   }
+
+  if (eventType === 'back') {
+    isVerifyDialogOpen.value = false
+  }
+}
+
+async function handleConfirmDelete() {
+  try {
+      const result = await removePatient(recId.value)
+      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
 }
 // #endregion
 
@@ -99,26 +141,15 @@ provide('table_data_loader', isLoading)
 // #region Watchers
 watch([recId, recAction], () => {
   switch (recAction.value) {
-    case ActionEvents.showDetail:
-      navigateTo({
-        name: 'outpatient-encounter-id',
-        params: { id: recId.value },
-      })
+    case ActionEvents.showVerify:
+      isVerifyDialogOpen.value = true
       break
-
-    case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
-      navigateTo({
-        name: 'outpatient-encounter-id-edit',
-        params: { id: recId.value },
-      })
-      break
-
-    case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
+    case ActionEvents.showValidate:
       isRecordConfirmationOpen.value = true
       break
+    case ActionEvents.showPrint:
+      navigateTo('https://google.com', {external: true,open: { target: "_blank" },});
+      break
   }
 })
 // #endregion
@@ -126,26 +157,29 @@ watch([recId, recAction], () => {
 
 <template>
   <Header :prep="{ ...headerPrep }" />
-  <AppResumeList />
 
-  <!-- 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>
--->
+  <!-- <AppTherapyProtocolList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"/> -->
+  <AppResumeList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"/>
+
+  <Dialog v-model:open="isVerifyDialogOpen" title="Verifikasi">
+    <AppResumeVerifyDialog />
+    <div class="flex justify-end">
+      <Action :enable-draft="false" @click="handleActionClick" />
+    </div>
+  </Dialog>
+  
+  <Confirmation
+    v-model:open="isRecordConfirmationOpen"
+    title="Validasi Data"
+    message="Apakah Anda yakin ingin menvalidasi data ini?"
+    confirm-text="Validasi"
+    @confirm="handleConfirmDelete"
+    @cancel="handleCancelConfirmation"
+  />
 </template>
\ No newline at end of file
diff --git a/app/components/pub/my-ui/data/dropdown-action-dvvp.vue b/app/components/pub/my-ui/data/dropdown-action-dvvp.vue
new file mode 100644
index 00000000..00e15096
--- /dev/null
+++ b/app/components/pub/my-ui/data/dropdown-action-dvvp.vue
@@ -0,0 +1,103 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from './types'
+import { ActionEvents } from './types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeKey = ref<string | null>(null)
+const linkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    onClick: () => {
+      detail()
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Verifikasi',
+    onClick: () => {
+      verify()
+    },
+    icon: 'i-lucide-check',
+  },
+  {
+    label: 'Validasi',
+    onClick: () => {
+      validate()
+    },
+    icon: 'i-lucide-check-check',
+  },
+  {
+    label: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+]
+
+function detail() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function verify() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showVerify
+  recItem.value = props.rec
+}
+
+function validate() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showValidate
+  recItem.value = props.rec
+}
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItems"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/data/types.ts b/app/components/pub/my-ui/data/types.ts
index c0d283de..c86e1752 100644
--- a/app/components/pub/my-ui/data/types.ts
+++ b/app/components/pub/my-ui/data/types.ts
@@ -76,6 +76,9 @@ export const ActionEvents = {
   showEdit: 'showEdit',
   showDetail: 'showDetail',
   showProcess: 'showProcess',
+  showVerify: 'showVerify',
+  showValidate: 'showValidate',
+  showPrint: 'showPrint',
 }
 
 export interface DataTableLoader {
diff --git a/app/components/pub/my-ui/form/input-base.vue b/app/components/pub/my-ui/form/input-base.vue
index aeb4a4af..c31b2073 100644
--- a/app/components/pub/my-ui/form/input-base.vue
+++ b/app/components/pub/my-ui/form/input-base.vue
@@ -19,6 +19,8 @@ const props = defineProps<{
   maxLength?: number
   isRequired?: boolean
   isDisabled?: boolean
+  rightLabel?: string
+  bottomLabel?: string
 }>()
 
 function handleInput(event: Event) {
@@ -61,14 +63,14 @@ function handleInput(event: Event) {
         v-slot="{ componentField }"
         :name="fieldName"
       >
-        <FormItem>
+        <FormItem :class="cn(`relative`,)">
           <FormControl>
             <Input
               :disabled="isDisabled"
               v-bind="componentField"
               :placeholder="placeholder"
               :maxlength="maxLength"
-              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0')"
+              :class="cn('focus:border-primary focus:ring-2 focus:ring-primary focus:ring-offset-0', props.class)"
               autocomplete="off"
               aria-autocomplete="none"
               autocorrect="off"
@@ -76,10 +78,12 @@ function handleInput(event: Event) {
               spellcheck="false"
               @input="handleInput"
             />
+            <p v-show="rightLabel" class="text-gray-400 absolute top-0 right-3">{{ rightLabel }}</p>
           </FormControl>
           <FormMessage />
         </FormItem>
       </FormField>
     </DE.Field>
+    <p v-show="bottomLabel" class="text-gray-400 mt-1">{{ bottomLabel }}</p>    
   </DE.Cell>
 </template>
diff --git a/app/components/pub/my-ui/form/text-area-input.vue b/app/components/pub/my-ui/form/text-area-input.vue
index 7747e727..c7b7c794 100644
--- a/app/components/pub/my-ui/form/text-area-input.vue
+++ b/app/components/pub/my-ui/form/text-area-input.vue
@@ -47,7 +47,7 @@ function handleInput(event: Event) {
 <template>
   <DE.Cell :col-span="colSpan || 1">
     <DE.Label
-      class="mb-1 font-medium"
+      class="mb-1"
       v-if="label !== ''"
       :label-for="fieldName"
       :is-required="isRequired && !isDisabled"
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
index 99539414..3d529622 100644
--- a/app/schemas/resume.schema.ts
+++ b/app/schemas/resume.schema.ts
@@ -3,6 +3,31 @@ import type { CreateDto } from '~/models/consultation'
 
 export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "meninggal" | "other"
 
+const SecondaryDiagnosisSchema = z.object({  
+  diagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
+  icd10: z.string({ required_error: 'ICD 10 harus diisi' }),
+  diagnosisBasis: z.string({ required_error: 'Dasar Diagnosis harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
+const SecondaryActionSchema = z.object({
+  action: z.string({ required_error: 'Action harus diisi' }),
+  icd9: z.string({ required_error: 'ICD 10 harus diisi' }),
+  actionBasis: z.string({ required_error: 'Dasar Action harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
+const ConsultationSchema = z.object({
+  consultation: z.string({ required_error: 'Consultation harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+  consultationReply: z.string({ required_error: 'Jawaban Consultation harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
+})
+
 const ResumeSchema = z.object({
   inDate: z.string({ required_error: 'Tanggal harus diisi' }),
   outDate: z.string({ required_error: 'Tanggal harus diisi' }),
@@ -17,19 +42,25 @@ const ResumeSchema = z.object({
     .max(2048, 'Uraian maksimum 2048 karakter'),
 
   primaryDiagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
-  secondaryDiagnosis: z.array(z.string()).optional().default([]),
+  secondaryDiagnosis: z.array(SecondaryDiagnosisSchema).optional(),
 
   primaryOperativeNonOperativeAct: z.string({ required_error: 'Diagnosis harus diisi' }),
-  secondaryOperativeNonOperativeAct: z.array(z.string()).optional().default([]),
+  secondaryOperativeNonOperativeAct: z.array(SecondaryActionSchema).optional(),
   medikamentosa: z.string({ required_error: 'Uraian harus diisi' })
     .min(1, 'Uraian minimum 1 karakter')
     .max(2048, 'Uraian maksimum 2048 karakter'),
 
+  consultation: z.array(ConsultationSchema).optional(),
+
   arrangement: z.custom<ResumeArrangementType>().default("krs"),
   faskes: z.string({ required_error: 'Faskes harus diisi' }).optional(),
   clinic: z.string({ required_error: 'Klinik harus diisi' }).optional(),
   deathDate: z.string({ required_error: 'Tanggal harus diisi' }).optional(),
   deathCause: z.array(z.string()).optional().default([]),
+  deathCauseDescription: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter')
+    .optional(),
   keterangan: z.string({ required_error: 'Uraian harus diisi' })
     .min(1, 'Uraian minimum 1 karakter')
     .max(2048, 'Uraian maksimum 2048 karakter')

From 15ab43c1b143627892df2a9f82f418091b55ed7f Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Mon, 17 Nov 2025 10:38:21 +0700
Subject: [PATCH 3/5] Feat: add verification capthca and form adjustment

---
 app/assets/svg/wavey-fingerprint.svg          |   1 +
 .../app/resume/_common/select-arrangement.vue |   6 +-
 app/components/app/resume/add.vue             |  33 ++--
 app/components/app/resume/verify-dialog.vue   |  13 +-
 app/components/content/resume/list.vue        |  12 +-
 .../pub/my-ui/form/text-captcha.vue           | 175 ++++++++++++++++++
 app/schemas/resume.schema.ts                  |   5 +-
 app/schemas/verification.schema.ts            |  19 ++
 8 files changed, 236 insertions(+), 28 deletions(-)
 create mode 100644 app/assets/svg/wavey-fingerprint.svg
 create mode 100644 app/components/pub/my-ui/form/text-captcha.vue
 create mode 100644 app/schemas/verification.schema.ts

diff --git a/app/assets/svg/wavey-fingerprint.svg b/app/assets/svg/wavey-fingerprint.svg
new file mode 100644
index 00000000..b281297f
--- /dev/null
+++ b/app/assets/svg/wavey-fingerprint.svg
@@ -0,0 +1 @@
+<svg xmlns='http://www.w3.org/2000/svg'  width='250' height='30' viewBox='0 0 1000 120'><rect fill='#000000' width='1000' height='120'/><g  fill='none' stroke='#222' stroke-width='10' stroke-opacity='1'><path d='M-500 75c0 0 125-30 250-30S0 75 0 75s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 45c0 0 125-30 250-30S0 45 0 45s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 105c0 0 125-30 250-30S0 105 0 105s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 15c0 0 125-30 250-30S0 15 0 15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500-15c0 0 125-30 250-30S0-15 0-15s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/><path d='M-500 135c0 0 125-30 250-30S0 135 0 135s125 30 250 30s250-30 250-30s125-30 250-30s250 30 250 30s125 30 250 30s250-30 250-30'/></g></svg>
\ No newline at end of file
diff --git a/app/components/app/resume/_common/select-arrangement.vue b/app/components/app/resume/_common/select-arrangement.vue
index 9a945d44..7e236ff0 100644
--- a/app/components/app/resume/_common/select-arrangement.vue
+++ b/app/components/app/resume/_common/select-arrangement.vue
@@ -31,11 +31,9 @@ const {
 const arrangementTypeOpts = [
   { label: 'KRS', value: "krs" },
   { label: 'MRS', value: "mrs" },
-  { label: 'Pindah IGD', value: "pindahIgd" },
-  { label: 'Rujuk', value: "rujuk" },
-  { label: 'Rujuk Balik', value: "rujukBalik" },
+  { label: 'Rujuk Internal', value: "rujukInternal" },
+  { label: 'Rujuk External', value: "rujukExternal" },
   { label: 'Meninggal', value: "meninggal" },
-  { label: 'Lain Lain', value: "other" },
 ]
 </script>
 
diff --git a/app/components/app/resume/add.vue b/app/components/app/resume/add.vue
index d1423735..d5fa3370 100644
--- a/app/components/app/resume/add.vue
+++ b/app/components/app/resume/add.vue
@@ -19,7 +19,6 @@ import SelectPainScale from './_common/select-pain-scale.vue'
 import SelectNationalProgramService from './_common/select-national-program-service.vue'
 import SelectNationalProgramServiceStatus from './_common/select-national-program-service-status.vue'
 import SelectHospitalLeaveCondition from './_common/select-hospital-leave-condition.vue'
-import SelectFollowingArrangement from './_common/select-following-arrangement.vue'
 import SelectHospitalLeaveMethod from './_common/select-hospital-leave-method.vue'
 
 const props = defineProps<{
@@ -58,6 +57,12 @@ const DEFAULT_CONSULTATION_VALUE = {
   consultation: '',
   consultationReply: '',
 };
+
+const initialFormValues = {
+  secondaryDiagnosis: [DEFAULT_SECONDARY_DIAGNOSIS_VALUE],
+  secondaryOperativeNonOperativeAct: [DEFAULT_SECONDARY_ACTION_VALUE],
+  consultation: [DEFAULT_CONSULTATION_VALUE],
+}
 </script>
 
 <template>
@@ -68,7 +73,7 @@ const DEFAULT_CONSULTATION_VALUE = {
     :validation-schema="formSchema"
     :validate-on-mount="false"
     validation-mode="onSubmit"
-    :initial-values="initialValues ? initialValues : {}">
+    :initial-values="initialValues ? initialValues : initialFormValues">
 
     <!-- Pasien -->
     <h1 class="mb-3 text-base font-medium">Pemeriksaan Pasien</h1>
@@ -295,7 +300,7 @@ const DEFAULT_CONSULTATION_VALUE = {
           @click="isFarmacyHistoryOpen = true">
           <Icon name="i-lucide-history" class="h-4 w-4" /> Riwayat Data Farmasi</Button>
       </div>
-      <DE.Block class="items-end" :col-count="3" :cell-flex="false">
+      <DE.Block class="items-end" :col-count="2" :cell-flex="false">
         <TextAreaInput field-name="supplementCheckup"
           label="Kelainan Khusus Alergi" placeholder="Masukkan Kelainan Khusus Alergi" :errors="errors" />
         <TextAreaInput field-name="supplementCheckup"
@@ -405,16 +410,25 @@ const DEFAULT_CONSULTATION_VALUE = {
       </DE.Block>
     </section>
 
+    <DE.Cell :col-span="3"
+      v-show="resumeArrangementType === `mrs`">
+      <TextAreaInput
+        field-name="inpatientIndication"
+        label="Indikasi Rawat Jalan"
+        placeholder="Indikasi Rawat Jalan"
+        :errors="errors" />
+    </DE.Cell>
+
     <DE.Block :col-count="3" :cell-flex="false">      
       <SelectFaskes
-        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        v-show="resumeArrangementType === `rujukExternal` "
         field-name="faskes"
         label="Faskes"
         placeholder="Pilih Faskes"
         :errors="errors"
       />
       <InputBase
-        v-show="resumeArrangementType === `rujuk` || resumeArrangementType === `rujukBalik` "
+        v-show="resumeArrangementType === `rujukExternal` "
         field-name="clinic"
         label="Klinik"
         placeholder="Masukkan Klinik"
@@ -460,15 +474,6 @@ const DEFAULT_CONSULTATION_VALUE = {
             label="Keterangan Sebab Meninggal"
             placeholder="Keterangan Sebab Meninggal"
             :errors="errors" />
-      </DE.Cell>          
-
-      <DE.Cell :col-span="3"
-        v-show="resumeArrangementType === `other`">
-        <TextAreaInput
-          field-name="keterangan"
-          label="Keterangan"
-          placeholder="Keterangan"
-          :errors="errors" />
       </DE.Cell>
     
     </DE.Block>
diff --git a/app/components/app/resume/verify-dialog.vue b/app/components/app/resume/verify-dialog.vue
index 1519446c..ca4fb554 100644
--- a/app/components/app/resume/verify-dialog.vue
+++ b/app/components/app/resume/verify-dialog.vue
@@ -8,6 +8,7 @@ import Select from '~/components/pub/my-ui/form/select.vue'
 import { Form } from '~/components/pub/ui/form'
 import InputBase from '~/components/pub/my-ui/form/input-base.vue'
 import type { InstallationFormData } from '~/schemas/installation.schema'
+import TextCaptcha from '~/components/pub/my-ui/form/text-captcha.vue'
 
 
 const props = defineProps<{
@@ -21,6 +22,7 @@ const emit = defineEmits<{
 }>()
 
 const formSchema = toTypedSchema(props.schema)
+const captchaRef = ref<InstanceType<typeof TextCaptcha> | null>(null)
 
 // Form submission handler
 function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
@@ -83,12 +85,11 @@ const items = ref([
             </Field>
           </div>
 
-          <InputBase
-            class="mb-2"
-            field-name="captha"
-            label="Captha"
-            placeholder="Masukkan Captha"
-            :errors="errors"/>
+          <TextCaptcha
+            ref="captchaRef"
+            :length="5"
+            :useSpacing="true"
+            :noiseChars="true"/>
 
         </div>
       </div>
diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index 389c830d..ad60e0e0 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -16,6 +16,8 @@ import { getPatients, removePatient } from '~/services/patient.service'
 import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
 import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
+import type { ExposedForm } from '~/types/form'
+import { VerificationSchema } from '~/schemas/verification.schema'
 
 // #endregion
 
@@ -37,7 +39,7 @@ const refSearchNav: RefSearchNav = {
   },
 }
 
-const formType = ref<`a` | `b`>(`a`)
+const verificationInputForm = ref<ExposedForm<any> | null>(null)
 const isVerifyDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
@@ -45,6 +47,8 @@ const summaryLoading = ref(false)
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
+const isCaptchaValid = ref(false)
+provide('isCaptchaValid', isCaptchaValid)
 
 const headerPrep: HeaderPrep = {
   title: "Resume",
@@ -168,9 +172,11 @@ watch([recId, recAction], () => {
     @page-change="handlePageChange"/>
 
   <Dialog v-model:open="isVerifyDialogOpen" title="Verifikasi">
-    <AppResumeVerifyDialog />
+    <AppResumeVerifyDialog
+      ref="verificationInputForm"
+      :schema="VerificationSchema" />
     <div class="flex justify-end">
-      <Action :enable-draft="false" @click="handleActionClick" />
+      <Action v-show="isCaptchaValid" :enable-draft="false" @click="handleActionClick" />
     </div>
   </Dialog>
   
diff --git a/app/components/pub/my-ui/form/text-captcha.vue b/app/components/pub/my-ui/form/text-captcha.vue
new file mode 100644
index 00000000..de9d7f4b
--- /dev/null
+++ b/app/components/pub/my-ui/form/text-captcha.vue
@@ -0,0 +1,175 @@
+<script setup lang="ts">
+import { ref, computed, watch, defineEmits, defineProps, onMounted, nextTick, defineExpose } from 'vue'
+import Input from '~/components/pub/ui/input/Input.vue';
+import Button from '~/components/pub/ui/button/Button.vue';
+import waveyFingerprint from '~/assets/svg/wavey-fingerprint.svg'
+
+/**
+ * TextCaptcha props:
+ * - length: number of characters in the core captcha
+ * - caseSensitive: whether validation is case sensitive
+ * - useSpacing: show spaced-out characters (visual obfuscation only)
+ * - noiseChars: include random noise characters visually (not required to type)
+ */
+const props = defineProps({
+  length: { type: Number, default: 6 },
+  caseSensitive: { type: Boolean, default: false },
+  useSpacing: { type: Boolean, default: true },
+  noiseChars: { type: Boolean, default: false }, // adds random noise characters to display
+  refreshCooldownMs: { type: Number, default: 500 }, // guard repeated refresh
+})
+
+const emit = defineEmits<{
+  (e: 'update:valid', valid: boolean): void
+  (e: 'validated', valid: boolean): void
+  (e: 'change', value: string): void
+}>()
+
+// Internal state
+const raw = ref('')            // the canonical captcha value (what user must match, ignoring visual noise)
+const display = ref('')        // randomized visual representation (may include spacing/noise)
+const input = ref('')          // user typed value
+const lastRefresh = ref(0)
+const valid = inject('isCaptchaValid') as Ref<boolean>
+const errorMessage = ref('')
+
+/** Characters excluding ambiguous ones: 0/O, 1/l/I etc. */
+const CHARS = '23456789ABCDEFGHJKLMNPQRSTUVWXYZabcdefghijkmnopqrstuvwxyz'
+
+function randomChar() {
+  return CHARS.charAt(Math.floor(Math.random() * CHARS.length))
+}
+
+/** Generate the canonical captcha string */
+function genRaw(len = props.length) {
+  let s = ''
+  for (let i = 0; i < len; i++) s += randomChar()
+  return s
+}
+
+/** Create a visually obfuscated display string (spacing, noise, random case) */
+function genDisplay(base: string) {
+  const arr: string[] = []
+  for (const ch of base) {
+    // toggle case randomly (only for letters)
+    const c = /[A-Za-z]/.test(ch) && Math.random() > 0.5 ? (Math.random() > 0.5 ? ch.toLowerCase() : ch.toUpperCase()) : ch
+    arr.push(c)
+    if (props.useSpacing && Math.random() > 0.3) arr.push(' ') // random space
+  }
+  return arr.join('')
+}
+
+/** Refresh captcha */
+function refresh() {
+  const now = Date.now()
+  if (now - lastRefresh.value < props.refreshCooldownMs) return
+  lastRefresh.value = now
+
+  raw.value = genRaw(props.length)
+  display.value = genDisplay(raw.value)
+  input.value = ''
+  valid.value = false
+  errorMessage.value = ''
+  // emit change so parent knows new value (but we don't send the raw canonical in production)
+  emit('change', display.value)
+}
+
+/** Normalize input and canonical for comparison */
+function normalizeForCompare(s: string) {
+  const normalized = s.replace(/\s+/g, '') // strip spaces
+  return props.caseSensitive ? normalized : normalized.toLowerCase()
+}
+
+/** Validate the current input */
+function validate() {
+  const left = normalizeForCompare(input.value)
+  const right = normalizeForCompare(raw.value)
+  if (!input.value) {
+    valid.value = false
+    errorMessage.value = 'Please enter the captcha text.'
+  } else if (left === right) {
+    valid.value = true
+    errorMessage.value = ''
+  } else {
+    valid.value = false
+    errorMessage.value = 'Captcha does not match.'
+  }
+  emit('update:valid', valid.value)
+  emit('validated', valid.value)
+  return valid.value
+}
+
+// expose a refresh method to parent via ref
+defineExpose({ refresh, validate, isValid: computed(() => valid.value) })
+
+// generate on mount
+onMounted(() => refresh())
+
+// // re-validate whenever input changes (lightweight)
+// watch(input, () => {
+//   // we don't auto-pass until the user explicitly validate (but we can optionally live-validate)
+//   // Here we perform live feedback but still emit validated only when called
+//   const left = normalizeForCompare(input.value)
+//   const right = normalizeForCompare(raw.value)
+//   valid.value = !!input.value && left === right
+//   // emit a live update so the parent can disable submit accordingly
+//   emit('update:valid', valid.value)
+// })
+</script>
+
+<template>
+  <div class="space-y-2 w-full max-w-sm">
+    <div class="flex items-center justify-between gap-3">
+      <!-- Captcha visual box -->
+      <div
+        role="img"
+        aria-label="Text captcha, type the characters shown"
+        tabindex="0"
+        class="select-none p-3 rounded-md border border-gray-200 text-white text-xl font-mono tracking-wider text-center w-full"
+      >
+        <span class="inline-block" v-html="display"></span>
+      </div>
+
+      <!-- Refresh -->
+      <div class="flex-shrink-0">
+        <Button variant="ghost" type="button" @click="refresh" title="Refresh captcha">
+          <Icon name="i-lucide-refresh-cw" />
+        </Button>
+      </div>
+    </div>
+
+    <!-- Input -->
+    <div class="flex gap-3 items-start">
+        <div class="flex-grow">
+            <Input
+                v-model="input"
+                :aria-invalid="valid ? 'false' : 'true'"
+                inputmode="text"
+                placeholder="Type the captcha text"
+                @keyup.enter="validate"
+            />
+            <p v-if="errorMessage" class="text-xs text-red-500 mt-1">{{ errorMessage }}</p>
+            <p v-else-if="valid" class="text-xs text-green-500 mt-1">Correct</p>
+            <p v-else class="text-xs text-gray-500 mt-1">Not case-sensitive</p>
+        </div>
+        <Button variant="outline" type="button" @click="validate" title="Validate"
+            class="border-orange-400">
+            <Icon name="i-lucide-check" class="text-orange-400" />
+        </Button>
+    </div>
+
+  </div>
+</template>
+
+<style scoped>
+/* small nicety: make noise/spaced display look irregular */
+div[role="img"] {
+  background: url('~/assets/svg/wavey-fingerprint.svg') repeat center;
+}
+
+div[role="img"] span {
+  letter-spacing: 0.12em;
+  font-weight: 600;
+  user-select: none;
+}
+</style>
\ No newline at end of file
diff --git a/app/schemas/resume.schema.ts b/app/schemas/resume.schema.ts
index 3d529622..3e466a33 100644
--- a/app/schemas/resume.schema.ts
+++ b/app/schemas/resume.schema.ts
@@ -1,7 +1,7 @@
 import { z } from 'zod'
 import type { CreateDto } from '~/models/consultation'
 
-export type ResumeArrangementType = "krs" | "mrs" | "pindahIgd" | "rujuk" | "rujukBalik" | "meninggal" | "other"
+export type ResumeArrangementType = "krs" | "mrs" | "rujukInternal" | "rujukExternal" | "meninggal" | "other"
 
 const SecondaryDiagnosisSchema = z.object({  
   diagnosis: z.string({ required_error: 'Diagnosis harus diisi' }),
@@ -53,6 +53,9 @@ const ResumeSchema = z.object({
   consultation: z.array(ConsultationSchema).optional(),
 
   arrangement: z.custom<ResumeArrangementType>().default("krs"),
+  inpatientIndication: z.string({ required_error: 'Uraian harus diisi' })
+    .min(1, 'Uraian minimum 1 karakter')
+    .max(2048, 'Uraian maksimum 2048 karakter'),
   faskes: z.string({ required_error: 'Faskes harus diisi' }).optional(),
   clinic: z.string({ required_error: 'Klinik harus diisi' }).optional(),
   deathDate: z.string({ required_error: 'Tanggal harus diisi' }).optional(),
diff --git a/app/schemas/verification.schema.ts b/app/schemas/verification.schema.ts
new file mode 100644
index 00000000..db0319cf
--- /dev/null
+++ b/app/schemas/verification.schema.ts
@@ -0,0 +1,19 @@
+import { z } from 'zod'
+
+const VerificationSchema = z.object({
+  name: z.string({
+    required_error: 'Mohon lengkapi Nama Anda',
+  }),
+  email: z.string({
+    required_error: 'Mohon lengkapi email',
+  }),
+  password: z.string({
+    required_error: 'Mohon lengkapi password',
+  }),
+})
+
+
+type VerificationFormData = z.infer<typeof VerificationSchema>
+
+export { VerificationSchema, }
+export type { VerificationFormData, }
\ No newline at end of file

From 7ed1cc83bfa62d8c9660ff1ee61b1f96661ef45a Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Mon, 17 Nov 2025 15:04:01 +0700
Subject: [PATCH 4/5] Feat: add doc preview in Resume List

---
 app/components/content/resume/list.vue        |  8 ++++-
 .../pub/my-ui/modal/doc-preview-dialog.vue    | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 app/components/pub/my-ui/modal/doc-preview-dialog.vue

diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index ad60e0e0..d8d8c721 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -18,6 +18,7 @@ import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
 import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ExposedForm } from '~/types/form'
 import { VerificationSchema } from '~/schemas/verification.schema'
+import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
 
 // #endregion
 
@@ -41,6 +42,7 @@ const refSearchNav: RefSearchNav = {
 
 const verificationInputForm = ref<ExposedForm<any> | null>(null)
 const isVerifyDialogOpen = ref(false)
+const isDocPreviewDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
 const summaryLoading = ref(false)
 
@@ -152,7 +154,7 @@ watch([recId, recAction], () => {
       isRecordConfirmationOpen.value = true
       break
     case ActionEvents.showPrint:
-      navigateTo('https://google.com', {external: true,open: { target: "_blank" },});
+      isDocPreviewDialogOpen.value = true
       break
   }
 })
@@ -179,6 +181,10 @@ watch([recId, recAction], () => {
       <Action v-show="isCaptchaValid" :enable-draft="false" @click="handleActionClick" />
     </div>
   </Dialog>
+
+  <Dialog v-model:open="isDocPreviewDialogOpen" title="Preview Dokumen" size="2xl">
+    <DocPreviewDialog :link="`https://www.antennahouse.com/hubfs/xsl-fo-sample/pdf/basic-link-1.pdf`" />
+  </Dialog>
   
   <Confirmation
     v-model:open="isRecordConfirmationOpen"
diff --git a/app/components/pub/my-ui/modal/doc-preview-dialog.vue b/app/components/pub/my-ui/modal/doc-preview-dialog.vue
new file mode 100644
index 00000000..26534456
--- /dev/null
+++ b/app/components/pub/my-ui/modal/doc-preview-dialog.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+
+const props = defineProps<{
+  link: string
+}>()
+
+const emit = defineEmits<{
+  // submit: [values: InstallationFormData, resetForm: () => void]
+  // cancel: [resetForm: () => void]
+}>()
+
+// Form cancel handler
+// function onCancelForm({ resetForm }: { resetForm: () => void }) {
+//   emit('cancel', resetForm)
+// }
+function onExternalLink() {
+  navigateTo(props.link, {external: true,open: { target: "_blank" },});
+}
+</script>
+
+<template>
+  <Button variant="link" class="absolute top-4 right-16" @click="onExternalLink">
+    Open in Browser
+    <Icon name="i-lucide-external-link" class="h-4 w-4" />
+  </Button>
+  <div class="border border-gray-400 rounded-lg w-full h-[80vh] overflow-hidden">
+    <embed style="width: 100%; height: 100%" :src="props.link" />
+  </div>
+</template>
\ No newline at end of file

From dab6adc4a98820d8686c5a336172af586b883c24 Mon Sep 17 00:00:00 2001
From: hasyim_kai <muhammad.hasyim.c.a@gmail.com>
Date: Tue, 18 Nov 2025 11:19:48 +0700
Subject: [PATCH 5/5] Fix: add role authorization in Resume

---
 app/components/content/resume/list.vue | 52 +++++++++++++++++---------
 app/composables/useRBAC.ts             | 18 +++++++++
 app/lib/utils.ts                       |  9 +++++
 3 files changed, 62 insertions(+), 17 deletions(-)

diff --git a/app/components/content/resume/list.vue b/app/components/content/resume/list.vue
index d8d8c721..4b5b5001 100644
--- a/app/components/content/resume/list.vue
+++ b/app/components/content/resume/list.vue
@@ -19,9 +19,17 @@ import Confirmation from '~/components/pub/my-ui/confirmation/confirmation.vue'
 import type { ExposedForm } from '~/types/form'
 import { VerificationSchema } from '~/schemas/verification.schema'
 import DocPreviewDialog from '~/components/pub/my-ui/modal/doc-preview-dialog.vue'
-
+import type { PagePermission } from '~/models/role'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+import { unauthorizedToast } from '~/lib/utils'
 // #endregion
 
+
+// #region Permission
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+const { getPagePermissions } = useRBAC()
+const pagePermission = getPagePermissions(roleAccess)
+
 // #region State
 const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
   fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
@@ -55,11 +63,13 @@ provide('isCaptchaValid', isCaptchaValid)
 const headerPrep: HeaderPrep = {
   title: "Resume",
   icon: 'i-lucide-newspaper',
-  addNav: {
-    label: "Resume",
-    onClick: () => navigateTo('/resume/add'),
-  },
-}
+  }
+  if (pagePermission.canCreate) {
+    headerPrep.addNav = {
+      label: "Resume",
+      onClick: () => navigateTo('/resume/add'),
+    }
+  }
 // #endregion
 
 // #region Lifecycle Hooks
@@ -146,17 +156,25 @@ provide('table_data_loader', isLoading)
 
 // #region Watchers
 watch([recId, recAction], () => {
-  switch (recAction.value) {
-    case ActionEvents.showVerify:
-      isVerifyDialogOpen.value = true
-      break
-    case ActionEvents.showValidate:
-      isRecordConfirmationOpen.value = true
-      break
-    case ActionEvents.showPrint:
-      isDocPreviewDialogOpen.value = true
-      break
-  }
+    switch (recAction.value) {
+      case ActionEvents.showVerify:
+        if(pagePermission.canUpdate) { 
+          isVerifyDialogOpen.value = true
+        } else {
+          unauthorizedToast()
+        }
+        break
+      case ActionEvents.showValidate:
+        if(pagePermission.canUpdate) {        
+          isRecordConfirmationOpen.value = true
+        } else {
+          unauthorizedToast()
+        }
+        break
+      case ActionEvents.showPrint:
+        isDocPreviewDialogOpen.value = true
+        break
+    }
 })
 // #endregion
 </script>
diff --git a/app/composables/useRBAC.ts b/app/composables/useRBAC.ts
index ced57e3e..fcc28144 100644
--- a/app/composables/useRBAC.ts
+++ b/app/composables/useRBAC.ts
@@ -1,5 +1,13 @@
 import type { Permission, RoleAccess } from '~/models/role'
 
+export interface PageOperationPermission {
+  canRead: boolean
+  canCreate: boolean
+  canUpdate: boolean
+  canDelete: boolean
+}
+
+
 /**
  * Check if user has access to a page
  */
@@ -36,6 +44,14 @@ export function useRBAC() {
   const hasUpdateAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'U')
   const hasDeleteAccess = (roleAccess: RoleAccess) => checkPermission(roleAccess, 'D')
 
+  const getPagePermissions = (roleAccess: RoleAccess): PageOperationPermission => ({
+      canRead : hasReadAccess(roleAccess),
+      canCreate: hasCreateAccess(roleAccess),
+      canUpdate: hasUpdateAccess(roleAccess),
+      canDelete: hasDeleteAccess(roleAccess),
+  })
+
+
   return {
     checkRole,
     checkPermission,
@@ -44,5 +60,7 @@ export function useRBAC() {
     hasReadAccess,
     hasUpdateAccess,
     hasDeleteAccess,
+    getPagePermissions,
+    
   }
 }
diff --git a/app/lib/utils.ts b/app/lib/utils.ts
index 357d8700..64248caf 100644
--- a/app/lib/utils.ts
+++ b/app/lib/utils.ts
@@ -1,6 +1,7 @@
 import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
+import { toast } from '~/components/pub/ui/toast'
 
 export interface SelectOptionType<_T = string> {
   value: string
@@ -104,3 +105,11 @@ export function calculateAge(birthDate: Date | string | null | undefined): strin
     return `${years} tahun ${months} bulan`
   }
 }
+
+export function unauthorizedToast() {
+  toast({
+    title: 'Unauthorized',
+    description: 'You are not authorized to perform this action.',
+    variant: 'destructive',
+  })
+}
\ No newline at end of file