Merge branch 'dev' into feat/resume-81

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/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({}, true)
+}
+
+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/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/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: number
+  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/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/encounter/entry-form.vue

@@ -1,354 +1,493 @@
 <script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
+// 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 { Form } from '~/components/pub/ui/form'
 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'
 
-import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
+// 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'
 
-interface DivisionFormData {
-  name: string
-  code: string
-  parentId: string
-}
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
 
 const props = defineProps<{
-  division: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-  }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
-  schema: any
-  initialValues?: Partial<DivisionFormData>
-  errors?: FormErrors
+  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<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-  click: (e: Event) => void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
 }>()
 
-const relationshipOpts = mapToComboboxOptList(relationshipCodes)
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
 
-const formSchema = toTypedSchema(props.schema)
+// 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('')
 
-// Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: DivisionFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
+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 })
   }
-  emit('submit', formData, resetForm)
-}
-const doctorOpts = ref([
-  { label: 'Pilih', value: null },
-  { label: 'Dr. A', value: 1 },
-])
-const paymentOpts = ref([
-  { label: 'Umum', value: 'umum' },
-  { label: 'BPJS', value: 'bpjs' },
-])
-const sepOpts = ref([
-  { label: 'Rujukan Internal', value: 'ri' },
-  { label: 'SEP Rujukan', value: 'sr' },
-])
+})
 
-// file refs untuk tombol "Pilih Berkas"
-const sepFileInput = ref<HTMLInputElement | null>(null)
-const sippFileInput = ref<HTMLInputElement | null>(null)
+// Watch SEP number changes to notify parent
+watch(sepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
 
-function pickSepFile() {
-  sepFileInput.value?.click()
-}
-function pickSippFile() {
-  sippFileInput.value?.click()
-}
+// 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 },
+)
 
-function onSepFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  // set ke form / emit / simpan di state sesuai form library-mu
-  console.log('sep file', f)
-}
-
-function onSippFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  console.log('sipp file', f)
-}
+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() {
-  // contoh handler tombol "+" di sebelah No. SEP
-  console.log('open modal tambah SEP')
+  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>
-  <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="flex flex-col justify-between">
-        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
-          Data Pasien
+  <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 class="flex gap-6 mb-2 2xl:mb-2">
-          <span>
-            Sudah pernah terdaftar sebagai pasien?
-            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'search')">
-              <Icon name="i-lucide-search" class="mr-1" /> Cari Pasien
-            </Button>
-          </span>
-          <span>
-            Belum pernah terdaftar sebagai pasien?
-            <Button class="bg-primary" size="sm" @click.prevent="emit('click', 'add')">
-              <Icon name="i-lucide-plus" class="mr-1" /> Tambah Pasien Baru
-            </Button>
-          </span>
-        </div>
-        <Block :colCount="3">
-          <Cell>
-            <Label label-for="patient_name">Nama Pasien</Label>
-            <Field id="patient_name" :errors="errors">
-              <FormField v-slot="{ componentField }" name="patient_name">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="patient_name"
-                      v-bind="componentField"
-                      disabled
-                      placeholder="Tambah data pasien terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- NIK -->
-          <Cell :cosSpan="3">
-            <Label label-for="nik">NIK</Label>
-            <Field id="nik" :errors="errors">
-              <FormField v-slot="{ componentField }" name="nik">
-                <FormItem>
-                  <FormControl>
-                    <Input id="nik" v-bind="componentField" disabled placeholder="Otomatis" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-          <Cell>
-            <Label label-for="rm">No. RM</Label>
-            <Field id="rm" :errors="errors">
-              <FormField v-slot="{ componentField }" name="rm">
-                <FormItem>
-                  <FormControl>
-                    <Input id="rm" v-bind="componentField" disabled placeholder="RM99222" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
-
-        <Separator class="my-4 2xl:my-5" />
-
-        <div class="mb-2 2xl:mb-3 text-sm 2xl:text-base font-semibold">
-          Data Kunjungan
-        </div>
-        <Block :colCount="3">
-          <!-- Dokter (Combobox) -->
-          <Cell :cosSpan="3">
-            <Label label-for="doctor_id">Dokter</Label>
-            <Field id="doctor_id" :errors="errors">
-              <FormField v-slot="{ componentField }" name="doctor_id">
-                <FormItem>
-                  <FormControl>
-                    <Combobox id="doctor_id" v-bind="componentField" :items="doctorOpts" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Tanggal Daftar (DatePicker) -->
-          <Cell :cosSpan="3">
-            <Label label-for="register_date">Tanggal Daftar</Label>
-            <Field id="register_date" :errors="errors">
-              <FormField v-slot="{ componentField }" name="register_date">
-                <FormItem>
-                  <FormControl>
-                    <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Jenis Pembayaran (Combobox) -->
-          <Cell :cosSpan="3">
-            <Label label-for="payment_type">Jenis Pembayaran</Label>
-            <Field id="payment_type" :errors="errors">
-              <FormField v-slot="{ componentField }" name="payment_type">
-                <FormItem>
-                  <FormControl>
-                    <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
-                    <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
-
-        <Block :colCount="3">
-          <Cell :cosSpan="3">
-            <Label label-for="bpjs_number">Kelompok Peserta</Label>
-            <Field id="bpjs_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="bpjs_number">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="bpjs_number"
-                      v-bind="componentField"
-                      placeholder="Pilih jenis pembayaran terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- No. Kartu BPJS -->
-          <Cell :cosSpan="3">
-            <Label label-for="bpjs_number">No. Kartu BPJS</Label>
-            <Field id="bpjs_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="bpjs_number">
-                <FormItem>
-                  <FormControl>
-                    <Input
-                      id="bpjs_number"
-                      v-bind="componentField"
-                      placeholder="Pilih jenis pembayaran terlebih dahulu"
-                    />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Jenis SEP -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_type">Jenis SEP</Label>
-            <Field id="sep_type" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_type">
-                <FormItem>
-                  <FormControl>
-                    <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
-
-        <Block :colCount="3">
-          <!-- No. SEP (input + tombol +) -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_number">No. SEP</Label>
-            <Field id="sep_number" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_number">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex gap-2">
-                      <Input
-                        id="sep_number"
-                        v-bind="componentField"
-                        placeholder="Tambah SEP terlebih dahulu"
-                        class="flex-1"
-                      />
-                      <Button class="bg-primary" size="sm" variant="outline" @click.prevent="onAddSep">+</Button>
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Dokumen SEP (file) -->
-          <Cell :cosSpan="3">
-            <Label label-for="sep_file">Dokumen SEP</Label>
-            <Field id="sep_file" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sep_file">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex items-center gap-2">
-                      <input ref="sepFileInput" type="file" class="hidden" @change="onSepFileChange" />
-                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSepFile"
-                        >Pilih Berkas</Button
-                      >
-                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SEP" />
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-
-          <!-- Dokumen SIPP (file) -->
-          <Cell :cosSpan="3" labelSize="thin">
-            <Label label-for="sipp_file">Dokumen SIPP</Label>
-            <Field id="sipp_file" :errors="errors">
-              <FormField v-slot="{ componentField }" name="sipp_file">
-                <FormItem>
-                  <FormControl>
-                    <div class="flex items-center gap-2">
-                      <input ref="sippFileInput" type="file" class="hidden" @change="onSippFileChange" />
-                      <Button class="bg-primary" size="sm" variant="ghost" @click.prevent="pickSippFile"
-                        >Pilih Berkas</Button
-                      >
-                      <Input readonly v-bind="componentField" placeholder="Unggah dokumen SIPP" />
-                    </div>
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </Cell>
-        </Block>
       </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"
+                  />
+                  <span v-else>+</span>
+                </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>
-  </Form>
+  </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/installation-position/entry-detail.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 { InstallationPositionFormData } from '~/schemas/installation-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 { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installationId: number
+  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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+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: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail installation
+    installation_id: props.installationId,
+
+    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-installation-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/installation-position/entry-form.vue

@@ -0,0 +1,207 @@
+<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 { InstallationPositionFormData } from '~/schemas/installation-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 { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installations: any[]
+  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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [installation, installationAttrs] = defineField('installation_id')
+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.installation_id !== undefined)
+    installation.value = props.values.installation_id ? Number(props.values.installation_id) : 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
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  installation.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    installation_id: installation.value || null,
+    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-installation-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Instalasi</Label>
+        <Field :errMessage="errors.installation_id">
+          <Combobox
+            id="installation"
+            v-model="installation"
+            v-bind="installationAttrs"
+            :items="installations"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Instalasi"
+            search-placeholder="Cari Instalasi"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</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/installation-position/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: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Instalasi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'installation.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/installation-position/list.vue

@@ -0,0 +1,39 @@
+<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/installation/detail/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Installation } from '~/models/installation'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  installation: Installation
+}>()
+
+// #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">{{ installation.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ installation.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>

app/components/app/installation/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 Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { 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/installation/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-installation',
+        })
+      "
+    />
+  </div>
+</template>

app/components/app/installation/list.cfg.ts

@@ -3,19 +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: 'Encounter Class' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]],
 
   keys: ['code', 'name', 'encounterClass_code', 'action'],
 

app/components/app/installation/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { config } from './list-cfg'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
 </template>

app/components/app/mcu-order-item/list-entry.cfg.ts

@@ -0,0 +1,43 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+      { label: 'Catatan' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrc.mcuSrcCategory.name', 'note'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+
+  components: {
+    note(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: input,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}

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

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { config } from './list-entry.cfg'
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  requestItem: []
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+    v-bind="config"
+    :rows="data"
+  />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('requestItem')">
+      <Icon name="i-lucide-plus" />
+      Pilih Item
+    </Button>
+  </div>
+</template>

app/components/app/mcu-order-item/list.cfg.ts

@@ -0,0 +1,18 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export const config: Config = {
+  cols: [{}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Jenis' },
+    ],
+  ],
+
+  keys: ['mcuSrc.name', 'mcuSrcCategory.name'],
+
+  delKeyNames: [
+    { key: 'mcuSrc.name', label: 'Nama' },
+  ],
+}

app/components/app/mcu-order-item/list.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { McuOrderItem } from '~/models/mcu-order-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: McuOrderItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border"
+    v-bind="config"
+    :rows="data"
+  />
+</template>

app/components/app/mcu-order/detail.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuOrder } from '~/models/mcu-order';
+
+const props = defineProps<{
+  data: McuOrder
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data?.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data?.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>

app/components/app/mcu-order/list-pk.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>

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

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { McuOrder } from '~/models/mcu-order';
+import McuOrderItems from '~/components/app/mcu-order-item/list.vue';
+
+interface Props {
+  data: McuOrder[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: McuOrder): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
+<template>
+  <div v-if="data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count=7 class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '........' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <McuOrderItems :data="item.items || []" @click="console.log('click')" class="!mb-5" />
+  </template>
+</template>

app/components/app/mcu-src-category/switcher.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { McuSrcCategory } from '~/models/mcu-src-category';
+
+const model = defineModel()
+const props = defineProps<{
+  data: McuSrcCategory[]
+}>()
+const emit = defineEmits<{
+  pick: [category: McuSrcCategory]
+}>()
+
+if (!model.value && props.data.length > 0) {
+  model.value = props.data[0]?.code
+}
+
+function pick(category: McuSrcCategory) {
+  model.value = category.code
+  emit('pick', category)
+}
+
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Kategori
+    </div>
+    <div class="-mx-1 [&_button]:mx-1 ">
+      <Button v-for="item, idx in data" :variant="model === item.code ? 'default' : 'outline'" @click="pick(item)">
+        {{ item.name }}
+      </Button>
+    </div>
+  </div>
+</template>

app/components/app/mcu-src/picker-accordion.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { McuSrc } from '~/models/mcu-src';
+import type { McuOrderItem } from '~/models/mcu-order-item';
+
+const data = defineModel({ type: Array as PropType<McuOrderItem[]>, required: true })
+defineProps<{
+  dataSource: McuSrc[]
+  // data: number[]
+}>()
+
+const emit = defineEmits<{
+  pick: [item: McuSrc]
+}>()
+
+function pick(item: McuSrc) {
+  emit('pick', item)
+  // if (data.value.some(e => e.mcuSrc_id === item.id)) {
+  //   const pos = data.value.map(e => e.mcuSrc_id).indexOf(item.id)
+  //   data.value.splice(pos, 1)
+  // } else {
+  //   data.value.push({
+  //     id: 0,
+  //     mcuOrder_id: 0,
+  //     mcuSrc_id: item.id,
+  //     createdAt: "",
+  //     updatedAt: "",
+  //   })
+  // }
+}
+</script>
+
+<template>
+  <div class="mb-5">
+    <div class="font-semibold mb-1.5">
+      Daftar Item
+    </div>
+    <div class="grid lg:grid-cols-4 2xl:grid-cols-5 gap-2 [&_button]:w-full">
+      <div v-for="item, idx in dataSource" :key="idx" class="flex gap-2">
+        <Button 
+          :variant="data.some(e => e.mcuSrc_id === item.id) ? 'default' : 'outline'"
+          type="button"
+          @click="pick(item)"
+        > 
+          {{ item.name }}
+        </Button>
+      </div>
+    </div>
+  </div>
+</template>

app/components/app/medicine-mix/list-entry.ts

@@ -0,0 +1,50 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Nama' },
+    { label: "Dosis" },
+    { label: 'Satuan' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['name', 'dose', 'uom.name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup_code || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action: (rec: unknown, idx: number): RecComponent => {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}

app/components/app/medicine-mix/list-entry.vue

@@ -0,0 +1,35 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+
+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">
+    <PubBaseDataTable
+      :rows="data"
+      :cols="cols"
+      :header="header"
+      :keys="keys"
+      :func-parsed="funcParsed"
+      :func-html="funcHtml"
+      :func-component="funcComponent"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

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

@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export interface PatientData {
+  id: string
+  identity: string
+  number: string
+  bpjs: string
+  name: string
+}
+
+export const config: Config = {
+  cols: [{ width: 50 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+
+  headers: [
+    [{ label: '' }, { label: 'NO. KTP' }, { label: 'NO. RM' }, { label: 'NO. KARTU BPJS' }, { label: 'NAMA PASIEN' }],
+  ],
+
+  keys: ['check', 'identity', 'number', 'bpjs', 'name'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...rec as object, menu: 'patient' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/patient/list-patient.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PatientData } from './list-cfg.patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg.patient'
+
+const props = defineProps<{
+  data: PatientData[]
+  selected?: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="config"
+    :rows="props.data"
+    :selected="props.selected"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>

app/components/app/patient/view-patient.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { ref, provide, watch } from 'vue'
+
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import ListPatient from './list-patient.vue'
+
+// Types
+import type { PatientData } from './list-cfg.patient'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<PatientData>
+  selected: string
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'fetch', value: any): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const debouncedSearch = refDebounced(search, 500) // 500ms debounce
+
+// Provide for radio selection - use selected prop directly
+const recSelectId = ref<number>(Number(props.selected) || 0)
+const recSelectMenu = ref<string>('patient')
+
+provide('rec_select_id', recSelectId)
+provide('rec_select_menu', recSelectMenu)
+
+function saveSelection() {
+  // Validate that a patient is selected
+  if (!props.selected || props.selected === '') {
+    console.warn('No patient selected')
+    return
+  }
+  emit('save')
+  emit('update:open', false)
+}
+
+function handlePageChange(page: number) {
+  emit('fetch', { 'page-number': page })
+}
+
+// Watch for changes in recSelectId and emit update:selected
+watch(recSelectId, (newValue) => {
+  if (newValue > 0) {
+    emit('update:selected', String(newValue))
+  }
+})
+
+// Watch for changes in selected prop
+watch(() => props.selected, (newValue) => {
+  recSelectId.value = Number(newValue) || 0
+})
+
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    emit('fetch', { search: newValue })
+  }
+})
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="max-w-[50%]">
+        <Input
+          v-model="search"
+          placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu"
+        />
+      </div>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListPatient 
+          :data="patients" 
+          :selected="props.selected"
+          :pagination-meta="paginationMeta" 
+          @page-change="handlePageChange"
+        />
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button
+          variant="default"
+          class="h-[40px] min-w-[120px] text-white"
+          @click="saveSelection"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/app/prescription-item/list-entry.vue

@@ -1,14 +1,30 @@
 <script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
 import { config } from './list-entry.cfg'
 
 defineProps<{
-  data: any[]
+  data: PrescriptionItem[]
 }>()
+
+const emit = defineEmits<{
+  add: [mode: 'mix' | 'non-mix']
+}>()
+
 </script>
 
 <template>
-  <PubMyUiDataTable
+  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />
+  <div class="-mx-1 [&_button]:mx-1">
+    <Button @click="emit('add', 'mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+    <Button @click="emit('add', 'non-mix')">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+  </div>
 </template>

app/components/app/prescription-item/list.cfg.ts

@@ -0,0 +1,41 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+}

app/components/app/prescription-item/list.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { PrescriptionItem } from '~/models/prescription-item';
+import { config } from './list.cfg'
+
+defineProps<{
+  data: PrescriptionItem[]
+}>()
+
+const emit = defineEmits<{
+  tambah: [mode: string]
+}>()
+
+</script>
+
+<template>
+  <PubMyUiDataTable class="border mb-2 2xl:mb-3"
+    v-bind="config"
+    :rows="data"
+  />
+</template>

app/components/app/prescription-item/mix-entry.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { LucidePlus } from 'lucide-vue-next';
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue';
+import * as Table from '~/components/pub/ui/table'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+
+import { genBase } from '~/models/_base';
+import { genMedicine } from '~/models/medicine';
+import type { MedicinemixItem } from '~/models/medicinemix-item';
+import type { PrescriptionItem } from '~/models/prescription-item';
+
+const props = defineProps<{
+  data: PrescriptionItem
+  items: MedicinemixItem[]
+}>()
+
+type ClickType = 'close' | 'save'
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem, items: MedicinemixItem[]],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data, props.items)
+  }
+}
+
+function addItem() {
+  props.items.push({
+    ...genBase(),
+    medicineMix_id: 0,
+    medicine_id: 0,
+    medicine: genMedicine(),
+    dose: 0,
+    uom_code: '',
+  })
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Frequensi</DE.Label>
+        <DE.Field><Input v-model="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Dosis</DE.Label>
+        <DE.Field><Input v-model="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Total</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-sm 2xl:text-base font-semibold !mb-3">Daftar Obat</div>
+  <Table.Table class="border mb-3 2xl:mb-4">
+    <Table.TableHeader class="[&_th]:h-8 [&_th]:2xl:h-9">
+      <Table.TableRow>
+        <Table.TableHead>Nama</Table.TableHead>
+        <Table.TableHead class="w-24">Dosis</Table.TableHead>
+        <Table.TableHead class="w-24">Satuan</Table.TableHead>
+        <Table.TableHead class="w-20">..</Table.TableHead>
+      </Table.TableRow>
+    </Table.TableHeader>
+    <Table.TableBody class="[&_td]:p-0.6">
+      <Table.TableRow v-if="items.length > 0" v-for="item in items">
+        <Table.TableCell>
+          <Input v-model="item.medicine.name" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input v-model="item.dose" />
+        </Table.TableCell>
+        <Table.TableCell>
+          <Input />
+        </Table.TableCell>
+      </Table.TableRow>
+      <Table.TableRow v-else>
+        <Table.TableCell colspan="4" class="!p-5 text-center">
+          Belum ada data
+        </Table.TableCell>
+      </Table.TableRow>
+    </Table.TableBody>
+  </Table.Table>
+  <div>
+    <Button @click="addItem">
+      <LucidePlus />
+      Tambah
+    </Button>
+  </div>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>

app/components/app/prescription-item/non-mix-entry.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import Nav from '~/components/pub/my-ui/nav-footer/cl-sa.vue'
+
+import { bigTimeUnitCodes } from '~/lib/constants'
+
+import type { PrescriptionItem } from '~/models/prescription-item'
+
+const props = defineProps<{
+  data: PrescriptionItem
+}>()
+
+type ClickType = 'close' | 'save'
+type Item = {
+  value: string
+  label: string
+}
+
+const bigTimeUnitCodeItems: Item[] = []
+
+if(!props.data.intervalUnit_code) {
+  props.data.intervalUnit_code = 'day'
+}
+
+Object.keys(bigTimeUnitCodes).forEach((key) => {
+  bigTimeUnitCodeItems.push({
+    value: key,
+    label: bigTimeUnitCodes[key] || '',
+  })
+})
+
+
+const emit = defineEmits<{
+  close: [],
+  save: [data: PrescriptionItem],
+}>()
+
+function navClick(type: ClickType) {
+  if (type === 'close') {
+    emit('close')
+  } else if (type === 'save') {
+    emit('save', props.data)
+  }
+}
+</script>
+
+<template>
+  <DE.Block :colCount="5" :cellFlex="false">
+    <DE.Cell :colSpan="5">
+        <DE.Label>Nama</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.name" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Frequensi</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.frequency" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Dosis</DE.Label>
+      <DE.Field><Input type="number" v-model.number="data.dose" /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+        <DE.Label>Sediaan</DE.Label>
+        <DE.Field><Input :value="data.medicineMix?.uom_code" readonly /></DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Interval</DE.Label>
+      <DE.Field>
+        <Select
+          v-model="data.intervalUnit_code"
+          :items="bigTimeUnitCodeItems"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Total</DE.Label>
+      <DE.Field>
+        <Input v-model="data.quantity" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell :colSpan="5">
+        <DE.Label>Cara Pakai</DE.Label>
+        <DE.Field><Input /></DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <Separator class="my-5" />
+  <div class="flex justify-center">
+    <Nav @click="navClick" />
+  </div>
+</template>

app/components/app/prescription/detail.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Prescription } from '~/models/prescription'
+
+const props = defineProps<{
+  data: Prescription
+}>()
+
+</script>
+
+<template>
+    <div class="text-sm 2xl:text-base font-semibold mb-3">
+      Order {{ data.issuedAt?.substring(0, 10) || data.createdAt?.substring(0, 10) }} - {{ data.status_code }}
+    </div>
+    <div class="max-w-[1000px]">
+      <DE.Block mode="preview" :col-count=5 class="!mb-3">
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">DPJP</DE.Label>
+          <DE.Field>
+            {{  data.doctor?.employee?.person?.name || '.........' }}
+          </DE.Field>
+        </DE.Cell>
+        <DE.Cell></DE.Cell>
+        <DE.Cell :col-span="2">
+          <DE.Label class="font-semibold">PPDS</DE.Label>
+          <DE.Field>
+            ...........
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+</template>

app/components/app/prescription/entry.vue

@@ -1,32 +1,36 @@
 <template>
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div class="md:pe-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
+    <div class="md:ps-10">
+      <PubMyUiDocEntryBlock>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">DPJP</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+        <PubMyUiDocEntryCell>
+          <PubMyUiDocEntryLabel position="dynamic">PPDS</PubMyUiDocEntryLabel>
+          <PubMyUiDocEntryField>
+              <Input />
+          </PubMyUiDocEntryField>
+        </PubMyUiDocEntryCell>
+      </PubMyUiDocEntryBlock>
+    </div>
   </div>
 </template>

app/components/app/prescription/list-entry.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import type { Prescription } from '~/models/prescription'
+
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import PrescriptionItemList from '~/components/app/prescription-item/list-entry.vue';
+
+interface Props {
+  data: Prescription[]
+  isLoading: boolean
+  paginationMeta?: PaginationMeta
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div v-if="isLoading" class="p-10 text-center">
+    Memuat data..
+  </div>
+  <div v-else-if="data && data.length == 0" class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <!-- <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div> -->
+  </div>
+  <div v-else v-for="(item, idx) in data">
+    <Separator class="my-5" />
+    <div class="md:grid md:grid-cols-2 font-semibold">
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>Order #{{ data.length - idx }}</DE.Label>
+            <DE.Field>
+              2025-01-01
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>Status</DE.Label>
+            <DE.Field>
+                {{ item.status_code }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+      <div>
+        <DE.Block mode="preview">
+          <DE.Cell>
+            <DE.Label>DPJP</DE.Label>
+            <DE.Field>
+                {{ item.doctor?.employee?.person.name }} 
+            </DE.Field>
+          </DE.Cell>
+          <DE.Cell>
+            <DE.Label>PPDS</DE.Label>
+            <DE.Field>
+                {{ item.specialistIntern?.person.name }}
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </div>
+    </div>
+    <PrescriptionItemList :data="item.items || []" />
+  </div>
+</template>
+
+
+<!-- <Separator class="my-4 xl:my-5" />
+<AppPrescriptionEntry />
+<div class="flex content-center mb-3">
+  <div class="me-auto pt-2">
+    <div class="font-semibold md:text-sm xl:text-base">Daftar Obat</div>
+  </div>
+  <div>
+    <Button @click="addMedicine" class="me-2">
+      <Icon name="i-lucide-plus" />
+      Tambah Non Racikan
+    </Button>
+    <Button @click="addMedicineMix">
+      <Icon name="i-lucide-plus" />
+      Tambah Racikan
+    </Button>
+  </div>
+</div>
+<PrescriptionItemListEntry :data=[] /> -->

app/components/app/prescription/list-with-sub.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+// import { Block, Cell } from '~/components/pub/my-ui/doc-entry/index'
+// import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+// import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+</script>
+
+<template>
+  <div class="p-10 text-center">
+    <div class="mb-4 xl:mb-5">Belum Ada Data</div>
+    <div>
+      <Button>
+        <Icon name="i-lucide-plus" class="me-2 align-middle" />
+        Tambah Order
+      </Button>
+    </div>
+  </div>
+  <Separator class="my-5" />
+  <div class="md:grid md:grid-cols-2 font-semibold">
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Order #1</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+            2025-01-01
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>Status</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Status
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+    <div>
+      <PubCustomUiDocEntryBlock mode="preview">
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>DPJP</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama Dokter
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+        <PubCustomUiDocEntryCell>
+          <PubCustomUiDocEntryLabel>PPDS</PubCustomUiDocEntryLabel>
+          <PubCustomUiDocEntryColon />
+          <PubCustomUiDocEntryField>
+              Nama PPDS
+          </PubCustomUiDocEntryField>
+        </PubCustomUiDocEntryCell>
+      </PubCustomUiDocEntryBlock>
+    </div>
+  </div>
+</template>

app/components/app/prescription/list.vue

@@ -1,5 +1,37 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry';
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Nav from '~/components/pub/my-ui/nav-footer/ca-ed-su.vue'
+
+import type { Prescription } from '~/models/prescription';
+import PrescriptionItem from '~/components/app/prescription-item/list.vue';
+import { add } from 'date-fns';
+
+interface Props {
+  data: Prescription[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+
+const emit = defineEmits<{
+  cancel: [data: any]
+  edit: [data: any],
+  submit: [data: any]
+}>()
+
+function navClick(type: 'cancel' | 'edit' | 'submit', data: Prescription): void {
+  if (type === 'cancel') {
+    emit('cancel', data)
+  } else if (type === 'edit') {
+    emit('edit', data)
+  } else if (type === 'submit') {
+    emit('submit', data)
+  }
+}
+</script>
+
 <template>
-  <div class="p-10 text-center">
+  <div v-if="data.length == 0" class="p-10 text-center">
     <div class="mb-4 xl:mb-5">Belum Ada Data</div>
     <div>
       <Button>
@@ -8,35 +40,33 @@
       </Button>
     </div>
   </div>
-  <Separator class="my-5" />
-  <div>
-    <PubMyUiDocEntryBlock mode="preview" :colCount=3>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Tgl Order</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>DPJP</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-      <PubMyUiDocEntryCell />
-      <PubMyUiDocEntryCell>
-        <PubMyUiDocEntryLabel>Status</PubMyUiDocEntryLabel>
-        <PubMyUiDocEntryField>
-            <Input />
-        </PubMyUiDocEntryField>
-      </PubMyUiDocEntryCell>
-    </PubMyUiDocEntryBlock>
-  </div>
+  <template v-for="item, idx in data">
+    <div :class="'text-sm 2xl:text-base font-semibold ' + (item.status_code == 'new' ? 'mb-2' : 'mb-2')">
+      Order #{{ data.length - idx }} - {{ item.issuedAt?.substring(0, 10) || item.createdAt?.substring(0, 10) }} - {{ item.status_code }}
+    </div>
+    <DE.Block mode="preview" :col-count="7" class="!mb-3">
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">DPJP</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          {{ item.doctor?.employee?.person?.name || '-' }}
+        </DE.Field>
+      </DE.Cell>
+      <DE.Cell :col-span="3">
+        <DE.Label :class="'font-semibold ' + (item.status_code == 'new' ? 'pt-2' : '')">PPDS</DE.Label>
+        <DE.Field :class="item.status_code == 'new' ? 'pt-2' : ''">
+          ...........
+        </DE.Field>
+      </DE.Cell>
+      <div class="flex justify-end" >
+        <Nav
+          v-if="item.status_code == 'new'"
+          :small-mode="true"
+          :default-class="'flex gap-1'"
+          @click="(type) => { navClick(type, item) }"
+        />
+      </div>
+    </DE.Block>
+    <PrescriptionItem :data="item.items || []" @click="console.log('click')" class="mb-10" />
+    <!-- <div v-if="idx < data.length - 1" class="my-8 -mx-4 border-t border-t-slate-300" /> -->
+  </template>
 </template>

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

@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 50 },
+    { width: 150 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 150 },
+  ],
+
+  headers: [
+    [
+      { label: '' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TANGGAL SURAT KONTROL' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DOKTER' },
+    ],
+  ],
+
+  keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic', 'doctor'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object), menu: 'letter' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/sep/list-cfg.history.ts

@@ -0,0 +1,35 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export interface SepHistoryData {
+  sepNumber: string
+  sepDate: string
+  referralNumber: string
+  diagnosis: string
+  serviceType: string
+  careClass: string
+}
+
+export const config: Config = {
+  cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+
+  headers: [
+    [
+      { label: 'NO. SEP' },
+      { label: 'TGL. SEP' },
+      { label: 'NO. RUJUKAN' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'JENIS PELAYANAN' },
+      { label: 'KELAS RAWAT' },
+    ],
+  ],
+
+  keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {},
+
+  htmls: {},
+}

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

@@ -0,0 +1,51 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const SelectedRadio = defineAsyncComponent(() => import('~/components/pub/my-ui/data/select-radio.vue'))
+
+export interface LetterData {
+  letterNumber: string
+  plannedDate: string
+  sepNumber: string
+  patientName: string
+  bpjsCardNo: string
+  clinic: string
+  doctor?: string
+}
+
+export const config: Config = {
+  cols: [{ width: 50 }, { width: 150 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }],
+
+  headers: [
+    [
+      { label: '' },
+      { label: 'NO. SURAT RUJUKAN' },
+      { label: 'TANGGAL SURAT RUJUKAN' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'KLINIK TUJUAN' },
+    ],
+  ],
+
+  keys: ['check', 'letterNumber', 'plannedDate', 'sepNumber', 'patientName', 'bpjsCardNo', 'clinic'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Code' },
+    { key: 'name', label: 'Name' },
+  ],
+
+  parses: {},
+
+  components: {
+    check(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object), menu: 'letter' },
+        component: SelectedRadio,
+      }
+    },
+  },
+
+  htmls: {},
+}

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

@@ -41,24 +41,24 @@ export const config: Config = {
   ],
 
   keys: [
-    'tgl_sep',
-    'no_sep',
-    'pelayanan',
-    'jalur',
-    'no_rm',
-    'nama_pasien',
-    'no_kartu_bpjs',
-    'no_surat_kontrol',
-    'tgl_surat_kontrol',
-    'klinik_tujuan',
-    'dpjp',
-    'diagnosis_awal',
+    'letterDate',
+    'letterNumber',
+    'serviceType',
+    'flow',
+    'medicalRecordNumber',
+    'patientName',
+    'cardNumber',
+    'controlLetterNumber',
+    'controlLetterDate',
+    'clinicDestination',
+    'attendingDoctor',
+    'diagnosis',
     'action',
   ],
 
   delKeyNames: [
-    { key: 'no_sep', label: 'NO. SEP' },
-    { key: 'nama_pasien', label: 'Nama Pasien' },
+    { key: 'letterNumber', label: 'NO. SEP' },
+    { key: 'patientName', label: 'Nama Pasien' },
   ],
 
   parses: {},

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

@@ -0,0 +1,50 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+export interface SepVisitData {
+  letterNumber: string
+  letterDate: string
+  sepNumber: string
+  patientName: string
+  bpjsNumber: string
+  poly: string
+  diagnosis: string
+  serviceType: string
+  careClass: string
+}
+
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+  ],
+
+  headers: [
+    [
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL RENCANA KONTROL' },
+      { label: 'NO. SEP' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'JENIS PELAYANAN' },
+      { label: 'KELAS RAWAT' },
+    ],
+  ],
+
+  keys: ['letterNumber', 'letterDate', 'sepNumber', 'patientName', 'bpjsNumber', 'diagnosis', 'serviceType', 'careClass'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {},
+
+  htmls: {},
+}

app/components/app/sep/list-history.vue

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

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { LetterData } from './list-cfg.letter'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config as configControl } from './list-cfg.control'
+import { config as configLetter } from './list-cfg.letter'
+
+const props = defineProps<{
+  data: LetterData[]
+  menu?: string
+  selected?: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const menu = props.menu || 'control'
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <PubMyUiDataTable
+    v-bind="menu === 'control' ? configControl : configLetter"
+    :rows="props.data"
+    :selected="props.selected"
+  />
+  <PaginationView
+    v-if="paginationMeta"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+</template>
+

app/components/app/sep/list-visit.vue

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

app/components/app/sep/list.vue

@@ -1,23 +1,11 @@
 <script setup lang="ts">
 import { config } from './list-cfg'
 
-interface SepData {
-  tgl_sep: string
-  no_sep: string
-  pelayanan: string
-  jalur: string
-  no_rm: string
-  nama_pasien: string
-  no_kartu_bpjs: string
-  no_surat_kontrol: string
-  tgl_surat_kontrol: string
-  klinik_tujuan: string
-  dpjp: string
-  diagnosis_awal: string
-}
+// Types
+import type { VclaimSepData } from '~/models/vclaim'
 
 const props = defineProps<{
-  data: SepData[]
+  data: VclaimSepData[]
 }>()
 </script>
 

app/components/app/sep/print-preview.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { ref, onMounted } from "vue"
+import { Card, CardContent } from "~/components/pub/ui/card"
+import { Separator } from "~/components/pub/ui/separator"
+
+// Simulasi data dari API
+const route = useRoute()
+const sepData = ref<any>(null)
+
+onMounted(async () => {
+  // contoh fetch data API (ganti dengan endpoint kamu)
+  const id = route.params.id
+  const res = await fetch(`/api/sep/${id}`)
+  sepData.value = await res.json()
+})
+</script>
+
+<template>
+  <div class="max-w-4xl mx-auto p-6 space-y-4">
+    <div class="flex items-center justify-between">
+      <h1 class="text-lg font-semibold">Preview SEP</h1>
+      <p class="text-sm text-muted-foreground">
+      </p>
+    </div>
+
+    <Card class="p-6">
+      <CardContent class="space-y-4">
+        <!-- Header -->
+        <div class="flex items-start justify-between">
+          <div class="flex items-center gap-3">
+            <img
+              src="/bpjs-logo.png"
+              alt="BPJS"
+              class="h-10 w-auto"
+            />
+            <div>
+              <p class="font-semibold">SURAT ELIGIBILITAS PESERTA</p>
+              <p>RSUD dr. Saiful Anwar</p>
+            </div>
+          </div>
+          <p class="text-sm text-right">
+            Peserta: {{ sepData?.peserta?.jenisPeserta || "-" }}
+          </p>
+        </div>
+
+        <Separator />
+
+        <!-- Content -->
+        <div class="grid grid-cols-2 gap-8 text-sm">
+          <!-- Left -->
+          <div class="space-y-1">
+            <p>No. SEP : {{ sepData?.noSEP }}</p>
+            <p>Tgl. SEP : {{ sepData?.tglSEP }}</p>
+            <p>No. Kartu : {{ sepData?.noKartu }}</p>
+            <p>Nama Peserta : {{ sepData?.nama }}</p>
+            <p>Tgl. Lahir : {{ sepData?.tglLahir }} Kelamin: {{ sepData?.kelamin }}</p>
+            <p>No. Telepon : {{ sepData?.telepon }}</p>
+            <p>Sub/Spesialis : {{ sepData?.spesialis }}</p>
+            <p>Dokter : {{ sepData?.dokter }}</p>
+            <p>Faskes Perujuk : {{ sepData?.faskes }}</p>
+            <p>Diagnosa Awal : {{ sepData?.diagnosa }}</p>
+            <p>Catatan : {{ sepData?.catatan }}</p>
+          </div>
+
+          <!-- Right -->
+          <div class="space-y-1">
+            <p>Jns. Rawat : {{ sepData?.jenisRawat }}</p>
+            <p>Jns. Kunjungan : {{ sepData?.jenisKunjungan }}</p>
+            <p>Poli Perujuk : {{ sepData?.poliPerujuk }}</p>
+            <p>Kls. Hak : {{ sepData?.kelasHak }}</p>
+            <p>Kls. Rawat : {{ sepData?.kelasRawat }}</p>
+            <p>Penjamin : {{ sepData?.penjamin }}</p>
+
+            <div class="mt-6 text-center">
+              <p class="font-semibold">Persetujuan</p>
+              <p>Pasien/Keluarga Pasien</p>
+              <img
+                :src="sepData?.qrCodeUrl"
+                alt="QR Code"
+                class="h-24 mx-auto mt-2"
+              />
+              <p class="font-semibold mt-2">{{ sepData?.nama }}</p>
+            </div>
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- Footer -->
+        <div class="text-xs text-muted-foreground leading-snug space-y-1">
+          <p>*Saya menyetujui BPJS Kesehatan untuk:</p>
+          <ul class="list-disc pl-5">
+            <li>membuka dan atau menggunakan informasi medis Pasien untuk keperluan administrasi dan pembiayaan</li>
+            <li>memberikan akses informasi kepada tenaga medis di RSUD Dr. Saiful Anwar</li>
+            <li>Penjaminan lainnya sesuai ketentuan yang berlaku</li>
+          </ul>
+          <p class="pt-2">
+            Cetakan ke {{ sepData?.cetakanKe || 1 }} |
+            {{ sepData?.tglCetak }}
+          </p>
+        </div>
+      </CardContent>
+    </Card>
+  </div>
+</template>

app/components/app/sep/small-entry.vue

@@ -1,218 +0,0 @@
-<script setup lang="ts">
-import type { FormErrors } from '~/types/error'
-import { toTypedSchema } from '@vee-validate/zod'
-import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
-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 { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
-
-import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
-import { mapToComboboxOptList } from '~/lib/utils'
-
-interface DivisionFormData {
-  name: string
-  code: string
-  parentId: string
-}
-
-const props = defineProps<{
-  division: {
-    msg: {
-      placeholder: string
-      search: string
-      empty: string
-    }
-  }
-  items: {
-    value: string
-    label: string
-    code: string
-  }[]
-  schema: any
-  initialValues?: Partial<DivisionFormData>
-  errors?: FormErrors
-}>()
-
-const emit = defineEmits<{
-  submit: [values: DivisionFormData, resetForm: () => void]
-  cancel: [resetForm: () => void]
-}>()
-
-const relationshipOpts = mapToComboboxOptList(relationshipCodes)
-const educationOpts = mapToComboboxOptList(educationCodes)
-const occupationOpts = mapToComboboxOptList(occupationCodes)
-const genderOpts = mapToComboboxOptList(genderCodes)
-
-const formSchema = toTypedSchema(props.schema)
-
-// Form submission handler
-function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: DivisionFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    parentId: values.parentId || '',
-  }
-  emit('submit', formData, resetForm)
-}
-const doctorOpts = ref([
-  { label: 'Pilih', value: null },
-  { label: 'Dr. A', value: 1 },
-])
-const paymentOpts = ref([
-  { label: 'Umum', value: 'umum' },
-  { label: 'BPJS', value: 'bpjs' },
-])
-const sepOpts = ref([
-  { label: 'Rujukan Internal', value: 'ri' },
-  { label: 'SEP Rujukan', value: 'sr' },
-])
-
-// file refs untuk tombol "Pilih Berkas"
-const sepFileInput = ref<HTMLInputElement | null>(null)
-const sippFileInput = ref<HTMLInputElement | null>(null)
-
-function pickSepFile() {
-  sepFileInput.value?.click()
-}
-function pickSippFile() {
-  sippFileInput.value?.click()
-}
-
-function onSepFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  // set ke form / emit / simpan di state sesuai form library-mu
-  console.log('sep file', f)
-}
-
-function onSippFileChange(e: Event) {
-  const f = (e.target as HTMLInputElement).files?.[0]
-  console.log('sipp file', f)
-}
-
-function onAddSep() {
-  // contoh handler tombol "+" di sebelah No. SEP
-  console.log('open modal tambah SEP')
-}
-</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-3 text-lg xl:text-xl">
-        <div class="flex flex-col justify-between">
-          <div class="p-2">
-            <h2 class="text-md font-semibold">Data Kunjungan</h2>
-          </div>
-          <Block>
-            <!-- Tanggal Daftar (DatePicker) -->
-            <FieldGroup :column="3">
-              <Label label-for="register_date">Dengan Rujukan</Label>
-              <Field id="register_date" :errors="errors">
-                <FormField v-slot="{ componentField }" name="register_date">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Jenis Pembayaran (Combobox) -->
-            <FieldGroup :column="3">
-              <Label label-for="payment_type">Rujukan</Label>
-              <Field id="payment_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="payment_type">
-                  <FormItem>
-                    <FormControl>
-                      <!-- <Combobox id="payment_type" v-bind="componentField" :items="paymentOpts" /> -->
-                      <Select id="payment_type" v-bind="componentField" :items="paymentOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <FieldGroup :column="3">
-              <Label label-for="bpjs_number">No. Rujukan</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <Input
-                        id="bpjs_number"
-                        v-bind="componentField"
-                        placeholder="Pilih jenis pembayaran terlebih dahulu"
-                      />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- No. Kartu BPJS -->
-            <FieldGroup :column="2">
-              <Label label-for="bpjs_number">Tanggal Rujukan</Label>
-              <Field id="bpjs_number" :errors="errors">
-                <FormField v-slot="{ componentField }" name="bpjs_number">
-                  <FormItem>
-                    <FormControl>
-                      <DatepickerSingle v-bind="componentField" placeholder="Pilih tanggal" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-
-            <!-- Jenis SEP -->
-            <FieldGroup :column="2">
-              <Label label-for="sep_type">Diagnosis</Label>
-              <Field id="sep_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_type">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-            <!-- No. SEP (input + tombol +) -->
-
-            <FieldGroup>
-              <Label label-for="sep_type">Status Kecelakaan</Label>
-              <Field id="sep_type" :errors="errors">
-                <FormField v-slot="{ componentField }" name="sep_type">
-                  <FormItem>
-                    <FormControl>
-                      <Select id="sep_type" v-bind="componentField" :items="sepOpts" />
-                    </FormControl>
-                    <FormMessage />
-                  </FormItem>
-                </FormField>
-              </Field>
-            </FieldGroup>
-          </Block>
-        </div>
-      </div>
-    </form>
-  </Form>
-</template>

app/components/app/sep/table-history-sep.vue

@@ -1,81 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Input } from '~/components/pub/ui/input'
-
-const props = defineProps<{
-  open: boolean
-  histories: Array<{
-    no_sep: string
-    tgl_sep: string
-    no_rujukan: string
-    diagnosis: string
-    pelayanan: string
-    kelas: string
-  }>
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-}>()
-
-const search = ref('')
-
-const filteredHistories = computed(() => {
-  const histories = props.histories || []
-  return histories.filter((p) => p.no_sep.includes(search.value))
-})
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-[50%]">
-      <DialogHeader>
-        <DialogTitle>History SEP</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2">NO. SEP</th>
-              <th class="p-2">TGL. SEP</th>
-              <th class="p-2">NO. RUJUKAN</th>
-              <th class="p-2">DIAGNOSIS AWAL</th>
-              <th class="p-2">JENIS PELAYANAN</th>
-              <th class="p-2">KELAS RAWAT</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
-              <td class="p-2">{{ p.no_sep }}</td>
-              <td class="p-2">{{ p.tgl_sep }}</td>
-              <td class="p-2">{{ p.no_rujukan }}</td>
-              <td class="p-2">{{ p.diagnosis }}</td>
-              <td class="p-2">{{ p.pelayanan }}</td>
-              <td class="p-2">{{ p.kelas }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>

app/components/app/sep/table-search-letter.vue

@@ -1,104 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Button } from '~/components/pub/ui/button'
-import { Input } from '~/components/pub/ui/input'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
-
-const props = defineProps<{
-  open: boolean
-  letters: Array<{
-    noSurat: string
-    tglRencana: string
-    noSep: string
-    namaPasien: string
-    noBpjs: string
-    klinik: string
-    dokter: string
-  }>
-  selected: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'update:selected', value: string): void
-  (e: 'save'): void
-}>()
-
-const search = ref('')
-
-const filteredLetters = computed(() => {
-  const letters = props.letters || []
-  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
-})
-
-function saveSelection() {
-  emit('save')
-  emit('update:open', false)
-}
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-[50%]">
-      <DialogHeader>
-        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2"></th>
-              <th class="p-2">NO. SURAT KONTROL</th>
-              <th class="p-2">TGL RENCANA KONTROL</th>
-              <th class="p-2">NO. SEP</th>
-              <th class="p-2">NAMA PASIEN</th>
-              <th class="p-2">NO. KARTU BPJS</th>
-              <th class="p-2">KLINIK</th>
-              <th class="p-2">DOKTER</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
-              <td class="p-2">
-                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
-                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
-                </RadioGroup>
-              </td>
-              <td class="p-2">{{ p.noSurat }}</td>
-              <td class="p-2">{{ p.tglRencana }}</td>
-              <td class="p-2">{{ p.noSep }}</td>
-              <td class="p-2">{{ p.namaPasien }}</td>
-              <td class="p-2">{{ p.noBpjs }}</td>
-              <td class="p-2">{{ p.klinik }}</td>
-              <td class="p-2">{{ p.dokter }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
-          Simpan
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>

app/components/app/sep/table-search-patient.vue

@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { ref } from 'vue'
-import {
-  Dialog,
-  DialogContent,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-  DialogFooter,
-} from '~/components/pub/ui/dialog'
-import { Button } from '~/components/pub/ui/button'
-import { Input } from '~/components/pub/ui/input'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
-
-const props = defineProps<{
-  open: boolean
-  patients: Array<{
-    ktp: string
-    rm: string
-    bpjs: string
-    nama: string
-  }>
-  selected: string
-}>()
-
-const emit = defineEmits<{
-  (e: 'update:open', value: boolean): void
-  (e: 'update:selected', value: string): void
-  (e: 'save'): void
-}>()
-
-const search = ref('')
-const filteredPatients = computed(() => {
-  const patients = props.patients || []
-  return patients.filter(
-    (p) =>
-      p.ktp.includes(search.value) ||
-      p.rm.includes(search.value) ||
-      p.bpjs.includes(search.value) ||
-      p.nama.toLowerCase().includes(search.value.toLowerCase()),
-  )
-})
-
-function saveSelection() {
-  emit('save')
-  emit('update:open', false)
-}
-</script>
-
-<template>
-  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child></DialogTrigger>
-    <DialogContent class="max-w-3xl">
-      <DialogHeader>
-        <DialogTitle>Cari Pasien</DialogTitle>
-      </DialogHeader>
-
-      <!-- Input Search -->
-      <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
-      </div>
-
-      <!-- Table -->
-      <div class="overflow-x-auto rounded-lg border">
-        <table class="w-full text-sm">
-          <thead class="bg-gray-100">
-            <tr class="text-left">
-              <th class="p-2"></th>
-              <th class="p-2">NO. KTP</th>
-              <th class="p-2">NO. RM</th>
-              <th class="p-2">NO. KARTU BPJS</th>
-              <th class="p-2">NAMA PASIEN</th>
-            </tr>
-          </thead>
-          <tbody class="font-normal">
-            <tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
-              <td class="p-2">
-                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
-                  <RadioGroupItem :id="p.ktp" :value="p.ktp" />
-                </RadioGroup>
-              </td>
-              <td class="p-2">{{ p.ktp }}</td>
-              <td class="p-2">{{ p.rm }}</td>
-              <td class="p-2">{{ p.bpjs }}</td>
-              <td class="p-2">{{ p.nama }}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-
-      <!-- Footer -->
-      <DialogFooter>
-        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
-          Simpan
-        </Button>
-      </DialogFooter>
-    </DialogContent>
-  </Dialog>
-</template>

app/components/app/sep/view-history.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import ListHistory from './list-history.vue'
+
+// Types
+import type { SepHistoryData } from './list-cfg.history'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+const props = defineProps<{
+  open: boolean
+  histories: Array<SepHistoryData>
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>History SEP</DialogTitle>
+      </DialogHeader>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListHistory :data="histories" :pagination-meta="paginationMeta" />
+      </div>
+
+      <DialogFooter></DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/app/sep/view-letter.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import { ref, provide, watch } from 'vue'
+
+// Components
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import ListLetter from './list-letter.vue'
+
+// Types
+import type { LetterData } from './list-cfg.letter'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Helpers
+import { refDebounced } from '@vueuse/core'
+
+const props = defineProps<{
+  open: boolean
+  menu?: string
+  letters: Array<LetterData>
+  selected: string
+  paginationMeta?: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'fetch', value: any): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const debouncedSearch = refDebounced(search, 500) // 500ms debounce
+
+// Provide for radio selection - use selected prop directly
+const recSelectId = ref<string>(props.selected || '')
+const recSelectMenu = ref<string>('letter')
+
+provide('rec_select_id', recSelectId)
+provide('rec_select_menu', recSelectMenu)
+
+function saveSelection() {
+  // Validate that a letter is selected
+  if (!props.selected || props.selected === '') {
+    console.warn('No letter selected')
+    return
+  }
+  emit('save')
+  emit('update:open', false)
+}
+
+function handlePageChange(page: number) {
+  emit('fetch', { 'page-number': page })
+}
+
+// Watch for changes in recSelectId and emit update:selected
+watch(recSelectId, (newValue) => {
+  if (newValue && newValue !== '') {
+    emit('update:selected', newValue)
+  }
+})
+
+// Watch for changes in selected prop
+watch(() => props.selected, (newValue) => {
+  recSelectId.value = newValue || ''
+})
+
+watch(debouncedSearch, (newValue) => {
+  // Only search if 3+ characters or empty (to clear search)
+  if (newValue.length === 0 || newValue.length >= 3) {
+    emit('fetch', { search: newValue })
+  }
+})
+</script>
+
+<template>
+  <Dialog
+    :open="props.open"
+    @update:open="emit('update:open', $event)"
+  >
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Search Control Letter</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="max-w-[50%]">
+        <Input
+          v-model="search"
+          placeholder="Search by Control Letter No. / SEP No."
+        />
+      </div>
+
+      <div class="overflow-x-auto rounded-lg border">
+        <ListLetter 
+          :data="letters" 
+          :menu="props.menu"
+          :selected="props.selected"
+          :pagination-meta="paginationMeta" 
+          @page-change="handlePageChange"
+        />
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button
+          variant="default"
+          class="h-[40px] min-w-[120px] text-white"
+          @click="saveSelection"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
+          Save
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/app/soapi/early-entry.vue

@@ -63,13 +63,13 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
   <form id="entry-form">
-    {{ errors }}
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
         <Cell>
@@ -285,7 +285,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'diagnosa')"
+              @click="emit('modal', 'diagnosa')"
             >
               + Pilih Diagnosa
             </Button>
@@ -298,7 +298,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
             <Button
               class="rounded bg-orange-100 px-3 py-1 text-orange-600"
               type="button"
-              @click="emits('modal', 'prosedur')"
+              @click="emit('modal', 'prosedur')"
             >
               + Pilih Prosedur
             </Button>
@@ -307,8 +307,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
       </Block>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
+        <AppIcdPreview v-model="icdPreview.procedures" />
       </div>
 
       <Block :colCount="3">

app/components/app/soapi/early-rehab-entry.vue

@@ -85,6 +85,7 @@ const validate = async () => {
 }
 
 defineExpose({ validate })
+const icdPreview = inject('icdPreview')
 
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
@@ -452,10 +453,18 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 
       <div class="my-2">
         <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+
+        <Button
+          class="rounded bg-orange-100 px-3 py-1 text-orange-600"
+          type="button"
+          @click="emit('click', 'fungsional')"
+        >
+          + Pilih Prosedur
+        </Button>
       </div>
 
       <div class="mb-8 grid grid-cols-2 gap-4">
-        <AppIcdPreview />
+        <AppIcdPreview v-model="icdPreview.diagnoses" />
       </div>
 
       <div class="my-2">