feat: add patient info components and update navigation for encounter details

app/components/app/encounter/dropdown-action.vue

@@ -29,7 +29,7 @@ const linkItems: LinkItem[] = [
     icon: 'i-lucide-eye',
   },
   {
-    label: 'Edit',
+    label: 'Process',
     value: 'edit',
     onClick: () => {
       edit()

app/components/app/encounter/patient-info-collapsible.vue

@@ -13,18 +13,14 @@ const props = defineProps<{
 
 <template>
   <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
-        <!-- Data Pasien -->    
-    <Accordion
-      type="single"
-      defaultValue="item-patient"
-      collapsible
-    >
+    <!-- Data Pasien -->
+    <Accordion type="single" defaultValue="item-patient" collapsible>
       <AccordionItem value="item-patient" class="border-none">
         <AccordionTrigger class="focus:outline-none focus:ring-0">
           <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
         </AccordionTrigger>
         <AccordionContent>
-          <EncounterQuickInfoFull :data="props.data" />
+          <EncounterQuickInfoFull :data="props.data" :is-grid="true" />
         </AccordionContent>
       </AccordionItem>
     </Accordion>

app/components/app/encounter/patient-info.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+// Types
+import type { Encounter } from '~/models/encounter'
+
+// Components
+import EncounterQuickInfoFull from '~/components/app/encounter/quick-info-full.vue'
+
+const props = defineProps<{
+  data: Encounter
+}>()
+</script>
+
+<template>
+  <div class="w-full rounded-md border bg-white p-4 shadow-sm dark:bg-neutral-950">
+    <h2 class="mb-4 text-base font-semibold md:text-lg 2xl:text-xl">Data Pasien:</h2>
+    <EncounterQuickInfoFull :data="props.data" :is-grid="false" />
+  </div>
+</template>

app/components/app/encounter/quick-info-full.vue

@@ -3,6 +3,7 @@
 import { format, parseISO } from 'date-fns'
 import { id as localeID } from 'date-fns/locale'
 import { getAge } from '~/lib/date'
+import { cn } from "~/lib/utils"
 
 // Types
 import type { Encounter } from '~/models/encounter'
@@ -10,8 +11,11 @@ import { paymentTypes } from '~/lib/constants.vclaim'
 
 const props = defineProps<{
   data: Encounter
+  isGrid?: boolean
 }>()
 
+const isGrid = props.isGrid !== undefined ? props.isGrid : true
+
 // Address
 const address = computed(() => {
   if (props.data.patient.person.addresses && props.data.patient.person.addresses.length > 0) {
@@ -139,7 +143,7 @@ const bedNumber = computed(() => {
 
 <template>
   <!-- 4 Column Grid Layout -->
-  <div class="grid grid-cols-1 gap-4 sm:grid-cols-4">
+  <div :class="cn('grid grid-cols-1 gap-4', isGrid && 'sm:grid-cols-4')">
     <!-- No. RM -->
     <div class="flex gap-1">
       <label class="w-[150px] flex-none text-sm font-semibold text-gray-700 dark:text-gray-300">No. RM</label>