impl data table list of doctor

app/components/flow/doctor/list.vue

@@ -4,7 +4,6 @@ import type { HeaderPrep, RefSearchNav } from '~/components/pub/nav/types'
 const data = ref([])
 
 const refSearchNav: RefSearchNav = {
-
   onClick: () => {
     // open filter modal
   },
@@ -20,25 +19,26 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-const hreaderPrep: HeaderPrep = {
+const headerPrep: HeaderPrep = {
   title: 'Dokter',
-  icon: 'i-lucide-add',
+  icon: 'i-lucide-network',
   addNav: {
     label: 'Tambah',
     onClick: () => navigateTo('/doctor/add'),
   },
 }
 
-async function getPatientList() {
-  const resp = await xfetch('/api/v1/patient')
-  console.log('data patient', resp)
+useAsyncData('getDoctor', () => xfetch('/api/v1/doctor'), { server: false, immediate: true })
+
+async function getDoctorList() {
+  const resp = await xfetch('/api/v1/doctor')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
 }
 
 onMounted(() => {
-  getPatientList()
+  getDoctorList()
 })
 
 provide('rec_id', recId)
@@ -47,6 +47,6 @@ provide('rec_item', recItem)
 </script>
 
 <template>
-  <PubNavHeaderPrep :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <PubNavHeaderPrep :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
   <AppDoctorList :data="data" />
 </template>