munawwirul_jamal/simrsx-fe
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Abizrh
2025-09-07 20:09:31 +07:00
parent e9cbb09bc5
commit 302bcb3e2a
5 changed files with 71 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

app/components/app/medicine/entry-form.vue
+24 -34
View File
@@ -11,76 +11,66 @@ const data = computed({
get: () => props.modelValue, get: () => props.modelValue,
set: (val) => emit('update:modelValue', val), 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> </script>
<template> <template>
<form id="entry-form"> <form id="entry-form">
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl"> <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
<div class="flex flex-col justify-between"> <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> <Block>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>NIK</Label> <Label>Nama</Label>
<Field> <Field>
<Input type="text" name="identity_number" /> <Input type="text" name="identity_number" />
</Field> </Field>
</FieldGroup> </FieldGroup>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>NO SIP</Label> <Label>Kode</Label>
<Field name="sip_number"> <Field name="sip_number">
<Input type="text" name="sip_no" /> <Input type="text" name="sip_no" />
</Field> </Field>
</FieldGroup> </FieldGroup>
</Block>
<Block>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>Telepon / HP</Label> <Label>Metode Pemberian</Label>
<Field name="phone"> <Field name="phone">
<Input type="text" name="phone" /> <Select :items="items" />
</Field> </Field>
</FieldGroup> </FieldGroup>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>Kode BPJS</Label> <Label>Bentuk Sediaan</Label>
<Field> <Field>
<Input type="text" name="bpjs_code" /> <Select :items="items" />
</Field> </Field>
</FieldGroup> </FieldGroup>
</Block>
<Block>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>Fee Rajal</Label> <Label>Dosis</Label>
<Field> <Field>
<Input type="number" name="outPatient_rate" /> <Input type="number" name="outPatient_rate" />
</Field> </Field>
</FieldGroup> </FieldGroup>
<FieldGroup :column="2"> <FieldGroup :column="2">
<Label>Fee Ranap</Label> <Label>Infra</Label>
<Field> <Field>
<Input type="number" name="inPatient_rate" /> <Input />
</Field> </Field>
</FieldGroup> </FieldGroup>
</Block> <FieldGroup :column="2">
<Block> <Label>Stock</Label>
<FieldGroup :column="3"> <Field>
<Input type="number" />
</Field>
</FieldGroup>
<FieldGroup :column="2">
<Label>Status</Label> <Label>Status</Label>
<Field> <Field>
<Input type="select" name="status"> <Input />
<option value="active">Aktif</option>
<option value="inactive">Tidak Aktif</option>
</Input>
</Field> </Field>
</FieldGroup> </FieldGroup>
</Block> </Block>
app/components/app/medicine/list-cfg.ts
+22 -69
View File
@@ -11,55 +11,23 @@ import { defineAsyncComponent } from 'vue'
type SmallDetailDto = any type SmallDetailDto = any
const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue')) const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
const _doctorStatus = { export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
0: 'Tidak Aktif',
1: 'Aktif',
}
export const cols: Col[] = [
{ width: 100 },
{ width: 250 },
{},
{ width: 100 },
{ width: 100 },
{},
{},
{},
{ width: 120 },
{ width: 100 },
{},
{},
]
export const header: Th[][] = [ export const header: Th[][] = [
[ [
{ label: 'Kode JKN' }, { label: 'Kode' },
{ label: 'Nama' }, { label: 'Name' },
{ label: 'No KTP' }, { label: 'Kategori' },
{ label: 'No SIP' }, { label: 'Golongan' },
{ label: 'No IHS' }, { label: 'Metode Pemberian' },
{ label: 'Telpon' }, { label: 'Bentuk' },
{ label: 'Fee Ranap' }, { label: 'Stok' },
{ label: 'Fee Rajal' }, { label: 'Aksi' },
{ label: 'Status' },
{ label: '' },
], ],
] ]
export const keys = [ export const keys = ['code', 'name', 'category', 'group', 'method', 'unit', 'total', 'action']
'bpjs_code',
'name',
'identity_number',
'sip_no',
'ihs_number',
'phone',
'inPatient_itemPrice',
'outPatient_itemPrice',
'status',
'action',
]
export const delKeyNames: KeyLabel[] = [ export const delKeyNames: KeyLabel[] = [
{ key: 'code', label: 'Kode' }, { key: 'code', label: 'Kode' },
@@ -67,29 +35,22 @@ export const delKeyNames: KeyLabel[] = [
] ]
export const funcParsed: RecStrFuncUnknown = { export const funcParsed: RecStrFuncUnknown = {
name: (rec: unknown): unknown => { cateogry: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto return (rec as SmallDetailDto).medicineCategory?.name || '-'
return `${recX.frontTitle} ${recX.name} ${recX.endTitle}`.trim()
}, },
identity_number: (rec: unknown): unknown => { group: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto return (rec as SmallDetailDto).medicineGroup?.name || '-'
if (recX.identity_number?.substring(0, 5) === 'BLANK') {
return '(TANPA NIK)'
}
return recX.identity_number
}, },
inPatient_itemPrice: (rec: unknown): unknown => { method: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto return (rec as SmallDetailDto).medicineMethod?.name || '-'
return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
}, },
outPatient_itemPrice: (rec: unknown): unknown => { unit: (rec: unknown): unknown => {
const recX = rec as SmallDetailDto return (rec as SmallDetailDto).medicineUnit?.name || '-'
return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
}, },
} }
export const funcComponent: RecStrFuncComponent = { export const funcComponent: RecStrFuncComponent = {
action(rec, idx) { action: (rec: unknown, idx: number): RecComponent => {
const res: RecComponent = { const res: RecComponent = {
idx, idx,
rec: rec as object, rec: rec as object,
@@ -97,18 +58,10 @@ export const funcComponent: RecStrFuncComponent = {
} }
return res return res
}, },
status(rec, idx) {
const res: RecComponent = {
idx,
rec: rec as object,
component: statusBadge,
}
return res
},
} }
export const funcHtml: RecStrFuncUnknown = { export const funcHtml: RecStrFuncUnknown = {
patient_address(_rec) { // (_rec) {
return '-' // return '-'
}, // },
} }
app/components/flow/medicine/entry.vue
+10 -3
View File
@@ -1,9 +1,16 @@
<script setup lang="ts"></script> <script setup lang="ts">
const data = ref({
name: '',
password: '',
status: '',
type: '',
})
</script>
<template> <template>
<div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl"> <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" /> <Icon name="i-lucide-user" class="me-2" />
<span class="font-semibold">Tambah</span> Pasien <span class="font-semibold">Tambah</span> Obat
</div> </div>
<AppPatientEntryForm /> <AppMedicineEntryForm v-model="data" />
</template> </template>
app/components/flow/medicine/list.vue
+5 -63
View File
@@ -1,9 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { DataTableLoader } from '~/components/pub/base/data-table/type' 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 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' import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
const data = ref([]) const data = ref([])
@@ -31,63 +28,17 @@ const recAction = ref<string>('')
const recItem = ref<any>(null) const recItem = ref<any>(null)
const hreaderPrep: HeaderPrep = { const hreaderPrep: HeaderPrep = {
title: 'Pasien', title: 'Obat',
icon: 'i-lucide-users', icon: 'i-lucide-medicine-bottle',
addNav: { addNav: {
label: 'Tambah', 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() { async function getPatientList() {
isLoading.isTableLoading = true isLoading.isTableLoading = true
const resp = await xfetch('/api/v1/patient') const resp = await xfetch('/api/v1/medicine')
if (resp.success) { if (resp.success) {
data.value = (resp.body as Record<string, any>).data data.value = (resp.body as Record<string, any>).data
} }
@@ -95,7 +46,6 @@ async function getPatientList() {
} }
onMounted(() => { onMounted(() => {
getPatientSummary()
getPatientList() getPatientList()
}) })
@@ -108,14 +58,6 @@ provide('table_data_loader', isLoading)
<template> <template>
<Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" /> <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
<div class="my-4 flex flex-1 flex-col gap-4 md:gap-8"> <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"> <AppMedicineList :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> </div>
</template> </template>
app/pages/_dev/index.vue
+10
View File
@@ -46,6 +46,16 @@ const navMenu = ref({
icon: 'i-lucide-user', icon: 'i-lucide-user',
component: defineAsyncComponent(() => import('~/pages/_dev/user/list.vue')), 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')),
},
], ],
}) })