From 786107ddd9da543fbc3f1c87ee71c20e768f4257 Mon Sep 17 00:00:00 2001
From: Munawwirul Jamal <munawwirul.jamal@gmail.com>
Date: Thu, 4 Dec 2025 22:57:33 +0700
Subject: [PATCH] feat/things-munaja: content switcher

---
 app/components/app/encounter/quick-info.vue   | 10 +--
 .../app/encounter/quick-shortcut.vue          | 80 +++++++++---------
 app/components/content/encounter/process.vue  | 28 ++-----
 .../content-switcher/content-switcher.vue     | 82 ++++++-------------
 app/components/pub/my-ui/doc-entry/block.vue  |  4 +-
 app/handlers/encounter-init.handler.ts        | 53 ++++++------
 6 files changed, 110 insertions(+), 147 deletions(-)

diff --git a/app/components/app/encounter/quick-info.vue b/app/components/app/encounter/quick-info.vue
index 4705264b..2c486a73 100644
--- a/app/components/app/encounter/quick-info.vue
+++ b/app/components/app/encounter/quick-info.vue
@@ -42,14 +42,14 @@ if (props.data.responsible_doctor) {
 </script>
 
 <template>
-  <div class="w-full">
+  <div class="w-full py-3 2xl:py-4 px-5">
     <!-- Data Pasien -->
     <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">
       {{ data.patient.person.name }} - {{ data.patient.number }}
     </h2>
     <div class="grid grid-cols-3">
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label class="font-semibold">Tgl. Lahir</DE.Label>
             <DE.Colon />
@@ -58,7 +58,7 @@ if (props.data.responsible_doctor) {
             </DE.Field>
           </DE.Cell>
           <DE.Cell>
-            <DE.Label class="font-semibold">Jns. Kelamin</DE.Label>
+            <DE.Label class="font-semibold"><span class="hidden xl:inline">Jns.</span> Kelamin</DE.Label>
             <DE.Colon />
             <DE.Field>
               {{ genderCodes[data.patient.person.gender_code as keyof typeof genderCodes] }}
@@ -74,7 +74,7 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label position="dynamic" class="font-semibold">Tgl. Masuk</DE.Label>
             <DE.Colon />
@@ -99,7 +99,7 @@ if (props.data.responsible_doctor) {
         </DE.Block>
       </div>
       <div>
-        <DE.Block mode="preview">
+        <DE.Block mode="preview" class="!mb-0">
           <DE.Cell>
             <DE.Label position="dynamic" class="font-semibold">DPJP</DE.Label>
             <DE.Colon />
diff --git a/app/components/app/encounter/quick-shortcut.vue b/app/components/app/encounter/quick-shortcut.vue
index 751b2feb..1ca7b23d 100644
--- a/app/components/app/encounter/quick-shortcut.vue
+++ b/app/components/app/encounter/quick-shortcut.vue
@@ -87,44 +87,46 @@ function handleClick(value: string) {
 </script>
 
 <template>
-  <h2 class="mb-4 font-semibold md:text-base 2xl:text-lg">Menu Cepat:</h2>
-  <div class="flex flex-wrap gap-2 mb-2">
-    <Button
-      v-for="item in itemsOne"
-      :key="item.value"
-      :class="[
-        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
-        activeMenu === item.value
-          ? 'border-orange-300 bg-orange-400 text-white'
-          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
-      ]"
-      @click="handleClick(item.value)"
-    >
-      <Icon v-if="item.type === 'icon'"
-        :name="item.icon"
-        class="h-4 w-4"
-      />
-      <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
-      {{ item.label }}
-    </Button>
-  </div>
-  <div class="flex flex-wrap gap-2 mb-2">
-    <Button
-      v-for="item in itemsTwo"
-      :key="item.value"
-      :class="[
-        'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
-        activeMenu === item.value
-          ? 'border-orange-300 bg-orange-400 text-white'
-          : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
-      ]"
-      @click="handleClick(item.value)"
-    >
-      <Icon
-        :name="item.icon"
-        class="h-4 w-4"
-      />
-      {{ item.label }}
-    </Button>
+  <div class="w-full py-3 2xl:py-4 px-5">
+    <h2 class="mb-2 font-semibold md:text-base 2xl:text-lg">Akses Cepat:</h2>
+    <div class="flex flex-wrap gap-2 mb-2">
+      <Button
+        v-for="item in itemsOne"
+        :key="item.value"
+        :class="[
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+          activeMenu === item.value
+            ? 'border-orange-300 bg-orange-400 text-white'
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+        ]"
+        @click="handleClick(item.value)"
+      >
+        <Icon v-if="item.type === 'icon'"
+          :name="item.icon"
+          class="h-4 w-4"
+        />
+        <img v-else-if="item.type === 'image'" :src="item.icon" class="h-[24px] w-[24px] object-contain" />
+        {{ item.label }}
+      </Button>
+    </div>
+    <div class="flex flex-wrap gap-2 mb-2">
+      <Button
+        v-for="item in itemsTwo"
+        :key="item.value"
+        :class="[
+          'flex items-center gap-2 rounded-lg border px-3 py-1 text-sm font-medium transition-colors',
+          activeMenu === item.value
+            ? 'border-orange-300 bg-orange-400 text-white'
+            : 'border-orange-300 bg-white text-orange-500 hover:bg-orange-400 hover:text-white'
+        ]"
+        @click="handleClick(item.value)"
+      >
+        <Icon
+          :name="item.icon"
+          class="h-4 w-4"
+        />
+        {{ item.label }}
+      </Button>
+    </div>
   </div>
 </template>
diff --git a/app/components/content/encounter/process.vue b/app/components/content/encounter/process.vue
index 244d2b7e..fd92dc0e 100644
--- a/app/components/content/encounter/process.vue
+++ b/app/components/content/encounter/process.vue
@@ -154,7 +154,7 @@ onMounted(async () => {
 ///// Functions
 function handleClick(type: string) {
   if (type === 'draft') {
-    router.back()
+    router.push(`/${props.classCode}/encounter`)
   }
 }
 
@@ -181,27 +181,13 @@ async function getData() {
 
 <template>
   <div class="w-full">
-    <div class="bg-white p-4 dark:bg-slate-800 2xl:p-5">
-      <div class="mb-4 flex">
-        <div>
-          <ContentNavBa
-            label="Kembali"
-            @click="handleClick"
-          />
-        </div>
-        <!-- <div class="ms-auto pe-3 pt-1 text-end text-xl 2xl:text-2xl font-semibold">
-            Pasien: {{ data.patient.person.name }} --- No. RM: {{ data.patient.number }}
-        </div> -->
+    <div class="bg-white dark:bg-slate-800">
+      <div class="p-3 2xl:p-4 border-b border-slate-300  dark:border-slate-700">
+        <ContentNavBa label="Kembali Ke Daftar" @click="handleClick" />
       </div>
-      <ContentSwitcher
-        :active="1"
-        :height="150"
-      >
+      <ContentSwitcher :active="1" class="h-[130px] 2xl:h-[160px]">
         <template v-slot:content1>
-          <EncounterPatientInfo
-            v-if="isShowPatient"
-            :data="data"
-          />
+          <EncounterPatientInfo v-if="isShowPatient" :data="data" />
         </template>
         <template v-slot:content2>
           <EncounterHistoryButtonMenu v-if="isShowPatient" />
@@ -214,4 +200,4 @@ async function getData() {
       @change-menu="activeMenu = $event"
     />
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/app/components/pub/my-ui/content-switcher/content-switcher.vue b/app/components/pub/my-ui/content-switcher/content-switcher.vue
index 3b79f193..267d94c1 100644
--- a/app/components/pub/my-ui/content-switcher/content-switcher.vue
+++ b/app/components/pub/my-ui/content-switcher/content-switcher.vue
@@ -1,40 +1,33 @@
 <script setup lang="ts">
 const props = defineProps<{
   height?: number
+  class?: string
   activeTab?: 1 | 2
 }>()
 
+const classVal = computed(() => {
+  return props.class ? props.class : ''
+})
 const activeTab = ref(props.activeTab || 1)
 
-function handleClick(value: 1 | 2) {
-  activeTab.value = value
+function switchActiveTab() {
+  activeTab.value = activeTab.value === 1 ? 2 : 1
 }
 </script>
 
 <template>
-  <div class="content-switcher" :style="`height: ${height || 200}px`">
-    <div :class="`${activeTab === 1 ? 'active' : 'inactive'}`">
-      <div class="content-wrapper">
-        <div>
-          <slot name="content1" />
-        </div>
+  <div :class="`content-switcher ${classVal}`" :style="height ? `height:${200}px` : ''">
+    <div class="wrapper">
+      <div :class="`item item-1 ${activeTab === 1 ? 'active' : 'inactive'}`">
+        <slot name="content1" />
       </div>
-      <div class="content-nav">
-        <button @click="handleClick(1)">
-          <Icon name="i-lucide-chevron-right" />
+      <div :class="`nav border-slate-300 ${ activeTab == 1 ? 'border-l' : 'border-r'}`">
+        <button @click="switchActiveTab()" class="!p-0 w-full h-full">
+          <Icon :name="activeTab == 1 ? 'i-lucide-chevron-left' : 'i-lucide-chevron-right'" class="text-3xl" />
         </button>
       </div>
-    </div>
-    <div :class="`${activeTab === 2 ? 'active' : 'inactive'}`">
-      <div class="content-nav">
-        <button @click="handleClick(2)">
-          <Icon name="i-lucide-chevron-left" />
-        </button>
-      </div>
-      <div class="content-wrapper">
-        <div>
-          <slot name="content2" />
-        </div>
+      <div :class="`item item-2 ${activeTab === 2 ? 'active' : 'inactive'}`">
+        <slot name="content2" />
       </div>
     </div>
   </div>
@@ -42,45 +35,24 @@ function handleClick(value: 1 | 2) {
 
 <style>
   .content-switcher {
-    @apply flex overflow-hidden gap-3
+    @apply overflow-hidden
   }
-  .content-switcher > * {
-    @apply border border-slate-300 rounded-md flex overflow-hidden
+  .wrapper {
+    @apply flex w-[200%] h-full
+  }
+  .item {
+    @apply w-[calc(50%-60px)]
   }
 
-  .content-wrapper {
-    @apply p-4 2xl:p-5 overflow-hidden grow
+  .item-1.active {
+    @apply ms-0 transition-all duration-500 ease-in-out
   }
-  .inactive .content-wrapper {
-    @apply p-0 w-0
+  .item-1.inactive {
+    @apply -ms-[calc(50%-60px)] transition-all duration-500 ease-in-out
   }
 
-  .content-nav {
-    @apply h-full flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
+  .nav {
+    @apply h-full w-[60px] flex flex-row items-center justify-center content-center !text-2xl overflow-hidden
   }
 
-  .content-nav button {
-    @apply pt-2 px-2 h-full w-full
-  }
-
-  /* .content-switcher .inactive > .content-wrapper {
-    @apply w-0 p-0 opacity-0 transition-all duration-500 ease-in-out
-  } */
-  .content-switcher .inactive {
-    @apply w-16 transition-all duration-500 ease-in-out
-  }
-  .content-switcher .inactive > .content-nav {
-    @apply w-full transition-all duration-100 ease-in-out
-  }
-
-  .content-switcher .active {
-    @apply grow transition-all duration-500 ease-in-out
-  }
-  .content-switcher .active > .content-nav {
-    @apply w-0 transition-all duration-100 ease-in-out
-  }
-  /* .content-switcher .active > .content-wrapper {
-    @apply w-full delay-1000 transition-all duration-1000 ease-in-out
-  } */
-
 </style>
diff --git a/app/components/pub/my-ui/doc-entry/block.vue b/app/components/pub/my-ui/doc-entry/block.vue
index b51ad72a..7e217542 100644
--- a/app/components/pub/my-ui/doc-entry/block.vue
+++ b/app/components/pub/my-ui/doc-entry/block.vue
@@ -53,8 +53,8 @@ const settingClass = computed(() => {
       '[&_.cell]:2xl:flex',
     ][getBreakpointIdx(props.cellFlexPoint)]
     cls += ' [&_.label]:flex-shrink-0 ' + [
-      '[&_.label]:md:w-12 [&_.label]:xl:w-20',
-      '[&_.label]:md:w-16 [&_.label]:xl:w-24',
+      '[&_.label]:md:w-16 [&_.label]:xl:w-20',
+      '[&_.label]:md:w-20 [&_.label]:xl:w-24',
       '[&_.label]:md:w-24 [&_.label]:xl:w-32',
       '[&_.label]:md:w-32 [&_.label]:xl:w-40',
       '[&_.label]:md:w-44 [&_.label]:xl:w-52',
diff --git a/app/handlers/encounter-init.handler.ts b/app/handlers/encounter-init.handler.ts
index 37f83605..699bcd1c 100644
--- a/app/handlers/encounter-init.handler.ts
+++ b/app/handlers/encounter-init.handler.ts
@@ -62,17 +62,19 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
   },
-  earlyNurseryAssessment: {
-    id: 'early-nursery-assessment',
-    title: 'Pengkajian Awal Keperawatan',
-    classCode: ['ambulatory', 'emergency', 'inpatient'],
-    unit: 'all',
-  },
+  // NOTE : HIDDEN UNTIL IT IS READY
+  // earlyNurseryAssessment: {
+  //   id: 'early-nursery-assessment',
+  //   title: 'Pengkajian Awal Keperawatan',
+  //   classCode: ['ambulatory', 'emergency', 'inpatient'],
+  //   unit: 'all',
+  // },
   earlyMedicalAssessment: {
     id: 'early-medical-assessment',
     title: 'Pengkajian Awal Medis',
     classCode: ['ambulatory', 'emergency', 'inpatient'],
     unit: 'all',
+    afterId: 'early-medical-assessment',
   },
   earlyMedicalRehabAssessment: {
     id: 'rehab-medical-assessment',
@@ -81,20 +83,27 @@ const defaultKeys: Record<string, any> = {
     unit: 'rehab',
     afterId: 'early-medical-assessment',
   },
-  functionAssessment: {
-    id: 'function-assessment',
-    title: 'Asesmen Fungsi',
-    classCode: ['ambulatory'],
-    unit: 'rehab',
-    afterId: 'rehab-medical-assessment',
-  },
-  therapyProtocol: {
-    id: 'therapy-protocol',
-    classCode: ['ambulatory'],
-    title: 'Protokol Terapi',
-    unit: 'rehab',
-    afterId: 'function-assessment',
+  fkr: {
+    id: 'fkr',
+    title: 'FKR',
+    classCode: ['ambulatory', 'emergency', 'inpatient'],
+    unit: 'all',
   },
+  // NOTE: Replaced by FRK
+  // functionAssessment: {
+  //   id: 'function-assessment',
+  //   title: 'Asesmen Fungsi',
+  //   classCode: ['ambulatory'],
+  //   unit: 'rehab',
+  //   afterId: 'rehab-medical-assessment',
+  // },
+  // therapyProtocol: {
+  //   id: 'therapy-protocol',
+  //   classCode: ['ambulatory'],
+  //   title: 'Protokol Terapi',
+  //   unit: 'rehab',
+  //   afterId: 'function-assessment',
+  // },
   chemotherapyProtocol: {
     id: 'chemotherapy-protocol',
     title: 'Protokol Kemoterapi',
@@ -217,12 +226,6 @@ const defaultKeys: Record<string, any> = {
     classCode: ['ambulatory', 'emergency'],
     unit: 'all',
   },
-  fkr: {
-    id: 'fkr',
-    title: 'FKR',
-    classCode: ['ambulatory', 'emergency', 'inpatient'],
-    unit: 'all',
-  },
   refBack: {
     id: 'reference-back',
     title: 'PRB',