Feat Infra (#108)

* fix: adjustment some schemas

* fix(room): fixing integrate unit of room

* feat(warehouse): modify form and integration

* feat(counter): modify form and integration

* feat(screen): add list, form and integration

* feat(screen): add page for public screen

* fix: add on reset state at list

* fix: solve list of relation

* feat(chamber): integrate form to api chamber

* feat(bed): integrate form to api bed

* fix: add searching function on list service

* fix: rewrite style for dropdown and tree select

* fix: add sort params

* fix: add sort params on division + medicine

* feat(division-position): layouting form + list

* fix: add sort params for getValueList

* chore: modify side menu style

* chore: fix ui dashboard

* feat(division-position): add content list

* feat(division-position): add temporary page

* feat(division-position): modify content and entry form

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/form/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

@@ -12,9 +12,9 @@ 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 cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Kamar' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },

app/components/app/bed/list.vue

@@ -1,6 +1,11 @@
 <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'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"
@@ -33,4 +38,4 @@ function handlePageChange(page: number) {
     />
     <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
-</template>
+</template>

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/form/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

@@ -12,9 +12,9 @@ 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 cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },

app/components/app/chamber/list.vue

@@ -1,6 +1,11 @@
 <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'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"

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/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/form/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,64 @@
+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-ud.vue'))
+
+export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [
+    { label: 'Kode' },
+    { label: 'Nama' },
+    { label: 'Divisi Induk' },
+    { label: 'Karyawan' },
+    { label: 'Status Kepala' },
+    { label: '' },
+  ],
+]
+
+export const keys = ['code', 'name', 'division', 'employee', 'head', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  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'
+  },
+}
+
+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 = {}

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

@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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>

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

@@ -37,28 +37,24 @@ 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
@@ -68,7 +64,6 @@ function onSubmitForm() {
     name: name.value || '',
     code: code.value || '',
     parent_id: parent.value || null,
-    division_id: division.value || null,
   }
   emit('submit', formData, resetForm)
 }
@@ -113,9 +108,9 @@ function onCancelForm() {
       </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"

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

@@ -8,7 +8,7 @@ import Button from '~/components/pub/ui/button/Button.vue'
 import Combobox from '~/components/pub/my-ui/form/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/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 {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/my-ui/data/types'
+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 header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: '' }]]
+
+export const keys = ['code', 'name', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {}
+
+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/public-screen/list.vue

@@ -0,0 +1,41 @@
+<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 { cols, funcComponent, funcHtml, funcParsed, header, keys } 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
+      :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>

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

@@ -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

@@ -14,18 +14,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 
 export const cols: Col[] = [{}, {}, {}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [
-  [
-    { label: 'Kode' },
-    { label: 'Nama' },
-    { label: 'Spesialis' },
-    { label: 'Sub Spesialis' },
-    { label: 'Unit' },
-    { label: '' },
-  ],
-]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
-export const keys = ['code', 'name', 'specialist', 'subspecialist', 'unit', 'action']
+export const keys = ['code', 'name', 'parent', 'action']
 
 export const delKeyNames: KeyLabel[] = [
   { key: 'code', label: 'Kode' },
@@ -45,6 +36,10 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return recX.unit?.name || '-'
   },
+  parent: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.parent?.name || '-'
+  },
 }
 
 export const funcComponent: RecStrFuncComponent = {

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

@@ -48,7 +48,7 @@ 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.installation_id !== undefined)
-    installation.value = props.values.installation_id ? String(props.values.installation_id) : null
+    installation.value = props.values.installation_id ? Number(props.values.installation_id) : null
 }
 
 const resetForm = () => {
@@ -58,7 +58,7 @@ const resetForm = () => {
 }
 
 // Form submission handler
-function onSubmitForm(values: any) {
+function onSubmitForm() {
   const formData: UnitFormData = {
     name: name.value || '',
     code: code.value || '',

app/components/app/warehouse/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/form/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.warehouse,
     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.warehouse
   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.warehouse,
+    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/warehouse/list-cfg.ts

@@ -12,9 +12,9 @@ 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 cols: Col[] = [{}, {}, {}, { width: 50 }]
 
-export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Counter Induk' }, { label: '' }]]
+export const header: Th[][] = [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Lantai' }, { label: '' }]]
 
 export const keys = ['code', 'name', 'parent', 'action']
 
@@ -36,9 +36,6 @@ export const funcComponent: RecStrFuncComponent = {
       idx,
       rec: rec as object,
       component: action,
-      props: {
-        size: 'sm',
-      },
     }
     return res
   },

app/components/app/warehouse/list.vue

@@ -1,6 +1,11 @@
 <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'
+
+// Types
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+
+// Configs
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
@@ -21,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <div class="space-y-4">
-    <PubBaseDataTable
+    <PubMyUiDataTable
       :rows="data"
       :cols="cols"
       :header="header"