Dev cleaning (#106)

app/components/content/assesment-function/add.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>

app/components/content/assesment-function/list.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/assesment-function/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>

app/components/content/auth/login.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { z } from 'zod'
+
+const loginSchema = z.object({
+  name: z.string().min(3, 'Please enter a valid username'),
+  password: z.string().min(3, 'Password must be at least 3 characters'),
+})
+
+const { login } = useUserStore()
+
+type LoginFormData = z.infer<typeof loginSchema>
+
+const isLoading = ref(false)
+const apiErrors = ref<Record<string, string>>({})
+
+async function onSubmit(data: LoginFormData) {
+  isLoading.value = true
+
+  const result = await xfetch('/api/v1/authentication/login', 'POST', {
+    name: data.name,
+    password: data.password,
+  })
+
+  if (result.success) {
+    const { data: rawdata, meta } = result.body
+    if (meta.status === 'verified') {
+      await login(rawdata)
+      await navigateTo('/')
+    }
+  } else {
+    if (result.errors) {
+      Object.entries(result.errors).forEach(
+        ([field, errorInfo]: [string, any]) => (apiErrors.value[field] = errorInfo.message),
+      )
+    } else {
+      apiErrors.value.general = result.error?.message || result.message || 'Login failed'
+    }
+  }
+
+  isLoading.value = false
+}
+</script>
+
+<template>
+  <AppAuthLogin :schema="loginSchema" :is-loading="isLoading" @submit="onSubmit" />
+</template>
+
+<style scoped></style>

app/components/content/bed/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for bed -->
+<!-- TODO: Update logic and fields for bed context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>

app/components/content/building/list.vue

@@ -0,0 +1,162 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppBuildingList from '~/components/app/building/list.vue'
+import AppBuildingEntryForm from '~/components/app/building/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from "~/lib/constants"
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail } from '~/services/infra.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.building,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'building',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Gedung',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari gedung...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Gedung'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Gedung'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppBuildingList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppBuildingEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/chamber/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for chamber -->
+<!-- TODO: Update logic and fields for chamber context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>

app/components/content/counter/list.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppCounterEntryForm from '~/components/app/counter/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getInfras, getInfraDetail } from '~/services/infra.service'
+
+const title = ref('')
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getCounterList,
+} = usePaginatedList({
+  fetchFn: async ({ page, search }) => {
+    const result = await getInfras({ search, page, infraGroup_code: 'counter' })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'counter',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Counter',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari counter...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentCounterDetail = async (id: number | string) => {
+  const result = await getInfraDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Detail Counter'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentCounterDetail(recId.value)
+      title.value = 'Edit Counter'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getCounterList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppCounterList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Counter'" size="lg" prevent-outside>
+    <AppCounterEntryForm
+      :schema="InfraSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getCounterList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getCounterList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getCounterList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/dashboard/index.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+
+const dataCard = ref({
+  totalRevenue: 0,
+  totalRevenueDesc: 0,
+  subscriptions: 0,
+  subscriptionsDesc: 0,
+  sales: 0,
+  salesDesc: 0,
+  activeNow: 0,
+  activeNowDesc: 0,
+})
+
+const dataRecentSales = [
+  {
+    name: 'Olivia Martin',
+    email: 'olivia.martin@email.com',
+    amount: 1999,
+  },
+  {
+    name: 'Jackson Lee',
+    email: 'jackson.lee@email.com',
+    amount: 39,
+  },
+  {
+    name: 'Isabella Nguyen',
+    email: 'isabella.nguyen@email.com',
+    amount: 299,
+  },
+  {
+    name: 'William Kim',
+    email: 'will@email.com',
+    amount: 99,
+  },
+  {
+    name: 'Sofia Davis',
+    email: 'sofia.davis@email.com',
+    amount: 39,
+  },
+]
+
+const summaryData: any[] = [
+  {
+    title: 'Total Pasien Hari Ini',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Rehabilitasi Medik',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'VClaim BPJS',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'SATUSEHAT Sync',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+]
+
+const linkItems = [
+  {
+    title: 'Daftar Pasien',
+    link: '/patient',
+    icon: 'i-lucide-users',
+  },
+  {
+    title: 'Rawat Jalan',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-stethoscope',
+  },
+  {
+    title: 'Rawat Inap',
+    link: '/outpatient/registration-queue',
+    icon: 'i-lucide-hospital',
+  },
+  {
+    title: 'Rehabilitasi',
+    link: '/patient',
+    icon: 'i-lucide-heart',
+  },
+]
+
+onMounted(() => {
+  dataCard.value = {
+    totalRevenue: 45231.89,
+    totalRevenueDesc: 20.1 / 100,
+    subscriptions: 2350,
+    subscriptionsDesc: 180.5 / 100,
+    sales: 12234,
+    salesDesc: 45 / 100,
+    activeNow: 573,
+    activeNowDesc: 201,
+  }
+})
+</script>
+
+<template>
+  <div class="flex w-full flex-col gap-4">
+    <div class="mt-4 flex flex-wrap items-center justify-between gap-2">
+      <h2 class="text-2xl font-bold tracking-tight">Dashboard SIMRS</h2>
+      <div class="flex items-center gap-4 space-x-2">
+        <div class="rounded-xl border bg-primary p-1 text-white">Status: Aktif</div>
+        <Button class="bg-primary p-2 text-white" size="lg">
+          <Icon name="i-lucide-refresh-ccw" class="h-6 w-6" />
+          Sinkronisasi
+        </Button>
+      </div>
+    </div>
+    <main class="my-6 flex flex-1 flex-col gap-4 md:gap-8">
+      <div class="dashboard-grid">
+        <PubMyUiSummaryCard v-for="card in summaryData" :key="card.title" :stat="card" />
+      </div>
+      <div class="dashboard-grid">
+        <Card v-for="n in 3" :key="n">
+          <CardHeader>
+            <CardTitle>Recent Sales</CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-8">
+            <div v-for="recentSales in dataRecentSales" :key="recentSales.name" class="flex items-center gap-4">
+              <Avatar class="hidden h-9 w-9 sm:flex">
+                <AvatarFallback>{{
+                  recentSales.name
+                    .split(' ')
+                    .map((n) => n[0])
+                    .join('')
+                }}</AvatarFallback>
+              </Avatar>
+              <div class="grid gap-1">
+                <p class="text-sm font-medium leading-none">
+                  {{ recentSales.name }}
+                </p>
+                <p class="text-sm text-muted-foreground">
+                  {{ recentSales.email }}
+                </p>
+              </div>
+              <div class="ml-auto font-medium"></div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+      <div>
+        <Card>
+          <CardHeader>
+            <div class="flex flex-wrap items-center gap-2">
+              <Icon name="i-lucide-activity" class="me-2 h-6 w-6 text-primary" />
+              <h2 class="text-xl font-semibold tracking-tight">Aksi Cepat</h2>
+            </div>
+          </CardHeader>
+          <CardContent class="grid cursor-pointer gap-4 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 xl:gap-5">
+            <Card
+              v-for="item in linkItems"
+              :key="item.title"
+              class="my-2 h-32 border border-primary transition-colors duration-200 hover:bg-gray-200 hover:bg-primary"
+            >
+              <NuxtLink :to="item.link">
+                <CardContent class="my-2 grid h-full grid-rows-2 place-items-center">
+                  <Icon :name="item.icon" class="h-9 w-[60px] text-primary" />
+                  <h1>{{ item.title }}</h1>
+                </CardContent>
+              </NuxtLink>
+            </Card>
+          </CardContent>
+        </Card>
+      </div>
+    </main>
+  </div>
+</template>

app/components/content/division/list.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppDivisionList from '~/components/app/division/list.vue'
+import AppDivisionEntryForm from '~/components/app/division/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DivisionSchema, type DivisionFormData } from '~/schemas/division.schema'
+import type { TreeItem } from '~/models/_base'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/division.handler'
+
+// Services
+import { getList, getDetail, getValueTreeItems } from '~/services/division.service'
+
+const divisionsTrees = ref<TreeItem[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getDivisionList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'parent,childrens',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'division',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Divisi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDivisionDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Detail Divisi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDivisionDetail(recId.value)
+      title.value = 'Edit Divisi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(
+  () => data.value,
+  async () => {
+    if (!data.value) return
+    const result = await getList({
+      'page-size': 100,
+      'only-have-children': false,
+      includes: 'parent,childrens',
+    })
+    if (result.success) {
+      const currentData = result.body.data || []
+      divisionsTrees.value = getValueTreeItems(currentData || [])
+    }
+  },
+)
+
+onMounted(async () => {
+  await getDivisionList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppDivisionList
+    :data="data"
+    :pagination-meta="paginationMeta"
+    @page-change="handlePageChange"
+  />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Divisi'"
+    size="lg"
+    prevent-outside
+  >
+    <AppDivisionEntryForm
+      :schema="DivisionSchema"
+      :divisions="divisionsTrees"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DivisionFormData | Record<string, any>, resetForm: () => void) => {
+          console.log(values)
+          if (recId > 0) {
+            handleActionEdit(recId, values, getDivisionList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getDivisionList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getDivisionList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p>
+          <strong>ID:</strong>
+          {{ record?.id }}
+        </p>
+        <p v-if="record?.name">
+          <strong>Nama:</strong>
+          {{ record.name }}
+        </p>
+        <p v-if="record?.code">
+          <strong>Kode:</strong>
+          {{ record.code }}
+        </p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/employee/entry.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: 'doctor',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/employee')
+  } 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>
+
+  <AppEmployeeEntryForm v-model="data" :items="items" />
+
+  <AppPersonEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonAddressEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonContactEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+  <AppPersonRelativeEntryForm v-model="data" :items="items" :schema="MaterialSchema" />
+
+  <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  <AppNurseEntryForm v-else-if="data.type === 'nurse'" v-model="data" />
+  <AppPharmacistEntryForm v-else-if="data.type === 'pharmacist'" v-model="data" />
+  <AppLaborantEntryForm v-else-if="data.type === 'laborant'" v-model="data" />
+  <AppNutritionistEntryForm v-else-if="data.type === 'nutritionist'" v-model="data" />
+
+  <AppUserEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>

app/components/content/employee/list.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-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/employee/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>

app/components/content/encounter/entry.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const props = defineProps<{
+  id: number
+  formType: string
+}>()
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function onClick(e: 'search' | 'add') {
+  console.log('click', e)
+  if (e === 'search') {
+    isOpen.value = true
+  } else if (e === 'add') {
+    navigateTo('/client/patient/add')
+  }
+}
+
+provide('table_data_loader', isLoading)
+</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">{{ props.formType }}</span> Kunjungan
+  </div>
+  <AppEncounterEntryForm @click="onClick" />
+  <AppSepSmallEntry v-if="props.id" />
+
+  <Dialog v-model:open="isOpen" title="Cari Pasien" size="xl" prevent-outside>
+    <AppPatientPicker :data="data" />
+  </Dialog>
+</template>

app/components/content/encounter/list.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import Filter from '~/components/pub/my-ui/nav-header/filter.vue'
+
+const props = defineProps<{
+  type: string
+}>()
+
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isFormEntryDialogOpen = ref(false)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Kunjungan',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/encounter/add'),
+  },
+}
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+    isFormEntryDialogOpen.value = true
+    console.log(' 1open filter modal')
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+watch(
+  () => recAction.value,
+  () => {
+    console.log('recAction.value', recAction.value)
+    if (props.type === 'encounter') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/encounter/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/encounter/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/encounter/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
+    } else if (props.type === 'registration') {
+      if (recAction.value === 'showDetail') {
+        navigateTo(`/rehab/registration/${recId.value}/detail`)
+      } else if (recAction.value === 'showEdit') {
+        navigateTo(`/rehab/registration/${recId.value}/edit`)
+      } else if (recAction.value === 'showProcess') {
+        navigateTo(`/rehab/registration/${recId.value}/process`)
+      } else {
+        // handle other actions
+      }
+    }
+  },
+)
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <Separator class="my-4 xl:my-5" />
+  <Filter :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppEncounterList :data="data" />
+  </div>
+
+  <Dialog v-model:open="isFormEntryDialogOpen" title="Filter" size="lg" prevent-outside>
+    <AppEncounterFilter />
+  </Dialog>
+  <!-- <Pagination :pagination-meta="paginationMeta" @page-change="handlePageChange" /> -->
+</template>

app/components/content/encounter/process.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+//
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+// Components
+import CompTab from '~/components/pub/my-ui/comp-tab/comp-tab.vue'
+import type { TabItem } from '~/components/pub/my-ui/comp-tab/type'
+
+import Status from '~/components/app/encounter/status.vue'
+import AssesmentFunctionList from '~/components/content/assesment-function/list.vue'
+import EarlyMedicalAssesmentList from '~/components/content/soapi/entry.vue'
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } })
+  },
+})
+
+const data = {
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
+  tanggalKunjungan: '23 April 2024',
+  klinik: 'Bedah',
+  tanggalLahir: '23 April 1990 (25 Tahun)',
+  jenisKelamin: 'Laki-laki',
+  jenisPembayaran: 'JKN',
+  noBilling: '223332',
+  dpjp: 'dr. Syaifullah, Sp.OT(K)',
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar', component: Status },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis', component: EarlyMedicalAssesmentList },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <PubMyUiNavContentBa label="Kembali ke Daftar Kunjungan" />
+    </div>
+    <AppEncounterQuickInfo :data="data" />
+    <CompTab :data="tabs" :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+  </div>
+</template>

app/components/content/equipment/list.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppEquipmentList from '~/components/app/equipment/list.vue'
+import AppEquipmentEntryForm from '~/components/app/equipment/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/material.handler'
+
+// Services
+import { getList, getDetail } from '~/services/material.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getEquipmentList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'equipment',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Perlengkapan (BMHP)',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah Perlengkapan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMaterialDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Detail Perlengkapan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMaterialDetail(recId.value)
+      title.value = 'Edit Perlengkapan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  uoms.value = await getUomList()
+  await getEquipmentList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+  <AppEquipmentList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Perlengkapan'"
+    size="lg"
+    prevent-outside
+  >
+    <AppEquipmentEntryForm
+      :schema="MaterialSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MaterialFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getEquipmentList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getEquipmentList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getEquipmentList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/floor/list.vue

@@ -0,0 +1,166 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppFloorList from '~/components/app/floor/list.vue'
+import AppFloorEntryForm from '~/components/app/floor/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+
+const parents = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.floor,
+      includes: 'parent',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'floor',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Lantai',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari lantai...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Lantai'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Lantai'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.building })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppFloorList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Gedung'" size="lg" prevent-outside>
+    <AppFloorEntryForm
+      :schema="InfraSchema"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/installation/list.vue

@@ -0,0 +1,175 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppInstallationList from '~/components/app/installation/list.vue'
+import AppInstallationEntryForm from '~/components/app/installation/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InstallationSchema, type InstallationFormData } from '~/schemas/installation.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/installation.handler'
+
+// Services
+import { getList, getDetail } from '~/services/installation.service'
+import { getValueLabelListConstants as getEncounterList } from '~/services/encounter.service'
+
+const encounterClasses = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getInstallationList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0, 
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'installation',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Instalasi',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentInstallationDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Detail Instalasi'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentInstallationDetail(recId.value)
+      title.value = 'Edit Instalasi'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  encounterClasses.value = getEncounterList()
+  await getInstallationList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppInstallationList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Instalasi'"
+    size="lg"
+    prevent-outside
+  >
+    <AppInstallationEntryForm
+      :schema="InstallationSchema"
+      :encounter-classes="encounterClasses"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: InstallationFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getInstallationList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getInstallationList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getInstallationList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/item-price/list.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Modal from '~/components/pub/my-ui/modal/modal.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Golongan Obat',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppMedicineGroupList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="lg" prevent-outside>
+    <AppMedicineGroupEntryForm v-model="entry" />
+  </Modal>
+</template>

app/components/content/item/list.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Modal from '~/components/pub/my-ui/modal/modal.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const data = ref([])
+const entry = ref<any>({})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  summary: false,
+  isTableLoading: false,
+})
+
+const isOpen = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: 'Item',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => (isOpen.value = true),
+  },
+}
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/medicine-group')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AppItemList :data="data" />
+  </div>
+
+  <Modal v-model:open="isOpen" title="Tambah Golongan Obat" size="xl" prevent-outside>
+    <AppItemEntryForm v-model="entry" />
+  </Modal>
+</template>

app/components/content/medicine-group/list.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineGroupList from '~/components/app/medicine-group/list.vue'
+import AppMedicineGroupEntryForm from '~/components/app/medicine-group/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-group.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine-group.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineGroupList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-group',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Kelompok Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineGroupDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Detail Kelompok Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineGroupDetail(recId.value)
+      title.value = 'Edit Kelompok Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineGroupList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicineGroupList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Kelompok Obat'"
+    size="lg"
+    prevent-outside
+  >
+    <AppMedicineGroupEntryForm
+      :schema="BaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineGroupList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineGroupList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineGroupList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/medicine-method/list.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineMethodList from '~/components/app/medicine-method/list.vue'
+import AppMedicineMethodEntryForm from '~/components/app/medicine-method/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { BaseSchema, type BaseFormData } from '~/schemas/my-ui.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine-method.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine-method.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineMethodList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine-method',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Metode Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineMethodDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Detail Metode Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineMethodDetail(recId.value)
+      title.value = 'Edit Metode Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getMedicineMethodList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicineMethodList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Metode Obat'"
+    size="lg"
+    prevent-outside
+  >
+    <AppMedicineMethodEntryForm
+      :schema="BaseSchema"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: BaseFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineMethodList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineMethodList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineMethodList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/medicine/entry.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+</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> Obat
+  </div>
+  <AppMedicineEntryForm v-model="data" />
+</template>

app/components/content/medicine/list.vue

@@ -0,0 +1,181 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppMedicineList from '~/components/app/medicine/list.vue'
+import AppMedicineEntryForm from '~/components/app/medicine/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { MedicineSchema, type MedicineFormData } from '~/schemas/medicine.schema'
+import type { MedicineGroup } from '~/models/medicine-group'
+import type { MedicineMethod } from '~/models/medicine-method'
+import type { Uom } from '~/models/uom'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/medicine.handler'
+
+// Services
+import { getList, getDetail } from '~/services/medicine.service'
+import { getValueLabelList as getMedicineGroupList } from '~/services/medicine-group.service'
+import { getValueLabelList as getMedicineMethodList } from '~/services/medicine-method.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const medicineGroups = ref<{ value: string; label: string }[]>([])
+const medicineMethods = ref<{ value: string; label: string }[]>([])
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getMedicineList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'medicineGroup,medicineMethod,uom',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'medicine',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Obat',
+  icon: 'i-lucide-medicine-bottle',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentMedicineDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentMedicineDetail(recId.value)
+      title.value = 'Detail Obat'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentMedicineDetail(recId.value)
+      title.value = 'Edit Obat'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  medicineGroups.value = await getMedicineGroupList()
+  medicineMethods.value = await getMedicineMethodList()
+  uoms.value = await getUomList()
+  await getMedicineList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+  <AppMedicineList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Obat'" size="lg" prevent-outside>
+    <AppMedicineEntryForm
+      :schema="MedicineSchema"
+      :values="recItem"
+      :medicineGroups="medicineGroups"
+      :medicineMethods="medicineMethods"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: MedicineFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getMedicineList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getMedicineList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getMedicineList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/patient/detail.vue

@@ -0,0 +1,83 @@
+<script setup lang="ts">
+import { withBase } from '~/models/_base'
+import type { HeaderPrep } from '~/components/pub/my-ui/data/types'
+import type { PatientEntity } from '~/models/patient'
+import type { Person } from '~/models/person'
+
+// Components
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+import { getPatientDetail } from '~/services/patient.service'
+
+// #region Props & Emits
+const props = defineProps<{
+  patientId: number
+}>()
+
+// #endregion
+
+// #region State & Computed
+const patient = ref(
+  withBase<PatientEntity>({
+    person: {} as Person,
+    personAddresses: [],
+    personContacts: [],
+    personRelatives: [],
+  }),
+)
+
+const headerPrep: HeaderPrep = {
+  title: 'Detail Pasien',
+  icon: 'i-lucide-user',
+}
+
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(async () => {
+  // await getPatientDetail()
+  const result = await getPatientDetail(props.patientId)
+  if (result.success) {
+    patient.value = result.body.data || {}
+  }
+})
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+function handleAction(type: string) {
+  switch (type) {
+    case 'edit':
+      // TODO: Handle edit action
+      console.log('editing data')
+      break
+
+    case 'cancel':
+      navigateTo({
+        name: 'client-patient',
+      })
+      break
+  }
+}
+// #endregion
+
+// #region Watchers
+// #endregion
+</script>
+
+<template>
+  <Header
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 border-b-2 border-b-slate-300 pb-2 xl:mb-5"
+  />
+  <AppPatientPreview
+    :person="patient.person"
+    :person-addresses="patient.personAddresses"
+    :person-contacts="patient.personContacts"
+    :person-relatives="patient.personRelatives"
+    @click="handleAction"
+  />
+</template>

app/components/content/patient/entry.vue

@@ -0,0 +1,180 @@
+<script setup lang="ts">
+import type { PatientEntity, genPatientProps } from '~/models/patient'
+import type { ExposedForm } from '~/types/form'
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { genPatient } from '~/models/patient'
+import { PatientSchema } from '~/schemas/patient.schema'
+import { PersonAddressRelativeSchema } from '~/schemas/person-address-relative.schema'
+import { PersonAddressSchema } from '~/schemas/person-address.schema'
+import { PersonContactListSchema } from '~/schemas/person-contact.schema'
+import { PersonFamiliesSchema } from '~/schemas/person-family.schema'
+import { ResponsiblePersonSchema } from '~/schemas/person-relative.schema'
+import { postPatient } from '~/services/patient.service'
+
+// #region Props & Emits
+const payload = ref<PatientEntity>()
+
+// form related state
+const personAddressForm = ref<ExposedForm<any> | null>(null)
+const personAddressRelativeForm = ref<ExposedForm<any> | null>(null)
+const personContactForm = ref<ExposedForm<any> | null>(null)
+const personEmergencyContactRelative = ref<ExposedForm<any> | null>(null)
+const personFamilyForm = ref<ExposedForm<any> | null>(null)
+const personPatientForm = ref<ExposedForm<any> | null>(null)
+
+// #endregion
+
+// #region State & Computed
+// #endregion
+
+// #region Lifecycle Hooks
+// #endregion
+
+// #region Functions
+// #endregion region
+
+// #region Utilities & event handlers
+async function submitAll() {
+  const [patient, address, addressRelative, families, contacts, emergencyContact] = await Promise.all([
+    personPatientForm.value?.validate(),
+    personAddressForm.value?.validate(),
+    personAddressRelativeForm.value?.validate(),
+    personFamilyForm.value?.validate(),
+    personContactForm.value?.validate(),
+    personEmergencyContactRelative.value?.validate(),
+  ])
+
+  const results = [patient, address, addressRelative, families, contacts, emergencyContact]
+  console.log(results)
+  const allValid = results.every((r) => r?.valid)
+
+  // exit, if form errors happend during validation
+  // for example: dropdown not selected
+  if (!allValid) return
+
+  const formDataRequest: genPatientProps = {
+    patient: patient?.values,
+    residentAddress: address?.values,
+    cardAddress: addressRelative?.values,
+    familyData: families?.values,
+    contacts: contacts?.values,
+    responsible: emergencyContact?.values,
+  }
+
+  const formData = genPatient(formDataRequest)
+  payload.value = formData
+
+  try {
+    const result = await postPatient(formData)
+    if (result.success) {
+      console.log('Patient created successfully:', result.body)
+      // Navigate to patient list or show success message
+      await navigateTo('/client/patient')
+    } else {
+      console.error('Failed to create patient:', result)
+      // Handle error - show error message to user
+    }
+  } catch (error) {
+    console.error('Error creating patient:', error)
+    // Handle error - show error message to user
+  }
+}
+// #endregion
+
+// #region Watchers
+// Watcher untuk sinkronisasi alamat ketika isSameAddress = '1'
+watch(
+  () => personAddressForm.value?.values,
+  (newAddressValues) => {
+    // Cek apakah alamat KTP harus sama dengan alamat sekarang
+    const isSameAddress = personAddressRelativeForm.value?.values?.isSameAddress === '1'
+
+    if (isSameAddress && newAddressValues && personAddressRelativeForm.value) {
+      // Sinkronkan semua field alamat dari alamat sekarang ke alamat KTP
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          provinceId: newAddressValues.provinceId || '',
+          regencyId: newAddressValues.regencyId || '',
+          districtId: newAddressValues.districtId || '',
+          villageId: newAddressValues.villageId || '',
+          zipCode: newAddressValues.zipCode || '',
+          address: newAddressValues.address || '',
+          rt: newAddressValues.rt || '',
+          rw: newAddressValues.rw || '',
+        },
+        false,
+      )
+    }
+  },
+  { deep: true },
+)
+
+// Watcher untuk memantau perubahan isSameAddress
+watch(
+  () => personAddressRelativeForm.value?.values?.isSameAddress,
+  (isSameAddress) => {
+    if (isSameAddress === '1' && personAddressForm.value?.values && personAddressRelativeForm.value) {
+      // Ketika isSameAddress diubah menjadi '1', copy alamat sekarang ke alamat KTP
+      const currentAddressValues = personAddressForm.value.values
+      personAddressRelativeForm.value.setValues(
+        {
+          ...personAddressRelativeForm.value.values,
+          provinceId: currentAddressValues.provinceId || '',
+          regencyId: currentAddressValues.regencyId || '',
+          districtId: currentAddressValues.districtId || '',
+          villageId: currentAddressValues.villageId || '',
+          zipCode: currentAddressValues.zipCode || '',
+          address: currentAddressValues.address || '',
+          rt: currentAddressValues.rt || '',
+          rw: currentAddressValues.rw || '',
+        },
+        false,
+      )
+    }
+  },
+)
+// #endregion
+</script>
+
+<template>
+  <div class="mb-5 border-b border-b-slate-300 pb-3 text-lg font-semibold xl:text-xl">Tambah Pasien</div>
+  <AppPatientEntryForm
+    ref="personPatientForm"
+    :schema="PatientSchema"
+  />
+  <AppPersonAddressEntryForm
+    ref="personAddressForm"
+    title="Alamat Sekarang"
+    :schema="PersonAddressSchema"
+  />
+  <AppPersonAddressEntryFormRelative
+    ref="personAddressRelativeForm"
+    title="Alamat KTP"
+    :schema="PersonAddressRelativeSchema"
+  />
+  <AppPersonFamilyParentsForm
+    ref="personFamilyForm"
+    title="Identitas Orang Tua"
+    :schema="PersonFamiliesSchema"
+  />
+  <AppPersonContactEntryForm
+    ref="personContactForm"
+    title="Kontak Pasien"
+    :contact-limit="10"
+    :schema="PersonContactListSchema"
+  />
+  <AppPersonRelativeEntryForm
+    ref="personEmergencyContactRelative"
+    title="Penanggung Jawab"
+    :schema="ResponsiblePersonSchema"
+  />
+
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="submitAll" />
+  </div>
+</template>
+
+<style scoped>
+/* component style */
+</style>

app/components/content/patient/list.vue

@@ -0,0 +1,216 @@
+<script setup lang="ts">
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+// #region Imports
+import { Calendar, Hospital, UserCheck, UsersRound } from 'lucide-vue-next'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import { ActionEvents } from '~/components/pub/my-ui/data/types'
+
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import SummaryCard from '~/components/pub/my-ui/summary-card/summary-card.vue'
+import { usePaginatedList } from '~/composables/usePaginatedList'
+
+import { getPatients, removePatient } from '~/services/patient.service'
+
+// #endregion
+
+// #region State
+const { data, isLoading, paginationMeta, searchInput, handlePageChange, handleSearch, fetchData } = usePaginatedList({
+  fetchFn: (params) => getPatients({ ...params, includes: ['person', 'person-Addresses'] }),
+  entityName: 'patient',
+})
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (val: string) => {
+    searchInput.value = val
+  },
+  onClear: () => {
+    searchInput.value = ''
+  },
+}
+
+const isRecordConfirmationOpen = ref(false)
+const summaryLoading = ref(false)
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Pasien',
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/client/patient/add'),
+  },
+}
+
+const summaryData = ref<Summary[]>([
+  {
+    title: 'Total Pasien',
+    icon: UsersRound,
+    metric: 23,
+    trend: 15,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pasien Aktif',
+    icon: UserCheck,
+    metric: 100,
+    trend: 9,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Kunjungan Hari Ini',
+    icon: Calendar,
+    metric: 52,
+    trend: 1,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Peserta BPJS',
+    icon: Hospital,
+    metric: 71,
+    trend: -3,
+    timeframe: 'daily',
+  },
+])
+// #endregion
+
+// #region Lifecycle Hooks
+onMounted(() => {
+  getPatientSummary()
+})
+// #endregion
+
+// #region Functions
+async function getPatientSummary() {
+  try {
+    summaryLoading.value = true
+    await new Promise((resolve) => setTimeout(resolve, 500))
+  } catch (error) {
+    console.error('Error fetching patient summary:', error)
+  } finally {
+    summaryLoading.value = false
+  }
+}
+
+// Handle confirmation result
+async function handleConfirmDelete(record: any, action: string) {
+  console.log('Confirmed action:', action, 'for record:', record)
+
+  if (action === 'delete' && record?.id) {
+    try {
+      const result = await removePatient(record.id)
+      if (result.success) {
+        console.log('Patient deleted successfully')
+        // Refresh the list
+        await fetchData()
+      } else {
+        console.error('Failed to delete patient:', result)
+        // Handle error - show error message to user
+      }
+    } catch (error) {
+      console.error('Error deleting patient:', error)
+      // Handle error - show error message to user
+    }
+  }
+}
+
+function handleCancelConfirmation() {
+  // Reset record state when cancelled
+  recId.value = 0
+  recAction.value = ''
+  recItem.value = null
+}
+// #endregion
+
+// #region Provide
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+// #endregion
+
+// #region Watchers
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      navigateTo({
+        name: 'client-patient-id',
+        params: { id: recId.value },
+      })
+      break
+
+    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>
+  <Header
+    v-model:search="searchInput"
+    :prep="{ ...headerPrep }"
+    :ref-search-nav="refSearchNav"
+  />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <div class="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
+      <template v-if="summaryLoading">
+        <SummaryCard
+          v-for="n in 4"
+          :key="n"
+          is-skeleton
+        />
+      </template>
+      <template v-else>
+        <SummaryCard
+          v-for="card in summaryData"
+          :key="card.title"
+          :stat="card"
+        />
+      </template>
+    </div>
+    <AppPatientList
+      :data="data"
+      :pagination-meta="paginationMeta"
+      @page-change="handlePageChange"
+    />
+  </div>
+
+  <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>
+</template>

app/components/content/prescription/list.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import PrescriptionItemListEntry from '~/components/app/prescription-item/list-entry.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: 'Resep Obat',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/tools-equipment-src/equipment/add'),
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+onMounted(() => {
+  getMaterialList()
+})
+
+async function getMaterialList() {
+  isLoading.dataListLoading = true
+
+  // const resp = await xfetch('/api/v1/material')
+  // if (resp.success) {
+  //   data.value = (resp.body as Record<string, any>).data
+  // }
+
+  isLoading.dataListLoading = false
+}
+</script>
+
+<template>
+  <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+  <AppPrescriptionList v-if="!isLoading.dataListLoading" />
+  <AppPrescriptionEntry />
+  <PrescriptionItemListEntry :data=[] />
+  <div>
+    <Button>
+      Tambah
+    </Button>
+  </div>
+</template>

app/components/content/rehab/registration/home.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import ListProsedur from './sep-prosedur/list.vue'
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'medis', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'fungsi', label: 'Asesmen Fungsi', component: ListProsedur },
+  { value: 'protokol', label: 'Protokol Terapi' },
+  { value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'cprj', label: 'CPRJ' },
+  { value: 'obat', label: 'Order Obat' },
+  { value: 'alkes', label: 'Order Alkes' },
+  { value: 'radiologi', label: 'Order Radiologi' },
+  { value: 'labpk', label: 'Order Lab PK' },
+  { value: 'labmikro', label: 'Order Lab Mikro' },
+  { value: 'labpa', label: 'Order Lab PA' },
+  { value: 'ruangtindakan', label: 'Order Ruang Tindakan' },
+  { value: 'hasil', label: 'Hasil Penunjang' },
+  { value: 'konsultasi', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'kontrol', label: 'Surat Kontrol' },
+  { value: 'skrining', label: 'Skrinning MPP' },
+  { value: 'upload', label: 'Upload Dokumen Pendukung' },
+]
+const data = {
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
+  tanggalKunjungan: '23 April 2024',
+  klinik: 'Bedah',
+  tanggalLahir: '23 April 1990 (25 Tahun)',
+  jenisKelamin: 'Laki-laki',
+  jenisPembayaran: 'JKN',
+  noBilling: '223332',
+  dpjp: 'dr. Syaifullah, Sp.OT(K)',
+}
+
+const activeTab = ref('fungsi')
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <button
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Daftar Kunjungan
+      </button>
+    </div>
+
+    <AppPatientQuickInfo :data="data" />
+    <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+      <button
+        v-for="tab in tabs"
+        :key="tab.value"
+        :data-active="activeTab === tab.value"
+        class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium transition data-[active=false]:bg-gray-100 data-[active=true]:bg-green-600 data-[active=false]:text-gray-700 data-[active=true]:text-white"
+        @click="activeTab = tab.value"
+      >
+        {{ tab.label }}
+      </button>
+    </div>
+
+    <div class="mt-4 rounded-md border p-4">
+      <component
+        :is="tabs.find((t) => t.value === activeTab)?.component"
+        v-if="tabs.find((t) => t.value === activeTab)?.component"
+        v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+        :label="tabs.find((t) => t.value === activeTab)?.label"
+      />
+    </div>
+  </div>
+</template>

app/components/content/rehab/registration/sep-prosedur/add.vue

@@ -0,0 +1,3 @@
+<template>
+  <div>halo</div>
+</template>

app/components/content/rehab/registration/sep-prosedur/list.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import RehabSepProsedurList from '~/components/app/rehab/registration/sep-prosedur/list.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => navigateTo('/rehab/registration-queue/sep-prosedur/add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <RehabSepProsedurList :data="data" />
+  </div>
+</template>

app/components/content/room/list.vue

@@ -0,0 +1,200 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import AppRoomList from '~/components/app/room/list.vue'
+import AppRoomEntryForm from '~/components/app/room/entry-form.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+
+// Constants
+import { infraGroupCodesKeys } from '~/lib/constants'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { InfraSchema, type InfraFormData } from '~/schemas/infra.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/infra.handler'
+
+// Services
+import { getList, getDetail, getValueLabelList } from '~/services/infra.service'
+import { getValueLabelList as getSpecialistList } from '~/services/specialist.service'
+import { getValueLabelList as getSubspecialistList } from '~/services/subspecialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const parents = ref<{ value: string | number; label: string }[]>([])
+const specialists = ref<{ value: string; label: string }[]>([])
+const subspecialists = ref<{ value: string; label: string }[]>([])
+const units = ref<{ value: string; label: string }[]>([])
+const selectedUnit = ref<string | number | null>(null)
+const selectedSpecialist = ref<string | number | null>(null)
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getItemList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 2,
+      'page-size': params['page-size'] || 10,
+      'infraGroup-code': infraGroupCodesKeys.room,
+      includes: 'parent,specialist,subspecialist,unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'room',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Ruangan',
+  icon: 'i-lucide-layout-list',
+  refSearchNav: {
+    placeholder: 'Cari Ruangan...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (val: string) => {
+      searchInput.value = val
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentDetail(recId.value)
+      title.value = 'Detail Ruangan'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentDetail(recId.value)
+      title.value = 'Edit Ruangan'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+watch(selectedUnit, async (val) => {
+  if (val) {
+    specialists.value = await getSpecialistList({ 'unit-id': val, 'page-size': 100 })
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  } else {
+    specialists.value = []
+    selectedSpecialist.value = null
+    subspecialists.value = []
+  }
+})
+
+watch(selectedSpecialist, async (val) => {
+  if (val) {
+    subspecialists.value = await getSubspecialistList({ 'specialist-id': val, 'page-size': 100 })
+  } else {
+    subspecialists.value = []
+  }
+})
+
+onMounted(async () => {
+  parents.value = await getValueLabelList({ 'infraGroup-code': infraGroupCodesKeys.floor })
+  units.value = await getUnitList({ 'page-size': 100 })
+  await getItemList()
+})
+</script>
+
+<template>
+  <Header v-model="searchInput" :prep="headerPrep" @search="handleSearch" class="mb-4 xl:mb-5" />
+  <AppRoomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Ruangan'" size="lg" prevent-outside>
+    <AppRoomEntryForm
+      :schema="InfraSchema"
+      :specialists="specialists"
+      :subspecialists="subspecialists"
+      :units="units"
+      :parents="parents"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @update:selected-unit="(val: any) => (selectedUnit = val)"
+      @update:selected-specialist="(val: any) => (selectedSpecialist = val)"
+      @submit="
+        (values: InfraFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getItemList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getItemList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getItemList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/satusehat/const.ts

@@ -0,0 +1,97 @@
+import type { ServiceStatus } from '~/components/pub/my-ui/service-status/type'
+import type { Summary } from '~/components/pub/my-ui/summary-card/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import { CircleCheckBig, CircleDashed, CircleX, Send } from 'lucide-vue-next'
+
+export const tabs = [
+  {
+    value: 'all',
+    label: 'Semua Resource',
+  },
+  {
+    value: 'patient',
+    label: 'Patient',
+  },
+  {
+    value: 'encounter',
+    label: 'Encounter',
+  },
+  {
+    value: 'observation',
+    label: 'Observation',
+  },
+]
+
+export const actions = [
+  {
+    value: 'export',
+    label: 'Ekspor',
+    icon: 'i-lucide-download',
+  },
+]
+
+// Status filter options
+export const statusOptions = [
+  { value: '0', label: 'Failed' },
+  { value: '1', label: 'Pending' },
+  { value: '2', label: 'Success' },
+]
+export const summaryData: Summary[] = [
+  {
+    title: 'Resource Terkirim',
+    icon: Send,
+    metric: 1245,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Sync Success',
+    icon: CircleCheckBig,
+    metric: '97%',
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Pending Queue',
+    icon: CircleDashed,
+    metric: 32,
+    trend: 0,
+    timeframe: 'daily',
+  },
+  {
+    title: 'Failed Items',
+    icon: CircleX,
+    metric: 10,
+    trend: 0,
+    timeframe: 'daily',
+  },
+]
+
+// SATUSEHAT Service integration
+export const service = reactive<ServiceStatus>({
+  serviceName: 'SATUSEHAT',
+  serviceDesc: 'SATUSEHAT - FHIR R4 Compliant',
+  sessionActive: false,
+  status: 'connecting',
+  isSkeleton: false,
+})
+
+export const headerPrep: HeaderPrep = {
+  title: 'SATUSEHAT Integration',
+  icon: 'i-lucide-box',
+  addNav: {
+    label: 'Kirim Resource',
+    icon: 'i-lucide-send',
+    // onClick: () => navigateTo('/patient/add'),
+  },
+}
+
+export const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+  },
+  onClear: () => {
+  },
+}

app/components/content/satusehat/list.vue

@@ -0,0 +1,225 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import { useUrlSearchParams } from '@vueuse/core'
+import Header from '~/components/pub/my-ui/nav-header/header.vue'
+import { actions, headerPrep, refSearchNav, service, summaryData, tabs } from './const'
+import { defaultQuery, querySchema, tabSwitcher } from './schema.query'
+import { Form } from '~/components/pub/ui/form'
+
+// State management
+const data = ref([])
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+const isLoading = reactive<DataTableLoader>({
+  satusehatConn: true,
+  isTableLoading: false,
+})
+const queryParams = useUrlSearchParams('history', {
+  initialValue: defaultQuery,
+  removeFalsyValues: true,
+})
+const params = computed(() => {
+  const result = querySchema.safeParse(queryParams)
+  return result.data
+})
+// Pagination state
+const pagination = ref({
+  total: 0,
+  page: 1,
+  limit: 10,
+  total_pages: 0,
+  has_next: false,
+  has_prev: false,
+})
+
+// API function to fetch data
+async function fetchData() {
+  try {
+    isLoading.isTableLoading = true
+    data.value = []
+    const response = await xfetch('/api/v1/satusehat/list', 'POST', {
+      resource_type: params.value?.resource_type,
+      date_from: params.value?.date_from,
+      date_to: params.value?.date_to,
+      search: params.value?.q,
+      page: params.value?.page,
+      limit: params.value?.limit,
+    })
+
+    if (response.success) {
+      data.value = response.body.data
+      pagination.value = response.body.meta
+    }
+  } catch (error) {
+    console.error('Error fetching data:', error)
+    data.value = []
+  } finally {
+    isLoading.isTableLoading = false
+  }
+}
+
+async function callSatuSehat() {
+  try {
+    await new Promise((resolve) => setTimeout(resolve, 500))
+    service.status = 'connected'
+    // service.status = 'error'
+    service.sessionActive = true
+    // service.sessionActive = false
+  } finally {
+    isLoading.satusehatConn = false
+  }
+}
+
+// Initialize params from URL on mount
+onMounted(async () => {
+  await callSatuSehat()
+  await fetchData()
+})
+
+// Watch for url param changed state and trigger refetch
+watch(params, () => {
+  fetchData()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+// Sync active tab filter with queryparams
+// fallback and default to `all` filter
+const activeTabFilter = computed({
+  get: () => {
+    const result = tabSwitcher.parse(queryParams.resource_type)
+    return result
+  },
+  set: (value) => {
+    queryParams.resource_type = value
+    queryParams.q = defaultQuery.q
+    queryParams.page = defaultQuery.page
+    queryParams.limit = defaultQuery.limit
+    queryParams.date_from = defaultQuery.date_from
+    queryParams.date_to = defaultQuery.date_to
+  },
+})
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="headerPrep" :ref-search-nav="refSearchNav" />
+    <div class="my-4 flex flex-1 flex-col gap-3 md:gap-4">
+      <PubMyUiServiceStatus v-bind="service" />
+      <AppSatusehatCardSummary :is-loading="isLoading.satusehatConn!" :summary-data="summaryData" />
+    </div>
+    <div class="rounded-md border p-4">
+      <h2 class="text-md py-2 font-semibold">FHIR Resource</h2>
+      <Tabs v-model="activeTabFilter">
+        <div class="scrollbar-hide flex justify-between gap-2 overflow-x-auto">
+          <TabsList>
+            <TabsTrigger
+              v-for="tab in tabs"
+              :key="tab.value"
+              :value="tab.value"
+              class="flex-shrink-0 px-4 py-2 text-sm font-medium data-[state=active]:bg-green-600 data-[state=inactive]:bg-gray-100 data-[state=active]:text-white data-[state=inactive]:text-gray-700"
+            >
+              {{ tab.label }}
+            </TabsTrigger>
+          </TabsList>
+          <div class="flex items-center gap-2">
+            <!-- Search Input -->
+
+            <AppSatusehatPicker />
+            <div class="relative w-full max-w-sm">
+              <Dialog>
+                <DialogTrigger>
+                  <Input type="text" placeholder="Cari pasien..." class="h-9 pl-3" />
+                </DialogTrigger>
+                <DialogContent>
+                  <DialogHeader class="border-b-1">
+                    <DialogTitle class="pb-2">Pencarian</DialogTitle>
+                  </DialogHeader>
+                  <Form>
+                    <FormField v-slot="{ componentField }" name="username">
+                      <FormItem>
+                        <FormLabel>Pasien</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="nama pasien, id pasien" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="status">
+                      <FormItem>
+                        <FormLabel>Status</FormLabel>
+                        <FormControl>
+                          <Select v-bind="componentField">
+                            <SelectTrigger class="border border-gray-300 bg-white">
+                              <SelectValue class="text-gray-400" placeholder="-- select item" />
+                            </SelectTrigger>
+                            <SelectContent class="bg-white">
+                              <SelectItem value="0"> Gagal </SelectItem>
+                              <SelectItem value="1"> Pending </SelectItem>
+                              <SelectItem value="2"> Terkirim </SelectItem>
+                            </SelectContent>
+                          </Select>
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                    <FormField v-slot="{ componentField }" name="fhirId">
+                      <FormItem>
+                        <FormLabel>FHIR ID</FormLabel>
+                        <FormControl>
+                          <Input type="text" placeholder="fhir id" v-bind="componentField" />
+                        </FormControl>
+                      </FormItem>
+                    </FormField>
+                  </Form>
+
+                  <DialogFooter>
+                    <Button variant="outline"> Reset </Button>
+                    <Button> Apply </Button>
+                  </DialogFooter>
+                </DialogContent>
+              </Dialog>
+            </div>
+
+            <!-- Action Buttons -->
+            <AppSatusehatButtonAction
+              v-for="action in actions"
+              :key="action.value"
+              :icon="action.icon"
+              :text="action.label"
+            />
+          </div>
+        </div>
+        <div class="mt-4">
+          <TabsContent v-for="tab in tabs" :key="`content-${tab.value}`" :value="tab.value">
+            <div class="rounded-md border p-4">
+              <AppSatusehatList v-if="!isLoading.satusehatConn" :data="data" />
+
+              <!-- Pagination -->
+              <div
+                v-if="!isLoading.satusehatConn && !isLoading.isTableLoading && pagination.total > 0"
+                class="mt-4 flex items-center justify-between"
+              >
+                <div class="text-sm text-muted-foreground">
+                  Menampilkan {{ (pagination.page - 1) * pagination.limit + 1 }} -
+                  {{ Math.min(pagination.page * pagination.limit, pagination.total) }}
+                  dari {{ pagination.total }} data
+                </div>
+                <div class="flex gap-2">
+                  <Button v-if="pagination.has_prev" variant="outline" size="sm" @click="queryParams.page--">
+                    Sebelumnya
+                  </Button>
+                  <Button v-if="pagination.has_next" variant="outline" size="sm" @click="queryParams.page++">
+                    Selanjutnya
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </TabsContent>
+        </div>
+      </Tabs>
+    </div>
+  </div>
+</template>

app/components/content/satusehat/schema.query.ts

@@ -0,0 +1,23 @@
+import * as z from 'zod'
+
+const resourceTabEnum = z.enum(['all', 'patient', 'encounter', 'observation'])
+
+export const tabSwitcher = resourceTabEnum.default('all').catch('all')
+export const querySchema = z.object({
+  q: z.string().min(3).optional().catch(''),
+  resource_type: tabSwitcher,
+  date_from: z.string().optional().catch(''),
+  date_to: z.string().optional().catch(''),
+  page: z.coerce.number().int().min(1).default(1).catch(1),
+  limit: z.coerce.number().int().min(1).max(20).default(10).catch(10),
+})
+
+export const defaultQuery = {
+  q: '',
+  status: '',
+  resource_type: 'all',
+  date_from: '',
+  date_to: '',
+  page: 1,
+  limit: 10,
+}

app/components/content/sep/entry.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+const openPatient = ref(false)
+const openLetter = ref(false)
+const openHistory = ref(false)
+const selectedPatient = ref('3456512345678880')
+const selectedLetter = ref('SK22334442')
+
+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',
+  },
+]
+
+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)
+}
+
+function handleSaveLetter() {
+  console.log('Letter dipilih:', selectedLetter.value)
+}
+
+function handleEvent(value: string) {
+  if (value === 'search-patient') {
+    openPatient.value = true
+    return
+  }
+  if (value === 'search-letter') {
+    openLetter.value = true
+    return
+  }
+  if (value === 'history-sep') {
+    openHistory.value = true
+    return
+  }
+  if (value === 'back') {
+    navigateTo('/bpjs/sep')
+  }
+}
+</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 @event="handleEvent" />
+  <AppSepTableSearchPatient
+    v-model:open="openPatient"
+    v-model:selected="selectedPatient"
+    :patients="patients"
+    @save="handleSavePatient"
+  />
+  <AppSepTableSearchLetter
+    v-model:open="openLetter"
+    v-model:selected="selectedLetter"
+    :letters="letters"
+    @save="handleSaveLetter"
+  />
+  <AppSepTableHistorySep
+    v-model:open="openHistory"
+    :histories="histories"
+  />
+
+</template>

app/components/content/sep/list.vue

@@ -0,0 +1,250 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  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
+  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 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
+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: () => {
+      navigateTo('/bpjs/sep/add')
+    },
+  },
+}
+
+async function getSepList() {
+  isLoading.dataListLoading = true
+  data.value = [...rows]
+  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
+}
+
+function handleDelete() {
+  console.log('Data dihapus:', sepData)
+  open.value = false
+}
+
+watch(
+  () => recAction.value,
+  () => {
+    if (recAction.value === 'showConfirmDel') {
+      open.value = true
+    }
+  },
+)
+
+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 }" />
+    <!-- Filter Bar -->
+    <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" />
+
+      <!-- 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 -->
+      <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">
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+
+    <!-- Pagination -->
+    <template v-if="paginationMeta">
+      <div v-if="paginationMeta.totalPage > 1">
+        <PubMyUiPagination :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>

app/components/content/soapi/entry.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+import EarlyMedicalAssesmentList from './list.vue'
+import EarlyMedicalAssesmentForm from './form.vue'
+
+const { mode, openForm, backToList } = useQueryMode('mode')
+</script>
+
+<template>
+  <div>
+    <EarlyMedicalAssesmentList v-if="mode === 'list'" @add="openForm" />
+    <EarlyMedicalAssesmentForm v-else @back="backToList" />
+  </div>
+</template>

app/components/content/soapi/form.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import Entry from '~/components/app/soapi/entry.vue'
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+
+const isOpen = ref(false)
+const data = ref([])
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+async function getPatientList() {
+  isLoading.isTableLoading = true
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+  isLoading.isTableLoading = false
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+function handleClick(type: string) {
+  console.log(type)
+  isOpen.value = true
+}
+
+provide('table_data_loader', isLoading)
+</script>
+<template>
+  <Entry type="early" :exclude-fields="['prim-compl', 'sec-compl']" @click="handleClick" />
+  <Dialog v-model:open="isOpen" title="Pilih Prosedur" size="xl" prevent-outside>
+    <AppIcdMultiselectPicker :data="data" />
+  </Dialog>
+</template>

app/components/content/soapi/list.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import AssesmentFunctionList from '~/components/app/soapi/list.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+
+const props = defineProps<{
+  label: string
+}>()
+
+const emits = defineEmits(['add', 'edit'])
+
+const data = ref([])
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+// Loading state management
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const hreaderPrep: HeaderPrep = {
+  title: props.label,
+  icon: 'i-lucide-users',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => emits('add'),
+  },
+}
+
+async function getPatientList() {
+  const resp = await xfetch('/api/v1/patient')
+  if (resp.success) {
+    data.value = (resp.body as Record<string, any>).data
+  }
+}
+
+onMounted(() => {
+  getPatientList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <Header :prep="{ ...hreaderPrep }" :ref-search-nav="refSearchNav" />
+  <div class="my-4 flex flex-1 flex-col gap-4 md:gap-8">
+    <AssesmentFunctionList :data="data" />
+  </div>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+import { MaterialSchema, type MaterialFormData } from '~/schemas/material.schema'
+
+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>

app/components/content/specialist-intern/list.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-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>

app/components/content/specialist/list.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSpecialistList from '~/components/app/specialist/list.vue'
+import AppSpecialistEntryForm from '~/components/app/specialist/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { SpecialistSchema, type SpecialistFormData } from '~/schemas/specialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/specialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/specialist.service'
+import { getValueLabelList as getUnitList } from '~/services/unit.service'
+
+const units = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'unit',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'specialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Spesialis',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Detail Spesialis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSpecialistDetail(recId.value)
+      title.value = 'Edit Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  units.value = await getUnitList()
+  await getSpecialistList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Spesialis'"
+    size="lg"
+    prevent-outside
+  >
+    <AppSpecialistEntryForm
+      :schema="SpecialistSchema"
+      :units="units"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SpecialistFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/subspecialist/list.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppSubSpecialistList from '~/components/app/subspecialist/list.vue'
+import AppSubSpecialistEntryForm from '~/components/app/subspecialist/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { SubspecialistSchema, type SubspecialistFormData } from '~/schemas/subspecialist.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/subspecialist.handler'
+
+// Services
+import { getList, getDetail } from '~/services/subspecialist.service'
+import { getValueLabelList as getSpecialistsList } from '~/services/specialist.service'
+
+const specialists = ref<{ value: string | number; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getSubSpecialistList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'specialist',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'subspecialist',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Sub Spesialis',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentSubSpecialistDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Detail Sub Spesialis'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentSubSpecialistDetail(recId.value)
+      title.value = 'Edit Sub Spesialis'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  specialists.value = await getSpecialistsList()
+  await getSubSpecialistList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppSubSpecialistList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Sub Spesialis'"
+    size="lg"
+    prevent-outside
+  >
+    <AppSubSpecialistEntryForm
+      :schema="SubspecialistSchema"
+      :specialists="specialists"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: SubspecialistFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getSubSpecialistList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getSubSpecialistList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getSubSpecialistList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/tools/list.vue

@@ -0,0 +1,176 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppToolsList from '~/components/app/tools/list.vue'
+import AppToolsEntryForm from '~/components/app/tools/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { DeviceSchema, type DeviceFormData } from '~/schemas/device.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/device.handler'
+
+// Services
+import { getList, getDetail } from '~/services/device.service'
+import { getValueLabelList as getUomList } from '~/services/uom.service'
+
+const uoms = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getToolsList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({ search: params.search, 'page-number': params['page-number'] || 0 })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'device',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Peralatan',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {
+      // Handle search button click if needed
+    },
+    onClear: () => {
+      // Handle search clear
+    },
+  },
+  addNav: {
+    label: 'Tambah Peralatan',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentToolsDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+  }
+}
+
+// Watch for row actions
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Detail Peralatan'
+      isReadonly.value = true
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentToolsDetail(recId.value)
+      title.value = 'Edit Peralatan'
+      isReadonly.value = false
+      isFormEntryDialogOpen.value = true
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  uoms.value = await getUomList()
+  await getToolsList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    @search="handleSearch"
+    :ref-search-nav="headerPrep.refSearchNav"
+    class="mb-4 xl:mb-5"
+  />
+  <AppToolsList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog
+    v-model:open="isFormEntryDialogOpen"
+    :title="!!recItem ? title : 'Tambah Peralatan'"
+    size="lg"
+    prevent-outside
+  >
+    <AppToolsEntryForm
+      :schema="DeviceSchema"
+      :values="recItem"
+      :uoms="uoms"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: DeviceFormData, resetForm: any) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getToolsList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getToolsList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getToolsList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/unit/list.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUnitList from '~/components/app/unit/list.vue'
+import AppUnitEntryForm from '~/components/app/unit/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { UnitSchema, type UnitFormData } from '~/schemas/unit.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/unit.handler'
+
+// Services
+import { getList, getDetail } from '~/services/unit.service'
+import { getValueLabelList as getInstallationList } from '~/services/installation.service'
+
+const installations = ref<{ value: string; label: string }[]>([])
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUnitList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+      includes: 'installation',
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'unit',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Unit',
+  icon: 'i-lucide-box',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUnitDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Detail Unit'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUnitDetail(recId.value)
+      title.value = 'Edit Unit'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  installations.value = await getInstallationList()
+  await getUnitList()
+})
+</script>
+
+<template>
+  <Header
+    v-model="searchInput"
+    :prep="headerPrep"
+    :ref-search-nav="headerPrep.refSearchNav"
+    @search="handleSearch"
+    class="mb-4 xl:mb-5"
+  />
+  <AppUnitList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+
+  <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Unit'" size="lg" prevent-outside>
+    <AppUnitEntryForm
+      :schema="UnitSchema"
+      :installations="installations"
+      :values="recItem"
+      :is-loading="isProcessing"
+      :is-readonly="isReadonly"
+      @submit="
+        (values: UnitFormData | Record<string, any>, resetForm: () => void) => {
+          if (recId > 0) {
+            handleActionEdit(recId, values, getUnitList, resetForm, toast)
+            return
+          }
+          handleActionSave(values, getUnitList, resetForm, toast)
+        }
+      "
+      @cancel="handleCancelForm"
+    />
+  </Dialog>
+
+  <!-- Record Confirmation Modal -->
+  <RecordConfirmation
+    v-model:open="isRecordConfirmationOpen"
+    action="delete"
+    :record="recItem"
+    @confirm="() => handleActionRemove(recId, getUnitList, toast)"
+    @cancel=""
+  >
+    <template #default="{ record }">
+      <div class="text-sm">
+        <p><strong>ID:</strong> {{ record?.id }}</p>
+        <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+        <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+      </div>
+    </template>
+  </RecordConfirmation>
+</template>

app/components/content/uom/list.vue

@@ -0,0 +1,169 @@
+<script setup lang="ts">
+// Components
+import Dialog from '~/components/pub/my-ui/modal/dialog.vue'
+import Header from '~/components/pub/my-ui/nav-header/prep.vue'
+import RecordConfirmation from '~/components/pub/my-ui/confirmation/record-confirmation.vue'
+import AppUomEntryForm from '~/components/app/uom/entry-form.vue'
+
+// Helpers
+import { usePaginatedList } from '~/composables/usePaginatedList'
+import { toast } from '~/components/pub/ui/toast'
+
+// Types
+import { ActionEvents, type HeaderPrep } from '~/components/pub/my-ui/data/types'
+import { UomSchema, type UomFormData } from '~/schemas/uom.schema'
+
+// Handlers
+import {
+  recId,
+  recAction,
+  recItem,
+  isReadonly,
+  isProcessing,
+  isFormEntryDialogOpen,
+  isRecordConfirmationOpen,
+  handleActionSave,
+  handleActionEdit,
+  handleActionRemove,
+  handleCancelForm,
+} from '~/handlers/uom.handler'
+
+// Services
+import { getList, getDetail } from '~/services/uom.service'
+
+const title = ref('')
+
+const {
+  data,
+  isLoading,
+  paginationMeta,
+  searchInput,
+  handlePageChange,
+  handleSearch,
+  fetchData: getUomList,
+} = usePaginatedList({
+  fetchFn: async (params: any) => {
+    const result = await getList({
+      search: params.search,
+      'page-number': params['page-number'] || 0,
+      'page-size': params['page-size'] || 10,
+    })
+    return { success: result.success || false, body: result.body || {} }
+  },
+  entityName: 'uom',
+})
+
+const headerPrep: HeaderPrep = {
+  title: 'Uom',
+  icon: 'i-lucide-layout-dashboard',
+  refSearchNav: {
+    placeholder: 'Cari (min. 3 karakter)...',
+    minLength: 3,
+    debounceMs: 500,
+    showValidationFeedback: true,
+    onInput: (value: string) => {
+      searchInput.value = value
+    },
+    onClick: () => {},
+    onClear: () => {},
+  },
+  addNav: {
+    label: 'Tambah',
+    icon: 'i-lucide-plus',
+    onClick: () => {
+      recItem.value = null
+      recId.value = 0
+      isFormEntryDialogOpen.value = true
+      isReadonly.value = false
+    },
+  },
+}
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+
+const getCurrentUomDetail = async (id: number | string) => {
+  const result = await getDetail(id)
+  if (result.success) {
+    const currentValue = result.body?.data || {}
+    recItem.value = currentValue
+    isFormEntryDialogOpen.value = true
+  }
+}
+
+// Watch for row actions when recId or recAction changes
+watch([recId, recAction], () => {
+  switch (recAction.value) {
+    case ActionEvents.showDetail:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Detail Uom'
+      isReadonly.value = true
+      break
+    case ActionEvents.showEdit:
+      getCurrentUomDetail(recId.value)
+      title.value = 'Edit Uom'
+      isReadonly.value = false
+      break
+    case ActionEvents.showConfirmDelete:
+      isRecordConfirmationOpen.value = true
+      break
+  }
+})
+
+onMounted(async () => {
+  await getUomList()
+})
+</script>
+
+<template>
+  <div class="p-4">
+    <Header
+      v-model="searchInput"
+      :prep="headerPrep"
+      :ref-search-nav="headerPrep.refSearchNav"
+      @search="handleSearch"
+      class="mb-4 xl:mb-5"
+    />
+    <div class="rounded-md border p-4">
+      <AppUomList :data="data" :pagination-meta="paginationMeta" @page-change="handlePageChange" />
+    </div>
+
+    <Dialog v-model:open="isFormEntryDialogOpen" :title="!!recItem ? title : 'Tambah Uom'" size="lg" prevent-outside>
+      <AppUomEntryForm
+        :schema="UomSchema"
+        :values="recItem"
+        :is-loading="isProcessing"
+        :is-readonly="isReadonly"
+        @submit="
+          (values: UomFormData | Record<string, any>, resetForm: () => void) => {
+            if (recId > 0) {
+              handleActionEdit(recId, values, getUomList, resetForm, toast)
+              return
+            }
+            handleActionSave(values, getUomList, resetForm, toast)
+          }
+        "
+        @cancel="handleCancelForm"
+      />
+    </Dialog>
+
+    <!-- Record Confirmation Modal -->
+    <RecordConfirmation
+      v-model:open="isRecordConfirmationOpen"
+      action="delete"
+      :record="recItem"
+      @confirm="() => handleActionRemove(recId, getUomList, toast)"
+      @cancel=""
+    >
+      <template #default="{ record }">
+        <div class="text-sm">
+          <p><strong>ID:</strong> {{ record?.id }}</p>
+          <p v-if="record?.name"><strong>Nama:</strong> {{ record.name }}</p>
+          <p v-if="record?.code"><strong>Kode:</strong> {{ record.code }}</p>
+        </div>
+      </template>
+    </RecordConfirmation>
+  </div>
+</template>

app/components/content/user/entry.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import Action from '~/components/pub/my-ui/nav-footer/ba-dr-su.vue'
+
+const data = ref({
+  name: '',
+  password: '',
+  status: '',
+  type: '',
+})
+
+function onClick(type: string) {
+  if (type === 'cancel') {
+    navigateTo('/human-src/user')
+  } else if (type === 'draft') {
+    // do something
+  } else if (type === 'submit') {
+    // do something
+  }
+}
+</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> Dokter
+  </div>
+  <div>
+    <AppDoctorEntryForm v-if="data.type === 'doctor'" v-model="data" />
+  </div>
+  <AppUserEntryForm v-model="data" />
+  <div class="my-2 flex justify-end py-2">
+    <Action @click="onClick" />
+  </div>
+</template>

app/components/content/user/list.vue

@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/my-ui/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/my-ui/data/types'
+import Header from '~/components/pub/my-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/employee/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>

app/components/content/warehouse/list.vue

@@ -0,0 +1,8 @@
+<!-- Duplicated from content/counter/list.vue for warehouse -->
+<!-- TODO: Update logic and fields for warehouse context -->
+<template>
+  ...existing code...
+</template>
+<script setup lang="ts">
+  // ...existing code...
+</script>