Merge branch 'dev' of https://github.com/dikstub-rssa/simrs-fe into feat/fe-encounter-68

app/components/content/auth/login.vue

@@ -2,8 +2,8 @@
 import { z } from 'zod'
 
 const loginSchema = z.object({
-  name: z.string().min(6, 'Please enter a valid username'),
-  password: z.string().min(6, 'Password must be at least 6 characters'),
+  name: z.string().min(3, 'Please enter a valid username'),
+  password: z.string().min(3, 'Password must be at least 3 characters'),
 })
 
 const { login } = useUserStore()

app/components/content/dashboard/index.vue

@@ -121,10 +121,10 @@ onMounted(() => {
       </div>
     </div>
     <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <PubBaseSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
       </div>
-  <div class="dashboard-grid">
+      <div class="dashboard-grid">
         <Card v-for="n in 3" :key="n">
           <CardHeader>
             <CardTitle>Recent Sales</CardTitle>

app/components/content/employee/entry.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
-import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
 
 const data = ref({
   name: '',

app/components/content/equipment/list.vue

@@ -1,36 +1,41 @@
 <script setup lang="ts">
-import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
-import { usePaginatedList } from '~/composables/usePaginatedList'
-import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+// Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const isFormEntryDialogOpen = ref(false)
-const isRecordConfirmationOpen = ref(false)
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const uoms = [
-  { value: 'uom-1', label: 'Satuan 1' },
-  { value: 'uom-2', label: 'Satuan 2' },
-  { value: 'uom-3', label: 'Satuan 3' },
-]
-const items = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-  { value: 'item-3', label: 'Item 3' },
-]
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+import type { Uom } from '~/models/uom'
 
-// Fungsi untuk fetch data equipment
-async function fetchEquipmentData(params: any) {
-  const endpoint = transform('/api/v1/equipment', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/material.handler'
+
+// Services
+import { getMaterials, getMaterialDetail } from '~/services/material.service'
+import { getUoms } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -40,7 +45,10 @@ const {
   handleSearch,
   fetchData: getEquipmentList,
 } = usePaginatedList({
-  fetchFn: fetchEquipmentData,
+  fetchFn: async ({ page }) => {
+    const result = await getMaterials({ search: searchInput.value, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'equipment',
 })
 
@@ -66,7 +74,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Perlengkapan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -76,116 +87,88 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
-// Watch for row actions
-watch(recId, () => {
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getMaterialDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+const getUomList = async () => {
+  const result = await getUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
       isRecordConfirmationOpen.value = true
       break
   }
 })
 
-const handleDeleteRow = async (record: any) => {
-  try {
-    // TODO : hit backend request untuk delete
-    console.log('Deleting record:', record)
-    // Simulate API call
-    // const response = await xfetch(`/api/v1/division/${record.id}`, {
-    //   method: 'DELETE'
-    // })
-
-    // Refresh data setelah berhasil delete
-    await getEquipmentList()
-
-    // TODO: Show success message
-    console.log('Record deleted successfully')
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    // TODO: Show error message
-  } finally {
-    // Reset record state
-    recId.value = 0
-    recAction.value = ''
-    recItem.value = null
-  }
-}
-
-const onCancelForm = (resetForm: () => void) => {
-  isFormEntryDialogOpen.value = false
-  setTimeout(() => {
-    resetForm()
-  }, 500)
-}
-
-const onSubmitForm = async (values: any, resetForm: () => void) => {
-  let isSuccess = false
-  try {
-    // TODO: Implement form submission logic
-    console.log('Form submitted:', values)
-
-    // Simulate API call
-    // const response = await xfetch('/api/v1/division', {
-    //   method: 'POST',
-    //   body: JSON.stringify(values)
-    // })
-
-    // If successful, mark as success and close dialog
-    isFormEntryDialogOpen.value = false
-    isSuccess = true
-
-    // Refresh data after successful submission
-    await getEquipmentList()
-
-    // TODO: Show success message
-    console.log('Division created successfully')
-  } catch (error: unknown) {
-    console.warn('Error submitting form:', error)
-    isSuccess = false
-    // Don't close dialog or reset form on error
-    // TODO: Show error message to user
-  } finally {
-    if (isSuccess) {
-      setTimeout(() => {
-        resetForm()
-      }, 500)
-    }
-  }
-}
-
-// Handle confirmation result
-const handleConfirmDelete = (record: any, action: string) => {
-  console.log('Confirmed action:', action, 'for record:', record)
-  handleDeleteRow(record)
-}
-
-const handleCancelConfirmation = () => {
-  // Reset record state when cancelled
-  recId.value = 0
-  recAction.value = ''
-  recItem.value = null
-}
+onMounted(async () => {
+  await getUomList()
+  await getEquipmentList()
+})
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+  <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
       <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
-      <AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
-        @submit="onSubmitForm" />
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Perlengkapan'"
+      size="lg"
+      prevent-outside
+    >
+      <AppEquipmentEntryForm
+        :schema="MaterialSchema"
+        :values="recItem"
+        :uoms="uoms"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MaterialFormData, resetForm: any) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getEquipmentList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
-    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+      @cancel=""
+    >
       <template #default="{ record }">
         <div class="text-sm">
           <p><strong>ID:</strong> {{ record?.id }}</p>

app/components/content/material/entry.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 // types
-import type { MaterialFormData } from '~/schemas/material'
-import { MaterialSchema } from '~/schemas/material'
+import type { MaterialFormData } from '~/schemas/material.schema'
+import { MaterialSchema } from '~/schemas/material.schema'
 
 const isLoading = ref(false)
 const uoms = [

app/components/content/medicine-group/list.vue

@@ -1,75 +1,162 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Modal from '~/components/pub/base/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
-const page = ref(1)
-const rowsPerPage = ref(10)
-const totalPages = 20
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-group.handler'
+
+// Services
+import { getMedicineGroups, getMedicineGroupDetail } from '~/services/medicine-group.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineGroupList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineGroups({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-group',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Golongan Obat',
-  icon: 'i-lucide-users',
+const headerPrep: HeaderPrep = {
+  title: 'Kelompok Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getPatientList() {
-  isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/medicine-group')
-  if (resp.success) {
-    data.value = (resp.body as Record<string, any>).data
-  }
-  isLoading.isTableLoading = false
-}
-
-onMounted(() => {
-  getPatientList()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentMedicineGroupDetail = async (id: number | string) => {
+  const result = await getMedicineGroupDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Detail Kelompok Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Kelompok Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineGroupList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineGroupList :data="data" />
-    <Pagination v-model:page="page" v-model:rows-per-page="rowsPerPage" :total-pages="totalPages" />
-  </div>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
-    <AppMedicineGroupEntryForm v-model="entry" />
-  </Modal>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Kelompok Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineGroupEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineGroupList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>

app/components/content/medicine-method/list.vue

@@ -1,74 +1,162 @@
 <script setup lang="ts">
-import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import Modal from '~/components/pub/base/modal/modal.vue'
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import { getMedicineMethods } from '~/services/medicine-method.service'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const data = ref([])
-const entry = ref<any>({})
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const refSearchNav: RefSearchNav = {
-  onClick: () => {
-    // open filter modal
-  },
-  onInput: (_val: string) => {
-    // filter patient list
-  },
-  onClear: () => {
-    // clear url param
-  },
-}
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { MedicineBaseSchema, type MedicineBaseFormData } from '~/schemas/medicine.schema'
 
-// Loading state management
-const isLoading = reactive<DataTableLoader>({
-  summary: false,
-  isTableLoading: false,
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getMedicineMethods, getMedicineMethodDetail } from '~/services/medicine-method.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getMedicineMethods({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
 })
 
-const isOpen = ref(false)
-
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
-
-const hreaderPrep: HeaderPrep = {
-  title: 'Metode Pemberian',
+const headerPrep: HeaderPrep = {
+  title: 'Metode Obat',
   icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
   addNav: {
     label: 'Tambah',
-    onClick: () => (isOpen.value = true),
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
   },
 }
 
-async function getData() {
-  try {
-    isLoading.isTableLoading = true
-    data.value = await getMedicineMethods()
-  } catch (err) {
-    console.error(err)
-  } finally {
-    isLoading.isTableLoading = false
-  }
-}
-
-onMounted(() => {
-  getData()
-})
-
 provide('rec_id', recId)
 provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
+
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getMedicineMethodDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
 </script>
 
 <template>
-  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
-  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <AppMedicineMethodList :data="data" />
-  </div>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
 
-  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
-    <AppMedicineMethodEntryForm v-model="entry" />
-  </Modal>
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Metode Obat'"
+      size="lg"
+      prevent-outside
+    >
+      <AppMedicineMethodEntryForm
+        :schema="MedicineBaseSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: MedicineBaseFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getMedicineMethodList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
 </template>

app/components/content/specialist-intern/entry.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
-import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
 
 const data = ref({
   name: '',

app/components/content/tools/list.vue

@@ -1,35 +1,41 @@
 <script setup lang="ts">
-import { DeviceSchema, type DeviceFormData } from '~/schemas/device'
-import { usePaginatedList } from '~/composables/usePaginatedList'
-import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+// Components
 import Dialog from '~/components/pub/base/modal/dialog.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
-import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 
-const isFormEntryDialogOpen = ref(false)
-const isRecordConfirmationOpen = ref(false)
-const recId = ref<number>(0)
-const recAction = ref<string>('')
-const recItem = ref<any>(null)
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
 
-const uoms = [
-  { value: 'uom-1', label: 'Satuan 1' },
-  { value: 'uom-2', label: 'Satuan 2' },
-  { value: 'uom-3', label: 'Satuan 3' },
-]
-const items = [
-  { value: 'item-1', label: 'Item 1' },
-  { value: 'item-2', label: 'Item 2' },
-  { value: 'item-3', label: 'Item 3' },
-]
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
+import type { Uom } from '~/models/uom'
 
-async function fetchDeviceData(params: any) {
-  const endpoint = transform('/api/v1/device', params)
-  return await xfetch(endpoint)
-}
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device.handler'
+
+// Services
+import { getDevices, getDeviceDetail } from '~/services/device.service'
+import { getUoms } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -37,9 +43,12 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getDeviceList,
+  fetchData: getToolsList,
 } = usePaginatedList({
-  fetchFn: fetchDeviceData,
+  fetchFn: async ({ page }) => {
+    const result = await getDevices({ search: searchInput.value, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
   entityName: 'device',
 })
 
@@ -65,7 +74,10 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah Peralatan',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recItem.value = null
+      recId.value = 0
       isFormEntryDialogOpen.value = true
+      isReadonly.value = false
     },
   },
 }
@@ -75,110 +87,79 @@ provide('rec_action', recAction)
 provide('rec_item', recItem)
 provide('table_data_loader', isLoading)
 
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getDeviceDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+  }
+}
+
+const getUomList = async () => {
+  const result = await getUoms()
+  if (result.success) {
+    const currentUoms = result.body?.data || []
+    uoms.value = currentUoms.map((uom: Uom) => ({ value: uom.code || uom.erp_id, label: uom.name }))
+  }
+}
+
 // Watch for row actions
-watch(recId, () => {
+watch([recId, recAction], () => {
   switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Detail Peralatan'
+      isReadonly.value = true
+      isFormEntryDialogOpen.value = true
+      break
     case ActionEvents.showEdit:
-      // TODO: Handle edit action
-      // isFormEntryDialogOpen.value = true
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Edit Peralatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
       break
     case ActionEvents.showConfirmDelete:
-      // Trigger confirmation modal open
       isRecordConfirmationOpen.value = true
       break
   }
 })
 
-const handleDeleteRow = async (record: any) => {
-  try {
-    // TODO : hit backend request untuk delete
-    console.log('Deleting record:', record)
-    // Simulate API call
-    // const response = await xfetch(`/api/v1/device/${record.id}`, {
-    //   method: 'DELETE'
-    // })
-
-    // Refresh data setelah berhasil delete
-    await getDeviceList()
-
-    // TODO: Show success message
-    console.log('Record deleted successfully')
-  } catch (error) {
-    console.error('Error deleting record:', error)
-    // TODO: Show error message
-  } finally {
-    // Reset record state
-    recId.value = 0
-    recAction.value = ''
-    recItem.value = null
-  }
-}
-
-const onCancelForm = (resetForm: () => void) => {
-  isFormEntryDialogOpen.value = false
-  setTimeout(() => {
-    resetForm()
-  }, 500)
-}
-
-const onSubmitForm = async (values: any, resetForm: () => void) => {
-  let isSuccess = false
-  try {
-    // TODO: Implement form submission logic
-    console.log('Form submitted:', values)
-
-    // Simulate API call
-    // const response = await xfetch('/api/v1/division', {
-    //   method: 'POST',
-    //   body: JSON.stringify(values)
-    // })
-
-    // If successful, mark as success and close dialog
-    isFormEntryDialogOpen.value = false
-    isSuccess = true
-
-    // Refresh data after successful submission
-    await getDeviceList()
-
-    // TODO: Show success message
-    console.log('Device created successfully')
-  } catch (error: unknown) {
-    console.warn('Error submitting form:', error)
-    isSuccess = false
-    // Don't close dialog or reset form on error
-    // TODO: Show error message to user
-  } finally {
-    if (isSuccess) {
-      setTimeout(() => {
-        resetForm()
-      }, 500)
-    }
-  }
-}
-
-// Handle confirmation result
-const handleConfirmDelete = (record: any, action: string) => {
-  console.log('Confirmed action:', action, 'for record:', record)
-  handleDeleteRow(record)
-}
-
-const handleCancelConfirmation = () => {
-  // Reset record state when cancelled
-  recId.value = 0
-  recAction.value = ''
-  recItem.value = null
-}
+onMounted(async () => {
+  await getUomList()
+  await getToolsList()
+})
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
+  <div class="p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
     <div class="rounded-md border p-4">
       <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
     </div>
 
-    <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Peralatan" size="lg" prevent-outside>
-      <AppToolsEntryForm :schema="DeviceSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Peralatan'"
+      size="lg"
+      prevent-outside
+    >
+      <AppToolsEntryForm
+        :schema="DeviceSchema"
+        :values="recItem"
+        :uoms="uoms"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: DeviceFormData, resetForm: any) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getToolsList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getToolsList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
@@ -186,8 +167,8 @@ const handleCancelConfirmation = () => {
       v-model:open="isRecordConfirmationOpen"
       action="delete"
       :record="recItem"
-      @confirm="handleConfirmDelete"
-      @cancel="handleCancelConfirmation"
+      @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+      @cancel=""
     >
       <template #default="{ record }">
         <div class="text-sm">

app/components/content/uom/list.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import { UomSchema, type UomFormData } from '~/schemas/uom.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/uom.handler'
+
+// Services
+import { getUoms, getUomDetail } from '~/services/uom.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUomList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getUoms({ search, page })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'uom',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Uom',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {},
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUomDetail = async (id: number | string) => {
+  const result = await getUomDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Detail Uom'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Edit Uom'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getUomList()
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <div class="rounded-md border p-4">
+      <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog
+      v-model:open="isFormEntryDialogOpen"
+      :title="!!recItem ? title : 'Tambah Uom'"
+      size="lg"
+      prevent-outside
+    >
+      <AppUomEntryForm
+        :schema="UomSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: UomFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getUomList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getUomList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getUomList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>