⚠️ refactor (medicine-method): simplify entry form and list configuration

app/components/flow/medicine-method/add.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts"></script>
-
-<template>
-  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
-    <Icon name="i-lucide-user" class="me-2" />
-    <span class="font-semibold">Tambah</span> Pasien
-  </div>
-  <AppPatientEntryForm />
-</template>

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

@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
-import type { Summary } from '~/components/pub/base/summary-card/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
-import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
-import SummaryCard from '~/components/pub/base/summary-card/summary-card.vue'
+import Modal from '~/components/pub/base/modal/modal.vue'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
+const entry = ref<any>({})
 
 const refSearchNav: RefSearchNav = {
   onClick: () => {
@@ -26,68 +25,24 @@ const isLoading = reactive<DataTableLoader>({
   isTableLoading: false,
 })
 
+const isOpen = ref(false)
+
 const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
-  title: 'Pasien',
-  icon: 'i-lucide-users',
+  title: 'Metode Pemberian',
+  icon: 'i-lucide-medicine-bottle',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => (isOpen.value = true),
   },
 }
 
-// Initial/default data structure
-const summaryData: Summary[] = [
-  {
-    title: 'Total Pasien',
-    icon: UsersRound,
-    metric: 23,
-    trend: 15,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Pasien Aktif',
-    icon: UserCheck,
-    metric: 100,
-    trend: 9,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Kunjungan Hari Ini',
-    icon: Calendar,
-    metric: 52,
-    trend: 1,
-    timeframe: 'daily',
-  },
-  {
-    title: 'Peserta BPJS',
-    icon: Hospital,
-    metric: 71,
-    trend: -3,
-    timeframe: 'daily',
-  },
-]
-
-// API call function
-async function getPatientSummary() {
-  try {
-    isLoading.summary = true
-
-    await new Promise((resolve) => setTimeout(resolve, 500))
-  } catch (error) {
-    console.error('Error fetching patient summary:', error)
-    // Keep default/existing data on error
-  } finally {
-    isLoading.summary = false
-  }
-}
-
 async function getPatientList() {
   isLoading.isTableLoading = true
-  const resp = await xfetch('/api/v1/patient')
+  const resp = await xfetch('/api/v1/medicine-method')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -95,7 +50,6 @@ async function getPatientList() {
 }
 
 onMounted(() => {
-  getPatientSummary()
   getPatientList()
 })
 
@@ -108,14 +62,10 @@ provide('table_data_loader', isLoading)
 <template>
   <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
   <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
-    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-      <template v-if="isLoading.summary">
-        <SummaryCard v-for="n in 4" :key="n" is-skeleton />
-      </template>
-      <template v-else>
-        <SummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
-      </template>
-    </div>
-    <AppPatientList :data="data" />
+    <AppMedicineMethodList :data="data" />
   </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
+    <AppMedicineMethodEntryForm v-model="entry" />
+  </Modal>
 </template>