Merge pull request #45 from dikstub-rssa/fe-specialist-subspecialist-39

feat(specialist&sub-specialist): impl list and form entry

app/components/app/divison/list.vue

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

app/components/app/equipment/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -29,10 +30,7 @@ function handlePageChange(page: number) {
       :func-html="funcHtml"
       :func-component="funcComponent"
     />
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

app/components/app/installation/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -21,16 +22,10 @@ function handlePageChange(page: number) {
 <template>
   <div class="space-y-4">
     <PubBaseDataTable
-:rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
       :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
-/>
-
-    <!-- Data info and pagination -->
-    <template v-if="paginationMeta">
-      <div v-if="paginationMeta.totalPage > 1">
-        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-      </div>
-    </template>
+    />
 
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
   </div>
 </template>

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

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+interface SpecialistFormData {
+  name: string
+  code: string
+  installationId: string
+  unitId: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<SpecialistFormData>
+  errors?: FormErrors
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: SpecialistFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: SpecialistFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+// Watch for installation changes
+function onInstallationChanged(installationId: string, setFieldValue: any) {
+  setFieldValue('unitId', '', false)
+  emit('installationChanged', installationId || '')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm, values, setFieldValue }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+    >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name"
+                      type="text"
+                      placeholder="Masukkan nama spesialisasi"
+                      autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="code"
+                      type="text"
+                      placeholder="Masukkan kode spesialisasi"
+                      autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="installationId">Instalasi</Label>
+            <Field id="installationId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="installationId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="installationId"
+                      v-bind="componentField"
+                      :items="installation.items"
+                      :placeholder="installation.msg.placeholder"
+                      :search-placeholder="installation.msg.search"
+                      :empty-message="installation.msg.empty"
+                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="unitId">Unit</Label>
+            <Field id="unitId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="unitId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="unitId"
+                      :disabled="!values.installationId"
+                      v-bind="componentField"
+                      :items="unit.items"
+                      :placeholder="unit.msg.placeholder"
+                      :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>

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

@@ -0,0 +1,50 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
+
+export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [{ label: 'Id' }, { label: 'Name' }, { label: 'Code' }, { label: 'Unit' }, { label: '' }],
+]
+
+export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.lastName || ''}`.trim()
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {
+}

app/components/app/specialist/list.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+    />
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

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

@@ -0,0 +1,213 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Combobox from '~/components/pub/custom-ui/form/combobox.vue'
+import FieldGroup from '~/components/pub/custom-ui/form/field-group.vue'
+import Field from '~/components/pub/custom-ui/form/field.vue'
+import Label from '~/components/pub/custom-ui/form/label.vue'
+
+interface SubSpecialistFormData {
+  name: string
+  code: string
+  installationId: string
+  unitId: string
+  specialistId: string
+}
+
+const props = defineProps<{
+  schema: any
+  initialValues?: Partial<SubSpecialistFormData>
+  errors?: FormErrors
+  installation: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  unit: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  specialist: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: SubSpecialistFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+  'installationChanged': [id: string]
+  'unitChanged': [id: string]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: SubSpecialistFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
+    specialistId: values.specialistId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', resetForm)
+}
+
+// Watch for installation changes
+function onInstallationChanged(installationId: string, setFieldValue: any) {
+  setFieldValue('unitId', '', false)
+  setFieldValue('specialistId', '', false)
+  emit('installationChanged', installationId || '')
+}
+
+function onUnitChanged(unitId: string, setFieldValue: any) {
+  setFieldValue('specialistId', '', false)
+  emit('unitChanged', unitId || '')
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{
+      handleSubmit,
+      resetForm,
+      values,
+     setFieldValue,
+    }" as="" keep-values :validation-schema="formSchema"
+    :initial-values="initialValues"
+  >
+    <form id="entry-form" @submit="handleSubmit($event, (values) => onSubmitForm(values, { resetForm }))">
+      <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+        <div class="flex flex-col justify-between">
+          <FieldGroup>
+            <Label label-for="name">Nama</Label>
+            <Field id="name" :errors="errors">
+              <FormField v-slot="{ componentField }" name="name">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="name" type="text" placeholder="Masukkan nama spesialisasi" autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="code">Kode</Label>
+            <Field id="code" :errors="errors">
+              <FormField v-slot="{ componentField }" name="code">
+                <FormItem>
+                  <FormControl>
+                    <Input
+                      id="code" type="text" placeholder="Masukkan kode spesialisasi" autocomplete="off"
+                      v-bind="componentField"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="installationId">Instalasi</Label>
+            <Field id="installationId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="installationId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="installationId" v-bind="componentField" :items="installation.items"
+                      :placeholder="installation.msg.placeholder" :search-placeholder="installation.msg.search"
+                      :empty-message="installation.msg.empty"
+                      @update:model-value="(value) => onInstallationChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="unitId">Unit</Label>
+            <Field id="unitId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="unitId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="unitId" :disabled="!values.installationId" v-bind="componentField" :items="unit.items"
+                      :placeholder="unit.msg.placeholder" :search-placeholder="unit.msg.search"
+                      :empty-message="unit.msg.empty"
+                      @update:model-value="(value) => onUnitChanged(value, setFieldValue)"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="specialistId">Specialist</Label>
+            <Field id="specialistId" :errors="errors">
+              <FormField v-slot="{ componentField }" name="specialistId">
+                <FormItem>
+                  <FormControl>
+                    <Combobox
+                      id="specialistId" :disabled="!values.unitId" v-bind="componentField" :items="specialist.items"
+                      :placeholder="specialist.msg.placeholder" :search-placeholder="specialist.msg.search"
+                      :empty-message="specialist.msg.empty"
+                      />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+        </div>
+      </div>
+
+      <div class="flex justify-end gap-2 mt-4">
+        <Button type="button" variant="outline" @click="onCancelForm({ resetForm })">
+          Batal
+        </Button>
+        <Button type="submit">
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </Form>
+</template>

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

@@ -0,0 +1,56 @@
+import type {
+  Col,
+  KeyLabel,
+  RecComponent,
+  RecStrFuncComponent,
+  RecStrFuncUnknown,
+  Th,
+} from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SmallDetailDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-ud.vue'))
+
+export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
+
+export const header: Th[][] = [
+  [{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Specialist' }, { label: '' }],
+]
+export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'code', label: 'Kode' },
+  { key: 'name', label: 'Nama' },
+]
+
+export const funcParsed: RecStrFuncUnknown = {
+  name: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return `${recX.firstName} ${recX.lastName || ''}`.trim()
+  },
+  unit: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.unit?.name || '-'
+  },
+  specialist: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return recX.specialist?.name || '-'
+  },
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+      props: {
+        size: 'sm',
+      },
+    }
+    return res
+  },
+}
+
+export const funcHtml: RecStrFuncUnknown = {}

app/components/app/subspecialist/list.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
+import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
+
+interface Props {
+  data: any[]
+  paginationMeta: PaginationMeta
+}
+
+defineProps<Props>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent" :skeleton-size="paginationMeta?.pageSize"
+    />
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
+</template>

app/components/app/tools/list.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import PaginationView from '~/components/pub/custom-ui/pagination/pagination-view.vue'
 import { cols, funcComponent, funcHtml, funcParsed, header, keys } from './list-cfg'
 
 interface Props {
   data: any[]
-  paginationMeta?: PaginationMeta
+  paginationMeta: PaginationMeta
 }
 
 defineProps<Props>()
@@ -19,18 +20,12 @@ function handlePageChange(page: number) {
 </script>
 
 <template>
-  <PubBaseDataTable
-    :rows="data"
-    :cols="cols"
-    :header="header"
-    :keys="keys"
-    :func-parsed="funcParsed"
-    :func-html="funcHtml"
-    :func-component="funcComponent"
-  />
-  <template v-if="paginationMeta">
-    <div v-if="paginationMeta.totalPage > 1">
-      <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
-    </div>
-  </template>
+  <div class="space-y-4">
+    <PubBaseDataTable
+      :rows="data" :cols="cols" :header="header" :keys="keys" :func-parsed="funcParsed"
+      :func-html="funcHtml" :func-component="funcComponent"
+    />
+
+    <PaginationView :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+  </div>
 </template>

app/components/app/unit/list.vue

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

app/components/content/division/list.vue

@@ -18,19 +18,9 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Fungsi untuk fetch data division
 async function fetchDivisionData(params: any) {
-  // Prepare query parameters for pagination and search
-  const urlParams = new URLSearchParams({
-    'page-number': params.page.toString(),
-    'page-size': params.pageSize.toString(),
-  })
-
-  if (params.q) {
-    urlParams.append('search', params.q)
-  }
-
-  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
 }
 
 // Menggunakan composable untuk pagination

app/components/content/equipment/list.vue

@@ -24,19 +24,10 @@ const items = [
   { value: 'item-3', label: 'Item 3' },
 ]
 
-// Fungsi untuk fetch data division
+// Fungsi untuk fetch data equipment
 async function fetchEquipmentData(params: any) {
-  // Prepare query parameters for pagination and search
-  const urlParams = new URLSearchParams({
-    'page-number': params.page.toString(),
-    'page-size': params.pageSize.toString(),
-  })
-
-  if (params.q) {
-    urlParams.append('search', params.q)
-  }
-
-  return await xfetch(`/api/v1/equipment?${urlParams.toString()}`)
+  const endpoint = transform('/api/v1/equipment', params)
+  return await xfetch(endpoint)
 }
 
 // Menggunakan composable untuk pagination
@@ -188,17 +179,13 @@ const handleCancelConfirmation = () => {
     </div>
 
     <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Perlengkapan" size="lg" prevent-outside>
-      <AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm" @submit="onSubmitForm" />
+      <AppEquipmentEntryForm :schema="MaterialSchema" :uoms="uoms" :items="items" @back="onCancelForm"
+        @submit="onSubmitForm" />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-      v-model:open="isRecordConfirmationOpen"
-      action="delete"
-      :record="recItem"
-      @confirm="handleConfirmDelete"
-      @cancel="handleCancelConfirmation"
-    >
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
       <template #default="{ record }">
         <div class="text-sm">
           <p><strong>ID:</strong> {{ record?.id }}</p>

app/components/content/installation/list.vue

@@ -5,7 +5,7 @@ import Dialog from '~/components/pub/base/modal/dialog.vue'
 import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
 import { ActionEvents } from '~/components/pub/custom-ui/data/types'
 import Header from '~/components/pub/custom-ui/nav-header/header.vue'
-import { usePaginatedList } from '~/composables/usePaginatedList'
+import { transform, usePaginatedList } from '~/composables/usePaginatedList'
 import { installationConf, schemaConf } from './entry'
 
 // #region State & Computed
@@ -21,16 +21,8 @@ const recItem = ref<any>(null)
 // Fungsi untuk fetch data installation
 async function fetchInstallationData(params: any) {
   // Prepare query parameters for pagination and search
-  const urlParams = new URLSearchParams({
-    'page-number': params.page.toString(),
-    'page-size': params.pageSize.toString(),
-  })
-
-  if (params.q) {
-    urlParams.append('search', params.q)
-  }
-
-  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
 }
 
 // Menggunakan composable untuk pagination
@@ -192,18 +184,14 @@ function handleCancelConfirmation() {
     <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
     <Dialog v-model:open="isFormEntryDialogOpen" title="Tambah Instalasi" size="lg" prevent-outside>
-      <AppInstallationEntryForm
-:installation="installationConf" :schema="schemaConf"
+      <AppInstallationEntryForm :installation="installationConf" :schema="schemaConf"
         :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
-        @cancel="onCancelForm"
-/>
+        @cancel="onCancelForm" />
     </Dialog>
 
     <!-- Record Confirmation Modal -->
-    <RecordConfirmation
-v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
-      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation"
->
+    <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
+      @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
       <template #default="{ record }">
         <div class="text-sm">
           <p><strong>ID:</strong> {{ record?.id }}</p>

app/components/content/specialist/entry.ts

@@ -0,0 +1,95 @@
+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),
+  }
+}

app/components/content/specialist/list.vue

@@ -0,0 +1,242 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation yang dipilih di form
+const selectedInstallationId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSpecialistData,
+  entityName: 'specialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/Installation/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  // Reset installation selection ketika form dibatal
+  selectedInstallationId.value = ''
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  // Update local state untuk trigger re-render filtered units
+  selectedInstallationId.value = installationId
+
+  // The filteredUnitConf computed will automatically update
+  // based on the new selectedInstallationId value
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/Installation', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset installation selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+
+    // Refresh data after successful submission
+    await getSpecialistList()
+
+    // TODO: Show success message
+    console.log('Installation created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// Note: Installation change logic is now handled by the entry-form component
+// through the onInstallationChanged event handler
+// #endregion
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+      <AppSpecialistEntryForm
+        :installation="installationConf"
+        :unit="filteredUnitConf"
+        :schema="schemaConf"
+        :disabled-unit="!selectedInstallationId"
+        :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
+        @submit="onSubmitForm"
+        @cancel="onCancelForm"
+        @installation-changed="onInstallationChanged"
+      />
+    </Dialog>
+
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="handleConfirmDelete"
+      @cancel="handleCancelConfirmation"
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.firstName"><strong>Nama:</strong> {{ record.firstName }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.cellphone }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/components/content/subspecialist/entry.ts

@@ -0,0 +1,98 @@
+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),
+  }
+}

app/components/content/subspecialist/list.vue

@@ -0,0 +1,241 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import AppSubspecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
+import Dialog from '~/components/pub/base/modal/dialog.vue'
+import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/header.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { createFilteredUnitConf, installationConf, schemaConf, specialistConf, unitConf } from './entry'
+
+// #region State & Computed
+// Dialog state
+const isFormEntryDialogOpen = ref(false)
+const isRecordConfirmationOpen = ref(false)
+
+// Table action rowId provider
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+// State untuk tracking installation, unit, dan specialist yang dipilih di form
+const selectedInstallationId = ref<string>('')
+const selectedUnitId = ref<string>('')
+
+// Computed untuk filtered unit berdasarkan installation yang dipilih
+const filteredUnitConf = computed(() => {
+  if (!selectedInstallationId.value) {
+    return { ...unitConf, items: [] }
+  }
+  return createFilteredUnitConf(selectedInstallationId.value)
+})
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: fetchSubSpecialistData,
+  entityName: 'subspecialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Specialist',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (_val: string) => {
+      // Handle search input - this will be triggered by the header component
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Sub Specialist',
+    icon: 'i-lucide-send',
+    onClick: () => {
+      isFormEntryDialogOpen.value = true
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Functions
+async function fetchSubSpecialistData(params: any) {
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
+}
+
+async function handleDeleteRow(record: any) {
+  try {
+    // TODO : hit backend request untuk delete
+    console.log('Deleting record:', record)
+
+    // Simulate API call
+    // const response = await xfetch(`/api/v1/subspecialist/${record.id}`, {
+    //   method: 'DELETE'
+    // })
+
+    // Refresh data setelah berhasil delete
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Record deleted successfully')
+  } catch (error) {
+    console.error('Error deleting record:', error)
+    // TODO: Show error message
+  } finally {
+    // Reset record state
+    recId.value = 0
+    recAction.value = ''
+    recItem.value = null
+  }
+}
+
+// Handle confirmation result
+function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+  handleDeleteRow(record)
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  selectedInstallationId.value = ''
+  selectedUnitId.value = ''
+
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+function onInstallationChanged(installationId: string) {
+  selectedInstallationId.value = installationId
+}
+
+function onUnitChanged(unitId: string) {
+  selectedUnitId.value = unitId
+}
+
+async function onSubmitForm(values: any, resetForm: () => void) {
+  let isSuccess = false
+  try {
+    // TODO: Implement form submission logic
+    console.log('Form submitted:', values)
+
+    // Simulate API call
+    // const response = await xfetch('/api/v1/subspecialist', {
+    //   method: 'POST',
+    //   body: JSON.stringify(values)
+    // })
+
+    // If successful, mark as success and close dialog
+    isFormEntryDialogOpen.value = false
+    isSuccess = true
+
+    // Reset selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+    selectedUnitId.value = ''
+
+    // Refresh data after successful submission
+    await getSubSpecialistList()
+
+    // TODO: Show success message
+    console.log('Sub Specialist created successfully')
+  } catch (error: unknown) {
+    console.warn('Error submitting form:', error)
+    isSuccess = false
+    // Don't close dialog or reset form on error
+    // TODO: Show error message to user
+  } finally {
+    if (isSuccess) {
+      setTimeout(() => {
+        resetForm()
+      }, 500)
+    }
+  }
+}
+// #endregion
+
+// #region Watchers
+
+// Watch for row actions
+watch(recId, () => {
+  switch (recAction.value) {
+    case ActionEvents.showEdit:
+      // TODO: Handle edit action
+      // isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      // Trigger confirmation modal open
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+// #endregion
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <AppSubspecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+    <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+      <AppSubspecialistEntryForm
+        :installation="installationConf"
+        :unit="filteredUnitConf"
+        :specialist="specialistConf"
+        :schema="schemaConf"
+        :initial-values="{ name: '', code: '', installationId: '', unitId: '', specialistId: '' }"
+        @submit="onSubmitForm"
+        @cancel="onCancelForm"
+        @installation-changed="onInstallationChanged"
+        @unit-changed="onUnitChanged"
+      />
+    </Dialog>
+
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="handleConfirmDelete"
+      @cancel="handleCancelConfirmation"
+    >
+      <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>
+          <p v-if="record?.specialist"><strong>Specialist:</strong> {{ record.specialist?.name }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>

app/components/content/tools/list.vue

@@ -24,19 +24,9 @@ const items = [
   { value: 'item-3', label: 'Item 3' },
 ]
 
-// Fungsi untuk fetch data division
 async function fetchDeviceData(params: any) {
-  // Prepare query parameters for pagination and search
-  const urlParams = new URLSearchParams({
-    'page-number': params.page.toString(),
-    'page-size': params.pageSize.toString(),
-  })
-
-  if (params.q) {
-    urlParams.append('search', params.q)
-  }
-
-  return await xfetch(`/api/v1/device?${urlParams.toString()}`)
+  const endpoint = transform('/api/v1/device', params)
+  return await xfetch(endpoint)
 }
 
 // Menggunakan composable untuk pagination

app/components/content/unit/list.vue

@@ -18,19 +18,9 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-// Fungsi untuk fetch data unit
 async function fetchUnitData(params: any) {
-  // Prepare query parameters for pagination and search
-  const urlParams = new URLSearchParams({
-    'page-number': params.page.toString(),
-    'page-size': params.pageSize.toString(),
-  })
-
-  if (params.q) {
-    urlParams.append('search', params.q)
-  }
-
-  return await xfetch(`/api/v1/patient?${urlParams.toString()}`)
+  const endpoint = transform('/api/v1/patient', params)
+  return await xfetch(endpoint)
 }
 
 // Menggunakan composable untuk pagination

app/components/pub/custom-ui/form/combobox.vue

@@ -15,6 +15,7 @@ const props = defineProps<{
   searchPlaceholder?: string
   emptyMessage?: string
   class?: string
+  disabled?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -63,13 +64,14 @@ function onSelect(item: Item) {
     <PopoverTrigger as-child>
       <Button
       :id="props.id"
+      :disabled="props.disabled"
       variant="outline"
       role="combobox"
       :aria-expanded="open"
       :aria-controls="`${props.id}-list`"
       :aria-describedby="`${props.id}-search`"
       :class="cn(
-        'w-full justify-between border-black bg-white hover:bg-gray-50 text-sm font-normal',
+        'w-full justify-between border-1 border-gray-400 bg-white hover:bg-gray-50 text-sm font-normal focus:outline-none focus:ring-1 focus:ring-black',
         !modelValue && 'text-muted-foreground',
         props.class,
       )"

app/components/pub/custom-ui/form/select.vue

@@ -54,8 +54,10 @@ function onValueChange(value: string) {
 
 <template>
   <SelectRoot :model-value="modelValue" @update:model-value="onValueChange">
-    <SelectTrigger :class="cn('w-full', props.class)">
-      <SelectValue :placeholder="placeholder || 'Pilih item'" />
+    <SelectTrigger :class="cn('w-full focus:outline-none focus:ring-1 focus:ring-black bg-white', props.class)">
+      <SelectValue :placeholder="placeholder || 'Pilih item'" :class="cn(
+        props.modelValue ? 'text-black' : 'text-muted-foreground',
+      )" />
     </SelectTrigger>
 
     <SelectContent>
@@ -64,12 +66,7 @@ function onValueChange(value: string) {
           {{ label }}
         </SelectLabel>
 
-        <SelectItem
-          v-for="item in sortedItems"
-          :key="item.value"
-          :value="item.value"
-          class="cursor-pointer"
-        >
+        <SelectItem v-for="item in sortedItems" :key="item.value" :value="item.value" class="cursor-pointer">
           <div class="flex items-center justify-between w-full">
             <span>{{ item.label }}</span>
             <span v-if="item.code" class="text-xs text-muted-foreground ml-2">

app/components/pub/custom-ui/pagination/pagination-view.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+import Pagination from './pagination.vue'
+
+const props = defineProps<{
+  paginationMeta: PaginationMeta
+}>()
+
+const emit = defineEmits<{
+  pageChange: [page: number]
+}>()
+
+function handlePageChange(page: number) {
+  emit('pageChange', page)
+}
+</script>
+
+<template>
+  <Pagination
+  v-if="props.paginationMeta && props.paginationMeta.pageSize > 0"
+  :pagination-meta="paginationMeta"
+  @page-change="handlePageChange"
+  />
+</template>

app/components/pub/custom-ui/pagination/pagination.vue

@@ -65,7 +65,8 @@ const formattedRecordCount = computed(() => {
 })
 
 const startRecord = computed(() => {
-  return ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  const start = ((props.paginationMeta.page - 1) * props.paginationMeta.pageSize) + 1
+  return Number(start).toLocaleString('id-ID')
 })
 
 const endRecord = computed(() => {
@@ -89,12 +90,12 @@ function getButtonClass(pageNumber: number) {
 <template>
   <div class="flex items-center justify-between px-2 py-2 w-full min-w-0">
     <!-- Info text -->
-    <div v-if="showInfo" class="text-sm text-muted-foreground shrink-0">
+    <div v-if="showInfo && endRecord > 0" class="text-sm text-muted-foreground shrink-0">
       Menampilkan {{ startRecord }}
-      hingga {{ endRecord }}
+      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>

app/composables/usePaginatedList.ts

@@ -5,15 +5,18 @@ import * as z from 'zod'
 
 // Default query schema yang bisa digunakan semua list
 export const defaultQuerySchema = z.object({
-  q: z.union([z.literal(''), z.string().min(3)]).optional().catch(''),
-  page: z.coerce.number().int().min(1).default(1).catch(1),
-  pageSize: z.coerce.number().int().min(5).max(20).default(10).catch(10),
+  search: z
+    .union([z.literal(''), z.string().min(3)])
+    .optional()
+    .catch(''),
+  'page-number': z.coerce.number().int().min(1).default(1).catch(1),
+  'page-size': z.coerce.number().int().min(5).max(20).default(10).catch(10),
 })
 
-export const defaultQueryParams = {
-  q: '',
-  page: 1,
-  pageSize: 10,
+export const defaultQueryParams: Record<string, any> = {
+  search: '',
+  'page-number': 1,
+  'page-size': 10,
 }
 
 export type DefaultQueryParams = z.infer<typeof defaultQuerySchema>
@@ -37,12 +40,7 @@ interface UsePaginatedListOptions<T = any> {
 }
 
 export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
-  const {
-    querySchema = defaultQuerySchema,
-    defaultQuery = defaultQueryParams,
-    fetchFn,
-    entityName,
-  } = options
+  const { querySchema = defaultQuerySchema, defaultQuery = defaultQueryParams, fetchFn, entityName } = options
 
   // State management
   const data = ref<T[]>([])
@@ -64,15 +62,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   // Pagination state - computed from URL params
   const paginationMeta = reactive<PaginationMeta>({
     recordCount: 0,
-    page: params.value.page,
-    pageSize: params.value.pageSize,
+    page: params.value['page-number'],
+    pageSize: params.value['page-size'],
     totalPage: 0,
     hasNext: false,
     hasPrev: false,
   })
 
   // Search model with debounce
-  const searchInput = ref(params.value.q || '')
+  const searchInput = ref(params.value.search || '')
   const debouncedSearch = refDebounced(searchInput, 500) // 500ms debounce
 
   // Functions
@@ -92,8 +90,8 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
         const pager = responseBody.meta
         // Update pagination meta from response
         paginationMeta.recordCount = pager.record_totalCount
-        paginationMeta.page = currentParams.page
-        paginationMeta.pageSize = currentParams.pageSize
+        paginationMeta.page = currentParams['page-number']
+        paginationMeta.pageSize = currentParams['page-size']
         paginationMeta.totalPage = Math.ceil(pager.record_totalCount / paginationMeta.pageSize)
         paginationMeta.hasNext = paginationMeta.page < paginationMeta.totalPage
         paginationMeta.hasPrev = paginationMeta.page > 1
@@ -113,32 +111,36 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
   // Handle pagination page change
   function handlePageChange(page: number) {
     // Update URL params - this will trigger watcher
-    queryParams.page = page
+    queryParams['page-number'] = page
   }
 
   // Handle search from header component
   function handleSearch(searchValue: string) {
     // Update URL params - this will trigger watcher and refetch data
-    queryParams.q = searchValue
-    queryParams.page = 1 // Reset to first page when searching
+    queryParams.search = searchValue
+    queryParams['page-number'] = 1 // Reset to first page when searching
   }
 
   // Watchers
   // Watch for URL param changes and trigger refetch
-  watch(params, (newParams) => {
-    // Sync search input with URL params (for back/forward navigation)
-    if (newParams.q !== searchInput.value) {
-      searchInput.value = newParams.q || ''
-    }
-    fetchData()
-  }, { deep: true })
+  watch(
+    params,
+    (newParams) => {
+      // Sync search input with URL params (for back/forward navigation)
+      if (newParams.search !== searchInput.value) {
+        searchInput.value = newParams.search || ''
+      }
+      fetchData()
+    },
+    { deep: true },
+  )
 
   // Watch debounced search and update URL params (keeping for backward compatibility)
   watch(debouncedSearch, (newValue) => {
     // Only search if 3+ characters or empty (to clear search)
     if (newValue.length === 0 || newValue.length >= 3) {
-      queryParams.q = newValue
-      queryParams.page = 1 // Reset to first page when searching
+      queryParams.search = newValue
+      queryParams['page-number'] = 1 // Reset to first page when searching
     }
   })
 
@@ -162,3 +164,15 @@ export function usePaginatedList<T = any>(options: UsePaginatedListOptions<T>) {
     handleSearch,
   }
 }
+
+export function transform(endpoint: string ,params: any): string {
+  const urlParams = new URLSearchParams()
+
+  Object.entries(params).forEach(([key, value]) => {
+    if (value) {
+      urlParams.append(key, value.toString())
+    }
+  })
+
+  return `${endpoint}?${urlParams.toString()}`
+}

app/pages/(features)/org-src/specialist/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'List Specialist',
+  contentFrame: 'cf-full-width',
+})
+
+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>
+  <div>
+    <div v-if="canRead">
+      <ContentSpecialistList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

app/pages/(features)/org-src/subspecialist/index.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+// import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+// import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  // middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'List Specialist',
+  contentFrame: 'cf-full-width',
+})
+
+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>
+  <div>
+    <div v-if="canRead">
+      <ContentSubspecialistList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>