Merge branch 'dev' into feat/consultation-82

.gitignore

@@ -22,3 +22,5 @@ logs
 .env
 .env.*
 !.env.example
+
+.vscode

.vscode/launch.json

@@ -1,15 +0,0 @@
-{
-  // Use IntelliSense to learn about possible attributes.
-  // Hover to view descriptions of existing attributes.
-  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
-  "version": "0.2.0",
-  "configurations": [
-    {
-      "type": "chrome",
-      "request": "launch",
-      "name": "Launch Chrome against localhost",
-      "url": "http://localhost:3000",
-      "webRoot": "${workspaceFolder}"
-    }
-  ]
-}

app/assets/css/main.css

@@ -174,7 +174,7 @@ body {
 }
 
 body, table, label {
-  @apply md:!text-xs xl:!text-sm 2xl:!text-sm;
+  @apply md:!text-xs 2xl:!text-sm; 
 }
 
 /* Container */

app/components/app/assesment-function/list-cfg.ts

@@ -1,119 +1,114 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
 import { defineAsyncComponent } from 'vue'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-  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
-  },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    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
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    action(rec: unknown, idx: number) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
+
+  htmls: {
+    patient_address(rec: unknown) {
+      return '-'
+    },
+  },
+}

app/components/app/assesment-function/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,13 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>

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

@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  parents: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: 'counter',
+    infraGroup_code: infraGroupCodesKeys.bed,
     parent_id: null,
   } as Partial<InfraFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [infraGroup_code] = defineField('infraGroup_code')
 const [parent_id, parentIdAttrs] = defineField('parent_id')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = 'counter'
+  infraGroup_code.value = infraGroupCodesKeys.bed
   parent_id.value = null
 }
 
@@ -62,8 +68,8 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || 'counter',
-    parent_id: parent_id.value || null,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.bed,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -74,23 +80,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-counter" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Kamar</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Kamar"
+            search-placeholder="Cari Kamar"
+            empty-message="Item tidak ditemukan"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,47 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Kamar' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/bed/list.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// Components
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -21,16 +26,11 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
-</template>
+</template>

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

@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/building/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -5,6 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -16,6 +20,7 @@ import { toTypedSchema } from '@vee-validate/zod'
 
 interface Props {
   schema: z.ZodSchema<any>
+  parents: any[]
   values: any
   isLoading?: boolean
   isReadonly?: boolean
@@ -34,27 +39,28 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: 'counter',
+    infraGroup_code: infraGroupCodesKeys.chamber,
     parent_id: null,
   } as Partial<InfraFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
-const [infraGroup_code, infraGroupAttrs] = defineField('infraGroup_code')
+const [infraGroup_code] = defineField('infraGroup_code')
 const [parent_id, parentIdAttrs] = defineField('parent_id')
 
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = 'counter'
+  infraGroup_code.value = infraGroupCodesKeys.chamber
   parent_id.value = null
 }
 
@@ -62,8 +68,8 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || 'counter',
-    parent_id: parent_id.value || null,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.chamber,
+    parent_id: parent_id.value ? Number(parent_id.value) : null,
   }
   emit('submit', formData, resetForm)
 }
@@ -74,23 +80,62 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-counter" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentIdAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Item tidak ditemukan"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,47 +1,44 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Lantai' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/chamber/list.vue

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+// Components
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -21,14 +26,9 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -37,7 +37,7 @@ const { defineField, errors, meta } = useForm({
   initialValues: {
     code: '',
     name: '',
-    infraGroup_code: infraGroupCodesKeys.building,  
+    infraGroup_code: infraGroupCodesKeys.counter,  
     parent_id: null,
   } as Partial<InfraFormData>,
 })
@@ -57,7 +57,7 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
-  infraGroup_code.value = infraGroupCodesKeys.building
+  infraGroup_code.value = infraGroupCodesKeys.counter
   parent_id.value = null
 }
 
@@ -65,7 +65,7 @@ function onSubmitForm() {
   const formData: InfraFormData = {
     code: code.value || '',
     name: name.value || '',
-    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.building,
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys.counter,
     parent_id: parent_id.value || null,
   }
   emit('submit', formData, resetForm)

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

@@ -1,37 +1,36 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/counter/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

app/components/app/division-position/entry-form.vue

@@ -0,0 +1,207 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
+
+// Types
+import type { DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Helpers
+import type z from 'zod'
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
+import { genDivisionPosition } from '~/models/division-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  divisions: any[]
+  employees: any[]
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: DivisionPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [division, divisionAttrs] = defineField('division_id')
+const [employee, employeeAttrs] = defineField('employee_id')
+const [headStatus, headStatusAttrs] = defineField('headStatus')
+
+// RadioGroup uses string values; expose a string computed that maps to the boolean field
+const headStatusStr = computed<string>({
+  get() {
+    if (headStatus.value === true) return 'true'
+    if (headStatus.value === false) return 'false'
+    return ''
+  },
+  set(v: string) {
+    if (v === 'true') headStatus.value = true
+    else if (v === 'false') headStatus.value = false
+    else headStatus.value = undefined
+  },
+})
+
+// Fill fields from props.values if provided
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.division_id !== undefined)
+    division.value = props.values.division_id ? Number(props.values.division_id) : null
+  if (props.values.employee_id !== undefined)
+    employee.value = props.values.employee_id ? Number(props.values.employee_id) : null
+  if (props.values.headStatus !== undefined) headStatus.value = !!props.values.headStatus
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  division.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    division_id: division.value || null,
+    employee_id: employee.value || null,
+    headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form
+    id="form-division-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Posisi Divisi</Label>
+        <Field :errMessage="errors.division_id">
+          <Combobox
+            id="division"
+            v-model="division"
+            v-bind="divisionAttrs"
+            :items="divisions"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Divisi"
+            search-placeholder="Cari Divisi"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Karyawan</Label>
+        <Field :errMessage="errors.employee_id">
+          <Combobox
+            id="employee"
+            v-model="employee"
+            v-bind="employeeAttrs"
+            :items="employees"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Karyawan"
+            search-placeholder="Cari Karyawan"
+            empty-message="Item tidak ditemukan"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Status Kepala</Label>
+        <Field :errMessage="errors.headStatus">
+          <RadioGroup
+            v-model="headStatusStr"
+            v-bind="headStatusAttrs"
+            class="flex gap-4"
+          >
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-yes"
+                value="true"
+              />
+              <Label for="head-yes">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem
+                id="head-no"
+                value="false"
+              />
+              <Label for="head-no">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>

app/components/app/division-position/list-cfg.ts

@@ -0,0 +1,59 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Divisi Induk' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.employee?.name || '-'
+    },
+    head: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.headStatus ? 'Ya' : 'Tidak'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {},
+}

app/components/app/division-position/list.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

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

@@ -7,12 +7,13 @@ import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import TreeSelect from '~/components/pub/my-ui/select-tree/tree-select.vue'
 
 // Types
-import type { DivisionFormData } from '~/schemas/division.schema.ts'
+import type { DivisionFormData } from '~/schemas/division.schema'
 
 // Helpers
 import type z from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -36,37 +37,33 @@ const { defineField, errors, meta } = useForm({
     code: '',
     name: '',
     parent_id: null,
-    division_id: null,
   } as Partial<DivisionFormData>,
 })
 
 const [code, codeAttrs] = defineField('code')
 const [name, nameAttrs] = defineField('name')
 const [parent, parentAttrs] = defineField('parent_id')
-const [division] = defineField('division_id')
 
 // Fill fields from props.values if provided
 if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.parent_id !== undefined) parent.value = String(props.values.parent_id)
-  if (props.values.division_id !== undefined) division.value = String(props.values.division_id)
 }
 
 const resetForm = () => {
   code.value = ''
   name.value = ''
   parent.value = null
-  division.value = null
 }
 
 // Form submission handler
 function onSubmitForm() {
   const formData: DivisionFormData = {
+    ...genBase(),
     name: name.value || '',
     code: code.value || '',
     parent_id: parent.value || null,
-    division_id: division.value || null,
   }
   emit('submit', formData, resetForm)
 }
@@ -78,25 +75,42 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-division" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-division"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Divisi Induk</Label>
-        <Field :errMessage="errors.division">
+        <Field :errMessage="errors.parent_id">
           <TreeSelect
-            id="division"
+            id="parent"
             v-model="parent"
             v-bind="parentAttrs"
             :data="divisions"
@@ -110,7 +124,14 @@ function onCancelForm() {
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,47 +1,47 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]]
+  headers: [[
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: '' },
+  ]],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/division/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-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')
-  },
-}
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  parses: {
+    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')
+    },
   },
-  status(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  components: {
+    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
+    },
   },
-}
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
+  },
+}

app/components/app/doctor/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -17,93 +10,95 @@ const doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-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)'
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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')
+    },
+    status: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return doctorStatus[recX.status_code as keyof typeof doctorStatus]
     }
-    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,
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
     }
-    return res
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/employee/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -5,9 +5,9 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -13,119 +6,122 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-pdud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    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
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/encounter/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/encounter/quick-info.vue

@@ -7,7 +7,7 @@ defineProps<{
 </script>
 
 <template>
-  <div class="w-full rounded-md border bg-white p-4 shadow-sm">
+  <div class="w-full rounded-md border bg-white dark:bg-neutral-950 p-4 shadow-sm">
     <!-- Data Pasien -->
     <h2 class="mb-2 md:text-base 2xl:text-lg font-semibold">{{ 'data.patient.person.name' }} - {{ 'data.patient.number' }}</h2>
 

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

@@ -6,12 +6,13 @@ import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 
 // Types
-import type { MaterialFormData } from '~/schemas/material.schema.ts'
+import type { MaterialFormData } from '~/schemas/material.schema'
 
 // Helpers
 import type z from 'zod'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
+import { genBase } from '~/models/_base'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -61,6 +62,7 @@ const resetForm = () => {
 
 function onSubmitForm() {
   const formData: MaterialFormData = {
+    ...genBase(),
     name: name.value || '',
     code: code.value || '',
     uom_code: uom.value || '',
@@ -75,18 +77,35 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-equipment" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-equipment"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -106,12 +125,25 @@ function onCancelForm() {
       <Cell>
         <Label height="compact">Stok</Label>
         <Field :errMessage="errors.stock">
-          <Input id="stock" v-model="stock" type="number" v-bind="stockAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="stock"
+            v-model="stock"
+            type="number"
+            v-bind="stockAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,43 +1,57 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{ width: 100 }, { width: 250 }, { width: 100 }, { width: 100 }, { width: 50 }]
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    { width: 100 },
+    { width: 100 },
+    { width: 50 },
+  ],
 
-export const header: Th[][] = [
-  [{ label: 'Kode' }, { label: 'Nama' }, { label: 'Stok' }, { label: 'Satuan' }, { label: '' }],
-]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Stok' },
+      { label: 'Satuan' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'stock', 'uom_code', 'action']
+  keys: ['code', 'name', 'stock', 'uom_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    uom_code: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.uom_code
+    },
   },
-  uom_code: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.uom_code
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}

app/components/app/equipment/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,14 +27,9 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
-    />
+      />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

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

@@ -5,10 +5,10 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
-import { infraGroupCodesKeys } from "~/lib/constants"
+import { infraGroupCodesKeys } from '~/lib/constants'
 
 // Types
 import type { InfraFormData } from '~/schemas/infra.schema'
@@ -53,7 +53,8 @@ if (props.values) {
   if (props.values.code !== undefined) code.value = props.values.code
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
-  if (props.values.parent_id !== undefined) parent_id.value = String(props.values.parent_id)
+  if (props.values.parent_id !== undefined)
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
@@ -79,18 +80,35 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-floor" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-floor"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -101,7 +119,7 @@ function onCancelForm() {
             v-model="parent_id"
             v-bind="parentIdAttrs"
             :items="parents"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Gedung"
             search-placeholder="Cari Gedung"
             empty-message="Item tidak ditemukan"
@@ -110,7 +128,14 @@ function onCancelForm() {
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,44 +1,46 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Gedung' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Gedung' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'parent', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  parent: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.parent?.name || '-'
+  parses: {
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-}
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/floor/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -13,119 +6,122 @@ type SmallDetailDto = any
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 const statusBadge = defineAsyncComponent(() => import('./status-badge.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    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
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date == 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date == 'string') {
+        return (recX.birth_date as string).substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+    status(rec, idx) {
+      const recX = rec as SmallDetailDto
+      if (recX.status_code === null) {
+        recX.status_code = 0
+      }
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+      return res
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-  status(rec, idx) {
-    if (rec.status === null) {
-      rec.status_code = 0
-    }
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: statusBadge,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/icd/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/icd/multiselect-picker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="multi"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -4,10 +4,10 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
-import type { InstallationFormData } from '~/schemas/installation.schema.ts'
+import type { InstallationFormData } from '~/schemas/installation.schema'
 
 // Helpers
 import type z from 'zod'
@@ -73,18 +73,35 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-unit" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-unit"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -104,7 +121,14 @@ function onCancelForm() {
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,51 +1,53 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Encounter Class' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'encounterClass_code', 'action']
+  keys: ['code', 'name', 'encounterClass_code', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-      props: {
-        size: 'sm',
-      },
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+        props: {
+          size: 'sm',
+        },
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/installation/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

app/components/app/item-price/list-cfg.ts

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-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 '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/item-price/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
@@ -15,32 +8,40 @@ const _doctorStatus = {
   1: 'Aktif',
 }
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-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 '-'
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/item/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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')
+    },
   },
-  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
+
+  components: {
+    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
+    },
   },
-  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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/laborant/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 // Components
 import Block from '~/components/pub/my-ui/doc-entry/block.vue'
@@ -8,7 +7,7 @@ import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
 
 // Types
-import type { BaseFormData } from '~/schemas/base.schema.ts'
+import type { BaseFormData } from '~/schemas/base.schema'
 
 // Helpers
 import type z from 'zod'
@@ -65,23 +64,47 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-medicine-group" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-medicine-group"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

app/components/app/medicine-group/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>

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

@@ -1,4 +1,3 @@
-
 <script setup lang="ts">
 // Components
 import Block from '~/components/pub/my-ui/doc-entry/block.vue'
@@ -8,7 +7,7 @@ import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
 
 // Types
-import type { BaseFormData } from '~/schemas/base.schema.ts'
+import type { BaseFormData } from '~/schemas/base.schema'
 
 // Helpers
 import type z from 'zod'
@@ -65,23 +64,47 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-medicine-method" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-medicine-method"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,37 +1,38 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Aksi' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Aksi' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'action']
+  keys: ['code', 'name', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
-}
 
-export const funcHtml: RecStrFuncUnknown = {}
+  htmls: {},
+}

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

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>

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

@@ -1,59 +1,54 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Name' },
-    { label: 'Golongan' },
-    { label: 'Metode Pemberian' },
-    { label: "Satuan" },
-    { label: 'Stok' },
-    { label: 'Aksi' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Name' },
+      { label: 'Golongan' },
+      { label: 'Metode Pemberian' },
+      { label: 'Satuan' },
+      { label: 'Stok' },
+      { label: 'Aksi' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'group', 'method', 'unit', 'stock', 'action']
+  keys: ['code', 'name', 'group', 'method', 'unit', 'stock', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
+  parses: {
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).uom?.name || '-'
+    },
   },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).uom?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      const res: RecComponent = {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+      return res
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}

app/components/app/medicine/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,99 @@ const _doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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')
+    },
   },
-  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
+
+  components: {
+    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
+    },
   },
-  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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/nurse/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/nutritionist/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/patient/_common/select-ethnicity.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

app/components/app/patient/_common/select-job.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import type { PatientEntity } from '~/models/patient'
 import { defineAsyncComponent } from 'vue'
 import { educationCodes, genderCodes } from '~/lib/constants'
@@ -13,88 +6,94 @@ import { calculateAge } from '~/lib/utils'
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, {}, { width: 5 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, {}, { width: 5 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'NIK' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'Jenis Kelamin' },
-    { label: 'Pendidikan' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'NIK' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'Jenis Kelamin' },
+      { label: 'Pendidikan' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['name', 'identity_number', 'birth_date', 'patient_age', 'gender', 'education', 'action']
+  keys: [
+    'name',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'action',
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return person.name.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      return person.name.trim()
+    },
+    identity_number: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
+        return '(TANPA NIK)'
+      }
+      return person.residentIdentityNumber
+    },
+    birth_date: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.birthDate === 'object' && person.birthDate) {
+        return (person.birthDate as Date).toLocaleDateString()
+      } else if (typeof person.birthDate === 'string') {
+        return person.birthDate.substring(0, 10)
+      }
+      return person.birthDate
+    },
+    patient_age: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      return calculateAge(person.birthDate)
+    },
+    gender: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.gender_code === 'number' && person.gender_code >= 0) {
+        return person.gender_code
+      } else if (typeof person.gender_code === 'string' && person.gender_code) {
+        return genderCodes[person.gender_code] || '-'
+      }
+      return '-'
+    },
+    education: (rec: unknown): unknown => {
+      const { person } = rec as PatientEntity
+      if (typeof person.education_code === 'number' && person.education_code >= 0) {
+        return person.education_code
+      } else if (typeof person.education_code === 'string' && person.education_code) {
+        return educationCodes[person.education_code] || '-'
+      }
+      return '-'
+    },
   },
-  identity_number: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (person?.residentIdentityNumber?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return person.residentIdentityNumber
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
 
-    if (typeof person.birthDate == 'object' && person.birthDate) {
-      return (person.birthDate as Date).toLocaleDateString()
-    } else if (typeof person.birthDate == 'string') {
-      return (person.birthDate as string).substring(0, 10)
-    }
-    return person.birthDate
-  },
-  patient_age: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    return calculateAge(person.birthDate)
-  },
-  gender: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-
-    if (typeof person.gender_code == 'number' && person.gender_code >= 0) {
-      return person.gender_code
-    } else if (typeof person.gender_code === 'string' && person.gender_code) {
-      return genderCodes[person.gender_code] || '-'
-    }
-    return '-'
-  },
-  education: (rec: unknown): unknown => {
-    const { person } = rec as PatientEntity
-    if (typeof person.education_code == 'number' && person.education_code >= 0) {
-      return person.education_code
-    } else if (typeof person.education_code === 'string' && person.education_code) {
-      return educationCodes[person.education_code] || '-'
-    }
-    return '-'
-  },
-}
-
-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 '-'
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/patient/list.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -22,13 +22,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

app/components/app/patient/picker.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{ data: any[] }>()
 const modelValue = defineModel<any | null>()
@@ -8,13 +8,8 @@ const modelValue = defineModel<any | null>()
 <template>
   <PubMyUiDataTable
     v-model="modelValue"
+    v-bind="config"
     select-mode="single"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/person-address/_common/select-district.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

app/components/app/person-address/_common/select-postal.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

app/components/app/person-address/_common/select-province.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

app/components/app/person-address/_common/select-regency.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

app/components/app/person-address/_common/select-village.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { FormErrors } from '~/types/error'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

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

@@ -3,7 +3,7 @@ import type { FormErrors } from '~/types/error'
 import { Form } from '~/components/pub/ui/form'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

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

@@ -1,11 +1,4 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,97 +11,97 @@ const _doctorStatus = {
   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 config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 250 },
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    {},
+    {},
+    { width: 120 },
+    { width: 100 },
+    {},
+    {},
   ],
-]
 
-export const keys = [
-  'bpjs_code',
-  'name',
-  'identity_number',
-  'sip_no',
-  'ihs_number',
-  'phone',
-  'inPatient_itemPrice',
-  'outPatient_itemPrice',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { 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 delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'bpjs_code',
+    'name',
+    'identity_number',
+    'sip_no',
+    'ihs_number',
+    'phone',
+    'inPatient_itemPrice',
+    'outPatient_itemPrice',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.frontTitle} ${recX.name}  ${recX.endTitle}`.trim()
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    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')
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
   },
-  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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/pharmacist/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/prescription-item/list-entry.cfg.ts

@@ -0,0 +1,56 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Bentuk' },
+      { label: 'Freq' },
+      { label: 'Dosis' },
+      { label: 'Interval' },
+      { label: 'Total' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    cateogry: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineCategory?.name || '-'
+    },
+    group: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineGroup?.name || '-'
+    },
+    method: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineMethod?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      return (rec as SmallDetailDto).medicineUnit?.name || '-'
+    },
+  },
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/prescription-item/list-entry.ts

@@ -1,66 +0,0 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
-import { defineAsyncComponent } from 'vue'
-
-type SmallDetailDto = any
-
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
-
-export const cols: Col[] = [{}, {}, {}, {}, {}, {}, { width: 50 }]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Bentuk' },
-    { label: 'Freq' },
-    { label: 'Dosis' },
-    { label: 'Interval' },
-    { label: 'Total' },
-    { label: '' },
-  ],
-]
-
-export const keys = ['name', 'uom_code', 'frequency', 'multiplier', 'interval', 'total', 'action']
-
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
-
-export const funcParsed: RecStrFuncUnknown = {
-  cateogry: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineCategory?.name || '-'
-  },
-  group: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineGroup?.name || '-'
-  },
-  method: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineMethod?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    return (rec as SmallDetailDto).medicineUnit?.name || '-'
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  action: (rec: unknown, idx: number): RecComponent => {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {
-  // (_rec) {
-  //   return '-'
-  // },
-}

app/components/app/prescription-item/list-entry.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-entry'
+import { config } from './list-entry.cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/public-screen/entry-form.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+// Components
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+import Button from '~/components/pub/ui/button/Button.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Types
+import type { InfraFormData } from '~/schemas/infra.schema'
+
+// Helpers
+import type z from 'zod'
+import { useForm } from 'vee-validate'
+import { toTypedSchema } from '@vee-validate/zod'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  values: any
+  isLoading?: boolean
+  isReadonly?: boolean
+}
+
+const props = defineProps<Props>()
+const isLoading = props.isLoading !== undefined ? props.isLoading : false
+const isReadonly = props.isReadonly !== undefined ? props.isReadonly : false
+const emit = defineEmits<{
+  submit: [values: InfraFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: {
+    code: '',
+    name: '',
+    infraGroup_code: infraGroupCodesKeys['public-screen'],  
+    parent_id: null,
+  } as Partial<InfraFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [infraGroup_code] = defineField('infraGroup_code')
+const [parent_id] = defineField('parent_id')
+
+if (props.values) {
+  if (props.values.code !== undefined) code.value = props.values.code
+  if (props.values.name !== undefined) name.value = props.values.name
+  if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
+  if (props.values.parent_id !== undefined) parent_id.value = props.values.parent_id
+}
+
+const resetForm = () => {
+  code.value = ''
+  name.value = ''
+  infraGroup_code.value = infraGroupCodesKeys['public-screen']
+  parent_id.value = null
+}
+
+function onSubmitForm() {
+  const formData: InfraFormData = {
+    code: code.value || '',
+    name: name.value || '',
+    infraGroup_code: infraGroup_code.value || infraGroupCodesKeys['public-screen'],
+    parent_id: parent_id.value || null,
+  }
+  emit('submit', formData, resetForm)
+}
+
+function onCancelForm() {
+  emit('cancel', resetForm)
+}
+</script>
+
+<template>
+  <form id="form-building" @submit.prevent>
+    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+      <Cell>
+        <Label height="compact">Kode</Label>
+        <Field :errMessage="errors.code">
+          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama</Label>
+        <Field :errMessage="errors.name">
+          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+        </Field>
+      </Cell>
+    </Block>
+    <div class="my-2 flex justify-end gap-2 py-2">
+      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        v-if="!isReadonly"
+        type="button"
+        class="w-[120px]"
+        :disabled="isLoading || !meta.valid"
+        @click="onSubmitForm"
+      >
+        Simpan
+      </Button>
+    </div>
+  </form>
+</template>

app/components/app/public-screen/list-cfg.ts

@@ -0,0 +1,37 @@
+import type { Config } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+
+const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
+
+export const config: Config = {
+  cols: [{}, {}, { width: 50 }],
+
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
+  },
+
+  htmls: {},
+}

app/components/app/public-screen/list.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+// Components
+import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vue'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
+import { config } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubMyUiDataTable
+      v-bind="config"
+      :rows="data"
+      :skeleton-size="paginationMeta?.pageSize"
+    />
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/rehab/registration/sep-prosedur/list-cfg.ts

@@ -1,112 +1,113 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    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
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code) {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/rehab/registration/sep-prosedur/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

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

@@ -5,7 +5,7 @@ import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
 import Button from '~/components/pub/ui/button/Button.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Constants
 import { infraGroupCodesKeys } from '~/lib/constants'
@@ -65,12 +65,12 @@ if (props.values) {
   if (props.values.name !== undefined) name.value = props.values.name
   if (props.values.infraGroup_code !== undefined) infraGroup_code.value = props.values.infraGroup_code
   if (props.values.specialist_id !== undefined)
-    specialist_id.value = props.values.specialist_id ? String(props.values.specialist_id) : null
+    specialist_id.value = props.values.specialist_id ? Number(props.values.specialist_id) : null
   if (props.values.subspecialist_id !== undefined)
-    subspecialist_id.value = props.values.subspecialist_id ? String(props.values.subspecialist_id) : null
-  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? String(props.values.unit_id) : null
+    subspecialist_id.value = props.values.subspecialist_id ? Number(props.values.subspecialist_id) : null
+  if (props.values.unit_id !== undefined) unit_id.value = props.values.unit_id ? Number(props.values.unit_id) : null
   if (props.values.parent_id !== undefined)
-    parent_id.value = props.values.parent_id ? String(props.values.parent_id) : null
+    parent_id.value = props.values.parent_id ? Number(props.values.parent_id) : null
 }
 
 const resetForm = () => {
@@ -102,18 +102,50 @@ function onCancelForm() {
 </script>
 
 <template>
-  <form id="form-building" @submit.prevent>
-    <Block labelSize="thin" class="!mb-2.5 !pt-0 xl:!mb-3" :colCount="1">
+  <form
+    id="form-building"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
       <Cell>
         <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
-          <Input id="code" v-model="code" v-bind="codeAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
         </Field>
       </Cell>
       <Cell>
         <Label height="compact">Nama</Label>
         <Field :errMessage="errors.name">
-          <Input id="name" v-model="name" v-bind="nameAttrs" :disabled="isLoading || isReadonly" />
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Lantai</Label>
+        <Field :errMessage="errors.parent_id">
+          <Combobox
+            id="parent"
+            v-model="parent_id"
+            v-bind="parentAttrs"
+            :items="parents"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Lantai"
+            search-placeholder="Cari Lantai"
+            empty-message="Lantai tidak ditemukan"
+          />
         </Field>
       </Cell>
       <Cell>
@@ -124,7 +156,7 @@ function onCancelForm() {
             v-model="unit_id"
             v-bind="unitAttrs"
             :items="units"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Unit"
             search-placeholder="Cari Unit"
             empty-message="Unit tidak ditemukan"
@@ -140,7 +172,7 @@ function onCancelForm() {
             v-model="specialist_id"
             v-bind="specialistAttrs"
             :items="specialists"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Spesialis"
             search-placeholder="Cari spesialis"
             empty-message="Spesialis tidak ditemukan"
@@ -156,31 +188,23 @@ function onCancelForm() {
             v-model="subspecialist_id"
             v-bind="subspecialistAttrs"
             :items="subspecialists"
-            :disabled="isLoading || isReadonly"
+            :is-disabled="isLoading || isReadonly"
             placeholder="Pilih Sub Spesialis"
             search-placeholder="Cari sub spesialis"
             empty-message="Sub Spesialis tidak ditemukan"
           />
         </Field>
       </Cell>
-      <Cell>
-        <Label height="compact">Lantai</Label>
-        <Field :errMessage="errors.parent_id">
-          <Combobox
-            id="parent"
-            v-model="parent_id"
-            v-bind="parentAttrs"
-            :items="parents"
-            :disabled="isLoading || isReadonly"
-            placeholder="Pilih Lantai"
-            search-placeholder="Cari Lantai"
-            empty-message="Lantai tidak ditemukan"
-          />
-        </Field>
-      </Cell>
     </Block>
     <div class="my-2 flex justify-end gap-2 py-2">
-      <Button type="button" variant="secondary" class="w-[120px]" @click="onCancelForm"> Kembali </Button>
+      <Button
+        type="button"
+        variant="secondary"
+        class="w-[120px]"
+        @click="onCancelForm"
+      >
+        Kembali
+      </Button>
       <Button
         v-if="!isReadonly"
         type="button"

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

@@ -1,61 +1,57 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Spesialis' },
-    { label: 'Sub Spesialis' },
-    { label: 'Unit' },
-    { label: '' },
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Lantai' },
+      { label: '' },
+    ],
   ],
-]
 
-export const keys = ['code', 'name', 'specialist', 'subspecialist', 'unit', 'action']
+  keys: ['code', 'name', 'parent', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist?.name || '-'
+  parses: {
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist?.name || '-'
+    },
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.subspecialist?.name || '-'
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit?.name || '-'
+    },
+    parent: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.parent?.name || '-'
+    },
   },
-  subspecialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.subspecialist?.name || '-'
-  },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit?.name || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}

app/components/app/room/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -1,4 +1,4 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, RecStrFuncUnknown, Th } from '../../pub/nav/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
@@ -18,61 +18,61 @@ export const rowStatus = {
 const patientBadge = defineAsyncComponent(() => import('./badge-patient.vue'))
 const statusBadge = defineAsyncComponent(() => import('./badge-status.vue'))
 
-export const cols: Col[] = [
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-  { width: 100 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'ID' },
-    { label: 'Jenis' },
-    { label: 'Pasien' },
-    { label: 'Status' },
-    { label: 'Terakhir Update' },
-    { label: 'FHIR ID' },
+export const config: Config = {
+  cols: [
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
+    { width: 100 },
   ],
-]
 
-export const keys = ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id']
+  headers: [
+    [
+      { label: 'ID' },
+      { label: 'Jenis' },
+      { label: 'Pasien' },
+      { label: 'Status' },
+      { label: 'Terakhir Update' },
+      { label: 'FHIR ID' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: ['id', 'resource_type', 'patient', 'status', 'updated_at', 'fhir_id'],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
-  },
-}
-
-export const funcComponent: RecStrFuncComponent = {
-  patient(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: patientBadge,
-    }
-    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 '-'
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+  },
+
+  components: {
+    patient(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: patientBadge,
+      }
+    },
+    status(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: statusBadge,
+      }
+    },
+  },
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/satusehat/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -7,8 +7,5 @@ defineProps<{
 </script>
 
 <template>
-  <PubMyUiDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
-    :func-html="funcHtml" :func-component="funcComponent"
-/>
+  <PubMyUiDataTable v-bind="config" :rows="data" />
 </template>

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

@@ -10,7 +10,7 @@ import { Label } from '~/components/pub/ui/label'
 import Select from '~/components/pub/ui/select/Select.vue'
 import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 import { Textarea } from '~/components/pub/ui/textarea'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 const emit = defineEmits<{
   (e: 'event', value: any): void

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

@@ -1,78 +1,77 @@
-import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SepDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  { width: 120 }, // TGL. SEP
-  { width: 150 }, // NO. SEP
-  { width: 120 }, // PELAYANAN
-  { width: 100 }, // JALUR
-  { width: 150 }, // NO. RM
-  { width: 200 }, // NAMA PASIEN
-  { width: 150 }, // NO. KARTU BPJS
-  { width: 150 }, // NO. SURAT KONTROL
-  { width: 150 }, // TGL SURAT KONTROL
-  { width: 150 }, // KLINIK TUJUAN
-  { width: 200 }, // DPJP
-  { width: 200 }, // DIAGNOSIS AWAL
-  { width: 100 }, // AKSI
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'TGL. SEP' },
-    { label: 'NO. SEP' },
-    { label: 'PELAYANAN' },
-    { label: 'JALUR' },
-    { label: 'NO. RM' },
-    { label: 'NAMA PASIEN' },
-    { label: 'NO. KARTU BPJS' },
-    { label: 'NO. SURAT KONTROL' },
-    { label: 'TGL SURAT KONTROL' },
-    { label: 'KLINIK TUJUAN' },
-    { label: 'DPJP' },
-    { label: 'DIAGNOSIS AWAL' },
-    { label: 'AKSI' },
+export const config: Config = {
+  cols: [
+    { width: 120 }, // TGL. SEP
+    { width: 150 }, // NO. SEP
+    { width: 120 }, // PELAYANAN
+    { width: 100 }, // JALUR
+    { width: 150 }, // NO. RM
+    { width: 200 }, // NAMA PASIEN
+    { width: 150 }, // NO. KARTU BPJS
+    { width: 150 }, // NO. SURAT KONTROL
+    { width: 150 }, // TGL SURAT KONTROL
+    { width: 150 }, // KLINIK TUJUAN
+    { width: 200 }, // DPJP
+    { width: 200 }, // DIAGNOSIS AWAL
+    { width: 100 }, // AKSI
   ],
-]
 
-export const keys = [
-  'tgl_sep',
-  'no_sep',
-  'pelayanan',
-  'jalur',
-  'no_rm',
-  'nama_pasien',
-  'no_kartu_bpjs',
-  'no_surat_kontrol',
-  'tgl_surat_kontrol',
-  'klinik_tujuan',
-  'dpjp',
-  'diagnosis_awal',
-  'action',
-]
+  headers: [
+    [
+      { label: 'TGL. SEP' },
+      { label: 'NO. SEP' },
+      { label: 'PELAYANAN' },
+      { label: 'JALUR' },
+      { label: 'NO. RM' },
+      { label: 'NAMA PASIEN' },
+      { label: 'NO. KARTU BPJS' },
+      { label: 'NO. SURAT KONTROL' },
+      { label: 'TGL SURAT KONTROL' },
+      { label: 'KLINIK TUJUAN' },
+      { label: 'DPJP' },
+      { label: 'DIAGNOSIS AWAL' },
+      { label: 'AKSI' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'no_sep', label: 'NO. SEP' },
-  { key: 'nama_pasien', label: 'Nama Pasien' },
-]
+  keys: [
+    'tgl_sep',
+    'no_sep',
+    'pelayanan',
+    'jalur',
+    'no_rm',
+    'nama_pasien',
+    'no_kartu_bpjs',
+    'no_surat_kontrol',
+    'tgl_surat_kontrol',
+    'klinik_tujuan',
+    'dpjp',
+    'diagnosis_awal',
+    'action',
+  ],
 
-export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  delKeyNames: [
+    { key: 'no_sep', label: 'NO. SEP' },
+    { key: 'nama_pasien', label: 'Nama Pasien' },
+  ],
 
-}
+  parses: {},
 
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-}
 
-export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
+  htmls: {},
+}

app/components/app/sep/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
+import { config } from './list-cfg'
 
 interface SepData {
   tgl_sep: string
@@ -23,12 +23,7 @@ const props = defineProps<{
 
 <template>
   <PubMyUiDataTable
-    :cols="cols"
-    :header="header"
-    :keys="keys"
+    v-bind="config"
     :rows="props.data"
-    :funcParsed="funcParsed"
-    :funcComponent="funcComponent"
-    :funcHtml="funcHtml"
   />
 </template>

app/components/app/sep/small-entry.vue

@@ -2,12 +2,12 @@
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'
 import { Form } from '~/components/pub/ui/form'
-import DatepickerSingle from '~/components/pub/my-ui/form/datepicker-single.vue'
+import DatepickerSingle from '~/components/pub/my-ui/datepicker/datepicker-single.vue'
 
 import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
 import { mapToComboboxOptList } from '~/lib/utils'

app/components/app/soapi/early-rehab-entry.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
@@ -9,6 +8,8 @@ const props = defineProps<{
   excludeFields?: string[]
 }>()
 
+const emits = defineEmits(['click'])
+
 const subject = ref({
   'prim-compl': '',
   'sec-compl': '',
@@ -25,77 +26,329 @@ const isExcluded = (key: string) => props.excludeFields?.includes(key)
 </script>
 
 <template>
-  <div class="space-y-4">
-    <!-- Keluhan Utama -->
-    <Cell v-if="!isExcluded('prim-compl')">
-      <Label dynamic>Keluhan Utama</Label>
-      <Field>
-        <Textarea placeholder="Masukkan anamnesa pasien" v-model="subject['prim-compl']" />
-      </Field>
-    </Cell>
+  <form id="entry-form">
+    <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+      <div>
+        <h1 class="font-semibold">Pemeriksaan Fisiatrik</h1>
+        <span class="text-sm font-semibold">Anamnesa</span>
+      </div>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Keluhan Utama</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
 
-    <!-- Keluhan Tambahan -->
-    <Cell v-if="!isExcluded('sec-compl')">
-      <Label dynamic>Keluhan Tambahan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan keluhan tambahan" v-model="subject['sec-compl']" />
-      </Field>
-    </Cell>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Diagnosa Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Sekarang -->
-    <Cell v-if="!isExcluded('cur-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Sekarang</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit sekarang" v-model="subject['cur-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Rencana Awal Medis</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
 
-    <!-- Riwayat Penyakit Dahulu -->
-    <Cell v-if="!isExcluded('pas-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Dahulu</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit dahulu" v-model="subject['pas-disea-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Terapi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+      <Separator class="mt-8" />
 
-    <!-- Riwayat Penyakit Keluarga -->
-    <Cell v-if="!isExcluded('fam-disea-hist')">
-      <Label dynamic>Riwayat Penyakit Keluarga</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat penyakit keluarga" v-model="subject['fam-disea-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+        <span class="text-sm font-semibold">Status Generalis</span>
+      </div>
 
-    <!-- Riwayat Alergi -->
-    <Cell v-if="!isExcluded('alg-hist')">
-      <Label dynamic>Riwayat Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan riwayat alergi" v-model="subject['alg-hist']" />
-      </Field>
-    </Cell>
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Tekanan Darah</Label>
+            <Field>
+              <Input placeholder="Sistolik" />
+              <Input placeholder="Diastolik" />
+            </Field>
+          </Cell>
 
-    <!-- Reaksi Alergi -->
-    <Cell v-if="!isExcluded('alg-react')">
-      <Label dynamic>Reaksi Alergi</Label>
-      <Field>
-        <Textarea placeholder="Masukkan reaksi alergi" v-model="subject['alg-react']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Pengobatan yang Sedang Dijalani -->
-    <Cell v-if="!isExcluded('med-hist')">
-      <Label dynamic>Riwayat Pengobatan</Label>
-      <Field>
-        <Textarea placeholder="Masukkan pengobatan yang sedang dijalani" v-model="subject['med-hist']" />
-      </Field>
-    </Cell>
+          <Cell>
+            <Label dynamic>GCS</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>RR</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
 
-    <!-- Golongan Darah -->
-    <Cell v-if="!isExcluded('blood-type')">
-      <Label dynamic>Golongan Darah</Label>
-      <Field>
-        <Input type="text" placeholder="Masukkan golongan darah" v-model="subject['blood-type']" />
-      </Field>
-    </Cell>
-  </div>
+          <Cell>
+            <Label dynamic>Ambulasi</Label>
+            <Field>
+              <RadioGroup class="flex gap-4">
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-yes"
+                    value="yes"
+                  />
+                  <Label for="vaksin-yes">Dependent</Label>
+                </div>
+                <div class="flex items-center space-x-2">
+                  <RadioGroupItem
+                    id="vaksin-no"
+                    value="no"
+                  />
+                  <Label for="vaksin-no">Independen</Label>
+                </div>
+              </RadioGroup>
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Gait</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Neurologis</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>N. Cranialis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Sensoris</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Reflek Fisilogis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Reflek Patologis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Saraf Otonom</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - ROM</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Status Muskuloskeletal - MMT</span>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Batang Tubuh</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>AGA</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>AGB</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <span class="text-sm font-semibold">Statu Lokalis</span>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Deskripsi Temuan Fisik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Catatan Pemeriksaan Penunjang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Daftar Masalah</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Masalah Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Masalah Rehabilitasi Medik</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Diagnosa Fungsional (ICD-X)</h1>
+      </div>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <AppIcdPreview />
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Program Rehabilitasi</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Modalitas Fisik</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Latihan</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Ortesa Protesa</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Edukasi</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Textarea />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+    </div>
+  </form>
 </template>

app/components/app/soapi/function-entry.vue

@@ -1,172 +1,486 @@
 <script setup lang="ts">
-import Block from '~/components/pub/my-ui/form/block.vue'
-import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
-import Field from '~/components/pub/my-ui/form/field.vue'
-import Label from '~/components/pub/my-ui/form/label.vue'
+import Block from '~/components/pub/my-ui/doc-entry/block.vue'
+import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
+import Field from '~/components/pub/my-ui/doc-entry/field.vue'
+import Label from '~/components/pub/my-ui/doc-entry/label.vue'
+
+const props = defineProps<{
+  excludeFields?: string[]
+}>()
+
+const emits = defineEmits(['click'])
+
+const subject = ref({
+  'prim-compl': '',
+  'sec-compl': '',
+  'cur-disea-hist': '',
+  'pas-disea-hist': '',
+  'fam-disea-hist': '',
+  'alg-hist': '',
+  'alg-react': '',
+  'med-hist': '',
+  'blood-type': '',
+})
+
+const isExcluded = (key: string) => props.excludeFields?.includes(key)
+const disorders = ref<string[]>([])
+const therapies = ref<string[]>([])
+const summary = ref('')
+
+const disorderOptions = [
+  'Fungsi Otot',
+  'Fungsi Sendi',
+  'Fungsi Jalan',
+  'Fungsi Syaraf',
+  'Fungsi Koordinasi',
+  'Jantung',
+  'Fungsi Respirasi',
+  'Fungsi Menelan',
+  'Fungsi Bladder',
+  'Fungsi Bowel',
+  'Fungsi Luhur',
+  'Fungsi Kontrol Postur',
+  'Fungsi Eksekusi',
+  'Fungsi Ortosa/Protesa',
+  'Gangguan Aktivitas Sehari-hari',
+  'Lainnya',
+]
+
+const therapyOptions = ['Terapi Latihan', 'Modalitas Fisik', 'Protesa/Ortosa', 'Medikamentosa', 'Lain-lain: Konsultasi']
 </script>
 
 <template>
   <form id="entry-form">
     <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
       <Block>
-        <FieldGroup>
-          <Label dynamic>Sudah Vaksin</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Sudah', value: 'yes' },
-                { label: 'Belum', value: 'no' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kasus</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup>
-          <Label dynamic>Kunjungan</Label>
-          <Field>
-            <Select
-              :options="[
-                { label: 'Baru', value: 'baru' },
-                { label: 'Lama', value: 'lama' },
-              ]"
-            />
-          </Field>
-        </FieldGroup>
-
-        <!-- Riwayat Penyakit -->
-        <FieldGroup :column="2">
+        <Cell>
           <Label dynamic>Keluhan Utama</Label>
-          <Field>
-            <Textarea placeholder="Masukkan anamnesa pasien" />
-          </Field>
-        </FieldGroup>
-        <FieldGroup :column="2">
-          <Label dynamic>Riwayat Penyakit</Label>
-          <Field>
-            <Textarea
-              placeholder="Masukkan anamnesa pasien (Riwayat Penyakit Sekarang, Dahulu, Pengobatan, Keluarga, dll)"
-            />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>SpO₂</Label>
-          <Field>
-            <Input type="number" placeholder="%" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Sistol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tekanan Darah Diastol</Label>
-          <Field>
-            <Input type="number" placeholder="mmHg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Respirasi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Nadi</Label>
-          <Field>
-            <Input type="number" placeholder="kali/menit" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Temperatur</Label>
-          <Field>
-            <Input type="number" placeholder="℃" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Berat Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Kg" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Tinggi Badan</Label>
-          <Field>
-            <Input type="number" placeholder="Cm" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Golongan Darah</Label>
-          <Field>
-            <Select :options="bloodGroups" />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="2">
-          <Label dynamic>Pemeriksaan Fisik (Yang Mendukung)</Label>
-          <Field>
-            <Textarea placeholder="Masukkan pemeriksaan fisik" />
-          </Field>
-        </FieldGroup>
-
-        <!-- Prosedur -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-        <!-- Diagnosa -->
-        <FieldGroup :column="2">
-          <Label dynamic>Diagnosa (ICD-X)</Label>
-          <Field>
-            <button class="rounded bg-orange-100 px-3 py-1 text-orange-600">+ Pilih Diagnosa</button>
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Diagnosa Medis</Label>
           <Field>
             <Textarea />
           </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Rencana Awal Medis</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
-
-        <FieldGroup :column="3">
-          <Label dynamic>Terapi</Label>
-          <Field>
-            <Textarea />
-          </Field>
-        </FieldGroup>
+        </Cell>
       </Block>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Dahulu</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+
+        <Cell>
+          <Label dynamic>Riwayat Penyakit Sekarang</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Fisik</h1>
+      </div>
+
+      <Block>
+        <Cell>
+          <Label dynamic>Umum</Label>
+          <Field>
+            <Input placeholder="Sistolik" />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Tanda Vital</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kesadaran (GCS)</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Pernapasan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Nadi</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jenis</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kanan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Tekanan Darah Lengan Kiri</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Suhu Aksila</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Suhu Rektal</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Badan</h1>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block>
+          <Cell>
+            <Label dynamic>Kulit</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Kepala</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Telinga</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hidung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Rongga Mulut/Tenggorokan</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Mata</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Leher</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelenjar Tiroid</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Thorax</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Jantung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Paru-Paru</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Abdomen</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Hati</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Lien</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block>
+          <Cell>
+            <Label dynamic>Lain-Lain</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <div class="my-2 rounded-md border border-slate-300 p-4">
+        <Block :colCount="3">
+          <Cell>
+            <Label dynamic>Punggung</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Ekstremitas</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>Kelamin</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+        <Block :colCount="2">
+          <Cell>
+            <Label dynamic>Rectum</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+          <Cell>
+            <Label dynamic>System Syaraf</Label>
+            <Field>
+              <Input />
+            </Field>
+          </Cell>
+        </Block>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Neuromoskuloskeletal</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Kardiorespirasi</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <Separator class="mt-8" />
+
+      <div class="my-2">
+        <h1 class="font-semibold">Pemeriksaan Penunjang</h1>
+      </div>
+
+      <Block :colCount="2">
+        <Cell>
+          <Label dynamic>Pencitraan</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+        <Cell>
+          <Label dynamic>Laboratorium</Label>
+          <Field>
+            <Textarea />
+          </Field>
+        </Cell>
+      </Block>
+
+      <div class="mb-8 grid grid-cols-2 gap-4">
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+        <div>
+          <span class="text-md">Diagnosa Medis (ICD-X)</span>
+          <Button
+            class="my-2 rounded bg-orange-100 px-3 py-1 text-orange-600"
+            type="button"
+            @click="emits('click', 'prosedur')"
+          >
+            + Pilih Prosedur
+          </Button>
+          <AppIcdPreview />
+        </div>
+      </div>
+
+      <div class="space-y-8">
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Gangguan Fungsi</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in disorderOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="disorders"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+
+          <div class="mt-4 space-y-2">
+            <Label
+              for="summary"
+              class="font-medium"
+            >
+              Kesimpulan Didapatkan Gangguan Fungsi
+              <span class="text-red-500">*</span>
+            </Label>
+            <Textarea
+              id="summary"
+              v-model="summary"
+              placeholder="Masukkan kesimpulan gangguan fungsi"
+            />
+          </div>
+        </div>
+
+        <Separator />
+
+        <!-- REKOMENDASI TERAPI -->
+        <div>
+          <h3 class="mb-3 text-lg font-semibold">Rekomendasi Terapi Tindakan Yang Diperlukan</h3>
+          <div class="grid grid-cols-3 gap-2">
+            <div
+              v-for="opt in therapyOptions"
+              :key="opt"
+              class="flex items-center space-x-2"
+            >
+              <Checkbox
+                :id="opt"
+                :value="opt"
+                v-model="therapies"
+              />
+              <Label
+                :for="opt"
+                class="text-sm"
+              >
+                {{ opt }}
+              </Label>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </form>
 </template>

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

@@ -1,119 +1,113 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 120 },
-  {},
-  {},
-  {},
-  { width: 100 },
-  { width: 100 },
-  {},
-  { width: 50 },
-]
-
-export const header: Th[][] = [
-  [
-    { label: 'Nama' },
-    { label: 'Rekam Medis' },
-    { label: 'KTP' },
-    { label: 'Tgl Lahir' },
-    { label: 'Umur' },
-    { label: 'JK' },
-    { label: 'Pendidikan' },
-    { label: 'Status' },
-    { label: '' },
+export const config: Config = {
+  cols: [
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 120 },
+    {},
+    {},
+    {},
+    { width: 100 },
+    { width: 100 },
+    {},
+    { width: 50 },
   ],
-]
 
-export const keys = [
-  'name',
-  'medicalRecord_number',
-  'identity_number',
-  'birth_date',
-  'patient_age',
-  'gender',
-  'education',
-  'status',
-  'action',
-]
+  headers: [
+    [
+      { label: 'Nama' },
+      { label: 'Rekam Medis' },
+      { label: 'KTP' },
+      { label: 'Tgl Lahir' },
+      { label: 'Umur' },
+      { label: 'JK' },
+      { label: 'Pendidikan' },
+      { label: 'Status' },
+      { label: '' },
+    ],
+  ],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  keys: [
+    'name',
+    'medicalRecord_number',
+    'identity_number',
+    'birth_date',
+    'patient_age',
+    'gender',
+    'education',
+    'status',
+    'action',
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.firstName} ${recX.middleName || ''} ${recX.lastName || ''}`
+    },
+    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
+    },
+    birth_date: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.birth_date === 'object' && recX.birth_date) {
+        return (recX.birth_date as Date).toLocaleDateString()
+      } else if (typeof recX.birth_date === 'string') {
+        return recX.birth_date.substring(0, 10)
+      }
+      return recX.birth_date
+    },
+    patient_age: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.birth_date?.split('T')[0]
+    },
+    gender: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
+        return 'Tidak Diketahui'
+      }
+      return recX.gender_code
+    },
+    education: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      if (typeof recX.education_code === 'number' && recX.education_code >= 0) {
+        return recX.education_code
+      } else if (typeof recX.education_code !== 'undefined') {
+        return recX.education_code
+      }
+      return '-'
+    },
   },
-  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
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
-  birth_date: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.birth_date == 'object' && recX.birth_date) {
-      return (recX.birth_date as Date).toLocaleDateString()
-    } else if (typeof recX.birth_date == 'string') {
-      return (recX.birth_date as string).substring(0, 10)
-    }
-    return recX.birth_date
-  },
-  patient_age: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.birth_date?.split('T')[0]
-  },
-  gender: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX?.gender_code !== 'number' && recX?.gender_code !== '') {
-      return 'Tidak Diketahui'
-    }
-    return recX.gender_code
-  },
-  education: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (typeof recX.education_code == 'number' && recX.education_code >= 0) {
-      return recX.education_code
-    } else if (typeof recX.education_code) {
-      return recX.education_code
-    }
-    return '-'
-  },
-}
-
-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 '-'
+
+  htmls: {
+    patient_address(_rec) {
+      return '-'
+    },
   },
 }

app/components/app/soapi/list.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 defineProps<{
   data: any[]
@@ -8,12 +8,7 @@ defineProps<{
 
 <template>
   <PubMyUiDataTable
+    v-bind="config"
     :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
   />
 </template>

app/components/app/specialist-intern/entry-form.vue

@@ -2,7 +2,7 @@
 import type { FormErrors } from '~/types/error'
 import { toTypedSchema } from '@vee-validate/zod'
 import Block from '~/components/pub/my-ui/form/block.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 import FieldGroup from '~/components/pub/my-ui/form/field-group.vue'
 import Field from '~/components/pub/my-ui/form/field.vue'
 import Label from '~/components/pub/my-ui/form/label.vue'

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

@@ -4,15 +4,16 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
-import type { SpecialistFormData } from '~/schemas/specialist.schema.ts'
+import type { SpecialistFormData } from '~/schemas/specialist.schema'
 
 // Helpers
 import type z from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -59,6 +60,7 @@ const resetForm = () => {
 // Form submission handler
 function onSubmitForm(values: any) {
   const formData: SpecialistFormData = {
+    ...genBase(),
     name: name.value || '',
     code: code.value || '',
     unit_id: unit.value ? Number(unit.value) : null,

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

@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Unit' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Unit' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'unit', 'action']
+  keys: ['code', 'name', 'unit', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    unit: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.unit_id || '-'
+    },
   },
-  unit: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.unit_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}

app/components/app/specialist/list.vue

@@ -6,7 +6,7 @@ import PaginationView from '~/components/pub/my-ui/pagination/pagination-view.vu
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+import { config } from './list-cfg'
 
 interface Props {
   data: any[]
@@ -27,13 +27,8 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubMyUiDataTable
+      v-bind="config"
       :rows="data"
-      :cols="cols"
-      :header="header"
-      :keys="keys"
-      :func-parsed="funcParsed"
-      :func-html="funcHtml"
-      :func-component="funcComponent"
       :skeleton-size="paginationMeta?.pageSize"
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />

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

@@ -4,15 +4,16 @@ import Block from '~/components/pub/my-ui/doc-entry/block.vue'
 import Cell from '~/components/pub/my-ui/doc-entry/cell.vue'
 import Field from '~/components/pub/my-ui/doc-entry/field.vue'
 import Label from '~/components/pub/my-ui/doc-entry/label.vue'
-import Combobox from '~/components/pub/my-ui/form/combobox.vue'
+import Combobox from '~/components/pub/my-ui/combobox/combobox.vue'
 
 // Types
-import type { SubspecialistFormData } from '~/schemas/subspecialist.schema.ts'
+import type { SubspecialistFormData } from '~/schemas/subspecialist.schema'
 
 // Helpers
 import type z from 'zod'
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
+import { genBase } from '~/models/_base'
 
 interface Props {
   schema: z.ZodSchema<any>
@@ -60,6 +61,7 @@ const resetForm = () => {
 // Form submission handler
 function onSubmitForm(values: any) {
   const formData: SubspecialistFormData = {
+    ...genBase(),
     name: name.value || '',
     code: code.value || '',
     specialist_id: specialist.value ? Number(specialist.value) : null,

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

@@ -1,48 +1,49 @@
-import type {
-  Col,
-  KeyLabel,
-  RecComponent,
-  RecStrFuncComponent,
-  RecStrFuncUnknown,
-  Th,
-} from '~/components/pub/my-ui/data/types'
+import type { Config } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
 const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-dud.vue'))
 
-export const cols: Col[] = [{}, {}, {}, { width: 50 }]
+export const config: Config = {
+  cols: [{}, {}, {}, { width: 50 }],
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]]
+  headers: [
+    [
+      { label: 'Kode' },
+      { label: 'Nama' },
+      { label: 'Specialis' },
+      { label: '' },
+    ],
+  ],
 
-export const keys = ['code', 'name', 'specialist', 'action']
+  keys: ['code', 'name', 'specialist', 'action'],
 
-export const delKeyNames: KeyLabel[] = [
-  { key: 'code', label: 'Kode' },
-  { key: 'name', label: 'Nama' },
-]
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
 
-export const funcParsed: RecStrFuncUnknown = {
-  name: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return `${recX.name}`.trim()
+  parses: {
+    name: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return `${recX.name}`.trim()
+    },
+    specialist: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.specialist_id || '-'
+    },
   },
-  specialist: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return recX.specialist_id || '-'
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: rec as object,
+        component: action,
+      }
+    },
   },
+
+  htmls: {},
 }
-
-export const funcComponent: RecStrFuncComponent = {
-  action(rec, idx) {
-    const res: RecComponent = {
-      idx,
-      rec: rec as object,
-      component: action,
-    }
-    return res
-  },
-}
-
-export const funcHtml: RecStrFuncUnknown = {}