diff --git a/app/components/app/mcu-order-item/list-entry.cfg.ts b/app/components/app/mcu-order-item/list-entry.cfg.ts
index 89d85dce..8bf2fb18 100644
--- a/app/components/app/mcu-order-item/list-entry.cfg.ts
+++ b/app/components/app/mcu-order-item/list-entry.cfg.ts
@@ -1,18 +1,19 @@
 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/ui/input/Input.vue'))
+const input = defineAsyncComponent(() => import('~/components/pub/my-ui/data/editable-div.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 +28,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: {},
diff --git a/app/components/app/mcu-order-item/list-entry.vue b/app/components/app/mcu-order-item/list-entry.vue
index 6c93c5ac..4fd8edb8 100644
--- a/app/components/app/mcu-order-item/list-entry.vue
+++ b/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"
   />
diff --git a/app/components/app/mcu-order-item/list.cfg.ts b/app/components/app/mcu-order-item/list.cfg.ts
index 2b054379..1dee1bf9 100644
--- a/app/components/app/mcu-order-item/list.cfg.ts
+++ b/app/components/app/mcu-order-item/list.cfg.ts
@@ -6,7 +6,7 @@ export const config: Config = {
   headers: [
     [
       { label: 'Nama' },
-      { label: 'Jenis' },
+      { label: 'Catatan' },
     ],
   ],
 
diff --git a/app/components/pub/my-ui/data/camuflage-input.vue b/app/components/pub/my-ui/data/camuflage-input.vue
new file mode 100644
index 00000000..09500724
--- /dev/null
+++ b/app/components/pub/my-ui/data/camuflage-input.vue
@@ -0,0 +1,59 @@
+<script setup lang="ts">
+const model = defineModel<string>()
+const props = defineProps<{
+  class: string
+  defaultClass?: string
+  disabled?: boolean
+  width?: number
+  widthUnit?: string
+}>()
+
+const InputComp = defineAsyncComponent(() => import('~/components/pub/ui/input/Input.vue'))
+const activeState = ref(false)
+
+let defaultClass = props.defaultClass ?? 'h-8 xl:h-9'
+let widthStyle = '';
+if(props.width) {
+  widthStyle = `width: ${props.width}${props.widthUnit ?? 'px'};`
+} else {
+  widthStyle = `width: 100%;`
+}
+
+const recId = inject<Ref<number>>('rec_id')!
+const recAction = inject<Ref<string>>('rec_action')!
+const recItem = inject<Ref<any>>('rec_item')!
+
+watch(activeState, () => {
+  nextTick(() => {
+    if (asyncInputRef.value && typeof asyncInputRef.value.focus === 'function') {
+        asyncInputRef.value.focus()
+      }
+  })
+
+    //   document.getElementById('editable-div')?.scrollIntoView({ behavior: 'smooth' })
+    InputComp.value.focus()
+    // console.log(inputComp.__defaults)
+})
+</script>
+
+<template>
+  <div
+    v-if="!activeState || disabled" @click="() => activeState = true"
+    :class="`${defaultClass}`"
+    :style="widthStyle">
+    {{ model }}
+  </div>
+  <InputComp v-else 
+    v-model="model"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    @blur="() => activeState = false"
+  />
+  <!-- {{ inputComp.value }} -->
+  <!-- <Input
+    v-else v-model="model" @blur="() => activeState = false"
+    :class="`${defaultClass}`"
+    :style="widthStyle"
+    autofocus
+  /> -->
+</template>
diff --git a/app/models/mcu-order-item.ts b/app/models/mcu-order-item.ts
index 67038edf..ed78f755 100644
--- a/app/models/mcu-order-item.ts
+++ b/app/models/mcu-order-item.ts
@@ -3,6 +3,7 @@ import { type Base, genBase } from "./_base"
 export interface McuOrderItem extends Base {
   mcuOrder_id: number
   mcuSrc_id: number
+  note?: string
   examinationDate?: string
   result?: string
   status_code?: string
diff --git a/app/services/mcu-order.service.ts b/app/services/mcu-order.service.ts
index 77e023d7..7299203b 100644
--- a/app/services/mcu-order.service.ts
+++ b/app/services/mcu-order.service.ts
@@ -22,3 +22,16 @@ export function update(id: number | string, data: any) {
 export function remove(id: number | string) {
   return base.remove(path, id)
 }
+
+export async function submit(id: number) {
+  try {
+    const resp = await xfetch(`${path}/${id}/submit`, 'PATCH')
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
+  } catch (error) {
+    console.error(`Error submitting ${name}:`, error)
+    throw new Error(`Failed to submit ${name}`)
+  }
+}