From df27262bd1d017f4b0a1026e3060575c9a480a4e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 24 Oct 2025 12:48:05 +0700
Subject: [PATCH 01/20] impl get position over detail divions

wip: detail division

for entry new division position

finish v1 divison-position
---
 .../app/division-position/entry.vue           | 192 ++++++++++++++++
 app/components/app/division/detail/index.vue  |  34 +++
 .../app/division/detail/list-cfg.ts           |  62 +++++
 app/components/app/division/detail/list.vue   |  39 ++++
 app/components/content/division/detail.vue    | 214 ++++++++++++++++++
 app/models/division-position.ts               |   4 +-
 app/models/division.ts                        |   7 +-
 app/models/installation-position.ts           |  20 ++
 app/models/specialist-position.ts             |  20 ++
 app/models/subspecialist-position.ts          |  20 ++
 app/models/unit-position.ts                   |  20 ++
 .../org-src/division/[id]/index.vue           |  42 ++++
 app/services/employee.service.ts              |   7 +-
 13 files changed, 675 insertions(+), 6 deletions(-)
 create mode 100644 app/components/app/division-position/entry.vue
 create mode 100644 app/components/app/division/detail/index.vue
 create mode 100644 app/components/app/division/detail/list-cfg.ts
 create mode 100644 app/components/app/division/detail/list.vue
 create mode 100644 app/components/content/division/detail.vue
 create mode 100644 app/models/installation-position.ts
 create mode 100644 app/models/specialist-position.ts
 create mode 100644 app/models/subspecialist-position.ts
 create mode 100644 app/models/unit-position.ts
 create mode 100644 app/pages/(features)/org-src/division/[id]/index.vue

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/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..235a20cc
--- /dev/null
+++ b/app/components/app/division/detail/list-cfg.ts
@@ -0,0 +1,62 @@
+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 Jabatan' },
+      { label: 'Nama Jabatan' },
+      { label: 'Pengisi Jabatan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['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}`.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..2f7908cb
--- /dev/null
+++ b/app/components/app/division/detail/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/content/division/detail.vue b/app/components/content/division/detail.vue
new file mode 100644
index 00000000..fe2641c6
--- /dev/null
+++ b/app/components/content/division/detail.vue
@@ -0,0 +1,214 @@
+<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,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division-position',
+})
+
+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 () => {
+  const result = await getDetailDivision(props.divisionId)
+  if (result.success) {
+    division.value = result.body.data || {}
+  }
+  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
+})
+// #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="data"
+    :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/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..aa0a9ebf
--- /dev/null
+++ b/app/models/installation-position.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+
+export interface InstallationPosition extends Base {
+  installation_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+}
+
+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..58c53f9e
--- /dev/null
+++ b/app/models/specialist-position.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+
+export interface SpecialistPosition extends Base {
+  specialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+}
+
+export function genSpecialistPosition(): SpecialistPosition {
+  return {
+    ...genBase(),
+    specialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
new file mode 100644
index 00000000..5fdfa639
--- /dev/null
+++ b/app/models/subspecialist-position.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+
+export interface SubSpecialistPosition extends Base {
+  subspecialist_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+}
+
+export function genSubSpecialistPosition(): SubSpecialistPosition {
+  return {
+    ...genBase(),
+    subspecialist_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
diff --git a/app/models/unit-position.ts b/app/models/unit-position.ts
new file mode 100644
index 00000000..14925584
--- /dev/null
+++ b/app/models/unit-position.ts
@@ -0,0 +1,20 @@
+import { type Base, genBase } from './_base'
+
+export interface UnitPosition extends Base {
+  unit_id: number
+  code: string
+  name: string
+  headStatus?: boolean
+  employee_id?: number
+}
+
+export function genUnitPosition(): UnitPosition {
+  return {
+    ...genBase(),
+    unit_id: 0,
+    code: '',
+    name: '',
+    headStatus: false,
+    employee_id: 0,
+  }
+}
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/services/employee.service.ts b/app/services/employee.service.ts
index d3691c83..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.name,
+    data = resultData.map((item: Employee) => ({
+      value: item.id,
+      label: `${item.person.frontTitle} ${item.person.name} ${item.person.endTitle}`.trim(),
     }))
   }
   return data

From b16d3f108f08a4831c25e6ba763d8e02a6f34391 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 27 Oct 2025 11:05:32 +0700
Subject: [PATCH 02/20] refactor(division): improve employee name formatting
 and navigation

- Simplify employee name construction using array filtering
- Replace dropdown-action-ud with dropdown-action-dud component
- Update division detail navigation to use route navigation
- Clean up code formatting and remove unnecessary whitespace
---
 app/components/app/division/detail/list-cfg.ts       |  6 ++++--
 app/components/app/division/list-cfg.ts              | 11 +++--------
 app/components/content/division/list.vue             | 12 ++++++++----
 .../pub/my-ui/data/dropdown-action-dud.vue           | 11 ++++++++---
 4 files changed, 23 insertions(+), 17 deletions(-)

diff --git a/app/components/app/division/detail/list-cfg.ts b/app/components/app/division/detail/list-cfg.ts
index 235a20cc..15e7b7e9 100644
--- a/app/components/app/division/detail/list-cfg.ts
+++ b/app/components/app/division/detail/list-cfg.ts
@@ -33,8 +33,10 @@ export const config: Config = {
     },
     employee: (rec: unknown): unknown => {
       const recX = rec as DivisionPosition
-      const fullName =
-        `${recX.employee?.person.frontTitle} ${recX.employee?.person.name} ${recX.employee?.person.endTitle}`.trim()
+      const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
+        .filter(Boolean)
+        .join(' ')
+        .trim()
 
       return fullName || '-'
     },
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/content/division/list.vue b/app/components/content/division/list.vue
index 9ccefc56..d9294491 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
@@ -104,9 +104,13 @@ 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
+      navigateTo({
+        name: 'org-src-division-id',
+        params: {
+          id: Number(recId.value),
+        },
+      })
+
       break
     case ActionEvents.showEdit:
       getCurrentDivisionDetail(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

From ddb90589694b53f29a77dd4f7db9d5e9bdd021d9 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 27 Oct 2025 13:22:10 +0700
Subject: [PATCH 03/20] feat(division-detail): add row numbering and remove
 pagination

- Add index column to division position list table
- Remove pagination component as it's no longer needed
- Map data to include row numbers before display
---
 app/components/app/division/detail/list-cfg.ts |  3 ++-
 app/components/app/division/detail/list.vue    |  4 ----
 app/components/content/division/detail.vue     | 11 ++++++++++-
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/app/components/app/division/detail/list-cfg.ts b/app/components/app/division/detail/list-cfg.ts
index 15e7b7e9..76c3b9c8 100644
--- a/app/components/app/division/detail/list-cfg.ts
+++ b/app/components/app/division/detail/list-cfg.ts
@@ -11,6 +11,7 @@ export const config: Config = {
 
   headers: [
     [
+      { label: '#' },
       { label: 'Kode Jabatan' },
       { label: 'Nama Jabatan' },
       { label: 'Pengisi Jabatan' },
@@ -19,7 +20,7 @@ export const config: Config = {
     ],
   ],
 
-  keys: ['code', 'name', 'employee', 'head', 'action'],
+  keys: ['index', 'code', 'name', 'employee', 'head', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/app/division/detail/list.vue b/app/components/app/division/detail/list.vue
index 2f7908cb..56198aec 100644
--- a/app/components/app/division/detail/list.vue
+++ b/app/components/app/division/detail/list.vue
@@ -31,9 +31,5 @@ function handlePageChange(page: number) {
       :rows="data"
       :skeleton-size="paginationMeta?.pageSize"
     />
-    <PaginationView
-      :pagination-meta="paginationMeta"
-      @page-change="handlePageChange"
-    />
   </div>
 </template>
diff --git a/app/components/content/division/detail.vue b/app/components/content/division/detail.vue
index fe2641c6..b7c1a6ad 100644
--- a/app/components/content/division/detail.vue
+++ b/app/components/content/division/detail.vue
@@ -70,12 +70,21 @@ const {
       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',
@@ -154,7 +163,7 @@ watch([recId, recAction], () => {
   <div class="h-6"></div>
 
   <LazyAppDivisionDetailList
-    :data="data"
+    :data="dataMap"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"
   />

From 16a4fc5d7f3ba8fe49ccd1fed56b07299e311fa8 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 27 Oct 2025 13:32:56 +0700
Subject: [PATCH 04/20] fix(division-detail): handle errors when fetching
 division and employee data

Add try-catch block to handle potential errors during API calls for division details and employee list. Show toast notification when errors occur to improve user feedback.
---
 app/components/content/division/detail.vue | 19 +++++++++++++++----
 1 file changed, 15 insertions(+), 4 deletions(-)

diff --git a/app/components/content/division/detail.vue b/app/components/content/division/detail.vue
index b7c1a6ad..8b7d2e92 100644
--- a/app/components/content/division/detail.vue
+++ b/app/components/content/division/detail.vue
@@ -115,11 +115,22 @@ const headerPrep: HeaderPrep = {
 
 // #region Lifecycle Hooks
 onMounted(async () => {
-  const result = await getDetailDivision(props.divisionId)
-  if (result.success) {
-    division.value = result.body.data || {}
+  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',
+    })
   }
-  employees.value = await getEmployeeLabelList({ sort: 'createdAt:asc', 'page-size': 100, includes: 'person' })
 })
 // #endregion
 

From af932ebfbc81a6b0664511b28deb092b6729e54f Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 27 Oct 2025 14:31:09 +0700
Subject: [PATCH 05/20] feat(org-src): add division position management page

- Add new division position page to side menu
- Implement division position list with improved employee name display
- Include necessary API calls with proper includes for related data
- Add error handling for data loading failures
---
 .../app/division-position/list-cfg.ts         | 16 ++++---
 .../content/division-position/list.vue        | 25 +++++++----
 .../org-src/division-position/index.vue       | 42 +++++++++++++++++++
 public/side-menu-items/sys.json               |  4 ++
 4 files changed, 75 insertions(+), 12 deletions(-)
 create mode 100644 app/pages/(features)/org-src/division-position/index.vue

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/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 019e64a9..8fafd960 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 Position',
   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/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/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 19491069..941c9a35 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -320,6 +320,10 @@
             "title": "Divisi",
             "link": "/org-src/division"
           },
+          {
+            "title": "Divisi Position",
+            "link": "/org-src/division-position"
+          },
           {
             "title": "Instalasi",
             "link": "/org-src/installation"

From bc4f5ddb0b9fd42550335a30ad342786d30529ce Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 27 Oct 2025 16:36:24 +0700
Subject: [PATCH 06/20] wip: orgs position

---
 .../app/installation-position/entry-form.vue  | 192 +++++++++++++++++
 .../app/installation-position/list.cfg.ts     |  65 ++++++
 .../app/installation-position/list.vue        |  39 ++++
 .../app/specialist-position/entry-form.vue    | 192 +++++++++++++++++
 .../app/specialist-position/list.cfg.ts       |  65 ++++++
 .../app/specialist-position/list.vue          |  39 ++++
 .../app/subspecialist-position/entry-form.vue | 192 +++++++++++++++++
 .../app/subspecialist-position/list.cfg.ts    |  65 ++++++
 .../app/subspecialist-position/list.vue       |  39 ++++
 .../app/unit-position/entry-form.vue          | 192 +++++++++++++++++
 app/components/app/unit-position/list.cfg.ts  |  65 ++++++
 app/components/app/unit-position/list.vue     |  39 ++++
 .../content/division-position/list.vue        |   2 +-
 .../content/installation-position/list.vue    | 196 +++++++++++++++++
 .../content/specialist-position/list.vue      | 197 ++++++++++++++++++
 .../content/subspecialist-position/list.vue   | 197 ++++++++++++++++++
 app/components/content/unit-position/list.vue | 197 ++++++++++++++++++
 .../org-src/installation-position/index.vue   |  42 ++++
 .../org-src/specialist-position/index.vue     |  42 ++++
 .../org-src/subspecialist-position/index.vue  |  42 ++++
 .../org-src/unit-position/index.vue           |  42 ++++
 public/side-menu-items/sys.json               |  18 +-
 22 files changed, 2157 insertions(+), 2 deletions(-)
 create mode 100644 app/components/app/installation-position/entry-form.vue
 create mode 100644 app/components/app/installation-position/list.cfg.ts
 create mode 100644 app/components/app/installation-position/list.vue
 create mode 100644 app/components/app/specialist-position/entry-form.vue
 create mode 100644 app/components/app/specialist-position/list.cfg.ts
 create mode 100644 app/components/app/specialist-position/list.vue
 create mode 100644 app/components/app/subspecialist-position/entry-form.vue
 create mode 100644 app/components/app/subspecialist-position/list.cfg.ts
 create mode 100644 app/components/app/subspecialist-position/list.vue
 create mode 100644 app/components/app/unit-position/entry-form.vue
 create mode 100644 app/components/app/unit-position/list.cfg.ts
 create mode 100644 app/components/app/unit-position/list.vue
 create mode 100644 app/components/content/installation-position/list.vue
 create mode 100644 app/components/content/specialist-position/list.vue
 create mode 100644 app/components/content/subspecialist-position/list.vue
 create mode 100644 app/components/content/unit-position/list.vue
 create mode 100644 app/pages/(features)/org-src/installation-position/index.vue
 create mode 100644 app/pages/(features)/org-src/specialist-position/index.vue
 create mode 100644 app/pages/(features)/org-src/subspecialist-position/index.vue
 create mode 100644 app/pages/(features)/org-src/unit-position/index.vue

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..da4782c0
--- /dev/null
+++ b/app/components/app/installation-position/entry-form.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/installation-position/list.cfg.ts b/app/components/app/installation-position/list.cfg.ts
new file mode 100644
index 00000000..cc153cc5
--- /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 Divisi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as 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/specialist-position/entry-form.vue b/app/components/app/specialist-position/entry-form.vue
new file mode 100644
index 00000000..da4782c0
--- /dev/null
+++ b/app/components/app/specialist-position/entry-form.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/specialist-position/list.cfg.ts b/app/components/app/specialist-position/list.cfg.ts
new file mode 100644
index 00000000..cc153cc5
--- /dev/null
+++ b/app/components/app/specialist-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 Divisi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as 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/subspecialist-position/entry-form.vue b/app/components/app/subspecialist-position/entry-form.vue
new file mode 100644
index 00000000..da4782c0
--- /dev/null
+++ b/app/components/app/subspecialist-position/entry-form.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/subspecialist-position/list.cfg.ts b/app/components/app/subspecialist-position/list.cfg.ts
new file mode 100644
index 00000000..cc153cc5
--- /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 { 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 Divisi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as 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/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/unit-position/entry-form.vue b/app/components/app/unit-position/entry-form.vue
new file mode 100644
index 00000000..da4782c0
--- /dev/null
+++ b/app/components/app/unit-position/entry-form.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/unit-position/list.cfg.ts b/app/components/app/unit-position/list.cfg.ts
new file mode 100644
index 00000000..cc153cc5
--- /dev/null
+++ b/app/components/app/unit-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 Divisi ' },
+      { label: 'Karyawan' },
+      { label: 'Status Kepala' },
+      { label: '' },
+    ],
+  ],
+
+  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+
+  delKeyNames: [
+    { key: 'code', label: 'Kode' },
+    { key: 'name', label: 'Nama' },
+  ],
+
+  parses: {
+    division: (rec: unknown): unknown => {
+      const recX = rec as SmallDetailDto
+      return recX.division?.name || '-'
+    },
+    employee: (rec: unknown): unknown => {
+      const recX = rec as 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/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/content/division-position/list.vue b/app/components/content/division-position/list.vue
index 8fafd960..4fa8605d 100644
--- a/app/components/content/division-position/list.vue
+++ b/app/components/content/division-position/list.vue
@@ -62,7 +62,7 @@ const {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Divisi Position',
+  title: 'Divisi - Posisi',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
diff --git a/app/components/content/installation-position/list.vue b/app/components/content/installation-position/list.vue
new file mode 100644
index 00000000..68870570
--- /dev/null
+++ b/app/components/content/installation-position/list.vue
@@ -0,0 +1,196 @@
+<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 AppInstallationList from '~/components/app/installation/list.vue'
+import AppInstallationEntryForm from '~/components/app/installation/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 { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation.service'
+import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+
+const encounterClasses = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationList,
+} = 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,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation',
+})
+
+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',
+    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:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Detail Instalasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  encounterClasses.value = getEncounterList()
+  await getInstallationList()
+})
+</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'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppInstallationPositionEntryForm
+      :schema="InstallationSchema"
+      :encounter-classes="encounterClasses"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationList, 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/specialist-position/list.vue b/app/components/content/specialist-position/list.vue
new file mode 100644
index 00000000..d55abea1
--- /dev/null
+++ b/app/components/content/specialist-position/list.vue
@@ -0,0 +1,197 @@
+<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 AppSpecialistList from '~/components/app/specialist/list.vue'
+import AppSpecialistEntryForm from '~/components/app/specialist/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 { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/specialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const units = 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: 'unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist',
+})
+
+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'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Edit Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  units.value = await getUnitList()
+  await getSpecialistList()
+})
+</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="SpecialistSchema"
+      :units="units"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistFormData | 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="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/subspecialist-position/list.vue b/app/components/content/subspecialist-position/list.vue
new file mode 100644
index 00000000..6ff2c2be
--- /dev/null
+++ b/app/components/content/subspecialist-position/list.vue
@@ -0,0 +1,197 @@
+<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 AppSubSpecialistList from '~/components/app/subspecialist/list.vue'
+import AppSubSpecialistEntryForm from '~/components/app/subspecialist/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 { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/subspecialist.service'
+import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
+
+const specialists = 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: 'specialist',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist',
+})
+
+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)
+  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'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Edit Sub Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  specialists.value = await getSpecialistsList()
+  await getSubSpecialistList()
+})
+</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="SubspecialistSchema"
+      :specialists="specialists"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubspecialistFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSubSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSubSpecialistList, resetForm, 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="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/unit-position/list.vue b/app/components/content/unit-position/list.vue
new file mode 100644
index 00000000..95a5568d
--- /dev/null
+++ b/app/components/content/unit-position/list.vue
@@ -0,0 +1,197 @@
+<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 AppUnitList from '~/components/app/unit/list.vue'
+import AppUnitEntryForm from '~/components/app/unit/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 { UnitSchema, type UnitFormData } from '~/schemas/unit.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  onResetState,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit.handler'
+
+// Services
+import { getList, getDetail } from '~/services/unit.service'
+import { getValueLabelList as getInstallationList } from '~/services/installation.service'
+
+const installations = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = 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',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit',
+})
+
+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'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Edit Unit'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  installations.value = await getInstallationList()
+  await getUnitList()
+})
+</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'"
+    size="lg"
+    prevent-outside
+    @update:open="
+      (value: any) => {
+        onResetState()
+        isFormEntryDialogOpen = value
+      }
+    "
+  >
+    <AppUnitPositionEntryForm
+      :schema="UnitSchema"
+      :installations="installations"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getUnitList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getUnitList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getUnitList, 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/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/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/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/unit-position/index.vue b/app/pages/(features)/org-src/unit-position/index.vue
new file mode 100644
index 00000000..5395ea8e
--- /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',
+  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/public/side-menu-items/sys.json b/public/side-menu-items/sys.json
index 941c9a35..b69127e7 100644
--- a/public/side-menu-items/sys.json
+++ b/public/side-menu-items/sys.json
@@ -321,24 +321,40 @@
             "link": "/org-src/division"
           },
           {
-            "title": "Divisi Position",
+            "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"
           }
         ]
       },

From dc653402c7cc4ef55108cd84fe52ce5659093cc2 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 28 Oct 2025 12:45:57 +0700
Subject: [PATCH 07/20] feat(installation-position): implement crud operations
 and ui components

- Add installation position handler, service, and schema
- Update list configuration and entry form components
- Enhance pagination component with configurable controls
- Implement installation position list view with search and pagination
---
 .../app/installation-position/entry-form.vue  | 45 ++++++---
 .../app/installation-position/list.cfg.ts     |  4 +-
 .../content/installation-position/list.vue    | 58 +++++++-----
 .../pub/my-ui/pagination/pagination-view.vue  | 12 ++-
 .../pub/my-ui/pagination/pagination.vue       | 92 ++++++++++++++-----
 app/handlers/installation-position.handler.ts | 24 +++++
 app/schemas/installation-position.schema.ts   | 20 ++++
 app/services/installation-position.service.ts | 41 +++++++++
 8 files changed, 229 insertions(+), 67 deletions(-)
 create mode 100644 app/handlers/installation-position.handler.ts
 create mode 100644 app/schemas/installation-position.schema.ts
 create mode 100644 app/services/installation-position.service.ts

diff --git a/app/components/app/installation-position/entry-form.vue b/app/components/app/installation-position/entry-form.vue
index da4782c0..4f7885a1 100644
--- a/app/components/app/installation-position/entry-form.vue
+++ b/app/components/app/installation-position/entry-form.vue
@@ -7,18 +7,18 @@ 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'
+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 { genDivisionPosition } from '~/models/division-position'
+import { genInstallationPosition } from '~/models/installation-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  divisionId: number
+  installations: any[]
   employees: any[]
   values: any
   isLoading?: boolean
@@ -26,21 +26,21 @@ interface Props {
 }
 
 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]
+  submit: [values: InstallationPositionFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
 const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
-  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+  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')
 
@@ -62,6 +62,8 @@ const headStatusStr = computed<string>({
 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
@@ -70,20 +72,18 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
+  installation.value = null
   employee.value = null
   headStatus.value = false
 }
 
 // Form submission handler
 function onSubmitForm() {
-  const formData: DivisionPositionFormData = {
+  const formData: InstallationPositionFormData = {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-
-    // readonly based on detail division
-    division_id: props.divisionId,
-
+    installation_id: installation.value || null,
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -98,7 +98,7 @@ function onCancelForm() {
 
 <template>
   <form
-    id="form-division-position"
+    id="form-installation-position"
     @submit.prevent
   >
     <Block
@@ -107,7 +107,7 @@ function onCancelForm() {
       :colCount="1"
     >
       <Cell>
-        <Label height="compact">Kode Jabatan</Label>
+        <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
           <Input
             id="code"
@@ -118,7 +118,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Nama Jabatan</Label>
+        <Label height="compact">Nama Posisi</Label>
         <Field :errMessage="errors.name">
           <Input
             id="name"
@@ -129,7 +129,22 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Pengisi Jabatan</Label>
+        <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"
diff --git a/app/components/app/installation-position/list.cfg.ts b/app/components/app/installation-position/list.cfg.ts
index cc153cc5..fe3f6c9c 100644
--- a/app/components/app/installation-position/list.cfg.ts
+++ b/app/components/app/installation-position/list.cfg.ts
@@ -13,14 +13,14 @@ export const config: Config = {
     [
       { label: 'Kode Posisi' },
       { label: 'Nama Posisi' },
-      { label: 'Nama Divisi ' },
+      { label: 'Nama Instalasi ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
     ],
   ],
 
-  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+  keys: ['code', 'name', 'installation.name', 'employee', 'head', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
diff --git a/app/components/content/installation-position/list.vue b/app/components/content/installation-position/list.vue
index 68870570..ea60ee04 100644
--- a/app/components/content/installation-position/list.vue
+++ b/app/components/content/installation-position/list.vue
@@ -3,8 +3,8 @@
 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 AppInstallationList from '~/components/app/installation/list.vue'
-import AppInstallationEntryForm from '~/components/app/installation/entry-form.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'
@@ -12,7 +12,7 @@ import { toast } from '~/components/pub/ui/toast'
 
 // Types
 import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
-import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
+import { InstallationPositionSchema, type InstallationPositionFormData } from '~/schemas/installation-position.schema'
 
 // Handlers
 import {
@@ -28,13 +28,15 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/installation.handler'
+} from '~/handlers/installation-position.handler'
 
 // Services
-import { getList, getDetail } from '~/services/installation.service'
-import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+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 encounterClasses = ref<{ value: string; label: string }[]>([])
+const installations = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -44,7 +46,7 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getInstallationList,
+  fetchData: getInstallationPositionList,
 } = usePaginatedList({
   fetchFn: async (params: any) => {
     const result = await getList({
@@ -52,10 +54,11 @@ const {
       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',
+  entityName: 'installation-position',
 })
 
 const headerPrep: HeaderPrep = {
@@ -73,7 +76,7 @@ const headerPrep: HeaderPrep = {
     onClear: () => {},
   },
   addNav: {
-    label: 'Tambah',
+    label: 'Tambah Posisi',
     icon: 'i-lucide-plus',
     onClick: () => {
       recItem.value = null
@@ -97,18 +100,16 @@ const getCurrentInstallationDetail = async (id: number | string) => {
     isFormEntryDialogOpen.value = true
   }
 }
-
 // Watch for row actions when recId or recAction changes
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      getCurrentInstallationDetail(recId.value)
-      title.value = 'Detail Instalasi'
+      title.value = 'Detail Instalasi - Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentInstallationDetail(recId.value)
-      title.value = 'Edit Instalasi'
+      title.value = 'Edit Instalasi - Posisi'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -118,8 +119,18 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  encounterClasses.value = getEncounterList()
-  await getInstallationList()
+  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>
 
@@ -139,7 +150,7 @@ onMounted(async () => {
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
-    :title="!!recItem ? title : 'Tambah Instalasi'"
+    :title="!!recItem ? title : 'Tambah Instalasi - Posisi'"
     size="lg"
     prevent-outside
     @update:open="
@@ -150,18 +161,19 @@ onMounted(async () => {
     "
   >
     <AppInstallationPositionEntryForm
-      :schema="InstallationSchema"
-      :encounter-classes="encounterClasses"
+      :schema="InstallationPositionSchema"
+      :employees="employees"
+      :installations="installations"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
-        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+        (values: InstallationPositionFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            handleActionEdit(recId, values, getInstallationPositionList, resetForm, toast)
             return
           }
-          handleActionSave(values, getInstallationList, resetForm, toast)
+          handleActionSave(values, getInstallationPositionList, resetForm, toast)
         }
       "
       @cancel="handleCancelForm"
@@ -173,7 +185,7 @@ onMounted(async () => {
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @confirm="() => handleActionRemove(recId, getInstallationPositionList, toast)"
     @cancel=""
   >
     <template #default="{ record }">
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/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/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
+}

From 54db81a5b9d0519982606e9700817e927f9bdeba Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 28 Oct 2025 15:03:49 +0700
Subject: [PATCH 08/20] feat(installation): implement detail view and
 navigation for installations

- Replace direct detail display with navigation to dedicated detail page
- Add new installation detail components and configuration
- Remove unused entry.ts file
- Create new route for installation detail view
---
 .../app/installation/detail/index.vue         |  34 +++
 .../app/installation/detail/list.cfg.ts       |  65 +++++
 .../app/installation/detail/list.vue          |  35 +++
 .../installation/{list-cfg.ts => list.cfg.ts} |  11 +-
 app/components/app/installation/list.vue      |   7 +-
 .../content/installation/detail.vue           | 235 ++++++++++++++++++
 app/components/content/installation/entry.ts  |  37 ---
 app/components/content/installation/list.vue  |  10 +-
 .../org-src/installation/[id]/index.vue       |  42 ++++
 9 files changed, 425 insertions(+), 51 deletions(-)
 create mode 100644 app/components/app/installation/detail/index.vue
 create mode 100644 app/components/app/installation/detail/list.cfg.ts
 create mode 100644 app/components/app/installation/detail/list.vue
 rename app/components/app/installation/{list-cfg.ts => list.cfg.ts} (83%)
 create mode 100644 app/components/content/installation/detail.vue
 delete mode 100644 app/components/content/installation/entry.ts
 create mode 100644 app/pages/(features)/org-src/installation/[id]/index.vue

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..d6e760b5
--- /dev/null
+++ b/app/components/app/installation/detail/list.vue
@@ -0,0 +1,35 @@
+<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>
+</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/content/installation/detail.vue b/app/components/content/installation/detail.vue
new file mode 100644
index 00000000..e9721a5b
--- /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 division 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: string
+}>()
+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>
+
+  <LazyAppInstallationDetailList
+    :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
+      }
+    "
+  >
+    <AppInstallationPositionEntry
+      :schema="InstallationPositionSchema"
+      :installation-id="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..dc5cf4e8 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -102,9 +102,13 @@ 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
+      navigateTo({
+        name: 'org-src-installation-id',
+        params: {
+          id: recId.value,
+        },
+      })
+
       break
     case ActionEvents.showEdit:
       getCurrentInstallationDetail(recId.value)
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..5d9c3302
--- /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="String(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>

From d7e9ae03cb4c7792edb8806ab3279fb261e34605 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 28 Oct 2025 15:49:39 +0700
Subject: [PATCH 09/20] feat(ui): add back navigation button to detail pages

- Implement reusable back button component
- Add back button to division and installation detail pages
- Improve navigation logic with additional state cleanup
---
 app/components/app/division/detail/list.vue   | 10 ++++++++
 .../app/installation/detail/list.vue          | 10 ++++++++
 app/components/content/division/list.vue      | 23 ++++++++++++-----
 .../content/installation/detail.vue           |  4 +--
 app/components/content/installation/list.vue  | 22 +++++++++++-----
 app/components/pub/my-ui/nav-footer/ba.vue    | 25 +++++++++++++++++++
 6 files changed, 80 insertions(+), 14 deletions(-)
 create mode 100644 app/components/pub/my-ui/nav-footer/ba.vue

diff --git a/app/components/app/division/detail/list.vue b/app/components/app/division/detail/list.vue
index 56198aec..4bbebb57 100644
--- a/app/components/app/division/detail/list.vue
+++ b/app/components/app/division/detail/list.vue
@@ -32,4 +32,14 @@ function handlePageChange(page: number) {
       :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/installation/detail/list.vue b/app/components/app/installation/detail/list.vue
index d6e760b5..b5884cfd 100644
--- a/app/components/app/installation/detail/list.vue
+++ b/app/components/app/installation/detail/list.vue
@@ -32,4 +32,14 @@ function handlePageChange(page: number) {
       :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/content/division/list.vue b/app/components/content/division/list.vue
index d9294491..0456891b 100644
--- a/app/components/content/division/list.vue
+++ b/app/components/content/division/list.vue
@@ -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,12 +105,22 @@ const getCurrentDivisionDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'org-src-division-id',
-        params: {
-          id: Number(recId.value),
-        },
-      })
+      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:
diff --git a/app/components/content/installation/detail.vue b/app/components/content/installation/detail.vue
index e9721a5b..55a0dd05 100644
--- a/app/components/content/installation/detail.vue
+++ b/app/components/content/installation/detail.vue
@@ -9,7 +9,7 @@ import Header from '~/components/pub/my-ui/nav-header/prep.vue'
 import type { Installation } from '~/models/installation'
 import { getDetail as getDetailInstallation } from '~/services/installation.service'
 
-// #region division positions
+// #region installtaion positions
 import { config } from '~/components/app/installation/detail/list.cfg'
 
 // Helpers
@@ -174,7 +174,7 @@ watch([recId, recAction], () => {
   <AppInstallationDetail :installation="installation" />
   <div class="h-6"></div>
 
-  <LazyAppInstallationDetailList
+  <AppInstallationDetailList
     :data="dataMap"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index dc5cf4e8..553d7ebb 100644
--- a/app/components/content/installation/list.vue
+++ b/app/components/content/installation/list.vue
@@ -102,12 +102,22 @@ const getCurrentInstallationDetail = async (id: number | string) => {
 watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
-      navigateTo({
-        name: 'org-src-installation-id',
-        params: {
-          id: recId.value,
-        },
-      })
+      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:
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>

From 1dc42be406aa6562074f61c33336f5dab1132dba Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 30 Oct 2025 12:14:32 +0700
Subject: [PATCH 10/20] feat(unit-position): implement crud operations and
 update ui components

- Add new handler, service, and schema files for unit-position
- Update list configuration and entry form components
- Modify page title and integrate employee relation
- Implement CRUD operations with proper validation
---
 .../app/unit-position/entry-form.vue          | 44 +++++++----
 app/components/app/unit-position/list.cfg.ts  | 12 +--
 app/components/content/unit-position/list.vue | 77 +++++++++++--------
 app/handlers/unit-position.handler.ts         | 24 ++++++
 app/models/unit-position.ts                   |  3 +
 .../org-src/unit-position/index.vue           |  2 +-
 app/schemas/unit-position.schema.ts           | 24 ++++++
 app/services/unit-position.service.ts         | 25 ++++++
 8 files changed, 153 insertions(+), 58 deletions(-)
 create mode 100644 app/handlers/unit-position.handler.ts
 create mode 100644 app/schemas/unit-position.schema.ts
 create mode 100644 app/services/unit-position.service.ts

diff --git a/app/components/app/unit-position/entry-form.vue b/app/components/app/unit-position/entry-form.vue
index da4782c0..b6ab8609 100644
--- a/app/components/app/unit-position/entry-form.vue
+++ b/app/components/app/unit-position/entry-form.vue
@@ -7,18 +7,18 @@ 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'
+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 { genDivisionPosition } from '~/models/division-position'
+import { genUnitPosition } from '~/models/unit-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  divisionId: number
+  units: any[]
   employees: any[]
   values: any
   isLoading?: boolean
@@ -26,21 +26,21 @@ interface Props {
 }
 
 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]
+  submit: [values: UnitPositionFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
 const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
-  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+  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')
 
@@ -62,6 +62,7 @@ const headStatusStr = computed<string>({
 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
@@ -70,20 +71,18 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
+  unit.value = null
   employee.value = null
   headStatus.value = false
 }
 
 // Form submission handler
 function onSubmitForm() {
-  const formData: DivisionPositionFormData = {
+  const formData: UnitPositionFormData = {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-
-    // readonly based on detail division
-    division_id: props.divisionId,
-
+    unit_id: unit.value || null,
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -98,7 +97,7 @@ function onCancelForm() {
 
 <template>
   <form
-    id="form-division-position"
+    id="form-unit-position"
     @submit.prevent
   >
     <Block
@@ -107,7 +106,7 @@ function onCancelForm() {
       :colCount="1"
     >
       <Cell>
-        <Label height="compact">Kode Jabatan</Label>
+        <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
           <Input
             id="code"
@@ -118,7 +117,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Nama Jabatan</Label>
+        <Label height="compact">Nama Posisi</Label>
         <Field :errMessage="errors.name">
           <Input
             id="name"
@@ -129,7 +128,22 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Pengisi Jabatan</Label>
+        <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"
diff --git a/app/components/app/unit-position/list.cfg.ts b/app/components/app/unit-position/list.cfg.ts
index cc153cc5..fb5e319b 100644
--- a/app/components/app/unit-position/list.cfg.ts
+++ b/app/components/app/unit-position/list.cfg.ts
@@ -1,6 +1,6 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
-import type { DivisionPosition } from '~/models/division-position'
+import type { UnitPosition } from '~/models/unit-position'
 
 type SmallDetailDto = any
 
@@ -13,14 +13,14 @@ export const config: Config = {
     [
       { label: 'Kode Posisi' },
       { label: 'Nama Posisi' },
-      { label: 'Nama Divisi ' },
+      { label: 'Nama Unit ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
     ],
   ],
 
-  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+  keys: ['code', 'name', 'unit.name', 'employee', 'head', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -28,12 +28,8 @@ export const config: Config = {
   ],
 
   parses: {
-    division: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.division?.name || '-'
-    },
     employee: (rec: unknown): unknown => {
-      const recX = rec as DivisionPosition
+      const recX = rec as UnitPosition
       const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
         .filter(Boolean)
         .join(' ')
diff --git a/app/components/content/unit-position/list.vue b/app/components/content/unit-position/list.vue
index 95a5568d..55ab3f29 100644
--- a/app/components/content/unit-position/list.vue
+++ b/app/components/content/unit-position/list.vue
@@ -3,16 +3,17 @@
 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 AppUnitList from '~/components/app/unit/list.vue'
-import AppUnitEntryForm from '~/components/app/unit/entry-form.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 { UnitSchema, type UnitFormData } from '~/schemas/unit.schema'
+import { type UnitPositionFormData, UnitPositionSchema } from '~/schemas/unit-position.schema'
 
 // Handlers
 import {
@@ -28,13 +29,15 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/unit.handler'
+} from '~/handlers/unit-position.handler'
 
 // Services
-import { getList, getDetail } from '~/services/unit.service'
-import { getValueLabelList as getInstallationList } from '~/services/installation.service'
+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 installations = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -44,7 +47,7 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getUnitList,
+  fetchData: getListUnit,
 } = usePaginatedList({
   fetchFn: async (params: any) => {
     const result = await getList({
@@ -52,11 +55,11 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      includes: 'installation',
+      includes: 'unit,Employee.Person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'unit',
+  entityName: 'unit-position',
 })
 
 const headerPrep: HeaderPrep = {
@@ -104,12 +107,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentUnitDetail(recId.value)
-      title.value = 'Detail Unit'
+      title.value = 'Detail Unit Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentUnitDetail(recId.value)
-      title.value = 'Edit Unit'
+      title.value = 'Edit Unit Posisi'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -119,8 +122,18 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  installations.value = await getInstallationList()
-  await getUnitList()
+  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>
 
@@ -140,7 +153,7 @@ onMounted(async () => {
 
   <Dialog
     v-model:open="isFormEntryDialogOpen"
-    :title="!!recItem ? title : 'Tambah Unit'"
+    :title="!!recItem ? title : 'Tambah Unit Posisi'"
     size="lg"
     prevent-outside
     @update:open="
@@ -151,45 +164,41 @@ onMounted(async () => {
     "
   >
     <AppUnitPositionEntryForm
-      :schema="UnitSchema"
-      :installations="installations"
+      :schema="UnitPositionSchema"
+      :units="units"
+      :employees="employees"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
-        (values: UnitFormData | Record<string, any>, resetForm: () => void) => {
+        (values: UnitPositionFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getUnitList, resetForm, toast)
+            handleActionEdit(recId, values, getListUnit, resetForm, toast)
             return
           }
-          handleActionSave(values, getUnitList, resetForm, toast)
+          handleActionSave(values, getListUnit, resetForm, toast)
         }
       "
       @cancel="handleCancelForm"
     />
   </Dialog>
 
-  <!-- Record Confirmation Modal -->
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
     action="delete"
     :record="recItem"
-    @confirm="() => handleActionRemove(recId, getUnitList, toast)"
+    @confirm="() => handleActionRemove(recId, getListUnit, 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 }}
+      <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>
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/unit-position.ts b/app/models/unit-position.ts
index 14925584..11e97806 100644
--- a/app/models/unit-position.ts
+++ b/app/models/unit-position.ts
@@ -1,4 +1,5 @@
 import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
 
 export interface UnitPosition extends Base {
   unit_id: number
@@ -6,6 +7,8 @@ export interface UnitPosition extends Base {
   name: string
   headStatus?: boolean
   employee_id?: number
+
+  employee?: Employee | null
 }
 
 export function genUnitPosition(): UnitPosition {
diff --git a/app/pages/(features)/org-src/unit-position/index.vue b/app/pages/(features)/org-src/unit-position/index.vue
index 5395ea8e..c40a0654 100644
--- a/app/pages/(features)/org-src/unit-position/index.vue
+++ b/app/pages/(features)/org-src/unit-position/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/my-ui/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'Daftar Unit',
+  title: 'Daftar Unit Posisi',
   contentFrame: 'cf-container-lg',
 })
 
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/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)
+}

From b073fb60d12b9a7f1e77d01fe74a815a7dfa516b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 30 Oct 2025 12:16:51 +0700
Subject: [PATCH 11/20] feat(models): add employee relation to position
 interfaces

Add optional Employee type to specialist, installation and subspecialist position interfaces to support employee relation in the data model.
---
 app/models/installation-position.ts  | 3 +++
 app/models/specialist-position.ts    | 2 ++
 app/models/subspecialist-position.ts | 3 +++
 3 files changed, 8 insertions(+)

diff --git a/app/models/installation-position.ts b/app/models/installation-position.ts
index aa0a9ebf..199038d7 100644
--- a/app/models/installation-position.ts
+++ b/app/models/installation-position.ts
@@ -1,4 +1,5 @@
 import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
 
 export interface InstallationPosition extends Base {
   installation_id: number
@@ -6,6 +7,8 @@ export interface InstallationPosition extends Base {
   name: string
   headStatus?: boolean
   employee_id?: number
+
+  employee?: Employee | null
 }
 
 export function genInstallationPosition(): InstallationPosition {
diff --git a/app/models/specialist-position.ts b/app/models/specialist-position.ts
index 58c53f9e..727e8374 100644
--- a/app/models/specialist-position.ts
+++ b/app/models/specialist-position.ts
@@ -1,4 +1,5 @@
 import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
 
 export interface SpecialistPosition extends Base {
   specialist_id: number
@@ -6,6 +7,7 @@ export interface SpecialistPosition extends Base {
   name: string
   headStatus?: boolean
   employee_id?: number
+  employee?: Employee | null
 }
 
 export function genSpecialistPosition(): SpecialistPosition {
diff --git a/app/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
index 5fdfa639..660bd71b 100644
--- a/app/models/subspecialist-position.ts
+++ b/app/models/subspecialist-position.ts
@@ -1,4 +1,5 @@
 import { type Base, genBase } from './_base'
+import type { Employee } from './employee'
 
 export interface SubSpecialistPosition extends Base {
   subspecialist_id: number
@@ -6,6 +7,8 @@ export interface SubSpecialistPosition extends Base {
   name: string
   headStatus?: boolean
   employee_id?: number
+
+  employee?: Employee | null
 }
 
 export function genSubSpecialistPosition(): SubSpecialistPosition {

From 61d3db3a12427801144fd911f072b5e34182dad5 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 30 Oct 2025 12:56:28 +0700
Subject: [PATCH 12/20] feat(unit): add unit detail page with position
 management

- Create new unit detail page with route and navigation
- Add unit detail component to display basic unit information
- Implement position list management with pagination and actions
- Include position creation, editing and deletion functionality
- Update unit model to include installation relationship
---
 app/components/app/unit/detail/index.vue      |  35 +++
 app/components/app/unit/detail/list.cfg.ts    |  61 +++++
 app/components/app/unit/detail/list.vue       |  45 ++++
 app/components/content/unit/detail.vue        | 234 ++++++++++++++++++
 app/components/content/unit/entry.ts          |  63 -----
 app/components/content/unit/list.vue          |  20 +-
 app/models/unit.ts                            |   6 +-
 .../(features)/org-src/unit/[id]/index.vue    |  42 ++++
 app/services/unit.service.ts                  |   2 +-
 9 files changed, 439 insertions(+), 69 deletions(-)
 create mode 100644 app/components/app/unit/detail/index.vue
 create mode 100644 app/components/app/unit/detail/list.cfg.ts
 create mode 100644 app/components/app/unit/detail/list.vue
 create mode 100644 app/components/content/unit/detail.vue
 delete mode 100644 app/components/content/unit/entry.ts
 create mode 100644 app/pages/(features)/org-src/unit/[id]/index.vue

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/unit/detail.vue b/app/components/content/unit/detail.vue
new file mode 100644
index 00000000..1310621e
--- /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: string
+}>()
+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 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 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
+      }
+    "
+  >
+    <AppUnitPositionEntry
+      :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/models/unit.ts b/app/models/unit.ts
index 142f0570..0588dd80 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
 }
 
 export function genUnit(): Unit {
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..f118d9fc
--- /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="String(route.params.id)" />
+  </template>
+  <Error
+    v-else
+    :status-code="403"
+  />
+</template>
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'

From 343d1d21cb5706f7716c7d095245a2b35f2690b7 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 30 Oct 2025 13:56:14 +0700
Subject: [PATCH 13/20] refactor(installation): rename component and ensure
 installationId is number

Rename AppInstallationPositionEntry to AppInstallationPositionEntryDetail for better clarity and ensure installationId is properly typed as number. The new component includes form handling for installation position details.
---
 .../installation-position/entry-detail.vue    | 192 ++++++++++++++++++
 .../content/installation/detail.vue           |   4 +-
 2 files changed, 194 insertions(+), 2 deletions(-)
 create mode 100644 app/components/app/installation-position/entry-detail.vue

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/content/installation/detail.vue b/app/components/content/installation/detail.vue
index 55a0dd05..c9337b5b 100644
--- a/app/components/content/installation/detail.vue
+++ b/app/components/content/installation/detail.vue
@@ -192,9 +192,9 @@ watch([recId, recAction], () => {
       }
     "
   >
-    <AppInstallationPositionEntry
+    <AppInstallationPositionEntryDetail
       :schema="InstallationPositionSchema"
-      :installation-id="installationId"
+      :installation-id="Number(installationId)"
       :employees="employees"
       :values="recItem"
       :is-loading="isProcessing"

From bf441ff71449506dc396027402aaf819dec4c136 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 30 Oct 2025 14:10:40 +0700
Subject: [PATCH 14/20] refactor(components): change ID types from string to
 number and update related components

- Update installation and unit detail components to use number type for IDs
- Modify route parameter handling to pass numbers instead of strings
- Add new unit position entry detail component with proper type handling
---
 .../app/unit-position/entry-detail.vue        | 192 ++++++++++++++++++
 .../content/installation/detail.vue           |   2 +-
 app/components/content/unit/detail.vue        |   6 +-
 .../org-src/installation/[id]/index.vue       |   2 +-
 .../(features)/org-src/unit/[id]/index.vue    |   2 +-
 5 files changed, 198 insertions(+), 6 deletions(-)
 create mode 100644 app/components/app/unit-position/entry-detail.vue

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/content/installation/detail.vue b/app/components/content/installation/detail.vue
index c9337b5b..0f12ad8c 100644
--- a/app/components/content/installation/detail.vue
+++ b/app/components/content/installation/detail.vue
@@ -47,7 +47,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  installationId: string
+  installationId: number
 }>()
 const installation = ref<Installation>({} as Installation)
 // #endregion
diff --git a/app/components/content/unit/detail.vue b/app/components/content/unit/detail.vue
index 1310621e..6c51624f 100644
--- a/app/components/content/unit/detail.vue
+++ b/app/components/content/unit/detail.vue
@@ -47,7 +47,7 @@ const title = ref('')
 
 // #region Props & Emits
 const props = defineProps<{
-  unitId: string
+  unitId: number
 }>()
 const unit = ref<Unit>({} as Unit)
 // #endregion
@@ -86,7 +86,7 @@ const dataMap = computed(() => {
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Detail Instalasi',
+  title: 'Detail Unit',
   icon: 'i-lucide-user',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -191,7 +191,7 @@ watch([recId, recAction], () => {
       }
     "
   >
-    <AppUnitPositionEntry
+    <AppUnitPositionEntryDetail
       :schema="UnitPositionSchema"
       :unit-id="unitId"
       :employees="employees"
diff --git a/app/pages/(features)/org-src/installation/[id]/index.vue b/app/pages/(features)/org-src/installation/[id]/index.vue
index 5d9c3302..0264dd65 100644
--- a/app/pages/(features)/org-src/installation/[id]/index.vue
+++ b/app/pages/(features)/org-src/installation/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentInstallationDetail :installation-id="String(route.params.id)" />
+    <ContentInstallationDetail :installation-id="Number(route.params.id)" />
   </template>
   <Error
     v-else
diff --git a/app/pages/(features)/org-src/unit/[id]/index.vue b/app/pages/(features)/org-src/unit/[id]/index.vue
index f118d9fc..1230b57c 100644
--- a/app/pages/(features)/org-src/unit/[id]/index.vue
+++ b/app/pages/(features)/org-src/unit/[id]/index.vue
@@ -33,7 +33,7 @@ const canRead = true
 
 <template>
   <template v-if="canRead">
-    <ContentUnitDetail :unit-id="String(route.params.id)" />
+    <ContentUnitDetail :unit-id="Number(route.params.id)" />
   </template>
   <Error
     v-else

From c340de3114dcff7fcf5c204538384150f6c0baa5 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 31 Oct 2025 10:55:45 +0700
Subject: [PATCH 15/20] feat(specialist-position): implement crud operations
 for specialist positions

add handler, service, schema and update components for specialist position management
update list configuration and form to handle specialist relations
---
 .../app/specialist-position/entry-form.vue    | 45 ++++++++----
 .../app/specialist-position/list.cfg.ts       |  8 +--
 .../content/specialist-position/list.vue      | 70 ++++++++++---------
 app/handlers/specialist-position.handler.ts   | 24 +++++++
 app/schemas/specialist-position.schema.ts     | 24 +++++++
 app/services/specialist-position.service.ts   | 25 +++++++
 6 files changed, 143 insertions(+), 53 deletions(-)
 create mode 100644 app/handlers/specialist-position.handler.ts
 create mode 100644 app/schemas/specialist-position.schema.ts
 create mode 100644 app/services/specialist-position.service.ts

diff --git a/app/components/app/specialist-position/entry-form.vue b/app/components/app/specialist-position/entry-form.vue
index da4782c0..be031219 100644
--- a/app/components/app/specialist-position/entry-form.vue
+++ b/app/components/app/specialist-position/entry-form.vue
@@ -7,18 +7,18 @@ 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'
+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 { genDivisionPosition } from '~/models/division-position'
+import { genSpecialistPosition } from '~/models/specialist-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  divisionId: number
+  specialists: any[]
   employees: any[]
   values: any
   isLoading?: boolean
@@ -26,21 +26,21 @@ interface Props {
 }
 
 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]
+  submit: [values: SpecialistPositionFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
 const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
-  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+  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')
 
@@ -62,6 +62,8 @@ const headStatusStr = computed<string>({
 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
@@ -70,20 +72,18 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
+  specialist.value = null
   employee.value = null
   headStatus.value = false
 }
 
 // Form submission handler
 function onSubmitForm() {
-  const formData: DivisionPositionFormData = {
+  const formData: SpecialistPositionFormData = {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-
-    // readonly based on detail division
-    division_id: props.divisionId,
-
+    specialist_id: specialist.value || null,
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -98,7 +98,7 @@ function onCancelForm() {
 
 <template>
   <form
-    id="form-division-position"
+    id="form-specialist-position"
     @submit.prevent
   >
     <Block
@@ -107,7 +107,7 @@ function onCancelForm() {
       :colCount="1"
     >
       <Cell>
-        <Label height="compact">Kode Jabatan</Label>
+        <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
           <Input
             id="code"
@@ -118,7 +118,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Nama Jabatan</Label>
+        <Label height="compact">Nama Posisi</Label>
         <Field :errMessage="errors.name">
           <Input
             id="name"
@@ -129,7 +129,22 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Pengisi Jabatan</Label>
+        <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"
diff --git a/app/components/app/specialist-position/list.cfg.ts b/app/components/app/specialist-position/list.cfg.ts
index cc153cc5..35f49c20 100644
--- a/app/components/app/specialist-position/list.cfg.ts
+++ b/app/components/app/specialist-position/list.cfg.ts
@@ -13,14 +13,14 @@ export const config: Config = {
     [
       { label: 'Kode Posisi' },
       { label: 'Nama Posisi' },
-      { label: 'Nama Divisi ' },
+      { label: 'Nama Spesialis ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
     ],
   ],
 
-  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+  keys: ['code', 'name', 'specialist.name', 'employee', 'head', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -28,10 +28,6 @@ export const config: Config = {
   ],
 
   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]
diff --git a/app/components/content/specialist-position/list.vue b/app/components/content/specialist-position/list.vue
index d55abea1..1ebf697e 100644
--- a/app/components/content/specialist-position/list.vue
+++ b/app/components/content/specialist-position/list.vue
@@ -3,16 +3,17 @@
 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 AppSpecialistList from '~/components/app/specialist/list.vue'
-import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.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 { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
+import { type SpecialistPositionFormData, SpecialistPositionSchema } from '~/schemas/specialist-position.schema'
 
 // Handlers
 import {
@@ -28,13 +29,15 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/specialist.handler'
+} from '~/handlers/specialist-position.handler'
 
 // Services
-import { getList, getDetail } from '~/services/specialist.service'
-import { getValueLabelList as getUnitList } from '~/services/unit.service'
+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 units = ref<{ value: string | number; label: string }[]>([])
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -52,11 +55,11 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      includes: 'unit',
+      includes: 'specialist,Employee.Person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'specialist',
+  entityName: 'specialist-position',
 })
 
 const headerPrep: HeaderPrep = {
@@ -98,18 +101,17 @@ const getCurrentSpecialistDetail = async (id: number | string) => {
     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'
+      title.value = 'Detail Spesialis Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentSpecialistDetail(recId.value)
-      title.value = 'Edit Spesialis'
+      title.value = 'Edit Spesialis Posisi'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -119,8 +121,18 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  units.value = await getUnitList()
-  await getSpecialistList()
+  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>
 
@@ -131,13 +143,11 @@ onMounted(async () => {
     :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'"
@@ -151,13 +161,14 @@ onMounted(async () => {
     "
   >
     <AppSpecialistPositionEntryForm
-      :schema="SpecialistSchema"
-      :units="units"
+      :schema="SpecialistPositionSchema"
+      :specialists="specialists"
+      :employees="employees"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
-        (values: SpecialistFormData | Record<string, any>, resetForm: () => void) => {
+        (values: SpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
             handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
             return
@@ -168,7 +179,6 @@ onMounted(async () => {
       @cancel="handleCancelForm"
     />
   </Dialog>
-
   <!-- Record Confirmation Modal -->
   <RecordConfirmation
     v-model:open="isRecordConfirmationOpen"
@@ -178,18 +188,14 @@ onMounted(async () => {
     @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 }}
+      <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>
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/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/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)
+}

From a4f8e1a64f7e5f75535748b6be48fb26dd66e55d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 31 Oct 2025 11:18:00 +0700
Subject: [PATCH 16/20] feat(specialist): add specialist detail page with
 position management

- Add specialist detail page with unit relation
- Implement position management including CRUD operations
- Update specialist model to include unit relation
- Add list and detail components for specialist positions
- Create entry form for specialist positions
- Implement pagination and search for positions
- Add confirmation dialogs for delete operations
---
 .../app/specialist-position/entry-detail.vue  | 192 ++++++++++++++
 .../app/specialist/detail/index.vue           |  35 +++
 .../app/specialist/detail/list.cfg.ts         |  61 +++++
 app/components/app/specialist/detail/list.vue |  45 ++++
 app/components/app/specialist/list-cfg.ts     |  15 +-
 app/components/content/specialist/detail.vue  | 234 ++++++++++++++++++
 app/components/content/specialist/entry.ts    |  95 -------
 app/components/content/specialist/list.vue    |  20 +-
 app/models/specialist.ts                      |   7 +-
 .../org-src/specialist/[id]/index.vue         |  42 ++++
 10 files changed, 633 insertions(+), 113 deletions(-)
 create mode 100644 app/components/app/specialist-position/entry-detail.vue
 create mode 100644 app/components/app/specialist/detail/index.vue
 create mode 100644 app/components/app/specialist/detail/list.cfg.ts
 create mode 100644 app/components/app/specialist/detail/list.vue
 create mode 100644 app/components/content/specialist/detail.vue
 delete mode 100644 app/components/content/specialist/entry.ts
 create mode 100644 app/pages/(features)/org-src/specialist/[id]/index.vue

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/detail/index.vue b/app/components/app/specialist/detail/index.vue
new file mode 100644
index 00000000..faa5234c
--- /dev/null
+++ b/app/components/app/specialist/detail/index.vue
@@ -0,0 +1,35 @@
+<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?.name || '-' }}</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/content/specialist/detail.vue b/app/components/content/specialist/detail.vue
new file mode 100644
index 00000000..7387900d
--- /dev/null
+++ b/app/components/content/specialist/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 { 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)
+    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/models/specialist.ts b/app/models/specialist.ts
index b4fe1115..64017679 100644
--- a/app/models/specialist.ts
+++ b/app/models/specialist.ts
@@ -1,9 +1,12 @@
-import { type Base, genBase } from "./_base"
+import { type Base, genBase } from './_base'
+import type { Unit } from './unit'
 
 export interface Specialist extends Base {
   code: string
   name: string
   unit_id?: number | string | null
+
+  unit?: Unit | null
 }
 
 export function genSpecialist(): Specialist {
@@ -11,6 +14,6 @@ export function genSpecialist(): Specialist {
     ...genBase(),
     code: '',
     name: '',
-    unit_id: 0
+    unit_id: 0,
   }
 }
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>

From d3090d04ef16e36824c4fd2d7ffe80168733f71b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 31 Oct 2025 13:34:45 +0700
Subject: [PATCH 17/20] feat(specialist): add unit info to specialist detail
 view

- Extend getDetail function to accept optional params
- Include unit data when fetching specialist details
- Display unit code alongside name in detail view
---
 app/components/app/specialist/detail/index.vue | 4 +++-
 app/components/content/specialist/detail.vue   | 4 +++-
 app/services/specialist.service.ts             | 4 ++--
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/app/components/app/specialist/detail/index.vue b/app/components/app/specialist/detail/index.vue
index faa5234c..3f32a78f 100644
--- a/app/components/app/specialist/detail/index.vue
+++ b/app/components/app/specialist/detail/index.vue
@@ -29,7 +29,9 @@ defineProps<{
 <template>
   <DetailRow label="Kode">{{ specialist.code || '-' }}</DetailRow>
   <DetailRow label="Nama">{{ specialist.name || '-' }}</DetailRow>
-  <DetailRow label="Unit">{{ specialist.unit?.name || '-' }}</DetailRow>
+  <DetailRow label="Unit">
+    {{ [specialist.unit?.code, specialist.unit?.name].filter(Boolean).join(' / ') || '-' }}
+  </DetailRow>
 </template>
 
 <style scoped></style>
diff --git a/app/components/content/specialist/detail.vue b/app/components/content/specialist/detail.vue
index 7387900d..df4e79b6 100644
--- a/app/components/content/specialist/detail.vue
+++ b/app/components/content/specialist/detail.vue
@@ -117,7 +117,9 @@ const headerPrep: HeaderPrep = {
 // #region Lifecycle Hooks
 onMounted(async () => {
   try {
-    const result = await getDetailSpecialist(props.specialistId)
+    const result = await getDetailSpecialist(props.specialistId, {
+      includes: 'unit',
+    })
     if (result.success) {
       specialist.value = result.body.data || {}
     }
diff --git a/app/services/specialist.service.ts b/app/services/specialist.service.ts
index c2c34e3f..ee955421 100644
--- a/app/services/specialist.service.ts
+++ b/app/services/specialist.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) {

From ba0ac753b25ef3a1bedafe6095466265035f6725 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 31 Oct 2025 14:57:45 +0700
Subject: [PATCH 18/20] feat(subspecialist-position): implement crud operations
 for subspecialist positions

- Add new handler, service, and schema files for subspecialist position
- Update list configuration and entry form components
- Modify list view to display subspecialist position data
- Include subspecialist relation in position model
---
 .../app/subspecialist-position/entry-form.vue | 45 +++++++----
 .../app/subspecialist-position/list.cfg.ts    | 14 ++--
 app/components/app/subspecialist/list.vue     |  5 +-
 .../content/subspecialist-position/list.vue   | 78 +++++++++++--------
 .../subspecialist-position.handler.ts         | 24 ++++++
 app/models/subspecialist-position.ts          |  2 +
 app/schemas/subspecialist-position.schema.ts  | 24 ++++++
 .../subspecialist-position.service.ts         | 25 ++++++
 8 files changed, 162 insertions(+), 55 deletions(-)
 create mode 100644 app/handlers/subspecialist-position.handler.ts
 create mode 100644 app/schemas/subspecialist-position.schema.ts
 create mode 100644 app/services/subspecialist-position.service.ts

diff --git a/app/components/app/subspecialist-position/entry-form.vue b/app/components/app/subspecialist-position/entry-form.vue
index da4782c0..c897b2f5 100644
--- a/app/components/app/subspecialist-position/entry-form.vue
+++ b/app/components/app/subspecialist-position/entry-form.vue
@@ -7,18 +7,18 @@ 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'
+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 { genDivisionPosition } from '~/models/division-position'
+import { genSubSpecialistPosition } from '~/models/subspecialist-position'
 
 interface Props {
   schema: z.ZodSchema<any>
-  divisionId: number
+  subSpecialists: any[]
   employees: any[]
   values: any
   isLoading?: boolean
@@ -26,21 +26,21 @@ interface Props {
 }
 
 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]
+  submit: [values: SubSpecialistPositionFormData, resetForm: () => void]
   cancel: [resetForm: () => void]
 }>()
 
 const { defineField, errors, meta } = useForm({
   validationSchema: toTypedSchema(props.schema),
-  initialValues: genDivisionPosition() as Partial<DivisionPositionFormData>,
+  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')
 
@@ -62,6 +62,8 @@ const headStatusStr = computed<string>({
 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
@@ -70,20 +72,18 @@ if (props.values) {
 const resetForm = () => {
   code.value = ''
   name.value = ''
+  subSpecialist.value = null
   employee.value = null
   headStatus.value = false
 }
 
 // Form submission handler
 function onSubmitForm() {
-  const formData: DivisionPositionFormData = {
+  const formData: SubSpecialistPositionFormData = {
     ...genBase(),
     name: name.value || '',
     code: code.value || '',
-
-    // readonly based on detail division
-    division_id: props.divisionId,
-
+    subspecialist_id: subSpecialist.value || null,
     employee_id: employee.value || null,
     headStatus: headStatus.value !== undefined ? headStatus.value : undefined,
   }
@@ -98,7 +98,7 @@ function onCancelForm() {
 
 <template>
   <form
-    id="form-division-position"
+    id="form-specialist-position"
     @submit.prevent
   >
     <Block
@@ -107,7 +107,7 @@ function onCancelForm() {
       :colCount="1"
     >
       <Cell>
-        <Label height="compact">Kode Jabatan</Label>
+        <Label height="compact">Kode</Label>
         <Field :errMessage="errors.code">
           <Input
             id="code"
@@ -118,7 +118,7 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Nama Jabatan</Label>
+        <Label height="compact">Nama Posisi</Label>
         <Field :errMessage="errors.name">
           <Input
             id="name"
@@ -129,7 +129,22 @@ function onCancelForm() {
         </Field>
       </Cell>
       <Cell>
-        <Label height="compact">Pengisi Jabatan</Label>
+        <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"
diff --git a/app/components/app/subspecialist-position/list.cfg.ts b/app/components/app/subspecialist-position/list.cfg.ts
index cc153cc5..028bc7bf 100644
--- a/app/components/app/subspecialist-position/list.cfg.ts
+++ b/app/components/app/subspecialist-position/list.cfg.ts
@@ -1,6 +1,6 @@
 import type { Config, RecComponent } from '~/components/pub/my-ui/data-table'
 import { defineAsyncComponent } from 'vue'
-import type { DivisionPosition } from '~/models/division-position'
+import type { SubSpecialistPosition } from '~/models/subspecialist-position'
 
 type SmallDetailDto = any
 
@@ -13,14 +13,14 @@ export const config: Config = {
     [
       { label: 'Kode Posisi' },
       { label: 'Nama Posisi' },
-      { label: 'Nama Divisi ' },
+      { label: 'Nama Sub Spesialis ' },
       { label: 'Karyawan' },
       { label: 'Status Kepala' },
       { label: '' },
     ],
   ],
 
-  keys: ['code', 'name', 'division', 'employee', 'head', 'action'],
+  keys: ['code', 'name', 'subspecialist', 'employee', 'head', 'action'],
 
   delKeyNames: [
     { key: 'code', label: 'Kode' },
@@ -28,12 +28,12 @@ export const config: Config = {
   ],
 
   parses: {
-    division: (rec: unknown): unknown => {
-      const recX = rec as SmallDetailDto
-      return recX.division?.name || '-'
+    subspecialist: (rec: unknown): unknown => {
+      const recX = rec as SubSpecialistPosition
+      return recX.subspecialist?.name || '-'
     },
     employee: (rec: unknown): unknown => {
-      const recX = rec as DivisionPosition
+      const recX = rec as SubSpecialistPosition
       const fullName = [recX.employee?.person.frontTitle, recX.employee?.person.name, recX.employee?.person.endTitle]
         .filter(Boolean)
         .join(' ')
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/content/subspecialist-position/list.vue b/app/components/content/subspecialist-position/list.vue
index 6ff2c2be..4c833ce2 100644
--- a/app/components/content/subspecialist-position/list.vue
+++ b/app/components/content/subspecialist-position/list.vue
@@ -3,16 +3,20 @@
 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 AppSubSpecialistList from '~/components/app/subspecialist/list.vue'
-import AppSubSpecialistEntryForm from '~/components/app/subspecialist/entry-form.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 { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
+import {
+  type SubSpecialistPositionFormData,
+  SubSpecialistPositionSchema,
+} from '~/schemas/subspecialist-position.schema'
 
 // Handlers
 import {
@@ -28,13 +32,15 @@ import {
   handleActionEdit,
   handleActionRemove,
   handleCancelForm,
-} from '~/handlers/subspecialist.handler'
+} from '~/handlers/subspecialist-position.handler'
 
 // Services
-import { getList, getDetail } from '~/services/subspecialist.service'
-import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
+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 specialists = ref<{ value: string | number; label: string }[]>([])
+const subSpecialists = ref<{ value: string | number; label: string }[]>([])
+const employees = ref<{ value: string | number; label: string }[]>([])
 const title = ref('')
 
 const {
@@ -52,11 +58,11 @@ const {
       sort: 'createdAt:asc',
       'page-number': params['page-number'] || 0,
       'page-size': params['page-size'] || 10,
-      includes: 'specialist',
+      includes: 'subspecialist,Employee.Person',
     })
     return { success: result.success || false, body: result.body || {} }
   },
-  entityName: 'subspecialist',
+  entityName: 'subspecialist-position',
 })
 
 const headerPrep: HeaderPrep = {
@@ -92,6 +98,7 @@ 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
@@ -104,12 +111,12 @@ watch([recId, recAction], () => {
   switch (recAction.value) {
     case ActionEvents.showDetail:
       getCurrentSubSpecialistDetail(recId.value)
-      title.value = 'Detail Sub Spesialis'
+      title.value = 'Detail Sub Spesialis Posisi'
       isReadonly.value = true
       break
     case ActionEvents.showEdit:
       getCurrentSubSpecialistDetail(recId.value)
-      title.value = 'Edit Sub Spesialis'
+      title.value = 'Edit Sub Spesialis Posisi'
       isReadonly.value = false
       break
     case ActionEvents.showConfirmDelete:
@@ -119,8 +126,18 @@ watch([recId, recAction], () => {
 })
 
 onMounted(async () => {
-  specialists.value = await getSpecialistsList()
-  await getSubSpecialistList()
+  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>
 
@@ -132,7 +149,7 @@ onMounted(async () => {
     @search="handleSearch"
   />
 
-  <AppSubspecialistPositionList
+  <AppSubSpecialistPositionList
     :data="data"
     :pagination-meta="paginationMeta"
     @page-change="handlePageChange"
@@ -150,19 +167,20 @@ onMounted(async () => {
       }
     "
   >
-    <AppSubspecialistPositionEntryForm
-      :schema="SubspecialistSchema"
-      :specialists="specialists"
+    <AppSubSpecialistPositionEntryForm
+      :schema="SubSpecialistPositionSchema"
+      :sub-specialists="subSpecialists"
+      :employees="employees"
       :values="recItem"
       :is-loading="isProcessing"
       :is-readonly="isReadonly"
       @submit="
-        (values: SubspecialistFormData | Record<string, any>, resetForm: () => void) => {
+        (values: SubSpecialistPositionFormData | Record<string, any>, resetForm: () => void) => {
           if (recId > 0) {
-            handleActionEdit(recId, values, getSubSpecialistList, resetForm, toast)
+            handleActionEdit(recId, values, getSubSpecialistList, onResetState, toast)
             return
           }
-          handleActionSave(values, getSubSpecialistList, resetForm, toast)
+          handleActionSave(values, getSubSpecialistList, onResetState, toast)
         }
       "
       @cancel="handleCancelForm"
@@ -178,18 +196,14 @@ onMounted(async () => {
     @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 }}
+      <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>
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/models/subspecialist-position.ts b/app/models/subspecialist-position.ts
index 660bd71b..28ea2287 100644
--- a/app/models/subspecialist-position.ts
+++ b/app/models/subspecialist-position.ts
@@ -1,5 +1,6 @@
 import { type Base, genBase } from './_base'
 import type { Employee } from './employee'
+import type { Subspecialist } from './subspecialist'
 
 export interface SubSpecialistPosition extends Base {
   subspecialist_id: number
@@ -8,6 +9,7 @@ export interface SubSpecialistPosition extends Base {
   headStatus?: boolean
   employee_id?: number
 
+  subspecialist?: Subspecialist | null
   employee?: Employee | null
 }
 
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/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)
+}

From 581eee41f4ebe3096cf9d262e14b76a5532b2203 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 31 Oct 2025 15:57:41 +0700
Subject: [PATCH 19/20] feat(subspecialist): add detail view and position
 management

- Implement detail view for subspecialist with specialist relation
- Add position management functionality including CRUD operations
- Create new components for detail display and position listing
- Update service to handle position-related requests
- Include employee selection for position assignments
---
 .../subspecialist-position/entry-detail.vue   | 192 ++++++++++++++
 .../app/subspecialist/detail/index.vue        |  37 +++
 .../app/subspecialist/detail/list.cfg.ts      |  61 +++++
 .../app/subspecialist/detail/list.vue         |  45 ++++
 .../content/subspecialist/detail.vue          | 239 ++++++++++++++++++
 app/components/content/subspecialist/entry.ts |  98 -------
 app/components/content/subspecialist/list.vue |  20 +-
 app/models/subspecialist.ts                   |   8 +-
 .../org-src/subspecialist/[id]/index.vue      |  42 +++
 app/services/subspecialist.service.ts         |   4 +-
 10 files changed, 640 insertions(+), 106 deletions(-)
 create mode 100644 app/components/app/subspecialist-position/entry-detail.vue
 create mode 100644 app/components/app/subspecialist/detail/index.vue
 create mode 100644 app/components/app/subspecialist/detail/list.cfg.ts
 create mode 100644 app/components/app/subspecialist/detail/list.vue
 create mode 100644 app/components/content/subspecialist/detail.vue
 delete mode 100644 app/components/content/subspecialist/entry.ts
 create mode 100644 app/pages/(features)/org-src/subspecialist/[id]/index.vue

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/detail/index.vue b/app/components/app/subspecialist/detail/index.vue
new file mode 100644
index 00000000..ed3f1478
--- /dev/null
+++ b/app/components/app/subspecialist/detail/index.vue
@@ -0,0 +1,37 @@
+<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>
+</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/content/subspecialist/detail.vue b/app/components/content/subspecialist/detail.vue
new file mode 100644
index 00000000..ccecaa0d
--- /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',
+    })
+    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/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/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/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) {

From 3ae81c29fd7e11d890ab9fbe90f606622ba11b88 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Tue, 4 Nov 2025 09:23:26 +0700
Subject: [PATCH 20/20] feat(subspecialist): enhance specialist details with
 unit and installation info

- Update Unit interface to allow null installation
- Include specialist.Unit and specialist.Unit.Installation in API includes
- Add Unit and Installation fields to subspecialist detail view
- Simplify list configuration headers and update keys for specialist name
---
 app/components/app/subspecialist/detail/index.vue | 12 ++++++++++++
 app/components/app/subspecialist/list-cfg.ts      | 11 ++---------
 app/components/content/subspecialist/detail.vue   |  2 +-
 app/models/unit.ts                                |  2 +-
 4 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/app/components/app/subspecialist/detail/index.vue b/app/components/app/subspecialist/detail/index.vue
index ed3f1478..154acf75 100644
--- a/app/components/app/subspecialist/detail/index.vue
+++ b/app/components/app/subspecialist/detail/index.vue
@@ -32,6 +32,18 @@ defineProps<{
   <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/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/content/subspecialist/detail.vue b/app/components/content/subspecialist/detail.vue
index ccecaa0d..d432eb22 100644
--- a/app/components/content/subspecialist/detail.vue
+++ b/app/components/content/subspecialist/detail.vue
@@ -121,7 +121,7 @@ const headerPrep: HeaderPrep = {
 onMounted(async () => {
   try {
     const result = await getDetailSubSpecialist(props.subspecialistId, {
-      includes: 'specialist',
+      includes: 'specialist,specialist.Unit,specialist.Unit.Installation',
     })
     if (result.success) {
       subSpecialist.value = result.body.data || {}
diff --git a/app/models/unit.ts b/app/models/unit.ts
index 0588dd80..ba8ba5a1 100644
--- a/app/models/unit.ts
+++ b/app/models/unit.ts
@@ -5,7 +5,7 @@ export interface Unit extends Base {
   name: string
   installation_id?: number | string | null
 
-  installation?: Installation
+  installation?: Installation | null
 }
 
 export function genUnit(): Unit {