diff --git a/app/components/app/encounter/checkin-entry.vue b/app/components/app/encounter/checkin-entry.vue
new file mode 100644
index 00000000..0fa69b01
--- /dev/null
+++ b/app/components/app/encounter/checkin-entry.vue
@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+//
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+//
+import { getValueLabelList } from '~/services/doctor.service'
+
+// Components
+import type z from 'zod'
+import * as CB from '~/components/pub/my-ui/combobox'
+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'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  encounter: Encounter
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+let doctors = await getValueLabelList()
+
+const emit = defineEmits<{
+  submit: [values: CheckInFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    responsibleDoctor_id: 0,
+    adm_employee_id: 0,
+    registeredAt: '',
+  } as Partial<CheckInFormData>,
+})
+
+const [responsibleDoctor_id, responsibleDoctor_idAttrs] = defineField('responsibleDoctor_id')
+const [dischargeMethod_code, dischargeMethod_codeAttrs] = defineField('dischargeMethod_code')
+const [unit_id, unit_idAttrs] = defineField('unit_id')
+
+</script>
+
+<template>
+  <DE.Block>
+    <DE.Cell>
+      <DE.Label>Dokter</DE.Label>
+      <DE.Field>
+        <ComboBox
+          id="doctor"
+          v-model="responsibleDoctor_id"
+          v-bind="responsibleDoctor_idAttrs"
+          :items="doctors"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter DPJP"
+          search-placeholder="Cari Dokter DPJP"
+          empty-message="Dokter DPJP tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>PJ Berkas</DE.Label>
+      <DE.Field>
+        <Input :value="encounter?.adm_employee?.person?.name" />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Waktu Masuk</DE.Label>
+      <DE.Field>
+        <Input :value="encounter?.registeredAt" />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button>Simpan</Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/checkout-entry.vue b/app/components/app/encounter/checkout-entry.vue
new file mode 100644
index 00000000..60e5c982
--- /dev/null
+++ b/app/components/app/encounter/checkout-entry.vue
@@ -0,0 +1,125 @@
+<script lang="ts" setup>
+//
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+//
+import type z from 'zod'
+import * as CB from '~/components/pub/my-ui/combobox'
+import { dischargeMethodCodes } from '~/lib/constants';
+import type { CheckOutFormData } from '~/schemas/encounter.schema'
+
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  units: any[]
+  doctors: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+const props = defineProps<Props>()
+
+const dischargeMethodItems = CB.recStrToItem(dischargeMethodCodes)
+
+const emit = defineEmits<{
+  submit: [values: CheckOutFormData]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    dischargeMethod_code: '',
+    unit_id: 0,
+    responsible_doctor_id: 0,
+  } as Partial<CheckOutFormData>,
+})
+
+const [dischargeMethod_code, dischargeMethod_codeAttrs] = defineField('dischargeMethod_code')
+const [unit_id, unit_idAttrs] = defineField('unit_id')
+const [responsible_doctor_id, responsible_doctor_idAttrs] = defineField('responsible_doctor_id')
+
+function onSubmitForm(values: any) {
+  const formData: CheckOutFormData = {
+    dischargeMethod_code: '',
+    unit_id: 0,
+    responsible_doctor_id: 0,
+  }
+  emit('submit', formData)
+}
+
+const resetForm = () => {
+  dischargeMethod_code.value = ''
+  unit_id.value = ''
+  responsible_doctor_id.value = ''
+}
+
+</script>
+
+<template>
+  <DE.Block>
+    <DE.Cell>
+      <DE.Label>Cara Keluar</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="dischargeMethod_code"
+          v-bind="dischargeMethod_codeAttrs"
+          :items="dischargeMethodItems"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Cara Keluar"
+          search-placeholder="Cari Cara Keluar"
+          empty-message="Cara Keluar tidak ditemukan"
+        />
+        {{ dischargeMethod_code }}
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>Klinik</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="unit_id"
+          v-bind="unit_idAttrs"
+          :items="units"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Klinik"
+          search-placeholder="Cari Klinik"
+          empty-message="Klinik tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+    <DE.Cell>
+      <DE.Label>DPJP</DE.Label>
+      <DE.Field>
+        <CB.Combobox
+          id="dischargeMethodItems"
+          v-model="responsible_doctor_id"
+          v-bind="responsible_doctor_idAttrs"
+          :items="doctors"
+          :disabled="isLoading || isReadonly"
+          placeholder="Pilih Dokter"
+          search-placeholder="Cari Dokter"
+          empty-message="Dokter tidak ditemukan"
+        />
+      </DE.Field>
+    </DE.Cell>
+  </DE.Block>
+  <div class="text-center">
+    <Button
+       v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+    >
+      Simpan
+    </Button>
+  </div>
+</template>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/app/components/app/encounter/status.vue b/app/components/app/encounter/status.vue
index e45c0a78..1dcd2ea6 100644
--- a/app/components/app/encounter/status.vue
+++ b/app/components/app/encounter/status.vue
@@ -1,6 +1,44 @@
 <script setup lang="ts">
+// Type Const Var
+import { dischargeMethodCodes } from '~/lib/constants'
+import { type Item, recStrToItem } from '~/components/pub/my-ui/combobox'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+
+// Components
+// import ComboBox from '~/components/pub/my-ui/combobox/combobox.vue'
+import ComboBox from '~/components/pub/my-ui/form/combobox.vue'
+import * as DE from '~/components/pub/my-ui/doc-entry'
+
+const dischargeMethodItems = recStrToItem(dischargeMethodCodes)
+let selectedItemLabel = 'test'
+let selectedItem = ref<Item>({ label: '', value: '' })
+
+const selectDischargeMethod = (item: Item) => {
+  selectedItem.value = item
+}
 </script>
 
 <template>
-  <div class="p-10 text-center">Hello World!!!</div>
+  <div class="lg:grid grid-cols-2">
+    <div class="border-r lg:pe-4 xl:pe-5">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
+    </div>
+    <div class="lg:ps-4 xl:ps-5">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
+      <DE.Block>
+        <DE.Cell>
+          <DE.Label>Cara Keluar</DE.Label>
+          <DE.Field>
+            <ComboBox id="sumpeh_lu" :items="dischargeMethodItems" :modelValue="selectedItemLabel" />
+            <!-- {{ selectedItem.value }} - 
+            {{ selectedItem.label }} -->
+          </DE.Field>
+        </DE.Cell>
+      </DE.Block>
+    </div>
+  </div>
 </template>
\ No newline at end of file
diff --git a/app/components/content/encounter/status.vue b/app/components/content/encounter/status.vue
new file mode 100644
index 00000000..e280d03e
--- /dev/null
+++ b/app/components/content/encounter/status.vue
@@ -0,0 +1,78 @@
+<script setup lang="ts">
+//
+import { getValueLabelList as getDoctorValueLabelList } from '~/services/doctor.service'
+import { getValueLabelList as getUnitValueLabelList } from '~/services/unit.service'
+import type { CheckInFormData, CheckOutFormData } from '~/schemas/encounter.schema'
+import { CheckInSchema, CheckOutSchema } from '~/schemas/encounter.schema'
+
+//
+import Checkin from '~/components/app/encounter/checkin-entry.vue'
+import Checkout from '~/components/app/encounter/checkout-entry.vue'
+import type { Encounter } from '~/models/encounter'
+
+//
+const props = defineProps<{
+  encounter: Encounter
+}>()
+
+// doctors
+const doctors = await getDoctorValueLabelList()
+
+// units
+const units = await getUnitValueLabelList()
+
+// check in
+const checkInValues = ref<any>({
+  dischargeMethod_code: '',
+  unit_id: 0,
+  responsibleDoctor_id: 0,
+})
+const checkInIsLoading = ref(false)
+const checkInIsReadonly = ref(false)
+
+// check out
+const checkOutValues = ref<any>({
+  dischargeMethod_code: '',
+  unit_id: 0,
+  responsibleDoctor_id: 0,
+})
+const checkOutIsLoading = ref(false)
+const checkOutIsReadonly = ref(false)
+
+function checkInSubmit(values: CheckInFormData) {
+  console.log(values)
+}
+
+function checkOutSubmit(values: CheckOutFormData) {
+  console.log(values)
+}
+</script>
+
+<template>
+  <div class="lg:grid grid-cols-2">
+    <div class="border-r lg:pe-4 xl:pe-5">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Masuk</div>
+      <Checkin
+        :schema="CheckInSchema"
+        :doctors="doctors"
+        :encounter="encounter"
+        :values="checkInValues"
+        :is-loading="checkOutIsLoading"
+        :is-readonly="checkOutIsReadonly"
+        @submit="checkInSubmit"
+      />
+    </div>
+    <div class="lg:ps-4 xl:ps-5">
+      <div class="mb-4 xl:mb-5 text-base text-center font-semibold">Informasi Keluar</div>
+      <Checkout
+        :schema="CheckOutSchema"
+        :doctors="doctors"
+        :units="units"
+        :values="checkOutValues"
+        :is-loading="checkOutIsLoading"
+        :is-readonly="checkOutIsReadonly"
+        @submit="checkOutSubmit"
+      />
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/app/lib/constants.ts b/app/lib/constants.ts
index 05213784..e2a49ef9 100644
--- a/app/lib/constants.ts
+++ b/app/lib/constants.ts
@@ -67,8 +67,18 @@ export const timeUnitCodes: Record<string, string> = {
 }
 
 export const dischargeMethodCodes: Record<string, string> = {
-  home: 'Home',
-  'home-request': 'Home Request',
+  home: "Pulang",
+  "home-request": "Pulang Atas Permintaan Sendiri",
+  "consul-back": "Konsultasi Balik / Lanjutan",
+  "consul-poly": "Konsultasi Poliklinik Lain",
+  "consul-executive": "Konsultasi Antar Dokter Eksekutif",
+  "consul-ch-day": "Konsultasi Hari Lain",
+  emergency: "Rujuk IGD",
+  "emergency-covid": "Rujuk IGD Covid",
+  inpatient: "Rujuk Rawat Inap",
+  external: "Rujuk Faskes Lain",
+  death: "Meninggal",
+  "death-on-arrival": "Meninggal Saat Tiba"
 }
 
 export const genderCodes: Record<string, string> = {
diff --git a/app/schemas/encounter.schema.ts b/app/schemas/encounter.schema.ts
new file mode 100644
index 00000000..96302993
--- /dev/null
+++ b/app/schemas/encounter.schema.ts
@@ -0,0 +1,23 @@
+import { z } from 'zod'
+
+// Check In
+const CheckInSchema = z.object({
+  registeredAt: z.string({ required_error: 'Tanggal masuk harus diisi' }),
+  responsible_doctor_id: z.number({ required_error: 'Dokter harus diisi' }).gt(0, 'Dokter harus diisi'),
+  adm_employee_id: z.number({ required_error: 'PJA harus diisi' }).gt(0, 'PJA harus diisi'),
+})
+type CheckInFormData = z.infer<typeof CheckInSchema>
+
+export { CheckInSchema }
+export type { CheckInFormData }
+
+// Check Out
+const CheckOutSchema = z.object({
+  dischargeMethod_code: z.string({ required_error: 'Metode pulang harus diisi' }),
+  unit_id: z.number(),
+  responsible_doctor_id: z.number(),
+})
+type CheckOutFormData = z.infer<typeof CheckOutSchema>
+
+export { CheckOutSchema }
+export type { CheckOutFormData }