Merge remote-tracking branch 'origin/dev' into fe-refactor-division-40

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/sep/entry-form.vue

@@ -0,0 +1,282 @@
+<script setup lang="ts">
+// helpers
+import { toTypedSchema } from '@vee-validate/zod'
+import { useForm } from 'vee-validate'
+import * as z from 'zod'
+// components
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { Label } from '~/components/pub/ui/label'
+import { Select } from '~/components/pub/ui/select'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+import { Textarea } from '~/components/pub/ui/textarea'
+import DatepickerSingle from '~/components/pub/custom-ui/form/datepicker-single.vue'
+
+const emit = defineEmits<{
+  (e: 'event', value: any): void
+}>()
+
+const items = [
+  { value: 'item-1', label: 'Item 1' },
+  { value: 'item-2', label: 'Item 2' },
+  { value: 'item-3', label: 'Item 3' },
+]
+
+// Validation schema
+const schema = z.object({
+  tanggalSep: z.string().min(1, 'Tanggal SEP wajib diisi'),
+  jalur: z.string().min(1, 'Pilih jalur'),
+  noBpjs: z.string().min(1, 'No. Kartu BPJS wajib diisi'),
+  noKtp: z.string().min(1, 'No. KTP wajib diisi'),
+  noRm: z.string().min(1, 'No. RM wajib diisi'),
+  namaPasien: z.string().min(1, 'Nama pasien wajib diisi'),
+  noTelp: z.string().min(1, 'Nomor telepon wajib diisi'),
+  noSuratKontrol: z.string().min(1, 'No. Surat Kontrol wajib diisi'),
+  tglSuratKontrol: z.string().min(1, 'Tanggal Surat Kontrol wajib diisi'),
+  klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
+  dpjp: z.string().min(1, 'DPJP wajib diisi'),
+  diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
+  cob: z.string().min(1, 'COB wajib diisi'),
+  katarak: z.string().min(1, 'Katarak wajib diisi'),
+  jenisProsedur: z.string().min(1, 'Jenis prosedur wajib diisi'),
+  kodePenunjang: z.string().min(1, 'Kode penunjang wajib diisi'),
+})
+
+const { handleSubmit, errors, defineField } = useForm({
+  validationSchema: toTypedSchema(schema),
+})
+
+// Bind fields
+const [tanggalSep] = defineField('tanggalSep')
+const [jalur] = defineField('jalur')
+const [noBpjs] = defineField('noBpjs')
+const [noKtp] = defineField('noKtp')
+const [noRm] = defineField('noRm')
+const [namaPasien] = defineField('namaPasien')
+const [noTelp] = defineField('noTelp')
+const [noSuratKontrol] = defineField('noSuratKontrol')
+const [tglSuratKontrol] = defineField('tglSuratKontrol')
+const [klinikTujuan] = defineField('klinikTujuan')
+const [dpjp] = defineField('dpjp')
+const [diagnosaAwal] = defineField('diagnosaAwal')
+const [cob] = defineField('cob')
+const [katarak] = defineField('katarak')
+const [jenisProsedur] = defineField('jenisProsedur')
+const [kodePenunjang] = defineField('kodePenunjang')
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', values)
+})
+</script>
+
+<template>
+  <div class="mx-auto w-full">
+    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
+      <!-- Tanggal SEP & Jalur -->
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label for="tanggalSep">Tanggal SEP<span class="text-red-500">*</span></Label>
+          <DatepickerSingle v-model="tanggalSep" placeholder="Pilih tanggal sep" />
+          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label for="jalur">Jalur</Label>
+          <Select icon-name="i-lucide-chevron-down" v-model="jalur" :items="items" placeholder="Pilih jalur"></Select>
+          <p v-if="errors.jalur" class="text-sm text-red-500">{{ errors.jalur }}</p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- Data Pasien -->
+      <div class="flex items-center gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <Button
+          variant="outline"
+          class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          @click="emit('event', 'search-patient')"
+        >
+          <Icon name="i-lucide-search" class="h-5 w-5" />
+          Cari Pasien
+        </Button>
+      </div>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>No. Kartu BPJS<span class="text-red-500">*</span></Label>
+          <Input v-model="noBpjs" />
+          <p v-if="errors.noBpjs" class="text-sm text-red-500">{{ errors.noBpjs }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. KTP<span class="text-red-500">*</span></Label>
+          <Input v-model="noKtp" />
+          <p v-if="errors.noKtp" class="text-sm text-red-500">{{ errors.noKtp }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. RM<span class="text-red-500">*</span></Label>
+          <Input v-model="noRm" />
+          <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Nama Pasien<span class="text-red-500">*</span></Label>
+          <Input v-model="namaPasien" />
+          <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>No. Telepon<span class="text-red-500">*</span></Label>
+          <Input v-model="noTelp" />
+          <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
+        </div>
+      </div>
+
+      <hr />
+
+      <!-- Data SEP -->
+      <h3 class="text-lg font-semibold">Data SEP</h3>
+      <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
+          <div class="flex gap-2">
+            <Input class="flex-1" v-model="noSuratKontrol" />
+            <Button
+              variant="outline"
+              class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+              @click="emit('event', 'search-letter')"
+            >
+              <Icon name="i-lucide-search" class="h-5 w-5" />
+              Cari Data
+            </Button>
+          </div>
+          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
+          <DatepickerSingle v-model="tglSuratKontrol" placeholder="Pilih tanggal surat kontrol" />
+          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
+        </div>
+        <div class="flex flex-row items-center gap-2">
+          <div class="flex-1">
+            <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+            <Select
+              icon-name="i-lucide-chevron-down"
+              v-model="klinikTujuan"
+              :items="items"
+              placeholder="Pilih klinik"
+            ></Select>
+            <p v-if="errors.klinikTujuan" class="text-sm text-red-500">{{ errors.klinikTujuan }}</p>
+          </div>
+          <div>
+            <Label class="mb-2 block">Klinik Eksekutif<span class="text-red-500">*</span></Label>
+            <RadioGroup v-model="cob" class="flex items-center gap-2">
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Ya" id="cob-ya" />
+                <Label for="cob-ya">Ya</Label>
+              </div>
+              <div class="flex items-center space-x-2">
+                <RadioGroupItem value="Tidak" id="cob-tidak" />
+                <Label for="cob-tidak">Tidak</Label>
+              </div>
+            </RadioGroup>
+          </div>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>DPJP<span class="text-red-500">*</span></Label>
+          <Select icon-name="i-lucide-chevron-down" v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
+          <p v-if="errors.dpjp" class="text-sm text-red-500">{{ errors.dpjp }}</p>
+        </div>
+        <div class="flex flex-col gap-2">
+          <Label>Diagnosa Awal<span class="text-red-500">*</span></Label>
+          <Input v-model="diagnosaAwal" />
+          <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
+        </div>
+      </div>
+
+      <!-- Catatan -->
+      <div>
+        <Label>Catatan</Label>
+        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
+      </div>
+
+      <div class="flex items-center gap-4">
+        <div>
+          <Label class="mb-2 block">COB<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="cob" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="cob-ya" />
+              <Label for="cob-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="cob-tidak" />
+              <Label for="cob-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+        <div>
+          <Label class="mb-2 block">Katarak<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="katarak" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Ya" id="katarak-ya" />
+              <Label for="katarak-ya">Ya</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="Tidak" id="katarak-tidak" />
+              <Label for="katarak-tidak">Tidak</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+
+      <div class="grid gap-4 md:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label class="mb-2 block">Jenis Prosedur<span class="text-red-500">*</span></Label>
+          <RadioGroup v-model="jenisProsedur" class="flex items-center gap-2">
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="procedure-one" id="procedure-one" />
+              <Label for="procedure-one">Prosedur tidak berkelanjutan</Label>
+            </div>
+            <div class="flex items-center space-x-2">
+              <RadioGroupItem value="procedure-two" id="procedure-two" />
+              <Label for="procedure-two">Prosedur dan terapi berkelanjutan</Label>
+            </div>
+          </RadioGroup>
+        </div>
+      </div>
+
+      <div class="grid gap-4 md:grid-cols-3">
+        <div class="flex flex-col gap-2">
+          <Label>Kode Penunjang<span class="text-red-500">*</span></Label>
+          <Select
+            icon-name="i-lucide-chevron-down"
+            v-model="kodePenunjang"
+            :items="items"
+            placeholder="Pilih Kode Penunjang"
+          ></Select>
+          <p v-if="errors.kodePenunjang" class="text-sm text-red-500">{{ errors.kodePenunjang }}</p>
+        </div>
+      </div>
+
+      <!-- Actions -->
+      <div class="mt-6 flex justify-end gap-2">
+        <Button
+          type="button"
+          variant="ghost"
+          class="h-[40px] min-w-[120px] text-green-600 hover:bg-green-50"
+          @click="emit('event', 'history-sep')"
+        >
+          <Icon name="i-lucide-history" class="h-5 w-5" /> Riwayat SEP
+        </Button>
+        <Button
+          type="button"
+          variant="outline"
+          class="h-[40px] min-w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50 hover:text-green-600"
+        >
+          <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
+        </Button>
+        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </div>
+    </form>
+  </div>
+</template>

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

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

app/components/app/sep/list.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const props = defineProps<{
+  data: SepData[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :rows="props.data"
+    :funcParsed="funcParsed"
+    :funcComponent="funcComponent"
+    :funcHtml="funcHtml"
+  />
+</template>

app/components/app/sep/table-history-sep.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Input } from '~/components/pub/ui/input'
+
+const props = defineProps<{
+  open: boolean
+  histories: Array<{
+    no_sep: string
+    tgl_sep: string
+    no_rujukan: string
+    diagnosis: string
+    pelayanan: string
+    kelas: string
+  }>
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+}>()
+
+const search = ref('')
+
+const filteredHistories = computed(() => {
+  const histories = props.histories || []
+  return histories.filter((p) => p.no_sep.includes(search.value))
+})
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>History SEP</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. SEP" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2">NO. SEP</th>
+              <th class="p-2">TGL. SEP</th>
+              <th class="p-2">NO. RUJUKAN</th>
+              <th class="p-2">DIAGNOSIS AWAL</th>
+              <th class="p-2">JENIS PELAYANAN</th>
+              <th class="p-2">KELAS RAWAT</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredHistories" :key="p.no_sep" class="border-t hover:bg-gray-50">
+              <td class="p-2">{{ p.no_sep }}</td>
+              <td class="p-2">{{ p.tgl_sep }}</td>
+              <td class="p-2">{{ p.no_rujukan }}</td>
+              <td class="p-2">{{ p.diagnosis }}</td>
+              <td class="p-2">{{ p.pelayanan }}</td>
+              <td class="p-2">{{ p.kelas }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/app/sep/table-search-letter.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  letters: Array<{
+    noSurat: string
+    tglRencana: string
+    noSep: string
+    namaPasien: string
+    noBpjs: string
+    klinik: string
+    dokter: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+
+const filteredLetters = computed(() => {
+  const letters = props.letters || []
+  return letters.filter((p) => p.noSurat.includes(search.value) || p.noSep.includes(search.value))
+})
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-[50%]">
+      <DialogHeader>
+        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2"></th>
+              <th class="p-2">NO. SURAT KONTROL</th>
+              <th class="p-2">TGL RENCANA KONTROL</th>
+              <th class="p-2">NO. SEP</th>
+              <th class="p-2">NAMA PASIEN</th>
+              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">KLINIK</th>
+              <th class="p-2">DOKTER</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredLetters" :key="p.noSurat" class="border-t hover:bg-gray-50">
+              <td class="p-2">
+                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
+                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
+                </RadioGroup>
+              </td>
+              <td class="p-2">{{ p.noSurat }}</td>
+              <td class="p-2">{{ p.tglRencana }}</td>
+              <td class="p-2">{{ p.noSep }}</td>
+              <td class="p-2">{{ p.namaPasien }}</td>
+              <td class="p-2">{{ p.noBpjs }}</td>
+              <td class="p-2">{{ p.klinik }}</td>
+              <td class="p-2">{{ p.dokter }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

app/components/app/sep/table-search-patient.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DialogFooter,
+} from '~/components/pub/ui/dialog'
+import { Button } from '~/components/pub/ui/button'
+import { Input } from '~/components/pub/ui/input'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+const props = defineProps<{
+  open: boolean
+  patients: Array<{
+    ktp: string
+    rm: string
+    bpjs: string
+    nama: string
+  }>
+  selected: string
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:open', value: boolean): void
+  (e: 'update:selected', value: string): void
+  (e: 'save'): void
+}>()
+
+const search = ref('')
+const filteredPatients = computed(() => {
+  const patients = props.patients || []
+  return patients.filter(
+    (p) =>
+      p.ktp.includes(search.value) ||
+      p.rm.includes(search.value) ||
+      p.bpjs.includes(search.value) ||
+      p.nama.toLowerCase().includes(search.value.toLowerCase()),
+  )
+})
+
+function saveSelection() {
+  emit('save')
+  emit('update:open', false)
+}
+</script>
+
+<template>
+  <Dialog :open="props.open" @update:open="emit('update:open', $event)">
+    <DialogTrigger as-child></DialogTrigger>
+    <DialogContent class="max-w-3xl">
+      <DialogHeader>
+        <DialogTitle>Cari Pasien</DialogTitle>
+      </DialogHeader>
+
+      <!-- Input Search -->
+      <div class="mb-2 max-w-[50%]">
+        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+      </div>
+
+      <!-- Table -->
+      <div class="overflow-x-auto rounded-lg border">
+        <table class="w-full text-sm">
+          <thead class="bg-gray-100">
+            <tr class="text-left">
+              <th class="p-2"></th>
+              <th class="p-2">NO. KTP</th>
+              <th class="p-2">NO. RM</th>
+              <th class="p-2">NO. KARTU BPJS</th>
+              <th class="p-2">NAMA PASIEN</th>
+            </tr>
+          </thead>
+          <tbody class="font-normal">
+            <tr v-for="p in filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
+              <td class="p-2">
+                <RadioGroup :model-value="props.selected" @update:model-value="emit('update:selected', $event)">
+                  <RadioGroupItem :id="p.ktp" :value="p.ktp" />
+                </RadioGroup>
+              </td>
+              <td class="p-2">{{ p.ktp }}</td>
+              <td class="p-2">{{ p.rm }}</td>
+              <td class="p-2">{{ p.bpjs }}</td>
+              <td class="p-2">{{ p.nama }}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+
+      <!-- Footer -->
+      <DialogFooter>
+        <Button variant="default" class="h-[40px] min-w-[120px] text-white" @click="saveSelection">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+</template>

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

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+import Block from '~/components/pub/custom-ui/form/block.vue'
+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'
+import { educationCodes, genderCodes, occupationCodes, religionCodes, relationshipCodes } from '~/lib/constants'
+import { mapToComboboxOptList } from '~/lib/utils'
+
+interface DivisionFormData {
+  name: string
+  code: string
+  parentId: string
+}
+
+const props = defineProps<{
+  division: {
+    msg: {
+      placeholder: string
+      search: string
+      empty: string
+    }
+  }
+  items: {
+    value: string
+    label: string
+    code: string
+  }[]
+  schema: any
+  initialValues?: Partial<DivisionFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  submit: [values: DivisionFormData, resetForm: () => void]
+  cancel: [resetForm: () => void]
+}>()
+
+const relationshipOpts = mapToComboboxOptList(relationshipCodes)
+const educationOpts = mapToComboboxOptList(educationCodes)
+const occupationOpts = mapToComboboxOptList(occupationCodes)
+const genderOpts = mapToComboboxOptList(genderCodes)
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: DivisionFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    parentId: values.parentId || '',
+  }
+  emit('submit', formData, resetForm)
+}
+</script>
+
+<template>
+  <Form
+    v-slot="{ handleSubmit, resetForm }"
+    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">
+          <Block>
+            <!-- Specialist -->
+            <FieldGroup :column="2">
+              <Label label-for="specialist_id">Specialist</Label>
+              <Field id="specialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="specialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="specialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+
+            <!-- Subpecialist -->
+            <FieldGroup :column="2">
+              <Label label-for="subspecialist_id">Subspecialist</Label>
+              <Field id="subspecialist_id" :errors="errors">
+                <FormField v-slot="{ componentField }" name="subspecialist_id">
+                  <FormItem>
+                    <FormControl>
+                      <Combobox id="subspecialist_id" v-bind="componentField" :items="genderOpts" />
+                    </FormControl>
+                    <FormMessage />
+                  </FormItem>
+                </FormField>
+              </Field>
+            </FieldGroup>
+          </Block>
+        </div>
+      </div>
+    </form>
+  </Form>
+</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>