diff --git a/app/components/app/division-position/entry.vue b/app/components/app/division-position/entry.vue
new file mode 100644
index 00000000..da4782c0
--- /dev/null
+++ b/app/components/app/division-position/entry.vue
@@ -0,0 +1,192 @@
+<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>
+  divisionId: number
+  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 [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.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 = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: DivisionPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail division
+    division_id: props.divisionId,
+
+    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 Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</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>
diff --git a/app/components/app/division-position/list-cfg.ts b/app/components/app/division-position/list-cfg.ts
index e35627d2..cc153cc5 100644
--- a/app/components/app/division-position/list-cfg.ts
+++ b/app/components/app/division-position/list-cfg.ts
@@ -1,5 +1,6 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
 
 type SmallDetailDto = any
 
@@ -10,9 +11,9 @@ export const config: Config = {
 
   headers: [
     [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Divisi Induk' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Divisi ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
@@ -32,8 +33,13 @@ export const config: Config = {
       return recX.division?.name || '-'
     },
     employee: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.employee?.name || '-'
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
     },
     head: (rec: unknown): unknown => {
       const recX = rec as SmallDetailDto
diff --git a/app/components/app/division/detail/index.vue b/app/components/app/division/detail/index.vue
new file mode 100644
index 00000000..dd5a4c59
--- /dev/null
+++ b/app/components/app/division/detail/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Division } from '~/models/division'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  division: Division
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ division.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ division.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/division/detail/list-cfg.ts b/app/components/app/division/detail/list-cfg.ts
new file mode 100644
index 00000000..76c3b9c8
--- /dev/null
+++ b/app/components/app/division/detail/list-cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+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: '#' },
+      { label: 'Kode Jabatan' },
+      { label: 'Nama Jabatan' },
+      { label: 'Pengisi Jabatan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', '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 DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/division/detail/list.vue b/app/components/app/division/detail/list.vue
new file mode 100644
index 00000000..4bbebb57
--- /dev/null
+++ b/app/components/app/division/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-division',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/division/list-cfg.ts b/app/components/app/division/list-cfg.ts
index 54ed06a6..2d7f93ba 100644
--- a/app/components/app/division/list-cfg.ts
+++ b/app/components/app/division/list-cfg.ts
@@ -3,17 +3,12 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.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: 'Divisi Induk' },
-    { label: '' },
-  ]],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Divisi Induk' }, { label: '' }]],
 
   keys: ['code', 'name', 'parent', 'action'],
 
@@ -44,4 +39,4 @@ export const config: Config = {
   },
 
   htmls: {},
-}
\ No newline at end of file
+}
diff --git a/app/components/app/installation-position/entry-detail.vue b/app/components/app/installation-position/entry-detail.vue
new file mode 100644
index 00000000..a6bfd113
--- /dev/null
+++ b/app/components/app/installation-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 { InstallationPositionFormData } from '~/schemas/installation-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 { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installationId: number
+  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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+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.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 = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail installation
+    installation_id: props.installationId,
+
+    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-installation-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</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>
diff --git a/app/components/app/installation-position/entry-form.vue b/app/components/app/installation-position/entry-form.vue
new file mode 100644
index 00000000..4f7885a1
--- /dev/null
+++ b/app/components/app/installation-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 { InstallationPositionFormData } from '~/schemas/installation-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 { genInstallationPosition } from '~/models/installation-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  installations: 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: InstallationPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genInstallationPosition() as Partial<InstallationPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [installation, installationAttrs] = defineField('installation_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.installation_id !== undefined)
+    installation.value = props.values.installation_id ? Number(props.values.installation_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 = ''
+  installation.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: InstallationPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    installation_id: installation.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-installation-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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Instalasi</Label>
+        <Field :errMessage="errors.installation_id">
+          <Combobox
+            id="installation"
+            v-model="installation"
+            v-bind="installationAttrs"
+            :items="installations"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Instalasi"
+            search-placeholder="Cari Instalasi"
+            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>
diff --git a/app/components/app/installation-position/list.cfg.ts b/app/components/app/installation-position/list.cfg.ts
new file mode 100644
index 00000000..fe3f6c9c
--- /dev/null
+++ b/app/components/app/installation-position/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+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 Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Instalasi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'installation.name', '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 DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/installation-position/list.vue b/app/components/app/installation-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/installation-position/list.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/app/components/app/installation/detail/index.vue b/app/components/app/installation/detail/index.vue
new file mode 100644
index 00000000..8a668d1c
--- /dev/null
+++ b/app/components/app/installation/detail/index.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { Installation } from '~/models/installation'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  installation: Installation
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ installation.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ installation.name || '-' }}</DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/installation/detail/list.cfg.ts b/app/components/app/installation/detail/list.cfg.ts
new file mode 100644
index 00000000..bf341ff9
--- /dev/null
+++ b/app/components/app/installation/detail/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+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: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', '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 DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/installation/detail/list.vue b/app/components/app/installation/detail/list.vue
new file mode 100644
index 00000000..b5884cfd
--- /dev/null
+++ b/app/components/app/installation/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-installation',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/installation/list-cfg.ts b/app/components/app/installation/list.cfg.ts
similarity index 83%
rename from app/components/app/installation/list-cfg.ts
rename to app/components/app/installation/list.cfg.ts
index f64ecea8..e2a39d80 100644
--- a/app/components/app/installation/list-cfg.ts
+++ b/app/components/app/installation/list.cfg.ts
@@ -3,19 +3,12 @@ import { defineAsyncComponent } from 'vue'
 
 type SmallDetailDto = any
 
-const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dropdown-action-ud.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: 'Encounter Class' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Encounter Class' }, { label: '' }]],
 
   keys: ['code', 'name', 'encounterClass_code', 'action'],
 
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index 1be60a60..6ad7dd81 100644
--- a/app/components/app/installation/list.vue
+++ b/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 { config } from './list-cfg'
+import { config } from './list.cfg'
 
 interface Props {
   data: any[]
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
 </template>
diff --git a/app/components/app/specialist-position/entry-detail.vue b/app/components/app/specialist-position/entry-detail.vue
new file mode 100644
index 00000000..f21ff65f
--- /dev/null
+++ b/app/components/app/specialist-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 { SpecialistPositionFormData } from '~/schemas/specialist-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 { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialistId: number
+  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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+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.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 = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    specialist_id: props.specialistId,
+
+    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-specialist-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</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>
diff --git a/app/components/app/specialist-position/entry-form.vue b/app/components/app/specialist-position/entry-form.vue
new file mode 100644
index 00000000..be031219
--- /dev/null
+++ b/app/components/app/specialist-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 { SpecialistPositionFormData } from '~/schemas/specialist-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 { genSpecialistPosition } from '~/models/specialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  specialists: 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: SpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSpecialistPosition() as Partial<SpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [specialist, specialistAttrs] = defineField('specialist_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.specialist_id !== undefined)
+    specialist.value = props.values.specialist_id ? Number(props.values.specialist_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 = ''
+  specialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    specialist_id: specialist.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-specialist-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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Spesialis</Label>
+        <Field :errMessage="errors.specialist_id">
+          <Combobox
+            id="specialist"
+            v-model="specialist"
+            v-bind="specialistAttrs"
+            :items="specialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Spesialis"
+            search-placeholder="Cari Spesialis"
+            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>
diff --git a/app/components/app/specialist-position/list.cfg.ts b/app/components/app/specialist-position/list.cfg.ts
new file mode 100644
index 00000000..35f49c20
--- /dev/null
+++ b/app/components/app/specialist-position/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { DivisionPosition } from '~/models/division-position'
+
+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 Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'specialist.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as DivisionPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/specialist-position/list.vue b/app/components/app/specialist-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/specialist-position/list.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/app/components/app/specialist/detail/index.vue b/app/components/app/specialist/detail/index.vue
new file mode 100644
index 00000000..3f32a78f
--- /dev/null
+++ b/app/components/app/specialist/detail/index.vue
@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { Specialist } from '~/models/specialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  specialist: Specialist
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ specialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ specialist.name || '-' }}</DetailRow>
+  <DetailRow label="Unit">
+    {{ [specialist.unit?.code, specialist.unit?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/specialist/detail/list.cfg.ts b/app/components/app/specialist/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/specialist/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+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: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/specialist/detail/list.vue b/app/components/app/specialist/detail/list.vue
new file mode 100644
index 00000000..da83e7ca
--- /dev/null
+++ b/app/components/app/specialist/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-specialist',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
index 8ed75f28..010358c4 100644
--- a/app/components/app/specialist/list-cfg.ts
+++ b/app/components/app/specialist/list-cfg.ts
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Unit' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Nama Unit' }, { label: '' }]],
 
-  keys: ['code', 'name', 'unit', 'action'],
+  keys: ['code', 'name', 'unit.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -29,10 +22,6 @@ export const config: Config = {
       const recX = rec as SmallDetailDto
       return `${recX.name}`.trim()
     },
-    unit: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.unit_id || '-'
-    },
   },
 
   components: {
diff --git a/app/components/app/subspecialist-position/entry-detail.vue b/app/components/app/subspecialist-position/entry-detail.vue
new file mode 100644
index 00000000..fd3f91b7
--- /dev/null
+++ b/app/components/app/subspecialist-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subspecialistId: number
+  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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+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.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 = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail specialist
+    subspecialist_id: props.subspecialistId,
+
+    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-specialist-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</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>
diff --git a/app/components/app/subspecialist-position/entry-form.vue b/app/components/app/subspecialist-position/entry-form.vue
new file mode 100644
index 00000000..c897b2f5
--- /dev/null
+++ b/app/components/app/subspecialist-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 { SubSpecialistPositionFormData } from '~/schemas/subspecialist-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 { genSubSpecialistPosition } from '~/models/subspecialist-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  subSpecialists: 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: SubSpecialistPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genSubSpecialistPosition() as Partial<SubSpecialistPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [subSpecialist, subSpecialistAttrs] = defineField('subspecialist_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.subspecialist_id !== undefined)
+    subSpecialist.value = props.values.subspecialist_id ? Number(props.values.subspecialist_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 = ''
+  subSpecialist.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: SubSpecialistPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    subspecialist_id: subSpecialist.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-specialist-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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Sub Spesialis</Label>
+        <Field :errMessage="errors.subspecialist_id">
+          <Combobox
+            id="specialist"
+            v-model="subSpecialist"
+            v-bind="subSpecialistAttrs"
+            :items="subSpecialists"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Sub Spesialis"
+            search-placeholder="Cari Sub Spesialis"
+            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>
diff --git a/app/components/app/subspecialist-position/list.cfg.ts b/app/components/app/subspecialist-position/list.cfg.ts
new file mode 100644
index 00000000..028bc7bf
--- /dev/null
+++ b/app/components/app/subspecialist-position/list.cfg.ts
@@ -0,0 +1,65 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { SubSpecialistPosition } from '~/models/subspecialist-position'
+
+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 Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Sub Spesialis ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'subspecialist', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      return recX.subspecialist?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/subspecialist-position/list.vue b/app/components/app/subspecialist-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/subspecialist-position/list.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/app/components/app/subspecialist/detail/index.vue b/app/components/app/subspecialist/detail/index.vue
new file mode 100644
index 00000000..154acf75
--- /dev/null
+++ b/app/components/app/subspecialist/detail/index.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Subspecialist } from '~/models/subspecialist'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  subspecialist: Subspecialist
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ subspecialist.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ subspecialist.name || '-' }}</DetailRow>
+  <DetailRow label="Spesialis">
+    {{ [subspecialist.specialist?.code, subspecialist.specialist?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
+  <DetailRow label="Unit">
+    {{
+      [subspecialist.specialist?.unit?.code, subspecialist.specialist?.unit?.name].filter(Boolean).join(' / ') || '-'
+    }}
+  </DetailRow>
+  <DetailRow label="Instalasi">
+    {{
+      [subspecialist.specialist?.unit?.installation?.code, subspecialist.specialist?.unit?.installation?.name]
+        .filter(Boolean)
+        .join(' / ') || '-'
+    }}
+  </DetailRow>
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/subspecialist/detail/list.cfg.ts b/app/components/app/subspecialist/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/subspecialist/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+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: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/subspecialist/detail/list.vue b/app/components/app/subspecialist/detail/list.vue
new file mode 100644
index 00000000..11431e25
--- /dev/null
+++ b/app/components/app/subspecialist/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-subspecialist',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
index 7e9e7b79..99d34169 100644
--- a/app/components/app/subspecialist/list-cfg.ts
+++ b/app/components/app/subspecialist/list-cfg.ts
@@ -8,16 +8,9 @@ const action = defineAsyncComponent(() => import('~/components/pub/my-ui/data/dr
 export const config: Config = {
   cols: [{}, {}, {}, { width: 50 }],
 
-  headers: [
-    [
-      { label: 'Kode' },
-      { label: 'Nama' },
-      { label: 'Specialis' },
-      { label: '' },
-    ],
-  ],
+  headers: [[{ label: 'Kode' }, { label: 'Nama' }, { label: 'Specialis' }, { label: '' }]],
 
-  keys: ['code', 'name', 'specialist', 'action'],
+  keys: ['code', 'name', 'specialist.name', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
index 1be60a60..2f7908cb 100644
--- a/app/components/app/subspecialist/list.vue
+++ b/app/components/app/subspecialist/list.vue
@@ -31,6 +31,9 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <PaginationView
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
   </div>
 </template>
diff --git a/app/components/app/unit-position/entry-detail.vue b/app/components/app/unit-position/entry-detail.vue
new file mode 100644
index 00000000..fb84e41a
--- /dev/null
+++ b/app/components/app/unit-position/entry-detail.vue
@@ -0,0 +1,192 @@
+<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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  unitId: number
+  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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+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.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 = ''
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+
+    // readonly based on detail unit
+    unit_id: props.unitId,
+
+    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-unit-position"
+    @submit.prevent
+  >
+    <Block
+      labelSize="thin"
+      class="!mb-2.5 !pt-0 xl:!mb-3"
+      :colCount="1"
+    >
+      <Cell>
+        <Label height="compact">Kode Jabatan</Label>
+        <Field :errMessage="errors.code">
+          <Input
+            id="code"
+            v-model="code"
+            v-bind="codeAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Nama Jabatan</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Pengisi Jabatan</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>
diff --git a/app/components/app/unit-position/entry-form.vue b/app/components/app/unit-position/entry-form.vue
new file mode 100644
index 00000000..b6ab8609
--- /dev/null
+++ b/app/components/app/unit-position/entry-form.vue
@@ -0,0 +1,206 @@
+<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 { UnitPositionFormData } from '~/schemas/unit-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 { genUnitPosition } from '~/models/unit-position'
+
+interface Props {
+  schema: z.ZodSchema<any>
+  units: 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: UnitPositionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const { defineField, errors, meta } = useForm({
+  validationSchema: toTypedSchema(props.schema),
+  initialValues: genUnitPosition() as Partial<UnitPositionFormData>,
+})
+
+const [code, codeAttrs] = defineField('code')
+const [name, nameAttrs] = defineField('name')
+const [unit, unitAttrs] = defineField('unit_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.unit_id !== undefined) unit.value = props.values.unit_id ? Number(props.values.unit_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 = ''
+  unit.value = null
+  employee.value = null
+  headStatus.value = false
+}
+
+// Form submission handler
+function onSubmitForm() {
+  const formData: UnitPositionFormData = {
+    ...genBase(),
+    name: name.value || '',
+    code: code.value || '',
+    unit_id: unit.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-unit-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 Posisi</Label>
+        <Field :errMessage="errors.name">
+          <Input
+            id="name"
+            v-model="name"
+            v-bind="nameAttrs"
+            :disabled="isLoading || isReadonly"
+          />
+        </Field>
+      </Cell>
+      <Cell>
+        <Label height="compact">Unit</Label>
+        <Field :errMessage="errors.unit_id">
+          <Combobox
+            id="unit"
+            v-model="unit"
+            v-bind="unitAttrs"
+            :items="units"
+            :is-disabled="isLoading || isReadonly"
+            placeholder="Pilih Unit"
+            search-placeholder="Cari Unit"
+            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>
diff --git a/app/components/app/unit-position/list.cfg.ts b/app/components/app/unit-position/list.cfg.ts
new file mode 100644
index 00000000..fb5e319b
--- /dev/null
+++ b/app/components/app/unit-position/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+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 Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Nama Unit ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'unit.name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/unit-position/list.vue b/app/components/app/unit-position/list.vue
new file mode 100644
index 00000000..6ad7dd81
--- /dev/null
+++ b/app/components/app/unit-position/list.vue
@@ -0,0 +1,39 @@
+<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>
diff --git a/app/components/app/unit/detail/index.vue b/app/components/app/unit/detail/index.vue
new file mode 100644
index 00000000..9b38aa2b
--- /dev/null
+++ b/app/components/app/unit/detail/index.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { Unit } from '~/models/unit'
+import DetailRow from '~/components/pub/my-ui/form/view/detail-row.vue'
+
+// #region Props & Emits
+defineProps<{
+  unit: Unit
+}>()
+
+// #endregion
+
+// #region State & Computed
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+
+// #endregion region
+
+// #region Utilities & event handlers
+
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <DetailRow label="Kode">{{ unit.code || '-' }}</DetailRow>
+  <DetailRow label="Nama">{{ unit.name || '-' }}</DetailRow>
+  <!-- <DetailRow label="Nama Instalasi">{{ unit.installation?.name || '-' }}</DetailRow> -->
+</template>
+
+<style scoped></style>
diff --git a/app/components/app/unit/detail/list.cfg.ts b/app/components/app/unit/detail/list.cfg.ts
new file mode 100644
index 00000000..8faf9e61
--- /dev/null
+++ b/app/components/app/unit/detail/list.cfg.ts
@@ -0,0 +1,61 @@
+import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
+import { defineAsyncComponent } from 'vue'
+import type { UnitPosition } from '~/models/unit-position'
+
+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: '#' },
+      { label: 'Kode Posisi' },
+      { label: 'Nama Posisi' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    employee: (rec: unknown): unknown => {
+      const recX = rec as UnitPosition
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
+
+      return fullName || '-'
+    },
+    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: {},
+}
diff --git a/app/components/app/unit/detail/list.vue b/app/components/app/unit/detail/list.vue
new file mode 100644
index 00000000..f878d14c
--- /dev/null
+++ b/app/components/app/unit/detail/list.vue
@@ -0,0 +1,45 @@
+<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"
+    />
+  </div>
+
+  <div class="my-2 flex justify-end border-t-slate-300 py-2">
+    <PubMyUiNavFooterBa
+      @click="
+        navigateTo({
+          name: 'org-src-unit',
+        })
+      "
+    />
+  </div>
+</template>
diff --git a/app/components/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 019e64a9..4fa8605d 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -54,6 +54,7 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
+      includes: 'division,Employee.Person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
@@ -61,7 +62,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Divisi',
+  title: 'Divisi - Posisi',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -105,12 +106,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentDivisionDetail(recId.value)
-      title.value = 'Detail Divisi'
+      title.value = 'Detail Divisi Position'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentDivisionDetail(recId.value)
-      title.value = 'Edit Divisi'
+      title.value = 'Edit Divisi Position'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -120,9 +121,19 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
-  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
-  await getDivisionList()
+  try {
+    divisions.value = await getDivisionLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    await getDivisionList()
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
 })
 </script>
 
@@ -142,7 +153,7 @@ onMounted(async () => {
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
-    :title="!!recItem ? title : 'Tambah Divisi'"
+    :title="!!recItem ? title : 'Tambah Divisi Position'"
     size="lg"
     prevent-outside
     @update:open="
diff --git a/app/components/content/division/detail.vue b/app/components/content/division/detail.vue
new file mode 100644
index 00000000..8b7d2e92
--- /dev/null
+++ b/app/components/content/division/detail.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Division } from '~/models/division'
+import { getDetail as getDetailDivision } from '~/services/division.service'
+
+// #region division positions
+import { config } from '~/components/app/division/detail/list-cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { DivisionPositionSchema, type DivisionPositionFormData } from '~/schemas/division-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division-position.handler'
+
+// Services
+import { getList, getDetail as getDetailDivisionPosition } from '~/services/division-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  divisionId: number
+}>()
+const division = ref<Division>({} as Division)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'division-id': props.divisionId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+const headerPrep: HeaderPrep = {
+  title: 'Detail Divisi',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Jabatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailDivision(props.divisionId)
+    if (result.success) {
+      division.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailDivisionPosition(recId.value)
+      title.value = 'Edit Jabatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppDivisionDetail :division="division" />
+  <div class="h-6"></div>
+
+  <LazyAppDivisionDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Jabatan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppDivisionPositionEntry
+      :schema="DivisionPositionSchema"
+      :division-id="divisionId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getDivisionPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index 9ccefc56..0456891b 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -13,7 +13,7 @@ import { toast } from '~/components/pub/ui/toast'
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
 import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
-import type { Division } from "~/models/division"
+import type { Division } from '~/models/division'
 import type { TreeItem } from '~/models/_base'
 
 // Handlers
@@ -78,6 +78,7 @@ const headerPrep: HeaderPrep = {
     label: 'Tambah',
     icon: 'i-lucide-plus',
     onClick: () => {
+      recAction.value = ''
       recItem.value = null
       recId.value = 0
       isFormEntryDialogOpen.value = true
@@ -104,9 +105,23 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentDivisionDetail(recId.value)
-      title.value = 'Detail Divisi'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-division-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentDivisionDetail(recId.value)
diff --git a/app/components/content/installation-position/list.vue b/app/components/content/installation-position/list.vue
new file mode 100644
index 00000000..ea60ee04
--- /dev/null
+++ b/app/components/content/installation-position/list.vue
@@ -0,0 +1,208 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppInstallationPositionList from '~/components/app/installation-position/list.vue'
+import AppInstallationPositionEntryForm from '~/components/app/installation-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationPositionSchema, type InstallationPositionFormData } from '~/schemas/installation-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation-position.service'
+import { getValueLabelList as getInstallationLabelList } from '~/services/installation.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const installations = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      title.value = 'Detail Instalasi - Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi - Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    installations.value = await getInstallationLabelList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppInstallationPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi - Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationPositionEntryForm
+      :schema="InstallationPositionSchema"
+      :employees="employees"
+      :installations="installations"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationPositionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationPositionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/installation/detail.vue b/app/components/content/installation/detail.vue
new file mode 100644
index 00000000..0f12ad8c
--- /dev/null
+++ b/app/components/content/installation/detail.vue
@@ -0,0 +1,235 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Installation } from '~/models/installation'
+import { getDetail as getDetailInstallation } from '~/services/installation.service'
+
+// #region installtaion positions
+import { config } from '~/components/app/installation/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { type InstallationPositionFormData, InstallationPositionSchema } from '~/schemas/installation-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation-position.handler'
+
+// Services
+import { getList, getDetail as getDetailInstallationPosition } from '~/services/installation-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  installationId: number
+}>()
+const installation = ref<Installation>({} as Installation)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      'installation-id': props.installationId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Instalasi',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Jabatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailInstallation(props.installationId)
+    if (result.success) {
+      installation.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailInstallationPosition(recId.value)
+      title.value = 'Edit Jabatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppInstallationDetail :installation="installation" />
+  <div class="h-6"></div>
+
+  <AppInstallationDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Jabatan'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationPositionEntryDetail
+      :schema="InstallationPositionSchema"
+      :installation-id="Number(installationId)"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getInstallationPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/installation/entry.ts b/app/components/content/installation/entry.ts
deleted file mode 100644
index c003a029..00000000
--- a/app/components/content/installation/entry.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import * as z from 'zod'
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih encounter class (fhir7)',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-    { value: '4', label: 'Observation', code: 'OBSENC' },
-    { value: '5', label: 'Pre-admission', code: 'PRENC' },
-    { value: '6', label: 'Short Stay', code: 'SS' },
-    { value: '7', label: 'Virtual', code: 'VR' },
-    { value: '8', label: 'Home Health', code: 'HH' },
-  ],
-}
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama instalasi harus diisi',
-    })
-    .min(3, 'Nama instalasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode instalasi harus diisi',
-    })
-    .min(3, 'Kode instalasi minimal 3 karakter'),
-
-  encounterClassCode: z
-    .string({
-      required_error: 'Kelompok encounter class harus dipilih',
-    })
-    .min(1, 'Kelompok encounter class harus dipilih'),
-})
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 31486097..553d7ebb 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -102,9 +102,23 @@ const getCurrentInstallationDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentInstallationDetail(recId.value)
-      title.value = 'Detail Instalasi'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-installation-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentInstallationDetail(recId.value)
diff --git a/app/components/content/specialist-position/list.vue b/app/components/content/specialist-position/list.vue
new file mode 100644
index 00000000..1ebf697e
--- /dev/null
+++ b/app/components/content/specialist-position/list.vue
@@ -0,0 +1,203 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSpecialistPositionList from '~/components/app/specialist-position/list.vue'
+import AppSpecialistPositionEntryForm from '~/components/app/specialist-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/specialist-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type SpecialistPositionFormData, SpecialistPositionSchema } from '~/schemas/specialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/specialist-position.service'
+import { getValueLabelList as getValueLabelSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Spesialis - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Detail Spesialis Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Edit Spesialis Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    specialists.value = await getValueLabelSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+  <AppSpecialistPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSpecialistPositionEntryForm
+      :schema="SpecialistPositionSchema"
+      :specialists="specialists"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/specialist/detail.vue b/app/components/content/specialist/detail.vue
new file mode 100644
index 00000000..df4e79b6
--- /dev/null
+++ b/app/components/content/specialist/detail.vue
@@ -0,0 +1,236 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Specialist } from '~/models/specialist'
+import { getDetail as getDetailSpecialist } from '~/services/specialist.service'
+
+// #region specialist positions
+import { config } from '~/components/app/specialist/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+// Types
+import { type SpecialistPositionFormData, SpecialistPositionSchema } from '~/schemas/specialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist-position.handler'
+
+// Services
+import { getList, getDetail as getDetailSpecialistPosition } from '~/services/specialist-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  specialistId: number
+}>()
+const specialist = ref<Specialist>({} as Specialist)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.specialistId)
+    const result = await getList({
+      'specialist-id': props.specialistId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Spesialis',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailSpecialist(props.specialistId, {
+      includes: 'unit',
+    })
+    if (result.success) {
+      specialist.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailSpecialistPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppSpecialistDetail :specialist="specialist" />
+  <div class="h-6"></div>
+
+  <AppSpecialistDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSpecialistPositionEntryDetail
+      :schema="SpecialistPositionSchema"
+      :specialist-id="specialistId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
deleted file mode 100644
index c89302c2..00000000
--- a/app/components/content/specialist/entry.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as z from 'zod'
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama spesialisasi harus diisi',
-    })
-    .min(3, 'Nama spesialisasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode spesialisasi harus diisi',
-    })
-    .min(3, 'Kode spesialisasi minimal 3 karakter'),
-
-  installationId: z
-    .string({
-      required_error: 'Instalasi harus dipilih',
-    })
-    .min(1, 'Instalasi harus dipilih'),
-
-  unitId: z
-    .string({
-      required_error: 'Unit harus dipilih',
-    })
-    .min(1, 'Unit harus dipilih'),
-})
-
-// Unit mapping berdasarkan installation
-export const installationUnitMapping: Record<string, string[]> = {
-  '1': ['1', '3', '5'],
-  '2': ['2', '4', '6'],
-  '3': ['7', '8', '9', '10', '11'],
-}
-
-export const unitConf = {
-  msg: {
-    placeholder: '---pilih unit',
-    search: 'kode, nama unit',
-    empty: 'unit tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
-    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
-    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
-    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
-    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
-    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
-    { value: '10', label: 'Instalasi SDM', code: 'HR' },
-    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
-    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
-    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
-    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
-    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
-    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
-    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
-    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
-    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
-    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
-  ],
-}
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-  ],
-}
-
-// Helper function untuk filter unit berdasarkan installation
-export function getFilteredUnits(installationId: string) {
-  if (!installationId || !installationUnitMapping[installationId]) {
-    return []
-  }
-
-  const allowedUnitIds = installationUnitMapping[installationId]
-  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
-}
-
-// Helper function untuk membuat unit config yang ter-filter
-export function createFilteredUnitConf(installationId: string) {
-  return {
-    ...unitConf,
-    items: getFilteredUnits(installationId),
-  }
-}
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 9bbf755f..ca293026 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -103,9 +103,23 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSpecialistDetail(recId.value)
-      title.value = 'Detail Spesialis'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-specialist-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentSpecialistDetail(recId.value)
diff --git a/app/components/content/subspecialist-position/list.vue b/app/components/content/subspecialist-position/list.vue
new file mode 100644
index 00000000..4c833ce2
--- /dev/null
+++ b/app/components/content/subspecialist-position/list.vue
@@ -0,0 +1,211 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSubSpecialistPositionList from '~/components/app/subspecialist-position/list.vue'
+import AppSubSpecialistPositionEntryForm from '~/components/app/subspecialist-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/subspecialist-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import {
+  type SubSpecialistPositionFormData,
+  SubSpecialistPositionSchema,
+} from '~/schemas/subspecialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/subspecialist-position.service'
+import { getValueLabelList as getValueLabelSubSpecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const subSpecialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'subspecialist,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Spesialis - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSubSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  console.log(result)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Detail Sub Spesialis Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Edit Sub Spesialis Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    subSpecialists.value = await getValueLabelSubSpecialistList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppSubSpecialistPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Sub Spesialis'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSubSpecialistPositionEntryForm
+      :schema="SubSpecialistPositionSchema"
+      :sub-specialists="subSpecialists"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSubSpecialistList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getSubSpecialistList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSubSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/subspecialist/detail.vue b/app/components/content/subspecialist/detail.vue
new file mode 100644
index 00000000..d432eb22
--- /dev/null
+++ b/app/components/content/subspecialist/detail.vue
@@ -0,0 +1,239 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Subspecialist } from '~/models/subspecialist'
+import { getDetail as getDetailSubSpecialist } from '~/services/subspecialist.service'
+
+// #region subspecialist positions
+import { config } from '~/components/app/subspecialist/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+// Types
+import {
+  type SubSpecialistPositionFormData,
+  SubSpecialistPositionSchema,
+} from '~/schemas/subspecialist-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist-position.handler'
+
+// Services
+import { getList, getDetail as getDetailSubSpecialistPosition } from '~/services/subspecialist-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  subspecialistId: number
+}>()
+const subSpecialist = ref<Subspecialist>({} as Subspecialist)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.subspecialistId)
+    const result = await getList({
+      'subspecialist-id': props.subspecialistId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Sub Spesialis',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailSubSpecialist(props.subspecialistId, {
+      includes: 'specialist,specialist.Unit,specialist.Unit.Installation',
+    })
+    if (result.success) {
+      subSpecialist.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailSubSpecialistPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppSubspecialistDetail :subspecialist="subSpecialist" />
+  <div class="h-6"></div>
+
+  <AppSubspecialistDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppSubspecialistPositionEntryDetail
+      :schema="SubSpecialistPositionSchema"
+      :subspecialist-id="subspecialistId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/subspecialist/entry.ts b/app/components/content/subspecialist/entry.ts
deleted file mode 100644
index 5a93847d..00000000
--- a/app/components/content/subspecialist/entry.ts
+++ /dev/null
@@ -1,98 +0,0 @@
-import * as z from 'zod'
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama spesialisasi harus diisi',
-    })
-    .min(3, 'Nama spesialisasi minimal 3 karakter'),
-
-  code: z
-    .string({
-      required_error: 'Kode spesialisasi harus diisi',
-    })
-    .min(3, 'Kode spesialisasi minimal 3 karakter'),
-
-  installationId: z
-    .string({
-      required_error: 'Instalasi harus dipilih',
-    })
-    .min(1, 'Instalasi harus dipilih'),
-
-  unitId: z
-    .string({
-      required_error: 'Unit harus dipilih',
-    })
-    .min(1, 'Unit harus dipilih'),
-  specialistId: z
-    .string({
-      required_error: 'Specialist harus dipilih',
-    })
-    .min(1, 'Specialist harus dipilih'),
-})
-
-// Unit mapping berdasarkan installation
-export const installationUnitMapping: Record<string, string[]> = {
-  '1': ['1', '3'],
-  '2': ['2', '3'],
-  '3': ['1', '2', '3'],
-}
-
-export const unitConf = {
-  msg: {
-    placeholder: '---pilih unit',
-    search: 'kode, nama unit',
-    empty: 'unit tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-  ],
-}
-
-export const specialistConf = {
-  msg: {
-    placeholder: '---pilih specialist',
-    search: 'kode, nama specialist',
-    empty: 'specialist tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Spesialis Jantung', code: 'CARD' },
-    { value: '2', label: 'Spesialis Mata', code: 'OPHT' },
-    { value: '3', label: 'Spesialis Bedah', code: 'SURG' },
-    { value: '4', label: 'Spesialis Anak', code: 'PEDI' },
-    { value: '5', label: 'Spesialis Kandungan', code: 'OBGY' },
-  ],
-}
-
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-  ],
-}
-
-// Helper function untuk filter unit berdasarkan installation
-export function getFilteredUnits(installationId: string) {
-  if (!installationId || !installationUnitMapping[installationId]) {
-    return []
-  }
-
-  const allowedUnitIds = installationUnitMapping[installationId]
-  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
-}
-
-// Helper function untuk membuat unit config yang ter-filter
-export function createFilteredUnitConf(installationId: string) {
-  return {
-    ...unitConf,
-    items: getFilteredUnits(installationId),
-  }
-}
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
index e2c6db52..bb1b63f5 100644
--- a/app/components/content/subspecialist/list.vue
+++ b/app/components/content/subspecialist/list.vue
@@ -103,9 +103,23 @@ const getCurrentSubSpecialistDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentSubSpecialistDetail(recId.value)
-      title.value = 'Detail Sub Spesialis'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-subspecialist-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentSubSpecialistDetail(recId.value)
diff --git a/app/components/content/unit-position/list.vue b/app/components/content/unit-position/list.vue
new file mode 100644
index 00000000..55ab3f29
--- /dev/null
+++ b/app/components/content/unit-position/list.vue
@@ -0,0 +1,206 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUnitPositionList from '~/components/app/unit-position/list.vue'
+import AppUnitPositionEntryForm from '~/components/app/unit-position/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+import { config } from '~/components/app/unit-position/list.cfg'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { type UnitPositionFormData, UnitPositionSchema } from '~/schemas/unit-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit-position.handler'
+
+// Services
+import { getList, getDetail } from '~/services/unit-position.service'
+import { getValueLabelList as getValueLabelUnitList } from '~/services/unit.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const units = ref<{ value: string; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getListUnit,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit,Employee.Person',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit-position',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit - Posisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUnitDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Detail Unit Posisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Edit Unit Posisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  try {
+    units.value = await getValueLabelUnitList({ sort: 'createdAt:asc', 'page-size': 100 })
+    employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+  } catch (err) {
+    console.log(err)
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+  />
+
+  <AppUnitPositionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Unit Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitPositionEntryForm
+      :schema="UnitPositionSchema"
+      :units="units"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getListUnit, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getListUnit, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getListUnit, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/unit/detail.vue b/app/components/content/unit/detail.vue
new file mode 100644
index 00000000..6c51624f
--- /dev/null
+++ b/app/components/content/unit/detail.vue
@@ -0,0 +1,234 @@
+<script setup lang="ts">
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+// Service
+import type { Unit } from '~/models/unit'
+import { getDetail as getDetailUnit } from '~/services/unit.service'
+
+// #region installtaion positions
+import { config } from '~/components/app/unit/detail/list.cfg'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+// Types
+import { type UnitPositionFormData, UnitPositionSchema } from '~/schemas/unit-position.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit-position.handler'
+
+// Services
+import { getList, getDetail as getDetailUnitPosition } from '~/services/unit-position.service'
+import { getValueLabelList as getEmployeeLabelList } from '~/services/employee.service'
+
+const employees = ref<{ value: string | number; label: string }[]>([])
+
+const title = ref('')
+// #endregion
+
+// #region Props & Emits
+const props = defineProps<{
+  unitId: number
+}>()
+const unit = ref<Unit>({} as Unit)
+// #endregion
+
+// #region State & Computed
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getPositionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    console.log(props.unitId)
+    const result = await getList({
+      'unit-id': props.unitId,
+      includes: 'Employee.Person',
+      search: params.search,
+      sort: 'createdAt:asc',
+      'page-no-limit': true,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit-position',
+})
+
+const dataMap = computed(() => {
+  return data.value.map((v, i) => {
+    return {
+      ...v,
+      index: i + 1,
+    }
+  })
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Unit',
+  icon: 'i-lucide-user',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Posisi',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  try {
+    const result = await getDetailUnit(props.unitId)
+    if (result.success) {
+      unit.value = result.body.data || {}
+    }
+
+    const res = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+    employees.value = res
+  } catch (err) {
+    //  show toast
+    toast({
+      title: 'Terjadi Kesalahan',
+      description: 'Terjadi kesalahan saat memuat data',
+      variant: 'destructive',
+    })
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+// #endregion
+
+// #region Watchers
+// #endregion
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  console.log(recId, recAction)
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      getDetailUnitPosition(recId.value)
+      title.value = 'Edit Posisi'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+  />
+
+  <AppUnitDetail :unit="unit" />
+  <div class="h-6"></div>
+
+  <AppUnitDetailList
+    :data="dataMap"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Posisi'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitPositionEntryDetail
+      :schema="UnitPositionSchema"
+      :unit-id="unitId"
+      :employees="employees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getPositionList, onResetState, toast)
+            return
+          }
+          handleActionSave(values, getPositionList, onResetState, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getPositionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="space-y-1 text-sm">
+        <p
+          v-for="field in config.delKeyNames"
+          :key="field.key"
+          :v-if="record?.[field.key]"
+        >
+          <span class="font-semibold">{{ field.label }}:</span>
+          {{ record[field.key] }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>
diff --git a/app/components/content/unit/entry.ts b/app/components/content/unit/entry.ts
deleted file mode 100644
index bf85a0ed..00000000
--- a/app/components/content/unit/entry.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import * as z from 'zod'
-
-export const unitConf = {
-  msg: {
-    placeholder: '--- pilih instalasi',
-    search: 'kode, nama instalasi',
-    empty: 'instalasi tidak ditemukan',
-  },
-  items: [
-    { value: '1', label: 'Instalasi Medis', code: 'MED' },
-    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
-    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
-    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
-    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
-    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
-    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
-    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
-    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
-    { value: '10', label: 'Instalasi SDM', code: 'HR' },
-    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
-    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
-    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
-    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
-    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
-    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
-    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
-    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
-    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
-    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
-  ],
-}
-
-export const schemaConf = z.object({
-  name: z
-    .string({
-      required_error: 'Nama unit harus diisi',
-    })
-    .min(1, 'Nama unit harus diisi'),
-
-  code: z
-    .string({
-      required_error: 'Kode unit harus diisi',
-    })
-    .min(1, 'Kode unit harus diisi'),
-  parentId: z.preprocess(
-    (input: unknown) => {
-      if (typeof input === 'string') {
-        // Handle empty string case
-        if (input.trim() === '') {
-          return 0
-        }
-        return Number(input)
-      }
-
-      return input
-    },
-    z
-      .number({
-        required_error: 'Instalasi induk harus dipilih',
-      })
-      .refine((num) => num > 0, 'Instalasi induk harus dipilih'),
-  ),
-})
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 03edd231..34b647ef 100644
--- a/app/components/content/unit/list.vue
+++ b/app/components/content/unit/list.vue
@@ -103,9 +103,23 @@ const getCurrentUnitDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentUnitDetail(recId.value)
-      title.value = 'Detail Unit'
-      isReadonly.value = true
+      if (Number(recId.value) > 0) {
+        const id = Number(recId.value)
+
+        recAction.value = ''
+        recItem.value = null
+        recId.value = 0
+        isFormEntryDialogOpen.value = false
+        isReadonly.value = false
+
+        navigateTo({
+          name: 'org-src-unit-id',
+          params: {
+            id,
+          },
+        })
+      }
+
       break
     case ActionEvents.showEdit:
       getCurrentUnitDetail(recId.value)
diff --git a/app/components/pub/my-ui/data/dropdown-action-dud.vue b/app/components/pub/my-ui/data/dropdown-action-dud.vue
index 71979c7c..dfcf1ada 100644
--- a/app/components/pub/my-ui/data/dropdown-action-dud.vue
+++ b/app/components/pub/my-ui/data/dropdown-action-dud.vue
@@ -2,9 +2,14 @@
 import type { LinkItem, ListItemDto } from './types'
 import { ActionEvents } from './types'
 
-const props = defineProps<{
+interface Props {
   rec: ListItemDto
-}>()
+  size?: 'default' | 'sm' | 'lg'
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  size: 'lg',
+})
 
 const recId = inject<Ref<number>>('rec_id')!
 const recAction = inject<Ref<string>>('rec_action')!
@@ -58,7 +63,7 @@ function del() {
     <DropdownMenu>
       <DropdownMenuTrigger as-child>
         <SidebarMenuButton
-          size="lg"
+          :size="size"
           class="data-[state=open]:text-sidebar-accent-foreground data-[state=open]:bg-white dark:data-[state=open]:bg-slate-800"
         >
           <Icon
diff --git a/app/components/pub/my-ui/nav-footer/ba.vue b/app/components/pub/my-ui/nav-footer/ba.vue
new file mode 100644
index 00000000..2b8e7767
--- /dev/null
+++ b/app/components/pub/my-ui/nav-footer/ba.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  (e: 'click'): void
+}>()
+
+function onClick() {
+  emit('click')
+}
+</script>
+
+<template>
+  <div class="m-2 flex gap-2 px-2">
+    <Button
+      class="bg-gray-400"
+      type="button"
+      @click="onClick"
+    >
+      <Icon
+        name="i-lucide-arrow-left"
+        class="me-2 align-middle"
+      />
+      Back
+    </Button>
+  </div>
+</template>
diff --git a/app/components/pub/my-ui/pagination/pagination-view.vue b/app/components/pub/my-ui/pagination/pagination-view.vue
index 149d425e..8a2271b4 100644
--- a/app/components/pub/my-ui/pagination/pagination-view.vue
+++ b/app/components/pub/my-ui/pagination/pagination-view.vue
@@ -4,6 +4,10 @@ import Pagination from './pagination.vue'
 
 const props = defineProps<{
   paginationMeta: PaginationMeta
+  conf?: {
+    showInfo: boolean
+    showControl: boolean
+  }
 }>()
 
 const emit = defineEmits<{
@@ -17,8 +21,10 @@ function handlePageChange(page: number) {
 
 <template>
   <Pagination
-  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
-  :pagination-meta="paginationMeta"
-  @page-change="handlePageChange"
+    v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+    :pagination-meta="paginationMeta"
+    :show-info="conf?.showInfo"
+    :show-control="conf?.showControl"
+    @page-change="handlePageChange"
   />
 </template>
diff --git a/app/components/pub/my-ui/pagination/pagination.vue b/app/components/pub/my-ui/pagination/pagination.vue
index 4ba0da5f..9b1618c3 100644
--- a/app/components/pub/my-ui/pagination/pagination.vue
+++ b/app/components/pub/my-ui/pagination/pagination.vue
@@ -15,11 +15,13 @@ interface Props {
   paginationMeta: PaginationMeta
   onPageChange?: (page: number) => void
   showInfo?: boolean
+  showControl?: boolean
 }
 
 const props = withDefaults(defineProps<Props>(), {
   onPageChange: undefined,
   showInfo: true,
+  showControl: true,
 })
 
 const emit = defineEmits<{
@@ -65,7 +67,7 @@ const formattedRecordCount = computed(() => {
 })
 
 const startRecord = computed(() => {
-  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  const start = (props.paginationMeta.page - 1) * props.paginationMeta.pageSize + 1
   return Number(start).toLocaleString('id-ID')
 })
 
@@ -77,53 +79,95 @@ const endRecord = computed(() => {
 function getButtonClass(pageNumber: number) {
   const digits = pageNumber.toString().length
 
-  if (digits >= 4) { // 1000+ (1k+)
+  if (digits >= 4) {
+    // 1000+ (1k+)
     return 'h-9 px-4 min-w-12'
-  } else if (digits === 3) { // 100-999
+  } else if (digits === 3) {
+    // 100-999
     return 'h-9 px-3 min-w-10'
-  } else { // 1-99
+  } else {
+    // 1-99
     return 'w-9 h-9 p-0'
   }
 }
 </script>
 
 <template>
-  <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
+  <div class="flex w-full min-w-0 items-center justify-between px-2 py-2">
     <!-- Info text -->
-    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
-      Menampilkan {{ startRecord }}
-      hingga {{ Number(endRecord).toLocaleString('id-ID') }}
-      dari {{ formattedRecordCount }} data
+    <div
+      v-if="showInfo && endRecord > 0"
+      class="shrink-0 text-sm text-muted-foreground"
+    >
+      Menampilkan {{ startRecord }} hingga {{ Number(endRecord).toLocaleString('id-ID') }} dari
+      {{ formattedRecordCount }} data
+    </div>
+    <div
+      v-else
+      class="shrink-0"
+    >
+      -
     </div>
-    <div v-else class="shrink-0">-</div>
 
     <!-- Spacer untuk memastikan ada ruang di tengah -->
-    <div class="flex-1 min-w-4"></div>
+    <div class="min-w-4 flex-1"></div>
 
     <!-- Pagination controls -->
-    <div class="shrink-0">
+    <div
+      v-if="showControl"
+      class="shrink-0"
+    >
       <Pagination
-v-slot="{ page }" :total="paginationMeta.recordCount" :sibling-count="1" :page="paginationMeta.page"
-        :items-per-page="paginationMeta.pageSize" show-edges
->
-        <PaginationList v-slot="{ items }" class="flex items-center gap-1">
-          <PaginationFirst :disabled="!paginationMeta.hasPrev" @click="handleFirst" />
-          <PaginationPrev :disabled="!paginationMeta.hasPrev" @click="handlePrev" />
+        v-slot="{ page }"
+        :total="paginationMeta.recordCount"
+        :sibling-count="1"
+        :page="paginationMeta.page"
+        :items-per-page="paginationMeta.pageSize"
+        show-edges
+      >
+        <PaginationList
+          v-slot="{ items }"
+          class="flex items-center gap-1"
+        >
+          <PaginationFirst
+            :disabled="!paginationMeta.hasPrev"
+            @click="handleFirst"
+          />
+          <PaginationPrev
+            :disabled="!paginationMeta.hasPrev"
+            @click="handlePrev"
+          />
 
           <template v-for="(item, index) in items">
             <PaginationListItem
-v-if="item.type === 'page'" :key="index" :value="item.value" as-child
+              v-if="item.type === 'page'"
+              :key="index"
+              :value="item.value"
+              as-child
               @click="handlePageChange(item.value)"
->
-              <Button :class="getButtonClass(item.value)" :variant="item.value === page ? 'default' : 'outline'">
+            >
+              <Button
+                :class="getButtonClass(item.value)"
+                :variant="item.value === page ? 'default' : 'outline'"
+              >
                 {{ item.value }}
               </Button>
             </PaginationListItem>
-            <PaginationEllipsis v-else :key="item.type" :index="index" />
+            <PaginationEllipsis
+              v-else
+              :key="item.type"
+              :index="index"
+            />
           </template>
 
-          <PaginationNext :disabled="!paginationMeta.hasNext" @click="handleNext" />
-          <PaginationLast :disabled="!paginationMeta.hasNext" @click="handleLast" />
+          <PaginationNext
+            :disabled="!paginationMeta.hasNext"
+            @click="handleNext"
+          />
+          <PaginationLast
+            :disabled="!paginationMeta.hasNext"
+            @click="handleLast"
+          />
         </PaginationList>
       </Pagination>
     </div>
diff --git a/app/handlers/installation-position.handler.ts b/app/handlers/installation-position.handler.ts
new file mode 100644
index 00000000..e3cfcf38
--- /dev/null
+++ b/app/handlers/installation-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/installation-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/specialist-position.handler.ts b/app/handlers/specialist-position.handler.ts
new file mode 100644
index 00000000..859070ba
--- /dev/null
+++ b/app/handlers/specialist-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/specialist-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/subspecialist-position.handler.ts b/app/handlers/subspecialist-position.handler.ts
new file mode 100644
index 00000000..42473f86
--- /dev/null
+++ b/app/handlers/subspecialist-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/subspecialist-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/handlers/unit-position.handler.ts b/app/handlers/unit-position.handler.ts
new file mode 100644
index 00000000..1cf4994b
--- /dev/null
+++ b/app/handlers/unit-position.handler.ts
@@ -0,0 +1,24 @@
+// Handlers
+import { genCrudHandler } from '~/handlers/_handler'
+
+// Services
+import { create, update, remove } from '~/services/unit-position.service'
+
+export const {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} = genCrudHandler({
+  create,
+  update,
+  remove,
+})
diff --git a/app/models/division-position.ts b/app/models/division-position.ts
index 3bd5e63a..dc263ada 100644
--- a/app/models/division-position.ts
+++ b/app/models/division-position.ts
@@ -1,11 +1,13 @@
 import { type Base, genBase } from './_base'
-
+import type { Employee } from './employee'
 export interface DivisionPosition extends Base {
   code: string
   name: string
   headStatus?: boolean
   division_id: number
   employee_id?: number
+
+  employee?: Employee | null
 }
 
 export function genDivisionPosition(): DivisionPosition {
diff --git a/app/models/division.ts b/app/models/division.ts
index 0f6d9185..c54a0e24 100644
--- a/app/models/division.ts
+++ b/app/models/division.ts
@@ -1,10 +1,13 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import type { DivisionPosition } from './division-position'
 export interface Division extends Base {
   code: string
   name: string
   parent_id?: number | null
   childrens?: Division[] | null
+
+  // preload
+  divisionPosition?: DivisionPosition[] | null
 }
 
 export function genDivision(): Division {
diff --git a/app/models/installation-position.ts b/app/models/installation-position.ts
new file mode 100644
index 00000000..199038d7
--- /dev/null
+++ b/app/models/installation-position.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface InstallationPosition extends Base {
+  installation_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  employee?: Employee | null
+}
+
+export function genInstallationPosition(): InstallationPosition {
+  return {
+    ...genBase(),
+    installation_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/specialist-position.ts b/app/models/specialist-position.ts
new file mode 100644
index 00000000..727e8374
--- /dev/null
+++ b/app/models/specialist-position.ts
@@ -0,0 +1,22 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface SpecialistPosition extends Base {
+  specialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+  employee?: Employee | null
+}
+
+export function genSpecialistPosition(): SpecialistPosition {
+  return {
+    ...genBase(),
+    specialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/specialist.ts b/app/models/specialist.ts
index 1959673d..d3180a73 100644
--- a/app/models/specialist.ts
+++ b/app/models/specialist.ts
@@ -1,10 +1,11 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
+import type { Unit } from './unit'
 import type { Subspecialist } from "./subspecialist"
 
 export interface Specialist extends Base {
   code: string
   name: string
-  unit_id?: number | string | null
+  unit?: Unit | null
   subspecialists?: Subspecialist[]
 }
 
@@ -13,6 +14,6 @@ export function genSpecialist(): Specialist {
     ...genBase(),
     code: '',
     name: '',
-    unit_id: 0
+    unit_id: 0,
   }
 }
diff --git a/app/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
new file mode 100644
index 00000000..28ea2287
--- /dev/null
+++ b/app/models/subspecialist-position.ts
@@ -0,0 +1,25 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+import type { Subspecialist } from './subspecialist'
+
+export interface SubSpecialistPosition extends Base {
+  subspecialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  subspecialist?: Subspecialist | null
+  employee?: Employee | null
+}
+
+export function genSubSpecialistPosition(): SubSpecialistPosition {
+  return {
+    ...genBase(),
+    subspecialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/subspecialist.ts b/app/models/subspecialist.ts
index 6343b847..e67333e9 100644
--- a/app/models/subspecialist.ts
+++ b/app/models/subspecialist.ts
@@ -1,9 +1,11 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import { type Specialist } from './specialist'
 export interface Subspecialist extends Base {
   code: string
   name: string
   specialist_id?: number | string | null
+
+  specialist?: Specialist | null
 }
 
 export function genSubspecialist(): Subspecialist {
@@ -11,6 +13,6 @@ export function genSubspecialist(): Subspecialist {
     ...genBase(),
     code: '',
     name: '',
-    specialist_id: 0
+    specialist_id: 0,
   }
 }
diff --git a/app/models/unit-position.ts b/app/models/unit-position.ts
new file mode 100644
index 00000000..11e97806
--- /dev/null
+++ b/app/models/unit-position.ts
@@ -0,0 +1,23 @@
+import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
+
+export interface UnitPosition extends Base {
+  unit_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+
+  employee?: Employee | null
+}
+
+export function genUnitPosition(): UnitPosition {
+  return {
+    ...genBase(),
+    unit_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/unit.ts b/app/models/unit.ts
index 142f0570..ba8ba5a1 100644
--- a/app/models/unit.ts
+++ b/app/models/unit.ts
@@ -1,9 +1,11 @@
-import { type Base, genBase } from "./_base"
-
+import { type Base, genBase } from './_base'
+import { type Installation } from '~/models/installation'
 export interface Unit extends Base {
   code: string
   name: string
   installation_id?: number | string | null
+
+  installation?: Installation | null
 }
 
 export function genUnit(): Unit {
diff --git a/app/pages/(features)/org-src/division-position/index.vue b/app/pages/(features)/org-src/division-position/index.vue
new file mode 100644
index 00000000..53551b48
--- /dev/null
+++ b/app/pages/(features)/org-src/division-position/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/division/[id]/index.vue b/app/pages/(features)/org-src/division/[id]/index.vue
new file mode 100644
index 00000000..658652d9
--- /dev/null
+++ b/app/pages/(features)/org-src/division/[id]/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentDivisionDetail :division-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/installation-position/index.vue b/app/pages/(features)/org-src/installation-position/index.vue
new file mode 100644
index 00000000..0b525098
--- /dev/null
+++ b/app/pages/(features)/org-src/installation-position/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Instalasi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentInstallationPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/installation/[id]/index.vue b/app/pages/(features)/org-src/installation/[id]/index.vue
new file mode 100644
index 00000000..0264dd65
--- /dev/null
+++ b/app/pages/(features)/org-src/installation/[id]/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentInstallationDetail :installation-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/specialist-position/index.vue b/app/pages/(features)/org-src/specialist-position/index.vue
new file mode 100644
index 00000000..a2e29428
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist-position/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Spesialis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSpecialistPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/specialist/[id]/index.vue b/app/pages/(features)/org-src/specialist/[id]/index.vue
new file mode 100644
index 00000000..c5554a71
--- /dev/null
+++ b/app/pages/(features)/org-src/specialist/[id]/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSpecialistDetail :specialist-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/subspecialist-position/index.vue b/app/pages/(features)/org-src/subspecialist-position/index.vue
new file mode 100644
index 00000000..650ae9ee
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist-position/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Sub Spesialis',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSubspecialistPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/subspecialist/[id]/index.vue b/app/pages/(features)/org-src/subspecialist/[id]/index.vue
new file mode 100644
index 00000000..7bd0b8ee
--- /dev/null
+++ b/app/pages/(features)/org-src/subspecialist/[id]/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentSubspecialistDetail :subspecialist-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/unit-position/index.vue b/app/pages/(features)/org-src/unit-position/index.vue
new file mode 100644
index 00000000..c40a0654
--- /dev/null
+++ b/app/pages/(features)/org-src/unit-position/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Unit Posisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentUnitPositionList />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/pages/(features)/org-src/unit/[id]/index.vue b/app/pages/(features)/org-src/unit/[id]/index.vue
new file mode 100644
index 00000000..1230b57c
--- /dev/null
+++ b/app/pages/(features)/org-src/unit/[id]/index.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Detail Divisi',
+  contentFrame: 'cf-container-lg',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+// const roleAccess: PagePermission = PAGE_PERMISSIONS['/patient']
+
+// const { checkRole, hasReadAccess } = useRBAC()
+
+// // Check if user has access to this page
+// const hasAccess = checkRole(roleAccess)
+// if (!hasAccess) {
+//   navigateTo('/403')
+// }
+
+// Define permission-based computed properties
+// const canRead = hasReadAccess(roleAccess)
+const canRead = true
+</script>
+
+<template>
+  <template v-if="canRead">
+    <ContentUnitDetail :unit-id="Number(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
diff --git a/app/schemas/installation-position.schema.ts b/app/schemas/installation-position.schema.ts
new file mode 100644
index 00000000..5990fc6c
--- /dev/null
+++ b/app/schemas/installation-position.schema.ts
@@ -0,0 +1,20 @@
+import { z } from 'zod'
+import type { InstallationPosition } from '~/models/installation-position'
+
+const InstallationPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  installation_id: z.union([
+    z.string({ required_error: 'Instalasi Induk harus diisi' }),
+    z.number({ required_error: 'Instalasi Induk harus diisi' }),
+  ]),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+type InstallationPositionFormData = z.infer<typeof InstallationPositionSchema> & Partial<InstallationPosition>
+
+export { InstallationPositionSchema }
+export type { InstallationPositionFormData }
diff --git a/app/schemas/specialist-position.schema.ts b/app/schemas/specialist-position.schema.ts
new file mode 100644
index 00000000..7aacef37
--- /dev/null
+++ b/app/schemas/specialist-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { SpecialistPosition } from '~/models/specialist-position'
+
+const SpecialistPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  specialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type SpecialistPositionFormData = z.infer<typeof SpecialistPositionSchema> & Partial<SpecialistPosition>
+
+export { SpecialistPositionSchema }
+export type { SpecialistPositionFormData }
diff --git a/app/schemas/subspecialist-position.schema.ts b/app/schemas/subspecialist-position.schema.ts
new file mode 100644
index 00000000..7f458e7b
--- /dev/null
+++ b/app/schemas/subspecialist-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { SubSpecialistPosition } from '~/models/subspecialist-position'
+
+const SubSpecialistPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  subspecialist_id: z
+    .union([
+      z.string({ required_error: 'Spesialis harus diisi' }),
+      z.number({ required_error: 'Spesialis harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type SubSpecialistPositionFormData = z.infer<typeof SubSpecialistPositionSchema> & Partial<SubSpecialistPosition>
+
+export { SubSpecialistPositionSchema }
+export type { SubSpecialistPositionFormData }
diff --git a/app/schemas/unit-position.schema.ts b/app/schemas/unit-position.schema.ts
new file mode 100644
index 00000000..2422b9a1
--- /dev/null
+++ b/app/schemas/unit-position.schema.ts
@@ -0,0 +1,24 @@
+import { z } from 'zod'
+import type { UnitPosition } from '~/models/unit-position'
+
+const UnitPositionSchema = z.object({
+  code: z.string({ required_error: 'Kode harus diisi' }).min(1, 'Kode minimum 1 karakter'),
+  name: z.string({ required_error: 'Nama harus diisi' }).min(1, 'Nama minimum 1 karakter'),
+  headStatus: z.boolean().optional().nullable(),
+  unit_id: z
+    .union([
+      z.string({ required_error: 'Unit Induk harus diisi' }),
+      z.number({ required_error: 'Unit Induk harus diisi' }),
+    ])
+    .optional()
+    .nullable(),
+  employee_id: z
+    .union([z.string({ required_error: 'Karyawan harus diisi' }), z.number({ required_error: 'Karyawan harus diisi' })])
+    .optional()
+    .nullable(),
+})
+
+type UnitPositionFormData = z.infer<typeof UnitPositionSchema> & Partial<UnitPosition>
+
+export { UnitPositionSchema }
+export type { UnitPositionFormData }
diff --git a/app/services/employee.service.ts b/app/services/employee.service.ts
index 366ef71e..3121e7a2 100644
--- a/app/services/employee.service.ts
+++ b/app/services/employee.service.ts
@@ -1,4 +1,5 @@
 // Base
+import type { Employee } from '~/models/employee'
 import * as base from './_crud-base'
 
 const path = '/api/v1/employee'
@@ -29,9 +30,9 @@ export async function getValueLabelList(params: any = null): Promise<{ value: st
   const result = await getList(params)
   if (result.success) {
     const resultData = result.body?.data || []
-    data = resultData.map((item: any) => ({
-      value: item.id ? Number(item.id) : item.code,
-      label: item.person.name,
+    data = resultData.map((item: Employee) => ({
+      value: item.id,
+      label: `${item.person.frontTitle} ${item.person.name} ${item.person.endTitle}`.trim(),
     }))
   }
   return data
diff --git a/app/services/installation-position.service.ts b/app/services/installation-position.service.ts
new file mode 100644
index 00000000..13d5e914
--- /dev/null
+++ b/app/services/installation-position.service.ts
@@ -0,0 +1,41 @@
+// Base
+import * as base from './_crud-base'
+
+// Types
+import type { Installation } from '~/models/installation'
+
+const path = '/api/v1/installation-position'
+const name = 'installation'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
+
+export async function getValueLabelList(params: any = null): Promise<{ value: string; label: string }[]> {
+  let data: { value: string; label: string }[] = []
+  const result = await getList(params)
+  if (result.success) {
+    const resultData = result.body?.data || []
+    data = resultData.map((item: Installation) => ({
+      value: item.id ? Number(item.id) : item.code,
+      label: item.name,
+    }))
+  }
+  return data
+}
diff --git a/app/services/specialist-position.service.ts b/app/services/specialist-position.service.ts
new file mode 100644
index 00000000..6966ca60
--- /dev/null
+++ b/app/services/specialist-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/specialist-position'
+const name = 'specialist-position'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index 1e3be79c..b18eac34 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.service.ts
@@ -16,8 +16,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
diff --git a/app/services/subspecialist-position.service.ts b/app/services/subspecialist-position.service.ts
new file mode 100644
index 00000000..9653100b
--- /dev/null
+++ b/app/services/subspecialist-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/subspecialist-position'
+const name = 'subspecialist-position'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/subspecialist.service.ts b/app/services/subspecialist.service.ts
index 94e70a09..e384f059 100644
--- a/app/services/subspecialist.service.ts
+++ b/app/services/subspecialist.service.ts
@@ -15,8 +15,8 @@ export function getList(params: any = null) {
   return base.getList(path, params, name)
 }
 
-export function getDetail(id: number | string) {
-  return base.getDetail(path, id, name)
+export function getDetail(id: number | string, params?: any) {
+  return base.getDetail(path, id, name, params)
 }
 
 export function update(id: number | string, data: any) {
diff --git a/app/services/unit-position.service.ts b/app/services/unit-position.service.ts
new file mode 100644
index 00000000..ee9cf89c
--- /dev/null
+++ b/app/services/unit-position.service.ts
@@ -0,0 +1,25 @@
+// Base
+import * as base from './_crud-base'
+
+const path = '/api/v1/unit-position'
+const name = 'unit-position'
+
+export function create(data: any) {
+  return base.create(path, data, name)
+}
+
+export function getList(params: any = null) {
+  return base.getList(path, params, name)
+}
+
+export function getDetail(id: number | string) {
+  return base.getDetail(path, id, name)
+}
+
+export function update(id: number | string, data: any) {
+  return base.update(path, id, data, name)
+}
+
+export function remove(id: number | string) {
+  return base.remove(path, id, name)
+}
diff --git a/app/services/unit.service.ts b/app/services/unit.service.ts
index 438625f1..ec1ccec0 100644
--- a/app/services/unit.service.ts
+++ b/app/services/unit.service.ts
@@ -2,7 +2,7 @@
 import * as base from './_crud-base'
 
 // Types
-import type { Unit } from "~/models/unit";
+import type { Unit } from '~/models/unit'
 
 const path = '/api/v1/unit'
 const name = 'unit'
diff --git a/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 19491069..b69127e7 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -320,21 +320,41 @@
             "title": "Divisi",
             "link": "/org-src/division"
           },
+          {
+            "title": "Divisi - Posisi",
+            "link": "/org-src/division-position"
+          },
           {
             "title": "Instalasi",
             "link": "/org-src/installation"
           },
+          {
+            "title": "Instalasi - Posisi",
+            "link": "/org-src/installation-position"
+          },
           {
             "title": "Unit",
             "link": "/org-src/unit"
           },
+          {
+            "title": "Unit - Posisi",
+            "link": "/org-src/unit-position"
+          },
           {
             "title": "Spesialis",
             "link": "/org-src/specialist"
           },
+          {
+            "title": "Spesialis - Posisi",
+            "link": "/org-src/specialist-position"
+          },
           {
             "title": "Sub Spesialis",
             "link": "/org-src/subspecialist"
+          },
+          {
+            "title": "Sub Spesialis - Posisi",
+            "link": "/org-src/subspecialist-position"
           }
         ]
       },