diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 37ed817f..4b223917 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import * as DE from '~/components/pub/my-ui/doc-entry';
-import type { Encounter } from '~/models/encounter';
+import * as DE from '~/components/pub/my-ui/doc-entry'
+import type { Encounter } from '~/models/encounter'
 
 const props = defineProps<{
   data: Encounter
@@ -8,27 +8,31 @@ const props = defineProps<{
 
 let address = ''
 if (props.data.patient.person.addresses) {
-  address = props.data.patient.person.addresses.map(a => a.address).join(', ')
+  address = props.data.patient.person.addresses.map((a) => a.address).join(', ')
 }
 
-let dpjp = '';
+let dpjp = ''
 if (props.data.responsible_doctor) {
   const dp = props.data.responsible_doctor.employee.person
   dpjp = `${dp.frontTitle} ${dp.name} ${dp.endTitle}`
 } else if (props.data.appointment_doctor) {
   dpjp = props.data.appointment_doctor.employee.person.name
 }
-
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
     <!-- Data Pasien -->
-    <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ data.patient.person.name }} - {{ data.patient.number }}</h2>
+    <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 class="grid grid-cols-3">
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
           <DE.Cell>
             <DE.Label class="font-semibold">No. RM</DE.Label>
             <DE.Field>
@@ -50,7 +54,10 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
           <DE.Cell>
             <DE.Label class="font-semibold">Tgl. Kunjungan</DE.Label>
             <DE.Field>
@@ -72,9 +79,17 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview" labelSize="large">
+        <DE.Block
+          mode="preview"
+          labelSize="large"
+        >
           <DE.Cell>
-            <DE.Label position="dynamic" class="!text-base 2xl:!text-lg font-semibold">Billing</DE.Label>
+            <DE.Label
+              position="dynamic"
+              class="!text-base font-semibold 2xl:!text-lg"
+            >
+              Billing
+            </DE.Label>
             <DE.Field class="text-base 2xl:text-lg">
               Rp. 000.000
               <!-- {{ data }} -->
diff --git a/app/components/content/soapi/form-function.vue b/app/components/content/soapi/form-function.vue
index d9ef1d65..ade9e4d1 100644
--- a/app/components/content/soapi/form-function.vue
+++ b/app/components/content/soapi/form-function.vue
@@ -7,9 +7,16 @@ import { FunctionSoapiSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
+const route = useRoute()
 const isOpen = ref(false)
 const data = ref([])
 const schema = FunctionSoapiSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'function',
+  value: '',
+})
 const model = ref({
   'prim-compl': '',
   'past-disease': '',
@@ -76,10 +83,19 @@ async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
-    console.log('✅ Valid data:', result.data)
-    handleActionSave(result.data, {}, toast)
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
   } else {
-    console.log('❌ Ada error di form', result)
+    console.log('Ada error di form', result)
   }
 }
 
diff --git a/app/components/content/soapi/form-rehab.vue b/app/components/content/soapi/form-rehab.vue
index 6681e64c..655063f9 100644
--- a/app/components/content/soapi/form-rehab.vue
+++ b/app/components/content/soapi/form-rehab.vue
@@ -7,9 +7,16 @@ import { EarlyRehabSchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
+const route = useRoute()
 const isOpen = ref(false)
 const data = ref([])
 const schema = EarlyRehabSchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'early-rehab',
+  value: '',
+})
 const model = ref({
   'prim-compl': '',
   'medical-plan': '',
@@ -81,10 +88,19 @@ async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRehabRef.value?.validate()
   if (result?.valid) {
-    console.log('✅ Valid data:', result.data)
-    handleActionSave(result.data, {}, toast)
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
   } else {
-    console.log('❌ Ada error di form', result)
+    console.log('Ada error di form', result)
   }
 }
 
diff --git a/app/components/content/soapi/form.vue b/app/components/content/soapi/form.vue
index f1857de6..794daef9 100644
--- a/app/components/content/soapi/form.vue
+++ b/app/components/content/soapi/form.vue
@@ -7,9 +7,16 @@ import { EarlySchema } from '~/schemas/soapi.schema'
 import { toast } from '~/components/pub/ui/toast'
 import { handleActionSave, handleActionEdit } from '~/handlers/soapi-early.handler'
 
+const route = useRoute()
 const isOpen = ref(false)
 const data = ref([])
 const schema = EarlySchema
+const payload = ref({
+  encounter_id: 0,
+  time: '',
+  typeCode: 'early',
+  value: '',
+})
 
 const model = ref({
   'prim-compl': '',
@@ -54,10 +61,19 @@ async function actionHandler(type: string) {
   console.log(type)
   const result = await entryRef.value?.validate()
   if (result?.valid) {
-    console.log('✅ Valid data:', result.data)
-    handleActionSave(result.data, {}, toast)
+    console.log('data', result.data)
+    handleActionSave(
+      {
+        ...payload.value,
+        value: JSON.stringify(result.data),
+        encounter_id: +route.params.id,
+        time: new Date().toISOString(),
+      },
+      {},
+      toast,
+    )
   } else {
-    console.log('❌ Ada error di form', result)
+    console.log('Ada error di form', result)
   }
 }