✨ feat (medicine): implement medicine entry form and list

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

@@ -11,76 +11,66 @@ const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
+
+const items = [
+  { value: '1', label: 'item 1' },
+  { value: '2', label: 'item 2' },
+  { value: '3', label: 'item 3' },
+  { value: '4', label: 'item 4' },
+]
 </script>
 
 <template>
   <form id="entry-form">
     <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">
-            <Label>Nama dan Gelar</Label>
-            <Field>
-              <Input v-model="data.name" type="text" name="name" default-value="dr." />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-            <Field>
-              <Input type="text" name="name" />
-            </Field>
-          </FieldGroup>
-        </Block>
         <Block>
           <FieldGroup :column="2">
-            <Label>NIK</Label>
+            <Label>Nama</Label>
             <Field>
               <Input type="text" name="identity_number" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>NO SIP</Label>
+            <Label>Kode</Label>
             <Field name="sip_number">
               <Input type="text" name="sip_no" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
           <FieldGroup :column="2">
-            <Label>Telepon / HP</Label>
+            <Label>Metode Pemberian</Label>
             <Field name="phone">
-              <Input type="text" name="phone" />
+              <Select :items="items" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>Kode BPJS</Label>
+            <Label>Bentuk Sediaan</Label>
             <Field>
-              <Input type="text" name="bpjs_code" />
+              <Select :items="items" />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
           <FieldGroup :column="2">
-            <Label>Fee Rajal</Label>
+            <Label>Dosis</Label>
             <Field>
               <Input type="number" name="outPatient_rate" />
             </Field>
           </FieldGroup>
           <FieldGroup :column="2">
-            <Label>Fee Ranap</Label>
+            <Label>Infra</Label>
             <Field>
-              <Input type="number" name="inPatient_rate" />
+              <Input />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="3">
+          <FieldGroup :column="2">
+            <Label>Stock</Label>
+            <Field>
+              <Input type="number" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2">
             <Label>Status</Label>
             <Field>
-              <Input type="select" name="status">
-                <option value="active">Aktif</option>
-                <option value="inactive">Tidak Aktif</option>
-              </Input>
+              <Input />
             </Field>
           </FieldGroup>
         </Block>

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

@@ -11,55 +11,23 @@ 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[] = [
-  { width: 100 },
-  { width: 250 },
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  {},
-  {},
-  { width: 120 },
-  { width: 100 },
-  {},
-  {},
-]
+export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
 
 export const header: Th[][] = [
   [
-    { 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: '' },
+    { label: 'Kode' },
+    { label: 'Name' },
+    { label: 'Kategori' },
+    { label: 'Golongan' },
+    { label: 'Metode Pemberian' },
+    { label: 'Bentuk' },
+    { label: 'Stok' },
+    { label: 'Aksi' },
   ],
 ]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+export const keys = ['code', 'name', 'category', 'group', 'method', 'unit', 'total', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -67,29 +35,22 @@ export const delKeyNames: KeyLabel[] = [
 ]
 
 export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  cateogry: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineCategory?.name || '-'
   },
-  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
+  group: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineGroup?.name || '-'
   },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  method: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineMethod?.name || '-'
   },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  unit: (rec: unknown): unknown => {
+    return (rec as SmallDetailDto).medicineUnit?.name || '-'
   },
 }
 
 export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
+  action: (rec: unknown, idx: number): RecComponent => {
     const res: RecComponent = {
       idx,
       rec: rec as object,
@@ -97,18 +58,10 @@ 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 = {
-  patient_address(_rec) {
-    return '-'
-  },
+  // (_rec) {
+  //   return '-'
+  // },
 }

app/components/flow/medicine/entry.vue

@@ -1,9 +1,16 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+</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
+    <span class="font-semibold">Tambah</span> Obat
   </div>
-  <AppPatientEntryForm />
+  <AppMedicineEntryForm v-model="data" />
 </template>

app/components/flow/medicine/list.vue

@@ -1,9 +1,6 @@
 <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 Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const data = ref([])
@@ -31,63 +28,17 @@ const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
 const hreaderPrep: HeaderPrep = {
-  title: 'Pasien',
-  icon: 'i-lucide-users',
+  title: 'Obat',
+  icon: 'i-lucide-medicine-bottle',
   addNav: {
     label: 'Tambah',
-    onClick: () => navigateTo('/patient/add'),
+    onClick: () => navigateTo('/tools-equipment-src/medicine/add'),
   },
 }
 
-// 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')
   if (resp.success) {
     data.value = (resp.body as Record<string, any>).data
   }
@@ -95,7 +46,6 @@ async function getPatientList() {
 }
 
 onMounted(() => {
-  getPatientSummary()
   getPatientList()
 })
 
@@ -108,14 +58,6 @@ 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" />
+    <AppMedicineList :data="data" />
   </div>
 </template>

app/pages/_dev/index.vue

@@ -46,6 +46,16 @@ const navMenu = ref({
       icon: 'i-lucide-user',
       component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')),
     },
+    {
+      title: 'Test Medicine List',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/components/flow/medicine/list.vue')),
+    },
+    {
+      title: 'Test Medicine Add',
+      icon: 'i-lucide-user',
+      component: defineAsyncComponent(() => import('~/components/flow/medicine/entry.vue')),
+    },
   ],
 })