diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index 31bf78e1..80cafba6 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -15,10 +15,12 @@ interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
   values: any
+  isReadonly?: boolean
 }
 
 const isLoading = ref(false)
 const props = defineProps<Props>()
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
   submit: [values: MaterialFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
@@ -75,13 +77,13 @@ function onCancelForm() {
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading" />
+          <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" />
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
         </Field>
       </Cell>
       <Cell>
@@ -94,20 +96,21 @@ function onCancelForm() {
             placeholder="Pilih satuan"
             v-bind="uomAttrs"
             :items="uoms"
-            :disabled="isLoading"
+            :disabled="isLoading || isReadonly"
           />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Stok</Label>
         <Field :errMessage="errors.stock">
-          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading" />
+          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :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"
diff --git a/app/components/app/tools/entry-form.vue b/app/components/app/tools/entry-form.vue
index 777d3ced..f12128eb 100644
--- a/app/components/app/tools/entry-form.vue
+++ b/app/components/app/tools/entry-form.vue
@@ -14,16 +14,19 @@ import Label from '~/components/pub/custom-ui/doc-entry/label.vue'
 interface Props {
   schema: z.ZodSchema<any>
   uoms: any[]
+  values: any
+  isReadonly?: boolean
 }
 
 const isLoading = ref(false)
 const props = defineProps<Props>()
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
 const emit = defineEmits<{
   submit: [values: DeviceFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
-const { handleSubmit, defineField, errors } = useForm({
+const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
   initialValues: {
     code: '',
@@ -37,6 +40,13 @@ const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [uom, uomAttrs] = defineField('uom_code')
 
+// Fill fields from props.values if provided
+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.uom_code !== undefined) uom.value = props.values.uom_code
+}
+
 const resetForm = () => {
   code.value = ''
   name.value = ''
@@ -46,9 +56,9 @@ const resetForm = () => {
 // Form submission handler
 function onSubmitForm(values: any) {
   const formData: DeviceFormData = {
-    name: values.name || '',
-    code: values.code || '',
-    uom_code: values.uom_code || '',
+    name: name.value || '',
+    code: code.value || '',
+    uom_code: uom.value || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -61,27 +71,17 @@ function onCancelForm() {
 
 <template>
   <form id="form-tools">
-    <Block labelSize="thin" class="!mb-2.5 xl:!mb-3 !pt-0" :colCount="1">
+    <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"
-          />
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading" />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input
-            id="name"
-            v-model="name"
-            v-bind="nameAttrs"
-            :disabled="isLoading"
-          />
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading" />
         </Field>
       </Cell>
       <Cell>
@@ -102,10 +102,11 @@ function onCancelForm() {
     <div class="my-2 flex justify-end gap-2 py-2">
       <Button variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
       <Button
+        v-if="!isReadonly"
         type="button"
         class="w-[120px]"
-        :disabled="isLoading"
-        @click="handleSubmit(onSubmitForm)"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
       >
         Simpan
       </Button>
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index d7ffa76f..b9b73aba 100644
--- a/app/components/content/equipment/list.vue
+++ b/app/components/content/equipment/list.vue
@@ -15,6 +15,7 @@ import {
   recId,
   recAction,
   recItem,
+  isReadonly,
   isProcessing,
   isFormEntryDialogOpen,
   isRecordConfirmationOpen,
@@ -29,6 +30,7 @@ import { getSourceMaterials, getSourceMaterialDetail } from '~/services/material
 import { getSourceUoms } from '~/services/uom.service'
 
 const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
 const getEquipmentDetail = async (id: number | string) => {
   const result = await getSourceMaterialDetail(id)
@@ -85,7 +87,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Perlengkapan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -98,8 +103,15 @@ provide('table_data_loader', isLoading)
 // Watch for row actions
 watch(recId, () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getEquipmentDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
       getEquipmentDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
       isRecordConfirmationOpen.value = true
@@ -122,7 +134,7 @@ onMounted(async () => {
 
     <Dialog
       v-model:open="isFormEntryDialogOpen"
-      :title="!!recItem ? 'Edit Perlengkapan' : 'Tambah Perlengkapan'"
+      :title="!!recItem ? title : 'Tambah Perlengkapan'"
       size="lg"
       prevent-outside
     >
@@ -131,11 +143,12 @@ onMounted(async () => {
         :values="recItem"
         :uoms="uoms"
         :is-loading="isProcessing"
+        :is-readonly="isReadonly"
         @submit="
           (values: MaterialFormData, resetForm: any) => {
-            if (!!recId) {
+            if (recId > 0) {
               handleActionEdit(recId, values, getEquipmentList, resetForm)
-              return 
+              return
             }
             handleActionSave(values, getEquipmentList, resetForm)
           }
diff --git a/app/handlers/device.handler.ts b/app/handlers/device.handler.ts
index 936fcbe1..73210740 100644
--- a/app/handlers/device.handler.ts
+++ b/app/handlers/device.handler.ts
@@ -1,7 +1,7 @@
 import { ref } from 'vue'
 
 // Services
-import { postSourceDevice, putSourceDevice, removeSourceDevice } from '~/services/device.service'
+import { postSourceDevice, patchSourceDevice, removeSourceDevice } from '~/services/device.service'
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
@@ -43,7 +43,7 @@ export async function handleActionEdit(id: number | string, values: any, refresh
   let isSuccess = false
   isProcessing.value = true
   try {
-    const result = await putSourceDevice(id, values)
+    const result = await patchSourceDevice(id, values)
     if (result.success) {
       isFormEntryDialogOpen.value = false
       isSuccess = true
diff --git a/app/handlers/material.handler.ts b/app/handlers/material.handler.ts
index b259bdc4..415020a9 100644
--- a/app/handlers/material.handler.ts
+++ b/app/handlers/material.handler.ts
@@ -1,11 +1,12 @@
 import { ref } from 'vue'
 
 // Services
-import { postSourceMaterial, putSourceMaterial, removeSourceMaterial } from '~/services/material.service'
+import { postSourceMaterial, patchSourceMaterial, removeSourceMaterial } from '~/services/material.service'
 
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
+const isReadonly = ref(false)
 const isProcessing = ref(false)
 const isFormEntryDialogOpen = ref(false)
 const isRecordConfirmationOpen = ref(false)
@@ -43,7 +44,7 @@ export async function handleActionEdit(id: number | string, values: any, refresh
   let isSuccess = false
   isProcessing.value = true
   try {
-    const result = await putSourceMaterial(id, values)
+    const result = await patchSourceMaterial(id, values)
     if (result.success) {
       isFormEntryDialogOpen.value = false
       isSuccess = true
@@ -84,4 +85,4 @@ export function handleCancelForm(reset: () => void) {
   }, 500)
 }
 
-export { recId, recAction, recItem, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
+export { recId, recAction, recItem, isReadonly, isProcessing, isFormEntryDialogOpen, isRecordConfirmationOpen }
diff --git a/app/services/device.service.ts b/app/services/device.service.ts
index 0f5c7ddb..11fa6479 100644
--- a/app/services/device.service.ts
+++ b/app/services/device.service.ts
@@ -16,9 +16,7 @@ export async function getSourceDevices(params: any = null) {
     const resp = await xfetch(url, 'GET')
     const result: any = {}
     result.success = resp.success
-    if (resp.success) {
-      result.data = (resp.body as Record<string, any>).data
-    }
+    result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
     console.error('Error fetching source devices:', error)
@@ -31,9 +29,7 @@ export async function getSourceDeviceDetail(id: string | number) {
     const resp = await xfetch(`/api/v1/device/${id}`, 'GET')
     const result: any = {}
     result.success = resp.success
-    if (resp.success) {
-      result.data = (resp.body as Record<string, any>).data
-    }
+    result.body = (resp.body as Record<string, any>) || {}
     return result
   } catch (error) {
     console.error('Error fetching device detail:', error)
@@ -44,17 +40,23 @@ export async function getSourceDeviceDetail(id: string | number) {
 export async function postSourceDevice(data: any) {
   try {
     const resp = await xfetch('/api/v1/device', 'POST', data)
-    return resp
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
   } catch (error) {
     console.error('Error creating device:', error)
     throw new Error('Failed to create device')
   }
 }
 
-export async function putSourceDevice(id: string | number, data: any) {
+export async function patchSourceDevice(id: string | number, data: any) {
   try {
-    const resp = await xfetch(`/api/v1/device/${id}`, 'PUT', data)
-    return resp
+    const resp = await xfetch(`/api/v1/device/${id}`, 'PATCH', data)
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
   } catch (error) {
     console.error('Error updating device:', error)
     throw new Error('Failed to update device')
@@ -64,7 +66,10 @@ export async function putSourceDevice(id: string | number, data: any) {
 export async function removeSourceDevice(id: string | number) {
   try {
     const resp = await xfetch(`/api/v1/device/${id}`, 'DELETE')
-    return resp
+    const result: any = {}
+    result.success = resp.success
+    result.body = (resp.body as Record<string, any>) || {}
+    return result
   } catch (error) {
     console.error('Error deleting device:', error)
     throw new Error('Failed to delete device')
diff --git a/app/services/material.service.ts b/app/services/material.service.ts
index 53868d9f..0f4db154 100644
--- a/app/services/material.service.ts
+++ b/app/services/material.service.ts
@@ -50,9 +50,9 @@ export async function postSourceMaterial(record: any) {
   }
 }
 
-export async function putSourceMaterial(id: number | string, record: any) {
+export async function patchSourceMaterial(id: number | string, record: any) {
   try {
-    const resp = await xfetch(`/api/v1/material/${id}`, 'PUT', record)
+    const resp = await xfetch(`/api/v1/material/${id}`, 'PATCH', record)
     const result: any = {}
     result.success = resp.success
     result.body = (resp.body as Record<string, any>) || {}