✨ feat (employee): add based component & conditional form input

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

@@ -11,76 +11,34 @@ const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+]
 </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="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="1">
-            <Label>Nama dan Gelar</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. IHS</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" />
+              <Input />
             </Field>
           </FieldGroup>
-        </Block>
-        <Block>
-          <FieldGroup :column="2">
-            <Label>NIK</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. SIP</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>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Unit</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>
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
         </Block>

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

@@ -4,44 +4,40 @@ import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
 import Field from '~/components/pub/custom-ui/form/field.vue'
 import Label from '~/components/pub/custom-ui/form/label.vue'
 
-const props = defineProps<{ modelValue: any }>()
+const props = defineProps<{ modelValue: any; items: any[] }>()
 const emit = defineEmits(['update:modelValue', 'event'])
 
 const data = computed({
   get: () => props.modelValue,
   set: (val) => emit('update:modelValue', val),
 })
-const items = [
-  { value: 'doctor', label: 'Dokter' },
-  { value: 'nurse', label: 'Perawat' },
-]
 </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="mb-5 border-b border-b-slate-300 text-lg xl:text-xl">
       <div class="flex flex-col justify-between">
         <Block>
-          <FieldGroup :column="2">
-            <Label>Username</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Nomor Induk Pegawai</Label>
             <Field>
-              <Input v-model="data.name" />
+              <Input v-model="data.number" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Password</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Status</Label>
             <Field>
-              <Input v-model="data.password" type="password" />
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Status</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Position</Label>
             <Field>
-              <Input v-model="data.status" />
+              <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>
           </FieldGroup>
-          <FieldGroup :column="2">
-            <Label>Tipe</Label>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Divisi</Label>
             <Field>
               <Select v-model="data.type" :items="items" placeholder="Pilih jenis" />
             </Field>

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

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} 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[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+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: '' },
+  ],
+]
+
+export const keys = [
+  '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 = {
+  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) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    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 '-'
+  },
+}

app/components/app/laborant/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/app/laborant/status-badge.vue

@@ -0,0 +1,29 @@
+<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/app/nurse/entry-form.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} 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[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+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: '' },
+  ],
+]
+
+export const keys = [
+  '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 = {
+  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) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    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 '-'
+  },
+}

app/components/app/nurse/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/app/nurse/status-badge.vue

@@ -0,0 +1,29 @@
+<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/app/nutritionist/entry-form.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} 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[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+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: '' },
+  ],
+]
+
+export const keys = [
+  '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 = {
+  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) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    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 '-'
+  },
+}

app/components/app/nutritionist/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/app/nutritionist/status-badge.vue

@@ -0,0 +1,29 @@
+<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/app/pharmacist/entry-form.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</script>
+
+<template>
+  <form id="entry-form">
+    <div class="mb-2 border-b border-b-slate-300 text-lg xl:text-xl">
+      <div class="flex flex-col justify-between">
+        <Block>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>No. IHS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,114 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} 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[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 120 },
+  { width: 100 },
+  {},
+  {},
+]
+
+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: '' },
+  ],
+]
+
+export const keys = [
+  '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 = {
+  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) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    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 '-'
+  },
+}

app/components/app/pharmacist/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/app/pharmacist/status-badge.vue

@@ -0,0 +1,29 @@
+<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/app/user/entry-form.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import Block from '~/components/pub/custom-ui/form/block.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+const props = defineProps<{ modelValue: any }>()
+const emit = defineEmits(['update:modelValue', 'event'])
+
+const data = computed({
+  get: () => props.modelValue,
+  set: (val) => emit('update:modelValue', val),
+})
+</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="2" layout="stacked">
+            <Label stacked>Username</Label>
+            <Field>
+              <Input v-model="data.name" />
+            </Field>
+          </FieldGroup>
+          <FieldGroup :column="2" layout="stacked">
+            <Label stacked>Password</Label>
+            <Field>
+              <Input v-model="data.password" type="password" />
+            </Field>
+          </FieldGroup>
+        </Block>
+      </div>
+    </div>
+  </form>
+</template>

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

@@ -0,0 +1,109 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} 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 doctorStatus = {
+  0: 'Tidak Aktif',
+  1: 'Aktif',
+}
+
+export const cols: Col[] = [
+  { width: 100 },
+  { width: 250 },
+  {},
+  { width: 100 },
+  { width: 100 },
+  {},
+  {},
+  {},
+  { width: 100 },
+  { width: 100 },
+  { width: 100 },
+  { 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' },
+  ],
+]
+
+export const keys = [
+  '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 = {
+  name: (rec: unknown): unknown => {
+    console.log(rec)
+    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')
+  },
+  status: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return doctorStatus[recX.status_code as keyof typeof doctorStatus]
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+  patient_address(_rec) {
+    return '-'
+  },
+}

app/components/app/user/list.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+defineProps<{
+  data: any[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :rows="data"
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :func-parsed="funcParsed"
+    :func-html="funcHtml"
+    :func-component="funcComponent"
+  />
+</template>

app/components/flow/employee/entry.vue

@@ -5,7 +5,7 @@ const data = ref({
   name: '',
   password: '',
   status: '',
-  type: '',
+  type: 'doctor',
 })
 
 function onClick(type: string) {
@@ -17,16 +17,33 @@ function onClick(type: string) {
     // do something
   }
 }
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
 </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> Dokter
-  </div>
-  <div>
-    <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+    <span class="font-semibold">Tambah</span> Karyawan
   </div>
+
+  <AppEmployeeEntryForm v-model="data" :items="items" />
+
+  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
+  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
+  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
+  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
+
   <AppUserEntryForm v-model="data" />
   <div class="my-2 flex justify-end py-2">
     <Action @click="onClick" />

app/components/flow/employee/list.vue

@@ -56,10 +56,8 @@ provide('table_data_loader', isLoading)
 </script>
 
 <template>
-  <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
-    <div class="rounded-md border p-4">
-      <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
-    </div>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
   </div>
 </template>

app/lib/utils.ts

@@ -2,6 +2,25 @@ import type { ClassValue } from 'clsx'
 import { clsx } from 'clsx'
 import { twMerge } from 'tailwind-merge'
 
+export interface SelectOptionType<T> {
+  label: string
+  value: T
+}
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs))
 }
+
+export function mapToFlowbiteOptList(items: Record<string, string>): SelectOptionType<string>[] {
+  if (!items) {
+    return []
+  }
+  const result: SelectOptionType<string>[] = []
+  Object.keys(items).forEach((item) => {
+    result.push({
+      label: items[item] as string,
+      value: item,
+    })
+  })
+  return result
+}

app/models/doctor.ts

@@ -0,0 +1,61 @@
+export interface Doctor {
+  id: number
+  createdAt: string
+  updatedAt: string
+  name: string
+  frontTitle?: string
+  endTitle?: string
+  specialist_code?: string
+  sip_no: string
+  ihs_number: string
+  identity_number: string
+  phone?: string
+  bpjs_code?: string
+  status_code?: number
+}
+// use one dto for both create and update
+export interface CreateDto {
+  name?: string
+  frontTitle?: string
+  endTitle?: string
+  identity_number?: string
+  sip_no?: string
+  ihs_number?: string
+  phone?: string
+  email?: string
+  bpjs_code?: string
+  status_code?: number
+  outPatient_rate?: number
+  inPatient_rate?: number
+}
+
+export interface GetListDto {
+  name?: string
+  identity_number?: string
+  sip_no?: string
+  ihs_number?: string
+}
+
+export interface GetDetailDto {
+  id?: string
+}
+
+export interface UpdateDto extends CreateDto {
+  id?: number
+}
+
+export interface DeleteDto {
+  id?: string
+}
+
+export function genDoctor(): Doctor {
+  return {
+    id: 0,
+    createdAt: '',
+    updatedAt: '',
+    name: '',
+    ihs_number: '',
+    identity_number: '',
+    sip_no: '',
+  }
+}

app/pages/(features)/doctor/[id]/detail.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>detail pasien</div>
-</template>

app/pages/(features)/doctor/[id]/edit.vue

@@ -1,9 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-  roles: ['sys', 'doc'],
-})
-</script>
-
-<template>
-  <div>edit detail pasien</div>
-</template>

app/pages/(features)/doctor/add.vue

@@ -1,41 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/base/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Tambah Dokter',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
-const { checkRole, hasCreateAccess } = useRBAC()
-
-// Check if user has access to this page
-const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  throw createError({
-    statusCode: 403,
-    statusMessage: 'Access denied',
-  })
-}
-
-// Define permission-based computed properties
-const canCreate = hasCreateAccess(roleAccess)
-</script>
-
-<template>
-  <div v-if="canCreate">
-    <FlowDoctorAdd />
-  </div>
-  <Error v-else :status-code="403" />
-</template>

app/pages/(features)/doctor/index.vue

@@ -1,40 +0,0 @@
-<script setup lang="ts">
-import type { PagePermission } from '~/models/role'
-import Error from '~/components/pub/base/error/error.vue'
-import { PAGE_PERMISSIONS } from '~/lib/page-permission'
-
-definePageMeta({
-  middleware: ['rbac'],
-  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Dokter',
-  contentFrame: 'cf-full-width',
-})
-
-const route = useRoute()
-
-useHead({
-  title: () => route.meta.title as string,
-})
-
-const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
-
-const { checkRole, hasReadAccess } = useRBAC()
-
-// Check if user has access to this page
-const hasAccess = checkRole(roleAccess)
-if (!hasAccess) {
-  navigateTo('/403')
-}
-
-// Define permission-based computed properties
-const canRead = hasReadAccess(roleAccess)
-</script>
-
-<template>
-  <div>
-    <div v-if="canRead">
-      <FlowDoctorList />
-    </div>
-    <Error v-else :status-code="403" />
-  </div>
-</template>

public/side-menu-items/sys.json

@@ -35,17 +35,12 @@
     "icon": "i-lucide-users",
     "children": [
       {
-        "title": "User",
+        "title": "Karyawan",
         "icon": "i-lucide-user",
         "link": "/human-src/employee"
       }
     ]
   },
-  {
-    "title": "Dokter",
-    "icon": "i-lucide-cross",
-    "link": "/doctor"
-  },
   {
     "title": "Pasien",
     "icon": "i-lucide-users",