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

app/components/app/medicine-method/entry-form.vue

@@ -18,69 +18,16 @@ const data = computed({
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="1">
+          <FieldGroup>
-            <Label>Nama dan Gelar</Label>
+            <Label>Nama</Label>
             <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
+              <Input v-model="data.name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
             </Field>
           </FieldGroup>
-        </Block>
+          <FieldGroup>
-        <Block>
+            <Label>Kode</Label>
-          <FieldGroup :column="2">
-            <Label>NIK</Label>
             <Field>
-              <Input type="text" name="identity_number" />
+              <Input />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>NO SIP</Label>
-            <Field name="sip_number">
-              <Input type="text" name="sip_no" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
-            <Field name="phone">
-              <Input type="text" name="phone" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
-            <Field>
-              <Input type="text" name="bpjs_code" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
-            <Field>
-              <Input type="number" name="outPatient_rate" />
-            </Field>
-          </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
-            <Field>
-              <Input type="number" name="inPatient_rate" />
-            </Field>
-          </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
-            <Label>Status</Label>
-            <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
             </Field>
           </FieldGroup>
         </Block>

app/components/app/medicine-method/list-cfg.ts

@@ -8,85 +8,25 @@ import type {
 } from '~/components/pub/custom-ui/data/types'
 import { defineAsyncComponent } from 'vue'
 
-type SmallDetailDto = any
-
 const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
-const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
 const _doctorStatus = {
   0: 'Tidak Aktif',
   1: 'Aktif',
 }
 
-export const cols: Col[] = [
+export const cols: Col[] = [{}, {}, { width: 50 }]
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
 
-export const header: Th[][] = [
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
-  [
-    { label: 'Kode JKN' },
-    { label: 'Nama' },
-    { label: 'No KTP' },
-    { label: 'No SIP' },
-    { label: 'No IHS' },
-    { label: 'Telpon' },
-    { label: 'Fee Ranap' },
-    { label: 'Fee Rajal' },
-    { label: 'Status' },
-    { label: '' },
-  ],
-]
 
-export const keys = [
+export const keys = ['code', 'name', 'action']
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
   { key: 'name', label: 'Nama' },
 ]
 
-export const funcParsed: RecStrFuncUnknown = {
+export const funcParsed: RecStrFuncUnknown = {}
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
-  },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-}
 
 export const funcComponent: RecStrFuncComponent = {
   action(rec, idx) {
@@ -97,14 +37,6 @@ export const funcComponent: RecStrFuncComponent = {
     }
     return res
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
 }
 
 export const funcHtml: RecStrFuncUnknown = {

app/components/app/medicine-method/status-badge.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { Badge } from '~/components/pub/ui/badge'
-
-const props = defineProps<{
-  rec: any
-  idx?: number
-}>()
-
-const doctorStatus = {
-  0: 'Tidak Aktif',
-  1: 'Aktif',
-}
-
-const statusText = computed(() => {
-  return doctorStatus[props.rec.status_code as keyof typeof doctorStatus]
-})
-
-const badgeVariant = computed(() => {
-  return props.rec.status_code === 1 ? 'default' : 'destructive'
-})
-</script>
-
-<template>
-  <div class="flex justify-center">
-    <Badge :variant="badgeVariant">
-      {{ statusText }}
-    </Badge>
-  </div>
-</template>

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 Modal from '~/components/pub/base/modal/modal.vue'
-import SummaryCard from '~/components/pub/base/summary-card/summary-card.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',
+  title: 'Metode Pemberian',
-  icon: 'i-lucide-users',
+  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">
+    <AppMedicineMethodList :data="data" />
-      <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" />
   </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Metode Pemberian" size="lg" prevent-outside>
+    <AppMedicineMethodEntryForm v-model="entry" />
+  </Modal>
 </template>

app/pages/_dev/index.vue

@@ -49,7 +49,7 @@ const navMenu = ref({
     {
       title: 'Test Medicine List',
       icon: 'i-lucide-user',
-      component: defineAsyncComponent(() => import('~/components/flow/medicine-group/list.vue')),
+      component: defineAsyncComponent(() => import('~/components/flow/medicine-method/list.vue')),
     },
   ],
 })