dev: hotfix, enconter process

2025-10-03 15:10:46 +07:00
parent c251c37273
commit 6dd9b25145
5 changed files with 122 additions and 102 deletions
@@ -174,7 +174,7 @@ body {
 }

 body, table, label {
-  @apply md:!text-xs xl:!text-sm 2xl:!text-base;
+  @apply md:!text-xs xl:!text-sm 2xl:!text-sm;
 }

 /* Container */
@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import AssesmentFunctionList from './assesment-function/list.vue'
+
+const props = defineProps<{
+  initialActiveTab: string
+}>()
+
+const activeTab = ref(props.initialActiveTab)
+const emit = defineEmits<{
+  changeTab: [value: string]
+}>()
+
+interface TabItem {
+  value: string
+  label: string
+  component?: any
+  props?: Record<string, any>
+}
+
+const tabs: TabItem[] = [
+  { value: 'status', label: 'Status Masuk/Keluar' },
+  { value: 'early-medical-assessment', label: 'Pengkajian Awal Medis' },
+  { value: 'rehab-medical-assessment', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
+  { value: 'function-assessment', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
+  { value: 'therapy-protocol', label: 'Protokol Terapi' },
+  { value: 'education-assessment', label: 'Asesmen Kebutuhan Edukasi' },
+  { value: 'consent', label: 'General Consent' },
+  { value: 'patient-note', label: 'CPRJ' },
+  { value: 'prescription', label: 'Order Obat' },
+  { value: 'device', label: 'Order Alkes' },
+  { value: 'mcu-radiology', label: 'Order Radiologi' },
+  { value: 'mcu-lab-pc', label: 'Order Lab PK' },
+  { value: 'mcu-lab-micro', label: 'Order Lab Mikro' },
+  { value: 'mcu-lab-pa', label: 'Order Lab PA' },
+  { value: 'medical-action', label: 'Order Ruang Tindakan' },
+  { value: 'mcu-result', label: 'Hasil Penunjang' },
+  { value: 'consultation', label: 'Konsultasi' },
+  { value: 'resume', label: 'Resume' },
+  { value: 'control', label: 'Surat Kontrol' },
+  { value: 'screening', label: 'Skrinning MPP' },
+  { value: 'supporting-document', label: 'Upload Dokumen Pendukung' },
+]
+
+function changeTab(value: string) {
+  activeTab.value = value;
+  emit('changeTab', value);
+}
+</script>
+
+<template>
+  <!-- Tabs -->
+  <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
+    <Button
+      v-for="tab in tabs"
+      :key="tab.value"
+      :data-active="activeTab === tab.value"
+      class="rounded-full transition data-[active=false]:bg-gray-100 data-[active=true]:bg-primary data-[active=false]:text-gray-700 data-[active=true]:text-white"
+      @click="changeTab(tab.value)"
+    >
+      {{ tab.label }}
+    </Button>
+  </div>
+
+  <!-- Active Tab Content -->
+  <div class="mt-4 rounded-md border p-4">
+    <component
+      v-if="tabs.find((t) => t.value === activeTab)?.component"
+      :is="tabs.find((t) => t.value === activeTab)?.component"
+      :label="tabs.find((t) => t.value === activeTab)?.label"
+      v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
+    />
+  </div>
+</template>
@@ -1,100 +0,0 @@
-<script setup lang="ts">
-import { computed } from 'vue'
-import { useRoute, useRouter } from 'vue-router'
-import AssesmentFunctionList from './assesment-function/list.vue'
-
-interface TabItem {
-  value: string
-  label: string
-  component?: any
-  props?: Record<string, any>
-}
-
-const tabs: TabItem[] = [
-  { value: 'status', label: 'Status Masuk/Keluar' },
-  { value: 'medis', label: 'Pengkajian Awal Medis' },
-  { value: 'rehab', label: 'Pengkajian Awal Medis Rehabilitasi Medis' },
-  { value: 'fungsi', label: 'Asesmen Fungsi', component: AssesmentFunctionList },
-  { value: 'protokol', label: 'Protokol Terapi' },
-  { value: 'edukasi', label: 'Asesmen Kebutuhan Edukasi' },
-  { value: 'consent', label: 'General Consent' },
-  { value: 'cprj', label: 'CPRJ' },
-  { value: 'obat', label: 'Order Obat' },
-  { value: 'alkes', label: 'Order Alkes' },
-  { value: 'radiologi', label: 'Order Radiologi' },
-  { value: 'labpk', label: 'Order Lab PK' },
-  { value: 'labmikro', label: 'Order Lab Mikro' },
-  { value: 'labpa', label: 'Order Lab PA' },
-  { value: 'ruangtindakan', label: 'Order Ruang Tindakan' },
-  { value: 'hasil', label: 'Hasil Penunjang' },
-  { value: 'konsultasi', label: 'Konsultasi' },
-  { value: 'resume', label: 'Resume' },
-  { value: 'kontrol', label: 'Surat Kontrol' },
-  { value: 'skrining', label: 'Skrinning MPP' },
-  { value: 'upload', label: 'Upload Dokumen Pendukung' },
-]
-
-const route = useRoute()
-const router = useRouter()
-
-// activeTab selalu sinkron dengan hash (#fungsi, #status, dll)
-const activeTab = computed({
-  get: () => (route.hash ? route.hash.substring(1) : 'fungsi'),
-  set: (val: string) => {
-    router.replace({ hash: `#${val}` }) // <-- tambahin '#' disini
-  },
-})
-
-const data = {
-  noRm: 'RM21123',
-  nama: 'Ahmad Sutanto',
-  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
-  tanggalKunjungan: '23 April 2024',
-  klinik: 'Bedah',
-  tanggalLahir: '23 April 1990 (25 Tahun)',
-  jenisKelamin: 'Laki-laki',
-  jenisPembayaran: 'JKN',
-  noBilling: '223332',
-  dpjp: 'dr. Syaifullah, Sp.OT(K)',
-}
-</script>
-
-<template>
-  <div class="w-full">
-    <div class="mb-4">
-      <button
-        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
-      >
-        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
-        </svg>
-        Kembali ke Daftar Kunjungan
-      </button>
-    </div>
-
-    <AppPatientQuickInfo :data="data" />
-
-    <!-- Tabs -->
-    <div class="mt-4 flex flex-wrap gap-2 rounded-md border bg-white p-4 shadow-sm">
-      <button
-        v-for="tab in tabs"
-        :key="tab.value"
-        :data-active="activeTab === tab.value"
-        class="flex-shrink-0 rounded-full px-4 py-2 text-sm font-medium transition data-[active=false]:bg-gray-100 data-[active=true]:bg-green-600 data-[active=false]:text-gray-700 data-[active=true]:text-white"
-        @click="activeTab = tab.value"
-      >
-        {{ tab.label }}
-      </button>
-    </div>
-
-    <!-- Active Tab Content -->
-    <div class="mt-4 rounded-md border p-4">
-      <component
-        :is="tabs.find((t) => t.value === activeTab)?.component"
-        v-if="tabs.find((t) => t.value === activeTab)?.component"
-        v-bind="tabs.find((t) => t.value === activeTab)?.props || {}"
-        :label="tabs.find((t) => t.value === activeTab)?.label"
-      />
-    </div>
-  </div>
-</template>
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
+
+const route = useRoute()
+const router = useRouter()
+
+// activeTab selalu sinkron dengan query param
+const activeTab = computed({
+  get: () => (route.query?.tab && typeof route.query.tab === 'string' ? route.query.tab : 'status'),
+  set: (val: string) => {
+    router.replace({ path: route.path, query: { tab: val } });
+  },
+})
+
+const data = {
+  noRm: 'RM21123',
+  nama: 'Ahmad Sutanto',
+  alamat: 'Jl Jaksa Agung Suprapto No. 12, Jakarta',
+  tanggalKunjungan: '23 April 2024',
+  klinik: 'Bedah',
+  tanggalLahir: '23 April 1990 (25 Tahun)',
+  jenisKelamin: 'Laki-laki',
+  jenisPembayaran: 'JKN',
+  noBilling: '223332',
+  dpjp: 'dr. Syaifullah, Sp.OT(K)',
+}
+</script>
+
+<template>
+  <div class="w-full">
+    <div class="mb-4">
+      <Button
+        class="flex items-center gap-2 rounded-full border border-orange-400 bg-orange-50 px-3 py-1 text-sm font-medium text-orange-600 hover:bg-orange-100"
+      >
+        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
+        </svg>
+        Kembali ke Daftar Kunjungan
+      </Button>
+    </div>
+
+    <AppPatientQuickInfo :data="data" />
+
+    <AppEncounterProcess :initial-active-tab="activeTab" @change-tab="activeTab = $event" />
+  </div>
+</template>
@@ -35,7 +35,7 @@ const canCreate = hasCreateAccess(roleAccess)

 <template>
  <div v-if="canCreate">
-    <ContentEncounterHome />
+    <ContentEncounterProcess />
  </div>
  <Error v-else :status-code="403" />
 </template>