Merge branch 'dev' into integrasi_sso

.env.example

@@ -1,5 +1,6 @@
 NUXT_MAIN_API_ORIGIN=
 NUXT_BPJS_API_ORIGIN=
+NUXT_API_VCLAIM_SWAGGER= # https://vclaim-api.multy.chat 
 NUXT_SYNC_API_ORIGIN=
 NUXT_API_ORIGIN=
 

Dockerfile

@@ -0,0 +1,33 @@
+# Build Stage
+FROM node:20-alpine AS build-stage
+
+# Set the working directory inside the container
+WORKDIR /app
+
+# Enable pnpm using corepack
+RUN corepack enable
+
+# Copy pnpm related files and package.json to leverage Docker layer caching
+COPY package.json pnpm-lock.yaml ./
+
+# Install dependencies using pnpm
+# Using --frozen-lockfile ensures consistent installations based on pnpm-lock.yaml
+RUN --mount=type=cache,id=pnpm-store,target=/root/.pnpm-store pnpm install --frozen-lockfile
+
+# Copy the rest of the application files
+COPY . .
+
+# Build the Vue.js application for production
+RUN pnpm build
+
+# Production Stage
+FROM nginx:stable-alpine AS production-stage
+
+# Copy the built Vue.js application from the build stage to Nginx's web root
+COPY --from=build-stage /app/dist /usr/share/nginx/html
+
+# Expose port 80 for Nginx
+EXPOSE 80
+
+# Command to run Nginx in the foreground
+CMD ["nginx", "-g", "daemon off;"]

app/components/app/action-report/entry-form.vue

@@ -0,0 +1,468 @@
+<script setup lang="ts">
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+import { type Duration, intervalToDuration } from 'date-fns'
+
+// schema
+import { type ActionReportFormData, ActionReportSchema } from '~/schemas/action-report.schema'
+
+// type
+import type { Doctor } from '~/models/doctor'
+import { type ClickType as ActionClickType } from '~/components/pub/my-ui/nav-footer/index'
+
+// components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { ArrayMessage } from '~/components/pub/ui/form'
+import ActionForm from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+// form field components
+import {
+  FillNotes,
+  RadioBloods,
+  SelectBilling,
+  SelectBirthPlace,
+  SelectBirthType,
+  SelectOperationSystem,
+  SelectOperationType,
+  SelectSpecimen,
+  SelectSurgeryCounter,
+  SelectSurgeryType,
+} from './fields'
+import { ButtonAction, Fragment, InputBase, TextAreaInput } from '~/components/pub/my-ui/form/'
+import { SelectDoctor } from '~/components/app/doctor/fields'
+// Helpers
+
+// #region Props & Emits
+interface FormData extends ActionReportFormData {
+  _operationDuration: string
+  _anesthesiaDuration: string
+}
+
+interface Props {
+  isLoading: boolean
+  mode: 'add' | 'edit' | 'view'
+  initialValues?: Partial<FormData>
+
+  // form related
+  doctors: Doctor[]
+}
+
+const props = defineProps<Props>()
+const emit = defineEmits<{
+  (e: 'submit', payload: FormData): void
+  (e: 'back'): void
+  (e: 'error', errors: Error): void
+}>()
+
+const tissueNotesLimit = 5
+const mode = toRef(props, 'mode')
+const isLoading = toRef(props, 'isLoading')
+
+const isReadonly = computed(() => {
+  if (isLoading.value === true) {
+    return true
+  }
+
+  if (mode.value === 'view') {
+    return true
+  }
+
+  return false
+})
+
+const formSchema = toTypedSchema(ActionReportSchema)
+
+const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+  name: 'encounterActionReportForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues ? props.initialValues : {},
+  validateOnMount: false,
+})
+
+defineExpose({
+  validate,
+  resetForm,
+  setValues,
+  values,
+})
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+const onFormActionClicked = (action: ActionClickType) => {
+  if (action === 'back') {
+    emit('back')
+    return
+  }
+  if (action === 'submit') {
+    onSubmit()
+    return
+  }
+}
+
+const onSubmit = handleSubmit(
+  (values) => {
+    console.log(JSON.stringify(values))
+    emit('submit', values)
+  },
+  (errors) => {
+    console.error(errors)
+    emit('error', new Error('Silahkan lengkapi form terlebih dahulu'))
+  },
+)
+// #endregion
+
+// #region Watcher
+watch(
+  () => [values.operationExecution.operationStartAt, values.operationExecution.operationEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_operationDuration', formatTime(res))
+  },
+  { immediate: true },
+)
+
+watch(
+  () => [values.operationExecution.anesthesiaStartAt, values.operationExecution.anesthesiaEndAt],
+  ([start, end]) => {
+    if (!start || !end) return
+    const pStart = new Date(start)
+    const pEnd = new Date(end)
+
+    const formatTime = (r: Duration) =>
+      [r.hours && `${r.hours} jam`, r.minutes && `${r.minutes} menit`, r.seconds && `${r.seconds} detik`]
+        .filter(Boolean)
+        .join(' ')
+
+    const res = intervalToDuration({
+      start: pStart,
+      end: pEnd,
+    })
+
+    setFieldValue('_anesthesiaDuration', formatTime(res))
+  },
+  { immediate: true },
+)
+// #endregion
+</script>
+
+<template>
+  <form @submit.prevent="onSubmit">
+    <Fragment
+      v-slot="{ section }"
+      title="Tim Pelaksana Tindakan"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <SelectDoctor
+          fieldName="operatorTeam.dpjpId"
+          label="Dokter Pemeriksa"
+          placeholder="Pilih dokter"
+          :doctors="doctors"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.operatorName"
+          label="Operator"
+          placeholder="Masukkan operator"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.assistantOperatorName"
+          label="Asisten Operator"
+          placeholder="Masukkan asisten operator"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.instrumentNurseName"
+          label="Instrumentir"
+          placeholder="Masukkan instrumentir"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.surgeryDate"
+          label="Tanggal Pembedahan"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+          placeholder=""
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <TextAreaInput
+          field-name="operatorTeam.actionDiagnosis"
+          label="Diagnosa Tindakan"
+          placeholder="Masukkan diagnosa tindakan"
+          :col-span="2"
+          :rows="5"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operatorTeam.postSurgeryNurseId"
+          label="Perawat Pasca Bedah"
+          placeholder="Masukkan perawat pasca bedah"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Tindakan Operatif/Non Operatif Lain"
+    >
+      <!-- <p class="text-lg font-semibold">{{ section }}</p> -->
+      <DE.Block
+        :col-count="2"
+        :cell-flex="false"
+      >
+        <DE.Cell>
+          <slot name="procedures" />
+          <ArrayMessage
+            class="mt-1"
+            v-if="meta.touched"
+            name="procedures"
+          />
+        </DE.Cell>
+      </DE.Block>
+    </Fragment>
+
+    <Separator class="my-4" />
+
+    <Fragment
+      v-slot="{ section }"
+      title="Data Pelaksanaan Operasi"
+    >
+      <p class="text-lg font-semibold">{{ section }}</p>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <SelectSurgeryType
+          field-name="operationExecution.surgeryType"
+          label="Jenis Operasi"
+          placeholder="Pilih jenis operasi"
+          :is-disabled="isReadonly"
+        />
+        <SelectBilling
+          field-name="operationExecution.billingCode"
+          label="Kode Billing"
+          placeholder="Pilih kode billing"
+          :is-disabled="isReadonly"
+        />
+        <SelectOperationSystem
+          field-name="operationExecution.operationSystem"
+          label="Sistem Operasi"
+          placeholder="Pilih sistem operasi"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.operationStartAt"
+          label="Operasi Mulai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.operationEndAt"
+          label="Operasi Selesai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_operationDuration"
+          label="Lama Operasi"
+          placeholder="-"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="operationExecution.anesthesiaStartAt"
+          label="Pembiusan Mulai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.anesthesiaEndAt"
+          label="Pembiusan Selesai"
+          placeholder="Pilih Tanggal"
+          input-type="datetime-local"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="_anesthesiaDuration"
+          label="Lama Pembiusan"
+          placeholder="-"
+          is-disabled
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <SelectOperationType
+          field-name="operationExecution.surgeryCleanType"
+          label="Jenis Pembedahan"
+          placeholder="Pilih jenis pembedahan"
+          :is-disabled="isReadonly"
+        />
+        <SelectSurgeryCounter
+          field-name="operationExecution.surgeryNumber"
+          label="Operasi Ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthType
+          field-name="operationExecution.birthRemark"
+          label="Keterangan Lahir"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+        <SelectBirthPlace
+          field-name="operationExecution.birthPlaceNote"
+          label="Ket. Tempat Lahir"
+          placeholder="Pilih keterangan tempat lahir"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="operationExecution.personWeight"
+          label="Berat Badan"
+          placeholder="Masukkan berat badan"
+          numeric-only
+          suffix-msg="Gram"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.birthCondition"
+          label="Ket. Saat Lahir"
+          placeholder="Tambah catatan"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="4"
+        :cell-flex="false"
+      >
+        <TextAreaInput
+          field-name="operationExecution.operationDescription"
+          label="Uraian Operasi"
+          placeholder="Masukkan uraian"
+          :rows="3"
+          :col-span="2"
+          :is-disabled="isReadonly"
+        />
+        <InputBase
+          field-name="operationExecution.bleedingAmountCc"
+          label="Jumlah Pendarahan"
+          placeholder="Masukkan jumlah pendarahan"
+          suffix-msg="CC"
+          numeric-only
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <RadioBloods
+          field-name="bloodInput"
+          label="Jenis & Jumlah Darah Masuk"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+
+      <DE.Block
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          field-name="implant.brand"
+          label="Merk"
+          placeholder="Masukkan merk"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.name"
+          label="Nama Implant"
+          placeholder="Masukkan nama implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.sticker"
+          label="Sticker/Nomer Register Implant"
+          placeholder="Masukkan sticker/nomor register implant"
+          :is-disabled="isReadonly"
+        />
+
+        <InputBase
+          field-name="implant.companionName"
+          label="Nama Pendamping Implant"
+          placeholder="Masukkan nama pendamping implant"
+          :is-disabled="isReadonly"
+        />
+        <SelectSpecimen
+          field-name="specimen.destination"
+          label="Specimen/Jaringan dikirim ke"
+          placeholder="Pilih"
+          :is-disabled="isReadonly"
+        />
+      </DE.Block>
+      <FillNotes
+        title="Keterangan Jaringan"
+        :limit="tissueNotesLimit"
+        :is-disabled="isReadonly"
+      />
+    </Fragment>
+    <div class="mt-4 flex justify-end">
+      <ActionForm @click="onFormActionClicked" />
+    </div>
+  </form>
+</template>

app/components/app/action-report/fields/fill-notes.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+// components
+import { FieldArray } from 'vee-validate'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// form field components
+import { ButtonAction, InputBase } from '~/components/pub/my-ui/form'
+
+interface Props {
+  isDisabled: boolean
+  limit: number
+  title: string
+}
+
+const props = defineProps<Props>()
+
+const isReadonly = computed(() => props.isDisabled)
+</script>
+<template>
+  <FieldArray
+    v-slot="{ fields, push, remove }"
+    name="tissueNotes"
+  >
+    <template v-if="fields.length === 0">
+      {{ push({ note: '' }) }}
+    </template>
+    <div class="space-y-4">
+      <DE.Block
+        v-for="(field, idx) in fields"
+        :key="field.key"
+        :col-count="3"
+        :cell-flex="false"
+      >
+        <InputBase
+          :label="idx === 0 ? 'Keterangan Jaringan' : undefined"
+          :field-name="`tissueNotes[${idx}].note`"
+          placeholder="Masukkan catatan"
+          :is-disabled="isReadonly"
+        />
+        <DE.Cell class="flex items-start justify-start">
+          <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+            <ButtonAction
+              v-if="idx !== 0"
+              :disabled="isReadonly"
+              preset="delete"
+              :title="`Hapus Kontak ${idx + 1}`"
+              icon-only
+              @click="remove(idx)"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+
+    <ButtonAction
+      preset="add"
+      label="Tambah Catatan"
+      title="Tambah Catatan Keterangan Jaringan"
+      :disabled="fields.length >= limit || isReadonly"
+      :full-width-mobile="true"
+      class="mt-4"
+      @click="push({ name: '', dose: '', unit: '' })"
+    />
+  </FieldArray>
+</template>

app/components/app/action-report/fields/index.ts

@@ -0,0 +1,10 @@
+export { default as FillNotes } from './fill-notes.vue'
+export { default as RadioBloods } from './radio-bloods.vue'
+export { default as SelectBilling } from './select-billing.vue'
+export { default as SelectBirthPlace } from './select-birth-place.vue'
+export { default as SelectBirthType } from './select-birth-type.vue'
+export { default as SelectOperationSystem } from './select-operation-system.vue'
+export { default as SelectOperationType } from './select-operation-type.vue'
+export { default as SelectSpecimen } from './select-specimen.vue'
+export { default as SelectSurgeryCounter } from './select-surgery-counter.vue'
+export { default as SelectSurgeryType } from './select-surgery-type.vue'

app/components/app/action-report/fields/radio-bloods.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isDisabled?: boolean
+}>()
+
+const { class: containerClass, radioGroupClass, radioItemClass, labelClass } = props
+
+const opts = [
+  { label: 'PRC', value: 'prc' },
+  { label: 'WB', value: 'wb' },
+  { label: 'FFP', value: 'ffp' },
+  { label: 'TC', value: 'tc' },
+]
+</script>
+
+<template>
+  <DE.Cell
+    :class="cn('radio-group-field', containerClass)"
+    :col-span="2"
+  >
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+    <DE.Field :id="fieldName">
+      <FormField
+        v-slot="{ componentField: radioField }"
+        :name="`${fieldName}.type`"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              :model-value="radioField.modelValue"
+              @update:model-value="radioField.onChange"
+              :class="cn('grid grid-cols-1 items-start gap-4 sm:grid-cols-2 ', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in opts"
+                :key="option.value"
+                :class="cn('grid grid-cols-1 items-start gap-3 sm:grid-cols-[auto,1fr]', radioItemClass)"
+              >
+                <div class="flex min-w-fit items-center gap-2">
+                  <RadioGroupItem
+                    :id="`type-${index}`"
+                    :value="option.value"
+                    :disabled="isDisabled"
+                  />
+                  <RadioLabel :for="`type-${index}`">
+                    {{ option.label }}
+                  </RadioLabel>
+                </div>
+
+                <FormField
+                  v-slot="{ componentField: amountField }"
+                  :name="`${fieldName}.amount.${option.value}`"
+                >
+                  <FormItem>
+                    <FormControl>
+                      <div class="relative w-[140px]">
+                        <Input
+                          v-bind="amountField"
+                          placeholder="00"
+                          class="pr-10"
+                          :disabled="radioField.modelValue !== option.value || isDisabled"
+                          @input="
+                            (e: InputEvent) => {
+                              const target = e.target as HTMLInputElement
+                              const v = target.value.replace(/\D/g, '')
+                              amountField.onChange(v)
+                            }
+                          "
+                        />
+                        <span
+                          class="absolute inset-y-0 end-0 flex items-center justify-center px-2 text-sm text-muted-foreground"
+                        >
+                          CC
+                        </span>
+                      </div>
+                    </FormControl>
+                  </FormItem>
+                </FormField>
+              </div>
+            </RadioGroup>
+          </FormControl>
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-billing.vue

@@ -1,34 +1,40 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
 import Select from '~/components/pub/my-ui/form/select.vue'
 import { cn } from '~/lib/utils'
-import { relationshipCodes } from '~/lib/constants'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
 
 const props = defineProps<{
   fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
   placeholder?: string
   errors?: FormErrors
   class?: string
   selectClass?: string
   fieldGroupClass?: string
-  labelClass?: string
-  isDisabled?: boolean
 }>()
 
-const { fieldName = 'phoneNumber', errors, class: containerClass, selectClass, fieldGroupClass } = props
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
 
-const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, label]) => ({
-  label,
-  value,
-  ...(value === 'other' && { priority: -1 })
-}))
+const opts = [
+  { label: 'General', value: 'general' },
+  { label: 'Regional', value: 'regional' },
+  { label: 'Local', value: 'local' },
+]
 </script>
 
 <template>
-  <FieldGroup :class="cn('select-field-group', fieldGroupClass, containerClass)">
-    <Field
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
       :id="fieldName"
       :errors="errors"
       :class="cn('select-field-wrapper')"
@@ -41,11 +47,11 @@ const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, l
           <FormControl>
             <Select
               :id="fieldName"
-              v-bind="componentField"
               :is-disabled="isDisabled"
-              :items="emergencyContactOptions"
+              v-bind="componentField"
+              :items="opts"
               :placeholder="placeholder"
-              :preserve-order="true"
+              :preserve-order="false"
               :class="
                 cn(
                   'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
@@ -57,6 +63,6 @@ const emergencyContactOptions = Object.entries(relationshipCodes).map(([value, l
           <FormMessage />
         </FormItem>
       </FormField>
-    </Field>
-  </FieldGroup>
+    </DE.Field>
+  </DE.Cell>
 </template>

app/components/app/action-report/fields/select-birth-place.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'RSSA', value: 'rssa' },
+  { label: 'Bidan Luar', value: 'out1' },
+  { label: 'Dokter Luar', value: 'out2' },
+  { label: 'Dukun Bayi', value: 'out3' },
+  { label: 'Puskesmas', value: 'out4' },
+  { label: 'Paramedis Luar', value: 'out5' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-birth-type.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Lahir Hidup', value: 'lahir_hidup' },
+  { label: 'Lahir Mati', value: 'lahir_mati' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-operation-system.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Cito', value: 'cito' },
+  { label: 'Urgent', value: 'urgent' },
+  { label: 'Efektif', value: 'efektif' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-operation-type.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Bersih', value: 'bersih' },
+  { label: 'Bersih Terkontaminasi', value: 'bersih_terkontaminasi' },
+  { label: 'Terkontaminasi Kotor', value: 'terkontaminasi' },
+  { label: 'Kotor', value: 'kotor' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-specimen.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'PA', value: 'pa' },
+  { label: 'Mikrobiologi', value: 'microbiology' },
+  { label: 'Laborat', value: 'laboratory' },
+  { label: 'Tidak Perlu', value: 'none' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-surgery-counter.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: '1 (Satu)', value: 'first' },
+  { label: 'Ulangan', value: 'retry' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/fields/select-surgery-type.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  isDisabled?: boolean
+  isRequired?: boolean
+  placeholder?: string
+  errors?: FormErrors
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+}>()
+
+const { errors, class: containerClass, selectClass, fieldGroupClass } = props
+
+const opts = [
+  { label: 'Kecil', value: 'kecil' },
+  { label: 'Sedang', value: 'sedang' },
+  { label: 'Besar', value: 'besar' },
+  { label: 'Khusus', value: 'khusus' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              :is-disabled="isDisabled"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/action-report/list-history.cfg.ts

@@ -0,0 +1,88 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-d.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/action-report/list-history.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/action-report/list.cfg.ts

@@ -0,0 +1,89 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 120 },
+    { width: 50 },
+  ],
+
+  headers: [
+    [
+      { label: 'TANGGAL LAPORAN' },
+      { label: 'DPJP' },
+      { label: 'OPERATOR' },
+      { label: 'TANGGAL PEMBEDAHAN' },
+      { label: 'JENIS OPERASI' },
+      { label: 'KODE BILLING' },
+      { label: 'SISTEM OPERASI' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'billing', 'system', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).operationAt
+      const result = format(new Date(attr), 'd MMMM yyyy', { locale: id })
+
+      return result
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return 'dr. Dewi Arum Sawitri, Sp.An'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return 'Besar'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return 'dr. Irwansyah Kurniawan Sp.Bo'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/action-report/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/action-report/preview.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+// type
+import { type ProcedureSrc } from '~/models/procedure-src'
+import { type ActionReportFormData } from '~/schemas/action-report.schema'
+
+// componenets
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '~/components/pub/ui/accordion'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+import ArrangementProcedurePicker from '~/components/app/therapy-protocol/picker-dialog/arrangement-procedure/procedure-picker.vue'
+
+// #region Props & Emits
+const props = defineProps<{
+  data: ActionReportFormData
+}>()
+
+const emit = defineEmits<{
+  (e: 'back'): void
+  (e: 'edit'): void
+}>()
+
+// #endregion
+
+// #region State & Computed
+const { operatorTeam, procedures, operationExecution, bloodInput, implant, specimen, tissueNotes = [] } = props.data
+
+const procedureSampleData = procedures as unknown as ProcedureSrc[]
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+// #region Utilities & event handlers
+function onNavigate(type: string) {
+  if (type == 'back') emit('back')
+  if (type == 'edit') emit('edit')
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Tanggal Laporan">
+    {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+  </DetailRow>
+
+  <Accordion
+    type="multiple"
+    class="w-full"
+    collapsible
+    :default-value="['section-1', 'section-2', 'section-3']"
+  >
+    <AccordionItem value="section-1">
+      <AccordionTrigger>Tim Pelaksanaan Tindakan</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="DPJP">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Operator">Sumitro</DetailRow>
+            <DetailRow label="Asisten Operator">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Instrumentir">Mikel Arteta</DetailRow>
+            <DetailRow label="Tanggal Pembedahan">
+              {{ format(new Date(), 'd MMMM yyyy', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Diagnosa Tindakan">{{ operatorTeam?.actionDiagnosis || '-' }}</DetailRow>
+            <DetailRow label="Perawat Pasca Bedah">Cak Armuji</DetailRow>
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="section-2">
+      <AccordionTrigger>Tindakan Operatif / Non Operatif Lain</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <ArrangementProcedurePicker
+              field-name="procedures"
+              title="List Prosedur"
+              sub-title="Pilih Prosedur"
+              :mode="'preview'"
+              :sample-items="procedureSampleData"
+            />
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+
+    <AccordionItem value="section-3">
+      <AccordionTrigger>Data Pelaksanaan Tindakan</AccordionTrigger>
+      <AccordionContent>
+        <DE.Block
+          :cell-flex="false"
+          :col-count="2"
+        >
+          <DE.Cell>
+            <DetailRow label="Jenis Operasi">dr. Marcell Galliard Sp.Gr</DetailRow>
+            <DetailRow label="Kode Billing">GCASH1128190</DetailRow>
+            <DetailRow label="Sistem Operasi">Alexis Lewis Carol</DetailRow>
+            <DetailRow label="Operasi Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Operasi Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Operasi">5 menit</DetailRow>
+            <DetailRow label="Pembiusan Mulai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Pembiusan Selesai">
+              {{ format(new Date(), 'd MMMM yyyy, HH:mm', { locale: id }) }}
+            </DetailRow>
+            <DetailRow label="Lama Pembiusan">5 menit</DetailRow>
+
+            <DetailRow label="PRC">300 CC</DetailRow>
+            <DetailRow label="FPP">-</DetailRow>
+            <DetailRow label="WB">-</DetailRow>
+            <DetailRow label="TC">-</DetailRow>
+            <DetailRow label="Merk">-</DetailRow>
+            <DetailRow label="Nama Implant">-</DetailRow>
+            <DetailRow label="Sticker / Nomor Register Implant">-</DetailRow>
+            <DetailRow label="Nama Pendamping Implant">-</DetailRow>
+          </DE.Cell>
+          <DE.Cell>
+            <DetailRow label="Jenis Pembedahan">Bersih</DetailRow>
+            <DetailRow label="Operasi ke">1 (Satu)</DetailRow>
+            <DetailRow label="Keterangan Lahir">Lahir Hidup</DetailRow>
+            <DetailRow label="Ket. Tempat Lahir">RSSA</DetailRow>
+            <DetailRow label="Berat Badan">18 gram</DetailRow>
+            <DetailRow label="Ket. Saat Lahir">Normal dan sehat</DetailRow>
+            <DetailRow label="Uraian Operasi">-</DetailRow>
+            <DetailRow label="Jumlah Pendarahan">300 CC</DetailRow>
+            <DetailRow label="Specimen / Jaringan dikirim ke">PA</DetailRow>
+            <DetailRow label="Keterangan Jaringan">
+              <ul
+                class="list-disc space-y-1 pl-5 text-sm"
+                v-if="tissueNotes.length > 0"
+                v-for="item in tissueNotes"
+              >
+                <li>{{ item.note }}</li>
+              </ul>
+              <span v-else>-</span>
+            </DetailRow>
+          </DE.Cell>
+        </DE.Block>
+      </AccordionContent>
+    </AccordionItem>
+  </Accordion>
+  <div class="my-2 flex justify-end py-2">
+    <PubMyUiNavFooterBaEd @click="onNavigate" />
+  </div>
+</template>
+
+<style scoped></style>

app/components/app/action-report/sample.ts

@@ -0,0 +1,54 @@
+import { addWeeks, formatISO } from 'date-fns'
+
+export type ActionReportData = {
+  id: number
+  reportAt: string
+  operationAt: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ActionReportData[] = [
+  {
+    id: 1,
+    reportAt: formatISO(addWeeks(new Date(), -1)),
+    operationAt: formatISO(addWeeks(new Date(), 1)),
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    reportAt: new Date().toISOString(),
+    operationAt: formatISO(addWeeks(new Date(), 2)),
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]

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

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

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

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

app/components/app/ap-lab-order/list.cfg.ts

@@ -0,0 +1,58 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
+
+  headers: [[
+    { label: 'Tgl. Order' },
+    { label: 'No. Order' },
+    { label: 'Jadwal Pemeriksaan' },
+    { label: 'Lokalisasi' },
+    { label: 'Stadium' },
+    { label: 'Status' },
+    { label: 'Resume' },
+    { label: '' }]],
+
+  keys: [
+    'date',
+    'number',
+    'examinationDate',
+    'localization',
+    'stadium',
+    'resume',
+    '',
+  ],
+
+  delKeyNames: [
+    { key: 'date', label: 'Tanggal' },
+    { key: 'number', label: 'Nomor' },
+  ],
+
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/ap-lab-order/list.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+// Components
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+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">
+    <DataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/assessment-education/entry.vue

@@ -0,0 +1,215 @@
+<script setup lang="ts">
+import { z } from 'zod'
+import { FieldArray, useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+// types
+// import { type AssessmentEducationFormData, AssessmentEducationSchema, encode } from '~/schemas/assessment-education'
+
+// componenets
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Separator from '~/components/pub/ui/separator/Separator.vue'
+import { BaseSelect, CheckboxGeneral, CheckboxSpecial } from './fields'
+import { ButtonAction, TextAreaInput } from '~/components/pub/my-ui/form'
+import ActionForm from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+// constant
+import {
+  abilityCode,
+  willCode,
+  medObstacleCode,
+  learnMethodCode,
+  langClassCode,
+  translatorSrcCode,
+} from '~/lib/clinical.constants'
+
+interface FormData {}
+interface Props {
+  noteLimit?: number
+  isLoading?: boolean
+  isReadonly?: boolean
+  mode: 'add' | 'edit' | 'view'
+  initialValues?: Partial<FormData>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isLoading: false,
+  isReadonly: false,
+  noteLimit: 10,
+})
+const isDisabled = computed(() => props.isLoading || props.isReadonly)
+// const formSchema = toTypedSchema(AssessmentEducationSchema)
+const formSchema = toTypedSchema(z.object({}))
+const { errors, handleSubmit, values, meta, resetForm, setFieldValue, setValues, validate } = useForm<FormData>({
+  name: 'assessmentEducationForm',
+  validationSchema: formSchema,
+  initialValues: props.initialValues
+    ? props.initialValues
+    : {
+        plans: [
+          {
+            id: 1,
+            value: '',
+          },
+        ],
+      },
+  validateOnMount: false,
+})
+
+defineExpose({
+  validate,
+  resetForm,
+  setValues,
+  values,
+})
+</script>
+
+<template>
+  <form @submit.prevent="">
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Kebutuhan Edukasi</p>
+    <DE.Block
+      :col-count="4"
+      :cell-flex="false"
+    >
+      <CheckboxGeneral
+        field-name="generalEducationNeeds"
+        label="Informasi Umum"
+        :col-span="2"
+        :is-disabled="isDisabled"
+      />
+      <CheckboxSpecial
+        field-name="specificEducationNeeds"
+        label="Edukasi Khusus"
+        :col-span="2"
+        :is-disabled="isDisabled"
+      />
+    </DE.Block>
+
+    <div class="h-6">
+      <Separator />
+    </div>
+
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Asesmen Kemampuan dan Kemauan Belajar</p>
+    <DE.Block
+      :col-count="3"
+      :cell-flex="false"
+    >
+      <BaseSelect
+        field-name="learningAbility"
+        label="Kemampuan Belajar"
+        :items="abilityCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="learningWillingness"
+        label="Kemauan Belajar"
+        :items="willCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="barrier"
+        label="Hambatan"
+        :items="medObstacleCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="learningMethod"
+        label="Metode Pembelajaran"
+        :items="learnMethodCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="language"
+        label="Bahasa"
+        :items="langClassCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="languageBarrier"
+        label="Hambatan Bahasa"
+        :items="translatorSrcCode"
+        :is-disabled="isDisabled"
+      />
+
+      <BaseSelect
+        field-name="beliefValue"
+        label="Keyakinan pada Nilai-Nilai yang Dianut"
+        :items="{
+          ya: 'IYA',
+          tidak: 'TIDAK',
+        }"
+        :is-disabled="isDisabled"
+      />
+    </DE.Block>
+    <div class="h-6">
+      <Separator />
+    </div>
+
+    <p class="mb-2 text-sm font-semibold 2xl:mb-3 2xl:text-base">Rencana Edukasi</p>
+    <DE.Block
+      :col-count="1"
+      :cell-flex="false"
+    >
+      <FieldArray
+        v-slot="{ fields, push, remove }"
+        name="tissueNotes"
+      >
+        <template v-if="fields.length === 0">
+          {{ push({ note: '' }) }}
+        </template>
+        <div class="space-y-4">
+          <DE.Block
+            v-for="(field, idx) in fields"
+            :key="field.key"
+            :col-count="6"
+            :cell-flex="false"
+          >
+            <DE.Cell :col-span="5">
+              <TextAreaInput
+                :field-name="`plans[${idx}].value`"
+                :label="'Rencana ' + Number(idx + 1)"
+                placeholder="Masukkan rencana catatan"
+                :col-span="2"
+                :rows="5"
+                :is-disabled="isReadonly"
+              />
+            </DE.Cell>
+            <DE.Cell class="flex items-start justify-start">
+              <DE.Field :class="idx === 0 ? 'mt-[30px]' : 'mt-0'">
+                <ButtonAction
+                  v-if="idx !== 0"
+                  :disabled="isReadonly"
+                  preset="delete"
+                  :title="`Hapus Rencana ${idx + 1}`"
+                  icon-only
+                  @click="remove(idx)"
+                />
+              </DE.Field>
+            </DE.Cell>
+          </DE.Block>
+        </div>
+
+        <div class="self-center pt-3">
+          <ButtonAction
+            preset="add"
+            label="Tambah Rencana"
+            title="Tambah Rencana Edukasi"
+            :disabled="fields.length >= noteLimit || isReadonly"
+            :full-width-mobile="true"
+            class="mt-4"
+            @click="push({ id: fields.length + 1, value: '' })"
+          />
+        </div>
+      </FieldArray>
+    </DE.Block>
+    <!-- todo -->
+    <div class="mt-4 flex justify-end">
+      <ActionForm @click="() => {}" />
+    </div>
+  </form>
+</template>

app/components/app/assessment-education/fields/base-checkbox.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { Checkbox } from '~/components/pub/ui/checkbox'
+
+import type { CheckItem } from '~/lib/utils'
+
+const props = defineProps<{
+  label: string
+  fieldName: string
+  items: CheckItem[]
+  isDisabled?: boolean
+  colSpan?: number
+}>()
+
+const { label, fieldName, items } = props
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+
+    <DE.Field :id="fieldName">
+      <FormField
+        :name="fieldName"
+        v-slot="{ value, handleChange }"
+      >
+        <FormItem>
+          <div
+            v-for="item in items"
+            :key="item.id"
+            class="ml-1 flex flex-row items-start space-x-3 space-y-0"
+          >
+            <FormControl>
+              <Checkbox
+                :disabled="isDisabled"
+                :id="`cb-${fieldName}-${item.id}`"
+                :checked="value?.includes(item.id)"
+                @update:checked="
+                  (checked) => {
+                    const newValue = [...(value || [])]
+                    if (checked) {
+                      if (!newValue.includes(item.id)) newValue.push(item.id)
+                    } else {
+                      const idx = newValue.indexOf(item.id)
+                      if (idx > -1) newValue.splice(idx, 1)
+                    }
+                    handleChange(newValue)
+                  }
+                "
+              />
+            </FormControl>
+            <FormLabel
+              :for="`cb-${fieldName}-${item.id}`"
+              class="font-normal leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70 md:!text-xs 2xl:text-sm"
+            >
+              {{ item.label }}
+            </FormLabel>
+          </div>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/assessment-education/fields/base-select.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { cn, mapToComboboxOptList } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  items: Record<string, string>
+  placeholder?: string
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const { placeholder = 'Pilih', class: containerClass, selectClass, fieldGroupClass, labelClass } = props
+
+const opts = computed(() => {
+  const data = mapToComboboxOptList(props.items)
+  // hide code on select options
+  const filtered = data
+    .filter((item) => item.code)
+    .reduce(
+      (acc, item) => {
+        acc.push({
+          label: item.label as string,
+          value: item.value as string,
+        })
+        return acc
+      },
+      [] as Array<{ label: string; value: string }>,
+    )
+
+  return filtered
+})
+</script>
+
+<template>
+  <DE.Cell :class="cn('select-field-group', fieldGroupClass, containerClass)">
+    <DE.Label
+      :label-for="fieldName"
+      :class="cn('select-field-label', labelClass)"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Select
+              :id="fieldName"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :preserve-order="false"
+              :class="
+                cn(
+                  'text-sm transition-all duration-200 focus:outline-none focus:ring-1 focus:ring-black focus:ring-offset-0',
+                  selectClass,
+                )
+              "
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/assessment-education/fields/checkbox-general.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import BaseCheckbox from './base-checkbox.vue'
+import { generalEduCode } from '~/lib/clinical.constants'
+import { mapToCheckItems } from '~/lib/utils'
+
+interface Props {
+  label: string
+  fieldName: string
+  isDisabled?: boolean
+  colSpan?: number
+}
+defineProps<Props>()
+
+const generalItems = mapToCheckItems(generalEduCode)
+</script>
+
+<template>
+  <BaseCheckbox
+    :field-name="fieldName"
+    :label="label"
+    :is-disabled="isDisabled"
+    :col-span="colSpan"
+    :items="generalItems"
+  />
+</template>

app/components/app/assessment-education/fields/checkbox-special.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import BaseCheckbox from './base-checkbox.vue'
+import { specialEduCode } from '~/lib/clinical.constants'
+import { mapToCheckItems } from '~/lib/utils'
+interface Props {
+  label: string
+  fieldName: string
+  colSpan?: number
+}
+defineProps<Props>()
+
+const specialItems = mapToCheckItems(specialEduCode)
+</script>
+
+<template>
+  <BaseCheckbox
+    :field-name="fieldName"
+    :label="label"
+    :col-span="colSpan"
+    :items="specialItems"
+  />
+</template>

app/components/app/assessment-education/fields/index.ts

@@ -0,0 +1,4 @@
+export { default as BaseSelect } from './base-select.vue'
+export { default as CheckboxGeneral } from './checkbox-general.vue'
+export { default as CheckboxSpecial } from './checkbox-special.vue'
+export { default as SelectAssessmentCode } from './select-assessment-code.vue'

app/components/app/assessment-education/fields/select-assessment-code.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  label: string
+  fieldName: string
+  placeholder?: string
+  colSpan?: number
+}>()
+
+const { label, fieldName, placeholder = 'Masukkan catatan' } = props
+</script>
+
+<template>
+  <DE.Cell :col-span="colSpan || 1">
+    <DE.Label :label-for="fieldName">
+      {{ label }}
+    </DE.Label>
+    <DE.Field :id="fieldName">
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Textarea
+              v-bind="componentField"
+              :placeholder="placeholder"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/assessment-education/list-history.cfg.ts

@@ -0,0 +1,75 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'INFORMASI UMUM' },
+      { label: 'EDUKASI KHUSUS' },
+      { label: 'RENCANA EDUKASI' },
+      { label: 'PELAKSANAAN' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      return '1 Rencana Edukasi'
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return '2 Edukasi dipilih'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return '3 Informasi Dipilih'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/assessment-education/list-history.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/assessment-education/list.cfg.ts

@@ -0,0 +1,75 @@
+import { defineAsyncComponent } from 'vue'
+
+import { format } from 'date-fns'
+import { id } from 'date-fns/locale'
+
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import type { ActionReportData } from '~/components/app/action-report/sample'
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{ width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 120 }, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'INFORMASI UMUM' },
+      { label: 'EDUKASI KHUSUS' },
+      { label: 'RENCANA EDUKASI' },
+      { label: 'PELAKSANAAN' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: ['reportAt', 'dpjp', 'operator', 'operationAt', 'operationType', 'action'],
+
+  delKeyNames: [
+    { key: 'id', label: 'ID' },
+    { key: 'dokter', label: 'Dokter' },
+    { key: 'reportAt', label: 'Tanggal Laporan' },
+  ],
+
+  parses: {
+    reportAt: (rec: unknown): unknown => {
+      const attr = (rec as ActionReportData).reportAt
+      const result = format(new Date(attr), 'd MMMM yyyy, HH:mm', { locale: id })
+
+      return result
+    },
+    operationAt: (rec: unknown): unknown => {
+      return '1 Rencana Edukasi'
+    },
+    system: (rec: unknown): unknown => {
+      return 'Cito'
+    },
+    operator: (rec: unknown): unknown => {
+      return '2 Edukasi dipilih'
+    },
+    billing: (rec: unknown): unknown => {
+      return 'General'
+    },
+    operationType: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      return '3 Informasi Dipilih'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.parent?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/assessment-education/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/assessment-education/sample.ts

@@ -0,0 +1,54 @@
+import { addWeeks, formatISO } from 'date-fns'
+
+export type ActionReportData = {
+  id: number
+  reportAt: string
+  operationAt: string
+  noRm: string
+  noBill: string
+  nama: string
+  jk: string
+  alamat: string
+  klinik: string
+  dokter: string
+  caraBayar: string
+  rujukan: string
+  ketRujukan: string
+  asal: string
+}
+
+export const sampleRows: ActionReportData[] = [
+  {
+    id: 1,
+    reportAt: formatISO(addWeeks(new Date(), -1)),
+    operationAt: formatISO(addWeeks(new Date(), 1)),
+    noRm: 'RM23311224',
+    noBill: '-',
+    nama: 'Ahmad Baidowi',
+    jk: 'L',
+    alamat: 'Jl Jaksa Agung S. No. 9',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  {
+    id: 2,
+    reportAt: new Date().toISOString(),
+    operationAt: formatISO(addWeeks(new Date(), 2)),
+    noRm: 'RM23455667',
+    noBill: '-',
+    nama: 'Abraham Sulaiman',
+    jk: 'L',
+    alamat: 'Purwantoro, Blimbing',
+    klinik: 'Penyakit dalam',
+    dokter: 'Dr. Andreas Sutaji',
+    caraBayar: 'JKN',
+    rujukan: 'Faskes BPJS',
+    ketRujukan: 'RUMAH SAKIT - RS Lawang Medika - Malang',
+    asal: 'Rawat Jalan Reguler',
+  },
+  // tambahkan lebih banyak baris contoh jika perlu
+]

app/components/app/consultation/entry.vue

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

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

@@ -33,7 +33,7 @@ const {
 const units = ref<Array<Item>>([])
 
 async function fetchData() {
-  units.value = await getUnitLabelList({}, true)
+  units.value = await getUnitLabelList({})
 }
 
 const selectedUnitId = inject<Ref<string | null>>("selectedUnitId")!

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

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './history-list.cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+const props = defineProps<Props>()
+const isModalOpen = inject(`isHistoryDialogOpen`) as Ref<boolean>
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Dialog v-model:open="isModalOpen" title="Riwayat Surat Kontrol" size="full">   
+    <PubMyUiDataTable
+            v-bind="config"
+            :rows="data"
+            :skeleton-size="props.paginationMeta?.pageSize"
+        />
+        <PaginationView :pagination-meta="props.paginationMeta" @page-change="handlePageChange" />
+  </Dialog>
+</template>

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

@@ -0,0 +1,85 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+import { educationCodes, genderCodes } from '~/lib/constants'
+import { calculateAge } from '~/lib/utils'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/print-btn.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {}, {width: 130}, {width: 30},],
+
+  headers: [
+    [
+      { label: 'NAMA PASIEN' },
+      { label: 'NO.SURAT KONTROL' },
+      { label: 'NO.SEP' },
+      { label: 'TANGGAL RENCANA KONTROL' },
+      { label: 'TANGGAL TERBIT' },
+      { label: 'DPJP' },
+      { label: 'SPESIALIS' },
+      { label: 'SUBSPESIALIS' },
+      { label: 'TIPE RAWAT' },
+      { label: 'DIBUAT OLEH' },
+      { label: 'DIEDIT OLEH' },
+      { label: 'STATUS' },
+      { label: 'AKSI' },
+    ],
+  ],
+
+  keys: [
+    'date',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'name',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+    specialist_subspecialist: (rec: unknown): unknown => {
+      return '-'
+    },
+    dpjp: (rec: unknown): unknown => {
+      // const { person } = rec as Patient
+      return '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {
+    sep_status(_rec) {
+      return 'SEP Internal'
+    },
+  },
+}

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

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

app/components/app/doctor/fields/index.ts

@@ -0,0 +1 @@
+export { default as SelectDoctor } from './select-doctor.vue'

app/components/app/doctor/fields/select-doctor.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils'
+
+// type
+import type { Doctor } from '~/models/doctor'
+import { type Person, parseName } from '~/models/person'
+
+// componenets
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+const props = defineProps<{
+  fieldName: string
+  label: string
+  placeholder: string
+  doctors?: Doctor[]
+  class?: string
+  selectClass?: string
+  fieldGroupClass?: string
+  labelClass?: string
+  isRequired?: boolean
+  isDisabled?: boolean
+  colSpan?: number
+}>()
+
+const { class: containerClass, labelClass, colSpan = 1, doctors = [] } = props
+
+const opts = computed(() => {
+  return doctors.map((doc) => ({
+    value: doc.id,
+    label: parseName(doc.employee.person as Person),
+  }))
+})
+</script>
+
+<template>
+  <DE.Cell
+    :col-span="colSpan"
+    :class="cn('select-field-group', fieldGroupClass, containerClass)"
+  >
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :class="cn('select-field-wrapper')"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <Combobox
+              :id="fieldName"
+              v-bind="componentField"
+              :items="opts"
+              :placeholder="placeholder"
+              :is-disabled="isDisabled"
+              search-placeholder="Cari dokter..."
+              empty-message="Dokter tidak ditemukan"
+            />
+          </FormControl>
+          <FormMessage />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

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

@@ -10,12 +10,13 @@ import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
 import * as DE from '~/components/pub/my-ui/doc-entry'
 import type { CheckInFormData } from '~/schemas/encounter.schema'
 import type { Encounter } from '~/models/encounter'
+import { now } from '@internationalized/date';
 
 interface Props {
   schema: z.ZodSchema<any>
   values: any
   doctors: { value: string; label: string }[]
-  employees: { value: string; label: string }[]
+  // employees: { value: string; label: string }[]
   encounter: Encounter
   isLoading?: boolean
   isReadonly?: boolean
@@ -36,18 +37,23 @@ const { defineField, errors, meta } = useForm({
   } as Partial<CheckInFormData>,
 })
 
-const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
-const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
+const [responsible_doctor_code, responsible_doctor_codeAttrs] = defineField('responsible_doctor_code')
+// const [adm_employee_id, adm_employee_idAttrs] = defineField('discharge_method_code')
 const [registeredAt, registeredAtAttrs] = defineField('registeredAt')
 
 function submitForm() {
   const formData: CheckInFormData = {
-    responsible_doctor_id: responsible_doctor_id.value,
-    adm_employee_id: adm_employee_id.value,
-    // registeredAt: registeredAt.value || '',
+    responsible_doctor_code: responsible_doctor_code.value,
+    // adm_employee_id: adm_employee_id.value,
+    registeredAt: registeredAt.value || '',
   }
   emit('submit', formData)
 }
+
+function setTime() {
+  const today = new Date()
+  registeredAt.value = today.toISOString().substring(0, 10) + ' ' + today.toLocaleTimeString('id-ID').substring(0, 5).replace('.', ':');
+}
 </script>
 
 <template>
@@ -57,8 +63,8 @@ function submitForm() {
       <DE.Field>
         <ComboBox
           id="doctor"
-          v-model="responsible_doctor_id"
-          v-bind="responsible_doctor_idAttrs"
+          v-model="responsible_doctor_code"
+          v-bind="responsible_doctor_codeAttrs"
           :items="doctors"
           :disabled="isLoading || isReadonly"
           placeholder="Pilih Dokter DPJP"
@@ -67,7 +73,7 @@ function submitForm() {
         />
       </DE.Field>
     </DE.Cell>
-    <DE.Cell>
+    <!-- <DE.Cell>
       <DE.Label>PJ Berkas</DE.Label>
       <DE.Field>
         <ComboBox
@@ -81,7 +87,7 @@ function submitForm() {
           empty-message="Petugas tidak ditemukan"
         />
       </DE.Field>
-    </DE.Cell>
+    </DE.Cell> -->
     <DE.Cell>
       <DE.Label>Waktu Masuk</DE.Label>
       <DE.Field>
@@ -89,7 +95,8 @@ function submitForm() {
             id="name"
             v-model="registeredAt"
             v-bind="registeredAtAttrs"
-            :disabled="isLoading || isReadonly"
+            @click="setTime"
+            readonly
           />
       </DE.Field>
     </DE.Cell>
@@ -104,4 +111,4 @@ function submitForm() {
 
 <style>
 
-</style>
+</style>

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

@@ -7,43 +7,48 @@ import type { Encounter } from '~/models/encounter'
 
 interface Props {
   encounter: Encounter
+  canUpdate?: boolean
+  isLoading?: boolean
 }
 const props = defineProps<Props>()
-const doctor = ref('-belum dipilih-')
+const doctor = computed(() => {
+  return props.encounter.responsible_doctor?.employee?.person?.name ?? '-belum dipilih-'
+})
 const adm = ref('-belum dipilih-')
 
 const emit = defineEmits<{
   edit: []
 }>()
-
-watch(props.encounter, () => {
-  doctor.value = props.encounter.responsible_doctor?.employee?.person?.name ?? props.encounter.appointment_doctor?.employee?.person?.name ?? '-belum dipilih-'
-  adm.value = props.encounter.adm_employee?.person?.name ?? '-belum dipilih-'
-})
 </script>
 
 <template>
   <DE.Block :cell-flex="false">
+    <DE.Cell>
+      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt?.substring(0, 15).replace('T', ' ') || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.adm_employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label class="font-semibold">Perawat</DE.Label>
+      <DE.Field>
+        <div class="py-2 border-b border-b-slate-300">{{ encounter.responsible_nurse?.employee?.person?.name || '-' }}</div>
+      </DE.Field>
+    </DE.Cell>
     <DE.Cell>
       <DE.Label class="font-semibold">Dokter</DE.Label>
       <DE.Field>
         <div class="py-2 border-b border-b-slate-300">{{ doctor }}</div>
       </DE.Field>
     </DE.Cell>
-    <DE.Cell>
-      <DE.Label class="font-semibold">PJ Berkas</DE.Label>
-      <DE.Field>
-        <div class="py-2 border-b border-b-slate-300">{{ adm }}</div>
-      </DE.Field>
-    </DE.Cell>
-    <DE.Cell>
-      <DE.Label class="font-semibold">Waktu Masuk</DE.Label>
-      <DE.Field>
-        <div class="py-2 border-b border-b-slate-300">{{ encounter?.registeredAt || '-' }}</div>
-      </DE.Field>
-    </DE.Cell>
   </DE.Block>
-  <div class="text-center">
+  <div v-if="canUpdate" class="text-center">
     <Button @click="() => emit('edit')">
       <LucidePen />
       Edit
@@ -53,4 +58,4 @@ watch(props.encounter, () => {
 
 <style>
 
-</style>
+</style>

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

@@ -12,8 +12,7 @@ import type { Encounter } from '~/models/encounter';
 
 interface Props {
   encounter: Encounter
-  isLoading?: boolean
-  isReadonly?: boolean
+  canUpdate?: boolean
 }
 const props = defineProps<Props>()
 
@@ -73,7 +72,7 @@ const emit = defineEmits<{
       </DE.Field>
     </DE.Cell>
   </DE.Block>
-  <div class="text-center [&>*]:mx-1">
+  <div v-if="canUpdate" class="text-center [&>*]:mx-1">
     <Button @click="() => emit('edit')">
       <LucidePen />
       Edit
@@ -87,4 +86,4 @@ const emit = defineEmits<{
 
 <style>
 
-</style>
+</style>

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

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+import type { LinkItem, ListItemDto } from '~/components/pub/my-ui/data/types'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const activeServicePosition = inject<Ref<string>>('activeServicePosition')! // previously: activePosition
+
+const activeKey = ref<string | null>(null)
+const linkItemsFiltered = ref<LinkItem[]>([])
+
+const baseLinkItems: LinkItem[] = [
+  {
+    label: 'Detail',
+    value: 'detail',
+    groups: ['medical', 'registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showDetail)
+    },
+    icon: 'i-lucide-eye',
+  },
+  {
+    label: 'Edit',
+    value: 'edit',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showEdit)
+    },
+    icon: 'i-lucide-pencil',
+  },
+  {
+    label: 'Process',
+    value: 'process',
+    groups: ['medical'],
+    onClick: () => {
+      proceedItem(ActionEvents.showProcess)
+    },
+    icon: 'i-lucide-shuffle',
+  },
+  {
+    label: 'Print',
+    value: 'print',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showPrint)
+    },
+    icon: 'i-lucide-printer',
+  },
+  {
+    label: 'Batalkan',
+    value: 'cancel',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showCancel)
+    },
+    icon: 'i-lucide-circle-x',
+  },
+  {
+    label: 'Hapus',
+    value: 'remove',
+    groups: ['registration'],
+    onClick: () => {
+      proceedItem(ActionEvents.showConfirmDelete)
+    },
+    icon: 'i-lucide-trash',
+  },
+]
+
+const noneLinkItems: LinkItem[] = [
+   {
+    label: 'Nothing',
+    value: 'nothing',
+    icon: 'i-lucide-file',
+  },
+]
+
+linkItemsFiltered.value = [...baseLinkItems]
+
+function proceedItem(action: string) {
+  recId.value = props.rec.id || 0
+  recItem.value = props.rec
+  recAction.value = action
+}
+
+function getLinks() {
+  switch (activeServicePosition.value) {
+    case 'med':
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('medical'))
+      break
+    case 'reg':
+      linkItemsFiltered.value = baseLinkItems.filter((item) => item.groups?.includes('registration'))
+      break
+    default:
+      linkItemsFiltered.value = noneLinkItems
+      break
+  }
+}
+
+watch(activeServicePosition, () => {
+  getLinks()
+})
+
+onMounted(() => {
+  getLinks()
+})
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton
+          size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
+        >
+          <Icon
+            name="i-lucide-chevrons-up-down"
+            class="ml-auto size-4"
+          />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end"
+      >
+        <DropdownMenuGroup>
+          <DropdownMenuItem
+            v-for="item in linkItemsFiltered"
+            :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700"
+            @click="item.onClick"
+            @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null"
+          >
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/app/encounter/entry-form-prev-00.vue

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

app/components/app/encounter/entry-form-prev-01.vue

@@ -0,0 +1,699 @@
+<script setup lang="ts">
+// Components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import * as CB from '~/components/pub/my-ui/combobox'
+
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
+import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
+
+// Types
+import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
+import type { PatientEntity } from '~/models/patient'
+
+// Helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+import type { Doctor } from '~/models/doctor'
+
+// References
+import { paymentMethodCodes } from '~/const/key-val/common'
+
+// App things
+import { genEncounter, type Encounter } from '~/models/encounter'
+
+// Props
+const props = defineProps<{
+  mode?: string
+  isLoading?: boolean
+  isReadonly?: boolean
+  isSepValid?: boolean
+  isMemberValid?: boolean
+  isCheckingSep?: boolean
+  doctorItems?: CB.Item[]
+  selectedDoctor: Doctor
+  // subSpecialist?: any[]
+  // specialists?: TreeItem[]
+  payments?: any[]
+  participantGroups?: any[]
+  seps: any[]
+  patient?: PatientEntity | null | undefined
+  objects?: any
+}>()
+
+// Model
+const model = defineModel<Encounter>()
+model.value = genEncounter()
+
+// Common preparation
+const defaultCBItems = [{ label: 'Pilih', value: '' }]
+const paymentMethodItems = ref<any>({})
+
+// Emit preparation
+const emit = defineEmits<{
+  (e: 'onSelectDoctor', code: string): void
+  (e: 'event', menu: string, value?: any): void
+  (e: 'fetch', value?: any): void
+}>()
+
+// Validation schema
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounterFormData>({
+  validationSchema: toTypedSchema(IntegrationEncounterSchema),
+})
+
+// Bind fields and extract attrs
+const [doctorCode, doctorCodeAttrs] = defineField('doctor_code')
+const [unitCode, unitCodeAttrs] = defineField('unit_code')
+const [registerDate, registerDateAttrs] = defineField('registerDate')
+const [paymentMethodCode, paymentMethodCodeAttrs] = defineField('paymentMethod_code')
+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 [sepFile, sepFileAttrs] = defineField('sepFile')
+const [sippFile, sippFileAttrs] = defineField('sippFile')
+const patientId = ref('')
+const sepReference = ref('')
+const sepControlDate = ref('')
+const sepTrafficStatus = ref('')
+const diagnosis = ref('')
+const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
+const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
+
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const mode = props.mode !== undefined ? props.mode : 'add'
+// SEP validation state from props
+const isSepValid = computed(() => props.isSepValid || false)
+const isCheckingSep = computed(() => props.isCheckingSep || false)
+const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
+const isDateLoading = ref(false)
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const sepFileReview = ref<any>(null)
+const sippFileReview = ref<any>(null)
+const unitFullName = ref('') // Unit, specialist, subspecialist
+const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+
+if (mode === 'add') {
+  // Set default sepDate to current date in YYYY-MM-DD format
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  registerDate.value = `${year}-${month}-${day}`
+}
+
+watch(
+  () => props.selectedDoctor,
+  (doctor) => {
+    unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
+    model.value!.unit_code = doctor.unit_code || ''
+    model.value!.specialist_code = doctor.specialist_code || ''
+    model.value!.subspecialist_code = doctor.subspecialist_code || ''
+  },
+)
+
+// 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 || ''
+      doctorCode.value = objects?.doctorCode || ''
+      paymentMethodCode.value = objects?.paymentMethodCode || ''
+      patientCategory.value = objects?.patientCategory || ''
+      cardNumber.value = objects?.cardNumber || ''
+      sepType.value = objects?.sepType || ''
+      sepNumber.value = objects?.sepNumber || ''
+      sepFileReview.value = objects?.sepFileReview || ''
+      sippFileReview.value = objects?.sippFileReview || ''
+      isDateLoading.value = true
+      setTimeout(() => {
+        registerDate.value = objects?.registerDate || ''
+        isDateLoading.value = false
+      }, 100)
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.patient,
+  (patient) => {
+    if (patient && Object.keys(patient).length > 0) {
+      patientId.value = patient?.id ? String(patient.id) : ''
+      patientName.value = patient?.person?.name || ''
+      nationalIdentity.value = patient?.person?.residentIdentityNumber || ''
+      medicalRecordNumber.value = patient?.number || ''
+    }
+  },
+  { deep: true, immediate: true },
+)
+
+watch(
+  () => props.isSepValid,
+  (value) => {
+    if (!value) return
+    const objects = props.objects
+    if (objects && Object.keys(objects).length > 0) {
+      sepReference.value = objects?.sepReference || ''
+      sepControlDate.value = objects?.sepControlDate || ''
+      sepTrafficStatus.value = objects?.sepTrafficStatus || ''
+      diagnosis.value = objects?.diagnosis || ''
+    }
+  },
+)
+
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+watch(debouncedCardNumber, (newValue) => {
+  emit('event', 'member-changed', newValue)
+})
+
+function onAddSep() {
+  const formValues = {
+    patientId: patientId.value || '',
+    doctorCode: doctorCode.value,
+    registerDate: registerDate.value,
+    cardNumber: cardNumber.value,
+    paymentMethodCode: paymentMethodCode.value,
+    sepFile: sepFile.value,
+    sippFile: sippFile.value,
+    sepType: sepType.value,
+  }
+  emit('event', 'add-sep', formValues)
+}
+
+function onSearchSep() {
+  emit('event', 'search-sep', { cardNumber: cardNumber.value })
+}
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  let payload: any = values
+  if (props.mode === 'edit') {
+    payload = {
+      ...payload,
+      sepFileReview: sepFileReview.value,
+      sippFileReview: sippFileReview.value,
+    }
+  }
+  emit('event', 'save', payload)
+})
+
+function openFile(path: string) {
+  window.open(path, '_blank')
+}
+
+function submitForm() {
+  // Trigger form submit using native form submit
+  // This will trigger validation and onSubmit handler
+  if (formRef.value) {
+    formRef.value.requestSubmit()
+  } else {
+    // Fallback: directly call onSubmit handler
+    // Create a mock event object
+    const mockEvent = {
+      preventDefault: () => {},
+      target: formRef.value || {},
+    } as SubmitEvent
+
+    // Call onSubmit directly
+    onSubmit(mockEvent)
+  }
+}
+
+defineExpose({
+  submitForm,
+})
+
+onMounted(() => {
+  const isPaymentMethodVclaim = true
+  paymentMethodItems.value = isPaymentMethodVclaim ? props.payments : CB.recStrToItem(paymentMethodCodes)
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form
+      ref="formRef"
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
+      <!-- Data Pasien -->
+      <div class="flex flex-col gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="flex items-center gap-2">
+          <span class="text-sm">sudah pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'search')"
+          >
+            <Icon
+              name="i-lucide-search"
+              class="h-5 w-5"
+            />
+            Cari Pasien
+          </Button>
+          <span class="text-sm">belum pernah terdaftar sebagai pasien?</span>
+          <Button
+            variant="outline"
+            type="button"
+            class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+            @click="emit('event', 'add')"
+          >
+            <Icon
+              name="i-lucide-plus"
+              class="h-5 w-5"
+            />
+            Tambah Pasien Baru
+          </Button>
+        </div>
+      </div>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">Nama Pasien</DE.Label>
+          <DE.Field :errMessage="errors.patientName">
+            <Input
+              id="patientName"
+              v-model="patientName"
+              v-bind="patientNameAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">NIK</DE.Label>
+          <DE.Field :errMessage="errors.nationalIdentity">
+            <Input
+              id="nationalIdentity"
+              v-model="nationalIdentity"
+              v-bind="nationalIdentityAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">No. RM</DE.Label>
+          <DE.Field :errMessage="errors.medicalRecordNumber">
+            <Input
+              id="medicalRecordNumber"
+              v-model="medicalRecordNumber"
+              v-bind="medicalRecordNumberAttrs"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <hr />
+
+      <!-- Data Kunjungan -->
+      <h3 class="text-lg font-semibold">Data Kunjungan</h3>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Dokter
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.doctor_code">
+            <CB.Combobox
+              id="doctorCode"
+              v-model="doctorCode"
+              v-bind="doctorCodeAttrs"
+              :items="[...defaultCBItems, ...doctorItems]"
+              :is-disabled="isLoading || isReadonly"
+              placeholder="Pilih Dokter"
+              search-placeholder="Cari Dokter"
+              empty-message="Dokter tidak ditemukan"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Spesialis / Subspesialis
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.unit_code">
+            <Input
+              :value="unitFullName"
+              :disabled="true"
+            />
+          </DE.Field>
+        </DE.Cell>
+
+        <DE.Cell>
+          <DE.Label height="compact">
+            Tanggal Daftar
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
+            <DatepickerSingle
+              v-if="!isDateLoading"
+              id="registerDate"
+              v-model="registerDate"
+              v-bind="registerDateAttrs"
+              placeholder="Pilih tanggal"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
+            Jenis Pembayaran
+            <span class="text-red-500">*</span>
+          </DE.Label>
+          <DE.Field :errMessage="errors.paymentMethod_code">
+            <CB.Combobox
+              id="paymentMethodCode"
+              v-model="paymentMethodCode"
+              v-bind="paymentMethodCodeAttrs"
+              :items="paymentMethodItems"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Jenis Pembayaran"
+            />
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+
+      <!-- BPJS Fields (conditional) -->
+      <template v-if="isInsurancePayment">
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              Kelompok Peserta
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.patientCategory">
+              <Select
+                id="patientCategory"
+                v-model="patientCategory"
+                v-bind="patientCategoryAttrs"
+                :items="participantGroups || []"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Kelompok Peserta"
+              />
+            </DE.Field>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. Kartu BPJS
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.cardNumber">
+              <Input
+                id="cardNumber"
+                v-model="cardNumber"
+                v-bind="cardNumberAttrs"
+                :disabled="isLoading || isReadonly"
+                placeholder="Masukkan nomor kartu BPJS"
+              />
+            </DE.Field>
+            <div
+              v-if="isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <div
+              v-if="!isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-x"
+                class="h-4 w-4 bg-red-500 text-white"
+              />
+              <span class="text-sm text-red-500">Tidak aktif</span>
+            </div>
+          </DE.Cell>
+
+          <DE.Cell>
+            <DE.Label height="compact">
+              Jenis SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepType">
+              <Select
+                id="sepType"
+                v-model="sepType"
+                v-bind="sepTypeAttrs"
+                :items="seps"
+                :disabled="isLoading || isReadonly"
+                placeholder="Pilih Jenis SEP"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <DE.Label height="compact">
+              No. SEP
+              <span class="text-red-500">*</span>
+            </DE.Label>
+            <DE.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 || isSepValid"
+                />
+                <Button
+                  v-if="!isSepValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  :disabled="isCheckingSep || isLoading || isReadonly"
+                  @click="onAddSep"
+                >
+                  <Icon
+                    v-if="isCheckingSep"
+                    name="i-lucide-loader-2"
+                    class="h-4 w-4 animate-spin"
+                  />
+                  <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
+                </Button>
+                <Button
+                  v-if="isMemberValid"
+                  variant="outline"
+                  type="button"
+                  class="bg-primary"
+                  size="sm"
+                  @click="onSearchSep"
+                >
+                  <Icon
+                    name="i-lucide-search"
+                    class="h-4 w-4"
+                  />
+                </Button>
+              </div>
+            </DE.Field>
+            <div
+              v-if="isSepValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sepFile"
+              label="Dokumen SEP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sepFile"
+              v-bind="sepFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sepFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sepFileReview.filePath)"
+              >
+                {{ sepFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+
+          <DE.Cell>
+            <FileUpload
+              field-name="sippFile"
+              label="Dokumen SIPP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sippFile"
+              v-bind="sippFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sippFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sippFileReview.filePath)"
+              >
+                {{ sippFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+
+      <template v-if="isSepValid">
+        <hr />
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepReference"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">No. Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepNumber"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">
+              Tanggal Rujukan / Surat Kontrol
+              <span class="ml-1 text-red-500">*</span>
+            </Label>
+            <DE.Field>
+              <DatepickerSingle
+                id="sepControlDate"
+                v-model="sepControlDate"
+                :disabled="true"
+                placeholder="Pilih tanggal sep"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell :col-span="2">
+            <Label height="compact">Diagnosis</Label>
+            <DE.Field>
+              <Input
+                id="diagnosis"
+                v-model="diagnosis"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">Status Kecelakaan</Label>
+            <DE.Field>
+              <Input
+                id="sepTrafficStatus"
+                v-model="sepTrafficStatus"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+    </form>
+  </div>
+</template>

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

@@ -1,42 +1,58 @@
 <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 * as DE from '~/components/pub/my-ui/doc-entry'
 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 * as CB from '~/components/pub/my-ui/combobox'
+
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
-import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
 import FileUpload from '~/components/pub/my-ui/form/file-field.vue'
 
 // Types
 import { IntegrationEncounterSchema, type IntegrationEncounterFormData } from '~/schemas/integration-encounter.schema'
 import type { PatientEntity } from '~/models/patient'
-import type { TreeItem } from '~/components/pub/my-ui/select-tree/type'
 
 // Helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+import { refDebounced } from '@vueuse/core'
+import type { Doctor } from '~/models/doctor'
 
+// References
+import { paymentMethodCodes } from '~/const/key-val/common'
+
+// App things
+import { genEncounter, type Encounter } from '~/models/encounter'
+
+// Props
 const props = defineProps<{
+  mode?: string
   isLoading?: boolean
   isReadonly?: boolean
   isSepValid?: boolean
+  isMemberValid?: boolean
   isCheckingSep?: boolean
-  doctor?: any[]
-  subSpecialist?: any[]
-  specialists?: TreeItem[]
-  payments: any[]
+  doctorItems?: CB.Item[]
+  selectedDoctor: Doctor
+  // subSpecialist?: any[]
+  // specialists?: TreeItem[]
+  payments?: any[]
   participantGroups?: any[]
   seps: any[]
   patient?: PatientEntity | null | undefined
   objects?: any
 }>()
 
+// Model
+const model = defineModel<Encounter>()
+model.value = genEncounter()
+
+// Common preparation
+const defaultCBItems = [{ label: 'Pilih', value: '' }]
+
+// Emit preparation
 const emit = defineEmits<{
+  (e: 'onSelectDoctor', code: string): void
   (e: 'event', menu: string, value?: any): void
   (e: 'fetch', value?: any): void
 }>()
@@ -47,10 +63,10 @@ const { handleSubmit, errors, defineField, meta } = useForm<IntegrationEncounter
 })
 
 // Bind fields and extract attrs
-const [doctorId, doctorIdAttrs] = defineField('doctorId')
-const [subSpecialistId, subSpecialistIdAttrs] = defineField('subSpecialistId')
+const [doctorCode, doctorCodeAttrs] = defineField('doctor_code')
+const [unitCode, unitCodeAttrs] = defineField('unit_code')
 const [registerDate, registerDateAttrs] = defineField('registerDate')
-const [paymentType, paymentTypeAttrs] = defineField('paymentType')
+const [paymentMethodCode, paymentMethodCodeAttrs] = defineField('paymentMethod_code')
 const [patientCategory, patientCategoryAttrs] = defineField('patientCategory')
 const [cardNumber, cardNumberAttrs] = defineField('cardNumber')
 const [sepType, sepTypeAttrs] = defineField('sepType')
@@ -58,44 +74,48 @@ const [sepNumber, sepNumberAttrs] = defineField('sepNumber')
 const [patientName, patientNameAttrs] = defineField('patientName')
 const [nationalIdentity, nationalIdentityAttrs] = defineField('nationalIdentity')
 const [medicalRecordNumber, medicalRecordNumberAttrs] = defineField('medicalRecordNumber')
+const [sepFile, sepFileAttrs] = defineField('sepFile')
+const [sippFile, sippFileAttrs] = defineField('sippFile')
 const patientId = ref('')
-
+const sepReference = ref('')
+const sepControlDate = ref('')
+const sepTrafficStatus = ref('')
+const diagnosis = ref('')
+const noteReference = ref('Hanya diperlukan jika pembayaran jenis JKN')
+const noteFile = ref('Gunakan file [.pdf, .jpg, .png] dengan ukuran maksimal 1MB')
+const mode = props.mode !== undefined ? props.mode : 'add'
 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 isSepValid = computed(() => props.isSepValid || false) // SEP validation state from props
 const isCheckingSep = computed(() => props.isCheckingSep || false)
+const isInsurancePayment = computed(() => ['insurance', 'jkn'].includes(paymentMethodCode.value))
+const isDateLoading = ref(false)
+const debouncedSepNumber = refDebounced(sepNumber, 500)
+const debouncedCardNumber = refDebounced(cardNumber, 500)
+const sepFileReview = ref<any>(null)
+const sippFileReview = ref<any>(null)
+const unitFullName = ref('') // Unit, specialist, subspecialist
+const formRef = ref<HTMLFormElement | null>(null) // Expose submit method for parent component
+const paymentMethodItems = CB.recStrToItem(paymentMethodCodes)
 
-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)
+if (mode === 'add') {
+  // Set default sepDate to current date in YYYY-MM-DD format
+  const today = new Date()
+  const year = today.getFullYear()
+  const month = String(today.getMonth() + 1).padStart(2, '0')
+  const day = String(today.getDate()).padStart(2, '0')
+  registerDate.value = `${year}-${month}-${day}`
 }
 
-// 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 })
-  }
-})
-
-// Watch SEP number changes to notify parent
-watch(sepNumber, (newValue) => {
-  emit('event', 'sep-number-changed', newValue)
-})
+watch(
+  () => props.selectedDoctor,
+  (doctor) => {
+    unitFullName.value = doctor.subspecialist?.name ?? doctor.specialist?.name ?? doctor.unit?.name ?? 'tidak diketahui'
+    model.value!.unit_code = doctor.unit_code || ''
+    model.value!.specialist_code = doctor.specialist_code || ''
+    model.value!.subspecialist_code = doctor.subspecialist_code || ''
+  },
+)
 
 // Sync props to form fields
 watch(
@@ -105,14 +125,21 @@ watch(
       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 || ''
+      doctorCode.value = objects?.doctorCode || ''
       patientCategory.value = objects?.patientCategory || ''
       cardNumber.value = objects?.cardNumber || ''
       sepType.value = objects?.sepType || ''
       sepNumber.value = objects?.sepNumber || ''
+      sepFileReview.value = objects?.sepFileReview || ''
+      sippFileReview.value = objects?.sippFileReview || ''
+      if (objects.paymentType) {
+        paymentMethodCode.value = objects.paymentType || ''
+      }
+      isDateLoading.value = true
+      setTimeout(() => {
+        registerDate.value = objects?.registerDate || ''
+        isDateLoading.value = false
+      }, 100)
     }
   },
   { deep: true, immediate: true },
@@ -131,55 +158,78 @@ watch(
   { deep: true, immediate: true },
 )
 
+watch(
+  () => props.isSepValid,
+  (value) => {
+    if (!value) return
+    const objects = props.objects
+    if (objects && Object.keys(objects).length > 0) {
+      sepReference.value = objects?.sepReference || ''
+      sepControlDate.value = objects?.sepControlDate || ''
+      sepTrafficStatus.value = objects?.sepTrafficStatus || ''
+      diagnosis.value = objects?.diagnosis || ''
+    }
+  },
+)
+
+watch(debouncedSepNumber, (newValue) => {
+  emit('event', 'sep-number-changed', newValue)
+})
+
+watch(debouncedCardNumber, (newValue) => {
+  emit('event', 'member-changed', newValue)
+})
+
 function onAddSep() {
   const formValues = {
     patientId: patientId.value || '',
-    doctorCode: doctorId.value,
-    subSpecialistCode: subSpecialistId.value,
+    doctorCode: doctorCode.value,
     registerDate: registerDate.value,
     cardNumber: cardNumber.value,
-    paymentType: paymentType.value,
-    sepType: sepType.value
+    paymentMethodCode: paymentMethodCode.value,
+    unitCode: props.selectedDoctor?.unit?.code || '',
+    sepFile: sepFile.value,
+    sippFile: sippFile.value,
+    sepType: sepType.value,
   }
   emit('event', 'add-sep', formValues)
 }
 
+function onSearchSep() {
+  emit('event', 'search-sep', { cardNumber: cardNumber.value })
+}
+
 // Submit handler
 const onSubmit = handleSubmit((values) => {
-  console.log('✅ Validated form values:', JSON.stringify(values, null, 2))
-  emit('event', 'save', values)
+  let payload: any = values
+  if (props.mode === 'edit') {
+    payload = {
+      ...payload,
+      sepFileReview: sepFileReview.value,
+      sippFileReview: sippFileReview.value,
+    }
+  }
+  emit('event', 'save', payload)
 })
 
-// Expose submit method for parent component
-const formRef = ref<HTMLFormElement | null>(null)
+function openFile(path: string) {
+  window.open(path, '_blank')
+}
 
 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)
   }
 }
@@ -229,149 +279,148 @@ defineExpose({
         </div>
       </div>
 
-      <Block
+      <DE.Block
         labelSize="thin"
         class="!pt-0"
         :colCount="3"
         :cellFlex="false"
       >
-        <Cell>
-          <Label height="compact">Nama Pasien</Label>
-          <Field :errMessage="errors.patientName">
+        <DE.Cell>
+          <DE.Label height="compact">Nama Pasien</DE.Label>
+          <DE.Field :errMessage="errors.patientName">
             <Input
               id="patientName"
               v-model="patientName"
               v-bind="patientNameAttrs"
               :disabled="true"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">NIK</Label>
-          <Field :errMessage="errors.nationalIdentity">
+        <DE.Cell>
+          <DE.Label height="compact">NIK</DE.Label>
+          <DE.Field :errMessage="errors.nationalIdentity">
             <Input
               id="nationalIdentity"
               v-model="nationalIdentity"
               v-bind="nationalIdentityAttrs"
               :disabled="true"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">No. RM</Label>
-          <Field :errMessage="errors.medicalRecordNumber">
+        <DE.Cell>
+          <DE.Label height="compact">No. RM</DE.Label>
+          <DE.Field :errMessage="errors.medicalRecordNumber">
             <Input
               id="medicalRecordNumber"
               v-model="medicalRecordNumber"
               v-bind="medicalRecordNumberAttrs"
               :disabled="true"
             />
-          </Field>
-        </Cell>
-      </Block>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
       <hr />
 
       <!-- Data Kunjungan -->
       <h3 class="text-lg font-semibold">Data Kunjungan</h3>
 
-      <Block
+      <DE.Block
         labelSize="thin"
         class="!pt-0"
         :colCount="3"
         :cellFlex="false"
       >
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.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"
+          </DE.Label>
+          <DE.Field :errMessage="errors.doctor_code">
+            <CB.Combobox
+              id="doctorCode"
+              v-model="doctorCode"
+              v-bind="doctorCodeAttrs"
+              :items="[...defaultCBItems, ...doctorItems]"
               :is-disabled="isLoading || isReadonly"
               placeholder="Pilih Dokter"
               search-placeholder="Cari Dokter"
               empty-message="Dokter tidak ditemukan"
+              @update:model-value="(value: any) => emit('onSelectDoctor', value)"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
 
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.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"
+          </DE.Label>
+          <DE.Field :errMessage="errors.unit_code">
+            <Input
+              :value="unitFullName"
+              :disabled="true"
             />
-          </Field>
-        </Cell>
-      </Block>
+          </DE.Field>
+        </DE.Cell>
 
-      <Block
-        labelSize="thin"
-        class="!pt-0"
-        :colCount="3"
-        :cellFlex="false"
-      >
-        <Cell>
-          <Label height="compact">
+        <DE.Cell>
+          <DE.Label height="compact">
             Tanggal Daftar
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.registerDate">
+          </DE.Label>
+          <DE.Field :errMessage="errors.registerDate">
             <DatepickerSingle
+              v-if="!isDateLoading"
               id="registerDate"
               v-model="registerDate"
               v-bind="registerDateAttrs"
               placeholder="Pilih tanggal"
             />
-          </Field>
-        </Cell>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
-        <Cell>
-          <Label height="compact">
+      <DE.Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <DE.Cell>
+          <DE.Label height="compact">
             Jenis Pembayaran
             <span class="text-red-500">*</span>
-          </Label>
-          <Field :errMessage="errors.paymentType">
+          </DE.Label>
+          <DE.Field :errMessage="errors.paymentMethod_code">
             <Select
-              id="paymentType"
-              v-model="paymentType"
-              v-bind="paymentTypeAttrs"
-              :items="payments"
-              :disabled="isLoading || isReadonly"
+              id="paymentMethodCode"
+              v-model="paymentMethodCode"
+              v-bind="paymentMethodCodeAttrs"
+              :items="payments || []"
+              :disabled="isLoading || isReadonly || mode === 'edit'"
               placeholder="Pilih Jenis Pembayaran"
             />
-          </Field>
-        </Cell>
-      </Block>
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
 
       <!-- BPJS Fields (conditional) -->
-      <template v-if="isJKNPayment">
-        <Block
+      <template v-if="isInsurancePayment">
+        <DE.Block
           labelSize="thin"
           class="!pt-0"
           :colCount="3"
           :cellFlex="false"
         >
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               Kelompok Peserta
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.patientCategory">
+            </DE.Label>
+            <DE.Field :errMessage="errors.patientCategory">
               <Select
                 id="patientCategory"
                 v-model="patientCategory"
@@ -380,15 +429,18 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Pilih Kelompok Peserta"
               />
-            </Field>
-          </Cell>
+            </DE.Field>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
 
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               No. Kartu BPJS
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.cardNumber">
+            </DE.Label>
+            <DE.Field :errMessage="errors.cardNumber">
               <Input
                 id="cardNumber"
                 v-model="cardNumber"
@@ -396,15 +448,35 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Masukkan nomor kartu BPJS"
               />
-            </Field>
-          </Cell>
+            </DE.Field>
+            <div
+              v-if="isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <div
+              v-if="!isMemberValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-x"
+                class="h-4 w-4 bg-red-500 text-white"
+              />
+              <span class="text-sm text-red-500">Tidak aktif</span>
+            </div>
+          </DE.Cell>
 
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               Jenis SEP
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.sepType">
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepType">
               <Select
                 id="sepType"
                 v-model="sepType"
@@ -413,22 +485,22 @@ defineExpose({
                 :disabled="isLoading || isReadonly"
                 placeholder="Pilih Jenis SEP"
               />
-            </Field>
-          </Cell>
-        </Block>
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
 
-        <Block
+        <DE.Block
           labelSize="thin"
           class="!pt-0"
           :colCount="3"
           :cellFlex="false"
         >
-          <Cell>
-            <Label height="compact">
+          <DE.Cell>
+            <DE.Label height="compact">
               No. SEP
               <span class="text-red-500">*</span>
-            </Label>
-            <Field :errMessage="errors.sepNumber">
+            </DE.Label>
+            <DE.Field :errMessage="errors.sepNumber">
               <div class="flex gap-2">
                 <Input
                   id="sepNumber"
@@ -436,7 +508,7 @@ defineExpose({
                   v-bind="sepNumberAttrs"
                   placeholder="Tambah SEP terlebih dahulu"
                   class="flex-1"
-                  :disabled="isLoading || isReadonly"
+                  :disabled="isLoading || isReadonly || isSepValid"
                 />
                 <Button
                   v-if="!isSepValid"
@@ -452,41 +524,171 @@ defineExpose({
                     name="i-lucide-loader-2"
                     class="h-4 w-4 animate-spin"
                   />
-                  <span v-else>+</span>
+                  <Icon
+                    v-else
+                    name="i-lucide-plus"
+                    class="h-4 w-4"
+                  />
                 </Button>
                 <Button
-                  v-else
+                  v-if="isMemberValid"
                   variant="outline"
                   type="button"
-                  class="bg-green-500 text-white hover:bg-green-600"
+                  class="bg-primary"
                   size="sm"
-                  disabled
+                  @click="onSearchSep"
                 >
                   <Icon
-                    name="i-lucide-check"
+                    name="i-lucide-search"
                     class="h-4 w-4"
                   />
                 </Button>
               </div>
-            </Field>
-          </Cell>
+            </DE.Field>
+            <div
+              v-if="isSepValid"
+              class="mt-1 flex items-center gap-2"
+            >
+              <Icon
+                name="i-lucide-badge-check"
+                class="h-4 w-4 bg-green-500 text-white"
+              />
+              <span class="text-sm text-green-500">Aktif</span>
+            </div>
+            <span class="text-sm text-gray-500">
+              {{ noteReference }}
+            </span>
+          </DE.Cell>
 
-          <FileUpload
-            field-name="sepFile"
-            label="Dokumen SEP"
-            placeholder="Unggah dokumen SEP"
-            :accept="['pdf', 'jpg', 'png']"
-            :max-size-mb="1"
-          />
+          <DE.Cell>
+            <FileUpload
+              field-name="sepFile"
+              label="Dokumen SEP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sepFile"
+              v-bind="sepFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sepFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sepFileReview.filePath)"
+              >
+                {{ sepFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
 
-          <FileUpload
-            field-name="sippFile"
-            label="Dokumen SIPP"
-            placeholder="Unggah dokumen SIPP"
-            :accept="['pdf', 'jpg', 'png']"
-            :max-size-mb="1"
-          />
-        </Block>
+          <DE.Cell>
+            <FileUpload
+              field-name="sippFile"
+              label="Dokumen SIPP"
+              placeholder="Pilih file"
+              :accept="['pdf', 'jpg', 'png']"
+              :max-size-mb="1"
+              v-model="sippFile"
+              v-bind="sippFileAttrs"
+              @file-selected="() => {}"
+            />
+            <span class="mt-1 text-sm text-gray-500">
+              {{ noteFile }}
+            </span>
+            <p v-if="sippFileReview">
+              <a
+                class="mt-1 text-sm capitalize text-blue-500"
+                href="#"
+                @click="openFile(sippFileReview.filePath)"
+              >
+                {{ sippFileReview?.fileName }}
+              </a>
+            </p>
+          </DE.Cell>
+        </DE.Block>
+      </template>
+
+      <template v-if="isSepValid">
+        <hr />
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell>
+            <Label height="compact">Dengan Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepReference"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">No. Rujukan / Surat Kontrol</Label>
+            <DE.Field>
+              <Input
+                id="sepReference"
+                v-model="sepNumber"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">
+              Tanggal Rujukan / Surat Kontrol
+              <span class="ml-1 text-red-500">*</span>
+            </Label>
+            <DE.Field>
+              <DatepickerSingle
+                id="sepControlDate"
+                v-model="sepControlDate"
+                :disabled="true"
+                placeholder="Pilih tanggal sep"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
+
+        <DE.Block
+          labelSize="thin"
+          class="!pt-0"
+          :colCount="3"
+          :cellFlex="false"
+        >
+          <DE.Cell :col-span="2">
+            <Label height="compact">Diagnosis</Label>
+            <DE.Field>
+              <Input
+                id="diagnosis"
+                v-model="diagnosis"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+
+          <DE.Cell>
+            <Label height="compact">Status Kecelakaan</Label>
+            <DE.Field>
+              <Input
+                id="sepTrafficStatus"
+                v-model="sepTrafficStatus"
+                :disabled="true"
+              />
+            </DE.Field>
+          </DE.Cell>
+        </DE.Block>
       </template>
     </form>
   </div>

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

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+// Components
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+// Props
+const props = defineProps<{
+  payments: any[]
+  units: any[]
+  visits: any[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'search', values: any): void
+  (e: 'reset'): void
+}>()
+
+const paymentItem = ref<any>(null)
+const unitItem = ref<any>(null)
+const visitItem = ref<any>(null)
+
+function handleReset() {
+  paymentItem.value = null
+  unitItem.value = null
+  visitItem.value = null
+  emit('reset')
+}
+
+function handleSearch() {
+  emit('search', {
+    'paymentMethod-code': paymentItem.value,
+    'unit-code': unitItem.value,
+    visit: visitItem.value,
+  })
+}
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <DE.Block
+      labelSize="thin"
+      class="!pt-0"
+      :colCount="1"
+      :cellFlex="false"
+    >
+      <DE.Cell>
+        <DE.Label height="compact">Cara Bayar</DE.Label>
+        <DE.Field>
+          <Select
+            id="paymentMethodCode"
+            v-model="paymentItem"
+            :items="payments || []"
+            placeholder="Pilih Jenis Pembayaran"
+          />
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label height="compact">Poliklinik</DE.Label>
+        <DE.Field>
+          <Select
+            id="unit"
+            v-model="unitItem"
+            :items="units || []"
+            placeholder="Pilih Poliklinik"
+          />
+        </DE.Field>
+      </DE.Cell>
+
+      <DE.Cell>
+        <DE.Label height="compact">Kunjungan</DE.Label>
+        <DE.Field>
+          <Select
+            id="visit"
+            v-model="visitItem"
+            :items="visits || []"
+            placeholder="Pilih Kunjungan"
+          />
+        </DE.Field>
+      </DE.Cell>
+    </DE.Block>
+
+    <div class="flex w-full justify-end gap-2">
+      <Button
+        variant="outline"
+        type="button"
+        class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+        @click="handleReset"
+      >
+        <Icon
+          name="i-lucide-rotate-ccw"
+          class="h-5 w-5"
+        />
+        Reset
+      </Button>
+      <Button
+        variant="default"
+        type="button"
+        class="h-[40px]"
+        @click="handleSearch"
+      >
+        <Icon
+          name="i-lucide-check"
+          class="h-5 w-5"
+        />
+        Terapkan
+      </Button>
+    </div>
+  </div>
+</template>

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

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

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

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

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

@@ -1,25 +1,19 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 import type { Encounter } from '~/models/encounter'
-import { educationCodes, genderCodes } from '~/lib/constants'
+import { formatAddress } from '~/models/person-address'
+import { educationCodes, encounterClassCodes, genderCodes } from '~/lib/constants'
 import { getAge } from '~/lib/date'
 
 type SmallDetailDto = Encounter
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
+const action = defineAsyncComponent(() => import('./dropdown-action.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
+const vclaimSepInfo = defineAsyncComponent(() => import('./vclaim-sep-info.vue'))
+const vclaimSepNone = defineAsyncComponent(() => import('./vclaim-sep-none.vue'))
 
-export const config: Config = {
-  cols: [
-    {},
-    {},
-    {},
-    { width: 160 },
-    {},
-    { width: 70 },
-    { },
-    { width: 50 },
-  ],
+export const defaultConfig: Config = {
+  cols: [{}, {}, {}, { width: 160 }, {}, { width: 70 }, {}, { width: 50 }],
 
   headers: [
     [
@@ -94,11 +88,146 @@ export const config: Config = {
     birth_date: (rec: unknown): unknown => {
       const recX = rec as Encounter
       if (recX.patient?.person?.birthDate) {
-        return '' +
-          '<div>' + (recX.patient.person.birthDate as string).substring(0, 10) + ' / </div>' +
+        return (
+          '' +
+          '<div>' +
+          (recX.patient.person.birthDate as string).substring(0, 10) +
+          ' / </div>' +
           getAge(recX.patient.person.birthDate as string).extFormat
+        )
       }
       return '-'
     },
   },
 }
+
+export const ambulatoryConfig: Config = {
+  cols: [{}, {}, {}, { width: 160 }, {}, { width: 70 }, {}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'TANGGAL' },
+      { label: 'NO. RM' },
+      { label: 'NO. BILL' },
+      { label: 'NAMA PASIEN' },
+      { label: 'L/P' },
+      { label: 'ALAMAT' },
+      { label: 'KLINIK' },
+      { label: 'CARA BAYAR' },
+      { label: 'RUJUKAN' },
+      { label: 'KET. RUJUKAN' },
+      { label: 'ASAL' },
+      { label: 'SEP' },
+      { label: 'STATUS', classVal: '!text-center' },
+      { label: '' },
+    ],
+  ],
+
+  keys: [
+    'registeredAt',
+    'patientNumber',
+    'trxNumber',
+    'patient.person.name',
+    'gender',
+    'address',
+    'clinic',
+    'paymentMethod_code',
+    'referral',
+    'note',
+    'class_code',
+    'sep',
+    'status',
+    'action',
+  ],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    registeredAt: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      const currentDate = recX.registeredAt ? (recX.registeredAt as string) : (recX as any).createdAt
+      return currentDate ? currentDate.substring(0, 10) : '-'
+    },
+    patientNumber: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.patient?.number || '-'
+    },
+    trxNumber: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.trx_number || '-'
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      if (recX.patient?.person?.gender_code) {
+        return genderCodes[recX.patient.person.gender_code]
+      }
+      return '-'
+    },
+    address: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      const addresses = recX.patient?.person?.addresses || []
+      const resident = addresses?.find((addr) => addr.locationType_code === 'domicile')
+      const text = resident ? formatAddress(resident) : '-'
+      return text.length > 20 ? text.substring(0, 17) + '...' : text
+    },
+    clinic: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      return recX.unit?.name || recX.refSource_name || '-'
+    },
+    paymentMethod_code: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      return (recX.paymentMethod_code || '-').toUpperCase()
+    },
+    referral: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX?.vclaimReference?.poliRujukan || '-'
+    },
+    note: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX?.vclaimReference?.ppkDirujuk || '-'
+    },
+    class_code: (rec: unknown): unknown => {
+      const recX = rec as Encounter
+      return recX.class_code ? encounterClassCodes[recX.class_code] : '-'
+    },
+  },
+
+  components: {
+    sep(rec: any) {
+      if (rec?.paymentMethod_code !== 'jkn') {
+        return {
+          rec: rec as object,
+          component: vclaimSepNone,
+        } as RecComponent
+      }
+      const res: RecComponent = {
+        rec: rec as object,
+        component: vclaimSepInfo,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as Encounter
+      if (!recX.status_code) {
+        recX.status_code = 'new'
+      }
+      const res: RecComponent = {
+        idx,
+        rec: recX,
+        component: statusBadge,
+      }
+      return res
+    },
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+}

app/components/app/encounter/list.vue

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

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

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

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

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

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

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

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

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

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

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

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

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

app/components/app/encounter/vclaim-sep-info.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rec: any
+}>()
+
+const recSepId = inject<Ref<number>>('rec_sep_id')!
+const recSepMenu = inject<Ref<string>>('rec_sep_menu')!
+const recSepSubMenu = inject<Ref<string>>('rec_sep_sub_menu')!
+const sepFileReview = ref<any>({})
+const sippFileReview = ref<any>({})
+
+const getEncounterDocument = () => {
+  const encounter = props.rec
+  sippFileReview.value = {}
+  sepFileReview.value = {}
+  if (encounter.encounterDocuments && Array.isArray(encounter.encounterDocuments)) {
+    for (const doc of encounter.encounterDocuments) {
+      if (doc.type_code === 'vclaim-sep') {
+        sepFileReview.value = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+      } else if (doc.type_code === 'vclaim-sipp') {
+        sippFileReview.value = { id: doc.id, fileName: doc.fileName, filePath: doc.filePath, type: doc.type_code }
+      }
+    }
+  }
+}
+
+function handleSepView(menu: string, subMenu: string) {
+  recSepId.value = props.rec.id || 0
+  recSepMenu.value = menu
+  recSepSubMenu.value = subMenu
+}
+
+onMounted(() => {
+  getEncounterDocument()
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <Button
+      variant="outline"
+      type="button"
+      class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+      @click="handleSepView('sipp', sippFileReview.id ? 'view' : 'edit')"
+    >
+      <Icon
+        v-if="sippFileReview.id"
+        name="i-lucide-eye"
+        class="h-5 w-5"
+      />
+      <Icon
+        v-else
+        name="i-lucide-upload"
+        class="h-5 w-5"
+      />
+      {{ sippFileReview.id ? 'Lihat SIPP' : 'Upload File SIPP' }}
+    </Button>
+    <Button
+      variant="outline"
+      type="button"
+      class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+      @click="handleSepView('sep', sepFileReview.id ? 'view' : 'edit')"
+    >
+      <Icon
+        v-if="sepFileReview.id"
+        name="i-lucide-eye"
+        class="h-5 w-5"
+      />
+      <Icon
+        v-else
+        name="i-lucide-upload"
+        class="h-5 w-5"
+      />
+      {{ sepFileReview.id ? 'Lihat SEP' : 'Upload File SEP' }}
+    </Button>
+  </div>
+</template>

app/components/app/encounter/vclaim-sep-none.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rec: any
+}>()
+</script>
+
+<template>
+  <div class="flex flex-col gap-2">
+    <span>Tidak ada</span>
+  </div>
+</template>

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

@@ -85,10 +85,8 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         </Cell>
       </Block>
 
-      <Separator class="mt-8" />
-
       <div class="my-2 flex items-center justify-between">
-        <h1 class="font-semibold">Anggota Keluarga</h1>
+        <div class="text-sm 2xl:text-base font-semibold">Anggota Keluarga</div>
         <Button
           type="button"
           @click="addRelative"
@@ -102,7 +100,7 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
         :key="idx"
         class="my-2 rounded-md border border-slate-300 p-4"
       >
-        <Block :colCount="2">
+        <Block :colCount="2" :cell-flex="false" class="!mb-2">
           <Cell>
             <Label dynamic>Nama Anggota Keluarga</Label>
             <Field>
@@ -118,97 +116,83 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
           </Cell>
         </Block>
 
-        <button
+        <Button
+          variant="destructive"
           type="button"
-          class="mt-3 text-sm text-red-500"
           @click="removeRelative(idx)"
         >
           Hapus
-        </button>
+        </Button>
       </div>
 
-      <Separator class="mt-8" />
-
       <!-- Responsible Section -->
-      <div class="my-2">
-        <h1 class="font-semibold">Penanggung Jawab</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Penanggung Jawab</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Nama Penanggung Jawab</Label>
+          <Field>
+            <Input
+              v-model="responsibleName"
+              v-bind="responsibleNameAttrs"
+            />
+          </Field>
+        </Cell>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block :colCount="2">
-          <Cell>
-            <Label dynamic>Nama Penanggung Jawab</Label>
-            <Field>
-              <Input
-                v-model="responsibleName"
-                v-bind="responsibleNameAttrs"
-              />
-            </Field>
-          </Cell>
-
-          <Cell>
-            <Label dynamic>No. Hp Penanggung Jawab</Label>
-            <Field>
-              <Input
-                v-model="responsiblePhone"
-                v-bind="responsiblePhoneAttrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
-
-      <Separator class="mt-8" />
+        <Cell>
+          <Label dynamic>No. Hp Penanggung Jawab</Label>
+          <Field>
+            <Input
+              v-model="responsiblePhone"
+              v-bind="responsiblePhoneAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <!-- Informant -->
-      <div class="my-2">
-        <h1 class="font-semibold">Pemberi Informasi</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Pemberi Informasi</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Informant</Label>
+          <Field>
+            <Input
+              v-model="informant"
+              v-bind="informantAttrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block>
-          <Cell>
-            <Label dynamic>Informant</Label>
-            <Field>
-              <Input
-                v-model="informant"
-                v-bind="informantAttrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
-
-      <Separator class="mt-8" />
 
       <!-- Witnesses -->
-      <div class="my-2">
-        <h1 class="font-semibold">Saksi</h1>
+      <div class="mt-8 mb-1.5">
+        <div class="text-sm 2xl:text-base font-semibold">Saksi</div>
       </div>
+      <Block :col-count="2" :cell-flex="false">
+        <Cell>
+          <Label dynamic>Saksi 1</Label>
+          <Field>
+            <Input
+              v-model="witness1"
+              v-bind="witness1Attrs"
+            />
+          </Field>
+        </Cell>
 
-      <div class="my-2 rounded-md border border-slate-300 p-4">
-        <Block :colCount="2">
-          <Cell>
-            <Label dynamic>Saksi 1</Label>
-            <Field>
-              <Input
-                v-model="witness1"
-                v-bind="witness1Attrs"
-              />
-            </Field>
-          </Cell>
-
-          <Cell>
-            <Label dynamic>Saksi 2</Label>
-            <Field>
-              <Input
-                v-model="witness2"
-                v-bind="witness2Attrs"
-              />
-            </Field>
-          </Cell>
-        </Block>
-      </div>
+        <Cell>
+          <Label dynamic>Saksi 2</Label>
+          <Field>
+            <Input
+              v-model="witness2"
+              v-bind="witness2Attrs"
+            />
+          </Field>
+        </Cell>
+      </Block>
     </div>
   </form>
 </template>

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

@@ -6,7 +6,7 @@ type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 export const config: Config = {
-  cols: [{ width: 100 }, {}, {}, {}, { width: 50 }],
+  cols: [{ width: 100 }, {}, {}, {}, {}, {}, { width: 50 }],
   headers: [
     [
       { label: 'Tanggal' },

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

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

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

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

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

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

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

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

app/components/app/item-price/entry-form.vue

@@ -1,50 +1,140 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.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'
+// 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/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemPriceFormData } from '~/schemas/item-price.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  items: 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: ItemPriceFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    item_code: '',
+    price: 0,
+    insuranceCompany_code: '',
+  } as Partial<ItemPriceFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [item_code, item_codeAttrs] = defineField('item_code')
+const [price, priceAttrs] = defineField('price')
+const [insuranceCompany_code, insuranceCompany_codeAttrs] = defineField('insuranceCompany_code')
+
+if (props.values) {
+  if (props.values.item_code !== undefined) item_code.value = props.values.item_code
+  if (props.values.price !== undefined) price.value = props.values.price
+  if (props.values.insuranceCompany_code !== undefined) insuranceCompany_code.value = props.values.insuranceCompany_code
+}
+
+const resetForm = () => {
+  item_code.value = ''
+  price.value = 0
+  insuranceCompany_code.value = ''
+}
+
+function onSubmitForm() {
+  const formData: ItemPriceFormData = {
+    item_code: item_code.value || '',
+    price: Number(price.value) || 0,
+    insuranceCompany_code: insuranceCompany_code.value || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Items</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Perusahaan Insuransi</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item-price"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Item</Label>
+        <Field :errMessage="errors.item_code">
+          <Select
+            id="item_code"
+            v-model="item_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item"
+            v-bind="item_codeAttrs"
+            :items="items"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga</Label>
+        <Field :errMessage="errors.price">
+          <Input
+            id="price"
+            type="number"
+            v-model="price"
+            v-bind="priceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Perusahaan Asuransi</Label>
+        <Field :errMessage="errors.insuranceCompany_code">
+          <Input
+            id="insuranceCompany_code"
+            v-model="insuranceCompany_code"
+            v-bind="insuranceCompany_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </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/item-price/list-cfg.ts

@@ -3,27 +3,23 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [{}, {}, {}, { width: 50 }],
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
+      { label: 'Item' },
+      { label: 'Harga' },
+      { label: 'Perusahaan Asuransi' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['item_code', 'price', 'insuranceCompany_code', 'action'],
 
   delKeyNames: [
-    { key: 'code', label: 'Kode' },
-    { key: 'name', label: 'Nama' },
+    { key: 'item_code', label: 'Item' },
+    { key: 'insuranceCompany_code', label: 'Perusahaan Asuransi' },
   ],
 
   parses: {},
@@ -39,9 +35,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }

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

@@ -1,14 +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'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <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/item-price/status-badge.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>

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

@@ -1,68 +1,227 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.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'
+// 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/Button.vue'
 
-const props = defineProps<{ modelValue: any }>()
-const emit = defineEmits(['update:modelValue', 'event'])
+// Types
+import type { ItemFormData } from '~/schemas/item.schema'
 
-const data = computed({
-  get: () => props.modelValue,
-  set: (val) => emit('update:modelValue', val),
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  itemGroups: any[]
+  uoms: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isShowInfra = false;
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: ItemFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    itemGroup_code: '',
+    uom_code: '',
+    infra_code: '',
+    stock: 0,
+    buyingPrice: 0,
+    sellingPrice: 0,
+  } as Partial<ItemFormData>,
 })
 
-const items = [
-  { value: '1', label: 'item 1' },
-  { value: '2', label: 'item 2' },
-  { value: '3', label: 'item 3' },
-  { value: '4', label: 'item 4' },
-]
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [itemGroup_code, itemGroup_codeAttrs] = defineField('itemGroup_code')
+const [uom, uomAttrs] = defineField('uom_code')
+const [infra_code, infra_codeAttrs] = defineField('infra_code')
+const [stock, stockAttrs] = defineField('stock')
+const [buyingPrice, buyingPriceAttrs] = defineField('buyingPrice')
+const [sellingPrice, sellingPriceAttrs] = defineField('sellingPrice')
+
+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.itemGroup_code !== undefined) itemGroup_code.value = props.values.itemGroup_code
+  if (props.values.uom_code !== undefined) uom.value = props.values.uom_code
+  if (props.values.infra_code !== undefined) infra_code.value = props.values.infra_code
+  if (props.values.stock !== undefined) stock.value = props.values.stock
+  if (props.values.buyingPrice !== undefined) buyingPrice.value = props.values.buyingPrice
+  if (props.values.sellingPrice !== undefined) sellingPrice.value = props.values.sellingPrice
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  itemGroup_code.value = ''
+  uom.value = ''
+  infra_code.value = ''
+  stock.value = 0
+  buyingPrice.value = 0
+  sellingPrice.value = 0
+}
+
+function onSubmitForm() {
+  const formData: ItemFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    itemGroup_code: itemGroup_code.value || '',
+    uom_code: uom.value || '',
+    infra_code: infra_code.value || '',
+    stock: Number(stock.value) || 0,
+    buyingPrice: Number(buyingPrice.value) || 0,
+    sellingPrice: Number(sellingPrice.value) || 0,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
 </script>
 
 <template>
-  <form id="entry-form">
-    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-      <div class="flex flex-col justify-between">
-        <Block>
-          <FieldGroup>
-            <Label>Nama</Label>
-            <Field>
-              <Input v-model="data.name" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Kode</Label>
-            <Field>
-              <Input v-model="data.code" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Item Group</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>UOM</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Infra</Label>
-            <Field>
-              <Select :items="items" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup>
-            <Label>Harga</Label>
-            <Field>
-              <Input v-model="data.price" />
-            </Field>
-          </FieldGroup>
-        </Block>
-      </div>
+  <form
+    id="form-item"
+    @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</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Item Group</Label>
+        <Field :errMessage="errors.itemGroup_code">
+          <Select
+            id="itemGroup_code"
+            v-model="itemGroup_code"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih Item Group"
+            v-bind="itemGroup_codeAttrs"
+            :items="itemGroups"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">UOM</Label>
+        <Field :errMessage="errors.uom_code">
+          <Select
+            id="uom_code"
+            v-model="uom"
+            icon-name="i-lucide-chevron-down"
+            placeholder="Pilih satuan"
+            v-bind="uomAttrs"
+            :items="uoms"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell v-if="isShowInfra">
+        <Label height="compact">Infra</Label>
+        <Field :errMessage="errors.infra_code">
+          <Input
+            id="infra_code"
+            v-model="infra_code"
+            v-bind="infra_codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Stok</Label>
+        <Field :errMessage="errors.stock">
+          <Input
+            id="stock"
+            type="number"
+            v-model="stock"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga Beli</Label>
+        <Field :errMessage="errors.buyingPrice">
+          <Input
+            id="buyingPrice"
+            type="number"
+            v-model="buyingPrice"
+            v-bind="buyingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Harga Jual</Label>
+        <Field :errMessage="errors.sellingPrice">
+          <Input
+            id="sellingPrice"
+            type="number"
+            v-model="sellingPrice"
+            v-bind="sellingPriceAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </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/item/list-cfg.ts

@@ -3,30 +3,78 @@ import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-const _doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
 export const config: Config = {
-  cols: [{}, {}, { width: 50 }],
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
   headers: [
     [
       { label: 'Kode' },
       { label: 'Nama' },
+      { label: 'Item Group' },
+      { label: 'UOM' },
+      { label: 'Infra' },
+      { label: 'Stok' },
+      { label: 'Harga Beli' },
+      { label: 'Harga Jual' },
       { label: 'Aksi' },
     ],
   ],
 
-  keys: ['code', 'name', 'action'],
+  keys: ['code', 'name', 'itemGroup_code', 'uom_code', 'infra_code', 'stock', 'buyingPrice', 'sellingPrice', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
     { key: 'name', label: 'Nama' },
   ],
 
-  parses: {},
+  parses: {
+    itemGroup_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.itemGroup_code || '-'
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.uom?.name || '-'
+    },
+    infra_code: (rec: unknown): unknown => {
+      const recX = rec as any
+      return recX.infra_code || '-'
+    },
+    stock: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.stock
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    buyingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.buyingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+    sellingPrice: (rec: unknown): unknown => {
+      const recX = rec as any
+      const value = recX.sellingPrice
+      if (value === null || value === undefined) {
+        return '-'
+      }
+      return value
+    },
+  },
 
   components: {
     action(rec, idx) {
@@ -39,9 +87,5 @@ export const config: Config = {
     },
   },
 
-  htmls: {
-    patient_address(_rec) {
-      return '-'
-    },
-  },
+  htmls: {},
 }

app/components/app/item/list.vue

@@ -1,14 +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'
 
-defineProps<{
+interface Props {
   data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
 }>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
 </script>
 
 <template>
-  <PubMyUiDataTable
-    v-bind="config"
-    :rows="data"
-  />
+  <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/item/status-badge.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>

app/components/app/kfr/_common/banner-patient-in-therapy.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '~/lib/utils';
+
+const props = withDefaults(defineProps<{
+  assesmentDate?: string
+  class?: string
+}>(), {
+  assesmentDate: new Date().toISOString(),
+})
+</script>
+
+<template>
+    <div :class="cn('flex items-center gap-3 p-3 rounded-md text-orange-500 border border-orange-400 bg-orange-50',
+        props.class
+    )">
+        <Icon name="i-lucide-triangle-alert" class="h-9 w-9 align-middle transition-colors" />
+        <p class="font-medium">Pasien telah mencapai atau telah melampaui jadwal Asesment pada 
+          <b>{{ new Date(props.assesmentDate).toDateString() }}</b>
+          <br>
+           Harap melakukan Re-Asement sebelum melanjutkan Protocol Therapy</p>
+    </div>
+</template>

app/components/app/kfr/_common/btn-confirmation-detail.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
+import Button from '~/components/pub/ui/button/Button.vue';
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const recDate = inject<Ref<any>>('rec_date')!
+
+function confirm() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmVerify
+  recItem.value = props.rec
+  recDate.value = new Date().getTime()
+}
+</script>
+
+<template>
+    <Button type="button" variant="outline" class="text-orange-500 border border-orange-400 bg-orange-50"
+        @click="confirm">
+        <Icon name="i-lucide-circle-check" class="h-4 w-4 align-middle transition-colors" />
+        Konfirmasi
+    </Button>
+</template>

app/components/app/kfr/_common/btn-history.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { ActionEvents, type ListItemDto } from '~/components/pub/my-ui/data/types';
+import Button from '~/components/pub/ui/button/Button.vue';
+
+const props = defineProps<{
+  
+}>()
+const isModalOpen = inject<Ref<boolean>>('isHistoryDialogOpen')!
+
+function openDialog() {
+  isModalOpen.value = true
+}
+</script>
+
+<template>
+    <Button type="button" variant="outline" class="text-orange-500 border border-orange-400 bg-orange-50"
+        @click="openDialog">
+        <Icon name="i-lucide-history" class="h-4 w-4 align-middle transition-colors" />
+        History
+    </Button>
+</template>

app/components/app/kfr/_common/card-result.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+</script>
+
+<template>
+  <table>
+    <tbody>
+      <tr>
+        <td><b>S : </b></td>
+        <td>{{ props.rec.result.s }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <Separator class="my-3" />
+  <table>
+    <tbody>
+      <tr>
+        <td><b>O : </b></td>
+        <td>{{ props.rec.result.o }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <Separator class="my-3" />
+  <table>
+    <tbody>
+      <tr>
+        <td><b>A : </b></td>
+        <td>{{ props.rec.result.a }}</td>
+      </tr>
+    </tbody>
+  </table>
+  <Separator class="my-3" />
+  <div>
+    <h1><b>P : </b></h1>
+    <ul class="pl-5 list-disc space-y-1">
+      <li>
+        <h1><b>Goal of Treatment</b></h1>
+        <p>{{ props.rec.result.p.goal }}</p>
+      </li>
+      <li>
+        <h1><b>Tindakan/Program Rehabilitasi Medik</b></h1>
+        <p>{{ props.rec.result.p.action }}</p>
+      </li>
+      <li>
+        <h1><b>Edukasi</b></h1>
+        <p>{{ props.rec.result.p.education }}</p>
+      </li>
+      <li>
+        <h1><b>Frekuensi Kunjungan</b></h1>
+        <p>{{ props.rec.result.p.frequency }} x Perminggu</p>
+      </li>
+    </ul>
+  </div>
+  <Separator class="my-3" />
+  <table>
+    <tbody>
+      <tr>
+        <td><b>Rencana Tindak Lanjut : </b></td>
+        <td>{{ props.rec.result.plan }} - {{ props.rec.result.planDesc }}</td>
+      </tr>
+    </tbody>
+  </table>
+</template>

app/components/app/kfr/_common/dropdown-action.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ActionEvents, type LinkItem, type ListItemDto } from '~/components/pub/my-ui/data/types';
+
+
+const props = defineProps<{
+  rec: ListItemDto
+}>()
+
+const { getActiveRole } = useUserStore()
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+const timestamp = inject<Ref<any>>('timestamp')!
+
+const activeKey = ref<string | null>(null)
+const linkItems = computed(() => {
+  const role = getActiveRole()
+  const isAdmin = role == "system"
+  const isDoctorRole = role == "emp|doc"
+  const isPhysioRole = role == "emp|doc"
+  const isUnverified = true // recItem.id === 0
+  const isUnvalidated = true // recItem.id
+
+  const items: LinkItem[] = [
+    { label: 'Print', onClick: print, icon: 'i-lucide-printer', }
+  ]
+  if (isDoctorRole || isAdmin) {
+    items.push({ label: 'Edit', onClick: edit, icon: 'i-lucide-pencil', })
+
+    if (isUnverified) {
+      items.push({ label: 'Verify', onClick: verify, icon: 'i-lucide-check', })
+    }
+    if (!isUnverified && isUnvalidated) { // verified & unvalidated
+      items.push({ label: 'Validate', onClick: validate, icon: 'i-lucide-check-check', })
+    }
+
+    items.push({ label: 'Delete', onClick: del, icon: 'i-lucide-trash', })
+  }
+  
+  return items
+})
+
+function edit() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showEdit
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+
+function verify() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showVerify
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+function validate() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showValidate
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+
+function print() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showPrint
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+function del() {
+  recId.value = props.rec.id || 0
+  recAction.value = ActionEvents.showConfirmDelete
+  recItem.value = props.rec
+  timestamp.value = new Date().getTime()
+}
+</script>
+
+<template>
+  <div>
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <SidebarMenuButton size="lg"
+          class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800">
+          <Icon name="i-lucide-chevrons-up-down" class="ml-auto size-4" />
+        </SidebarMenuButton>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent
+        class="w-[--radix-dropdown-menu-trigger-width] min-w-40 rounded-lg border border-slate-200 bg-white text-black dark:border-slate-700 dark:bg-slate-800 dark:text-white"
+        align="end">
+        <DropdownMenuGroup>
+          <DropdownMenuItem v-for="item in linkItems" :key="item.label"
+            class="hover:bg-gray-100 dark:hover:bg-slate-700" @click="item.onClick" @mouseenter="activeKey = item.label"
+            @mouseleave="activeKey = null">
+            <Icon :name="item.icon ?? ''" />
+            <span :class="activeKey === item.label ? 'text-sidebar-accent-foreground' : ''">{{ item.label }}</span>
+          </DropdownMenuItem>
+        </DropdownMenuGroup>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  </div>
+</template>

app/components/app/kfr/_common/radio-followup.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { Label as RadioLabel } from '~/components/pub/ui/label'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { cn } from '~/lib/utils'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const props = defineProps<{
+  fieldName?: string
+  label?: string
+  errors?: FormErrors
+  class?: string
+  radioGroupClass?: string
+  radioItemClass?: string
+  labelClass?: string
+  isRequired?: boolean
+}>()
+
+const {
+  fieldName = 'isNewBorn',
+  label = 'Status Pasien',
+  errors,
+  class: containerClass,
+  radioGroupClass,
+  radioItemClass,
+  labelClass,
+} = props
+
+const newbornOptions = [
+  { value: 'EVALUASI', label: 'Evaluasi' },
+  { value: 'RUJUK', label: 'Rujuk' },
+  { value: 'SELESAI', label: 'Selesai' },
+]
+</script>
+
+<template>
+  <DE.Cell :class="cn('radio-group-field', containerClass)" :col-span="2">
+    <DE.Label
+      :label-for="fieldName"
+      :is-required="isRequired"
+    >
+      {{ label }}
+    </DE.Label>
+    <DE.Field
+      :id="fieldName"
+      :errors="errors"
+    >
+      <FormField
+        v-slot="{ componentField }"
+        :name="fieldName"
+      >
+        <FormItem>
+          <FormControl>
+            <RadioGroup
+              v-bind="componentField"
+              :class="cn('flex flex-row flex-wrap gap-4 sm:gap-6', radioGroupClass)"
+            >
+              <div
+                v-for="(option, index) in newbornOptions"
+                :key="option.value"
+                :class="cn('flex min-w-fit items-center space-x-2 pt-1', radioItemClass)"
+              >
+                <RadioGroupItem
+                  :id="`${fieldName}-${index}`"
+                  :value="option.value"
+                  :class="
+                    cn(
+                      'relative h-4 w-4 rounded-full border-muted-foreground before:absolute before:inset-1 before:rounded-full before:bg-primary before:opacity-0 before:transition-opacity data-[state=checked]:border-primary data-[state=checked]:bg-white data-[state=checked]:before:opacity-100 sm:h-5 sm:w-5',
+                      containerClass,
+                    )
+                  "
+                />
+                <RadioLabel
+                  :for="`${fieldName}-${index}`"
+                  :class="
+                    cn(
+                      'cursor-pointer select-none text-xs font-normal leading-none transition-colors hover:text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70 sm:text-sm',
+                      labelClass,
+                    )
+                  "
+                >
+                  {{ option.label }}
+                </RadioLabel>
+              </div>
+            </RadioGroup>
+          </FormControl>
+          <FormMessage class="ml-0 mt-1" />
+        </FormItem>
+      </FormField>
+    </DE.Field>
+  </DE.Cell>
+</template>

app/components/app/kfr/_common/verify-badge.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+import { Badge } from '~/components/pub/ui/badge'
+
+const props = defineProps<{
+  rec: any
+  idx?: number
+}>()
+
+const verifyStatusCodes: Record<string, string> = {
+  verified: 'Terverifikasi',
+  unverified: 'Belum Verifikasi',
+}
+const validateStatusCodes: Record<string, string> = {
+  validated: 'Tervalidasi',
+  unvalidated: 'Belum Validasi',
+}
+
+const verifyStatusText = computed(() => {
+  const code: keyof typeof verifyStatusCodes = props.rec.status.verified === 1 ? `verified` : `unverified`
+  return verifyStatusCodes[code]
+})
+const validateStatusText = computed(() => {
+  const code: keyof typeof validateStatusCodes = props.rec.status.validated === 1 ? `validated` : `unvalidated`
+  return validateStatusCodes[code]
+})
+
+const verifyBadgeVariant = computed(() => {
+  return props.rec.status.verified === 1 ? 'default' : 'outline'
+})
+const validateBadgeVariant = computed(() => {
+  return props.rec.status.validated === 1 ? 'default' : 'outline'
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-2 items-center justify-center">
+    <Badge :variant="verifyBadgeVariant" class="w-fit rounded-2xl text-[0.6rem]" >
+      {{ verifyStatusText }}
+    </Badge>
+    <Badge :variant="validateBadgeVariant" class="w-fit rounded-2xl text-[0.6rem]" >
+      {{ validateStatusText }}
+    </Badge>
+  </div>
+</template>

app/components/app/kfr/entry.vue

@@ -0,0 +1,128 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import TextAreaInput from '~/components/pub/my-ui/form/text-area-input.vue'
+import { cn } from '~/lib/utils'
+import RadioFollowup from './_common/radio-followup.vue'
+
+const props = defineProps<{
+  schema: any
+  initialValues?: any
+  errors?: FormErrors
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+
+// const isMedicalDiagnosisPickerDialogOpen = ref<boolean>(false)
+// const isFunctionalDiagnosisPickerDialogOpen = ref<boolean>(false)
+// const isProcedurePickerDialogOpen = ref<boolean>(false)
+
+// function toggleMedicalDiagnosisPickerDialog() {
+//   isMedicalDiagnosisPickerDialogOpen.value = !isMedicalDiagnosisPickerDialogOpen.value
+// }
+// function toggleFunctionalDiagnosisPickerDialog() {
+//   isFunctionalDiagnosisPickerDialogOpen.value = !isFunctionalDiagnosisPickerDialogOpen.value
+// }
+
+// provide(`isDiagnosisPickerDialogOpen`, isDiagnosisPickerDialogOpen)
+// provide(`isProcedurePickerDialogOpen`, isProcedurePickerDialogOpen)        
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    :validate-on-mount="false"
+    validation-mode="onSubmit"
+    :initial-values="initialValues">
+
+    <!-- FORM 1 -->
+    <DE.Block :col-count="2" :cell-flex="false">
+      <DE.Cell :col-span="2">
+        <TextAreaInput
+          field-name="subjective"
+          label="Subjective"
+          placeholder="Subjective"
+          class="w-1/2"
+          :errors="errors" />
+      </DE.Cell>
+      <DE.Cell :col-span="2" >
+        <TextAreaInput
+          field-name="objective"
+          label="Objective"
+          placeholder="Masukkan Objective"
+          class="w-1/2"
+          :errors="errors" />
+      </DE.Cell>
+      <DE.Cell :col-span="2">
+        <TextAreaInput
+          field-name="assesment"
+          label="Assesment"
+          placeholder="Masukkan Assesment"
+          class="w-1/2"
+          :errors="errors" />
+      </DE.Cell>
+
+      <DE.Cell class="mt-2 px-4 bg-gray-50 border rounded-lg" :col-span="2">
+        <DE.Block :col-count="2" :cell-flex="false">
+          <TextAreaInput
+            field-name="planningGoal"
+            label="Goal of Treatment"
+            placeholder="Masukkan Goal of Treatment"
+            :errors="errors" />
+          <TextAreaInput
+            field-name="planningAction"
+            label="Tindakan/Program Rehabilitasi Medik"
+            placeholder="Masukkan Tindakan/Program Rehabilitasi Medik"
+            :errors="errors" />
+          <TextAreaInput
+            field-name="planningEducation"
+            label="Edukasi"
+            placeholder="Masukkan Edukasi"
+            :errors="errors" />
+          <InputBase
+            field-name="planningFrequency"
+            label="Frekuensi Kunjungan"
+            right-label="x Minggu"
+            placeholder="Masukkan Frekuensi Kunjungan"
+            :errors="errors"
+            numeric-only
+            is-disabled 
+          />
+        </DE.Block>
+      </DE.Cell>
+
+      <DE.Cell :col-span="2">      
+        <RadioFollowup
+          field-name="followUpPlan"
+          label="Rencana Tindak Lanjut"
+          :errors="errors"
+          is-required
+        />
+        <TextAreaInput
+          label=""
+          field-name="followUpPlanDesc"
+          placeholder="Masukkan Keterangan rencana tindak lanjut"
+          class="w-1/2 mt-3"
+          :errors="errors" />
+      </DE.Cell>
+
+      
+
+    </DE.Block>
+  </Form>
+</template>

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

@@ -0,0 +1,60 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import type { Patient } from '~/models/patient'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dp.vue'))
+const resultData = defineAsyncComponent(() => import('./_common/card-result.vue'))
+const statusBadge = defineAsyncComponent(() => import('./_common/verify-badge.vue'))
+
+export const config: Config = {
+  cols: [{}, { width: 800 }, {}, { width: 120 }, { width: 3 },],
+
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'Hasil Asesmen Pasien Dan Pemberian Pelayanan' },
+      { label: 'Jenis Form' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'result', 'type', 'status', 'action'],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    result(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: resultData,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+}

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

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+import { config } from './history-list.cfg'
+import { CalendarDate, DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import type { DateRange } from 'radix-vue'
+import { cn } from '~/lib/utils'
+
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+  dateValue: DateRange
+}
+const props = defineProps<Props>()
+const df = new DateFormatter('en-US', {  dateStyle: 'medium',})
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+  'update:dateValue': [value: DateRange]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <Popover>
+            <PopoverTrigger as-child>
+                <Button variant="outline" :class="cn('mb-1 w-[280px] justify-start text-left font-normal',
+                !props.dateValue && 'text-muted-foreground')">
+                <CalendarIcon class="mr-2 h-4 w-4" />
+                <template v-if="props.dateValue.start">
+                    <template v-if="props.dateValue.end">
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }} -
+                    {{ df.format(props.dateValue.end.toDate(getLocalTimeZone())) }}
+                    </template>
+
+                    <template v-else>
+                    {{ df.format(props.dateValue.start.toDate(getLocalTimeZone())) }}
+                    </template>
+                </template>
+                <template v-else> Pick a date </template>
+                </Button>
+            </PopoverTrigger>
+            <PopoverContent class="w-auto p-0">
+                <RangeCalendar v-model="props.dateValue" initial-focus :number-of-months="2"
+                    @update:model-value="(date) => emit('update:dateValue', date)" />
+            </PopoverContent>
+        </Popover>
+
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/kfr/list.cfg.ts

@@ -0,0 +1,59 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('./_common/dropdown-action.vue'))
+const statusBadge = defineAsyncComponent(() => import('./_common/verify-badge.vue'))
+const resultData = defineAsyncComponent(() => import('./_common/card-result.vue'))
+
+export const config: Config = {
+  cols: [{}, { width: 800 }, {}, { width: 120 }, { width: 3 },],
+
+  headers: [
+    [
+      { label: 'Tanggal' },
+      { label: 'Hasil Asesmen Pasien Dan Pemberian Pelayanan' },
+      { label: 'Jenis Form' },
+      { label: 'Status' },
+      { label: 'Action' },
+    ],
+  ],
+
+  keys: ['date', 'result', 'type', 'status', 'action'],
+
+  parses: {
+    date: (rec: unknown): unknown => {
+      const date = (rec as any).date
+
+      if (typeof date == 'object' && date) {
+        return (date as Date).toLocaleDateString('id-ID')
+      } else if (typeof date == 'string') {
+        return (date as string).substring(0, 10)
+      }
+      return date
+    },
+  },
+
+  components: {
+    result(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: resultData,
+      }
+    },
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+}

app/components/app/kfr/list.vue

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

app/components/app/kfr/verify-dialog.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
+import Field from '~/components/pub/my-ui/form/field.vue'
+import Label from '~/components/pub/my-ui/form/label.vue'
+import Select from '~/components/pub/my-ui/form/select.vue'
+import { Form } from '~/components/pub/ui/form'
+import InputBase from '~/components/pub/my-ui/form/input-base.vue'
+import type { InstallationFormData } from '~/schemas/installation.schema'
+import TextCaptcha from '~/components/pub/my-ui/form/text-captcha.vue'
+
+
+const props = defineProps<{
+  schema: any
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: InstallationFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+const formRef = ref()
+const captchaRef = ref<InstanceType<typeof TextCaptcha> | null>(null)
+const captchaValid = ref(false)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCaptchaUpdate(valid: boolean) {
+  captchaValid.value = valid
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+defineExpose({
+  validate: () => formRef.value?.validate(),
+  resetForm: () => formRef.value?.resetForm(),
+  setValues: (values: any, shouldValidate = true) => formRef.value?.setValues(values, shouldValidate),
+  values: computed(() => formRef.value?.values),
+})
+</script>
+
+<template>
+  <Form
+    ref="formRef"
+    v-slot="{ values }"
+    as=""
+    keep-values
+    :validation-schema="formSchema"
+    validation-mode="onSubmit" 
+  >
+      <div class="border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+
+          <InputBase
+            field-name="name"
+            label="Nama"
+            placeholder="Masukkan Nama"
+            :errors="errors"/>
+          <InputBase
+            field-name="email"
+            label="Email"
+            placeholder="Masukkan Email"
+            :errors="errors"/>
+
+          <div class="mt-2">
+            <Label class="" for="password">Password</Label>
+            <Field class="" id="password" :errors="errors">
+              <FormField v-slot="{ componentField }" name="password">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="password"
+                      v-bind="componentField"
+                      type="password"
+                      class="w-full"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </div>
+
+          <TextCaptcha
+            ref="captchaRef"
+            :length="5"
+            :useSpacing="true"
+            :noiseChars="true"
+            @update:valid="onCaptchaUpdate"
+          />
+
+        </div>
+      </div>
+  </Form>
+</template>

app/components/app/material-package-item/quick-list.cfg.ts

@@ -0,0 +1,23 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+
+type SmallDetailDto = any
+
+export const config: Config = {
+  cols: [ { width: 150 }, {}, { width: 150 }],
+
+  headers: [
+    [
+      { label: 'No' },
+      { label: 'Name' },
+      { label: 'Jumlah' },
+    ],
+  ],
+
+  keys: ['number', 'material.name', 'count'],
+
+  parses: {
+    number: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+  },
+}

app/components/app/material-package-item/quick-list.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+//
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
+// Configs
+import { config } from './quick-list.cfg'
+import type { MaterialPackageItem } from '~/models/material-package-item';
+
+interface Props {
+  data: MaterialPackageItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div class="mb-4">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+        Daftar Item BMHP
+    </div>
+    <DataTable v-bind="config" :rows="data" class="border"/>
+  </div>
+</template>

app/components/app/material-package/switcher.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+//
+import * as CB from '~/components/pub/my-ui/combobox'
+import type { MaterialPackage } from '~/models/material-package';
+
+//
+const props =defineProps<{
+  data: MaterialPackage[]
+}>()
+
+const model = defineModel()
+
+const items = computed(() => {
+  return props.data.map((item) => {
+    return {
+      label: item.name,
+      value: item.code,
+    }
+  })
+})
+
+</script>
+
+<template>
+  <div class="mb-4 2xl:mb-5">
+    <div class="font-semibold text-sm 2xl:text-base mb-2">
+      Paket BMHP
+    </div>
+    <div class="max-w-[600px]">
+      <CB.Combobox :items="items" v-model="model" />
+    </div>
+  </div>
+</template>

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

@@ -1,18 +1,20 @@
 import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
+import type { McuOrderItem } from '~/models/mcu-order-item'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+// const input = defineAsyncComponent(() => import('~/components/pub/my-ui/data/editable-div.vue'))
 const input = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
 
 export const config: Config = {
-  cols: [{}, {}, { classVal: '!p-0.5' }, { width: 50 }],
+  cols: [{}, {}, { classVal: '!p-0.5' }],
 
   headers: [
     [
       { label: 'Nama' },
       { label: 'Jenis' },
-      { label: 'Catatan' },
-      { label: '' },
+      { label: 'Catatan', classVal: '!w-[40%]' },
+      // { label: '' },
     ],
   ],
 
@@ -27,16 +29,17 @@ export const config: Config = {
       return {
         idx,
         rec: rec as object,
+        props: { data: (rec as McuOrderItem).note },
         component: input,
       }
     },
-    action(rec, idx) {
-      return {
-        idx,
-        rec: rec as object,
-        component: action,
-      }
-    },
+    // action(rec, idx) {
+    //   return {
+    //     idx,
+    //     rec: rec as object,
+    //     component: action,
+    //   }
+    // },
   },
 
   htmls: {},

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

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import DataTable from '~/components/pub/my-ui/data-table/data-table.vue'
+
 import { config } from './list-entry.cfg'
 import type { McuOrderItem } from '~/models/mcu-order-item';
 
@@ -13,7 +15,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-  <PubMyUiDataTable class="border mb-3 2xl:mb-4"
+  <DataTable class="border mb-3 2xl:mb-4"
     v-bind="config"
     :rows="data"
   />