Merge branch 'dev' of github.com:dikstub-rssa/simrs-fe into feat/education-assessment-79

.env.example

@@ -1 +1,4 @@
-API_ORIGIN=
+NUXT_MAIN_API_ORIGIN=
+NUXT_BPJS_API_ORIGIN=
+NUXT_SYNC_API_ORIGIN=
+NUXT_API_ORIGIN=

.gitignore

@@ -23,4 +23,6 @@ logs
 .env.*
 !.env.example
 
-.vscode
+# editor
+.vscode
+*.swp

app/assets/css/main.css

@@ -16,8 +16,8 @@
   --primary-hover: 26, 92%, 65%;
 
   /* Secondary - Clean Blue */
-  --secondary: 210 50% 96%;
-  --secondary-foreground: 210 20% 20%;
+  --secondary: 40 70% 60%;
+  --secondary-foreground: 210 20% 100%;
   --muted: 210 25% 95%;
   --muted-foreground: 210 15% 50%;
 

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>

app/components/app/antibiotic-in-use/list.cfg.ts

@@ -0,0 +1,28 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }]],
+
+  keys: ['code', 'name'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+  },
+
+  components: {
+  },
+
+  htmls: {
+  },
+}

app/components/app/antibiotic-in-use/list.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+// Pub components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+// Configs
+import { config } from './list.cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <div class="space-y-4">
+    <DataTable v-bind="config" :rows="data" />
+  </div>
+</template>

app/components/app/bpjs/control-letter/_common/dropdown-action.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/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: 'Print',
+    onClick: () => {
+      print()
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Log History',
+    onClick: () => {
+      history()
+    },
+    icon: 'i-lucide-logs',
+  },
+  {
+    label: 'Hapus',
+    onClick: () => {
+      del()
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showProcess
+  recItem.value = props.rec
+}
+
+function history() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showDetail
+  recItem.value = props.rec
+}
+
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  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>

app/components/app/bpjs/control-letter/_common/history-dialog.vue

@@ -0,0 +1,49 @@
+<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 SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+
+const props = defineProps()
+
+const items = reactive([
+  { id: 1, description: 'Shipped from warehouse', createdAt: new Date(Date.now() - 86400000 * 2) },
+  { id: 2, description: 'In transit to distribution center', createdAt: new Date(Date.now() - 86400000) },
+  { id: 3, description: 'Out for delivery (Current)', createdAt: new Date() },
+])
+const itemsCount = computed(() => items.length || 0)
+</script>
+
+<template>
+  <ul :class="cn('pb-5 flex flex-col min-h-[30rem]', '')">
+    <li v-for="(item, index) in items" :key="item.id" class="flex gap-3 items-start">
+
+      <div class="flex flex-col items-center">
+        <div class="h-5 w-5 rounded-full border-2 border-gray-300 flex items-center justify-center">
+          <div :class="cn('dark:bg-white border-gray-300 rounded-full p-1.5',
+            index === 0 ? 'bg-green-500' : 'bg-transparent'
+          )">
+          </div>
+        </div>
+
+        <hr v-if="index !== itemsCount - 1" class="h-8 w-0.5 bg-gray-300 dark:bg-gray-300" aria-hidden="true">
+      </div>
+
+      <div class="flex justify-between items-center min-w-96">
+        <div class="max-w-80">
+          <time :class="cn('font-medium text-gray-800 dark:text-gray-100', '')">
+            {{ item?.createdAt.toLocaleDateString('id-ID') }}
+          </time>
+          <h1 :class="cn('text-gray-500 dark:text-gray-400', '')">{{ item.description }}</h1>
+        </div>
+      </div>
+    </li>
+  </ul>
+</template>

app/components/app/bpjs/control-letter/_common/select-date-range.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+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
+}>()
+
+const {
+  fieldName = 'job',
+  label = 'Pekerjaan',
+  placeholder = 'Pilih pekerjaan',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = props
+
+const dateRange = ref<{ from: Date | null; to: Date | null }>({
+  from: new Date(),
+  to: new Date(),
+})
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+const value = ref({
+  start: new CalendarDate(2022, 1, 20),
+  end: new CalendarDate(2022, 1, 20).add({ days: 20 }),
+}) as Ref<DateRange>
+</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>
+            <Popover>
+              <PopoverTrigger as-child>
+                <Button
+                  variant="outline"
+                  :class="cn('w-full bg-white border-gray-400 justify-start text-left font-normal', !value && 'text-muted-foreground')"
+                >
+                  <CalendarIcon class="mr-2 h-4 w-4" />
+                  <template v-if="value.start">
+                    <template v-if="value.end">
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+                      {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                      {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                  </template>
+                  <template v-else> Pick a date </template>
+                </Button>
+              </PopoverTrigger>
+              <PopoverContent class="w-auto p-0">
+                <RangeCalendar
+                  v-model="value"
+                  initial-focus
+                  :number-of-months="2"
+                  @update:start-value="(startDate) => (value.start = startDate)"
+                />
+              </PopoverContent>
+            </Popover>
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/bpjs/control-letter/_common/select-destination-polyclinic.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>

app/components/app/bpjs/control-letter/_common/select-origin-polyclinic.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>

app/components/app/bpjs/control-letter/filter.vue

@@ -0,0 +1,128 @@
+<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 SelectOriginPolyclinic from '~/components/app/bpjs/control-letter/_common/select-origin-polyclinic.vue'
+import SelectDestinationPolyclinic from '~/components/app/bpjs/control-letter/_common/select-destination-polyclinic.vue'
+import { cn } from '~/lib/utils'
+import SelectDateRange from './_common/select-date-range.vue'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  reset: [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 || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onResetForm({ resetForm }: { resetForm: () => void }) {
+  emit('reset', 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"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-7 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <SelectDateRange
+            field-name="releaseDate"
+            label="Tanggal Penerbitan"
+            placeholder="Tanggal Penerbitan"
+            :errors="errors"
+            is-required
+          />
+          <SelectDateRange
+            field-name="controlPlanDate"
+            label="Tanggal Rencana Kontrol"
+            placeholder="Tanggal Rencana Kontrol"
+            :errors="errors"
+            is-required
+          />
+          <InputBase
+            field-name="patientName"
+            label="Nama Pasien"
+            placeholder="Nama Pasien"
+          />
+          <InputBase
+            field-name="cardNumber"
+            label="Nomor Kartu"
+            placeholder="Nomor Kartu"
+          />
+          <InputBase
+            field-name="sepNumber"
+            label="Nomor SEP"
+            placeholder="Nomor SEP"
+          />
+          <SelectOriginPolyclinic
+            field-name="originPolyclinic"
+            label="Poliklinik Asal"
+            placeholder="Pilih Poliklinik Asal"
+            :errors="errors"
+            is-required
+          />
+          <SelectDestinationPolyclinic
+            field-name="destinationPolyclinic"
+            label="Poliklinik Tujuan"
+            placeholder="Pilih Poliklinik Tujuan"
+            :errors="errors"
+            is-required
+          />
+        </div>
+      </div>
+     
+      <div class="my-2 flex items-center gap-3 justify-end">
+        <Button @click="onResetForm" variant="secondary">Reset</Button>
+        <Button @click="onSubmitForm">Terapkan</Button>
+      </div>
+    </form>
+  </Form>
+</template>

app/components/app/bpjs/control-letter/list.cfg.ts

@@ -0,0 +1,108 @@
+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('./_common/dropdown-action.vue'))
+const statusBadge = defineAsyncComponent(() => import('~/components/pub/my-ui/badge/status-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {},{}, {}, {}, {}, {}, {width: 90},{width: 10},],
+
+  headers: [
+    [
+      { label: 'No Surat' },
+      { label: 'No MR' },
+      { label: 'Nama' },
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Tgl Penerbitan' },
+      { label: 'Klinik Asal' },
+      { label: 'Klinik Tujuan' },
+      { label: 'DPJP' },
+      { label: 'No SEP Asal' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['birth_date', 'number', 'person.name', 'birth_date', 'birth_date',
+    'birth_date', 'number', 'person.name', 'birth_date', 'status', '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,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}

app/components/app/bpjs/control-letter/list.vue

@@ -0,0 +1,31 @@
+<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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>

app/components/app/chemotherapy/action-proses.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get proses handler from parent via inject
+const prosesHandler = inject<(rec: any) => void>('proses-handler', null)
+
+function handleProses() {
+  if (prosesHandler) {
+    prosesHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      class="border-orange-500 bg-orange-500 text-white hover:bg-orange-600"
+      @click="handleProses"
+    >
+      Proses
+    </Button>
+  </div>
+</template>
+

app/components/app/chemotherapy/dialog-verification.vue

@@ -0,0 +1,164 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '~/components/pub/ui/table'
+import Input from '~/components/pub/ui/input/Input.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+interface Props {
+  open?: boolean
+  tanggalPemeriksaan?: string | Date
+  jadwalTanggalPemeriksaan?: string | Date
+  isLoading?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  open: false,
+  tanggalPemeriksaan: undefined,
+  jadwalTanggalPemeriksaan: undefined,
+  isLoading: false,
+})
+
+const emit = defineEmits<{
+  'update:open': [value: boolean]
+  'update:date': [value: string | undefined]
+  'update:schedule': [value: string | undefined]
+  submit: [data: { tanggalPemeriksaan: string | undefined; jadwalTanggalPemeriksaan: string | undefined }]
+}>()
+
+// Local state for jadwal tanggal pemeriksaan
+const jadwalTanggal = ref<string | undefined>(
+  props.jadwalTanggalPemeriksaan
+    ? typeof props.jadwalTanggalPemeriksaan === 'string'
+      ? props.jadwalTanggalPemeriksaan
+      : format(props.jadwalTanggalPemeriksaan, 'yyyy-MM-dd')
+    : undefined,
+)
+
+// Watch for external changes
+watch(
+  () => props.jadwalTanggalPemeriksaan,
+  (newValue) => {
+    if (newValue) {
+      jadwalTanggal.value =
+        typeof newValue === 'string' ? newValue : format(newValue, 'yyyy-MM-dd')
+    } else {
+      jadwalTanggal.value = undefined
+    }
+  },
+)
+
+// Watch local changes
+watch(jadwalTanggal, (newValue) => {
+  emit('update:schedule', newValue)
+})
+
+// Format date for display
+const formattedTanggalPemeriksaan = computed(() => {
+  if (!props.tanggalPemeriksaan) return ''
+  try {
+    const date =
+      props.tanggalPemeriksaan instanceof Date
+        ? props.tanggalPemeriksaan
+        : parseISO(props.tanggalPemeriksaan)
+    return format(date, 'dd MMMM yyyy', { locale: localeID })
+  } catch {
+    return props.tanggalPemeriksaan.toString()
+  }
+})
+
+// Handle submit
+function handleSubmit() {
+  emit('submit', {
+    tanggalPemeriksaan: props.tanggalPemeriksaan
+      ? typeof props.tanggalPemeriksaan === 'string'
+        ? props.tanggalPemeriksaan
+        : format(props.tanggalPemeriksaan, 'yyyy-MM-dd')
+      : undefined,
+    jadwalTanggalPemeriksaan: jadwalTanggal.value,
+  })
+}
+
+// Table data for Jadwal Ruang Tindakan
+const scheduleData = [
+  {
+    no: 1,
+    namaJenis: 'Ruang Tindakan',
+    jenisPemeriksaan: 'KEMOTERAPI',
+  },
+]
+</script>
+
+<template>
+  <Dialog
+    :open="open"
+    size="lg"
+    title="Verifikasi Jadwal Pasien"
+    @update:open="$emit('update:open', $event)"
+  >
+    <div class="space-y-6 py-4">
+      <!-- Jadwal Ruang Tindakan Section -->
+      <div class="space-y-3">
+        <h4 class="text-base font-semibold">Jadwal Ruang Tindakan</h4>
+        <div class="overflow-hidden rounded-md border">
+          <Table>
+            <TableHeader class="bg-gray-50">
+              <TableRow>
+                <TableHead class="font-semibold">NO</TableHead>
+                <TableHead class="font-semibold">NAMA JENIS</TableHead>
+                <TableHead class="font-semibold">JENIS PEMERIKSAAN</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              <TableRow v-for="(row, index) in scheduleData" :key="index">
+                <TableCell>{{ row.no }}</TableCell>
+                <TableCell>{{ row.namaJenis }}</TableCell>
+                <TableCell>{{ row.jenisPemeriksaan }}</TableCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </div>
+      </div>
+
+      <!-- Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">Tanggal Pemeriksaan</label>
+        <Input
+          :model-value="formattedTanggalPemeriksaan"
+          :disabled="true"
+          class="bg-gray-100 text-gray-700"
+          readonly
+        />
+      </div>
+
+      <!-- Jadwal Tanggal Pemeriksaan Section -->
+      <div class="space-y-2">
+        <label class="text-sm font-medium">
+          Jadwal Tanggal Pemeriksaan
+          <span class="text-red-500">*</span>
+        </label>
+        <DatepickerSingle
+          v-model="jadwalTanggal"
+          placeholder="Pilih Jadwal"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <!-- Action Button -->
+      <div class="flex justify-end pt-4">
+        <Button
+          type="button"
+          :disabled="isLoading || !jadwalTanggal"
+          class="bg-gradient-to-r from-orange-500 to-orange-400 hover:from-orange-600 hover:to-orange-500 text-white shadow-md"
+          @click="handleSubmit"
+        >
+          <Icon name="i-lucide-calendar-check" class="mr-2 h-4 w-4" />
+          Simpan Jadwal
+        </Button>
+      </div>
+    </div>
+  </Dialog>
+</template>
+

app/components/app/chemotherapy/dropdown-action-process.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/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: 'Proses',
+    onClick: () => {
+      process()
+    },
+    icon: 'i-lucide-pencil',
+  },
+]
+
+function process() {
+  recId.value = props.rec.id || 0
+  recAction.value = 'Process'
+  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>

app/components/app/chemotherapy/entry-form.vue

@@ -0,0 +1,302 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Input from '~/components/pub/ui/input/Input.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { chemotherapySchema } from "~/schemas/chemotherapy.schema"
+
+interface Props {
+  values?: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+const emit = defineEmits<{
+  submit: [values: any, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(chemotherapySchema),
+  initialValues: {
+    namaPasien: '',
+    tanggalLahir: '',
+    noRM: '',
+    alamat: '',
+    beratBadan: '',
+    tinggiBadan: '',
+    diagnosa: '',
+    siklus: '',
+    periodeAwal: '',
+    periodeAkhir: '',
+    tanggalKemoterapi: '',
+    dokterKRJ: '',
+  },
+})
+
+// Define form fields
+const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
+const [tanggalLahir, tanggalLahirAttrs] = defineField('tanggalLahir')
+const [noRM, noRMAttrs] = defineField('noRM')
+const [alamat, alamatAttrs] = defineField('alamat')
+const [beratBadan, beratBadanAttrs] = defineField('beratBadan')
+const [tinggiBadan, tinggiBadanAttrs] = defineField('tinggiBadan')
+const [diagnosa, diagnosaAttrs] = defineField('diagnosa')
+const [siklus, siklusAttrs] = defineField('siklus')
+const [periodeAwal, periodeAwalAttrs] = defineField('periodeAwal')
+const [periodeAkhir, periodeAkhirAttrs] = defineField('periodeAkhir')
+const [tanggalKemoterapi, tanggalKemoterapiAttrs] = defineField('tanggalKemoterapi')
+const [dokterKRJ, dokterKRJAttrs] = defineField('dokterKRJ')
+
+// Set initial values if provided
+if (props.values) {
+  // Object.entries(props.values).forEach(([key, value]) => {
+  //   if (value !== undefined) {
+  //     const field = defineField(key)[0]
+  //     field.value = value
+  //   }
+  // })
+}
+
+const resetForm = () => {
+  // Object.keys(meta.value.initialValues).forEach((key) => {
+  //   const field = defineField(key)[0]
+  //   field.value = ''
+  // })
+}
+
+function onSubmitForm() {
+  const formData = {
+    namaPasien: namaPasien.value,
+    tanggalLahir: tanggalLahir.value,
+    noRM: noRM.value,
+    alamat: alamat.value,
+    beratBadan: beratBadan.value,
+    tinggiBadan: tinggiBadan.value,
+    diagnosa: diagnosa.value,
+    siklus: siklus.value,
+    periodeAwal: periodeAwal.value,
+    periodeAkhir: periodeAkhir.value,
+    tanggalKemoterapi: tanggalKemoterapi.value,
+    dokterKRJ: dokterKRJ.value,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form @submit.prevent>
+    <!-- Data Pasien Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Data Pasien</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.namaPasien">
+            <Input
+              v-model="namaPasien"
+              v-bind="namaPasienAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nama pasien"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Lahir</Label>
+          <Field :errMessage="errors.tanggalLahir">
+            <DatePicker
+              v-model="tanggalLahir"
+              v-bind="tanggalLahirAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal lahir"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.noRM">
+            <Input
+              v-model="noRM"
+              v-bind="noRMAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan nomor RM"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Alamat</Label>
+          <Field :errMessage="errors.alamat">
+            <Input
+              v-model="alamat"
+              v-bind="alamatAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan alamat"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Berat Badan</Label>
+          <Field :errMessage="errors.beratBadan">
+            <Input
+              v-model="beratBadan"
+              v-bind="beratBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan berat badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tinggi Badan</Label>
+          <Field :errMessage="errors.tinggiBadan">
+            <Input
+              v-model="tinggiBadan"
+              v-bind="tinggiBadanAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan tinggi badan"
+              type="number"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Diagnosa</Label>
+          <Field :errMessage="errors.diagnosa">
+            <Combobox
+              id="diagnose"
+              v-model="diagnosa"
+              v-bind="diagnosaAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Tentukan diagnosa pasien"
+              search-placeholder="Cari diagnosa"
+              empty-message="Diagnosa tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Protokol Kemoterapi Section -->
+    <div class="mb-6">
+      <h3 class="mb-4 text-lg font-semibold">Protokol Kemoterapi</h3>
+      <Block
+        labelSize="thin"
+        class="!mb-2.5 !pt-0 xl:!mb-3"
+      >
+        <Cell>
+          <Label height="compact">Siklus</Label>
+          <Field :errMessage="errors.siklus">
+            <Input
+              v-model="siklus"
+              v-bind="siklusAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Masukkan siklus"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Periode</Label>
+          <div class="flex items-center gap-4">
+            <Field
+              :errMessage="errors.periodeAwal"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAwal"
+                v-bind="periodeAwalAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Mulai Periode"
+              />
+            </Field>
+            <span>Sampai</span>
+            <Field
+              :errMessage="errors.periodeAkhir"
+              class="flex-1"
+            >
+              <DatepickerSingle
+                v-model="periodeAkhir"
+                v-bind="periodeAkhirAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Akhir Periode"
+              />
+            </Field>
+          </div>
+        </Cell>
+        <Cell>
+          <Label height="compact">Tanggal Kemoterapi</Label>
+          <Field :errMessage="errors.tanggalKemoterapi">
+            <DatepickerSingle
+              v-model="tanggalKemoterapi"
+              v-bind="tanggalKemoterapiAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal kemoterapi"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Dokter Ruang Tindakan</Label>
+          <Field :errMessage="errors.dokterKRJ">
+            <Combobox
+              id="doctor"
+              v-model="dokterKRJ"
+              v-bind="dokterKRJAttrs"
+              :items="items"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih dokter"
+              search-placeholder="Cari dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+      </Block>
+    </div>
+
+    <!-- Form Actions -->
+    <div class="flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>

app/components/app/chemotherapy/list-admin.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.admin'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>
+

app/components/app/chemotherapy/list-cfg.admin.ts

@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('./dropdown-action-process.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/chemotherapy/list-cfg.medicine.ts

@@ -0,0 +1,69 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 60 },
+    { width: 200 },
+    { width: 100 },
+    { width: 100 },
+    { width: 150 },
+    { width: 80 },
+    { width: 200 },
+    { width: 120 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'NAMA OBAT' },
+      { label: 'DOSIS' },
+      { label: 'SATUAN' },
+      { label: 'RUTE PEMBERIAN' },
+      { label: 'HARI' },
+      { label: 'CATATAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'namaObat',
+    'dosis',
+    'satuan',
+    'rute',
+    'hari',
+    'catatan',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+

app/components/app/chemotherapy/list-cfg.protocol.ts

@@ -0,0 +1,62 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO.' },
+      { label: 'TANGGAL' },
+      { label: 'SIKLUS' },
+      { label: 'PERIODE KEMOTERAPI' },
+      { label: 'KEHADIRAN' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'number',
+    'tanggal',
+    'siklus',
+    'periode',
+    'kehadiran',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/chemotherapy/list-cfg.ts

@@ -0,0 +1,80 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'JK' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK ASAL' },
+      { label: 'NAMA DOKTER' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'tanggal',
+    'noRm',
+    'noBill',
+    'jk',
+    'alamat',
+    'klinik',
+    'dokter',
+    'caraBayar',
+    'rujukan',
+    'ketRujukan',
+    'asal',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/chemotherapy/list-cfg.verification.ts

@@ -0,0 +1,78 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 150 },
+    { width: 180 },
+    { width: 150 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggalMasuk',
+    'pjBerkasRm',
+    'dokter',
+    'jenisRuangan',
+    'jenisTindakan',
+    'tanggalJadwalTindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+

app/components/app/chemotherapy/list-cfg.visit.ts

@@ -0,0 +1,99 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+
+type VisitDto = any
+
+const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const verifyButton = defineAsyncComponent(() => import('./verify-button.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 150 }, // TANGGAL MASUK
+    { width: 180 }, // PJ BERKAS RM
+    { width: 200 }, // DOKTER
+    { width: 150 }, // JENIS RUANGAN
+    { width: 150 }, // JENIS TINDAKAN
+    { width: 180 }, // TANGGAL JADWAL TINDAKAN
+    { width: 150 }, // STATUS
+    { width: 120 }, // AKSI
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL MASUK' },
+      { label: 'PJ BERKAS RM' },
+      { label: 'DOKTER' },
+      { label: 'JENIS RUANGAN' },
+      { label: 'JENIS TINDAKAN' },
+      { label: 'TANGGAL JADWAL TINDAKAN' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'tanggal_masuk',
+    'pj_berkas_rm',
+    'dokter',
+    'jenis_ruangan',
+    'jenis_tindakan',
+    'tanggal_jadwal_tindakan',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'nama', label: 'Nama' },
+  ],
+
+  parses: {
+    tanggal_masuk: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_masuk) return '-'
+      try {
+        const date = typeof recX.tanggal_masuk === 'string' ? parseISO(recX.tanggal_masuk) : recX.tanggal_masuk
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_masuk.toString()
+      }
+    },
+    tanggal_jadwal_tindakan: (rec: unknown): string => {
+      const recX = rec as VisitDto
+      if (!recX.tanggal_jadwal_tindakan) return '-'
+      try {
+        const date =
+          typeof recX.tanggal_jadwal_tindakan === 'string'
+            ? parseISO(recX.tanggal_jadwal_tindakan)
+            : recX.tanggal_jadwal_tindakan
+        return format(date, 'dd MMMM yyyy', { locale: localeID })
+      } catch {
+        return recX.tanggal_jadwal_tindakan.toString()
+      }
+    },
+  },
+
+  components: {
+    status(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: verifyButton,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}
+

app/components/app/chemotherapy/list-verification.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.verification'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>
+

app/components/app/chemotherapy/list.medicine.vue

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.medicine'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Obat Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Daftar obat-obatan yang digunakan dalam protokol kemoterapi.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Obat Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari obat..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+

app/components/app/chemotherapy/list.protocol.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Protokol Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Rangkaian prosedur kemoterapi yang terintegrasi dan konsisten.</p>
+        </div>
+        <button class="rounded bg-orange-500 px-3 py-2 text-white hover:bg-orange-600">
+          <i class="ri-add-line"></i>
+          Tambah Protokol Kemoterapi
+        </button>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari protokol..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>

app/components/app/chemotherapy/list.register.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.protocol'
+
+const searchQuery = ref('')
+
+function handleSearch(event: Event) {
+  const target = event.target as HTMLInputElement
+  searchQuery.value = target.value
+  // TODO: Implement search logic here
+  // You can emit an event to parent or filter data directly
+}
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Title and Search Section -->
+    <div class="flex flex-col items-start">
+      <div class="flex items-center justify-between w-full">
+        <div>
+          <h2 class="mb-1 text-xl font-semibold">Daftar Kunjungan Rawat Jalan Kemoterapi</h2>
+          <p class="mb-4 text-sm text-gray-500">Manajemen pendaftaran serta monitoring terapi pasien tindakan rawat jalan.</p>
+        </div>
+      </div>
+
+      <div class="relative mt-10 w-72">
+        <input
+          v-model="searchQuery"
+          type="text"
+          placeholder="Cari jadwal pemeriksaan..."
+          class="w-full rounded-md border px-4 py-2 focus:border-primary focus:outline-none focus:ring-2 focus:ring-primary/20"
+          @input="handleSearch"
+        />
+        <span class="absolute right-3 top-2.5 text-gray-400">
+          <i class="ri-search-line"></i>
+        </span>
+      </div>
+    </div>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>

app/components/app/chemotherapy/list.visit.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.visit'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  verify: [rec: any]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+
+// Provide verify handler to child components via provide/inject
+function handleVerify(rec: any) {
+  emit('verify', rec)
+}
+
+provide('verify-handler', handleVerify)
+</script>
+
+<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>
+

app/components/app/chemotherapy/list.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>

app/components/app/chemotherapy/sample.ts

@@ -0,0 +1,49 @@
+export type ChemotherapyData = {
+  id: number
+  tanggal: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ChemotherapyData[] = [
+  {
+    id: 1,
+    tanggal: '12 Agustus 2025',
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    tanggal: '11 Agustus 2025',
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]

app/components/app/chemotherapy/status-badge.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const statusMap: Record<string, { text: string; variant: 'default' | 'secondary' | 'fresh' | 'positive' | 'negative' | 'warning' | 'destructive' | 'outline' }> = {
+  'belum_terverifikasi': { text: 'Belum Terverifikasi', variant: 'secondary' },
+  'terverifikasi': { text: 'Terverifikasi', variant: 'positive' },
+  'ditolak': { text: 'Ditolak', variant: 'destructive' },
+}
+
+const statusInfo = computed(() => {
+  const status = props.rec.status?.toLowerCase() || props.rec.status_code?.toLowerCase() || 'belum_terverifikasi'
+  return statusMap[status] || statusMap['belum_terverifikasi']
+})
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Badge :variant="statusInfo.variant">
+      {{ statusInfo.text }}
+    </Badge>
+  </div>
+</template>
+

app/components/app/chemotherapy/verify-button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Button from '~/components/pub/ui/button/Button.vue'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+// Try to get verify handler from parent via inject
+const verifyHandler = inject<(rec: any) => void>('verify-handler', null)
+
+function handleVerify() {
+  if (verifyHandler) {
+    verifyHandler(props.rec)
+  }
+}
+</script>
+
+<template>
+  <div class="flex justify-center">
+    <Button
+      type="button"
+      variant="outline"
+      class="border-orange-500 bg-orange-50 text-orange-600 hover:bg-orange-100 hover:text-orange-700"
+      @click="handleVerify"
+    >
+      Verifikasi
+    </Button>
+  </div>
+</template>
+

app/components/app/consultation/entry.vue

@@ -35,24 +35,24 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     date: props.values.date || today.toISOString().slice(0, 10),
     problem: '',
-    dstUnit_id: 0,
-  } as Partial<ConsultationFormData>,
+    dstUnit_code: '',
+  } as ConsultationFormData,
 })
 
 const [date, dateAttrs] = defineField('date')
-const [unit_id, unitAttrs] = defineField('unit_id')
+const [unit_code, unitAttrs] = defineField('unit_code')
 const [problem, problemAttrs] = defineField('problem')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.date !== undefined) date.value = props.values.date.substring(0, 10)
-  if (props.values.dstUnit_id !== undefined) unit_id.value = props.values.dstUnit_id
+  if (props.values.dstUnit_code !== undefined) unit_code.value = props.values.dstUnit_code
   if (props.values.problem !== undefined) problem.value = props.values.problem
 }
 
 const resetForm = () => {
   date.value = date.value ?? today.toISOString().slice(0, 10)
-  unit_id.value = 0
+  unit_code.value = 0
   problem.value = ''
 }
 
@@ -62,7 +62,7 @@ function onSubmitForm(values: any) {
     encounter_id: props.encounter_id,
     date: date.value ? `${date.value}T00:00:00Z` : '',
     problem: problem.value || '',
-    dstUnit_id: unit_id.value || 0,
+    dstUnit_code: unit_code.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -89,18 +89,18 @@ function onCancelForm() {
       </DE.Cell>
       <DE.Cell>
         <DE.Label>Unit</DE.Label>
-        <DE.Field :errMessage="errors.unit_id">
-          {{ errors.unit_id }}
+        <DE.Field :errMessage="errors.unit_code">
+          {{ errors.unit_code }}
           <Select
-            id="strUnit_id"
-            v-model.number="unit_id"
+            id="strUnit_code"
+            v-model="unit_code"
             icon-name="i-lucide-chevron-down"
             placeholder="Pilih poliklinik tujuan"
             v-bind="unitAttrs"
             :items="props.units || []"
             :disabled="isLoading || isReadonly"
           />
-          <!-- <Input type="number" id="unit_id" v-model.number="unit_id" v-bind="unitAttrs" :disabled="isLoading || isReadonly" /> -->
+          <!-- <Input type="number" id="unit_code" v-model.number="unit_code" v-bind="unitAttrs" :disabled="isLoading || isReadonly" /> -->
         </DE.Field>
       </DE.Cell>
       <DE.Cell :colSpan="3">

app/components/app/control-letter/_common/select-date.vue

@@ -0,0 +1,116 @@
+<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
+}>()
+
+const {
+  fieldName = 'birthDate',
+  label = 'Tanggal Lahir',
+  placeholder = 'Pilih tanggal lahir',
+  errors,
+  class: containerClass,
+  fieldGroupClass,
+  labelClass,
+} = 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"
+    >
+      {{ 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="date"
+              min="1900-01-01"
+              v-bind="componentField"
+              :placeholder="placeholder"
+              @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>

app/components/app/control-letter/_common/select-dpjp.vue

@@ -0,0 +1,98 @@
+<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 { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+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
+
+const doctors = ref<Array<Item>>([])
+
+async function fetchDpjp(specialistId: string, subspecialistId: string) {
+  doctors.value = await getDoctorLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    includes: 'employee-person',
+    // "unit-id": parseInt(unitId),
+    "specialist-code": String(specialistId),
+    "subspecialist-code": String(subspecialistId),
+  }, true)
+}
+
+// const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+// function handleDpjpChange(selected: string) {
+//   selectedDpjpId.value = selected ?? null
+// }
+
+watch([ selectedSpecialistId, selectedSubSpecialistId], () => {
+  if (selectedSpecialistId.value && selectedSubSpecialistId.value) {
+    console.log(`Select Doctor`)
+    fetchDpjp( selectedSpecialistId.value, selectedSubSpecialistId.value)
+  }
+})
+</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="doctors"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              :is-disabled="selectedSubSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/control-letter/_common/select-specialist.vue

@@ -0,0 +1,98 @@
+<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 type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSpecialistLabelList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+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
+
+const specialists = ref<Array<Item>>([])
+
+async function fetchSpecialists(unitId: string) {
+  specialists.value = await getSpecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "unit-id": String(unitId),
+  }, true)
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+
+function handleSpecialistChange(selected: string) {
+  selectedSpecialistId.value = selected ?? null
+}
+
+watch([selectedUnitId], () => {
+  if (selectedUnitId.value) {
+    fetchSpecialists(selectedUnitId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Spesialis
+    </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="specialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSpecialistChange"
+              :is-disabled="selectedUnitId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>
+  </DE.Block>
+</template>

app/components/app/control-letter/_common/select-subspecialist.vue

@@ -0,0 +1,97 @@
+<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 type { Item } from '~/components/pub/my-ui/combobox'
+import { getValueLabelList as getSubspecialistLabelList } from '~/services/subspecialist.service'
+
+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
+
+const subspecialists = ref<Array<Item>>([])
+
+async function fetchSubSpecialists(specialistId: string) {
+  subspecialists.value = await getSubspecialistLabelList({
+    serviceType: 1,
+    serviceDate: new Date().toISOString().substring(0, 10),
+    specialistCode: 0,
+    "specialist-code": String(specialistId),
+  }, true)
+}
+
+const selectedSpecialistId = inject<Ref<string | null>>("selectedSpecialistId")!
+const selectedSubSpecialistId = inject<Ref<string | null>>("selectedSubSpecialistId")!
+
+function handleSubSpecialistChange(selected: string) {
+  selectedSubSpecialistId.value = selected ?? null
+}
+
+watch([selectedSpecialistId], () => {
+  if (selectedSpecialistId.value) {
+    fetchSubSpecialists(selectedSpecialistId.value)
+  }
+})
+</script>
+
+<template>
+  <DE.Block :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <div>
+      <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      Sub Spesialis
+    </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="subspecialists"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleSubSpecialistChange"
+              :is-disabled="selectedSpecialistId === null"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+    </div>    
+  </DE.Block>
+</template>

app/components/app/control-letter/_common/select-unit.vue

@@ -0,0 +1,85 @@
+<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 { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+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
+
+const units = ref<Array<Item>>([])
+
+async function fetchData() {
+  units.value = await getUnitLabelList({})
+}
+
+const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!
+function handleDataChange(selected: string) {
+  selectedUnitId.value = selected ?? null
+}
+
+onMounted(() => {
+  fetchData()
+})
+</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="units"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+              @update:model-value="handleDataChange"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/control-letter/entry-form.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import SelectDate from './_common/select-date.vue'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import SelectSpeciality from './_common/select-specialist.vue'
+import SelectDpjp from './_common/select-dpjp.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import SelectUnit from './_common/select-unit.vue'
+import SelectSubspecialist from './_common/select-subspecialist.vue'
+import SelectSpecialist from './_common/select-specialist.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+
+  selectedUnitId?: number | null
+  selectedSpecialistId?: number | null
+  selectedSubSpecialistId?: number | null
+}>()
+
+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 : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="sepStatus"
+        label="Status Sep"
+        placeholder="Status Sep"
+        :is-disabled="true"
+      />
+      <SelectDate
+        field-name="date"
+        label="Tanggal Rencana Kontrol"
+        :errors="errors"
+        is-required
+      />
+      <DE.Cell :col-span="2">
+        <DE.Block :col-count="4" :cell-flex="false">
+          <SelectUnit
+            field-name="unit_code"
+            label="Unit"
+            placeholder="Pilih Unit"
+            :errors="errors"
+            is-required
+          />
+          <SelectSpecialist
+            field-name="specialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectSubspecialist
+            field-name="subspecialist_code"
+            label="Spesialis/Sub Spesialis"
+            placeholder="Pilih Spesialis/Sub Spesialis"
+            :errors="errors"
+            is-required
+          />
+          <SelectDpjp
+            field-name="doctor_code"
+            label="DPJP"
+            placeholder="Pilih DPJP"
+            :errors="errors"
+            is-required
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>

app/components/app/control-letter/history-dialog.vue

@@ -0,0 +1,28 @@
+<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 './history-list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isHistoryDialogOpen`) as Ref<boolean>
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="Riwayat Surat Kontrol" size="full">   
+    <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+  </Dialog>
+</template>

app/components/app/control-letter/history-list.cfg.ts

@@ -0,0 +1,85 @@
+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/print-btn.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {width: 130}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'NAMA PASIEN' },
+      { label: 'NO.SURAT KONTROL' },
+      { label: 'NO.SEP' },
+      { label: 'TANGGAL RENCANA KONTROL' },
+      { label: 'TANGGAL TERBIT' },
+      { label: 'DPJP' },
+      { label: 'SPESIALIS' },
+      { label: 'SUBSPESIALIS' },
+      { label: 'TIPE RAWAT' },
+      { label: 'DIBUAT OLEH' },
+      { label: 'DIEDIT OLEH' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'date',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}

app/components/app/control-letter/list.cfg.ts

@@ -0,0 +1,64 @@
+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: 180}, {}, {}, {}, {}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'Tgl Rencana Kontrol' },
+      { label: 'Spesialis' },
+      { label: 'Sub Spesialis' },
+      { label: 'DPJP' },
+      { label: 'Status SEP' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'specialist.name', 'subspecialist.name', 'doctor.employee.person.name', 'sep_status', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}

app/components/app/control-letter/list.vue

@@ -0,0 +1,31 @@
+<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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>

app/components/app/control-letter/preview.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import { cn, } from '~/lib/utils'
+import type { ControlLetter } from '~/models/control-letter'
+
+// #region Props & Emits
+const props = defineProps<{
+  instance: ControlLetter | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'click', type: string): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// Computed addresses from nested data
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+function onClick(type: string) {
+  emit('click', type)
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <div :class="cn('min-h-[50vh] space-y-2',)">
+    <DetailRow label="Tgl Rencana Kontrol">{{ props.instance?.date ? new Date(props.instance?.date).toLocaleDateString('id-ID') : '-' }}</DetailRow>
+    <DetailRow label="Unit">{{ props.instance?.unit.name || '-' }}</DetailRow>
+    <DetailRow label="Spesialis">{{ props.instance?.specialist.name || '-' }}</DetailRow>
+    <DetailRow label="Sub Spesialis">{{ props.instance?.subspecialist.name || '-' }}</DetailRow>
+    <DetailRow label="DPJP">{{ props.instance?.doctor.employee.person.name || '-' }}</DetailRow>
+    <DetailRow label="Status SEP">{{ 'SEP INTERNAL' }}</DetailRow>
+  </div>
+  <div class="border-t-1 my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBaEd @click="onClick" />
+  </div>
+</template>
+
+<style scoped></style>

app/components/app/cprj/entry.vue

@@ -0,0 +1,146 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+const [subjective, subjectiveAttrs] = defineField('subjective')
+const [objective, objectiveAttrs] = defineField('objective')
+const [assesment, assesmentAttrs] = defineField('assesment')
+const [plan, planAttrs] = defineField('plan')
+const [review, reviewAttrs] = defineField('review')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div class="my-2">
+        <h1 class="font-semibold">Data Petugas</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>PPA</Label>
+            <Field>
+              <Input disabled />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Nama PPA</Label>
+            <Field>
+              <Input disabled />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Data S.O.A.P</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Subjektif</Label>
+            <Field>
+              <Textarea
+                v-model="subjective"
+                v-bind="subjectiveAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Objektif</Label>
+            <Field>
+              <Textarea
+                v-model="objective"
+                v-bind="objectiveAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Assesmen</Label>
+            <Field>
+              <Textarea
+                v-model="assesment"
+                v-bind="assesmentAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Plan</Label>
+            <Field>
+              <Textarea
+                v-model="plan"
+                v-bind="planAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Review</Label>
+            <Field>
+              <Textarea
+                v-model="review"
+                v-bind="reviewAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
+    </div>
+  </form>
+</template>

app/components/app/cprj/list.cfg.ts

@@ -0,0 +1,56 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { GeneralConsent } from '~/models/general-consent'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'PPA' },
+      { label: 'Hasil' },
+      { label: 'Review & Verifikasi' },
+      { label: 'Status' },
+      { label: 'Aksi' },
+    ],
+  ],
+  keys: ['date', 'ppa', 'result', 'review', 'status', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+    date(rec) {
+      const recX = rec as GeneralConsent
+      return recX.date?.substring(0, 10) || '-'
+    },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}

app/components/app/cprj/list.vue

@@ -0,0 +1,34 @@
+<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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>

app/components/app/device-order-item/entry-form.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// Pubs
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import * as CB from '~/components/pub/my-ui/combobox'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+// This scope
+import type { DeviceOrderItem } from '~/models/device-order-item';
+import type { Device } from '~/models/device';
+
+// Props
+const props = defineProps<{
+  data: DeviceOrderItem
+  devices: Device[]
+}>()
+
+// Refs
+const { devices } = toRefs(props)
+const deviceItems = ref<CB.Item[]>([])
+
+// Nav actions
+type ClickType = 'close' | 'save'
+
+// Emits
+const emit = defineEmits<{
+  close: [],
+  save: [data: DeviceOrderItem],
+  'update:searchText': [value: string]
+}>()
+
+// Reactivities
+watch(devices, (data) => {
+  deviceItems.value = CB.objectsToItems(data, 'code', 'name')
+})
+
+// Functions
+function searchDeviceText(value: string) {
+  emit('update:searchText', value)
+}
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="4" :cellFlex="false">
+    <DE.Cell :colSpan="4">
+      <DE.Label>Nama</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          v-model="data.device_code"
+          :items="deviceItems"
+          @update:searchText="searchDeviceText"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Jumlah</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" type="number" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>

app/components/app/device-order-item/list-entry.config.ts

@@ -0,0 +1,35 @@
+import { defineAsyncComponent } from 'vue'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, { width: 200 }, { width: 100 }],
+  headers: [[{ label: 'Nama' }, { label: 'Jumlah' }, { label: '' }]],
+  keys: ['device.name', 'quantity', 'action'],
+  delKeyNames: [
+    { key: 'name', label: 'Nama' },
+    { key: 'count', label: 'Jumlah' },
+  ],
+  skeletonSize: 10,
+  // funcParsed: {
+  //   parent: (rec: unknown): unknown => {
+  //     const recX = rec as SmallDetailDto
+  //     return recX.parent?.name || '-'
+  //   },
+  // },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  }
+}
+

app/components/app/device-order-item/list-entry.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+import { config } from './list-entry.config'
+import type { DeviceOrderItem } from '~/models/device-order-item';
+
+defineProps<{
+  data: DeviceOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  add: []
+}>()
+</script>
+
+<template>
+  <DataTable v-bind="config" :rows="data" class="border mb-3 2xl:mb-4" />
+  <div>
+    <Button @click="emit('add')">
+      <Icon name="i-lucide-plus" />
+      Tambah Item
+    </Button>
+  </div>
+</template>

app/components/app/device-order/confirmation-info.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DeviceOrder } from '~/models/device-order'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+defineProps<{
+  data: DeviceOrder | null | undefined
+}>()
+</script>
+<template>
+    <DE.Block mode="preview" label-size="small" class="!mb-0">
+      <DE.Cell>
+        <DE.Label>Tgl. Order</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.createdAt?.substring(0, 10) }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell>
+        <DE.Label>DPJP</DE.Label>
+        <DE.Colon />
+        <DE.Field>
+          {{ data?.doctor?.employee?.person?.name }}
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+</template>

app/components/app/device-order/entry-form.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { DeviceOrder } from '~/models/device-order';
+
+defineProps<{
+  data: DeviceOrder
+}>()
+</script>
+
+<template>
+  <DE.Block :col-count="2" mode="preview">
+    <DE.Cell>
+      <DE.Label>Tanggal</DE.Label>
+      <DE.Field>
+        {{ data?.createdAt?.substring(0, 10) }}
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        {{ data?.doctor?.employee?.person?.name }}
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+</template>

app/components/app/device-order/list.config.ts

@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { DeviceOrder } from '~/models/device-order'
+import type { DeviceOrderItem } from '~/models/device-order-item'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dsd.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { }, { }, { }, { width: 50 }],
+  headers: [[
+    { label: 'Tanggal' },
+    { label: 'DPJP' },
+    { label: 'Alat Kesehatan' },
+    { label: 'Status' },
+    { label: '' }]],
+  keys: ['createdAt', 'doctor.employee.person.name', 'items', 'status_code', 'action'],
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+  skeletonSize: 10,
+  htmls: {
+    items: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      if (recX.items?.length > 0) {
+        let output = '<table><tbody>'
+        recX.items.forEach((item: DeviceOrderItem) => {
+          output += '' +
+            '<tr>'+
+              `<td class="pe-10">${item.device?.name}</td>` +
+              '<td class="w-4">:</td>' +
+              `<td class="w-10">${item.quantity}</td>` +
+            '</tr>'
+        })
+        output += '</tbody></table>'
+        return output
+      } else {
+        return '-'
+      }
+    },
+  },
+  parses: {
+    createdAt: (rec: unknown): unknown => {
+      const recX = rec as DeviceOrder
+      return recX.createdAt ? new Date(recX.createdAt).toLocaleDateString() : '-'
+    },
+    // parent: (rec: unknown): unknown => {
+    //   const recX = rec as SmallDetailDto
+    //   return recX.parent?.name || '-'
+    // },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  }
+}
+

app/components/app/device-order/list.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list.config'
+
+defineProps<{
+  data: any[]
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/diagnose-src/list.vue

@@ -4,6 +4,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 
 // Types
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Config, } from '~/components/pub/my-ui/data-table'
 
 // Configs
 import { config } from './list-cfg'
@@ -11,9 +12,11 @@ import { config } from './list-cfg'
 interface Props {
   data: any[]
   paginationMeta: PaginationMeta
+  tableConfig?: Config
 }
-
-defineProps<Props>()
+const props = withDefaults(defineProps<Props>(), {
+  tableConfig: () => config,
+})
 
 const emit = defineEmits<{
   pageChange: [page: number]
@@ -27,7 +30,7 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
-      v-bind="config"
+      v-bind="props.tableConfig"
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />

app/components/app/division-position/entry-form.vue

@@ -40,7 +40,7 @@ const { defineField, errors, meta } = useForm({
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [division, divisionAttrs] = defineField('division_id')
+const [division, divisionAttrs] = defineField('division_code')
 const [employee, employeeAttrs] = defineField('employee_id')
 const [headStatus, headStatusAttrs] = defineField('headStatus')
 
@@ -62,8 +62,8 @@ const headStatusStr = computed<string>({
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.division_id !== undefined)
-    division.value = props.values.division_id ? Number(props.values.division_id) : null
+  if (props.values.division_code !== undefined)
+    division.value = props.values.division_code ? String(props.values.division_code) : null
   if (props.values.employee_id !== undefined)
     employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
   if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
@@ -72,7 +72,7 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  division.value = null
+  division.value = ''
   employee.value = null
   headStatus.value = false
 }
@@ -83,7 +83,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    division_id: division.value || null,
+    division_code: division.value || '',
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -130,7 +130,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Posisi Divisi</Label>
-        <Field :errMessage="errors.division_id">
+        <Field :errMessage="errors.division_code">
           <Combobox
             id="division"
             v-model="division"

app/components/app/division-position/entry.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genDivisionPosition } from '~/models/division-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisionId: string
+  employees: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DivisionPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail division
+    division_id: props.divisionId,
+
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>

app/components/app/division-position/list-cfg.ts

@@ -1,5 +1,6 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
 
 type SmallDetailDto = any
 
@@ -10,9 +11,9 @@ export const config: Config = {
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Divisi Induk' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Divisi ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
@@ -32,8 +33,13 @@ export const config: Config = {
       return recX.division?.name || '-'
     },
     employee: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.employee?.name || '-'
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
     },
     head: (rec: unknown): unknown => {
       const recX = rec as SmallDetailDto

app/components/app/division/detail/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Division } from '~/models/division'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  division: Division
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ division.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ division.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>

app/components/app/division/detail/list-cfg.ts

@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: '#' },
+      { label: 'Kode Jabatan' },
+      { label: 'Nama Jabatan' },
+      { label: 'Pengisi Jabatan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/division/detail/list.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-division',
+        })
+      "
+    />
+  </div>
+</template>

app/components/app/division/entry-form.vue

@@ -36,25 +36,25 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    parent_id: null,
+    parent_code: null,
   } as Partial<DivisionFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [parent, parentAttrs] = defineField('parent_id')
+const [parent, parentAttrs] = defineField('parent_code')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
-  if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
+  if (props.values.parent_code !== undefined) parent.value = String(props.values.parent_code)
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  parent.value = null
+  parent.value = ''
 }
 
 // Form submission handler
@@ -63,7 +63,7 @@ function onSubmitForm() {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-    parent_id: parent.value || null,
+    parent_code: parent.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -108,7 +108,7 @@ function onCancelForm() {
       </Cell>
       <Cell>
         <Label height="compact">Divisi Induk</Label>
-        <Field :errMessage="errors.parent_id">
+        <Field :errMessage="errors.parent_code">
           <TreeSelect
             id="parent"
             v-model="parent"

app/components/app/division/list-cfg.ts

@@ -3,17 +3,12 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [[
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Divisi Induk' },
-    { label: '' },
-  ]],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]],
 
   keys: ['code', 'name', 'parent', 'action'],
 
@@ -44,4 +39,4 @@ export const config: Config = {
   },
 
   htmls: {},
-}
+}

app/components/app/document-upload/_common/select-doc-type.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 { docTypeCode, supportingDocOpt, type docTypeCodeKey } from '~/lib/constants'
+import { getValueLabelList as getDoctorLabelList } from '~/services/doctor.service'
+import { getValueLabelList as getUnitLabelList } from '~/services/unit.service'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Item } from '~/components/pub/my-ui/combobox'
+
+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
+
+</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="supportingDocOpt"
+              :placeholder="placeholder"
+              search-placeholder="Cari..."
+              empty-message="Data tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/document-upload/entry-form.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import FileField from '~/components/pub/my-ui/form/file-field.vue'
+import SelectDocType from './_common/select-doc-type.vue'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  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 : {}"
+  >
+    <DE.Block :col-count="2" :cell-flex="false">
+      <InputBase
+        field-name="officer"
+        label="Petugas Upload"
+        placeholder="Masukkan Petugas Upload"
+        :is-disabled="true"
+      />
+      <DE.Cell :col-span="2">
+        <Separator class="w-full my-4"/>
+        <DE.Block :col-count="3" :cell-flex="false">
+          <InputBase
+            field-name="name"
+            label="Nama Dokumen"
+            placeholder="Maukkan Nama Dokumen"
+          />
+          <SelectDocType
+            field-name="type_code"
+            label="Tipe Dokumen"
+            placeholder="Pilih Jenis Dokumen"
+            :errors="errors"
+            is-required
+          />
+          <FileField
+            field-name="content"
+            label="Upload Dokumen"
+            placeholder="Unggah dokumen"
+            :errors="errors"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+        </DE.Block>
+      </DE.Cell>
+    </DE.Block>    
+  </Form>
+</template>

app/components/app/document-upload/list.cfg.ts

@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import { docTypeCode, docTypeLabel, type docTypeCodeKey } from '~/lib/constants'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dd.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {width: 50},],
+
+  headers: [
+    [
+      { label: 'Nama Dokumen' },
+      { label: 'Tipe Dokumen' },
+      { label: 'Petugas Upload' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['fileName', 'type_code', 'employee.name', 'action'],
+
+  delKeyNames: [
+
+  ],
+
+  parses: {
+    type_code: (v: unknown) => {
+      return docTypeLabel[v?.type_code as docTypeCodeKey]
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+  },
+}

app/components/app/document-upload/list.vue

@@ -0,0 +1,31 @@
+<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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<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>

app/components/app/employee/entry-form.vue

@@ -27,19 +27,31 @@ const data = computed({
           <FieldGroup :column="2">
             <Label>Status</Label>
             <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Position</Label>
             <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
             <Label>Divisi</Label>
             <Field>
-              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
+              <Select
+                v-model="data.type"
+                :items="items"
+                placeholder="Pilih jenis"
+              />
             </Field>
           </FieldGroup>
         </Block>

app/components/app/encounter/check-in-entry.vue

@@ -0,0 +1,114 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+// Components
+import type z from 'zod'
+import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { CheckInFormData } from '~/schemas/encounter.schema'
+import type { Encounter } from '~/models/encounter'
+import { now } from '@internationalized/date';
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  doctors: { value: string; label: string }[]
+  // employees: { value: string; label: string }[]
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  submit: [values: CheckInFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    responsible_doctor_id: 0,
+    adm_employee_id: 0,
+    registeredAt: props.values.values?.registeredAt || '',
+  } as Partial<CheckInFormData>,
+})
+
+const [responsible_doctor_code, responsible_doctor_codeAttrs] = defineField('responsible_doctor_code')
+// const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
+const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
+
+function submitForm() {
+  const formData: CheckInFormData = {
+    responsible_doctor_code: responsible_doctor_code.value,
+    // adm_employee_id: adm_employee_id.value,
+    registeredAt: registeredAt.value || '',
+  }
+  emit('submit', formData)
+}
+
+function setTime() {
+  const today = new Date()
+  registeredAt.value = today.toISOString().substring(0, 10) + ' ' + today.toLocaleTimeString('id-ID').substring(0, 5).replace('.', ':');
+}
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label>Dokter</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="responsible_doctor_code"
+          v-bind="responsible_doctor_codeAttrs"
+          :items="doctors"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih DPJP"
+          empty-message="DPJP tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <!-- <DE.Cell>
+      <DE.Label>PJ Berkas</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="adm_employee_id"
+          v-bind="adm_employee_idAttrs"
+          :items="employees"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Pilih petugas"
+          empty-message="Petugas tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell> -->
+    <DE.Cell>
+      <DE.Label>Waktu Masuk</DE.Label>
+      <DE.Field>
+        <Input
+            id="name"
+            v-model="registeredAt"
+            v-bind="registeredAtAttrs"
+            @click="setTime"
+            readonly
+          />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/app/encounter/check-in-view.vue

@@ -0,0 +1,61 @@
+<script lang="ts" setup>
+// Components
+import { LucidePen } from 'lucide-vue-next';
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Input from '~/components/pub/ui/input/Input.vue';
+import type { Encounter } from '~/models/encounter'
+
+interface Props {
+  encounter: Encounter
+  canUpdate?: boolean
+  isLoading?: boolean
+}
+const props = defineProps<Props>()
+const doctor = computed(() => {
+  return props.encounter.responsible_doctor?.employee?.person?.name ?? '-belum dipilih-'
+})
+const adm = ref('-belum dipilih-')
+
+const emit = defineEmits<{
+  edit: []
+}>()
+</script>
+
+<template>
+  <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt?.substring(0, 15).replace('T', ' ') || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.adm_employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Perawat</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.responsible_nurse?.employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Dokter</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div v-if="canUpdate" class="text-center">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/app/encounter/check-out-entry.vue

@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+//
+import { LucideCheck } from 'lucide-vue-next';
+import { useForm, useFieldArray } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+//
+import type z from 'zod'
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+import type {
+  CheckOutFormData,
+  CheckOutDeathFormData,
+  CheckOutInternalReferenceFormData
+} from '~/schemas/encounter.schema'
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { InternalReference, CreateDto as InternalReferenceCreateDto } from '~/models/internal-reference';
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  units: any[]
+  doctors: any[]
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  submit: [values: CheckOutFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    discharge_method_code: '',
+    discharge_date: '',
+    internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    deathCauses: [""],
+  } as Partial<CheckOutFormData>,
+})
+const [ discharge_method_code, discharge_method_codeAttrs ] = defineField('discharge_method_code')
+const [ discharge_date, discharge_dateAttrs ] = defineField('discharge_date') 
+const { fields, push, remove } = useFieldArray<InternalReferenceCreateDto>('internalReferences');
+
+function submitForm(values: any) {
+  if (['consul-poly', 'consul-executive'].includes(discharge_method_code.value)) {
+    const formData: CheckOutInternalReferenceFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      internalReferences: [{ unit_id: 0, doctor_id: 0 }],
+    }
+    emit('submit', formData)
+  } else if (discharge_method_code.value === 'death') {
+    const formData: CheckOutDeathFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+      death_cause: [""],
+    }
+    emit('submit', formData)
+  } else {
+    const formData: CheckOutFormData = {
+      discharge_method_code: discharge_method_code.value,
+      discharge_date: discharge_date.value,
+    }
+    emit('submit', formData)
+  }
+}
+
+const resetForm = () => {
+  discharge_method_code.value = ''
+  discharge_date.value = ''
+}
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label>Alasan Keluar</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="discharge_method_code"
+          v-bind="discharge_method_codeAttrs"
+          :items="dischargeMethodItems"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Cara Keluar"
+          search-placeholder="Cari Cara Keluar"
+          empty-message="Cara Keluar tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label>Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <Input
+          id="discharge_date"
+          v-model="discharge_date"
+          v-bind="discharge_dateAttrs"
+          :disabled="isLoading || isReadonly"
+        />
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == discharge_method_code">
+      <DE.Label>Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <Input />
+        </div>
+        <div>
+          <Button
+            v-if="!isReadonly"
+              type="button"
+              :disabled="isLoading || !meta.valid"
+              @click="submitForm"
+          >
+            Tambah Sebab meninggal
+          </Button>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(discharge_method_code)">
+      <DE.Label>Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in fields" :key="index">
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.unit_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Poly"
+                  search-placeholder="Cari Poly"
+                  empty-message="Poly tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+                <CB.Combobox
+                  id="dischargeMethodItems"
+                  :v-model.number="item.value.doctor_id"
+                  :items="units"
+                  :disabled="isLoading || isReadonly"
+                  placeholder="Pilih Dokter"
+                  search-placeholder="Pilih Dokter"
+                  empty-message="Dokter tidak ditemukan"
+                />
+              </Table.TableCell>
+              <Table.TableCell>
+                <Button variant="destructive" size="xs" @click="remove(index)" class="w-6 h-6 rounded-full">
+                  X
+                </Button>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+        <div>
+          <Button @click="push({ encounter_id: 0, unit_id: 0, doctor_id: 0 })">Tambah</Button>
+        </div>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button @click="submitForm">>
+      <LucideCheck />
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/app/encounter/check-out-view.vue

@@ -0,0 +1,89 @@
+<script lang="ts" setup>
+//
+import { LucidePen, LucideCheck } from 'lucide-vue-next';
+
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+
+import * as Table from '~/components/pub/ui/table'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Encounter } from '~/models/encounter';
+
+interface Props {
+  encounter: Encounter
+  canUpdate?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  edit: [],
+  finish: []
+}>()
+</script>
+
+<template>
+  <DE.Block :cellFlex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Alasan Keluar</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_method_code || '-belum ditentukan-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Keluar</DE.Label>
+      <DE.Cell>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date || '-belum ditentukan-' }}</div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="'death' == encounter.discharge_method_code">
+      <DE.Label class="font-semibold">Sebab Meninggal</DE.Label>
+      <DE.Cell>
+        <div class="mb-3">
+          <div class="py-2 border-b border-b-slate-300">{{ encounter.discharge_date }}</div>
+        </div>
+      </DE.Cell>
+    </DE.Cell>
+
+    <DE.Cell v-if="['consul-poly', 'consul-executive'].includes(encounter.discharge_method_code || '')">
+      <DE.Label class="font-semibold">Tujuan</DE.Label>
+      <DE.Field>
+        <Table.Table class="border mb-3">
+          <Table.TableHeader class="bg-neutral-100 dark:bg-slate-800">
+            <Table.TableCell class="text-center">Poly</Table.TableCell>
+            <Table.TableCell class="text-center">DPJP</Table.TableCell>
+            <Table.TableCell class="text-center !w-10"></Table.TableCell>
+          </Table.TableHeader>
+          <Table.TableBody>
+            <Table.TableRow v-for="(item, index) in encounter.internalReferences" :key="index">
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell class="!p-0.5">
+              </Table.TableCell>
+              <Table.TableCell>
+              </Table.TableCell>
+            </Table.TableRow>
+          </Table.TableBody>
+        </Table.Table>
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div v-if="canUpdate" class="text-center [&>*]:mx-1">
+    <Button @click="() => emit('edit')">
+      <LucidePen />
+      Edit
+    </Button>
+    <Button @click="() => emit('finish')">
+      <LucideCheck />
+      Selesai
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>

app/components/app/encounter/dropdown-action.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+import { ActionEvents } from '~/components/pub/my-ui/data/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 activeServicePosition = inject<Ref<string>>('activeServicePosition')! // previously: activePosition
+
+const activeKey = ref<string | null>(null)
+const linkItemsFiltered = ref<LinkItem[]>([])
+
+const baseLinkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    value: 'detail',
+    groups: ['medical', 'registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showDetail)
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    value: 'edit',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showEdit)
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Process',
+    value: 'process',
+    groups: ['medical'],
+    onClick: () => {
+      proceedItem(ActionEvents.showProcess)
+    },
+    icon: 'i-lucide-shuffle',
+  },
+  {
+    label: 'Print',
+    value: 'print',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showPrint)
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Batalkan',
+    value: 'cancel',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showCancel)
+    },
+    icon: 'i-lucide-circle-x',
+  },
+  {
+    label: 'Hapus',
+    value: 'remove',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showConfirmDelete)
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+const noneLinkItems: LinkItem[] = [
+   {
+    label: 'Nothing',
+    value: 'nothing',
+    icon: 'i-lucide-file',
+  },
+]
+
+linkItemsFiltered.value = [...baseLinkItems]
+
+function proceedItem(action: string) {
+  recId.value = props.rec.id || 0
+  recItem.value = props.rec
+  recAction.value = action
+}
+
+function getLinks() {
+  switch (activeServicePosition.value) {
+    case 'medical':
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('medical'))
+      break
+    case 'registration':
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('registration'))
+      break
+    default:
+      linkItemsFiltered.value = noneLinkItems
+      break
+  }
+}
+
+watch(activeServicePosition, () => {
+  getLinks()
+})
+
+onMounted(() => {
+  getLinks()
+})
+</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 linkItemsFiltered"
+            :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>

app/components/app/encounter/entry-form.vue.backup

@@ -0,0 +1,499 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import Select from '~/components/pub/ui/select/Select.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
+import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
+
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isCheckingSep?: boolean
+  doctor?: any[]
+  subSpecialist?: any[]
+  specialists?: TreeItem[]
+  payments: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
+}>()
+
+const emit = defineEmits<{
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
+}>()
+
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
+
+// Bind fields and extract attrs
+const [doctorId, doctorIdAttrs] = defineField('doctorId')
+const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentType, paymentTypeAttrs] = defineField('paymentType')
+const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
+const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
+const [sepType, sepTypeAttrs] = defineField('sepType')
+const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
+const [patientName, patientNameAttrs] = defineField('patientName')
+const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
+const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const patientId = ref('')
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+
+const doctorOpts = computed(() => {
+  // Add default option
+  const defaultOption = [{ label: 'Pilih', value: '' }]
+  // Add doctors from props
+  const doctors = props.doctor || []
+  return [...defaultOption, ...doctors]
+})
+
+const isJKNPayment = computed(() => paymentType.value === 'jkn')
+
+async function onFetchChildren(parentId: string): Promise<void> {
+  console.log('onFetchChildren', parentId)
+}
+
+// Watch specialist/subspecialist selection to fetch doctors
+watch(subSpecialistId, async (newValue) => {
+  if (newValue) {
+    console.log('SubSpecialist changed:', newValue)
+    // Reset doctor selection
+    doctorId.value = ''
+    // Emit fetch event to parent
+    emit('fetch', { subSpecialistId: newValue })
+  }
+})
+
+// Debounced SEP number watcher: emit change only after user stops typing
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+// Sync props to form fields
+watch(
+  () => props.objects,
+  (objects) => {
+    if (objects && Object.keys(objects).length > 0) {
+      patientName.value = objects?.patientName || ''
+      nationalIdentity.value = objects?.nationalIdentity || ''
+      medicalRecordNumber.value = objects?.medicalRecordNumber || ''
+      doctorId.value = objects?.doctorId || ''
+      subSpecialistId.value = objects?.subSpecialistId || ''
+      registerDate.value = objects?.registerDate || ''
+      paymentType.value = objects?.paymentType || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.patient,
+  (patient) => {
+    if (patient && Object.keys(patient).length > 0) {
+      patientId.value = patient?.id ? String(patient.id) : ''
+      patientName.value = patient?.person?.name || ''
+      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+      medicalRecordNumber.value = patient?.number || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+function onAddSep() {
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorId.value,
+    subSpecialistCode: subSpecialistId.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentType: paymentType.value,
+    sepType: sepType.value
+  }
+  emit('event', 'add-sep', formValues)
+}
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
+  emit('event', 'save', values)
+})
+
+// Expose submit method for parent component
+const formRef = ref<HTMLFormElement | null>(null)
+
+function submitForm() {
+  console.log('🔵 submitForm called, formRef:', formRef.value)
+  console.log('🔵 Form values:', {
+    doctorId: doctorId.value,
+    subSpecialistId: subSpecialistId.value,
+    registerDate: registerDate.value,
+    paymentType: paymentType.value,
+  })
+  console.log('🔵 Form errors:', errors.value)
+  console.log('🔵 Form meta:', meta.value)
+
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    console.log('🔵 Calling formRef.value.requestSubmit()')
+    formRef.value.requestSubmit()
+  } else {
+    console.warn('⚠️ formRef.value is null, cannot submit form')
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+
+    // Call onSubmit directly
+    console.log('🔵 Calling onSubmit with mock event')
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form
+      ref="formRef"
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
+      <!-- Data Pasien -->
+      <div class="flex flex-col gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="flex items-center gap-2">
+          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'search')"
+          >
+            <Icon
+              name="i-lucide-search"
+              class="h-5 w-5"
+            />
+            Cari Pasien
+          </Button>
+          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'add')"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="h-5 w-5"
+            />
+            Tambah Pasien Baru
+          </Button>
+        </div>
+      </div>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">Nama Pasien</Label>
+          <Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">NIK</Label>
+          <Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">No. RM</Label>
+          <Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.doctorId">
+            <Combobox
+              id="doctorId"
+              v-model="doctorId"
+              v-bind="doctorIdAttrs"
+              :items="doctorOpts"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.subSpecialistId">
+            <TreeSelect
+              id="subSpecialistId"
+              v-model="subSpecialistId"
+              v-bind="subSpecialistIdAttrs"
+              :data="specialists || []"
+              :on-fetch-children="onFetchChildren"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.paymentType">
+            <Select
+              id="paymentType"
+              v-model="paymentType"
+              v-bind="paymentTypeAttrs"
+              :items="payments"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isJKNPayment">
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <Cell>
+            <Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </Label>
+            <Field :errMessage="errors.sepNumber">
+              <div class="flex gap-2">
+                <Input
+                  id="sepNumber"
+                  v-model="sepNumber"
+                  v-bind="sepNumberAttrs"
+                  placeholder="Tambah SEP terlebih dahulu"
+                  class="flex-1"
+                  :disabled="isLoading || isReadonly"
+                />
+                <Button
+                  v-if="!isSepValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  :disabled="isCheckingSep || isLoading || isReadonly"
+                  @click="onAddSep"
+                >
+                  <Icon
+                    v-if="isCheckingSep"
+                    name="i-lucide-loader-2"
+                    class="h-4 w-4 animate-spin"
+                  />
+                   <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
+                </Button>
+                <Button
+                  v-else
+                  variant="outline"
+                  type="button"
+                  class="bg-green-500 text-white hover:bg-green-600"
+                  size="sm"
+                  disabled
+                >
+                  <Icon
+                    name="i-lucide-check"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </Field>
+          </Cell>
+
+          <FileUpload
+            field-name="sepFile"
+            label="Dokumen SEP"
+            placeholder="Unggah dokumen SEP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+
+          <FileUpload
+            field-name="sippFile"
+            label="Dokumen SIPP"
+            placeholder="Unggah dokumen SIPP"
+            :accept="['pdf', 'jpg', 'png']"
+            :max-size-mb="1"
+          />
+        </Block>
+      </template>
+    </form>
+  </div>
+</template>

app/components/app/encounter/filter-nav.vue

@@ -0,0 +1,134 @@
+<script setup lang="ts">
+import { Calendar as CalendarIcon, Filter as FilterIcon, Search } from 'lucide-vue-next'
+import { ref } from 'vue'
+import type { Ref } from 'vue'
+import type { DateRange } from 'radix-vue'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { cn } from '~/lib/utils'
+import type { RefExportNav, RefSearchNav } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  activePositon?: string
+  refSearchNav?: RefSearchNav
+  enableExport?: boolean
+  refExportNav?: RefExportNav
+  onFilterClick?: () => void
+  onExportPdf?: () => void
+  onExportExcel?: () => void
+  onExportCsv?: () => void
+}>()
+
+const emit = defineEmits<{
+  apply: [filters: { personName: string; startDate: string; endDate: string }]
+}>()
+
+const searchQuery = ref('')
+const isRoleRegistration = props.activePositon === 'registration'
+const isRoleMedical = props.activePositon === 'medical'
+
+const df = new DateFormatter('en-US', {
+  dateStyle: 'medium',
+})
+
+// Get current date
+const today = new Date()
+const todayCalendar = new CalendarDate(today.getFullYear(), today.getMonth() + 1, today.getDate())
+
+// Get date 1 month ago
+const oneMonthAgo = new Date(today)
+oneMonthAgo.setMonth(today.getMonth() - 1)
+const oneMonthAgoCalendar = new CalendarDate(
+  oneMonthAgo.getFullYear(),
+  oneMonthAgo.getMonth() + 1,
+  oneMonthAgo.getDate(),
+)
+
+const value = ref({
+  start: oneMonthAgoCalendar,
+  end: todayCalendar,
+}) as Ref<DateRange>
+
+function onFilterClick() {
+  const startDate = value.value.start ? value.value.start.toString() : ''
+  const endDate = value.value.end ? value.value.end.toString() : startDate
+
+  emit('apply', {
+    personName: searchQuery.value,
+    startDate,
+    endDate,
+  })
+}
+</script>
+
+<template>
+  <div class="relative w-64">
+    <Search class="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-gray-400" />
+    <Input
+      v-model="searchQuery"
+      type="text"
+      placeholder="Cari Nama /No.RM"
+      class="pl-9"
+    />
+  </div>
+
+  <Popover>
+    <PopoverTrigger as-child>
+      <Button
+        variant="outline"
+        :class="
+          cn('min-w-[240px] max-w-[320px] justify-start text-left font-normal', !value && 'text-muted-foreground')
+        "
+      >
+        <CalendarIcon class="mr-2 h-4 w-4" />
+        <template v-if="value.start">
+          <template v-if="value.end">
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }} -
+            {{ df.format(value.end.toDate(getLocalTimeZone())) }}
+          </template>
+
+          <template v-else>
+            {{ df.format(value.start.toDate(getLocalTimeZone())) }}
+          </template>
+        </template>
+        <template v-else>Pick a date</template>
+      </Button>
+    </PopoverTrigger>
+    <PopoverContent class="w-auto p-0">
+      <RangeCalendar
+        v-model="value"
+        initial-focus
+        :number-of-months="2"
+        @update:start-value="(startDate) => (value.start = startDate)"
+      />
+    </PopoverContent>
+  </Popover>
+
+  <Button
+    variant="outline"
+    class="border-orange-500 text-orange-600 hover:bg-orange-50"
+    @click="onFilterClick"
+  >
+    <FilterIcon class="mr-2 size-4" />
+    Filter
+  </Button>
+
+  <DropdownMenu v-show="props.enableExport && (isRoleRegistration || isRoleMedical)">
+    <DropdownMenuTrigger as-child>
+      <Button
+        variant="outline"
+        class="ml-auto border-orange-500 text-orange-600 hover:bg-orange-50"
+      >
+        <Icon
+          name="i-lucide-download"
+          class="h-4 w-4"
+        />
+        Ekspor
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="onExportPdf">Ekspor PDF</DropdownMenuItem>
+      <DropdownMenuItem @click="onExportCsv">Ekspor CSV</DropdownMenuItem>
+      <DropdownMenuItem @click="onExportExcel">Ekspor Excel</DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

app/components/app/encounter/history-button-menu.vue

@@ -0,0 +1,133 @@
+<script setup lang="ts">
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const route = useRoute()
+const router = useRouter()
+
+// Track active menu item from query param
+const activeMenu = computed(() => route.query.menu as string || '')
+
+interface ButtonItems {
+  label: string
+  icon: string
+  value: string
+  type: 'icon' | 'image'
+}
+
+const itemsOne: ButtonItems[] = [
+  {
+    label: 'Data Pendaftaran',
+    icon: 'i-lucide-file',
+    value: 'register',
+    type: 'icon',
+  },
+  {
+    label: 'Status Pembayaran',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'status',
+    type: 'icon',
+  },
+  {
+    label: 'Riwayat Pasien',
+    icon: 'i-lucide-history',
+    value: 'history',
+    type: 'icon',
+  },
+  {
+    label: 'Penunjang',
+    icon: 'i-lucide-library-big',
+    value: 'support',
+    type: 'icon',
+  },
+  {
+    label: 'Resep',
+    icon: 'i-lucide-pill',
+    value: 'receipt',
+    type: 'icon',
+  },
+  {
+    label: 'DPJP',
+    icon: 'i-lucide-stethoscope',
+    value: 'doctor',
+    type: 'icon',
+  },
+  {
+    label: 'I-Care BPJS',
+    icon: '/bpjs.png',
+    value: 'bpjs',
+    type: 'image',
+  },
+  {
+    label: 'File SEP',
+    icon: 'i-lucide-file',
+    value: 'sep',
+    type: 'icon',
+  },
+]
+
+const itemsTwo: ButtonItems[] = [
+  {
+    label: 'Tarif Tindakan',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list',
+    type: 'icon',
+  },
+  {
+    label: 'Tarif Tindakan Paket',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list-package',
+    type: 'icon',
+  },
+]
+
+function handleClick(value: string) {
+  router.replace({ path: route.path, query: { menu: value } })
+}
+</script>
+
+<template>
+  <div class="my-4">
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">History Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsOne"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon v-if="item.type === 'icon'"
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+      {{ item.label }}
+    </Button>
+  </div>
+  <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Billing Pasien:</h2>
+  <div class="flex flex-wrap gap-2 mb-2">
+    <Button
+      v-for="item in itemsTwo"
+      :key="item.value"
+      :class="[
+        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+        activeMenu === item.value
+          ? 'border-orange-300 bg-orange-400 text-white'
+          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+      ]"
+      @click="handleClick(item.value)"
+    >
+      <Icon
+        :name="item.icon"
+        class="h-4 w-4"
+      />
+      {{ item.label }}
+    </Button>
+  </div>
+  </div>
+</template>

app/components/app/encounter/list.cfg.ts

@@ -6,7 +6,7 @@ import { getAge } from '~/lib/date'
 
 type SmallDetailDto = Encounter
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
+const action = defineAsyncComponent(() => import('./dropdown-action.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const config: Config = {

app/components/app/encounter/list.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
 import { config } from './list.cfg'
 
 const props = defineProps<{
-  data: any[]
+  data: any[],
 }>()
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <DataTable
     v-bind="config"
-    :rows="data"
+    :rows="props.data"
   />
 </template>

app/components/app/encounter/patient-info-collapsible.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <!-- Data Pasien -->
+    <Accordion type="single" defaultValue="item-patient" collapsible>
+      <AccordionItem value="item-patient" class="border-none">
+        <AccordionTrigger class="focus:outline-none focus:ring-0">
+          <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+        </AccordionTrigger>
+        <AccordionContent>
+          <EncounterQuickInfoFull :data="props.data" :is-grid="true" />
+        </AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </div>
+</template>

app/components/app/encounter/patient-info.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+    <EncounterQuickInfoFull :data="props.data" :is-grid="false" />
+  </div>
+</template>

app/components/app/encounter/quick-info-full.vue

@@ -0,0 +1,247 @@
+<script setup lang="ts">
+// Helpers
+import { format, parseISO } from 'date-fns'
+import { id as localeID } from 'date-fns/locale'
+import { getAge } from '~/lib/date'
+import { cn } from "~/lib/utils"
+
+// Types
+import type { Encounter } from '~/models/encounter'
+import { paymentTypes } from '~/lib/constants.vclaim'
+
+const props = defineProps<{
+  data: Encounter
+  isGrid?: boolean
+}>()
+
+const isGrid = props.isGrid !== undefined ? props.isGrid : true
+
+// Address
+const address = computed(() => {
+  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
+    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
+  }
+  return '-'
+})
+
+// DPJP
+const dpjp = computed(() => {
+  if (props.data.responsible_doctor) {
+    const dp = props.data.responsible_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  } else if (props.data.appointment_doctor) {
+    const dp = props.data.appointment_doctor.employee.person
+    return `${dp.frontTitle || ''} ${dp.name || ''} ${dp.endTitle || ''}`.trim()
+  }
+  return '-'
+})
+
+// Tgl. Lahir dengan Umur
+const birthDateFormatted = computed(() => {
+  if (!props.data.patient.person.birthDate) {
+    return '-'
+  }
+  try {
+    const ageData = getAge(props.data.patient.person.birthDate)
+    const ageYears = ageData.extFormat.split(' ')[0] || '0'
+    return `${ageData.idFormat} (${ageYears} Tahun)`
+  } catch {
+    return '-'
+  }
+})
+
+// Tgl. Masuk RS dengan waktu
+const registeredDateFormatted = computed(() => {
+  const dateStr = props.data.registeredAt || props.data.visitDate
+  if (!dateStr) {
+    return '-'
+  }
+  try {
+    const date = parseISO(dateStr)
+    return format(date, 'dd MMMM yyyy HH:mm', { locale: localeID })
+  } catch {
+    return '-'
+  }
+})
+
+// Jns. Kelamin
+const genderLabel = computed(() => {
+  const code = props.data.patient.person.gender_code
+  if (!code) return '-'
+  // Map common gender codes
+  if (code === 'M' || code === 'male' || code.toLowerCase() === 'l') {
+    return 'Laki-laki'
+  } else if (code === 'F' || code === 'female' || code.toLowerCase() === 'p') {
+    return 'Perempuan'
+  }
+  return code
+})
+
+// Jns. Pembayaran
+const paymentTypeLabel = computed(() => {
+  const code = props.data.paymentMethod_code
+  if (!code) return '-'
+
+  // Map payment method codes
+  if (code === 'insurance') {
+    return 'JKN'
+  } else if (code === 'jkn') {
+    return 'JKN'
+  } else if (code === 'jkmm') {
+    return 'JKMM'
+  } else if (code === 'spm') {
+    return 'SPM'
+  } else if (code === 'pks') {
+    return 'PKS'
+  }
+
+  // Try to get from paymentTypes constant
+  if (paymentTypes[code]) {
+    return paymentTypes[code].split(' ')[0] // Get first part (e.g., "JKN" from "JKN (Jaminan...)")
+  }
+
+  return code
+})
+
+// No. Billing - try to get from trx_number or other billing fields
+const billingNumber = computed(() => {
+  // Check if encounter has payment data with trx_number
+  if ((props.data as any).trx_number) {
+    return (props.data as any).trx_number
+  }
+  // Check if encounter has payment relation
+  if ((props.data as any).payment?.trx_number) {
+    return (props.data as any).payment.trx_number
+  }
+  return '-'
+})
+
+// Nama Ruang - from unit name or room relation
+const roomName = computed(() => {
+  if (props.data.unit?.name) {
+    return props.data.unit.name
+  }
+  // Check if there's a room relation
+  if ((props.data as any).room?.name) {
+    return (props.data as any).room.name
+  }
+  return '-'
+})
+
+// No Bed - from bed relation or field
+const bedNumber = computed(() => {
+  // Check if encounter has bed data
+  if ((props.data as any).bed?.number) {
+    return (props.data as any).bed.number
+  }
+  if ((props.data as any).bed_number) {
+    return (props.data as any).bed_number
+  }
+  return '-'
+})
+</script>
+
+<template>
+  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Data Pasien:</h2>
+  <!-- 4 Column Grid Layout -->
+  <div :class="cn('grid grid-cols-4 gap-4', isGrid && 'sm:grid-cols-4')">
+    <!-- No. RM -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.number || '-' }}
+      </p>
+    </div>
+
+    <!-- Tgl. Lahir -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Lahir</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ birthDateFormatted }}
+      </p>
+    </div>
+
+    <!-- Jns. Pembayaran -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Cara Bayar</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ paymentTypeLabel }}
+      </p>
+    </div>
+
+    <!-- No Bed -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No Bed</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ bedNumber }}
+      </p>
+    </div>
+
+    <!-- Nama Pasien -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Bed</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ data.patient.person.name || '-' }}
+      </p>
+    </div>
+
+    <!-- Tgl. Masuk RS -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Tgl. Masuk RS</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ registeredDateFormatted }}
+      </p>
+    </div>
+
+    <!-- No. Billing -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. Billing</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ billingNumber }}
+      </p>
+    </div>
+
+    <!-- DPJP -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">DPJP</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ dpjp }}
+      </p>
+    </div>
+
+    <!-- Alamat -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Alamat</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ address }}
+      </p>
+    </div>
+
+    <!-- Jns. Kelamin -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Jns. Kelamin</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ genderLabel }}
+      </p>
+    </div>
+
+    <!-- Nama Ruang -->
+    <div class="flex gap-1">
+      <label class="w-20 2xl:w-24 flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">Nama Ruang</label>
+      <label class="w-2 flex-none">:</label>
+      <p class="flex-1 text-sm text-gray-900 dark:text-gray-100">
+        {{ roomName }}
+      </p>
+    </div>
+  </div>
+</template>

app/components/app/encounter/quick-info.vue

@@ -1,80 +1,124 @@
 <script setup lang="ts">
-import * as DE from '~/components/pub/my-ui/doc-entry';
-import type { Encounter } from '~/models/encounter';
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { genderCodes } from '~/const/key-val/person';
+import type { Encounter } from '~/models/encounter'
 
 const props = defineProps<{
   data: Encounter
 }>()
 
-let address = ''
-if (props.data.patient.person.addresses) {
-  address = props.data.patient.person.addresses.map(a => a.address).join(', ')
-}
+const addressText = computed(() => {
+  if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
+    return props.data.patient.person.addresses.map((a) => a.address).join(', ')
+  }
+  return '-'
+})
 
-let dpjp = '';
+const paymentMethodText = computed(() => {
+  const code = props.data.paymentMethod_code
+  if (!code) return '-'
+
+  // Map payment method codes
+  if (code === 'insurance') {
+    return 'JKN'
+  } else if (code === 'jkn') {
+    return 'JKN'
+  } else if (code === 'jkmm') {
+    return 'JKMM'
+  } else if (code === 'spm') {
+    return 'SPM'
+  } else if (code === 'pks') {
+    return 'PKS'
+  }
+})
+
+let dpjpText = ref('')
 if (props.data.responsible_doctor) {
   const dp = props.data.responsible_doctor.employee.person
-  dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
+  dpjpText.value = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
 } else if (props.data.appointment_doctor) {
-  dpjp = props.data.appointment_doctor.employee.person.name
+  dpjpText.value = props.data.appointment_doctor.employee.person.name
 }
-
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="w-full py-3 2xl:py-4 px-5">
     <!-- Data Pasien -->
-    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>
-
-    <div class="grid grid-cols-3" >
+    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
+      {{ data.patient.person.name }} - {{ data.patient.number }}
+    </h2>
+    <div class="grid grid-cols-3">
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
-            <DE.Label class="font-semibold">No. RM</DE.Label>
+            <DE.Label class="font-semibold">Tgl. Lahir</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.patient.person.birthDate?.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Jenis Kelamin</DE.Label>
+            <DE.Label class="font-semibold"><span class="hidden xl:inline">Jns.</span> Kelamin</DE.Label>
+            <DE.Colon />
             <DE.Field>
-              {{ data.patient.person.gender_code }}
+              {{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
             <DE.Label class="font-semibold">Alamat</DE.Label>
+            <DE.Colon />
             <DE.Field>
-              <div v-html="address"></div>
+              {{ addressText }}
             </DE.Field>
           </DE.Cell>
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
-            <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.visitDate.substring(0, 10) }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Klinik</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Poliklinik</DE.Label>
+            <DE.Colon />
             <DE.Field>
               {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">DPJP</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">Diagnosa</DE.Label>
+            <DE.Colon />
             <DE.Field>
-              {{ dpjp }}
+              {{ data.unit?.name }}
             </DE.Field>
           </DE.Cell>
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
-            <DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
+            <DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
+            <DE.Colon />
+            <DE.Field>
+              {{ dpjpText }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label position="dynamic" class="font-semibold">Pembayaran</DE.Label>
+            <DE.Colon />
+            <DE.Field>
+              {{ paymentMethodText }}
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label position="dynamic" class="!text-base !font-semibold 2xl:!text-lg">
+              Billing
+            </DE.Label>
+            <DE.Colon class="pt-1"/>
             <DE.Field class="text-base 2xl:text-lg">
               Rp. 000.000
               <!-- {{ data }} -->

app/components/app/encounter/quick-shortcut.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const route = useRoute()
+const router = useRouter()
+
+// Track active menu item from query param
+const activeMenu = computed(() => route.query.menu as string || '')
+
+interface ButtonItems {
+  label: string
+  icon: string
+  value: string
+  type: 'icon' | 'image'
+}
+
+const itemsOne: ButtonItems[] = [
+  {
+    label: 'Data Pendaftaran',
+    icon: 'i-lucide-file',
+    value: 'register',
+    type: 'icon',
+  },
+  {
+    label: 'Status Pembayaran',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'status',
+    type: 'icon',
+  },
+  {
+    label: 'Riwayat Pasien',
+    icon: 'i-lucide-history',
+    value: 'history',
+    type: 'icon',
+  },
+  {
+    label: 'Penunjang',
+    icon: 'i-lucide-library-big',
+    value: 'support',
+    type: 'icon',
+  },
+  {
+    label: 'Resep',
+    icon: 'i-lucide-pill',
+    value: 'receipt',
+    type: 'icon',
+  },
+  {
+    label: 'DPJP',
+    icon: 'i-lucide-stethoscope',
+    value: 'doctor',
+    type: 'icon',
+  },
+  {
+    label: 'I-Care BPJS',
+    icon: '/bpjs.png',
+    value: 'bpjs',
+    type: 'image',
+  },
+  {
+    label: 'File SEP',
+    icon: 'i-lucide-file',
+    value: 'sep',
+    type: 'icon',
+  },
+]
+
+const itemsTwo: ButtonItems[] = [
+  {
+    label: 'Tarif Tindakan',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list',
+    type: 'icon',
+  },
+  {
+    label: 'Tarif Tindakan Paket',
+    icon: 'i-lucide-banknote-arrow-down',
+    value: 'price-list-package',
+    type: 'icon',
+  },
+]
+
+function handleClick(value: string) {
+  router.replace({ path: route.path, query: { menu: value } })
+}
+</script>
+
+<template>
+  <div class="w-full py-3 2xl:py-4 px-5">
+    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">Akses Cepat:</h2>
+    <div class="flex flex-wrap gap-2 mb-2">
+      <Button
+        v-for="item in itemsOne"
+        :key="item.value"
+        :class="[
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+          activeMenu === item.value
+            ? 'border-orange-300 bg-orange-400 text-white'
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+        ]"
+        @click="handleClick(item.value)"
+      >
+        <Icon v-if="item.type === 'icon'"
+          :name="item.icon"
+          class="h-4 w-4"
+        />
+        <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+        {{ item.label }}
+      </Button>
+    </div>
+    <div class="flex flex-wrap gap-2 mb-2">
+      <Button
+        v-for="item in itemsTwo"
+        :key="item.value"
+        :class="[
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+          activeMenu === item.value
+            ? 'border-orange-300 bg-orange-400 text-white'
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+        ]"
+        @click="handleClick(item.value)"
+      >
+        <Icon
+          :name="item.icon"
+          class="h-4 w-4"
+        />
+        {{ item.label }}
+      </Button>
+    </div>
+  </div>
+</template>

app/components/app/encounter/status-badge.vue

@@ -12,7 +12,7 @@ const statusCodeColors: Record<string, Variants> = {
   review: 'fresh',
   process: 'fresh',
   done: 'positive',
-  canceled: 'destructive',
+  cancel: 'destructive',
   rejected: 'destructive',
   skiped: 'negative',
 }

app/components/app/encounter/status.vue

@@ -1,6 +0,0 @@
-<script setup lang="ts">
-</script>
-
-<template>
-  <div class="p-10 text-center">Hello World!!!</div>
-</template>

app/components/app/general-consent/entry.vue

@@ -0,0 +1,214 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+// import { ref, watch, inject } from 'vue'
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Define form fields
+const [relatives, relativesAttrs] = defineField('relatives')
+const [responsibleName, responsibleNameAttrs] = defineField('responsibleName')
+const [responsiblePhone, responsiblePhoneAttrs] = defineField('responsiblePhone')
+const [informant, informantAttrs] = defineField('informant')
+const [witness1, witness1Attrs] = defineField('witness1')
+const [witness2, witness2Attrs] = defineField('witness2')
+const [tanggal, tanggalAttrs] = defineField('tanggal')
+
+// Relatives list handling
+const addRelative = () => {
+  relatives.value = [...(relatives.value || []), { name: '', phone: '' }]
+}
+
+const removeRelative = (index: number) => {
+  relatives.value = relatives.value.filter((_: any, i: number) => i !== index)
+}
+
+const validate = async () => {
+  const result = await _validate()
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+defineExpose({ validate })
+
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <Block>
+        <Cell>
+          <Label dynamic>Tanggal</Label>
+          <Field>
+            <Input
+              v-model="tanggal"
+              v-bind="tanggalAttrs"
+              :disabled="props.isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2 flex items-center justify-between">
+        <h1 class="font-semibold">Anggota Keluarga</h1>
+        <Button
+          type="button"
+          @click="addRelative"
+        >
+          + Tambah
+        </Button>
+      </div>
+
+      <div
+        v-for="(item, idx) in relatives"
+        :key="idx"
+        class="my-2 rounded-md border border-slate-300 p-4"
+      >
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nama Anggota Keluarga</Label>
+            <Field>
+              <Input v-model="relatives[idx].name" />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>No. Hp Anggota Keluarga</Label>
+            <Field>
+              <Input v-model="relatives[idx].phone" />
+            </Field>
+          </Cell>
+        </Block>
+
+        <button
+          type="button"
+          class="mt-3 text-sm text-red-500"
+          @click="removeRelative(idx)"
+        >
+          Hapus
+        </button>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Responsible Section -->
+      <div class="my-2">
+        <h1 class="font-semibold">Penanggung Jawab</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nama Penanggung Jawab</Label>
+            <Field>
+              <Input
+                v-model="responsibleName"
+                v-bind="responsibleNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>No. Hp Penanggung Jawab</Label>
+            <Field>
+              <Input
+                v-model="responsiblePhone"
+                v-bind="responsiblePhoneAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Informant -->
+      <div class="my-2">
+        <h1 class="font-semibold">Pemberi Informasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Informant</Label>
+            <Field>
+              <Input
+                v-model="informant"
+                v-bind="informantAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <!-- Witnesses -->
+      <div class="my-2">
+        <h1 class="font-semibold">Saksi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Saksi 1</Label>
+            <Field>
+              <Input
+                v-model="witness1"
+                v-bind="witness1Attrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Saksi 2</Label>
+            <Field>
+              <Input
+                v-model="witness2"
+                v-bind="witness2Attrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

app/components/app/general-consent/list.cfg.ts

@@ -0,0 +1,82 @@
+import type { Config, RecComponent, RecStrFuncComponent, RecStrFuncUnknown } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { GeneralConsent } from '~/models/general-consent'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+export const config: Config = {
+  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'Anggota Keluarga' },
+      { label: 'Penanggung Jawab' },
+      { label: 'Pemberi Informasi' },
+      { label: 'Saksi 1' },
+      { label: 'Saksi 2' },
+      { label: '' },
+    ],
+  ],
+  keys: ['date', 'relatives', 'responsible', 'informant', 'witness1', 'witness2', 'action'],
+  delKeyNames: [
+    { key: 'data', label: 'Tanggal' },
+    { key: 'dstDoctor.name', label: 'Dokter' },
+  ],
+  parses: {
+    date(rec) {
+      const recX = rec as GeneralConsent
+      return recX?.createdAt?.substring(0, 10) || '-'
+    },
+    relatives(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.relatives?.join(', ') || '-'
+    },
+    responsible(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.responsible || '-'
+    },
+    informant(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.informant || '-'
+    },
+    witness1(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness1 || '-'
+    },
+    witness2(rec) {
+      const recX = rec as GeneralConsent
+      const parsed = JSON.parse(recX?.value || '{}')
+      return parsed?.witness2 || '-'
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  } as RecStrFuncComponent,
+  htmls: {} as RecStrFuncUnknown,
+}

app/components/app/general-consent/list.vue

@@ -0,0 +1,34 @@
+<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'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <!-- FIXME: pindahkan ke content/division/list.vue   -->
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>

app/components/app/icd/list-cfg.ts

@@ -7,94 +7,18 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, {}],
 
-  headers: [
-    [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
-      { label: 'Status' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama (FHIR)' }, { label: 'Nama (ID)' }, { label: '' }]],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['code', 'name', 'indName', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-    },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
-      }
-      return recX.identity_number
-    },
-    birth_date: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.birth_date == 'object' && recX.birth_date) {
-        return (recX.birth_date as Date).toLocaleDateString()
-      } else if (typeof recX.birth_date == 'string') {
-        return (recX.birth_date as string).substring(0, 10)
-      }
-      return recX.birth_date
-    },
-    patient_age: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.birth_date?.split('T')[0]
-    },
-    gender: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-        return 'Tidak Diketahui'
-      }
-      return recX.gender_code
-    },
-    education: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-        return recX.education_code
-      } else if (typeof recX.education_code) {
-        return recX.education_code
-      }
-      return '-'
-    },
-  },
+  parses: {},
 
   components: {
     action(rec, idx) {

app/components/app/icd/multiselect-picker.vue

@@ -2,7 +2,7 @@
 import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
-const modelValue = defineModel<any | null>()
+const modelValue = defineModel<any[]>('modelValue', { default: [] })
 </script>
 
 <template>

app/components/app/icd/preview.vue

@@ -1,8 +1,5 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { Trash2 } from 'lucide-vue-next'
-// import { Button } from '@/components/ui/button'
-// import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'
 
 interface Diagnosa {
   id: number
@@ -10,10 +7,10 @@ interface Diagnosa {
   icd: string
 }
 
-const list = ref<Diagnosa[]>([{ id: 1, diagnosa: 'Acute appendicitis', icd: 'K35' }])
+const modelValue = defineModel<Diagnosa[]>({ default: [] })
 
 function removeItem(id: number) {
-  list.value = list.value.filter((item) => item.id !== id)
+  modelValue.value = modelValue.value.filter((item) => item.id !== id)
 }
 </script>
 
@@ -30,12 +27,19 @@ function removeItem(id: number) {
       </TableHeader>
 
       <TableBody>
-        <TableRow v-for="(item, i) in list" :key="item.id">
+        <TableRow
+          v-for="(item, i) in modelValue"
+          :key="item.id"
+        >
           <TableCell class="text-center font-medium">{{ i + 1 }}</TableCell>
-          <TableCell>{{ item.diagnosa }}</TableCell>
-          <TableCell>{{ item.icd }}</TableCell>
+          <TableCell>{{ item.code }}</TableCell>
+          <TableCell>{{ item.name }}</TableCell>
           <TableCell class="text-center">
-            <Button variant="ghost" size="icon" @click="removeItem(item.id)">
+            <Button
+              variant="ghost"
+              size="icon"
+              @click="removeItem(item.id)"
+            >
               <Trash2 class="h-4 w-4 text-gray-500 hover:text-red-500" />
             </Button>
           </TableCell>

app/components/app/initial-nursing/entry-form.vue

@@ -0,0 +1,524 @@
+<script setup lang="ts">
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+
+interface Masalah {
+  id: number
+  date: string
+  diagnosa: string
+  finishDate: string
+  staff: string
+}
+
+const props = defineProps<{
+  modelValue: any
+  schema: z.ZodSchema<any>
+  excludeFields?: string[]
+  isReadonly?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: any): void
+  (e: 'submit', val: any): void
+}>()
+
+// Setup form
+const {
+  validate: _validate,
+  defineField,
+  handleSubmit,
+  errors,
+  values,
+} = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: props.modelValue,
+})
+
+watch(values, (val) => emit('update:modelValue', val), { deep: true })
+
+// Subjective
+const [primaryComplaint, primaryComplaintAttrs] = defineField('pri-complain')
+const [medType, medTypeAttrs] = defineField('med-type')
+const [medName, medNameAttrs] = defineField('med-name')
+const [medReaction, medReactionAttrs] = defineField('med-reaction')
+const [foodType, foodTypeAttrs] = defineField('food-type')
+const [foodName, foodNameAttrs] = defineField('food-name')
+const [foodReaction, foodReactionAttrs] = defineField('food-reaction')
+const [otherType, otherTypeAttrs] = defineField('other-type')
+const [otherName, otherNameAttrs] = defineField('other-name')
+const [otherReaction, otherReactionAttrs] = defineField('other-reaction')
+const [painAsst, painAsstAttrs] = defineField('pain-asst')
+const [painScale, painScaleAttrs] = defineField('pain-scale')
+const [painTime, painTimeAttrs] = defineField('pain-time')
+const [painDuration, painDurationAttrs] = defineField('pain-duration')
+const [painFreq, painFreqAttrs] = defineField('pain-freq')
+const [painLoc, painLocAttrs] = defineField('pain-loc')
+const [nutScreening, nutScreeningAttrs] = defineField('nut-screening')
+const [spiritualAsst, spiritualAsstAttrs] = defineField('spiritual-asst')
+
+// Objective
+const [generalCondition, generalConditionAttrs] = defineField('general-condition')
+const [supportExam, supportExamAttrs] = defineField('support-exam')
+const [riskFall, riskFallAttrs] = defineField('risk-fall')
+const [bracelet, braceletAttrs] = defineField('bracelet')
+const [braceletAlg, braceletAlgAttrs] = defineField('bracelet-alg')
+
+const validate = async () => {
+  const result = await _validate()
+  console.log('Component validate() result:', result)
+
+  return {
+    valid: true,
+    data: result.values,
+    errors: result.errors,
+  }
+}
+
+const form = ref<Masalah>({
+  id: 0,
+  date: '',
+  diagnosa: '',
+  finishDate: '',
+  staff: '',
+})
+
+const list = ref<Masalah[]>([])
+const isEditing = ref(false)
+const showForm = ref(false)
+
+const resetForm = () => {
+  form.value = {
+    id: 0,
+    date: '',
+    diagnosa: '',
+    finishDate: '',
+    staff: '',
+  }
+  isEditing.value = false
+}
+
+const openAdd = () => {
+  resetForm()
+  showForm.value = true
+}
+
+const submitForm = () => {
+  if (isEditing.value) {
+    const index = list.value.findIndex((v) => v.id === form.value.id)
+    if (index !== -1) list.value[index] = { ...form.value }
+  } else {
+    list.value.push({
+      ...form.value,
+      id: Date.now(),
+    })
+    emit('click', { type: 'add-problem', data: list.value })
+  }
+
+  showForm.value = false
+  resetForm()
+}
+
+const editItem = (item: Masalah) => {
+  form.value = { ...item }
+  isEditing.value = true
+  showForm.value = true
+}
+
+const deleteItem = (id: number) => {
+  list.value = list.value.filter((v) => v.id !== id)
+}
+
+defineExpose({ validate })
+const icdPreview = inject('icdPreview')
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">A. Data Subyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Pasien</Label>
+            <Field :errMessage="errors['pri-complain']">
+              <Textarea
+                v-model="primaryComplaint"
+                v-bind="primaryComplaintAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <span class="mb-4 text-sm font-semibold">Riwayat Alergi dan Reaksi Alergi</span>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>a. Obat</Label>
+            <Field>
+              <Input
+                v-model="medType"
+                v-bind="medTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="medName"
+                v-bind="medNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="medReaction"
+                v-bind="medReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>b. Makanan</Label>
+            <Field>
+              <Input
+                v-model="foodType"
+                v-bind="foodTypeAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="foodName"
+                v-bind="foodNameAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="foodReaction"
+                v-bind="foodReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block
+          :colCount="3"
+          class="mt-2"
+        >
+          <Cell>
+            <Label dynamic>c. Lain-Lain</Label>
+            <Field>
+              <Input
+                v-model="otherType"
+                v-bind="otherTypeAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Sebutkan</Label>
+            <Field>
+              <Input
+                v-model="otherName"
+                v-bind="otherNameAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Reaksi</Label>
+            <Field>
+              <Input
+                v-model="otherReaction"
+                v-bind="otherReactionAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <div class="my-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kajian Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painAsst"
+                v-bind="painAsstAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Skala Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painScale"
+                v-bind="painScaleAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Waktu Nyeri</Label>
+            <Field>
+              <Input
+                v-model="paintTime"
+                v-bind="painTimeAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Durasi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painDuration"
+                v-bind="painDurationAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Frequensi Nyeri</Label>
+            <Field>
+              <Input
+                v-model="painFreq"
+                v-bind="painFreqAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lokasi</Label>
+            <Field>
+              <Input
+                v-model="painLoc"
+                v-bind="painLocAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Skrining Nutrisi</Label>
+            <Field>
+              <Textarea
+                v-model="nutScreening"
+                v-bind="nutScreeningAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kajian Spiritual</Label>
+            <Field>
+              <Textarea
+                v-model="spiritualAsst"
+                v-bind="spiritualAsstAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">B. Data Obyektif</h1>
+      </div>
+
+      <div class="my-2">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Keadaan Umum</Label>
+            <Field>
+              <Textarea
+                v-model="generalCondition"
+                v-bind="generalConditionAttrs"
+              />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Pemeriksaan Penunjang</Label>
+            <Field>
+              <Input
+                v-model="supportExam"
+                v-bind="supportExamAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Risiko Jatuh</Label>
+            <Field>
+              <Input
+                v-model="riskFall"
+                v-bind="riskFallAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pemakaian Gelang</Label>
+            <Field>
+              <Input
+                v-model="bracelet"
+                v-bind="braceletAttrs"
+              />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Pasang Gelang Alergi</Label>
+            <Field>
+              <Input
+                v-model="braceletAlg"
+                v-bind="braceletAlgAttrs"
+              />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="my-3 font-semibold">C. Daftar Masalah Keperawatan</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="showForm = true"
+        >
+          + Tambah
+        </Button>
+      </div>
+
+      <div
+        v-if="showForm"
+        class="mb-4 space-y-3 rounded border bg-gray-50 p-4 shadow-sm"
+      >
+        <div>
+          <Label>Tanggal Muncul</Label>
+          <Input
+            v-model="form.date"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Diagnosa Keperawatan</Label>
+          <Input v-model="form.diagnosa" />
+        </div>
+
+        <div>
+          <Label class="font-medium">Tanggal Teratasi</Label>
+          <Input
+            v-model="form.finishDate"
+            type="date"
+          />
+        </div>
+
+        <div>
+          <Label class="font-medium">Nama Petugas</Label>
+          <Input v-model="form.staff" />
+        </div>
+
+        <div class="mt-2 flex gap-2">
+          <Button
+            @click="submitForm"
+            type="button"
+          >
+            {{ isEditing ? 'Update' : 'Tambah' }}
+          </Button>
+
+          <Button
+            @click="showForm = false"
+            type="button"
+            class="rounded bg-gray-300 px-3 py-1"
+          >
+            Batal
+          </Button>
+        </div>
+      </div>
+
+      <div class="mb-8">
+        <table class="w-full border text-sm">
+          <thead class="bg-gray-100">
+            <tr>
+              <th class="border p-2">Tanggal Muncul</th>
+              <th class="border p-2">Diagnosa</th>
+              <th class="border p-2">Tanggal Teratasi</th>
+              <th class="border p-2">Petugas</th>
+              <th class="w-28 border p-2">Aksi</th>
+            </tr>
+          </thead>
+
+          <tbody>
+            <tr
+              v-for="item in list"
+              :key="item.id"
+              class="border"
+            >
+              <td class="border p-2">{{ item.date }}</td>
+              <td class="border p-2">{{ item.diagnosa }}</td>
+              <td class="border p-2">{{ item.finishDate }}</td>
+              <td class="border p-2">{{ item.staff }}</td>
+              <td class="flex justify-center gap-4 border p-2">
+                <Icon
+                  @click="editItem(item)"
+                  name="i-lucide-pencil"
+                  class="h-4 w-4 cursor-pointer"
+                />
+
+                <Icon
+                  @click="deleteItem(item.id)"
+                  name="i-lucide-trash"
+                  class="h-4 w-4 cursor-pointer"
+                />
+              </td>
+            </tr>
+
+            <tr v-if="list.length === 0">
+              <td
+                colspan="5"
+                class="p-4 text-center text-gray-500"
+              >
+                Belum ada data
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </form>
+</template>

app/components/app/initial-nursing/list-cfg.ts

@@ -0,0 +1,73 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 50 }],
+
+  headers: [
+    [{ label: 'Tanggal' }, { label: 'Diagnosa' }, { label: 'Tanggal Selesai' }, { label: 'Staff' }, { label: 'Aksi' }],
+  ],
+
+  keys: ['date', 'diagnosa', 'finishDate', 'staff', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
+    },
+    main_complaint(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        console.log('parsed', parsed)
+        return parsed?.['prim-compl'] || '-'
+      } catch {
+        return '-'
+      }
+    },
+    encounter(rec: any) {
+      const data = rec?.encounter ?? {}
+      return data?.class_code || '-'
+    },
+    diagnose(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        const diagnose = parsed?.diagnose || []
+        return diagnose.map((d: any) => d.name).join(', ')
+      } catch {
+        return '-'
+      }
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}

app/components/app/initial-nursing/list.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { config } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="data"
+  />
+</template>

app/components/app/initial-nursing/preview.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+const props = defineProps<{
+  preview: any
+}>()
+</script>
+
+<template>
+  <div class="p-1 text-sm">
+    <div class="mb-4 flex gap-3">
+      <span class="w-40 font-semibold">Jam Tanggal</span>
+      <span>: {{ '-' }}</span>
+    </div>
+
+    <hr class="my-4" />
+
+    <h2 class="mb-3 font-semibold">A. Data Subyektif</h2>
+
+    <div class="space-y-3">
+      <div class="flex">
+        <span class="w-40 font-medium">Keluhan Pasien</span>
+        <span>: {{ preview?.['pri-complain'] || '-' }}</span>
+      </div>
+
+      <div>
+        <div class="flex">
+          <span class="w-40 font-medium">Riwayat Alergi dan Reaksi</span>
+          <span>:</span>
+        </div>
+
+        <div class="mt-1 space-y-1 pl-10">
+          <div class="flex">
+            <span class="w-28">a. Obat</span>
+            <span>: {{ preview?.['med-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['med-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['med-reaction'] || '-' }}</span>
+          </div>
+
+          <div class="flex">
+            <span class="w-28">b. Makanan</span>
+            <span>: {{ preview?.['food-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['food-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['food-reaction'] || '-' }}</span>
+          </div>
+
+          <div class="flex">
+            <span class="w-28">c. Lain-lain</span>
+            <span>: {{ preview?.['other-type'] || '-' }}</span>
+            <span class="ml-6 w-20">Sebutkan</span>
+            <span>: {{ preview?.['other-name'] || '-' }}</span>
+            <span class="ml-6 w-16">Reaksi</span>
+            <span>: {{ preview?.['other-reaction'] || '-' }}</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian Nyeri</span>
+        <span>: {{ preview?.['pain-asst'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40">Skala Nyeri</span>
+        <span>: {{ preview?.['pain-scale'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Waktu Nyeri</span>
+        <span>: {{ preview?.['pain-time'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Durasi Nyeri</span>
+        <span>: {{ preview?.['pain-duration'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Frekwensi Nyeri</span>
+        <span>: {{ preview?.['pain-freq'] || '-' }}</span>
+      </div>
+      <div class="flex">
+        <span class="w-40">Lokasi</span>
+        <span>: {{ preview?.['pain-loc'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Skrining Nutrisi</span>
+        <span>: {{ preview?.['nut-screening'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Kajian psiko-sosio-kultural-spiritual</span>
+        <span>: {{ preview?.['spiritual-asst'] || '-' }}</span>
+      </div>
+    </div>
+
+    <hr class="my-4" />
+
+    <h2 class="mb-3 font-semibold">B. Data Obyektif</h2>
+
+    <div class="space-y-3">
+      <div class="flex">
+        <span class="w-40 font-medium">Keadaan Umum</span>
+        <span>: {{ preview?.['general-condition'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemeriksaan Penunjang</span>
+        <span>: {{ preview?.['support-exam'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Risiko Jatuh</span>
+        <span>: {{ preview?.['risk-fall'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pemakaian Gelang Risiko Jatuh</span>
+        <span>: {{ preview?.['bracelet'] || '-' }}</span>
+      </div>
+
+      <div class="flex">
+        <span class="w-40 font-medium">Pasang Gelang Alergi</span>
+        <span>: {{ preview?.['bracelet-alg'] || '-' }}</span>
+      </div>
+    </div>
+  </div>
+</template>