Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feeat/pendaftaran-kemoterapi-141

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">

app/components/app/soapi/entry.vue

@@ -43,5 +43,6 @@ defineExpose({ validate })
     @click="$emit('click', $event)"
     @submit="$emit('submit', $event)"
     @cancel="$emit('cancel', $event)"
+    @modal="$emit('modal', $event)"
   />
 </template>

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

@@ -86,6 +86,8 @@ const validate = async () => {
 
 defineExpose({ validate })
 
+const icdPreview = inject('icdPreview')
+
 const isExcluded = (key: string) => props.excludeFields?.includes(key)
 const disorders = ref<string[]>([])
 const therapies = ref<string[]>([])
@@ -558,33 +560,33 @@ const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', '
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'diagnosa')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.diagnoses" />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Fungsional (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emit('click', 'fungsional')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview v-model="icdPreview.fungsional" />
         </div>
         <div>
           <span class="text-md">Diagnosa Medis (ICD-X)</span>
           <Button
             class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
             type="button"
-            @click="emits('click', 'prosedur')"
+            @click="emit('click', 'prosedur')"
           >
             + Pilih Prosedur
           </Button>
-          <AppIcdPreview />
-        </div>
-        <div>
-          <span class="text-md">Diagnosa Medis (ICD-X)</span>
-          <Button
-            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
-            type="button"
-            @click="emits('click', 'prosedur')"
-          >
-            + Pilih Prosedur
-          </Button>
-          <AppIcdPreview />
+          <AppIcdPreview v-model="icdPreview.procedures" />
         </div>
       </div>
 

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

@@ -6,46 +6,21 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
 export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 120 },
-    {},
-    {},
-    {},
-    { width: 100 },
-    { width: 100 },
-    {},
-    { width: 50 },
-  ],
+  cols: [{}, {}, {}, { width: 100 }, { width: 120 }, {}, {}, {}, { width: 100 }, { width: 100 }, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Nama' },
-      { label: 'Rekam Medis' },
-      { label: 'KTP' },
-      { label: 'Tgl Lahir' },
-      { label: 'Umur' },
-      { label: 'JK' },
-      { label: 'Pendidikan' },
+      { label: 'Tanggal' },
+      { label: 'DPJP' },
+      { label: 'Keluhan & Riwayat' },
+      { label: 'Pemeriksaan' },
+      { label: 'Diagnosa' },
       { label: 'Status' },
-      { label: '' },
+      { label: 'Aksi' },
     ],
   ],
 
-  keys: [
-    'name',
-    'medicalRecord_number',
-    'identity_number',
-    'birth_date',
-    'patient_age',
-    'gender',
-    'education',
-    'status',
-    'action',
-  ],
+  keys: ['time', 'employee_id', 'main_complaint', 'encounter_id', 'diagnose', 'status', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -53,45 +28,34 @@ export const config: Config = {
   ],
 
   parses: {
-    name: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    time(rec: any) {
+      return rec.time ? new Date(rec.time).toLocaleDateString() : ''
     },
-    identity_number: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-        return '(TANPA NIK)'
+    main_complaint(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        console.log('parsed', parsed)
+        return parsed?.['prim-compl'] || '-'
+      } catch {
+        return '-'
       }
-      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.substring(0, 10)
+    diagnose(rec: any) {
+      const { value } = rec ?? {}
+
+      if (typeof value !== 'string') return '-'
+
+      try {
+        const parsed = JSON.parse(value)
+        const diagnose = parsed?.diagnose || []
+        return diagnose.map((d: any) => d.name).join(', ')
+      } catch {
+        return '-'
       }
-      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 !== 'undefined') {
-        return recX.education_code
-      }
-      return '-'
     },
   },
 

app/components/app/specialist-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 { SpecialistPositionFormData } from '~/schemas/specialist-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 { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialistId: 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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+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: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    specialist_id: props.specialistId,
+
+    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-specialist-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/specialist-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 { SpecialistPositionFormData } from '~/schemas/specialist-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 { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: 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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [specialist, specialistAttrs] = defineField('specialist_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.specialist_id !== undefined)
+    specialist.value = props.values.specialist_id ? Number(props.values.specialist_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 = ''
+  specialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    specialist_id: specialist.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-specialist-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">Spesialis</Label>
+        <Field :errMessage="errors.specialist_id">
+          <Combobox
+            id="specialist"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Spesialis"
+            search-placeholder="Cari Spesialis"
+            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/specialist-position/list.cfg.ts

@@ -0,0 +1,61 @@
+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 Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'specialist.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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/specialist-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/specialist/detail/index.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Specialist } from '~/models/specialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  specialist: Specialist
+}>()
+
+// #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">{{ specialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ specialist.name || '-' }}</DetailRow>
+  <DetailRow label="Unit">
+    {{ [specialist.unit?.code, specialist.unit?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+</template>
+
+<style scoped></style>

app/components/app/specialist/detail/list.cfg.ts

@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-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: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      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/specialist/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-specialist',
+        })
+      "
+    />
+  </div>
+</template>

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

@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Unit' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Nama Unit' }, { label: '' }]],
 
-  keys: ['code', 'name', 'unit', 'action'],
+  keys: ['code', 'name', 'unit.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -29,10 +22,6 @@ export const config: Config = {
       const recX = rec as SmallDetailDto
       return `${recX.name}`.trim()
     },
-    unit: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.unit_id || '-'
-    },
   },
 
   components: {

app/components/app/subspecialist-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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subspecialistId: 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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+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: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    subspecialist_id: props.subspecialistId,
+
+    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-specialist-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/subspecialist-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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subSpecialists: 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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_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.subspecialist_id !== undefined)
+    subSpecialist.value = props.values.subspecialist_id ? Number(props.values.subspecialist_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 = ''
+  subSpecialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    subspecialist_id: subSpecialist.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-specialist-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">Sub Spesialis</Label>
+        <Field :errMessage="errors.subspecialist_id">
+          <Combobox
+            id="specialist"
+            v-model="subSpecialist"
+            v-bind="subSpecialistAttrs"
+            :items="subSpecialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Sub Spesialis"
+            search-placeholder="Cari Sub Spesialis"
+            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/subspecialist-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 { SubSpecialistPosition } from '~/models/subspecialist-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 Sub Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'subspecialist', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      return recX.subspecialist?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      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/subspecialist-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/subspecialist/detail/index.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Subspecialist } from '~/models/subspecialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  subspecialist: Subspecialist
+}>()
+
+// #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">{{ subspecialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ subspecialist.name || '-' }}</DetailRow>
+  <DetailRow label="Spesialis">
+    {{ [subspecialist.specialist?.code, subspecialist.specialist?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+  <DetailRow label="Unit">
+    {{
+      [subspecialist.specialist?.unit?.code, subspecialist.specialist?.unit?.name].filter(Boolean).join(' / ') || '-'
+    }}
+  </DetailRow>
+  <DetailRow label="Instalasi">
+    {{
+      [subspecialist.specialist?.unit?.installation?.code, subspecialist.specialist?.unit?.installation?.name]
+        .filter(Boolean)
+        .join(' / ') || '-'
+    }}
+  </DetailRow>
+</template>
+
+<style scoped></style>

app/components/app/subspecialist/detail/list.cfg.ts

@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-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: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      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/subspecialist/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-subspecialist',
+        })
+      "
+    />
+  </div>
+</template>

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

@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Specialis' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]],
 
-  keys: ['code', 'name', 'specialist', 'action'],
+  keys: ['code', 'name', 'specialist.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },

app/components/app/subspecialist/list.vue

@@ -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/unit-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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  unitId: 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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+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: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail unit
+    unit_id: props.unitId,
+
+    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-unit-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/unit-position/entry-form.vue

@@ -0,0 +1,206 @@
+<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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  units: 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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [unit, unitAttrs] = defineField('unit_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.unit_id !== undefined) unit.value = props.values.unit_id ? Number(props.values.unit_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 = ''
+  unit.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    unit_id: unit.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-unit-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">Unit</Label>
+        <Field :errMessage="errors.unit_id">
+          <Combobox
+            id="unit"
+            v-model="unit"
+            v-bind="unitAttrs"
+            :items="units"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari Unit"
+            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/unit-position/list.cfg.ts

@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-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 Unit ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'unit.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      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/unit-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/unit/detail/index.vue

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

app/components/app/unit/detail/list.cfg.ts

@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-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: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      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/unit/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-unit',
+        })
+      "
+    />
+  </div>
+</template>