fix: refactor page process on outpatient, inpatient, emergency

app/components/pub/my-ui/comp-menu/comp-menu.vue

@@ -43,4 +43,3 @@ function changeMenu(value: string) {
     </div>
   </div>
 </template>
-

app/components/pub/my-ui/menus/submenu.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { type EncounterItem } from "../../../../handlers/encounter-process.handler";
+
+const props = defineProps<{
+  initialActiveMenu: string
+  data: EncounterItem[]
+}>()
+
+const activeMenu = ref(props.initialActiveMenu)
+const emit = defineEmits<{
+  changeMenu: [value: string]
+}>()
+
+function changeMenu(value: string) {
+  activeMenu.value = value
+  emit('changeMenu', value)
+}
+</script>
+
+<template>
+  <div class="mt-4 flex gap-4">
+    <!-- Menu Sidebar -->
+    <div v-if="data.length > 0" class="w-72 flex-shrink-0 rounded-md border bg-white shadow-sm dark:bg-neutral-950">
+      <div class="max-h-[calc(100vh-12rem)] overflow-y-auto p-2">
+        <button v-for="menu in data" :key="menu.id" :data-active="activeMenu === menu.id"
+          class="w-full rounded-md px-4 py-3 text-left text-sm transition-colors data-[active=false]:text-gray-700 data-[active=false]:hover:bg-gray-100 data-[active=true]:bg-primary data-[active=true]:text-white dark:data-[active=false]:text-gray-300 dark:data-[active=false]:hover:bg-neutral-800"
+          @click="changeMenu(menu.id)">
+          {{ menu.title }}
+        </button>
+      </div>
+    </div>
+    <!-- Active Menu Content -->
+    <div v-if="data.find((m) => m.id === activeMenu)?.component"
+      class="flex-1 rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+      <component :is="data.find((m) => m.id === activeMenu)?.component"
+        v-bind="data.find((m) => m.id === activeMenu)?.props" />
+    </div>
+  </div>
+</template>