From 7fdd5c61f0047bac315f7a9962c801163e5bd9be Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 28 Aug 2025 08:11:20 +0700
Subject: [PATCH 01/27] chore: modified gitignore and readme

---
 .gitignore | 147 ++++++-----------------------------------------------
 README.md  |   6 ++-
 2 files changed, 21 insertions(+), 132 deletions(-)

diff --git a/.gitignore b/.gitignore
index 9a5acedf..4a7f73a2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,139 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-lerna-debug.log*
 
-# Diagnostic reports (https://nodejs.org/api/report.html)
-report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+# Misc
+.DS_Store
+.fleet
+.idea
 
-# Runtime data
-pids
-*.pid
-*.seed
-*.pid.lock
-
-# Directory for instrumented libs generated by jscoverage/JSCover
-lib-cov
-
-# Coverage directory used by tools like istanbul
-coverage
-*.lcov
-
-# nyc test coverage
-.nyc_output
-
-# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
-.grunt
-
-# Bower dependency directory (https://bower.io/)
-bower_components
-
-# node-waf configuration
-.lock-wscript
-
-# Compiled binary addons (https://nodejs.org/api/addons.html)
-build/Release
-
-# Dependency directories
-node_modules/
-jspm_packages/
-
-# Snowpack dependency directory (https://snowpack.dev/)
-web_modules/
-
-# TypeScript cache
-*.tsbuildinfo
-
-# Optional npm cache directory
-.npm
-
-# Optional eslint cache
-.eslintcache
-
-# Optional stylelint cache
-.stylelintcache
-
-# Optional REPL history
-.node_repl_history
-
-# Output of 'npm pack'
-*.tgz
-
-# Yarn Integrity file
-.yarn-integrity
-
-# dotenv environment variable files
+# Local env files
 .env
 .env.*
 !.env.example
-
-# parcel-bundler cache (https://parceljs.org/)
-.cache
-.parcel-cache
-
-# Next.js build output
-.next
-out
-
-# Nuxt.js build / generate output
-.nuxt
-dist
-
-# Gatsby files
-.cache/
-# Comment in the public line in if your project uses Gatsby and not Next.js
-# https://nextjs.org/blog/next-9-1#public-directory-support
-# public
-
-# vuepress build output
-.vuepress/dist
-
-# vuepress v2.x temp and cache directory
-.temp
-.cache
-
-# Sveltekit cache directory
-.svelte-kit/
-
-# vitepress build output
-**/.vitepress/dist
-
-# vitepress cache directory
-**/.vitepress/cache
-
-# Docusaurus cache and generated files
-.docusaurus
-
-# Serverless directories
-.serverless/
-
-# FuseBox cache
-.fusebox/
-
-# DynamoDB Local files
-.dynamodb/
-
-# Firebase cache directory
-.firebase/
-
-# TernJS port file
-.tern-port
-
-# Stores VSCode versions used for testing VSCode extensions
-.vscode-test
-
-# yarn v3
-.pnp.*
-.yarn/*
-!.yarn/patches
-!.yarn/plugins
-!.yarn/releases
-!.yarn/sdks
-!.yarn/versions
-
-# Vite logs files
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*
diff --git a/README.md b/README.md
index 61992650..078e8c9a 100644
--- a/README.md
+++ b/README.md
@@ -1 +1,5 @@
-# simrs-fe
\ No newline at end of file
+# SIMRS - FE
+
+RSSA - Front End
+
+If you see this, the development is still not merged yet. Please check another branch.

From e6442a0d31912f3fdb862576fdb04f2a5bf99db1 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Tue, 9 Sep 2025 13:30:51 +0700
Subject: [PATCH 02/27] feat(sep): add list component

---
 app/components/app/sep/list-cfg.ts      |  78 +++++++++++++++
 app/components/app/sep/list.vue         |  34 +++++++
 app/components/content/sep/list.vue     | 121 ++++++++++++++++++++++++
 app/pages/(features)/bpjs/sep/index.vue |  40 ++++++++
 4 files changed, 273 insertions(+)
 create mode 100644 app/components/app/sep/list-cfg.ts
 create mode 100644 app/components/app/sep/list.vue
 create mode 100644 app/components/content/sep/list.vue
 create mode 100644 app/pages/(features)/bpjs/sep/index.vue

diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
new file mode 100644
index 00000000..013c7d6b
--- /dev/null
+++ b/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> = {}
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
new file mode 100644
index 00000000..25707062
--- /dev/null
+++ b/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>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
new file mode 100644
index 00000000..d8bf09aa
--- /dev/null
+++ b/app/components/content/sep/list.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+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 data = ref<SepData[]>([])
+
+// contoh data dummy
+const rows = [
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM23311224',
+    nama_pasien: 'Ahmad Baidowi',
+    no_kartu_bpjs: '334423231214',
+    no_surat_kontrol: 'SK22334442',
+    tgl_surat_kontrol: '13 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+    diagnosis_awal: 'C34.9 - Karsinoma Paru',
+  },
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001234',
+    nama_pasien: 'Kenzie',
+    no_kartu_bpjs: '12301234',
+    no_surat_kontrol: '123456',
+    tgl_surat_kontrol: '10 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Bronchitis',
+  },
+  {
+    tgl_sep: '11 Agustus 2025',
+    no_sep: 'SP23455667',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001009',
+    nama_pasien: 'Abraham Sulaiman',
+    no_kartu_bpjs: '334235',
+    no_surat_kontrol: '123334',
+    tgl_surat_kontrol: '11 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Paru-paru basah',
+  },
+]
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar SEP Prosedur',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => {},
+  },
+}
+
+async function getSepList() {
+  isLoading.dataListLoading = true
+  data.value = [...rows];
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getSepList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/bpjs/sep/index.vue b/app/pages/(features)/bpjs/sep/index.vue
new file mode 100644
index 00000000..7c527526
--- /dev/null
+++ b/app/pages/(features)/bpjs/sep/index.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+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 = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSepList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From 93f5ba009297d243605e35386860e0cd4e1fa9f5 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 12:56:34 +0700
Subject: [PATCH 03/27] feat(sep): add form entry

---
 app/components/app/equipment/entry-form.vue |   5 -
 app/components/app/sep/entry-form.vue       | 123 ++++++++++++++++++++
 app/components/content/sep/entry.vue        |  20 ++++
 app/components/content/sep/list.vue         |   6 +-
 app/pages/(features)/bpjs/sep/add.vue       |  41 +++++++
 5 files changed, 188 insertions(+), 7 deletions(-)
 create mode 100644 app/components/app/sep/entry-form.vue
 create mode 100644 app/components/content/sep/entry.vue
 create mode 100644 app/pages/(features)/bpjs/sep/add.vue

diff --git a/app/components/app/equipment/entry-form.vue b/app/components/app/equipment/entry-form.vue
index f54a8389..1fbaeba8 100644
--- a/app/components/app/equipment/entry-form.vue
+++ b/app/components/app/equipment/entry-form.vue
@@ -2,14 +2,9 @@
 // types
 import type z from 'zod'
 import type { MaterialFormData } from '~/schemas/material'
-<<<<<<< HEAD:app/components/app/equipment/entry-form.vue
-=======
 // helpers
 import { toTypedSchema } from '@vee-validate/zod'
 import { useForm } from 'vee-validate'
-// components
-import Label from '~/components/pub/custom-ui/form/label.vue'
->>>>>>> 266d5f740b15942ca7b8845c00573640fdc9a3b2:app/components/app/material/entry-form.vue
 
 interface Props {
   schema: z.ZodSchema<any>
diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
new file mode 100644
index 00000000..73ca08a5
--- /dev/null
+++ b/app/components/app/sep/entry-form.vue
@@ -0,0 +1,123 @@
+<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 { Card, CardContent, CardHeader, CardTitle } from '~/components/pub/ui/card'
+import { Select } from '~/components/pub/ui/select'
+import { Textarea } from '~/components/pub/ui/textarea'
+import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
+
+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'),
+  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'),
+  klinikTujuan: z.string().min(1, 'Klinik tujuan wajib diisi'),
+  diagnosaAwal: z.string().min(1, 'Diagnosa awal wajib diisi'),
+})
+
+const { handleSubmit, errors, defineField } = useForm({
+  validationSchema: toTypedSchema(schema),
+})
+
+// Bind fields
+const [tanggalSep] = defineField('tanggalSep')
+const [jalur] = defineField('jalur')
+const [noRm] = defineField('noRm')
+const [namaPasien] = defineField('namaPasien')
+const [noTelp] = defineField('noTelp')
+const [klinikTujuan] = defineField('klinikTujuan')
+const [diagnosaAwal] = defineField('diagnosaAwal')
+
+// Submit handler
+const onSubmit = handleSubmit((values) => {
+  console.log('✅ Validated form values:', values)
+})
+</script>
+
+<template>
+  <Card class="mx-auto w-full max-w-5xl">
+    <CardHeader>
+      <CardTitle></CardTitle>
+    </CardHeader>
+    <CardContent>
+      <form @submit.prevent="onSubmit" class="grid gap-6">
+        <!-- Tanggal SEP & Jalur -->
+        <div class="grid gap-4 md:grid-cols-2">
+          <div>
+            <Label for="tanggalSep">Tanggal SEP</Label>
+            <Input id="tanggalSep" type="date" v-model="tanggalSep" />
+            <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
+          </div>
+          <div>
+            <Label for="jalur">Jalur</Label>
+            <Select 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>
+
+        <!-- Data Pasien -->
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <div class="grid gap-4 md:grid-cols-2">
+          <div>
+            <Label>No. RM*</Label>
+            <Input v-model="noRm" />
+            <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
+          </div>
+          <div>
+            <Label>Nama Pasien*</Label>
+            <Input v-model="namaPasien" />
+            <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
+          </div>
+          <div>
+            <Label>No. Telepon*</Label>
+            <Input v-model="noTelp" />
+            <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
+          </div>
+        </div>
+
+        <!-- Data SEP -->
+        <h3 class="text-lg font-semibold">Data SEP</h3>
+        <div class="grid gap-4 md:grid-cols-2">
+          <div>
+            <Label>Klinik Tujuan*</Label>
+            <Select 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>Diagnosa Awal*</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 placeholder="Masukkan catatan opsional" />
+        </div>
+
+        <!-- Actions -->
+        <div class="mt-6 flex justify-end gap-4">
+          <Button type="button" variant="outline">Riwayat SEP</Button>
+          <Button type="button" variant="outline">Preview</Button>
+          <Button type="submit">Simpan</Button>
+        </div>
+      </form>
+    </CardContent>
+  </Card>
+</template>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
new file mode 100644
index 00000000..e858cc09
--- /dev/null
+++ b/app/components/content/sep/entry.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+
+const isLoading = ref(false)
+
+function onBack() {
+  navigateTo('/bpjs/sep')
+}
+
+async function onSubmit(data: any) {
+  console.log(data)
+}
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-panel-bottom" class="me-2" />
+    <span class="font-semibold">Tambah</span> SEP
+  </div>
+  <AppSepEntryForm />
+</template>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index d8bf09aa..8c52a816 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -91,13 +91,15 @@ const headerPrep: HeaderPrep = {
   icon: 'i-lucide-panel-bottom',
   addNav: {
     label: 'Tambah',
-    onClick: () => {},
+    onClick: () => {
+      navigateTo('/bpjs/sep/add')
+    },
   },
 }
 
 async function getSepList() {
   isLoading.dataListLoading = true
-  data.value = [...rows];
+  data.value = [...rows]
   isLoading.dataListLoading = false
 }
 
diff --git a/app/pages/(features)/bpjs/sep/add.vue b/app/pages/(features)/bpjs/sep/add.vue
new file mode 100644
index 00000000..87413fc5
--- /dev/null
+++ b/app/pages/(features)/bpjs/sep/add.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: [],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Tambah SEP',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = true // hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentSepEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>

From 93d13cf28cf7bd078d8b6c545f98f08f808f140f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 13:17:37 +0700
Subject: [PATCH 04/27] feat(sep): update form entry

---
 app/components/app/sep/entry-form.vue         | 171 +++++++++++-------
 .../pub/ui/select/SelectTrigger.vue           |   2 +-
 2 files changed, 103 insertions(+), 70 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 73ca08a5..d464abf9 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -7,10 +7,8 @@ import * as z from 'zod'
 import { Button } from '~/components/pub/ui/button'
 import { Input } from '~/components/pub/ui/input'
 import { Label } from '~/components/pub/ui/label'
-import { Card, CardContent, CardHeader, CardTitle } from '~/components/pub/ui/card'
 import { Select } from '~/components/pub/ui/select'
 import { Textarea } from '~/components/pub/ui/textarea'
-import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 
 const items = [
   { value: 'item-1', label: 'Item 1' },
@@ -22,10 +20,15 @@ const items = [
 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'),
 })
 
@@ -36,10 +39,15 @@ const { handleSubmit, errors, defineField } = useForm({
 // 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')
 
 // Submit handler
@@ -49,75 +57,100 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <Card class="mx-auto w-full max-w-5xl">
-    <CardHeader>
-      <CardTitle></CardTitle>
-    </CardHeader>
-    <CardContent>
-      <form @submit.prevent="onSubmit" class="grid gap-6">
-        <!-- Tanggal SEP & Jalur -->
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <Label for="tanggalSep">Tanggal SEP</Label>
-            <Input id="tanggalSep" type="date" v-model="tanggalSep" />
-            <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
-          </div>
-          <div>
-            <Label for="jalur">Jalur</Label>
-            <Select 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>
-
-        <!-- Data Pasien -->
-        <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <Label>No. RM*</Label>
-            <Input v-model="noRm" />
-            <p v-if="errors.noRm" class="text-sm text-red-500">{{ errors.noRm }}</p>
-          </div>
-          <div>
-            <Label>Nama Pasien*</Label>
-            <Input v-model="namaPasien" />
-            <p v-if="errors.namaPasien" class="text-sm text-red-500">{{ errors.namaPasien }}</p>
-          </div>
-          <div>
-            <Label>No. Telepon*</Label>
-            <Input v-model="noTelp" />
-            <p v-if="errors.noTelp" class="text-sm text-red-500">{{ errors.noTelp }}</p>
-          </div>
-        </div>
-
-        <!-- Data SEP -->
-        <h3 class="text-lg font-semibold">Data SEP</h3>
-        <div class="grid gap-4 md:grid-cols-2">
-          <div>
-            <Label>Klinik Tujuan*</Label>
-            <Select 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>Diagnosa Awal*</Label>
-            <Input v-model="diagnosaAwal" />
-            <p v-if="errors.diagnosaAwal" class="text-sm text-red-500">{{ errors.diagnosaAwal }}</p>
-          </div>
-        </div>
-
-        <!-- Catatan -->
+  <div class="mx-auto w-full p-4">
+    <form @submit.prevent="onSubmit" class="grid gap-6">
+      <!-- Tanggal SEP & Jalur -->
+      <div class="grid gap-4 md:grid-cols-3">
         <div>
-          <Label>Catatan</Label>
-          <Textarea placeholder="Masukkan catatan opsional" />
+          <Label for="tanggalSep">Tanggal SEP</Label>
+          <Input id="tanggalSep" type="date" v-model="tanggalSep" />
+          <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
+        <div>
+          <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>
 
-        <!-- Actions -->
-        <div class="mt-6 flex justify-end gap-4">
-          <Button type="button" variant="outline">Riwayat SEP</Button>
-          <Button type="button" variant="outline">Preview</Button>
-          <Button type="submit">Simpan</Button>
+      <!-- Data Pasien -->
+      <div class="flex gap-2">
+        <h3 class="text-lg font-semibold">Data Pasien</h3>
+        <Button variant="outline" class="rounded-full border-green-600 text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-search" class="h-4 w-4 mr-2" />
+          Cari Data
+        </Button>
+      </div>
+      <div class="grid gap-4 md:grid-cols-3">
+        <div>
+          <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>
-      </form>
-    </CardContent>
-  </Card>
+        <div>
+          <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>
+          <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>
+          <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>
+          <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>
+
+      <!-- Data SEP -->
+      <h3 class="text-lg font-semibold">Data SEP</h3>
+      <div class="grid gap-4 md:grid-cols-3">
+        <div>
+          <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
+          <Input v-model="noSuratKontrol" />
+          <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
+        </div>
+        <div>
+          <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
+          <Input v-model="tglSuratKontrol" />
+          <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
+        </div>
+        <div>
+          <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
+          <Select 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>DPJP<span class="text-red-500">*</span></Label>
+          <Select 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>
+          <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 placeholder="Masukkan catatan opsional" />
+      </div>
+
+      <!-- Actions -->
+      <div class="mt-6 flex justify-end gap-4">
+        <Button type="button" variant="outline">Riwayat SEP</Button>
+        <Button type="button" variant="outline">Preview</Button>
+        <Button type="submit">Simpan</Button>
+      </div>
+    </form>
+  </div>
 </template>
diff --git a/app/components/pub/ui/select/SelectTrigger.vue b/app/components/pub/ui/select/SelectTrigger.vue
index eb4c6b0f..6cb99609 100644
--- a/app/components/pub/ui/select/SelectTrigger.vue
+++ b/app/components/pub/ui/select/SelectTrigger.vue
@@ -28,7 +28,7 @@ const iconName = computed(() => props.iconName || 'i-radix-icons-caret-sort')
   >
     <slot />
     <SelectIcon as-child class="absolute right-3 top-1/2 -translate-y-1/2">
-      <Icon name="i-radix-icons-caret-sort" class="h-4 w-4 opacity-50" />
+      <Icon :name="iconName" class="h-4 w-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

From 1f335f671dcb706e8cbba6263160c85d6d081b61 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 13:37:03 +0700
Subject: [PATCH 05/27] feat(sep): modify form entry with radio input

---
 app/components/app/sep/entry-form.vue | 92 +++++++++++++++++++++------
 1 file changed, 73 insertions(+), 19 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index d464abf9..d1848e6c 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -8,6 +8,7 @@ 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'
 
 const items = [
@@ -30,6 +31,8 @@ const schema = z.object({
   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'),
 })
 
 const { handleSubmit, errors, defineField } = useForm({
@@ -49,6 +52,8 @@ const [tglSuratKontrol] = defineField('tglSuratKontrol')
 const [klinikTujuan] = defineField('klinikTujuan')
 const [dpjp] = defineField('dpjp')
 const [diagnosaAwal] = defineField('diagnosaAwal')
+const [cob] = defineField('cob')
+const [katarak] = defineField('katarak')
 
 // Submit handler
 const onSubmit = handleSubmit((values) => {
@@ -61,84 +66,133 @@ const onSubmit = handleSubmit((values) => {
     <form @submit.prevent="onSubmit" class="grid gap-6">
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
-        <div>
+        <div class="flex flex-col gap-2">
           <Label for="tanggalSep">Tanggal SEP</Label>
           <Input id="tanggalSep" type="date" v-model="tanggalSep" />
           <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
-        <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 gap-2">
+      <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="rounded-full border-green-600 text-green-600 hover:bg-green-50">
-          <Icon name="i-lucide-search" class="h-4 w-4 mr-2" />
-          Cari Data
+        <Button variant="outline" class="rounded-</Button>md border-green-600 text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+          Cari Pasien
         </Button>
       </div>
       <div class="grid gap-4 md:grid-cols-3">
-        <div>
+        <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>
+        <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>
+        <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>
+        <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>
+        <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 gap-4 md:grid-cols-3">
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>No. Surat Kontrol<span class="text-red-500">*</span></Label>
-          <Input v-model="noSuratKontrol" />
+          <div class="flex gap-2">
+            <Input class="flex-1" v-model="noSuratKontrol" />
+            <Button
+              variant="outline"
+              class="rounded-</Button>md h-[40px] border-green-600 text-green-600 hover:bg-green-50"
+            >
+              <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+              Cari Data
+            </Button>
+          </div>
           <p v-if="errors.noSuratKontrol" class="text-sm text-red-500">{{ errors.noSuratKontrol }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
           <Input v-model="tglSuratKontrol" />
           <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
         </div>
-        <div>
+        <div class="flex flex-col gap-2">
           <Label>Klinik Tujuan<span class="text-red-500">*</span></Label>
-          <Select v-model="klinikTujuan" :items="items" placeholder="Pilih klinik"></Select>
+          <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>
+        <div class="flex flex-col gap-2">
           <Label>DPJP<span class="text-red-500">*</span></Label>
-          <Select v-model="dpjp" :items="items" placeholder="Pilih DPJP"></Select>
+          <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>
+        <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>
 
+      <hr />
+
+      <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>
+
       <!-- Catatan -->
       <div>
         <Label>Catatan</Label>

From 32544e9b0b344efaef5b12c2bd355f08092bf50a Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 14:04:34 +0700
Subject: [PATCH 06/27] feat(sep): modify form entry with support code input

---
 app/components/app/sep/entry-form.vue | 41 +++++++++++++++++++++++----
 1 file changed, 36 insertions(+), 5 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index d1848e6c..ae82c741 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -33,6 +33,8 @@ const schema = z.object({
   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({
@@ -54,6 +56,8 @@ 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) => {
@@ -162,7 +166,11 @@ const onSubmit = handleSubmit((values) => {
         </div>
       </div>
 
-      <hr />
+      <!-- Catatan -->
+      <div>
+        <Label>Catatan</Label>
+        <Textarea placeholder="Masukkan catatan opsional" />
+      </div>
 
       <div class="flex items-center gap-4">
         <div>
@@ -193,10 +201,33 @@ const onSubmit = handleSubmit((values) => {
         </div>
       </div>
 
-      <!-- Catatan -->
-      <div>
-        <Label>Catatan</Label>
-        <Textarea placeholder="Masukkan catatan opsional" />
+      <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 -->

From 582bd67cbe224f6b79dd92dbd823250ee2085f74 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 14:37:54 +0700
Subject: [PATCH 07/27] feat(sep): modify form entry with calendar select

---
 app/components/app/sep/entry-form.vue         | 40 +++++++++++++------
 .../pub/custom-ui/form/datepicker-single.vue  | 32 +++++++++++++++
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  7 ++++
 4 files changed, 68 insertions(+), 12 deletions(-)
 create mode 100644 app/components/pub/custom-ui/form/datepicker-single.vue

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index ae82c741..1b546322 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -10,6 +10,7 @@ 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 items = [
   { value: 'item-1', label: 'Item 1' },
@@ -72,7 +73,7 @@ const onSubmit = handleSubmit((values) => {
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
           <Label for="tanggalSep">Tanggal SEP</Label>
-          <Input id="tanggalSep" type="date" v-model="tanggalSep" />
+          <DatepickerSingle v-model="tanggalSep" />
           <p v-if="errors.tanggalSep" class="text-sm text-red-500">{{ errors.tanggalSep }}</p>
         </div>
         <div class="flex flex-col gap-2">
@@ -87,7 +88,7 @@ const onSubmit = handleSubmit((values) => {
       <!-- Data Pasien -->
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="rounded-</Button>md border-green-600 text-green-600 hover:bg-green-50">
+        <Button variant="outline" class="rounded-md border-green-600 text-green-600 hover:bg-green-50">
           <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
           Cari Pasien
         </Button>
@@ -144,15 +145,30 @@ const onSubmit = handleSubmit((values) => {
           <Input v-model="tglSuratKontrol" />
           <p v-if="errors.tglSuratKontrol" class="text-sm text-red-500">{{ errors.tglSuratKontrol }}</p>
         </div>
-        <div class="flex flex-col gap-2">
-          <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 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>
@@ -169,7 +185,7 @@ const onSubmit = handleSubmit((values) => {
       <!-- Catatan -->
       <div>
         <Label>Catatan</Label>
-        <Textarea placeholder="Masukkan catatan opsional" />
+        <Textarea class="h-[200px] w-full border-gray-400 bg-white" placeholder="Masukkan catatan opsional" />
       </div>
 
       <div class="flex items-center gap-4">
diff --git a/app/components/pub/custom-ui/form/datepicker-single.vue b/app/components/pub/custom-ui/form/datepicker-single.vue
new file mode 100644
index 00000000..6904b662
--- /dev/null
+++ b/app/components/pub/custom-ui/form/datepicker-single.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+// helpers
+import { format } from 'date-fns'
+// icons
+import { Calendar as CalendarIcon } from 'lucide-vue-next'
+// components
+import { Button } from '~/components/pub/ui/button'
+import { Calendar } from '~/components/pub/ui/calendar'
+import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
+
+const date = ref<Date | undefined>(undefined)
+</script>
+
+<template>
+  <div class="flex flex-col space-y-2">
+    <Popover>
+      <PopoverTrigger as-child>
+        <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
+          <div class="flex justify-between items-center w-full">
+            <p v-if="date">{{ format(date, 'PPP') }}</p>
+            <p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
+            <CalendarIcon class="h-4 w-4 ml-2" />
+          </div>
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent class="w-auto p-0">
+        <Calendar mode="single" />
+      </PopoverContent>
+    </Popover>
+    <p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
+  </div>
+</template>
diff --git a/package.json b/package.json
index 905dee25..d415abde 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@radix-icons/vue": "^1.0.0",
     "@unovis/ts": "^1.5.1",
     "@unovis/vue": "^1.5.1",
+    "date-fns": "^4.1.0",
     "embla-carousel": "^8.5.2",
     "embla-carousel-vue": "^8.5.2",
     "h3": "^1.15.4",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bcbed231..36169ffb 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ dependencies:
   '@unovis/vue':
     specifier: ^1.5.1
     version: 1.5.2(@unovis/ts@1.5.2)(vue@3.5.18)
+  date-fns:
+    specifier: ^4.1.0
+    version: 4.1.0
   embla-carousel:
     specifier: ^8.5.2
     version: 8.6.0
@@ -6124,6 +6127,10 @@ packages:
     engines: {node: '>= 12'}
     dev: true
 
+  /date-fns@4.1.0:
+    resolution: {integrity: sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==}
+    dev: false
+
   /db0@0.3.2:
     resolution: {integrity: sha512-xzWNQ6jk/+NtdfLyXEipbX55dmDSeteLFt/ayF+wZUU5bzKgmrDOxmInUTbyVRp46YwnJdkDA1KhB7WIXFofJw==}
     peerDependencies:

From fb8fde65d5c178110f5bc735076510b15a7c6ffb Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 15:19:40 +0700
Subject: [PATCH 08/27] feat(sep): update datepicker component

---
 app/components/app/sep/entry-form.vue         |  6 ++--
 .../pub/custom-ui/form/datepicker-single.vue  | 36 ++++++++++++++++---
 2 files changed, 35 insertions(+), 7 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 1b546322..458c070f 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -72,8 +72,8 @@ const onSubmit = handleSubmit((values) => {
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
-          <Label for="tanggalSep">Tanggal SEP</Label>
-          <DatepickerSingle v-model="tanggalSep" />
+          <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">
@@ -142,7 +142,7 @@ const onSubmit = handleSubmit((values) => {
         </div>
         <div class="flex flex-col gap-2">
           <Label>Tanggal Surat Kontrol<span class="text-red-500">*</span></Label>
-          <Input v-model="tglSuratKontrol" />
+          <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">
diff --git a/app/components/pub/custom-ui/form/datepicker-single.vue b/app/components/pub/custom-ui/form/datepicker-single.vue
index 6904b662..d866bbdf 100644
--- a/app/components/pub/custom-ui/form/datepicker-single.vue
+++ b/app/components/pub/custom-ui/form/datepicker-single.vue
@@ -8,7 +8,36 @@ import { Button } from '~/components/pub/ui/button'
 import { Calendar } from '~/components/pub/ui/calendar'
 import { Popover, PopoverContent, PopoverTrigger } from '~/components/pub/ui/popover'
 
-const date = ref<Date | undefined>(undefined)
+const props = defineProps<{
+  placeholder?: string
+  modelValue?: Date | string | undefined
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: Date | string | undefined]
+}>()
+
+const date = ref<Date | any>(undefined)
+
+// Sync prop to local state
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (value instanceof Date) {
+      date.value = value
+    } else if (typeof value === 'string' && value) {
+      date.value = value
+    } else {
+      date.value = undefined
+    }
+  },
+  { immediate: true }
+)
+
+watch(date, (value) => {
+  const newValue = format(value, 'yyyy-MM-dd')
+  emit('update:modelValue', newValue)
+})
 </script>
 
 <template>
@@ -18,15 +47,14 @@ const date = ref<Date | undefined>(undefined)
         <Button variant="outline" class="bg-white border-gray-400 font-normal text-right h-[40px] w-full">
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP') }}</p>
-            <p v-else class="text-sm text-black text-opacity-80">Tanggal</p>
+            <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
             <CalendarIcon class="h-4 w-4 ml-2" />
           </div>
         </Button>
       </PopoverTrigger>
       <PopoverContent class="w-auto p-0">
-        <Calendar mode="single" />
+        <Calendar v-model="date" mode="single" />
       </PopoverContent>
     </Popover>
-    <p v-if="date" class="text-sm text-black text-opacity-80">{{ format(date, 'PPP') }}</p>
   </div>
 </template>

From 9d58eae1bfa9309533e607af9baf64691ababb37 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Wed, 10 Sep 2025 15:48:48 +0700
Subject: [PATCH 09/27] feat(sep): change to update value from datepicker

---
 app/components/app/sep/entry-form.vue         | 34 ++++++++++++-------
 .../pub/custom-ui/form/datepicker-single.vue  | 34 ++++++++-----------
 2 files changed, 36 insertions(+), 32 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 458c070f..76880554 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -67,8 +67,8 @@ const onSubmit = handleSubmit((values) => {
 </script>
 
 <template>
-  <div class="mx-auto w-full p-4">
-    <form @submit.prevent="onSubmit" class="grid gap-6">
+  <div class="mx-auto w-full">
+    <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
       <!-- Tanggal SEP & Jalur -->
       <div class="grid gap-4 md:grid-cols-3">
         <div class="flex flex-col gap-2">
@@ -88,8 +88,8 @@ const onSubmit = handleSubmit((values) => {
       <!-- Data Pasien -->
       <div class="flex items-center gap-2">
         <h3 class="text-lg font-semibold">Data Pasien</h3>
-        <Button variant="outline" class="rounded-md border-green-600 text-green-600 hover:bg-green-50">
-          <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+        <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
+          <Icon name="i-lucide-search" class="h-5 w-5" />
           Cari Pasien
         </Button>
       </div>
@@ -130,11 +130,8 @@ const onSubmit = handleSubmit((values) => {
           <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="rounded-</Button>md h-[40px] border-green-600 text-green-600 hover:bg-green-50"
-            >
-              <Icon name="i-lucide-search" class="mr-1 h-4 w-4" />
+            <Button variant="outline" class="h-[40px] rounded-md border-green-600 text-green-600 hover:bg-green-50">
+              <Icon name="i-lucide-search" class="h-5 w-5" />
               Cari Data
             </Button>
           </div>
@@ -247,10 +244,21 @@ const onSubmit = handleSubmit((values) => {
       </div>
 
       <!-- Actions -->
-      <div class="mt-6 flex justify-end gap-4">
-        <Button type="button" variant="outline">Riwayat SEP</Button>
-        <Button type="button" variant="outline">Preview</Button>
-        <Button type="submit">Simpan</Button>
+      <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">
+          <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] text-white min-w-[120px]">
+          <Icon name="i-lucide-save" class="h-5 w-5" />
+          Simpan
+        </Button>
       </div>
     </form>
   </div>
diff --git a/app/components/pub/custom-ui/form/datepicker-single.vue b/app/components/pub/custom-ui/form/datepicker-single.vue
index d866bbdf..7e628404 100644
--- a/app/components/pub/custom-ui/form/datepicker-single.vue
+++ b/app/components/pub/custom-ui/form/datepicker-single.vue
@@ -1,8 +1,6 @@
 <script setup lang="ts">
 // helpers
-import { format } from 'date-fns'
-// icons
-import { Calendar as CalendarIcon } from 'lucide-vue-next'
+import { format, parseISO } from 'date-fns'
 // components
 import { Button } from '~/components/pub/ui/button'
 import { Calendar } from '~/components/pub/ui/calendar'
@@ -19,25 +17,23 @@ const emit = defineEmits<{
 
 const date = ref<Date | any>(undefined)
 
-// Sync prop to local state
-watch(
-  () => props.modelValue,
-  (value) => {
-    if (value instanceof Date) {
-      date.value = value
-    } else if (typeof value === 'string' && value) {
-      date.value = value
-    } else {
-      date.value = undefined
-    }
-  },
-  { immediate: true }
-)
-
 watch(date, (value) => {
   const newValue = format(value, 'yyyy-MM-dd')
   emit('update:modelValue', newValue)
 })
+
+onMounted(() => {
+  if (props.modelValue) {
+    const value = props.modelValue
+    if (value instanceof Date) {
+      date.value = value
+    } else if (typeof value === 'string' && value) {
+      date.value = parseISO(value)
+    } else {
+      date.value = undefined
+    }
+  }
+})
 </script>
 
 <template>
@@ -48,7 +44,7 @@ watch(date, (value) => {
           <div class="flex justify-between items-center w-full">
             <p v-if="date">{{ format(date, 'PPP') }}</p>
             <p v-else class="text-sm text-black text-opacity-50">{{ props.placeholder || 'Tanggal' }}</p>
-            <CalendarIcon class="h-4 w-4 ml-2" />
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
           </div>
         </Button>
       </PopoverTrigger>

From 140bfa0420ef394d583b978e7a71ca2d480df81e Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 11 Sep 2025 10:13:40 +0700
Subject: [PATCH 10/27] init specialist feature

---
 app/components/app/specialist/entry-form.vue  | 124 ++++++++++
 app/components/app/specialist/list-cfg.ts     |  68 ++++++
 app/components/app/specialist/list.vue        |  36 +++
 app/components/content/specialist/entry.ts    |  37 +++
 app/components/content/specialist/list.vue    | 220 ++++++++++++++++++
 .../(features)/org-src/specialist/index.vue   |  41 ++++
 6 files changed, 526 insertions(+)
 create mode 100644 app/components/app/specialist/entry-form.vue
 create mode 100644 app/components/app/specialist/list-cfg.ts
 create mode 100644 app/components/app/specialist/list.vue
 create mode 100644 app/components/content/specialist/entry.ts
 create mode 100644 app/components/content/specialist/list.vue
 create mode 100644 app/pages/(features)/org-src/specialist/index.vue

diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
new file mode 100644
index 00000000..0b3a0049
--- /dev/null
+++ b/app/components/app/specialist/entry-form.vue
@@ -0,0 +1,124 @@
+<script setup lang="ts">
+import type { FormErrors } from '~/types/error'
+import { toTypedSchema } from '@vee-validate/zod'
+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 Select from '~/components/pub/custom-ui/form/select.vue'
+
+interface InstallationFormData {
+  name: string
+  code: string
+  encounterClassCode: string
+}
+
+const props = defineProps<{
+  installation: {
+    msg: {
+      placeholder: string
+    }
+    items: {
+      value: string
+      label: string
+      code: string
+    }[]
+  }
+  schema: any
+  initialValues?: Partial<InstallationFormData>
+  errors?: FormErrors
+}>()
+
+const emit = defineEmits<{
+  'submit': [values: InstallationFormData, resetForm: () => void]
+  'cancel': [resetForm: () => void]
+}>()
+
+const formSchema = toTypedSchema(props.schema)
+
+// Form submission handler
+function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
+  const formData: InstallationFormData = {
+    name: values.name || '',
+    code: values.code || '',
+    encounterClassCode: values.encounterClassCode || '',
+  }
+  emit('submit', formData, resetForm)
+}
+
+// Form cancel handler
+function onCancelForm({ resetForm }: { resetForm: () => void }) {
+  emit('cancel', 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">
+          <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 instalasi" 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 instalasi" autocomplete="off" v-bind="componentField" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              </FormField>
+            </Field>
+          </FieldGroup>
+
+          <FieldGroup>
+            <Label label-for="parentId">Encounter Class</Label>
+            <Field id="encounterClassCode" :errors="errors">
+              <FormField v-slot="{ componentField }" name="encounterClassCode">
+                <FormItem>
+                  <FormControl>
+                    <Select
+                      v-bind="componentField"
+                      :items="installation.items"
+                      :placeholder="installation.msg.placeholder"
+                    />
+
+                  </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>
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
new file mode 100644
index 00000000..6b8dc5ea
--- /dev/null
+++ b/app/components/app/specialist/list-cfg.ts
@@ -0,0 +1,68 @@
+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: 'Encounter Class' }, { 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()
+  },
+  identity_number: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
+      return '(TANPA NIK)'
+    }
+    return recX.identity_number
+  },
+  inPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+  outPatient_itemPrice: (rec: unknown): unknown => {
+    const recX = rec as SmallDetailDto
+    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
+  },
+}
+
+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 = {
+  patient_address(_rec) {
+    return '-'
+  },
+}
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
new file mode 100644
index 00000000..a6b19eb2
--- /dev/null
+++ b/app/components/app/specialist/list.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
+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"
+/>
+
+    <!-- Data info and pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
+
+  </div>
+</template>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
new file mode 100644
index 00000000..c003a029
--- /dev/null
+++ b/app/components/content/specialist/entry.ts
@@ -0,0 +1,37 @@
+import * as z from 'zod'
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih encounter class (fhir7)',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+    { value: '4', label: 'Observation', code: 'OBSENC' },
+    { value: '5', label: 'Pre-admission', code: 'PRENC' },
+    { value: '6', label: 'Short Stay', code: 'SS' },
+    { value: '7', label: 'Virtual', code: 'VR' },
+    { value: '8', label: 'Home Health', code: 'HH' },
+  ],
+}
+
+export const schemaConf = z.object({
+  name: z
+    .string({
+      required_error: 'Nama instalasi harus diisi',
+    })
+    .min(3, 'Nama instalasi minimal 3 karakter'),
+
+  code: z
+    .string({
+      required_error: 'Kode instalasi harus diisi',
+    })
+    .min(3, 'Kode instalasi minimal 3 karakter'),
+
+  encounterClassCode: z
+    .string({
+      required_error: 'Kelompok encounter class harus dipilih',
+    })
+    .min(1, 'Kelompok encounter class harus dipilih'),
+})
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
new file mode 100644
index 00000000..01a05baf
--- /dev/null
+++ b/app/components/content/specialist/list.vue
@@ -0,0 +1,220 @@
+<script setup lang="ts">
+import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
+import AppInstallationEntryForm from '~/components/app/installation/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 { installationConf, schemaConf } 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)
+
+// 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()}`)
+}
+
+// Menggunakan composable untuk pagination
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationList,
+} = usePaginatedList({
+  fetchFn: fetchInstallationData,
+  entityName: 'installation',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi',
+  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 Instalasi',
+    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 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 getInstallationList()
+
+    // 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
+  }
+}
+
+// #endregion region
+
+// #region Form event handlers
+
+function onCancelForm(resetForm: () => void) {
+  isFormEntryDialogOpen.value = false
+  setTimeout(() => {
+    resetForm()
+  }, 500)
+}
+
+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
+
+    // Refresh data after successful submission
+    await getInstallationList()
+
+    // 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
+  }
+})
+
+// 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
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
+    <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"
+        :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
+        @cancel="onCancelForm"
+/>
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <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>
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
new file mode 100644
index 00000000..d6e30dfd
--- /dev/null
+++ b/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 Unit',
+  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">
+      <ContentUnitList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>

From bbb0ac03d4b699c95c2700182842aa12b769b1ec Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 13:26:32 +0700
Subject: [PATCH 11/27] feat(sep): create filter patient + sep

---
 app/components/app/sep/entry-form.vue     |   6 +-
 app/components/app/sep/search-letter.vue  | 103 ++++++++++++++++++++++
 app/components/app/sep/search-patient.vue | 103 ++++++++++++++++++++++
 app/components/content/sep/entry.vue      |  56 ++++++++++--
 4 files changed, 261 insertions(+), 7 deletions(-)
 create mode 100644 app/components/app/sep/search-letter.vue
 create mode 100644 app/components/app/sep/search-patient.vue

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 76880554..04ed4a30 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -12,6 +12,10 @@ 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' },
@@ -88,7 +92,7 @@ const onSubmit = handleSubmit((values) => {
       <!-- 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">
+        <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>
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/search-letter.vue
new file mode 100644
index 00000000..fb240ee0
--- /dev/null
+++ b/app/components/app/sep/search-letter.vue
@@ -0,0 +1,103 @@
+<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(() =>
+  props.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>
+      <Button>Cari Pasien</Button>
+    </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>
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/search-patient.vue
new file mode 100644
index 00000000..fb240ee0
--- /dev/null
+++ b/app/components/app/sep/search-patient.vue
@@ -0,0 +1,103 @@
+<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(() =>
+  props.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>
+      <Button>Cari Pasien</Button>
+    </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>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index e858cc09..0e8eb18c 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,13 +1,56 @@
 <script setup lang="ts">
-
 const isLoading = ref(false)
+const open = ref(false)
+const selected = ref('3456512345678880')
 
-function onBack() {
-  navigateTo('/bpjs/sep')
+const patients = [
+  {
+    ktp: '3456512345678880',
+    rm: 'RM23311224',
+    bpjs: '334423213214',
+    nama: 'Ahmad Baidowi',
+  },
+  {
+    ktp: '345678804565123',
+    rm: 'RM23455667',
+    bpjs: '33442367656',
+    nama: 'Bian Maulana',
+  },
+]
+
+const letters = [
+  {
+    noSurat: "SK22334442",
+    tglRencana: "12 Agustus 2025",
+    noSep: "SEP3232332",
+    namaPasien: "Ahmad Baidowi",
+    noBpjs: "33442331214",
+    klinik: "Penyakit Dalam",
+    dokter: "dr. Andi Prasetyo, Sp.PD-KHOM",
+  },
+  {
+    noSurat: "SK99120039",
+    tglRencana: "12 Agustus 2025",
+    noSep: "SEP4443232",
+    namaPasien: "Bian Maulana",
+    noBpjs: "33442367656",
+    klinik: "Gigi",
+    dokter: "dr. Achmad Suparjo",
+  },
+]
+
+
+function handleSave() {
+  console.log('Pasien dipilih:', selected.value)
 }
 
-async function onSubmit(data: any) {
-  console.log(data)
+function handleEvent(value: string) {
+  if (value === 'search-patient') {
+    open.value = true
+    return
+  } else if (value === 'back') {
+    navigateTo('/bpjs/sep')
+  }
 }
 </script>
 
@@ -16,5 +59,6 @@ async function onSubmit(data: any) {
     <Icon name="i-lucide-panel-bottom" class="me-2" />
     <span class="font-semibold">Tambah</span> SEP
   </div>
-  <AppSepEntryForm />
+  <AppSepEntryForm @event="handleEvent" />
+  <AppSepSearchPatient v-model:open="open" v-model:selected="selected" :patients="patients" @save="handleSave" />
 </template>

From 26b0cf12e375c928a7c81254bde7d678ef5ab98b Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 11 Sep 2025 13:28:07 +0700
Subject: [PATCH 12/27] refactor(api): consolidate query param transformation
 into utility function

Move URL parameter construction logic from multiple list components to a shared transform function in usePaginatedList. This improves code reuse and maintainability while keeping the same functionality.

Standardize query parameter names to match backend expectations ('page-number' and 'page-size' instead of 'page' and 'pageSize'). Update related schema and default params accordingly.
---
 app/components/content/division/list.vue     | 14 +---
 app/components/content/equipment/list.vue    | 27 ++-----
 app/components/content/installation/list.vue | 26 ++-----
 app/components/content/specialist/list.vue   | 26 ++-----
 app/components/content/tools/list.vue        | 14 +---
 app/components/content/unit/list.vue         | 14 +---
 app/composables/usePaginatedList.ts          | 74 ++++++++++++--------
 7 files changed, 70 insertions(+), 125 deletions(-)

diff --git a/app/components/content/division/list.vue b/app/components/content/division/list.vue
index f4bf78e6..f6a3efc7 100644
--- a/app/components/content/division/list.vue
+++ b/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
diff --git a/app/components/content/equipment/list.vue b/app/components/content/equipment/list.vue
index 61d2a0b0..4c82ed92 100644
--- a/app/components/content/equipment/list.vue
+++ b/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>
diff --git a/app/components/content/installation/list.vue b/app/components/content/installation/list.vue
index 01a05baf..5ecf55f7 100644
--- a/app/components/content/installation/list.vue
+++ b/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>
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 01a05baf..04125aa1 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -18,19 +18,9 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 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 +182,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>
diff --git a/app/components/content/tools/list.vue b/app/components/content/tools/list.vue
index 580dda40..b16ccaec 100644
--- a/app/components/content/tools/list.vue
+++ b/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
diff --git a/app/components/content/unit/list.vue b/app/components/content/unit/list.vue
index 404da13e..03ee6c9a 100644
--- a/app/components/content/unit/list.vue
+++ b/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
diff --git a/app/composables/usePaginatedList.ts b/app/composables/usePaginatedList.ts
index 10f6863a..d0edafb2 100644
--- a/app/composables/usePaginatedList.ts
+++ b/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()}`
+}

From 9638f208f10bf24960409c0fe2df0d54c3522f8a Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 13:33:26 +0700
Subject: [PATCH 13/27] feat(sep): update filter function

---
 app/components/app/sep/entry-form.vue     | 16 ++++--
 app/components/app/sep/search-letter.vue  | 61 +++++++++++----------
 app/components/app/sep/search-patient.vue | 13 +++--
 app/components/content/sep/entry.vue      | 64 +++++++++++++++--------
 4 files changed, 92 insertions(+), 62 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 04ed4a30..60b5689d 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -13,7 +13,7 @@ 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
+  (e: 'event', value: any): void
 }>()
 
 const items = [
@@ -92,7 +92,11 @@ const onSubmit = handleSubmit((values) => {
       <!-- 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')">
+        <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>
@@ -134,7 +138,11 @@ const onSubmit = handleSubmit((values) => {
           <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">
+            <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>
@@ -259,7 +267,7 @@ const onSubmit = handleSubmit((values) => {
         >
           <Icon name="i-lucide-eye" class="h-5 w-5" />Preview
         </Button>
-        <Button type="submit" class="h-[40px] text-white min-w-[120px]">
+        <Button type="submit" class="h-[40px] min-w-[120px] text-white">
           <Icon name="i-lucide-save" class="h-5 w-5" />
           Simpan
         </Button>
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/search-letter.vue
index fb240ee0..549d52cf 100644
--- a/app/components/app/sep/search-letter.vue
+++ b/app/components/app/sep/search-letter.vue
@@ -14,11 +14,14 @@ import { RadioGroup, RadioGroupItem } from '~/components/pub/ui/radio-group'
 
 const props = defineProps<{
   open: boolean
-  patients: Array<{
-    ktp: string
-    rm: string
-    bpjs: string
-    nama: string
+  letters: Array<{
+    noSurat: string
+    tglRencana: string
+    noSep: string
+    namaPasien: string
+    noBpjs: string
+    klinik: string
+    dokter: string
   }>
   selected: string
 }>()
@@ -30,15 +33,11 @@ const emit = defineEmits<{
 }>()
 
 const search = ref('')
-const filteredPatients = computed(() =>
-  props.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()),
-  ),
-)
+
+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')
@@ -49,16 +48,16 @@ function saveSelection() {
 <template>
   <Dialog :open="props.open" @update:open="emit('update:open', $event)">
     <DialogTrigger as-child>
-      <Button>Cari Pasien</Button>
+      <Button>Cari No. Surat Kontrol</Button>
     </DialogTrigger>
-    <DialogContent class="max-w-3xl">
+    <DialogContent class="max-w-[50%]">
       <DialogHeader>
-        <DialogTitle>Cari Pasien</DialogTitle>
+        <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
       </DialogHeader>
 
       <!-- Input Search -->
       <div class="mb-2 max-w-[50%]">
-        <Input v-model="search" placeholder="Cari berdasarkan No. KTP / No. RM / Nomor Kartu" />
+        <Input v-model="search" placeholder="Cari berdasarkan No. Surat Kontrol / No. SEP" />
       </div>
 
       <!-- Table -->
@@ -67,25 +66,29 @@ function saveSelection() {
           <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">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 filteredPatients" :key="p.ktp" class="border-t hover:bg-gray-50">
+            <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.ktp" :value="p.ktp" />
+                  <RadioGroupItem :id="p.noSurat" :value="p.noSurat" />
                 </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>
+              <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>
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/search-patient.vue
index fb240ee0..5a34f987 100644
--- a/app/components/app/sep/search-patient.vue
+++ b/app/components/app/sep/search-patient.vue
@@ -30,15 +30,16 @@ const emit = defineEmits<{
 }>()
 
 const search = ref('')
-const filteredPatients = computed(() =>
-  props.patients.filter(
+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')
@@ -83,9 +84,7 @@ function saveSelection() {
               <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>
+              <td class="p-2">{{ p.nama }}</td>
             </tr>
           </tbody>
         </table>
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 0e8eb18c..8c7f5432 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-const isLoading = ref(false)
-const open = ref(false)
-const selected = ref('3456512345678880')
+const openPatient = ref(false)
+const openLetter = ref(false)
+const selectedPatient = ref('3456512345678880')
+const selectedLetter = ref('SK22334442')
 
 const patients = [
   {
@@ -20,35 +21,43 @@ const patients = [
 
 const letters = [
   {
-    noSurat: "SK22334442",
-    tglRencana: "12 Agustus 2025",
-    noSep: "SEP3232332",
-    namaPasien: "Ahmad Baidowi",
-    noBpjs: "33442331214",
-    klinik: "Penyakit Dalam",
-    dokter: "dr. Andi Prasetyo, Sp.PD-KHOM",
+    noSurat: 'SK22334442',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP3232332',
+    namaPasien: 'Ahmad Baidowi',
+    noBpjs: '33442331214',
+    klinik: 'Penyakit Dalam',
+    dokter: 'dr. Andi Prasetyo, Sp.PD-KHOM',
   },
   {
-    noSurat: "SK99120039",
-    tglRencana: "12 Agustus 2025",
-    noSep: "SEP4443232",
-    namaPasien: "Bian Maulana",
-    noBpjs: "33442367656",
-    klinik: "Gigi",
-    dokter: "dr. Achmad Suparjo",
+    noSurat: 'SK99120039',
+    tglRencana: '12 Agustus 2025',
+    noSep: 'SEP4443232',
+    namaPasien: 'Bian Maulana',
+    noBpjs: '33442367656',
+    klinik: 'Gigi',
+    dokter: 'dr. Achmad Suparjo',
   },
 ]
 
+function handleSavePatient() {
+  console.log('Pasien dipilih:', selectedPatient.value)
+}
 
-function handleSave() {
-  console.log('Pasien dipilih:', selected.value)
+function handleSaveLetter() {
+  console.log('Letter dipilih:', selectedLetter.value)
 }
 
 function handleEvent(value: string) {
   if (value === 'search-patient') {
-    open.value = true
+    openPatient.value = true
     return
-  } else if (value === 'back') {
+  }
+  if (value === 'search-letter') {
+    openLetter.value = true
+    return
+  }
+  if (value === 'back') {
     navigateTo('/bpjs/sep')
   }
 }
@@ -60,5 +69,16 @@ function handleEvent(value: string) {
     <span class="font-semibold">Tambah</span> SEP
   </div>
   <AppSepEntryForm @event="handleEvent" />
-  <AppSepSearchPatient v-model:open="open" v-model:selected="selected" :patients="patients" @save="handleSave" />
+  <AppSepSearchPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    @save="handleSavePatient"
+  />
+  <AppSepSearchLetter
+    v-model:open="openLetter"
+    v-model:selected="selectedLetter"
+    :letters="letters"
+    @save="handleSaveLetter"
+  />
 </template>

From 3e3aa670aea353514d243728845b9c7458661e7a Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 13:36:27 +0700
Subject: [PATCH 14/27] feat(sep): update grid column

---
 app/components/app/sep/entry-form.vue     | 6 +++---
 app/components/app/sep/search-letter.vue  | 4 +---
 app/components/app/sep/search-patient.vue | 4 +---
 3 files changed, 5 insertions(+), 9 deletions(-)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 60b5689d..42c47c74 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -74,7 +74,7 @@ const onSubmit = handleSubmit((values) => {
   <div class="mx-auto w-full">
     <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
       <!-- Tanggal SEP & Jalur -->
-      <div class="grid gap-4 md:grid-cols-3">
+      <div class="grid gap-4 grid-cols-1 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" />
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
           Cari Pasien
         </Button>
       </div>
-      <div class="grid gap-4 md:grid-cols-3">
+      <div class="grid gap-4 grid-cols-1 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" />
@@ -133,7 +133,7 @@ const onSubmit = handleSubmit((values) => {
 
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
-      <div class="grid gap-4 md:grid-cols-3">
+      <div class="grid gap-4 grid-cols-1 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">
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/search-letter.vue
index 549d52cf..64e65ff6 100644
--- a/app/components/app/sep/search-letter.vue
+++ b/app/components/app/sep/search-letter.vue
@@ -47,9 +47,7 @@ function saveSelection() {
 
 <template>
   <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child>
-      <Button>Cari No. Surat Kontrol</Button>
-    </DialogTrigger>
+    <DialogTrigger as-child></DialogTrigger>
     <DialogContent class="max-w-[50%]">
       <DialogHeader>
         <DialogTitle>Cari No. Surat Kontrol</DialogTitle>
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/search-patient.vue
index 5a34f987..13a78651 100644
--- a/app/components/app/sep/search-patient.vue
+++ b/app/components/app/sep/search-patient.vue
@@ -49,9 +49,7 @@ function saveSelection() {
 
 <template>
   <Dialog :open="props.open" @update:open="emit('update:open', $event)">
-    <DialogTrigger as-child>
-      <Button>Cari Pasien</Button>
-    </DialogTrigger>
+    <DialogTrigger as-child></DialogTrigger>
     <DialogContent class="max-w-3xl">
       <DialogHeader>
         <DialogTitle>Cari Pasien</DialogTitle>

From 865bbbdce987471e1e5eb8f3f9634c7ce5965d2f Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Thu, 11 Sep 2025 14:46:50 +0700
Subject: [PATCH 15/27] init specialist feature

---
 app/components/app/specialist/entry-form.vue  | 37 ++-----------------
 app/components/app/specialist/list-cfg.ts     | 20 +---------
 app/components/content/specialist/entry.ts    | 30 ++++-----------
 app/components/content/specialist/list.vue    | 30 +++++++--------
 .../(features)/org-src/specialist/index.vue   |  4 +-
 5 files changed, 28 insertions(+), 93 deletions(-)

diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
index 0b3a0049..23667e8c 100644
--- a/app/components/app/specialist/entry-form.vue
+++ b/app/components/app/specialist/entry-form.vue
@@ -6,30 +6,20 @@ import Field from '~/components/pub/custom-ui/form/field.vue'
 import Label from '~/components/pub/custom-ui/form/label.vue'
 import Select from '~/components/pub/custom-ui/form/select.vue'
 
-interface InstallationFormData {
+interface SpecialistFormData {
   name: string
   code: string
   encounterClassCode: string
 }
 
 const props = defineProps<{
-  installation: {
-    msg: {
-      placeholder: string
-    }
-    items: {
-      value: string
-      label: string
-      code: string
-    }[]
-  }
   schema: any
-  initialValues?: Partial<InstallationFormData>
+  initialValues?: Partial<SpecialistFormData>
   errors?: FormErrors
 }>()
 
 const emit = defineEmits<{
-  'submit': [values: InstallationFormData, resetForm: () => void]
+  'submit': [values: SpecialistFormData, resetForm: () => void]
   'cancel': [resetForm: () => void]
 }>()
 
@@ -37,7 +27,7 @@ const formSchema = toTypedSchema(props.schema)
 
 // Form submission handler
 function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
-  const formData: InstallationFormData = {
+  const formData: SpecialistFormData = {
     name: values.name || '',
     code: values.code || '',
     encounterClassCode: values.encounterClassCode || '',
@@ -89,25 +79,6 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
               </FormField>
             </Field>
           </FieldGroup>
-
-          <FieldGroup>
-            <Label label-for="parentId">Encounter Class</Label>
-            <Field id="encounterClassCode" :errors="errors">
-              <FormField v-slot="{ componentField }" name="encounterClassCode">
-                <FormItem>
-                  <FormControl>
-                    <Select
-                      v-bind="componentField"
-                      :items="installation.items"
-                      :placeholder="installation.msg.placeholder"
-                    />
-
-                  </FormControl>
-                  <FormMessage />
-                </FormItem>
-              </FormField>
-            </Field>
-          </FieldGroup>
         </div>
       </div>
 
diff --git a/app/components/app/specialist/list-cfg.ts b/app/components/app/specialist/list-cfg.ts
index 6b8dc5ea..367d4d9f 100644
--- a/app/components/app/specialist/list-cfg.ts
+++ b/app/components/app/specialist/list-cfg.ts
@@ -15,7 +15,7 @@ const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/dat
 export const cols: Col[] = [{ width: 100 }, {}, {}, {}, { width: 50 }]
 
 export const header: Th[][] = [
-  [{ label: 'Id' }, { label: 'Nama' }, { label: 'Kode' }, { label: 'Encounter Class' }, { label: '' }],
+  [{ label: 'Id' }, { label: 'Name' }, { label: 'Code' }, { label: 'Unit' }, { label: '' }],
 ]
 
 export const keys = ['id', 'name', 'cellphone', 'religion_code', 'action']
@@ -30,21 +30,6 @@ export const funcParsed: RecStrFuncUnknown = {
     const recX = rec as SmallDetailDto
     return `${recX.firstName} ${recX.lastName || ''}`.trim()
   },
-  identity_number: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    if (recX.identity_number?.substring(0, 5) === 'BLANK') {
-      return '(TANPA NIK)'
-    }
-    return recX.identity_number
-  },
-  inPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.inPatient_itemPrice.price).toLocaleString('id-ID')
-  },
-  outPatient_itemPrice: (rec: unknown): unknown => {
-    const recX = rec as SmallDetailDto
-    return Number(recX.outPatient_itemPrice.price).toLocaleString('id-ID')
-  },
 }
 
 export const funcComponent: RecStrFuncComponent = {
@@ -62,7 +47,4 @@ export const funcComponent: RecStrFuncComponent = {
 }
 
 export const funcHtml: RecStrFuncUnknown = {
-  patient_address(_rec) {
-    return '-'
-  },
 }
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
index c003a029..631149cb 100644
--- a/app/components/content/specialist/entry.ts
+++ b/app/components/content/specialist/entry.ts
@@ -1,37 +1,21 @@
 import * as z from 'zod'
 
-export const installationConf = {
-  msg: {
-    placeholder: '---pilih encounter class (fhir7)',
-  },
-  items: [
-    { value: '1', label: 'Ambulatory', code: 'AMB' },
-    { value: '2', label: 'Inpatient', code: 'IMP' },
-    { value: '3', label: 'Emergency', code: 'EMER' },
-    { value: '4', label: 'Observation', code: 'OBSENC' },
-    { value: '5', label: 'Pre-admission', code: 'PRENC' },
-    { value: '6', label: 'Short Stay', code: 'SS' },
-    { value: '7', label: 'Virtual', code: 'VR' },
-    { value: '8', label: 'Home Health', code: 'HH' },
-  ],
-}
-
 export const schemaConf = z.object({
   name: z
     .string({
-      required_error: 'Nama instalasi harus diisi',
+      required_error: 'Nama spesialisasi harus diisi',
     })
-    .min(3, 'Nama instalasi minimal 3 karakter'),
+    .min(3, 'Nama spesialisasi minimal 3 karakter'),
 
   code: z
     .string({
-      required_error: 'Kode instalasi harus diisi',
+      required_error: 'Kode spesialisasi harus diisi',
     })
-    .min(3, 'Kode instalasi minimal 3 karakter'),
+    .min(3, 'Kode spesialisasi minimal 3 karakter'),
 
-  encounterClassCode: z
+  unitId: z
     .string({
-      required_error: 'Kelompok encounter class harus dipilih',
+      required_error: 'Unit harus dipilih',
     })
-    .min(1, 'Kelompok encounter class harus dipilih'),
+    .min(1, 'Unit harus dipilih'),
 })
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 04125aa1..02e57532 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import type { HeaderPrep } from '~/components/pub/custom-ui/data/types'
-import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+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 { installationConf, schemaConf } from './entry'
+import { schemaConf } from './entry'
 
 // #region State & Computed
 // Dialog state
@@ -18,7 +18,7 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-async function fetchInstallationData(params: any) {
+async function fetchSpecialistData(params: any) {
   const endpoint = transform('/api/v1/patient', params)
   return await xfetch(endpoint)
 }
@@ -31,14 +31,14 @@ const {
   searchInput,
   handlePageChange,
   handleSearch,
-  fetchData: getInstallationList,
+  fetchData: getSpecialistList,
 } = usePaginatedList({
-  fetchFn: fetchInstallationData,
-  entityName: 'installation',
+  fetchFn: fetchSpecialistData,
+  entityName: 'specialist',
 })
 
 const headerPrep: HeaderPrep = {
-  title: 'Instalasi',
+  title: 'Specialist',
   icon: 'i-lucide-box',
   refSearchNav: {
     placeholder: 'Cari (min. 3 karakter)...',
@@ -56,7 +56,7 @@ const headerPrep: HeaderPrep = {
     },
   },
   addNav: {
-    label: 'Tambah Instalasi',
+    label: 'Tambah Specialist',
     icon: 'i-lucide-send',
     onClick: () => {
       isFormEntryDialogOpen.value = true
@@ -83,7 +83,7 @@ async function handleDeleteRow(record: any) {
     // })
 
     // Refresh data setelah berhasil delete
-    await getInstallationList()
+    await getSpecialistList()
 
     // TODO: Show success message
     console.log('Record deleted successfully')
@@ -126,7 +126,7 @@ async function onSubmitForm(values: any, resetForm: () => void) {
     isSuccess = true
 
     // Refresh data after successful submission
-    await getInstallationList()
+    await getSpecialistList()
 
     // TODO: Show success message
     console.log('Installation created successfully')
@@ -179,15 +179,13 @@ function handleCancelConfirmation() {
 <template>
   <div class="rounded-md border p-4">
     <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" />
-    <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    <AppSpecialistList :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"
-        :initial-values="{ name: '', code: '', encounterClassCode: '' }" @submit="onSubmitForm"
-        @cancel="onCancelForm" />
+    <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
+      <AppSpecialistEntryForm :schema="schemaConf" :initial-values="{ name: '', code: '', encounterClassCode: '' }"
+        @submit="onSubmitForm" @cancel="onCancelForm" />
     </Dialog>
 
-    <!-- Record Confirmation Modal -->
     <RecordConfirmation v-model:open="isRecordConfirmationOpen" action="delete" :record="recItem"
       @confirm="handleConfirmDelete" @cancel="handleCancelConfirmation">
       <template #default="{ record }">
diff --git a/app/pages/(features)/org-src/specialist/index.vue b/app/pages/(features)/org-src/specialist/index.vue
index d6e30dfd..85ea283e 100644
--- a/app/pages/(features)/org-src/specialist/index.vue
+++ b/app/pages/(features)/org-src/specialist/index.vue
@@ -6,7 +6,7 @@ import Error from '~/components/pub/base/error/error.vue'
 definePageMeta({
   // middleware: ['rbac'],
   roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
-  title: 'List Unit',
+  title: 'List Specialist',
   contentFrame: 'cf-full-width',
 })
 
@@ -34,7 +34,7 @@ const canRead = true
 <template>
   <div>
     <div v-if="canRead">
-      <ContentUnitList />
+      <ContentSpecialistList />
     </div>
     <Error v-else :status-code="403" />
   </div>

From 42d39bd08bffae5bfecfe550ab8982bb18fd5e3f Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 14:53:25 +0700
Subject: [PATCH 16/27] feat(sep): create filter on sep list

---
 app/components/content/sep/list.vue | 57 ++++++++++++++++++++++++++++-
 1 file changed, 56 insertions(+), 1 deletion(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 8c52a816..73afb3a7 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
 import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
+const search = ref('')
+const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const perPage = ref('10')
+const currentPage = ref(1)
+const totalPages = 20
+const perPageOptions = [10, 25, 50].map((value) => ({ value: value.toString(), label: value.toString() }))
+
 interface SepData {
   tgl_sep: string
   no_sep: string
@@ -18,6 +26,19 @@ interface SepData {
   diagnosis_awal: string
 }
 
+const paginationMeta = reactive<PaginationMeta>({
+  recordCount: 0,
+  page: 1,
+  pageSize: 10,
+  totalPage: 5,
+  hasNext: false,
+  hasPrev: false,
+})
+
+function handlePageChange(page: number) {
+  console.log('pageChange', page)
+}
+
 const data = ref<SepData[]>([])
 
 // contoh data dummy
@@ -115,9 +136,43 @@ provide('table_data_loader', isLoading)
 
 <template>
   <div class="rounded-md border p-4">
-    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <Header :prep="{ ...headerPrep }" />
+    <!-- Filter Bar -->
+    <div class="my-2 flex items-center gap-2">
+      <!-- Search -->
+      <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
+
+      <!-- Date Range -->
+      <Popover>
+        <PopoverTrigger as-child>
+          <Button variant="outline" class="h-[40px] w-72 border-gray-400 bg-white text-right font-normal">
+            {{ dateRange }}
+            <Icon name="i-lucide-calendar" class="h-5 w-5" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent class="p-2">
+          <Calendar mode="range" />
+        </PopoverContent>
+      </Popover>
+
+      <!-- Export -->
+      <Button
+        variant="outline"
+        class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+      >
+        <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+      </Button>
+    </div>
+
     <div class="rounded-md border p-4">
       <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
     </div>
+
+    <!-- Pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+      </div>
+    </template>
   </div>
 </template>

From bfb6cc39bf2d194e8b1ad8a878a2e0d77428b400 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Thu, 11 Sep 2025 14:55:03 +0700
Subject: [PATCH 17/27] feat(sep): remove not used variables

---
 app/components/content/sep/list.vue | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 73afb3a7..ff934da3 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -6,10 +6,6 @@ import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
 
 const search = ref('')
 const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
-const perPage = ref('10')
-const currentPage = ref(1)
-const totalPages = 20
-const perPageOptions = [10, 25, 50].map((value) => ({ value: value.toString(), label: value.toString() }))
 
 interface SepData {
   tgl_sep: string

From fdbfcb29ff320657cab3dc1b2b9edccd4eae88ee Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 12 Sep 2025 14:13:33 +0700
Subject: [PATCH 18/27] feat(sep): change button export to dropdown

---
 app/components/content/sep/list.vue | 36 ++++++++++++++++++++++++-----
 1 file changed, 30 insertions(+), 6 deletions(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index ff934da3..22597f22 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -3,6 +3,12 @@ import type { DataTableLoader } from '~/components/pub/base/data-table/type'
 import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
 import type { PaginationMeta } from '~/components/pub/custom-ui/pagination/pagination.type'
 import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from '~/components/pub/ui/dropdown-menu'
 
 const search = ref('')
 const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
@@ -120,6 +126,16 @@ async function getSepList() {
   isLoading.dataListLoading = false
 }
 
+function exportCsv() {
+  console.log('Ekspor CSV dipilih')
+  // tambahkan logic untuk generate CSV
+}
+
+function exportExcel() {
+  console.log('Ekspor Excel dipilih')
+  // tambahkan logic untuk generate Excel
+}
+
 onMounted(() => {
   getSepList()
 })
@@ -152,12 +168,20 @@ provide('table_data_loader', isLoading)
       </Popover>
 
       <!-- Export -->
-      <Button
-        variant="outline"
-        class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
-      >
-        <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
-      </Button>
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button
+            variant="outline"
+            class="ml-auto h-[40px] w-[120px] rounded-md border-green-600 text-green-600 hover:bg-green-50"
+          >
+            <Icon name="i-lucide-download" class="h-5 w-5" /> Ekspor
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent class="w-40">
+          <DropdownMenuItem @click="exportCsv"> Ekspor CSV </DropdownMenuItem>
+          <DropdownMenuItem @click="exportExcel"> Ekspor Excel </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
     </div>
 
     <div class="rounded-md border p-4">

From 96ee2c78d22e956dd9b4001d3679a53158ac5558 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 12 Sep 2025 14:26:13 +0700
Subject: [PATCH 19/27] feat(sep): add table history sep

---
 app/components/app/sep/entry-form.vue         | 13 ++-
 app/components/app/sep/table-history-sep.vue  | 81 +++++++++++++++++++
 ...rch-letter.vue => table-search-letter.vue} |  0
 ...h-patient.vue => table-search-patient.vue} |  0
 app/components/content/sep/entry.vue          | 33 +++++++-
 5 files changed, 121 insertions(+), 6 deletions(-)
 create mode 100644 app/components/app/sep/table-history-sep.vue
 rename app/components/app/sep/{search-letter.vue => table-search-letter.vue} (100%)
 rename app/components/app/sep/{search-patient.vue => table-search-patient.vue} (100%)

diff --git a/app/components/app/sep/entry-form.vue b/app/components/app/sep/entry-form.vue
index 42c47c74..0e6c16da 100644
--- a/app/components/app/sep/entry-form.vue
+++ b/app/components/app/sep/entry-form.vue
@@ -74,7 +74,7 @@ const onSubmit = handleSubmit((values) => {
   <div class="mx-auto w-full">
     <form @submit.prevent="onSubmit" class="grid gap-6 p-4">
       <!-- Tanggal SEP & Jalur -->
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <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" />
@@ -101,7 +101,7 @@ const onSubmit = handleSubmit((values) => {
           Cari Pasien
         </Button>
       </div>
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <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" />
@@ -133,7 +133,7 @@ const onSubmit = handleSubmit((values) => {
 
       <!-- Data SEP -->
       <h3 class="text-lg font-semibold">Data SEP</h3>
-      <div class="grid gap-4 grid-cols-1 sm:grid-cols-3">
+      <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">
@@ -257,7 +257,12 @@ const onSubmit = handleSubmit((values) => {
 
       <!-- 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">
+        <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
diff --git a/app/components/app/sep/table-history-sep.vue b/app/components/app/sep/table-history-sep.vue
new file mode 100644
index 00000000..bfe00e51
--- /dev/null
+++ b/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>
diff --git a/app/components/app/sep/search-letter.vue b/app/components/app/sep/table-search-letter.vue
similarity index 100%
rename from app/components/app/sep/search-letter.vue
rename to app/components/app/sep/table-search-letter.vue
diff --git a/app/components/app/sep/search-patient.vue b/app/components/app/sep/table-search-patient.vue
similarity index 100%
rename from app/components/app/sep/search-patient.vue
rename to app/components/app/sep/table-search-patient.vue
diff --git a/app/components/content/sep/entry.vue b/app/components/content/sep/entry.vue
index 8c7f5432..61107232 100644
--- a/app/components/content/sep/entry.vue
+++ b/app/components/content/sep/entry.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 const openPatient = ref(false)
 const openLetter = ref(false)
+const openHistory = ref(false)
 const selectedPatient = ref('3456512345678880')
 const selectedLetter = ref('SK22334442')
 
@@ -40,6 +41,25 @@ const letters = [
   },
 ]
 
+const histories = [
+  {
+    no_sep: "SP23311224",
+    tgl_sep: "12 Agustus 2025",
+    no_rujukan: "123444",
+    diagnosis: "C34.9 – Karsinoma Paru",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+  {
+    no_sep: "SP23455667",
+    tgl_sep: "11 Agustus 2025",
+    no_rujukan: "2331221",
+    diagnosis: "K35 – Apendisitis akut",
+    pelayanan: "Rawat Jalan",
+    kelas: "Kelas II",
+  },
+]
+
 function handleSavePatient() {
   console.log('Pasien dipilih:', selectedPatient.value)
 }
@@ -57,6 +77,10 @@ function handleEvent(value: string) {
     openLetter.value = true
     return
   }
+  if (value === 'history-sep') {
+    openHistory.value = true
+    return
+  }
   if (value === 'back') {
     navigateTo('/bpjs/sep')
   }
@@ -69,16 +93,21 @@ function handleEvent(value: string) {
     <span class="font-semibold">Tambah</span> SEP
   </div>
   <AppSepEntryForm @event="handleEvent" />
-  <AppSepSearchPatient
+  <AppSepTableSearchPatient
     v-model:open="openPatient"
     v-model:selected="selectedPatient"
     :patients="patients"
     @save="handleSavePatient"
   />
-  <AppSepSearchLetter
+  <AppSepTableSearchLetter
     v-model:open="openLetter"
     v-model:selected="selectedLetter"
     :letters="letters"
     @save="handleSaveLetter"
   />
+  <AppSepTableHistorySep
+    v-model:open="openHistory"
+    :histories="histories"
+  />
+
 </template>

From 41d87623e2e4a18e2f5a52ca45dd7b617c5a35d4 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 12 Sep 2025 14:39:52 +0700
Subject: [PATCH 20/27] feat(combobox): add disabled prop and improve styling

- Add disabled prop to combobox component to support disabled state
- Update styling to include better focus states and border color
---
 app/components/pub/custom-ui/form/combobox.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/app/components/pub/custom-ui/form/combobox.vue b/app/components/pub/custom-ui/form/combobox.vue
index 23f9401f..de51600e 100644
--- a/app/components/pub/custom-ui/form/combobox.vue
+++ b/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,
       )"

From 87c36b94eace14182f726f5d317099f0c36b2fa3 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 12 Sep 2025 14:42:05 +0700
Subject: [PATCH 21/27] feat(specialist): add installation-unit relationship to
 specialist form

- Implement installation-unit mapping and filtering logic
- Update entry form to handle installation selection and unit filtering
- Add installation and unit dropdowns with combobox components
---
 app/components/app/specialist/entry-form.vue | 100 +++++++++++++++++--
 app/components/content/specialist/entry.ts   |  76 +++++++++++++-
 app/components/content/specialist/list.vue   |  82 +++++++++++----
 3 files changed, 228 insertions(+), 30 deletions(-)

diff --git a/app/components/app/specialist/entry-form.vue b/app/components/app/specialist/entry-form.vue
index 23667e8c..2dbfffc1 100644
--- a/app/components/app/specialist/entry-form.vue
+++ b/app/components/app/specialist/entry-form.vue
@@ -1,26 +1,52 @@
 <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'
-import Select from '~/components/pub/custom-ui/form/select.vue'
 
 interface SpecialistFormData {
   name: string
   code: string
-  encounterClassCode: 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)
@@ -30,7 +56,8 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
   const formData: SpecialistFormData = {
     name: values.name || '',
     code: values.code || '',
-    encounterClassCode: values.encounterClassCode || '',
+    installationId: values.installationId || '',
+    unitId: values.unitId || '',
   }
   emit('submit', formData, resetForm)
 }
@@ -39,11 +66,17 @@ function onSubmitForm(values: any, { resetForm }: { resetForm: () => void }) {
 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 }" as="" keep-values :validation-schema="formSchema"
+    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 }))">
@@ -56,9 +89,12 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
                 <FormItem>
                   <FormControl>
                     <Input
-                      id="name" type="text" placeholder="Masukkan nama instalasi" autocomplete="off"
+                      id="name"
+                      type="text"
+                      placeholder="Masukkan nama spesialisasi"
+                      autocomplete="off"
                       v-bind="componentField"
-                      />
+                    />
                   </FormControl>
                   <FormMessage />
                 </FormItem>
@@ -72,7 +108,57 @@ function onCancelForm({ resetForm }: { resetForm: () => void }) {
               <FormField v-slot="{ componentField }" name="code">
                 <FormItem>
                   <FormControl>
-                    <Input id="code" type="text" placeholder="Masukkan kode instalasi" autocomplete="off" v-bind="componentField" />
+                    <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>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
index 631149cb..9dc0a54f 100644
--- a/app/components/content/specialist/entry.ts
+++ b/app/components/content/specialist/entry.ts
@@ -1,6 +1,6 @@
 import * as z from 'zod'
 
-export const schemaConf = z.object({
+export const specialistConf = z.object({
   name: z
     .string({
       required_error: 'Nama spesialisasi harus diisi',
@@ -13,9 +13,83 @@ export const schemaConf = z.object({
     })
     .min(3, 'Kode spesialisasi minimal 3 karakter'),
 
+  installationId: z
+    .string({
+      required_error: 'Instalasi harus dipilih',
+    })
+    .min(1, 'Instalasi harus dipilih'),
+
   unitId: z
     .string({
       required_error: 'Unit harus dipilih',
     })
     .min(1, 'Unit harus dipilih'),
 })
+
+// Unit mapping berdasarkan installation
+export const installationUnitMapping: Record<string, string[]> = {
+  '1': ['1', '3', '5'],
+  '2': ['2', '4', '6'],
+  '3': ['7', '8', '9', '10', '11'],
+}
+
+export const unitConf = {
+  msg: {
+    placeholder: '---pilih unit',
+    search: 'kode, nama unit',
+    empty: 'unit tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Instalasi Medis', code: 'MED' },
+    { value: '2', label: 'Instalasi Keperawatan', code: 'NUR' },
+    { value: '3', label: 'Instalasi Administrasi', code: 'ADM' },
+    { value: '4', label: 'Instalasi Penunjang Non-Medis', code: 'SUP' },
+    { value: '5', label: 'Instalasi Pendidikan & Pelatihan', code: 'EDU' },
+    { value: '6', label: 'Instalasi Farmasi', code: 'PHA' },
+    { value: '7', label: 'Instalasi Radiologi', code: 'RAD' },
+    { value: '8', label: 'Instalasi Laboratorium', code: 'LAB' },
+    { value: '9', label: 'Instalasi Keuangan', code: 'FIN' },
+    { value: '10', label: 'Instalasi SDM', code: 'HR' },
+    { value: '11', label: 'Instalasi Teknologi Informasi', code: 'ITS' },
+    { value: '12', label: 'Instalasi Pemeliharaan & Sarana', code: 'MNT' },
+    { value: '13', label: 'Instalasi Gizi / Catering', code: 'CAT' },
+    { value: '14', label: 'Instalasi Keamanan', code: 'SEC' },
+    { value: '15', label: 'Instalasi Gawat Darurat', code: 'EMR' },
+    { value: '16', label: 'Instalasi Bedah Sentral', code: 'SUR' },
+    { value: '17', label: 'Instalasi Rawat Jalan', code: 'OUT' },
+    { value: '18', label: 'Instalasi Rawat Inap', code: 'INP' },
+    { value: '19', label: 'Instalasi Rehabilitasi Medik', code: 'REB' },
+    { value: '20', label: 'Instalasi Penelitian & Pengembangan', code: 'RSH' },
+  ],
+}
+
+export const installationConf = {
+  msg: {
+    placeholder: '---pilih instalasi',
+    search: 'kode, nama instalasi',
+    empty: 'instalasi tidak ditemukan',
+  },
+  items: [
+    { value: '1', label: 'Ambulatory', code: 'AMB' },
+    { value: '2', label: 'Inpatient', code: 'IMP' },
+    { value: '3', label: 'Emergency', code: 'EMER' },
+  ],
+}
+
+// Helper function untuk filter unit berdasarkan installation
+export function getFilteredUnits(installationId: string) {
+  if (!installationId || !installationUnitMapping[installationId]) {
+    return []
+  }
+
+  const allowedUnitIds = installationUnitMapping[installationId]
+  return unitConf.items.filter((unit) => allowedUnitIds.includes(unit.value))
+}
+
+// Helper function untuk membuat unit config yang ter-filter
+export function createFilteredUnitConf(installationId: string) {
+  return {
+    ...unitConf,
+    items: getFilteredUnits(installationId),
+  }
+}
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 02e57532..98874546 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -6,7 +6,7 @@ import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-c
 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 { schemaConf } from './entry'
+import { createFilteredUnitConf, installationConf, specialistConf, unitConf } from './entry'
 
 // #region State & Computed
 // Dialog state
@@ -18,12 +18,17 @@ const recId = ref<number>(0)
 const recAction = ref<string>('')
 const recItem = ref<any>(null)
 
-async function fetchSpecialistData(params: any) {
-  const endpoint = transform('/api/v1/patient', params)
-  return await xfetch(endpoint)
-}
+// 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)
+})
 
-// Menggunakan composable untuk pagination
 const {
   data,
   isLoading,
@@ -71,6 +76,10 @@ 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 {
@@ -98,17 +107,40 @@ async function handleDeleteRow(record: any) {
   }
 }
 
+// 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 {
@@ -125,6 +157,9 @@ async function onSubmitForm(values: any, resetForm: () => void) {
     isFormEntryDialogOpen.value = false
     isSuccess = true
 
+    // Reset installation selection ketika form berhasil submit
+    selectedInstallationId.value = ''
+
     // Refresh data after successful submission
     await getSpecialistList()
 
@@ -161,18 +196,8 @@ watch(recId, () => {
   }
 })
 
-// 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
-}
+// Note: Installation change logic is now handled by the entry-form component
+// through the onInstallationChanged event handler
 // #endregion
 </script>
 
@@ -182,12 +207,25 @@ function handleCancelConfirmation() {
     <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
 
     <Dialog v-model:open="isFormEntryDialogOpen" :title="headerPrep.addNav?.label!" size="lg" prevent-outside>
-      <AppSpecialistEntryForm :schema="schemaConf" :initial-values="{ name: '', code: '', encounterClassCode: '' }"
-        @submit="onSubmitForm" @cancel="onCancelForm" />
+      <AppSpecialistEntryForm
+        :installation="installationConf"
+        :unit="filteredUnitConf"
+        :schema="specialistConf"
+        :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">
+    <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>

From d0ce15730d03d02db0ec4f1c9d99fb4ec261cc02 Mon Sep 17 00:00:00 2001
From: riefive <rie.five@gmail.com>
Date: Fri, 12 Sep 2025 14:53:06 +0700
Subject: [PATCH 22/27] feat(sep): add dialog for confirm delete

---
 app/components/content/sep/list.vue | 54 ++++++++++++++++++++++++++++-
 1 file changed, 53 insertions(+), 1 deletion(-)

diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
index 22597f22..2bfccd49 100644
--- a/app/components/content/sep/list.vue
+++ b/app/components/content/sep/list.vue
@@ -9,9 +9,17 @@ import {
   DropdownMenuContent,
   DropdownMenuItem,
 } from '~/components/pub/ui/dropdown-menu'
+import { X, Check } from 'lucide-vue-next'
 
 const search = ref('')
 const dateRange = ref('12 Agustus 2025 - 32 Agustus 2025')
+const open = ref(false)
+
+const sepData = {
+  no_sep: 'SP23311224',
+  kartu: '001234',
+  nama: 'Kenzie',
+}
 
 interface SepData {
   tgl_sep: string
@@ -136,6 +144,20 @@ function exportExcel() {
   // tambahkan logic untuk generate Excel
 }
 
+function handleDelete() {
+  console.log('Data dihapus:', sepData)
+  open.value = false
+}
+
+watch(
+  () => recAction.value,
+  () => {
+    if (recAction.value === 'showConfirmDel') {
+      open.value = true
+    }
+  },
+)
+
 onMounted(() => {
   getSepList()
 })
@@ -150,7 +172,7 @@ provide('table_data_loader', isLoading)
   <div class="rounded-md border p-4">
     <Header :prep="{ ...headerPrep }" />
     <!-- Filter Bar -->
-    <div class="my-2 flex items-center gap-2">
+    <div class="my-2 flex flex-wrap items-center gap-2">
       <!-- Search -->
       <Input v-model="search" placeholder="Cari No. SEP / No. Kartu BPJS..." class="w-72" />
 
@@ -194,5 +216,35 @@ provide('table_data_loader', isLoading)
         <PubCustomUiPagination :pagination-meta="paginationMeta" @page-change="handlePageChange" />
       </div>
     </template>
+
+    <!-- Trigger button -->
+    <Dialog v-model:open="open">
+      <DialogTrigger as-child></DialogTrigger>
+
+      <DialogContent class="sm:max-w-md">
+        <DialogHeader>
+          <DialogTitle>Hapus SEP</DialogTitle>
+        </DialogHeader>
+
+        <DialogDescription class="text-gray-700">
+          Apakah anda yakin ingin menghapus SEP dengan data:
+        </DialogDescription>
+
+        <div class="mt-4 space-y-2 text-sm">
+          <p>No. SEP : {{ sepData.no_sep }}</p>
+          <p>No. Kartu BPJS : {{ sepData.kartu }}</p>
+          <p>Nama Pasien : {{ sepData.nama }}</p>
+        </div>
+
+        <DialogFooter class="mt-6 flex justify-end gap-3">
+          <Button variant="outline" class="border-green-600 text-green-600 hover:bg-green-50" @click="open = false">
+            <X class="mr-1 h-4 w-4" /> Tidak
+          </Button>
+          <Button variant="destructive" class="bg-red-600 hover:bg-red-700" @click="handleDelete">
+            <Check class="mr-1 h-4 w-4" /> Ya
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   </div>
 </template>

From 790c76be56e490f13e45000bfefc10719b225647 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 12 Sep 2025 15:26:23 +0700
Subject: [PATCH 23/27] style(form/select): improve select component styling
 and focus state

- Add focus outline and ring styles to SelectTrigger
- Conditionally apply text color based on modelValue
- Simplify SelectItem template structure
---
 app/components/pub/custom-ui/form/select.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/components/pub/custom-ui/form/select.vue b/app/components/pub/custom-ui/form/select.vue
index 53911bb8..ec5f882c 100644
--- a/app/components/pub/custom-ui/form/select.vue
+++ b/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">

From 566627239b04f667097fd65fde198fb4d41c70af Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 15 Sep 2025 11:01:18 +0700
Subject: [PATCH 24/27] feat(pagination): add reusable pagination component and
 update list views

- Create new PaginationView component to standardize pagination display
- Update multiple list components to use the new PaginationView
- Make paginationMeta prop required in list components
---
 app/components/app/divison/list.vue           | 13 ++++------
 app/components/app/equipment/list.vue         | 10 +++-----
 app/components/app/installation/list.vue      | 15 ++++-------
 app/components/app/specialist/list.vue        | 15 ++++-------
 app/components/app/tools/list.vue             | 25 ++++++++-----------
 app/components/app/unit/list.vue              | 14 ++++-------
 .../custom-ui/pagination/pagination-view.vue  | 24 ++++++++++++++++++
 .../pub/custom-ui/pagination/pagination.vue   |  4 +--
 8 files changed, 60 insertions(+), 60 deletions(-)
 create mode 100644 app/components/pub/custom-ui/pagination/pagination-view.vue

diff --git a/app/components/app/divison/list.vue b/app/components/app/divison/list.vue
index cf0d5ea2..e2540e85 100644
--- a/app/components/app/divison/list.vue
+++ b/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>
diff --git a/app/components/app/equipment/list.vue b/app/components/app/equipment/list.vue
index c912c977..c64c64a2 100644
--- a/app/components/app/equipment/list.vue
+++ b/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>
diff --git a/app/components/app/installation/list.vue b/app/components/app/installation/list.vue
index a6b19eb2..e9489ef1 100644
--- a/app/components/app/installation/list.vue
+++ b/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>
diff --git a/app/components/app/specialist/list.vue b/app/components/app/specialist/list.vue
index a6b19eb2..e9489ef1 100644
--- a/app/components/app/specialist/list.vue
+++ b/app/components/app/specialist/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>
diff --git a/app/components/app/tools/list.vue b/app/components/app/tools/list.vue
index 5e6d4382..076f0f41 100644
--- a/app/components/app/tools/list.vue
+++ b/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>
diff --git a/app/components/app/unit/list.vue b/app/components/app/unit/list.vue
index 1baaa6ba..e9489ef1 100644
--- a/app/components/app/unit/list.vue
+++ b/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>
diff --git a/app/components/pub/custom-ui/pagination/pagination-view.vue b/app/components/pub/custom-ui/pagination/pagination-view.vue
new file mode 100644
index 00000000..f3eaab4b
--- /dev/null
+++ b/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>
diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 694e3b7b..06ca17b6 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/app/components/pub/custom-ui/pagination/pagination.vue
@@ -89,12 +89,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 }}
       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>

From 06caccf3cdfbd08c698526aa09599c5cf966db7d Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 15 Sep 2025 13:51:43 +0700
Subject: [PATCH 25/27] feat(subspecialist): add subspecialist management
 components and pages

- Implement list view with pagination and search functionality
- Create form for adding subspecialist entries
- Add configuration for subspecialist data validation and dropdown options
---
 .../app/subspecialist/entry-form.vue          | 213 ++++++++++++++++
 app/components/app/subspecialist/list-cfg.ts  |  56 ++++
 app/components/app/subspecialist/list.vue     |  31 +++
 app/components/content/specialist/entry.ts    |   2 +-
 app/components/content/specialist/list.vue    |   4 +-
 app/components/content/subspecialist/entry.ts |  98 +++++++
 app/components/content/subspecialist/list.vue | 241 ++++++++++++++++++
 .../org-src/subspecialist/index.vue           |  41 +++
 8 files changed, 683 insertions(+), 3 deletions(-)
 create mode 100644 app/components/app/subspecialist/entry-form.vue
 create mode 100644 app/components/app/subspecialist/list-cfg.ts
 create mode 100644 app/components/app/subspecialist/list.vue
 create mode 100644 app/components/content/subspecialist/entry.ts
 create mode 100644 app/components/content/subspecialist/list.vue
 create mode 100644 app/pages/(features)/org-src/subspecialist/index.vue

diff --git a/app/components/app/subspecialist/entry-form.vue b/app/components/app/subspecialist/entry-form.vue
new file mode 100644
index 00000000..9d31fd3f
--- /dev/null
+++ b/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>
diff --git a/app/components/app/subspecialist/list-cfg.ts b/app/components/app/subspecialist/list-cfg.ts
new file mode 100644
index 00000000..eb25f5d0
--- /dev/null
+++ b/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 = {}
diff --git a/app/components/app/subspecialist/list.vue b/app/components/app/subspecialist/list.vue
new file mode 100644
index 00000000..e9489ef1
--- /dev/null
+++ b/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>
diff --git a/app/components/content/specialist/entry.ts b/app/components/content/specialist/entry.ts
index 9dc0a54f..c89302c2 100644
--- a/app/components/content/specialist/entry.ts
+++ b/app/components/content/specialist/entry.ts
@@ -1,6 +1,6 @@
 import * as z from 'zod'
 
-export const specialistConf = z.object({
+export const schemaConf = z.object({
   name: z
     .string({
       required_error: 'Nama spesialisasi harus diisi',
diff --git a/app/components/content/specialist/list.vue b/app/components/content/specialist/list.vue
index 98874546..b384bfc1 100644
--- a/app/components/content/specialist/list.vue
+++ b/app/components/content/specialist/list.vue
@@ -6,7 +6,7 @@ import RecordConfirmation from '~/components/pub/custom-ui/confirmation/record-c
 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, specialistConf, unitConf } from './entry'
+import { createFilteredUnitConf, installationConf, schemaConf, unitConf } from './entry'
 
 // #region State & Computed
 // Dialog state
@@ -210,7 +210,7 @@ watch(recId, () => {
       <AppSpecialistEntryForm
         :installation="installationConf"
         :unit="filteredUnitConf"
-        :schema="specialistConf"
+        :schema="schemaConf"
         :disabled-unit="!selectedInstallationId"
         :initial-values="{ name: '', code: '', installationId: '', unitId: '' }"
         @submit="onSubmitForm"
diff --git a/app/components/content/subspecialist/entry.ts b/app/components/content/subspecialist/entry.ts
new file mode 100644
index 00000000..5a93847d
--- /dev/null
+++ b/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),
+  }
+}
diff --git a/app/components/content/subspecialist/list.vue b/app/components/content/subspecialist/list.vue
new file mode 100644
index 00000000..bfb4e4b9
--- /dev/null
+++ b/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>
diff --git a/app/pages/(features)/org-src/subspecialist/index.vue b/app/pages/(features)/org-src/subspecialist/index.vue
new file mode 100644
index 00000000..a7a489d2
--- /dev/null
+++ b/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>

From 56056c3fdbbf2b87c310d87a6fc02e6a10ba6f07 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Mon, 15 Sep 2025 14:42:36 +0700
Subject: [PATCH 26/27] fix(pagination): format record numbers with locale for
 indonesia

Apply toLocaleString('id-ID') to startRecord and endRecord to display numbers in Indonesian format
---
 app/components/pub/custom-ui/pagination/pagination.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/app/components/pub/custom-ui/pagination/pagination.vue b/app/components/pub/custom-ui/pagination/pagination.vue
index 06ca17b6..4ba0da5f 100644
--- a/app/components/pub/custom-ui/pagination/pagination.vue
+++ b/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(() => {
@@ -91,7 +92,7 @@ function getButtonClass(pageNumber: number) {
     <!-- Info text -->
     <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>

From 19c0966deed37e0b07096878c03a9a782ed63d59 Mon Sep 17 00:00:00 2001
From: Abizrh <abizarah857@gmail.com>
Date: Wed, 17 Sep 2025 00:52:01 +0700
Subject: [PATCH 27/27] =?UTF-8?q?=E2=9C=A8=20feat=20(specialist-intern):?=
 =?UTF-8?q?=20add=20specialist=20intern=20feature?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../app/specialist-intern/entry-form.vue      | 105 ++++++++++++++++++
 .../content/specialist-intern/entry.vue       |  49 ++++++++
 .../content/specialist-intern/list.vue        |  63 +++++++++++
 .../human-src/specialist-intern/add.vue       |  41 +++++++
 .../human-src/specialist-intern/index.vue     |  40 +++++++
 5 files changed, 298 insertions(+)
 create mode 100644 app/components/app/specialist-intern/entry-form.vue
 create mode 100644 app/components/content/specialist-intern/entry.vue
 create mode 100644 app/components/content/specialist-intern/list.vue
 create mode 100644 app/pages/(features)/human-src/specialist-intern/add.vue
 create mode 100644 app/pages/(features)/human-src/specialist-intern/index.vue

diff --git a/app/components/app/specialist-intern/entry-form.vue b/app/components/app/specialist-intern/entry-form.vue
new file mode 100644
index 00000000..632e415c
--- /dev/null
+++ b/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>
diff --git a/app/components/content/specialist-intern/entry.vue b/app/components/content/specialist-intern/entry.vue
new file mode 100644
index 00000000..7fa6a0b6
--- /dev/null
+++ b/app/components/content/specialist-intern/entry.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Action from '~/components/pub/custom-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: 'doctor',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/specialist-intern')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+
+const items = [
+  { value: 'doctor', label: 'Dokter' },
+  { value: 'nurse', label: 'Perawat' },
+  { value: 'nutritionist', label: 'Ahli Gizi' },
+  { value: 'laborant', label: 'Laboran' },
+  { value: 'pharmacy', label: 'Farmasi' },
+  { value: 'payment', label: 'Pembayaran' },
+  { value: 'payment-verificator', label: 'Konfirmasi Pembayaran' },
+  { value: 'management', label: 'Management' },
+]
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg xl:text-xl">
+    <Icon name="i-lucide-user" class="me-2" />
+    <span class="font-semibold">Tambah</span> Karyawan
+  </div>
+
+  <AppUserEntryForm v-model="data" />
+
+  <AppSpecialistInternEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>
diff --git a/app/components/content/specialist-intern/list.vue b/app/components/content/specialist-intern/list.vue
new file mode 100644
index 00000000..f7a6f951
--- /dev/null
+++ b/app/components/content/specialist-intern/list.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'User',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/human-src/specialist-intern/add'),
+  },
+}
+
+async function getDoctorList() {
+  isLoading.dataListLoading = true
+
+  const resp = await xfetch('/api/v1/doctor')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getDoctorList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppDoctorList v-if="!isLoading.dataListLoading" :data="data" />
+  </div>
+</template>
diff --git a/app/pages/(features)/human-src/specialist-intern/add.vue b/app/pages/(features)/human-src/specialist-intern/add.vue
new file mode 100644
index 00000000..43a1b1da
--- /dev/null
+++ b/app/pages/(features)/human-src/specialist-intern/add.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: 'Tambah User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasCreateAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  throw createError({
+    statusCode: 403,
+    statusMessage: 'Access denied',
+  })
+}
+
+// Define permission-based computed properties
+const canCreate = hasCreateAccess(roleAccess)
+</script>
+
+<template>
+  <div v-if="canCreate">
+    <ContentSpecialistInternEntry />
+  </div>
+  <Error v-else :status-code="403" />
+</template>
diff --git a/app/pages/(features)/human-src/specialist-intern/index.vue b/app/pages/(features)/human-src/specialist-intern/index.vue
new file mode 100644
index 00000000..1d8132b3
--- /dev/null
+++ b/app/pages/(features)/human-src/specialist-intern/index.vue
@@ -0,0 +1,40 @@
+<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: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+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)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSpecialistInternList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>