diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index c7b7c778..90d0afe7 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -3,19 +3,31 @@
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
 import { IntegrationBpjsSchema, type IntegrationBpjsFormData } from '~/schemas/integration-bpjs.schema'
-// components
+// components (use doc-entry block pattern)
+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 { Label } from '~/components/pub/ui/label'
 import Select from '~/components/pub/ui/select/Select.vue'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
 import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
+const props = defineProps<{
+  isLoading?: boolean
+  isReadonly?: boolean
+  values?: any
+}>()
+
 const emit = defineEmits<{
   (e: 'event', value: any): void
 }>()
 
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+
 const items = [
   { value: 'item-1', label: 'Item 1' },
   { value: 'item-2', label: 'Item 2' },
@@ -23,27 +35,27 @@ const items = [
 ]
 
 // Validation schema (moved to shared file)
-const { handleSubmit, errors, defineField } = useForm<IntegrationBpjsFormData>({
+const { handleSubmit, errors, defineField, meta } = useForm<IntegrationBpjsFormData>({
   validationSchema: toTypedSchema(IntegrationBpjsSchema),
 })
 
-// Bind fields
-const [tanggalSep] = defineField('tanggalSep')
-const [jalur] = defineField('jalur')
-const [noBpjs] = defineField('noBpjs')
-const [noKtp] = defineField('noKtp')
-const [noRm] = defineField('noRm')
-const [namaPasien] = defineField('namaPasien')
-const [noTelp] = defineField('noTelp')
-const [noSuratKontrol] = defineField('noSuratKontrol')
-const [tglSuratKontrol] = defineField('tglSuratKontrol')
-const [klinikTujuan] = defineField('klinikTujuan')
-const [dpjp] = defineField('dpjp')
-const [diagnosaAwal] = defineField('diagnosaAwal')
-const [cob] = defineField('cob')
-const [katarak] = defineField('katarak')
-const [jenisProsedur] = defineField('jenisProsedur')
-const [kodePenunjang] = defineField('kodePenunjang')
+// Bind fields and extract attrs for consistent Field pattern
+const [tanggalSep, tanggalSepAttrs] = defineField('tanggalSep')
+const [jalur, jalurAttrs] = defineField('jalur')
+const [noBpjs, noBpjsAttrs] = defineField('noBpjs')
+const [noKtp, noKtpAttrs] = defineField('noKtp')
+const [noRm, noRmAttrs] = defineField('noRm')
+const [namaPasien, namaPasienAttrs] = defineField('namaPasien')
+const [noTelp, noTelpAttrs] = defineField('noTelp')
+const [noSuratKontrol, noSuratKontrolAttrs] = defineField('noSuratKontrol')
+const [tglSuratKontrol, tglSuratKontrolAttrs] = defineField('tglSuratKontrol')
+const [klinikTujuan, klinikTujuanAttrs] = defineField('klinikTujuan')
+const [dpjp, dpjpAttrs] = defineField('dpjp')
+const [diagnosaAwal, diagnosaAwalAttrs] = defineField('diagnosaAwal')
+const [cob, cobAttrs] = defineField('cob')
+const [katarak, katarakAttrs] = defineField('katarak')
+const [jenisProsedur, jenisProsedurAttrs] = defineField('jenisProsedur')
+const [kodePenunjang, kodePenunjangAttrs] = defineField('kodePenunjang')
 
 // Submit handler
 const onSubmit = handleSubmit((values) => {
@@ -53,20 +65,47 @@ const onSubmit = handleSubmit((values) => {
 
 <template>
   <div class="mx-auto w-full">
-    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
+    <form
+      @submit.prevent="onSubmit"
+      class="grid gap-6 p-4"
+    >
       <!-- Tanggal SEP & Jalur -->
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
-          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
-          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label for="jalur">Jalur</Label>
-          <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
-          <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
-        </div>
-      </div>
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Tanggal SEP
+            <span class="ml-1 text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.tanggalSep">
+            <DatepickerSingle
+              id="tanggalSep"
+              v-model="tanggalSep"
+              v-bind="tanggalSepAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal sep"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">Jalur</Label>
+          <Field :errMessage="errors.jalur">
+            <Select
+              id="jalur"
+              icon-name="i-lucide-chevron-down"
+              v-model="jalur"
+              v-bind="jalurAttrs"
+              :items="items"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih jalur"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <hr />
 
@@ -78,163 +117,356 @@ const onSubmit = handleSubmit((values) => {
           class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
           @click="emit('event', 'search-patient')"
         >
-          <Icon name="i-lucide-search" class="h-5 w-5" />
+          <Icon
+            name="i-lucide-search"
+            class="h-5 w-5"
+          />
           Cari Pasien
         </Button>
       </div>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
-          <Input v-model="noBpjs" />
-          <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. KTP<span class="text-red-500">*</span></Label>
-          <Input v-model="noKtp" />
-          <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. RM<span class="text-red-500">*</span></Label>
-          <Input v-model="noRm" />
-          <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Nama Pasien<span class="text-red-500">*</span></Label>
-          <Input v-model="namaPasien" />
-          <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>No. Telepon<span class="text-red-500">*</span></Label>
-          <Input v-model="noTelp" />
-          <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
-        </div>
-      </div>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            No. Kartu BPJS
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.noBpjs">
+            <Input
+              id="noBpjs"
+              v-model="noBpjs"
+              v-bind="noBpjsAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            No. KTP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.noKtp">
+            <Input
+              id="noKtp"
+              v-model="noKtp"
+              v-bind="noKtpAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            No. RM
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.noRm">
+            <Input
+              id="noRm"
+              v-model="noRm"
+              v-bind="noRmAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            Nama Pasien
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.namaPasien">
+            <Input
+              id="namaPasien"
+              v-model="namaPasien"
+              v-bind="namaPasienAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            No. Telepon
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.noTelp">
+            <Input
+              id="noTelp"
+              v-model="noTelp"
+              v-bind="noTelpAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <hr />
 
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
-      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
-          <div class="flex gap-2">
-            <Input class="flex-1" v-model="noSuratKontrol" />
-            <Button
-              variant="outline"
-              class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
-              @click="emit('event', 'search-letter')"
-            >
-              <Icon name="i-lucide-search" class="h-5 w-5" />
-              Cari Data
-            </Button>
-          </div>
-          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
-          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
-          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
-        </div>
-        <div class="flex flex-row items-center gap-2">
-          <div class="flex-1">
-            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            No. Surat Kontrol
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.noSuratKontrol">
+            <div class="flex gap-2">
+              <Input
+                id="noSuratKontrol"
+                class="flex-1"
+                v-model="noSuratKontrol"
+                v-bind="noSuratKontrolAttrs"
+                :disabled="isLoading || isReadonly"
+              />
+              <Button
+                variant="outline"
+                class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+                @click="emit('event', 'search-letter')"
+              >
+                <Icon
+                  name="i-lucide-search"
+                  class="h-5 w-5"
+                />
+                Cari Data
+              </Button>
+            </div>
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            Tanggal Surat Kontrol
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.tglSuratKontrol">
+            <DatepickerSingle
+              id="tglSuratKontrol"
+              v-model="tglSuratKontrol"
+              v-bind="tglSuratKontrolAttrs"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih tanggal surat kontrol"
+            />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label height="compact">
+            Klinik Tujuan
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.klinikTujuan">
             <Select
+              id="klinikTujuan"
               icon-name="i-lucide-chevron-down"
               v-model="klinikTujuan"
+              v-bind="klinikTujuanAttrs"
               :items="items"
+              :disabled="isLoading || isReadonly"
               placeholder="Pilih klinik"
-            ></Select>
-            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
-          </div>
-          <div>
-            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
-            <RadioGroup v-model="cob" class="flex items-center gap-2">
+            />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Klinik Eksekutif
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cob">
+            <RadioGroup
+              v-model="cob"
+              class="flex items-center gap-2"
+              v-bind="cobAttrs"
+            >
               <div class="flex items-center space-x-2">
-                <RadioGroupItem value="Ya" id="cob-ya" />
+                <RadioGroupItem
+                  value="Ya"
+                  id="cob-ya"
+                />
                 <Label for="cob-ya">Ya</Label>
               </div>
               <div class="flex items-center space-x-2">
-                <RadioGroupItem value="Tidak" id="cob-tidak" />
+                <RadioGroupItem
+                  value="Tidak"
+                  id="cob-tidak"
+                />
                 <Label for="cob-tidak">Tidak</Label>
               </div>
             </RadioGroup>
-          </div>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>DPJP<span class="text-red-500">*</span></Label>
-          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
-          <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
-        </div>
-        <div class="flex flex-col gap-2">
-          <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
-          <Input v-model="diagnosaAwal" />
-          <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
-        </div>
-      </div>
+          </Field>
+        </Cell>
 
-      <!-- Catatan -->
-      <div>
-        <Label>Catatan</Label>
-        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
-      </div>
+        <Cell>
+          <Label height="compact">
+            DPJP
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.dpjp">
+            <Select
+              id="dpjp"
+              icon-name="i-lucide-chevron-down"
+              v-model="dpjp"
+              v-bind="dpjpAttrs"
+              :items="items"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih DPJP"
+            />
+          </Field>
+        </Cell>
 
-      <div class="flex items-center gap-4">
-        <div>
-          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="cob" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Ya" id="cob-ya" />
-              <Label for="cob-ya">Ya</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Tidak" id="cob-tidak" />
-              <Label for="cob-tidak">Tidak</Label>
-            </div>
-          </RadioGroup>
-        </div>
-        <div>
-          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="katarak" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Ya" id="katarak-ya" />
-              <Label for="katarak-ya">Ya</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="Tidak" id="katarak-tidak" />
-              <Label for="katarak-tidak">Tidak</Label>
-            </div>
-          </RadioGroup>
-        </div>
-      </div>
+        <Cell>
+          <Label height="compact">
+            Diagnosa Awal
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.diagnosaAwal">
+            <Input
+              id="diagnosaAwal"
+              v-model="diagnosaAwal"
+              v-bind="diagnosaAwalAttrs"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
-          <RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="procedure-one" id="procedure-one" />
-              <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
-            </div>
-            <div class="flex items-center space-x-2">
-              <RadioGroupItem value="procedure-two" id="procedure-two" />
-              <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
-            </div>
-          </RadioGroup>
-        </div>
-      </div>
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="1"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="dynamic">Catatan</Label>
+          <Field>
+            <Textarea
+              id="catatan"
+              class="h-[200px] w-full border-gray-400 bg-white"
+              placeholder="Masukkan catatan opsional"
+              :disabled="isLoading || isReadonly"
+            />
+          </Field>
+        </Cell>
 
-      <div class="grid gap-4 md:grid-cols-3">
-        <div class="flex flex-col gap-2">
-          <Label>Kode Penunjang<span class="text-red-500">*</span></Label>
-          <Select
-            icon-name="i-lucide-chevron-down"
-            v-model="kodePenunjang"
-            :items="items"
-            placeholder="Pilih Kode Penunjang"
-          ></Select>
-          <p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
-        </div>
-      </div>
+        <Cell> 
+          <Label height="compact">
+            COB
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.cob">
+            <RadioGroup
+              v-model="cob"
+              class="flex items-center gap-2"
+              v-bind="cobAttrs"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="Ya"
+                  id="cob-ya"
+                />
+                <Label for="cob-ya">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="Tidak"
+                  id="cob-tidak"
+                />
+                <Label for="cob-tidak">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Katarak
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.katarak">
+            <RadioGroup
+              v-model="katarak"
+              class="flex items-center gap-2"
+              v-bind="katarakAttrs"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="Ya"
+                  id="katarak-ya"
+                />
+                <Label for="katarak-ya">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="Tidak"
+                  id="katarak-tidak"
+                />
+                <Label for="katarak-tidak">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label height="compact">
+            Jenis Prosedur
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.jenisProsedur">
+            <RadioGroup
+              v-model="jenisProsedur"
+              class="flex items-center gap-2"
+              v-bind="jenisProsedurAttrs"
+            >
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="procedure-one"
+                  id="procedure-one"
+                />
+                <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem
+                  value="procedure-two"
+                  id="procedure-two"
+                />
+                <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
+              </div>
+            </RadioGroup>
+          </Field>
+        </Cell>
+      </Block>
+
+      <Block
+        labelSize="thin"
+        class="!pt-0"
+        :colCount="3"
+        :cellFlex="false"
+      >
+        <Cell>
+          <Label height="compact">
+            Kode Penunjang
+            <span class="text-red-500">*</span>
+          </Label>
+          <Field :errMessage="errors.kodePenunjang">
+            <Select
+              id="kodePenunjang"
+              icon-name="i-lucide-chevron-down"
+              v-model="kodePenunjang"
+              v-bind="kodePenunjangAttrs"
+              :items="items"
+              :disabled="isLoading || isReadonly"
+              placeholder="Pilih Kode Penunjang"
+            />
+          </Field>
+        </Cell>
+      </Block>
 
       <!-- Actions -->
       <div class="mt-6 flex justify-end gap-2">
@@ -244,17 +476,32 @@ const onSubmit = handleSubmit((values) => {
           class="h-[40px] min-w-[120px] text-orange-400 hover:bg-green-50"
           @click="emit('event', 'history-sep')"
         >
-          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
+          <Icon
+            name="i-lucide-history"
+            class="h-5 w-5"
+          />
+          Riwayat SEP
         </Button>
         <Button
           type="button"
           variant="outline"
           class="h-[40px] min-w-[120px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50 hover:text-orange-400"
         >
-          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
+          <Icon
+            name="i-lucide-eye"
+            class="h-5 w-5"
+          />
+          Preview
         </Button>
-        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
-          <Icon name="i-lucide-save" class="h-5 w-5" />
+        <Button
+          type="submit"
+          class="h-[40px] min-w-[120px] text-white"
+          :disabled="isLoading || !meta.valid"
+        >
+          <Icon
+            name="i-lucide-save"
+            class="h-5 w-5"
+          />
           Simpan
         </Button>
       </div>