feat: implement SEP search functionality and enhance history management

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

@@ -0,0 +1,31 @@
+<script lang="ts" setup>
+import { inject, type Ref } from 'vue'
+import { useRouter } from 'vue-router'
+// Components
+import { Button } from '~/components/pub/ui/button'
+
+const props = defineProps<{
+  rec: { sepNumber: string; }
+}>()
+
+const router = useRouter()
+const record = props.rec || {}
+const recSepId = inject('rec_sep_id') as Ref<string>
+
+function handleSelection() {
+  recSepId.value = record.sepNumber || ''
+  const pathUrl = `/integration/bpjs-vclaim/sep/${record.sepNumber || ''}/detail`
+  router.push({ path: pathUrl })
+}
+</script>
+
+<template>
+  <Button
+    variant="outline"
+    type="button"
+    class="h-[40px] rounded-md border-orange-400 text-orange-400 hover:bg-green-50"
+    @click="handleSelection"
+  >
+    Detail SEP
+  </Button>
+</template>

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

@@ -9,21 +9,25 @@ export interface SepHistoryData {
   careClass: string
 }
 
+const ActionHistory = defineAsyncComponent(() => import('~/components/app/sep/action-history.vue'))
+
+const keysDefault = ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass']
+const colsDefault = [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }]
+const headersDefault = [
+  { label: 'NO. SEP' },
+  { label: 'TGL. SEP' },
+  { label: 'NO. RUJUKAN' },
+  { label: 'DIAGNOSIS AWAL' },
+  { label: 'JENIS PELAYANAN' },
+  { label: 'KELAS RAWAT' },
+]
+
 export const config: Config = {
-  cols: [{ width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }, { width: 100 }],
+  cols: [...colsDefault],
 
-  headers: [
-    [
-      { label: 'NO. SEP' },
-      { label: 'TGL. SEP' },
-      { label: 'NO. RUJUKAN' },
-      { label: 'DIAGNOSIS AWAL' },
-      { label: 'JENIS PELAYANAN' },
-      { label: 'KELAS RAWAT' },
-    ],
-  ],
+  headers: [[...headersDefault]],
 
-  keys: ['sepNumber', 'sepDate', 'referralNumber', 'diagnosis', 'serviceType', 'careClass'],
+  keys: [...keysDefault],
 
   delKeyNames: [{ key: 'code', label: 'Kode' }],
 
@@ -33,3 +37,27 @@ export const config: Config = {
 
   htmls: {},
 }
+
+export const configDetail: Config = {
+  cols: [...colsDefault, { width: 50 }],
+
+  headers: [[...headersDefault, { label: 'AKSI' }]],
+
+  keys: [...keysDefault, 'action'],
+
+  delKeyNames: [{ key: 'code', label: 'Kode' }],
+
+  parses: {},
+
+  components: {
+    action(rec, idx) {
+      return {
+        idx,
+        rec: { ...(rec as object) },
+        component: ActionHistory,
+      }
+    },
+  },
+
+  htmls: {},
+}

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

@@ -7,9 +7,10 @@ import type { SepHistoryData } from './list-cfg.history'
 import type { PaginationMeta } from '~/components/pub/my-ui/pagination/pagination.type'
 
 // Configs
-import { config } from './list-cfg.history'
+import { config, configDetail } from './list-cfg.history'
 
 const props = defineProps<{
+  isAction?: boolean
   data: SepHistoryData[]
   paginationMeta?: PaginationMeta
 }>()
@@ -25,7 +26,7 @@ function handlePageChange(page: number) {
 
 <template>
   <PubMyUiDataTable
-    v-bind="config"
+    v-bind="isAction ? configDetail : config"
     :rows="props.data"
   />
   <PaginationView

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

@@ -16,6 +16,7 @@ import type { PaginationMeta } from '~/components/pub/my-ui/pagination/paginatio
 
 const props = defineProps<{
   open: boolean
+  isAction?: boolean
   histories: Array<SepHistoryData>
   paginationMeta?: PaginationMeta
 }>()
@@ -37,7 +38,7 @@ const emit = defineEmits<{
       </DialogHeader>
 
       <div class="overflow-x-auto rounded-lg border">
-        <ListHistory :data="histories" :pagination-meta="paginationMeta" />
+        <ListHistory :data="histories" :is-action="props.isAction || false" :pagination-meta="paginationMeta" />
       </div>
 
       <DialogFooter></DialogFooter>