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

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

diff --git a/app/components/app/sep/list-cfg.ts b/app/components/app/sep/list-cfg.ts
new file mode 100644
index 00000000..013c7d6b
--- /dev/null
+++ b/app/components/app/sep/list-cfg.ts
@@ -0,0 +1,78 @@
+import type { Col, KeyLabel, RecComponent, RecStrFuncComponent, Th } from '~/components/pub/custom-ui/data/types'
+import { defineAsyncComponent } from 'vue'
+
+type SepDto = any
+
+const action = defineAsyncComponent(() => import('~/components/pub/custom-ui/data/dropdown-action-dud.vue'))
+
+export const cols: Col[] = [
+  { width: 120 }, // TGL. SEP
+  { width: 150 }, // NO. SEP
+  { width: 120 }, // PELAYANAN
+  { width: 100 }, // JALUR
+  { width: 150 }, // NO. RM
+  { width: 200 }, // NAMA PASIEN
+  { width: 150 }, // NO. KARTU BPJS
+  { width: 150 }, // NO. SURAT KONTROL
+  { width: 150 }, // TGL SURAT KONTROL
+  { width: 150 }, // KLINIK TUJUAN
+  { width: 200 }, // DPJP
+  { width: 200 }, // DIAGNOSIS AWAL
+  { width: 100 }, // AKSI
+]
+
+export const header: Th[][] = [
+  [
+    { label: 'TGL. SEP' },
+    { label: 'NO. SEP' },
+    { label: 'PELAYANAN' },
+    { label: 'JALUR' },
+    { label: 'NO. RM' },
+    { label: 'NAMA PASIEN' },
+    { label: 'NO. KARTU BPJS' },
+    { label: 'NO. SURAT KONTROL' },
+    { label: 'TGL SURAT KONTROL' },
+    { label: 'KLINIK TUJUAN' },
+    { label: 'DPJP' },
+    { label: 'DIAGNOSIS AWAL' },
+    { label: 'AKSI' },
+  ],
+]
+
+export const keys = [
+  'tgl_sep',
+  'no_sep',
+  'pelayanan',
+  'jalur',
+  'no_rm',
+  'nama_pasien',
+  'no_kartu_bpjs',
+  'no_surat_kontrol',
+  'tgl_surat_kontrol',
+  'klinik_tujuan',
+  'dpjp',
+  'diagnosis_awal',
+  'action',
+]
+
+export const delKeyNames: KeyLabel[] = [
+  { key: 'no_sep', label: 'NO. SEP' },
+  { key: 'nama_pasien', label: 'Nama Pasien' },
+]
+
+export const funcParsed: Record<string, (row: any, ...args: any[]) => any> = {
+  
+}
+
+export const funcComponent: RecStrFuncComponent = {
+  action(rec, idx) {
+    const res: RecComponent = {
+      idx,
+      rec: rec as object,
+      component: action,
+    }
+    return res
+  },
+}
+
+export const funcHtml: Record<string, (row: any, ...args: any[]) => any> = {}
diff --git a/app/components/app/sep/list.vue b/app/components/app/sep/list.vue
new file mode 100644
index 00000000..25707062
--- /dev/null
+++ b/app/components/app/sep/list.vue
@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { cols, header, keys, funcParsed, funcComponent, funcHtml } from './list-cfg'
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const props = defineProps<{
+  data: SepData[]
+}>()
+</script>
+
+<template>
+  <PubBaseDataTable
+    :cols="cols"
+    :header="header"
+    :keys="keys"
+    :rows="props.data"
+    :funcParsed="funcParsed"
+    :funcComponent="funcComponent"
+    :funcHtml="funcHtml"
+  />
+</template>
diff --git a/app/components/content/sep/list.vue b/app/components/content/sep/list.vue
new file mode 100644
index 00000000..d8bf09aa
--- /dev/null
+++ b/app/components/content/sep/list.vue
@@ -0,0 +1,121 @@
+<script setup lang="ts">
+import type { DataTableLoader } from '~/components/pub/base/data-table/type'
+import type { HeaderPrep, RefSearchNav } from '~/components/pub/custom-ui/data/types'
+import Header from '~/components/pub/custom-ui/nav-header/prep.vue'
+
+interface SepData {
+  tgl_sep: string
+  no_sep: string
+  pelayanan: string
+  jalur: string
+  no_rm: string
+  nama_pasien: string
+  no_kartu_bpjs: string
+  no_surat_kontrol: string
+  tgl_surat_kontrol: string
+  klinik_tujuan: string
+  dpjp: string
+  diagnosis_awal: string
+}
+
+const data = ref<SepData[]>([])
+
+// contoh data dummy
+const rows = [
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM23311224',
+    nama_pasien: 'Ahmad Baidowi',
+    no_kartu_bpjs: '334423231214',
+    no_surat_kontrol: 'SK22334442',
+    tgl_surat_kontrol: '13 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'dr. Andi Prasetyo, Sp.PD-KHOM',
+    diagnosis_awal: 'C34.9 - Karsinoma Paru',
+  },
+  {
+    tgl_sep: '12 Agustus 2025',
+    no_sep: 'SP23311224',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001234',
+    nama_pasien: 'Kenzie',
+    no_kartu_bpjs: '12301234',
+    no_surat_kontrol: '123456',
+    tgl_surat_kontrol: '10 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Bronchitis',
+  },
+  {
+    tgl_sep: '11 Agustus 2025',
+    no_sep: 'SP23455667',
+    pelayanan: 'Rawat Jalan',
+    jalur: 'Kontrol',
+    no_rm: 'RM001009',
+    nama_pasien: 'Abraham Sulaiman',
+    no_kartu_bpjs: '334235',
+    no_surat_kontrol: '123334',
+    tgl_surat_kontrol: '11 Agustus 2024',
+    klinik_tujuan: 'Penyakit dalam',
+    dpjp: 'Dr. Andreas Sutaji',
+    diagnosis_awal: 'Paru-paru basah',
+  },
+]
+
+const refSearchNav: RefSearchNav = {
+  onClick: () => {
+    // open filter modal
+  },
+  onInput: (_val: string) => {
+    // filter patient list
+  },
+  onClear: () => {
+    // clear url param
+  },
+}
+
+const isLoading = reactive<DataTableLoader>({
+  isTableLoading: false,
+})
+
+const recId = ref<number>(0)
+const recAction = ref<string>('')
+const recItem = ref<any>(null)
+
+const headerPrep: HeaderPrep = {
+  title: 'Daftar SEP Prosedur',
+  icon: 'i-lucide-panel-bottom',
+  addNav: {
+    label: 'Tambah',
+    onClick: () => {},
+  },
+}
+
+async function getSepList() {
+  isLoading.dataListLoading = true
+  data.value = [...rows];
+  isLoading.dataListLoading = false
+}
+
+onMounted(() => {
+  getSepList()
+})
+
+provide('rec_id', recId)
+provide('rec_action', recAction)
+provide('rec_item', recItem)
+provide('table_data_loader', isLoading)
+</script>
+
+<template>
+  <div class="rounded-md border p-4">
+    <Header :prep="{ ...headerPrep }" :ref-search-nav="refSearchNav" />
+    <div class="rounded-md border p-4">
+      <AppSepList v-if="!isLoading.dataListLoading" :data="data" />
+    </div>
+  </div>
+</template>
diff --git a/app/pages/(features)/bpjs/sep/index.vue b/app/pages/(features)/bpjs/sep/index.vue
new file mode 100644
index 00000000..7c527526
--- /dev/null
+++ b/app/pages/(features)/bpjs/sep/index.vue
@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/base/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar User',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/doctor']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = true // hasReadAccess(roleAccess)
+</script>
+
+<template>
+  <div>
+    <div v-if="canRead">
+      <ContentSepList />
+    </div>
+    <Error v-else :status-code="403" />
+  </div>
+</template>