feat(encounter): adjust component encounter list

app/pages/(features)/emergency/encounter/index.vue

@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="emergency"
+        sub-class-code="emg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>

app/pages/(features)/inpatient/encounter/index.vue

@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="inpatient"
+        sub-class-code="vk"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>

app/pages/(features)/outpatient/encounter/index.vue

@@ -1,10 +1,47 @@
 <script setup lang="ts">
-  const route = useRoute();
+import type { PagePermission } from '~/models/role'
+import Error from '~/components/pub/my-ui/error/error.vue'
+import { PAGE_PERMISSIONS } from '~/lib/page-permission'
+
+definePageMeta({
+  middleware: ['rbac'],
+  roles: ['system', 'doctor', 'nurse', 'admisi', 'pharmacy', 'billing', 'management'],
+  title: 'Daftar Kunjungan',
+  contentFrame: 'cf-full-width',
+})
+
+const route = useRoute()
+
+useHead({
+  title: () => route.meta.title as string,
+})
+
+const roleAccess: PagePermission = PAGE_PERMISSIONS['/rehab/encounter']
+
+const { checkRole, hasReadAccess } = useRBAC()
+
+// Check if user has access to this page
+const hasAccess = checkRole(roleAccess)
+if (!hasAccess) {
+  navigateTo('/403')
+}
+
+// Define permission-based computed properties
+const canRead = hasReadAccess(roleAccess)
 </script>
 
 <template>
-  <div class="p-10 text-center">
-    <div class="mb-5 text-base font-semibold">Hello world!!</div>
-    <div>You are accessing "{{ route.fullPath }}"</div>
+  <div>
+    <div v-if="canRead">
+      <ContentEncounterList
+        class-code="outpatient"
+        sub-class-code="reg"
+        type="encounter"
+      />
+    </div>
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>

app/pages/(features)/rehab/encounter/index.vue

@@ -33,8 +33,15 @@ const canRead = hasReadAccess(roleAccess)
 <template>
   <div>
     <div v-if="canRead">
-      <ContentEncounterList type="encounter" />
+      <ContentEncounterList
+        class-code="ambulatory"
+        sub-class-code="rehab"
+        type="encounter"
+      />
     </div>
-    <Error v-else :status-code="403" />
+    <Error
+      v-else
+      :status-code="403"
+    />
   </div>
 </template>